:root{
  --paper:#F4F6F8; --surface:#FFFFFF; --ink:#14213A; --muted:#56657A; --line:#D8DEE5;
  --navy:#14213A; --navy-2:#1D2E4D; --link:#2F5D8A; --signal:#E8A317;
  --wmi:#2F5D8A; --vds:#6B7A2E; --vis:#9A5B13; --ok:#2E7D5B; --bad:#B3261E; --plate:#ECF1F6;
  --radius:12px;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0E1521; --surface:#152031; --ink:#E6ECF2; --muted:#9AA8B8; --line:#273548;
    --navy:#0A111C; --navy-2:#13213A; --link:#8BB8E8; --wmi:#7DB0E0; --vds:#B6C46A; --vis:#E9A55A;
    --plate:#1C2838; --ok:#5FC193; --bad:#F2867E;
  }
}
:root[data-theme="dark"]{
  --paper:#0E1521; --surface:#152031; --ink:#E6ECF2; --muted:#9AA8B8; --line:#273548;
  --navy:#0A111C; --navy-2:#13213A; --link:#8BB8E8; --wmi:#7DB0E0; --vds:#B6C46A; --vis:#E9A55A;
  --plate:#1C2838; --ok:#5FC193; --bad:#F2867E;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 4.5rem);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.65 "Barlow",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
img{max-width:100%;height:auto;display:block}
a{color:var(--link);text-underline-offset:.18em}
:focus-visible{outline:3px solid var(--signal);outline-offset:2px;border-radius:4px}
.skip{position:absolute;left:-999px;top:0;background:var(--signal);color:#14213A;padding:.5rem 1rem;z-index:50}
.skip:focus{left:1rem}
.wrap{max-width:72rem;margin:0 auto;padding:0 1.25rem}
h1,h2,h3{font-family:"Barlow Semi Condensed","Arial Narrow",sans-serif;font-weight:700;line-height:1.15;margin:0;letter-spacing:-.005em}
h1{font-size:clamp(2.1rem,5.5vw,3.1rem)}
h2{font-size:clamp(1.5rem,3.4vw,1.9rem);margin:2.75rem 0 .75rem}
h3{font-size:1.25rem;margin:1.75rem 0 .4rem}
p{margin:0 0 1rem}
.muted{color:var(--muted)}

/* Header */
.site-head{position:sticky;top:0;z-index:20;background:var(--surface);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;gap:1rem;height:4rem}
.brand{display:flex;align-items:center;gap:.55rem;text-decoration:none;color:var(--ink);font:700 1.45rem/1 "Barlow Semi Condensed",sans-serif;margin-right:auto}
.brand img{width:34px;height:34px}
.nav{display:flex;gap:.25rem}
.nav a{color:var(--ink);text-decoration:none;font-weight:500;padding:.45rem .7rem;border-radius:8px}
.nav a:hover,.nav a[aria-current="page"]{background:var(--plate)}
.icon-btn{display:inline-flex;align-items:center;gap:.45rem;background:var(--plate);color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:.45rem .9rem;font:500 .95rem "Barlow",sans-serif;cursor:pointer}
.icon-btn svg{width:18px;height:18px}
.menu-btn{display:none}
@media (max-width:820px){
  .nav{display:none;position:absolute;top:4rem;left:0;right:0;flex-direction:column;background:var(--surface);border-bottom:1px solid var(--line);padding:.5rem 1rem 1rem}
  .nav.open{display:flex}
  .menu-btn{display:inline-flex}
  .icon-btn .lbl{display:none}
}

/* Search dialog */
dialog.search{width:min(40rem,calc(100vw - 2rem));border:1px solid var(--line);border-radius:16px;padding:0;background:var(--surface);color:var(--ink);margin-top:10vh}
dialog.search::backdrop{background:rgba(10,17,28,.55)}
.search-top{display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;border-bottom:1px solid var(--line)}
.search-top input{flex:1;font:500 1.1rem "Barlow",sans-serif;border:0;background:transparent;color:var(--ink);padding:.4rem 0;min-width:0}
.search-top input:focus-visible{outline:none}
.search-results{list-style:none;margin:0;padding:.5rem;max-height:60vh;overflow:auto}
.search-results a{display:block;padding:.6rem .75rem;border-radius:10px;text-decoration:none;color:var(--ink)}
.search-results a:hover,.search-results a:focus-visible{background:var(--plate)}
.search-results small{display:block;color:var(--muted)}
.search-empty{padding:1rem 1.25rem;color:var(--muted);margin:0}
.kbd{font-size:.8rem;color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:.05rem .4rem}

/* Breadcrumbs */
.crumbs{font-size:.9rem;color:var(--muted);margin:1.5rem 0 .75rem}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem}
.crumbs li+li::before{content:"/";margin-right:.35rem;color:var(--line)}
.crumbs a{color:var(--muted)}

/* Plate input (signature element) */
.plate{color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:1.25rem}
.plate label{display:block;font-weight:600;margin-bottom:.6rem}
.cells{display:grid;grid-template-columns:repeat(17,1fr);gap:3px;margin-bottom:.4rem;cursor:text}
.cell{aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;background:var(--plate);border-radius:6px;border-bottom:3px solid var(--line);font:700 clamp(.8rem,3vw,1.4rem)/1 "JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;color:var(--ink);transition:border-color .15s}
.cell.wmi.filled{border-bottom-color:var(--wmi)}
.cell.vds.filled{border-bottom-color:var(--vds)}
.cell.vis.filled{border-bottom-color:var(--vis)}
.cell.cursor{box-shadow:inset 0 0 0 2px var(--signal)}
.cell.badchar{background:color-mix(in srgb,var(--bad) 18%,var(--plate));color:var(--bad)}
.legend{display:grid;grid-template-columns:3fr 6fr 8fr;gap:3px;font-size:.8rem;color:var(--muted);margin-bottom:1rem}
.legend span{border-top:2px solid;padding-top:.2rem}
.legend .l1{border-color:var(--wmi)}.legend .l2{border-color:var(--vds)}.legend .l3{border-color:var(--vis)}
.inputrow{display:flex;gap:.6rem;flex-wrap:wrap}
.vin-field{flex:1 1 14rem;min-width:0;font:500 1.1rem "JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;letter-spacing:.08em;text-transform:uppercase;padding:.8rem .9rem;border:1px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink)}
.vin-field::placeholder{text-transform:none;letter-spacing:.02em;font-family:"Barlow",system-ui,sans-serif;color:var(--muted)}
.vin-field:focus-visible{outline:3px solid var(--signal);outline-offset:0}
.btn{display:inline-flex;align-items:center;justify-content:center;font:600 1.05rem "Barlow",sans-serif;border:0;border-radius:10px;padding:.8rem 1.4rem;background:var(--signal);color:#14213A;cursor:pointer;text-decoration:none}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.ghost{background:var(--surface);color:var(--ink);border:1px solid var(--line)}
.hint{font-size:.9rem;color:var(--muted);margin:.6rem 0 0;min-height:1.4em}
.hint.bad{color:var(--bad)} .hint.ok{color:var(--ok)}
.try{font-size:.9rem;color:var(--muted);margin:.35rem 0 0}
.linkbtn{background:none;border:0;color:var(--link);padding:0;font:500 .9rem "Barlow",sans-serif;text-decoration:underline;cursor:pointer}

/* Home hero */
.hero{background:var(--navy);color:#fff;padding:3.5rem 0 3rem;border-bottom:4px solid var(--signal)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:3rem;align-items:center}
.hero h1{color:#fff}
.hero p.lede{color:#BCCADD;font-size:1.15rem;margin:.9rem 0 1.5rem;max-width:32rem}
.hero .plate{border-color:transparent;box-shadow:0 18px 50px rgba(0,0,0,.28)}
.hero-points{list-style:none;padding:0;margin:0;display:grid;gap:.5rem;color:#D6E0EC}
.hero-points li{padding-left:1.6rem;position:relative}
.hero-points li::before{content:"";position:absolute;left:0;top:.55em;width:.7rem;height:.7rem;border-radius:3px;background:var(--signal)}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr;gap:2rem}}

/* Sections */
.section{padding:3rem 0 0}
.section > .wrap > h2:first-child{margin-top:0}
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1.5rem 2.5rem}
.feature h3{margin:0 0 .3rem;display:flex;align-items:center;gap:.5rem}
.feature h3 i{display:inline-block;width:.8rem;height:.8rem;border-radius:3px}
.feature p{color:var(--muted);margin:0}
.makes{display:grid;grid-template-columns:repeat(auto-fill,minmax(10.5rem,1fr));gap:.6rem}
.makes a{display:flex;justify-content:space-between;align-items:center;padding:.8rem 1rem;background:var(--surface);border:1px solid var(--line);border-radius:10px;text-decoration:none;color:var(--ink);font-weight:600}
.makes a span{font:500 .8rem "JetBrains Mono",monospace;color:var(--muted)}
.makes a:hover{border-color:var(--link)}
.guides{display:grid;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:1.25rem}
.guide-card{text-decoration:none;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.guide-card img{aspect-ratio:16/9;object-fit:cover;width:100%;border-bottom:1px solid var(--line)}
.guide-card div{padding:1rem 1.1rem 1.2rem}
.guide-card strong{font:700 1.2rem/1.2 "Barlow Semi Condensed",sans-serif;display:block;margin-bottom:.35rem}
.guide-card p{color:var(--muted);margin:0;font-size:.98rem}
.guide-card:hover strong{text-decoration:underline}

/* Article layout */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 19rem;gap:3rem;align-items:start;padding-bottom:1rem}
.layout.full{grid-template-columns:minmax(0,1fr)}
@media (max-width:980px){.layout{grid-template-columns:minmax(0,1fr)}}
.prose{max-width:44rem}
.prose .lede{font-size:1.15rem;color:var(--muted);margin:.8rem 0 1.5rem}
.prose figure{margin:1.75rem 0}
.prose figure img{border-radius:var(--radius);border:1px solid var(--line)}
.prose figcaption{font-size:.9rem;color:var(--muted);margin-top:.5rem}
.prose ul,.prose ol{padding-left:1.3rem}
.prose li{margin-bottom:.4rem}
.byline{font-size:.92rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:.25rem 1rem;margin-bottom:1rem}
.note{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--signal);border-radius:10px;padding:.9rem 1.1rem;margin:1.5rem 0}
.note p:last-child{margin:0}
.tablewrap{overflow-x:auto;margin:1.25rem 0;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:.98rem}
th,td{text-align:left;padding:.6rem .85rem;border-bottom:1px solid var(--line);vertical-align:top}
th{background:var(--plate);font-weight:600}
tr:last-child td{border-bottom:0}
td code,.mono{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.92em}
details{border-bottom:1px solid var(--line);padding:.9rem 0}
summary{font-weight:600;cursor:pointer}
details p{margin:.5rem 0 0;color:var(--muted)}

/* Sidebar */
.aside{position:sticky;top:5rem;display:grid;gap:1.25rem}
@media (max-width:980px){.aside{position:static}}
.box{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1rem 1.1rem}
.box h2{font-size:1.15rem;margin:0 0 .6rem}
.box ul{list-style:none;margin:0;padding:0}
.box li{border-top:1px solid var(--line)}
.box li:first-child{border-top:0}
.box li a{display:block;padding:.5rem 0;text-decoration:none;color:var(--ink)}
.box li a:hover{color:var(--link)}
.box li a[aria-current="page"]{color:var(--link);font-weight:600}
.mini form{display:grid;gap:.5rem}
.mini .vin-field{font-size:1rem;padding:.65rem .75rem}
.chips{display:flex;flex-wrap:wrap;gap:.4rem}
.chips a{font-size:.9rem;padding:.3rem .65rem;border:1px solid var(--line);border-radius:999px;text-decoration:none;color:var(--ink)}
.chips a:hover{border-color:var(--link)}

/* Decoder results */
#results{margin-top:2rem}
.status{padding:1rem 1.1rem;border-radius:10px;border:1px solid var(--line);background:var(--surface)}
.status.bad{border-color:var(--bad);color:var(--bad)}
.vehicle-title{font:700 clamp(1.7rem,5vw,2.4rem)/1.15 "Barlow Semi Condensed",sans-serif;margin:0 0 .25rem}
.vehicle-sub{color:var(--muted);margin:0 0 1.25rem}
.tabs{display:flex;gap:.35rem;flex-wrap:wrap;margin:0 0 1rem}
.tabs a{padding:.4rem .85rem;border:1px solid var(--line);border-radius:999px;text-decoration:none;color:var(--ink);font-size:.92rem;background:var(--surface)}
.specs{background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:1rem}
.specs > h3{margin:0;padding:.75rem 1rem;font-size:1.1rem;border-bottom:1px solid var(--line)}
.specs dl{margin:0;display:grid;grid-template-columns:minmax(8rem,40%) 1fr}
.specs dt,.specs dd{margin:0;padding:.55rem 1rem;border-bottom:1px solid var(--line)}
.specs dt{color:var(--muted)}
.specs dd{font-weight:500;overflow-wrap:anywhere}
.specs dl > :nth-last-child(-n+2){border-bottom:0}
.pos{display:grid;grid-template-columns:3rem 2.6rem 1fr;gap:.75rem;align-items:center;padding:.55rem 1rem;border-bottom:1px solid var(--line)}
.pos:last-child{border-bottom:0}
.pos .n{color:var(--muted);font-size:.85rem}
.pos .c{font:700 1.15rem "JetBrains Mono",monospace;text-align:center;background:var(--plate);border-radius:6px;padding:.2rem 0;border-bottom:3px solid}
.pos .c.wmi{border-color:var(--wmi)} .pos .c.vds{border-color:var(--vds)} .pos .c.vis{border-color:var(--vis)}
.pos .m strong{display:block;font-weight:600}
.pos .m span{color:var(--muted);font-size:.95rem}
.item{padding:.65rem 1rem;border-bottom:1px solid var(--line)}
.item:last-child{border-bottom:0}
.item strong{display:block}
.item p{margin:.2rem 0 0;font-size:.95rem;color:var(--muted)}
.item.recall{border-left:3px solid var(--bad)}
.bar{display:grid;grid-template-columns:minmax(7rem,38%) 1fr 2.5rem;gap:.6rem;align-items:center;padding:.4rem 1rem}
.bar i{display:block;height:.55rem;border-radius:999px;background:var(--signal)}
.bar span{font-size:.92rem}
.stars{color:var(--signal);letter-spacing:.1em}
.boxnote{padding:.75rem 1rem;margin:0;color:var(--muted);font-size:.95rem}
.boxnote.good{color:var(--ok)}
.actions{display:flex;gap:.75rem;flex-wrap:wrap;margin:.5rem 0 0}
.warn{font-size:.92rem;color:var(--muted);margin:.25rem 0 1rem}

/* Footer */
.site-foot{margin-top:4.5rem;background:var(--navy);color:#B9C6D8;font-size:.95rem}
.site-foot .wrap{padding-top:2.5rem;padding-bottom:2rem}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:2rem}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr 1fr}}
.site-foot h2{font-size:1.05rem;color:#fff;margin:0 0 .6rem}
.site-foot ul{list-style:none;margin:0;padding:0}
.site-foot li{margin:.3rem 0}
.site-foot a{color:#DDE6F1;text-decoration:none}
.site-foot a:hover{text-decoration:underline}
.site-foot .brand{color:#fff;margin-bottom:.75rem}
.foot-legal{border-top:1px solid #26385A;margin-top:2rem;padding-top:1.25rem;font-size:.85rem;color:#93A3B8}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
.home-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,26rem),1fr));gap:1rem 3.5rem;align-items:start}
.home-cols .prose h2{margin-top:0}
.steps{padding-left:1.4rem}
.steps li{margin-bottom:.9rem;padding-left:.2rem}
.steps li::marker{font-weight:700;color:var(--link)}