/* Represent Intelligence OS · one design system (direction A, "Terminal calm", on the Represent house type).
   Three control shapes in the whole product: .pill.solid, .pill (outline), .chip (with dot). Nothing else is a button. */
@font-face{font-family:'Lato';src:url('/static/fonts/Lato-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Lato';src:url('/static/fonts/Lato-Italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Lato';src:url('/static/fonts/Lato-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Newsreader';src:url('/static/fonts/Newsreader-400i.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}

:root{
  --canvas:#0a0a0a; --panel:#121417; --ink:#ECEEF1; --white:#fff; --body:#d6d6d6;
  --dim:rgba(255,255,255,.6); --faint:rgba(255,255,255,.4); --faint-text:rgba(255,255,255,.52);
  --hair:rgba(255,255,255,.13); --hair2:rgba(255,255,255,.26);
  --acc:#2EE59D; --acc-ink:#06120C; --acc-soft:rgba(46,229,157,.14); --warn:#F5B84B; --bad:#F0655C;
  --disp:'Helvetica Neue',Helvetica,Arial,sans-serif;
  --sans:'Lato',Helvetica,Arial,sans-serif;
  --serif:'Newsreader',Georgia,serif;
  --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --mx:18px; --rail:232px; --sheet:500px; --bar:64px;
  --t-page:160ms; --t-tap:120ms;
  color-scheme:dark;
}
*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--canvas);-webkit-text-size-adjust:100%}
body{background:var(--canvas);color:var(--body);font-family:var(--sans);font-size:14.5px;line-height:1.5;
     -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;min-height:100svh}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
strong,b{font-weight:700;color:var(--ink)}
em,.si{font-family:var(--serif);font-style:italic;font-weight:400}
h1,h2,h3,h4{font-family:var(--disp);font-weight:700;color:var(--white);letter-spacing:-.02em;text-wrap:balance}
.mono,.n{font-family:var(--mono);font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.skip{position:absolute;left:var(--mx);top:-60px;z-index:100;background:var(--acc);color:var(--acc-ink);padding:10px 16px;border-radius:999px;font-weight:700}
.skip:focus{top:12px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- shell: bottom bar on the phone, left rail from 1100px ---------- */
.shell{min-height:100svh}
.main{padding:22px var(--mx) calc(var(--bar) + 28px + env(safe-area-inset-bottom,0px));max-width:1120px;min-width:0;overflow-wrap:break-word}
.rail{display:none}
.bar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;justify-content:space-around;
     background:rgba(10,10,10,.97);border-top:1px solid var(--hair2);padding:0 4px env(safe-area-inset-bottom,0px)}
.bar a{flex:0 1 auto;display:flex;align-items:center;justify-content:center;min-height:var(--bar);padding:0 6px;
       font-family:var(--disp);font-weight:700;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
.bar a.on{color:var(--acc)}
.brand{font-family:var(--disp);font-weight:700;font-size:12.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--white)}
.brand small{display:block;font-family:var(--serif);font-style:italic;font-size:14px;letter-spacing:0;text-transform:none;color:var(--dim);margin-top:4px}
.topline{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:6px var(--mx);margin:0 calc(-1 * var(--mx)) 8px;border-bottom:1px solid var(--hair)}
.topline .brand{font-size:11.5px}
.topline .r{display:flex;gap:16px}
.topline .r a{display:inline-flex;align-items:center;min-height:44px;font-family:var(--disp);font-weight:700;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);padding:0}
.topline .r a.on{color:var(--white);border-bottom:1px solid var(--white)}
@media (min-width:1100px){
  .shell{display:grid;grid-template-columns:var(--rail) minmax(0,1fr)}
  .rail{display:flex;flex-direction:column;gap:2px;position:sticky;top:0;height:100svh;padding:28px 22px;border-right:1px solid var(--hair)}
  .rail .brand{margin-bottom:26px}
  .rail a.item{display:flex;align-items:center;justify-content:space-between;min-height:44px;padding:0 10px;margin:0 -10px;
               font-family:var(--disp);font-weight:700;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--dim);border-radius:6px}
  .rail a.item:hover{color:var(--white)}
  .rail a.item.on{color:var(--white);background:var(--panel)}
  .rail a.item.on::after{content:'';width:6px;height:6px;border-radius:50%;background:var(--acc)}
  .rail .foot{margin-top:auto;font-size:12px;color:var(--faint-text);line-height:1.6}
  .rail .foot a{display:block;color:var(--dim)}
  .rail .foot .who{display:block;color:var(--body);margin-bottom:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .account{display:none}
  .bar,.topline{display:none}
  .main{padding:36px 44px 80px;--mx:44px}
}

/* the sign-in gate (login.html) and the phone's account line; the rail's foot carries both on desktop */
.gate{min-height:100svh;display:flex;flex-direction:column;justify-content:center;gap:22px;max-width:440px;margin:0 auto;padding:40px var(--mx)}
.gate .lede{margin-top:0}
.gate .pill{align-self:flex-start}
.account{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:36px;padding-top:14px;border-top:1px solid var(--hair)}

/* ---------- type furniture ---------- */
.kicker{font-family:var(--disp);font-weight:700;font-size:12.5px;letter-spacing:.28em;color:var(--dim);text-transform:uppercase}
.kicker b{color:var(--white)}
.pagehead{padding:6px 0 22px;border-bottom:1px solid var(--hair2);margin-bottom:6px}
.pagehead h1{font-size:clamp(30px,4.6vw,46px);letter-spacing:-.03em;line-height:1.02;margin-top:10px}
.pagehead h1 em{color:var(--white);letter-spacing:-.01em}
.pagehead .sub{margin-top:10px;font-size:14px;color:var(--dim);display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center}
.lede{font-family:var(--serif);font-style:italic;font-size:clamp(16px,1.5vw,19px);color:var(--dim);margin-top:12px;max-width:60ch;line-height:1.45}
.sechead{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:30px 0 12px}
.sechead h2{font-size:12.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--dim);font-family:var(--disp)}
.sechead .cnt{font-family:var(--mono);font-size:12.5px;color:var(--dim);font-variant-numeric:tabular-nums}
.sechead.big h2{font-size:clamp(22px,2.6vw,30px);letter-spacing:-.025em;text-transform:none;color:var(--white)}
.note{font-size:13px;color:var(--dim);line-height:1.5}
.small{font-size:12.5px;color:var(--dim)}
.dimtext{color:var(--dim)}
.acc{color:var(--acc)}
.warn{color:var(--warn)}
.bad{color:var(--bad)}
.empty{padding:16px 0 4px;font-family:var(--serif);font-style:italic;color:var(--dim);font-size:16px}
p+p{margin-top:8px}

/* ---------- rows: the Radar page idea, numbered hairline rows ---------- */
.rows{border-top:1px solid var(--hair2)}
.row{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:8px 12px;align-items:start;padding:14px 0;border-bottom:1px solid var(--hair)}
.row.link:hover .t{color:var(--acc)}
.row .ix{font-family:var(--serif);font-style:italic;color:var(--dim);font-size:17px;line-height:1.3;padding-top:1px}
.row .t{font-family:var(--disp);font-weight:700;color:var(--white);font-size:16.5px;letter-spacing:-.015em;line-height:1.25}
.row .t a:hover{color:var(--acc)}
.row .d{color:var(--dim);font-size:13.5px;margin-top:4px;line-height:1.5}
.row .b{font-size:14px;line-height:1.55;margin-top:6px}
.row .b p+p{margin-top:6px}
.row .sc{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:15px;color:var(--acc);text-align:right;white-space:nowrap;line-height:1.3;padding-top:2px}
.row .sc small{display:block;font-size:11px;color:var(--dim);letter-spacing:.04em}
.row .sc.mute{color:var(--dim)}
.row .full{grid-column:2/-1}
.row.tight{padding:10px 0}
.row.tight .t{font-size:15px}
@media (min-width:1100px){.row{grid-template-columns:56px minmax(0,1fr) auto;padding:16px 0}.row .t{font-size:18px}.row .ix{font-size:19px}}
/* Today items: collapsed by default (numeral, two-line headline, one-line why, chips, the number); the row opens in place */
.item{border-bottom:1px solid var(--hair)}
.item>summary{list-style:none;cursor:pointer;display:block}
.item>summary::-webkit-details-marker{display:none}
.item>summary .row{border-bottom:0}
.item .t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.item .d{display:block;min-width:0;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item[open] .t{display:block;-webkit-line-clamp:unset}
.item[open] .d{white-space:normal;overflow:visible}
.item>summary:hover .t{color:var(--acc)}
.item .sc{display:flex;flex-direction:column;align-items:flex-end;min-width:44px}
.item .sc .chev{display:block;width:9px;height:9px;margin:10px 4px 0 0;border-right:1.5px solid var(--dim);border-bottom:1.5px solid var(--dim);
                transform:rotate(45deg);transition:transform var(--t-tap)}
.item[open] .sc .chev{transform:rotate(-135deg);margin-top:14px}
.item .x{padding:0 0 18px}
.item .x .fields{margin-top:0}
@media (min-width:1100px){.item .x{padding-left:68px}}
.fields{display:grid;grid-template-columns:110px minmax(0,1fr);gap:6px 14px;margin-top:10px;font-size:13.5px}
.fields dt{color:var(--dim);font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-family:var(--disp);font-weight:700;padding-top:3px}
.fields dd{line-height:1.5}
.fields dd .chip{vertical-align:2px;margin-left:6px}
@media (max-width:480px){.fields{grid-template-columns:1fr;gap:2px 0}.fields dd{margin-bottom:6px}}

/* ---------- joined hairline tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0;border:1px solid var(--hair);border-radius:6px;overflow:hidden}
.tiles.two{grid-template-columns:1fr 1fr}
.tiles.three{grid-template-columns:repeat(3,1fr)}
.tile{background:var(--canvas);padding:12px 14px;min-width:0;overflow-wrap:anywhere;
      box-shadow:1px 0 0 var(--hair),0 1px 0 var(--hair)}
.tile.panel{background:var(--panel)}
.tile .l{font-family:var(--disp);font-weight:700;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-bottom:6px;line-height:1.35;text-wrap:balance}
.tile .n{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:22px;color:var(--white);line-height:1.1;letter-spacing:-.02em}
.tile .n small{font-size:12px;color:var(--dim);margin-left:4px;letter-spacing:0}
.tile .s{font-size:12px;color:var(--dim);margin-top:5px}
.tile a.nm{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:44px;margin:-12px -14px;padding:0 14px;font-family:var(--disp);font-weight:700;color:var(--white);font-size:14px;letter-spacing:-.01em}
.tile a.nm span{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--dim);text-transform:uppercase;white-space:nowrap}
.tile a.nm span.acc{color:var(--acc)}
.tile a.nm span.warn{color:var(--warn)}
.panel{background:var(--panel);border:1px solid var(--hair);border-radius:6px;padding:14px 16px}
.panel+.panel{margin-top:10px}
.panel .kicker{font-size:11px;letter-spacing:.22em}
.panel .kicker+*{margin-top:8px}
.block{padding:14px 0;border-bottom:1px solid var(--hair)}
.block .kicker{font-size:11px;letter-spacing:.22em;margin-bottom:6px}
.block p{font-size:14.5px;line-height:1.55}

/* ---------- controls: three shapes ---------- */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 16px;border-radius:999px;
      border:1px solid var(--hair2);background:none;color:var(--body);cursor:pointer;white-space:nowrap;
      font-family:var(--disp);font-weight:700;font-size:11px;letter-spacing:.18em;text-transform:uppercase;line-height:1;
      transition:color var(--t-tap),border-color var(--t-tap),background var(--t-tap)}
.pill:hover{color:var(--white);border-color:var(--white)}
.pill.on{color:var(--acc);border-color:var(--acc)}
.pill.solid{background:var(--acc);color:var(--acc-ink);border-color:var(--acc)}
.pill.solid:hover{background:#5CF0B7;border-color:#5CF0B7}
.pill:disabled,.pill[aria-disabled=true]{opacity:.45;cursor:default}
.pill.sm{min-height:34px;padding:0 12px;font-size:10.5px;letter-spacing:.12em}
@media (pointer:coarse),(max-width:1099px){.pill{min-height:44px}.pill.sm{min-height:44px}}
.pills{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pills .lbl{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-family:var(--disp);font-weight:700;color:var(--faint-text);margin-right:4px}
.pills .saved{font-family:var(--mono);font-size:11px;color:var(--acc);letter-spacing:.04em}
.pills .sofar{font-family:var(--mono);font-size:11px;color:var(--dim);letter-spacing:.02em}
.fb{margin-top:14px;display:flex;flex-direction:column;gap:10px}
.fbrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
/* the feedback row: four outline pills joined on one hairline, the tapped one solid */
.seg{display:flex;flex:1 1 300px;max-width:460px;border:1px solid var(--hair2);border-radius:999px;overflow:hidden}
.seg .pill{flex:1 1 0;min-width:0;min-height:38px;border:0;border-radius:0;border-left:1px solid var(--hair2);padding:0 3px;
           font-size:9.5px;letter-spacing:.04em;overflow:hidden;text-overflow:ellipsis}
.seg .pill:first-child{border-left:0}
@media (min-width:480px){.seg .pill{font-size:10.5px;letter-spacing:.1em;padding:0 8px}}
.seg .pill.solid{border-color:var(--acc)}
@media (pointer:coarse),(max-width:1099px){.seg .pill{min-height:44px}}
/* one row that scrolls sideways on the phone instead of wrapping */
.scrollrow{display:flex;flex-wrap:nowrap;gap:8px;align-items:center;overflow-x:auto;scrollbar-width:none;
           margin:0 calc(-1 * var(--mx));padding:2px var(--mx)}
.scrollrow::-webkit-scrollbar{display:none}
.scrollrow .pill{flex:none}
@media (min-width:1100px){.scrollrow{flex-wrap:wrap;overflow:visible;margin:0;padding:0}}
.links{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12.5px}
.links a{color:var(--dim);min-height:44px;display:inline-flex;align-items:center;font-family:var(--disp);font-weight:700;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase}
.links a:hover{color:var(--white)}

.chip{display:inline-block;padding:4px 9px 4px 8px;border-radius:999px;border:1px solid var(--hair);
      font-family:var(--disp);font-weight:700;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);
      line-height:1.2;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;
      transition:color var(--t-tap),border-color var(--t-tap)}
.chip i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--faint);margin:0 6px 1px 0;vertical-align:middle}
.chip .q{border-bottom:0;overflow:hidden;text-overflow:ellipsis}
.chips .chip{min-width:0}
.row.cal{grid-template-columns:76px minmax(0,1fr) auto}
.chip.m i{background:var(--acc)}
.chip.s i{background:rgba(255,255,255,.85)}
.chip.i i{background:var(--faint)}
.chip.x i{background:var(--warn)}
.chip.w i{background:var(--warn)}
.chip.b i{background:var(--bad)}
.chip.on{color:var(--white);border-color:var(--hair2)}
.chip.on i{background:var(--acc)}
a.chip:hover{color:var(--white);border-color:var(--hair2)}
.chip.lg{padding:12px 14px 12px 12px;font-size:11px}
@media (pointer:coarse),(max-width:1099px){a.chip,button.chip{display:inline-flex;align-items:center;min-height:44px;padding:0 12px 0 10px}}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.chips.tight{margin-top:6px}
.chips .lbl{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;font-family:var(--disp);font-weight:700;color:var(--faint-text);align-self:center;margin-right:2px}

/* the one field style: underline */
.field{background:none;border:0;border-bottom:1px solid var(--hair2);color:var(--white);font-family:var(--sans);font-size:15px;
       padding:8px 2px;min-height:44px;border-radius:0;width:100%;max-width:420px;appearance:none;-webkit-appearance:none}
.field:focus{border-color:var(--white);outline:none}
.field:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.field::placeholder{color:var(--faint-text)}
.field.sm{max-width:120px;font-family:var(--mono);font-size:14px}
select.field{padding-right:22px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 4px center;cursor:pointer}
select.field option{background:var(--panel);color:var(--ink)}
.inline{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:flex-end}
.inline .field{max-width:220px}

/* ---------- the source reveal: every number with a source ---------- */
.q{position:relative;border-bottom:1px dotted var(--hair2);cursor:help;font-family:inherit;background:none;border-top:0;border-left:0;border-right:0;padding:0;color:inherit;font-size:inherit;text-align:inherit}
.q .src{display:none;position:absolute;left:0;top:calc(100% + 6px);z-index:20;background:var(--panel);border:1px solid var(--hair2);border-radius:6px;
        padding:8px 10px;font-family:var(--mono);font-size:11.5px;letter-spacing:.01em;color:var(--dim);white-space:nowrap;max-width:min(80vw,460px);overflow:hidden;text-overflow:ellipsis;text-transform:none;font-weight:400;line-height:1.4}
.q .src b{color:var(--white);font-weight:400}
.q:hover .src,.q:focus-visible .src,.q.open .src{display:block}
.row .sc .q,.tile .q{border-bottom-color:transparent}
.row .sc .q:hover,.tile .q:hover{border-bottom-color:var(--hair2)}
.q.r .src{left:auto;right:0}

/* ---------- data bars ---------- */
.bar-h{height:4px;background:var(--hair);border-radius:2px;overflow:hidden;display:flex}
.bar-h i{display:block;height:100%;background:var(--acc)}
.bar-h i.neu{background:var(--hair2)}
.bar-h i.neg{background:var(--bad)}
.bar-h i.mute{background:var(--hair2)}
.bar-h i.warn{background:var(--warn)}
.bar-h i.bad{background:var(--bad)}
.bar-h.tall{height:6px}
.arrow{font-family:var(--mono);font-size:12px;color:var(--dim)}
.arrow.up{color:var(--acc)}
.arrow.down{color:var(--bad)}
.arrow.new{color:var(--warn)}
.spark{width:96px;height:26px;flex:none}
.spark path{fill:none;stroke:var(--acc);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.spark path.flat{stroke:var(--hair2)}
.spark.bad path,.spark.bad circle{stroke:var(--bad);fill:none}
.spark.bad circle{fill:var(--bad)}
.spark.warn path{stroke:var(--warn)}
.spark.warn circle{fill:var(--warn)}
.spark:not(.acc):not(.bad):not(.warn) path{stroke:rgba(255,255,255,.42)}
.spark:not(.acc):not(.bad):not(.warn) circle{fill:rgba(255,255,255,.42)}
.spark circle{fill:var(--acc)}
/* charts: inline SVG from app/web/charts.py; a phone variant (.ph) and a desktop variant (.dt) of each */
.ch{margin-top:12px}
.ch svg{width:100%;height:auto;overflow:visible;display:block}
.ch .dt{display:none}
@media (min-width:1100px){.ch .ph{display:none}.ch .dt{display:block}}
.ch text{font-family:var(--mono);font-size:11px;fill:var(--dim);font-variant-numeric:tabular-nums}
.ch .band{fill:rgba(255,255,255,.08)}
.ch .val{fill:none;stroke:var(--acc);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.ch .pt{fill:var(--acc);opacity:.85}
.ch .ax{stroke:var(--hair2)}
.ch .grid,.ch .tick{stroke:var(--hair)}
.ch .an{fill:var(--warn)}
.ch .an.down{fill:var(--bad)}
.ch .last{fill:var(--acc)}
.ch .lastv{fill:var(--white);font-size:12px;paint-order:stroke;stroke:var(--panel);stroke-width:4px;stroke-linejoin:round}
.ch.page .lastv{stroke:var(--canvas)}
.ch .lbl{fill:var(--ink)}
.ch .num{fill:var(--white)}
.ch .track{fill:var(--hair)}
.ch .bar{fill:rgba(46,229,157,.4)}
.ch .bar.acc{fill:var(--acc)}
.ch .bar.mute{fill:rgba(255,255,255,.22)}
.ch .bar.warn{fill:var(--warn)}
.ch .cap{font-size:12px;color:var(--dim);margin-top:6px}
.sbar{display:block;width:100%;max-width:120px;height:6px;border-radius:2px;overflow:hidden}
.gender{max-width:520px}
.sbar .pos,.legend i.pos{fill:var(--acc);background:var(--acc)}
.sbar .neu,.legend i.neu{fill:var(--hair2);background:var(--hair2)}
.sbar .neg,.legend i.neg{fill:var(--bad);background:var(--bad)}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;color:var(--dim);margin-top:8px}
.legend i{display:inline-block;width:12px;height:8px;border-radius:2px;vertical-align:middle;margin-right:6px}
.gender .sbar{max-width:100%;height:8px}

/* ---------- the artist overview: hero tiles with sparklines, signal rows, module cards ---------- */
.tiles.hero-tiles{margin-top:14px;grid-template-columns:repeat(2,1fr)}
@media (min-width:700px){.tiles.hero-tiles{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1100px){.tiles.hero-tiles{grid-template-columns:repeat(3,1fr)}}
.tiles.hero-tiles .tile{display:block;padding:14px 14px 12px;min-height:44px}
.tiles.hero-tiles a.tile:hover{background:var(--panel)}
.tiles.hero-tiles .tile .n{font-size:24px}
.tiles.hero-tiles .tile .s{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tiles.hero-tiles .tile .s.acc{color:var(--acc)}
.tiles.hero-tiles .tile .s.bad{color:var(--bad)}
.tiles.hero-tiles .sp{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;margin-top:10px}
.tiles.hero-tiles .sp .spark{flex:1 1 40px;min-width:40px;width:auto;max-width:140px;height:30px}
.tiles.hero-tiles .sp .st{flex:none;font-family:var(--disp);font-weight:700;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
.tiles.hero-tiles .sp .st.acc{color:var(--acc)}
.tiles.hero-tiles .sp .st.bad{color:var(--bad)}
.sigs .row .t{font-size:16px;line-height:1.3;font-family:var(--sans);font-weight:400;color:var(--ink)}
.sigs .row .sc{color:var(--dim)}
.sigs .row .sc.warn{color:var(--warn)}
.sigs .row .d .warn{color:var(--warn)}
@media (min-width:1100px){.sigs .row .t{font-size:17px}}
.mods{display:grid;grid-template-columns:1fr;gap:12px;margin-top:28px}
@media (min-width:1100px){.mods{grid-template-columns:1fr 1fr;gap:14px}}
.mod .hd{display:flex;justify-content:space-between;align-items:center;gap:12px}
.mod h3{font-size:18px;letter-spacing:-.02em;transition:color var(--t-tap)}
.mod .chev{display:block;width:9px;height:9px;flex:none;margin-right:4px;border-right:1.5px solid var(--dim);border-top:1.5px solid var(--dim);transform:rotate(45deg)}
.mod .s{font-size:14px;line-height:1.5;color:var(--body);margin-top:6px}
.mod .nums{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:12px}
.mod .nums span{display:flex;flex-direction:column;min-width:0}
.mod .nums b{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:20px;color:var(--white);font-weight:400;letter-spacing:-.02em;line-height:1.1}
.mod .nums small{font-family:var(--disp);font-weight:700;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.mod .ch{margin-top:14px}
.mod .mrows{list-style:none;margin-top:12px;border-top:1px solid var(--hair)}
.mod .mrows li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:8px 0;border-bottom:1px solid var(--hair);font-size:13.5px;align-items:baseline}
.mod .mrows .k{grid-column:1;font-family:var(--disp);font-weight:700;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.mod .mrows .v{grid-column:1;color:var(--ink);line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.mod .mrows .v .chip{vertical-align:1px;margin-left:4px}
.mod .mrows .n{grid-column:2;grid-row:1/3;align-self:center;font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--white);font-size:15px;white-space:nowrap}
.mod .mstrips{margin-top:12px;border-top:1px solid var(--hair)}
.mod .ms{display:grid;grid-template-columns:minmax(0,1fr) 36px 100px;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--hair);font-size:13.5px;color:var(--ink)}
.mod .ms .lb{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mod .ms .n{text-align:right;color:var(--white)}
.mod .ms .sbar{max-width:100px}
.mod .quotes{margin-top:10px}
.mod .quotes>span{display:block;font-family:var(--serif);font-style:italic;font-size:14.5px;color:var(--dim);line-height:1.45;padding-left:12px;border-left:1px solid var(--hair2)}
.mod .quotes>span span{font-family:var(--mono);font-style:normal;font-size:11px;color:var(--faint-text);margin-left:6px;letter-spacing:.02em}
.mod .empty{padding:10px 0 0;font-size:15px}
/* the artists index: two sparklines per row with their latest values */
.row.ar{grid-template-columns:40px minmax(0,1fr)}
.row.ar .t em{font-size:16px;color:var(--dim)}
.row.ar .sparks{grid-column:2;display:flex;gap:18px;margin-top:8px;flex-wrap:wrap}
.row.ar .spk{display:flex;flex-direction:column;gap:3px;min-width:120px}
.row.ar .spk small{font-family:var(--disp);font-weight:700;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
.row.ar .spk b{font-weight:400;color:var(--white);font-size:14px}
.row.ar .spk b .acc{color:var(--acc)}
.row.ar .spk b .bad{color:var(--bad)}
@media (min-width:1100px){.row.ar{grid-template-columns:56px minmax(0,1fr) auto}.row.ar .sparks{grid-column:3;grid-row:1;margin-top:0;flex-wrap:nowrap}}
.tl-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-top:22px}
.tl-head .t{font-family:var(--disp);font-weight:700;color:var(--white);font-size:15px;letter-spacing:-.01em}
.tl-head .n{font-size:15px;color:var(--white)}
.tl-head .n small{color:var(--dim);font-size:11.5px;margin-left:8px;letter-spacing:.02em}
.tl-head .n small .acc{color:var(--acc)}
.tl-head .n small .bad{color:var(--bad)}

/* ---------- banners ---------- */
.banner{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border:1px solid var(--hair);border-radius:6px;background:var(--panel);font-size:13px;color:var(--body);margin:14px 0 0}
.banner i{width:6px;height:6px;border-radius:50%;background:var(--warn);flex:none;margin-top:7px}
.banner.hot i{background:var(--acc)}
.banner ul{list-style:none}
.banner li+li{margin-top:2px}

/* ---------- tables (ops, coverage): hairline rows, mono numerals ---------- */
.tblwrap{overflow-x:auto;margin:0 calc(-1 * var(--mx));padding:0 var(--mx)}
.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{font-family:var(--disp);font-weight:700;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);text-align:left;padding:8px 10px 8px 0;border-bottom:1px solid var(--hair2);white-space:nowrap}
.tbl td{padding:9px 10px 9px 0;border-bottom:1px solid var(--hair);vertical-align:top}
.tbl td.n,.tbl th.n{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl th.n{font-family:var(--disp)}
.tbl td.w{color:var(--white)}
.tbl td.err{color:var(--dim);font-size:12px;max-width:34ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tbl tr.sub td:first-child{padding-left:18px;color:var(--dim)}

/* ---------- the north star and the day header ---------- */
.ns{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 16px;margin-top:14px;border:1px solid var(--hair);border-radius:6px;background:var(--panel)}
.ns p{font-size:14px;color:var(--ink);max-width:36ch}
.ns .pills{flex:none}

/* ---------- opportunities: list + sheet ---------- */
.split{display:block}
.sheet{padding-top:4px}
.sheet .score{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--acc);font-size:34px;letter-spacing:-.03em;line-height:1}
.sheet .score small{font-size:13px;color:var(--dim);letter-spacing:.04em}
.sheet h1{font-size:clamp(24px,3vw,32px);letter-spacing:-.03em;line-height:1.08;margin-top:8px}
.sheet .meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.sheet .actions{padding:16px 0;border-top:1px solid var(--hair2);border-bottom:1px solid var(--hair2);margin-top:20px}
.acts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.acts form{display:contents}
.acts .pill{width:100%;padding:0 6px;font-size:10.5px;letter-spacing:.14em}
@media (min-width:1100px){.acts{display:flex;flex-wrap:wrap}.acts .pill{width:auto;padding:0 16px;font-size:11px;letter-spacing:.18em}}
/* Assign and Snooze open a small disclosure under the row; without the script the disclosures stay open */
.disc{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:flex-end;margin-top:12px;padding:12px 14px;border:1px solid var(--hair);border-radius:6px;background:var(--panel)}
html.js .disc:not(.open){display:none}
.disc .lbl{flex:1 1 100%;font-family:var(--disp);font-weight:700;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.disc .field{flex:1 1 140px;max-width:260px;min-height:40px;font-size:15px}
.disc .field.sm{flex:0 1 90px}
.claims{list-style:none;margin-top:8px}
.claims li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;padding:9px 0;border-bottom:1px solid var(--hair);font-size:14px;align-items:start}
.claims li .chip{margin-top:2px}
.claims li small{display:block;color:var(--dim);font-family:var(--mono);font-size:11px;margin-top:2px}
.counter{padding:14px 16px;border:1px solid var(--hair2);border-radius:6px;margin-top:16px;background:var(--panel)}
.counter .kicker{display:flex;justify-content:space-between;align-items:center;gap:10px}
.counter p{margin-top:8px;font-size:14.5px;line-height:1.55;color:var(--ink)}
.backlink{display:inline-flex;align-items:center;gap:8px;font-family:var(--disp);font-weight:700;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);min-height:44px}
.backlink:hover{color:var(--white)}
@media (min-width:1100px){
  .split{display:grid;grid-template-columns:minmax(0,1fr) var(--sheet);gap:44px;align-items:start}
  .split .list{min-width:0}
  .split .sheet{position:sticky;top:0;max-height:100svh;overflow:auto;padding:36px 0 40px 32px;border-left:1px solid var(--hair);margin-top:-36px;padding-top:36px}
  .split .sheet .backlink.phone{display:none}
  .split .list .row.on .t{color:var(--acc)}
}
@media (max-width:1099px){.split .list{display:none}.split .sheet{padding-top:0}
  .filters .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:8px calc(-1 * var(--mx)) 0;padding:0 var(--mx)}.filters .chips::-webkit-scrollbar{display:none}.filters .chips .lbl{flex:none}.filters .chip{flex:none}}

/* ---------- topic strips, propagation, angles ---------- */
.strip{padding:14px 0;border-bottom:1px solid var(--hair)}
.strip .head{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.strip .head .t{font-family:var(--disp);font-weight:700;color:var(--white);font-size:16px;letter-spacing:-.015em;line-height:1.25}
.strip .head .n{color:var(--dim);font-size:12.5px;white-space:nowrap}
.strip .bars{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;margin-top:8px;align-items:center}
.strip .bars .lb{font-size:11px;color:var(--dim);letter-spacing:.06em;margin-bottom:4px;display:flex;justify-content:space-between}
.strip .sum{font-size:13.5px;color:var(--body);margin-top:8px;line-height:1.5}
.quotes{margin-top:8px;display:grid;gap:6px}
.quotes a{display:block;font-family:var(--serif);font-style:italic;font-size:14.5px;color:var(--dim);line-height:1.45;padding-left:12px;border-left:1px solid var(--hair2)}
.quotes a:hover{color:var(--white)}
.quotes a span{font-family:var(--mono);font-style:normal;font-size:11px;color:var(--faint-text);margin-left:6px;letter-spacing:.02em}
.cbar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:9px 0;border-bottom:1px solid var(--hair);align-items:center}
.cbar .lb{font-size:13.5px;color:var(--ink);display:flex;justify-content:space-between;gap:10px}
.cbar .lb small{color:var(--dim);font-family:var(--mono);font-size:11.5px}
.cbar .bar-h{grid-column:1}
.cbar .arrow{grid-column:2;grid-row:1/3;font-size:13px;text-align:right;min-width:48px}
.angle{padding:14px 0;border-bottom:1px solid var(--hair);display:grid;grid-template-columns:40px minmax(0,1fr);gap:8px 12px}
.angle .ix{font-family:var(--serif);font-style:italic;color:var(--dim);font-size:17px}
.angle .t{font-family:var(--disp);font-weight:700;color:var(--white);font-size:16.5px;letter-spacing:-.015em;line-height:1.25}
.angle .play{font-size:14px;margin-top:4px;line-height:1.55}
.angle .why{font-size:13px;color:var(--dim);margin-top:4px;line-height:1.5}
.angle .foot{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:space-between;margin-top:10px}
@media (min-width:1100px){.angle{grid-template-columns:56px minmax(0,1fr)}}

/* ---------- theses / calendar ---------- */
.conf{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:13px;color:var(--white)}
.conf .bar-h{flex:1;max-width:160px}
.tminus{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:15px;color:var(--white);white-space:nowrap}
.tminus small{display:block;font-size:10.5px;color:var(--dim);letter-spacing:.08em;text-transform:uppercase}
.ev-tl{list-style:none;margin-top:6px}
.ev-tl li{display:grid;grid-template-columns:76px 20px minmax(0,1fr);gap:8px;padding:6px 0;border-bottom:1px solid var(--hair);font-size:13px;align-items:baseline}
.ev-tl li .dt{font-family:var(--mono);font-size:11.5px;color:var(--dim)}
.ev-tl li .dir{font-family:var(--mono);color:var(--acc);text-align:center}
.ev-tl li .dir.neg{color:var(--bad)}
.ev-tl li .tp{font-family:var(--mono);font-size:11px;color:var(--faint-text);margin-left:6px}

/* ---------- ask ---------- */
.ask{margin-top:14px}
.ask .field{max-width:100%;font-size:17px;padding:12px 2px}
.ask ol{margin-top:22px;border-top:1px solid var(--hair2)}
.ask ol li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:6px 12px;padding:12px 0;border-bottom:1px solid var(--hair)}
.ask ol li .ix{font-family:var(--serif);font-style:italic;color:var(--dim);font-size:17px}
.ask ol li .t{font-family:var(--disp);font-weight:700;color:var(--white);font-size:15.5px;letter-spacing:-.01em}
.ask ol li .d{color:var(--dim);font-size:13px;margin-top:2px}

/* ---------- motion: one page fade, one tap change; both off under reduced motion ---------- */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:vt-out var(--t-page) ease both}
  ::view-transition-new(root){animation:vt-in var(--t-page) ease both}
  @keyframes vt-out{to{opacity:0}}
  @keyframes vt-in{from{opacity:0}}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}
@media print{.bar,.rail,.topline{display:none}}

/* ---------- in-page tabs: the nav language, letterspaced, underlined when current ---------- */
.tabs{display:flex;gap:22px;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * var(--mx));padding:0 var(--mx);border-bottom:1px solid var(--hair);position:sticky;top:0;background:rgba(10,10,10,.97);z-index:30}
.tabs::-webkit-scrollbar{display:none}
.tabs a{flex:none;display:flex;align-items:center;min-height:44px;font-family:var(--disp);font-weight:700;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);border-bottom:1px solid transparent;margin-bottom:-1px}
.tabs a:hover{color:var(--white)}
.tabs a.on{color:var(--white);border-bottom-color:var(--white)}
.card-lines{list-style:none}
.card-lines li{display:grid;grid-template-columns:110px minmax(0,1fr);gap:4px 14px;padding:9px 0;border-bottom:1px solid var(--hair);font-size:14px;align-items:baseline}
.card-lines li:last-child{border-bottom:0}
.card-lines .k{font-family:var(--disp);font-weight:700;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.card-lines .v{line-height:1.55}
.card-lines .v .chip{margin-left:6px;vertical-align:2px}
@media (max-width:480px){.card-lines li{grid-template-columns:1fr;gap:2px}}

/* ================================================================================================
   The interactive layer (static/charts.js). The server's SVG pair inside `.ch` is what a reader with
   no script sees; when the script hydrates a figure it adds `.ready`, drops the pair and draws its
   own chart at the real width of the box, with a cursor on it.
   ================================================================================================ */
.ch.ready>.ph,.ch.ready>.dt{display:none}
.c{margin-top:12px;position:relative}
.c-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 18px;flex-wrap:wrap;margin-bottom:10px;min-height:34px}
.c-read{display:flex;flex-direction:column;gap:3px;min-width:0}
.c-read .n{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:21px;font-weight:400;color:var(--white);letter-spacing:-.02em;line-height:1.05;
           transition:color var(--t-tap)}
