/* LifeGadgets — spec plates in a dark lab.
   Everything the reader judges, reads or keeps is printed on an anodised plate;
   navigation and chrome stay in the graphite room. One loop: look, judge, swipe, next. */
:root{
  /* the room */
  --void:#10141A;
  --surface:#181D24;
  --surface-2:#222831;
  --ink:#E6EAF0;
  --ink-2:#A3ACB8;
  --ink-3:#7A8491;
  --line:rgba(230,234,240,.10);
  --line-2:rgba(230,234,240,.22);

  /* the plate */
  --plate:#F2F4F6;
  --plate-2:#E3E7EC;
  --graphite:#14181D;
  --graphite-2:#3B434D;
  --graphite-3:#646D78;
  --rule:rgba(20,24,29,.13);
  --rule-2:rgba(20,24,29,.30);

  /* accents */
  --volt:#D9FF4B;
  --volt-ink:#5F7A00;
  --good:#2F8F6A;
  --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;

  /* one ramp: steel → slate → cobalt → violet → magenta */
  --t1:#6C7480; --t2:#4C6B93; --t3:#2A63C9; --t4:#5B3FD6; --t5:#C21E6E;
  /* the same five, lifted for the dark ground — never a different hue */
  --d1:#98A2AF; --d2:#7F9DC9; --d3:#6E93FF; --d4:#A78BFF; --d5:#FF5CA8;

  --display:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --bar:54px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;height:100%}
body{
  margin:0;min-height:100%;background:var(--void);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  padding-bottom:env(safe-area-inset-bottom);
}
/* a cold overhead light and a faint bench grid */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 70% 50% at 50% -10%,rgba(150,190,255,.10),transparent 70%),
    radial-gradient(ellipse 90% 60% at 50% 112%,rgba(217,255,75,.05),transparent 70%);
}
body::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.55;
  background-image:
    linear-gradient(rgba(230,234,240,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(230,234,240,.045) 1px,transparent 1px);
  background-size:36px 36px;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 30%,transparent 100%);
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--volt);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:200;background:var(--ink);color:var(--void);padding:10px 16px;border-radius:6px}
[hidden]{display:none!important}
main,.foot,.topbar{position:relative;z-index:1}

.wrap{width:100%;max-width:940px;margin:0 auto;padding-inline:20px}
.label{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ---------------- top bar ---------------- */
.topbar{
  position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:14px;
  padding:0 18px;height:var(--bar);
  background:rgba(16,20,26,.82);backdrop-filter:blur(18px) saturate(1.2);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:9px;font-family:var(--display);font-size:15px;font-weight:500;letter-spacing:-.01em;flex:none;font-variation-settings:"wdth" 92}
.brand b{font-weight:800}
.pip{width:9px;height:12px;border-radius:2px;border:2px solid var(--volt);flex:none;position:relative}
.pip::after{content:"";position:absolute;left:50%;bottom:1px;width:2px;height:2px;margin-left:-1px;background:var(--volt);border-radius:1px}
.tabs{display:flex;gap:2px;margin-left:auto;margin-right:auto}
.tab{
  font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  padding:7px 12px;border-radius:6px;color:var(--ink-3);white-space:nowrap;
  transition:color .2s ease,background .2s ease;
}
.tab:hover{color:var(--ink)}
.tab[aria-current="page"]{background:var(--volt);color:var(--void);font-weight:600}
.streak{
  display:flex;align-items:center;gap:6px;flex:none;
  font-family:var(--mono);font-size:12px;font-weight:600;
  padding:6px 11px;border:1px solid var(--line-2);border-radius:6px;
  transition:border-color .2s ease;
}
.streak:hover{border-color:var(--ink)}
.streak .flame{color:var(--volt);font-size:9px}
.streak.hot{border-color:var(--volt);color:var(--ink)}
.streak.bump{animation:bump .5s var(--spring)}
@keyframes bump{40%{transform:scale(1.22)}100%{transform:scale(1)}}

/* ---------------- shared blocks ---------------- */
.view{padding-block:30px 64px}
.view.view--deck{padding:0}
body:has(.view--deck:not([hidden])){overflow:hidden}
body:has(.view--deck:not([hidden])) .foot{display:none}
.hgroup{margin-bottom:24px}
h1{font-family:var(--display);font-weight:700;font-size:clamp(2.1rem,7vw,3.4rem);line-height:1;letter-spacing:-.03em;margin:8px 0 0;text-wrap:balance;font-variation-settings:"opsz" 96,"wdth" 90}
h2{font-family:var(--display);font-weight:700;font-size:clamp(1.4rem,3.4vw,2rem);line-height:1.08;letter-spacing:-.025em;margin:0;font-variation-settings:"opsz" 48,"wdth" 92}
h3{font-family:var(--display);font-weight:700;font-size:1.12rem;letter-spacing:-.015em;margin:0}
.lede{color:var(--ink-2);max-width:60ch;margin:14px 0 0}
.lnk{color:var(--ink);border-bottom:1px solid var(--line-2)}
.lnk:hover{border-color:var(--ink)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  padding:14px 24px;border-radius:8px;border:1px solid transparent;
  transition:transform .18s var(--ease),background .25s ease,border-color .25s ease,color .25s ease,opacity .2s ease;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--volt);color:var(--void)}
