:root{color-scheme:dark;--bg:#0F1714;--surface:#16201C;--ink:#EEF2EF;--muted:#A8B5AF;--line:#2A3631;--brass:#7CC4A6;--brass-soft:#1C2A24;--road:#7CC4A6;--air:#E0B04A;--sea:#5AA9E6;--line-c:#C8D0CC}
*{box-sizing:border-box}[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,"Segoe UI",Helvetica,Arial,sans-serif;line-height:1.55}
a{color:inherit}.wrap{max-width:1240px;margin:0 auto;padding-inline:clamp(16px,3vw,32px)}
h1,h2,h3{letter-spacing:-.02em;line-height:1.15;margin:0}
.top{position:sticky;top:0;z-index:20;background:rgba(15,23,20,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;justify-content:space-between;align-items:center;padding-block:14px}
.mark{font-weight:800;font-size:1.4rem;text-decoration:none}.mark span{color:var(--brass)}
nav{display:flex;gap:22px}nav a{text-decoration:none;color:var(--muted);font-weight:500;font-size:.95rem}nav a:hover{color:var(--ink)}
.hero{padding:28px 0 12px}.crumb{font-size:.88rem;color:var(--muted);margin:0 0 12px}.crumb a{color:var(--muted)}
.hero h1{font-size:clamp(1.9rem,4.2vw,3rem);font-weight:800}
.lede{color:var(--muted);max-width:70ch;margin:12px 0 0}
.appwrap{padding:16px 0 40px}
.app{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:24px;align-items:start}
.panel{display:grid;gap:18px}
form{display:grid;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px}
label{display:grid;gap:5px;font-size:.86rem;font-weight:600;color:var(--muted)}
input,select{font:inherit;font-weight:500;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:.7em .85em;width:100%}
input:focus,select:focus{outline:2px solid var(--brass);outline-offset:1px}
.places{display:grid;gap:8px;position:relative}
.swap{position:absolute;right:10px;top:50%;transform:translateY(-35%);z-index:3;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:1.05rem;cursor:pointer}
.places .ac input{padding-right:52px}
.ac{position:relative}
.ac-list{position:absolute;left:0;right:0;top:100%;z-index:10;background:var(--surface);border:1px solid var(--line);border-radius:10px;margin-top:4px;box-shadow:0 18px 40px rgba(0,0,0,.45);display:none;max-height:320px;overflow:auto}
.ac-list.open{display:block}
.opt{padding:9px 12px;cursor:pointer;display:flex;justify-content:space-between;gap:10px;font-size:.93rem}
.opt small{color:var(--muted);text-align:right}.opt.act,.opt:hover{background:var(--brass-soft)}
.row{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.segb{font:inherit;font-size:.86rem;font-weight:600;padding:.5em .85em;border:0;background:transparent;color:var(--muted);cursor:pointer}
.segb.on{background:var(--brass);color:#0F1714}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.chk{grid-column:1/-1;display:flex;align-items:center;gap:8px;font-weight:500;color:var(--ink)}.chk input{width:auto}
.more summary{cursor:pointer;color:var(--muted);font-size:.9rem;font-weight:600;margin-bottom:8px}
.btn{font:inherit;font-weight:700;border:0;border-radius:10px;padding:.85em 1.2em;background:var(--brass);color:#0F1714;cursor:pointer}
.btn:hover{background:#9FD6BF}.btn:disabled{opacity:.6;cursor:wait}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line);font-weight:600}
.msg{margin:0;font-size:.9rem;color:var(--brass);min-height:1.2em}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px;display:grid;gap:3px;align-content:start}
.card h2{font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);display:flex;align-items:center;gap:8px;font-weight:700}
.card h2 i{width:14px;height:4px;border-radius:2px;display:inline-block}
.card.road h2 i{background:var(--road)}.card.air h2 i{background:var(--air)}.card.sea h2 i{background:var(--sea)}.card.line h2 i{background:var(--line-c)}
.card b{font-size:1.55rem;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.card span{font-size:.88rem;color:var(--ink)}.card small{font-size:.8rem;color:var(--muted)}
.panel h3{font-size:1.05rem}
.bars{display:grid;gap:8px}
.bar{display:grid;grid-template-columns:8.5rem 1fr 5.8rem;gap:10px;align-items:center;font-size:.88rem}
.bar .t{height:12px;border-radius:6px;background:var(--line);overflow:hidden}.bar .t i{display:block;height:100%;border-radius:6px;background:var(--brass)}
.bar.best .t i{background:#3FBF84}.bar.worst .t i{background:#D9774A}
.bar b{text-align:right;font-variant-numeric:tabular-nums}
.note{font-size:.84rem;color:var(--muted);margin:0}
.acts{display:flex;flex-wrap:wrap;gap:10px}
.mapbox{position:sticky;top:80px;height:calc(100vh - 110px);min-height:460px;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#0b1210}
#map{position:absolute;inset:0}
.legend{position:absolute;left:12px;bottom:12px;display:flex;gap:6px;z-index:2}
.lg{font-size:.78rem;font-weight:600;background:rgba(15,23,20,.85);border:1px solid var(--line);border-radius:99px;padding:4px 10px}
.lg:before{content:"";display:inline-block;width:12px;height:3px;border-radius:2px;margin-right:6px;vertical-align:middle}
.lg.road:before{background:var(--road)}.lg.air:before{background:var(--air)}.lg.sea:before{background:var(--sea)}
.maplibregl-ctrl-attrib{font-size:11px}
.content{border-top:1px solid var(--line);padding:40px 0 56px}
.prose{max-width:820px;display:grid;gap:14px}.prose h2{font-size:1.5rem;margin-top:12px}.prose h3{font-size:1.1rem}.prose p,.prose li{color:#D3DBD7}
footer{border-top:1px solid var(--line);padding:26px 0;color:var(--muted);font-size:.88rem}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}footer nav a{font-size:.88rem}
.seg.wide{display:flex}.seg.wide .segb{flex:1;padding:.6em .7em}
.hint{margin:-4px 0 0;font-size:.82rem;color:var(--muted);line-height:1.5}
.hint code{font-size:.8rem;background:var(--bg);border:1px solid var(--line);border-radius:5px;padding:0 4px;color:var(--ink)}
.link{font:inherit;font-weight:600;color:var(--brass);background:none;border:0;padding:0;cursor:pointer}.link:hover{text-decoration:underline}
.pair{display:flex;gap:6px}.pair input{min-width:0}.pair select{width:auto;flex:0 0 auto}
.coords{margin:8px 0 0;font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums}
.card small+small{margin-top:2px}
.pick{display:grid;gap:6px;min-width:170px;color:#14201B}.pick b{font-size:.85rem}.pick small{color:#55645D}
.pick button{font:inherit;font-size:.85rem;font-weight:700;border:0;border-radius:8px;padding:.45em .7em;background:#7CC4A6;color:#0F1714;cursor:pointer}
.pick button+button{background:#E0B04A}
.pin.a,.pin.b{cursor:grab}
.pin{width:16px;height:16px;border-radius:50%;border:3px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.6)}
.pin.a{background:#3FBF84}.pin.b{background:#D9774A}
.pin.hub{width:12px;height:12px;border-width:2px;background:#0F1714}
@media (max-width:960px){.app{grid-template-columns:1fr}.mapbox{position:relative;top:0;height:56vh;min-height:340px;order:-1}}
@media (max-width:520px){.hide-sm{display:none}.cards{grid-template-columns:1fr 1fr}.card b{font-size:1.25rem}.bar{grid-template-columns:6.6rem 1fr 4.8rem;font-size:.8rem}.opts{grid-template-columns:1fr}}
@media print{.top,.mapbox,form,.acts,.content,footer{display:none!important}body{background:#fff;color:#000}.card{border-color:#ccc;background:#fff}.card span,.card small,.note{color:#333}.app{display:block}}
.prose table{width:100%;border-collapse:collapse;font-size:.92rem}.prose th,.prose td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}.prose th{color:var(--muted);font-weight:600}
.prose code{font-size:.85em;background:var(--surface);border:1px solid var(--line);border-radius:5px;padding:0 5px}
.prose ol,.prose ul{display:grid;gap:6px;padding-left:20px;margin:0}
.segwrap{display:grid;gap:4px}.seglabel{font-size:.78rem;font-weight:600;color:var(--muted)}
.opts .full{grid-column:1/-1}
.dims input{text-align:center}
.grps{display:grid;gap:10px}
.grp{margin:0;border:1px solid var(--line);border-radius:12px;padding:10px 12px 12px;min-width:0}
.grp legend{display:flex;align-items:center;gap:8px;font-size:.88rem;font-weight:700;color:var(--ink);padding:0 6px;width:100%}
.grp legend i{width:14px;height:4px;border-radius:2px;display:inline-block}
.grp.road legend i{background:var(--road)}.grp.air legend i{background:var(--air)}.grp.sea legend i{background:var(--sea)}
.tog{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:.8rem;font-weight:600;color:var(--muted);grid-auto-flow:column}.tog input{width:auto}
.grp.off .opts{opacity:.45;pointer-events:none}
.grp .note{align-self:end}
.mapbox.light{background:#a7c7e7}
.mapstyle{position:absolute;left:12px;top:12px;z-index:2;display:flex;border-radius:10px;overflow:hidden;border:1px solid var(--line);box-shadow:0 4px 14px rgba(0,0,0,.35)}
.mapstyle button{font:inherit;font-size:.8rem;font-weight:700;padding:6px 12px;border:0;background:rgba(15,23,20,.88);color:var(--muted);cursor:pointer}
.mapstyle button.on{background:var(--brass);color:#0F1714}
.mapbox.light .lg{background:rgba(255,255,255,.92);color:#14201B;border-color:#cfd8d3}
.mapbox.light .lg.road:before{background:#0B7A55}.mapbox.light .lg.air:before{background:#D9480F}.mapbox.light .lg.sea:before{background:#1D4ED8}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}.chips:empty{display:none}
.chip{font:inherit;font-size:.8rem;font-weight:600;border:1px solid var(--line);background:var(--brass-soft);color:var(--ink);border-radius:99px;padding:3px 10px;cursor:pointer}
.chip:hover{border-color:var(--brass)}
.grp .ac label,.grp div.full>label{display:block;font-size:.86rem;font-weight:600;color:var(--muted);margin-bottom:5px}
.pick button.cancel{background:transparent;color:#55645D;border:1px solid #cfd8d3}