:root{--drawing-paper:#fafdff;--drawing-line:#d8e9f5;--drawing-ink:#34506d;--drawing-accent:#5d9ed5;--drawing-shadow:0 5px 22px #578bb712}
.navigation{grid-template-columns:repeat(var(--nav-count,4),minmax(0,1fr))}
.navigation .nav-link{min-width:0}
.navigation .nav-link span{white-space:nowrap}
.drawing-content{display:grid;gap:16px}
.drawing-card{background:var(--drawing-paper);border:1px solid var(--drawing-line);border-radius:22px;padding:22px;box-shadow:var(--drawing-shadow);color:var(--drawing-ink);min-width:0}
.drawing-card h2{font-size:1.05rem;line-height:1.5;margin:0 0 12px;font-weight:800}
.drawing-kicker{display:block;color:var(--drawing-accent);font-size:.65rem;letter-spacing:.17em;font-weight:800;margin-bottom:7px}
.drawing-instructions{padding-left:1.4em;margin:12px 0;font-size:.87rem;line-height:1.8}
.drawing-instructions li+li{margin-top:8px}
.drawing-instructions strong{color:#347fb7}
.drawing-durations,.drawing-queue{display:flex;flex-wrap:wrap;gap:9px 18px;padding:12px 14px;border-radius:13px;background:#edf6fc;font-size:.8rem}
.drawing-fine{font-size:.75rem;line-height:1.7;color:#6c849a;margin:12px 0 0}
.drawing-access>[role=status]{font-size:.88rem;line-height:1.7}
.drawing-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.drawing-actions .button{min-height:44px;flex:1}
.drawing-feedback:empty{display:none}
.drawing-feedback{font-size:.8rem;color:#9a5165;line-height:1.6}
.drawing-studio-heading,.drawing-studio-footer{display:flex;justify-content:space-between;align-items:center;gap:12px}
.drawing-clock{font-variant-numeric:tabular-nums;background:#e4f2fc;color:#2b78af;border-radius:12px;padding:8px 13px;font-weight:800}
.drawing-studio-heading h2{margin:0}
.drawing-tools{display:flex;flex-wrap:wrap;align-items:center;gap:10px;border:0;padding:0;margin:18px 0 12px;min-width:0}
.drawing-tools label{font-size:.8rem;font-weight:700;display:flex;gap:8px;align-items:center;min-height:44px}
.drawing-color input{width:44px;height:40px;border:1px solid var(--drawing-line);border-radius:10px;padding:4px;background:white;cursor:pointer}
.drawing-width{flex:1}
.drawing-width input{width:80px;min-width:50px;flex:1;accent-color:var(--drawing-accent)}
.drawing-width output{width:2ch;font-variant-numeric:tabular-nums}
.drawing-tools .button{min-height:44px;font-size:.78rem}
.drawing-tools [aria-pressed=true]{background:#d4eafa;border-color:#83b6dc;color:#28618c}
.drawing-canvas-wrap{border:1px solid var(--drawing-line);border-radius:14px;overflow:hidden;background-color:white;background-image:linear-gradient(45deg,#eef3f8 25%,transparent 25%),linear-gradient(-45deg,#eef3f8 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#eef3f8 75%),linear-gradient(-45deg,transparent 75%,#eef3f8 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}
[data-drawing-canvas]{display:block;width:100%;height:auto;aspect-ratio:16/9;touch-action:none;cursor:crosshair}
[data-drawing-canvas].is-disabled{cursor:default}
.drawing-studio-footer{margin-top:14px;font-size:.72rem;color:#6c849a}
.drawing-studio-footer .button{min-height:44px}
.drawing-card [hidden],.drawing-studio[hidden]{display:none!important}
.drawing-card button:disabled{cursor:not-allowed;opacity:.45}
.drawing-card :focus-visible{outline:3px solid #589bd1;outline-offset:3px}
.drawing-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(min-width:900px){.drawing-studio{padding:26px}.drawing-tools{gap:16px}.drawing-width{max-width:240px}}
@media(max-width:380px){.drawing-card{padding:16px}.navigation .nav-link span{font-size:9px}.drawing-actions{flex-direction:column}}