.btn-primary:hover{background:#E6FF7A}
.btn-ghost{border-color:var(--line-2);color:var(--ink-2)}
.btn-ghost:hover{border-color:var(--ink);color:var(--ink);background:rgba(230,234,240,.06)}
.btn[disabled]{opacity:.4;pointer-events:none}
.btn-lg{padding:17px 32px;font-size:12px}
.btn.did{background:var(--volt);border-color:var(--volt);color:var(--void)}

.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:6px;overflow:hidden}
.seg button{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:8px 14px;color:var(--ink-3);transition:background .2s,color .2s}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--void);font-weight:600}

/* ================= the deck ================= */
.deck{
  position:relative;height:calc(100svh - var(--bar));
  display:flex;flex-direction:column;overflow:hidden;
  touch-action:pan-y;user-select:none;-webkit-user-select:none;
}
.deck-stage{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;--slot:min(100%,600px)}
/* neighbours recede into the room behind a graphite scrim, never a mask */
.deck-stage::before,.deck-stage::after{content:"";position:absolute;top:0;bottom:0;width:24%;z-index:3;pointer-events:none}
.deck-stage::before{left:0;background:linear-gradient(90deg,var(--void) 42%,rgba(16,20,26,0))}
.deck-stage::after{right:0;background:linear-gradient(270deg,var(--void) 42%,rgba(16,20,26,0))}
@media (max-width:899px){ .deck-stage::before,.deck-stage::after{display:none} }
.deck-track{display:flex;height:100%;will-change:transform}
.deck-track.settle{transition:transform .46s var(--ease)}

.card{flex:0 0 var(--slot);width:var(--slot);height:100%;display:flex;align-items:center;justify-content:center;padding:14px 14px 10px}
.sheetwrap{
  position:relative;width:100%;max-width:560px;height:auto;max-height:100%;
  display:flex;flex-direction:column;
  border-radius:14px;background:linear-gradient(168deg,var(--plate),var(--plate-2));
  color:var(--graphite);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 -1px 0 rgba(20,24,29,.12) inset,0 26px 54px -20px rgba(0,0,0,.85),0 2px 8px rgba(0,0,0,.35);
  padding:22px 24px 0;overflow:hidden;will-change:transform;
}
/* the tier is machined into the plate's top edge, so even the quiet end of the ramp has one colour event */
.card--entry .sheetwrap::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--tier);z-index:2}
/* brushed finish: hairline grain running across the plate */
.sheetwrap::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:.5;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.28) 0 1px,rgba(20,24,29,.035) 1px 3px);
  mix-blend-mode:overlay;
}
.card--entry .sheetwrap{cursor:grab}
.card.is-dragging .sheetwrap{cursor:grabbing}
.card .sheetwrap{transition:transform .46s var(--ease),opacity .46s var(--ease),filter .46s var(--ease)}
.card:not(.is-live) .sheetwrap{transform:scale(.9) translateY(10px);opacity:.5;filter:saturate(.45) blur(2.4px);box-shadow:0 16px 34px -26px rgba(0,0,0,.85)}
.card.is-live .sheetwrap{transform:none;opacity:1;filter:none}
.card:not(.is-live) .c-verdict{opacity:0}
.deck.is-dragging .deck-track,.deck.is-dragging .card .sheetwrap{transition:none}

/* --- plate head: a model number, like the label on the back of a device --- */
.c-head{display:flex;align-items:baseline;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--rule);flex:none;padding-right:132px}
.c-idx{font-family:var(--display);font-weight:800;font-size:1.25rem;line-height:1;letter-spacing:-.01em;color:var(--graphite);font-variant-numeric:tabular-nums lining-nums;font-variation-settings:"opsz" 48,"wdth" 85}
.c-idx b{font-family:var(--mono);font-size:8.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--graphite-3);margin-right:7px;vertical-align:.28em}
.c-idx i{font-family:var(--mono);font-style:normal;font-size:9px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:var(--graphite-3);margin-left:8px}
.c-move{font-family:var(--mono);font-style:normal;font-size:10px;margin-left:.7em;letter-spacing:0;vertical-align:.2em}
.c-move.up{color:var(--t3)}
.c-move.down{color:var(--t5)}

