/* ============================================================================
   WhiteLights — instrument panel identity.
   Dark is the primary mode; light is derived. Amber on graphite, everything
   numeric in mono, 2px radius, hairlines instead of shadows.
   ========================================================================== */

/* AAA+++ STUDIO PREMIUM (2026-08-04)
   The §3 mechanics of _plans/AAA-PLUS-STUDIO-PREMIUM.md, re-expressed here in
   the instrument-panel register rather than imported. This site is CODE_ONLY in
   apply-global.mjs on purpose: it runs the shared markup and the shared link
   rulebook, and wears its own skin. datasite.css is NEVER loaded — every shared
   class the shared markup emits has to be given a home in THIS file, or it
   renders naked (the .pf-cinema lesson at the bottom of this sheet, and the
   .rel-card lesson in the ring block below it).

   DARK MODE (§3.8): the ring moved to warm basalt because a cool-grey inversion
   killed its paper. WhiteLights has no paper to kill. It is a lit instrument in
   a dark room — graphite housing, amber signal, bone-white judge lights — and
   dark is its PRIMARY, designed state, not an inversion of anything. Warming it
   to basalt would tint the housing brown and turn the white lights cream, which
   is the one thing the brand is named after. So: graphite is kept deliberately,
   and the parts of §3.8 that are not negotiable are honoured instead — dark is
   a designed artifact with its own token block, every accent clears 4.5:1 on
   its dark ground (measured below), and dark carries ZERO decorative shadow;
   elevation there is a surface step and a hairline. */

:root{
  --bg:#0C0E12; --surface:#14171D; --surface-2:#1C2027; --line:#2A2F38;
  --ink:#E8EAED; --ink-dim:#9BA1AB; --white-light:#F5F2E8;
  --signal:#FFB224; --signal-ink:#0C0E12; --pass:#3DD68C; --fail:#F2555A;
  /* §3.8's non-negotiable half, measured rather than asserted.
       on --bg #0C0E12   ink 16.03  ink-dim 7.43  white-light 17.25
                         signal 10.71  pass 10.30  fail 5.72
       on --surface      ink 14.89  ink-dim 6.91  white-light 16.02
                         signal  9.95  pass  9.57  fail 5.32
       on --surface-2    ink 13.56  ink-dim 6.29  white-light 14.59
                         signal  9.06  pass  8.71  fail 4.84
     Every pair clears 4.5:1. Keeping graphite instead of adopting the ring's
     basalt is a design decision; passing these ratios is not. */
  /* Amber carries two jobs and they have different floors: as a MARK (borders,
     ticks, the keel, plate edges) it needs 3:1, as TEXT it needs 4.5:1. In dark
     one value does both. In light it cannot — #C77800 is 3.20:1 on the light
     paper, fine for a rule and a full point short for a word — so the text job
     gets its own token and the brand mark keeps the brand colour. */
  --signal-text:var(--signal);
  --shadow:none;
  /* §3.2 — the ONE elevating shadow, and only in light. In dark it is `none`
     and the object elevates by stepping --bg -> --surface -> --surface-2. */
  --lift:none;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:"Space Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --wrap:1040px;
  /* §3.7 motion vocabulary. One curve for the whole site: instruments settle,
     they do not bounce. */
  --t-fast:140ms; --t-med:220ms; --t-slow:420ms;
  --ease-out:cubic-bezier(.25,1,.4,1);
  color-scheme:dark;
}
:root[data-theme=light]{
  --bg:#F7F7F5; --surface:#FFFFFF; --surface-2:#EFEFEC; --line:#D8D8D3;
  --ink:#16181D; --ink-dim:#5C616B; --white-light:#16181D;
  /* --signal-ink was #FFFFFF, and white on this amber is 3.43:1 - below AA for
     the small text that sits on it (the active kg/lb half, a pressed .seg
     button, the house-ad CTA). Dark ink on the SAME amber is 5.17:1 and leaves
     the brand colour untouched; dark mode already does exactly this at 10.71:1,
     so the two themes are now consistent rather than only one being legible. */
  --signal:#C77800; --signal-ink:#16181D; --pass:#0E8A55; --fail:#C7383D;
  /* The text-weight amber. 5.00:1 on --bg, 5.36:1 on --surface, 4.65:1 on
     --surface-2 — every ground this site ever sets a word on. Same hue family,
     so an eyebrow and the keel tick beside it still read as one colour. */
  --signal-text:#9E5A00;
  /* §3.2: light mode gets the one lift shadow, spent on the single object that
     asks the reader to act — the platform card. Everything else stays flat or
     steps a surface. The old four-corner --shadow on every .card is retired to
     none, so elevation means something again. */
  --shadow:none;
  --lift:0 1px 0 rgba(20,24,29,.05), 0 18px 38px -26px rgba(20,24,29,.30);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:1rem;line-height:1.55;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{max-width:100%}
a{color:var(--ink);text-underline-offset:.18em;text-decoration-color:color-mix(in srgb,var(--signal) 55%,transparent)}
a:hover{color:var(--signal-text)}
h1,h2,h3,h4{font-family:var(--sans);font-weight:700;letter-spacing:-.02em;line-height:1.1;margin:0 0 .5em}
h1{font-size:2.25rem}h2{font-size:1.625rem}h3{font-size:1.25rem}
p{margin:0 0 1rem}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.mono,td.n,th.n{font-family:var(--mono);font-variant-numeric:tabular-nums}
.eyebrow{display:inline-block;font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--signal-text);margin-bottom:12px}
.lede{color:var(--ink-dim);font-size:1.125rem;max-width:62ch}
.prose{max-width:640px}
.prose p,.prose li{color:var(--ink-dim)}
.prose strong{color:var(--ink);font-weight:500}
.small{font-size:.875rem}
.dim{color:var(--ink-dim)}
.sig{color:var(--signal-text)}