.c-read .n.live{color:var(--acc)}
.c-sub{font-size:11.5px;color:var(--dim);letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-ctl{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;margin-left:auto}
.c-series{display:flex;gap:6px;flex-wrap:wrap}
.c-series .chip{cursor:pointer;background:none}
.seg.tiny{flex:none;width:auto;max-width:none}
.seg.tiny .pill{flex:none;min-height:30px;padding:0 11px;font-size:10px;letter-spacing:.1em}
@media (pointer:coarse),(max-width:1099px){.seg.tiny .pill{min-height:44px;padding:0 15px}}

.c-plot{position:relative;touch-action:pan-y;cursor:crosshair;border-radius:4px}
.c-plot:focus{outline:none}
.c-plot:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.c-svg{display:block;width:100%;height:auto;overflow:visible;color:var(--acc)}
.c-svg[data-tone=warn]{color:var(--warn)}
.c-svg[data-tone=bad]{color:var(--bad)}
.c-svg[data-tone=mute]{color:var(--hair2)}
.c-svg text{font-family:var(--mono);font-size:10.5px;fill:var(--faint-text);font-variant-numeric:tabular-nums}
.c-grid{stroke:rgba(255,255,255,.07)}
.c-band{fill:rgba(255,255,255,.05)}
.c-band-edge{fill:none;stroke:rgba(255,255,255,.15);stroke-width:1;stroke-dasharray:3 5}
.c-area{stroke:none}
.c-line{fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.c-dot{fill:currentColor;opacity:.75}
.c-last{fill:currentColor}
.c-mark-halo{fill:var(--warn);opacity:.16}
.c-mark-dot{fill:var(--warn)}
.c-mark.down .c-mark-halo{fill:var(--bad)}
.c-mark.down .c-mark-dot{fill:var(--bad)}
.c-cursor{transition:opacity 90ms ease;pointer-events:none}
.c-cursor-line{stroke:rgba(255,255,255,.42);stroke-width:1;stroke-dasharray:2 3}
.c-cursor-dot{fill:var(--canvas);stroke:currentColor;stroke-width:2}
.c-tip{position:absolute;top:0;left:0;z-index:5;pointer-events:none;opacity:0;transform:translate(0,6px);
       background:rgba(18,20,23,.97);border:1px solid var(--hair2);border-radius:6px;padding:8px 11px 9px;
       min-width:132px;max-width:min(74vw,300px);box-shadow:0 10px 30px rgba(0,0,0,.5);
       transition:opacity 110ms ease}
.c-tip.on{opacity:1}
.c-tip b{display:block;font-family:var(--disp);font-weight:700;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.c-tip .c-tip-n{display:block;font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:19px;color:var(--white);letter-spacing:-.02em;margin-top:3px;line-height:1.1}
.c-tip .c-tip-d,.c-tip .c-tip-w,.c-tip .c-tip-m,.c-tip .c-tip-go{display:block;font-size:11.5px;color:var(--dim);margin-top:3px;line-height:1.35}
.c-tip .c-tip-w.warn{color:var(--warn)}
.c-tip .c-tip-m{color:var(--ink);white-space:normal}
.c-tip .c-tip-go{font-family:var(--disp);font-weight:700;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--acc);margin-top:6px}
.c-plot:has(.c-tip.go){cursor:pointer}
.c-cap{font-size:12px;color:var(--dim);margin-top:8px;line-height:1.45;max-width:78ch}

/* ranked bars, redrawn as real rows so a bar can be a link */
.c-bars .bars{border-top:1px solid var(--hair)}
.bar-row{display:grid;grid-template-columns:minmax(84px,34%) minmax(0,1fr) auto;gap:4px 12px;align-items:center;
         padding:9px 0;border-bottom:1px solid var(--hair);color:var(--ink);font-size:13.5px;transition:background var(--t-tap)}
a.bar-row{cursor:pointer}
a.bar-row:hover{background:rgba(255,255,255,.035)}
a.bar-row:hover .bt i{background:var(--acc)}
a.bar-row:hover .bl{color:var(--white)}
.bar-row .bl{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color var(--t-tap)}
.bar-row .bt{display:block;height:6px;background:var(--hair);border-radius:2px;overflow:hidden}
.bar-row .bt i{display:block;height:100%;background:rgba(46,229,157,.4);border-radius:2px;
                transition:width 480ms cubic-bezier(.22,.61,.36,1),background var(--t-tap)}
.bar-row.acc .bt i{background:var(--acc)}
.bar-row.mute .bt i{background:rgba(255,255,255,.22)}
.bar-row.warn .bt i{background:var(--warn)}
.bar-row.bad .bt i{background:var(--bad)}
.bar-row .bv{color:var(--white);white-space:nowrap;text-align:right;font-size:13px}
.bar-row .bs{grid-column:2/4;font-size:11.5px;color:var(--faint-text);text-align:right;margin-top:-2px}
@media (max-width:520px){.bar-row{grid-template-columns:minmax(0,1fr) auto;gap:3px 10px}
  .bar-row .bl{grid-column:1}.bar-row .bv{grid-column:2}.bar-row .bt{grid-column:1/3}.bar-row .bs{grid-column:1/3;text-align:left}}

/* ================================================================================================
   The artist hero: one number the size it deserves, the chart under it, and where every tracked
   number sits against its own expected range.
   ================================================================================================ */
.hero{margin:18px 0 4px;padding:18px 0 4px;border-top:1px solid var(--hair2)}
.hero-top{display:flex;align-items:flex-start;justify-content:space-between;gap:18px 32px;flex-wrap:wrap}
.hero-read{min-width:0;flex:1 1 240px}
.hero-l{font-family:var(--disp);font-weight:700;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim)}
.hero-v{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:clamp(42px,8.4vw,68px);line-height:.98;letter-spacing:-.045em;
        color:var(--white);margin-top:8px;transition:color 120ms ease}
.hero-v.live{color:var(--acc)}
.hero-s{font-size:13px;color:var(--dim);margin-top:8px}
.hero-s .acc{color:var(--acc)}.hero-s .bad{color:var(--bad)}
.hero .c{margin-top:16px}
.hero .c-head{min-height:0}

.state{flex:0 1 320px;min-width:220px;border:1px solid var(--hair);border-radius:6px;background:var(--panel);overflow:hidden}
.state>summary{list-style:none;cursor:pointer;padding:12px 14px;display:block;min-height:44px}
.state>summary::-webkit-details-marker{display:none}
.state>summary:hover .sl{color:var(--white)}
.state .sl{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-family:var(--disp);font-weight:700;
           font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);transition:color var(--t-tap)}
