* { box-sizing: border-box; }
:root { --bg:#05070c; --panel:#0b101a; --panel-2:#101722; --text:#f5f5f7; --muted:rgba(255,255,255,.64); --faint:rgba(255,255,255,.38); --line:rgba(255,255,255,.11); --blue:#6ab0ff; --blue-deep:#173963; --green:#67d99a; --sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --display:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif; --mono:"SFMono-Regular",Consolas,monospace; }
html,body { width:100%; max-width:100%; margin:0; overflow-x:hidden; }
body { color:var(--text); background:var(--bg); font-family:var(--sans); line-height:1.6; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
.guide-shell { width:min(1180px,calc(100% - 64px)); margin-inline:auto; }
.guide-nav { position:relative; z-index:10; display:flex; align-items:center; justify-content:space-between; min-height:76px; padding:0 max(28px,4vw); background:rgba(5,7,12,.94); border-bottom:1px solid var(--line); }
.guide-logo { font:700 .78rem var(--mono); letter-spacing:.16em; text-transform:uppercase; }
.guide-nav>div { display:flex; align-items:center; gap:25px; }
.guide-nav>div a { color:var(--muted); font-size:.72rem; font-weight:650; }
.guide-nav .guide-nav-quiz,.guide-nav .guide-nav-app { padding:9px 13px; color:var(--text); border:1px solid var(--line); }
.guide-nav .guide-nav-quiz { color:#06111d; background:var(--blue); border-color:var(--blue); }
.guide-eyebrow,.guide-section-label,.model-card>span,.guide-group-heading,.related-card>span { font:600 .66rem/1.4 var(--mono); letter-spacing:.14em; text-transform:uppercase; }
.guide-breadcrumb { display:flex; align-items:center; gap:10px; padding-top:34px; color:var(--faint); font-size:.75rem; }
.guide-breadcrumb a:hover { color:var(--blue); }
.guide-hub-hero,.model-hero { position:relative; overflow:hidden; background:radial-gradient(circle at 78% 35%,rgba(43,111,188,.3),transparent 32%),linear-gradient(135deg,#04070d,#081424); border-bottom:1px solid var(--line); }
.guide-hub-hero::after,.model-hero::after { content:""; position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:52px 52px; mask-image:linear-gradient(to bottom,black,transparent); }
.guide-hub-hero .guide-shell,.model-hero .guide-shell { position:relative; z-index:1; }
.guide-hub-hero .guide-shell { padding-bottom:105px; }
.guide-hub-hero .guide-eyebrow { margin:88px 0 20px; color:var(--blue); }
.guide-hub-hero h1,.model-hero h1 { margin:0; max-width:850px; font:400 clamp(4rem,8.5vw,8rem)/.83 var(--display); letter-spacing:-.065em; }
.guide-hub-hero h1 em,.model-hero h1 em { color:var(--blue); font-style:normal; }
.guide-hub-hero .guide-shell>p:last-of-type { max-width:670px; margin:32px 0 0; color:var(--muted); font:1.2rem/1.6 var(--display); }
.guide-hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:16px; margin-top:34px; }
.guide-primary,.guide-secondary { display:inline-flex; align-items:center; justify-content:center; gap:20px; min-height:50px; padding:0 20px; font-size:.75rem; font-weight:750; }
.guide-primary { color:#06111d; background:var(--blue); }
.guide-primary:hover { background:#8cc2ff; }
.guide-secondary { color:var(--text); border:1px solid var(--line); }
.guide-secondary:hover { border-color:rgba(255,255,255,.35); }
.guide-hub-main { padding-block:100px 120px; }
.guide-intro { display:grid; grid-template-columns:.8fr 1.2fr; gap:80px; padding-bottom:90px; border-bottom:1px solid var(--line); }
.guide-intro h2,.model-main h2 { margin:12px 0 0; font:400 clamp(2.3rem,4vw,4.5rem)/.98 var(--display); letter-spacing:-.04em; }
.guide-intro>p { max-width:630px; margin:0; color:var(--muted); font-size:1.05rem; }
.guide-section-label { color:var(--blue); }
.guide-group { padding-top:82px; }
.guide-group-heading { display:flex; justify-content:space-between; padding-bottom:18px; color:var(--muted); border-bottom:1px solid var(--line); }
.guide-group-heading b { color:var(--faint); font-weight:500; }
.guide-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
.model-card { min-width:0; padding:22px; background:var(--bg); transition:background .2s; }
.model-card:hover { background:var(--panel); }
.model-card-image { display:grid; place-items:center; height:145px; margin-bottom:20px; overflow:hidden; background:radial-gradient(circle,rgba(106,176,255,.12),transparent 64%); }
.model-card-image img { width:95%; max-height:125px; object-fit:contain; filter:drop-shadow(0 12px 12px rgba(0,0,0,.4)); transition:transform .25s; }
.model-card:hover img { transform:translateY(-3px) scale(1.025); }
.model-card>span { color:var(--blue); }
.model-card>strong { display:block; margin:8px 0 3px; font:400 1.5rem/1.1 var(--display); }
.model-card>small { color:var(--faint); font-size:.73rem; }
.model-hero-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(390px,.85fr); align-items:center; gap:50px; min-height:570px; padding:45px 0 78px; }
.model-hero .guide-eyebrow { margin:0 0 18px; color:var(--blue); }
.model-hero h1 { font-size:clamp(3.9rem,7vw,7.3rem); }
.model-hero-grid>div:first-child>p:last-of-type { max-width:600px; margin:27px 0 0; color:var(--muted); font:1.15rem/1.55 var(--display); }
.model-code-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:25px; }
.model-code-row span { padding:6px 9px; color:rgba(255,255,255,.72); background:rgba(255,255,255,.055); border:1px solid var(--line); font:600 .65rem var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.model-hero-image { display:grid; place-items:center; min-height:360px; }
.model-hero-image img { width:100%; max-height:330px; object-fit:contain; filter:drop-shadow(0 25px 25px rgba(0,0,0,.55)); }
.model-main { padding-block:95px 120px; }
.model-overview,.model-data { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:90px; padding-bottom:95px; }
.model-overview>div:first-child>p,.model-data>div:first-child>p { margin-top:22px; color:var(--muted); }
.model-liveries { padding-top:18px; border-top:1px solid var(--line); }
.cue-list { border-top:1px solid var(--line); }
.cue-list article { display:grid; grid-template-columns:42px 1fr; gap:22px; padding:24px 0; border-bottom:1px solid var(--line); }
.cue-list article>b { color:var(--blue); font:500 .7rem var(--mono); }
.cue-list h3 { margin:0 0 5px; font-size:1.05rem; }
.cue-list p { margin:0; color:var(--muted); font-size:.92rem; }
.model-data { padding-top:90px; border-top:1px solid var(--line); }
.model-specs { margin:0; border-top:1px solid var(--line); }
.model-specs>div { display:flex; justify-content:space-between; gap:30px; padding:15px 0; border-bottom:1px solid var(--line); }
.model-specs dt { color:var(--muted); }
.model-specs dd { margin:0; color:var(--text); font-weight:700; text-align:right; }
.model-source-note { color:var(--muted); font-size:.8rem; }
.model-source { display:inline-block; margin-top:18px; color:var(--blue); font-size:.78rem; }
.model-self-test { padding:70px; background:linear-gradient(135deg,#0b1420,#0d2034); border:1px solid rgba(106,176,255,.25); }
.model-self-test>p { max-width:650px; color:var(--muted); }
.model-self-test details { margin:30px 0; padding:0 20px; background:rgba(0,0,0,.2); border:1px solid var(--line); }
.model-self-test summary { padding:17px 0; cursor:pointer; font-weight:700; }
.model-self-test ul { padding:0 0 18px 20px; color:var(--muted); }
.model-self-test li { margin-top:10px; }
.model-self-test li strong { color:var(--text); }
.model-live-cta { display:grid; grid-template-columns:1fr auto; align-items:end; gap:50px; margin-top:90px; padding:50px; border:1px solid var(--line); }
.model-live-cta p { max-width:680px; margin-bottom:0; color:var(--muted); }
.model-live-cta>a { display:inline-flex; gap:20px; padding-bottom:7px; color:var(--blue); border-bottom:1px solid var(--blue); font-weight:700; }
.related-guides { margin-top:100px; padding-top:85px; border-top:1px solid var(--line); }
.related-heading { display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:35px; }
.related-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
.related-card { padding:24px; background:var(--bg); }
.related-card:hover { background:var(--panel); }
.related-card>span { color:var(--blue); }
.related-card>strong { display:block; margin:10px 0 5px; font:400 1.35rem var(--display); }
.related-card>small { color:var(--faint); font-size:.72rem; }
.guide-not-found { min-height:65vh; padding-block:120px; }
.guide-not-found h1 { font:400 clamp(3rem,7vw,7rem)/.95 var(--display); }
.guide-footer { display:flex; align-items:center; gap:30px; min-height:110px; padding:20px max(28px,4vw); color:var(--faint); border-top:1px solid var(--line); font-size:.72rem; }
.guide-footer>a { color:var(--text); font:700 .74rem var(--mono); letter-spacing:.12em; text-transform:uppercase; }
.guide-footer>div { display:flex; gap:20px; margin-left:auto; }
@media (max-width:900px) { .guide-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .guide-intro,.model-overview,.model-data { grid-template-columns:1fr; gap:45px; } .model-hero-grid { grid-template-columns:1fr; } .model-hero-image { min-height:260px; } .related-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px) { .guide-shell { width:calc(100% - 36px); } .guide-nav { min-height:68px; padding-inline:18px; } .guide-nav>div { gap:8px; } .guide-nav>div>a:not(.guide-nav-quiz) { display:none; } .guide-nav .guide-nav-quiz { display:inline-flex; } .guide-hub-hero .guide-shell { padding-bottom:70px; } .guide-hub-hero .guide-eyebrow { margin-top:60px; } .guide-hub-hero h1 { font-size:3.8rem; } .guide-hub-hero .guide-shell>p:last-of-type { font-size:1.05rem; } .guide-hero-actions { align-items:stretch; flex-direction:column; } .guide-primary,.guide-secondary { width:100%; text-align:center; } .guide-hub-main,.model-main { padding-block:70px 85px; } .guide-intro { padding-bottom:65px; } .guide-group { padding-top:60px; } .guide-grid,.related-grid { grid-template-columns:1fr; } .model-card { display:grid; grid-template-columns:105px 1fr; column-gap:18px; } .model-card-image { grid-row:1/5; height:90px; margin:0; } .model-card>span,.model-card>strong,.model-card>small { grid-column:2; } .model-hero-grid { min-height:0; padding:40px 0 65px; } .model-hero h1 { font-size:3.7rem; } .model-hero-image { min-height:190px; } .model-overview,.model-data { padding-bottom:70px; } .model-data { padding-top:70px; } .model-self-test { padding:35px 24px; } .model-live-cta { grid-template-columns:1fr; align-items:start; padding:34px 24px; } .related-heading { align-items:start; flex-direction:column; } .guide-footer { align-items:flex-start; flex-direction:column; padding-block:32px; } .guide-footer>div { flex-wrap:wrap; margin-left:0; } }