:root{color-scheme:light dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overscroll-behavior:none}*{box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0;overflow:hidden;background:#11151c}button,input{font:inherit}button{-webkit-tap-highlight-color:transparent}.app-shell{--chrome: rgba(255, 255, 255, .88);--chrome-strong: rgba(255, 255, 255, .96);--chrome-border: rgba(15, 23, 42, .12);--chrome-shadow: 0 14px 34px rgba(15, 23, 42, .15);--text: #0f172a;--muted: #64748b;--accent: #0f766e;--active: rgba(15, 118, 110, .12);--danger: #b91c1c;position:fixed;inset:0;width:100%;height:100%;-webkit-user-select:none;user-select:none;touch-action:none;isolation:isolate}.theme-dark{--chrome: rgba(17, 21, 30, .82);--chrome-strong: rgba(17, 21, 30, .95);--chrome-border: rgba(226, 232, 240, .14);--chrome-shadow: 0 18px 40px rgba(0, 0, 0, .38);--text: #f8fafc;--muted: #94a3b8;--accent: #5eead4;--active: rgba(94, 234, 212, .16);--danger: #f87171}.board-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:crosshair}.tool-select{cursor:default}.tool-hand{cursor:grab}.tool-eraser{cursor:cell}.top-bar{position:absolute;z-index:2;top:max(12px,env(safe-area-inset-top));left:50%;display:flex;max-width:calc(100vw - 24px);align-items:center;gap:8px;padding:8px;color:var(--text);background:var(--chrome);border:1px solid var(--chrome-border);border-radius:8px;box-shadow:var(--chrome-shadow);-webkit-backdrop-filter:blur(18px) saturate(1.25);backdrop-filter:blur(18px) saturate(1.25);transform:translate(-50%)}.brand{display:inline-flex;align-items:center;gap:8px;min-width:112px;padding:0 8px;font-size:14px;font-weight:760;line-height:1;white-space:nowrap}.brand-mark{width:18px;height:18px;border:3px solid #4fd1c5;border-left-color:#f7d66b;border-radius:50%}.tool-group,.swatches,.stroke-panel{display:inline-flex;align-items:center;gap:4px}.tool-group,.stroke-panel,.swatches{padding:3px;border:1px solid var(--chrome-border);border-radius:7px;background:#ffffff57}.theme-dark .tool-group,.theme-dark .stroke-panel,.theme-dark .swatches{background:#ffffff0f}.compact{gap:2px}.icon-button{display:inline-grid;width:34px;height:34px;place-items:center;color:var(--muted);background:transparent;border:0;border-radius:7px;cursor:pointer}.icon-button:hover,.icon-button:focus-visible{color:var(--text);background:#64748b1a;outline:none}.icon-button.is-active{color:var(--accent);background:var(--active);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent),transparent 58%)}.icon-button.danger{color:var(--danger)}.stroke-panel{gap:8px;height:42px;padding-inline:10px;color:var(--muted);font-size:12px;font-weight:680;white-space:nowrap}.stroke-panel input{width:84px;accent-color:var(--accent)}.swatch{width:22px;height:22px;padding:0;border:2px solid rgba(255,255,255,.84);border-radius:50%;box-shadow:0 0 0 1px #0f172a2e;cursor:pointer}.swatch.is-active{box-shadow:0 0 0 2px var(--accent)}.bottom-left{position:absolute;z-index:2;left:max(12px,env(safe-area-inset-left));bottom:max(14px,env(safe-area-inset-bottom));display:flex;flex-wrap:wrap;gap:8px;max-width:calc(100vw - 244px);color:var(--text)}.status-pill,.pencil-status{display:inline-flex;min-height:36px;align-items:center;gap:8px;padding:7px 10px;color:var(--text);background:var(--chrome);border:1px solid var(--chrome-border);border-radius:8px;box-shadow:var(--chrome-shadow);-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);font-size:12px;font-weight:650;line-height:1}.status-pill strong,.pencil-status strong{color:var(--accent);font-weight:780}.pencil-status span{color:var(--muted)}.zoom-rail{position:absolute;z-index:2;right:max(14px,env(safe-area-inset-right));top:50%;display:grid;gap:6px;padding:6px;background:var(--chrome);border:1px solid var(--chrome-border);border-radius:8px;box-shadow:var(--chrome-shadow);-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);transform:translateY(-50%)}.minimap-shell{position:absolute;z-index:2;right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));width:212px;padding:8px;color:var(--text);background:var(--chrome-strong);border:1px solid var(--chrome-border);border-radius:8px;box-shadow:var(--chrome-shadow);-webkit-backdrop-filter:blur(18px) saturate(1.25);backdrop-filter:blur(18px) saturate(1.25)}.minimap-title{display:flex;align-items:center;gap:6px;margin-bottom:6px;color:var(--muted);font-size:11px;font-weight:760;line-height:1;text-transform:uppercase}.minimap{display:block;width:196px;height:132px;overflow:hidden;border-radius:6px;touch-action:none;cursor:pointer}.pencil-palette{position:absolute;z-index:3;top:72px;right:max(14px,env(safe-area-inset-right));display:grid;gap:5px;width:132px;padding:8px;opacity:0;pointer-events:none;background:var(--chrome-strong);border:1px solid var(--chrome-border);border-radius:8px;box-shadow:var(--chrome-shadow);-webkit-backdrop-filter:blur(18px) saturate(1.25);backdrop-filter:blur(18px) saturate(1.25);transform:translateY(-6px);transition:opacity .14s ease,transform .14s ease}.pencil-palette.is-open{opacity:1;pointer-events:auto;transform:translateY(0)}.pencil-palette button{display:flex;align-items:center;gap:8px;width:100%;padding:8px;color:var(--text);background:transparent;border:0;border-radius:7px;font-size:12px;font-weight:720;cursor:pointer}.pencil-palette button.is-active,.pencil-palette button:hover{color:var(--accent);background:var(--active)}@media(max-width:980px){.top-bar{left:12px;right:12px;justify-content:center;overflow-x:auto;transform:none}.brand{min-width:auto}.stroke-panel input{width:62px}.bottom-left{right:236px;max-width:none}}@media(max-width:720px){.brand span:last-child,.stroke-panel span,.pencil-status{display:none}.top-bar{gap:5px;padding:6px}.icon-button{width:32px;height:32px}.minimap-shell{width:164px}.minimap{width:148px!important;height:100px!important}.bottom-left{right:182px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}