/* --- plate body --- */
.c-body{flex:none;display:flex;flex-direction:column;padding-top:16px}
.c-year{
  font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(2.6rem,10vw,3.4rem);
  line-height:.88;letter-spacing:-.01em;color:var(--graphite-3);flex:none;
}
.c-maker{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--graphite-3);margin-bottom:6px}
.c-name{font-family:var(--serif);font-style:italic;font-size:clamp(1.6rem,6.5vw,2.1rem);line-height:.98;letter-spacing:-.01em;color:var(--graphite-2);flex:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.c-title{
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.3rem,5vw,1.72rem);line-height:1.1;letter-spacing:-.028em;
  color:var(--graphite);margin:11px 0 0;text-wrap:balance;flex:none;
  font-variation-settings:"opsz" 48,"wdth" 92;
}
.c-spec{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--graphite-3)}
.c-spec b{color:var(--graphite);font-weight:600}
.c-dek{
  --lines:5;
  font-family:var(--sans);font-size:1rem;line-height:1.56;color:var(--graphite-2);
  margin:13px 0 0;cursor:pointer;-webkit-tap-highlight-color:transparent;flex:none;
  display:-webkit-box;-webkit-line-clamp:var(--lines);-webkit-box-orient:vertical;overflow:hidden;
}
.c-more{
  flex:none;align-self:flex-start;margin-top:13px;padding:0;
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:9px;font-weight:400;letter-spacing:.18em;text-transform:uppercase;
  color:var(--graphite-3);transition:color .2s;
}
.c-more span{border-bottom:1px solid var(--rule-2);padding-bottom:3px;transition:border-color .2s}
.c-more i{font-style:normal;font-size:11px;transition:transform .2s var(--ease)}
.c-more:hover{color:var(--t3)}
.c-more:hover span{border-color:var(--t3)}
.c-more:hover i{transform:translateX(3px)}
.c-tags{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:15px;flex:none;overflow:hidden}
.c-tags span{font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--graphite-3)}
.c-tags span + span::before{content:"";display:inline-block;width:3px;height:3px;background:currentColor;vertical-align:.22em;margin-right:9px;opacity:.65}

/* --- the readout: the one thing on the plate with real weight --- */
.c-score{flex:none;margin-top:18px;padding-top:14px;border-top:1px solid var(--rule)}
.c-bar{height:4px;background:rgba(20,24,29,.1);overflow:hidden;border-radius:2px}
.c-bar b{display:block;height:100%;width:0;transition:width 1.1s var(--ease) .15s}
.c-figure{display:flex;align-items:last baseline;gap:10px;margin-top:12px}
.c-n{font-family:var(--display);font-weight:800;font-size:2.9rem;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums lining-nums;font-variation-settings:"opsz" 96,"wdth" 80}
.c-of{display:flex;flex-direction:column;gap:5px;padding-bottom:2px;font-family:var(--mono);text-transform:uppercase}
.c-of>span{font-size:9px;font-weight:400;letter-spacing:.18em;color:var(--graphite-3)}
.c-of>b{font-size:10.5px;font-weight:600;letter-spacing:.2em}
.c-share{
  margin-left:auto;display:inline-flex;align-items:center;gap:7px;padding:9px 13px;
  font-family:var(--mono);font-size:8.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--graphite-2);border:1px solid var(--rule-2);border-radius:6px;transition:background .2s,color .2s,border-color .2s;
}
.c-share:hover{background:var(--graphite);color:var(--plate);border-color:var(--graphite)}

/* --- the stamps --- */
.stamp{
  position:absolute;top:30px;right:26px;z-index:4;pointer-events:none;transform-origin:50% 50%;
  display:flex;align-items:center;justify-content:center;width:8.8em;height:2.4em;
  font-family:var(--display);font-weight:800;font-size:clamp(.9rem,3.2vw,1.1rem);
  letter-spacing:.04em;text-transform:uppercase;border:2.5px solid currentColor;border-radius:4px;
  opacity:0;white-space:nowrap;mix-blend-mode:multiply;font-variation-settings:"opsz" 48,"wdth" 80;
}
.stamp--up{color:var(--t5);transform:rotate(-8deg)}
.stamp--down{color:var(--graphite);transform:rotate(8deg)}

