:root{color-scheme:dark;--crossing: 1.4s;--shelf-fade: .6s;--logo: clamp(80px, 14vw, 300px)}*{box-sizing:border-box}html,body{margin:0;height:100%;background:#000;color:#fff;font-family:-apple-system,BlinkMacSystemFont,SF Pro Text,Helvetica Neue,system-ui,sans-serif;overflow:hidden;-webkit-font-smoothing:antialiased}#television{position:relative;width:100vw;height:100vh;height:100dvh;background:#000}.mode{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity var(--crossing) ease-in-out}#television[data-mode=stories] #stories,#television[data-mode=music] #music{opacity:1;pointer-events:auto}.stage,.stage *{pointer-events:none}.stage{position:absolute;inset:0;background:#000;overflow:hidden}.backdrop{position:absolute;left:-2%;top:-2%;width:104%;height:104%;opacity:0;filter:blur(calc(30px * var(--backdrop-scale, 3)));animation:drift 90s ease-in-out infinite alternate}@keyframes drift{0%{transform:translate(-1%,.8%)}to{transform:translate(1%,-.8%)}}.underlays{position:absolute;inset:0;pointer-events:none}.underlay{position:absolute;mix-blend-mode:screen;transform-origin:center;pointer-events:none}.engine{position:absolute;inset:0;width:100%;height:100%;mix-blend-mode:screen;display:block}#music .swarm{display:none}#music .wall{opacity:0}.shelf{position:absolute;inset:0;overflow-y:auto;transition:opacity var(--shelf-fade) ease-in-out;scrollbar-width:none}.shelf::-webkit-scrollbar{display:none}.shelf.hidden{opacity:0;pointer-events:none}.shelf .logo{display:block;height:var(--logo);width:auto;margin:-4px auto calc(24px - var(--logo) * .19);opacity:.95;pointer-events:none}.shelf h1{font-size:22px;font-weight:600;color:#ffffffd9;margin:0 0 36px}.shelf .verdict h2{font-size:18px;font-weight:600;margin:0 0 20px}.shelf .thumbs{display:flex;gap:24px;margin-bottom:36px}.shelf .thumbs button{font:inherit;color:#fff;background:#ffffff1f;border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:8px 18px;cursor:pointer}.shelf .thumbs button.chosen{background:#ffffff59}.problem{color:#ff5c5c;font-size:15px;max-width:60ch}.empty{color:#fff9}.grid{display:grid;justify-content:start}.tile{position:relative;display:block;padding:0;border:0;background:transparent;color:#fff;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}.tile .face{position:absolute;inset:0;display:block;border-radius:18px;overflow:hidden;background:#111;box-shadow:0 0 0 1px #ffffff24 inset,0 4px 10px #00000073;transition:transform .18s ease-out,box-shadow .18s ease-out;pointer-events:none}@media(hover:hover){.tile:hover .face{transform:scale(1.04);box-shadow:0 0 0 1px #ffffff47 inset,0 8px 18px #00000073}}.tile .picture{position:absolute;inset:0;width:100%;height:100%}.tile .plate{background:linear-gradient(135deg,#333,#1a1a1a)}.tile .scrim{position:absolute;inset:0;background:linear-gradient(to bottom,#0000 45%,#0000008c 72%,#000000e0)}.tile .words{position:absolute;left:0;right:0;bottom:0;display:block;padding:0 22px 20px;text-shadow:0 1px 4px rgba(0,0,0,.4)}.tile .title,.tile .facts{display:block}.tile.story .title{font-size:17px;font-weight:600;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.tile.story .facts{font-size:12px;font-weight:500;color:#ffffffb3;margin-top:6px}.tile.song .sheen{position:absolute;inset:0}.tile.song .stencil{position:absolute;display:block;opacity:0;transition:opacity .4s ease-out}.tile.song .stencil.shown{opacity:var(--tint-opacity, .6)}.tile.song .grain{position:absolute;inset:0;background-image:var(--song-grain);background-repeat:repeat;mix-blend-mode:overlay}.tile.song .words{padding:0;left:0;right:0;bottom:0;text-shadow:none;box-sizing:border-box}.tile.song .words.hill{visibility:hidden}.tile.song .words.hill>.veil,.tile.song .words.hill>.rise{visibility:visible;position:absolute;display:block;border-radius:var(--hill-corner)}.tile.song .words.hill>.veil{inset:var(--veil-inset);background:var(--hill-veil);filter:blur(var(--veil-blur))}.tile.song .words.hill>.rise{inset:var(--hill-inset);background:transparent;box-shadow:var(--hill-rise)}.tile.song .title{font-weight:700;line-height:1.15;overflow-wrap:anywhere}.tile.song .by{display:block;font-weight:600;color:#ffffffe6;margin-top:.25em}.shelf h1 .add{padding:8px 16px;border-radius:999px;border:0;vertical-align:middle;background:#ffffff24;color:#ffffffe6;font:inherit;font-size:15px;font-weight:600;cursor:pointer}.shelf h1 .add:hover{background:#ffffff3d}.shelf h1 .orders{display:inline-flex;gap:4px;margin-left:20px;vertical-align:middle;padding:3px;border-radius:999px;background:#ffffff14}.shelf h1 .order{padding:5px 12px;border-radius:999px;border:0;background:transparent;color:#ffffffb3;font:inherit;font-size:13px;font-weight:500;cursor:pointer}.shelf h1 .order.chosen{background:#ffffff38;color:#fff}.tile.song .plays{display:block;font-weight:500;color:#ffffffa6;margin-top:.2em}#music .linked{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:6;padding:14px 28px;border-radius:999px;border:1px solid rgba(255,255,255,.25);background:#282828b3;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);color:#fff;font:inherit;font-size:18px;font-weight:600;cursor:pointer;max-width:80vw}#music .linked:hover{background:#464646bf}#music .loading{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;font-size:20px;font-weight:600;letter-spacing:4px;color:#ffffffb3;transition:opacity .6s ease-in-out}#music .loading:empty{opacity:0}#music .credit{position:absolute;right:24px;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:4;display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right;color:#fff9;font-size:15px}#music .credit a{color:#fff9;font-size:13px;text-decoration:underline}#music .credit:empty{display:none}@media(max-width:700px){#music .credit{bottom:calc(84px + env(safe-area-inset-bottom,0px));right:16px}}.upload-backdrop{position:fixed;inset:0;z-index:20;background:#0009;display:grid;place-items:center}.upload{width:min(420px,calc(100vw - 32px));padding:20px;border-radius:14px;background:#1e1e1ef5;color:#ffffffe6;display:flex;flex-direction:column;gap:10px;font-size:15px}.upload h2{margin:0 0 4px;font-size:18px}.upload label{display:flex;flex-direction:column;gap:4px;color:#fff9;font-size:13px}.upload input{padding:8px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.15);background:#ffffff0f;color:#fff;font-size:15px}.upload .row{display:flex;gap:8px;justify-content:flex-end;margin-top:6px}.upload button{padding:8px 14px;border-radius:999px;border:0;background:#ffffff24;color:#fff;cursor:pointer;font-size:15px}.upload button.primary{background:#78aaff8c}.upload button:disabled{opacity:.5;cursor:default}.upload .status{min-height:1.4em;color:#ffffffb3;font-size:14px}.upload .status.problem{color:#ff5c5c}.upload .status .spinner{display:inline-block;width:12px;height:12px;margin-right:8px;vertical-align:-1px;border:2px solid rgba(255,255,255,.25);border-top-color:#ffffffe6;border-radius:50%;animation:upload-spin .9s linear infinite}.upload .status .spinner[hidden]{display:none}.upload .status .elapsed{color:#ffffff73;font-variant-numeric:tabular-nums}@keyframes upload-spin{to{transform:rotate(360deg)}}.tile.song .facts{display:flex;justify-content:space-between;align-items:baseline;font-weight:500;margin-top:.4em}.tile.song .facts .style{min-width:0}.tile.song .facts .length{flex:none}.tile.song .plays{text-align:right}.overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:flex-start;pointer-events:none}.overlay .spacer{flex:1}.overlay .status{margin-bottom:calc(56px + env(safe-area-inset-bottom,0px))}.overlay .status{font-size:20px;color:#fff9;margin:0}.controls{position:absolute;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translate(-50%);z-index:5}.strip{display:flex;gap:8px;padding:6px;background:#2828288c;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:999px}.strip button{width:40px;height:40px;border-radius:50%;border:0;background:transparent;color:#ffffffd9;cursor:pointer;display:grid;place-items:center}.strip button:hover{background:#ffffff1f}#switch{position:absolute;top:8px;left:50%;transform:translate(-50%);display:flex;align-items:center;padding:0;border-radius:8px;background:transparent;transition:opacity .6s ease-in-out}#switch.hidden{opacity:0;pointer-events:none}#switch button{font:inherit;font-size:13px;font-weight:500;color:#fffc;background:transparent;border:0;border-radius:6px;padding:5px 16px;cursor:pointer}#switch button.chosen{background:#ffffff38;color:#fff}#boot{position:absolute;inset:0;display:grid;place-items:center;color:#fff9;font-size:16px;text-align:center;padding:24px;pointer-events:none}#boot:empty{display:none}.share-backdrop{position:fixed;inset:0;z-index:20;background:#0009;display:grid;place-items:center}.share{width:min(520px,calc(100vw - 32px));padding:20px;border-radius:14px;background:#1e1e1ef5;color:#ffffffe6;display:flex;flex-direction:column;gap:12px;font-size:15px}.share h2{margin:0 0 4px;font-size:18px;overflow-wrap:anywhere}.share label{display:flex;flex-direction:column;gap:4px;color:#fff9;font-size:13px}.share .field{display:flex;gap:8px;align-items:flex-start}.share input,.share textarea{flex:1;min-width:0;padding:8px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.15);background:#ffffff0f;color:#fff;font-size:13px;resize:none;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.share .row{display:flex;justify-content:flex-end;margin-top:4px}.share button{padding:8px 14px;border-radius:999px;border:0;background:#ffffff24;color:#fff;cursor:pointer;font-size:14px;white-space:nowrap}.share button:hover{background:#ffffff3d}.share button.primary{background:#78aaff8c}