:root{color-scheme:dark;font-family:Arial,Helvetica,sans-serif;background:#080808;color:#e9e9e9}*{box-sizing:border-box}body{margin:0;height:100svh;display:grid;grid-template-rows:88px minmax(0,1fr) 112px;overflow:hidden}button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}button:focus-visible,a:focus-visible{outline:2px solid #d6c3ff;outline-offset:5px}button:disabled{opacity:.25;cursor:default}header{display:flex;align-items:center;justify-content:space-between;padding:0 40px;z-index:3}.brand{font-size:19px;letter-spacing:-.8px;font-weight:600;text-decoration:none;color:#eee}.brand span{color:#777}.topright{display:flex;align-items:center;gap:26px;position:relative}.concept{font-size:10px;color:#757575}#filter{display:flex;gap:24px;font-size:12px;color:#aaa;padding:12px 0}.menu{position:absolute;right:0;top:48px;width:190px;background:#171717;border:1px solid #303030;border-radius:8px;padding:6px;box-shadow:0 12px 50px #0008}.menu button{width:100%;display:flex;justify-content:space-between;padding:12px;font-size:12px;border-radius:4px;color:#aaa}.menu button:hover,.menu button[aria-pressed=true]{background:#272727;color:#fff}.menu span{color:#747474}main{position:relative;display:flex;align-items:center;justify-content:center;margin:0 40px;min-height:0}#visual{display:block;height:100%;max-width:100%;aspect-ratio:4/3;object-fit:fill;image-rendering:pixelated}.caption{position:absolute;right:0;bottom:2px;writing-mode:vertical-rl;font-size:9px;color:#606060;letter-spacing:.05em}footer{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 40px;gap:20px}.production{display:flex;align-items:center;gap:22px;min-width:0}#details{text-align:left;padding:0}#details strong{display:block;font-size:14px;font-weight:500;letter-spacing:-.2px;margin-bottom:7px}#credit{font-size:11px;color:#999}#credit b{font-weight:400;color:#666;margin-left:10px}.platform{font-family:monospace;font-size:9px;color:#999;border:1px solid #303030;padding:5px 7px;border-radius:3px;white-space:nowrap}.transport{display:flex;align-items:center;gap:9px}.icon{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:7px;color:#888;position:relative}.icon:hover{background:#1d1d1d;color:#fff}.icon.active{color:#d4c0fc;background:#211d2b}svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}#shuffle{display:flex;align-items:center;gap:12px;border:1px solid #383838;padding:12px 20px;border-radius:7px;background:#1b1b1b;font-size:12px;position:relative;margin:0 7px}#shuffle:hover{background:#292929;border-color:#555}#shuffle svg{width:17px;height:17px}.transport i{width:1px;height:19px;background:#2a2a2a;margin:0 9px}.utilities{justify-self:end;display:flex;gap:6px}[data-tip]:hover:after{content:attr(data-tip);position:absolute;bottom:calc(100% + 12px);left:50%;transform:translateX(-50%);white-space:nowrap;background:#242424;border:1px solid #383838;border-radius:5px;padding:7px 9px;font-size:10px;color:#ccc;pointer-events:none}.progress{position:fixed;bottom:0;height:2px;width:100%;background:#181818}#progress{height:100%;background:#9785b3;width:0}#toast{position:fixed;bottom:122px;left:50%;transform:translateX(-50%);padding:9px 14px;border:1px solid #343434;background:#1b1b1b;color:#bbb;font-size:11px;border-radius:6px;opacity:0;transition:opacity .2s;pointer-events:none}#toast.show{opacity:1}dialog{background:#141414;color:#eee;border:1px solid #343434;border-radius:12px;width:min(420px,calc(100vw - 40px));padding:34px;box-shadow:0 30px 160px #000}dialog::backdrop{background:#0009;backdrop-filter:blur(7px)}.close{position:absolute;right:8px;top:8px;font-size:24px}dialog h2{font-weight:500;font-size:24px;letter-spacing:-.6px;margin:8px 0 10px}dialog p{font-size:13px;line-height:1.7;color:#aaa}dialog dl{display:grid;grid-template-columns:90px 1fr;font-size:12px;gap:13px;margin:28px 0}dialog dt{color:#777}dialog dd{margin:0}dialog a{color:#d7c6f6;text-decoration:none;font-size:12px}dialog .shortcuts{display:grid;grid-template-columns:1fr auto;line-height:2;font-size:12px;color:#999}kbd{font-family:inherit;color:#ddd}#empty{text-align:center;color:#888;font-size:13px}#empty button{border:1px solid #444;border-radius:5px;padding:10px 15px;margin-top:10px;color:white}[hidden]{display:none!important}body.zen header,body.zen footer,body.zen .caption,body.zen .progress{opacity:0;pointer-events:none}header,footer{transition:opacity .3s}body:fullscreen{grid-template-rows:24px minmax(0,1fr) 80px}body:fullscreen header{position:absolute;inset:0 0 auto;height:80px;background:linear-gradient(#0009,transparent)}@media(max-width:850px){.platform{display:none}header,footer{padding-left:24px;padding-right:24px}main{margin:0 24px}.concept{display:none}.transport{gap:4px}#shuffle{padding:12px}#shuffle span{display:none}.transport i{margin:0 3px}.utilities{gap:0}.icon{width:36px}.caption{display:none}}@media(max-width:600px){body{grid-template-rows:76px minmax(0,1fr) 154px}header{padding:0 22px}.brand{font-size:18px}main{margin:0}footer{grid-template-columns:1fr auto;grid-template-rows:64px 72px;padding:0 22px;gap:0}.production{grid-column:1}.utilities{grid-column:2;grid-row:1}.transport{grid-column:1/3;grid-row:2;justify-self:center;gap:14px}#shuffle{padding:12px 20px}#shuffle span{display:block}.icon{width:40px}.transport i{margin:0 5px}#toast{bottom:165px}#visual{width:100%;height:auto;max-height:100%;object-fit:contain;aspect-ratio:4/3}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.brand{display:flex;align-items:center;width:40px;height:40px}.brand .scene-mark{width:33px;height:33px;fill:#e0e0e0;stroke:none;transition:fill .2s}.brand:hover .scene-mark{fill:#d4c0fc}.login-button{display:flex;align-items:center;gap:12px;padding:9px 12px;border:1px solid #353535;border-radius:6px;font-size:12px;color:#c8c8c8}.login-button svg{width:15px;height:15px}.login-button:hover{background:#202020;border-color:#555}.menu{right:100px}.form-label{display:block;margin:26px 0 9px;font-size:12px;color:#aaa}.dialog-input{width:100%;padding:13px 12px;border:1px solid #373737;border-radius:6px;background:#0b0b0b;color:#ddd;font:inherit;font-size:13px;outline:none}.dialog-input:focus{border-color:#b8a0df;box-shadow:0 0 0 2px #b8a0df20}.primary-action{width:100%;margin-top:12px;padding:13px;background:#e4d9f7;border:1px solid #e4d9f7;color:#20192c;border-radius:6px;font-size:13px;font-weight:500}.primary-action:hover{background:#f1eafa}.quiet-note{font-size:11px!important;color:#777!important;margin:18px 0 0!important}.dialog-kicker{font-size:11px;color:#999;margin:6px 0 20px}.share-preview{display:flex;gap:14px;align-items:center;margin:25px 0}.share-preview img{width:74px;height:54px;object-fit:cover;image-rendering:pixelated;border-radius:3px}.share-preview strong{display:block;font-size:13px;font-weight:500}.share-preview span{display:block;font-size:11px;color:#888;margin-top:6px}.success-mark{font-size:26px;color:#d4c0fc;margin:8px 0 25px}.text-action{color:#bba6df;font-size:12px;padding:14px 0 0}.topright{gap:22px}@media(max-width:600px){.topright{gap:16px}.login-button{padding:8px 10px;font-size:11px}.login-button svg{display:none}#filter{gap:10px;font-size:11px}.menu{right:72px}.brand .scene-mark{width:29px;height:29px}.utilities .icon{width:34px}}

.google-login{display:flex;align-items:center;justify-content:center;gap:14px;width:100%;margin-top:28px;padding:14px 18px;border:1px solid #444;border-radius:6px;background:#eee;color:#252525;font-size:13px;font-weight:500}.google-login:hover{background:#fff}.google-login svg{width:19px;height:19px;stroke:none}

.brand{width:auto;height:40px;display:inline-flex;align-items:center;font-family:"Arial Black",Arial,Helvetica,sans-serif;font-size:25px;font-weight:800;letter-spacing:-1.6px;line-height:1;color:#e5e5e5}.brand .brand-dot{color:#b6a3d1;letter-spacing:0}.brand:hover{color:#fff}@media(max-width:600px){.brand{font-size:23px}}

@font-face{font-family:Scene Grotesk;src:url('/assets/space-grotesk.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}.brand{font-family:Scene Grotesk,Arial,sans-serif;font-size:21px;font-weight:400;font-kerning:normal;letter-spacing:-.45px;color:#dedede;line-height:1.2;white-space:nowrap}@media(max-width:600px){.brand{font-size:19px;letter-spacing:-.4px}.topright{gap:12px}}@media(max-width:360px){header{padding-left:16px;padding-right:16px}.brand{font-size:17px}.topright{gap:8px}}
#visual{border:0;background:#000}.start-button{border:1px solid #383838;padding:14px 24px;border-radius:7px;background:#1b1b1b;font-size:13px}.start-button:hover{background:#292929;border-color:#555}
#stats{position:fixed;top:88px;left:40px;width:calc((100vw - 133.33svh + 293px) / 2 - 64px);max-width:260px;margin:0;font:10px/1.7 monospace;color:#6f6f6f;white-space:pre-wrap;pointer-events:none;z-index:2}body.zen #stats{opacity:0}@media(max-width:1180px){#stats{display:none}}
main .standby{position:absolute;height:100%;max-width:100%;aspect-ratio:4/3;border:0;opacity:0;pointer-events:none;z-index:-1}
.transport{gap:14px}.transport .play{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:#f2f2f2;color:#080808;margin:0 6px;position:relative}.transport .play:hover{transform:scale(1.06);background:#fff}.transport .play svg{width:18px;height:18px;fill:currentColor;stroke-width:1.5}.transport .play .pause-icon{fill:none;stroke-width:2.6}
#shuffle.icon{border:0;padding:0;margin:0;background:none;width:40px;height:40px;gap:0}#shuffle.icon:hover{background:#1d1d1d}#shuffle.icon svg{width:20px;height:20px}
dialog .signature{margin-bottom:28px}
body:fullscreen{height:100vh}body:fullscreen main{grid-row:2}body:fullscreen footer{grid-row:3}
.volume{display:flex;align-items:center;gap:2px;margin-right:6px}#volume{-webkit-appearance:none;appearance:none;width:84px;height:16px;background:transparent;cursor:pointer;--v:80%}#volume::-webkit-slider-runnable-track{height:2px;border-radius:2px;background:linear-gradient(to right,#d4c0fc var(--v),#303030 var(--v))}#volume::-moz-range-track{height:2px;border-radius:2px;background:#303030}#volume::-moz-range-progress{height:2px;border-radius:2px;background:#d4c0fc}#volume::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px;margin-top:-4.5px;border-radius:50%;background:#e9e9e9;border:0;transition:transform .15s}#volume::-moz-range-thumb{width:11px;height:11px;border-radius:50%;background:#e9e9e9;border:0}#volume:hover::-webkit-slider-thumb{transform:scale(1.2)}#volume:focus-visible{outline:2px solid #d4c0fc;outline-offset:4px;border-radius:4px}@media(max-width:850px){#volume{display:none}}
#about{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:rgb(8 8 8 / .72);backdrop-filter:blur(18px) saturate(.6);-webkit-backdrop-filter:blur(18px) saturate(.6);cursor:pointer;outline:0;padding:0 24px}#about .note{max-width:60ch}#about .note p{margin:0;font-size:clamp(17px,2.1vw,22px);line-height:1.55;letter-spacing:-.2px;color:#e4e4e4}#about .note .signature{margin-top:26px;color:#e4e4e4}@media(prefers-reduced-transparency:reduce){#about{background:#080808;backdrop-filter:none}}

#swipe{display:none;position:absolute;inset:0;z-index:2;touch-action:pan-y}@media(pointer:coarse){#swipe{display:block}}#visual.slide{transition:transform .28s ease-out}

/* Navigation and browsing: a sidebar on wide screens, a tab bar on narrow ones. While a
   group, a toplist or search is open (body.browse) the player shrinks into the bar below
   and keeps playing; its frame stays where it is in the page. */
body{grid-template-columns:200px minmax(0,1fr)}header,footer{grid-column:1/-1}main,#view{grid-column:2;grid-row:2}main{margin:0 200px 0 0}
#nav{grid-column:1;grid-row:2;display:flex;flex-direction:column;gap:2px;padding:6px 0 0 28px;z-index:2}
#nav a{display:flex;align-items:center;gap:14px;height:40px;padding:0 12px;border-radius:7px;color:#8a8a8a;text-decoration:none;font-size:13px;transition:color .2s,background .2s}
#nav a:hover{color:#eee;background:#141414}#nav a[aria-current]{color:#eee}#nav a[aria-current] svg{color:#d4c0fc}#nav svg{width:19px;height:19px}
#stats{top:auto;bottom:136px;width:150px}
#return{display:none}
#view{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 40px 48px 0;scrollbar-width:thin;scrollbar-color:#2a2a2a transparent}
.page{max-width:1080px}
.page-head{padding:28px 0 30px}
.page h1{font-family:Scene Grotesk,Arial,sans-serif;font-weight:400;font-size:clamp(34px,4.6vw,60px);letter-spacing:-.035em;line-height:1.05;margin:0 0 14px;color:#eee;text-wrap:balance}
.facts{margin:0;font-size:13px;color:#999;line-height:1.6;max-width:62ch}.facts span{color:#6f6f6f;margin-left:12px}.facts a{color:#d7c6f6;text-decoration:none}
.play-all{display:inline-flex;align-items:center;gap:10px;margin-top:26px;padding:12px 22px 12px 18px;border-radius:7px;background:#f2f2f2;color:#080808;font-size:13px;font-weight:500;transition:background .2s,transform .15s}
.play-all:hover{background:#fff}.play-all:active{transform:scale(.98)}.play-all svg{width:15px;height:15px;fill:currentColor;stroke:none}
.rows{list-style:none;margin:0;padding:0}
.row{display:grid;grid-template-columns:40px minmax(0,1.5fr) 120px 56px minmax(0,1fr);align-items:center;gap:16px;min-height:56px;padding:6px 12px;border-radius:7px;cursor:pointer;transition:background .15s}
.row:hover{background:#121212}.row .n{font:12px/1 monospace;color:#5f5f5f;text-align:right;font-variant-numeric:tabular-nums}
.row .t{min-width:0;display:flex;flex-direction:column;gap:5px}.row .title{padding:0;text-align:left;font-size:14px;color:#e9e9e9;letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.row .sub{font-size:11px;color:#8a8a8a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.row .sub a{color:#8a8a8a;text-decoration:none}.row .sub a:hover{color:#eee;text-decoration:underline}.row .sub .m{display:none}
.row .pf,.row .yr,.row .party{font-size:12px;color:#8a8a8a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.row .yr{font-variant-numeric:tabular-nums}.row .party i{font-style:normal;color:#5f5f5f;margin-left:8px}
.row.now .title,.row.now .n{color:#d4c0fc}
.chips{display:flex;gap:8px;padding-top:6px;overflow-x:auto;scrollbar-width:none}.chips::-webkit-scrollbar{display:none}
.chip{flex:none;padding:8px 14px;border:1px solid #2c2c2c;border-radius:7px;font-size:12px;color:#aaa;text-decoration:none;transition:background .2s,color .2s,border-color .2s}.chip:hover{color:#fff;border-color:#4a4a4a}.chip[aria-current]{background:#f2f2f2;border-color:#f2f2f2;color:#080808}
.skeleton{background:#121212;border-radius:7px;animation:pulse 1.4s ease-in-out infinite}.skeleton.head{height:150px;margin:28px 0 30px;max-width:420px}.skeleton.row{height:44px;margin:12px 0}
@keyframes pulse{50%{opacity:.5}}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.search{padding-top:12px}.search-box{display:flex;align-items:center;gap:12px;max-width:520px;padding:0 16px;height:48px;border:1px solid #2e2e2e;border-radius:7px;background:#0e0e0e;transition:border-color .2s}.search-box:focus-within{border-color:#8f7cb0}.search-box svg{color:#777;flex:none}
#search{flex:1;min-width:0;height:100%;border:0;background:none;color:#eee;font:inherit;font-size:15px;outline:none}#search::placeholder{color:#7a7a7a}#search::-webkit-search-cancel-button{filter:invert(.6)}
#results h2{font-weight:500;font-size:13px;color:#999;margin:34px 0 8px;letter-spacing:0}
.hits{list-style:none;margin:0;padding:0;max-width:720px}.hit{display:flex;flex-direction:column;gap:5px;width:100%;padding:11px 12px;border-radius:7px;text-align:left;text-decoration:none;color:inherit;transition:background .15s}.hit:hover,.hit:focus-visible{background:#141414}.hit:focus-visible{outline-offset:0}
.hit strong{font-weight:400;font-size:14px;color:#e9e9e9}.hit span{font-size:11px;color:#8a8a8a}.hit b{font-weight:400;color:#666;margin-left:8px}.hit.loading{opacity:.5}
.none{color:#888;font-size:13px;margin-top:30px}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;max-width:820px}.tile{display:flex;align-items:flex-end;height:88px;padding:14px 16px;border-radius:7px;background:#121212;color:#ddd;text-decoration:none;font-family:Scene Grotesk,Arial,sans-serif;font-size:17px;letter-spacing:-.3px;transition:background .2s}.tile:hover{background:#1b1b1b;color:#fff}
.np{min-width:0}#credit a{color:inherit;text-decoration:none}#credit a:hover{color:#eee;text-decoration:underline}.production{min-width:0}#title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

body.browse #filter,body.browse #platforms,body.browse #stats,body.browse #swipe{display:none!important}
body.browse main{position:fixed;left:40px;bottom:24px;width:85px;height:64px;margin:0;z-index:4;border-radius:4px;overflow:hidden;background:#000}
/* The frame keeps its size and is only drawn smaller: an emulator that sees a tiny window
   lays itself out again (and showed its picture twice). */
body.browse main #visual{position:absolute;left:0;top:0;width:640px;height:480px;max-width:none;max-height:none;aspect-ratio:auto;transform:scale(.1328);transform-origin:0 0;pointer-events:none}
body.browse #return{display:block;position:absolute;inset:0;z-index:3;width:100%;height:100%}
body.browse .production{padding-left:105px}

@media(max-width:850px){
 body{grid-template-columns:minmax(0,1fr);grid-template-rows:88px minmax(0,1fr) 112px 60px}
 main,#view{grid-column:1}main{margin:0 24px}#view{padding:0 24px 32px}
 #nav{grid-row:4;flex-direction:row;justify-content:space-around;padding:0 8px;border-top:1px solid #1a1a1a;background:#080808}
 #nav a{flex:1;flex-direction:column;justify-content:center;gap:5px;height:60px;padding:0;font-size:10px;border-radius:0}#nav a:hover{background:none}
 .row{grid-template-columns:28px minmax(0,1fr) 56px;gap:12px;padding:6px 8px}.row .pf,.row .party{display:none}
 body.browse{grid-template-rows:76px minmax(0,1fr) 72px 60px}
 body.browse footer{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:72px;padding:0 16px;gap:12px}
 body.browse main{left:16px;bottom:72px;width:64px;height:48px}
 body.browse main #visual{transform:scale(.1)}
 body.browse .production{padding-left:76px}body.browse .utilities{display:none}
 body.browse .transport{grid-column:2;grid-row:1;gap:2px}body.browse #shuffle,body.browse #prev,body.browse #infinity{display:none}
 body.browse .transport .play{width:38px;height:38px;margin:0 2px}
 body.browse #toast{bottom:144px}
}
@media(max-width:600px){
 body{grid-template-rows:76px minmax(0,1fr) 154px 60px}main{margin:0}#view{padding:0 16px 32px}
 .row .yr{display:none}.row{grid-template-columns:24px minmax(0,1fr)}.row .sub .m{display:inline}.row .sub .gl+.m{margin-left:8px}.row .sub .m{color:#666}
 .page-head{padding:18px 0 22px}.play-all{margin-top:20px}
 body.browse header{padding:0 16px}
}
@media(prefers-reduced-motion:reduce){.skeleton{animation:none}}
@media(max-width:850px){#toast{bottom:182px}}@media(max-width:600px){#toast{bottom:225px}}
body:fullscreen{grid-template-columns:minmax(0,1fr)}body:fullscreen #nav{display:none}body:fullscreen main{grid-column:1;margin:0 40px}
.np{display:flex;flex-direction:column;align-items:flex-start;min-width:0}.np #details{max-width:100%}
#view .page-head{display:block;padding:28px 0 30px;z-index:auto}@media(max-width:600px){#view .page-head{padding:18px 0 22px}}
.hits{margin-left:-12px}
.rows{margin-left:-12px}@media(max-width:850px){.rows{margin-left:-8px}}

/* Now playing: the production's picture, the group, then when, where and at which party.
   The platform badge moved into that line. */
#cover{width:64px;height:48px;object-fit:cover;border-radius:4px;flex:none;background:#111;image-rendering:pixelated}
#facts{display:block;font-size:11px;color:#6f6f6f;margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
#platform{display:none!important}
body.browse #cover{visibility:hidden}
/* FPS and audio: part of the right-hand group in the top bar, on the filter's baseline.
   Labels dimmer than values; figures of one width, so the count does not jitter. */
header{position:relative}
#stats{position:static!important;transform:none;width:auto!important;max-width:none!important;height:auto;display:flex;gap:18px;margin:0;font:10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums;color:#9a9a9a;white-space:nowrap;pointer-events:none}
#stats i{font-style:normal;color:#5c5c5c}
@media(max-width:600px){#stats{position:absolute!important;top:54px!important;bottom:auto!important;left:22px!important;font-size:9px;gap:14px}}
/* On a phone the readout sits under the wordmark: measured from the header, not the filter. */
@media(max-width:600px){.topright{position:static}#platforms.menu{right:22px;top:64px}}

/* The way back to the list a production was opened from: in line with the list's left
   edge, just above the player. */
#from{position:absolute;left:0;top:-30px;display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 8px 0 2px;border-radius:5px;font-size:12px;color:#9a9a9a;text-decoration:none;z-index:3;max-width:60%;transition:color .2s,background .2s}
#from span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#from svg{width:15px;height:15px;flex:none}
#from:hover{color:#eee;background:#151515}
#from:focus-visible{outline:2px solid #d4c0fc;outline-offset:2px}
body.browse #from{display:none}
@media(max-width:600px){#from{top:6px;left:16px;background:#0b0b0bcc}}
.row a.title{display:block;text-decoration:none;overflow:hidden;text-overflow:ellipsis}.row a.title:hover{text-decoration:underline;text-underline-offset:3px}

/* Cinema mode: no sidebar, the player across the page; while browsing a list it changes
   nothing. Phones have no sidebar, so no button either. */
body.cinema:not(.browse) #nav{display:none}
body.cinema:not(.browse) main{grid-column:1/-1;margin:0 24px}
/* A 4:3 picture is bound by height, not width: the bars get slimmer so it can grow. */
body.cinema:not(.browse){grid-template-rows:52px minmax(0,1fr) 84px}
body.cinema:not(.browse) header{height:52px}
body.cinema:not(.browse) #from{top:-26px}
body.cinema:not(.browse) #from{left:0}
#cinema[aria-pressed=true]{color:#d4c0fc}
body.browse #cinema{display:none}
@media(max-width:850px){#cinema{display:none}}

/* The mark over the picture: pause stays while paused, play shows for a moment. */
#mark{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;background:#0a0a0ab3;display:flex;align-items:center;justify-content:center;color:#eee;opacity:0;pointer-events:none;z-index:2;transform:scale(.9);transition:opacity .25s,transform .25s}
#mark svg{width:34px;height:34px;stroke-width:1.6;display:none}
#mark.paused{opacity:1;transform:none}#mark.paused .m-pause{display:block}
#mark.flash{animation:markflash .7s ease-out}#mark.flash .m-play{display:block}
@keyframes markflash{0%{opacity:1;transform:none}100%{opacity:0;transform:scale(1.15)}}
@media(prefers-reduced-motion:reduce){#mark.flash{animation:none}}
body.browse #mark{display:none}

/* Until the browser lets sound start: one quiet button over the picture, gone after the
   first touch. */
/* At the picture's top left corner: the picture is 4:3 and centred in <main>, so its
   corner follows from <main>'s size (container units). */
main{container-type:size}
#unmute{display:none;position:absolute;left:calc(50% - min(100cqw, 133.33cqh) / 2 + 12px);top:calc(50% - min(100cqh, 75cqw) / 2 + 12px);z-index:4;align-items:center;gap:8px;height:34px;padding:0 14px 0 10px;border-radius:17px;background:#0a0a0acc;color:#eee;font-size:12px;border:1px solid #2c2c2c}
#unmute svg{width:17px;height:17px}
#unmute:focus-visible{outline:2px solid #d4c0fc;outline-offset:2px}
body.muted-start #unmute{display:inline-flex}
/* Waiting for the viewer to choose (app.js openInput): quiet, where the unmute note sits. */
#choice{display:none;position:absolute;left:calc(50% - min(100cqw, 133.33cqh) / 2 + 12px);top:calc(50% - min(100cqh, 75cqw) / 2 + 12px);z-index:4;align-items:center;height:34px;padding:0 14px;border-radius:17px;background:#0a0a0acc;color:#eee;font-size:12px;border:1px solid #2c2c2c;pointer-events:none}
body.input-open #choice{display:inline-flex}body.input-open.muted-start #choice{top:calc(50% - min(100cqh, 75cqw) / 2 + 56px)}body.browse #choice{display:none!important}body.input-open #swipe{display:none}
@media(pointer:coarse){#choice{height:44px;padding:0 16px;border-radius:22px;font-size:13px}}
body.browse #unmute{display:none}
/* A finger needs 44 px. */
@media(pointer:coarse){#unmute{height:44px;padding:0 16px 0 12px;border-radius:22px;font-size:13px}}

/* Party pages: a heading per competition; party names link to their page. */
.compo{font-size:13px;font-weight:500;color:#cfcfcf;letter-spacing:-.1px;margin:34px 0 6px}
.page-head .facts .sep{display:inline-block;width:18px}
.row .party a,#facts a{color:inherit;text-decoration:none}.row .party a:hover,#facts a:hover{color:#eee;text-decoration:underline;text-underline-offset:3px}
/* #static: text for crawlers that run no scripts; gone as soon as the page's scripts run. */
html.js #static{display:none}
#static{max-width:640px;margin:24px 40px;font-size:14px;line-height:1.6;color:#bbb}#static a{color:#d4c0fc}

/* Back to where a page was opened from: same look as the player's way back; pinned on a
   phone, where a long list would scroll it away. */
#view .back{display:inline-flex;align-items:center;gap:6px;height:28px;margin:0 0 14px -6px;padding:0 10px 0 4px;border-radius:6px;font-size:12px;color:#9a9a9a;text-decoration:none;max-width:100%;transition:color .2s,background .2s}
#view .back span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#view .back svg{width:15px;height:15px;flex:none}
#view .back:hover{color:#eee;background:#151515}#view .back:focus-visible{outline:2px solid #d4c0fc;outline-offset:2px}
@media(pointer:coarse){#view .back{position:sticky;top:0;z-index:2;height:44px;margin:0 -22px 8px;padding:0 22px 0 16px;width:calc(100% + 44px);border-radius:0;background:#080808f2;font-size:13px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}}

/* The party in a row's second line where its own column does not fit (phones). */
.row .pm{display:none}@media(max-width:850px){.row .pm{display:inline;margin-left:8px}.row .pm a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#444}}

/* The music-video view on a phone: the picture stays at the top while the page scrolls; the
   controls, then what is known about the production, come below. Hairlines, no boxes. */
#more{display:none}
@media(max-width:600px){
 body:not(.browse){display:block;height:auto;min-height:100svh;overflow-y:auto;overflow-x:hidden}
 body:not(.browse) main{position:sticky;top:0;z-index:3;height:75vw;background:#080808}
 body:not(.browse) #more{display:block;padding:8px 22px 120px}
 #more .more-about{padding:26px 0 22px;border-top:1px solid #1c1c1c}
 #more h2{font-size:22px;font-weight:500;letter-spacing:-.4px;margin:0 0 8px}
 #more .more-by{margin:0 0 4px;font-size:14px;color:#cfcfcf}#more .more-by a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#444}
 #more .more-facts{margin:0;font-size:13px;color:#8a8a8a}
 #more .more-list{padding:18px 0 6px;border-top:1px solid #1c1c1c;animation:morein .6s cubic-bezier(.16,1,.3,1) both}
 #more .more-list>header{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:6px}
 #more h3{font-size:15px;font-weight:500;margin:0}#more .more-list>header a{font-size:13px;color:#9a9a9a;text-decoration:none;padding:12px 0 12px 12px}
 #more .rows{margin:0;padding:0}
}
@keyframes morein{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){#more .more-list{animation:none}}
@media(max-width:600px){
 /* The scrolling view keeps the tab bar at the bottom of the screen, and one left edge. */
 body:not(.browse) #nav{position:fixed;left:0;right:0;bottom:0;z-index:5}
 #more .more-list>header{padding:0;height:auto;position:static;background:none}
 #more .more-list .row{padding-left:0;padding-right:0}
}
@media(max-width:600px){body:not(.browse) header{height:76px}#more{padding-top:0}#more .more-list:first-child{border-top:1px solid #1c1c1c;margin-top:8px}}
/* Toplists: platform and era as two rows of choices that combine. */
.pickers{display:grid;gap:8px;margin-bottom:26px}.pickers .chips{margin:0}
.chip[aria-disabled=true]{opacity:.35;cursor:default;pointer-events:none}
/* Nothing playing yet (the home page and other pages, opened directly): no player bar. */
body.idle footer,body.idle main{display:none!important}
/* The home page: one way into the feed, then shelves of cards that scroll sideways. Cards are
   the productions' own pictures at their 4:3, the title, the group; a production without a
   picture gets its platform set in type, not a fake image. */
.home-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:4px 0 30px}
.home-head h1{font-size:40px;letter-spacing:-1px;margin:0}
.shelf{margin:0 0 34px}
.shelf>header{display:flex;align-items:baseline;justify-content:space-between;margin:0 0 12px;padding:0;height:auto;position:static;background:none}
.shelf h2{font-size:18px;font-weight:500;letter-spacing:-.3px;margin:0}
.shelf>header a{font-size:12px;color:#9a9a9a;text-decoration:none;padding:10px 0 10px 12px}.shelf>header a:hover{color:#eee}
.cards{display:grid;grid-auto-flow:column;grid-auto-columns:168px;gap:18px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;list-style:none;margin:0;padding:0 0 8px;scrollbar-width:none}
.cards::-webkit-scrollbar{display:none}
.cards li{scroll-snap-align:start}
.card{display:block;text-decoration:none;color:#e9e9e9;border-radius:6px}
.card:focus-visible{outline:2px solid #d4c0fc;outline-offset:3px}
.card-pic{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;border-radius:6px;overflow:hidden;background:#151515;margin-bottom:9px;transition:transform .2s}
.card-pic img{width:100%;height:100%;object-fit:fill;image-rendering:pixelated}
.card:hover .card-pic{transform:translateY(-2px)}.card:active .card-pic{transform:scale(.98)}
.card-type{font-size:12px;color:#6f6f6f;letter-spacing:.02em}
.group-card .card-type{font-size:34px;color:#8a8a8a}
.card strong{display:block;font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card>span:last-child{display:block;font-size:12px;color:#8a8a8a;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.play-random{text-decoration:none}
@media(max-width:600px){.home-head h1{font-size:30px}.cards{grid-auto-columns:138px;gap:14px}.shelf{margin-bottom:28px}}
@media(prefers-reduced-motion:reduce){.card-pic{transition:none}}
.home-head{padding:0;height:auto;position:static;background:none}
.page.home{max-width:none;padding-right:0}
.page.home .shelf>header{padding-right:40px}
@media(max-width:600px){.page.home .shelf>header{padding-right:22px}}

/* Cards: bigger, every one the same 4:3 box and the same text lines; platform marks in the
   text's own light grey. */
.cards{grid-auto-columns:240px;gap:22px}
.card-pic{width:100%}
.card strong{height:18px;line-height:18px}
.card .card-sub{display:flex;align-items:center;justify-content:space-between;gap:8px;height:18px;margin-top:3px;font-size:12px;color:#8a8a8a}
.card .card-sub>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.picons{display:inline-flex;gap:6px;flex:none;color:#8a8a8a}.picons svg{width:13px;height:13px;display:block}
.card-type{color:#5a5a5a}.card-type svg{width:42px;height:42px;display:block}
.group-card .card-type{font-size:44px}
@media(max-width:600px){.cards{grid-auto-columns:180px;gap:14px}}
.card>span.card-sub{display:flex}

/* The six seconds over a card's picture, faded in once playing. */
.card-pic{position:relative}.card-pic video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .25s}.card-pic video.on{opacity:1}
@media(prefers-reduced-motion:reduce){.card-pic video{display:none}}

/* Browse: a wall of the same cards as the home page; it grows as the visitor scrolls. */
.wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:26px 20px;list-style:none;margin:6px 40px 0 0;padding:0}
.wall-more{height:1px}.wall-end{color:#8a8a8a;font-size:13px}
@media(max-width:600px){.wall{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px;margin-right:22px}}
/* Indexes A to Z: a strip of letters, then names in columns. */
.letters{display:flex;flex-wrap:wrap;gap:2px;margin:0 0 22px;position:sticky;top:0;background:#080808;padding:6px 0;z-index:2}
.letters a{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:30px;border-radius:6px;font-size:13px;color:#9a9a9a;text-decoration:none}
.letters a:hover{background:#151515;color:#eee}
.letter{margin:0 0 26px;scroll-margin-top:50px}.letter h2{font-size:18px;font-weight:500;margin:0 0 8px;color:#cfcfcf}
.names{columns:3 220px;column-gap:28px;list-style:none;margin:0;padding:0}
.names li{display:flex;align-items:center;gap:8px;break-inside:avoid;padding:5px 0}
.names a{color:#e4e4e4;text-decoration:none;font-size:14px}.names a:hover{text-decoration:underline;text-underline-offset:3px}
@media(pointer:coarse){.letters a{min-width:36px;height:36px}.names li{padding:9px 0}}

/* Info button hidden for now. */
#info { display: none; }

/* Beta mark: a small red tag at the top right of the wordmark. */
.brand .beta{align-self:flex-start;margin:7px 0 0 3px;font-family:Arial,Helvetica,sans-serif;font-size:9px;font-weight:700;line-height:1;letter-spacing:.14em;text-transform:uppercase;color:#ff4b4b;vertical-align:baseline}@media(max-width:600px){.brand .beta{font-size:8px;margin-top:6px}}

/* About: apart from the browsing items, a step below them in the sidebar. */
#nav .nav-about{margin-top:20px}@media(max-width:850px){#nav .nav-about{margin-top:0}}

/* About: two sentences, the numbers, the dedication. */
#about .note .intro{font-size:clamp(17px,2vw,20px);line-height:1.6;color:#e4e4e4;margin:0}#about .stats-head{font-size:13px;font-weight:500;color:#8a8a8a;margin:34px 0 10px}#about .stats{display:grid;grid-template-columns:max-content max-content;gap:6px 28px;margin:0 0 34px}#about .stats div{display:contents}#about .stats dt{font-size:16px;color:#bdbdbd}#about .stats dd{margin:0;font-size:16px;color:#f2f2f2;text-align:right;font-variant-numeric:tabular-nums}#about .stats .total dt,#about .stats .total dd{padding-top:8px;border-top:1px solid #2a2a2a;color:#fff;font-weight:500}
#about .stats{column-gap:0}#about .stats dt{padding-right:28px}

/* Stats: large numbers with a small label under each; Total first and set apart. Two by two on a phone. */
#about .stats{display:grid;grid-template-columns:auto repeat(3,auto);justify-content:start;gap:0 40px;margin:12px 0 0}#about .stats div{display:flex;flex-direction:column-reverse;gap:6px;padding:0}#about .stats dt{font-size:12px;color:#8c8c8c;padding:0;letter-spacing:.01em}#about .stats dd{margin:0;font-size:clamp(28px,3.4vw,40px);font-weight:500;line-height:1;letter-spacing:-.04em;color:#ececec;text-align:left;font-variant-numeric:tabular-nums}#about .stats .total{padding-right:40px;border-right:1px solid #2c2c2c}#about .stats .total dd{color:#fff}#about .stats .total dt,#about .stats .total dd{border-top:0;padding-top:0;font-weight:500}#about .stats-head{margin:40px 0 0}@media(max-width:600px){#about .stats{grid-template-columns:1fr 1fr;gap:26px 24px}#about .stats .total{padding-right:0;border-right:0;grid-column:1/-1}#about .stats .total dd{font-size:44px}}
#about .stats div{flex-direction:column}
@media(max-width:600px){#about .stats{grid-template-columns:repeat(3,auto);gap:26px 28px}#about .stats dd{font-size:28px}#about .stats .total dd{font-size:44px}}

/* By decade: a second, smaller row under the platform numbers. */
#about .stats.decades{grid-template-columns:repeat(auto-fill,minmax(56px,max-content));gap:16px 32px;margin-top:30px;padding-top:24px;border-top:1px solid #222}#about .stats.decades dd{font-size:22px;color:#d6d6d6}@media(max-width:600px){#about .stats.decades{grid-template-columns:repeat(3,auto);gap:18px 28px}#about .stats.decades dd{font-size:22px}}

/* Contact: one address under the stats. */
#about .contact{margin:34px 0 0;font-size:15px}#about .contact a{color:#cfcfcf;text-decoration:none;border-bottom:1px solid #444;padding-bottom:2px}#about .contact a:hover{color:#fff;border-color:#888}
#about .note .contact{margin:40px 0 0;font-size:15px;line-height:1.4}
#about .note .contact{margin:22px 0 0}
@media(max-width:600px){#blend{min-width:44px;height:44px}}

/* Motion: a text switch in the readout, for people who care about 50 Hz on 60 Hz screens. */
#blend.motion{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:0 4px;font:10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:#cfcfcf;cursor:pointer;border-radius:4px}#blend.motion i{font-style:normal;color:#5c5c5c}#blend.motion span{border-bottom:1px dotted #555;padding-bottom:1px}#blend.motion:hover span{color:#fff;border-bottom-color:#999}body.browse #blend{display:none!important}@media(max-width:850px){#blend.motion{min-height:44px}}
@media(max-width:600px){#blend.motion{position:absolute;right:16px;top:44px;min-height:28px;z-index:4}}
@media(max-width:600px){#blend.motion{top:37px}}
.report-kinds{flex-wrap:wrap;margin:22px 0 4px}.report-kinds .chip{min-height:44px;background:none;cursor:pointer}.report-kinds .chip[aria-current]{background:#f2f2f2;color:#080808}textarea.dialog-input{resize:vertical;min-height:84px;line-height:1.5}
#disknote{position:absolute;right:calc(50% - min(100cqw, 133.33cqh) / 2 + 12px);top:calc(50% - min(100cqh, 75cqw) / 2 + 12px);z-index:4;display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:15px;background:#0a0a0acc;color:#ddd;font-size:11px;border:1px solid #2c2c2c;pointer-events:none;opacity:0;transition:opacity .3s}#disknote.show{opacity:1}body.browse #disknote{display:none}
/* Cinema: the picture takes the whole window; the bars lie over it and fade out while the
   mouse rests. */
body.cinema:not(.browse) main{position:fixed;inset:0;margin:0;z-index:1}
body.cinema:not(.browse) header,body.cinema:not(.browse) footer{position:fixed;left:0;right:0;z-index:5;transition:opacity .4s}
body.cinema:not(.browse) header{top:0;background:linear-gradient(#000c,transparent)}
body.cinema:not(.browse) footer{bottom:0;height:96px;background:linear-gradient(transparent,#000c)}
body.cinema.rest:not(.browse) footer,body.cinema.rest:not(.browse) .progress{opacity:0;pointer-events:none}
/* At rest the logo stays; the rest of the top bar and its shade fade with the controls. */
body.cinema:not(.browse) header{transition:background .4s}body.cinema:not(.browse) header>*{transition:opacity .4s}
body.cinema.rest:not(.browse) header{background:transparent;pointer-events:none}body.cinema.rest:not(.browse) header>:not(.brand){opacity:0}
body.zen header{opacity:1!important;pointer-events:none}body.zen header>:not(.brand){opacity:0}
body.cinema.rest:not(.browse){cursor:none}
/* People: credits on a production (details panel, phone view), a scener's page, a group's members. */
.page-head .facts+.facts{margin-top:6px}
.facts.in a{color:#d7c6f6}
.facts.in a:hover{text-decoration:underline;text-underline-offset:3px}
.row .sub .rl{color:#b8b8b8}
.row .sub .rl+.gl{margin-left:8px}
.row .sub .rl+.gl::before{content:"with ";color:#6f6f6f}
.people{margin-top:44px}
.people h2{font-size:13px;font-weight:500;color:#cfcfcf;letter-spacing:-.1px;margin:0 0 4px}
.people h3{font-size:12px;font-weight:500;color:#7a7a7a;margin:18px 0 2px}
.handles{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;column-gap:22px}
.handles li{display:flex}
.handles a,.handles span{display:inline-flex;align-items:center;min-height:44px;font-size:14px;color:#e9e9e9;text-decoration:none}
.handles span{color:#8a8a8a}
.handles a:hover{text-decoration:underline;text-underline-offset:3px}
.source{margin:48px 0 24px;font-size:12px;color:#6f6f6f}
.source a{color:#9a9a9a;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#444;display:inline-block;padding:12px 0;margin:-12px 0}
.source a:hover{color:#eee}
@media(max-width:600px){.row .sub .rl~.gl{display:none}.row .sub .rl+.m,.row .sub .rl~.m{margin-left:8px}}
/* Credits: one small line under the group in the player bar; it opens the sheet. */
#np-people:not([hidden]){display:block;font-size:12px;color:#8a8a8a;white-space:nowrap;margin-top:1px}
#np-people a{color:#b8b8b8;text-decoration:none}
#np-people a:hover{color:#eee;text-decoration:underline;text-underline-offset:3px}
#np-people button{background:none;border:0;font:inherit;color:inherit;padding:0;cursor:pointer;position:relative}
#np-people .np-more{color:#b8b8b8}
#np-people .np-more:hover,#np-people .np-credits:hover{color:#eee;text-decoration:underline;text-underline-offset:3px}
#np-people .np-credits{margin-left:10px;color:#7a7a7a}
/* A finger-sized hit area around the small words, without moving them. */
#np-people a,#np-people button{position:relative}
#np-people a::after,#np-people button::after{content:"";position:absolute;inset:-14px -4px}
#np-people a:focus-visible,#np-people button:focus-visible{outline:2px solid #d4c0fc;outline-offset:2px;border-radius:2px}

/* Profile pages (a group, a scener): best work large beside the facts, then blocks. */
.profile-head{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:48px;align-items:end;padding:28px 0 56px}
.profile-head.bare{grid-template-columns:minmax(0,1fr)}
.hero-pic{display:block;text-decoration:none;color:#e9e9e9}
.hero-pic .card-pic{aspect-ratio:4/3;border-radius:8px;margin:0}
.hero-pic img{width:100%;height:100%;object-fit:cover;image-rendering:pixelated}
.hero-cap{display:flex;justify-content:space-between;gap:12px;margin-top:10px;font-size:12px;color:#cfcfcf}
.hero-cap span{color:#7a7a7a;text-align:right}
.profile-text{min-width:0;padding-bottom:4px}
.profile h1{font-size:clamp(44px,6vw,88px);margin-bottom:18px;overflow-wrap:anywhere}
.profile-text .facts{font-size:14px;color:#a8a8a8;max-width:56ch}
.profile-text .facts+.facts{margin-top:6px}
.profile-text .facts a{color:#d7c6f6}
.profile-text .facts a:hover{text-decoration:underline;text-underline-offset:3px}
.profile-text .yrs{color:#6f6f6f;margin:0}
.slogan{display:block;margin-top:14px;font-size:17px;font-style:italic;color:#e9e9e9;letter-spacing:-.2px;quotes:"\201C" "\201D"}
.profile-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.profile-actions .play-all{margin-top:0;min-height:44px;max-width:100%}
.play-all.ghost{background:none;color:#e9e9e9;border:1px solid #2c2c2c}
.play-all.ghost:hover{background:#151515}
.block{padding:30px 0 10px;border-top:1px solid #1a1a1a;margin-top:18px}
.block-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px;min-height:44px}
.block h2{font-family:Scene Grotesk,Arial,sans-serif;font-weight:400;font-size:24px;letter-spacing:-.02em;margin:0;color:#eee}
.block .chips{padding:0}
.cards.grid{grid-auto-flow:row;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));grid-auto-columns:auto;overflow:visible;gap:26px 18px}
.results{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));column-gap:40px}
.results li{display:grid;grid-template-columns:52px minmax(0,1fr);align-items:center;min-height:60px;border-bottom:1px solid #161616}
.place{font-family:Scene Grotesk,Arial,sans-serif;font-size:22px;color:#6f6f6f;letter-spacing:-.02em}
.place.win{color:#d4c0fc}
.res-t{display:flex;flex-direction:column;gap:3px;min-width:0}
.res-t>a{font-size:14px;color:#e9e9e9;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.res-t>a:hover{text-decoration:underline;text-underline-offset:3px}
.res-t>span{font-size:12px;color:#8a8a8a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.res-t>span a{color:inherit;text-decoration:none}
.res-t>span a:hover{color:#eee;text-decoration:underline}
.more-results summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;min-height:44px;font-size:13px;color:#9a9a9a}
.more-results summary:hover{color:#eee}
.more-results summary::-webkit-details-marker{display:none}
.people-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:4px 28px}
.people-grid li{display:flex;flex-direction:column;justify-content:center;gap:3px;min-height:56px;min-width:0}
.people-grid a,.people-grid .nolink{font-size:15px;color:#e9e9e9;text-decoration:none;letter-spacing:-.2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.people-grid .nolink{color:#9a9a9a}
.people-grid a:hover{text-decoration:underline;text-underline-offset:3px}
.people-grid span:not(.nolink){font-size:12px;color:#7a7a7a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tags .chip{display:inline-flex;align-items:center;font-size:13px;color:#cfcfcf}
.profile a:focus-visible,.profile button:focus-visible,.profile summary:focus-visible{outline:2px solid #d4c0fc;outline-offset:2px}
@media(max-width:850px){.profile-head{grid-template-columns:minmax(0,1fr);gap:24px;padding-top:12px}.profile h1{font-size:clamp(40px,11vw,64px)}}
@media(max-width:600px){.cards.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}.results{grid-template-columns:minmax(0,1fr)}.people-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.block h2{font-size:21px}.profile-actions .play-all{flex:1 1 auto;justify-content:center}}
.rest-head{font-size:13px;font-weight:500;color:#9a9a9a;margin:36px 0 6px}
.block .rows{margin-top:4px}
/* Cinema on a phone held upright: only the picture, centred; the lists under it wait. */
body.cinema:not(.browse) #more,body.cinema:not(.browse) #people{display:none!important}
body.cinema:not(.browse){overflow:hidden}
body.cinema:not(.browse) main{display:flex;align-items:center;justify-content:center;background:#000}
.profile .hero-cap{display:flex;justify-content:space-between}.profile .hero-cap>span:first-child{color:#cfcfcf;text-align:left}
body.cinema:not(.browse) main{position:fixed!important;inset:0!important;width:auto!important;height:auto!important;max-height:none!important;margin:0!important;transform:none!important}
body.cinema:not(.browse) #visual{width:100%!important;height:100%!important;max-width:100%;max-height:100%;object-fit:contain;aspect-ratio:auto!important}
.profile .card.hero-pic>span.hero-cap{display:flex;gap:12px;margin-top:10px;font-size:13px}
.more-prods summary{margin-top:6px}
/* Tiles for people and groups; people round, as a music app shows artists. */
.atile.person .card-pic{aspect-ratio:1;border-radius:50%}
.atile.person strong,.atile.person .card-sub{text-align:center;justify-content:center}
.atile .card-type{font-family:Scene Grotesk,Arial,sans-serif;font-size:34px;color:#555}
.profile .block .cards:not(.grid){padding-bottom:4px}
.artists .page-head{padding-bottom:18px}
.artist-filters{display:flex;flex-direction:column;gap:6px;margin:0 0 28px}
.artist-filters .seg{margin-bottom:8px}
.artist-filters .seg .chip{font-size:14px;padding:10px 18px;display:inline-flex;align-items:center}
.artist-filters .chip[aria-current]{background:#f2f2f2;border-color:#f2f2f2;color:#080808}
.artists .cards.grid{grid-template-columns:repeat(auto-fill,minmax(168px,1fr))}
.artists .none{color:#8a8a8a;font-size:14px}
@media(max-width:600px){.artists .cards.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* The platform choice is gone (toplists and Browse cover it); About sits in its place. */
body.browse .pick,.topright #filter{display:none!important}
.top-about{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;font-size:12px;color:#aaa;text-decoration:none}.top-about:hover{color:#fff}

/* Credits: a round picture, the handle, what they did; Spotify's and Apple Music's credits. */
.credits{min-width:0}
.cr-head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px}
.cr-head h3,.cr-sheet h3{font-size:15px;font-weight:500;color:#eee;margin:0;letter-spacing:-.2px}
.cr-all{background:none;border:0;color:#9a9a9a;font:inherit;font-size:13px;min-height:44px;padding:0 0 0 12px;cursor:pointer}
.cr-all:hover{color:#eee;text-decoration:underline;text-underline-offset:3px}
.credits ul,.cr-group ul{list-style:none;margin:0;padding:0}
.cr-row{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 10px;margin:0 -10px;border-radius:8px;color:#e9e9e9;text-decoration:none;transition:background .15s}
a.cr-row:hover{background:#141414}
a.cr-row:active{transform:scale(.99)}
a.cr-row:focus-visible,.cr-all:focus-visible{outline:2px solid #d4c0fc;outline-offset:2px}
.av{flex:none;width:40px;height:40px;border-radius:50%;overflow:hidden;background:#1b1b1b;display:grid;place-items:center;font-family:Scene Grotesk,Arial,sans-serif;font-size:16px;color:#777}
.av img{width:100%;height:100%;object-fit:cover;image-rendering:pixelated}
.cr-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.cr-t strong{font-size:14px;font-weight:500;letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cr-t span{font-size:12px;color:#8a8a8a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cr-sheet h2{margin-bottom:2px}
.cr-of{margin:0 0 8px;font-size:13px;color:#8a8a8a}
.cr-group{padding-top:14px}
.cr-group h4{margin:0 0 2px;font-size:12px;font-weight:500;color:#8a8a8a}
.in-info{margin:22px 0 14px}
.cr-t span{white-space:normal;line-height:1.35}
@media(max-width:850px){#np-people:not([hidden]){overflow:hidden;text-overflow:ellipsis;max-width:100%;cursor:pointer}#np-people .np-credits{display:none}#np-people a::after,#np-people button::after{display:none}}
.card .card-top{display:flex;align-items:center;justify-content:space-between;gap:8px;height:18px}.card .card-top strong{min-width:0;flex:1}.card .card-year{flex:none;font-size:12px;color:#8a8a8a;line-height:18px}
/* Controls over the picture (YouTube's player): hidden until the pointer moves, a tap, focus
   or a pause; a soft dark fade at the bottom keeps them readable on any picture. */
.ctl{display:none}
body.overlay:not(.browse) .ctl{display:block;position:absolute;z-index:4;opacity:0;pointer-events:none;transition:opacity .25s}
body.overlay:not(.browse) .ctl.show{opacity:1;pointer-events:auto}
body.overlay:not(.browse) .ctl::before{content:"";position:absolute;inset:auto 0 0 0;height:min(160px,45%);background:linear-gradient(to top,#000000b8,#00000059 55%,transparent);pointer-events:none}
.ctl-bar{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 14px 10px}
.ctl-bar .transport,.ctl-bar .utilities{display:flex;align-items:center;gap:2px;justify-self:auto;grid-column:auto;grid-row:auto}
.ctl-bar .transport i{display:none}
.ctl-bar .icon{width:44px;height:44px;color:#f2f2f2;filter:drop-shadow(0 1px 2px #0009)}
.ctl-bar .transport .play{width:44px;height:44px;margin:0 4px;background:none;color:#fff;border-radius:50%}
.ctl-bar .transport .play svg{width:22px;height:22px}
@media(hover:hover){.ctl-bar .transport .play:hover{background:#ffffff1f;transform:none}}
.ctl-bar .icon:hover{background:#ffffff1f;border-radius:50%}
.ctl-bar #volume{width:84px}
.ctl-bar .volume{display:flex;align-items:center}
/* The bar under the picture keeps what plays and who made it; the controls left it. */
body.overlay:not(.browse):not(.cinema){grid-template-rows:88px minmax(0,1fr) 84px}
body.overlay:not(.browse) footer{grid-template-columns:minmax(0,1fr);grid-template-rows:auto}
body.overlay:not(.browse) #mark{display:none}
@media(max-width:850px){body.overlay:not(.browse):not(.cinema){grid-template-rows:88px minmax(0,1fr) 84px 60px}}
@media(max-width:600px){
 body.overlay:not(.browse) footer{grid-template-rows:auto;padding:12px 16px 10px}
 /* Phone: play, previous and next large in the middle, as the YouTube app; the rest small in a corner. */
 .ctl-bar{position:absolute;inset:0;padding:0}
 .ctl-bar .transport{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);gap:10px}
 .ctl-bar .transport .play{width:60px;height:60px;background:#0008}
 .ctl-bar .transport .play svg{width:26px;height:26px}
 .ctl-bar .utilities{position:absolute;right:4px;bottom:2px;display:flex}
 .ctl-bar .volume{display:none}
 body.overlay:not(.browse) .ctl::before{inset:0;height:auto;background:#00000073}
}
@media(prefers-reduced-motion:reduce){body.overlay .ctl{transition:none}}
.ctl-top{display:none}
/* A phone on its side: the picture takes the screen, as the YouTube app does; the title shows
   with the controls at the top left. */
@media(orientation:landscape) and (max-height:500px){
 body.overlay:not(.browse){display:block;height:100svh;overflow:hidden}
 body.overlay:not(.browse) header,body.overlay:not(.browse) #nav,body.overlay:not(.browse) footer,body.overlay:not(.browse) #more{display:none!important}
 body.overlay:not(.browse) main{position:fixed!important;inset:0!important;margin:0!important;height:auto!important;background:#000;display:flex;align-items:center;justify-content:center}
 body.overlay:not(.browse) main #visual{height:100%!important;width:auto!important;max-width:100%;aspect-ratio:4/3;position:static!important;transform:none!important;pointer-events:auto}
 body.overlay:not(.browse) .ctl-top{display:flex;flex-direction:column;gap:2px;position:absolute;left:16px;top:12px;right:16px;color:#fff;text-shadow:0 1px 3px #000}
 body.overlay:not(.browse) .ctl-top strong{font-size:15px;font-weight:500}
 body.overlay:not(.browse) .ctl-top span{font-size:12px;color:#ddd}
 body.overlay:not(.browse) .ctl::before{inset:0;height:auto;background:#0000008c}
 .ctl-bar{position:absolute;inset:0;padding:0}
 .ctl-bar .transport{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);gap:14px}
 .ctl-bar .transport .play{width:60px;height:60px;background:#0008}
 .ctl-bar .utilities{position:absolute;right:6px;bottom:4px;display:flex}
 .ctl-bar .volume{display:none}
}
/* On the picture an option that is on (keep playing) is the accent colour, not a box. */
.ctl .icon.active,.ctl .icon[aria-pressed=true]{background:none!important;color:#d4c0fc}
/* Phone, upright or on its side: previous, play and next alone in the middle (the YouTube
   app); shuffle and keep playing bottom left, the rest bottom right. */
@media(max-width:600px),(orientation:landscape) and (max-height:500px){
 body.overlay .ctl-bar .transport{position:static;transform:none}
 body.overlay .ctl-bar .transport>*{position:absolute;top:50%;transform:translate(-50%,-50%)}
 /* Hovered with a mouse (a narrow window on a computer) they stay where they are: the hover
    rule's transform:none moved them under the pointer and the click hit the bar. */
 body.overlay .ctl-bar .transport>*:hover{transform:translate(-50%,-50%)}
 body.overlay .ctl-bar #playpause{left:50%;width:64px;height:64px;background:#000000a6;margin:0}
 body.overlay .ctl-bar #prev{left:calc(50% - 92px);width:52px;height:52px}
 body.overlay .ctl-bar #nextbtn{left:calc(50% + 92px);width:52px;height:52px}
 body.overlay .ctl-bar #prev svg,body.overlay .ctl-bar #nextbtn svg{width:26px;height:26px}
 body.overlay .ctl-bar #shuffle{left:30px;top:auto;bottom:2px;transform:none}
 body.overlay .ctl-bar #infinity{left:78px;top:auto;bottom:2px;transform:none}
 body.overlay .ctl-bar #shuffle,body.overlay .ctl-bar #infinity{left:auto}
 body.overlay .ctl-bar #shuffle{left:6px}
 body.overlay .ctl-bar #infinity{left:52px}
}
@media(max-width:600px),(orientation:landscape) and (max-height:500px){
 body.overlay .ctl-bar #shuffle,body.overlay .ctl-bar #infinity{position:absolute!important;top:auto!important;bottom:2px!important;transform:none!important;width:44px;height:44px}
 body.overlay .ctl-bar #playpause{background:#000000a6!important;border-radius:50%}
}
/* Muted (also before the first click): the speaker crossed out, in red. */
body.muted-start #mute .vol-on{display:none}
body.muted-start #mute .vol-off{display:block!important}
body.muted-start #mute,#mute[aria-pressed=true]{color:#ff5a5a!important}
/* The unmute notice next to the volume button, pointing at it. */
#unmute.by-volume{position:absolute;left:auto;right:calc(100% + 10px);top:50%;transform:translateY(-50%);height:36px;padding:0 14px 0 12px;border-radius:18px;background:#f2f2f2;color:#0a0a0a;border:0;font-size:13px;font-weight:500;white-space:nowrap;box-shadow:0 4px 18px #0007;z-index:6}
#unmute.by-volume svg{display:none}
#unmute.by-volume::after{content:"";position:absolute;right:-6px;top:50%;margin-top:-6px;border:6px solid transparent;border-right:0;border-left-color:#f2f2f2}
body.muted-start #unmute.by-volume{display:inline-flex}
/* Phone: the mute button stays on the picture (no slider), with the notice beside it. */
@media(max-width:600px),(orientation:landscape) and (max-height:500px){
 body.overlay .ctl-bar .volume{display:flex!important}
 body.overlay .ctl-bar #volume{display:none}
}
body.muted-start #volume{opacity:.35}
/* Phone: above the button, pointing down, so it covers no other control. */
@media(max-width:600px),(orientation:landscape) and (max-height:500px){
 #unmute.by-volume{right:auto;left:50%;top:auto;bottom:calc(100% + 10px);transform:translateX(-50%)}
 #unmute.by-volume::after{right:auto;left:50%;top:auto;bottom:-6px;margin:0 0 0 -6px;border:6px solid transparent;border-bottom:0;border-top-color:#f2f2f2}
}
/* The control layer always takes the mouse over the picture (the player's own frames would
   swallow its movement), so a move shows the controls and a click pauses; a demo that wants
   the mouse or keys (input-open) gets the picture back. */
@media(hover:hover) and (pointer:fine){body.overlay:not(.browse):not(.input-open) .ctl{pointer-events:auto;cursor:default}body.overlay:not(.browse):not(.input-open) .ctl:not(.show){cursor:none}}
body.input-open .ctl:not(.show){pointer-events:none!important}
/* ---- The production under the picture: a placard. Title large, the group under it, then
   the facts as label and value pairs and the credits in one line; the playback settings
   (frame rate, smooth or exact motion) at the picture's right edge. ---- */
.playback{display:none}
.fact i,#np-people i{font-style:normal}
.fact+.fact::before{content:"\00b7";margin:0 7px;color:#4a4a4a}
.fact i{display:none}
#np-people i{color:#6f6f6f;margin-right:8px}
#np-people .np-names a{color:#cfcfcf}
#np-people .np-more{margin-left:6px;color:#b8b8b8}
#np-people .np-credits{display:none}
#desc{margin:12px 0 0;max-width:68ch;font-size:14px;line-height:1.6;color:#bdbdbd;text-wrap:pretty}
body:not(.browse) .playback{display:flex;align-items:center;gap:6px}
body:not(.browse) .playback #stats{display:flex!important;position:static!important;font:11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:#9a9a9a;gap:14px;padding:0 10px;white-space:nowrap}
body:not(.browse) .playback #stats i{color:#5f5f5f;margin-right:2px}
body:not(.browse) .playback #blend.motion{position:static;display:inline-flex;align-items:center;gap:8px;height:34px;min-height:34px;padding:0 14px;border:1px solid #262626;border-radius:17px;font:12px/1 Arial,Helvetica,sans-serif;color:#e6e6e6;transition:border-color .2s,background .2s}
body:not(.browse) .playback #blend.motion:hover{border-color:#3d3d3d;background:#121212}
body:not(.browse) .playback #blend.motion i{font-style:normal;color:#767676}
body:not(.browse) .playback #blend.motion span{border:0;padding:0}
body:not(.browse) .playback #blend[aria-pressed=false] span{color:#d4c0fc}
body.browse .playback{display:none!important}
body:not(.browse) footer #cover{display:none!important}
body:not(.browse) .production{display:block;padding:0}
body:not(.browse) .np{display:flex;flex-direction:row;flex-wrap:wrap;align-items:baseline;column-gap:28px;row-gap:0}
body:not(.browse) .np #details,body:not(.browse) #credit,body:not(.browse) #desc{flex:0 0 100%}
body:not(.browse) #details strong{font-family:Scene Grotesk,Arial,sans-serif;font-size:30px;line-height:1.12;font-weight:400;letter-spacing:-.025em;color:#f4f4f4;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body:not(.browse) #details{max-width:100%;min-height:0;border-radius:4px;cursor:text}
body:not(.browse) #credit{display:block;margin:6px 0 16px;font-size:15px;color:#c9c9c9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body:not(.browse) #credit a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px;text-decoration-color:#666}
body:not(.browse) #facts{flex:none;display:flex;gap:28px;margin:0;font-size:13px;line-height:20px;color:#dcdcdc;overflow:visible}
body:not(.browse) .fact+.fact::before{display:none}
body:not(.browse) .fact i,body:not(.browse) #np-people i{display:inline;margin-right:9px;font-size:13px;color:#6b6b6b}
body:not(.browse) #np-people:not([hidden]){flex:1 1 0;min-width:0;margin:0;font-size:13px;line-height:20px;color:#dcdcdc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body:not(.browse) #np-people .np-names a{color:#dcdcdc}
body:not(.browse) #np-people .np-more{color:#d4c0fc}
body:not(.browse) #np-people .np-more:hover{color:#ece2ff;text-decoration:underline;text-underline-offset:3px}
/* Desktop: the placard lines up with the picture's left and right edges. */
@media(min-width:851px){
 body:not(.browse):not(.cinema),body.overlay:not(.browse):not(.cinema){grid-template-rows:88px minmax(0,1fr) auto}
 body:not(.browse):not(.cinema) footer{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto;align-items:start;column-gap:40px;padding:24px var(--pic-r,240px) 32px var(--pic-l,240px)}
 body:not(.browse):not(.cinema) .playback{margin-top:2px}
 body:not(.browse) .fact a{color:inherit;text-decoration:none}
 body:not(.browse) .fact a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
}
@media(min-width:1600px){body:not(.browse) #details strong{font-size:36px}body:not(.browse) #credit{font-size:16px}}
/* Tablet and phone: the same placard, smaller; the labels give way to dots. */
@media(max-width:850px){
 body:not(.browse):not(.cinema),body.overlay:not(.browse):not(.cinema){grid-template-rows:88px minmax(0,1fr) auto 60px}
 body:not(.browse):not(.cinema) footer{display:flex;flex-direction:column;align-items:stretch;gap:14px;padding:18px 22px 20px}
 body:not(.browse) #details strong{font-size:22px}
 body:not(.browse) #credit{font-size:14px;margin:4px 0 10px}
 body:not(.browse) .np{column-gap:0;row-gap:4px}
 body:not(.browse) #facts{flex:0 0 100%;gap:0;font-size:13px;color:#a8a8a8}
 body:not(.browse) .fact i{display:none}
 body:not(.browse) .fact+.fact::before{display:inline;content:"\00b7";margin:0 8px;color:#4a4a4a}
 body:not(.browse) #np-people:not([hidden]){flex:0 0 100%;color:#a8a8a8;line-height:24px}
 body:not(.browse) #np-people .np-more{min-height:44px;padding:0 4px;margin-left:2px}
 body:not(.browse) .playback{justify-content:space-between;border-top:1px solid #1a1a1a;padding-top:12px}
 body:not(.browse) .playback #stats{padding:0}
 body:not(.browse) .playback #blend.motion{height:44px;border-radius:22px}
}
@media(max-width:600px){body:not(.browse):not(.cinema) footer{padding:18px 22px 6px}}
body:not(.browse) #facts{order:1}body:not(.browse) #np-people{order:2}body:not(.browse) #desc{order:3}
@media(min-width:851px){body:not(.browse) #np-people:not([hidden]){flex:1 1 auto}}

/* Letters off screen are laid out only when they come near it: thousands of names stay light. */
.index-page .letter{content-visibility:auto;contain-intrinsic-size:auto 640px}
.view-more{display:block;margin:22px auto 0;min-height:44px;padding:0 22px}
#about .stats-head{padding-top:24px;border-top:1px solid #222}
/* Taps go to the button, never its icon: an icon redrawn between touch and click sent the click to the bar behind it (pause did nothing on phones). */
button svg,button img{pointer-events:none}
/* On a phone FPS and Motion ride on the picture, top right, small and quiet. */
body:not(.browse) .ctl>.playback{position:absolute;top:10px;right:10px;left:auto;bottom:auto;z-index:1;display:flex;flex-direction:row;flex-wrap:nowrap;width:auto;height:auto;align-items:center;gap:6px;margin:0;padding:0;border:0;justify-content:flex-end;grid-column:auto}
body:not(.browse) .ctl>.playback #stats{padding:0 10px!important;height:30px;align-items:center;border-radius:15px;background:#000b;font-size:11px}
body:not(.browse) .ctl>.playback #blend.motion{height:30px;min-height:30px;padding:0 12px;border:0;border-radius:15px;background:#000b;font-size:12px;position:relative;top:auto;right:auto}
body:not(.browse) .ctl>.playback #blend.motion::after{content:'';position:absolute;inset:-7px -3px}
#about .intro+.intro{margin-top:34px}
/* Cinema: the picture fills the window and its own controls are on it; the production line
   under the picture lay over them and took their clicks. */
body.cinema.overlay:not(.browse) footer{display:none}
body.cinema:not(.browse) .ctl>.playback{top:64px}
/* The platform choice beside shuffle, on the player; its menu opens upward. */
body:not(.browse) .pick{position:relative;display:inline-flex}
body:not(.browse) .pick #platforms:not([hidden]){display:block!important}
.pick #platforms.menu{left:0;right:auto;top:auto;bottom:46px}
@media(max-width:600px),(orientation:landscape) and (max-height:500px){body.overlay .ctl-bar .pick{position:absolute!important;left:50px!important;top:auto!important;bottom:4px!important;transform:none!important}body.overlay .ctl-bar #infinity{left:96px!important}}
/* The platform choice is an icon button like shuffle beside it; the chosen mark in the accent. */
body:not(.browse) .pick #filter{display:inline-flex!important;align-items:center;justify-content:center;width:44px;height:44px;padding:0;background:none;color:#f2f2f2;filter:drop-shadow(0 1px 2px #0009)}
body:not(.browse) .pick #filter svg{width:20px;height:20px}
body:not(.browse) .pick #filter.active{color:#d4c0fc}
.pick #platforms button{justify-content:flex-start;gap:10px;align-items:center}
.pick #platforms button i{display:inline-flex;width:16px;height:16px;color:#bbb}
.pick #platforms button i svg{width:16px;height:16px}
/* Above every control on the picture, and scrolling once more systems make it long. */
body:not(.browse) .pick{z-index:6}
.pick #platforms.menu{z-index:6;max-height:min(320px,calc(100% + 200px));max-height:min(320px,60vh);overflow-y:auto;overscroll-behavior:contain}
/* The bar's hierarchy: play leads (a filled circle), previous and next beside it in white,
   the choices about what comes next (shuffle, platform, keep playing) quieter and smaller,
   lit in the accent when on; report and share wait behind More. */
body.overlay:not(.browse) .ctl-bar #report,body.overlay:not(.browse) .ctl-bar #share{display:none}
.more-actions{position:relative;display:inline-flex}
body.browse .more-actions{display:none}
#more-menu.menu{left:auto;right:0;top:auto;bottom:46px;width:180px;z-index:6}
.ctl-bar #more-btn svg{fill:currentColor;stroke:none}
.ctl-bar #prev,.ctl-bar #nextbtn{color:#fff}
.ctl-bar #shuffle,.ctl-bar #infinity,body:not(.browse) .ctl-bar .pick #filter{color:#a3a3a3}
.ctl-bar #shuffle svg,.ctl-bar #infinity svg,body:not(.browse) .ctl-bar .pick #filter svg{width:18px;height:18px}
.ctl-bar #shuffle[aria-pressed=true],.ctl-bar #infinity[aria-pressed=true],body:not(.browse) .ctl-bar .pick #filter.active{color:#d4c0fc}
.ctl-bar .utilities .icon{color:#d6d6d6}
@media(min-width:601px){
 body.overlay .ctl-bar .transport .play{width:44px;height:44px;background:#f2f2f2;color:#0a0a0a;margin:0 8px;filter:none}
 body.overlay .ctl-bar .transport .play svg{width:18px;height:18px}
 @media(hover:hover){body.overlay .ctl-bar .transport .play:hover{background:#fff;transform:scale(1.04)}}
}

/* Computers: play in the middle of the picture; the group sits around it (three to its left,
   two to its right), shifted by the difference. */
@media(min-width:601px){body.overlay:not(.browse) .ctl-bar .transport{position:absolute;left:50%;top:50%;transform:translate(calc(-50% - var(--play-shift,0px)),-50%)}}
@media(min-width:601px){body.overlay:not(.browse) .ctl-bar .utilities{margin-left:auto}}
/* Above the mute button, pointing down at it: beside it, it covered the centred transport. */
#unmute.by-volume{right:auto;left:50%;top:auto;bottom:calc(100% + 10px);transform:translateX(-50%)}
#unmute.by-volume::after{top:100%!important;bottom:auto!important;left:50%!important;right:auto!important;transform:translateX(-50%)!important;border:6px solid transparent!important;border-top-color:#f2f2f2!important}
/* Votes: two outlined thumbs at the right of the title row, in the accent colour once chosen. */
.rate{display:none}
body:not(.browse) .production{position:relative}
body:not(.browse) .rate{display:flex;gap:2px;position:absolute;right:-10px;top:0}
.rate .icon{width:44px;height:44px;color:#9a9a9a}
.rate .icon svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
@media(hover:hover){.rate .icon:hover{color:#eee}}
#up{color:#5fbf7f}#down{color:#d9686a}
@media(hover:hover){#up:hover{color:#8be0a6}#down:hover{color:#f0918f}}
#up[aria-pressed=true]{color:#8be0a6}#down[aria-pressed=true]{color:#f0918f}
.rate .icon[aria-pressed=true] svg{fill:currentColor;fill-opacity:1}
@media(max-width:600px){body:not(.browse) .rate{position:static;margin:8px 0 0 -10px}}
.rate .icon.active{background:none}
.rate .vote{width:auto;min-width:44px;padding:0 10px;gap:7px;justify-content:center}
.rate .vote .n{font-size:13px;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.rate .vote .n:empty{display:none}
.rate .vote:active svg{transform:scale(.9)}.rate .vote svg{transition:transform .12s}

/* 18+ productions: covers and clips blurred, with a mark, until the visitor has said yes. */
body:not(.adult-ok) .card.adult .card-pic img,body:not(.adult-ok) .card.adult .card-pic video,body:not(.adult-ok) #cover.adult{filter:blur(18px) saturate(.6);transform:scale(1.08)}
.card.adult .card-pic{position:relative;overflow:hidden}
.adult-badge{position:absolute;left:8px;top:8px;padding:3px 7px;border-radius:5px;background:#000c;color:#fff;font-size:12px;font-weight:600;letter-spacing:.02em}
body.adult-ok .adult-badge{display:none}
#adult-gate{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:#0b0b0b;text-align:center;padding:24px}
#adult-gate[hidden]{display:none}
#adult-gate .ag-mark{margin:0;font-size:44px;font-weight:600;letter-spacing:-.02em;color:#fff}
#adult-gate .ag-text{margin:0;font-size:15px;color:#bbb;max-width:34ch;line-height:1.5}
#adult-gate .ag-actions{display:flex;gap:10px;margin-top:6px}
#adult-gate button{min-height:44px;padding:0 20px;border-radius:7px;font-size:14px}
#adult-gate .ag-show{background:#f2f2f2;color:#0b0b0b}
#adult-gate .ag-skip{border:1px solid #444;color:#ddd}

/* The demo waits for the visitor: say how (mouse or keyboard), with a mouse mark. */
#choice{gap:8px;height:38px;font-size:13px;background:#111e;border-color:#3a3a3a}
#choice svg{width:16px;height:16px;fill:none;stroke:#d4c0fc;stroke-width:1.6;stroke-linecap:round}