/* Sablo — mineral daylight that sinks into a night of sleep.
   Lexend Exa (thin, wide): a measuring instrument's lettering, all air between strokes.
   Albert Sans for reading and for every label; Azeret Mono only where a number came off the sensor.
   Two signal colours, both physical: the 525 nm green LED and the 660 nm red one (crimson, never orange). */
:root {
  --paper: #e4e8e8; --paper-2: #d6dcdc; --ink: #111920; --ink-2: #44505a; --soft: #77838c; --line: rgba(17, 25, 32, 0.14);
  --sensor: #0fae76; --ir: #e8264f;
  --navy: #09101a; --navy-2: #111b28; --n-ink: #dbe5e8; --n-ink-2: #8c9ba5; --n-line: rgba(219, 229, 232, 0.14);
  --deep: #8fd6e8; --light: #36606f; --rem: #f0406a; --awake: #e6eef0;
  --display: 'Lexend Exa', system-ui, sans-serif;
  --sans: 'Albert Sans', system-ui, sans-serif;
  --mono: 'Azeret Mono', ui-monospace, monospace;
  --g: 48px;
  --bg: var(--paper);
}
* { box-sizing: border-box; }
html { background: var(--bg); color: var(--ink); font: 400 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
body { margin: 0; background: var(--bg); transition: background-color 0.2s linear; overflow-x: clip; }
html[data-dark] body { color: var(--n-ink); }
a { color: inherit; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }

canvas#ring { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; z-index: 0; pointer-events: none; }
.labels { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
.labels .lb { position: absolute; left: 0; top: 0; font: 500 12px/1.3 var(--sans); color: var(--ink-2); white-space: nowrap; opacity: 0; transition: opacity 0.3s; display: flex; align-items: center; gap: 10px; }
.labels .lb::before { content: ''; width: 28px; height: 1px; background: currentColor; opacity: 0.6; }
.labels .lb.left { flex-direction: row-reverse; }
.labels .lb b { font-weight: 400; color: var(--ink); }

.veil { position: fixed; inset: 0; z-index: 60; background: var(--paper); display: grid; place-items: center; transition: opacity 0.8s ease, visibility 0.8s; }
.veil-in { display: grid; gap: 18px; width: min(300px, 70vw); }
.veil-mark { width: 150px; height: 52px; color: var(--ink); }
.veil-bar { height: 1px; background: var(--line); position: relative; overflow: hidden; }
.veil-bar i { position: absolute; inset: 0; background: var(--ink); transform-origin: 0 50%; transform: scaleX(var(--p, 0.05)); transition: transform 0.3s; }
html[data-ready="1"] .veil { opacity: 0; visibility: hidden; }

.bar { background: transparent; transition: background-color 0.3s, box-shadow 0.3s; position: fixed; top: 0; left: 0; right: 0; z-index: 20; height: 72px; padding: 0 var(--g); display: flex; align-items: center; justify-content: space-between; transition: color 0.3s; }
.bar .mark { display: flex; align-items: center; gap: 9px; text-decoration: none; color: inherit; }
.mark-ring { width: 22px; height: 22px; }
.mark-word { width: 66px; height: 23px; }
.bar nav { display: flex; gap: 36px; font-size: 14px; }
.bar nav a, .bar-cta { text-decoration: none; }
.bar nav a { color: var(--ink-2); }
html[data-dark] .bar nav a { color: var(--n-ink-2); }
.bar nav a:hover { color: inherit; }
.bar-cta { font-size: 14px; font-weight: 500; padding-bottom: 2px; border-bottom: 1px solid currentColor; }

main { position: relative; z-index: 2; }
.sec-no { margin: 0; font: 500 13px/1 var(--sans); color: var(--soft); letter-spacing: 0.01em; }
html[data-dark] .sec-no { color: var(--n-ink-2); }
h1, h2, h3 { font-weight: 300; margin: 0; }
h1 { font: 200 clamp(44px, 5.6vw, 92px)/1.02 var(--display); letter-spacing: -0.02em; }
h2 { font: 200 clamp(30px, 3.4vw, 54px)/1.08 var(--display); letter-spacing: -0.02em; margin-top: 18px; }
.body { color: var(--ink-2); max-width: 46ch; margin: 0; }
.text-link { display: inline-flex; gap: 10px; font-weight: 500; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 3px; }

/* 1 · hero */
.hero { min-height: 100vh; position: relative; padding: 0 var(--g); }
.hero-copy { position: absolute; left: var(--g); bottom: 11vh; width: min(560px, 44vw); }
.hero-kicker { margin: 0 0 22px; font: 500 13px/1 var(--sans); color: var(--ink-2); }
.hero-lede { margin: 26px 0 30px; color: var(--ink-2); max-width: 44ch; font-size: 17px; }
.live { position: absolute; top: 104px; right: var(--g); display: flex; align-items: baseline; gap: 8px; font: 500 13px/1 var(--sans); color: var(--ink-2); }
.live b { font: 400 22px/1 var(--mono); color: var(--ink); margin-left: 14px; font-variant-numeric: tabular-nums; }
.live small { font-size: 11px; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sensor); align-self: center; animation: beat 1.03s infinite; }
@keyframes beat { 0%, 100% { transform: scale(1); opacity: 1; } 18% { transform: scale(1.7); opacity: 0.55; } 40% { transform: scale(1); opacity: 1; } }
.hero-spec { position: absolute; right: var(--g); bottom: 11vh; margin: 0; display: grid; gap: 14px; text-align: right; }
.hero-spec dt { font: 500 12px/1 var(--sans); color: var(--soft); }
.hero-spec dd { margin: 4px 0 0; font: 300 18px/1 var(--display); }

/* pinned scenes */
.inside { height: 330vh; position: relative; }
.night { height: 330vh; position: relative; }
.pin { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.inside-copy { position: absolute; left: var(--g); top: 50%; transform: translateY(-50%); width: 380px; }
.parts { list-style: none; margin: 34px 0 0; padding: 0; border-top: 1px solid var(--line); }
.parts li { padding: 12px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 96px 1fr; gap: 12px; font-size: 14px; color: var(--soft); transition: color 0.3s; }
.parts li b { font: 500 13px/1.6 var(--sans); color: var(--soft); transition: color 0.3s; }
.parts li.on { color: var(--ink); }
.parts li.on b { color: var(--sensor); }
.explode-meter { position: absolute; right: var(--g); bottom: 48px; width: 220px; font: 500 13px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink-2); }
.explode-meter i { display: block; height: 1px; background: var(--line); margin-bottom: 12px; position: relative; }
.explode-meter i::after { content: ''; position: absolute; inset: 0; background: var(--ink); transform-origin: 0 50%; transform: scaleX(var(--e, 0)); }
.explode-meter b { font-weight: 400; color: var(--ink); font-variant-numeric: tabular-nums; }

.night-clock { position: absolute; left: var(--cx, 50%); top: var(--cy, 50%); transform: translate(-50%, -50%); text-align: center; display: grid; gap: 8px; opacity: var(--clock, 0); }
.nc-label, .nc-sub { font: 500 13px/1 var(--sans); color: var(--n-ink-2); }
.nc-sub b { font-weight: 400; color: var(--n-ink); }
.nc-time { font: 200 clamp(30px, 3.4vw, 54px)/1 var(--display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--n-ink); }
.night-copy { position: absolute; left: var(--g); bottom: 9vh; width: 420px; }
.night-copy h2 { font-size: clamp(26px, 2.6vw, 40px); }
.lines span { display: block; overflow: hidden; }
.lines span { clip-path: inset(0 0 100% 0); transform: translateY(0.4em); transition: clip-path 0.9s cubic-bezier(0.2, 0.7, 0.1, 1), transform 0.9s cubic-bezier(0.2, 0.7, 0.1, 1); }
.lines.in span { clip-path: inset(0 0 -10% 0); transform: none; }
.lines.in span:nth-child(2) { transition-delay: 0.08s; } .lines.in span:nth-child(3) { transition-delay: 0.16s; }
.lines.small { margin: 18px 0 0; color: var(--n-ink-2); font-size: 15px; }
.legend { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; font-size: 13px; color: var(--n-ink-2); }
.legend li { display: flex; align-items: center; gap: 10px; }
.legend i { width: 18px; height: 3px; background: var(--c); }
.legend b { margin-left: auto; font: 400 13px/1 var(--mono); color: var(--n-ink); }

/* every section from here on is a pinned stage over the ring */
.chart, .reads, .fit, .own, .order { position: relative; }
.chart { height: 300vh; }
.reads { height: 620vh; }
.fit { height: 260vh; }
.own { height: 280vh; }
.order { height: 230vh; }
.dark { color: var(--n-ink); }
.dark .body { color: var(--n-ink-2); }
.panel-l { position: absolute; left: var(--g); top: 50%; transform: translateY(-50%); width: 410px; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; margin: 10px 0 0; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 1px; background: var(--ink); }
input[type="range"]::-moz-range-track { height: 1px; background: var(--ink); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -10px; border-radius: 50%; background: var(--paper); border: 1px solid var(--ink); }
input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--paper); border: 1px solid var(--ink); }
input[type="range"]:focus-visible::-webkit-slider-thumb { background: var(--ink); }

