/* KLSCM 2026 FM course guide - design tokens + components */
:root{
  --bg:#F6F6F4; --bg-2:#EFEFEC; --surface:#FFFFFF; --surface-2:#FAFAF8;
  --text:#14181F; --text-2:#3F4754; --text-3:#78818F;
  --line:#E3E3DE; --line-2:#D2D2CB;
  --accent:#2563EB; --accent-2:#1D4ED8; --accent-soft:rgba(37,99,235,.10);
  --brand-2:#16345F; --gold:#E8B23A; --gold-strong:#C88A12; --red:#CE4235; --green:#17916A; --orange:#E07A2F;
  --f-water:#2F7DD1; --f-isotonic:#7C5CD6; --f-gel:#E0913A; --f-banana:#D9B32B; --f-splash:#27B0C4;
  --f-rub:#B25FA0; --f-physio:#3AA37A; --f-surau:#5C7A99; --f-medic:#DC2626;
  --radius:16px; --radius-sm:10px; --maxw:1180px; --header-h:62px;
  --shadow:0 1px 2px rgba(16,24,40,.05), 0 8px 24px -12px rgba(16,24,40,.14);
  --shadow-lg:0 2px 6px rgba(16,24,40,.06), 0 24px 48px -24px rgba(16,24,40,.28);
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}
html[data-theme="dark"]{
  --bg:#0A0E15; --bg-2:#0E141D; --surface:#121822; --surface-2:#161D28;
  --text:#EAEEF5; --text-2:#B4BECD; --text-3:#7C8798;
  --line:#232C3A; --line-2:#2E3846;
  --accent:#5B8DEF; --accent-2:#7BA5F5; --accent-soft:rgba(91,141,239,.14);
  --brand-2:#9FC0FF; --gold:#F0C264; --gold-strong:#F0C264; --red:#F0705F; --green:#3ECFA1; --orange:#F49B54;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.7);
  --shadow-lg:0 2px 8px rgba(0,0,0,.5), 0 30px 60px -28px rgba(0,0,0,.9);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 14px)}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:15.5px; line-height:1.6; -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}
