:root{--hue: 32;--paper: #fdf3e3;--ink: #2c2320;--ink-soft: #7b6a60;--radius: 28px;--tap: .12s ease-out;color-scheme:light}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{height:100%}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.35 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-weight:700;overscroll-behavior:none;-webkit-user-select:none;user-select:none}body[data-screen=play]{background:#000}body[data-screen=home] .screen{justify-content:center}.screen{min-height:100%;padding:clamp(16px,3vw,40px);padding-top:max(clamp(16px,3vw,40px),env(safe-area-inset-top));display:flex;flex-direction:column;gap:clamp(16px,2.5vw,32px)}.screen__header{display:flex;align-items:center;gap:16px}.screen__title{margin:0;font-size:clamp(24px,4.5vw,52px);letter-spacing:-.02em}.grid{display:grid;gap:clamp(14px,2vw,28px);align-content:start}.grid--categories{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}.grid--videos{grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr))}@media(min-width:1600px){.grid--categories{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}.grid--videos{grid-template-columns:repeat(auto-fill,minmax(400px,1fr))}}.empty{margin:auto;padding:40px;color:var(--ink-soft);font-size:clamp(18px,3vw,28px);text-align:center}.tile{appearance:none;border:0;padding:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:10px;border-radius:var(--radius);transition:transform var(--tap)}.tile__art{position:relative;display:grid;place-items:center;aspect-ratio:16 / 9;overflow:hidden;border-radius:var(--radius);background:linear-gradient(150deg,hsl(var(--hue) 92% 72%),hsl(calc(var(--hue) + 28) 88% 60%));box-shadow:0 10px 0 -2px hsl(var(--hue) 55% 62% / .5),0 18px 30px -18px #000}.tile__still{width:100%;height:100%;object-fit:cover;display:block}.tile__still--letterboxed{height:133.34%}.tile__glyph{display:grid;place-items:center;width:46%;color:#fff;filter:drop-shadow(0 6px 10px rgb(0 0 0 / .25))}.tile__icon{width:100%;height:auto;display:block}.tile__label{display:flex;flex-direction:column;gap:2px;padding:0 6px}.tile__title{font-size:clamp(17px,1.9vw,26px);line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.tile__subtitle{font-size:clamp(13px,1.2vw,18px);font-weight:600;color:var(--ink-soft)}.tile:hover{transform:translateY(-4px)}.tile:active{transform:translateY(2px) scale(.98)}.tile:focus-visible{outline:none}.tile:focus-visible .tile__art{outline:6px solid var(--ink);outline-offset:5px}.back{flex:none;width:clamp(56px,7vw,88px);aspect-ratio:1;border:0;border-radius:50%;background:#fff;color:var(--ink);font-size:clamp(26px,3.5vw,42px);line-height:1;cursor:pointer;box-shadow:0 6px 0 -1px #00000026;transition:transform var(--tap)}.back:active{transform:translateY(3px);box-shadow:0 3px 0 -1px #00000026}.back:focus-visible{outline:5px solid var(--ink);outline-offset:4px}.back--onStage{position:fixed;top:max(16px,env(safe-area-inset-top));left:max(16px,env(safe-area-inset-left));z-index:3;background:#ffffffeb}.stage{position:fixed;inset:0;background:#000;display:grid;place-items:center}.stage__mount,.stage iframe{width:100%;height:100%;border:0;display:block;object-fit:contain}.stage__surface{position:absolute;inset:0;z-index:2;border:0;padding:0;background:transparent;cursor:pointer}.stage__surface:focus-visible{outline:none}.stage__hint{position:absolute;z-index:3;display:grid;place-items:center;width:clamp(96px,18vw,180px);aspect-ratio:1;border-radius:50%;background:#0000008c;color:#fff;font-size:clamp(38px,7vw,72px);pointer-events:none;animation:hint-fade .7s ease-out forwards}.stage__error{z-index:3;color:#fff;font-size:clamp(20px,3vw,34px);text-align:center;padding:24px}@keyframes hint-fade{0%{opacity:1;transform:scale(.85)}to{opacity:0;transform:scale(1.15)}}@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}