/* Bike Shed — workshop manual */

:root{
  --steel:#E3E7EB;
  --paper:#FBFCFD;
  --sunk:#D6DCE3;
  --ink:#141A21;
  --ink-2:#4C5764;
  --ink-3:#7C8794;
  --line:#C3CCD5;
  --line-soft:#DDE3E9;
  --blue:#1B45C8;
  --blue-soft:#E7ECFB;
  --hivis:#D6F224;
  --on-hivis:#141A21;   /* fixed in both themes — hi-vis never changes, so its text must not either */
  --rust:#AE3A22;
  --rust-soft:#FBEAE5;

  --f-display:"Archivo",system-ui,sans-serif;
  --f-body:"Public Sans",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,monospace;

  --pad:clamp(1.25rem,4vw,3rem);
  --maxw:1180px;
  --r:3px;
}

@media (prefers-color-scheme:dark){
  :root{
    --steel:#0F141A; --paper:#171D25; --sunk:#10161D;
    --ink:#E6EBF0; --ink-2:#A3AEBA; --ink-3:#75818E;
    --line:#2C3640; --line-soft:#232C35;
    --blue:#7FA2FF; --blue-soft:#1B2436;
    --rust:#E2795D; --rust-soft:#2A1B17;
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--steel);color:var(--ink);
  font-family:var(--f-body);font-size:17px;line-height:1.6;
  font-synthesis-weight:none;
}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:700;line-height:1.05;letter-spacing:-.02em;margin:0}
p{margin:0 0 1em}
a{color:var(--blue);text-underline-offset:3px;text-decoration-thickness:1px}
button{font:inherit;color:inherit}
:focus-visible{outline:2.5px solid var(--blue);outline-offset:3px;border-radius:2px}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.mono{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.09em;text-transform:uppercase}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

/* ---------------------------------------------------------------- header */

.top{
  position:sticky;top:0;z-index:40;background:var(--steel);
  border-bottom:1px solid var(--line);
}
.top-in{display:flex;align-items:center;gap:1.5rem;height:60px}
.mark{display:flex;align-items:baseline;gap:.5rem;text-decoration:none;color:inherit;margin-right:auto}
.mark b{font-family:var(--f-display);font-weight:700;font-size:1.05rem;letter-spacing:-.03em;font-stretch:112%}
.mark span{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.18em;color:var(--ink-3);text-transform:uppercase}
.nav{display:flex;gap:.25rem;flex-wrap:wrap}
.nav a{
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;color:var(--ink-2);padding:.5rem .6rem;border-radius:var(--r);
}
.nav a:hover{color:var(--ink);background:var(--sunk)}
.nav a[aria-current="page"]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--hivis)}

/* ---------------------------------------------------------------- hero */