/* --- the two votes, printed on the plate's foot --- */
.c-verdict{flex:none;display:flex;gap:9px;margin:16px -24px 0;padding:14px 24px 18px;border-top:1px solid var(--rule);background:rgba(20,24,29,.04)}
.vbtn2{
  flex:1 1 0;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 10px;border-radius:7px;border:1px solid transparent;
  font-family:var(--mono);font-size:clamp(8.4px,2.3vw,9.5px);font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  transition:background .22s,color .22s,border-color .22s,transform .2s var(--spring);
}
.vbtn2 i{font-style:normal;font-size:12px;line-height:1}
.vbtn2--up{background:var(--graphite);color:var(--volt)}
.vbtn2--up:hover{background:#000}
.c-verdict:has(.is-armed) .vbtn2--up:not(.is-armed){background:rgba(20,24,29,.1);color:var(--graphite-2)}
.c-verdict:has(.is-armed) .vbtn2--down:not(.is-armed){border-color:var(--rule);color:var(--graphite-3)}
.vbtn2--down{border-color:var(--rule-2);color:var(--graphite-2)}
.vbtn2--down:hover{border-color:var(--graphite);color:var(--graphite);background:rgba(20,24,29,.05)}
.vbtn2.is-armed{transform:scale(1.05)}
.vbtn2--down.is-armed{background:var(--graphite);border-color:var(--graphite);color:var(--plate)}

/* --- the timeline rail --- */
.rail{flex:none;position:relative;padding:12px 16px calc(11px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:9px}
.rail-ticks{position:relative;display:flex;width:100%;align-items:flex-end;height:20px}
.rtick{flex:1;position:relative;height:20px;padding:0;cursor:pointer;display:flex;align-items:flex-end;justify-content:center}
.rtick::before{content:"";width:2px;height:6px;background:currentColor;opacity:.3;transition:height .3s var(--ease),opacity .3s}
.rtick:hover::before{opacity:.85;height:12px}
.rtick.done::before{opacity:.8}
.rtick.now::before{height:20px;opacity:1}
.rail-meta{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--mono);font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.rail-meta span:first-child{color:var(--ink);font-weight:600}

/* --- the intro card --- */
.card--intro .sheetwrap{background:none;box-shadow:none;color:var(--ink);padding:8px;max-width:640px;justify-content:center;text-align:left}
.card--intro .sheetwrap::after{display:none}
.i-kicker{color:var(--ink-3)}
.i-title{
  font-family:var(--display);font-weight:700;margin:16px 0 0;
  font-size:clamp(2.2rem,9.4vw,3.8rem);line-height:.96;letter-spacing:-.04em;text-wrap:balance;
  font-variation-settings:"opsz" 96,"wdth" 88;
}
.i-title em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:0;color:var(--volt)}
.i-sub{font-family:var(--sans);font-size:clamp(1rem,2.3vw,1.14rem);line-height:1.6;color:var(--ink-2);margin:16px 0 0;max-width:42ch}
.i-spread{position:relative;height:34px;margin-top:26px}
.i-axis{position:absolute;left:0;right:0;top:0;height:3px;border-radius:3px;background:rgba(230,234,240,.25)}
.i-span{position:absolute;top:0;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--d1),var(--d2),var(--d3),var(--d4),var(--d5))}
.i-dot{position:absolute;top:0;width:2px;height:11px;background:currentColor;opacity:.95}
.i-scale{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between}
.i-go{
  margin-top:26px;align-self:flex-start;display:inline-flex;align-items:center;gap:12px;padding:15px 26px;
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  background:var(--volt);color:var(--void);border-radius:8px;transition:transform .2s var(--spring),background .25s;
}
.i-go:hover{transform:translateX(3px);background:#E6FF7A}
.i-go i{font-style:normal;animation:nudgeX 2.4s ease-in-out infinite}
@keyframes nudgeX{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
.i-how{margin-top:22px;display:flex;gap:20px;flex-wrap:wrap}
.i-how span{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.i-how b{color:var(--ink-2);font-weight:600}

/* --- the end card --- */
.card--end .sheetwrap{max-width:560px;overflow-y:auto;overscroll-behavior:contain;padding:22px 24px 34px}
.e-kicker{color:var(--graphite-3)}
.e-title{font-family:var(--display);font-weight:700;font-size:clamp(1.65rem,6vw,2.2rem);line-height:1.02;letter-spacing:-.035em;margin:12px 0 0;color:var(--graphite);font-variation-settings:"opsz" 96,"wdth" 88}
.e-stats{display:grid;grid-template-columns:repeat(3,1fr);margin:22px 0 0;border:1px solid var(--rule)}
.e-stats>div{padding:14px 14px 15px}
.e-stats>div + div{border-left:1px solid var(--rule)}
.e-stats dt{font-family:var(--mono);font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:var(--graphite-3);margin:0;white-space:nowrap}
.e-stats dd{margin:4px 0 0;font-family:var(--display);font-weight:800;font-size:1.5rem;line-height:1.05;letter-spacing:-.02em;color:var(--graphite);font-variant-numeric:tabular-nums lining-nums;font-variation-settings:"wdth" 85}
.e-note{font-family:var(--sans);font-size:.98rem;line-height:1.55;color:var(--graphite-2);margin:18px 0 0}
.e-sort{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:20px;padding-top:16px;border-top:1px solid var(--rule)}
.e-sort .label{color:var(--graphite-3)}
.e-sort .seg{border:1px solid var(--rule-2);border-radius:6px}
.e-sort .seg button{color:var(--graphite-2);padding:8px 13px}
.e-sort .seg button[aria-pressed="true"]{background:var(--graphite);color:var(--plate)}
.e-cta{display:flex;flex-direction:column;gap:8px;margin-top:20px;padding-bottom:2px}
.e-btn{display:flex;align-items:center;justify-content:center;gap:9px;padding:15px 20px;border-radius:8px;font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;transition:transform .18s var(--ease),background .2s,color .2s}
.e-btn:active{transform:translateY(1px)}
.e-btn--go{background:var(--graphite);color:var(--volt)}
.e-btn--go:hover{background:#000}
.e-btn--ghost{border:1px solid var(--rule-2);color:var(--graphite-2)}
.e-btn--ghost:hover{background:var(--graphite);color:var(--plate);border-color:var(--graphite)}
.e-btn--quiet{padding:12px 20px;font-size:9px;color:var(--graphite-2);letter-spacing:.2em}
.e-btn--quiet span{border-bottom:1px solid var(--rule-2);padding-bottom:3px}
.e-btn--quiet:hover{color:var(--graphite)}

/* --- the ad card --- */
.card--ad .sheetwrap{background:none;box-shadow:none;border:1px dashed var(--line-2);border-radius:12px;align-items:center;justify-content:center;gap:14px;max-width:480px;min-height:320px}
.card--ad .sheetwrap::after{display:none}
.card--ad .label{text-align:center}

/* --- the read-more sheet --- */
.readsheet{position:fixed;inset:0;z-index:120;display:flex;align-items:flex-end;justify-content:center;background:rgba(8,10,14,.9);opacity:0;pointer-events:none;transition:opacity .28s ease}
.readsheet.on{opacity:1;pointer-events:auto}
.rs-panel{
  position:relative;width:100%;max-width:560px;max-height:88svh;overflow-y:auto;overscroll-behavior:contain;
  background:linear-gradient(168deg,var(--plate),var(--plate-2));color:var(--graphite);
  border-radius:18px 18px 0 0;padding:22px 24px 28px;transform:translateY(26px);transition:transform .32s var(--ease);
  box-shadow:0 -18px 50px -18px rgba(0,0,0,.9);
}
.readsheet.on .rs-panel{transform:none}
.rs-x{position:absolute;right:16px;top:16px;width:32px;height:32px;border-radius:6px;border:1px solid var(--rule-2);color:var(--graphite-2);font-size:16px;line-height:1;display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s}
.rs-x:hover{background:var(--graphite);color:var(--plate)}
.rs-year{font-family:var(--serif);font-style:italic;font-size:1.5rem;line-height:1;color:var(--graphite-3);margin:0}
.rs-title{font-family:var(--display);font-weight:700;font-size:1.38rem;line-height:1.12;letter-spacing:-.028em;margin:9px 44px 0 0;font-variation-settings:"opsz" 48,"wdth" 92}
.rs-dek{font-family:var(--sans);font-size:1.02rem;line-height:1.64;color:var(--graphite-2);margin:14px 0 0;max-width:58ch}
.rs-where{margin-top:22px;padding-top:16px;border-top:1px solid var(--rule)}
.rs-bar{position:relative;height:24px;margin-top:10px}
.rs-line{position:absolute;left:0;right:0;top:10px;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--t1),var(--t2),var(--t3),var(--t4),var(--t5))}
.rs-dot{position:absolute;top:3px;width:15px;height:15px;margin-left:-7px;border-radius:50%;border:3px solid var(--plate);box-shadow:0 0 0 2px currentColor}
.rs-scale{display:flex;justify-content:space-between;font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--graphite-3)}
.rs-src{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;padding:14px 16px;border:1px solid var(--rule-2);border-left:3px solid var(--t3);border-radius:8px;transition:background .2s}
.rs-src:hover{background:rgba(20,24,29,.05)}
.rs-src b{font-family:var(--display);font-weight:700;font-size:.98rem;display:block;letter-spacing:-.01em}
.rs-src span{font-family:var(--mono);font-size:9px;color:var(--graphite-3);word-break:break-all}
.rs-close{display:block;width:100%;margin-top:16px;padding:14px;border-radius:8px;background:var(--graphite);color:var(--plate);font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase}

/* --- the flash of consequence after a vote --- */
.verdictpop{
  position:fixed;left:50%;top:calc(var(--bar) + 12px);transform:translate(-50%,-14px);z-index:115;
  display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:8px;
  background:var(--surface-2);border:1px solid var(--line-2);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);
  opacity:0;pointer-events:none;transition:opacity .25s,transform .35s var(--spring);white-space:nowrap;
}
.verdictpop.on{opacity:1;transform:translate(-50%,0)}
.verdictpop b{color:var(--ink);font-weight:600}
.verdictpop i{font-style:normal;font-weight:600}
.verdictpop i.up{color:var(--d3)}
.verdictpop i.down{color:var(--d5)}

