
:root{
  --bg:#07111f; --bg2:#0b1829; --card:#0f1c30; --lime:#c6ff3d; --cyan:#3de7ff;
  --ink:#e8eef8; --muted:#8a97ad; --warn:#ffb020; --bad:#ff5a5a;
  --radius:16px; --font:"Manrope",system-ui,sans-serif; --display:"Space Grotesk","Manrope",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font);background:var(--bg);color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{width:min(1080px,calc(100% - 28px));margin:0 auto}
.narrow{max-width:720px}
.top-note{text-align:center;font-size:12px;color:var(--muted);padding:8px 12px;border-bottom:1px solid rgba(127,127,127,.15)}
.topbar,.top{position:sticky;top:0;z-index:40;backdrop-filter:blur(14px);background:rgba(7,17,31,.92);border-bottom:1px solid rgba(127,127,127,.12)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--display);font-weight:700;letter-spacing:-.02em}
.brand em{font-style:normal;color:var(--lime)}
.brand img{border-radius:10px}
.nav-links{display:none;gap:16px;font-size:14px}
.nav-links a{color:var(--muted);text-decoration:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;border-radius:999px;border:0;cursor:pointer;text-decoration:none;font:inherit;font-weight:600}
.btn-sm{padding:8px 14px;font-size:14px}
.btn-lime{background:var(--lime);color:#07111f;font-weight:700}.btn-line{border:1px solid var(--lime);color:var(--lime);background:transparent}
.hero{padding:36px 0 28px}
.hero-grid{display:grid;gap:22px}
.badge{display:inline-block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
h1{font-family:var(--display);font-size:clamp(1.8rem,5vw,2.7rem);line-height:1.12;margin:0 0 14px;letter-spacing:-.03em}
h1 span{color:var(--lime)}
.lead{color:var(--muted);margin:0 0 18px;font-size:1.05rem}
.hero-art,.hero-visual img,.hero-frame img{border-radius:var(--radius);width:100%}
.section{padding:42px 0}
.sec-h h2,.section> .wrap > h2{font-family:var(--display);font-size:clamp(1.4rem,3vw,2rem);margin:0 0 8px}
.sec-lead,.sec-h p{color:var(--muted);margin:0 0 22px}
.cards,.glass-grid,.feat-grid{display:grid;gap:14px}
.cards article,.g-card,.feat{background:var(--card);border-radius:var(--radius);padding:18px;border:1px solid rgba(127,127,127,.12)}
.cards h3,.g-card h3,.feat h3{margin:0 0 8px;font-family:var(--display);font-size:1.1rem}
.cards p,.g-card p,.feat p{margin:0;color:var(--muted);font-size:.95rem}
.ex-grid{display:grid;gap:14px}
.ex-card,.ex-grid figure{background:var(--card);border-radius:var(--radius);overflow:hidden;border:1px solid rgba(127,127,127,.12)}
.ex-card .body,.ex-grid figcaption{padding:12px 14px;color:var(--muted);font-size:.9rem}
.studio-shell,.studio{display:grid;gap:16px;background:var(--card);border:1px solid rgba(127,127,127,.14);border-radius:calc(var(--radius) + 4px);padding:16px}
.drop{border:1.5px dashed rgba(127,127,127,.35);border-radius:var(--radius);padding:22px;text-align:center}
.drop-title{font-weight:700;margin:0 0 6px}
.drop-hint{color:var(--muted);font-size:.9rem;margin:0 0 14px}
.preview{margin-top:14px}
.preview img{max-height:220px;margin:0 auto;border-radius:12px}
.field{display:grid;gap:6px;font-size:.9rem;color:var(--muted);margin-bottom:12px}
.field select{padding:10px 12px;border-radius:12px;border:1px solid rgba(127,127,127,.25);background:transparent;color:inherit;font:inherit}
.progress{margin-top:14px}
.stage{font-size:.92rem;color:var(--muted)}
.bar{height:8px;border-radius:99px;background:rgba(127,127,127,.18);overflow:hidden}
.bar i{display:block;height:100%;width:0;border-radius:99px;background:currentColor;transition:width .4s}
.rail,.spiral-rail,.blade-rail{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.rail span,.spiral-rail span,.blade-rail span,.layers span{display:inline-flex;align-items:center;justify-content:center;padding:6px 10px;border-radius:999px;font-size:12px;border:1px solid rgba(127,127,127,.2);color:var(--muted);opacity:.45}
.rail span.on,.spiral-rail span.on,.blade-rail span.on,.layers span.on{opacity:1;color:var(--lime);border-color:currentColor}
.result{margin-top:14px;padding-top:12px;border-top:1px solid rgba(127,127,127,.12)}
.result h3{margin:0 0 10px;font-family:var(--display)}
.meters{display:grid;gap:8px;margin:12px 0}
.meters div{display:grid;grid-template-columns:1fr auto;gap:6px;font-size:.9rem}
.meters b{height:8px;border-radius:99px;background:rgba(127,127,127,.15);grid-column:1/-1}
.meters b i{display:block;height:100%;border-radius:99px;background:currentColor;width:40%}
.disc,.tiny{font-size:.82rem;color:var(--muted)}
.guides{display:grid;gap:10px}
.guides a{display:grid;grid-template-columns:40px 1fr;gap:8px 12px;text-decoration:none;padding:14px;border-radius:var(--radius);background:var(--card);border:1px solid rgba(127,127,127,.12)}
.guides a span{font-family:var(--display);color:var(--lime);font-weight:700}
.guides h3{margin:0;font-size:1rem}
.guides p{margin:0;color:var(--muted);font-size:.9rem;grid-column:2}
details{border-bottom:1px solid rgba(127,127,127,.12);padding:12px 0}
summary{cursor:pointer;font-weight:600}
.foot{padding:36px 0 100px;border-top:1px solid rgba(127,127,127,.12);margin-top:20px}
.foot-grid{display:grid;gap:18px}
.foot a{display:block;color:var(--muted);text-decoration:none;margin:4px 0}
.req p{margin:2px 0;color:var(--muted);font-size:.88rem}
.sticky{position:fixed;left:0;right:0;bottom:0;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:rgba(7,17,31,.92);backdrop-filter:blur(12px);border-top:1px solid rgba(127,127,127,.12);z-index:50}
.sticky .btn{width:100%}
.sticky.is-hidden{display:none}
.page{padding:28px 0 40px}
.page h1{font-size:clamp(1.5rem,4vw,2.1rem)}
.chip{display:inline-block;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.back{display:inline-block;margin-top:18px;color:var(--lime);font-weight:600;text-decoration:none}
@media(min-width:840px){
  .nav-links{display:flex}
  .hero-grid{grid-template-columns:1.05fr .95fr;align-items:center}
  .cards,.glass-grid,.feat-grid{grid-template-columns:repeat(2,1fr)}
  .ex-grid{grid-template-columns:repeat(3,1fr)}
  .studio-shell,.studio{grid-template-columns:1.1fr .9fr}
  .foot-grid{grid-template-columns:1.2fr 1fr 1fr}
  .guides{grid-template-columns:1fr 1fr}
}

.hero{background:radial-gradient(ellipse at 70% 20%,rgba(61,231,255,.12),transparent 50%),var(--bg)}
.badge{color:var(--lime)}
.scan-line{height:2px;background:linear-gradient(90deg,transparent,var(--lime),transparent);margin:10px 0;opacity:.7}
.flag{display:inline-block;padding:4px 10px;border-radius:999px;background:rgba(198,255,61,.12);color:var(--lime);font-size:12px;margin:2px}
.flag.warn{background:rgba(255,176,32,.15);color:var(--warn)}
.flag.bad{background:rgba(255,90,90,.15);color:var(--bad)}
.ctl-label{font-size:.9rem;font-weight:700;margin:0 0 8px}
.ctl-hint{font-size:.82rem;color:var(--muted);margin:0 0 12px;line-height:1.45}
.hunt-toggles{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.hunt{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;border:1px solid rgba(198,255,61,.25);background:rgba(198,255,61,.05);font-size:.9rem;cursor:pointer}
.hunt input{accent-color:var(--lime)}
.hunt.on{border-color:var(--lime);background:rgba(198,255,61,.12)}
.radar-preview{position:relative;display:inline-block;max-width:100%}
.radar-preview[hidden],#preview[hidden]{display:none!important}
.radar-preview img{max-height:240px;margin:0 auto;border-radius:12px;display:block}
.radar-preview img:not([src]),.radar-preview img[src=""]{display:none}
.radar-overlay{position:absolute;inset:0;border-radius:12px;overflow:hidden;pointer-events:none}
.radar-overlay.active .radar-sweep{animation:sweep 2.4s linear infinite}
.radar-sweep{position:absolute;left:50%;top:50%;width:140%;height:140%;margin:-70% 0 0 -70%;background:conic-gradient(from 0deg,transparent 0deg,rgba(198,255,61,.35) 40deg,transparent 70deg);opacity:.85}
.radar-ping{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 0 rgba(198,255,61,.6);opacity:0}
.radar-ping[data-p="1"]{left:28%;top:42%}
.radar-ping[data-p="2"]{left:62%;top:36%}
.radar-ping[data-p="3"]{left:48%;top:68%}
.radar-ping.on{opacity:1;animation:ping 1.2s ease-out infinite}
.radar-log{display:flex;flex-direction:column;gap:6px;margin-bottom:8px;min-height:72px}
.radar-log-row{opacity:0;transform:translateX(-6px);font-size:.88rem;color:var(--muted);padding:8px 10px;border-left:2px solid var(--lime);background:rgba(198,255,61,.06);border-radius:0 10px 10px 0;transition:opacity .3s,transform .3s}
.radar-log-row.in{opacity:1;transform:none}
.progress .bar,.rail{display:none!important}
@keyframes sweep{to{transform:rotate(360deg)}}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(198,255,61,.55)}100%{box-shadow:0 0 0 14px rgba(198,255,61,0)}}
.gap-map{display:grid;gap:18px;align-items:start}
@media(min-width:840px){.gap-map{grid-template-columns:1fr 1.05fr}}
.car-svg-box{background:radial-gradient(ellipse at 50% 80%,rgba(61,231,255,.08),transparent 55%),rgba(14,26,44,.95);border:1px solid rgba(61,231,255,.25);border-radius:16px;padding:14px 10px 8px}
.car-svg{display:block;width:100%;height:auto;max-height:300px}
.car-zone{cursor:pointer;transition:fill .2s,stroke-width .2s,filter .2s}
.car-zone:hover{filter:brightness(1.2)}
.car-zone.on{stroke-width:3.5;filter:brightness(1.25)}
.zone-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.zone-tab{border:1px solid rgba(198,255,61,.3);background:rgba(198,255,61,.06);color:var(--ink);border-radius:999px;padding:8px 12px;font:inherit;font-size:.85rem;font-weight:700;cursor:pointer}
.zone-tab.on{background:var(--lime);color:#07111F;border-color:var(--lime)}
.zone-copy{background:rgba(14,26,44,.6);border:1px solid rgba(61,231,255,.15);border-radius:14px;padding:14px;margin-bottom:12px}
.zone-copy h3{margin:0 0 8px;font-family:var(--display);color:var(--lime)}
.zone-copy p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.5}
.factor-box{margin-bottom:12px}
.factor-list{display:grid;gap:6px;margin-bottom:10px}
.factor{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;border:1px solid rgba(198,255,61,.2);background:rgba(198,255,61,.04);font-size:.88rem;cursor:pointer}
.factor input{accent-color:var(--lime)}
.factor.on{border-color:var(--lime);background:rgba(198,255,61,.1)}
.factor-out{font-size:.88rem;color:var(--muted);margin:0;line-height:1.45;min-height:2.8em}
.honest-note{font-size:.88rem;color:var(--warn);margin:0;padding:10px 12px;border-radius:12px;border:1px dashed rgba(255,176,32,.45);background:rgba(255,176,32,.08);line-height:1.45}