/* 4 · the dial you scrub */
.chart-copy { position: absolute; left: var(--g); top: 112px; width: 400px; }
.chart-copy .body { margin-top: 18px; font-size: 15px; }
.readout { margin-top: 28px; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--n-line); }
.readout div { padding: 14px 16px 12px 0; display: grid; gap: 6px; border-bottom: 1px solid var(--n-line); }
.readout span { font-size: 12px; color: var(--n-ink-2); }
.readout b { font: 400 22px/1 var(--mono); font-variant-numeric: tabular-nums; }
.readout small { font-size: 12px; color: var(--n-ink-2); }
.dial-center { position: absolute; left: var(--cx, 60%); top: var(--cy, 50%); transform: translate(-50%, -50%); display: grid; gap: 6px; text-align: center; pointer-events: none; }
.dial-center span { font: 200 clamp(26px, 2.8vw, 44px)/1 var(--display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.dial-center small { font: 500 12px/1 var(--sans); color: var(--n-ink-2); }
.scrub-wrap { position: absolute; left: var(--g); right: var(--g); bottom: 26px; }
.scrub { position: relative; height: 118px; cursor: ew-resize; touch-action: pan-y; outline: none; }
.scrub canvas { width: 100%; height: 100%; display: block; }
.scrub-head { position: absolute; top: -8px; bottom: 16px; left: 0; width: 1px; background: var(--n-ink); transform: translateX(var(--x, 0px)); pointer-events: none; }
.scrub-head i { position: absolute; top: -6px; left: -6px; width: 13px; height: 13px; border: 1px solid var(--n-ink); background: var(--navy); transform: rotate(45deg); }
.scrub:hover .scrub-head i, .scrub:focus-visible .scrub-head i { background: var(--n-ink); }
.score-line { margin: 6px 0 0; font: 400 13px/1.6 var(--sans); font-variant-numeric: tabular-nums; color: var(--n-ink-2); }
.score-line b { font-weight: 400; color: var(--sensor); }

/* 5 · five signals */
.reads-copy { position: absolute; left: var(--g); top: 50%; transform: translateY(-50%); width: 400px; }
.sig-index { list-style: none; margin: 28px 0 0; padding: 0; display: flex; gap: 18px; font: 500 13px/1 var(--sans); color: var(--n-ink-2); border-bottom: 1px solid var(--n-line); }
.sig-index li { padding: 0 0 10px; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 0.3s, border-color 0.3s; }
.sig-index li.on { color: var(--n-ink); border-bottom-color: var(--sensor); }
.sig-panels { position: relative; margin-top: 28px; min-height: 260px; }
.sig { position: absolute; inset: 0 0 auto 0; opacity: 0; transform: translateY(10px); transition: opacity 0.45s, transform 0.45s; }
.sig.on { opacity: 1; transform: none; }
.sig h3 { font: 300 24px/1.2 var(--display); letter-spacing: -0.01em; }
.sig p { margin: 12px 0 0; color: var(--n-ink-2); font-size: 15px; }
.sig .big { display: block; margin-top: 24px; font: 400 48px/1 var(--mono); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.sig .big small { font-size: 15px; color: var(--n-ink-2); letter-spacing: 0; }
.sig-meter { position: absolute; left: var(--g); bottom: 40px; width: 400px; height: 1px; background: var(--n-line); }
.sig-meter i { position: absolute; inset: 0; background: var(--n-ink); transform-origin: 0 50%; transform: scaleX(var(--sig, 0)); }

/* 6 · sizing on the finger */
.fit-tool { position: absolute; left: var(--g); top: 50%; transform: translateY(-46%); width: 420px; }
.fit-tool .body { margin: 18px 0 26px; font-size: 15px; }
.fit-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--ink-2); }
.circ-in { display: inline-flex; align-items: baseline; gap: 6px; border-bottom: 1px solid var(--ink); }
.circ-in input { width: 86px; border: 0; background: transparent; font: 400 28px/1 var(--mono); color: var(--ink); text-align: right; padding: 0; -moz-appearance: textfield; }
.circ-in input::-webkit-inner-spin-button, .circ-in input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.circ-in input:focus { outline: none; }
.circ-in:focus-within { border-bottom-color: var(--ir); }
.circ-in span { font: 400 13px/1 var(--mono); color: var(--ink-2); }
.fingers, .finishes { display: flex; margin-top: 18px; border-bottom: 1px solid var(--line); }
.fingers button, .finishes button { white-space: nowrap; background: none; border: 0; padding: 12px 0; margin-right: 20px; cursor: pointer; font-size: 14px; color: var(--soft); border-bottom: 2px solid transparent; margin-bottom: -1px; display: flex; gap: 10px; align-items: center; }
.fingers button[aria-checked="true"], .finishes button[aria-checked="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.fit-result { margin-top: 26px; }
.fit-result span { font-size: 13px; color: var(--ink-2); }
.fit-result b { display: block; font: 200 52px/1.05 var(--display); letter-spacing: -0.02em; }
.fit-result p { margin: 6px 0 0; font-size: 14px; color: var(--ink-2); }
.fit-tag { position: absolute; right: var(--g); bottom: 40px; margin: 0; font: 500 13px/1 var(--sans); color: var(--ink-2); }
.fit-tag b { font-weight: 400; color: var(--ir); }

/* 7 · pricing round the ring */
.own-copy { position: absolute; left: var(--g); top: 50%; transform: translateY(-48%); width: 430px; }
.plans { display: grid; margin-top: 26px; border-top: 1px solid var(--ink); }
.plan { text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); padding: 14px 0 14px 26px; cursor: pointer; display: grid; gap: 4px; position: relative; color: var(--ink-2); }
.plan::before { content: ''; position: absolute; left: 0; top: 19px; width: 12px; height: 12px; border: 1px solid var(--ink); border-radius: 50%; }
.plan[aria-checked="true"] { color: var(--ink); }
.plan[aria-checked="true"]::before { background: var(--ink); box-shadow: inset 0 0 0 3px var(--bg); }
.plan-name { font: 300 17px/1.2 var(--display); }
.plan-price { font: 500 19px/1.2 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink); }
.plan-price small { font-size: 12px; color: var(--soft); margin-left: 6px; }
.cost-top { margin-top: 22px; display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-2); align-items: baseline; }
.cost-top output { font: 500 22px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink); }
.cost-chart { width: 100%; height: 84px; margin-top: 8px; overflow: visible; }
.cost-chart path { fill: none; vector-effect: non-scaling-stroke; }
.cc-grid { stroke: var(--line); }
.cc-member { stroke: var(--sensor); stroke-width: 2; }
.cc-once { stroke: var(--ink); stroke-width: 2; }
.cc-now { stroke: var(--ir); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.cost-sum { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.cost-sum span { font-size: 13px; color: var(--ink-2); display: flex; align-items: center; gap: 8px; }
.cost-sum div span::before { content: ''; width: 16px; height: 2px; background: var(--sensor); }
.cost-sum div:nth-child(2) span::before { background: var(--ink); }
.cost-sum b { display: block; font: 500 26px/1.3 var(--sans); font-variant-numeric: tabular-nums; }
.cost-sum p { grid-column: 1 / -1; margin: 8px 0 0; font-size: 14px; color: var(--ink-2); }
.own-center { position: absolute; left: var(--cx, 65%); top: var(--cy, 50%); transform: translate(-50%, -50%); text-align: center; display: grid; gap: 4px; pointer-events: none; }
.own-center small { font: 500 12px/1 var(--sans); color: var(--ink-2); }
.own-center b { font: 200 44px/1 var(--display); font-variant-numeric: tabular-nums; }
.age { position: absolute; right: var(--g); bottom: 36px; margin: 0; display: grid; grid-template-columns: repeat(4, auto); gap: 0 34px; }
.age dt { font: 500 12px/1 var(--sans); color: var(--soft); }
.age dd { margin: 8px 0 0; font: 400 15px/1 var(--mono); }

/* 8 · order on the turntable */
.order-form { position: absolute; left: var(--g); top: 50%; transform: translateY(-48%); width: 420px; }
.finishes button i { width: 14px; height: 14px; border-radius: 50%; background: var(--f); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18); }
.finishes small { color: var(--soft); font-size: 12px; }
.finish-note { margin: 16px 0 0; font-size: 14px; color: var(--ink-2); min-height: 4.6em; }
.summary { margin: 14px 0 0; display: grid; }
.summary div { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.summary dt { color: var(--ink-2); }
.summary dd { margin: 0; text-align: right; }
.summary .total dd { font: 500 24px/1 var(--sans); font-variant-numeric: tabular-nums; }
.buy { margin-top: 24px; width: 100%; padding: 18px 22px; background: var(--ink); color: var(--paper); border: 0; font-weight: 500; font-size: 15px; cursor: pointer; text-align: left; display: flex; justify-content: space-between; }
.buy::after { content: '→'; }
.buy:hover { background: #000; }
.buy[data-done] { background: var(--sensor); color: var(--ink); }
.fine { font-size: 13px; color: var(--ink-2); margin: 12px 0 0; }
.turn { position: absolute; right: var(--g); bottom: 40px; margin: 0; font: 500 13px/1 var(--sans); color: var(--ink-2); }
.turn b { font-weight: 400; color: var(--ink); font-variant-numeric: tabular-nums; }
.foot { position: relative; z-index: 3; background: var(--ink); color: #9aa6ae; padding: 56px var(--g) 32px; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 20px; font-size: 12px; }
.foot-mark { grid-column: 1 / -1; width: min(560px, 80vw); height: auto; aspect-ratio: 72 / 25; color: var(--paper); margin-bottom: 26px; }

/* modes */
html[data-mode="poster"] .bar, html[data-mode="poster"] main, html[data-mode="poster"] .foot, html[data-mode="poster"] .veil, html[data-mode="poster"] .labels { display: none; }
html[data-mode="demo"] .bar nav, html[data-mode="demo"] .bar-cta { display: none; }
html[data-mode="demo"] { overflow: hidden; }

@media (max-width: 899px) {
  :root { --g: 20px; }
  .bar { height: 58px; }
  .bar nav { display: none; }
  h1 { font-size: 40px; }
  h2 { font-size: 26px; margin-top: 10px; }
  .hero-copy { width: auto; right: var(--g); bottom: 7vh; }
  .hero-lede { font-size: 15px; margin: 18px 0 22px; }
  .hero-spec { display: none; }
  .live { top: 74px; left: var(--g); right: auto; }
  .live b { font-size: 18px; margin-left: 8px; }
  .inside-copy { top: auto; bottom: 22px; transform: none; width: auto; right: var(--g); }
  .inside-copy h2 { font-size: 24px; }
  .parts { margin-top: 14px; }
  .parts li { display: none; grid-template-columns: 80px 1fr; font-size: 13px; padding: 8px 0; }
  .parts li.on { display: grid; }
  .explode-meter { top: 74px; bottom: auto; left: var(--g); right: auto; width: 150px; }
  .labels { display: none; }
  .nc-time { font-size: 30px; }
  .nc-sub, .nc-label { font-size: 10px; }
  .night-copy { width: auto; right: var(--g); bottom: 4vh; }
  .night-copy h2 { font-size: 22px; }
  .lines.small { font-size: 13px; margin-top: 10px; }
  .legend { margin-top: 14px; gap: 6px 16px; font-size: 12px; }
  /* stages on a phone: the ring holds the top, the instrument sits under it */
  .chart-copy, .reads-copy, .fit-tool, .own-copy, .order-form { top: auto; bottom: 0; transform: none; left: 0; right: 0; width: auto; padding: 40px var(--g) 18px; background: linear-gradient(to bottom, transparent, var(--bg) 34px); }
  .chart-copy { bottom: 150px; padding-bottom: 6px; }
  .chart-copy h2, .chart-copy .body, .chart-copy .sec-no { display: none; }
  .readout { margin-top: 0; grid-template-columns: repeat(3, 1fr); }
  .readout div { padding: 10px 8px 8px 0; }
  .readout b { font-size: 16px; }
  .readout span { font-size: 11px; }
  .scrub-wrap { bottom: 12px; left: var(--g); right: var(--g); }
  .scrub { height: 92px; }
  .score-line { font-size: 10px; }
  .dial-center span { font-size: 24px; }
  .sig-index { gap: 10px; font-size: 10px; margin-top: 14px; }
  .sig-panels { min-height: 210px; margin-top: 16px; }
  .sig h3 { font-size: 19px; }
  .sig p { font-size: 13.5px; }
  .sig .big { font-size: 34px; margin-top: 14px; }
  .sig-meter { display: none; }
  .fit-tool .body { display: none; }
  .fit-tool h2 { margin-bottom: 14px; }
  .fit-result { margin-top: 14px; display: grid; grid-template-columns: auto 1fr; gap: 0 16px; align-items: baseline; }
  .fit-result span { grid-column: 1 / -1; }
  .fit-result b { font-size: 36px; }
  .fit-result p { font-size: 12.5px; }
  .fit-tag { top: 74px; bottom: auto; left: var(--g); right: auto; font-size: 10px; }
  .own-copy h2 { display: none; }
  .plans { margin-top: 6px; grid-template-columns: 1fr 1fr; gap: 0 12px; }
  .plan-name { font-size: 14px; }
  .plan-price { font-size: 15px; }
  .plan-price small { display: block; margin: 2px 0 0; }
  .cost-top { margin-top: 12px; }
  .cost-chart { height: 50px; }
  .cost-sum b { font-size: 20px; }
  .cost-sum p { font-size: 12.5px; }
  .own-center b { font-size: 30px; }
  .age { top: 74px; bottom: auto; left: var(--g); right: var(--g); grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 0 12px; }
  .age div:last-child { display: none; }
  .age dd { font-size: 13px; }
  .finishes button { margin-right: 12px; font-size: 13px; white-space: nowrap; }
  .finishes button small { display: none; }
  .finish-note { min-height: 0; font-size: 12.5px; margin-top: 10px; }
  .summary div { padding: 7px 0; font-size: 13px; }
  .summary .total dd { font-size: 20px; }
  .buy { margin-top: 14px; padding: 15px 18px; }
  .fine { display: none; }
  .turn { top: 74px; bottom: auto; left: var(--g); right: auto; }
  .foot { grid-template-columns: 1fr; }
}
@media (max-width: 899px) and (max-height: 620px) {
  .hero-lede, .parts, .legend, .lines.small { display: none; }
}
@media (min-width: 900px) and (max-height: 760px) {
  .inside-copy { top: 54%; }
  .inside-copy h2 { font-size: 30px; }
  .parts { margin-top: 18px; }
  .parts li { padding: 7px 0; }
  .parts li span { display: none; }
  .night-copy { bottom: 6vh; }
  .lines.small { display: none; }
  .chart-copy .body { display: none; }
  .readout div { padding: 10px 16px 8px 0; }
  .scrub { height: 96px; }
  .fit-tool .body, .finish-note, .fine { display: none; }
  .own-copy h2 { font-size: 30px; }
  .cost-chart { height: 56px; }
}
@media (max-width: 1199px) { .labels .lb.left { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .live-dot { animation: none; }
  .lines span, .sig { transition: none; }
}
html[data-scrolled] .bar { background: var(--bg); box-shadow: inset 0 -1px 0 var(--line); }
html[data-scrolled][data-dark] .bar { box-shadow: inset 0 -1px 0 var(--n-line); }
html[data-mode="demo"] .bar { background: transparent !important; box-shadow: none !important; }