:root{--bg:#0b0b10;--fg:#f5f5f7;--muted:#a1a1aa;--panel:#18181b;--chip:#ffffff29;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{height:100%;color:var(--fg);-webkit-tap-highlight-color:transparent;background:#000;margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}body{overflow:hidden}button{font:inherit;color:inherit;cursor:pointer}[hidden]{display:none!important}#feed{scroll-snap-type:y mandatory;overscroll-behavior-y:contain;scrollbar-width:none;background:var(--bg);max-width:480px;height:100dvh;margin:0 auto;overflow-y:auto}#feed::-webkit-scrollbar{display:none}body.playing #feed{overflow:hidden}.card{scroll-snap-align:start;scroll-snap-stop:always;background:linear-gradient(160deg, var(--c1), var(--c2));cursor:pointer;-webkit-user-select:none;user-select:none;height:100dvh;position:relative;overflow:hidden}.poster{object-fit:cover;pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.shade{pointer-events:none;background:linear-gradient(#0000,#000c);height:50%;position:absolute;inset:auto 0 0}.info{left:16px;right:84px;bottom:calc(28px + env(safe-area-inset-bottom));position:absolute}.info h2{margin:0 0 4px;font-size:22px;line-height:1.2}.info p{color:#e4e4e7;margin:0 0 10px;font-size:14px}.chips{flex-wrap:wrap;gap:6px;display:flex}.chip{background:var(--chip);border-radius:999px;padding:4px 10px;font-size:12px}.play{left:50%;bottom:calc(160px + env(safe-area-inset-bottom));color:#111;background:#fff;border:0;border-radius:999px;justify-content:center;align-items:center;gap:8px;min-width:160px;height:56px;padding:0 28px;font-size:18px;font-weight:700;display:flex;position:absolute;transform:translate(-50%);box-shadow:0 8px 28px #00000059}.play:active{transform:translate(-50%)scale(.96)}.rail{right:12px;bottom:calc(28px + env(safe-area-inset-bottom));flex-direction:column;gap:14px;display:flex;position:absolute}.rail button{color:#fff;background:#00000059;border:0;border-radius:50%;place-items:center;width:48px;height:48px;display:grid}.rail .save[aria-pressed=true]{color:#facc15}.rail .save[aria-pressed=true] svg{fill:currentColor}.hint{top:calc(64px + env(safe-area-inset-top));text-align:center;color:#e4e4e7;pointer-events:none;font-size:13px;animation:1.6s ease-in-out infinite bob;position:absolute;left:0;right:0}@keyframes bob{50%{transform:translateY(-5px)}}.topbar{z-index:6;max-width:480px;height:calc(52px + env(safe-area-inset-top));padding-top:env(safe-area-inset-top);pointer-events:none;background:linear-gradient(#00000073,#0000);justify-content:center;align-items:center;margin:0 auto;display:flex;position:fixed;top:0;left:0;right:0}.tabs{pointer-events:auto;gap:4px;display:flex}.tab{color:#ffffffa6;text-shadow:0 1px 4px #00000080;background:0 0;border:0;height:44px;padding:0 12px;font-size:16px;font-weight:600;position:relative}.tab[aria-pressed=true]{color:#fff}.tab[aria-pressed=true]:after{content:"";background:#fff;border-radius:2px;width:20px;height:3px;position:absolute;bottom:4px;left:50%;transform:translate(-50%)}.install{color:#fff;filter:drop-shadow(0 1px 3px #00000080);pointer-events:auto;background:0 0;border:0;place-items:center;width:44px;height:44px;display:grid;position:absolute;bottom:4px;right:6px}#saved{z-index:5;max-width:480px;padding:calc(60px + env(safe-area-inset-top)) 12px calc(20px + env(safe-area-inset-bottom));overscroll-behavior-y:contain;background:var(--bg);margin:0 auto;position:fixed;inset:0;overflow-y:auto}#saved-grid{grid-template-columns:repeat(2,1fr);gap:10px;display:grid}.tile{aspect-ratio:9/16;background:linear-gradient(160deg, var(--c1), var(--c2));border-radius:14px;position:relative;overflow:hidden}.tile-open{text-align:left;background:0 0;border:0;padding:0;position:absolute;inset:0}.tile-open img{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.tile-text{background:linear-gradient(#0000,#000c);flex-direction:column;gap:2px;padding:28px 10px 10px;display:flex;position:absolute;bottom:0;left:0;right:0}.tile-title{font-size:15px;font-weight:700;line-height:1.2}.tile-meta{color:#d4d4d8;font-size:12px}.tile-save{color:#fff;background:#0006;border:0;border-radius:50%;place-items:center;width:40px;height:40px;display:grid;position:absolute;top:6px;right:6px}.tile-save svg{width:20px;height:20px}.tile-save[aria-pressed=true]{color:#facc15}.tile-save[aria-pressed=true] svg{fill:currentColor}.tile.unsaved .tile-open{opacity:.45}#saved-empty{text-align:center;color:var(--muted);margin:30vh 24px 0;font-size:15px;line-height:1.5}#player{z-index:10;background:#000;flex-direction:column;max-width:480px;margin:0 auto;display:flex;position:fixed;inset:0}#player[hidden]{display:none}.play-bar{height:calc(44px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 4px 0;background:#111;align-items:center;gap:4px;display:flex}.bar-btn{background:0 0;border:0;place-items:center;width:56px;height:44px;display:grid}#play-title{text-overflow:ellipsis;white-space:nowrap;text-align:center;flex:1;font-size:15px;font-weight:600;overflow:hidden}#frame-wrap{flex:1;position:relative}#frame-wrap iframe{background:var(--bg);border:0;width:100%;height:100%;position:absolute;inset:0}.loader{color:var(--muted);pointer-events:none;place-items:center;font-size:14px;display:grid;position:absolute;inset:0}#sheet{top:calc(44px + env(safe-area-inset-top));background:#00000073;align-items:flex-end;display:flex;position:absolute;bottom:0;left:0;right:0}#sheet[hidden]{display:none}.sheet-card{width:100%;padding:20px 20px calc(20px + env(safe-area-inset-bottom));background:var(--panel);text-align:center;border-radius:20px 20px 0 0;animation:.2s ease-out rise}@keyframes rise{0%{opacity:0;transform:translateY(40px)}}#sheet-label{color:var(--muted);margin:0;font-size:14px}#sheet-label.best{color:#facc15;font-weight:700}#sheet-score{margin:2px 0;font-size:48px;font-weight:800}#sheet-score.result{margin:8px 0 18px;font-size:30px}#sheet-best{color:var(--muted);margin:0 0 16px;font-size:14px}.btn{background:#27272a;border:0;border-radius:12px;height:48px;font-size:16px;font-weight:600}.btn.primary{color:#111;background:#fff;width:100%;margin-bottom:10px}.sheet-row{gap:10px;display:flex}.sheet-row .btn{flex:1}#toast{left:50%;bottom:calc(100px + env(safe-area-inset-bottom));z-index:20;opacity:0;pointer-events:none;background:#27272af2;border-radius:999px;padding:10px 16px;font-size:14px;transition:opacity .2s;position:fixed;transform:translate(-50%)}#toast.show{opacity:1}@media (prefers-reduced-motion:reduce){.hint,.sheet-card{animation:none}}
