:root{--color-ink:oklch(22% .03 70);--color-parchment:oklch(93% .02 85);--color-gold:oklch(72% .1 80);--space-hud:clamp(.75rem, .6rem + .6vw, 1.25rem);--duration-fast:.15s;--duration-normal:.28s;--ease-out-expo:cubic-bezier(.16, 1, .3, 1);--font-ui:"Segoe UI", "Helvetica Neue", Roboto, system-ui, sans-serif;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;font-family:var(--font-ui)}*{box-sizing:border-box}html,body{background:var(--color-ink);height:100%;margin:0;overflow:hidden}#app{width:100vw;height:100vh;position:relative}#viewport{position:absolute;inset:0}#viewport canvas{cursor:grab;display:block}#viewport canvas:active{cursor:grabbing}.hud-top{top:var(--space-hud);left:var(--space-hud);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(165deg,oklch(99% .015 85/.85),oklch(93% .02 80/.68));border:1px solid oklch(100% 0 0/.35);border-radius:999px;padding:.5rem 1rem;position:absolute;box-shadow:0 2px 14px oklch(22% .03 70/.18),inset 0 1px oklch(100% 0 0/.5)}.music-toggle{font:inherit;color:var(--color-ink);cursor:pointer;background:oklch(93% .02 85/.92);border:1px solid oklch(72% .1 80/.7);border-radius:999px;margin-left:.75rem;padding:.15rem .6rem;font-size:.85rem}.background-music__frame{border:0;width:0;height:0;position:absolute;overflow:hidden}.room-label{color:var(--color-ink);letter-spacing:.01em;font-size:.9rem;font-weight:600}.interaction-hud{left:var(--space-hud);right:var(--space-hud);bottom:calc(var(--space-hud) + 2.4rem);pointer-events:none;flex-direction:column;align-items:center;gap:.5rem;display:flex;position:absolute}.actions{flex-wrap:wrap;justify-content:center;gap:.5rem;display:flex}.actions__button{pointer-events:auto;min-height:44px;font:inherit;color:var(--color-ink);cursor:pointer;transition:transform var(--duration-fast) var(--ease-out-expo);background:oklch(93% .02 85/.92);border:1px solid oklch(72% .1 80/.7);border-radius:999px;align-items:center;gap:.45rem;padding:.4rem .95rem .4rem .45rem;font-size:.9rem;display:inline-flex;box-shadow:0 1px 2px oklch(22% .03 70/.25),0 6px 16px oklch(22% .03 70/.18)}.actions__button:hover{transform:translateY(-1px)}.actions__button:focus-visible{outline:2px solid var(--color-gold);outline-offset:2px}.actions__button kbd{min-width:1.7rem;height:1.7rem;font:inherit;color:var(--color-parchment);background:var(--color-ink);border-radius:999px;place-items:center;font-size:.8rem;font-weight:600;display:inline-grid}.bead-chip{font-variant-numeric:tabular-nums;color:var(--color-parchment);background:oklch(22% .03 70/.6);border-radius:999px;margin:0;padding:.3rem .85rem;font-size:.85rem}.bead-chip[hidden],.interaction-hud[hidden]{display:none}@media (width<=480px){.interaction-hud{bottom:calc(var(--space-hud) + 3.6rem)}}.hint{bottom:var(--space-hud);color:var(--color-parchment);white-space:nowrap;background:oklch(22% .03 70/.45);border-radius:999px;margin:0;padding:.35rem .9rem;font-size:.78rem;position:absolute;left:50%;transform:translate(-50%)}@media (width<=480px){.hint{white-space:normal;width:max-content;max-width:calc(100vw - 2 * var(--space-hud));text-align:center}}.onboarding{z-index:10;padding:var(--space-hud);background:radial-gradient(120% 55% at 50% -10%, oklch(55% .09 70/.4), transparent 60%), var(--color-ink);justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.onboarding[hidden]{display:none}.onboarding__card{width:min(22rem,100%);max-height:calc(100vh - 2 * var(--space-hud));color:var(--color-parchment);background:linear-gradient(165deg,oklch(32% .05 70/.95),oklch(16% .03 70/.97));border:1px solid oklch(80% .08 80/.2);border-radius:1.4rem;flex-direction:column;gap:1rem;padding:1.75rem;display:flex;overflow-y:auto;box-shadow:0 24px 60px oklch(10% .02 70/.55),inset 0 1px oklch(95% .02 85/.1)}.onboarding__title{text-align:center;color:var(--color-gold);margin:0;font-size:1.4rem;font-weight:700}.onboarding__lead{text-align:center;opacity:.75;margin:-.5rem 0 0;font-size:.82rem}.onboarding__preview{justify-content:center;display:flex}.onboarding__field label{opacity:.8;margin-bottom:.35rem;font-size:.8rem;display:block}.onboarding__input{width:100%;color:inherit;font:inherit;background:oklch(20% .02 70/.6);border:1px solid oklch(80% .05 80/.25);border-radius:.6rem;padding:.55rem .75rem}.onboarding__input:focus-visible{outline:2px solid var(--color-gold);outline-offset:1px}.onboarding__toggle{gap:.5rem;display:flex}.onboarding__toggle button{color:inherit;font:inherit;cursor:pointer;transition:background var(--duration-fast) var(--ease-out-expo);background:0 0;border:1px solid oklch(80% .05 80/.25);border-radius:.6rem;flex:1;padding:.5rem}.onboarding__toggle button[aria-pressed=true]{background:var(--color-gold);color:var(--color-ink);border-color:var(--color-gold);font-weight:600}.onboarding__swatches{justify-content:center;gap:.6rem;display:flex}.onboarding__swatch{cursor:pointer;width:1.9rem;height:1.9rem;transition:transform var(--duration-fast) var(--ease-out-expo);border:2px solid #0000;border-radius:999px;padding:0}.onboarding__swatch[aria-pressed=true]{border-color:var(--color-gold);transform:scale(1.12)}.onboarding__enter{font:inherit;color:var(--color-ink);background:var(--color-gold);cursor:pointer;transition:transform var(--duration-fast) var(--ease-out-expo);border:none;border-radius:.7rem;margin-top:.25rem;padding:.7rem 1rem;font-size:1rem;font-weight:700}.onboarding__enter:active{transform:scale(.97)}.va-figure{width:7.5rem;height:auto}.va-figure .va-skin{fill:#f3d2b0}.va-figure .va-skin-dark{fill:#e2b891}.va-figure .va-scalp{fill:#5d5870;fill-opacity:.3}.va-figure .va-stubble{fill:#33221a;opacity:.14}.va-figure .va-hair{fill:#3a2517}.va-figure .va-hair-line{fill:none;stroke:#6b4a33;stroke-width:1.4px;stroke-linecap:round;stroke-opacity:.8}.va-figure .va-tie{fill:var(--color-gold)}.va-figure .va-brow{fill:none;stroke:#5d4433;stroke-width:1.6px;stroke-linecap:round}.va-figure .va-eyes{fill:none;stroke:#3a2517;stroke-width:2px;stroke-linecap:round}.va-figure .va-mouth{fill:none;stroke:#8a4a3a;stroke-width:1.6px;stroke-linecap:round}.va-figure .va-blush{fill:#e8907a;opacity:.35}.va-figure .va-shoe{fill:#2f2118}.va-figure .va-line{fill:none;stroke:#c79a72;stroke-width:1.2px;stroke-linecap:round}.va-figure .va-ground{fill:#000;fill-opacity:.32}.va-figure .va-ring{fill:none;stroke:var(--color-gold);stroke-opacity:.28;stroke-width:1px}.va-figure .va-robe,.va-figure .va-sleeve,.va-figure .va-lapel{fill:var(--avatar-robe,#3f6e9c)}.va-figure .va-pants,.va-figure .va-collar,.va-figure .va-closure,.va-figure .va-buttons circle,.va-figure .va-yem{fill:var(--avatar-robe-shade,#2d5378)}.va-figure .va-trim{fill:none;stroke:var(--avatar-robe-trim,#9cc0e0);stroke-width:2px;stroke-linecap:round;stroke-linejoin:round}.va-figure .va-fold,.va-figure .va-hem{fill:none;stroke:var(--avatar-robe-shade,#2d5378);stroke-width:1.2px;stroke-linecap:round;opacity:.6}.va-figure[data-look=nam] .va-nu,.va-figure[data-look=nu] .va-nam{display:none}.practice{top:var(--space-hud);right:var(--space-hud);max-width:calc(100vw - 2 * var(--space-hud));flex-direction:column;align-items:flex-end;gap:.5rem;display:flex;position:absolute}.practice[hidden],.practice__panel[hidden],.practice__line[hidden]{display:none}.practice__toggle,.practice__start,.practice__switch{min-height:44px;font:inherit;color:var(--color-ink);cursor:pointer;background:oklch(93% .02 85/.92);border:1px solid oklch(72% .1 80/.7);border-radius:999px;padding:.4rem 1rem;font-size:.9rem;box-shadow:0 1px 2px oklch(22% .03 70/.25),0 6px 16px oklch(22% .03 70/.18)}.practice__toggle[aria-expanded=true],.practice__start[aria-pressed=true],.practice__switch[aria-pressed=true]{background:var(--color-gold)}.practice__switch:disabled,.practice__picker:disabled{opacity:.55;cursor:default}.practice__toggle:focus-visible,.practice__start:focus-visible,.practice__switch:focus-visible,.practice__picker:focus-visible{outline:2px solid var(--color-gold);outline-offset:2px}.practice__panel{width:min(20rem, calc(100vw - 2 * var(--space-hud)));color:var(--color-parchment);background:oklch(22% .03 70/.82);border:1px solid oklch(72% .1 80/.45);border-radius:1rem;flex-direction:column;gap:.6rem;padding:.9rem;display:flex;box-shadow:0 10px 30px oklch(22% .03 70/.35)}.practice__picker{min-height:44px;font:inherit;color:var(--color-ink);background:var(--color-parchment);border:1px solid oklch(72% .1 80/.7);border-radius:.6rem;padding:0 .75rem}.practice__line{text-wrap:balance;margin:0;font-size:1.05rem;line-height:1.6}.practice__done{opacity:.55}.practice__now{color:var(--color-gold);font-weight:700}.practice__count{font-variant-numeric:tabular-nums;opacity:.85;margin:0;font-size:.85rem}@media (width<=560px){.practice{top:calc(var(--space-hud) + 3.2rem)}}.boards{top:calc(var(--space-hud) + 3.2rem);left:var(--space-hud);max-width:calc(100vw - 2 * var(--space-hud));flex-direction:column;align-items:flex-start;gap:.5rem;display:flex;position:absolute}.boards[hidden]{display:none}.boards__toggle,.boards__close,.boards__item,.boards__admin-link{min-height:44px;font:inherit;color:var(--color-ink);cursor:pointer;text-align:left;background:oklch(93% .02 85/.92);border:1px solid oklch(72% .1 80/.7);border-radius:.9rem;padding:.4rem 1rem;font-size:.9rem}.boards__toggle{border-radius:999px;box-shadow:0 1px 2px oklch(22% .03 70/.25),0 6px 16px oklch(22% .03 70/.18)}.boards__toggle[aria-expanded=true]{background:var(--color-gold)}.boards__panel[hidden]{display:none}.boards__panel{width:min(22rem, calc(100vw - 2 * var(--space-hud)));max-height:min(32rem, calc(100vh - 8 * var(--space-hud)));color:var(--color-parchment);background:oklch(22% .03 70/.9);border:1px solid oklch(72% .1 80/.45);border-radius:1rem;flex-direction:column;gap:.6rem;padding:.9rem;display:flex;overflow-y:auto;box-shadow:0 10px 30px oklch(22% .03 70/.35)}.boards__panel h2{margin:0;font-size:1.1rem}.boards__list{flex-direction:column;gap:.4rem;display:flex}.boards__item{flex-direction:column;gap:.15rem;width:100%;display:flex}.boards__item span{opacity:.75;font-size:.8rem}.boards__field{flex-direction:column;gap:.25rem;font-size:.85rem;display:flex}.boards__field input,.boards__field textarea{font:inherit;color:var(--color-ink);background:var(--color-parchment);resize:vertical;border:1px solid oklch(72% .1 80/.7);border-radius:.6rem;padding:.5rem .7rem}.boards__form button[type=submit],.boards__pending-card button{min-height:40px;font:inherit;color:var(--color-ink);background:var(--color-gold);cursor:pointer;border:none;border-radius:999px;align-self:flex-start;padding:.35rem 1rem}.boards__content{white-space:pre-wrap;background:oklch(28% .03 70/.6);border-radius:.6rem;padding:.6rem .8rem}.boards__status,.boards__message{opacity:.9;margin:0;font-size:.85rem}.boards__video{aspect-ratio:16/9;border:none;border-radius:.6rem;width:100%}.boards__video-list{flex-direction:column;gap:.25rem;margin:0;padding:0;list-style:none;display:flex}.boards__questions{background:oklch(28% .03 70/.6);border-radius:.6rem;flex-direction:column;gap:.4rem;padding:.6rem .8rem;display:flex}.boards__questions h3{margin:0;font-size:.95rem}.boards__question{white-space:pre-wrap;margin:0;font-size:.85rem}.boards__video-pick{width:100%;font:inherit;text-align:left;color:var(--color-parchment);cursor:pointer;background:0 0;border:1px solid oklch(72% .1 80/.35);border-radius:.5rem;padding:.4rem .7rem;font-size:.85rem}.boards__video-pick[aria-current=true]{color:var(--color-ink);background:var(--color-gold);border-color:#0000}.boards__pending-card{background:oklch(28% .03 70/.6);border-radius:.6rem;flex-direction:column;gap:.35rem;padding:.6rem .7rem;display:flex}.boards__pending-card button{margin-right:.4rem;display:inline-block}.chat{bottom:calc(var(--space-hud) + 2.4rem);left:var(--space-hud);max-width:min(20rem, calc(100vw - 2 * var(--space-hud)));flex-direction:column;align-items:flex-start;gap:.5rem;display:flex;position:absolute}.chat[hidden]{display:none}.chat__toggle{min-height:44px;font:inherit;color:var(--color-ink);cursor:pointer;background:oklch(93% .02 85/.92);border:1px solid oklch(72% .1 80/.7);border-radius:999px;padding:.4rem 1rem;font-size:.9rem;box-shadow:0 1px 2px oklch(22% .03 70/.25),0 6px 16px oklch(22% .03 70/.18)}.chat__toggle[aria-expanded=true]{background:var(--color-gold)}.chat__panel[hidden]{display:none}.chat__panel{width:100%;color:var(--color-parchment);background:oklch(22% .03 70/.82);border:1px solid oklch(72% .1 80/.45);border-radius:1rem;flex-direction:column;gap:.5rem;padding:.7rem;display:flex;box-shadow:0 10px 30px oklch(22% .03 70/.35)}.chat__log{flex-direction:column;gap:.2rem;max-height:10rem;margin:0;padding:0;font-size:.85rem;list-style:none;display:flex;overflow-y:auto}.chat__log strong{color:var(--color-gold)}.chat__form{gap:.4rem;display:flex}.chat__form input{min-height:40px;font:inherit;color:var(--color-ink);background:var(--color-parchment);border:1px solid oklch(72% .1 80/.7);border-radius:.6rem;flex:1;padding:0 .7rem}.chat__form button{min-height:40px;font:inherit;color:var(--color-ink);background:var(--color-gold);cursor:pointer;border:none;border-radius:.6rem;padding:0 1rem}.board-prompt{left:50%;bottom:calc(var(--space-hud) + 2.4rem);color:var(--color-ink);white-space:nowrap;background:oklch(93% .02 85/.92);border:1px solid oklch(72% .1 80/.7);border-radius:999px;margin:0;padding:.4rem 1rem;font-size:.85rem;position:absolute;transform:translate(-50%)}.board-prompt[hidden]{display:none}@media (width<=560px){.boards{top:calc(var(--space-hud) + 3.2rem);right:var(--space-hud);left:var(--space-hud)}}