.state .sl b{font-family:var(--mono);font-weight:400;font-size:13px;letter-spacing:0;color:var(--white);text-transform:none}
.state .gauge{display:flex;gap:2px;height:8px;margin-top:10px}
.state .gauge i{display:block;height:100%;border-radius:1px;background:var(--hair2)}
.state .gauge i.inside{background:rgba(255,255,255,.34)}
.state .gauge i.above{background:var(--acc)}
.state .gauge i.below{background:var(--bad)}
.state .sw{font-size:11.5px;color:var(--faint-text);margin-top:9px;line-height:1.4}
.state ul{list-style:none;border-top:1px solid var(--hair);padding:2px 14px 10px}
.state li{display:grid;grid-template-columns:8px minmax(0,1fr) auto;gap:10px;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--hair);font-size:13px}
.state li:last-child{border-bottom:0}
.state li i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.34);align-self:center}
.state li.above i{background:var(--acc)}
.state li.below i{background:var(--bad)}
.state li .k{color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.state li .v{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--white);white-space:nowrap;font-size:12.5px}
.state li .v span{color:var(--dim);margin-left:6px}
.state li .v .acc{color:var(--acc)}.state li .v .bad{color:var(--bad)}
.c-head.bare{margin-bottom:8px;min-height:0}
.c-head.bare .c-ctl{margin-left:auto}