/* ------------------------------------------------------- §3.1 the spec voice
   The third register. The site already sets numbers in mono; what it had no
   vocabulary for was PROVENANCE — the dates, federations, snapshot codes and
   units that say a figure was measured rather than asserted. `.spec` is that
   register, and it is the only place tracking goes positive: instrument
   labelling is legible at a glance because it is spaced, not because it is big.
   No font file is added — IBM Plex Mono is already in the one stylesheet this
   site loads, and the stack falls back to the system mono. */
.spec{font-family:var(--mono);font-size:.8125rem;line-height:1.5;letter-spacing:.06em;
  color:var(--ink-dim);font-variant-numeric:tabular-nums}
.spec-k{font-family:var(--mono);font-size:.6875rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-dim)}
.spec a{color:var(--ink-dim);text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,var(--signal) 40%,transparent)}
.spec a:hover{color:var(--signal-text);border-bottom-color:var(--signal)}

/* The dense index strip: hundreds of weight or name links separated by dots.
   It was emitted on the hub pages and on the A-Z athlete index with no rule of
   its own, so it inherited body prose at 1rem and ran as a wall. In the spec
   voice with a generous line-height it reads as an instrument's channel list,
   which is what it is. */
.wlist{font-family:var(--mono);font-size:.8125rem;line-height:2.1;letter-spacing:.02em;
  color:var(--ink-dim);font-variant-numeric:tabular-nums;max-width:none}
.wlist a{color:var(--ink-dim);text-decoration:none;white-space:nowrap;
  border-bottom:1px solid transparent;transition:color var(--t-fast) linear,border-color var(--t-fast) linear}
.wlist a:hover{color:var(--signal-text);border-bottom-color:var(--signal)}

/* -------------------------------------------------- §3.4 tabular everywhere
   This is the most numeric site in the portfolio: percentile columns, weight
   classes, age brackets, kg against lb. A column that jiggles as the unit
   toggle rewrites it is the fastest way for the whole argument to look
   unmeasured, so the default is flipped — every table, plate, readout and
   spec line is tabular, and only the display h1 keeps proportional figures. */
table,.plate,.spec,.freshness,.crumbs,.pb-in,.readout-sub,.band-cell,
.stat,.rel-card,.method ol,.srcline{font-variant-numeric:tabular-nums lining-nums}
h1{font-variant-numeric:proportional-nums}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ------------------------------------------------------------ focus
   One ring for the whole site. There was no explicit :focus-visible rule,
   and `input:focus{outline:none}` actively removed the UA ring from every
   text field and select — a 1px border tint was the only cue a keyboard
   user got. Amber is the only colour on the site that is guaranteed to
   read against both --bg and --surface in both themes:
     dark  #FFB224 on #0C0E12 = 10.5:1
     light #C77800 on #F7F7F5 =  3.2:1  (>3:1, WCAG 1.4.11 non-text)
   2px, 2px offset, square — the same geometry as everything else here. */
:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
/* pointer focus keeps the quieter border-only treatment */
:focus:not(:focus-visible){outline:none}
/* the skip-link target; focusing it must not paint a ring round the page */
main:focus,main:focus-visible{outline:none}

/* Anything the header sticks over needs room, or a jump-to-id lands
   underneath it. 64px header + 12px of air. */
:target{scroll-margin-top:76px}
h1,h2,h3,h4{scroll-margin-top:76px}

/* ---------------------------------------------------- the calibration rule */
.crule{margin:0 0 24px}
.crule svg{display:block;width:100%;height:8px;overflow:visible}
.crule path{stroke:var(--line);stroke-width:1;fill:none;vector-effect:non-scaling-stroke}
.crule .t-sig{stroke:var(--signal)}

/* ------------------------------------------- §3.5 the datum line (the keel)
   The ring draws a solid 44px accent bar above every section heading. Copying
   it would be the one move that makes this site look like the ring, so the
   keel here is drawn in the calibration rule's own grammar instead: a hairline
   with the datum tick in signal amber at its origin. Same job, same 44px, same
   position — visibly a different hand. Two background layers, no extra DOM,
   no layout cost. */
h2.sec::before,.sec-keel::before{
  content:"";display:block;width:44px;height:2px;margin:0 0 12px;
  background:linear-gradient(90deg,var(--signal) 0 11px,transparent 11px 100%),
             linear-gradient(var(--line),var(--line));
  background-repeat:no-repeat;background-size:44px 2px,44px 1px;
  background-position:0 0,0 0}
/* Hairline discipline: structure is drawn with opaque 1px --line, never with a
   translucent grey. Sections end where their content ends — no full-bleed
   dividers inside the measure. The one sanctioned full-width rule is the band
   below, which is a deliberate composition, not a divider. */

/* ------------------------------------------------- §3.6 hover that means it
   The shared markup emits `a.draw` (methodBlock's methodology link, the ring
   footer's "see all" link). Unstyled it was a plain link. Here the underline
   is a trace that draws left-to-right in the signal colour — the same gesture
   as the plot line on the platform card, so hover reads as "the instrument
   responds", not "the browser changed a colour". Nothing moves; CLS stays 0. */
a.draw{text-decoration:none;color:var(--ink);
  background:linear-gradient(var(--signal),var(--signal)) 0 100%/0 1px no-repeat;
  transition:background-size var(--t-med) var(--ease-out),color var(--t-fast) linear}
a.draw:hover,a.draw:focus-visible{background-size:100% 1px;color:var(--signal-text)}

/* ------------------------------------------ §3.7 entrance, above fold only
   Kicker -> h1 -> lede, 60ms apart, once, on load. Opacity plus an 8px rise:
   a needle settling, not a slide-in. Gated behind `no-preference` so a
   reduced-motion reader is served the finished page with no animation to
   cancel, and `both` so the end state is the authored one either way. Nothing
   below the fold animates except the existing curve trace, which is the site's
   own signature and predates this layer. */