.hero{padding:clamp(2rem,6vw,4.5rem) 0 2rem}
.hero-in{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.eyebrow{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-bottom:1rem}
.eyebrow b{color:var(--on-hivis);font-weight:500;background:var(--hivis);padding:.12em .35em;border-radius:2px}
.hero h1{font-size:clamp(2.6rem,6.4vw,4.4rem);font-stretch:118%;text-wrap:balance}
.hero h1 em{font-style:normal;display:block;color:var(--ink-3)}
.hero-lede{margin-top:1.25rem;max-width:38ch;color:var(--ink-2);font-size:1.05rem}
.hero-hint{margin-top:1.5rem;display:flex;align-items:center;gap:.6rem;color:var(--ink-3)}
.hero-hint svg{flex:none}

.bike-panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:.5rem .5rem 0;position:relative}
.bike-panel::before{
  content:"FIG. 1 — POINT AT THE PROBLEM";position:absolute;top:.75rem;left:1rem;
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.14em;color:var(--ink-3)
}
.bike{display:block;width:100%;height:auto}
.bike-frame{fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.bike-frame .spokes{stroke:var(--line);stroke-width:1}
.bike-frame .hub,.bike-frame .cog{fill:var(--paper)}
.bike-frame .saddle{fill:var(--ink)}
.bike-frame .ring{stroke-width:1.6}
.bike-frame .chain{stroke:var(--ink-3);stroke-width:1.4}
.bike-frame .pedal{fill:var(--ink)}

.spot{cursor:pointer}
.spot .spot-ring{fill:var(--paper);stroke:var(--ink);stroke-width:1.4;transition:fill .18s,stroke .18s,r .18s}
.spot .spot-dot{fill:var(--ink);opacity:0;transition:opacity .18s}
.spot .spot-num{font-family:var(--f-mono);font-size:8px;fill:var(--ink-2);letter-spacing:.04em}
.spot .spot-label{font-family:var(--f-mono);font-size:8px;letter-spacing:.12em;text-transform:uppercase;fill:var(--ink);opacity:0;transition:opacity .18s}
.spot:hover .spot-ring,.spot:focus-visible .spot-ring{fill:var(--hivis);stroke:var(--ink);r:15}
.spot:hover .spot-label,.spot:focus-visible .spot-label{opacity:1}
.spot:hover .spot-num,.spot:focus-visible .spot-num{fill:var(--on-hivis)}
.spot:focus-visible{outline:none}
.spot:focus-visible .spot-ring{stroke-width:2.6}

/* ---------------------------------------------------------------- index list */

.section{padding:clamp(2rem,5vw,3.5rem) 0}
.section-head{display:flex;align-items:baseline;gap:1rem;border-bottom:2px solid var(--ink);padding-bottom:.6rem;margin-bottom:1.5rem}
.section-head h2{font-size:clamp(1.35rem,2.6vw,1.8rem);font-stretch:110%}
.section-head .mono{color:var(--ink-3);margin-left:auto}

.rows{border-top:1px solid var(--line-soft)}
.row{
  display:grid;grid-template-columns:3.2rem minmax(0,1fr) auto;gap:1rem;align-items:baseline;
  padding:.95rem .5rem;border-bottom:1px solid var(--line-soft);text-decoration:none;color:inherit;
  transition:background .15s,padding-left .15s;
}
.row:hover,.row:focus-visible{background:var(--paper);padding-left:1rem}
.row-n{font-family:var(--f-mono);font-size:.7rem;color:var(--ink-3)}
.row-t{font-weight:600}
.row-t small{display:block;font-weight:400;color:var(--ink-2);font-size:.9rem;margin-top:.15rem}
.row-p{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.row:hover .row-p{color:var(--ink)}

/* ---------------------------------------------------------------- pages */

.page-head{padding:2.5rem 0 1.5rem;border-bottom:1px solid var(--line)}
.back{display:inline-block;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);text-decoration:none;margin-bottom:1.25rem}
.back:hover{color:var(--ink)}
.page-head h1{font-size:clamp(1.9rem,4.4vw,3rem);font-stretch:112%;max-width:20ch;text-wrap:balance}
.page-head .lede{margin-top:1rem;max-width:60ch;color:var(--ink-2)}
.meta-strip{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.5rem}
.chip{
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:100px;padding:.32rem .7rem;color:var(--ink-2);background:var(--paper);
}
.chip.hi{background:var(--hivis);border-color:var(--ink);color:var(--on-hivis)}
.chip.warn{background:var(--rust-soft);border-color:var(--rust);color:var(--rust)}

/* causes */

.causes{display:grid;gap:1rem;padding:2rem 0 1rem}
.cause{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:1.25rem 1.35rem}
.cause-top{display:flex;gap:1rem;align-items:baseline}
.cause-n{font-family:var(--f-mono);font-size:.72rem;color:var(--ink-3);padding-top:.2rem}
.cause h3{font-size:1.12rem;font-stretch:105%}
.cause .odds{margin-left:auto;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.cause-body{padding-left:calc(.72rem + 1.6rem)}
.cause p{margin:.7rem 0 0;color:var(--ink-2)}
.cause .check{
  margin-top:.9rem;padding:.7rem .9rem;background:var(--sunk);border-left:3px solid var(--hivis);border-radius:0 var(--r) var(--r) 0;
  color:var(--ink);font-size:.95rem;
}
.cause .check b{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:.2rem}
.cause-act{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-top:1rem}
@media (max-width:640px){.cause-body{padding-left:0}}

.btn{
  display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;cursor:pointer;
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  background:var(--ink);color:var(--steel);border:1px solid var(--ink);border-radius:var(--r);padding:.6rem .9rem;
  transition:transform .12s;
}
.btn:hover{transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--sunk)}
.btn[disabled]{opacity:.4;cursor:not-allowed;transform:none}

/* ---------------------------------------------------------------- guide */

.guide{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3rem);padding:2rem 0 4rem;align-items:start}
.stage{position:sticky;top:76px}
.stage-frame{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.scene{display:block;width:100%;height:auto;background:var(--paper)}
.stage-bar{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem .75rem;border-top:1px solid var(--line-soft);padding:.6rem .75rem}
.stage-bar .mono{color:var(--ink-3);margin-right:auto;white-space:nowrap}
.ticks{display:flex;gap:4px}
.tick{width:22px;height:6px;border-radius:2px;background:var(--sunk);border:1px solid var(--line-soft);cursor:pointer;padding:0}
.tick[aria-current="true"]{background:var(--hivis);border-color:var(--ink)}

.steps{list-style:none;margin:0;padding:0;counter-reset:s}
.step{border-bottom:1px solid var(--line-soft)}
.step-btn{
  width:100%;text-align:left;background:none;border:0;cursor:pointer;padding:1rem .25rem;
  display:grid;grid-template-columns:2.6rem minmax(0,1fr);gap:.75rem;align-items:baseline;
}
.step-btn .n{font-family:var(--f-mono);font-size:.7rem;color:var(--ink-3)}
.step-btn .t{font-weight:600}
.step[data-on="true"] .step-btn .n{color:var(--on-hivis);background:var(--hivis);border-radius:2px;padding:.1rem .3rem;justify-self:start}
.step-body{padding:0 .25rem 1.25rem 3.35rem;color:var(--ink-2);display:none}
.step[data-on="true"] .step-body{display:block}
.note{margin-top:.8rem;padding:.65rem .85rem;border-radius:var(--r);font-size:.93rem}
.note.tip{background:var(--blue-soft);color:var(--ink)}
.note.warn{background:var(--rust-soft);color:var(--rust);border-left:3px solid var(--rust)}
.note b{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;display:block;margin-bottom:.15rem;opacity:.8}
.before{background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--ink);border-radius:0 var(--r) var(--r) 0;padding:1rem 1.2rem;margin:1.5rem 0}
.before b{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:.3rem}
.guide-nav{display:flex;gap:.6rem;padding-top:1.25rem}