h1,h2,h3{margin:0; letter-spacing:-.02em; line-height:1.16; font-weight:680}
p{margin:0}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; display:block}
button,select,input{font:inherit; color:inherit}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.skip{position:absolute; left:-9999px; top:0; background:var(--accent); color:#fff; padding:10px 16px; border-radius:0 0 8px 0; z-index:200}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* header */
.header{position:sticky; top:0; z-index:100; height:var(--header-h); backdrop-filter:saturate(1.4) blur(12px);
  background:color-mix(in srgb, var(--bg) 82%, transparent); border-bottom:1px solid var(--line)}
.header-in{height:var(--header-h); display:flex; align-items:center; gap:18px}
.brand{display:flex; align-items:center; gap:11px; color:inherit; flex:0 0 auto}
.brand:hover{text-decoration:none}
.brand .mark{width:32px; height:32px; border-radius:9px; background:linear-gradient(140deg,var(--accent),var(--brand-2)); display:grid; place-items:center; box-shadow:var(--shadow)}
.brand .mark svg{width:19px; height:19px}
.brand b{display:block; font-size:13.6px; letter-spacing:-.01em; line-height:1.25}
.brand span span{display:block; font-size:11.6px; color:var(--text-3)}
.nav{display:flex; gap:2px; margin-left:auto; overflow-x:auto; scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{padding:7px 11px; border-radius:8px; font-size:13.4px; font-weight:520; color:var(--text-2); white-space:nowrap}
.nav a:hover{background:var(--bg-2); color:var(--text); text-decoration:none}
.nav a.active{background:var(--accent-soft); color:var(--accent)}
.header-actions{display:flex; align-items:center; gap:8px; flex:0 0 auto}
.icon-btn{width:34px; height:34px; display:grid; place-items:center; border:1px solid var(--line); border-radius:9px;
  background:var(--surface); cursor:pointer; transition:.18s ease}
.icon-btn:hover{border-color:var(--line-2); transform:translateY(-1px)}
.icon-btn svg{width:17px; height:17px}
.theme-toggle .moon{display:none}
html[data-theme="dark"] .theme-toggle .sun{display:none}
html[data-theme="dark"] .theme-toggle .moon{display:block}

/* hero */
.hero{padding:64px 0 46px; background:
  radial-gradient(1100px 460px at 12% -10%, var(--accent-soft), transparent 60%),
  radial-gradient(900px 420px at 92% 0%, rgba(232,178,58,.14), transparent 62%)}
.eyebrow{display:flex; align-items:center; gap:10px; font-size:12.8px; font-weight:560; color:var(--text-2); text-transform:uppercase; letter-spacing:.06em}
.eyebrow .pip{background:var(--red); color:#fff; padding:3px 9px; border-radius:99px; font-size:11px; letter-spacing:.05em; text-transform:uppercase}
.hero h1{font-size:clamp(34px,5.4vw,58px); margin:18px 0 0; max-width:19ch}
.grad{background:linear-gradient(100deg,var(--accent),var(--brand-2) 70%); -webkit-background-clip:text; background-clip:text; color:transparent}
html[data-theme="dark"] .grad{background-image:linear-gradient(100deg,var(--accent-2),#C7DBFF)}
.lede{margin-top:18px; max-width:70ch; font-size:17px; color:var(--text-2)}
.hero-cta{display:flex; flex-wrap:wrap; gap:10px; margin-top:26px}
.btn{display:inline-flex; align-items:center; gap:8px; padding:11px 17px; border-radius:11px; font-size:14.2px; font-weight:600;
  border:1px solid transparent; cursor:pointer; transition:.18s ease}
.btn:hover{text-decoration:none; transform:translateY(-1px)}
.btn svg{width:16px; height:16px}
.btn-primary{background:var(--accent); color:#fff; box-shadow:var(--shadow)}
.btn-primary:hover{background:var(--accent-2)}
.btn-ghost{background:var(--surface); border-color:var(--line); color:var(--text)}
.btn-ghost:hover{border-color:var(--line-2)}
.countdown{display:flex; gap:10px; flex-wrap:wrap; margin-top:32px}
.cd-unit{min-width:92px; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--surface); box-shadow:var(--shadow)}
.cd-unit b{display:block; font-size:26px; font-family:var(--mono); letter-spacing:-.03em; line-height:1.1}
.cd-unit span{font-size:11.4px; color:var(--text-3); text-transform:uppercase; letter-spacing:.07em}
.stats{display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin-top:34px}
.stat{padding:16px 16px 14px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow)}
.stat .k{font-size:11.4px; text-transform:uppercase; letter-spacing:.07em; color:var(--text-3); font-weight:600}
.stat .v{font-size:27px; font-weight:700; letter-spacing:-.03em; margin-top:6px; font-family:var(--mono)}
.stat .v small{font-size:13px; color:var(--text-3); margin-left:3px; font-family:inherit}
.stat .s{font-size:12.2px; color:var(--text-3); margin-top:3px}

/* sections */
.section{padding:52px 0 8px}
.section-head{max-width:74ch; margin-bottom:22px}
.tag{display:inline-block; font-size:11.4px; font-weight:650; letter-spacing:.08em; text-transform:uppercase; color:var(--accent);
  background:var(--accent-soft); padding:4px 10px; border-radius:99px; margin-bottom:12px}
.section-head h2{font-size:clamp(24px,3vw,33px)}
.section-head p{margin-top:12px; color:var(--text-2); font-size:15.6px}
.subhead{font-size:12.4px; font-weight:660; text-transform:uppercase; letter-spacing:.08em; color:var(--text-3); margin:30px 0 12px}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden}
.card-pad{padding:20px}
.card-pad h3{font-size:16.4px; margin-bottom:8px}
.card-pad p{color:var(--text-2); font-size:14.4px}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.hint{font-size:13px; color:var(--text-3)}

/* toolbar + chips */
.toolbar{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:14px 16px; border-bottom:1px solid var(--line); background:var(--surface-2)}
.spacer{flex:1 1 auto}
.seg{display:inline-flex; padding:3px; gap:3px; background:var(--bg-2); border:1px solid var(--line); border-radius:10px}
.seg button{border:0; background:transparent; padding:7px 13px; border-radius:8px; font-size:13.2px; font-weight:580; color:var(--text-2); cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--surface); color:var(--text); box-shadow:var(--shadow)}
.seg button:disabled{opacity:.45; cursor:not-allowed}
.chips{display:flex; gap:6px; flex-wrap:wrap}
.chip{display:inline-flex; align-items:center; gap:7px; padding:6px 11px; border-radius:99px; border:1px solid var(--line);
  background:var(--surface); font-size:12.7px; font-weight:540; color:var(--text-2); cursor:pointer; transition:.16s ease}
.chip:hover{border-color:var(--line-2); color:var(--text)}
.chip[aria-pressed="true"]{border-color:var(--accent); background:var(--accent-soft); color:var(--accent)}
.chip .dot{width:9px; height:9px; border-radius:50%}
.chip .n{font-family:var(--mono); font-size:11.4px; color:var(--text-3)}
select.chip{padding:9px 12px; border-radius:10px; width:100%}

/* explorer */
.explorer{display:grid; grid-template-columns:1.28fr 1fr; min-height:520px}
.map-pane{position:relative; border-right:1px solid var(--line); background:var(--bg-2); min-height:520px}
#leafletMap{position:absolute; inset:0; z-index:1}
#schematic{position:absolute; inset:0; width:100%; height:100%; z-index:1}
.map-pane[data-view="street"] #schematic{display:none}
.map-pane[data-view="schematic"] #leafletMap{display:none}
.map-tools{position:absolute; right:12px; top:12px; z-index:20; display:flex; flex-direction:column; gap:6px}
.map-badge{position:absolute; left:12px; bottom:12px; z-index:20; background:var(--surface); border:1px solid var(--line);
  border-radius:99px; padding:6px 12px; font-size:12.2px; font-weight:560; box-shadow:var(--shadow)}
.station-list{max-height:640px; overflow-y:auto; padding:8px}
.st{display:flex; gap:12px; padding:11px 12px; border-radius:12px; cursor:pointer; transition:.16s ease; border:1px solid transparent}
.st:hover{background:var(--surface-2); border-color:var(--line)}
.st.active{background:var(--accent-soft); border-color:var(--accent)}
.st.dim{opacity:.3}
.st .badge{flex:0 0 auto; width:26px; height:26px; border-radius:8px; background:var(--accent); color:#fff; font-size:12.4px;
  font-weight:700; display:grid; place-items:center; font-family:var(--mono)}
.st.cp .badge{background:var(--gold-strong)}
.st .top{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap}
.st .km{font-weight:650; font-size:14.2px}
.st .road{font-size:12.4px; color:var(--text-3)}
.st .cpb{font-size:10.8px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#fff;
  background:var(--gold-strong); padding:2px 7px; border-radius:99px}
.st .facs{display:flex; gap:6px; flex-wrap:wrap; margin-top:6px}
.st .note{font-size:12.2px; color:var(--text-3); margin-top:5px}
.fac{display:inline-flex; align-items:center; gap:5px; font-size:11.8px; color:var(--text-2); background:var(--bg-2);
  border-radius:99px; padding:2px 8px}
.fac i{width:7px; height:7px; border-radius:50%}

/* map pins */
.pin{width:26px; height:26px; border-radius:50%; background:var(--accent); color:#fff; font-size:12px; font-weight:700;
  display:grid; place-items:center; border:2px solid #fff; box-shadow:0 2px 8px rgba(0,0,0,.35); font-family:var(--mono)}
.pin.cp{background:var(--gold-strong)}
.pin.dim{opacity:.28}
.pin.active{transform:scale(1.25); box-shadow:0 0 0 4px var(--accent-soft), 0 2px 10px rgba(0,0,0,.4)}
.km-pin{width:8px; height:8px; border-radius:50%; background:#fff; border:2px solid var(--brand-2)}
html[data-theme="dark"] .leaflet-tile{filter:invert(1) hue-rotate(180deg) brightness(.92) contrast(.92)}
html[data-theme="dark"] .leaflet-container{background:#0E141D}
.leaflet-popup-content-wrapper{border-radius:12px}

/* tables */
.table-scroll{overflow-x:auto}
.t{width:100%; border-collapse:collapse; font-size:13.8px}
.t th{text-align:left; font-size:11.4px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-3);
  font-weight:650; padding:12px 14px; border-bottom:1px solid var(--line); background:var(--surface-2); white-space:nowrap}
.t td{padding:12px 14px; border-bottom:1px solid var(--line); color:var(--text-2); vertical-align:top}
.t tbody tr:last-child td{border-bottom:0}
.t tbody tr:hover td{background:var(--surface-2)}
.t td b{color:var(--text)}
.t .num{font-family:var(--mono); white-space:nowrap; text-align:right}
.t th.num{text-align:right}
.tag-pill{display:inline-block; font-size:11.4px; font-weight:620; padding:2px 9px; border-radius:99px;
  background:var(--bg-2); color:var(--text-2); white-space:nowrap}
.tag-pill.gold{background:rgba(232,178,58,.18); color:var(--gold-strong)}
.tag-pill.red{background:rgba(206,66,53,.14); color:var(--red)}
.tag-pill.green{background:rgba(23,145,106,.14); color:var(--green)}
.acc{border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow); overflow:hidden}
.acc summary{cursor:pointer; padding:14px 18px; font-size:13.6px; font-weight:600; list-style:none; display:flex; justify-content:space-between; align-items:center}
.acc summary::after{content:"+"; font-family:var(--mono); color:var(--text-3)}
.acc[open] summary{border-bottom:1px solid var(--line)}
.acc[open] summary::after{content:"\2212"}
.acc summary::-webkit-details-marker{display:none}

/* elevation profile */
.profile-wrap{padding:16px}
.readout{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:8px}
.readout div{background:var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:9px 12px}
.readout span{display:block; font-size:10.8px; text-transform:uppercase; letter-spacing:.07em; color:var(--text-3); font-weight:620}
.readout b{font-size:15px; font-family:var(--mono); letter-spacing:-.02em}
#profile{width:100%; height:auto; touch-action:none; cursor:crosshair}
.prof-grid{stroke:var(--line); stroke-width:1}
.prof-axis{fill:var(--text-3); font-size:11px; font-family:var(--mono)}
.prof-line{fill:none; stroke:var(--accent); stroke-width:2.4; stroke-linejoin:round}
.prof-area-top{stop-color:var(--accent); stop-opacity:.30}
.prof-area-bot{stop-color:var(--accent); stop-opacity:.02}
.prof-cp{stroke:var(--gold-strong); stroke-width:1.4; stroke-dasharray:5 4}
.prof-cp-label{fill:var(--gold-strong); font-size:10.4px; font-weight:650}
.prof-st{fill:var(--surface); stroke:var(--f-water); stroke-width:2}
.prof-cursor{stroke:var(--text-3); stroke-width:1; stroke-dasharray:3 3}
.prof-dot{fill:var(--accent); stroke:var(--surface); stroke-width:2.5}

/* schematic */
.sch-halo{fill:none; stroke:var(--accent); stroke-opacity:.16; stroke-width:11; stroke-linejoin:round; stroke-linecap:round}
.sch-route{fill:none; stroke:var(--accent); stroke-width:3.4; stroke-linejoin:round; stroke-linecap:round}
.sch-km{fill:var(--surface); stroke:var(--brand-2); stroke-width:2}
.sch-kmlabel{fill:var(--text-3); font-size:11px; font-family:var(--mono)}
.sch-start{fill:var(--red); stroke:var(--surface); stroke-width:3}
.sch-label{fill:var(--text-2); font-size:12.4px; font-weight:600}
.sch-st{cursor:pointer}
.sch-st circle{fill:var(--accent); stroke:var(--surface); stroke-width:2}
.sch-st text{fill:#fff; font-size:9.6px; font-weight:700; font-family:var(--mono); pointer-events:none}
.sch-st.cp circle{fill:var(--gold-strong)}
.sch-st.dim{opacity:.22}
.sch-st.active circle{stroke:var(--accent); stroke-width:3.5; r:11}

/* callouts */
.callout{display:flex; gap:13px; padding:16px 18px; border-radius:var(--radius); border:1px solid var(--line);
  background:var(--surface); box-shadow:var(--shadow)}
.callout p{font-size:14.2px; color:var(--text-2)}
.callout .ico{font-size:20px; line-height:1.2}
.callout.warn{border-color:rgba(232,178,58,.5); background:linear-gradient(0deg,rgba(232,178,58,.07),rgba(232,178,58,.07)),var(--surface)}
.callout.info{border-color:rgba(37,99,235,.35); background:linear-gradient(0deg,var(--accent-soft),var(--accent-soft)),var(--surface)}
.callout.danger{border-color:rgba(206,66,53,.42); background:linear-gradient(0deg,rgba(206,66,53,.07),rgba(206,66,53,.07)),var(--surface)}

/* calculator */
.calc{display:grid; grid-template-columns:340px 1fr}
.calc-controls{padding:20px; border-right:1px solid var(--line); background:var(--surface-2); display:flex; flex-direction:column; gap:22px}
.calc-out{padding:20px}
.field label,.field-label{display:block; font-size:11.6px; font-weight:660; text-transform:uppercase; letter-spacing:.07em; color:var(--text-3); margin-bottom:9px}
.goal-display{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:8px}
.goal-display b{font-size:32px; font-family:var(--mono); letter-spacing:-.035em}
.goal-display span{font-size:12.8px; color:var(--text-3); font-family:var(--mono)}
input[type="range"]{-webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:99px; background:
  linear-gradient(90deg,var(--accent) var(--fill,50%), var(--line-2) var(--fill,50%)); cursor:pointer}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none; width:20px; height:20px; border-radius:50%; background:var(--surface);
  border:2px solid var(--accent); box-shadow:var(--shadow); cursor:grab}
input[type="range"]::-moz-range-thumb{width:18px; height:18px; border-radius:50%; background:var(--surface); border:2px solid var(--accent)}
.range-scale{display:flex; justify-content:space-between; font-size:11px; color:var(--text-3); font-family:var(--mono); margin-top:6px}
.presets{display:flex; gap:6px; flex-wrap:wrap; margin-top:12px}
.presets .chip{font-family:var(--mono); font-size:12.2px}
.opt-list{display:flex; flex-direction:column; gap:8px}
.opt{display:flex; gap:10px; padding:11px 12px; border:1px solid var(--line); border-radius:12px; background:var(--surface); cursor:pointer; transition:.16s ease}
.opt:hover{border-color:var(--line-2)}
.opt input{margin-top:3px; accent-color:var(--accent)}
.opt b{display:block; font-size:13.6px}
.opt span span{display:block; font-size:12.2px; color:var(--text-3); margin-top:2px}
.opt:has(input:checked){border-color:var(--accent); background:var(--accent-soft)}
.result-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
.res{padding:14px; border:1px solid var(--line); border-radius:12px; background:var(--surface-2)}
.res .k{font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--text-3); font-weight:640}
.res .v{font-size:24px; font-weight:700; font-family:var(--mono); letter-spacing:-.035em; margin-top:5px}
.res .s{font-size:11.8px; color:var(--text-3); margin-top:2px}
.res.ok{border-color:rgba(23,145,106,.45); background:rgba(23,145,106,.08)}
.res.ok .v{color:var(--green)}
.res.tight{border-color:rgba(232,178,58,.5); background:rgba(232,178,58,.1)}
.res.tight .v{color:var(--gold-strong)}
.res.bad{border-color:rgba(206,66,53,.5); background:rgba(206,66,53,.09)}
.res.bad .v{color:var(--red)}
.gate-row{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
.gate{padding:13px 14px; border-radius:12px; border:1px solid var(--line); background:var(--surface-2)}
.gate .g-km{font-size:13.4px; font-weight:700}
.gate .g-sub{font-size:11.4px; color:var(--text-3)}
.gate .g-eta{font-size:19px; font-family:var(--mono); font-weight:650; margin-top:7px; letter-spacing:-.02em}
.gate .g-margin{font-size:11.8px; font-weight:600; margin-top:2px}
.gate.ok{border-color:rgba(23,145,106,.42)} .gate.ok .g-margin{color:var(--green)}
.gate.tight{border-color:rgba(232,178,58,.5)} .gate.tight .g-margin{color:var(--gold-strong)}
.gate.bad{border-color:rgba(206,66,53,.5); background:rgba(206,66,53,.08)} .gate.bad .g-margin{color:var(--red)}
.splitbars{display:flex; flex-direction:column; gap:6px}
.sb{display:grid; grid-template-columns:74px 1fr 62px; align-items:center; gap:10px}
.sb .lab{font-size:12px; font-family:var(--mono); color:var(--text-3)}
.sb .bar{height:16px; border-radius:99px; background:var(--bg-2); overflow:hidden}
.sb .bar i{display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.sb .bar.up i{background:linear-gradient(90deg,var(--orange),var(--red))}
.sb .bar.down i{background:linear-gradient(90deg,var(--green),#4CC79B)}
.sb .val{font-size:12.6px; font-family:var(--mono); text-align:right; font-weight:600}

/* downloads + figures */
.dl{display:flex; align-items:center; gap:14px; padding:16px 18px; border-bottom:1px solid var(--line)}
.dl:last-child{border-bottom:0}
.dl .ic{font-size:21px; width:42px; height:42px; display:grid; place-items:center; background:var(--surface-2); border:1px solid var(--line); border-radius:11px}
.dl div:nth-child(2){flex:1 1 auto}
.dl b{display:block; font-size:14.4px}
.dl span{font-size:12.6px; color:var(--text-3)}
figure{margin:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--surface); box-shadow:var(--shadow)}
figcaption{padding:12px 16px; font-size:12.8px; color:var(--text-3); border-top:1px solid var(--line)}

/* footer + to-top */
.footer{margin-top:56px; border-top:1px solid var(--line); background:var(--surface); padding:26px 0}
.footer-in{display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:12.6px; color:var(--text-3)}
.to-top{position:fixed; right:20px; bottom:20px; width:42px; height:42px; border-radius:50%; border:1px solid var(--line);
  background:var(--surface); box-shadow:var(--shadow-lg); display:grid; place-items:center; cursor:pointer; opacity:0;
  pointer-events:none; transform:translateY(8px); transition:.22s ease; z-index:90}
.to-top.show{opacity:1; pointer-events:auto; transform:none}
.to-top svg{width:18px; height:18px}

/* responsive */
@media (max-width:1080px){
  .stats{grid-template-columns:repeat(3,1fr)}
  .explorer{grid-template-columns:1fr}
  .map-pane{border-right:0; border-bottom:1px solid var(--line); min-height:440px}
  .calc{grid-template-columns:1fr}
  .calc-controls{border-right:0; border-bottom:1px solid var(--line)}
  .result-grid,.gate-row{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:1fr 1fr}
  .nav{display:none}
}
@media (max-width:720px){
  body{font-size:15px}
  .wrap{padding:0 16px}
  .hero{padding:40px 0 34px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .readout{grid-template-columns:1fr 1fr}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .cd-unit{min-width:72px; flex:1 1 auto}
  .sb{grid-template-columns:64px 1fr 54px}
}
@media print{
  .header,.to-top,.map-tools,.toolbar,.calc-controls{display:none}
  body{background:#fff}
  .card,.acc{box-shadow:none}
}