@media (prefers-reduced-motion:no-preference){
  .reveal{animation:wl-rise var(--t-slow) var(--ease-out) both}
  .reveal-2{animation-delay:60ms}
  .reveal-3{animation-delay:120ms}
  @keyframes wl-rise{from{opacity:0;transform:translateY(8px)}}
}

/* ------------------------------------------------------------- judge lights */
.jl{display:inline-flex;gap:.35em;vertical-align:middle}
.jl-dot{width:var(--jl,14px);height:var(--jl,14px);border-radius:50%;
  border:1px solid var(--line);background:transparent;display:block}
.jl-dot.on{background:var(--white-light);border-color:var(--white-light)}
:root[data-theme=light] .jl-dot.on{background:var(--ink);border-color:var(--ink);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--signal) 40%,transparent)}

/* --------------------------------------------------------------- skip link
   The ring netbar puts 8-10 links ahead of the content on every page. Without
   this a keyboard user tabbed through all of them, on all 2,695 pages, before
   reaching the thing they came for. */
/* fixed, not absolute: shift-tabbing back to it from halfway down a 2,700-row
   page would otherwise reveal it 8px from the top of the DOCUMENT, off-screen */
.skip{position:fixed;left:8px;top:-64px;z-index:60;background:var(--signal);
  color:var(--signal-ink);font-family:var(--mono);font-size:.8125rem;
  padding:9px 14px;border-radius:2px;text-decoration:none}
.skip:focus{top:8px}
/* the light-mode override this rule used to need is gone: --signal-ink is now
   dark in both themes, so the skip link inherits a passing pair either way. */

/* ------------------------------------------------------------------ netbar */
.netbar{background:var(--surface);border-bottom:1px solid var(--line);font-size:.75rem}
.netbar-in{display:flex;align-items:center;gap:16px;min-height:36px;flex-wrap:wrap}
.netbar-label{font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-dim)}
.netbar-links{display:flex;gap:14px;flex-wrap:wrap}
.netbar-links a{display:inline-flex;align-items:center;gap:6px;color:var(--ink-dim);text-decoration:none;
  min-height:28px}
.netbar-links a:hover{color:var(--ink)}
.netbar-links a[aria-current]{color:var(--ink)}
.nb-dot{width:6px;height:6px;border-radius:50%;display:inline-block}

/* ------------------------------------------------------------------ header */
.site-head{border-bottom:1px solid var(--line);background:var(--bg);position:sticky;top:0;z-index:20}
.head-in{display:flex;align-items:center;gap:20px;min-height:64px;flex-wrap:wrap}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;flex:0 0 auto}
.brand-lights{display:inline-flex;gap:4px}
.brand-lights i{width:9px;height:9px;border-radius:50%;background:var(--white-light);display:block}
:root[data-theme=light] .brand-lights i{background:var(--signal)}
.brand-word{font-weight:700;letter-spacing:.06em;font-size:1.0625rem}
.brand-claim{margin:0;font-family:var(--mono);font-size:.6875rem;letter-spacing:.04em;
  color:var(--ink-dim);text-transform:uppercase;flex:1 1 auto;min-width:0}
.head-right{display:flex;align-items:center;gap:14px;margin-left:auto}
.head-nav{display:flex;gap:16px;font-size:.8125rem}
.head-nav a{color:var(--ink-dim);text-decoration:none}
.head-nav a:hover{color:var(--signal-text)}
.icon-btn{background:none;border:1px solid var(--line);border-radius:2px;color:var(--ink-dim);
  width:32px;height:32px;display:grid;place-items:center;cursor:pointer;padding:0}
.icon-btn svg{width:16px;height:16px}
.icon-btn:hover{color:var(--signal-text);border-color:var(--signal)}
.i-moon{display:none}
:root[data-theme=light] .i-sun{display:none}
:root[data-theme=light] .i-moon{display:block}
.unit-btn{display:inline-flex;border:1px solid var(--line);border-radius:2px;background:none;
  padding:0;cursor:pointer;font-family:var(--mono);font-size:.6875rem;overflow:hidden}
.unit-btn span{padding:6px 9px;color:var(--ink-dim);line-height:1}
.unit-btn[data-unit=kg] span:first-child,.unit-btn[data-unit=lb] span:last-child{
  background:var(--signal);color:var(--signal-ink)}

/* ----------------------------------------------------------------- crumbs */
.crumbs{border-bottom:1px solid var(--line);font-family:var(--mono);font-size:.75rem;padding:8px 0;color:var(--ink-dim)}
.crumbs a{color:var(--ink-dim);text-decoration:none}
.crumbs a:hover{color:var(--signal-text)}
.crumbs .sep{margin:0 8px;opacity:.5}

/* ------------------------------------------------------------------- hero */
.hero{padding:48px 0 24px}
.hero h1{max-width:20ch}
section{padding:0 0 48px}
section.tight{padding-bottom:32px}

/* ------------------------------------------------------------ platform card */
/* §3.2 — THE one elevating object on the site. The platform card is the only
   thing on any page that asks the reader to do something (type their lift in),
   so it is the only thing that leaves the surface. In dark it does not float
   at all: --lift is none and it steps up from --bg to --surface instead. */
.pcard{border:1px solid var(--line);background:var(--surface);border-radius:2px;
  box-shadow:var(--lift);
  display:grid;grid-template-columns:1fr 320px;gap:0}