/* Short viewports, last in the cascade so these actually win. */
@media (max-height:660px){
  .c-dek{font-size:.95rem;margin-top:10px}
  .sheetwrap{padding:16px 20px 0}
  .c-head{padding-bottom:9px}
  .c-body{padding-top:12px}
  .c-year,.c-name{font-size:2rem;line-height:.9}
  .c-title{font-size:1.18rem;margin-top:7px}
  .c-more{margin-top:10px}
  .c-tags{margin-top:10px}
  .c-score{margin-top:14px;padding-top:11px}
  .c-n{font-size:2.2rem}
  .c-verdict{margin:12px -20px 0;padding:10px 20px 12px}
  .vbtn2{padding:11px 10px}
  .stamp{top:20px;right:18px}
  .card{padding:10px 12px}
}
@media (max-height:625px){
  .c-tags{display:none}
  .c-year,.c-name{font-size:1.75rem}
  .c-title{font-size:1.1rem;margin-top:6px}
  .c-spec{margin-top:6px}
  .c-more{margin-top:8px}
  .c-score{margin-top:8px;padding-top:7px}
  .c-figure{margin-top:7px}
  .c-n{font-size:1.95rem}
  .c-share{padding:7px 10px}
  .c-of{gap:3px}
  .c-verdict{margin-top:7px;padding-top:8px;padding-bottom:9px}
  .vbtn2{padding:9px 8px}
  .sheetwrap{padding-top:13px}
  .c-body{padding-top:10px}
}
@media (max-height:560px){
  .c-dek{font-size:.92rem;margin-top:9px}
  .c-year,.c-name{font-size:1.6rem}
  .c-title{font-size:1.06rem;margin-top:5px}
  .c-n{font-size:1.9rem}
  .sheetwrap{padding:12px 16px 0}
  .c-head{padding-bottom:7px}
  .c-body{padding-top:9px}
  .c-more{margin-top:8px}
  .c-score{margin-top:10px;padding-top:9px}
  .c-figure{margin-top:8px}
  .c-verdict{margin:9px -16px 0;padding:8px 16px 10px}
  .vbtn2{padding:9px 8px}
  .c-share{padding:7px 10px}
  .card{padding:8px 10px}
}