/* the module cards became sections so the chart inside one can take a pointer; the heading stretches
   over the whole card, and anything interactive sits above it */
.mod{position:relative;display:block;min-height:44px;background:var(--panel);border:1px solid var(--hair);border-radius:6px;
     padding:16px 16px 14px;color:var(--body);transition:border-color var(--t-tap),background var(--t-tap)}
.mod:hover{border-color:var(--hair2);background:#14171b}
.mod:hover h3 a{color:var(--acc)}
.mod h3 a{color:inherit;transition:color var(--t-tap)}
.mod .stretch::after{content:'';position:absolute;inset:0;z-index:0;border-radius:6px}
.mod .stretch:focus-visible::after{outline:2px solid var(--acc);outline-offset:-2px}
.mod .ch,.mod .mrows,.mod .mstrips,.mod .quotes{position:relative;z-index:1}
.mod .ch{pointer-events:auto}
.mod .c-plot{cursor:crosshair}

/* the severity meter on a signal row: the number was already there, the bar makes 41 and 78 different at a glance */
.row .sc .sev{display:block;width:44px;height:3px;margin:0 0 5px auto;background:var(--hair);border-radius:2px;overflow:hidden}
.row .sc .sev i{display:block;height:100%;background:var(--dim);border-radius:2px}
.row .sc.warn .sev i{background:var(--warn)}
.sigs .row.link:hover{background:rgba(255,255,255,.02)}
.sigs .row{transition:background var(--t-tap)}

/* a tile that is switching the hero rather than navigating */
.tiles.hero-tiles a.tile[data-c-series]{cursor:pointer}
.tiles.hero-tiles a.tile.on{background:var(--panel);box-shadow:inset 2px 0 0 var(--acc)}
.tiles.hero-tiles a.tile.on .l{color:var(--ink)}

/* one metric on a deep-dive page: name, live number, then the chart */
.tl{margin-top:26px}
.tl+.tl{margin-top:34px}
.tl-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px 16px;flex-wrap:wrap;margin-top:0}
.tl-head .t{font-family:var(--disp);font-weight:700;color:var(--white);font-size:16px;letter-spacing:-.015em;flex:1 1 auto}
.tl-head .n{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:26px;letter-spacing:-.03em;color:var(--white);line-height:1;
            transition:color 120ms ease}
