@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,500;0,600;0,700;0,800;0,900;1,700;1,800;1,900&family=DM+Sans:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');
:root{--paper:#0b1210;--ink:#eef1e9;--blue:#b7f653;--line:#303b35;--panel:#131e18;--accent:#b7f653;--mono:'Space Mono',monospace;--display:'Barlow Condensed','Arial Narrow',Impact,sans-serif;color-scheme:dark}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',Arial,sans-serif}a{color:inherit}button,input{font:inherit}button,a,input{touch-action:manipulation}button{cursor:pointer}header{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:21px 5%;border-bottom:1px solid var(--line);background:#0b1210} .brand{display:flex;align-items:center;gap:12px;text-decoration:none;font:800 26px/.9 var(--display);letter-spacing:.2px;white-space:nowrap}.brand-mark{color:var(--accent);font-size:44px;letter-spacing:-8px;transform:skew(-10deg);margin-right:8px}.brand-light{font-weight:500}.brand small{display:block;font:8px var(--mono);letter-spacing:1.5px;margin-top:8px;color:#acb7ad}.brand i{font-style:normal;font-weight:bold}.brand i:nth-child(1){color:#f86160}.brand i:nth-child(2){color:#b7f653}.brand i:nth-child(3){color:#6d8eff}nav{display:flex;gap:30px}nav a,.header-cta{font:10px var(--mono);text-decoration:none;letter-spacing:1px}nav a{color:#abb4ad}.header-cta{padding:12px 15px;border:1px solid #536348}.hero{position:relative;min-height:720px;background-image:linear-gradient(90deg,#07100fec 0%,#09120fac 31%,#09120f05 62%),linear-gradient(0deg,#0b1210,transparent 22%),url('garage-hero.png');background-size:cover;background-position:center;overflow:hidden;padding:27px 6% 0}.hero-top{display:flex;justify-content:space-between;align-items:center;position:relative;z-index:1}.eyebrow{font:10px/1.8 var(--mono);letter-spacing:1.6px;margin:0 0 20px;color:#a3afa6}.hero-top .eyebrow{font-size:9px;letter-spacing:1.2px}.status-dot{width:6px;height:6px;display:inline-block;background:var(--accent);margin-right:9px;box-shadow:0 0 12px #b7f653}.hero-copy{position:relative;padding:31px 0 60px;max-width:600px}.hero-kicker{font:10px var(--mono);letter-spacing:3px;color:var(--accent);margin-bottom:20px}h1{font:900 italic clamp(84px,8.8vw,142px)/.78 var(--display);letter-spacing:-1.5px;margin:0 0 30px}h1 em{font:inherit;color:var(--accent)}.intro{font-size:14px;line-height:1.7;color:#c3cbc4;margin:22px 0 27px}.button{display:inline-flex;justify-content:space-between;align-items:center;gap:35px;border:0;background:var(--accent);color:#101a0e;padding:17px 22px;text-decoration:none;font:700 11px var(--mono);letter-spacing:.4px;clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%);transition:background .2s,transform .2s}.button:hover{background:#d1ff84;transform:translateY(-2px)}.button span{font-size:20px;line-height:1}.hero-secondary{font:9px var(--mono);letter-spacing:1px;margin-left:20px;text-underline-offset:5px}.hero-callout{position:absolute;right:8%;bottom:115px;display:flex;align-items:center;gap:12px;font:9px/1.8 var(--mono);letter-spacing:1px}.hero-callout b{color:var(--accent);font-weight:400}.crosshair{width:45px;height:45px;display:grid;place-items:center;border:1px solid #b7f65370;border-radius:50%;font:25px var(--mono);color:var(--accent)}.hero-bottom{position:absolute;bottom:20px;left:6%;right:6%;display:flex;justify-content:space-between;font:8px var(--mono);letter-spacing:2px;color:#96a59b}.rgb-bars{display:flex;gap:4px;transform:skew(-25deg)}.rgb-bars i{width:27px;height:7px;background:#ff5a51}.rgb-bars i:nth-child(2){background:var(--accent)}.rgb-bars i:nth-child(3){background:#4168ff}.ticker{display:flex;justify-content:space-around;gap:18px;padding:18px 5%;border-top:1px solid #4f663e;border-bottom:1px solid #4f663e;color:var(--accent);font:600 italic 22px var(--display);letter-spacing:1.5px;background:repeating-linear-gradient(120deg,#b7f65303 0 1px,transparent 1px 9px),#141f15}.ticker b{font-style:normal;font-weight:400;color:#62764f}.section{padding:80px 6%;max-width:1500px;margin:auto}.section-title{display:flex;justify-content:space-between;align-items:end;margin-bottom:30px}.section-title>p{font-size:13px;line-height:1.8;color:#94a198;margin-bottom:5px}h2{font:800 clamp(42px,4.7vw,70px)/.94 var(--display);letter-spacing:-.3px;margin:0}h2 em{font:800 italic 1em var(--display);color:var(--accent)}h3{font:700 29px/1.1 var(--display);margin:7px 0 15px}h4{font:600 20px var(--display);margin-bottom:5px}.workspace{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);position:relative}.workspace:before{content:'';position:absolute;top:-1px;left:-1px;height:3px;width:80px;background:var(--accent)}.controls{padding:30px;background:#101813}.tabs{display:flex;gap:5px;padding-bottom:24px;margin-bottom:30px;border-bottom:1px solid var(--line)}.tabs button{flex:1;background:#18231c;border:1px solid #344136;color:#8f9f92;font:10px var(--mono);padding:14px 7px}.tabs button[aria-selected=true]{background:var(--accent);border-color:var(--accent);color:#10190c}.step>.eyebrow{font-size:9px;margin-bottom:9px}.fields{display:grid;grid-template-columns:1fr 1fr;gap:20px 18px;margin:24px 0}label{display:block;font-size:11px;color:#adbaaf}input{display:block;width:100%;min-width:0;margin-top:9px;padding:11px 13px;background:#0a120d;border:1px solid #3a493e;border-bottom-color:#718367;border-radius:0;color:#f0f5eb;font:500 21px var(--display)}input::placeholder{font:12px 'DM Sans',Arial;color:#77887c}input:focus-visible,button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid #b7f653;outline-offset:4px}input:invalid{border-color:#fb6359}.muted,.note{font-size:12px;line-height:1.75;color:#9eaea3}.note{padding:15px 17px;background:#1a261d;border-left:2px solid #63894b;margin:20px 0}.next{width:100%;margin-top:10px;font-size:10px}.text-button{border:0;padding:25px 0 0;background:transparent;color:#98a598;text-decoration:underline;text-underline-offset:4px;font:9px var(--mono)}.results{padding:30px;border-left:1px solid var(--line);background:radial-gradient(ellipse at 50% 10%,#26402b55,transparent 50%),#0d1711}.result-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}.result-head .eyebrow{font-size:9px}.live{font:9px var(--mono);color:var(--accent)}.compare-art{background-image:linear-gradient(#b7f65306 1px,transparent 1px),linear-gradient(90deg,#b7f65306 1px,transparent 1px);background-size:24px 24px;border:1px solid #26392a;padding:12px;margin:10px 0 12px}.compare-art svg{display:block;width:100%;height:220px}.legend{display:flex;gap:15px;color:#9ba99f;font:9px var(--mono);margin-bottom:28px}.legend span:nth-child(2){color:var(--accent)}.legend small{margin-left:auto;font-size:8px}#setup{font:700 42px var(--display);margin-bottom:0}#tireline{font:11px var(--mono);color:var(--accent);margin-top:7px}.metrics{display:grid;grid-template-columns:1fr 1fr;margin-top:22px}.metric{padding:17px 8px 17px 0;border-top:1px solid var(--line)}.metric strong{display:block;font:600 33px var(--display);font-variant-numeric:tabular-nums}.metric span{font:9px var(--mono);color:#97a69b}.small{font-size:10px;line-height:1.75;color:#91a096}.results .button{width:100%;margin-top:10px;justify-content:center;background:transparent;border:1px solid #5b744f;color:var(--accent);clip-path:none}.candidate{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;background:#142019;color:var(--ink);border:1px solid var(--line);padding:13px;margin:7px 0;font-size:12px}.candidate:hover{border-color:var(--accent)}.candidate span{color:var(--accent);font:9px var(--mono)}.principle{padding:65px 8%;background:linear-gradient(110deg,#182a16,#10271e);border-top:1px solid #46653a;border-bottom:1px solid #46653a;display:grid;grid-template-columns:1.2fr 1fr;gap:0 60px;position:relative;overflow:hidden}.principle:after{content:'//';position:absolute;right:0;bottom:-90px;font:italic 350px var(--display);color:#b7f65305;pointer-events:none}.principle .eyebrow{grid-column:1/-1;color:#b7f653}.principle h2{font-size:48px}.principle>p:last-child{font-size:14px;line-height:1.8;color:#a9b8ad}.guide-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;margin-top:38px}.measurement{background:linear-gradient(#b7f65304 1px,transparent 1px),linear-gradient(90deg,#b7f65304 1px,transparent 1px),#131e18;background-size:24px 24px;padding:30px;border:1px solid var(--line);align-self:start}.measurement svg{width:100%}.measurement text{fill:currentColor;font:11px var(--mono)}.measurement>span{font:9px var(--mono);color:#93a498}.guide-steps article{display:flex;gap:22px;margin-bottom:25px}.guide-steps article>b{font:600 italic 38px var(--display);color:#6e895a}.guide-steps h3{font:600 23px var(--display)}.guide-steps h3 span{color:var(--accent)}.guide-steps p{font-size:12px;line-height:1.75;color:#a7b5aa;margin:0}.faq{border-top:1px solid var(--line)}.faq h2{margin-bottom:30px}details{border-bottom:1px solid var(--line);padding:20px 0}summary{font:500 22px var(--display);cursor:pointer}details p{font-size:13px;line-height:1.8;color:#a7b5aa;max-width:800px}footer{margin:0 6%;padding:30px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:22px}footer .rgb{font:700 18px var(--display);text-decoration:none}footer span,footer>a:last-child{font:8px var(--mono);letter-spacing:1px;color:#8da090}#suggestion{font-size:12px;line-height:1.8;color:var(--accent)}[hidden]{display:none!important}@media(min-width:1600px){.hero{min-height:850px}.hero-copy{padding-top:60px}}@media(max-width:900px){nav{display:none}.hero{min-height:690px;background-position:60% center}.hero-top>.eyebrow:last-child{display:none}h1{font-size:108px}.workspace{grid-template-columns:1fr}.results{border-left:0;border-top:1px solid var(--line)}.guide-grid{gap:25px}.principle{gap:30px}.principle h2{font-size:40px}.section-title>p{max-width:200px}.hero-callout{right:5%;bottom:100px}.ticker{font-size:19px;gap:10px}}@media(max-width:580px){header{padding:18px 5%;gap:12px}.brand{font-size:22px}.brand-mark{font-size:36px}.brand small{font-size:6px}.header-cta{font-size:8px;padding:10px;max-width:114px}.hero{padding:25px 6% 0;min-height:780px;background-image:linear-gradient(90deg,#06100ecc,#07120e30),linear-gradient(0deg,#0b1210,transparent 35%),url('garage-hero.png');background-position:62% center;background-size:auto 100%}.hero-copy{padding-top:25px}.hero-kicker{font-size:8px;letter-spacing:2px}h1{font-size:102px;line-height:.81}.intro{font-size:13px;max-width:235px;text-shadow:0 1px 8px #000}.hero-copy>.button{padding:16px 18px;gap:25px;font-size:10px}.hero-secondary{display:block;margin:22px 0 0;font-size:9px}.hero-callout{bottom:66px;right:6%;font-size:8px}.hero-bottom{font-size:7px;letter-spacing:1px}.hero-bottom>.rgb-bars{display:none}.ticker{font-size:15px;padding:15px 4%;gap:8px;flex-wrap:wrap}.ticker>span:last-child,.ticker>b:last-of-type{display:none}.section{padding:50px 5%}.section-title{display:block}.section-title>p{max-width:none;margin-top:20px;font-size:12px}h2{font-size:49px}.controls,.results{padding:23px 18px}.tabs{gap:4px}.tabs button{font-size:8px;padding:13px 5px}.fields{gap:18px 14px}.compare-art svg{height:185px}.legend{gap:9px;font-size:8px}.legend small{font-size:7px}.metric strong{font-size:29px}.metric span{font-size:8px}.principle,.guide-grid{grid-template-columns:1fr}.principle{padding:42px 6%;gap:12px}.principle .eyebrow{margin-bottom:5px}.principle h2{font-size:42px}.principle>p:last-child{font-size:13px}.measurement{padding:20px}.guide-steps{margin-top:12px}footer{flex-wrap:wrap}footer span{width:100%;order:3}.next{font-size:9px;line-height:1.6}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}@media print{header,.hero,.ticker,.controls,.principle,#guide,.faq,footer,.results button{display:none}.workspace{display:block;border:0}.results{border:0;background:white;color:black}.section{padding:0}.section-title{display:none}:root{--paper:white;--ink:black;--panel:white;--line:#ccc;--blue:#315519;--accent:#315519;color-scheme:light}.results{break-inside:avoid}}
.diameter-picks{display:flex;gap:6px;margin:20px 0 10px}.diameter-picks button{flex:1;background:#18231c;border:1px solid #44573c;padding:13px 5px;color:var(--ink);font:10px var(--mono)}.diameter-picks button[aria-pressed=true]{background:var(--accent);color:#10190c;border-color:var(--accent)}.diameter-picks button:disabled{opacity:.35;cursor:not-allowed}
.tabs button:disabled{opacity:.4;cursor:not-allowed}.journey-list{padding-left:20px;color:#a7b5aa;font-size:13px;line-height:2.3}#inline-measurement .measurement{padding:15px;margin:18px 0}#inline-measurement svg{max-height:230px}.tabs{gap:3px}.tabs button{font-size:9px;padding:13px 4px}@media(max-width:580px){.tabs{display:grid;grid-template-columns:1fr 1fr}.tabs button{font-size:9px}}
.axle-config{border-bottom:1px solid var(--line);margin-bottom:23px;padding-bottom:15px}.axle-config>label{font:9px var(--mono);letter-spacing:1px}.axle-config select{width:100%;margin-top:9px;background:#0a120d;color:var(--ink);border:1px solid #536348;padding:13px;font:12px "DM Sans",Arial,sans-serif}.axle-picker{display:flex;gap:8px;margin:15px 0}.axle-picker button{flex:1;background:#162019;border:1px solid #40513b;color:var(--ink);padding:13px;font:11px var(--mono);text-align:left}.axle-picker button[aria-pressed=true]{border-color:var(--accent);box-shadow:inset 0 2px var(--accent)}.axle-picker small{display:block;color:#9eb18f;font-size:8px;margin-top:7px}.axle-config .eyebrow{margin:16px 0 0;color:var(--accent)}select:focus-visible{outline:2px solid var(--accent);outline-offset:4px}#pair-summary article{padding:12px 0;border-top:1px solid var(--line);font-size:12px;line-height:1.8}#pair-summary article b{color:var(--accent);font:10px var(--mono)}#pair-results{margin:20px 0}button:disabled{cursor:not-allowed}#save:disabled{opacity:.5;transform:none}
/* Shared journey: both axles move through each stage together. */
.unified-workspace{display:block}.unified-workspace .controls{padding:38px}.flow-intro{font-size:14px;line-height:1.9;color:#aab8ae;max-width:1000px;margin:0 0 26px}.flow-intro strong{color:var(--ink);display:block;font-size:18px;margin-bottom:5px}.flow-intro b{color:#d5dfd5;font-weight:500}.unified-workspace .tabs{gap:8px;margin-bottom:30px;padding-bottom:0;border:0}.unified-workspace .tabs button{font-size:11px;padding:18px 10px}.layout-row{display:grid;grid-template-columns:minmax(250px,380px) 1fr;gap:35px;align-items:center;padding-bottom:25px;margin-bottom:32px;border-bottom:1px solid var(--line)}.layout-row .axle-config{margin:0;padding:0;border:0}.layout-row .muted{max-width:560px;margin:0}.flow-status{font-size:12px;line-height:1.7;color:var(--accent)}.flow-status:empty{display:none}.stage-heading{display:flex;align-items:center;justify-content:space-between;gap:30px;margin-bottom:24px}.stage-heading .eyebrow{margin-bottom:8px}.stage-heading h3{font-size:36px;margin:0}.stage-heading>.muted{margin:0;text-align:right;font-size:12px}.setup-name{max-width:420px;margin-bottom:28px}.setup-name input{font-family:'DM Sans',Arial;font-size:14px}.axle-grid{display:grid;grid-template-columns:1fr;gap:24px;align-items:stretch}.is-staggered .axle-grid{grid-template-columns:1fr 1fr}.axle-card{min-width:0;margin:0;padding:22px 24px;border:1px solid #3a4c3c;background:linear-gradient(130deg,#1a2a1c55,transparent 55%),#0e1711}.axle-card legend{padding:0 10px;font:700 15px var(--mono);letter-spacing:1.5px;color:var(--accent)}.axle-caption{font:10px var(--mono);color:#9aac9e;margin:0 0 10px}.axle-card .fields{grid-template-columns:repeat(3,minmax(0,1fr));margin:18px 0}.is-staggered .axle-card .fields{grid-template-columns:repeat(2,minmax(0,1fr))}.axle-card input{font-size:25px}.axle-card input[aria-invalid=true]{border:1px solid #ff8f80}.baseline-readout{margin:20px 0 0;border-top:1px solid var(--line);padding-top:15px;font:10px/1.8 var(--mono);color:#c1d1b8}.axle-error{font-size:12px;line-height:1.7;color:#ffac9f}.axle-error:empty{display:none}.step-actions{display:flex;justify-content:space-between;align-items:center;gap:22px;border-top:1px solid var(--line);padding-top:24px;margin-top:25px}.step-actions>.button:only-child{margin-left:auto}.step-actions .text-button{padding:0}.step-actions .button{font-size:11px}.measure-instructions{display:grid;grid-template-columns:minmax(250px,.8fr) 1fr;gap:32px;align-items:center;max-width:850px;margin:0 auto 35px}.measure-instructions #inline-measurement .measurement{margin:0}.measure-instructions h4{margin:12px 0 7px}.measure-instructions p{margin:0 0 18px}.result-card .result-axle{font:700 15px var(--mono);color:var(--accent);letter-spacing:1.5px;margin:0 0 18px}.result-card>h4{font:700 40px var(--display);margin:0}.result-tire{font:12px var(--mono);color:var(--accent);margin:10px 0 24px}.result-card .compare-art{margin-top:20px}.result-card .metrics{margin-top:12px}.result-card .small{margin-bottom:0}.unified-workspace:not(.is-staggered) .result-card{max-width:850px;width:100%;margin:auto}.unified-workspace .diameter-picks{margin-top:17px}.jump-status{min-height:22px;font-size:11px}.unified-workspace #reset{margin-top:8px}#panel-3>.small{margin-top:22px}@media(max-width:850px){.unified-workspace .controls{padding:25px}.layout-row{gap:22px;grid-template-columns:1fr 1fr}.axle-card{padding:20px 16px}.is-staggered .axle-card .fields{gap:16px 10px}.is-staggered .axle-card label{font-size:10px}.is-staggered .axle-card input{padding:10px;font-size:23px}.stage-heading>.muted{max-width:240px}.result-card>h4{font-size:32px}.candidate{flex-wrap:wrap}.result-card .compare-art{padding:4px}.result-card .compare-art svg{height:170px}}
@media(max-width:650px){.is-staggered .axle-grid{grid-template-columns:1fr}.unified-workspace .controls{padding:22px 16px}.flow-intro{font-size:12px;line-height:1.8}.flow-intro strong{font-size:16px}.unified-workspace .tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}.unified-workspace .tabs button{font-size:8px;padding:15px 3px}.layout-row{grid-template-columns:1fr;gap:15px;padding-bottom:22px;margin-bottom:25px}.stage-heading{display:block}.stage-heading h3{font-size:32px}.stage-heading>.muted{text-align:left;margin-top:12px;max-width:none}.stage-heading>.muted br{display:none}.axle-card .fields,.is-staggered .axle-card .fields{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 14px}.axle-card{padding:22px 17px}.axle-card legend{font-size:13px}.is-staggered .axle-card label{font-size:11px}.measure-instructions{grid-template-columns:1fr;gap:10px;margin-bottom:25px}.measure-instructions #inline-measurement{max-width:380px;margin:auto}.step-actions{flex-wrap:wrap;gap:20px}.step-actions .button{width:100%;justify-content:center;font-size:10px}.step-actions>.button:only-child{margin:0}.result-card>h4{font-size:38px}.result-card .compare-art svg{height:200px}.candidate{flex-wrap:nowrap}.result-card .metric strong{font-size:31px}}
@media print{.unified-workspace .controls{display:block}.flow-intro,.tabs,.layout-row,.flow-status,#reset,.step-actions,.stage-heading,.unified-workspace [data-panel]:not(#panel-3){display:none!important}.result-card{background:white;color:black;border-color:#ccc;break-inside:avoid}.is-staggered .axle-grid{display:block}.result-card{margin-bottom:25px}}
.unified-workspace .tabs button{display:flex;justify-content:center;align-items:center;gap:7px}.unified-workspace .tabs button:disabled{opacity:.65}@media(max-width:650px){.unified-workspace .tabs button{flex-direction:column;gap:6px;font-size:9px;padding:12px 3px}.step-number{font-size:10px}}