@import "https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;800;900&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&display=swap";:root{--bg-primary:#08080c;--bg-secondary:#14141c;--bg-tertiary:#1c1c26;--bg-elevated:#20202c;--accent-primary:#fc0;--accent-primary-hover:#ffd633;--accent-primary-deep:#e6b800;--accent-secondary:#00e0ff;--accent-tertiary:#c084fc;--accent-danger:#e74c3c;--accent-glow:#fc06;--accent-glow-soft:#ffcc0026;--accent-gradient:linear-gradient(135deg, #fc0 0%, #ffe066 100%);--accent-gradient-deep:linear-gradient(135deg, #ffd633 0%, #fc0 50%, #ffb800 100%);--surface-gradient:linear-gradient(180deg, #ffffff0a 0%, #fff0 100%);--aurora-1:radial-gradient(800px circle at 15% 10%, #ffcc0014, transparent 50%);--aurora-2:radial-gradient(700px circle at 85% 90%, #00e0ff0f, transparent 50%);--aurora-3:radial-gradient(600px circle at 50% 50%, #c084fc0a, transparent 60%);--text-primary:#fff;--text-secondary:#b8c0e0;--text-muted:#6b748f;--text-faint:#4a5070;--success:#73daca;--success-glow:#73daca80;--error:#f7768e;--warning:#e0af68;--radius-sm:6px;--radius-md:10px;--radius-lg:14px;--radius-xl:20px;--radius-pill:9999px;--border-radius:14px;--glass:#ffffff0a;--glass-strong:#ffffff14;--glass-border:#ffffff14;--glass-border-strong:#ffffff24;--shadow-sm:0 2px 6px #0000004d;--shadow-md:0 8px 24px #0006;--shadow-lg:0 24px 60px #0000008c, 0 8px 20px #00000059;--shadow-glow:0 0 40px var(--accent-glow-soft);--focus-ring:0 0 0 3px var(--accent-primary), 0 0 0 5px var(--bg-primary);--ease-out:cubic-bezier(.22, 1, .36, 1);--ease-in-out:cubic-bezier(.65, 0, .35, 1);--ease-spring:cubic-bezier(.16, 1, .3, 1);--dur-micro:.16s;--dur-ui:.26s;--dur-reveal:.7s}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility}body{background-color:var(--bg-primary);color:var(--text-primary);font-feature-settings:"cv11", "ss01", "ss03";min-height:100vh;font-family:Inter,system-ui,sans-serif;line-height:1.55;position:relative;overflow-x:hidden}body:before{content:"";z-index:-2;background:var(--aurora-1), var(--aurora-2), var(--aurora-3), var(--bg-primary);pointer-events:none;position:fixed;inset:0}body:after{content:"";z-index:-1;pointer-events:none;opacity:.4;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1   0 0 0 0 1   0 0 0 0 1   0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");position:fixed;inset:0}h1,h2,h3,h4{letter-spacing:-.025em;color:var(--text-primary);font-family:Outfit,sans-serif;font-weight:800;line-height:1.1}h1{letter-spacing:-.035em;font-size:clamp(2.5rem,5vw + 1rem,4rem);font-weight:900}h2{font-size:clamp(1.75rem,2.5vw + .75rem,2.5rem)}h3{font-size:clamp(1.25rem,1.5vw + .5rem,1.5rem)}p{color:var(--text-secondary)}.eyebrow{text-transform:uppercase;letter-spacing:.18em;color:var(--accent-primary);align-items:center;gap:.5rem;margin-bottom:1rem;font-family:JetBrains Mono,monospace;font-size:.72rem;font-weight:700;display:inline-flex}.eyebrow:before{content:"";opacity:.6;background:currentColor;width:24px;height:1px}.text-gradient{background:linear-gradient(135deg, #fff 0%, #b8c0e0 60%, var(--accent-primary) 110%);-webkit-text-fill-color:transparent;color:#0000;-webkit-background-clip:text;background-clip:text}.text-accent{color:var(--accent-primary)}.text-secondary{color:var(--text-secondary)}.text-muted{color:var(--text-muted)}.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}.container{flex-direction:column;justify-content:center;align-items:center;gap:1.5rem;max-width:1200px;min-height:100vh;margin:0 auto;padding:2rem 1.5rem;display:flex}.card{background:var(--bg-secondary);background-image:var(--surface-gradient);border:1px solid var(--glass-border);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);text-align:center;width:100%;max-width:520px;animation:cardEnter var(--dur-reveal) var(--ease-spring) both;padding:3rem 2.5rem;position:relative;overflow:hidden}.card:before{content:"";background:linear-gradient(90deg, transparent, var(--glass-border-strong), transparent);pointer-events:none;height:1px;position:absolute;top:0;left:10%;right:10%}.card:after{content:"";z-index:-1;background:radial-gradient(closest-side, var(--accent-glow-soft), transparent 70%);opacity:.35;pointer-events:none;position:absolute;inset:-40px}@keyframes cardEnter{0%{opacity:0;filter:blur(6px);transform:translateY(24px)scale(.985)}to{opacity:1;filter:blur();transform:translateY(0)scale(1)}}button{background:var(--accent-gradient-deep);color:#1a1300;border-radius:var(--radius-md);letter-spacing:.01em;cursor:pointer;isolation:isolate;min-width:120px;min-height:48px;transition:transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out), filter var(--dur-micro) var(--ease-out);border:none;padding:.9rem 1.6rem;font-family:inherit;font-size:1rem;font-weight:700;position:relative;overflow:hidden;box-shadow:inset 0 1px #ffffff40,inset 0 -1px #00000026,0 4px 14px #ffcc0040}button:before{content:"";transition:transform .6s var(--ease-out);pointer-events:none;z-index:1;background:linear-gradient(115deg,#0000 30%,#ffffff59 50%,#0000 70%);position:absolute;inset:0;transform:translate(-110%)}button:hover{filter:brightness(1.05);box-shadow:0 1px 0 #ffffff4d inset, 0 -1px 0 #00000026 inset, 0 10px 28px var(--accent-glow);transform:translateY(-2px)}button:hover:before{transform:translate(110%)}button:focus-visible{box-shadow:var(--focus-ring), 0 8px 24px var(--accent-glow);outline:none;transform:translateY(-1px)}button:active{filter:brightness(.95);transition-duration:80ms;transform:translateY(0)}button.secondary{background:var(--glass);color:var(--accent-primary);border:1.5px solid var(--accent-primary);box-shadow:inset 0 1px #ffffff0a}button.secondary:before{background:linear-gradient(115deg,#0000 30%,#ffcc002e 50%,#0000 70%)}button.secondary:hover{border-color:var(--accent-primary-hover);box-shadow:0 8px 24px var(--accent-glow-soft);background:#ffcc0014}.card button{animation:buttonEnter .6s var(--ease-spring) both}.card button:first-of-type{animation-delay:.2s}.card button:nth-of-type(2){animation-delay:.28s}.card button:nth-of-type(3){animation-delay:.36s}@keyframes buttonEnter{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}input[type=text]{background:var(--bg-tertiary);border:2px solid var(--glass-border);color:var(--text-primary);border-radius:var(--radius-lg);text-align:center;text-transform:uppercase;letter-spacing:.5rem;width:100%;transition:border-color var(--dur-ui) var(--ease-out), box-shadow var(--dur-ui) var(--ease-out), background var(--dur-ui) var(--ease-out);margin-bottom:1.75rem;padding:1.25rem 1rem;font-family:JetBrains Mono,monospace;font-size:2.75rem;font-weight:700}input[type=text]::placeholder{color:var(--text-faint);letter-spacing:.5rem}input[type=text]:focus,input[type=text]:focus-visible{border-color:var(--accent-primary);box-shadow:0 0 0 4px var(--accent-glow-soft), 0 0 32px #ffcc0026;background:#ffcc000a;outline:none}select:focus-visible{box-shadow:var(--focus-ring);border-radius:var(--radius-sm);outline:none}.room-code-display{letter-spacing:.5rem;background:var(--accent-gradient);-webkit-text-fill-color:transparent;color:#0000;text-shadow:0 0 60px var(--accent-glow);-webkit-background-clip:text;background-clip:text;margin:1.25rem 0 1.5rem;padding:.5rem 1.5rem;font-family:JetBrains Mono,monospace;font-size:clamp(3.5rem,8vw,5.5rem);font-weight:700;animation:4s ease-in-out infinite codeBreath;display:inline-block;position:relative}@keyframes codeBreath{0%,to{filter:drop-shadow(0 0 12px #ffcc0059)}50%{filter:drop-shadow(0 0 28px #fc09)}}.status-badge{border-radius:var(--radius-pill);background:var(--glass);border:1px solid var(--glass-border);color:var(--text-secondary);-webkit-backdrop-filter:blur(10px);transition:border-color var(--dur-ui) var(--ease-out);align-items:center;gap:.55rem;padding:.45rem 1rem;font-size:.85rem;font-weight:600;display:inline-flex}.status-badge .dot{background:var(--text-muted);border-radius:50%;flex-shrink:0;width:8px;height:8px;position:relative}.status-badge.connected{color:var(--text-primary);background:#73daca0f;border-color:#73daca59}.status-badge.connected .dot{background:var(--success);box-shadow:0 0 12px var(--success-glow);animation:2s ease-in-out infinite dotPulse}.status-badge.connected .dot:after{content:"";border:1px solid var(--success);opacity:0;border-radius:50%;animation:2s ease-out infinite dotRing;position:absolute;inset:-4px}@keyframes dotPulse{0%,to{transform:scale(1)}50%{transform:scale(1.15)}}@keyframes dotRing{0%{opacity:.7;transform:scale(.8)}to{opacity:0;transform:scale(2.2)}}.privacy-warning{border:1px solid #e0af6840;border-left:3px solid var(--warning);border-radius:var(--radius-md);text-align:left;background:linear-gradient(#e0af6812,#e0af6805);margin:1.5rem 0 2rem;padding:1.25rem 1.5rem;font-size:.9rem;position:relative}.privacy-warning__title{color:var(--warning);letter-spacing:.04em;text-transform:uppercase;align-items:center;gap:.5rem;margin-bottom:.4rem;font-size:.75rem;font-weight:700;display:flex}.privacy-warning p{color:var(--text-secondary);font-size:.9rem;line-height:1.5}.hero-title{letter-spacing:-.04em;background:var(--accent-gradient);-webkit-text-fill-color:transparent;color:#0000;filter:drop-shadow(0 0 32px #ffcc0040);-webkit-background-clip:text;background-clip:text;margin-bottom:.75rem;font-size:clamp(3rem,8vw,4.5rem);font-weight:900;line-height:1}.hero-subtitle{color:var(--text-secondary);max-width:32ch;margin-bottom:2.25rem;margin-left:auto;margin-right:auto;font-size:clamp(1rem,1vw + .7rem,1.15rem);line-height:1.5}.button-stack{gap:.85rem;display:grid}.button-stack button{width:100%}.teacher-card{max-width:720px!important}.code-label{color:var(--text-muted);letter-spacing:.16em;text-transform:uppercase;margin-top:1.5rem;font-size:.78rem;font-weight:600}.teacher-actions{flex-wrap:wrap;justify-content:center;align-items:center;gap:1rem;margin-top:.5rem;display:flex}.button-danger{color:var(--accent-danger)!important;box-shadow:none!important;background:0 0!important;border:1.5px solid #e74c3c99!important}.button-danger:before{background:linear-gradient(115deg,#0000 30%,#e74c3c40 50%,#0000 70%)!important}.button-danger:hover{border-color:var(--accent-danger)!important;background:#e74c3c14!important;box-shadow:0 8px 24px #e74c3c40!important}#viewport{aspect-ratio:16/9;border-radius:var(--radius-xl);border:1px solid var(--glass-border-strong);width:100%;box-shadow:var(--shadow-lg), 0 0 0 1px #ffcc0014, inset 0 0 0 1px #ffffff0a;background:#000;position:relative;overflow:hidden}canvas{object-fit:contain;width:100%;height:100%}#focus-pane{border-radius:var(--radius-md);-webkit-backdrop-filter:blur(8px);background:#0a0a0ed9;box-shadow:0 12px 40px #0009,0 0 0 1px #73daca33,0 0 24px #73daca26;border:1.5px solid #73daca99!important;padding:.4rem!important}#focus-pane:before,#focus-pane:after{content:none!important}#focus-thumbnail{-webkit-backdrop-filter:blur(6px);transition:border-color var(--dur-ui) var(--ease-out), box-shadow var(--dur-ui) var(--ease-out);border:1px solid var(--glass-border-strong)!important;border-radius:var(--radius-sm)!important;background:#000000a6!important}#focus-thumbnail:hover,#focus-thumbnail:focus-visible{box-shadow:0 0 0 1px var(--accent-glow-soft), 0 0 20px var(--accent-glow-soft);outline:none;border-color:var(--accent-primary)!important}#thumb-highlight{box-shadow:0 0 12px var(--accent-glow-soft);border-color:var(--accent-primary)!important;background:#ffcc001f!important}#overlay-msg{color:var(--text-primary);text-shadow:0 4px 24px #0009;font-family:Outfit,sans-serif;font-size:clamp(1.25rem,2vw + .5rem,2rem);animation:1.6s ease-in-out infinite dotPulse}#settings-panel{background-image:var(--surface-gradient);box-shadow:var(--shadow-md);background:var(--bg-secondary)!important;border:1px solid var(--glass-border)!important;border-radius:var(--radius-lg)!important;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))!important;gap:1.5rem!important;margin-top:1rem!important;padding:1.5rem!important}.settings-label{letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted);margin-bottom:.6rem;font-size:.7rem;font-weight:700;display:block}.filter-btn{letter-spacing:.02em;background:var(--bg-tertiary)!important;color:var(--text-secondary)!important;border:1px solid var(--glass-border)!important;border-radius:var(--radius-sm)!important;min-width:auto!important;min-height:36px!important;box-shadow:none!important;padding:.45rem .85rem!important;font-size:.8rem!important;font-weight:600!important}.filter-btn:before{display:none!important}.filter-btn:hover{background:var(--bg-elevated)!important;color:var(--text-primary)!important;border-color:var(--glass-border-strong)!important;box-shadow:none!important;transform:none!important}.filter-btn.active{background:var(--accent-primary)!important;color:#1a1300!important;border-color:var(--accent-primary)!important;box-shadow:0 0 0 1px var(--accent-glow-soft), 0 4px 14px #fc03!important}select{background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--glass-border);border-radius:var(--radius-sm);cursor:pointer;width:100%;transition:border-color var(--dur-ui) var(--ease-out);padding:.55rem .75rem;font-family:inherit;font-size:.9rem}select:hover{border-color:var(--glass-border-strong)}.settings-row{align-items:flex-end;gap:.5rem;display:flex}.settings-row button{flex:1;min-width:auto;min-height:40px;padding:.65rem .9rem;font-size:.85rem}.button-focus{color:var(--accent-secondary)!important;box-shadow:none!important;background:0 0!important;border:1.5px solid #00e0ff80!important}.button-focus:hover{border-color:var(--accent-secondary)!important;background:#00e0ff14!important;box-shadow:0 8px 24px #00e0ff2e!important}kbd{background:var(--bg-tertiary);color:var(--text-secondary);border:1px solid var(--glass-border-strong);border-bottom-width:2px;border-radius:4px;margin:0 .15rem;padding:.1rem .4rem;font-family:JetBrains Mono,monospace;font-size:.7rem;font-weight:700;line-height:1;display:inline-block}.shortcut-hint{text-align:center;color:var(--text-muted);letter-spacing:.02em;margin-top:1rem;font-size:.8rem}.shortcut-hint .sep{opacity:.4;margin:0 .5rem}#join-error{border-radius:var(--radius-md);animation:shake .35s var(--ease-out);background:#e74c3c1a;border:1px solid #e74c3c66;margin-top:1.5rem;padding:.75rem 1rem;font-size:.9rem;font-weight:600}@keyframes shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-4px)}40%,80%{transform:translate(4px)}}#teacher-monitor{animation:monitorEnter .5s var(--ease-spring) both;overflow:hidden;border-radius:var(--radius-md)!important;-webkit-backdrop-filter:blur(14px)saturate(140%)!important;background:#0e0e14c7!important;border:1px solid #ffcc0040!important;box-shadow:0 16px 50px #000000b3,0 0 0 1px #ffcc000d,0 0 28px #ffcc0014!important}@keyframes monitorEnter{0%{opacity:0;transform:translateY(20px)scale(.95)}to{opacity:1;transform:translateY(0)scale(1)}}.monitor-header{background:linear-gradient(#ffcc001f,#ffcc000a);border-bottom:1px solid #ffcc002e;align-items:center;gap:.5rem;padding:.5rem .85rem;display:flex}.monitor-header .dot{background:var(--success);width:7px;height:7px;box-shadow:0 0 8px var(--success-glow);border-radius:50%;flex-shrink:0;animation:2s ease-in-out infinite dotPulse}.monitor-title{color:var(--accent-primary);letter-spacing:.14em;text-transform:uppercase;font-family:JetBrains Mono,monospace;font-size:.7rem;font-weight:700}#monitor-stream-info{color:var(--text-muted);margin-left:auto;font-family:JetBrains Mono,monospace;font-size:.65rem}#teacher-preview-video{aspect-ratio:16/9;background:#000;width:100%;display:block}#monitor-diag{color:var(--text-secondary);white-space:pre;border-top:1px solid var(--glass-border);background:#00000040;min-height:2.4rem;padding:.55rem .85rem;font-family:JetBrains Mono,monospace;font-size:.66rem;line-height:1.55}.palette-high-contrast-dark{filter:invert()hue-rotate(180deg)brightness(1.2)contrast(1.5)}.palette-high-contrast-warm{filter:invert()hue-rotate(180deg)sepia()saturate(5)hue-rotate(-50deg)brightness(1.1)}.palette-cataracts{filter:sepia(.3)brightness(1.1)contrast(.9)opacity(.95)}.palette-tritanopia{filter:saturate(1.5)contrast(1.1)}.palette-invert{filter:invert()}@keyframes pulse{0%,to{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.1)}}.pulsing{animation:1.2s ease-in-out infinite pulse}@media (width<=600px){.container{padding:1.5rem 1rem}.card{border-radius:var(--radius-lg);padding:2rem 1.5rem}input[type=text]{letter-spacing:.4rem;font-size:2rem}.room-code-display{letter-spacing:.35rem;font-size:3.5rem}}.capture-sidebar{-webkit-backdrop-filter:blur(20px)saturate(140%);border-left:1px solid var(--glass-border-strong);z-index:300;width:min(320px,92vw);height:100vh;transition:transform .36s var(--ease-spring);color:var(--text-primary);background:#0e0e14eb;flex-direction:column;display:flex;position:fixed;top:0;right:0;transform:translate(100%);box-shadow:-20px 0 60px #0000008c}.capture-sidebar[hidden]{display:none}.capture-sidebar.is-open{transform:translate(0)}.capture-sidebar__header{border-bottom:1px solid var(--glass-border);background:linear-gradient(#ffcc0014,#0000);flex-shrink:0;justify-content:space-between;align-items:center;gap:.5rem;padding:1rem 1.25rem;display:flex}.capture-sidebar__title{letter-spacing:.02em;font-family:Outfit,sans-serif;font-size:.95rem;font-weight:800}.capture-sidebar__count{color:var(--accent-primary);border-radius:var(--radius-pill);text-align:center;background:#ffcc001a;border:1px solid #ffcc0040;min-width:1.75rem;padding:.2rem .55rem;font-family:JetBrains Mono,monospace;font-size:.72rem;font-weight:700}.capture-sidebar__list{scrollbar-width:thin;scrollbar-color:#ffffff26 transparent;flex-direction:column;flex:1;gap:.7rem;padding:.85rem;display:flex;overflow:hidden auto}.capture-sidebar__list::-webkit-scrollbar{width:6px}.capture-sidebar__list::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:3px}.capture-sidebar__empty{text-align:center;color:var(--text-muted);padding:2rem 1.25rem;font-size:.85rem;line-height:1.6}.capture-sidebar__empty[hidden]{display:none}.capture-sidebar__hint{opacity:.8;margin-top:.4rem;font-size:.78rem}.capture-thumb{animation:thumbEnter .36s var(--ease-spring) both;position:relative}@keyframes thumbEnter{0%{opacity:0;transform:translate(12px)}to{opacity:1;transform:translate(0)}}.capture-thumb__open{cursor:pointer;text-align:left;width:100%;transition:border-color var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out), box-shadow var(--dur-ui) var(--ease-out);display:block;overflow:hidden;background:var(--bg-tertiary)!important;color:var(--text-secondary)!important;border:1px solid var(--glass-border)!important;border-radius:var(--radius-md)!important;min-width:0!important;min-height:0!important;box-shadow:none!important;padding:0!important;font-size:.75rem!important;font-weight:500!important}.capture-thumb__open:before{display:none!important}.capture-thumb__open:hover{border-color:var(--accent-primary)!important;box-shadow:0 8px 24px var(--accent-glow-soft)!important;transform:translateY(-2px)!important}.capture-thumb__open:focus-visible{outline:none;border-color:var(--accent-primary)!important;box-shadow:var(--focus-ring)!important}.capture-thumb__open img{aspect-ratio:16/9;object-fit:cover;pointer-events:none;background:#000;width:100%;display:block}.capture-thumb__meta{color:var(--text-muted);letter-spacing:.02em;justify-content:space-between;align-items:center;padding:.5rem .7rem;font-family:JetBrains Mono,monospace;font-size:.68rem;display:flex}.capture-thumb__time{color:var(--text-secondary)}.capture-thumb__dim{opacity:.6}.capture-thumb__delete{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out), background var(--dur-micro), color var(--dur-micro), border-color var(--dur-micro);justify-content:center;align-items:center;display:inline-flex;position:absolute;top:.45rem;right:.45rem;transform:scale(.85);width:28px!important;min-width:0!important;height:28px!important;min-height:0!important;color:var(--text-secondary)!important;border:1px solid var(--glass-border-strong)!important;box-shadow:none!important;background:#08080cb3!important;border-radius:50%!important;padding:0!important}.capture-thumb__delete:before{display:none!important}.capture-thumb:hover .capture-thumb__delete,.capture-thumb__delete:focus-visible{opacity:1;transform:scale(1)}.capture-thumb__delete:hover{color:var(--error)!important;background:#e74c3c2e!important;border-color:#e74c3c80!important}.capture-viewer{-webkit-backdrop-filter:blur(24px);z-index:1000;opacity:0;transition:opacity .28s var(--ease-out);background:#06060af5;flex-direction:column;display:flex;position:fixed;inset:0}.capture-viewer.is-open{opacity:1}.capture-viewer__stage{flex:1;place-items:center;min-width:0;min-height:0;padding:1.5rem;display:grid;overflow:hidden}.capture-viewer__canvas-wrap{border-radius:var(--radius-md);box-shadow:0 24px 80px #000000b3, 0 0 0 1px var(--glass-border-strong);transition:box-shadow var(--dur-ui) var(--ease-out);background:#000;position:relative;overflow:hidden}.capture-viewer__canvas-wrap.is-annotating{box-shadow:0 24px 80px #000000b3, 0 0 0 1px var(--accent-primary), 0 0 40px var(--accent-glow-soft)}.capture-viewer__image,.capture-viewer__draw{width:100%;height:100%;display:block;position:absolute;inset:0}.capture-viewer__image{z-index:1}.capture-viewer__draw{z-index:2;pointer-events:none;touch-action:none}.capture-viewer__canvas-wrap.is-annotating .capture-viewer__draw{pointer-events:auto;cursor:crosshair}.capture-viewer__canvas-wrap.is-annotating[data-tool=brush] .capture-viewer__draw{cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'><path fill='%23ffcc00' stroke='%23000000' stroke-width='1.2' stroke-linejoin='round' d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a.996.996 0 000-1.41l-2.34-2.34a.996.996 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/></svg>") 2 22,crosshair}.capture-viewer__canvas-wrap.is-annotating[data-tool=highlight] .capture-viewer__draw{cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'><path fill='%23fff176' stroke='%23222' stroke-width='1.2' stroke-linejoin='round' d='M5 17l2 2 11-11-2-2L5 17z'/><path fill='%23bdbdbd' stroke='%23222' stroke-width='1.2' stroke-linejoin='round' d='M16 6l2 2 3-3-2-2-3 3z'/><path fill='%23ffcc00' stroke='%23222' stroke-width='1.2' stroke-linejoin='round' d='M3 19l2 2 2-2-2-2-2 2z'/></svg>") 3 21,crosshair}.capture-viewer__canvas-wrap.is-annotating[data-tool=text] .capture-viewer__draw{cursor:text}.capture-viewer__canvas-wrap.is-annotating[data-tool=note] .capture-viewer__draw{cursor:copy}.capture-viewer__canvas-wrap.is-annotating[data-tool=eraser] .capture-viewer__draw{cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'><path fill='%23ffffff' stroke='%23111' stroke-width='1.2' stroke-linejoin='round' d='M16.24 3.56l4.95 4.94c.78.79.78 2.05 0 2.84L12 20.53a4.008 4.008 0 01-5.66 0L2.81 17c-.78-.79-.78-2.05 0-2.84l10.6-10.6c.79-.78 2.05-.78 2.83 0z'/></svg>") 12 12,crosshair}.capture-viewer__toolbar{border-top:1px solid var(--glass-border-strong);-webkit-backdrop-filter:blur(14px);background:#14141ce0;flex-wrap:wrap;flex-shrink:0;justify-content:space-between;align-items:center;gap:1rem;padding:.9rem 1.25rem;display:flex}.capture-viewer__tools{flex-wrap:wrap;align-items:center;gap:.6rem;display:flex}.cv-btn{cursor:pointer;transition:background var(--dur-ui) var(--ease-out), border-color var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out), transform var(--dur-micro) var(--ease-out);letter-spacing:.01em;align-items:center;gap:.5rem;font-family:inherit;background:var(--bg-tertiary)!important;color:var(--text-primary)!important;border:1px solid var(--glass-border-strong)!important;border-radius:var(--radius-md)!important;min-width:auto!important;min-height:40px!important;box-shadow:none!important;padding:.55rem .95rem!important;font-size:.85rem!important;font-weight:600!important;display:inline-flex!important}.cv-btn:before{display:none!important}.cv-btn:hover{background:var(--bg-elevated)!important;border-color:var(--accent-primary)!important;transform:translateY(-1px)!important}.cv-btn:focus-visible{outline:none;box-shadow:var(--focus-ring)!important}.cv-btn.is-active{background:var(--accent-primary)!important;color:#1a1300!important;border-color:var(--accent-primary)!important;box-shadow:0 4px 14px var(--accent-glow-soft)!important}.cv-btn--small{min-height:34px!important;padding:.4rem .75rem!important;font-size:.78rem!important}.cv-btn--ghost{color:var(--text-secondary)!important;border-color:var(--glass-border)!important;background:0 0!important}.cv-btn--ghost:hover{color:var(--text-primary)!important;border-color:var(--glass-border-strong)!important}.cv-btn--close{justify-content:center;align-items:center;color:var(--accent-danger)!important;background:0 0!important;border-color:#e74c3c73!important;width:42px!important;padding:0!important}.cv-btn--close:hover{border-color:var(--accent-danger)!important;color:#ff6b5e!important;background:#e74c3c24!important;transform:rotate(90deg)!important}.cv-annotate-tools{border-left:1px solid var(--glass-border-strong);animation:toolsIn .26s var(--ease-spring) both;align-items:center;gap:.6rem;margin-left:.25rem;padding-left:.85rem;display:inline-flex}.cv-annotate-tools[hidden]{display:none}@keyframes toolsIn{0%{opacity:0;transform:translate(-8px)}to{opacity:1;transform:translate(0)}}.cv-colors{gap:.35rem;display:inline-flex}.cv-color{cursor:pointer;transition:transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);background:var(--c)!important;border:2px solid #fff3!important;border-radius:50%!important;width:28px!important;min-width:0!important;height:28px!important;min-height:0!important;padding:0!important;box-shadow:inset 0 1px #ffffff26,0 2px 6px #0006!important}.cv-color:before{display:none!important}.cv-color:hover{transform:scale(1.12)!important}.cv-color:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-primary), 0 0 0 5px var(--bg-primary)!important}.cv-color.is-active{border-color:var(--text-primary)!important;box-shadow:0 0 0 2px var(--accent-primary), 0 0 14px var(--accent-glow)!important;transform:scale(1.18)!important}.capture-sidebar__close{cursor:pointer;transition:background var(--dur-micro), color var(--dur-micro), border-color var(--dur-micro), transform var(--dur-micro);flex-shrink:0;justify-content:center;align-items:center;width:30px!important;min-width:0!important;height:30px!important;min-height:0!important;color:var(--text-secondary)!important;border:1px solid var(--glass-border-strong)!important;box-shadow:none!important;background:0 0!important;border-radius:50%!important;padding:0!important;display:inline-flex!important}.capture-sidebar__close:before{display:none!important}.capture-sidebar__close:hover{color:var(--accent-danger)!important;background:#e74c3c24!important;border-color:#e74c3c73!important;transform:rotate(90deg)!important}.capture-sidebar__close:focus-visible{outline:none;box-shadow:var(--focus-ring)!important}.cv-tool-group{border-radius:var(--radius-md);border:1px solid var(--glass-border);background:#0000004d;gap:.2rem;padding:.25rem;display:inline-flex}.cv-tool{cursor:pointer;transition:background var(--dur-micro), color var(--dur-micro), border-color var(--dur-micro);justify-content:center;align-items:center;width:34px!important;min-width:0!important;height:32px!important;min-height:0!important;color:var(--text-secondary)!important;border-radius:var(--radius-sm)!important;box-shadow:none!important;background:0 0!important;border:1px solid #0000!important;padding:0!important;font-size:0!important;display:inline-flex!important}.cv-tool:before{display:none!important}.cv-tool:hover{color:var(--text-primary)!important;background:#ffffff0f!important;transform:none!important}.cv-tool:focus-visible{outline:none;box-shadow:0 0 0 2px var(--accent-primary), 0 0 0 4px var(--bg-primary)!important}.cv-tool.is-active{background:var(--accent-primary)!important;color:#1a1300!important;border-color:var(--accent-primary)!important}.cv-opacity{color:var(--text-secondary);letter-spacing:.12em;text-transform:uppercase;animation:toolsIn .22s var(--ease-spring);align-items:center;gap:.55rem;padding:0 .5rem;font-size:.7rem;font-weight:700;display:inline-flex}.cv-opacity[hidden]{display:none}.cv-opacity input[type=range]{appearance:none;background:linear-gradient(to right, #ffcc0026, var(--accent-primary));cursor:pointer;border-radius:3px;outline:none;width:110px;height:6px;margin:0}.cv-opacity input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--accent-primary);border:2px solid var(--bg-primary);width:16px;height:16px;box-shadow:0 0 8px var(--accent-glow);cursor:pointer;transition:transform var(--dur-micro);border-radius:50%}.cv-opacity input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}.cv-opacity input[type=range]::-moz-range-thumb{background:var(--accent-primary);border:2px solid var(--bg-primary);width:16px;height:16px;box-shadow:0 0 8px var(--accent-glow);cursor:pointer;border-radius:50%}.cv-opacity input[type=range]:focus-visible{box-shadow:0 0 0 2px var(--accent-primary), 0 0 0 4px var(--bg-primary)}.cv-opacity__value{color:var(--text-primary);text-align:right;letter-spacing:0;min-width:2.6em;font-family:JetBrains Mono,monospace;font-size:.72rem}.cv-text-input{letter-spacing:-.005em;z-index:4;text-shadow:0 1px 2px #0006;-webkit-backdrop-filter:blur(4px);caret-color:currentColor;background:#14141cb3;border:1.5px dashed;border-radius:4px;outline:none;min-width:140px;margin:0;padding:2px 8px;font-family:Inter,system-ui,sans-serif;font-weight:700;position:absolute}.cv-text-input:focus{background:#14141cd9;border-style:solid}.cv-text-input::placeholder{color:#ffffff59;font-weight:500}.cv-notes{z-index:3;pointer-events:none;position:absolute;inset:0}.cv-note{pointer-events:auto;cursor:move;transform-origin:top;-webkit-user-select:text;user-select:text;width:200px;min-height:130px;animation:noteIn .28s var(--ease-spring);will-change:transform, left, top;background:linear-gradient(170deg,#fef3c7 0%,#fde68a 60%,#fcd34d 100%);border:1px solid #0000001f;border-radius:4px;padding:28px 14px 14px;position:absolute;transform:rotate(-1.5deg);box-shadow:inset 0 1px #ffffff80,0 8px 22px #0006,0 2px 4px #00000040}.cv-note:nth-child(odd){transform:rotate(1.2deg)}.cv-note:nth-child(3n){transform:rotate(-2.2deg)}.cv-note.is-dragging{cursor:grabbing;z-index:10;transform:rotate(0)scale(1.04);box-shadow:inset 0 1px #ffffff80,0 18px 40px #0000008c,0 4px 8px #00000059}@keyframes noteIn{0%{opacity:0;transform:scale(.7)rotate(-1.5deg)}to{opacity:1;transform:scale(1)rotate(-1.5deg)}}.cv-note__close{cursor:pointer;transition:background var(--dur-micro), color var(--dur-micro), border-color var(--dur-micro);justify-content:center;align-items:center;color:#0000008c!important;width:22px!important;min-width:0!important;height:22px!important;min-height:0!important;box-shadow:none!important;background:0 0!important;border:1px solid #0000!important;border-radius:50%!important;padding:0!important;font-family:inherit!important;font-size:0!important;display:inline-flex!important;position:absolute!important;top:5px!important;right:5px!important}.cv-note__close:before{display:none!important}.cv-note__close:hover{color:var(--accent-danger)!important;background:#e74c3c2e!important;border-color:#e74c3c66!important;transform:none!important}.cv-note__text{resize:none;color:#1a1300;cursor:text;background:0 0;border:none;outline:none;width:100%;min-height:80px;padding:0;font-family:Inter,system-ui,sans-serif;font-size:14px;font-weight:500;line-height:1.45;display:block}.cv-note__text::placeholder{color:#00000059;font-style:italic}@media (width<=720px){.capture-sidebar{width:100vw}.capture-viewer__stage{padding:.75rem}.capture-viewer__toolbar{gap:.6rem;padding:.75rem .9rem}.cv-annotate-tools{border-left:none;flex-wrap:wrap;justify-content:flex-start;width:100%;margin-left:0;padding-left:0}.cv-btn span{display:none}.cv-btn{padding:.55rem .75rem!important}.cv-btn--small span{display:inline}.cv-opacity input[type=range]{width:80px}.cv-note{width:170px}}.stream-ctrl-btn{min-width:auto!important;min-height:36px!important;padding:.45rem 1rem!important;font-size:.85rem!important}.stream-ctrl-btn.is-active{border-color:var(--accent-primary)!important;color:var(--accent-primary)!important;box-shadow:0 0 0 1px var(--accent-glow-soft)!important;background:#ffcc001f!important}.palette-dropdown{position:relative}.palette-trigger{cursor:pointer;letter-spacing:.01em;width:100%;transition:border-color var(--dur-ui) var(--ease-out), background var(--dur-ui) var(--ease-out);justify-content:space-between;align-items:center;gap:.6rem;background:var(--bg-tertiary)!important;color:var(--text-primary)!important;border:1px solid var(--glass-border)!important;border-radius:var(--radius-sm)!important;min-width:auto!important;min-height:40px!important;box-shadow:none!important;padding:.55rem .75rem!important;font-family:inherit!important;font-size:.9rem!important;font-weight:500!important;display:flex!important}.palette-trigger:before{display:none!important}.palette-trigger:hover{background:var(--bg-elevated)!important;border-color:var(--glass-border-strong)!important;box-shadow:none!important;transform:none!important}.palette-trigger:focus-visible{outline:none;border-color:var(--accent-primary)!important;box-shadow:0 0 0 3px var(--accent-glow-soft)!important}.palette-caret{transition:transform var(--dur-ui) var(--ease-out);opacity:.7;flex-shrink:0}.palette-dropdown.is-open .palette-caret{opacity:1;transform:rotate(180deg)}.palette-options{border:1px solid var(--glass-border-strong);border-radius:var(--radius-md);-webkit-backdrop-filter:blur(14px);z-index:50;transform-origin:bottom;max-height:min(60vh,320px);animation:paletteOpenUp .2s var(--ease-spring) both;background:#14141cf5;margin:0;padding:.35rem;list-style:none;position:absolute;bottom:calc(100% + .45rem);left:0;right:0;overflow-y:auto;box-shadow:0 16px 40px #0000008c,0 0 0 1px #ffcc000a}.palette-options[hidden]{display:none}@keyframes paletteOpenUp{0%{opacity:0;transform:translateY(6px)scale(.97)}to{opacity:1;transform:translateY(0)scale(1)}}.palette-options li{border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;transition:background var(--dur-micro), color var(--dur-micro);outline:none;padding:.55rem .75rem;font-size:.9rem}.palette-options li:hover,.palette-options li:focus-visible{color:var(--text-primary);background:#ffcc001a}.palette-options li[aria-selected=true]{background:var(--accent-primary);color:#1a1300;font-weight:600}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}body:before,body:after{animation:none!important}}