@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;600;700&display=swap";
:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--ink:#181a18;--muted:#858982;--line:#292c29;--panel:#151714;--panel-soft:#1d201c;--accent:#ff6b3d;--paper:#171a17;--paper-grid:#e4e9e00a;--paper-glow:#7484641c;--canvas-surface:#101310;--canvas-border:#ffffff1c;--canvas-inset:#00000052;--welcome-ink:#eff1eb;--welcome-muted:#a2a79f;--welcome-note:#858b82;--welcome-eyebrow:#ed8b69;--welcome-error:#ff8a69;--tracking-cursor:#ff6b3d;--tracking-cursor-fill:#ff6b3d21;--tracking-cursor-shadow:0 0 0 2px #fffffcf0}*{box-sizing:border-box}html,body{min-height:100%;margin:0}body{color:#f7f6f1;background:#0d0f0d;font-family:DM Sans,Noto Sans SC,system-ui,sans-serif;overflow:hidden}button,input{font:inherit}button{color:inherit}.studio-shell{background:radial-gradient(circle at 75% -10%,#71845921,#0000 30%),#0d0f0d;grid-template-rows:70px minmax(0,1fr);height:100vh;min-height:100vh;display:grid}.topbar{z-index:20;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#0d0f0de6;border-bottom:1px solid #ffffff13;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 24px;display:grid}.brand-lockup{align-items:center;gap:11px;display:flex}.brand-lockup>div:last-child{align-items:baseline;gap:8px;display:flex}.brand-lockup strong{letter-spacing:-.3px;font-size:17px}.brand-lockup span{color:#777c75;letter-spacing:.1em;font-size:11px}.brand-mark{color:#131512;background:var(--accent);border-radius:11px;place-items:center;width:35px;height:35px;display:grid;box-shadow:0 8px 24px #ff6b3d33}.topbar-center{color:#a8ada5;background:#ffffff06;border:1px solid #ffffff14;border-radius:100px;align-items:center;gap:8px;height:33px;padding:0 14px;font-size:12px;display:flex}.tracking-dot{background:#676b66;border-radius:50%;width:6px;height:6px}.tracking-dot.online{background:#56df96;box-shadow:0 0 0 4px #56df961a,0 0 12px #56df9680}.topbar-actions{justify-self:end;align-items:center;gap:8px;display:flex}.theme-toggle{position:relative;overflow:hidden}.theme-icon{place-items:center;display:grid}.theme-icon-moon,html[data-theme=light] .theme-icon-sun{display:none}html[data-theme=light] .theme-icon-moon{display:grid}.action-divider{background:#ffffff17;width:1px;height:22px;margin:0 2px}.icon-button,.round-button{cursor:pointer;background:#ffffff09;border:1px solid #ffffff17;border-radius:10px;place-items:center;width:36px;height:36px;transition:all .2s;display:grid}.icon-button:hover:not(:disabled),.round-button:hover{background:#ffffff1a;transform:translateY(-1px)}.icon-button:disabled{color:#414440;cursor:not-allowed}.export-button,.camera-start{background:var(--accent);color:#171714;cursor:pointer;border:0;border-radius:10px;justify-content:center;align-items:center;gap:8px;font-weight:700;transition:transform .2s,box-shadow .2s;display:flex}.export-button{height:36px;margin-left:3px;padding:0 15px;font-size:12px}.export-button:hover,.camera-start:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 8px 24px #ff6b3d38}.workspace{grid-template-columns:96px minmax(0,1fr);min-height:0;display:grid}.tool-rail{z-index:10;background:#111311b8;border-right:1px solid #ffffff13;flex-direction:column;align-items:center;gap:19px;padding:24px 12px 18px;display:flex}.tool-group{flex-direction:column;align-items:center;gap:8px;width:100%;display:flex}.tool-caption{color:#666b65;letter-spacing:.16em;text-transform:uppercase;font-size:9px;font-weight:700}.tool-button{color:#858a82;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:13px;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:64px;min-height:57px;font-size:10px;transition:all .2s;display:flex}.tool-button:hover{color:#d7d9d3;background:#ffffff09}.tool-button.active{color:#fff5ef;background:#ff6b3d1f;border-color:#ff6b3d40}.tool-button.active svg{color:var(--accent)}.rail-divider{background:#ffffff13;width:38px;height:1px}.colors-group{gap:11px}.color-grid{grid-template-columns:repeat(2,21px);gap:9px;display:grid}.color-swatch{--swatch:#fff;background:var(--swatch);cursor:pointer;border:3px solid #171917;border-radius:50%;outline:1px solid #0000;width:21px;height:21px;padding:0;transition:all .16s}.color-swatch:hover{transform:scale(1.12)}.color-swatch.selected{outline-color:var(--swatch);box-shadow:0 0 0 3px #ffffff0f}.size-control{flex-direction:column;align-items:center;gap:10px;display:flex}.size-preview{border-radius:50%;min-width:8px;max-width:28px;min-height:8px;max-height:28px;box-shadow:0 0 0 3px #ffffff0d}.size-control input{width:70px;height:3px;accent-color:var(--accent);cursor:pointer;margin:31px 0;transform:rotate(-90deg)}.size-control output{color:#747972;font-variant-numeric:tabular-nums;font-size:9px}.canvas-column{grid-template-rows:minmax(0,1fr) 90px;min-width:0;min-height:0;padding:18px 20px 0;display:grid;overflow:hidden}.canvas-stage{isolation:isolate;contain:layout paint;border:1px solid var(--canvas-border);background:var(--canvas-surface);border-radius:22px;min-height:0;position:relative;overflow:hidden;box-shadow:0 22px 60px #00000047}.canvas-stage:after{content:"";z-index:2;pointer-events:none;box-shadow:inset 0 0 90px var(--canvas-inset);position:absolute;inset:0}.camera-feed,.board-texture,.drawing-layer,.guide-layer{width:100%;height:100%;position:absolute;inset:0}.camera-feed{z-index:0;object-fit:cover;will-change:transform, opacity;filter:saturate(.82)contrast(1.03)brightness(.82);transition:opacity .35s;transform:translateZ(0)scaleX(-1)}.camera-feed.hidden{opacity:0}.camera-feed.visible{opacity:1}.board-texture{z-index:1;opacity:1;background-color:var(--paper);background-image:linear-gradient(var(--paper-grid) 1px, transparent 1px), linear-gradient(90deg, var(--paper-grid) 1px, transparent 1px), radial-gradient(circle at 30% 20%, var(--paper-glow), transparent 38%);background-size:28px 28px,28px 28px,auto;transition:opacity .35s,background-color .22s}.camera-mode .board-texture{opacity:0}.board-mode .board-texture{opacity:1}.drawing-layer{z-index:3;touch-action:none;cursor:crosshair}.move-cursor .drawing-layer{cursor:grab}.move-cursor .drawing-layer:active{cursor:grabbing}.eraser-cursor .drawing-layer{cursor:cell}.canvas-stage:fullscreen{background:var(--canvas-surface);border:0;border-radius:0;width:100vw;height:100vh}.guide-layer{z-index:4;pointer-events:none}.gesture-cursor{z-index:5;opacity:0;pointer-events:none;border:2px solid var(--tracking-cursor);background:var(--tracking-cursor-fill);width:22px;height:22px;box-shadow:var(--tracking-cursor-shadow);border-radius:50%;transition:width .1s,height .1s,opacity .15s;position:absolute;top:0;left:0}.gesture-cursor[data-phase=candidate]{opacity:.82;border-style:dashed}.gesture-cursor[data-phase=candidate][data-intent=erase]{background:#ff474c1a;border-color:#ff5f63;box-shadow:0 0 0 3px #fffffcf0}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.camera-welcome{z-index:7;text-align:center;width:min(500px,100% - 40px);color:var(--welcome-ink);flex-direction:column;align-items:center;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.welcome-icon{color:#f5eee5;background:#22251f;border-radius:20px;place-items:center;width:64px;height:64px;margin-bottom:16px;display:grid;transform:rotate(-4deg);box-shadow:0 12px 30px #191b182e}.eyebrow{color:var(--welcome-eyebrow);letter-spacing:.22em;margin:0 0 9px;font-size:10px;font-weight:700}.camera-welcome h1{letter-spacing:-.055em;margin:0;font-size:clamp(32px,4vw,53px);font-weight:600;line-height:1.07}.welcome-copy{max-width:430px;color:var(--welcome-muted);margin:18px 0 22px;font-size:13px;line-height:1.7}.camera-start{min-width:202px;height:45px;padding:0 20px}.camera-start:disabled{cursor:wait;opacity:.76}.privacy-note{color:var(--welcome-note);margin-top:12px;font-size:10px}.camera-error{max-width:400px;color:var(--welcome-error);margin:10px 0 -2px;font-size:11px}.stage-status{z-index:8;color:#e9ebe5;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#0f110fad;border:1px solid #ffffff1f;border-radius:12px;align-items:center;gap:10px;min-width:132px;padding:9px 12px;display:flex;position:absolute;top:18px;left:18px;box-shadow:0 8px 24px #0000001f}.status-led{background:#858a84;border-radius:50%;width:7px;height:7px}.status-led.active{background:#56df96;box-shadow:0 0 8px #56df96a6}.status-led.danger{background:#ff5f63;box-shadow:0 0 9px #ff5f63b8}.stage-status div{flex-direction:column;gap:1px;display:flex}.stage-status small{color:#858b84;letter-spacing:.1em;font-size:8px}.stage-status strong{font-size:11px;font-weight:500}.stage-controls{z-index:8;align-items:center;gap:7px;display:flex;position:absolute;top:17px;right:17px}.fullscreen-toolbar{z-index:12;left:max(12px, env(safe-area-inset-left));right:max(12px, env(safe-area-inset-right));width:max-content;max-width:calc(100% - 24px - env(safe-area-inset-left) - env(safe-area-inset-right));-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#0f110fd1;border:1px solid #ffffff24;border-radius:15px;align-items:center;gap:7px;min-height:46px;margin:0 auto;padding:6px 9px;display:none;position:absolute;bottom:18px;overflow-x:auto;box-shadow:0 12px 34px #00000047}.canvas-stage:fullscreen .fullscreen-toolbar{display:flex}.fullscreen-toolbar[data-destructive=true]{flex-wrap:wrap;justify-content:center;width:min(680px,100%);overflow:visible}.fullscreen-gesture-feedback{color:#ffe0e1;text-align:center;white-space:nowrap;flex:0 0 100%;padding:3px 8px;font-size:10px}.canvas-stage:fullscreen .stage-status,.canvas-stage:fullscreen .stage-controls,.canvas-stage:fullscreen .camera-welcome{display:none}.fullscreen-tool-buttons,.fullscreen-colors,.fullscreen-size{align-items:center;gap:5px;display:flex}.fullscreen-tool-buttons button,.fullscreen-exit{color:#aeb2ac;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:9px;flex:none;place-items:center;width:32px;height:32px;padding:0;display:grid}.fullscreen-tool-buttons button:hover,.fullscreen-tool-buttons button.active,.fullscreen-exit:hover{color:#fff;background:#ffffff1a;border-color:#ffffff1f}.fullscreen-tool-buttons button.active{color:var(--accent)}.fullscreen-toolbar-divider{background:#ffffff1f;flex:none;width:1px;height:24px}.fullscreen-colors button{--swatch:#fff;background:var(--swatch);cursor:pointer;border:2px solid #0f110fe6;border-radius:50%;outline:1px solid #0000;flex:none;width:17px;height:17px;padding:0}.fullscreen-colors button.selected{outline-color:var(--swatch);box-shadow:0 0 0 2px #ffffff29}.fullscreen-size>span{border-radius:50%;flex:none;min-width:8px;max-width:24px;min-height:8px;max-height:24px}.fullscreen-size input{width:82px;accent-color:var(--accent);cursor:pointer}.fullscreen-size output{color:#aeb2ac;font-variant-numeric:tabular-nums;width:20px;font-size:9px}.tool-button:focus-visible,.color-swatch:focus-visible,.fullscreen-tool-buttons button:focus-visible,.fullscreen-colors button:focus-visible,.fullscreen-exit:focus-visible{outline-offset:2px;outline:2px solid #fff}.stage-error{z-index:14;color:#ffd8cc;background:#34140de0;border:1px solid #ff6b3d4d;border-radius:10px;padding:8px 12px;font-size:10px;position:absolute;top:18px;left:50%;transform:translate(-50%);box-shadow:0 8px 24px #0003}.zoom-badge{color:#dfe1dc;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);font-variant-numeric:tabular-nums;background:#0f110fad;border:1px solid #ffffff1f;border-radius:10px;place-items:center;min-width:48px;height:36px;padding:0 9px;font-size:10px;display:grid}.pill-button{color:#dddeda;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);cursor:pointer;background:#0f110fad;border:1px solid #ffffff1f;border-radius:10px;align-items:center;gap:7px;height:36px;padding:0 12px;font-size:10px;display:flex}.pill-button:hover{background:#191b18d9}.stage-controls .round-button{color:#dfe1dc;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#0f110fad}.stage-controls .danger:hover{color:#ff8a69;border-color:#ff6b3d4d}.gesture-guide{color:#acb0aa;grid-template-columns:repeat(7,minmax(0,1fr));align-items:center;gap:12px;min-width:0;display:grid}.guide-intro,.gesture-item{align-items:center;gap:10px;min-width:0;display:flex}.guide-intro>span{width:31px;height:31px;color:var(--accent);background:#ff6b3d1a;border-radius:10px;flex:none;place-items:center;display:grid}.guide-intro div,.gesture-item div{flex-direction:column;gap:2px;min-width:0;display:flex}.guide-intro strong,.gesture-item strong{color:#d7dad4;text-overflow:ellipsis;white-space:nowrap;font-size:10px;font-weight:600;overflow:hidden}.guide-intro small,.gesture-item small{color:#626760;text-overflow:ellipsis;white-space:nowrap;font-size:8px;overflow:hidden}.gesture-symbol,.mouse-symbol{background:#ffffff06;border:1px solid #ffffff12;border-radius:10px;flex:none;place-items:center;width:32px;height:32px;display:grid}.pinch-symbol{position:relative}.pinch-symbol i{border:1.5px solid #979c95;border-radius:8px;width:9px;height:15px;position:absolute;transform:rotate(38deg)}.pinch-symbol i:first-child{top:6px;left:8px}.pinch-symbol i:last-child{bottom:5px;right:7px;transform:rotate(-35deg)}.palm-symbol{filter:grayscale();font-size:15px}.three-symbol{color:#62a8ff;font-size:16px;font-weight:700}.erase-symbol{color:#ff7568;font-size:17px;font-weight:700}.color-symbol{color:#ffd166;font-size:16px}.size-symbol{color:#a78bfa;font-size:19px}.zoom-symbol{color:#62a8ff;font-size:20px}.clear-symbol{color:#ff5f63;font-size:16px;font-weight:800}.mouse-symbol{color:#92978f;font-size:18px}html[data-theme=light]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--panel:#f7f8f4;--panel-soft:#eceee8;--line:#d8dcd3;--paper:#f1ede4;--paper-grid:#31302b0b;--paper-glow:#fffc;--canvas-surface:#e5e1d8;--canvas-border:#21271f24;--canvas-inset:#34302a1f;--welcome-ink:#1b1d1a;--welcome-muted:#77766f;--welcome-note:#99978f;--welcome-eyebrow:#9b5a40;--welcome-error:#b1472c;--tracking-cursor:#ff6b3d;--tracking-cursor-fill:#ff6b3d1a;--tracking-cursor-shadow:0 0 0 2px #fffffcf0}html[data-theme=light] body{color:#242721;background:#e9ece5}html[data-theme=light] .studio-shell{background:radial-gradient(circle at 75% -10%,#ff6b3d1a,#0000 31%),linear-gradient(145deg,#f6f7f3,#e9ece5)}html[data-theme=light] .topbar{background:#f8f9f6e6;border-bottom-color:#21271f1c;box-shadow:0 1px 12px #292f260a}html[data-theme=light] .brand-lockup span{color:#747a71}html[data-theme=light] .topbar-center{color:#62685f;background:#20261d09;border-color:#262c231c}html[data-theme=light] .tracking-dot{background:#9a9f97}html[data-theme=light] .icon-button,html[data-theme=light] .round-button{color:#4b5149;background:#ffffffa3;border-color:#22281f1f}html[data-theme=light] .icon-button:hover:not(:disabled),html[data-theme=light] .round-button:hover{color:#191c18;background:#fff;box-shadow:0 5px 16px #2a302714}html[data-theme=light] .icon-button:disabled{color:#c2c6bf}html[data-theme=light] .theme-toggle{color:#ce633f}html[data-theme=light] .action-divider{background:#1f251c1f}html[data-theme=light] .tool-rail{background:#f5f7f2d1;border-right-color:#22281f1c}html[data-theme=light] .tool-caption{color:#898f86}html[data-theme=light] .tool-button{color:#70766d}html[data-theme=light] .tool-button:hover{color:#292d27;background:#21271e0e}html[data-theme=light] .tool-button.active{color:#7c351f;background:#ff6b3d1c;border-color:#dc532b38}html[data-theme=light] .rail-divider{background:#22281f1c}html[data-theme=light] .color-swatch{border-color:#f1f3ee}html[data-theme=light] .tool-rail .tool-button:focus-visible,html[data-theme=light] .tool-rail .color-swatch:focus-visible{outline-color:#242721}html[data-theme=light] .size-control output{color:#777d74}html[data-theme=light] .gesture-guide{color:#5f655d}html[data-theme=light] .guide-intro>span{color:#d85831;background:#ff6b3d1c}html[data-theme=light] .guide-intro strong,html[data-theme=light] .gesture-item strong{color:#3e443c}html[data-theme=light] .guide-intro small,html[data-theme=light] .gesture-item small{color:#858b82}html[data-theme=light] .gesture-symbol,html[data-theme=light] .mouse-symbol{color:#626860;background:#ffffff80;border-color:#21271e1a}html[data-theme=light] .pinch-symbol i{border-color:#646a62}body,.studio-shell,.topbar,.tool-rail,.icon-button,.tool-button,.gesture-symbol,.mouse-symbol{transition:color .22s,background-color .22s,border-color .22s,box-shadow .22s}@media (max-width:900px){.topbar-center{display:none}.topbar{grid-template-columns:1fr auto}.workspace{grid-template-columns:82px minmax(0,1fr)}.tool-rail{padding-inline:8px}.tool-button{width:58px}.gesture-guide{grid-template-columns:repeat(4,1fr);gap:8px}.guide-intro{display:none}}@media (hover:none) and (pointer:coarse){.fullscreen-toolbar{bottom:max(10px, env(safe-area-inset-bottom));gap:5px;padding:5px 7px}.fullscreen-tool-buttons,.fullscreen-colors,.fullscreen-size{gap:4px}.fullscreen-tool-buttons button,.fullscreen-exit{width:36px;height:36px}.fullscreen-colors button{border-width:5px;width:28px;height:28px}.fullscreen-size input{width:70px}}@media (max-width:680px){body{overflow:auto}.studio-shell{grid-template-rows:60px minmax(0,1fr);height:auto;min-height:100svh}.topbar{padding:0 12px}.brand-lockup span,.export-button span{display:none}.export-button{width:36px;padding:0}.workspace{flex-direction:column-reverse;min-height:calc(100svh - 60px);display:flex}.tool-rail{z-index:30;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#0f110ff5;border:0;border-top:1px solid #ffffff17;flex-direction:row;justify-content:center;gap:10px;min-height:78px;padding:8px 10px;position:sticky;bottom:0}.tool-group{flex-direction:row;width:auto}.tool-caption,.rail-divider,.size-preview,.size-control output{display:none}.tool-button{width:52px;min-height:53px}.colors-group{max-width:96px}.color-grid{grid-template-columns:repeat(3,19px);gap:6px}.color-swatch{width:19px;height:19px}.size-control{flex-direction:row}.size-control input{width:68px;margin:0;transform:none}.canvas-column{flex:1;grid-template-rows:minmax(430px,calc(100svh - 250px)) 112px;padding:10px 10px 0}.canvas-stage{border-radius:17px}.camera-welcome{width:calc(100% - 30px)}.welcome-icon{width:54px;height:54px;margin-bottom:12px}.camera-welcome h1{font-size:33px}.welcome-copy{margin:13px 0 18px;font-size:11px}.privacy-note{font-size:8px}.stage-status{min-width:118px;top:10px;left:10px}.stage-controls{top:10px;right:10px}.fullscreen-toolbar{bottom:max(10px, env(safe-area-inset-bottom));gap:5px;padding:5px 7px}.fullscreen-tool-buttons,.fullscreen-colors,.fullscreen-size{gap:4px}.fullscreen-tool-buttons button,.fullscreen-exit{width:36px;height:36px}.fullscreen-colors button{border-width:5px;width:28px;height:28px}.fullscreen-size input{width:70px}.pill-button{justify-content:center;width:36px;padding:0}.pill-button:not(.never){font-size:0}.gesture-guide{grid-template-columns:repeat(3,1fr);gap:6px}.guide-intro{display:none}.gesture-item{gap:7px}.gesture-symbol{width:29px;height:29px}}@media (max-width:540px){.fullscreen-toolbar{flex-wrap:wrap;justify-content:center;width:min(360px,100% - 16px);overflow:visible}.fullscreen-toolbar-divider{display:none}.fullscreen-tool-buttons{order:1}.fullscreen-size,.fullscreen-exit{order:2}.fullscreen-colors{flex-basis:100%;order:3;justify-content:center}}@media (max-height:690px) and (min-width:681px){.studio-shell{grid-template-rows:58px minmax(0,1fr)}.canvas-column{grid-template-rows:minmax(0,1fr) 70px;padding-top:10px}.tool-rail{gap:10px;padding-top:12px}.tool-button{min-height:48px}.rail-divider{display:none}.size-control input{margin:18px 0}}