@import"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=IBM+Plex+Mono:wght@400;500&display=swap";*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #e6e8ec;--bg-shade: #d6dbe2;--surface: rgba(255, 255, 255, .72);--surface-border: rgba(120, 132, 148, .32);--text-primary: #18212d;--text-muted: rgba(24, 33, 45, .68);--button-border: rgba(88, 101, 118, .5);--button-hover: rgba(24, 33, 45, .92);--button-hover-text: #f5f7fa}body{background:var(--bg);background-image:radial-gradient(ellipse at 15% 18%,rgba(255,255,255,.75) 0%,transparent 58%),radial-gradient(ellipse at 82% 90%,rgba(198,205,214,.55) 0%,transparent 60%),linear-gradient(160deg,var(--bg) 0%,var(--bg-shade) 100%);height:100dvh;position:relative;font-family:Space Grotesk,sans-serif;overflow:hidden;-webkit-user-select:none;user-select:none}#canvas-wrap{position:relative;cursor:grab;width:100vw;height:100dvh;touch-action:none}#canvas-wrap:active{cursor:grabbing}#canvas-wrap canvas{display:block;border-radius:4px;width:100%;height:100%}.draw-preview-layer{position:absolute;inset:0;pointer-events:none;z-index:2;border-radius:4px}#hud{position:absolute;bottom:10px;left:50%;transform:translate(-50%);font-size:.52rem;letter-spacing:.13em;color:#18212d61;pointer-events:none;white-space:nowrap}@media(max-width:900px),(max-height:760px){#hud{display:none}}.overlay-ui{position:fixed;right:14px;bottom:14px;z-index:30;display:flex;align-items:flex-end;gap:10px;pointer-events:none}.overlay-fab-column{display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}.overlay-card{background:var(--surface);border:1px solid var(--surface-border);border-radius:12px;padding:8px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);pointer-events:auto;box-shadow:0 8px 26px #10141e1f}.overlay-panel{width:min(90vw,360px);padding:7px 8px;opacity:0;transform:translateY(8px) scale(.98);transform-origin:bottom right;pointer-events:none;transition:opacity .16s ease,transform .16s ease}.overlay-ui.open .overlay-panel{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}.overlay-toggle{width:44px;height:44px;border-radius:12px;border:1px solid var(--surface-border);background:#f8fafdeb;color:var(--text-primary);cursor:pointer;display:flex;align-items:center;justify-content:center;pointer-events:auto;box-shadow:0 10px 24px #10141e2e;transition:background .18s,transform .16s}.overlay-fab-btn{width:44px;height:44px;border-radius:12px;padding:0;pointer-events:auto;background:#f8fafdeb;box-shadow:0 10px 24px #10141e2e}.overlay-toggle svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}.overlay-toggle:hover{background:#e9eef5fa}.overlay-ui.open .overlay-toggle{transform:scale(.96)}.overlay-fab-btn:hover{background:#e9eef5fa}.overlay-ui.open .overlay-fab-btn{transform:scale(.96)}.overlay-head{text-align:center;margin-bottom:6px;display:grid;gap:4px;justify-items:center}.overlay-title{font-family:Space Grotesk,sans-serif;color:var(--text-primary);font-size:.9rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:0;font-weight:700}.board-size{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted)}.size-picker-label{font-size:.55rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}.size-controls{display:grid;grid-template-columns:1fr 1fr;gap:4px 6px;width:100%;max-width:320px;align-items:center}.size-picker{font-family:IBM Plex Mono,monospace;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-primary);border:1px solid var(--button-border);border-radius:8px;background:#fff9;padding:4px 8px;min-width:0;width:100%}.controls{display:grid;gap:5px;width:100%;max-width:280px;margin:0 auto;justify-items:center}.controls-row{display:grid;gap:5px;width:100%;align-items:center}.controls-row-top{grid-template-columns:repeat(5,34px);justify-content:center}.controls-row-bottom{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;align-items:center}.controls-row-bottom #drawSizeWrap{flex:1 1 100%;order:2;width:100%;max-width:220px;justify-content:flex-start}.controls-row-bottom #clearFrontDrawBtn,.controls-row-bottom #clearBackDrawBtn{order:1;justify-self:stretch}.btn{font-family:IBM Plex Mono,monospace;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;padding:5px 11px;border:1px solid var(--button-border);background:#ffffff73;color:var(--text-primary);cursor:pointer;border-radius:8px;transition:background .18s,color .18s;position:relative}.btn:hover{background:var(--button-hover);color:var(--button-hover-text)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn.active{background:var(--button-hover);color:var(--button-hover-text)}.btn-target-front{border-color:#15181f;background:#232933;color:#eef3fb}.btn-target-front:hover{background:#11151d;color:#fff}.btn-danger{border-color:#981a1a8c;outline:1px dashed rgba(166,28,28,.75);outline-offset:-3px;color:#7a1c1c;background:#fceded80}.btn-danger:hover{background:#7a1c1c;color:#fff7f7}.btn-target-front.btn-danger{border-color:#15181f;background:#232933;color:#eef3fb}.btn-target-front.btn-danger:hover{background:#11151d;color:#fff}.btn-danger-dark{border-color:#15181f;background:#232933;color:#eef3fb;outline-color:#d65353bf}.btn-danger-dark:hover{background:#11151d;color:#fff}.btn-label-icon{display:inline-flex;align-items:center;justify-content:center;gap:6px}.btn-label-icon svg{width:14px;height:14px;flex:0 0 14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}.btn-label-icon span{white-space:nowrap}.exit-share-btn{border-color:#9b41418c;color:#7c1d1d}.exit-share-btn:hover{background:#7c1d1d;color:#fff8f8}.attach-btn input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;font-size:0}.icon-btn{width:34px;height:34px;padding:0;display:inline-flex;align-items:center;justify-content:center}.icon-btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}.icon-btn:after{content:attr(data-tooltip);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translate(-50%,4px);font-family:IBM Plex Mono,monospace;font-size:.54rem;letter-spacing:.08em;text-transform:uppercase;color:#f5f7fa;background:#12171ff2;border-radius:6px;padding:4px 6px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s ease,transform .12s ease}.icon-btn:hover:after,.icon-btn:focus-visible:after,.icon-btn.tooltip-show:after{opacity:1;transform:translate(-50%)}.share-status{width:100%;font-size:.58rem;letter-spacing:.08em;color:var(--text-muted);align-self:center;text-align:center}.overlay-share-status{width:64px;min-height:1.2rem;font-size:.52rem;line-height:1.15;color:#18212db8;pointer-events:none}.share-board-size-readout{position:fixed;left:50%;bottom:18px;transform:translate(-50%);font-family:IBM Plex Mono,monospace;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:#18212db8;padding:5px 10px;border-radius:999px;border:1px solid rgba(88,101,118,.35);background:#ffffff80;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);pointer-events:none;opacity:0}.share-board-title-readout{position:fixed;left:50%;bottom:46px;transform:translate(-50%);font-family:Space Grotesk,sans-serif;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:#18212db8;pointer-events:none;opacity:0}body.share-readonly .overlay-panel,body.share-readonly #overlayToggle,body.share-readonly .overlay-share-status{display:none}body.share-readonly .share-board-title-readout,body.share-readonly .share-board-size-readout{opacity:1}.draw-size-wrap{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--button-border);border-radius:8px;padding:4px 8px;font-family:IBM Plex Mono,monospace;color:var(--text-primary);background:#ffffff61}.draw-size-label{font-size:.58rem;letter-spacing:.08em;text-transform:uppercase}.draw-size-range{width:88px;height:14px;appearance:none;background:transparent;cursor:pointer}.draw-size-range::-webkit-slider-runnable-track{height:4px;border-radius:999px;background:#58657661}.draw-size-range::-webkit-slider-thumb{appearance:none;width:16px;height:16px;border-radius:50%;border:1px solid #1d2733;background:#1f6fd7;margin-top:-6px}.draw-size-range::-moz-range-track{height:4px;border-radius:999px;background:#58657661}.draw-size-range::-moz-range-thumb{width:16px;height:16px;border-radius:50%;border:1px solid #1d2733;background:#1f6fd7}.draw-size-value{width:1.8rem;text-align:right;font-size:.62rem;letter-spacing:.08em}@media(max-width:900px),(max-height:760px){.overlay-ui{right:10px;bottom:10px;gap:8px}.overlay-panel{width:min(92vw,320px);padding:6px 7px}.overlay-card{padding:6px}.overlay-toggle,.overlay-fab-btn{width:40px;height:40px}.overlay-share-status{width:56px;font-size:.5rem}.share-board-size-readout{bottom:12px;font-size:.62rem;letter-spacing:.1em}.share-board-title-readout{bottom:36px;font-size:.66rem;letter-spacing:.16em}.overlay-title{font-size:.78rem;letter-spacing:.28em}.board-size{font-size:.54rem;letter-spacing:.18em}.size-controls{max-width:250px}.size-picker{font-size:.58rem}.btn{font-size:.62rem;padding:4px 8px}.icon-btn{width:32px;height:32px;padding:0}.controls{max-width:280px;gap:4px}.controls-row{gap:4px}.controls-row-top{grid-template-columns:repeat(7,32px);justify-content:center}.controls-row-bottom{display:flex;flex-wrap:wrap;justify-content:center;gap:4px}.controls-row-bottom #drawSizeWrap{width:100%;max-width:188px}}.illustrationboard-viewer{position:fixed;inset:0;z-index:999;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#12171ee6;opacity:0;pointer-events:none;transition:opacity .22s ease}.illustrationboard-viewer.open{opacity:1;pointer-events:all}.illustrationboard-close{position:absolute;top:18px;right:22px;font-size:1.3rem;color:#e8eef794;background:none;border:none;cursor:pointer;transition:color .15s;font-family:Courier Prime,monospace}.illustrationboard-close:hover{color:#f5f8ff}.illustrationboard-viewport{overflow:hidden;width:90vw;height:78vh;cursor:zoom-in;position:relative}.illustrationboard-viewport.panning{cursor:grab}.illustrationboard-viewport.panning:active{cursor:grabbing}.illustrationboard-viewport img{display:block;position:absolute;top:0;left:0;max-width:none;max-height:none;width:auto;height:auto;object-fit:unset;image-rendering:auto;transform-origin:0 0;-webkit-user-select:none;user-select:none;pointer-events:none;box-shadow:0 18px 68px #04080e94;border:1px solid rgba(220,230,244,.2)}.illustrationboard-bar{display:flex;align-items:center;gap:12px;margin-top:16px}.illustrationboard-btn{font-family:IBM Plex Mono,monospace;font-size:.8rem;padding:5px 13px;border:1px solid rgba(215,226,244,.36);background:transparent;color:#edf3ff;cursor:pointer;border-radius:2px;transition:background .15s;letter-spacing:.08em}.illustrationboard-btn:hover{background:#edf3ff24}.illustrationboard-track{width:140px;height:2px;background:#edf3ff4d;border-radius:2px;position:relative;cursor:pointer}.illustrationboard-thumb{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:8px;height:8px;background:#f2f6ff;border-radius:50%;pointer-events:none}.illustrationboard-label{font-size:.7rem;color:#e8eef7db;letter-spacing:.1em;width:54px;text-align:center}