:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--accent:#4fd8ff;--accent-soft:#4fd8ff29;--ink:#e8f4ff;--ink-dim:#9fb7c9;--panel-bg:#060c14b8;--panel-border:#78c8e638}*{box-sizing:border-box}html,body{width:100%;height:100%;color:var(--ink);background:#04070d;margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;overflow:hidden}#app{width:100%;height:100%;position:fixed;inset:0}.stage{width:100%;height:100%;position:fixed;inset:0;overflow:hidden}.stage canvas{display:block;position:absolute;inset:0}.webcam-background{object-fit:cover;visibility:hidden;width:100%;height:100%;position:absolute;inset:0;transform:scaleX(-1)}.webcam-background.is-visible{visibility:visible}.start-screen{z-index:50;text-align:center;background:linear-gradient(180deg, #03060c8c 0%, #03060cd9 65%, #03060c 100%), var(--hero-image) center / cover no-repeat;justify-content:center;align-items:center;padding:24px;transition:opacity .4s;display:flex;position:fixed;inset:0}.start-screen.is-hidden{opacity:0;pointer-events:none}.start-screen__content{flex-direction:column;align-items:center;gap:14px;max-width:560px;display:flex}.start-screen__logo{filter:drop-shadow(0 0 18px #4fd8ff8c);width:64px;height:64px}.start-screen__content h1{letter-spacing:-.01em;background:linear-gradient(135deg, #eafcff 0%, var(--accent) 100%);color:#0000;-webkit-background-clip:text;background-clip:text;margin:0;font-size:2.1rem;font-weight:700}.start-screen__tagline{color:var(--ink-dim);margin:0;font-size:.98rem;line-height:1.5}.start-screen__modes{gap:10px;width:100%;margin-top:6px;display:flex}.mode-button{border:1px solid var(--panel-border);color:var(--ink);cursor:pointer;text-align:left;background:#0a121c8c;border-radius:12px;flex-direction:column;flex:1;gap:4px;padding:10px 12px;transition:border-color .2s,background .2s,transform .15s;display:flex}.mode-button:hover{border-color:#78c8e673;transform:translateY(-1px)}.mode-button--active{border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px #4fd8ff59}.mode-button__title{font-size:.92rem;font-weight:600}.mode-button__desc{color:var(--ink-dim);font-size:.76rem}.start-screen__elements{gap:10px;width:100%;display:flex}.element-choice-button.mode-button--active{border-color:var(--choice-color,var(--accent));box-shadow:0 0 0 1px var(--choice-color,var(--accent)) inset;background:#ffffff0a}.start-screen__footer{color:var(--ink-dim);opacity:.65;margin:10px 0 0;font-size:.7rem}.landing{z-index:50;background:#04070d;transition:opacity .4s;position:fixed;inset:0;overflow:hidden auto}.landing.is-hidden{opacity:0;pointer-events:none}.landing__nav{z-index:5;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--panel-border);background:#04070d99;justify-content:space-between;align-items:center;padding:16px 28px;display:flex;position:sticky;top:0}.landing__nav-brand{letter-spacing:-.01em;align-items:center;gap:10px;font-weight:700;display:flex}.landing__nav-brand img{filter:drop-shadow(0 0 10px #4fd8ff80);width:26px;height:26px}.landing__nav-enter{border:1px solid var(--panel-border);color:var(--ink);cursor:pointer;background:#ffffff0a;border-radius:999px;padding:8px 18px;font-size:.85rem;font-weight:600;transition:border-color .2s,background .2s}.landing__nav-enter:hover{border-color:var(--accent);background:var(--accent-soft)}.landing__hero{min-height:100vh;text-align:center;background:var(--hero-image) center/cover no-repeat, #04070d;justify-content:center;align-items:center;min-height:100dvh;display:flex;position:relative;overflow:hidden}.landing__hero-canvas{position:absolute;inset:0}.landing__hero-canvas canvas{display:block;position:absolute;inset:0}.landing__hero-scrim{background:radial-gradient(60% 50% at 50% 45%,#04070d73 0%,#04070dd1 70%,#04070d 100%);position:absolute;inset:0}.landing__hero-content{z-index:1;flex-direction:column;align-items:center;gap:16px;max-width:640px;padding:24px;display:flex;position:relative}.landing__hero-content h1{letter-spacing:-.02em;background:linear-gradient(135deg, #eafcff 0%, var(--accent) 100%);color:#0000;-webkit-background-clip:text;background-clip:text;margin:0;font-size:clamp(2.4rem,7vw,4rem);font-weight:800}.landing__hero-tagline{color:var(--ink-dim);max-width:520px;margin:0;font-size:clamp(1rem,2.4vw,1.3rem);line-height:1.5}.landing__hero-hint{color:var(--ink-dim);opacity:.75;margin:0;font-size:.8rem}.landing__cta{letter-spacing:.01em;color:#03131a;background:linear-gradient(135deg, #7fe8ff, var(--accent));cursor:pointer;border:none;border-radius:12px;margin-top:6px;padding:15px 34px;font-size:1.05rem;font-weight:700;transition:transform .15s,box-shadow .15s;box-shadow:0 8px 24px #4fd8ff47}.landing__cta:hover{transform:translateY(-1px);box-shadow:0 10px 30px #4fd8ff66}.landing__scroll-hint{z-index:1;color:var(--ink-dim);opacity:.7;font-size:.78rem;animation:2.2s ease-in-out infinite landing-scroll-bounce;position:absolute;bottom:28px;left:50%;transform:translate(-50%)}@keyframes landing-scroll-bounce{0%,to{opacity:.7;transform:translate(-50%)}50%{opacity:1;transform:translate(-50%,6px)}}.landing__section{text-align:center;max-width:1080px;margin:0 auto;padding:88px 28px}.landing__section h2{letter-spacing:-.01em;margin:0 0 12px;font-size:clamp(1.6rem,4vw,2.2rem);font-weight:800}.landing__section-intro{max-width:560px;color:var(--ink-dim);margin:0 auto 48px;font-size:1rem;line-height:1.6}.landing__elements-grid{text-align:left;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;display:grid}.landing__element-card{border:1px solid var(--panel-border);width:100%;font:inherit;color:inherit;text-align:left;cursor:pointer;background:#0a121c8c;border-radius:16px;padding:0;transition:border-color .2s,transform .15s;display:block;position:relative;overflow:hidden}.landing__element-card:hover,.landing__element-card:focus-visible{border-color:var(--card-accent,var(--accent));transform:translateY(-3px)}.landing__element-card.is-active{border-color:var(--card-accent,var(--accent));box-shadow:0 0 0 1px var(--card-accent,var(--accent)) inset}.landing__element-image{aspect-ratio:1;background-color:#ffffff08;background-position:50%;background-size:cover;width:100%}.landing__element-card h3{color:var(--card-accent,var(--ink));margin:16px 16px 6px;font-size:1.1rem}.landing__element-card p{color:var(--ink-dim);margin:0 16px 18px;font-size:.88rem;line-height:1.5}.landing__element-preview-tag{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:var(--card-accent,var(--ink));opacity:0;background:#04070db3;border-radius:999px;padding:3px 9px;font-size:.7rem;font-weight:600;transition:opacity .15s;position:absolute;top:10px;right:10px}.landing__element-card:hover .landing__element-preview-tag,.landing__element-card.is-active .landing__element-preview-tag{opacity:1}.landing__how-grid{text-align:left;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px;display:grid}.landing__how-card{border:1px solid var(--panel-border);background:#0a121c66;border-radius:16px;padding:20px}.landing__how-index{color:var(--accent);opacity:.8;margin-bottom:10px;font-size:.8rem;font-weight:700;display:block}.landing__how-card h3{margin:0 0 8px;font-size:1.05rem}.landing__how-card p{color:var(--ink-dim);margin:0;font-size:.88rem;line-height:1.5}.landing__final-cta{padding-bottom:96px}.landing__footer{text-align:center;color:var(--ink-dim);opacity:.65;padding:28px 28px 40px;font-size:.78rem}.landing__footer p{margin:4px 0}.landing__footer a{color:var(--ink-dim)}@media (max-width:640px){.landing__nav{padding:12px 16px}.landing__section{padding:64px 20px}}.start-button{letter-spacing:.01em;color:#03131a;background:linear-gradient(135deg, #7fe8ff, var(--accent));cursor:pointer;border:none;border-radius:12px;width:100%;margin-top:8px;padding:13px 20px;font-size:1rem;font-weight:600;transition:transform .15s,box-shadow .15s,opacity .15s;box-shadow:0 8px 24px #4fd8ff47}.start-button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 10px 30px #4fd8ff66}.start-button:disabled{opacity:.6;cursor:wait}.start-screen__error{color:#ffd0d0;background:#ff5a5a24;border:1px solid #ff5a5a59;border-radius:8px;margin:0;padding:8px 12px;font-size:.85rem}.start-screen__hint{color:var(--ink-dim);opacity:.8;margin:2px 0 0;font-size:.74rem}.auth-widget{z-index:40;position:fixed;top:12px;left:12px}.auth-widget__signin{border:1px solid var(--panel-border);background:var(--panel-bg);color:var(--ink);cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:999px;padding:8px 16px;font-size:.82rem;font-weight:600;transition:border-color .15s,transform .15s}.auth-widget__signin:hover{border-color:var(--accent);transform:translateY(-1px)}.auth-widget__overlay{z-index:100;justify-content:center;align-items:center;transition:opacity .2s;display:flex;position:fixed;inset:0}.auth-widget__overlay.is-hidden{opacity:0;pointer-events:none}.auth-widget__overlay-backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#04070dbf;position:absolute;inset:0}.auth-widget__overlay-panel{z-index:1;border:1px solid var(--panel-border);background:#04070d;border-radius:16px;width:calc(100% - 48px);max-width:420px;max-height:calc(100vh - 48px);padding:8px;position:relative;overflow:auto}.auth-widget__overlay-close{z-index:2;color:var(--ink-dim);cursor:pointer;background:0 0;border:none;padding:4px 8px;font-size:1.4rem;line-height:1;position:absolute;top:6px;right:10px}.auth-widget__overlay-close:hover{color:var(--ink)}.debug-panel{z-index:40;flex-direction:column;align-items:flex-end;gap:8px;max-height:calc(100vh - 24px);display:flex;position:fixed;top:12px;right:12px}.debug-panel>div:first-child{border-radius:8px;overflow:hidden;box-shadow:0 6px 20px #00000059}.lil-gui.root{--background-color:var(--panel-bg);--widget-color:#4fd8ff38;--hover-color:#4fd8ff52;--focus-color:var(--accent);--number-color:var(--accent);--font-size:11.5px;border:1px solid var(--panel-border);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:10px;box-shadow:0 6px 20px #00000059}.hint-toast{z-index:30;background:var(--panel-bg);border:1px solid var(--panel-border);color:var(--ink-dim);letter-spacing:.02em;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;pointer-events:none;border-radius:999px;padding:8px 16px;font-size:.78rem;transition:opacity .3s;position:fixed;bottom:28px;left:50%;transform:translate(-50%)}.hint-toast.is-visible{opacity:1}.element-switcher{z-index:30;background:var(--panel-bg);border:1px solid var(--panel-border);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;pointer-events:none;border-radius:999px;gap:8px;padding:8px;transition:opacity .3s;display:flex;position:fixed;bottom:16px;right:16px}.element-switcher.is-visible{opacity:1;pointer-events:auto}.element-switcher__dot{background:var(--dot-color);cursor:pointer;border:2px solid #0000;border-radius:50%;width:22px;height:22px;padding:0;transition:transform .15s,border-color .15s}.element-switcher__dot:hover{transform:scale(1.12)}.element-switcher__dot.is-active{box-shadow:0 0 0 2px var(--dot-color);border-color:#fff}