@layer reset{*,:before,:after{box-sizing:border-box}*{margin:0}body{-webkit-font-smoothing:antialiased;min-block-size:100dvh;line-height:1.5}img,picture,video,canvas,svg{max-inline-size:100%;display:block}input,button,textarea,select{font:inherit}h1,h2,h3{text-wrap:balance}p{text-wrap:pretty}}@layer tokens{:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--color-bg:#000;--color-surface:#1a1a1a;--color-text:#f2f2f2;--color-text-muted:#b3b3b3;--color-accent:#e0a526;--color-focus:#ffd666;--font-body:system-ui, sans-serif;--space-1:.25rem;--space-2:.5rem;--space-3:1rem;--space-4:2rem;--radius:.375rem;--focus-ring:3px solid var(--color-focus);--duration-fade:.4s}@media (prefers-reduced-motion:reduce){:root{--duration-fade:0s}}}@layer base{body{background:var(--color-bg);color:var(--color-text);font-family:var(--font-body)}main{padding:var(--space-4)}:focus-visible{outline:var(--focus-ring);outline-offset:2px}.visually-hidden{clip-path:inset(50%);white-space:nowrap;block-size:1px;inline-size:1px;position:absolute;overflow:hidden}}@layer layout{.display-view{place-items:center;min-block-size:100dvh;padding:0;display:grid}.joined:not([hidden]){--scene-inline-size:min(100cqi, 100cqb * 16 / 9);place-items:center;block-size:100dvh;inline-size:100%;display:grid;container-type:size}.join:not([hidden]){padding:var(--space-4);gap:var(--space-3);display:grid}.join-form{gap:var(--space-2);justify-items:start;display:grid}.control-view{gap:var(--space-4);max-inline-size:60rem;margin-inline:auto;display:grid}.panel{gap:var(--space-3);display:grid}.panel .scene{max-inline-size:32rem}.actions{align-items:center;gap:var(--space-3);flex-wrap:wrap;display:flex}}@layer components{.scene{aspect-ratio:16/9;inline-size:var(--scene-inline-size,100%);background:var(--color-bg);grid-template-columns:1fr;grid-auto-rows:1fr;display:grid;overflow:hidden}.scene:has(>:nth-child(2)){grid-template-columns:repeat(2,1fr)}.scene:has(>:nth-child(5)){grid-template-columns:repeat(3,1fr)}.scene:has(>:nth-child(10)){grid-template-columns:repeat(4,1fr)}.scene img{object-fit:contain;block-size:100%;min-block-size:0;inline-size:100%;min-inline-size:0}.scene img[data-fit=cover]{object-fit:cover}.scene[data-blanked] img{visibility:hidden}.panel .scene{outline:1px solid var(--color-text-muted)}button,input{padding:var(--space-2) var(--space-3);border:1px solid var(--color-text-muted);border-radius:var(--radius);background:var(--color-surface);color:var(--color-text)}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.6}button[aria-pressed=true]{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-bg);font-weight:700}a{color:var(--color-accent)}.room-code{letter-spacing:.1em;font-family:ui-monospace,monospace}.hint{color:var(--color-text-muted)}.hint.error{color:var(--color-accent)}.display-status:not([data-state=disconnected]){clip-path:inset(50%);white-space:nowrap;block-size:1px;inline-size:1px;position:absolute;overflow:hidden}.display-status[data-state=disconnected]{padding:var(--space-2) var(--space-3);border-radius:var(--radius);background:var(--color-surface);position:fixed;inset-block-end:var(--space-3);inset-inline-end:var(--space-3)}.library{gap:var(--space-3);grid-template-columns:repeat(auto-fill,minmax(10rem,1fr));padding:0;list-style:none;display:grid}.library-entry{gap:var(--space-1);display:grid}.entry-thumb{aspect-ratio:4/3;object-fit:contain;border-radius:var(--radius);background:var(--color-surface);block-size:auto;inline-size:100%}.entry-name{inline-size:100%;padding-inline:var(--space-1);background:0 0;border-color:#0000}.entry-name:hover,.entry-name:focus-visible{border-color:var(--color-text-muted);background:var(--color-surface)}.entry-actions{gap:var(--space-2);flex-wrap:wrap;display:flex}.file-button{padding:var(--space-2) var(--space-3);border:1px solid var(--color-text-muted);border-radius:var(--radius);background:var(--color-surface);cursor:pointer;display:inline-block}.file-button:has(:focus-visible){outline:var(--focus-ring);outline-offset:2px}.file-button:has(:disabled){cursor:not-allowed;opacity:.6}.scene-slots{gap:var(--space-2);padding-inline-start:var(--space-4);display:grid}.scene-slots li{justify-content:space-between;align-items:center;gap:var(--space-2) var(--space-3);flex-wrap:wrap;display:flex}.confirm{max-inline-size:min(28rem, 100% - 2 * var(--space-3));padding:var(--space-4);border:1px solid var(--color-text-muted);border-radius:var(--radius);background:var(--color-surface);color:var(--color-text)}.confirm form{gap:var(--space-3);display:grid}.confirm::backdrop{background:#000000b3}}