.tl-head .n.live{color:var(--acc)}
.tl-head small{flex:1 1 100%;text-align:right;color:var(--dim);font-size:12px;letter-spacing:.02em}
.tl-head small .acc{color:var(--acc)}.tl-head small .bad{color:var(--bad)}
@media (min-width:700px){.tl-head small{flex:0 0 auto;text-align:left;order:3}.tl-head .n{order:2}}

/* ================================================================================================
   The roster: one card per artist, ordered and filtered in the browser so nothing waits on a load.
   ================================================================================================ */
.tiles.four{grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr))}
.tiles .n.acc{color:var(--acc)}.tiles .n.warn{color:var(--warn)}

.roster-ctl{display:flex;flex-wrap:wrap;gap:6px 28px;justify-content:space-between;align-items:center;margin-top:22px;
            padding-bottom:14px;border-bottom:1px solid var(--hair2)}
.roster-ctl .chips{margin-top:6px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;max-width:100%}
.roster-ctl .chips::-webkit-scrollbar{display:none}
.roster-ctl .chip{flex:none;cursor:pointer;background:none}
.roster-ctl .chip:hover{color:var(--white);border-color:var(--hair2)}

.roster{display:grid;grid-template-columns:1fr;gap:12px;margin-top:16px}
@media (min-width:640px){.roster{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1240px){.roster{grid-template-columns:repeat(3,1fr)}}
.rc{position:relative;background:var(--panel);border:1px solid var(--hair);border-radius:6px;padding:15px 16px 13px;
    display:flex;flex-direction:column;gap:9px;min-height:44px;transition:border-color var(--t-tap),background var(--t-tap),transform var(--t-tap)}
.rc:hover{border-color:var(--hair2);background:#14171b}
.rc:hover h2{color:var(--acc)}
.rc[hidden]{display:none}
.rc .stretch::after{content:'';position:absolute;inset:0;border-radius:6px}
.rc .stretch:focus-visible::after{outline:2px solid var(--acc);outline-offset:-2px}
.rc-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.rc h2{font-size:19px;letter-spacing:-.025em;line-height:1.1;transition:color var(--t-tap)}
.rc-state{font-family:var(--disp);font-weight:700;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);white-space:nowrap;flex:none}
.rc-state i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--faint);margin:0 6px 1px 0;vertical-align:middle}
.rc-state.m i{background:var(--acc)}
.rc-state.w i{background:var(--warn)}
.rc-state.b i{background:var(--bad)}
.rc-sig{font-size:13.5px;line-height:1.45;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.9em}
.rc-sig.quiet{color:var(--faint-text)}
.rc-nums{display:flex;gap:8px 18px;flex-wrap:wrap;margin-top:auto;padding-top:4px}
.rc-n{flex:1 1 120px;min-width:0}
.rc-n small{display:block;font-family:var(--disp);font-weight:700;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
            white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-n b{display:block;font-weight:400;font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--white);font-size:17px;letter-spacing:-.02em;margin-top:3px}
