.drawing-board{flex:1;min-width:0;height:100%;min-height:0;container:drawing-board/size}.drawing-board__layout{flex-direction:column;gap:12px;height:100%;display:flex}.drawing-board__stage{flex-direction:column;flex:1;gap:8px;min-height:0;display:flex}.drawing-board__canvas-area{flex:1;place-items:center;min-height:160px;display:grid;container-type:size}.drawing-board__canvas{aspect-ratio:1;border-radius:18px;width:min(100cqw,100cqh);box-shadow:0 0 0 1px #1e1a1626,0 3px 12px #1e1a162e}.drawing-board__tools{flex-direction:column;gap:10px;width:100%;max-width:520px;margin:0 auto;display:flex;position:relative}@container drawing-board (orientation:landscape) and (width>=700px){.drawing-board__layout{flex-direction:row;align-items:center}.drawing-board__stage{height:100%}.drawing-board__tools{flex:none;width:340px;margin:0}}@container drawing-board (orientation:portrait) and (height<=640px){.drawing-board__layout,.drawing-board__tools{gap:7px}.palette{gap:6px}}.drawing-board svg,.color-sheet svg{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;width:22px;height:22px}.drawing-board button{font:inherit;color:inherit;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.palette{grid-template-columns:repeat(8,minmax(0,1fr));gap:8px;display:grid;position:relative}.palette__swatch,.palette__more,.palette__drag{aspect-ratio:1;border-radius:50%;justify-self:center;width:100%;max-width:40px;padding:0}.palette__swatch{background:var(--swatch);box-shadow:inset 0 0 0 1px var(--ring);cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;border:0;transition:transform .12s,opacity .12s}.palette__swatch[aria-checked=true]{box-shadow:inset 0 0 0 1px var(--ring), 0 0 0 2px var(--bg), 0 0 0 4px var(--fg);transform:scale(1.06)}.palette__swatch[data-dragging]{opacity:.3}.palette__more{border:1.5px dashed color-mix(in srgb, var(--fg) 35%, transparent);color:color-mix(in srgb, var(--fg) 60%, transparent);cursor:pointer;background:0 0;place-items:center;display:grid}.palette__more svg{stroke-width:2.6px;width:16px;height:16px}.palette__drag{background:var(--swatch);width:40px;box-shadow:inset 0 0 0 1px var(--ring), 0 4px 12px #1e1a164d;pointer-events:none;position:absolute;transform:translate(-50%,-50%)scale(1.1)}.drawing-board__thickness{align-items:center;gap:8px;display:flex}.drawing-board__thickness input{min-width:0;accent-color:var(--accent);flex:1}.drawing-board__icon-button{cursor:pointer;background:0 0;border:0;border-radius:10px;flex:none;place-items:center;width:36px;height:36px;display:grid}.drawing-board__icon-button:disabled{opacity:.35;cursor:default}.drawing-board .drawing-board__icon-button svg{stroke-width:2.6px;width:18px;height:18px}.drawing-board__width-preview{width:40px;height:40px;box-shadow:0 0 0 1px var(--line);background:#fff;border-radius:10px;flex:none;place-items:center;display:grid}.drawing-board__width-preview span{border-radius:50%}.drawing-board__thickness output{text-align:right;font-variant-numeric:tabular-nums;width:2ch;font-weight:700}.drawing-board__tool-row{justify-content:center;align-items:center;gap:6px;display:flex}.drawing-board__tool{cursor:pointer;background:0 0;border:0;border-radius:10px;justify-content:center;align-items:center;gap:6px;min-width:44px;height:42px;padding:0 10px;display:inline-flex}.drawing-board__tool[aria-pressed=true]{background:var(--accent);color:var(--on-accent)}.drawing-board__tool:disabled{opacity:.35;cursor:default}.drawing-board__clear.armed{background:var(--orange-deep);color:var(--on-accent)}.drawing-board__clear-label{font-size:.9rem;font-weight:800;display:none}.drawing-board__clear.armed .drawing-board__clear-label{display:inline}.drawing-board__divider{background:var(--line);width:1px;height:24px;margin:0 2px}.drawing-board__shape-picker{display:flex;position:relative}.drawing-board__shape-menu{z-index:5;background:var(--surface);border:1px solid var(--line);border-radius:14px;grid-template-columns:repeat(2,auto);gap:4px;padding:6px;display:grid;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%);box-shadow:0 8px 24px #00000038}.drawing-board__shape-menu button{white-space:nowrap;cursor:pointer;background:0 0;border:0;border-radius:10px;align-items:center;gap:8px;min-height:42px;padding:0 12px;font-size:.9rem;font-weight:700;display:flex}.drawing-board__shape-menu button[aria-checked=true]{background:var(--accent);color:var(--on-accent)}.drawing-board__actions{flex-direction:column;gap:8px;display:flex}.color-sheet{background:var(--surface);width:min(440px,100vw - 32px);max-height:min(720px,100dvh - 48px);color:var(--fg);border:0;border-radius:20px;padding:0;box-shadow:0 16px 48px #00000059}.color-sheet::backdrop{background:#14100c73}.color-sheet__body{max-height:inherit;flex-direction:column;display:flex}.color-sheet__header{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;padding:14px 16px 10px;display:flex}.color-sheet h2{font:900 1.15rem/1.2 var(--font-poster);margin:0}.color-sheet__done,.color-sheet__action{font:inherit;color:var(--accent);cursor:pointer;background:0 0;border:0;border-radius:10px;padding:6px 10px;font-weight:800}.color-sheet__content{flex-direction:column;gap:18px;padding:12px 16px 16px;display:flex;overflow-y:auto}.color-sheet__footer{border-top:1px solid var(--line);justify-content:space-between;padding:8px 8px 10px;display:flex}.color-board__family{flex-direction:column;gap:8px;display:flex}.color-board__family h3{margin:0;font-size:.85rem;font-weight:800}.color-board__row{grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;display:grid}.color-board__swatch{aspect-ratio:1;background:var(--swatch);width:100%;max-width:40px;box-shadow:inset 0 0 0 1px var(--ring);cursor:pointer;border:0;border-radius:50%;justify-self:center;padding:0}.slot-editor{cursor:pointer;flex-direction:column;align-items:center;gap:10px;padding:8px 0 4px;display:flex}.slot-editor input{cursor:pointer;background:0 0;border:0;border-radius:50%;width:120px;height:120px;padding:0}.slot-editor input::-webkit-color-swatch-wrapper{padding:0}.slot-editor input::-webkit-color-swatch{box-shadow:inset 0 0 0 1px var(--line);border:0;border-radius:50%}.slot-editor input::-moz-color-swatch{border:0;border-radius:50%}.slot-editor__hint{color:var(--muted);font-size:.85rem}.slot-editor__hex{font-variant-numeric:tabular-nums;letter-spacing:.04em;font-weight:800}.drawing-canvas{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;background:#fff;position:relative;overflow:hidden}.drawing-canvas canvas{touch-action:none;width:100%;height:100%;display:block;position:absolute;inset:0}.drawing-canvas__live{cursor:crosshair}.drawing-canvas__live[data-tool=bucket]{cursor:cell}.drawing-canvas--read-only,.drawing-canvas--read-only canvas{touch-action:auto}.drawing-canvas--read-only .drawing-canvas__live{cursor:default}:root{--wall:#1d1916;--panel:#28221e;--linen:#f2ece1;--ink:#1e1a16;--orange:#f26522;--orange-deep:#e24e12;--gilt:#cba35a;--bg:var(--linen);--surface:#fbf8f2;--fg:var(--ink);--muted:#6b6157;--line:#1e1a1624;--accent:var(--orange);--on-accent:#fff;--font-poster:ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--font-body:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}@media (prefers-color-scheme:dark){:root{--bg:var(--wall);--surface:var(--panel);--fg:var(--linen);--muted:#b5aa9b;--line:#f2ece129;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}*,:before,:after{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--fg);font:16px/1.4 var(--font-body);-webkit-text-size-adjust:100%;overscroll-behavior:none;margin:0}button{font:inherit;color:inherit;touch-action:manipulation;-webkit-tap-highlight-color:transparent}[hidden]{display:none!important}:focus-visible{outline:3px solid var(--accent);outline-offset:2px}