@media (max-width:560px){
  .mark span{display:none}
  /* Keep the sticky repair stage below a one-line header. At narrow widths the
     nav may scroll horizontally, but it must not grow a second row underneath
     the stage's fixed 60px offset. */
  .mark b{white-space:nowrap}
  .top-in{gap:.75rem}
  .nav{gap:0;flex-wrap:nowrap;min-width:0;overflow-x:auto;scrollbar-width:none}
  .nav::-webkit-scrollbar{display:none}
  .nav a{padding:.5rem .25rem;flex:none}
}
@media (max-width:900px){
  .hero-in{grid-template-columns:1fr}
  .guide{grid-template-columns:1fr}
  .stage{position:sticky;top:60px;z-index:20;background:var(--steel);padding-bottom:.5rem}
  .stage .scene{max-height:34vh}
  .ticks{flex-wrap:wrap}
  /* Progress controls need a real touch target on narrow screens. Keep the
     indicator bar inside each button so the sequence still reads as progress. */
  .stage-bar{gap:.45rem .5rem}
  .tick{
    width:2.75rem;height:2.75rem;padding:0;display:grid;place-items:center;
    background:var(--sunk);border-color:var(--line);
  }
  .tick::before{content:"";width:1.15rem;height:.35rem;border-radius:2px;background:var(--line)}
  .tick[aria-current="true"]::before{background:var(--hivis)}
}

/* ---------------------------------------------------------------- kit + tables */