.rc-n b .acc{color:var(--acc);font-size:12.5px}
.rc-n b .bad{color:var(--bad);font-size:12.5px}
.rc-n .spark{width:100%;max-width:150px;height:34px;margin-top:5px}
.rc-none{font-size:12.5px;color:var(--faint-text)}
.rc-foot{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;padding-top:10px;border-top:1px solid var(--hair);position:relative;z-index:1;pointer-events:none}
.rc-date{font-family:var(--mono);font-size:11px;color:var(--faint-text);margin-left:auto}

.cmp{margin-top:34px;border-top:1px solid var(--hair2);padding-top:6px}
.cmp>summary{list-style:none;cursor:pointer;padding:12px 0;min-height:44px}
.cmp>summary::-webkit-details-marker{display:none}
.cmp .sl{display:flex;gap:10px;align-items:baseline;font-family:var(--disp);font-weight:700;font-size:12.5px;letter-spacing:.28em;
         text-transform:uppercase;color:var(--dim)}
.cmp .sl b{font-family:var(--mono);font-weight:400;font-size:12.5px;letter-spacing:0;color:var(--white)}
.cmp>summary:hover .sl{color:var(--white)}
.cmp .sw{display:block;font-size:13px;color:var(--faint-text);margin-top:6px;max-width:70ch}
.cmp[open]>summary .sl::after{content:'—';margin-left:2px}

/* ---------- jump to anything (⌘K or /) ---------- */
html.pal-on{overflow:hidden}
.pal{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.62);display:flex;justify-content:center;
     padding:12vh 16px 16px;animation:pal-in 120ms ease}
