:root{--bg: #13120e;--panel: #1c1b16;--panel-2: #24221c;--line: #36332a;--ink: #efe9da;--muted: #9a937f;--accent: #c8282d;--accent-ink: #fff4ee;--good: #7fb36a;--warn: #e0a43a;--display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;--text: "Barlow", system-ui, -apple-system, Segoe UI, sans-serif}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--ink);font-family:var(--text);font-size:14px;-webkit-font-smoothing:antialiased}button{font:inherit;color:inherit;cursor:pointer}.app{display:grid;grid-template-columns:1fr 400px;height:100vh;overflow:hidden}.stage{position:relative;min-width:0}.stage canvas{display:block;touch-action:none}.title{position:absolute;top:22px;left:26px;display:flex;gap:14px;align-items:center;pointer-events:none}.badge{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:.04em;background:var(--accent);color:var(--accent-ink);box-shadow:inset 0 0 0 3px #13120e,0 0 0 2px var(--accent)}.title h1{margin:0;font-family:var(--display);font-weight:700;font-size:30px;letter-spacing:.06em;text-transform:uppercase;line-height:1}.title p{margin:4px 0 0;color:var(--muted);font-size:13px;letter-spacing:.04em}.build-sheet{position:absolute;top:28px;right:24px;display:flex;flex-direction:column;align-items:flex-end;gap:3px;font-family:var(--display);font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);pointer-events:none}.build-sheet span:first-child{color:var(--ink);font-size:16px}.compare-tag{position:absolute;top:90px;left:50%;transform:translate(-50%);padding:6px 14px;border:1px solid var(--warn);color:var(--warn);font-family:var(--display);letter-spacing:.14em;text-transform:uppercase;font-size:13px;background:#13120eb3}.toolbar{position:absolute;left:20px;right:20px;bottom:18px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.views,.actions{display:flex;gap:2px;background:#1c1b16d1;border:1px solid var(--line);padding:3px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.views button,.actions button{border:0;background:transparent;padding:8px 12px;font-family:var(--display);font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:13px;color:var(--muted)}.views button:hover,.actions button:hover{color:var(--ink);background:var(--panel-2)}.actions .compare{color:var(--ink);-webkit-user-select:none;user-select:none}.actions .compare.on{background:var(--warn);color:#1a1408}.panel{background:var(--panel);border-left:1px solid var(--line);display:flex;flex-direction:column;min-height:0}.tabs{display:grid;grid-template-columns:repeat(6,1fr);border-bottom:1px solid var(--line)}.tabs button{border:0;background:transparent;padding:16px 0 13px;font-family:var(--display);font-weight:600;letter-spacing:.04em;text-transform:uppercase;font-size:12.5px;color:var(--muted);border-bottom:3px solid transparent}.tabs button:hover{color:var(--ink)}.tabs button.on{color:var(--ink);border-bottom-color:var(--accent)}.panel-body{flex:1;overflow-y:auto;padding:6px 20px 24px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}.section{padding:16px 0 6px;border-bottom:1px dashed var(--line)}.section:last-child{border-bottom:0}.section h3{margin:0 0 11px;display:flex;justify-content:space-between;align-items:baseline;font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}.hint{font-family:var(--text);font-size:11px;letter-spacing:0;text-transform:none;color:#6f6959}.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}.chip{background:var(--panel-2);border:1px solid var(--line);padding:7px 11px;font-size:13px;text-align:left;display:inline-flex;flex-direction:column;gap:1px;line-height:1.2}.chip small{font-size:10.5px;color:var(--muted)}.chip:hover{border-color:#57523f}.chip.on{border-color:var(--accent);background:#2f1c18;box-shadow:inset 3px 0 0 var(--accent)}.swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:10px}.swatch{background:none;border:0;padding:0;display:flex;flex-direction:column;align-items:center;gap:5px}.swatch span{width:100%;aspect-ratio:1.6;border-radius:3px;background:linear-gradient(160deg,color-mix(in srgb,var(--c) 70%,white) 0%,var(--c) 38%,color-mix(in srgb,var(--c) 70%,black) 100%);box-shadow:inset 0 0 0 1px #ffffff14}.swatch em{font-style:normal;font-size:11px;color:var(--muted);text-align:center;line-height:1.15}.swatch.on span{outline:2px solid var(--ink);outline-offset:2px}.swatch.on em{color:var(--ink)}.colour-field{display:flex;align-items:center;gap:10px;margin:2px 0 10px;color:var(--muted);font-size:13px}.colour-field input{width:34px;height:26px;border:1px solid var(--line);background:none;padding:0;cursor:pointer}.colour-field code{margin-left:auto;font-size:12px;color:var(--ink)}.slider{display:block;margin-bottom:14px}.slider-head{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);margin-bottom:6px}.slider-head b{color:var(--ink);font-family:var(--display);font-size:16px;font-weight:600;font-variant-numeric:tabular-nums}.slider input{width:100%;accent-color:var(--accent)}.toggles{display:flex;gap:8px;margin-bottom:14px}.toggle{display:flex;align-items:center;gap:8px;background:var(--panel-2);border:1px solid var(--line);padding:8px 12px;font-size:13px}.toggle i{width:26px;height:14px;border-radius:7px;background:#3b382e;position:relative;transition:background .15s}.toggle i:after{content:"";position:absolute;top:2px;left:2px;width:10px;height:10px;border-radius:50%;background:var(--muted);transition:transform .15s}.toggle.on i{background:var(--accent)}.toggle.on i:after{transform:translate(12px);background:#fff}.spec-grid,.fit-grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}.spec-grid{grid-template-columns:repeat(3,1fr);margin-top:16px}.spec-grid div,.fit-grid div{background:var(--panel-2);padding:10px 12px;display:flex;flex-direction:column}.spec-grid b{font-family:var(--display);font-size:28px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}.spec-grid span,.fit-grid span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-top:3px}.fitment{border-top:1px solid var(--line);padding:14px 20px 16px;background:#181712}.fit-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:9px;font-family:var(--display);text-transform:uppercase;letter-spacing:.12em;font-size:13px;color:var(--muted)}.fit-head b{font-size:15px;color:var(--good)}.fitment.warn .fit-head b{color:var(--warn)}.fit-grid{grid-template-columns:repeat(4,1fr)}.fit-grid div{padding:8px 9px}.fit-grid b{font-family:var(--display);font-size:19px;font-weight:600;font-variant-numeric:tabular-nums}.warn{margin:8px 0 0;font-size:12px;color:var(--warn);line-height:1.35}.row{display:flex;gap:8px;margin-bottom:8px}.row.wrap{flex-wrap:wrap}.text{flex:1;background:var(--panel-2);border:1px solid var(--line);color:var(--ink);padding:8px 10px;font:inherit}.text:focus{outline:1px solid var(--accent)}.btn{background:var(--panel-2);border:1px solid var(--line);padding:8px 12px;font-size:13px}.btn:hover{border-color:#57523f}.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}.btn.ghost{width:100%;margin:4px 0 10px;border-style:dashed;color:var(--muted)}.flash{color:var(--good);font-size:12px;margin:0 0 8px}.list{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}.list-item{display:flex;align-items:center;justify-content:space-between;background:var(--panel-2);border:1px solid var(--line);padding:9px 12px;text-align:left}.list-item:hover{border-color:#57523f}.list-item small{color:var(--muted);font-size:11px}.list-item .link{flex:1;display:flex;justify-content:space-between;background:none;border:0;padding:0;text-align:left}.list-item .x{background:none;border:0;color:var(--muted);font-size:18px;padding:0 0 0 12px;line-height:1}.list-item .x:hover{color:var(--accent)}.fine{font-size:12px;color:var(--muted);line-height:1.4}@media (max-width: 900px){.app{grid-template-columns:1fr;grid-template-rows:55vh 1fr}.panel{border-left:0;border-top:1px solid var(--line)}.build-sheet{display:none}}