.pcard-plot{padding:20px;border-right:1px solid var(--line);min-width:0}
.pcard-read{padding:20px;display:flex;flex-direction:column;gap:14px;min-width:0}
.pcard svg.curve{display:block;width:100%;height:auto}
.curve .axis{stroke:var(--line);stroke-width:1;fill:none}
.curve .grid{stroke:var(--line);stroke-width:1;fill:none;opacity:.55}
.curve .band-l{stroke:var(--line);stroke-width:1;stroke-dasharray:2 3;fill:none}
.curve .plot{stroke:var(--ink);stroke-width:2;fill:none;stroke-linejoin:round;stroke-linecap:round}
.curve .fill{fill:var(--ink);opacity:.06;stroke:none}
.curve text{font-family:var(--mono);fill:var(--ink-dim);font-size:11px}
.curve text.band{fill:var(--ink-dim);font-size:10px;letter-spacing:.06em;text-transform:uppercase}
.curve .me{stroke:var(--signal);stroke-width:1.5;fill:none}
.curve .me-dot{fill:var(--signal);stroke:var(--bg);stroke-width:2}
.curve .draw{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:draw .6s ease-out forwards}
@keyframes draw{to{stroke-dashoffset:0}}

.readout-k{font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-dim);margin:0}
.readout{font-family:var(--mono);font-weight:600;font-size:4.5rem;line-height:1;
  color:var(--white-light);font-variant-numeric:tabular-nums;margin:0;letter-spacing:-.03em}
.readout small{font-size:1.75rem;letter-spacing:0}
.readout-sub{font-family:var(--mono);font-size:.8125rem;color:var(--ink-dim);margin:0}
.verdict-line{font-size:1.0625rem;margin:0}
.next-step{font-family:var(--mono);font-size:.8125rem;margin:0}
.next-step a{color:var(--signal-text)}

.lift-input{display:flex;align-items:stretch;border:1px solid var(--line);border-radius:2px;background:var(--bg)}
.lift-input label{font-family:var(--mono);font-size:.75rem;color:var(--ink-dim);padding:10px 0 10px 12px;
  display:flex;align-items:center;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.lift-input input{flex:1;min-width:0;background:none;border:0;color:var(--ink);font-family:var(--mono);
  font-size:1.125rem;font-weight:600;padding:10px 12px;width:100%}
.lift-input input:focus{outline:none}
/* the input has no border of its own — the group draws it, so the ring goes
   inside the group rather than floating 2px outside a borderless box */
.lift-input input:focus-visible{outline:2px solid var(--signal);outline-offset:-3px}
.lift-input:focus-within{border-color:var(--signal)}
.lift-input .u{font-family:var(--mono);font-size:.8125rem;color:var(--ink-dim);padding:10px 12px;
  border-left:1px solid var(--line);display:flex;align-items:center}

/* ------------------------------------------------------------------ inputs */
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-dim)}
input[type=number],input[type=text],select{background:var(--surface-2);border:1px solid var(--line);
  border-radius:2px;color:var(--ink);font-family:var(--mono);font-size:1rem;padding:9px 11px;width:100%}
input:focus,select:focus{border-color:var(--signal)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:2px;overflow:hidden}
.seg button{background:none;border:0;color:var(--ink-dim);font-family:var(--mono);font-size:.8125rem;
  padding:8px 14px;cursor:pointer;line-height:1}
.seg button[aria-pressed=true]{background:var(--signal);color:var(--signal-ink)}
.controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px;margin-bottom:20px}

/* ------------------------------------------------------------------ tables */
.tw{overflow-x:auto;border:1px solid var(--line);border-radius:2px;background:var(--surface);
  overscroll-behavior-x:contain}
/* A scroll container is operable UI: app.js gives it tabindex=0 when its
   content actually overflows, so it needs a ring like anything else. */
.tw:focus-visible,.reign:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
table{border-collapse:collapse;width:100%;font-size:.875rem}
th,td{padding:9px 14px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
thead th{font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-dim);font-weight:400;background:var(--surface-2)}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--surface-2)}
td.n,th.n{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
tr.here{background:color-mix(in srgb,var(--signal) 12%,transparent)}
tr.here td{color:var(--ink)}
.band-cell{font-family:var(--mono);font-size:.75rem;letter-spacing:.04em}

/* ------------------------------------------------------------------- cards */
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
/* Flat by doctrine (§3.2): a card is a surface step, never an elevation.
   --shadow is now `none` in both themes and is left referenced here only so
   that a future one-off can re-point it without hunting the selector. */
.card{border:1px solid var(--line);background:var(--surface);border-radius:2px;padding:18px;
  box-shadow:var(--shadow);text-decoration:none;display:block;position:relative;
  transition:border-color var(--t-fast) linear,background-color var(--t-fast) linear}
/* §3.6 — hover is a state change with meaning (the card arms), not a colour
   swap, and nothing translates or scales, so the grid never reflows. */
a.card:hover{border-color:var(--signal);background:var(--surface-2)}
a.card:hover .go{color:var(--signal-text)}
.card h3{margin:0 0 6px;font-size:1.0625rem}
.card p{margin:0;color:var(--ink-dim);font-size:.875rem}
.card .go{font-family:var(--mono);font-size:.75rem;color:var(--signal-text);display:block;margin-top:10px}
.stat{border:1px solid var(--line);background:var(--surface);border-radius:2px;padding:16px}
.stat .v{font-family:var(--mono);font-weight:600;font-size:1.75rem;color:var(--white-light);
  font-variant-numeric:tabular-nums;line-height:1.1}
.stat .k{font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-dim)}

/* ------------------------------------------------------------------- plate */
.plate{border:1px solid var(--line);background:var(--surface-2);border-radius:2px;padding:14px 16px;
  font-family:var(--mono);font-size:.75rem;color:var(--ink-dim)}
.plate dl{margin:0;display:grid;gap:4px}
.plate div{display:flex;gap:12px}
.plate dt{width:52px;flex:0 0 52px;letter-spacing:.08em;text-transform:uppercase;opacity:.75}
.plate dd{margin:0;min-width:0}
.plate a{color:var(--ink-dim)}
.plate a:hover{color:var(--signal-text)}