@keyframes pal-in{from{opacity:0}}
.pal-box{width:100%;max-width:620px;height:auto;max-height:76svh;display:flex;flex-direction:column;background:var(--panel);
         border:1px solid var(--hair2);border-radius:10px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.pal-q{width:100%;background:none;border:0;border-bottom:1px solid var(--hair);color:var(--white);
       font-family:var(--sans);font-size:17px;padding:16px 18px;outline:none;min-height:56px}
.pal-q::placeholder{color:var(--faint-text)}
.pal-list{overflow-y:auto;padding:6px 0;flex:0 1 auto;max-height:52svh}
.pal-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:9px 18px;cursor:pointer;align-items:baseline}
.pal-row .pt{color:var(--ink);font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pal-row .ps{grid-column:1;font-size:11.5px;color:var(--faint-text)}
.pal-row .pg{grid-row:1/3;grid-column:2;font-family:var(--disp);font-weight:700;font-size:9.5px;letter-spacing:.16em;
             text-transform:uppercase;color:var(--faint-text);align-self:center}
.pal-row.on{background:rgba(46,229,157,.11)}
.pal-row.on .pt{color:var(--white)}
.pal-row.on .pg{color:var(--acc)}
.pal-none{padding:18px;color:var(--dim);font-family:var(--serif);font-style:italic;font-size:16px}
.pal-foot{display:flex;gap:18px;padding:10px 18px;border-top:1px solid var(--hair);font-family:var(--mono);font-size:11px;color:var(--faint-text)}
.jump{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;margin:0 0 20px;padding:8px 2px;
      border:0;border-bottom:1px solid var(--hair2);background:none;color:var(--faint-text);cursor:pointer;
      font-family:var(--sans);font-size:13.5px;text-align:left;min-height:44px;
      transition:border-color var(--t-tap),color var(--t-tap)}
.jump:hover{border-color:var(--white);color:var(--body)}
.jump kbd{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--dim)}
.rail .jump{display:none}
@media (min-width:1100px){.rail .jump{display:flex}}

/* ================================================================================================
   Today: the shape of the day before the reading starts — four numbers, then an index of the
   sections that follows the scroll, then the roster's pulse at the foot.
   ================================================================================================ */
.tiles .tile .s .acc{color:var(--acc)}
.tiles .tile .s .warn{color:var(--warn)}
.secnav{margin-top:20px;gap:0}
.secnav a{padding:0 16px 0 0;gap:8px}
.secnav a:first-child{padding-left:0}
.secnav a .cn{font-family:var(--mono);font-size:11px;letter-spacing:0;color:var(--faint-text);text-transform:none}
.secnav a.on .cn{color:var(--acc)}
.tsec{scroll-margin-top:52px}
/* the section's tone sits on the left edge of its rows, so a glance down the page separates
   "act now" from "watch" without another colour in the type */
.tsec .rows{position:relative}
.tsec.t-act_now .rows{box-shadow:inset 2px 0 0 var(--acc);padding-left:14px;margin-left:-14px}
.tsec.t-watch .rows{box-shadow:inset 2px 0 0 var(--warn);padding-left:14px;margin-left:-14px}
.tsec.t-blue_sky .rows{box-shadow:inset 2px 0 0 var(--hair2);padding-left:14px;margin-left:-14px}
.item>summary:hover{background:rgba(255,255,255,.02)}
.item>summary{transition:background var(--t-tap)}

.pulse{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));margin-top:12px;
       border-top:1px solid var(--hair);border-left:1px solid var(--hair)}
.pl{display:grid;grid-template-columns:38px minmax(0,1fr);gap:1px 11px;align-items:center;background:var(--canvas);
    border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);
    padding:10px 13px;min-height:62px;transition:background var(--t-tap)}
.pl:hover{background:var(--panel)}
.pl .av{grid-row:1/3;width:38px;height:38px;border-radius:50%;object-fit:cover;
        filter:grayscale(1) contrast(1.05) brightness(.92);transition:filter 260ms ease}
.pl:hover .av{filter:grayscale(1) contrast(1.05) brightness(1.05)}
.pl .av.none{display:flex;align-items:center;justify-content:center;background:var(--panel);border:1px solid var(--hair);
             font-family:var(--disp);font-weight:700;font-size:14px;color:var(--faint-text)}
.pl .st i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--faint);margin:0 6px 1px 0;vertical-align:middle}
.pl.m .st i{background:var(--acc)}
.pl.w .st i{background:var(--warn)}
.pl.b .st i{background:var(--bad)}
.pl.n .st i{background:transparent;border:1px solid var(--hair2)}
.pl .nm{font-family:var(--disp);font-weight:700;font-size:13.5px;color:var(--white);letter-spacing:-.01em;
        overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl:hover .nm{color:var(--acc)}
.pl .st{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--dim)}
.pl.w .st{color:var(--warn)}
.pl.m .st{color:var(--acc)}
.row .sc .sev i.acc{background:var(--acc)}
.row .sc .sev i.warn{background:var(--warn)}
.filters .chips select.field{min-height:44px;padding-bottom:4px}

/* "show the other N": the tail of a long list, closed until it is wanted */
.more{margin-top:2px}
.more>summary{list-style:none;cursor:pointer;display:flex;align-items:center;min-height:44px}
.more>summary::-webkit-details-marker{display:none}
.more .sl{font-family:var(--disp);font-weight:700;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.more>summary:hover .sl{color:var(--white)}
.more[open]>summary .sl::after{content:' —'}

/* the phone: the series switcher scrolls sideways instead of stacking into four rows */
.state .sl b{white-space:nowrap}
@media (max-width:1099px){
  .c-ctl{margin-left:0;width:100%;flex-direction:column;align-items:flex-start;gap:10px}
  .c-series{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;width:100%;
            margin:0 calc(-1 * var(--mx));padding:2px var(--mx)}
  .c-series::-webkit-scrollbar{display:none}
  .c-series .chip{flex:none}
  .c-head{flex-direction:column;align-items:stretch;gap:12px}
  .hero-top{gap:14px}
  .state{flex:1 1 100%}
}

/* ================================================================================================
   The roster with faces. The website's photography is already black and white, so the card needs
   no treatment beyond a scrim for the name and a lift on hover.
   ================================================================================================ */
.roster{gap:14px}
@media (min-width:1400px){.roster{grid-template-columns:repeat(4,1fr)}}
.rc{padding:0;overflow:hidden;gap:0}
.rc:hover{transform:translateY(-2px)}
.rc-face{position:relative;aspect-ratio:1/1;background:#141414;overflow:hidden}
.rc.noimg .rc-face{aspect-ratio:auto;min-height:74px;background:none}
.rc-face img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;filter:grayscale(1) contrast(1.06) brightness(.9);
             transition:transform 620ms cubic-bezier(.22,.61,.36,1),filter 320ms ease}
.rc:hover .rc-face img{transform:scale(1.035);filter:grayscale(1) contrast(1.06) brightness(1.02)}
.rc-face::after{content:'';position:absolute;inset:0;pointer-events:none;
                background:linear-gradient(to top,rgba(10,10,10,.94) 0%,rgba(10,10,10,.72) 22%,rgba(10,10,10,0) 52%)}
.rc.noimg .rc-face::after{display:none}
.rc-name{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:14px 16px 12px;display:flex;align-items:baseline;
         justify-content:space-between;gap:10px}
.rc.noimg .rc-name{position:static;padding:15px 16px 4px}
.rc h2{font-size:clamp(19px,1.6vw,23px);letter-spacing:-.03em;line-height:1.05;text-shadow:0 1px 14px rgba(0,0,0,.6)}
.rc-sig{padding:12px 16px 0;margin:0}
.rc-nums{padding:0 16px}
.rc-foot{margin:12px 16px 13px 16px;padding-top:11px}

/* ---------- an artist's banner: the photograph, the name over it, everything else below ---------- */
.ahead{position:relative;margin:0 calc(-1 * var(--mx)) 0;min-height:210px;display:flex;align-items:flex-end;
       background:#101010;overflow:hidden;isolation:isolate}
.ahead.bare{min-height:0;background:none;margin-bottom:0;padding-top:4px}
.ahead-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;
          filter:grayscale(1) contrast(1.04) brightness(.72);z-index:-1}
.ahead::after{content:'';position:absolute;inset:0;z-index:-1;
              background:linear-gradient(to top,var(--canvas) 2%,rgba(10,10,10,.86) 30%,rgba(10,10,10,.28) 72%,rgba(10,10,10,.5) 100%)}
.ahead.bare::after{display:none}
.ahead-in{position:relative;padding:44px var(--mx) 20px;width:100%}
.ahead.bare .ahead-in{padding:0 0 4px}
.ahead h1{font-size:clamp(34px,6vw,62px);letter-spacing:-.035em;line-height:.98;margin-top:10px}
.ahead h1 em{color:var(--white);letter-spacing:-.015em;font-size:.72em}
.ahead .kicker{color:rgba(255,255,255,.72)}
.ahead-lede{margin-top:16px}
.ahead-sub{margin-top:12px;display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;font-size:14px;color:var(--dim)}
@media (min-width:1100px){
  .ahead{min-height:300px;border-radius:0}
  .ahead-in{padding:60px 44px 26px}
}

/* ---------- the ring: one arc per number checked this morning ---------- */
.state>summary{display:flex;align-items:center;gap:18px;padding:16px 18px}
.ring-wrap{position:relative;flex:none;width:110px;height:110px}
.ring{width:110px;height:110px;display:block;transform:rotate(0deg)}
.ring-track{stroke:rgba(255,255,255,.07)}
.ring-seg{stroke:rgba(255,255,255,.5);transition:stroke 200ms ease}
.ring-seg.above{stroke:var(--acc)}
.ring-seg.below{stroke:var(--bad)}
.ring-mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}
.ring-mid .n{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:26px;font-weight:400;color:var(--white);letter-spacing:-.04em;line-height:1}
.ring-mid .n span{font-size:15px;color:var(--faint-text)}
.ring-mid small{font-family:var(--disp);font-weight:700;font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.state-say{min-width:0}
.state-say .sl{display:block}
.state-say p{font-size:13px;color:var(--dim);line-height:1.5;margin-top:7px}
.state-say p b{font-weight:400}
.state-more{display:inline-block;margin-top:9px;font-family:var(--disp);font-weight:700;font-size:9.5px;letter-spacing:.16em;
            text-transform:uppercase;color:var(--faint-text)}
.state>summary:hover .state-more{color:var(--acc)}
.state[open] .state-more{color:var(--acc)}

/* the comparison line, the release flags, and a line with a little more presence */
.c-line{stroke-width:2.25}
.c-prev{fill:none;stroke:rgba(255,255,255,.34);stroke-width:1.4;stroke-dasharray:4 4;stroke-linejoin:round;stroke-linecap:round}
.c-ev-line{stroke:rgba(255,255,255,.16);stroke-width:1;stroke-dasharray:2 4}
.c-ev-flag{fill:rgba(255,255,255,.5)}
.c-tip .c-tip-e{display:block;font-size:11.5px;color:var(--ink);margin-top:5px;line-height:1.35;white-space:normal}
.c-last{filter:drop-shadow(0 0 5px currentColor)}
.c-ctl .chip{cursor:pointer;background:none}

/* ---------- the keyboard: the row under the marker, and the sheet that lists the keys ---------- */
.kb{position:relative;background:rgba(46,229,157,.055)!important}
.kb::before{content:'';position:absolute;left:calc(-1 * var(--mx) / 2);top:0;bottom:0;width:2px;background:var(--acc)}
.roster .rc.kb{background:#14171b!important;border-color:var(--acc)}
.roster .rc.kb::before{display:none}
.keys{position:fixed;inset:0;z-index:210;background:rgba(0,0,0,.66);display:flex;align-items:center;justify-content:center;padding:16px}
.keys-box{width:100%;max-width:520px;background:var(--panel);border:1px solid var(--hair2);border-radius:10px;padding:26px 28px 22px;
          box-shadow:0 30px 80px rgba(0,0,0,.6)}
.keys-box h2{font-size:12.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--dim)}
.keys-box dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px 22px;margin-top:20px;align-items:baseline}
.keys-box dt{font-family:var(--mono);font-size:12.5px;color:var(--white);white-space:nowrap}
.keys-box dt i{font-style:normal;color:var(--faint-text);font-size:11px;margin:0 3px}
.keys-box dd{font-size:13.5px;color:var(--dim);line-height:1.45}
.keys-box p{margin-top:22px;padding-top:14px;border-top:1px solid var(--hair);font-size:12.5px;color:var(--faint-text)}

