/* MercuryServer home feed · f1 · palette from portal-r66 */
@font-face{font-family:"Mercury Exo 2";src:url("/review/r57/assets/exo-2-latin-wght-normal.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
:root{
  --bg:#080d11;--well:#0c141a;--surface:#101920;--raise:#141e25;--line:#26323c;--line-2:#35424a;
  --ink:#c8d0d5;--ink-hi:#e0e4e7;--muted:#91a0ac;
  --orange:#ff6a2a;--green:#73ba9d;--gold:#d3b78f;--blue:#95b8cc;--sage:#a0bda9;--violet:#b6a8cb;
  --display:"Mercury Exo 2",Arial,sans-serif;--body:Arial,Helvetica,system-ui,sans-serif;
  --r:14px;--dock:72px;
  --gut:clamp(16px,2.2vw,44px);--maxw:2400px;
  color-scheme:dark
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 var(--body);padding-bottom:calc(var(--dock) + 16px)}
a{color:inherit;text-decoration:none}
a:hover{color:var(--orange)}
:focus-visible{outline:2px solid var(--orange);outline-offset:2px;border-radius:6px}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
img{max-width:100%}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:8px;z-index:20;background:var(--orange);color:var(--bg);padding:10px 14px;border-radius:10px;font-weight:700}
.skip:focus{left:8px}
.eyebrow{margin:0;font:600 11px/1.3 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.c-blue{color:var(--blue)}.c-sage{color:var(--sage)}.c-gold{color:var(--gold)}

/* masthead: the shipped R66 header. Wordmark and scan bar lead, search and links under them, the TOTM turntable on the right.
   Sizes are the final effective values of the homepage's masthead rules. */
.portal-masthead{max-width:var(--maxw);margin:0 auto;padding:30px var(--gut) 18px;display:grid;grid-template-columns:minmax(0,1fr) minmax(420px,600px);gap:16px 56px;align-items:center}
.brand{grid-column:1;grid-row:1;align-self:end;max-width:680px;display:flex;flex-direction:column;gap:12px}
.brand>img{width:100%;height:auto;display:block}
.brand>svg{width:100%;height:26px;fill:revert;stroke:revert;stroke-width:revert;stroke-linecap:revert;stroke-linejoin:revert;display:block}
.brand>span{font-size:13px;color:#a9b4bb;letter-spacing:.2px}
.header-center{grid-column:1;grid-row:2;align-self:start;max-width:520px;margin-top:6px;min-width:0;display:flex;flex-direction:column;gap:12px}
.portal-turntable{display:block;min-width:0;width:100%;grid-column:2;grid-row:1/3;align-self:center}
.utility-links{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px;color:var(--ink)}
.utility-links a{min-height:28px;display:inline-flex;align-items:center;gap:4px}
.utility-links small{font-size:9px;color:var(--muted);letter-spacing:.08em}
.utility-links span{color:var(--orange)}
.utility-links .u-forums{color:var(--orange);font-weight:700}
.utility-links .u-forums:hover{color:#ff8450}
/* scan & share panel: fills the header between the brand block and the turntable on wide screens; a card in the side column elsewhere */
.scanshare{display:flex;flex-direction:column;gap:16px;min-width:0;padding:20px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.scanshare.ss-head{display:none}
.ss-codes{display:flex;flex-direction:column;gap:16px}
.ss-code{margin:0;display:flex;align-items:center;gap:16px}
.ss-code figcaption{display:flex;flex-direction:column;gap:4px;min-width:0;font-size:13px;color:var(--muted)}
.ss-code figcaption b{font:700 15px var(--display);color:var(--ink-hi)}
.ss-set figcaption span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.ss-note{margin:0;font-size:12px;color:var(--muted);padding-top:12px;border-top:1px solid var(--line)}
.qr{display:block;flex:none;width:92px;height:92px;border-radius:8px;overflow:hidden;background:#fff}
.qr svg{display:block;width:100%;height:100%;fill:none;stroke:none;stroke-width:0}
.qr.big{width:min(240px,70vw);height:min(240px,70vw);margin:4px auto}
.share-dlg{width:min(92vw,360px);padding:0;border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface);color:var(--ink)}
.share-dlg::backdrop{background:rgba(0,0,0,.65)}
.share-in{position:relative;display:flex;flex-direction:column;gap:12px;padding:22px 22px 18px;margin:0}
.share-in h2{margin:0;padding-right:36px;font:700 18px/1.3 var(--display);color:var(--ink-hi);overflow-wrap:anywhere}
.share-close{position:absolute;top:10px;right:10px;width:44px;height:44px;border-radius:12px;border:0;background:transparent;color:var(--muted);font-size:26px;line-height:1;cursor:pointer}
.share-close:hover{color:var(--orange);background:var(--well)}
.share-dest{font-size:13px;color:var(--ink);text-align:center;overflow-wrap:anywhere}
.share-row{display:flex;gap:10px}
.share-row>*{flex:1;width:auto;font-size:13px;padding:0 10px}
.search{flex:1 1 auto;display:flex;align-items:center;gap:10px;height:44px;padding:0 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--muted)}
.search:focus-within{border-color:var(--orange)}
.search input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:var(--ink);font:15px var(--body)}
.search input::-webkit-search-cancel-button{filter:invert(.6)}
.top-act{display:flex;gap:10px}
.btn-primary,.btn-ghost,.btn-line{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:12px;font:700 14px var(--display);white-space:nowrap}
.btn-primary{background:var(--orange);color:var(--bg)}
.btn-primary:hover{color:var(--bg);background:#ff8450}
.btn-ghost{border:1px solid var(--line);background:var(--well)}
.btn-line{border:1px solid var(--orange);color:var(--orange);width:100%}

/* shell */
.shell{max-width:var(--maxw);margin:0 auto;padding:24px var(--gut);display:grid;grid-template-columns:230px minmax(0,1fr) clamp(320px,22vw,440px);gap:clamp(20px,2vw,36px);align-items:start}
.rail{position:sticky;top:16px;display:flex;flex-direction:column;gap:24px}
.doors{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.doors a{display:flex;align-items:center;gap:14px;min-height:48px;padding:0 14px;border-radius:12px;font:600 16px var(--display)}
.doors a:hover{background:var(--surface)}
.doors a[aria-current]{background:var(--surface);color:var(--orange)}
.doors svg{width:22px;height:22px}
.rail-rooms{display:flex;flex-direction:column;gap:4px}
.eyebrow.violet{color:var(--violet)}
.rail-rooms .eyebrow{padding:0 14px 6px}
.busy{list-style:none;margin:0;padding:0}
.busy a{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 14px;border-radius:10px;font-size:14px}
.busy a:hover{background:var(--surface)}
.busy .name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.busy .n{font-size:12px;color:var(--muted)}
.rail-foot{margin:0;padding:0 14px;font-size:12px;color:var(--muted);line-height:1.7}
.rail-foot a{color:var(--ink)}
.badge{width:28px;height:28px;flex:none;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;font:700 11px var(--display);color:var(--bg);background:var(--t,var(--orange))}

/* feed */
.feed{min-width:0;display:flex;flex-direction:column;gap:18px;width:100%;outline:0}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.composer{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);color:var(--muted)}
.composer:hover{border-color:var(--line-2);color:var(--ink)}
.composer-text{flex:1;min-width:0;font-size:16px}
.composer-chips{display:flex;gap:6px}
.composer-chips span{height:30px;padding:0 10px;display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;font-size:12px;background:var(--well)}
.c-o{color:var(--orange)}.c-g{color:var(--gold)}.c-b{color:var(--blue)}
.avatar{width:44px;height:44px;flex:none;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font:700 14px var(--display);background:var(--raise);color:var(--t,var(--sage));border:1px solid var(--line)}
.avatar.you{color:var(--orange);font-size:22px}

.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.sec-head h2{margin:0;font:700 18px var(--display);color:var(--gold)}
.sec-head a{font-size:13px;color:var(--muted);min-height:44px;display:inline-flex;align-items:center;padding:0 4px}
.fresh{display:flex;flex-direction:column;gap:10px;min-width:0}
.fresh-row{list-style:none;margin:0;padding:0 0 6px;display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.fresh-row li{flex:none;scroll-snap-align:start}
.fresh-row a{width:150px;height:200px;padding:12px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column;justify-content:space-between}
.fresh-row a:hover{border-color:var(--t,var(--orange));color:inherit}
.fresh-row .t{font:700 14px/1.25 var(--display);color:var(--ink-hi);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.fresh-row .r{font-size:12px;color:var(--muted)}
.disc{width:56px;height:56px;border-radius:50%;flex:none;border:1px solid var(--line);background:radial-gradient(circle,var(--bg) 0 7%,var(--t,var(--orange)) 8% 30%,var(--well) 31% 100%);position:relative}
.disc::after{content:"";position:absolute;inset:4px;border-radius:50%;background:repeating-radial-gradient(circle,transparent 0 3px,rgba(255,255,255,.035) 3px 4px)}
.disc.sm{width:48px;height:48px}

.tabs{display:flex;border-bottom:1px solid var(--line);overflow-x:auto}
.tabs button{flex:none;min-height:48px;padding:0 18px;background:transparent;border:0;border-bottom:2px solid transparent;color:var(--muted);font:600 15px var(--display);cursor:pointer}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-selected=true]{color:var(--ink-hi);border-bottom-color:var(--orange)}
.status{margin:0;font-size:13px;color:var(--muted);min-height:0}
.status:empty{display:none}
.status button{margin-left:8px;min-height:36px;padding:0 12px;border-radius:8px;border:1px solid var(--orange);background:transparent;color:var(--orange);font:600 13px var(--body);cursor:pointer}
/* the stream tiles into as many columns as fit (1 on a phone, 2 and 3 on wide screens); hero cards take the whole row */
.stream{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,460px),1fr));gap:16px;align-items:stretch}
.stream>.legend,.stream>.empty,.stream>.series{grid-column:1/-1}
.skel{height:180px;background:linear-gradient(90deg,var(--surface),var(--raise),var(--surface));background-size:200% 100%;animation:sk 1.4s linear infinite}
@keyframes sk{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.skel{animation:none}}

.post{padding:18px;display:flex;flex-direction:column;gap:14px;height:100%}
.post-head{display:flex;align-items:center;gap:12px}
.post-who{flex:1;min-width:0;font-size:14px}
.post-who b{color:var(--ink-hi);font-weight:700}
.post-who .room{color:var(--t,var(--orange))}
.post-who .when{display:block;font-size:12px;color:var(--muted)}
.post-title{font:700 20px/1.28 var(--display);color:var(--ink-hi);overflow-wrap:anywhere}
.post.talk .post-title{font-weight:600;font-size:22px}
.listen{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:12px;background:var(--well);border:1px solid var(--line)}
.listen-btn{width:52px;height:52px;flex:none;border-radius:50%;background:var(--t,var(--orange));color:var(--bg);display:flex;align-items:center;justify-content:center}
.listen-btn:hover{color:var(--bg);filter:brightness(1.12)}
.listen-btn svg{fill:currentColor;stroke:none}
.groove{flex:1;min-width:0;display:flex;align-items:center;gap:2px;height:40px}
.groove i{flex:1;min-width:2px;border-radius:2px;background:var(--line-2)}
.listen-meta{display:flex;flex-direction:column;font-size:12px;color:var(--muted);text-align:right;white-space:nowrap}
.acts{display:flex;flex-wrap:wrap;gap:4px;margin:auto -8px -6px}
.act{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;border-radius:10px;border:0;background:transparent;color:var(--muted);font:500 13px var(--body);cursor:pointer}
.act:hover{color:var(--orange);background:var(--well)}
.act svg{width:18px;height:18px}
.act.end{margin-left:auto}
.count-box{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:12px;background:var(--well);border:1px solid var(--line)}
.count-box .n{font:700 26px var(--display);color:var(--t,var(--sage))}
.count-box .d{flex:1;font-size:13px;color:var(--muted)}
.count-box a{font-size:13px;color:var(--orange);font-weight:700;min-height:44px;display:inline-flex;align-items:center;padding:0 6px}
.series-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.series-grid a{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:12px;border:1px solid var(--line);background:var(--well);min-height:96px}
.series-grid a::before{content:"";width:36px;height:4px;border-radius:2px;background:var(--t,var(--orange))}
.series-grid .dj{font:700 15px/1.25 var(--display);color:var(--ink-hi)}
.series-grid .m{font-size:12px;color:var(--muted);margin-top:auto}
.legend{padding:0;overflow:hidden;display:grid;grid-template-columns:200px minmax(0,1fr)}
.legend-art{background:var(--well);border-right:1px solid var(--line);display:flex;align-items:center;justify-content:center;padding:24px}
.legend-art .disc{width:140px;height:140px;--t:var(--violet)}
.legend-body{padding:20px;display:flex;flex-direction:column;gap:10px}
.legend-body h3{margin:0;font:700 23px/1.2 var(--display);color:var(--ink-hi)}
.legend-body p{margin:0;font-size:14px;color:var(--muted)}
.legend-body .row{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.btn-violet{background:var(--violet);color:var(--bg)}
.btn-violet:hover{color:var(--bg);filter:brightness(1.08)}
.empty{padding:28px;text-align:center;color:var(--muted)}

/* side */
.side{display:flex;flex-direction:column;gap:18px}
.side .card{padding:18px}
.side-h{margin:0 0 6px;font:700 18px var(--display)}
.side-list{list-style:none;margin:0;padding:0}
.side-list a{display:flex;flex-direction:column;gap:2px;padding:10px 0;border-top:1px solid var(--line)}
.side-list .r{font-size:12px;color:var(--muted)}
.side-list .t{font-weight:700;color:var(--ink-hi);overflow-wrap:anywhere}
.side-list .n{font-size:12px;color:var(--muted)}
.people{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.people a{display:flex;align-items:center;gap:12px;min-height:52px;border-top:1px solid var(--line)}
.people .avatar{width:36px;height:36px;font-size:12px}
.people .who{flex:1;min-width:0;display:flex;flex-direction:column}
.people .who b{color:var(--ink-hi);font-size:14px}
.people .who span{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rotation{list-style:none;margin:0;padding:0}
.rotation a{display:flex;align-items:center;gap:12px;min-height:52px}
.rotation img,.rotation .ph{width:40px;height:40px;border-radius:8px;flex:none;object-fit:cover;border:1px solid var(--line);background:var(--well)}
.rotation .tt{flex:1;min-width:0;display:flex;flex-direction:column}
.rotation .tt b{font-size:14px;color:var(--ink-hi);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rotation .tt span{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-more{display:inline-block;margin-top:10px;font-size:13px;color:var(--muted)}

/* dock */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:12;background:rgba(12,20,26,.97);border-top:1px solid var(--line)}
.dock-in{max-width:var(--maxw);margin:0 auto;height:var(--dock);padding:0 var(--gut);display:flex;align-items:center;gap:16px}
.dock-meta{flex:1;min-width:0;display:flex;flex-direction:column}
.dock-meta strong{font:700 14px var(--display);color:var(--ink-hi);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dock-meta span{font-size:12px;color:var(--green);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dock-art{width:44px;height:44px;flex:none;border-radius:8px;object-fit:cover;border:1px solid var(--line)}
.dock-art:not([hidden])+.disc{display:none}
.dock-time{flex:none;font:600 14px var(--display);color:var(--ink-hi);white-space:nowrap;font-variant-numeric:tabular-nums}
.dock-time span{color:var(--muted);font-weight:500}
/* the shipped EQ (portal-eq-r66.js) draws into .dock-spectrum: measured bars when TOTM sends a spectrum, labelled ambient bars otherwise */
.dock-viz{flex:none;width:clamp(140px,22vw,420px);display:flex;flex-direction:column;gap:3px;min-width:0}
.dock-spectrum{position:relative;height:38px;border-bottom:1px solid rgba(255,255,255,.06)}
.dock-eq-label{font-size:10px;letter-spacing:.045em;color:#8f9ba4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dock-motion{flex:none;min-height:44px;padding:0 12px;border-radius:10px;border:1px solid var(--line);background:var(--well);color:var(--muted);font:600 12px var(--body);cursor:pointer}
.dock-motion:hover:not(:disabled){color:var(--ink);border-color:var(--line-2)}
.dock-motion:disabled{opacity:.5;cursor:default}
.tabbar{display:none}

/* wide: bigger fresh-on-the-decks tiles and a roomier hero */
@media (min-width:1500px){
  .fresh-row a{width:190px;height:210px}
  .legend{grid-template-columns:260px minmax(0,1fr)}
  .legend-body{padding:28px}
  .legend-body h3{font-size:28px}
}
/* wide enough that the old two-column header leaves a gap: the scan & share panel takes the middle */
@media (min-width:1700px){
  /* the two cards are one size: same width (equal columns) and same height (both stretch to the row) */
  .portal-masthead{grid-template-columns:minmax(0,680px) repeat(2,minmax(340px,580px));justify-content:space-between;gap:16px 40px}
  .scanshare.ss-head{display:flex;grid-column:2;grid-row:1/3;align-self:stretch;justify-content:space-between;width:auto;max-width:none}
  .scanshare.ss-side{display:none}
  .portal-turntable{grid-column:3;grid-row:1/3;align-self:stretch;width:auto}
}
@media (min-width:2200px){
  .portal-masthead{grid-template-columns:minmax(0,820px) repeat(2,minmax(340px,640px))}
  .brand{max-width:820px}
  .brand>svg{height:30px}
  .brand>span{font-size:15px}
  .utility-links{font-size:14px}
}
/* medium: icon rail */
@media (max-width:1279px){
  .portal-masthead{grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);gap:14px 32px}
  .brand{max-width:520px}
  .brand>svg{height:22px}
}
@media (max-width:1180px){
  .shell{grid-template-columns:72px minmax(0,1fr) 300px;gap:22px}
  .doors a{justify-content:center;padding:0}
  .doors span,.rail-rooms,.rail-foot{display:none}
}
/* tablet: no rail; side moves under the feed */
@media (max-width:980px){
  .shell{grid-template-columns:minmax(0,1fr);padding:16px var(--gut)}
  .rail{display:none}
  .side{position:static;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:13;background:var(--bg);border-top:1px solid var(--line);padding:4px 4px calc(6px + env(safe-area-inset-bottom))}
  .tabbar a{flex:1;min-height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font:600 11px var(--body);color:var(--muted)}
  .tabbar a[aria-current]{color:var(--orange)}
  .tabbar .tab-post span{width:48px;height:36px;border-radius:12px;background:var(--orange);color:var(--bg);display:flex;align-items:center;justify-content:center}
  .dock{bottom:calc(62px + env(safe-area-inset-bottom));left:8px;right:8px;border:1px solid var(--line);border-radius:14px}
  .dock-in{height:60px;padding:0 10px;gap:10px}
  body{padding-bottom:150px}
}
/* masthead stacks: wordmark and scan bar, then search and links, then the turntable */
@media (max-width:760px){
  :root{--gut:14px}
  .portal-masthead{grid-template-columns:minmax(0,1fr);gap:14px;padding:20px var(--gut) 18px}
  .brand,.header-center,.portal-turntable{grid-column:1;grid-row:auto;max-width:none}
  .brand{max-width:440px;gap:9px}
  .brand>svg{height:18px}
  .brand>span{font-size:11px}
  .header-center{margin-top:0}
  .portal-turntable{max-width:600px}
  .utility-links{font-size:12px;gap:4px 14px}
}
@media (max-width:980px){
  .dock-viz{width:96px}
  .dock-eq-label,.dock-motion{display:none}
}
/* phone */
@media (max-width:640px){
  .top-act .btn-ghost{display:none}
  .top-act .btn-primary{min-height:40px;padding:0 14px;font-size:13px}
  .search{height:42px}
  .dock-time{font-size:12px}
  .dock-viz{width:64px}
  .composer-chips{display:none}
  .post{padding:14px}
  .post-title{font-size:17px}
  .post.talk .post-title{font-size:18px}
  .listen-meta{display:none}
  .legend{grid-template-columns:1fr}
  .legend-art{border-right:0;border-bottom:1px solid var(--line);padding:18px}
  .legend-art .disc{width:96px;height:96px}
  .dock .btn-primary{min-height:40px;padding:0 14px}
  .fresh-row a{width:132px;height:180px}
}