/* -------------------------------------------------------------------- ads
   A declared landing zone with a generous moat. Auto ads gravitate to
   whitespace; this keeps them out of the tools instead of between an input
   and its result. */
.adslot{min-height:96px;margin:40px 0;display:grid;place-items:center;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 0}
.adslot-k{font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);opacity:.5}

/* ------------------------------------------------------------- profile bar */
.profile-bar{position:sticky;bottom:0;z-index:15;background:var(--surface);
  border-top:1px solid var(--line);font-family:var(--mono);font-size:.75rem}
.pb-in{max-width:var(--wrap);margin:0 auto;padding:9px 24px;display:flex;align-items:center;
  gap:14px;flex-wrap:wrap;color:var(--ink-dim)}
.pb-in b{color:var(--ink);font-weight:600}
.pb-in a{color:var(--signal-text);text-decoration:none;white-space:nowrap;
  display:inline-flex;align-items:center;min-height:24px}
.pb-in a:hover{text-decoration:underline}
.pb-clear{margin-left:auto;background:none;border:0;color:var(--ink-dim);cursor:pointer;
  font-family:var(--mono);font-size:.6875rem;text-decoration:underline;padding:5px 2px;min-height:24px}

/* -------------------------------------------------------------- muscle map */
.muscle-map svg{width:100%;height:auto;max-width:340px;display:block;margin:0 auto}
/* was an inline <style> inside every one of the 873 exercise-page SVGs */
.muscle-map text{font-family:var(--mono);font-size:11px;fill:var(--ink-dim);
  letter-spacing:.08em;text-transform:uppercase}
.muscle-map .body{fill:var(--surface-2);stroke:var(--line);stroke-width:1}
.muscle-map .m{fill:var(--surface-2);stroke:var(--line);stroke-width:1}
.muscle-map .m.pri{fill:var(--signal)}
.muscle-map .m.sec{fill:color-mix(in srgb,var(--signal) 38%,transparent)}

/* --------------------------------------------------------------- ring/footer */
.ring{padding:48px 0;border-top:1px solid var(--line);background:var(--surface)}
.ring-h{font-size:1.25rem;margin-bottom:20px}
/* The shared netFooter() stopped emitting .ring-card / .ring-grid when the
   AAA+++ related-card anatomy landed in globalsite.mjs; those rules are gone
   from this sheet because dead CSS on a 2,696-page site is a future "why is
   this not applied?" bug. The live anatomy is .rel-grid / .rel-card below —
   which, until now, this site rendered COMPLETELY UNSTYLED, the same defect
   that once left the house ad 1,027px tall. Shared markup, local paint: the
   rule this file exists to enforce. */
.rel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
/* Each card is a labelled channel: the destination's accent as a datum tick on
   the top edge, its argument in body voice, its data vintage stamped in the
   spec voice at the foot. --accent is set inline per card by the shared code. */
.rel-card{position:relative;display:flex;flex-direction:column;gap:6px;
  border:1px solid var(--line);border-top:2px solid var(--accent,var(--signal));
  border-radius:2px;padding:14px 14px 12px;text-decoration:none;background:var(--bg);
  transition:border-color var(--t-fast) linear,background-color var(--t-fast) linear}
.rel-card:hover{border-color:var(--signal);background:var(--surface-2)}
.rel-t{font-weight:700;font-size:.9375rem;letter-spacing:-.01em;color:var(--ink);line-height:1.25}
.rel-why{margin:0;font-size:.8125rem;line-height:1.45;color:var(--ink-dim)}
/* §6.1.3 — the freshness chip. It is the network's E-E-A-T at the point of
   click, so it is set in the spec voice and pushed to the foot of the card by
   `margin-top:auto`, which keeps it on one baseline across a ragged row. */
.freshness{margin-top:auto;padding-top:8px;font-family:var(--mono);font-size:.625rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim);opacity:.8}
/* The one bridge card: dashed edge = a different family of sites, so nobody is
   surprised by where it lands. */
.rel-card.bridge{border-style:dashed;border-top-style:solid}
.ring-more{margin:18px 0 0;font-size:.875rem}
.ring-more a{color:var(--signal-text)}

/* ==================================================== §9 the source line
   Doctrine #7 rendered as instrumentation: no figure without a source line,
   no source line without a date. The ring sets this as a small-caps editorial
   credit under a figure. Here it is the strip of etched text along the bottom
   of the housing — hairline above, spec voice, en-dot separators, always in
   the same place under the thing it certifies. The site's ENTIRE argument is
   that these are judged competition lifts rather than self-reported app
   numbers, so the claim is cited and dated wherever it is made. */
.srcline{margin:14px 0 0;padding-top:10px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:.6875rem;line-height:1.6;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-dim)}
.srcline a{color:var(--ink-dim);text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,var(--signal) 45%,transparent)}
.srcline a:hover{color:var(--signal-text);border-bottom-color:var(--signal)}
.srcline .sep{margin:0 .5em;opacity:.45}
/* A source line attached directly to a figure loses its rule — the figure's
   own frame already closes the block, and a second hairline reads as clutter. */
.pcard-read .srcline,.plate + .srcline{border-top:0;padding-top:6px;margin-top:2px}

/* ================================================= §10 the method mini-spec
   "How we compute this" as a paragraph is skipped by every reader, which
   wastes the page's strongest trust asset. Here it is a numbered procedure on
   a calibration panel: step numbers in the spec voice hanging outside the
   measure, the formula set as machine output on a sunken surface. */
.method{padding:0 0 48px}
/* the block is always nested inside the site's own section()/wrap, which
   already owns the bottom rhythm — otherwise the two paddings compound to 96px */
.wrap .method{padding:0}
.method > h2{margin-bottom:16px}
.method ol{list-style:none;counter-reset:wl-step;margin:0 0 18px;padding:0;
  max-width:660px;border-top:1px solid var(--line)}
