@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@400;500;600;700&display=swap');

:root{color-scheme:dark;--bg:#0d1416;--panel:#141d20;--panel-dark:#10191b;--line:#283538;--fg:#f0f4f3;--muted:#9baeb0;--faint:#74888a;--mint:#baff9a;--mint-dark:#18301e;--warn:#ffd283;--bad:#ff9b91;--mono:"IBM Plex Mono",monospace;--head:"Barlow Condensed","Arial Narrow",sans-serif}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:14px/1.5 Inter,system-ui,sans-serif}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--mint);outline-offset:3px}
button:disabled{cursor:not-allowed;opacity:.47}
h1,h2,h3,p{margin:0}
.shell{width:min(1320px,calc(100% - 88px));margin-inline:auto}
.site-head{border-bottom:1px solid var(--line);background:#101819}
.head-inner{height:66px;display:flex;align-items:center;justify-content:space-between}
.logo{font:800 28px/.9 var(--head);display:inline-flex;align-items:center;gap:10px;letter-spacing:.065em}
.accent{color:var(--mint)}
.logo-mark{width:29px;height:29px;border:2px solid var(--mint);border-radius:50%;display:grid;place-items:center;transform:rotate(-18deg);position:relative}
.logo-mark::before,.logo-mark::after,.logo-mark i{content:"";position:absolute;height:2px;width:19px;background:var(--mint);border-radius:3px}
.logo-mark::after{transform:rotate(60deg)}
.logo-mark i{transform:rotate(120deg)}
.logo-mark i::after{content:"";position:absolute;inset:-2px auto auto 7px;width:6px;height:6px;background:#101819;border-radius:50%;z-index:2}
.head-actions{display:flex;align-items:center;gap:19px}
.prototype{color:var(--muted);font:500 10px var(--mono);letter-spacing:.11em;display:flex;align-items:center;gap:7px}
.prototype span{background:var(--mint);width:5px;height:5px;border-radius:100%}
.button{min-height:42px;padding:10px 14px;border-radius:7px;border:1px solid transparent;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;line-height:1.25}
.subtle{background:#172124;border-color:#344246;color:var(--fg)}
.subtle:hover,.text-button:hover{color:var(--mint);border-color:#688463}
.primary{background:var(--mint);color:#132013;justify-content:space-between}
.primary:hover{background:#d0ffb9}
.text-button{color:#cbd8d7;background:none;border:0;padding:3px 0;font-size:12px;font-weight:600;white-space:nowrap}
.top-request{min-height:35px;padding:7px 12px;font-size:12px}
.top-request>span:first-child{color:var(--mint);font-size:16px}
.intro{display:flex;align-items:end;justify-content:space-between;padding:33px 0 27px}
h1{font:800 clamp(49px,5vw,72px)/.94 var(--head);letter-spacing:-.012em}
h1 span{color:var(--mint)}
.intro p{color:var(--muted);margin-top:11px;font-size:14px}
.range-tag{padding-bottom:3px;text-align:right}
.range-tag span{font:600 21px var(--mono);color:var(--fg)}
.range-tag b{font-weight:400;color:var(--faint)}
.range-tag small{font:500 9px var(--mono);color:var(--faint);display:block;letter-spacing:.13em;margin-top:4px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.step{background:var(--panel-dark);border:1px solid var(--line);border-radius:8px;color:var(--muted);display:flex;align-items:center;gap:11px;min-width:0;text-align:left;padding:10px 12px;min-height:56px}
.step:hover{border-color:#6b846a;color:var(--fg)}
.step[aria-current="step"]{background:#1b2924;border-color:#769c6b;color:var(--fg)}
.step.done{color:#cad8d6}
.step-number{display:grid;place-items:center;border:1px solid #415154;flex:0 0 31px;height:31px;border-radius:6px;font:500 12px var(--mono);color:#a9bcba}
.step[aria-current="step"] .step-number{color:#172219;background:var(--mint);border-color:var(--mint)}
.step.done .step-number{color:var(--mint);border-color:#526f51}
.step b{font-size:13px;display:block;white-space:nowrap}
.step small{display:block;color:var(--muted);font-size:11px}
.step-arrow{margin-left:auto;color:var(--faint);padding-right:3px}
.workspace{display:grid;grid-template-columns:minmax(294px,.37fr) minmax(0,1fr);gap:16px;align-items:stretch}
.panel{border:1px solid var(--line);border-radius:11px;background:var(--panel);min-width:0}
.config{padding:21px;display:flex;flex-direction:column;gap:16px}
.config h2,.fitment h2,dialog h2{font:700 31px/1 var(--head)}
.config .lead{color:var(--muted);font-size:12px;margin-top:7px}
.label,.minor-heading{display:block;color:#a9bbba;font:500 10px/1.4 var(--mono);letter-spacing:.09em;text-transform:uppercase;margin-bottom:6px}
.brands{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.brand{display:flex;align-items:center;gap:8px;justify-content:center;background:#10191b;color:#c2d0d0;border:1px solid #334246;border-radius:7px;padding:11px 7px;font-weight:700}
.brand span{font:600 11px var(--mono);border:1px solid #506266;border-radius:4px;min-width:19px;display:grid;place-items:center;height:17px}
.brand[aria-pressed="true"],.choice[aria-pressed="true"],.rim-card[aria-pressed="true"]{background:#213226;border-color:#88b679;color:var(--mint)}
.brand:hover,.choice:hover,.rim-card:hover{border-color:#88b679}
select,input,textarea{width:100%;min-height:41px;border:1px solid #344347;border-radius:6px;background:#10191b;color:var(--fg);padding:8px 10px}
select{padding-right:22px}
.field{min-width:0}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fields.three{grid-template-columns:repeat(3,1fr)}
.selected{display:flex;gap:11px;align-items:center;background:#10191b;padding:9px 10px;border:1px solid #2d3a3e;border-radius:7px}
.selected img{width:69px;height:37px;object-fit:contain}
.selected b{display:block;font-size:12px}
.selected small{display:block;color:var(--muted);font-size:10px}
.config .next-row{display:flex;gap:8px;margin-top:auto}
.config .primary{flex:1;min-width:0}
.config .secondary{min-width:42px}
.preview{display:flex;flex-direction:column;overflow:hidden;align-self:start}
.preview-header{display:flex;justify-content:space-between;align-items:center;padding:20px 21px 17px;gap:12px}
.eyebrow{font:500 10px var(--mono);letter-spacing:.105em;color:var(--mint);display:flex;align-items:center;gap:8px}
.pulse{height:6px;width:6px;border-radius:50%;background:var(--mint);box-shadow:0 0 10px #aaff8866}
.preview h2{font:700 36px/1.05 var(--head);margin-top:3px}
.preview-sub{color:var(--muted);font-size:12px;margin-top:3px}
.seg{display:flex;gap:3px;align-self:flex-start;border:1px solid #344246;padding:3px;background:#0d1517;border-radius:7px}
.seg button{background:none;color:#a5b6b5;border:0;border-radius:4px;min-height:31px;padding:0 11px;font-size:11px;font-weight:700}
.seg button[aria-pressed="true"]{background:#263a32;color:var(--mint)}
.stage{
  position:relative;height:clamp(296px,29vw,410px);flex:none;overflow:hidden;isolation:isolate;
  border-block:1px solid #aab4b7;display:grid;place-items:center;background-color:#e3e7e9;
  background-image:linear-gradient(#33474d12 1px,transparent 1px),linear-gradient(90deg,#33474d12 1px,transparent 1px),radial-gradient(ellipse at 50% 37%,#f8fafb,transparent 75%);
  background-size:32px 32px,32px 32px,auto;background-position:center;
}
.stage-corner{position:absolute;width:13px;height:13px;border-color:#63777d;border-style:solid;z-index:2}
.corner-tl{top:13px;left:15px;border-width:1px 0 0 1px}.corner-tr{top:13px;right:15px;border-width:1px 1px 0 0}.corner-bl{bottom:13px;left:15px;border-width:0 0 1px 1px}.corner-br{bottom:13px;right:15px;border-width:0 1px 1px 0}
.axis-label{position:absolute;top:17px;left:35px;color:#43575d;letter-spacing:.11em;font:500 9px var(--mono)}
canvas{display:block}
#car-canvas{width:100%;height:100%;position:absolute;inset:0}
.wheel-tag{position:absolute;bottom:17px;left:35px;max-width:calc(100% - 58px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#233339;background:#f8fafbef;border:1px solid #9eafb4;border-radius:4px;font:500 10px var(--mono);padding:6px 8px}
.preview-footer{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 20px;min-height:44px;color:#b7c7c5;font-size:11px}
.muted{color:var(--muted)}
.fitment{margin-top:16px;padding:19px 20px}
.fit-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.fit-title{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fitment h2{font-size:27px}
.fit-actions{display:flex;gap:12px;align-items:center}
.status{color:var(--muted);border:1px solid #46575a;background:#1a2629;padding:3px 7px;border-radius:4px;font:500 10px var(--mono)}
.status.ok{color:var(--mint);border-color:#4b6546;background:#1d2c20}.status.warn{color:var(--warn);border-color:#7d6544;background:#302619}.status.bad{color:var(--bad);border-color:#79524e;background:#321f1e}
.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.metric{border:1px solid #2e3e42;border-radius:6px;background:#10191b;padding:11px}
.metric strong{font:500 clamp(16px,2vw,23px)/1.25 var(--mono);display:block}
.metric small{font:400 10px/1.3 var(--mono);color:var(--muted);display:block;margin-top:3px}
.fit-note{margin-top:12px;color:var(--muted);font-size:11px}
.issue-list{margin:10px 0 0;padding-left:17px;color:var(--warn);font-size:12px}
.issue-list .bad{color:var(--bad)}
.foot{display:flex;justify-content:space-between;align-items:center;padding:19px 0 24px;color:var(--faint);font-size:11px}
.rings{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.choice{border:1px solid #38494b;border-radius:5px;background:#11191c;color:#d3dddd;min-height:32px;padding:2px;font:500 10px var(--mono)}
.catalog-tools{display:grid;gap:9px}
.catalog-checks{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:11px;flex-wrap:wrap}
.catalog-checks label{display:flex;align-items:center;gap:5px}
.catalog-checks input{width:14px;height:14px;min-height:0;margin:0;accent-color:var(--mint)}
.catalog-count{color:var(--muted);font:500 10px var(--mono);margin-bottom:6px}
.rim-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;max-height:315px;overflow:auto;padding:2px 2px 3px;scrollbar-color:#52656a #141d20}
.rim-card{border:1px solid #344447;background:#10191b;color:var(--fg);border-radius:7px;display:flex;align-items:center;gap:7px;min-width:0;padding:6px;text-align:left;min-height:70px}
.rim-card img{width:43px;height:43px;flex:none;object-fit:contain;border-radius:5px;background:#fff}
.rim-card span{display:block;min-width:0}
.rim-card b{display:block;font-size:10px;line-height:1.2}
.rim-card small{display:block;color:var(--muted);font:400 8px/1.25 var(--mono);margin-top:3px;overflow-wrap:anywhere}
.catalog-nav{display:flex;justify-content:space-between;align-items:center;margin-top:6px;color:var(--muted);font:500 10px var(--mono)}
.catalog-nav div{display:flex;align-items:center;gap:7px}
.catalog-nav .choice{width:28px}
.product-spec,.tire-product{display:grid;gap:6px;background:#10191b;border:1px solid var(--line);border-radius:7px;padding:9px;font-size:11px}
.product-spec>span,.tire-product small{display:block;color:var(--muted)}
.product-spec select{font-size:11px}
.tire-product{display:flex;align-items:center;margin-top:7px;gap:9px}
.tire-product img{width:44px;height:52px;object-fit:contain;background:#f5f7f7;border-radius:4px}
.tire-product .result-link{display:inline-block;margin-top:4px}
.catalog-tire-size{margin-top:10px}
.finish-row{display:flex;gap:7px;flex-wrap:wrap}
.finish-row .choice{padding:4px 8px;display:flex;align-items:center;gap:5px}
.swatch{display:inline-block;width:9px;height:9px;border:1px solid #8b9293;border-radius:50%}
.tires{display:flex;flex-wrap:wrap;gap:6px}
.tires button{padding-inline:6px}
.sidewall{display:flex;align-items:center;gap:9px;padding:8px 10px;border:1px solid var(--line);border-radius:7px;background:#10191b}
.sidewall b{font:600 18px var(--mono);color:var(--mint)}
.sidewall small{color:var(--muted)}
.settings{border:1px solid var(--line);border-radius:7px;padding:9px 10px;background:#10191b}
.settings summary{cursor:pointer;color:#dce8e5;font-size:12px;font-weight:700}
.settings .fields{margin-top:8px}
dialog{padding:20px;width:min(600px,calc(100% - 24px));max-height:90dvh;overflow:auto;border:1px solid #526968;border-radius:13px;background:var(--panel);color:var(--fg)}
dialog::backdrop{background:#05090be0;backdrop-filter:blur(4px)}
dialog.wide{width:min(1090px,calc(100% - 24px))}
.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.dialog-head button{padding:4px 10px;min-height:32px}
dialog p{margin:0 0 12px;color:var(--muted);font-size:13px}
dialog form{display:grid;gap:12px}
dialog textarea{resize:vertical;min-height:85px}
dialog .notice{border:1px solid #3c5350;border-radius:7px;background:#10201d;padding:10px 12px}
dialog .error{color:var(--bad)}
dialog .success{color:var(--mint)}
dialog .dialog-stage{height:clamp(215px,55vh,560px);min-height:0;border:1px solid var(--line);border-radius:7px}
.dialog-stage canvas{position:absolute;inset:0;width:100%;height:100%}
.result-link{color:var(--mint);text-decoration:underline}
dl{margin:0;display:grid;gap:7px}
dl div{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid var(--line);padding-bottom:5px}
dt{color:var(--muted)}dd{margin:0;font:500 13px var(--mono);text-align:right}
.request-history{margin:10px 0 0;padding-left:19px;font-size:12px;color:var(--muted)}
@media(max-width:1070px){.shell{width:calc(100% - 46px)}.config{padding:16px}.workspace{grid-template-columns:minmax(280px,.5fr) minmax(0,1fr)}}
@media(max-width:760px){.shell{width:calc(100% - 30px)}.workspace{grid-template-columns:1fr}.stage{height:clamp(170px,43vw,320px)}.intro{padding:23px 0 21px}.step{padding:8px;gap:7px}.step b{font-size:11px}.step small,.step-arrow{display:none}.step-number{flex-basis:24px;height:24px}.steps{gap:6px}.config{gap:13px}.metrics{grid-template-columns:repeat(2,1fr)}}
@media(max-width:420px){.head-inner{height:56px}.prototype,.range-tag{display:none}.head-actions{gap:7px}.preview-header{padding:14px 12px}.preview h2{font-size:29px}.fitment{padding:13px}.fit-head{align-items:start}.fit-actions{display:grid;gap:0}.foot{gap:8px}}
@media(max-width:760px) and (min-height:650px){
  .workspace:is([data-step="2"],[data-step="3"]) .preview{grid-row:1;position:sticky;top:0;z-index:4;box-shadow:0 8px 18px #05090b85}
  .workspace .preview-header{padding-block:10px}
  .workspace .preview h2{font-size:27px}
  .workspace .preview-footer{min-height:35px;padding-block:5px}
}
@media(prefers-reduced-motion:no-preference){button{transition:background-color .16s,border-color .16s,color .16s}}