/* ============================================================
   AERIALQUOTE — deep navy ground, electric blue, glossy chrome
   ============================================================ */
:root{
  --void:#05070E; --deep:#080D1A; --panel:#0F1729; --panel-2:#15203A;
  --line:#1E2C4C; --line-2:#2B3D66;
  --blue:#2F6BFF; --blue-lit:#6E9CFF; --blue-deep:#1741C4; --blue-ink:#A8C4FF;
  --glow:rgba(47,107,255,.55);
  --mint:#12E29A; --rose:#FF5A6E; --amber:#FFB020;

  --ink:#EDF2FF; --ink-2:#A7B7D6; --ink-3:#7286AC; --nodata:#33415F;
  --page:#070B16; --card:var(--panel); --edge:var(--line);
  --sheen-hi:rgba(255,255,255,.16); --sheen:rgba(255,255,255,.07); --shade:rgba(0,0,0,.5);
  --radius:14px;
}
html[data-mode="light"]{
  --page:#F4F7FD; --card:#FFFFFF; --edge:#D8E1F2;
  --ink:#080E20; --ink-2:#3E4C6B; --ink-3:#5C6B8C;
  --line:#D8E1F2; --line-2:#BECDE6; --nodata:#CFD9EA;
  --sheen-hi:rgba(255,255,255,.95); --sheen:rgba(255,255,255,.6); --shade:rgba(10,20,45,.12);
}
*{box-sizing:border-box}
html,body{margin:0; padding:0}
body{background:var(--page); color:var(--ink);
  font:400 17px/1.6 Figtree, ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:hidden}
button,input,select,label{font-family:inherit; color:inherit}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums}
h1,h2,h3{font-family:Outfit,Figtree,sans-serif; letter-spacing:-.03em; margin:0; text-wrap:balance}
a{color:inherit}
:focus-visible{outline:2px solid var(--blue-lit); outline-offset:3px; border-radius:4px}

/* ---------- the gloss recipe, used everywhere ---------- */
.gloss{position:relative; overflow:hidden; border:0; cursor:pointer; color:#fff;
  background:linear-gradient(180deg, var(--blue-lit) 0%, var(--blue) 44%, var(--blue-deep) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.62),
    inset 0 -1px 0 rgba(0,0,0,.34),
    0 10px 26px -8px var(--glow),
    0 2px 6px rgba(3,8,20,.5);
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease}
.gloss::before{content:''; position:absolute; left:0; right:0; top:0; height:48%;
  background:linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,0));
  border-radius:inherit; pointer-events:none}
.gloss:hover{transform:translateY(-1px); filter:saturate(1.12) brightness(1.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72), inset 0 -1px 0 rgba(0,0,0,.34),
    0 14px 34px -8px var(--glow), 0 3px 8px rgba(3,8,20,.55)}
.gloss:active{transform:translateY(0)}
.gloss-dark{position:relative; overflow:hidden; cursor:pointer; color:var(--ink);
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02) 46%, rgba(0,0,0,.16));
  border:1px solid var(--line-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 4px 14px -6px rgba(0,0,0,.6);
  transition:transform .16s, border-color .16s, background .16s}
