/* cartiresize.com v1 (2026-10-14). ASCII only.
   The sidewall is the interface: a band of rubber, the size code in raised letters, the yellow balance dot as the one
   accent. Bricolage Grotesque for the code and headings, Public Sans for reading. Fonts served from our own server. */
@font-face{font-family:"Bricolage";src:url(fonts/bricolage-grotesque-latin-wght-normal.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Public Sans";src:url(fonts/public-sans-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-display:swap}

:root{
  --paper:#eef0f1; --card:#fff; --ink:#1e2023; --muted:#575d64; --line:#d3d7db; --soft:#e2e5e8;
  --rubber:#1e2023; --rubber2:#272a2e; --tread:#383c42; --side:#c3c8ce; --side2:#8d939a;
  --dot:#f5c518; --dot2:#e0ae00; --red:#c8322f;
  --display:"Bricolage",ui-sans-serif,system-ui,sans-serif; --text:"Public Sans",ui-sans-serif,system-ui,sans-serif;
  --r:10px; --wrap:1120px; --read:720px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{--paper:#17191b; --card:#202326; --ink:#eceef0; --muted:#a6acb3; --line:#34393e; --soft:#26292d; color-scheme:dark}
  .brand .logo{background:#eef0f1;border-radius:10px;padding:3px 5px}
}
*{box-sizing:border-box}
html,body{overflow-x:clip}
html{-webkit-text-size-adjust:100%;scroll-padding-top:5rem}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.6 var(--text);font-variant-numeric:tabular-nums}
a{color:inherit;text-decoration-thickness:2px;text-underline-offset:3px;text-decoration-color:var(--dot2)}
a:hover{text-decoration-color:currentColor}
:focus-visible{outline:3px solid var(--dot);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:1rem;top:1rem;z-index:50;background:var(--dot);color:var(--rubber);padding:.5rem .9rem;border-radius:6px}
h1,h2,h3{font-family:var(--display);line-height:1.08;letter-spacing:-.015em;margin:0 0 .6rem}
h2{font-size:clamp(1.45rem,2.6vw,1.9rem);font-weight:700;margin-top:2.6rem}
p{margin:0 0 1rem}
.fine{font-size:.88rem;color:var(--muted)}
.bar{max-width:var(--wrap);margin:0 auto;padding:0 1rem}

/* ---- top bar ---- */
.top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top .bar{display:flex;align-items:center;gap:1.4rem;min-height:4.2rem}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;flex:none}
.brand .logo{height:58px;width:auto;flex:none;display:block}
.brand span{font:800 1.32rem/1 var(--display);letter-spacing:-.03em}
.brand b{font-weight:800;color:var(--paper);background:var(--ink);padding:.06em .22em .1em;margin:0 .1em;border-radius:4px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.hsearch{flex:1 1 200px;max-width:320px;display:flex;align-items:stretch;background:var(--card);border:2px solid var(--ink);border-radius:999px;overflow:hidden}
.hsearch:focus-within{box-shadow:0 0 0 3px var(--dot)}
.hsearch input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font:500 .98rem/1.2 var(--text);padding:.6rem .2rem .6rem 1rem;outline:none}
.hsearch input::placeholder{color:var(--muted)}
.hsearch button{border:0;background:var(--dot);color:var(--rubber);font:800 .95rem/1 var(--display);padding:0 1.05rem;cursor:pointer}
.hsearch button:hover{background:#ffd43a}
.nav{display:flex;gap:.2rem;overflow-x:auto;scrollbar-width:none;margin-left:auto;min-width:0}
.nav::-webkit-scrollbar{display:none}
.nav a{white-space:nowrap;text-decoration:none;font:600 .95rem/1 var(--text);padding:.65rem .55rem;border-radius:8px;color:var(--muted)}
.nav a:hover{color:var(--ink);background:var(--soft)}
.nav a[aria-current]{color:var(--ink);box-shadow:inset 0 -3px 0 var(--dot)}

/* ---- the sidewall hero ---- */
.hero{position:relative;background:var(--rubber);color:#f1f2f3;overflow:hidden;isolation:isolate;
  padding:3.4rem 1rem 13rem}
.hero.short{padding-bottom:11rem}
.arc{position:absolute;left:0;right:0;bottom:0;width:100%;height:300px;z-index:-1}
.arc .rubber{fill:#26292d}
.arc .tread{fill:#1a1c1f;stroke:#2c3034;stroke-width:26;stroke-dasharray:18 12}
.arc .emb{fill:#33373c;font:800 30px var(--display);letter-spacing:5px}
.hero-in{max-width:880px;margin:0 auto;text-align:center}
.hero h1{font-size:clamp(2.3rem,6.2vw,4.4rem);font-weight:800;letter-spacing:-.035em;color:#f4f5f6;
  text-shadow:0 2px 0 rgba(0,0,0,.45)}
.lead{font-size:1.14rem;color:var(--muted);max-width:var(--read)}
.hero .lead{color:#b4bac1;margin:0 auto 1.8rem}

/* mode switch */
.modes{display:inline-flex;gap:.3rem;padding:.3rem;background:#121416;border-radius:999px;margin-bottom:1.4rem}
.modes button{border:0;background:none;color:#b4bac1;font:700 1rem/1 var(--text);padding:.75rem 1.2rem;border-radius:999px;cursor:pointer}
.modes button[aria-selected="true"]{background:var(--dot);color:var(--rubber)}

/* by car */
.carform .pick{display:grid;grid-template-columns:1fr 1.3fr 1.6fr;gap:.7rem;text-align:left}
.carform label span{display:block;font:600 .8rem/1 var(--text);color:#9aa1a8;margin:0 0 .45rem .2rem;letter-spacing:.02em}
.carform select{width:100%;appearance:none;-webkit-appearance:none;background:#2a2d31;color:#f1f2f3;border:1px solid #3c4147;
  border-radius:var(--r);padding:.95rem 2.2rem .95rem 1rem;font:600 1.12rem/1.2 var(--text);cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--dot) 50%),linear-gradient(135deg,var(--dot) 50%,transparent 50%);
  background-position:calc(100% - 1.25rem) 52%,calc(100% - .9rem) 52%;background-size:.36rem .36rem;background-repeat:no-repeat}
.carform select:disabled{opacity:.5;cursor:not-allowed}
.carform .note{font-size:.82rem;color:#8a9199;margin:.9rem 0 0}

/* by size: the code in raised letters */
.code{border:0;margin:0 auto;padding:0;min-width:0}
.code legend{font:600 .82rem/1 var(--text);color:#9aa1a8;margin:0 auto .8rem;letter-spacing:.02em}
.emboss{display:flex;align-items:flex-start;justify-content:center;gap:.35rem}
.seg{position:relative;display:flex;flex-direction:column;align-items:center}
.seg select{appearance:none;-webkit-appearance:none;background:transparent;border:0;border-bottom:4px dashed #41464c;
  color:var(--side);font:800 clamp(2.9rem,9vw,5.6rem)/1.05 var(--display);letter-spacing:-.03em;text-align:center;text-align-last:center;
  padding:0 .12em .05em;cursor:pointer;text-shadow:-1px -1px 0 rgba(255,255,255,.2),2px 3px 0 rgba(0,0,0,.65)}
.seg select:hover{color:#e1e4e7;border-bottom-color:var(--dot)}
.seg select option{font:500 1rem var(--text);color:var(--ink);background:var(--card)}
.seg small{font:600 .76rem/1.2 var(--text);color:#8b929a;margin-top:.5rem;max-width:9em}
.sep{font:800 clamp(2.6rem,8vw,5rem)/1.1 var(--display);color:#767d84;padding-top:.05em}
.cond{border:0;margin:1.4rem auto 0;padding:0;display:flex;justify-content:center;gap:.4rem;flex-wrap:wrap}
.cond legend{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.cond input{position:absolute;opacity:0}
.cond span{display:block;padding:.5rem 1rem;border:1px solid #454a50;border-radius:999px;color:#c8cdd2;font:600 .92rem/1 var(--text);cursor:pointer}
.cond input:checked+span{border-color:var(--dot);color:var(--dot);background:rgba(245,197,24,.08)}
.cond input:focus-visible+span{outline:3px solid var(--dot);outline-offset:2px}
.go{display:inline-block;margin-top:1.5rem;border:0;background:var(--dot);color:var(--rubber);cursor:pointer;
  font:800 1.12rem/1 var(--display);letter-spacing:-.01em;padding:1.05rem 2.1rem;border-radius:var(--r);
  box-shadow:0 4px 0 var(--dot2)}
.go:hover{background:#ffd43a}
.go:active{transform:translateY(2px);box-shadow:0 2px 0 var(--dot2)}
.quick{margin:1.8rem 0 0;color:#8b929a;font-size:.88rem;display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;justify-content:center}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;margin:0;padding:0;justify-content:center}
.chips a{display:block;padding:.35rem .7rem;border-radius:6px;background:#2a2d31;color:#d9dde1;text-decoration:none;font:700 .9rem/1 var(--display)}
.chips a:hover{background:#34383d;color:#fff}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.two .seg select{font-size:clamp(2.1rem,5.2vw,3.6rem)}
.two .sep{font-size:clamp(1.9rem,4.8vw,3.3rem)}

/* flat sizer (inside pages) */
.sizer.flat{background:var(--rubber);border-radius:16px;padding:1.6rem 1rem 1.8rem;text-align:center}
.sizer.flat .seg select{font-size:clamp(2.2rem,7vw,3.8rem)}
.sizer.flat .sep{font-size:clamp(2rem,6vw,3.4rem)}

/* ---- results ---- */
.out{max-width:var(--wrap);margin:0 auto;padding:0 1rem}
.out:empty{display:none}
.out .live{margin-top:-5.5rem;position:relative;z-index:2}
.page .out .live,.usedsizer+.out .live{margin-top:1.5rem}
.plate{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 18px 40px -24px rgba(0,0,0,.45)}
.plate header{background:var(--rubber);color:#f1f2f3;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.4rem 1rem;padding:1.1rem 1.4rem}
.plate header h2{margin:0;font-size:clamp(1.6rem,4vw,2.4rem);font-weight:800;color:var(--side);text-shadow:-1px -1px 0 rgba(255,255,255,.18),2px 2px 0 rgba(0,0,0,.6)}
.plate header p{margin:0;color:#a9afb6;font-size:.95rem}
.plate .body{padding:1.3rem 1.4rem 1.5rem}
.plain{list-style:none;margin:0 0 1.3rem;padding:0;display:grid;gap:.5rem}
.plain li{display:grid;grid-template-columns:4.2rem 1fr;gap:.8rem;align-items:baseline}
.plain b{font:800 1.3rem/1 var(--display);text-align:right}
.specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0;margin:0;border-top:1px solid var(--line)}
.specs div{padding:.9rem .2rem .7rem;border-bottom:1px solid var(--line)}
.specs dt{font-size:.84rem;color:var(--muted)}
.specs dd{margin:.15rem 0 0;font:800 1.55rem/1.1 var(--display)}
.specs dd small{font:500 .9rem var(--text);color:var(--muted);margin-left:.3rem}
.cmp{width:100%;border-collapse:collapse;font-size:1rem}
.cmp th,.cmp td{padding:.7rem .5rem;border-bottom:1px solid var(--line);text-align:right}
.cmp th:first-child{text-align:left;font-weight:500;color:var(--muted)}
.cmp thead th{font:800 1.15rem/1.1 var(--display);color:var(--ink)}
.cmp .up{color:var(--red)} .cmp .same{color:var(--muted)}
.speedo{display:flex;align-items:center;gap:1rem;margin:1.4rem 0 .4rem;padding:1rem 1.1rem;border-radius:12px;background:var(--soft)}
.speedo strong{font:800 2.4rem/1 var(--display)}
.sizes{display:flex;flex-wrap:wrap;gap:.5rem;margin:.2rem 0 1.2rem;padding:0;list-style:none}
.sizes button{border:2px solid var(--ink);background:none;color:var(--ink);font:800 1.15rem/1 var(--display);padding:.55rem .85rem;border-radius:8px;cursor:pointer}
.sizes button:hover,.sizes button[aria-pressed="true"]{background:var(--dot);border-color:var(--dot);color:var(--rubber)}
.hint{font-size:.94rem;color:var(--muted)}
.loading{color:var(--muted);padding:.4rem 0}

/* listings */
.adlabel{display:flex;align-items:center;gap:.5rem;font-size:.82rem;color:var(--muted);margin:1.6rem 0 .7rem}
.items{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:.9rem}
.tile{display:flex;flex-direction:column;height:100%;text-decoration:none;background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.tile:hover{border-color:var(--ink)}
.tile .ph{display:block;aspect-ratio:1;background:#fff}
.tile .ph img{width:100%;height:100%;object-fit:contain;display:block}
.tile .ph.none{background:var(--soft)}
.tile .sz{align-self:flex-start;margin:.7rem .8rem 0;background:var(--dot);color:var(--rubber);font:800 .82rem/1 var(--display);padding:.28rem .45rem;border-radius:5px}
.tile .t{padding:.5rem .8rem 0;font-size:.9rem;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tile .p{padding:.35rem .8rem 0;font:800 1.2rem/1.2 var(--display)}
.tile .gox{margin-top:auto;padding:.55rem .8rem .8rem;font-size:.85rem;color:var(--muted);text-decoration:underline;text-decoration-color:var(--dot2)}
.direct{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.2rem;margin:1.3rem 0 .4rem}
.direct a{display:inline-block;background:var(--ink);color:var(--paper);text-decoration:none;font:700 1rem/1 var(--text);padding:.85rem 1.2rem;border-radius:var(--r)}
.direct a:hover{background:#000}
.aff{font-size:.82rem;color:var(--muted);margin:.6rem 0 0}

/* ---- reading pages ---- */
.page{max-width:var(--read);margin:0 auto;padding:2.6rem 1rem 3rem}
.page.wide{max-width:var(--wrap)}
.title h1{font-size:clamp(2.1rem,5.4vw,3.4rem);font-weight:800;letter-spacing:-.03em}
.places{margin:0;padding:0;list-style:none;counter-reset:p;display:grid;gap:1rem}
.places li{counter-increment:p;position:relative;padding-left:3rem}
.places li::before{content:counter(p);position:absolute;left:0;top:-.1rem;width:2.1rem;height:2.1rem;border-radius:50%;
  background:var(--rubber);color:var(--dot);font:800 1.05rem/2.1rem var(--display);text-align:center}
.more{font-weight:700}
.sell{padding-left:1.2rem} .sell li{margin:.45rem 0}
.check{list-style:none;padding:0;margin:1.2rem 0 2rem;display:grid;gap:.55rem}
.check label{display:flex;gap:.8rem;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:.9rem 1rem;cursor:pointer}
.check input{width:1.3rem;height:1.3rem;margin-top:.15rem;accent-color:var(--dot2);flex:none}
.check input:checked+span{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--dot2)}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--card)}
table.chart{width:100%;border-collapse:collapse;min-width:560px}
table.chart caption{text-align:left;padding:.9rem 1rem;font-size:.9rem;color:var(--muted)}
table.chart th,table.chart td{padding:.65rem 1rem;border-top:1px solid var(--line);text-align:right}
table.chart thead th{background:var(--rubber);color:#e6e8ea;font:600 .88rem/1.2 var(--text);border-top:0}
table.chart th[scope=row]{text-align:left;font:800 1.08rem var(--display)}
table.chart thead th:first-child{text-align:left}
table.chart tbody tr:hover{background:var(--soft)}
.keys{border-collapse:collapse;width:100%;max-width:420px}
.keys th,.keys td{padding:.5rem .8rem;border-bottom:1px solid var(--line);text-align:left}
.keys tbody th{font:800 1.2rem var(--display)}
.decode{margin:1.6rem 0 2rem;background:var(--rubber);color:#eceef0;border-radius:16px;padding:1.6rem 1.2rem}
.code-big{font:800 clamp(2.2rem,8vw,4.2rem)/1 var(--display);color:var(--side);text-align:center;letter-spacing:-.02em;
  text-shadow:-1px -1px 0 rgba(255,255,255,.2),2px 3px 0 rgba(0,0,0,.65);margin-bottom:1.4rem;white-space:nowrap;overflow-x:auto}
.code-big span{border-bottom:4px solid #444a50;padding:0 .02em}
.code-big i{font-style:normal;color:#5d636a}
.parts{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:.4rem 1.2rem;margin:0}
.parts div{display:grid;grid-template-columns:3.4rem 1fr;gap:.6rem;padding:.55rem 0;border-top:1px solid #34383d}
.parts dt{font:800 1.15rem/1.3 var(--display);color:var(--dot)}
.parts dd{margin:0;font-size:.95rem;color:#c4c9ce}
.usedsizer h2{margin-top:1rem}

/* ---- footer ---- */
.foot{border-top:1px solid var(--line);margin-top:3rem;padding:2rem 0 2.6rem;font-size:.86rem;color:var(--muted)}
.foot nav{display:flex;flex-wrap:wrap;gap:1.2rem;margin-bottom:1rem}
.foot nav a{font-weight:600;color:var(--ink)}
.foot p{max-width:820px}
.op{margin-top:1rem}

@media (max-width:760px){
  .top .bar{gap:.6rem;min-height:3.6rem}
  .brand .logo{height:46px}
  .brand span{font-size:1.1rem}
  .nav a{padding:.55rem .5rem;font-size:.88rem}
  .hero{padding:2.2rem 1rem 7rem}
  .carform .pick{grid-template-columns:1fr}
  .pair{grid-template-columns:1fr;gap:1.6rem}
  .emboss{gap:.15rem}
  .plain li{grid-template-columns:3.4rem 1fr}
  .items{grid-template-columns:1fr 1fr;gap:.6rem}
  .hero{padding-bottom:10rem}
  .arc{height:220px}
}
@media (max-width:1180px){
  .top .bar{flex-wrap:wrap;padding-top:.5rem;padding-bottom:.35rem;row-gap:.35rem}
  .hsearch{order:2;max-width:none;flex:1 1 200px}
  .nav{order:3;margin-left:0;width:100%}
}
@media (max-width:520px){
  .top .bar{flex-wrap:wrap;padding-top:.5rem;padding-bottom:.3rem}
  .brand .logo{height:40px}
  .brand span{font-size:1rem}
  .hsearch input{padding-left:.75rem;font-size:.92rem}
  .hsearch button{padding:0 .75rem}
  .nav{margin-left:0;width:100%}
  .go{width:100%}
}
/* ---- accessories (2026-10-14): sub-tabs, cards, facts, steps ---- */
.crumbs{font-size:.88rem;color:var(--muted);margin:0 0 1rem}
.crumbs a{color:var(--muted)}
.subtabs{display:flex;gap:.4rem;overflow-x:auto;padding:.2rem 0 .8rem;margin:0 0 1.4rem;scrollbar-width:thin;
  -webkit-mask-image:linear-gradient(90deg,#000 92%,transparent);mask-image:linear-gradient(90deg,#000 92%,transparent)}
.subtabs a{flex:none;text-decoration:none;font:600 .92rem/1 var(--text);padding:.62rem .95rem;border-radius:999px;
  border:1px solid var(--line);background:var(--card);color:var(--ink);white-space:nowrap}
.subtabs a:hover{border-color:var(--side2)}
.subtabs a[aria-current="page"]{background:var(--rubber);border-color:var(--rubber);color:#f1f2f3;box-shadow:inset 0 -3px 0 var(--dot)}
.acccards{list-style:none;padding:0;margin:1.2rem 0 2rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem}
.acccards a{display:flex;flex-direction:column;gap:.45rem;height:100%;text-decoration:none;background:var(--card);
  border:1px solid var(--line);border-radius:14px;padding:1.15rem 1.2rem 1.1rem;transition:border-color .15s,transform .15s}
.acccards a:hover{border-color:var(--side2);transform:translateY(-2px)}
.acccards strong{font:800 1.18rem/1.15 var(--display);letter-spacing:-.01em}
.acccards span{color:var(--muted);font-size:.95rem;line-height:1.45}
.acccards em{margin-top:auto;font:600 .8rem/1 var(--text);font-style:normal;color:var(--ink);
  border-left:4px solid var(--dot);padding:.2rem 0 .2rem .5rem}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.8rem;margin:1.2rem 0 1.6rem}
.facts div{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:.9rem 1rem}
.facts dt{font-size:.85rem;color:var(--muted);margin:0 0 .3rem}
.facts dd{margin:0;font:800 1.3rem/1.15 var(--display)}
.steps{counter-reset:s;list-style:none;padding:0}
.steps li{counter-increment:s;position:relative;padding:.35rem 0 .35rem 2.6rem;margin:.3rem 0}
.steps li::before{content:counter(s);position:absolute;left:0;top:.2rem;width:1.8rem;height:1.8rem;border-radius:50%;
  background:var(--rubber);color:var(--dot);font:800 .95rem/1.8rem var(--display);text-align:center}
.accfind{margin-top:2.6rem}
.carform.flat{background:var(--rubber);border-radius:16px;padding:1.4rem 1rem 1.6rem;text-align:center}
.carform.flat .go,.sizer.flat .go{margin-top:1.1rem}
.related{margin-top:2.6rem;border-top:1px solid var(--line);padding-top:.4rem}
.related h2{font-size:1.2rem}
.related ul{padding-left:1.2rem}

/* ---- charts: diameter dot plot, tread ruler (one series = one hue, no legend; the table is the accessible view) ---- */
.viz{margin:1.6rem 0 1.4rem;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:1rem 1rem .6rem}
.viz figcaption{font-size:.9rem;color:var(--muted);margin:0 0 .6rem}
.viz svg{width:100%;height:auto;display:block;font-family:var(--text)}
.viz .grid{stroke:var(--line);stroke-width:1}
.viz .tick{fill:var(--muted);font-size:12px}
.viz .grp{fill:var(--ink);font:700 13px var(--display)}
.viz .lab{fill:var(--muted);font-size:12px}
.viz .lead{stroke:var(--soft);stroke-width:2}
.viz .dot{fill:#2a78d6;stroke:var(--card);stroke-width:2}
.viz .hit{fill:transparent}
.viz .pt:hover .dot{r:7}
.viz .pt:hover .lab{fill:var(--ink);font-weight:700}
.viz .pt:hover .lead{stroke:#2a78d6}
.ruler .axis,.ruler .tk{stroke:var(--ink);stroke-width:2}
.ruler .zone.z1{fill:#c8322f} .ruler .zone.z2{fill:#eda100} .ruler .zone.z3{fill:#2e8b57}
.ruler .zl{fill:#fff;font:700 12px var(--text)}
.ruler .zl.dk{fill:#1e2023}
@media (prefers-color-scheme:dark){
  .viz .dot{fill:#3987e5}
  .viz .pt:hover .lead{stroke:#3987e5}
}
@media (max-width:760px){.carform.flat .pick{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* reference charts (2026-10-14): speed bars */
.viz .bar{fill:#2a78d6}
.viz .val{fill:var(--ink);font:600 12px var(--text)}
.viz .pt:hover .bar{fill:#1f5fae}
table.chart.ref{min-width:0}
@media (prefers-color-scheme:dark){.viz .bar{fill:#3987e5}.viz .pt:hover .bar{fill:#5a9df0}}
/* ---- car battery groups (2026-10-15): fit finder, scale drawing ---- */
.batfind{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:1.2rem 1.2rem 1rem;margin:1.4rem 0 2rem}
.batfind h2{margin-top:0}
.fitform{display:grid;grid-template-columns:auto repeat(3,minmax(0,1fr)) auto;gap:.8rem;align-items:end}
.fitform label span{display:block;font:600 .8rem/1 var(--text);color:var(--muted);margin:0 0 .4rem .1rem}
.fitform input:not([type=radio]){width:100%;border:2px solid var(--ink);border-radius:var(--r);padding:.7rem .8rem;font:600 1.1rem var(--text);background:var(--card);color:var(--ink)}
.fitform .unit{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:.3rem;font-size:.95rem}
.fitform .go{margin:0}
.fitlist{list-style:none;padding:0;margin:.8rem 0 0;columns:2 320px;column-gap:2rem}
.fitlist li{break-inside:avoid;padding:.35rem 0;border-bottom:1px solid var(--soft)}
.fitlist a,.fitlist strong{font:800 1.05rem var(--display)}
.fitlist span{color:var(--muted);font-size:.92rem}
.batdraw .box{fill:var(--soft);stroke:var(--ink);stroke-width:2}
.batdraw .post{fill:#2a78d6;stroke:var(--card);stroke-width:2}
@media (prefers-color-scheme:dark){.batdraw .post{fill:#3987e5}}
@media (max-width:760px){.fitform{grid-template-columns:1fr 1fr 1fr}.fitform .unit{grid-column:1/-1;flex-direction:row;gap:1.2rem}.fitform .go{grid-column:1/-1}}
/* photo button in the sticky search (2026-10-15) */
.hphoto{position:relative;display:flex;align-items:center;justify-content:center;flex:none;width:2.6rem;color:var(--ink);cursor:pointer;border-left:1px solid var(--line)}
.hphoto:hover{background:var(--soft)}
.hphoto:focus-within{outline:3px solid var(--dot);outline-offset:-3px}
.hphoto input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.hphoto[hidden]{display:none}
.photoout{scroll-margin-top:7rem;margin-top:1.4rem}
.batdraw .views{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:640px){.batdraw .views{grid-template-columns:1fr}}