.kits{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));padding-top:1.5rem}
.kit{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:1.35rem;display:flex;flex-direction:column}
.kit h3{font-size:1.2rem}
.kit .aim{color:var(--ink-2);margin:.5rem 0 0;font-size:.96rem}
.kit .band{font-family:var(--f-mono);font-size:.8rem;letter-spacing:.02em;color:var(--on-hivis);background:var(--hivis);display:inline-block;padding:.3rem .55rem;border-radius:2px;margin:.9rem 0 0;align-self:flex-start}
.kit ul{list-style:none;margin:1rem 0 0;padding:0;border-top:1px solid var(--line-soft)}
.kit li{padding:.6rem 0;border-bottom:1px solid var(--line-soft);font-size:.95rem}
.kit li b{display:block;font-weight:600}
.kit li span{color:var(--ink-2);font-size:.88rem}
.kit .extra{margin-top:1rem;color:var(--ink-2);font-size:.92rem}
.kit .part::after{content:" · part";font-family:var(--f-mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:400}

.specs{border-top:1px solid var(--line)}
.spec{display:grid;grid-template-columns:minmax(0,14rem) minmax(0,1fr);gap:1.5rem;padding:1rem .25rem;border-bottom:1px solid var(--line-soft)}
.spec dt{font-weight:600}
.spec dd{margin:0;color:var(--ink-2)}
@media (max-width:640px){.spec{grid-template-columns:1fr;gap:.3rem}}

.sched{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));padding-top:1.5rem}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:1.25rem}
.card h3{font-size:1.05rem;display:flex;align-items:baseline;gap:.6rem}
.card h3 span{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.1em;color:var(--ink-3);margin-left:auto}
.card ul{margin:.9rem 0 0;padding:0;list-style:none}
.card li{padding:.5rem 0 .5rem 1.4rem;border-top:1px solid var(--line-soft);position:relative;color:var(--ink-2);font-size:.95rem}
.card li::before{content:"";position:absolute;left:0;top:1.05rem;width:9px;height:9px;border:1.5px solid var(--ink-3);border-radius:1px}

/* ---------------------------------------------------------------- calculator */