/* On a wide screen the plate takes the room it has been given. */
@media (min-width:900px){
  .deck-stage{--slot:min(100%,760px)}
  .sheetwrap{max-width:720px;padding:28px 36px 0}
  .c-verdict{margin:22px -36px 0;padding:16px 36px 20px}
  .c-head{padding-right:150px}
  .stamp{top:34px;right:38px}
  .c-title{font-size:clamp(1.6rem,2.5vw,2.05rem)}
  .c-year{font-size:clamp(3rem,4vw,3.8rem)}
  .c-name{font-size:clamp(2rem,2.6vw,2.5rem)}
  .c-dek{font-size:1.06rem}
  .c-n{font-size:3.5rem}
  .card--intro .sheetwrap{max-width:680px}
  .c-idx{font-size:1.5rem}
  .c-idx b{font-size:10px}
  .c-idx i{font-size:10.5px}
  .c-tags span{font-size:10px}
  .c-spec{font-size:10.5px}
  .c-of{font-size:10.5px}
  .c-more{font-size:10px}
  .c-share{font-size:9.5px;padding:10px 15px}
  .rail-meta{font-size:10px}
  .i-how span{font-size:10.5px}
  .label{font-size:10.5px}
  .vbtn2{font-size:11px;padding:15px 20px}
}

/* ---------------- plates off the deck (gauntlet, boards, stats) ---------------- */
.paper{position:relative;background:linear-gradient(168deg,var(--plate),var(--plate-2));color:var(--graphite);border-radius:14px;box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 22px 48px -22px rgba(0,0,0,.8)}
.paper::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:.45;background:repeating-linear-gradient(180deg,rgba(255,255,255,.28) 0 1px,rgba(20,24,29,.035) 1px 3px);mix-blend-mode:overlay}
.paper h1,.paper h2,.paper h3,.paper h4,.paper b,.paper dd{color:var(--graphite)}
.paper .label,.paper dt{color:var(--graphite-3)}
.paper p{color:var(--graphite-2)}
.paper>*{position:relative;z-index:1}

.g-shell{max-width:700px;margin:0 auto}
.g-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:11px}
.g-head .label{margin:0;line-height:1.2}
.g-score{display:flex;align-items:baseline;gap:10px;margin:0}
.g-score b{font-family:var(--display);font-weight:800;font-size:1.45rem;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums lining-nums}
.pips{display:flex;gap:4px;margin-bottom:18px}
.pips i{width:16px;height:3px;background:var(--line-2);display:block;transition:background .3s}
.pips i.done{background:var(--d3)}
.pips i.miss{background:var(--ink-3)}
.pips i.now{background:var(--volt)}

.g-card{padding:28px 28px 30px}
.g-card .yr{font-family:var(--serif);font-style:italic;font-size:1.6rem;line-height:1;color:var(--graphite-3)}
.g-card h2{margin-top:12px;font-size:clamp(1.35rem,3.4vw,1.9rem);line-height:1.1;letter-spacing:-.028em;color:var(--graphite)}
.g-card .dek{font-family:var(--sans);font-size:1.02rem;line-height:1.62;color:var(--graphite-2);margin-top:14px;max-width:58ch}

.guess{margin-top:26px;padding-top:22px;border-top:1px solid var(--rule)}
.guess-val{font-family:var(--display);font-size:clamp(3rem,11vw,4.4rem);font-weight:800;line-height:.88;letter-spacing:-.04em;text-align:center;font-variant-numeric:tabular-nums lining-nums;transition:color .3s;font-variation-settings:"opsz" 96,"wdth" 80}
.guess-cap{text-align:center;margin-top:8px;color:var(--graphite-3)}
.slider{-webkit-appearance:none;appearance:none;width:100%;height:38px;background:transparent;margin-top:16px;cursor:grab}
.slider:active{cursor:grabbing}
.slider::-webkit-slider-runnable-track{height:5px;background:linear-gradient(90deg,var(--t1),var(--t2),var(--t3),var(--t4),var(--t5))}
.slider::-moz-range-track{height:5px;background:linear-gradient(90deg,var(--t1),var(--t2),var(--t3),var(--t4),var(--t5))}
.slider::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:28px;border-radius:5px;background:var(--plate);border:2px solid var(--graphite);box-shadow:0 2px 7px rgba(0,0,0,.3);margin-top:-12px;transition:transform .15s var(--ease)}
.slider::-moz-range-thumb{width:20px;height:28px;border-radius:5px;background:var(--plate);border:2px solid var(--graphite)}
.slider:active::-webkit-slider-thumb{transform:scale(1.12)}
.ticks{display:flex;justify-content:space-between;font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--graphite-3);margin-top:-2px}