/* an artist's face on the row that is about them */
.row .av{width:34px;height:34px;border-radius:50%;object-fit:cover;margin-top:1px;
         filter:grayscale(1) contrast(1.05) brightness(.9);transition:filter 260ms ease}
.row.link:hover .av{filter:grayscale(1) contrast(1.05) brightness(1.05)}
@media (min-width:1100px){.row .av{width:40px;height:40px}}

/* ---------- motion: rows and cards arrive in order, once, and never under reduced motion ---------- */
@media (prefers-reduced-motion:no-preference){
  html.js .reveal{animation:rise 480ms cubic-bezier(.22,.61,.36,1) both}
  @keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
}

/* ================================================================================================
   Scale and depth. The pages were legible but flat: everything sat within two type sizes and the
   panels barely separated from the canvas. Bigger reading type, a real step up to section headings,
   and panels that read as objects.
   ================================================================================================ */
body{font-size:15px}
.row .t{font-size:17px}
@media (min-width:1100px){.row .t{font-size:19px}}
.row .d{font-size:14px}
.panel,.mod,.rc,.state,.pal-box,.keys-box{background:#15181c;box-shadow:inset 0 1px 0 rgba(255,255,255,.035)}
.mod:hover{background:#181c21}
.rc:hover{background:#181c21}

/* the section spine: a heading you can find while scrolling, not another small label */
.sechead{padding:38px 0 14px;border-bottom:1px solid var(--hair);margin-bottom:2px;align-items:end}
.sechead h2{font-family:var(--disp);font-weight:700;font-size:clamp(20px,2.2vw,26px);letter-spacing:-.028em;
            text-transform:none;color:var(--white);line-height:1.05}
.sechead .cnt{font-size:12px;letter-spacing:.06em;color:var(--faint-text);white-space:nowrap;padding-bottom:3px}
.sechead.small h2{font-size:12.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--dim)}
.tsec .sechead{padding-top:44px}
.mods{margin-top:20px}
.mod{padding:20px 20px 17px}
.mod h3{font-size:20px}
.mod .s{font-size:14.5px;margin-top:7px}
@media (min-width:1100px){
  .mods{gap:16px}
  .mod.wide{grid-column:1/-1}
}

/* ---------- the switcher under the number: every series the chart carries, with its own reading ---------- */
.hsw{display:flex;gap:0;margin-top:22px;border:1px solid var(--hair);border-radius:6px;overflow-x:auto;scrollbar-width:none}
.hsw::-webkit-scrollbar{display:none}
.hsw-i{flex:1 0 148px;min-width:148px;display:block;text-align:left;padding:12px 14px 11px;background:none;border:0;
       border-right:1px solid var(--hair);cursor:pointer;min-height:44px;color:var(--body);
       transition:background var(--t-tap),box-shadow var(--t-tap)}
.hsw-i:last-child{border-right:0}
.hsw-i:hover{background:rgba(255,255,255,.03)}
.hsw-i .l{display:block;font-family:var(--disp);font-weight:700;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
          color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hsw-i .v{display:block;font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:17px;color:var(--white);
          letter-spacing:-.02em;margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hsw-i .v .acc{color:var(--acc);font-size:12px}
.hsw-i .v .bad{color:var(--bad);font-size:12px}
.hsw-i .spark{width:100%;max-width:120px;height:26px;margin-top:6px;opacity:.55;transition:opacity var(--t-tap)}
.hsw-i.on{background:rgba(46,229,157,.07);box-shadow:inset 0 2px 0 var(--acc)}
.hsw-i.on .l{color:var(--ink)}
.hsw-i.on .spark{opacity:1}
.hero-tiles{margin-top:16px}

/* ---------- the opportunity sheet: what each factor contributed, against the most it could ---------- */
.sheet-top{display:flex;gap:16px;align-items:flex-start;margin-top:8px}
.row .av.lg,.sheet-top .av{width:56px;height:56px;flex:none;border-radius:50%;object-fit:cover;
                           filter:grayscale(1) contrast(1.05) brightness(.95)}
.sheet-top h1{margin-top:0}
.fbars{margin-top:16px;border-top:1px solid var(--hair)}
.fb-row{display:grid;grid-template-columns:minmax(76px,26%) minmax(0,1fr) auto;gap:3px 14px;align-items:center;
        padding:10px 0;border-bottom:1px solid var(--hair)}
.fb-l{font-family:var(--disp);font-weight:700;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
      white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fb-t{display:block;height:7px;background:var(--hair);border-radius:2px;overflow:hidden}
.fb-t i{display:block;height:100%;background:rgba(46,229,157,.45);border-radius:2px}
.fb-t i.full{background:var(--acc)}
.fb-t i.low{background:rgba(255,255,255,.22)}
.fb-v{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--white);font-size:14px;white-space:nowrap;text-align:right}
.fb-v small{color:var(--faint-text);font-size:11px;margin-left:5px}
.fb-n{grid-column:2/4;font-size:11.5px;color:var(--faint-text);line-height:1.4}
.fb-sum{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:flex-end;margin-top:16px;padding:14px 16px;
        border:1px solid var(--hair);border-radius:6px;background:#15181c}
.fb-sum span{display:flex;flex-direction:column;gap:4px}
.fb-sum b{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:400;font-size:22px;color:var(--white);letter-spacing:-.02em}
.fb-sum .tot{margin-left:auto;text-align:right}
.fb-sum .tot b{font-size:34px;letter-spacing:-.035em}
.fb-sum small{font-family:var(--disp);font-weight:700;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}

/* gmail admin: addresses are long, never break them mid-word */
.tile .n.addr{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.errbody{white-space:pre-wrap;word-break:break-word;font-size:12px;color:var(--dim);margin:8px 0 0}
.tile .n.neg{color:var(--bad)}