html[data-mode="light"] nav .gloss-dark{
  background:linear-gradient(180deg,#FFFFFF,#EBF1FB); border-color:#C6D4EC; color:#0A1024;
  box-shadow: inset 0 1px 0 #fff, 0 2px 7px rgba(10,20,45,.09)}
html[data-mode="light"] nav .gloss-dark:hover{border-color:var(--blue);
  background:linear-gradient(180deg,#FFFFFF,#E2ECFF)}
.gloss-dark:hover{transform:translateY(-1px); border-color:var(--blue); background:linear-gradient(180deg, rgba(110,156,255,.20), rgba(47,107,255,.06) 50%, rgba(0,0,0,.14))}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 26px; border-radius:12px; font:600 16px/1 Figtree,sans-serif; white-space:nowrap}
.btn.sm{padding:10px 18px; font-size:14.5px; border-radius:10px}

/* ---------- nav ---------- */
nav{position:sticky; top:0; z-index:80; display:flex; align-items:center; gap:26px;
  padding:14px 30px; background:rgba(7,11,22,.82); backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(47,107,255,.18)}
html[data-mode="light"] nav{background:rgba(255,255,255,.86); border-bottom-color:var(--edge)}
.brand{display:flex; align-items:center; gap:11px; font:800 21px/1 Outfit,sans-serif;
  letter-spacing:-.035em; color:var(--ink)}
.brand svg{display:block; filter:drop-shadow(0 3px 10px var(--glow))}
.navlinks{display:flex; gap:30px; margin-left:20px; font-size:15.5px; font-weight:500; color:var(--ink-2)}
.navlinks a{text-decoration:none}
.navlinks a:hover{color:var(--ink)}
@media(max-width:940px){ .navlinks{display:none} }
nav .sp{flex:1}
.iconbtn{width:40px; height:40px; border-radius:11px; display:grid; place-items:center;
  font-size:17px; background:transparent; border:1px solid var(--line-2); color:var(--ink-2); cursor:pointer}
.iconbtn:hover{color:var(--ink); border-color:var(--blue)}

/* ---------- hero (always dark — this is the brand banner) ---------- */
.hero{position:relative; background:var(--void); overflow:hidden; padding:88px 30px 74px; color:#EDF2FF}
.hero::before, .hero::after{content:''; position:absolute; border-radius:50%; pointer-events:none}
.hero::before{width:1000px; height:1000px; left:-260px; top:-460px;
  background:radial-gradient(circle, rgba(47,107,255,.42), transparent 62%)}
.hero::after{width:900px; height:900px; right:-300px; bottom:-500px;
  background:radial-gradient(circle, rgba(18,226,154,.16), transparent 64%)}
.heroGrid{position:relative; z-index:2; max-width:1280px; margin:0 auto;
  display:grid; grid-template-columns:1.02fr 1.1fr; gap:56px; align-items:center}
@media(max-width:1040px){ .heroGrid{grid-template-columns:1fr; gap:40px} }
.chip{display:inline-flex; align-items:center; gap:9px; padding:8px 15px; border-radius:99px;
  background:rgba(47,107,255,.16); border:1px solid rgba(110,156,255,.42);
  font:600 13px/1 Figtree,sans-serif; letter-spacing:.04em; text-transform:uppercase; color:#BFD3FF}
.chip .dot{width:7px; height:7px; border-radius:50%; background:var(--mint);
  box-shadow:0 0 10px var(--mint)}
.hero h1{font-size:clamp(40px,5vw,62px); font-weight:800; line-height:1.02; margin:22px 0 0}
.hero h1 em{font-style:normal;
  background:linear-gradient(100deg,#6E9CFF,#2F6BFF 46%,#12E29A);
  -webkit-background-clip:text; background-clip:text; color:transparent}
.hero p.lede{font-size:19px; line-height:1.62; color:#B5C6E4; margin:22px 0 0; max-width:52ch}
.heroCtas{display:flex; gap:14px; flex-wrap:wrap; margin-top:32px}
.heroStats{display:flex; gap:34px; margin-top:38px; flex-wrap:wrap}
.heroStats div b{display:block; font:600 26px/1 "IBM Plex Mono",monospace; color:#fff}
.heroStats div span{font-size:13.5px; color:#8FA3C8; letter-spacing:.02em}

.shot{position:relative; border-radius:20px; overflow:hidden;
  border:1px solid rgba(110,156,255,.34);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.04),
             0 0 70px -20px var(--glow)}
.shot img{display:block; width:100%; height:auto}
.shot .scrim{position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(5,7,14,.42) 0%, transparent 26%, transparent 52%, rgba(5,7,14,.86) 100%)}
.addrChip{position:absolute; left:16px; bottom:16px; right:16px; display:flex; align-items:center;
  gap:12px; padding:12px 15px; border-radius:13px; background:rgba(8,13,26,.78);
  backdrop-filter:blur(14px); border:1px solid rgba(110,156,255,.34)}
.addrChip .pin{width:32px; height:32px; border-radius:9px; display:grid; place-items:center;
  background:linear-gradient(180deg,var(--blue-lit),var(--blue-deep)); flex:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.addrChip b{display:block; font:600 15px/1.3 Figtree,sans-serif; color:#fff}
.addrChip span{font-size:12.5px; color:#93A8CC}
.shotTag{position:absolute; top:14px; right:14px; padding:6px 11px; border-radius:8px;
  background:rgba(8,13,26,.74); border:1px solid rgba(110,156,255,.3);
  font:600 11px/1 Figtree,sans-serif; letter-spacing:.09em; text-transform:uppercase; color:#93A8CC}

/* ---------- marquee ---------- */
.marquee{background:var(--deep); border-block:1px solid var(--line); overflow:hidden; padding:15px 0}
html[data-mode="light"] .marquee{background:#0A1020; border-color:#0A1020}
.mtrack{display:flex; gap:0; width:max-content; animation:slide 46s linear infinite}
.marquee:hover .mtrack{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){ .mtrack{animation:none} }
.mitem{display:flex; align-items:center; gap:13px; padding:0 30px; white-space:nowrap;
  font-size:14.5px; color:#9FB2D4; font-weight:500}
.mitem i{width:6px; height:6px; border-radius:50%; background:var(--blue-lit); flex:none;
  box-shadow:0 0 8px var(--blue)}
.mitem b{color:#DCE7FF; font-weight:600}

/* ---------- content sections ---------- */
section.band{padding:78px 30px; background:var(--page); scroll-margin-top:78px}
.appWrap{scroll-margin-top:78px}
.inner{max-width:1180px; margin:0 auto}
.kicker{font:600 13px/1 Figtree,sans-serif; letter-spacing:.16em; text-transform:uppercase;
  color:var(--blue); display:block; margin-bottom:16px}
h2.big{font-size:clamp(30px,3.7vw,46px); font-weight:700; line-height:1.08}
.sub{font-size:18.5px; line-height:1.62; color:var(--ink-2); max-width:62ch; margin:18px 0 0}

.twoUp{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:44px}
@media(max-width:840px){ .twoUp{grid-template-columns:1fr} }
.useCard{position:relative; padding:30px 28px 28px; border-radius:var(--radius);
  background:var(--card); border:1px solid var(--edge); overflow:hidden;
  box-shadow:0 18px 44px -28px rgba(6,14,40,.6)}
.useCard::after{content:''; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg,var(--blue),var(--mint))}
.useCard.pro::after{background:linear-gradient(90deg,var(--amber),var(--blue-lit))}
.useCard h3{font-size:25px; font-weight:700; margin-bottom:8px}
.useCard .who{font:600 12.5px/1 Figtree,sans-serif; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:14px; display:block}
.useCard p{color:var(--ink-2); font-size:16.5px; margin:0 0 18px}
.useCard ul{margin:0; padding:0; list-style:none; display:grid; gap:11px}
.useCard li{display:flex; gap:11px; align-items:flex-start; font-size:16px; color:var(--ink-2)}
.useCard li svg{flex:none; margin-top:3px}

/* ---------- the app ---------- */
.appWrap{background:var(--void); padding:56px 24px 64px; position:relative; overflow:hidden}
.appWrap::before{content:''; position:absolute; width:1100px; height:1100px; left:50%;
  transform:translateX(-50%); top:-620px; border-radius:50%;
  background:radial-gradient(circle, rgba(47,107,255,.28), transparent 62%); pointer-events:none}
.appHead{position:relative; z-index:2; max-width:1340px; margin:0 auto 22px;
  display:flex; align-items:flex-end; gap:24px; flex-wrap:wrap}
.appHead h2{color:#fff; font-size:clamp(26px,3vw,38px); font-weight:700}
.appHead p{color:#9FB2D4; margin:9px 0 0; font-size:16.5px}
.appHead .sp{flex:1}
.authStrip{display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:12px 14px; border-radius:13px; background:rgba(15,23,41,.9);
  border:1px solid rgba(110,156,255,.3)}
.authStrip .free{display:flex; align-items:center; gap:9px; font-size:14.5px; color:#B5C6E4}
.authStrip .free b{color:#fff; font-weight:600}
.freeDot{width:9px; height:9px; border-radius:50%; background:var(--mint); box-shadow:0 0 10px var(--mint)}

.appShell{position:relative; z-index:2; max-width:1340px; margin:0 auto;
  border-radius:18px; overflow:hidden; border:1px solid rgba(110,156,255,.26);
  box-shadow:0 50px 110px -40px rgba(0,0,0,.95), 0 0 80px -30px var(--glow)}
.appBar{display:flex; align-items:center; gap:10px; padding:11px 16px; flex-wrap:wrap;
  background:linear-gradient(180deg,#131C33,#0D1526); border-bottom:1px solid var(--line)}
.roleswitch{display:flex; padding:4px; gap:3px; border-radius:12px;
  background:rgba(5,9,18,.7); border:1px solid var(--line-2)}
.roleswitch button{border:0; background:transparent; color:#93A8CC; cursor:pointer;
  padding:9px 20px; border-radius:9px; font:600 15px/1 Figtree,sans-serif}
.roleswitch button[aria-pressed="true"]{color:#fff;
  background:linear-gradient(180deg,var(--blue-lit),var(--blue-deep));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 4px 14px -4px var(--glow)}
.appBar .sp{flex:1}
.appBar .tag{font-size:13.5px; color:#8FA3C8}

.wrap{display:grid; grid-template-columns:1fr 400px; background:#070B15; min-height:600px}
@media(max-width:1000px){ .wrap{grid-template-columns:1fr} }
.stage{position:relative; background:#04060C; display:flex; align-items:center;
  justify-content:center; overflow:hidden; min-width:0; min-height:440px; padding:14px}
.canvasbox{position:relative; line-height:0; border-radius:14px; overflow:hidden; display:none;
  box-shadow:0 26px 60px -24px #000, 0 0 0 1px rgba(110,156,255,.22)}
body.ready .canvasbox{display:block}
#base{display:block; width:100%; height:100%}
#draw{position:absolute; inset:0; width:100%; height:100%; cursor:crosshair; touch-action:none}
.stage.panning #draw{cursor:grab}
.attrib{position:absolute; bottom:0; right:0; background:rgba(0,0,0,.62); color:#B9C8E4;
  font-size:11px; padding:3px 8px; border-top-left-radius:6px; z-index:12}
.float{position:absolute; z-index:11; border-radius:12px;
  background:rgba(10,16,30,.86); backdrop-filter:blur(14px);
  border:1px solid rgba(110,156,255,.26); box-shadow:0 10px 30px -12px rgba(0,0,0,.9)}
.toolbar{top:14px; left:14px; display:flex; gap:5px; flex-wrap:wrap; padding:6px}
.tool{background:transparent; border:0; border-radius:9px; padding:9px 13px; cursor:pointer;
  font:600 14px/1 Figtree,sans-serif; color:#A7B7D6}
.tool:hover{color:#fff; background:rgba(110,156,255,.16)}
.tool.on{color:#fff; background:linear-gradient(180deg,var(--blue-lit),var(--blue-deep));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}
.tool.bank{color:#04241A; background:linear-gradient(180deg,#6EF0C4,#0DBE80);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.tracebar{top:14px; right:14px; display:flex; gap:7px; align-items:center; padding:7px 10px}
.tracebar > span{font:600 11px/1 Figtree,sans-serif; letter-spacing:.14em;
  text-transform:uppercase; color:#8FA3C8}
.tracebar button{width:26px; height:26px; border-radius:8px; cursor:pointer; padding:0;
  border:2px solid transparent; box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.tracebar button[aria-pressed="true"]{border-color:#fff; transform:scale(1.14)}
.readout{bottom:14px; right:14px; padding:12px 17px; min-width:150px; text-align:right}
.readout .big{font:600 32px/1 "IBM Plex Mono",monospace; letter-spacing:-.035em; color:#fff;
  font-variant-numeric:tabular-nums}
.readout .sub2{font:600 12px/1 Figtree,sans-serif; letter-spacing:.14em;
  text-transform:uppercase; color:#8FA3C8; margin-top:7px}
#status{bottom:14px; left:14px; padding:7px 12px; font-size:12.5px; color:#8FA3C8;
  max-width:calc(100% - 28px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.hint{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center;
  color:#8FA3C8; max-width:340px; padding:20px; z-index:5}
.hint h3{color:#C7D6F2; font-size:19px; margin:0 0 8px}
.spinner{position:absolute; inset:0; display:none; place-items:center; background:rgba(4,6,12,.6); z-index:20}
.spinner.on{display:grid}
.spinner i{width:30px; height:30px; border:3px solid rgba(110,156,255,.22);
  border-top-color:var(--blue-lit); border-radius:50%; animation:sp .75s linear infinite; display:block}
@keyframes sp{to{transform:rotate(360deg)}}

/* ---------- panel ---------- */
.panel{background:linear-gradient(180deg,#0E1628,#0A1120); border-left:1px solid var(--line);
  overflow-y:auto; padding:20px; max-height:760px}
html[data-mode="light"] .panel{background:linear-gradient(180deg,#FFFFFF,#F6F9FE);
  border-left-color:var(--edge)}
@media(max-width:1000px){ .panel{border-left:0; border-top:1px solid var(--line); max-height:none} }
.pInk{color:var(--pink-ink)}
.sec{margin-bottom:20px}
.sec > label, .lbl{display:block; font:600 12px/1 Figtree,sans-serif; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:10px}
html[data-mode="dark"] .panel, .panel{--pInk:#EDF2FF}
.seg{display:grid; grid-template-columns:repeat(4,1fr); gap:4px; padding:4px; border-radius:12px;
  background:rgba(5,9,18,.6); border:1px solid var(--line-2)}
html[data-mode="light"] .seg{background:#EEF3FC; border-color:var(--edge)}
.seg button{background:transparent; border:0; border-radius:9px; padding:11px 4px; cursor:pointer;
  font:600 14.5px/1 Figtree,sans-serif; color:var(--ink-3)}
.seg button.on{color:#fff; background:linear-gradient(180deg,var(--blue-lit),var(--blue-deep));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 4px 12px -4px var(--glow)}
select.full, .fld{width:100%; background:rgba(5,9,18,.55); border:1px solid var(--line-2);
  border-radius:11px; padding:12px 13px; outline:none; font-size:15.5px; color:var(--ink)}
html[data-mode="light"] select.full, html[data-mode="light"] .fld{background:#fff; border-color:var(--edge)}
select.full:focus, .fld:focus{border-color:var(--blue); box-shadow:0 0 0 3px rgba(47,107,255,.22)}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.mini{font-size:13.5px; color:var(--ink-3); margin-top:8px; line-height:1.5}
.pitchrow{display:grid; grid-template-columns:repeat(3,1fr) 82px; gap:5px}
.pitchrow button{background:rgba(5,9,18,.55); border:1px solid var(--line-2); border-radius:10px;
  padding:10px 3px; cursor:pointer; font:600 13.5px/1.3 Figtree,sans-serif; color:var(--ink-3)}
html[data-mode="light"] .pitchrow button{background:#fff; border-color:var(--edge)}
.pitchrow button.on{color:#fff; border-color:transparent;
  background:linear-gradient(180deg,var(--blue-lit),var(--blue-deep));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}
.pitchrow input{background:rgba(5,9,18,.55); border:1px solid var(--line-2); border-radius:10px;
  padding:10px; text-align:center; width:100%; outline:none; font-size:14.5px; color:var(--ink)}
html[data-mode="light"] .pitchrow input{background:#fff; border-color:var(--edge)}
.duo{display:grid; grid-template-columns:1fr 1fr; gap:6px}
.duo button{background:rgba(5,9,18,.55); border:1px solid var(--line-2); border-radius:11px;
  padding:11px 6px; cursor:pointer; font:600 14.5px/1.3 Figtree,sans-serif; color:var(--ink-3)}
html[data-mode="light"] .duo button{background:#fff; border-color:var(--edge)}
.duo button.on{color:#fff; border-color:transparent;
  background:linear-gradient(180deg,var(--blue-lit),var(--blue-deep));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}
.duo button span{display:block; font-weight:400; font-size:12.5px; opacity:.78; margin-top:4px}

.card{background:rgba(255,255,255,.035); border:1px solid var(--line-2); border-radius:13px;
  padding:16px; margin-bottom:11px}
html[data-mode="light"] .card{background:#FBFCFF; border-color:var(--edge)}
.card h4{margin:0 0 12px; font:600 12px/1 Figtree,sans-serif; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3)}
.line{display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding:7px 0; border-bottom:1px solid var(--line); font-size:15px; color:var(--ink-2)}
html[data-mode="light"] .line{border-bottom-color:#EDF1F9}
.line:last-child{border-bottom:0}
.line b{font:600 14.5px/1 "IBM Plex Mono",monospace; color:var(--ink);
  font-variant-numeric:tabular-nums; white-space:nowrap}
.line .x{cursor:pointer; color:var(--ink-3); font-weight:700; padding:0 4px}
.line .x:hover{color:var(--rose)}
.big-total{font:600 36px/1 "IBM Plex Mono",monospace; letter-spacing:-.04em; color:var(--mint);
  font-variant-numeric:tabular-nums}
html[data-mode="light"] .big-total{color:#0A9C68}
.big-meas{font:600 36px/1 "IBM Plex Mono",monospace; letter-spacing:-.04em; color:var(--blue-lit);
  font-variant-numeric:tabular-nums}
html[data-mode="light"] .big-meas{color:var(--blue-deep)}
.sub-total{font:500 15px/1.4 Figtree,sans-serif; color:var(--ink-3); margin-top:8px}
.empty{color:var(--ink-3); font-size:15px; text-align:center; padding:34px 12px}
.rate{display:flex; align-items:center; gap:9px; padding:8px 0; border-bottom:1px solid var(--line)}
html[data-mode="light"] .rate{border-bottom-color:#EDF1F9}
.rate:last-child{border-bottom:0}
.rate label{flex:1; font-size:15px; color:var(--ink-2)}
.rate .pre{color:var(--ink-3); font-size:14px}
.rate input{width:88px; background:rgba(5,9,18,.55); border:1px solid var(--line-2);
  border-radius:9px; padding:9px; text-align:right; outline:none; color:var(--ink);
  font:600 15px/1 "IBM Plex Mono",monospace}
html[data-mode="light"] .rate input{background:#fff; border-color:var(--edge)}
.rate input:focus{border-color:var(--blue)}
.contrib{display:flex; gap:11px; align-items:flex-start; padding:14px; border-radius:12px;
  background:rgba(18,226,154,.11); border:1px solid rgba(18,226,154,.34); margin-bottom:11px}
.contrib input{margin-top:3px; width:19px; height:19px; accent-color:var(--mint); flex:none}
.contrib div{font-size:14px; color:var(--ink-2); line-height:1.55}
.contrib b{color:var(--ink); display:block; margin-bottom:3px}
.peek{display:flex; align-items:center; gap:10px; padding:13px 14px; border-radius:12px;
  background:rgba(47,107,255,.14); border:1px solid rgba(110,156,255,.4); margin-bottom:14px;
  font-size:14.5px; color:var(--ink-2); cursor:pointer}
.peek input{width:19px; height:19px; accent-color:var(--blue); flex:none}
.peek b{color:var(--ink)}
.note{font-size:14px; color:var(--ink-2); background:rgba(47,107,255,.10);
  border:1px solid rgba(110,156,255,.34); border-radius:12px; padding:13px 15px; line-height:1.55}
.note b{color:var(--blue-lit)}
html[data-mode="light"] .note b{color:var(--blue-deep)}
.disc{font-size:13px; color:var(--ink-3); line-height:1.55; margin-top:16px;
  padding-top:14px; border-top:1px solid var(--line)}
.err{background:rgba(255,90,110,.13); border:1px solid rgba(255,90,110,.4); color:#FF9AA6;
  border-radius:12px; padding:12px 14px; font-size:14px; margin-bottom:12px; display:none; line-height:1.55}
.err.on{display:block}
.saved{background:rgba(18,226,154,.13); border:1px solid rgba(18,226,154,.4);
  border-radius:12px; padding:12px 14px; font-size:14px; margin-bottom:12px; display:none;
  color:var(--ink-2)}
.saved.on{display:block}
.saved b{color:var(--ink)}

/* ---------- rules + footer ---------- */
.rules{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:42px}
@media(max-width:940px){ .rules{grid-template-columns:1fr 1fr} }
@media(max-width:560px){ .rules{grid-template-columns:1fr} }
.rule{padding:22px 20px; border-radius:13px; background:var(--card); border:1px solid var(--edge)}
.rule .n{font:600 13px/1 "IBM Plex Mono",monospace; color:var(--blue); margin-bottom:12px; display:block}
.rule h4{margin:0 0 7px; font:700 17px/1.25 Outfit,sans-serif; letter-spacing:-.02em}
.rule p{margin:0; font-size:14.5px; color:var(--ink-2); line-height:1.55}
footer{background:var(--void); color:#8FA3C8; padding:44px 30px; border-top:1px solid var(--line)}
.fInner{max-width:1180px; margin:0 auto; display:flex; gap:24px; align-items:center; flex-wrap:wrap}
footer .sp{flex:1}
footer small{font-size:13.5px}

/* ================= tutorial ================= */
.tut{position:relative; z-index:2; max-width:1340px; margin:0 auto 22px;
  display:grid; grid-template-columns:300px 1fr; gap:26px; align-items:center;
  padding:22px 26px; border-radius:16px;
  background:linear-gradient(135deg, rgba(47,107,255,.16), rgba(18,226,154,.07));
  border:1px solid rgba(110,156,255,.32)}
@media(max-width:860px){ .tut{grid-template-columns:1fr; gap:18px} }
.tut.hidden{display:none}
.tutArt{border-radius:12px; overflow:hidden; background:#0B1220; border:1px solid rgba(110,156,255,.24)}
.tutArt svg{display:block; width:100%; height:auto}
.tutSteps{display:grid; gap:14px}
.tutSteps h3{color:#fff; font-size:21px; font-weight:700; margin:0}
.tutRow{display:flex; gap:22px; flex-wrap:wrap}
.tutStep{display:flex; gap:11px; align-items:flex-start; flex:1 1 200px}
.tutStep b{flex:none; width:26px; height:26px; border-radius:8px; display:grid; place-items:center;
  font:600 13px/1 "IBM Plex Mono",monospace; color:#fff;
  background:linear-gradient(180deg,var(--blue-lit),var(--blue-deep));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}
.tutStep span{font-size:15px; color:#C3D2EC; line-height:1.5}
.tutStep span i{display:block; font-style:normal; color:#fff; font-weight:600; margin-bottom:2px}
.tutClose{background:none; border:0; color:#8FA3C8; cursor:pointer; font-size:14px;
  text-decoration:underline; padding:0; justify-self:start}
.tutClose:hover{color:#fff}

/* the trace animation */
@keyframes popIn{0%,8%{opacity:0; transform:scale(.2)} 14%,100%{opacity:1; transform:scale(1)}}
@keyframes drawLine{0%,20%{stroke-dashoffset:640} 46%,100%{stroke-dashoffset:0}}
@keyframes fillIn{0%,46%{opacity:0} 58%,100%{opacity:.30}}
@keyframes numIn{0%,58%{opacity:0; transform:translateY(6px)} 70%,100%{opacity:1; transform:translateY(0)}}
.tA{animation:popIn 6s ease-in-out infinite; transform-origin:center}
.tA2{animation-delay:.45s} .tA3{animation-delay:.9s} .tA4{animation-delay:1.35s}
.tLine{stroke-dasharray:640; animation:drawLine 6s ease-in-out infinite}
.tFill{animation:fillIn 6s ease-in-out infinite}
.tNum{animation:numIn 6s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){
  .tA,.tLine,.tFill,.tNum{animation:none; opacity:1; stroke-dashoffset:0}
  .tFill{opacity:.30}
}

/* ================= dataset ================= */
.sampleBanner{display:flex; align-items:center; gap:12px; padding:14px 18px; border-radius:12px;
  background:rgba(255,176,32,.13); border:1px solid rgba(255,176,32,.42); margin:26px 0 30px}
.sampleBanner svg{flex:none}
.sampleBanner b{color:var(--ink)}
.sampleBanner span{font-size:15px; color:var(--ink-2); line-height:1.5}

.mapWrap{display:grid; grid-template-columns:1.95fr 1fr; gap:26px; align-items:start}
@media(max-width:960px){ .mapWrap{grid-template-columns:1fr} }
.usmap{position:relative; padding:14px; border-radius:16px;
  background:var(--card); border:1px solid var(--edge)}
.usmap svg{display:block; width:100%; height:auto}
.st{cursor:pointer; stroke:var(--card); stroke-width:.9; transition:filter .12s}
.st:hover{filter:brightness(1.3)}
.st[aria-pressed="true"]{stroke:#fff; stroke-width:2.2}
.st:focus-visible{outline:none; stroke:#fff; stroke-width:2.6}
.stLbl{font:600 11px/1 "IBM Plex Mono",monospace; pointer-events:none}
.insetFrame{fill:none; stroke:var(--line-2)}
.insetLbl{fill:var(--ink-3); font:600 10.5px/1 Figtree,sans-serif; letter-spacing:.13em}
.mapTip{position:absolute; pointer-events:none; z-index:9; padding:10px 13px; border-radius:11px;
  background:rgba(8,13,26,.95); border:1px solid rgba(110,156,255,.44); color:#EDF2FF;
  font-size:13.5px; opacity:0; transition:opacity .1s; white-space:nowrap;
  box-shadow:0 12px 30px -10px rgba(0,0,0,.8)}
.mapTip.on{opacity:1}
.mapTip b{display:block; font-size:15px; margin-bottom:3px}
.mapTip .r{font-family:"IBM Plex Mono",monospace; color:#8FB4FF}
.legend{display:flex; align-items:center; gap:12px; margin-top:16px; flex-wrap:wrap;
  font-size:13.5px; color:var(--ink-3)}
.legendBar{display:flex; height:11px; border-radius:99px; overflow:hidden; width:190px}
.legendBar i{flex:1}

.drill{border-radius:16px; background:var(--card); border:1px solid var(--edge);
  padding:22px; min-height:340px}
.crumbs{display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--ink-3);
  margin-bottom:16px; flex-wrap:wrap}
.crumbs button{background:none; border:0; color:var(--blue); cursor:pointer; padding:0;
  font:inherit; text-decoration:underline}
.drill h3{font-size:26px; font-weight:700; margin:0 0 4px}
.drill .sc{font-size:14.5px; color:var(--ink-3); margin-bottom:18px}
.statRow{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:18px}
.statBox{padding:14px 16px; border-radius:11px; background:rgba(47,107,255,.09);
  border:1px solid rgba(110,156,255,.28)}
.statBox b{display:block; font:600 24px/1 "IBM Plex Mono",monospace; color:var(--ink);
  margin-bottom:5px; font-variant-numeric:tabular-nums}
.statBox span{font-size:12.5px; color:var(--ink-3); letter-spacing:.03em}
.areaList{display:grid; gap:7px}
.areaBtn{display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  padding:13px 15px; border-radius:11px; cursor:pointer; font-size:15.5px;
  background:rgba(255,255,255,.035); border:1px solid var(--edge); color:var(--ink);
  transition:border-color .14s, transform .14s, background .14s}
html[data-mode="light"] .areaBtn{background:#FBFCFF}
.areaBtn:hover{border-color:var(--blue); transform:translateX(3px)}
.areaBtn .nm{flex:1; font-weight:500}
.areaBtn .rt{font:600 15px/1 "IBM Plex Mono",monospace; color:var(--ink);
  font-variant-numeric:tabular-nums}
.areaBtn .rp{font-size:12.5px; color:var(--ink-3); min-width:74px; text-align:right}
.areaBtn.thin{opacity:.62; cursor:default}
.areaBtn.thin:hover{border-color:var(--edge); transform:none}
.thinNote{margin-top:16px; padding:13px 15px; border-radius:11px; font-size:14px;
  background:rgba(47,107,255,.10); border:1px solid rgba(110,156,255,.3); color:var(--ink-2)}
.thinNote b{color:var(--blue-lit)}
html[data-mode="light"] .thinNote b{color:var(--blue-deep)}

/* ================= guides ================= */
.guideGrid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:38px}
@media(max-width:940px){ .guideGrid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:620px){ .guideGrid{grid-template-columns:1fr} }
.guideCard{position:relative; display:flex; flex-direction:column; gap:11px; padding:24px 22px;
  border-radius:14px; background:var(--card); border:1px solid var(--edge); cursor:pointer;
  transition:transform .16s, border-color .16s, box-shadow .16s; text-align:left; color:inherit}
.guideCard:hover{transform:translateY(-3px); border-color:var(--blue);
  box-shadow:0 20px 44px -22px rgba(6,14,40,.7)}
.gTag{align-self:flex-start; padding:5px 11px; border-radius:99px;
  font:600 11.5px/1 Figtree,sans-serif; letter-spacing:.1em; text-transform:uppercase}
.gTag.home{background:rgba(18,226,154,.16); color:#0FBF83; border:1px solid rgba(18,226,154,.4)}
html[data-mode="dark"] .gTag.home{color:#41E9B0}
.gTag.pro{background:rgba(255,176,32,.16); color:#B47500; border:1px solid rgba(255,176,32,.42)}
html:not([data-mode="light"]) .gTag.pro{color:#FFC658}
.gTag.data{background:rgba(47,107,255,.16); color:var(--blue-deep); border:1px solid rgba(110,156,255,.42)}
html:not([data-mode="light"]) .gTag.data{color:#8FB4FF}
.guideCard h4{margin:0; font:700 19.5px/1.3 Outfit,sans-serif; letter-spacing:-.02em}
.guideCard p{margin:0; font-size:15px; color:var(--ink-2); line-height:1.55}
.gMeta{margin-top:auto; padding-top:6px; font-size:13px; color:var(--ink-3);
  display:flex; gap:10px; align-items:center}
.gMeta i{width:4px; height:4px; border-radius:50%; background:var(--ink-3); display:block}


/* ---------- live address search ---------- */
.searchBar{display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap;
  padding:14px 16px; background:linear-gradient(180deg,#0F1729,#0B1220);
  border-bottom:1px solid var(--line)}
html[data-mode="light"] .searchBar{background:linear-gradient(180deg,#FFFFFF,#F4F8FE)}
.sField{display:flex; flex-direction:column; gap:6px; flex:1 1 260px; min-width:180px}
.sField.narrow{flex:0 1 250px}
.sField label{font:600 11px/1 Figtree,sans-serif; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-3)}
.searchBar .btn{margin-bottom:1px}
.srcbar{bottom:14px; left:14px; display:flex; gap:7px; align-items:center; padding:7px 10px;
  flex-wrap:wrap; max-width:calc(100% - 28px)}
.srcbar select{background:rgba(5,9,18,.6); border:1px solid var(--line-2); color:var(--ink);
  border-radius:8px; padding:6px 8px; font-size:12.5px; max-width:190px}
html[data-mode="light"] .srcbar select{background:#fff}
@media(max-width:900px){
  #status{display:none}
  .tracebar{top:auto; bottom:96px; right:14px}
  .readout{bottom:96px; left:14px; right:auto; min-width:0}
  .srcbar{bottom:14px; left:14px; right:14px; max-width:none}
}