.reveal{margin-top:24px;border-top:1px solid var(--rule);padding-top:22px}
.reveal-row{display:flex;align-items:flex-end;justify-content:center;gap:28px;flex-wrap:wrap}
.reveal-n{font-family:var(--display);font-size:2.3rem;font-weight:800;line-height:.9;letter-spacing:-.03em;font-variant-numeric:tabular-nums lining-nums;color:var(--graphite)}
.reveal-lbl{font-family:var(--mono);font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--graphite-3);display:block;text-align:center;margin-bottom:7px}
.verdict-big{text-align:center;font-family:var(--display);font-weight:700;font-size:clamp(1.45rem,4.6vw,2.05rem);letter-spacing:-.035em;margin-top:18px;color:var(--graphite)}
.why{font-family:var(--sans);color:var(--graphite-2);text-align:center;max-width:52ch;margin:12px auto 0;font-size:1rem}
.g-actions{display:flex;gap:10px;justify-content:center;margin-top:24px;flex-wrap:wrap}

.scorecard{text-align:center;padding:38px 26px 34px}
.scorecard .big{font-family:var(--display);font-size:clamp(3.4rem,13vw,5.4rem);font-weight:800;letter-spacing:-.045em;line-height:.86;font-variant-numeric:tabular-nums lining-nums;color:var(--graphite);font-variation-settings:"opsz" 96,"wdth" 80}
.grades{display:grid;grid-template-columns:repeat(2,1fr);margin:26px 0 0;border:1px solid var(--rule)}
@media (min-width:560px){ .grades{grid-template-columns:repeat(4,1fr)} }
.grade{text-align:center;padding:14px 10px;border:0 solid var(--rule)}
.grade + .grade{border-left-width:1px}
.grade dt{font-family:var(--mono);font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:var(--graphite-3)}
.grade dd{margin:6px 0 0;font-family:var(--display);font-weight:800;font-size:1.3rem;letter-spacing:-.02em;line-height:1.05;font-variant-numeric:tabular-nums lining-nums;color:var(--graphite)}

.mode-strip{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px;font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;color:var(--ink-3);border:1px solid var(--line);border-radius:6px;padding:7px 12px 7px 7px}
.mode-strip>span:not(.mode-tag),.mode-strip>a{line-height:1.6}
.mode-strip>a{margin-left:auto;padding-left:12px;border-left:1px solid var(--line-2)}
.mode-strip.daily{border-color:rgba(217,255,75,.5)}
.mode-strip b{color:var(--ink)}
.mode-strip .lnk{color:var(--ink-2);border-bottom-color:var(--line-2)}
.mode-tag{font-size:8.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;background:var(--ink);color:var(--void);padding:5px 9px;border-radius:4px}
.mode-strip.daily .mode-tag{background:var(--volt);color:var(--void)}
.pct{margin-top:20px;padding:18px;border:1px solid var(--rule);border-radius:10px}
.pct-n{font-family:var(--display);font-size:clamp(2rem,7vw,2.8rem);font-weight:800;letter-spacing:-.03em;line-height:.92;color:var(--t3);font-variant-numeric:tabular-nums lining-nums}
.pct-l{font-family:var(--sans);color:var(--graphite-2);margin-top:8px;font-size:1rem}

/* request queue */
.req-box{margin-top:26px;padding:24px}
.req-box h3{margin-top:8px;font-size:1.28rem;color:var(--graphite)}
.req-box p:not(.label){color:var(--graphite-2);margin:10px 0 0;max-width:56ch}
.req-cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:18px}
.req-cta .btn-primary{background:var(--graphite);color:var(--volt)}
.req-meta{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--graphite-3)}
.req-meta b{color:var(--graphite)}
.board{margin-top:42px;border-top:1px solid var(--line);padding-top:28px}
.board-head h2{margin-top:6px}
.req-list{list-style:none;margin:20px 0 0;padding:0;border-top:1px solid var(--line)}
.req-row{display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--line)}
.req-pos{font-family:var(--display);font-size:1.12rem;font-weight:800;color:var(--ink-3);font-variant-numeric:tabular-nums lining-nums}
.req-row.next .req-pos{color:var(--volt)}
.req-date{font-family:var(--display);font-weight:600;font-size:1.08rem;letter-spacing:-.015em;display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:var(--ink-2)}
.req-row.next .req-date{color:var(--ink)}
.req-date i{font-family:var(--mono);font-style:normal;font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:var(--volt);border:1px solid currentColor;border-radius:3px;padding:3px 6px}
.upbtn{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10.5px;padding:8px 13px;border:1px solid var(--line-2);border-radius:6px;color:var(--ink-2);transition:background .2s,border-color .2s,color .2s,transform .12s var(--ease)}
.upbtn b{color:var(--ink);font-variant-numeric:tabular-nums}
.upbtn:hover{border-color:var(--ink);color:var(--ink)}
.upbtn:active{transform:scale(.94)}
.upbtn.did{background:var(--volt);border-color:var(--volt);color:var(--void)}
.upbtn.did b{color:var(--void)}
.req-done{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);margin:8px 0 0;line-height:2}
.req-done a{border-bottom:1px solid var(--line-2)}