.method ol li{counter-increment:wl-step;position:relative;margin:0;
  padding:11px 0 11px 46px;border-bottom:1px solid var(--line);
  color:var(--ink-dim);font-size:.9375rem;line-height:1.55}
.method ol li::before{content:counter(wl-step,decimal-leading-zero);
  position:absolute;left:0;top:12px;font-family:var(--mono);font-size:.6875rem;
  letter-spacing:.1em;color:var(--signal-text);font-variant-numeric:tabular-nums}
.method ol li strong{color:var(--ink);font-weight:500}
/* The formula is the one place the site prints machine output verbatim, so it
   is framed like a readout: sunken surface, amber datum edge, mono, scrollable
   rather than wrapped (a wrapped formula is a misread formula). */
.formula{margin:0 0 16px;padding:13px 15px;background:var(--surface-2);
  border:1px solid var(--line);border-left:2px solid var(--signal);border-radius:2px;
  font-family:var(--mono);font-size:.8125rem;line-height:1.7;color:var(--ink);
  overflow-x:auto;overscroll-behavior-x:contain;white-space:pre;
  font-variant-numeric:tabular-nums}
.formula:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.method .spec{margin:0}

/* ==================================================== §8 confident emptiness
   One full-width breath per site. Everything else on WhiteLights is dense on
   purpose — it is a panel of gauges — which is exactly why one band that holds
   a single sentence and a great deal of air changes the register from "busy"
   to "sure of itself". Full-bleed, hairline top and bottom, nothing in it but
   the claim and the calibration rule. No shadow, no fill, no card. */
.breath{padding:0;margin:8px 0 48px;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);background:var(--bg)}
.breath .wrap{padding-top:clamp(64px,11vw,132px);padding-bottom:clamp(64px,11vw,132px)}
.breath p{margin:0;max-width:24ch;font-size:clamp(1.5rem,4.2vw,2.375rem);
  line-height:1.18;letter-spacing:-.02em;font-weight:400;color:var(--ink)}
.breath p em{font-style:normal;color:var(--signal-text)}
.breath .spec{margin:22px 0 0}

.pub{border-top:1px solid var(--line);background:var(--bg);padding:28px 0}
.pub-in{display:flex;gap:32px;flex-wrap:wrap;justify-content:space-between}
.pub-k{font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-dim);margin:0 0 6px}
.pub-name{margin:0 0 4px;font-weight:700;font-size:1.0625rem}
.pub-name a{text-decoration:none}
.pub-tag{margin:0;color:var(--ink-dim);font-size:.875rem;max-width:44ch}
.pub-socs{display:flex;gap:14px;flex-wrap:wrap}
.pub-soc{display:inline-flex;align-items:center;gap:6px;color:var(--ink-dim);text-decoration:none;font-size:.8125rem}
.pub-soc svg{width:16px;height:16px}
.pub-soc:hover{color:var(--signal-text)}
.pub-soc-l{font-family:var(--mono);font-size:.75rem}

.site-foot{border-top:1px solid var(--line);background:var(--surface);padding:28px 0 36px;font-size:.875rem}
.foot-in{display:flex;gap:32px;justify-content:space-between;flex-wrap:wrap}
.foot-brand{font-weight:700;letter-spacing:.06em;margin:0 0 6px}
.foot-note{color:var(--ink-dim);margin:0 0 6px;max-width:56ch;font-size:.8125rem}
.foot-disclaimer{font-size:.75rem;opacity:.85}
.foot-links{display:flex;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:.8125rem}
.foot-links a{color:var(--ink-dim);text-decoration:none}
.foot-links a:hover{color:var(--signal-text)}
.foot-legal{margin-top:20px;padding-top:14px;border-top:1px solid var(--line)}
.foot-legal p{color:var(--ink-dim);font-size:.75rem;margin:0}

/* ------------------------------------------------------------------ mobile */
@media (max-width:860px){
  .pcard{grid-template-columns:1fr}
  .pcard-plot{border-right:0;border-top:1px solid var(--line);order:2}
  .pcard-read{order:1}
  .brand-claim{display:none}
}
@media (max-width:600px){
  h1{font-size:1.75rem}h2{font-size:1.375rem}
  .readout{font-size:3.25rem}
  .wrap{padding:0 16px}
  .hero{padding:32px 0 20px}
  .curve text{font-size:13px}
  .curve text.band{font-size:12px}
  .head-in{min-height:56px;gap:12px}
  .head-nav{display:none}

  /* The ring netbar wrapped to four rows at 375px — 119px of the viewport
     spent on cross-site links before the visitor saw a single number. Same
     links, same order, one scrollable instrument strip instead. */
  .netbar-in{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    gap:12px;scrollbar-width:none}
  .netbar-in::-webkit-scrollbar{display:none}
  .netbar-label{flex:0 0 auto}
  .netbar-links{flex-wrap:nowrap;gap:12px}
  .netbar-links a{flex:0 0 auto;white-space:nowrap}
  /* a scrolling flex row drops its container's trailing padding at the scroll
     end; this puts the 16px gutter back so the last link is not flush */
  .netbar-in::after{content:"";flex:0 0 16px}

  /* The profile bar is permanent furniture; at three wrapped rows it was
     eating 98px of an 812px viewport. Tighter metrics, and the "clear"
     button no longer claims a row of its own. */
  .pb-in{padding:7px 16px;gap:5px 12px;font-size:.6875rem}
  .pb-clear{margin-left:auto}
  .profile-bar{max-height:38vh;overflow-y:auto}

  /* one column of related cards rather than two cramped ones — the reason
     line is the whole point of the card and it needs its measure */
  .rel-grid{grid-template-columns:1fr}
  .method ol li{padding-left:38px;font-size:.9375rem}
  .breath .wrap{padding-top:56px;padding-bottom:56px}
  .breath p{max-width:none}
  .srcline{letter-spacing:.08em}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .curve .draw{stroke-dashoffset:0}
}
/* -------------------------------------------------------------------- print
   The site is dark by default, so printing it flooded the page with #0C0E12.
   Print force-derives the light palette rather than trusting whichever theme
   the reader happened to be in, drops the chrome, and un-sticks the header
   and the profile bar (both repeated on every sheet otherwise). */
