*{box-sizing:border-box}body{margin:0;background:#f7f1e8;color:#382719;font:16px system-ui}header{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:16px 24px;border-bottom:1px solid #e6d8c8}h1{font-size:24px;margin:0}a{color:inherit}button,select{font:600 14px system-ui;min-height:44px;padding:10px 14px;border:1px solid #d7c6b1;border-radius:16px;background:#fffaf4;color:#382719;cursor:pointer}button:disabled{opacity:.45;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #bb540b;outline-offset:3px}button[aria-pressed=true]{outline:3px solid #a94d18;outline-offset:2px}#download{background:#ffbe64}main{display:grid;grid-template-columns:240px 1fr;max-width:1200px;margin:auto;height:calc(100dvh - 80px);gap:20px;padding:20px}aside{overflow:auto;padding:5px;display:flex;flex-direction:column;gap:18px}aside p{margin:0}#palette{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}#palette button{height:42px;padding:0;border:2px solid #fff;box-shadow:0 1px 5px #0003}.tools{display:flex;gap:8px;flex-wrap:wrap}label{display:grid;gap:9px}.help,#status{font-size:13px;line-height:1.5}#viewport{overflow:auto;min-height:0;background:#e8ddce;border-radius:20px;padding:18px}#paper{position:relative;margin:auto;background:white;width:100%;box-shadow:0 5px 20px #49332122}canvas{display:block;width:100%;height:100%}#paint{touch-action:none}#lines{position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply}@media(max-width:700px){header{padding:10px;gap:8px}h1{font-size:18px}header a{font-size:12px}header button{font-size:12px;padding:8px}main{height:auto;display:flex;flex-direction:column;padding:10px;gap:12px}aside{overflow:visible;display:grid;grid-template-columns:1fr 1fr;gap:14px}aside>p:first-child{display:none}#palette{grid-column:1/-1;grid-template-columns:repeat(8,1fr);gap:7px}#palette button{min-height:36px;height:36px}.help,#status{grid-column:1/-1}#viewport{height:66dvh;min-height:400px;padding:10px}.tools button{padding:8px}label{font-size:13px}}
#brush-cursor{display:none;position:absolute;z-index:4;border:2px solid #3d2b1f;border-radius:50%;box-shadow:0 0 0 1px white,inset 0 0 0 1px white;pointer-events:none;transform:translate(-50%,-50%)}#brush-cursor.eraser{border-style:dashed;background:#ffffff30}#paint.precise{cursor:none}#sample{display:inline-block;width:24px;height:24px;max-width:60px;border-radius:50%;background:#ed7b23;border:1px solid #3d2b1f}#size-value{font-variant-numeric:tabular-nums;font-weight:700}.tools button[aria-pressed=true]{background:#ffcf9e;color:#3d2b1f;font-weight:800;box-shadow:0 3px 9px #9e58252b}#palette button{min-width:44px;min-height:44px}aside{gap:14px}@media(max-width:700px){#palette{grid-template-columns:repeat(6,minmax(44px,1fr))}}@media(max-width:360px){#palette{grid-template-columns:repeat(5,minmax(44px,1fr))}}

/* Частые действия всегда находятся над холстом. */
[hidden]{display:none!important}body{height:100dvh;display:flex;flex-direction:column;overflow:hidden}header{flex:none;padding:12px 20px}.actions{display:flex;gap:8px}main{height:auto;flex:1;min-height:0;width:100%;max-width:1600px;padding:12px;gap:16px;grid-template-columns:240px minmax(0,1fr)}aside{gap:12px}.workspace{display:flex;flex-direction:column;min-width:0;min-height:0;gap:8px}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}.zoom-label{display:flex;align-items:center;gap:8px;font-size:13px}#status{margin:0;min-height:20px;color:#69513d}#viewport{flex:1;min-height:0;height:auto;border-radius:18px;padding:12px}#size-control{grid-template-columns:1fr auto;align-items:center}#size-control input{grid-column:1/-1;width:100%}#sample{grid-column:2}#drawing{width:100%;min-width:0}.page-label{font-size:13px}#print-image{display:none}.notice{padding:16px;background:#ffdfb7}dialog{border:1px solid #d7c6b1;border-radius:22px;background:#f7f1e8;color:#382719;width:min(860px,92vw);max-height:85dvh;padding:20px}dialog::backdrop{background:#38271988}.dialog-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.dialog-top h2{font-size:22px}#drawing-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}#drawing-grid button{padding:8px;font-size:12px}#drawing-grid img{display:block;width:100%;aspect-ratio:2/3;object-fit:contain;background:white;margin-bottom:8px}#drawing-grid button[aria-current=true]{outline:3px solid #a94d18}#clear{background:transparent}
@media(max-width:900px){main{grid-template-columns:210px minmax(0,1fr)}.toolbar button{padding:8px}header{padding:10px}h1{font-size:20px}}
@media(max-width:700px){body{height:auto;min-height:100dvh;overflow:auto}header{flex-wrap:wrap}header h1{font-size:19px}.actions{margin-left:auto}main{display:flex;padding:10px;gap:12px}aside{display:grid;grid-template-columns:1fr 1fr;gap:10px;overflow:visible}aside>.help{display:none}.page-label{grid-column:1}.page-label select{font-size:12px}#choose{align-self:end}#palette{grid-template-columns:repeat(8,minmax(0,1fr));grid-column:1/-1;gap:6px}#palette button{min-width:0;min-height:44px;height:44px}.tools{grid-column:1/-1;flex-wrap:nowrap}.tools button{flex:1}#clear{justify-self:end}#size-control{grid-column:1/-1}#sample{max-width:36px;max-height:36px}.workspace{min-height:480px}.toolbar{position:sticky;top:0;z-index:5;background:#f7f1e8;padding:8px 0}.toolbar .tools{flex:1}.zoom-label{font-size:0}.zoom-label select{font-size:12px}#next-page{font-size:12px}#viewport{height:68dvh;min-height:380px;flex:none}#drawing-grid{grid-template-columns:repeat(3,minmax(0,1fr))}#status{font-size:12px}}
@media(max-width:380px){#palette{grid-template-columns:repeat(6,minmax(0,1fr))}#drawing-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media print{@page{size:A4 portrait;margin:10mm}body{display:block;height:auto;background:white;overflow:visible}body>*{display:none!important}#print-image{display:block!important;width:auto;max-width:100%;height:270mm;object-fit:contain;margin:auto}}

@media(max-width:700px){#palette{grid-template-columns:repeat(6,minmax(44px,1fr))}}