/* ---------------- travel ---------------- */
.picker{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-top:22px}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.field select,.field input{font-family:var(--mono);font-size:13px;background:var(--surface-2);color:var(--ink);border:1px solid var(--line-2);border-radius:6px;padding:12px 14px;min-width:120px}
.cal-key{display:flex;gap:18px;flex-wrap:wrap;margin-top:20px}
.cal-key span{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.cal-key i{width:14px;height:14px;border-radius:3px;display:block}
.cal-key i.k-has{background:var(--volt)}
.cal-key i.k-today{border:2px solid var(--ink)}
.cal-key i.k-open{border:1px solid var(--line-2)}
.cal{display:grid;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:5px;margin-top:14px}
.cal a{display:flex;align-items:center;justify-content:center;height:44px;border-radius:6px;font-family:var(--mono);font-size:12px;border:1px solid var(--line);color:var(--ink-2);transition:border-color .2s,color .2s,background .2s}
.cal a.has{border-color:var(--volt);background:var(--volt);color:var(--void);font-weight:600}
.cal a:hover{border-color:var(--ink);color:var(--ink)}
.cal a.has:hover{background:#E6FF7A;color:var(--void)}
.cal a.today{outline:2px solid var(--ink);outline-offset:2px;color:var(--ink)}
.empty{padding:34px 26px;text-align:center;margin-top:26px}
.empty h3{margin-bottom:8px}
.empty p{max-width:48ch;margin:0 auto}
.weeks{display:grid;gap:10px;margin-top:22px}
.week-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 18px;border:1px solid var(--line);border-radius:10px;transition:border-color .2s}
.week-row:hover{border-color:var(--ink)}
.week-row b{font-family:var(--display);font-weight:700;letter-spacing:-.015em}
.week-row span{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}

/* ---------------- you ---------------- */
.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);margin:24px 0 0;border:1px solid var(--rule);border-width:1px 0 0 1px;overflow:hidden}
@media (min-width:620px){ .stat-grid{grid-template-columns:repeat(3,1fr)} }
@media (min-width:960px){ .stat-grid{grid-template-columns:repeat(4,1fr)} }
.stat-grid>div{padding:18px 18px 20px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.stat-grid dt{font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--graphite-3);margin:0}
.stat-grid dd{margin:9px 0 0;font-family:var(--display);font-size:1.65rem;font-weight:800;letter-spacing:-.03em;line-height:1.05;font-variant-numeric:tabular-nums lining-nums;color:var(--graphite);font-variation-settings:"wdth" 85}
.stat-grid dd span{font-size:.62em;font-weight:400;letter-spacing:0}
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:9px;margin-top:22px}
.badge{border:1px solid var(--line);border-radius:10px;padding:16px;opacity:.4;transition:opacity .3s,border-color .3s,background .3s}
.badge.got{opacity:1;border-color:var(--line-2);background:rgba(230,234,240,.04)}
.badge .ico{font-size:1.4rem;line-height:1}
.badge h4{margin:10px 0 0;font-family:var(--display);font-weight:700;font-size:.98rem;color:var(--ink);letter-spacing:-.01em}
.badge p{margin:5px 0 0;font-size:.82rem;color:var(--ink-3);line-height:1.45}

/* ---------------- ads ---------------- */
.ad-slot{min-height:90px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.ad-rail{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-height:200px;border-top:1px solid var(--line);margin-top:30px;padding:20px 0}
.ad-rail::before{content:"Advertisement";font-family:var(--mono);font-size:8.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3)}
.ad-rail .ad-slot{width:100%;max-width:640px}
.ad-ph{width:100%;height:90px;border:1px dashed var(--line);border-radius:6px;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}

/* ---------------- chrome ---------------- */
.foot{border-top:1px solid var(--line);padding:30px 0 46px;margin-top:20px}
.foot-in{max-width:940px;margin:0 auto;padding-inline:20px;display:flex;flex-direction:column;gap:10px}
.foot-note{margin:0;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.foot-links a{border-bottom:1px solid var(--line-2);transition:color .2s}
.foot-links a:hover{color:var(--ink)}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,14px);z-index:120;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;background:var(--ink);color:var(--void);padding:11px 18px;border-radius:8px;font-weight:600;opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s var(--ease)}
.toast.on{opacity:1;transform:translate(-50%,0)}
.fx{position:fixed;inset:0;z-index:110;pointer-events:none;width:100%;height:100%}
.rv{opacity:1}
.spinner{margin:60px auto;width:26px;height:26px;border:2px solid var(--line-2);border-top-color:var(--volt);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

@media (max-width:760px){
  .topbar{gap:8px;padding-inline:12px}
  .brand-txt{display:none}
  .tabs{margin-inline:0;gap:0;flex:1;justify-content:space-between}
  .tab{padding:8px 8px;font-size:9.5px}
  .streak{padding:6px 9px;font-size:11px}
  .g-card{padding:20px;border-radius:12px}
  .view{padding-block:24px 60px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}