@media print{
  :root,:root[data-theme=light]{
    --bg:#FFF;--surface:#FFF;--surface-2:#FFF;--line:#999;
    --ink:#000;--ink-dim:#333;--white-light:#000;
    --signal:#000;--signal-text:#000;--signal-ink:#FFF;--shadow:none;--lift:none;color-scheme:light}
  .netbar,.adslot,.profile-bar,.ring,.pf-cinema,.pub,.head-right,.crumbs{display:none}
  /* the source line and the method spec are the two things most worth having
     on paper, so they print — but the breath band's 132px of air is a screen
     composition, not a sheet of paper */
  .breath .wrap{padding-top:18px;padding-bottom:18px}
  .method,.srcline,.formula{break-inside:avoid}
  .formula{overflow:visible;white-space:pre-wrap}
  .site-head{position:static}
  body{background:#FFF;color:#000}
  .tw,.reign{overflow:visible}
  .reign svg{min-width:0}
  a{text-decoration:none}
  .card,.stat,.plate,.tw{break-inside:avoid}
}

/* ------------------------------------------------------------- class chooser */
.chooser{border-top:1px solid var(--line);padding-top:14px;display:flex;
  flex-wrap:wrap;gap:10px;align-items:center}
.chooser .readout-k{width:100%;margin:0}
.chooser select{width:auto;flex:1;min-width:150px;font-size:.8125rem;padding:7px 9px}

/* ------------------------------------------------------------- reign chart */
.reign{border:1px solid var(--line);background:var(--surface);border-radius:2px;padding:16px;overflow-x:auto;
  overscroll-behavior-x:contain}
.reign svg{display:block;width:100%;height:auto;min-width:560px}
.reign text{font-family:var(--mono);font-variant-numeric:tabular-nums}
.reign .rn{fill:var(--ink);font-size:11px}
.reign .rw{fill:var(--ink-dim);font-size:10px}
.reign .rt{fill:var(--ink-dim);font-size:10px}
.reign .rg{stroke:var(--line);stroke-width:1;opacity:.5}
.reign .rb rect{fill:var(--signal)}
.reign .reign-row:hover .rb rect{fill:var(--white-light)}
.reign .reign-row:hover .rn{fill:var(--signal-text)}
@media (max-width:600px){.reign .rn{font-size:13px}.reign .rt,.reign .rw{font-size:12px}}

/* ============================================================== house ad
   The shared ring markup (.pf-cinema) is styled in _shared/datasite.css,
   which this site deliberately does NOT load — it carries its own identity.
   Without these rules the block rendered completely unstyled: a 1,027px tall
   run of text with a 715x715 arrow, because an <svg> with no CSS size fills
   its container. Never inherit shared MARKUP without also owning its CSS.

   Rebuilt here in the instrument language rather than the ring's night-sky
   treatment, which would have looked pasted in. */
.pf-cinema{position:relative;border:1px solid var(--line);border-top:2px solid var(--signal);
  background:var(--surface);border-radius:2px;max-width:var(--wrap);
  margin:8px auto 48px;padding:22px 24px 24px;overflow:hidden}
@media (max-width:1088px){.pf-cinema{margin-left:24px;margin-right:24px}}
@media (max-width:600px){.pf-cinema{margin-left:16px;margin-right:16px;padding:18px}}
/* the shared markup ships three decorative scene layers that belong to the
   other identity — there is nothing to render them with here */
.pf-cinema .pfc-scene{display:none}
.pf-cinema .pfc-in{position:relative;max-width:640px}
.pf-cinema .pfc-adlabel{font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-dim);opacity:.6;margin:0 0 12px}
.pf-cinema .pfc-flag{display:inline-block;font-family:var(--mono);font-size:.6875rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--signal-text);
  border:1px solid color-mix(in srgb,var(--signal) 45%,transparent);
  border-radius:2px;padding:3px 8px;margin:0 0 12px}
.pf-cinema .pfc-hook{font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-dim);margin:0 0 8px}
.pf-cinema .pfc-title{font-size:1.5rem;line-height:1.15;margin:0 0 8px;color:var(--ink)}
.pf-cinema .pfc-sub{color:var(--ink-dim);font-size:.9375rem;margin:0 0 16px;max-width:56ch}
.pf-cinema .pfc-count{display:flex;align-items:baseline;gap:6px;margin:0 0 18px;
  font-family:var(--mono);font-variant-numeric:tabular-nums}
.pf-cinema .pfc-cell{display:inline-flex;flex-direction:column;align-items:center;
  border:1px solid var(--line);border-radius:2px;padding:6px 9px;min-width:52px;background:var(--bg)}
.pf-cinema .pfc-cell b{font-size:1.125rem;font-weight:600;color:var(--white-light);line-height:1}
.pf-cinema .pfc-cell i{font-style:normal;font-size:.5625rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-dim);margin-top:3px}
.pf-cinema .pfc-sep{color:var(--ink-dim);opacity:.5}
.pf-cinema .pfc-btn{display:inline-flex;align-items:center;gap:8px;
  background:var(--signal);color:var(--signal-ink);text-decoration:none;
  font-weight:700;font-size:.9375rem;padding:11px 18px;border-radius:2px;line-height:1}