.calc{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:1.5rem;display:grid;gap:1.5rem;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media (max-width:760px){.calc{grid-template-columns:1fr}}
.field{display:block;margin-bottom:1.1rem}
.field .lbl{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);display:flex;justify-content:space-between;margin-bottom:.4rem}
.field .lbl b{color:var(--ink);font-weight:600;font-size:.8rem;letter-spacing:0}
.field input[type=range]{width:100%;accent-color:var(--blue)}
.field select,.field input[type=number]{
  width:100%;padding:.6rem .7rem;border:1px solid var(--line);border-radius:var(--r);
  background:var(--steel);color:var(--ink);font:inherit;font-size:.95rem;
}
.segs{display:flex;gap:.4rem;flex-wrap:wrap}
.seg{
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;
  border:1px solid var(--line);background:var(--steel);border-radius:100px;padding:.4rem .75rem;
}
.seg[aria-pressed="true"]{background:var(--ink);color:var(--steel);border-color:var(--ink)}
.readout{background:var(--sunk);border-radius:var(--r);padding:1.25rem;display:flex;flex-direction:column;justify-content:center}
.psi{display:flex;gap:2rem;flex-wrap:wrap}
.psi div{flex:1;min-width:110px}
.psi .k{font-family:var(--f-mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.psi .v{font-family:var(--f-display);font-size:clamp(2.2rem,6vw,3.2rem);font-weight:700;font-stretch:115%;line-height:1;letter-spacing:-.03em}
.psi .u{font-family:var(--f-mono);font-size:.7rem;color:var(--ink-2)}
.readout .cap{margin:1.1rem 0 0;font-size:.88rem;color:var(--ink-2)}

/* ---------------------------------------------------------------- footer */

.foot{border-top:1px solid var(--line);padding:2rem 0 3rem;color:var(--ink-3);font-size:.86rem}
.foot p{max-width:65ch}
.foot a{color:var(--ink-2)}
.foot .provenance{margin-top:1.25rem;padding:.9rem 1.1rem;background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--hivis);border-radius:0 var(--r) var(--r) 0;color:var(--ink-2)}
.foot .provenance b{display:block;font-family:var(--f-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.25rem}
.foot .provenance strong{color:var(--ink)}

/* ================================================================ scenes */

/* Base paint is set on the root and inherits, so element rules below win on
   specificity alone. Anything transformed also gets transform-box explicitly. */
.scene{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.scene [class]{transform-box:view-box}
.scene .thin,.scene .spokes,.scene .spoke-line{stroke-width:1.2;stroke:var(--line)}
.scene .cog-out{fill:var(--paper);stroke:var(--ink)}
.scene .rim-line{stroke-width:2.2;stroke:var(--ink)}
.scene .hub,.scene .fill-ink{fill:var(--ink)}
.scene .scene-label{font-family:var(--f-mono);font-size:8px;letter-spacing:.14em;fill:var(--ink-3);stroke:none}
.scene text{stroke:none}

.callout{opacity:0;transition:opacity .35s}
.callout path{stroke:var(--ink-3);stroke-width:1;stroke-dasharray:3 3;fill:none}
.callout circle{fill:var(--ink);stroke:none}
.callout text{font-family:var(--f-mono);font-size:8.5px;letter-spacing:.06em;fill:var(--ink);stroke:none}
.dim{opacity:0;transition:opacity .35s}
.dim path{stroke:var(--ink-3);stroke-width:1;fill:none}
.dim text{font-family:var(--f-mono);font-size:8px;fill:var(--ink-3);letter-spacing:.08em;stroke:none}

/* wheelOut */
.wo-wheel,.wo-qr{transition:transform .8s cubic-bezier(.4,0,.2,1),opacity .4s}
[data-scene=wheelOut][data-frame="1"] .wo-wheel{transform:translate(-34px,66px) rotate(-9deg);transform-origin:128px 170px}
[data-scene=wheelOut][data-frame="1"] .wo-qr{opacity:0}
[data-scene=wheelOut][data-frame="0"] .c-b{opacity:1}
[data-scene=wheelOut][data-frame="1"] .c-a{opacity:1}

/* tyreSection */
.ts-tyre{transform-origin:132px 128px;transition:transform .7s cubic-bezier(.4,0,.2,1)}
.ts-tyre .casing{stroke-width:17;stroke:var(--ink)}
.ts-tyre .bead{fill:var(--paper);stroke-width:2}
.ts-tyre .tread{stroke-width:1.8;stroke:var(--ink-3)}
.ts-tube,.ts-tube-new{fill:var(--blue-soft);stroke:var(--blue);stroke-width:2;transform-origin:210px 108px;transition:transform .6s,opacity .4s}
.ts-tube-new{opacity:0}
.ts-valve,.ts-valve-nut{stroke:var(--ink);stroke-width:3;transition:transform .4s}
.ts-valve-nut{fill:var(--paper);stroke-width:1.6}
.ts-lever path{fill:var(--hivis);stroke:var(--on-hivis);stroke-width:1.8}
.ts-lever{opacity:0;transform-origin:292px 118px;transition:opacity .3s,transform .5s}
.ts-shard path{fill:var(--ink-3);stroke:none}
.ts-shard{opacity:.35;transform-origin:266px 78px;transition:opacity .3s}
.ts-hand{opacity:0;stroke:var(--ink-3);stroke-width:2.4;transition:opacity .3s}
.scene .rim{stroke-width:4}
.scene .rim-hook{stroke-width:2}
.scene .rim-tape{stroke:var(--rust);stroke-width:3}

[data-scene=tyreSection][data-frame="0"] .dim{opacity:1}
[data-scene=tyreSection][data-frame="1"] .ts-tube,
[data-scene=tyreSection][data-frame="2"] .ts-tube{transform:scale(.84,.6)}
[data-scene=tyreSection][data-frame="1"] .ts-valve-nut{transform:translateY(10px)}
[data-scene=tyreSection][data-frame="1"] .c-well,
[data-scene=tyreSection][data-frame="2"] .c-well,
[data-scene=tyreSection][data-frame="6"] .c-well{opacity:1}
[data-scene=tyreSection][data-frame="2"] .ts-tyre,
[data-scene=tyreSection][data-frame="3"] .ts-tyre,
[data-scene=tyreSection][data-frame="4"] .ts-tyre,
[data-scene=tyreSection][data-frame="5"] .ts-tyre{transform:rotate(-26deg)}
[data-scene=tyreSection][data-frame="2"] .ts-lever,
[data-scene=tyreSection][data-frame="3"] .ts-lever{opacity:1}
[data-scene=tyreSection][data-frame="2"] .ts-lever-1{transform:rotate(-46deg)}
[data-scene=tyreSection][data-frame="2"] .ts-lever-2{transform:rotate(-72deg)}
[data-scene=tyreSection][data-frame="3"] .ts-tube{transform:translate(74px,-64px) scale(.7);opacity:0}
[data-scene=tyreSection][data-frame="4"] .ts-tube,
[data-scene=tyreSection][data-frame="5"] .ts-tube,
[data-scene=tyreSection][data-frame="6"] .ts-tube,
[data-scene=tyreSection][data-frame="7"] .ts-tube{opacity:0;transform:translate(74px,-64px)}
[data-scene=tyreSection][data-frame="4"] .ts-shard{opacity:1;animation:blink 1.4s ease-in-out infinite}
[data-scene=tyreSection][data-frame="4"] .ts-shard path{fill:var(--rust)}
[data-scene=tyreSection][data-frame="4"] .ts-hand{opacity:1;animation:sweep 2.4s ease-in-out infinite}
[data-scene=tyreSection][data-frame="4"] .c-shard{opacity:1}
[data-scene=tyreSection][data-frame="5"] .ts-shard,
[data-scene=tyreSection][data-frame="6"] .ts-shard,
[data-scene=tyreSection][data-frame="7"] .ts-shard{opacity:0}
[data-scene=tyreSection][data-frame="5"] .ts-tube-new,
[data-scene=tyreSection][data-frame="6"] .ts-tube-new{opacity:1;transform:scale(.86,.66)}
[data-scene=tyreSection][data-frame="7"] .ts-tube-new{opacity:1;transform:scale(1)}

@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes sweep{0%{transform:translateX(0)}50%{transform:translateX(50px)}100%{transform:translateX(0)}}

/* gauge */
.gauge-face{fill:var(--paper);stroke:var(--ink);stroke-width:2.4}
.gauge-ticks path{stroke:var(--ink-3);stroke-width:1.4;fill:none}
.gauge-arc-ok{stroke:var(--hivis);stroke-width:7;fill:none}
.gauge-arc-hi{stroke:var(--rust);stroke-width:7;fill:none}
.gauge-needle{transform-origin:210px 140px;transition:transform 1s cubic-bezier(.34,1.3,.5,1)}
.gauge-needle path{stroke:var(--ink);stroke-width:3.4;fill:none}
.gauge-needle circle{fill:var(--ink);stroke:none}
.gauge-read{font-family:var(--f-mono);font-size:9px;letter-spacing:.16em;fill:var(--ink-3)}
[data-scene=gauge][data-frame="0"] .gauge-needle{transform:rotate(68deg)}
[data-scene=gauge][data-frame="1"] .gauge-needle{transform:rotate(-8deg)}
[data-scene=gauge][data-frame="2"] .gauge-needle{transform:rotate(-26deg)}
[data-scene=gauge][data-frame="3"] .gauge-needle{transform:rotate(-34deg)}
[data-scene=gauge][data-frame="4"] .gauge-needle{transform:rotate(-14deg)}
[data-scene=gauge][data-frame="0"] .c-max{opacity:1}
[data-scene=gauge][data-frame="1"] .c-target,
[data-scene=gauge][data-frame="2"] .c-target,
[data-scene=gauge][data-frame="3"] .c-target,
[data-scene=gauge][data-frame="4"] .c-target{opacity:1}

/* saddle */
.sd-saddle path{fill:var(--ink);stroke:none}
.sd-saddle{transform-origin:214px 50px;transition:transform .6s}
.sd-post{transition:transform .6s}
.sd-post .post{stroke-width:5}
.sd-leg{opacity:0;transition:opacity .4s;stroke-width:3}
.sd-leg circle{fill:var(--paper)}
.sd-leg .foot{stroke-width:4}
.sd-plumb,.sd-level{opacity:0;transition:opacity .35s}
.sd-plumb path{stroke:var(--hivis);stroke-width:2.6;stroke-dasharray:5 4}
.sd-level path{stroke:var(--blue);stroke-width:2;stroke-dasharray:6 4}
.sd-tape rect{fill:var(--hivis);stroke:var(--on-hivis);stroke-width:1.2}
.sd-tape{opacity:0;transition:opacity .35s}
.sd-crank{transform-origin:150px 196px}
.sd-crank rect{fill:var(--ink)}
[data-scene=saddle][data-frame="0"] .sd-saddle{animation:settle 2.6s ease-in-out infinite}
[data-scene=saddle][data-frame="0"] .sd-level,
[data-scene=saddle][data-frame="0"] .c-tilt{opacity:1}
[data-scene=saddle][data-frame="0"] .sd-tape,
[data-scene=saddle][data-frame="4"] .sd-tape{opacity:1}
[data-scene=saddle][data-frame="1"] .sd-leg-heel{opacity:1}
[data-scene=saddle][data-frame="1"] .c-hip{opacity:1}
[data-scene=saddle][data-frame="1"] .sd-post{transform:translateY(-9px)}
[data-scene=saddle][data-frame="2"] .sd-post,
[data-scene=saddle][data-frame="3"] .sd-post,
[data-scene=saddle][data-frame="4"] .sd-post{transform:translateY(-5px)}
[data-scene=saddle][data-frame="2"] .sd-leg-ball,
[data-scene=saddle][data-frame="3"] .sd-leg-ball,
[data-scene=saddle][data-frame="4"] .sd-leg-ball{opacity:1}
[data-scene=saddle][data-frame="2"] .c-knee{opacity:1}
[data-scene=saddle][data-frame="1"] .sd-crank,
[data-scene=saddle][data-frame="2"] .sd-crank{animation:spin 3.4s linear infinite}
[data-scene=saddle][data-frame="3"] .sd-plumb{opacity:1}
[data-scene=saddle][data-frame="4"] .c-mark{opacity:1}
@keyframes settle{0%,100%{transform:rotate(-7deg)}55%,80%{transform:rotate(0)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* chain */
.ch-links .roller{fill:var(--paper);stroke:var(--ink);stroke-width:2}
.ch-links .plate{stroke:var(--ink);stroke-width:2}
.ch-links{transition:none}
.ch-dirt circle{fill:var(--ink-2);stroke:none;opacity:.9}
.ch-dirt{transition:opacity .4s}
.ch-drips circle{fill:var(--blue);stroke:none;opacity:0}
.ch-rag rect{fill:var(--paper);stroke:var(--ink);stroke-width:2}
.ch-rag path{stroke:var(--ink-3);stroke-width:1.4}
.ch-rag,.ch-brush{opacity:0;transition:opacity .35s}
.ch-brush rect{fill:var(--ink);stroke:none}
.ch-brush path{stroke:var(--ink);stroke-width:2}
[data-scene=chain][data-frame="0"] .ch-links,
[data-scene=chain][data-frame="2"] .ch-links,
[data-scene=chain][data-frame="3"] .ch-links{animation:march 1.6s linear infinite}
[data-scene=chain][data-frame="0"] .ch-rag{opacity:1;animation:shake .5s ease-in-out infinite}
[data-scene=chain][data-frame="3"] .ch-rag{opacity:1;animation:wipe 3.4s ease-in-out infinite}
[data-scene=chain][data-frame="1"] .ch-brush{opacity:1;animation:shake .35s ease-in-out infinite}
[data-scene=chain][data-frame="2"] .ch-dirt,
[data-scene=chain][data-frame="3"] .ch-dirt{opacity:0}
[data-scene=chain][data-frame="2"] .ch-drips circle{animation:drip 1.8s ease-in infinite;animation-delay:calc(var(--i)*.22s)}
[data-scene=chain][data-frame="2"] .c-roller{opacity:1}
[data-scene=chain][data-frame="3"] .c-plate{opacity:1}
@keyframes march{to{transform:translateX(-34px)}}
@keyframes shake{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
@keyframes wipe{0%{transform:translateX(-110px)}100%{transform:translateX(190px)}}
@keyframes drip{0%{opacity:0;transform:translateY(0)}20%{opacity:1}75%{opacity:1;transform:translateY(36px)}76%,100%{opacity:0;transform:translateY(36px)}}

/* brake */
.scene .track{stroke:var(--ink-3);stroke-width:1.4;stroke-dasharray:4 4}
.scene .tyre-edge{stroke:var(--ink);stroke-width:5}
.bk-pad rect{fill:var(--ink);stroke:none;transition:none}
.bk-pad .groove{stroke:var(--paper);stroke-width:1.6;opacity:1;transition:opacity .3s}
.bk-pad{transition:transform .6s cubic-bezier(.4,0,.2,1)}
.bk-pad-l{transform-origin:180px 125px}
.bk-pad-r{transform-origin:240px 125px}
.bk-arm{transition:transform .5s}
.bk-arm circle{fill:var(--paper)}
.bk-gap{opacity:0;transition:opacity .35s}
.bk-gap .callout{opacity:1}
[data-scene=brake][data-frame="0"] .bk-pad{transform:translateY(-36px) scaleY(.55)}
[data-scene=brake][data-frame="0"] .bk-pad .groove{opacity:0}
[data-scene=brake][data-frame="0"] .c-wear{opacity:1}
[data-scene=brake][data-frame="0"] .c-tyre,
[data-scene=brake][data-frame="1"] .c-tyre{opacity:1}
[data-scene=brake][data-frame="2"] .bk-pad-l{transform:rotate(3deg)}
[data-scene=brake][data-frame="2"] .bk-pad-r{transform:rotate(-3deg)}
[data-scene=brake][data-frame="2"] .c-toe{opacity:1}
[data-scene=brake][data-frame="3"] .bk-gap{opacity:1}
[data-scene=brake][data-frame="4"] .bk-arm-l{animation:squeeze-l 1.8s ease-in-out infinite}
[data-scene=brake][data-frame="4"] .bk-arm-r{animation:squeeze-r 1.8s ease-in-out infinite}
[data-scene=brake][data-frame="4"] .bk-pad-l{animation:squeeze-l 1.8s ease-in-out infinite}
[data-scene=brake][data-frame="4"] .bk-pad-r{animation:squeeze-r 1.8s ease-in-out infinite}
@keyframes squeeze-l{0%,100%{transform:translateX(0)}50%{transform:translateX(8px)}}
@keyframes squeeze-r{0%,100%{transform:translateX(0)}50%{transform:translateX(-8px)}}

/* gears */
.scene .axle{stroke:var(--ink-3);stroke-width:2}
.gr-cogs .cog{fill:var(--paper);stroke:var(--ink);stroke-width:2}
.gr-chain rect{fill:var(--hivis);stroke:var(--on-hivis);stroke-width:2}
.gr-chain{transition:transform .5s cubic-bezier(.4,0,.2,1)}
.gr-barrel circle{fill:var(--paper);stroke:var(--ink);stroke-width:2.4}
.gr-barrel .knurl{stroke:var(--ink-3);stroke-width:1.6}
.gr-barrel .mark{stroke:var(--ink);stroke-width:2.4}
.gr-barrel{transform-origin:62px 196px}
.gr-jockey circle{fill:var(--paper);stroke:var(--ink);stroke-width:2}
.gr-jockey{transform-origin:312px 196px;transition:transform .5s}
[data-scene=gears][data-frame="0"] .c-small{opacity:1}
[data-scene=gears][data-frame="1"] .gr-chain{transform:translateX(-13px);animation:jitter .3s ease-in-out infinite}
[data-scene=gears][data-frame="2"] .gr-chain{transform:translateX(-26px)}
[data-scene=gears][data-frame="2"] .gr-barrel{animation:spin 4s linear infinite}
[data-scene=gears][data-frame="2"] .gr-barrel circle{fill:var(--hivis);stroke:var(--on-hivis)}
[data-scene=gears][data-frame="2"] .gr-barrel path{stroke:var(--on-hivis)}
[data-scene=gears][data-frame="3"] .gr-chain{animation:sweep-cogs 5s ease-in-out infinite}
[data-scene=gears][data-frame="4"] .gr-jockey{transform:rotate(-14deg)}
[data-scene=gears][data-frame="4"] .c-hanger{opacity:1}
@keyframes jitter{0%,100%{transform:translateX(-13px)}50%{transform:translateX(-9px)}}
@keyframes sweep-cogs{0%,100%{transform:translateX(0)}50%{transform:translateX(-182px)}}

/* ruler */
.rl-chain .roller{fill:var(--paper);stroke:var(--ink);stroke-width:2}
.rl-chain .plate{stroke:var(--ink);stroke-width:2}
.rl-shift{transition:transform .6s}
.rl-ruler rect{fill:var(--paper);stroke:var(--ink);stroke-width:2}
.rl-ruler .ticks path{stroke:var(--ink);stroke-width:1.2}
.rl-ruler text{font-family:var(--f-mono);font-size:9px;fill:var(--ink);stroke:none}
.rl-drift{opacity:0;transition:opacity .3s}
.rl-drift path{stroke:var(--rust);stroke-width:2.4;stroke-dasharray:4 3}
[data-scene=ruler][data-frame="0"] .c-zero,
[data-scene=ruler][data-frame="1"] .c-zero{opacity:1}
[data-scene=ruler][data-frame="2"] .rl-shift,
[data-scene=ruler][data-frame="3"] .rl-shift{transform:translateX(9px)}
[data-scene=ruler][data-frame="2"] .rl-drift,
[data-scene=ruler][data-frame="3"] .rl-drift{opacity:1}
[data-scene=ruler][data-frame="2"] .c-past,
[data-scene=ruler][data-frame="3"] .c-past{opacity:1}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}