:root { --ink:#08121c; --ink-2:#0d1b28; --blue:#123b5d; --blue-light:#2d6e9f; --line:rgba(168,202,224,.18); --paper:#eaf2f6; --muted:#a8bcc9; --amber:#e6a23c; --success:#8cd2be; --danger:#ffb272; --panel:rgba(15,35,51,.86); --rail:256px; color:var(--paper); background:var(--ink); font-family:"IBM Plex Sans","Avenir Next","Segoe UI",sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; min-width:320px; background:var(--ink); } button,input { font:inherit; } button { cursor:pointer; }
.site-frame { min-height:100vh; background:radial-gradient(circle at 74% 20%,rgba(37,103,148,.24),transparent 28rem),linear-gradient(180deg,#0b1b28 0%,#091521 62%,#061019 100%); }
.masthead { height:76px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:0 clamp(20px,5vw,76px); border-bottom:1px solid var(--line); background:rgba(6,16,25,.68); backdrop-filter:blur(14px); position:sticky; top:0; z-index:5; }
.wordmark { display:inline-flex; align-items:center; gap:12px; color:var(--paper); text-decoration:none; letter-spacing:.16em; }.wordmark strong { display:block; font-size:.88rem; line-height:1; }.wordmark small { display:block; color:var(--muted); font-size:.55rem; letter-spacing:.25em; margin-top:5px; }.wordmark-mark { width:30px; height:30px; border:1px solid var(--amber); display:grid; grid-template-columns:repeat(3,1fr); padding:5px; gap:3px; transform:rotate(45deg); }.wordmark-mark i { display:block; background:var(--amber); transform:rotate(-45deg) skew(-16deg); }.wordmark-mark i:nth-child(2) { opacity:.64; }.wordmark-mark i:nth-child(3) { opacity:.33; }
.masthead-status { color:var(--muted); display:flex; gap:10px; align-items:center; font-size:.66rem; letter-spacing:.12em; white-space:nowrap; }.pulse { width:7px; height:7px; border-radius:50%; background:var(--success); box-shadow:0 0 0 0 rgba(140,210,190,.5); animation:pulse 2s infinite; }.divider { width:1px; height:14px; background:var(--line); }
main { max-width:1580px; margin:0 auto; padding:0 clamp(20px,5vw,76px) 70px; }.intro-band { padding:clamp(50px,9vw,118px) 0 58px; display:grid; grid-template-columns:1.1fr .8fr; gap:clamp(30px,8vw,140px); align-items:end; }.eyebrow { color:var(--amber); font-size:.64rem; letter-spacing:.17em; margin:0 0 12px; font-weight:700; } h1,h2,p { margin-top:0; }h1 { font-size:clamp(2.4rem,5.4vw,5.4rem); line-height:.96; letter-spacing:-.055em; margin-bottom:0; max-width:760px; font-weight:650; }h1 em,.legacy-lead em { color:var(--amber); font-style:normal; }.intro-copy { color:var(--muted); max-width:460px; font-size:1rem; line-height:1.65; padding-bottom:7px; }.intro-copy strong { color:var(--paper); }.warning-strip { border-left:2px solid var(--amber); padding:11px 0 11px 13px; color:var(--paper); font-size:.77rem; line-height:1.4; margin-top:24px; }.warning-strip span { color:var(--amber); font-weight:800; margin-right:8px; }
.workspace { display:grid; grid-template-columns:var(--rail) minmax(440px,1fr) var(--rail); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.panel { min-width:0; }.left-rail,.right-rail { background:var(--panel); padding:23px 17px 16px; }.left-rail { border-right:1px solid var(--line); }.right-rail { border-left:1px solid var(--line); }.panel-heading { display:flex; gap:11px; align-items:flex-start; margin-bottom:19px; }.panel-heading .index { color:var(--amber); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.69rem; padding-top:2px; }.panel-heading p { color:var(--muted); font-weight:700; letter-spacing:.12em; font-size:.58rem; margin-bottom:4px; }.panel-heading h2 { font-size:.95rem; letter-spacing:-.01em; margin:0; }.catalog-total { color:var(--amber); font:600 .66rem ui-monospace,SFMono-Regular,Menlo,monospace; margin-left:4px; }
.search-field { display:block; margin-bottom:10px; }.search-field span,.control-group > span,.control-group label { display:flex; justify-content:space-between; color:var(--muted); font-size:.58rem; font-weight:700; letter-spacing:.12em; margin-bottom:8px; }.search-field output { color:var(--amber); letter-spacing:.04em; }.search-field input { width:100%; background:rgba(0,0,0,.17); border:1px solid var(--line); color:var(--paper); padding:10px 9px; border-radius:2px; outline:none; font-size:.76rem; }.search-field input:focus { border-color:var(--blue-light); box-shadow:0 0 0 2px rgba(45,110,159,.2); }.search-field input::placeholder { color:#698191; }
.asset-list { display:grid; gap:4px; max-height:410px; overflow:auto; padding-right:3px; }.asset-choice { width:100%; text-align:left; color:var(--muted); background:transparent; border:1px solid transparent; padding:9px; display:flex; align-items:center; justify-content:space-between; gap:7px; font-size:.72rem; transition:.18s ease; }.asset-choice span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.asset-choice small { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; color:#668093; font-size:.54rem; flex:0 0 auto; }.asset-choice:hover { background:rgba(255,255,255,.04); color:var(--paper); }.asset-choice.is-active { color:var(--paper); border-color:rgba(230,162,60,.48); background:rgba(230,162,60,.08); }.asset-choice.is-active::before { content:""; width:5px; height:5px; background:var(--amber); border-radius:50%; flex:0 0 auto; }.result-empty { color:var(--muted); font-size:.7rem; line-height:1.5; padding:13px 4px; }
.catalog-pagination { display:flex; align-items:center; justify-content:space-between; gap:8px; color:var(--muted); font:.62rem ui-monospace,SFMono-Regular,Menlo,monospace; margin:12px 0 0; }.catalog-pagination button,.wheel-navigation button { color:var(--paper); background:none; border:1px solid var(--line); width:29px; height:26px; }.catalog-pagination button:hover:not(:disabled),.wheel-navigation button:hover { border-color:var(--amber); color:var(--amber); }.catalog-pagination button:disabled { opacity:.32; cursor:not-allowed; }.rail-note { display:flex; gap:8px; color:#7790a0; border-top:1px solid var(--line); margin-top:15px; padding:14px 2px 0; font-size:.64rem; line-height:1.45; }.dot { width:6px; height:6px; flex:0 0 auto; border-radius:50%; background:var(--success); margin-top:3px; }.dot.amber { background:var(--amber); }
.visual-stage { padding:24px clamp(18px,3.3vw,42px) 17px; background:linear-gradient(130deg,rgba(17,51,76,.32),rgba(4,14,23,.2)); }.stage-meta { display:flex; justify-content:space-between; align-items:flex-start; gap:15px; margin-bottom:20px; }.stage-meta h2 { font-size:clamp(1rem,1.7vw,1.45rem); margin:0; letter-spacing:-.025em; }.cross { color:var(--amber); padding:0 3px; }.status-badge { color:var(--success); border:1px solid rgba(140,210,190,.3); padding:7px 8px; white-space:nowrap; font-size:.56rem; font-weight:700; letter-spacing:.1em; }
.vehicle-canvas { --scale:1; position:relative; aspect-ratio:1.82 / 1; overflow:hidden; border:1px solid rgba(148,188,214,.28); background:#02070b; isolation:isolate; }.blueprint-grid { position:absolute; inset:0; background-image:linear-gradient(rgba(77,134,171,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(77,134,171,.14) 1px,transparent 1px); background-size:32px 32px; mask-image:linear-gradient(to bottom,transparent,black 18%,black 86%,transparent); opacity:.8; z-index:-1; }.vehicle-canvas::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(100deg,transparent 27%,rgba(142,204,235,.08) 50%,transparent 72%); transform:translateX(-130%); animation:scan 7s linear infinite; }.axis { position:absolute; background:rgba(144,195,221,.28); z-index:0; }.axis-x { left:0; right:0; top:62%; height:1px; }.axis-y { top:0; bottom:0; left:50%; width:1px; }.dimension-top { position:absolute; top:11px; left:14px; color:#95b0bf; font:600 .52rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.1em; z-index:2; }.dimension-top::before { content:""; display:inline-block; width:14px; height:1px; background:var(--amber); vertical-align:middle; margin-right:7px; }.vehicle-image { position:absolute; left:5%; width:90%; top:30%; mix-blend-mode:normal; filter:brightness(1.15); z-index:3; pointer-events:none; transition:filter .28s ease,opacity .2s ease; }.wheel { position:absolute; width:clamp(42px,9vw,96px); max-width:13.5%; z-index:1; transform:translate(-50%,-50%) scale(var(--scale)); transform-origin:center; transition:left .3s ease,top .3s ease,transform .28s ease; filter:drop-shadow(0 3px 5px rgba(0,0,0,.75)); }.front-wheel { left:74%; top:68%; }.rear-wheel { left:27%; top:68%; }.tone-copper .vehicle-image { filter:sepia(1) saturate(2.5) hue-rotate(330deg) brightness(.82); }.tone-signal .vehicle-image { filter:sepia(1) saturate(6) hue-rotate(295deg) brightness(.73); }.asset-fallback { position:absolute; inset:24% 15%; display:grid; place-content:center; text-align:center; background:rgba(7,16,24,.9); border:1px dashed var(--danger); color:var(--danger); z-index:4; gap:7px; }.asset-fallback[hidden] { display:none; }.asset-fallback span { color:var(--muted); font-size:.76rem; }.stage-corner { position:absolute; width:18px; height:18px; border-color:var(--amber); z-index:3; opacity:.9; }.corner-a { top:10px; right:10px; border-top:1px solid; border-right:1px solid; }.corner-b { bottom:10px; left:10px; border-bottom:1px solid; border-left:1px solid; }
.stage-controls { display:grid; grid-template-columns:1fr 1.35fr auto; gap:20px; align-items:end; padding:16px 0 10px; }.scale-control input { width:100%; accent-color:var(--amber); }.scale-control output { color:var(--paper); letter-spacing:.02em; }.tone-buttons { display:flex; gap:5px; }.tone-button { color:var(--muted); background:transparent; border:1px solid var(--line); padding:6px 8px; font-size:.64rem; display:inline-flex; align-items:center; gap:5px; }.tone-button i { width:7px; height:7px; border-radius:50%; background:#d5e7ed; display:inline-block; }.tone-button[data-tone="copper"] i { background:#c87f45; }.tone-button[data-tone="signal"] i { background:#ad4e54; }.tone-button.is-active { color:var(--paper); border-color:var(--amber); }.reset-button { color:var(--paper); background:transparent; border:1px solid rgba(230,162,60,.58); padding:9px 12px; font-size:.61rem; letter-spacing:.1em; font-weight:700; }.reset-button:hover { background:rgba(230,162,60,.12); }.asset-diagnostic { color:var(--muted); border-top:1px solid var(--line); margin:0; padding-top:11px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.62rem; line-height:1.5; }.diagnostic-marker { width:6px; height:6px; background:var(--success); display:inline-block; margin-right:8px; }
.wheel-list { display:grid; grid-template-columns:repeat(2,1fr); gap:7px; }.wheel-choice { min-height:108px; color:var(--muted); background:rgba(0,0,0,.13); border:1px solid var(--line); padding:7px; text-align:left; transition:.18s ease; }.wheel-choice:hover { border-color:rgba(168,202,224,.52); }.wheel-choice.is-active { border-color:var(--amber); background:rgba(230,162,60,.09); color:var(--paper); }.wheel-choice img { width:47px; height:47px; object-fit:contain; display:block; margin:0 auto 5px; }.wheel-choice span { font-size:.6rem; line-height:1.15; display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }.wheel-choice small { display:block; margin-top:3px; color:#6d8798; font:.5rem ui-monospace,SFMono-Regular,Menlo,monospace; }.wheel-pagination { margin-top:13px; }.wheel-navigation { margin:12px 0 0; display:flex; align-items:center; justify-content:space-between; color:var(--muted); font:.65rem ui-monospace,SFMono-Regular,Menlo,monospace; }
.evidence-strip { display:grid; grid-template-columns:repeat(4,1fr); border-bottom:1px solid var(--line); }.evidence-strip article { padding:25px 17px 27px; border-right:1px solid var(--line); }.evidence-strip article:first-child { padding-left:0; }.evidence-strip article:last-child { border-right:0; }.evidence-strip strong { display:block; font-size:1.65rem; letter-spacing:-.05em; color:var(--paper); margin-bottom:5px; }.evidence-strip span { color:var(--muted); font-size:.67rem; line-height:1.4; display:block; }.evidence-strip .blocked strong { color:var(--amber); }
.legacy-area { display:grid; grid-template-columns:.8fr 1.35fr; gap:clamp(30px,8vw,120px); padding:72px 0 20px; }.legacy-lead h2 { font-size:clamp(1.6rem,3vw,3.1rem); line-height:1.04; letter-spacing:-.045em; margin-bottom:0; }.legacy-table { border-top:1px solid var(--line); }.legacy-row { display:grid; grid-template-columns:1.05fr .8fr 1.7fr; gap:18px; align-items:center; padding:15px 0; border-bottom:1px solid var(--line); font-size:.7rem; color:var(--muted); line-height:1.4; }.legacy-label { color:var(--paper); font-weight:650; }.legacy-row strong { font-size:.57rem; letter-spacing:.12em; }.pass { color:var(--success); }.blocked-label { color:var(--amber); }.legacy-row code { color:#c9dae2; font-size:.62rem; }
footer { max-width:1580px; margin:30px auto 0; padding:0 clamp(20px,5vw,76px) 30px; display:flex; justify-content:space-between; color:#668091; font:.57rem ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.1em; }
@keyframes scan { to { transform:translateX(130%); } } @keyframes pulse { 70% { box-shadow:0 0 0 6px rgba(140,210,190,0); } 100% { box-shadow:0 0 0 0 rgba(140,210,190,0); } }
@media (max-width:1120px) { :root { --rail:224px; }.workspace { grid-template-columns:var(--rail) minmax(380px,1fr); }.right-rail { grid-column:1 / -1; border-left:0; border-top:1px solid var(--line); }.wheel-list { grid-template-columns:repeat(8,1fr); }.wheel-choice { min-height:96px; }.stage-controls { grid-template-columns:1fr 1.3fr auto; } }
@media (max-width:760px) { .masthead { height:64px; padding:0 18px; }.masthead-status { font-size:.52rem; }.masthead-status .divider,.masthead-status span:last-child { display:none; } main { padding:0 18px 40px; }.intro-band { grid-template-columns:1fr; padding:50px 0 40px; gap:25px; }.workspace { grid-template-columns:1fr; }.left-rail { border-right:0; border-bottom:1px solid var(--line); }.asset-list { grid-template-columns:repeat(2,1fr); max-height:none; }.asset-choice { font-size:.67rem; }.visual-stage { padding:20px 14px 14px; }.stage-meta { display:block; }.status-badge { display:inline-block; margin-top:12px; }.vehicle-canvas { aspect-ratio:1.52 / 1; }.wheel { max-width:15%; }.stage-controls { grid-template-columns:1fr; gap:13px; }.reset-button { width:100%; }.right-rail { grid-column:auto; }.wheel-list { grid-template-columns:repeat(4,1fr); }.evidence-strip { grid-template-columns:repeat(2,1fr); }.evidence-strip article { padding:19px 12px; border-bottom:1px solid var(--line); }.evidence-strip article:first-child,.evidence-strip article:nth-child(3) { padding-left:0; }.legacy-area { grid-template-columns:1fr; gap:32px; padding-top:50px; }.legacy-row { grid-template-columns:1fr 1fr; gap:8px; }.legacy-row > span:last-child { grid-column:1 / -1; }.legacy-row strong { justify-self:end; } footer { padding:0 18px 25px; display:grid; gap:8px; } }