/* the actual defect: an unsized SVG expands to fill its parent */
.pf-cinema .pfc-btn svg{width:16px;height:16px;flex:0 0 16px}
.pf-cinema .pfc-btn:hover{background:var(--white-light);color:var(--bg)}
.pf-cinema .pfc-fine,.pf-cinema .pfc-note{font-family:var(--mono);font-size:.6875rem;
  color:var(--ink-dim);margin:14px 0 0;opacity:.8}
.pf-cinema a{color:var(--ink-dim)}
.pf-cinema .pfc-btn{color:var(--signal-ink)}
/* 2026-08-10 — the campaign creative gained a photograph (.pfc-hasart), and
   the rule at the top of this block applies again: this sheet has to own the
   new markup or the image renders as a full-bleed 964px-tall portrait in the
   middle of an instrument panel. Treated here as a specimen plate — bordered,
   fixed width, square-cropped — rather than the ring's full-height poster
   column, which needs the dark surface this identity does not have. */
.pf-cinema.pfc-hasart{display:flex;align-items:flex-start;gap:22px}
.pf-cinema.pfc-hasart .pfc-in{flex:1 1 auto;min-width:0}
.pf-cinema .pfc-art{position:relative;flex:0 0 176px;width:176px;aspect-ratio:3/4;
  border:1px solid var(--line);border-radius:2px;overflow:hidden;background:var(--bg)}
.pf-cinema .pfc-art img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block}
/* the ring fades the photo into a near-black panel; there is nothing to fade
   into here, so the seam layer is simply not drawn */
.pf-cinema .pfc-artfade{display:none}
.pf-cinema .pfc-ai{position:absolute;top:6px;right:6px;font-family:var(--mono);
  font-size:.5625rem;font-weight:600;letter-spacing:.12em;padding:3px 6px;border-radius:2px;
  color:var(--ink);background:color-mix(in srgb,var(--surface) 82%,transparent);
  border:1px solid var(--line)}
.pf-cinema .pfc-prov{display:block;margin-top:3px}
/* the shared markup moves the ad label inside .pfc-art when a campaign has a
   picture, so it has to be caught here or it renders as a caption stripe
   across the middle of the plate */
.pf-cinema .pfc-art .pfc-adlabel{position:absolute;top:5px;left:5px;margin:0;z-index:2;
  font-size:.5rem;padding:2px 5px;border-radius:2px;opacity:1;color:var(--ink);
  background:color-mix(in srgb,var(--surface) 82%,transparent);border:1px solid var(--line)}
@media (max-width:600px){
  .pf-cinema.pfc-hasart{flex-direction:column;gap:16px}
  .pf-cinema .pfc-art{flex:0 0 auto;width:100%;aspect-ratio:16/9}
}

/* ----------------------------------------------------------------- search
   Header combobox over the 1,981-row index. The panel is absolutely
   positioned so opening it never reflows the sticky header. */
.hsearch{position:relative;display:flex}
.hsearch input{width:150px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:2px;color:var(--ink);font-family:var(--mono);font-size:.8125rem;
  padding:7px 10px;-webkit-appearance:none;appearance:none}
.hsearch input::placeholder{color:var(--ink-dim);opacity:.75}
.hsearch input:focus{border-color:var(--signal);width:230px}
.hsearch input{transition:width .15s ease}
@media (prefers-reduced-motion:reduce){.hsearch input{transition:none}}
#qr{position:absolute;top:calc(100% + 6px);right:0;width:min(340px,86vw);z-index:40;
  background:var(--surface);border:1px solid var(--line);border-radius:2px;
  max-height:62vh;overflow-y:auto;box-shadow:0 8px 24px rgba(0,0,0,.35)}
:root[data-theme=light] #qr{box-shadow:0 8px 24px rgba(20,24,29,.14)}
#qr a{display:block;padding:9px 12px;text-decoration:none;border-bottom:1px solid var(--line)}
#qr a:last-child{border-bottom:0}
#qr a b{display:block;font-weight:500;font-size:.875rem;color:var(--ink);line-height:1.3}
#qr a span{display:block;font-family:var(--mono);font-size:.625rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-dim);margin-top:3px}
#qr a:hover,#qr a.on{background:var(--surface-2)}
#qr a.on b,#qr a:hover b{color:var(--signal-text)}
.qr-none{padding:12px;margin:0;color:var(--ink-dim);font-size:.875rem}
@media (max-width:860px){
  /* .hsearch sits inside .head-right, so flex:1 1 100% only fills THAT row —
     the wrap has to be allowed on the parent or the field stays ~215px. */
  .head-right{flex-wrap:wrap;row-gap:10px}
  .hsearch{order:5;flex:1 1 100%}
  .hsearch input,.hsearch input:focus{width:100%}
  /* the panel is anchored to the field but must not inherit its width — result
     labels like "Bench press — men, 82.5-87.5 kg" need more room than the box */
  #qr{left:auto;right:0;width:min(340px,92vw)}
}

/* --- hero CTA + hero provenance (DESIGN-MODERNISATION-2026-08 §3.3) -------
   This hero had no call to action anywhere, measured at a real 375x812
   viewport, and its source line landed 67px below the fold. Both now sit in
   the hero. Existing tokens only (--signal-text, --ink-dim, --line): no new
   colour, so the palette and contrast-check.mjs are untouched by this. */
.hero-go{margin:20px 0 0}
.hero-go-a{display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:.8125rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--signal-text);text-decoration:none;
  border:1px solid var(--signal);border-radius:2px;padding:11px 18px;
  min-height:44px;box-sizing:border-box}
.hero-go-a:hover{background:var(--signal);color:var(--signal-ink)}
.hero-spec{margin:14px 0 0;color:var(--ink-dim);border-top:1px solid var(--line);padding-top:10px}
@media (max-width:560px){
  /* the fold budget: reclaim the hero's desktop breathing room on a phone */
  .hero{padding:24px 0 16px}
  .hero-go{margin-top:16px}
  .hero-spec{margin-top:12px}
}