@font-face{font-family:"Barlow Condensed";font-weight:600;font-display:swap;src:url(/fonts/barlow-condensed-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:700;font-display:swap;src:url(/fonts/barlow-condensed-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:800;font-display:swap;src:url(/fonts/barlow-condensed-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:400;font-display:swap;src:url(/fonts/inter-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:500;font-display:swap;src:url(/fonts/inter-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:600;font-display:swap;src:url(/fonts/inter-latin-600-normal.woff2) format("woff2")}
:root{
  --bg:#F7F8FC;--sea:#E3E7F4;--land:#FFFFFF;--border:#C9CEE6;--bg2:#FFFFFF;--panel:rgba(255,255,255,.94);--ink:#0D1030;--ink2:#3C4270;--muted:#62689A;--faint:#9AA0C8;--line:#DCDFEF;--chip:#F2F3FA;
  --pink:#E3184F;--orange:#E08600;--cyan:#0A93C9;--violet:#6E4FE0;--r5:#B4237A;--green:#0F9F68;--amber:#C77700;
  --grad:linear-gradient(90deg,#E3184F,#F0582C 55%,#E08600);--shadow:0 8px 30px rgba(20,24,70,.12);--route:#1F5FD6;--notown:#F09AA6;--own:#3E9A6C;--ann:#E3184F;
  --hd:"Barlow Condensed","Arial Narrow",sans-serif;--ui:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;--r:14px;
}
:root[data-theme="dark"]{
  --bg:#070A1F;--sea:#070A1F;--land:#11163A;--border:#2A3170;--bg2:#0D112E;--panel:rgba(12,16,44,.94);--ink:#F2F3FF;--ink2:#B9BEE8;--muted:#7F86C2;--faint:#4A5190;--line:#232A5E;--chip:#161C48;
  --pink:#FF2E63;--orange:#FFA41B;--cyan:#2EC4FF;--violet:#9B7BFF;--r5:#FF6FC8;--green:#3DDC97;--amber:#FFC24B;--route:#5B9BFF;--notown:#B4596B;--own:#4FBF8B;--ann:#FF5A70;--grad:linear-gradient(90deg,#FF2E63,#FF6A3D 55%,#FFA41B);--shadow:0 10px 40px rgba(0,0,0,.5)}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font:400 14.5px/1.5 var(--ui);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
body{overflow:hidden}
a{color:inherit}
button{font:inherit;color:inherit}
.hd{font-family:var(--hd);text-transform:uppercase;letter-spacing:.05em}
/* top bar */
#top{position:fixed;top:0;left:0;right:0;height:58px;z-index:1200;display:flex;align-items:center;gap:10px;padding:0 14px;background:var(--panel);border-bottom:1px solid var(--line);backdrop-filter:blur(10px)}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;flex:none}
.brand svg{width:30px;height:30px}
.brand b{font:800 22px/1 var(--hd);letter-spacing:.06em;text-transform:uppercase}
.brand b span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.beta{font:700 10px var(--ui);letter-spacing:.08em;color:var(--orange);border:1px solid currentColor;border-radius:5px;padding:1px 5px;margin-left:2px}
#nav{display:flex;gap:4px;margin-left:16px}
#nav a{font:700 15px var(--hd);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;color:var(--muted);padding:8px 12px;border-radius:10px;display:flex;align-items:center;gap:6px}
#nav a:hover{color:var(--ink)}
#nav a.on{color:var(--ink);background:var(--chip)}
#nav a i{font:600 11px var(--ui);font-style:normal;background:var(--pink);color:#fff;border-radius:999px;padding:0 6px;letter-spacing:0}
.sp{flex:1}
.ibtn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:36px;min-width:36px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:var(--bg2);font:600 13px var(--ui);color:var(--ink2);cursor:pointer;white-space:nowrap}
.ibtn:hover{color:var(--ink);border-color:var(--muted)}
.ibtn svg{width:16px;height:16px}
/* signed in: the person icon is filled in the own colour (on phones the icon is all there is) */
.ibtn.signed{color:var(--own);border-color:var(--own)}.ibtn.signed svg circle,.ibtn.signed svg path{fill:currentColor}
.plst .steamok{color:var(--own)}.plst .plnames{display:block;margin-top:2px;color:var(--muted)}.plhint{margin-top:8px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:700 15px var(--hd);letter-spacing:.07em;text-transform:uppercase;color:#fff;background:var(--grad);border:0;border-radius:11px;padding:10px 16px;cursor:pointer;text-decoration:none}
.btn.ghost{background:var(--chip);color:var(--ink)}
.btn.blue{background:#1F5FD6;color:#fff}.btn.warm{background:color-mix(in srgb,var(--pink) 12%,var(--panel));color:var(--pink);border:1px solid color-mix(in srgb,var(--pink) 35%,transparent)}.btn.blue:hover{background:#1A50B8}
.btn:disabled{opacity:.5;cursor:default}
/* map */
#map{position:fixed;top:58px;left:0;right:0;bottom:0;background:var(--sea)}
.leaflet-container{background:var(--sea);font-family:var(--ui)}
.leaflet-control-attribution{background:var(--panel)!important;color:var(--muted)!important;font-size:10px}
.leaflet-control-attribution a{color:var(--ink2)!important}
.leaflet-control-zoom a{background:var(--bg2)!important;color:var(--ink)!important;border-color:var(--line)!important}
.stl{background:none!important;border:0!important;box-shadow:none!important;color:var(--ink2)!important;font:600 11px var(--ui)!important;padding:0 3px!important;text-shadow:0 0 3px var(--sea),0 0 3px var(--sea),0 0 6px var(--sea)}
.stl::before{display:none}
.stl.t{font:700 13px var(--hd)!important;letter-spacing:.05em;text-transform:uppercase;color:var(--ink)!important}
.tip{background:var(--bg2)!important;color:var(--ink)!important;border:1px solid var(--line)!important;border-radius:9px!important;box-shadow:var(--shadow)!important;font:600 12.5px var(--ui)!important;padding:6px 9px!important}
.tip::before{display:none}
.tip small{display:block;font-weight:500;color:var(--muted)}
/* panels */
.panel{position:fixed;z-index:1000;background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);backdrop-filter:blur(12px);display:flex;flex-direction:column;overflow:hidden}
#find{top:72px;left:14px;bottom:14px;width:340px}
#card{top:72px;right:14px;width:360px;max-height:calc(100% - 86px);display:none}
#card.open{display:flex}.cgrab{position:absolute;top:0;left:50%;transform:translateX(-50%);width:64px;height:22px;border:0;background:none;cursor:pointer;z-index:2;padding:0}.cgrab i{display:block;width:40px;height:5px;margin:8px auto 0;border-radius:3px;background:var(--line)}#card.tall .cgrab i{background:var(--muted)}
.ph{padding:14px 16px 10px;display:flex;align-items:center;gap:8px}
.ph h2{margin:0;font:800 22px/1 var(--hd);letter-spacing:.05em;text-transform:uppercase}
.scroll{overflow:auto;-webkit-overflow-scrolling:touch}
.fbody{overflow:auto;-webkit-overflow-scrolling:touch;flex:1;min-height:0}
.fx{padding:4px 16px 10px;border-bottom:1px solid var(--line)}
.fx .fgx{display:none}.fx.more .fgx{display:block}
.fmore,.lnk{display:inline-block;margin:4px 0 2px;font:600 12.5px var(--ui);color:var(--ink2);cursor:pointer;text-decoration:underline;text-underline-offset:3px;background:none;border:0;padding:0}
#page{z-index:1100}
body.cardopen .rchips{display:none}
.ri .ftag{display:inline-block;font:700 9.5px var(--ui);letter-spacing:.04em;padding:0 4px;border-radius:4px;background:var(--chip);color:var(--ink2);margin-left:3px;vertical-align:1px}
.fg{margin:8px 0}
.fg h4{margin:0 0 6px;font:600 11px var(--ui);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:5px}
.chip{font:600 12px var(--ui);color:var(--ink2);background:var(--chip);border:1px solid transparent;border-radius:999px;padding:5px 10px;cursor:pointer;user-select:none;white-space:nowrap}
.chip:hover{color:var(--ink)}
.chip.on{background:var(--ink);color:var(--bg)}
.chip.dis{opacity:.4;cursor:default}
.rng{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--ink2)}
.rng input{flex:1;accent-color:var(--pink)}
.res{padding:6px 10px 12px}
.cnt{display:flex;justify-content:space-between;align-items:center;padding:10px 16px 4px;font-size:12.5px;color:var(--muted)}
.cnt a{color:var(--ink2);cursor:pointer;text-decoration:underline}
.ri{display:flex;align-items:center;gap:10px;padding:9px 8px;border-radius:12px;cursor:pointer}
.ri:hover{background:var(--chip)}
.ri .bar{width:4px;align-self:stretch;border-radius:4px;flex:none}
.ri .n{font-weight:600;line-height:1.25}
.ri .m{font-size:12px;color:var(--muted)}
.ri .pc{margin-left:auto;font:700 17px var(--hd);flex:none}
.flag{font-size:13px}
/* route card */
.cardin{padding:16px 18px 18px}
.x{position:absolute;right:10px;top:8px;background:none;border:0;font-size:24px;line-height:1;color:var(--muted);cursor:pointer;padding:6px}
.kick{font:600 11px var(--ui);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.title{font:800 23px/1.04 var(--hd);text-transform:uppercase;letter-spacing:.02em;margin:4px 0 8px}
.badges{display:flex;flex-wrap:wrap;gap:5px;margin:6px 0}
.bdg{font:600 11.5px var(--ui);border-radius:7px;padding:2px 8px;background:var(--chip);color:var(--ink2)}
.bdg.own{background:color-mix(in srgb,var(--green) 18%,var(--panel));color:var(--green)}
.bdg.up{background:color-mix(in srgb,var(--violet) 18%,var(--panel));color:var(--violet)}
.bdg.warn{background:color-mix(in srgb,var(--amber) 18%,var(--panel));color:var(--amber)}
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:10px 0}
.ft{border:1px solid var(--line);border-radius:10px;padding:7px 6px;text-align:center;font-size:11.5px;color:var(--faint)}
.ft b{display:block;font:800 17px/1.1 var(--hd)}
.ft.on{color:var(--ink);border-color:var(--muted)}
.ft.on b{color:var(--green)}
.meter{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink2);margin:4px 0}
.meter span{width:62px;color:var(--muted)}
.dots{display:flex;gap:3px}
.dots i{width:16px;height:6px;border-radius:3px;background:var(--line)}
.dots i.on{background:var(--grad)}
.ring{display:flex;align-items:center;gap:14px;margin:12px 0}
.ring b{font:800 26px var(--hd)}
.ring .lbl{font-size:12.5px;color:var(--ink2)}
.acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
/* pages */
#page{position:fixed;top:58px;left:0;right:0;bottom:0;overflow:auto;background:var(--bg);display:none;-webkit-overflow-scrolling:touch}
#page.open{display:block}
.wrap{max-width:1080px;margin:0 auto;padding:22px 20px 24px}
.back{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);text-decoration:none;margin-bottom:8px;cursor:pointer}
.back:hover{color:var(--ink)}
.hero h1{font:800 clamp(30px,5vw,48px)/1 var(--hd);text-transform:uppercase;letter-spacing:.02em;margin:6px 0 10px}
.lead{color:var(--ink2);max-width:720px}
.grid2{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:18px;margin-top:18px}
.box{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;margin-bottom:16px}
.box h3{margin:0 0 10px;font:800 19px var(--hd);letter-spacing:.05em;text-transform:uppercase;display:flex;align-items:center;gap:8px}
.box h3 small{font:500 12px var(--ui);letter-spacing:0;text-transform:none;color:var(--muted);margin-left:auto}
.note{font-size:13px;color:var(--muted)}
.fam{display:flex;align-items:flex-start;gap:9px;padding:7px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.fam:last-child{border-bottom:0}
.st{width:18px;height:18px;border-radius:50%;flex:none;display:grid;place-items:center;margin-top:1px;font-size:11px;font-weight:700}
.st.ok{background:color-mix(in srgb,var(--green) 18%,var(--panel));color:var(--green)}
.st.lock{background:color-mix(in srgb,var(--pink) 15%,var(--panel));color:var(--pink)}
.st.na{background:var(--chip);color:var(--muted)}
.pk{display:inline-block;font:600 11.5px var(--ui);border-radius:6px;padding:1px 7px;margin:2px 4px 0 0;background:var(--chip);color:var(--ink2);text-decoration:none}
.pk.have{background:color-mix(in srgb,var(--green) 16%,var(--panel));color:var(--green)}
.pk.need{background:color-mix(in srgb,var(--pink) 14%,var(--panel));color:var(--pink)}
.tag{font:600 10.5px var(--ui);letter-spacing:.05em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:5px;padding:0 5px;margin-left:4px}
.tabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:10px}
.tabs button{border:1px solid var(--line);background:var(--chip);border-radius:9px;padding:5px 10px;font:600 12.5px var(--ui);color:var(--ink2);cursor:pointer}
.tabs button.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:13.5px}
.kv dt{color:var(--muted)}
.kv dd{margin:0}
.src{font-size:12px;color:var(--muted);margin-top:18px;border-top:1px solid var(--line);padding-top:12px}
.chk{font-size:13px;border-left:3px solid var(--green);padding:6px 10px;background:color-mix(in srgb,var(--green) 8%,var(--panel));border-radius:0 8px 8px 0;margin:6px 0}
.warnbox{font-size:13px;border-left:3px solid var(--amber);padding:6px 10px;background:color-mix(in srgb,var(--amber) 9%,var(--panel));border-radius:0 8px 8px 0;margin:6px 0}
.list{display:flex;flex-direction:column;gap:10px}
.pcard{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;display:grid;grid-template-columns:auto 1fr auto;gap:4px 14px;align-items:center}
.pcard .rk{font:800 26px var(--hd);color:var(--faint);width:34px;text-align:center}
.pcard .t{font-weight:600;font-size:15px}
.pcard .m{font-size:12.5px;color:var(--muted)}
.pcard .v{text-align:right}
.pcard .v b{font:800 24px var(--hd);color:var(--green)}
.pcard .v small{display:block;font-size:11.5px;color:var(--muted)}
.pcard .more{grid-column:2 / 4}
.price{font:600 13px var(--ui)}
.price s{color:var(--muted);font-weight:500;margin-right:4px}
.price .pst{font:600 10.5px var(--ui);color:var(--muted);margin-left:5px}
.sale{font:700 11px var(--ui);color:#fff;background:var(--green);border-radius:5px;padding:1px 5px;margin-left:4px}
/* my tsw */
.steps{display:grid;gap:16px}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg button{border:1px solid var(--line);background:var(--bg2);border-radius:11px;padding:9px 13px;font:600 13.5px var(--ui);color:var(--ink2);cursor:pointer}
.seg button.on{border-color:var(--pink);color:var(--ink);box-shadow:inset 0 0 0 1px var(--pink)}
.tick{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:6px}
.tk{display:flex;align-items:center;gap:9px;padding:8px 10px;border:1px solid var(--line);border-radius:11px;cursor:pointer;background:var(--bg2);font-size:13.5px;line-height:1.25;user-select:none}
.tk:hover{border-color:var(--muted)}
.tk .bx{width:18px;height:18px;border-radius:5px;border:2px solid var(--faint);flex:none;display:grid;place-items:center;color:#fff;font-size:12px}
.tk.on{border-color:var(--green)}
.tk.on .bx{background:var(--green);border-color:var(--green)}
.tk.ed .bx{background:var(--violet);border-color:var(--violet)}
.tk small{display:block;color:var(--muted);font-size:11.5px}
.tk.dim{opacity:.45}
.search{width:100%;font:500 15px var(--ui);color:var(--ink);background:var(--bg2);border:1px solid var(--line);border-radius:11px;padding:10px 12px;outline:0}
.search:focus{border-color:var(--muted)}
.stat{display:flex;gap:10px;flex-wrap:wrap}
.stat div{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:10px 14px;min-width:120px}
.stat b{font:800 26px/1 var(--hd);display:block}
.stat span{font-size:12px;color:var(--muted)}
.empty{color:var(--muted);text-align:center;padding:30px 16px;border:1px dashed var(--line);border-radius:var(--r)}
/* modal */
#modal{position:fixed;inset:0;z-index:2000;background:rgba(5,7,25,.55);display:none;align-items:center;justify-content:center;padding:16px}
#modal.open{display:flex}
#modal .mb{background:var(--bg2);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);width:min(520px,100%);max-height:90vh;overflow:auto;padding:20px;position:relative}
#modal h3{margin:0 0 8px;font:800 24px var(--hd);text-transform:uppercase;letter-spacing:.04em}
#modal textarea,#modal input[type=email],#modal input[type=text]{width:100%;font:500 14px var(--ui);color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px;margin:8px 0}
#modal ol{padding-left:20px;font-size:13.5px;color:var(--ink2)}
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(120px);z-index:2100;background:var(--ink);color:var(--bg);font-weight:600;font-size:13.5px;padding:10px 16px;border-radius:12px;transition:transform .25s}
#toast.on{transform:translateX(-50%) translateY(0)}
/* bottom nav (mobile) */
#bnav{display:none}
#mtoggle{display:none}
footer.ft2{font-size:12px;color:var(--muted);text-align:center;padding:20px 16px 30px}
@media (max-width:820px){
  #top{height:52px;padding:0 10px}
  #nav{display:none}
  .brand b{font-size:20px}
  .ibtn .lbl{display:none}
  #map{top:52px;bottom:62px}
  #page{top:52px;bottom:62px}
  #bnav{display:flex;position:fixed;left:0;right:0;bottom:0;height:62px;z-index:1200;background:var(--panel);border-top:1px solid var(--line);backdrop-filter:blur(10px);padding-bottom:env(safe-area-inset-bottom)}
  #bnav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-decoration:none;color:var(--muted);font:700 12px var(--hd);letter-spacing:.06em;text-transform:uppercase;position:relative}
  #bnav a.on{color:var(--ink)}
  #bnav svg{width:20px;height:20px}
  #bnav a i{position:absolute;top:6px;left:calc(50% + 6px);font:600 10px var(--ui);font-style:normal;background:var(--pink);color:#fff;border-radius:999px;padding:0 5px}
  #find{left:0;right:0;width:auto;top:auto;bottom:62px;border-radius:18px 18px 0 0;max-height:55%;transition:max-height .25s}
  #find{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  #find>*{flex-shrink:0}
  #find .fx{max-height:none;overflow:visible}
  #find #flist{overflow:visible}
  #find.min{max-height:56px;overflow:hidden}
  #find .ph{cursor:pointer;position:sticky;top:0;z-index:3;background:var(--bg2)}
  #find .ph::before{content:"";position:absolute;left:50%;top:6px;width:36px;height:4px;border-radius:2px;background:var(--line);transform:translateX(-50%)}
  #card{left:0;right:0;width:auto;top:auto;bottom:62px;border-radius:18px 18px 0 0;max-height:42%;transition:max-height .2s}#card.tall{max-height:78%}
  .grid2{grid-template-columns:1fr}
  .wrap{padding:16px 20px 40px}
  .pcard{grid-template-columns:auto 1fr}
  .pcard .v{grid-column:2;text-align:left}
  .tick{grid-template-columns:1fr}
  .rchips{flex-wrap:nowrap!important;overflow-x:auto;max-width:calc(100vw - 20px);scrollbar-width:none}
  .rchips::-webkit-scrollbar{display:none}
  .rchips .chip{white-space:nowrap}
  .leaflet-control-zoom{display:none}
  .leaflet-top.leaflet-right{left:0;right:auto}
  .leaflet-top.leaflet-right .leaflet-control{margin:10px 0 0 10px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
details.rg{margin:8px 0;border:1px solid color-mix(in srgb,var(--c) 28%,var(--line));border-radius:14px;background:color-mix(in srgb,var(--c) 7%,var(--panel));overflow:hidden}
details.rg summary{list-style:none;display:flex;align-items:center;gap:10px;padding:13px 14px;cursor:pointer;font:600 15px var(--ui);user-select:none}
details.rg summary::-webkit-details-marker{display:none}
details.rg .dot{width:10px;height:10px;border-radius:50%;background:var(--c);flex:none}
details.rg .t{flex:1;min-width:0}
details.rg .n{font:500 13px var(--ui);color:var(--muted)}details.rg .n b{color:var(--c);font-weight:700}
details.rg .chev{font-size:20px;line-height:1;color:var(--muted);transition:transform .2s}
details.rg[open] .chev{transform:rotate(90deg)}
details.rg .tick{padding:0 10px 10px}
details.rg .tk{background:var(--bg2)}

.facts{display:flex;gap:8px;margin:10px 0 2px;flex-wrap:wrap}
.facts div{flex:1;min-width:84px;border:1px solid var(--line);border-radius:12px;padding:8px 10px;background:var(--bg2)}
.facts b{display:block;font:800 20px/1.1 var(--hd)}.facts span{font-size:11.5px;color:var(--muted)}
.facts .est b{color:var(--muted)}.facts .est small{font-size:12px;font-weight:600}
.rate{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line);flex-wrap:wrap}
.rate:first-of-type{border-top:0}
.rate .rl{width:118px;font-weight:600;font-size:14px}
.rate .rs{display:flex;gap:2px}
.rate .rs button{background:none;border:0;padding:4px 3px;font-size:24px;line-height:1;color:var(--line);cursor:pointer}
.rate .rs button.on{color:#f5a524}
.rate .rc{margin-left:auto;font-size:13px;color:var(--ink2)}.rate .rc small{color:var(--muted)}
.hop{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-top:1px solid var(--line);text-decoration:none;color:var(--ink)}
.hop:first-of-type{border-top:0}
.hop .hi{flex:none;width:26px;height:26px;border-radius:50%;background:color-mix(in srgb,var(--violet) 16%,var(--panel));color:var(--violet);display:grid;place-items:center;font-weight:700}
.hop b{display:block;font-size:14px}.hop small{color:var(--muted);font-size:12.5px}
.hopoff{overflow:visible}.hopoff::after{content:"";position:absolute;left:100%;top:100%;width:7px;height:2px;background:var(--violet);transform:translate(-3px,-3px) rotate(45deg);transform-origin:0 50%}.hopm{background:var(--bg2);border:2px solid var(--violet);color:var(--violet);border-radius:50%;display:grid!important;place-items:center;font:700 12px/1 var(--ui);box-shadow:var(--shadow)}
.rmapw{margin:14px 0 4px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--sea)}
#rmap{height:380px}
@media (max-width:820px){#rmap{height:300px}}
.legend{max-width:260px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:8px 10px;box-shadow:var(--shadow);font:500 12px var(--ui);color:var(--ink2);backdrop-filter:blur(10px)}
.legend div{display:flex;align-items:center;gap:8px;line-height:20px}
.legend .sw{display:inline-block;width:22px;height:4px;border-radius:2px}
.legend .sw.multi{display:inline-flex;gap:2px;background:none}.legend .sw.multi b{flex:1;border-radius:2px}
.legend .sw.dash{background:repeating-linear-gradient(90deg,var(--ann) 0 5px,transparent 5px 9px)}
.legend .endbar{display:inline-block;width:22px;height:12px;position:relative}
.legend .endbar::before{content:"";position:absolute;left:0;right:6px;top:4px;height:4px;border-radius:2px;background:var(--pink)}
.legend .endbar::after{content:"";position:absolute;right:4px;top:0;width:3px;height:12px;border-radius:2px;background:var(--ink)}
.legend .hopi{display:inline-grid;place-items:center;width:18px;height:18px;margin:0 2px;border-radius:50%;border:2px solid var(--violet);color:var(--violet);font:700 10px/1 var(--ui);font-style:normal}
.leaflet-bottom.leaflet-left{left:362px}
@media (max-width:820px){.leaflet-bottom.leaflet-left{left:0;bottom:auto;top:52px}.legend{font-size:11px;padding:5px 8px}.legend div{line-height:17px}}
.rlab{background:color-mix(in srgb,var(--rc,var(--pink)) 14%,var(--panel))!important;border:2px solid var(--rc,var(--pink))!important;color:var(--ink)!important;border-radius:999px!important;padding:1px 8px!important;font:700 11px var(--ui)!important;box-shadow:var(--shadow)!important;white-space:nowrap}
.rlab::before{display:none}
.cnt a{cursor:pointer}
.legend .lk{font-weight:700;color:var(--ink);cursor:pointer;justify-content:center}

button.chip{font-family:var(--ui)}
.ri{width:100%;text-align:left;background:none;border:0;font:inherit;color:inherit}
.ri .rt{display:flex;flex-direction:column;min-width:0}
.ri.sel{background:var(--chip)}
#nav a em{font:500 11px var(--ui);font-style:normal;letter-spacing:0;text-transform:none;color:var(--muted)}
.intro{margin:0 16px 10px;padding:12px 14px;border-radius:14px;background:color-mix(in srgb,var(--pink) 8%,var(--panel));border:1px solid color-mix(in srgb,var(--pink) 22%,var(--line));font-size:13.5px;line-height:1.45}
.intro b{display:block;font:800 17px/1.15 var(--hd);letter-spacing:.03em;text-transform:uppercase;margin-bottom:4px}
.intro .acts{margin-top:10px}
.btn.sm{font-size:13.5px;padding:8px 12px;border-radius:10px}
.mine{display:flex;justify-content:space-between;gap:8px;margin:0 16px 6px;padding:10px 12px;border-radius:12px;background:var(--chip);text-decoration:none;font-size:13px;color:var(--ink2)}
.mine b{color:var(--ink)}
.nudge{margin:0 16px 8px;font-size:12px;color:var(--muted)}
.sbox{padding:2px 16px 6px}
.sbox .search{padding:9px 12px;font-size:14px}
.fxh{margin:6px 0 2px;font:800 15px var(--hd);letter-spacing:.06em;text-transform:uppercase}
.fnote{font-size:11.5px;color:var(--muted);margin:6px 0 0;line-height:1.4}
.fsrc{display:none}.fx.more .fsrc{display:block}
.res .more{margin:6px 10px}
.hint{margin:0 16px 10px;padding:10px 12px;border-radius:12px;background:var(--chip);font-size:13px}
/* feature tiles */
.feat{grid-template-columns:repeat(3,minmax(0,1fr))}
.feat.c{grid-template-columns:repeat(4,minmax(0,1fr))}
.ft small{display:block;font-size:10px;color:var(--amber);line-height:1.2;margin-top:1px}
.ft.on{color:var(--ink);border-color:color-mix(in srgb,var(--green) 45%,var(--line));background:color-mix(in srgb,var(--green) 6%,var(--panel))}
.ft.no{color:var(--muted)}
.ft.no b{color:var(--pink);opacity:.75}
.ft.some{color:var(--ink);border-color:color-mix(in srgb,var(--amber) 45%,var(--line))}
.ft.some b{color:var(--amber)}
.ded{font-size:13px;border-left:3px solid var(--amber);padding:6px 10px;background:color-mix(in srgb,var(--amber) 8%,var(--panel));border-radius:0 8px 8px 0;margin:6px 0}
.ded i{color:var(--muted);font-style:normal}
.ded a,.chk a{color:var(--ink);font-weight:600}
/* tags, colour-coded by kind */
.tags{display:flex;flex-wrap:wrap;gap:5px;margin:6px 0}
.tg{font:600 11.5px var(--ui);border-radius:999px;padding:2px 9px;--c:var(--muted);color:color-mix(in srgb,var(--c) 80%,var(--ink));background:color-mix(in srgb,var(--c) 13%,var(--panel));border:1px solid color-mix(in srgb,var(--c) 28%,transparent)}
.tg.gp{--c:var(--pink)}.tg.env{--c:var(--green)}.tg.spd{--c:var(--cyan)}.tg.tim{--c:var(--amber)}.tg.trc{--c:var(--orange)}.tg.sig{--c:#475569}
.src0l{font-size:11.5px;color:var(--muted);margin:2px 0 0}
.src0{font-size:10.5px;color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:0 4px;margin-left:4px}
.disc{font-size:11.5px;color:var(--muted);margin:14px 0 0;line-height:1.4}
.fb{color:var(--ink2);text-decoration:underline;cursor:pointer;white-space:nowrap}
.sub{margin:12px 0 6px;font:600 11px var(--ui);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.hops .more{display:block;font-size:12.5px;color:var(--ink2);margin-top:4px}
.hop .hi{color:var(--violet)}
/* timetables */
.ttg{border-radius:12px;padding:10px 12px;margin:10px 0}
.ttg.ok{background:color-mix(in srgb,var(--green) 7%,var(--panel));border:1px solid color-mix(in srgb,var(--green) 25%,var(--line))}
.ttg.no{background:color-mix(in srgb,var(--pink) 6%,var(--panel));border:1px solid color-mix(in srgb,var(--pink) 22%,var(--line))}
.ttg h4{margin:0 0 4px;font:800 16px var(--hd);letter-spacing:.05em;text-transform:uppercase;display:flex;gap:8px;align-items:baseline}
.ttg h4 small{font:500 12px var(--ui);letter-spacing:0;text-transform:none;color:var(--muted)}
.ttk{margin:10px 0 0;font:600 10.5px var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.ttg .fam{border-bottom-color:color-mix(in srgb,var(--line) 70%,transparent)}
.needs{font-size:12px;color:var(--muted);margin-top:2px}
.pk.have0{background:color-mix(in srgb,var(--green) 10%,var(--chip));color:var(--ink)}
.pk.store{background:var(--ink);color:var(--bg)}
/* trains */
.trl{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:6px}
.tr{border:1px solid var(--line);border-radius:10px;padding:7px 10px;font-size:13px}
.tr b{font-weight:600}.tr small{display:block;color:var(--muted);font-size:12px}
.tr small a{color:var(--ink2)}
.tr.have{border-color:color-mix(in srgb,var(--green) 45%,var(--line))}
.tr .tag{margin-left:6px}
/* stations as a line */
.sline{list-style:none;margin:0;padding:0 0 0 4px;columns:2 220px;column-gap:24px}
.sline li{position:relative;padding:3px 0 3px 20px;font-size:13.5px;break-inside:avoid}
.sline li::before{content:"";position:absolute;left:5px;top:0;bottom:0;width:3px;background:var(--line)}
.sline li::after{content:"";position:absolute;left:2px;top:9px;width:9px;height:9px;border-radius:50%;background:var(--bg2);border:2px solid var(--muted)}
.sline li.end{font-weight:700}
.sline li.end::after{background:var(--ink);border-color:var(--ink);width:11px;height:11px;left:1px;top:8px}
.sline .hp{display:inline-block;margin-left:6px;font:600 11px var(--ui);color:var(--violet);text-decoration:none;background:color-mix(in srgb,var(--violet) 12%,var(--panel));border-radius:999px;padding:0 7px}
/* add-ons for a route */
.box.hl{border-color:color-mix(in srgb,var(--orange) 40%,var(--line))}
.exr{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line);text-decoration:none;color:var(--ink)}
.exr:first-of-type{border-top:0}
.exr b{font-weight:600;font-size:14px}.exr small{display:block;color:var(--muted);font-size:12px}
.exr.have b{color:var(--green)}
.perks{margin:4px 0 10px;padding-left:18px;font-size:13.5px;color:var(--ink2)}
.perks li{margin:3px 0}
.tipbox{background:color-mix(in srgb,var(--orange) 8%,var(--panel))}
.tabs.mt{margin:14px 0 10px}
details.rg{--c:var(--muted);background:var(--bg2);border:1px solid var(--line)}

.tk{font:inherit;color:inherit;text-align:left;width:100%}
.dim0{opacity:.6}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.city{background:none!important;border:0!important;box-shadow:none!important;color:var(--muted)!important;font:500 11px var(--ui)!important;padding:0 2px!important;text-shadow:0 0 3px var(--sea),0 0 3px var(--sea),0 0 5px var(--sea)}
.city.c1{font:600 12px var(--ui)!important;color:var(--ink2)!important;letter-spacing:.01em}
.city::before{display:none}
.rchips{background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:4px;box-shadow:var(--shadow)}
@media (max-width:820px){#find .fbody{overflow:visible}#find #flist:empty{display:none}#find #flist:empty+.fbar{border-top:0}.feat.c{grid-template-columns:repeat(2,minmax(0,1fr))}.trl{grid-template-columns:1fr}}
.half{display:inline-block;width:.8em;height:.8em;border-radius:50%;border:2px solid var(--amber);background:linear-gradient(90deg,var(--amber) 50%,transparent 50%);vertical-align:-1px}
.rate .rc{flex-basis:100%;text-align:right;margin-top:-4px}
.rtab{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:6px 14px}
.rtab .rh{font:600 10.5px var(--ui);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.rtab .rl{font-weight:600;font-size:13.5px}
.rtab .rs{display:flex;gap:0}
.rtab .rs button{background:none;border:0;padding:2px 2px;font-size:21px;line-height:1;color:var(--line);cursor:pointer}
.rtab .rs button.on{color:#f5a524}
.rtab .rc{font-size:13px}.rtab .rc small{color:var(--muted)}
@media (max-width:420px){.rtab{gap:6px 8px}.rtab .rs button{font-size:18px;padding:2px 1px}}

/* map panel, slim */
#find{bottom:auto;max-height:calc(100% - 86px)}
#find .ph{gap:8px;padding:12px}
#find .ph .search{flex:1;padding:9px 12px;font-size:14px}
.fbtn{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 12px;border-radius:11px;border:1px solid var(--line);background:var(--bg2);font:600 13px var(--ui);color:var(--ink2);cursor:pointer;white-space:nowrap}
.fbtn svg{width:16px;height:16px}.fbtn.on{border-color:var(--ink2);color:var(--ink)}
.fbtn i{font-style:normal;background:var(--pink);color:#fff;border-radius:999px;padding:0 6px;font-size:11px}
#find .fx{border-top:1px solid var(--line);padding-top:8px}
#find .cnt{padding:4px 14px 8px}
#find .cnt:empty{display:none}#find .cnt:has(>#fres:empty){display:none}
/* legend */
.legend .lk{display:block;background:none;border:0;padding:0;font:700 12px var(--ui);color:var(--ink);cursor:pointer}
.legend .cby{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:6px 0 6px}
.legend .cby span{font-size:11px;color:var(--muted);margin-right:2px}
.legend .cby button{font:600 11px var(--ui);border:1px solid var(--line);background:var(--bg2);color:var(--ink2);border-radius:999px;padding:2px 8px;cursor:pointer}
.legend .cby button.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.legend .sw{width:20px;height:3px}
/* home */
#page.homep{background:var(--bg)}
#net{position:fixed;left:0;top:0;pointer-events:none;z-index:0}
#page.nonet #net{display:none}
#page.homep .wrap{position:relative;z-index:1}
#page.homep .ft2{position:relative;z-index:1}
.home{padding:40px 0 0;max-width:960px;position:relative;z-index:1}
.home .eyebrow{display:inline-flex;align-items:center;gap:8px;font:600 12px var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:5px 12px}
.home .eyebrow i{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px color-mix(in srgb,var(--green) 25%,transparent)}
.home h1{font:800 clamp(40px,6.4vw,72px)/.95 var(--hd);text-transform:uppercase;letter-spacing:.01em;margin:12px 0 12px}
.home h1 .h1b{display:block;font-size:.4em;line-height:1.15;margin-top:18px;background:linear-gradient(90deg,#1F5FD6,#0F9F8C);-webkit-background-clip:text;background-clip:text;color:transparent}
:root[data-theme=dark] .home h1 .h1b{background-image:linear-gradient(90deg,#5B9BFF,#3DDCB0)}
.home h1 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.home .lead{font-size:17px;max-width:540px}
.home .acts{margin-top:18px}
.btn.big{font-size:20px;padding:16px 30px;border-radius:14px;box-shadow:0 8px 22px rgba(20,24,70,.18)}
.hacts{align-items:center}.hacts .or{font-size:14px;color:var(--muted);margin:0 2px}
.btn.bg2{background:linear-gradient(90deg,#1F5FD6,#0F9F8C);color:#fff}
.home .hfree{margin:14px 0 0;font-size:14px;color:var(--muted)}.home .alt{margin:22px 0 0}.home .alt a{color:var(--ink2);font-weight:600;text-decoration:none}.home .alt a:hover{color:var(--ink)}
.hstat{display:flex;gap:10px;flex-wrap:wrap;margin:34px 0 0}
.hstat div{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 14px;backdrop-filter:blur(6px)}
.hstat b{display:block;font:800 24px/1 var(--hd);letter-spacing:.02em}.hstat span{font-size:12px;color:var(--muted)}
.steps3{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:44px}
.hfacts{font-size:12.5px;color:var(--muted);margin-top:48px}
.steps3>a{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px 18px 20px;backdrop-filter:blur(6px)}.home .hacts{margin-top:44px}@media (max-width:1000px){.steps3{grid-template-columns:repeat(2,1fr)}}@media (max-width:640px){.steps3{gap:10px;margin-top:28px}.home .hacts{margin-top:28px}.home h1 .h1b{font-size:.52em}.steps3>a{padding:14px 16px}.steps3 b{float:left;margin:-2px 10px 0 0}.steps3 h3{margin:0 0 6px}.hacts{flex-direction:column;align-items:stretch}.hacts .btn{text-align:center}.hacts .or{display:none}}
.steps3 b{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--grad);color:#fff;font:800 15px var(--hd)}
.steps3>a{display:block;color:inherit;text-decoration:none;transition:border-color .15s,transform .15s}.steps3>a:hover,.steps3>a:focus-visible{border-color:var(--route);transform:translateY(-1px)}.steps3>a::after{content:'›';float:right;margin-top:-22px;color:var(--muted);font-weight:700}.pcard .sref{display:block;margin-top:6px;font-size:12px;color:var(--ink2)}.pcard .sref .sale{color:var(--own)}.pcard .lyr{color:var(--muted);margin-left:4px}.fbtop{margin:10px 0 0}.trbox h3{margin-bottom:6px}.trbox .trans{margin:6px 0}.trinf{font-style:normal;color:var(--muted)}.drivebox .pk{margin:0 6px 6px 0}
.steps3 h3{margin:12px 0 6px;font:800 17px var(--hd);letter-spacing:.04em;text-transform:uppercase}.steps3 p{margin:0;font-size:13px;color:var(--ink2)}
.hsrc{font-size:12px;color:var(--muted);margin-top:22px}
.home.dash{max-width:none}
.dgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:10px;max-width:980px}
.dcard{display:block;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px 18px;text-decoration:none;color:var(--ink);backdrop-filter:blur(6px)}
.dcard h3{margin:0 0 8px;font:800 18px var(--hd);letter-spacing:.05em;text-transform:uppercase}
.drow{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-top:1px solid var(--line);text-decoration:none;color:var(--ink);font-size:14px}
.drow small{display:block;color:var(--muted);font-size:12px}.drow b{font:800 18px var(--hd);color:var(--green)}
.go{display:inline-block;margin-top:10px;font-size:13px;font-weight:600;color:var(--ink2);text-decoration:none}
.go2{display:block;margin-top:8px;font-size:12.5px;color:var(--muted)}
.big1{font:800 24px var(--hd);color:var(--green)}
.getit{text-align:center}.getit h3{justify-content:center}.getit .acts{justify-content:center}.getit .acts .btn{min-width:240px}
.ri .pc{text-align:right;line-height:1}.ri .pc small,.pcb small{display:block;font:500 10px var(--ui);color:var(--muted);letter-spacing:0;margin-top:2px}
.imp{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:4px 0 14px;padding:14px 16px;border-radius:14px;background:color-mix(in srgb,#1F5FD6 8%,var(--panel));border:1px solid color-mix(in srgb,#1F5FD6 30%,var(--line))}
.imp b{display:block;font:800 18px var(--hd);letter-spacing:.04em;text-transform:uppercase}.imp span{font-size:13px;color:var(--ink2)}
.imp.soon{background:var(--chip);border-color:var(--line)}
.facts .unit{font-size:11px;margin:0}
.nudge2{margin-top:16px;font-size:13px;color:var(--muted)}
@media (max-width:820px){.steps3,.dgrid{grid-template-columns:1fr}.home{padding-top:20px}.home .lead{font-size:15.5px}.home{padding-top:0}#find{top:auto;bottom:62px;max-height:60%}#find.min{max-height:none}#find.min .fbody{display:none}#find .ph{position:static}#find .ph::before{display:none}.hstat div:last-child{flex-basis:100%}}
.sline li.hop::after{content:"⇄";display:grid;place-items:center;width:15px;height:15px;left:-1px;top:5px;background:var(--bg2);border:2px solid var(--violet);color:var(--violet);font:700 9px/1 var(--ui)}
.sline li{display:flex;align-items:baseline;gap:8px}
.sline .hps{font-size:12px;color:var(--violet);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.sline .hps a{color:var(--violet);text-decoration:none;font-weight:600}.sline .hps a:hover{text-decoration:underline}
.sline .hps::before{content:"⇄ "}
.slg{margin:10px 0 0;display:flex;align-items:center;gap:6px}
.hpi{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;border:2px solid var(--violet);color:var(--violet);font:700 9px/1 var(--ui)}
.trn{font-weight:600;color:var(--ink);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.trn:hover{text-decoration-color:var(--ink)}
.story{max-width:680px;margin-bottom:16px}.story p{font-size:16px;line-height:1.6;margin:0 0 12px}.story p:last-child{margin:0}.story .lnk{font:inherit;text-decoration:underline}.dsub{margin:-4px 0 8px}.drow b.pl{display:flex;flex-direction:column;align-items:flex-end;line-height:1}.drow b.pl i{font:500 11px var(--ui);font-style:normal;color:var(--muted);margin-top:3px}.pcb.gp{color:var(--ink2)}.yours h1{margin-bottom:18px}.ystats{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:12px}.ys{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;justify-content:center}.ys b{font:800 30px/1 var(--hd)}.ys small{color:var(--ink2);font-size:13px;margin-top:4px}.ys.yring{flex-direction:row;align-items:center;gap:12px}.ys.yring div{display:flex;flex-direction:column}
.ymap{height:380px;margin:16px 0 8px;border-radius:14px;border:1px solid var(--line);overflow:hidden;background:var(--sea)}
.yc{font:800 18px var(--hd);text-transform:uppercase;letter-spacing:.04em;margin:28px 0 10px}.yc span{color:var(--muted);font-weight:600;margin-left:4px}
.ytiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}.ytile{display:flex;flex-direction:column;gap:7px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;color:var(--ink);text-decoration:none;transition:border-color .15s}.ytile:hover{border-color:var(--route)}.yn{font-weight:600;font-size:14px;line-height:1.3}.yf{font-style:normal;color:#E0A100;margin-right:5px}.ytile small{color:var(--muted);font-size:12px}.ybar{height:6px;border-radius:3px;background:var(--line);overflow:hidden}.ybar i{display:block;height:100%;background:var(--route);border-radius:3px}
.yfoot{text-align:center;margin:26px 0 0}.yfoot a{color:var(--ink2);font-weight:600;text-decoration:none}.yfoot a:hover{color:var(--route)}
@media (max-width:760px){.ystats{grid-template-columns:repeat(2,1fr)}.ys.yring{grid-column:1/-1}.ymap{height:280px}}
.ycz{all:unset;cursor:pointer}.ycz:hover{color:var(--route)}.edcall{margin:0 0 8px;padding:12px 16px;border-radius:12px;background:color-mix(in srgb,var(--route) 8%,var(--panel));font-size:14px;line-height:1.5}.ycountry{margin-top:30px}.ycols{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:start}.ycol{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 16px}.ycol h4{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 8px;font:800 15px var(--hd);text-transform:uppercase;letter-spacing:.04em}.ycnt{font:600 13px var(--ui);text-transform:none;letter-spacing:0;color:var(--ink2)}.ystar{font-style:normal;color:#E5A800;margin-right:4px;font-size:1.15em}.ycol ul{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}.ycol li{font-size:13.5px;line-height:1.3}.ycol li a{color:var(--ink);text-decoration:none}.ycol li a:hover{color:var(--route)}.yrp{display:flex;align-items:center;gap:8px;margin-top:5px}.yrp .ybar{flex:1;height:5px}.yrp small{font-size:11.5px;color:var(--muted);white-space:nowrap}.ycol .ybar{display:block;height:8px}.yrp .ybar{display:block}.ycol.none{opacity:.6}
@media (max-width:760px){.ycols{grid-template-columns:1fr}}.rlab.fade{opacity:0!important;transition:opacity .22s ease}.rlab.fade.in{opacity:1!important}.leaflet-tooltip.stl,.leaflet-tooltip.city{animation:tfade .25s ease}@keyframes tfade{from{opacity:0}to{opacity:1}}.leaflet-tooltip.tip{animation:tfade .15s ease;z-index:1000!important}.fbband{max-width:480px;margin:8px auto 26px;padding:26px 24px 22px;text-align:center;background:var(--panel);border:1px solid var(--line);border-radius:18px;display:flex;flex-direction:column;align-items:center;gap:10px}.fbband b{font:800 22px var(--hd);text-transform:uppercase;letter-spacing:.04em;color:var(--ink)}.fbband p{margin:0;font-size:15px;line-height:1.5;color:var(--ink2)}.fbband .btn{margin-top:6px}.fbband small{font-size:12.5px;color:var(--muted)}.fbband small a{color:var(--ink2)}.fdisc{margin:0}.k-route{--tc:#2E9E5B}.k-loco{--tc:#D99A00}.k-expansion{--tc:#E3184F}
.xtabs{display:flex;gap:6px;padding:0 14px;overflow-x:auto;scrollbar-width:none;position:relative}
.xtabs::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line);z-index:0}
.xt{all:unset;cursor:pointer;position:relative;z-index:1;display:flex;align-items:center;gap:8px;padding:9px 16px;border:1px solid var(--line);border-bottom:none;border-radius:10px 10px 0 0;background:var(--bg2);color:var(--ink2);font:600 14px var(--ui);white-space:nowrap}
.xt::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--tc)}
.xt span{font:500 12px var(--ui);color:var(--muted)}
.xt:hover{color:var(--ink)}
.xt.on{background:color-mix(in srgb,var(--tc) 8%,var(--panel));color:var(--ink);padding-bottom:10px;margin-bottom:-1px}
.xt.on span{color:var(--ink);font-weight:700}
.xt[disabled]{opacity:.4;cursor:default}
.xpanel{padding:14px;background:color-mix(in srgb,var(--tc) 8%,var(--panel))}
.xpanel .tick{padding:0!important;gap:8px}
.xpanel .tk{border:1px solid var(--line);border-radius:10px;background:var(--bg2)}
.xpanel .tk:hover{border-color:color-mix(in srgb,var(--tc) 50%,var(--line))}
.xpanel .tk.on{border-color:var(--line);background:color-mix(in srgb,var(--tc) 6%,var(--panel))}
.xpanel .tk .bx{border:1.5px solid var(--faint);border-radius:5px}
.xpanel .tk.on .bx,.xpanel .tk.ed .bx{background:var(--tc);border-color:var(--tc)}
.xpanel .tk.ed .bx{opacity:.75}.yours h1{margin-bottom:10px}.ytools{display:flex;align-items:center;gap:16px;margin:0 0 22px}.ytools .lnk{font-size:13px;color:var(--muted)}.rdot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:1px}.lgh{display:flex;align-items:center;gap:4px}.grip{cursor:grab;color:var(--muted);font-size:14px;line-height:1;padding:2px 3px;border-radius:4px;touch-action:none;user-select:none}.grip:hover{background:var(--line);color:var(--ink)}.legend.drag .grip{cursor:grabbing}.legend.free{position:absolute;z-index:1000;margin:0}.legend.drag{box-shadow:0 10px 30px rgba(0,0,0,.18)}.leaflet-top.leaflet-right .legend{margin-top:8px}.pk.have i{font-style:normal;font-weight:700;margin-left:2px}.leaflet-tooltip.stl,.leaflet-tooltip.city{transition:opacity .2s ease}.leaflet-tooltip.tout{opacity:0!important}.gain{flex:none;min-width:30px;text-align:center;padding:1px 7px;border-radius:999px;font:700 12px var(--ui);color:var(--green);background:color-mix(in srgb,var(--green) 14%,var(--panel));margin-top:1px}.big1{color:var(--green)}#fres:empty{display:none}.lgall{all:unset;cursor:pointer;display:block;margin-top:8px;padding:6px 10px;border-radius:8px;background:color-mix(in srgb,var(--route) 10%,var(--panel));color:var(--route);font:600 12px var(--ui);text-align:center}.lgall:hover{background:color-mix(in srgb,var(--route) 18%,var(--panel))}.fx.nf{padding:8px 14px 0}.fseg{display:flex;gap:2px;padding:3px;border-radius:10px;background:color-mix(in srgb,var(--ink) 6%,var(--panel));margin-bottom:6px}.fseg button{all:unset;cursor:pointer;flex:1 1 auto;text-align:center;padding:6px 8px;border-radius:8px;font:600 12px var(--ui);color:var(--ink2);white-space:nowrap}.fseg button.on{background:var(--grad);color:#fff;box-shadow:0 2px 8px -2px color-mix(in srgb,var(--pink) 60%,transparent)}.fseg button.dis{opacity:.4}.fseg button[data-show=fav]{flex:0 0 auto;padding:6px 11px}
details.fs{border-top:1px solid var(--line);padding:2px 0}details.fs summary{list-style:none;display:flex;align-items:center;gap:6px;cursor:pointer;padding:10px 2px;font:700 13px var(--ui);color:var(--ink)}details.fs summary::-webkit-details-marker{display:none}details.fs summary i{font-style:normal;background:var(--route);color:#fff;border-radius:999px;padding:0 7px;font-size:11px;line-height:17px}details.fs .chev{margin-left:auto;color:var(--muted);font-size:18px;transition:transform .2s}details.fs[open] .chev{transform:rotate(90deg)}details.fs>.chips,details.fs>.fnote{margin-bottom:10px}
.chip.fc{font-size:12.5px;padding:5px 11px}.chip.fc.on{background:var(--route);color:#fff;border-color:var(--route)}
.fmx h5{margin:10px 0 4px;font:600 11px var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.fmx .fnote{margin:0 0 6px}.fmx .chips{margin-bottom:4px}
.fbar{position:sticky;bottom:0;z-index:2;display:flex;align-items:center;gap:12px;margin:0;padding:10px 16px;background:var(--bg2);border-top:1px solid var(--line);font-size:13px;color:var(--ink2)}.fbar .btn{margin-left:auto}.fbar b{color:var(--ink)}.about{max-width:900px;margin:0 auto;position:relative;z-index:1}
.ahero{text-align:center;padding:26px 0 8px}.aring{width:132px;height:132px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--route) 18%,var(--bg2)),var(--bg2) 70%);border:1px solid var(--line);box-shadow:0 18px 40px -18px color-mix(in srgb,var(--route) 55%,transparent)}.alogo{width:86px;height:86px;animation:bob 3.2s ease-in-out infinite}.alogo .hl{animation:glow 2.4s ease-in-out infinite}@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}@keyframes glow{0%,100%{opacity:.75}50%{opacity:1;filter:drop-shadow(0 0 1.5px #FFE38A)}}@media (prefers-reduced-motion:reduce){.alogo,.alogo .hl{animation:none}}
.ahero h1{margin:4px 0 6px;font:800 clamp(40px,7vw,64px)/1 var(--hd);text-transform:uppercase;letter-spacing:.03em}.ahero h1 span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}.ahero>p{margin:0;font-size:17px;color:var(--ink2)}
.anums{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin:22px 0 4px}.anums div{min-width:110px;padding:10px 14px;border-radius:14px;background:var(--panel);border:1px solid var(--line)}.anums b{display:block;font:800 26px/1 var(--hd)}.anums span{font-size:12px;color:var(--muted)}.anums div:last-child b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.astory{margin:26px auto 0;max-width:680px;text-align:center;padding:28px 30px;border-radius:20px;background:var(--panel);border:1px solid var(--line)}.astory h2{margin:0 0 12px;font:800 24px var(--hd);text-transform:uppercase;letter-spacing:.04em}.astory p{font-size:16.5px;line-height:1.65;color:var(--ink2);margin:0 0 12px}.astory em{color:var(--ink);font-style:normal;font-weight:600}.astory .btn{margin-top:6px}
.atiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:22px 0}.atiles div{padding:18px;border-radius:16px;background:var(--panel);border:1px solid var(--line);display:flex;flex-direction:column;gap:5px}.atiles i{font-style:normal;font-size:26px}.atiles b{font:800 16px var(--hd);text-transform:uppercase;letter-spacing:.03em}.atiles span{font-size:13.5px;color:var(--ink2);line-height:1.45}
.agrid{display:grid;grid-template-columns:1.5fr 1fr;gap:12px;margin-bottom:10px}.aside{display:flex;flex-direction:column;gap:12px}.abox{padding:18px 20px;border-radius:16px;background:var(--panel);border:1px solid var(--line)}.abox h3{margin:0 0 10px;font:800 16px var(--hd);text-transform:uppercase;letter-spacing:.04em}.abox p{margin:0;font-size:14px;line-height:1.55;color:var(--ink2)}.abox.muted p{font-size:12.5px;color:var(--muted)}.abox .note{margin-top:12px;font-size:12.5px}
.asrc{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}.asrc li{font-size:14px;line-height:1.5;color:var(--ink2)}.asrc em{display:inline-block;font-style:normal;font:700 11px var(--ui);text-transform:uppercase;letter-spacing:.06em;padding:2px 8px;border-radius:999px;margin-right:8px;--c:var(--route);color:var(--c);background:color-mix(in srgb,var(--c) 13%,var(--panel))}.asrc .s2{--c:var(--green)}.asrc .s3{--c:var(--violet)}.asrc .s4{--c:var(--orange)}
@media (max-width:760px){.atiles,.agrid{grid-template-columns:1fr}.astory{padding:22px 18px}.anums div{min-width:0;flex:1 1 40%}}.fbband{position:relative;overflow:hidden}.fbband::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:var(--grad)}.fbband b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}.fbi{font-style:normal;font-size:28px;line-height:1}.yhl{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px;font-size:14px;color:var(--ink2)}.yhl span{display:inline-flex;align-items:center;gap:4px}@media (min-width:761px){.yhl span{background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:5px 12px}}.yhl a{color:var(--ink);font-weight:600}
.ys.k-route,.ys.k-loco,.ys.k-expansion{position:relative;overflow:hidden}.ys.k-route::before,.ys.k-loco::before,.ys.k-expansion::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--tc)}
.yflags span{font-size:15px;letter-spacing:2px;margin-top:6px}
.ydot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--tc);margin-right:8px;vertical-align:1px}.ycol h4{justify-content:flex-start}.ycol h4 .ycnt{margin-left:auto}
.yours .ys,.yours .ycol{box-shadow:0 6px 18px -12px rgba(20,30,80,.25)}.ycol li.yr{display:grid;grid-template-columns:22px 1fr;column-gap:4px;align-items:start}.ycol li.yr .yrp{grid-column:2}.yfav{all:unset;cursor:pointer;font-size:16px;line-height:1.15;color:var(--muted);opacity:.6;text-align:center;border-radius:4px}.yfav:hover{opacity:1;color:#E5A800}.yfav.on{color:#E5A800;opacity:1}.astory p{text-align:left}.astory .asig{text-align:center;font-weight:600;color:var(--ink);margin-top:16px}.athanks{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px auto 0;max-width:900px}.athanks>div{padding:20px;border-radius:16px;background:var(--panel);border:1px solid var(--line)}.athanks h3{margin:0 0 8px;font:800 18px var(--hd);text-transform:uppercase;letter-spacing:.04em}.athanks p{margin:0 0 14px;font-size:14.5px;line-height:1.55;color:var(--ink2)}@media (max-width:760px){.athanks{grid-template-columns:1fr}}
.vfy{border-left:3px solid var(--amber);padding:6px 10px;border-radius:0 8px 8px 0;background:color-mix(in srgb,var(--amber) 7%,var(--panel));margin:10px 0 0}.warn2{color:var(--amber)}.req{font-size:13px;color:var(--ink2);margin:8px 0 0}.req.no b{color:var(--amber)}.req a{font-weight:600}.ttalt{margin:4px 0 8px;padding:6px 10px;border-radius:8px;background:color-mix(in srgb,var(--route) 7%,var(--panel))}.pcard .m.warn2{margin-top:2px}
/* one surface for everything: barely see-through (owner, 21 Oct 2026). Tinted callouts mix onto --panel above. */
.box,.pcard,.facts div,.stat div{background:var(--panel)}
.atiles i svg{width:26px;height:26px;stroke:var(--route,#1F5FD6);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* support page */
.sup{max-width:980px;margin:0 auto;position:relative;z-index:1}
.sphero{position:relative;text-align:center;padding:34px 18px 8px;overflow:hidden}
.sphero .kick{display:inline-block;margin-top:18px}
.sphero h1{font:800 clamp(36px,6.4vw,66px)/.98 var(--hd);text-transform:uppercase;letter-spacing:.01em;margin:8px 0 14px}
.sphero h1 span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.sphero>p{max-width:600px;margin:0 auto 22px;font-size:17px;line-height:1.6;color:var(--ink2);background:var(--panel);border-radius:14px;padding:6px 12px}
.sptrack{position:relative;height:26px;margin:0 auto;max-width:760px;border-bottom:3px solid color-mix(in srgb,var(--route) 30%,var(--panel));overflow:hidden}
.sptrack::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:3px;background:repeating-linear-gradient(90deg,transparent 0 10px,color-mix(in srgb,var(--ink) 25%,transparent) 10px 13px)}
.sptrain{position:absolute;bottom:-2px;left:0;width:218px;height:19px;animation:sprun 11s cubic-bezier(.45,0,.55,1) infinite}
@keyframes sprun{0%{transform:translateX(-230px)}45%,55%{transform:translateX(271px)}100%{transform:translateX(800px)}}
@media (prefers-reduced-motion:reduce){.sptrain{animation:none;left:calc(50% - 109px)}}
.spnums{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:0 0 26px}
.spnums div{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 18px;min-width:150px}
.spnums b{display:block;font:800 30px/1 var(--hd)}
.spnums span{font-size:12.5px;color:var(--muted)}
.spways{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:18px}
.spw{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:22px 22px 20px;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease}
.spw:hover{transform:translateY(-3px);box-shadow:0 12px 28px -16px rgba(20,30,80,.35)}
.spw::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:var(--sc)}
.spw.sp1{--sc:var(--route)}.spw.sp2{--sc:var(--green)}.spw.sp3{--sc:var(--amber)}.spw.sp4{--sc:var(--pink)}.spw.sp5{--sc:var(--orange)}
.spw h3{margin:10px 0 6px;font:800 19px var(--hd);text-transform:uppercase;letter-spacing:.03em}
.spw p{margin:0 0 14px;font-size:14.5px;line-height:1.55;color:var(--ink2)}
.spi{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:color-mix(in srgb,var(--sc) 14%,var(--panel))}
.spi svg{width:24px;height:24px;fill:none;stroke:var(--sc);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.spwant h3{display:flex;align-items:baseline;gap:10px}
.spwant h3 small{font:700 13px var(--ui);color:var(--muted)}
.spq{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:12px}
.spqi{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--panel)}
.spqi.spown{border-color:color-mix(in srgb,var(--green) 45%,var(--line))}
.spqi a{font-weight:600;color:var(--ink);text-decoration:none}
.spqi a:hover{color:var(--route)}
.spqi .bdg{display:table;margin:0 0 4px}
.spqi p{margin:3px 0 0;font-size:13px;color:var(--ink2)}
.spqi .btn{flex:none}
.spthanks{text-align:center;font-weight:600;color:var(--ink);margin:22px auto 8px;max-width:560px;background:var(--panel);border-radius:14px;padding:10px 14px}
@media (max-width:760px){.spways,.spq{grid-template-columns:1fr}.sphero{padding-top:18px}.spnums div{min-width:0;flex:1}}
@media (max-width:1000px) and (min-width:761px){.atiles{grid-template-columns:repeat(2,1fr)}}
.bill{position:absolute;z-index:2;width:24px;height:13px;border-radius:2px;display:grid;place-items:center;font:800 9px/1 var(--ui);pointer-events:none;box-shadow:0 1px 2px rgba(0,0,0,.15);animation:billfall 2.4s ease-in forwards}
.bill.usd{background:#D6EFD8;color:#1F7A3A;border:1px solid #8FCB98}.bill.eur{background:#D9E6FB;color:#2456B8;border:1px solid #97B5EC}.bill.jpy{background:#FBE2D3;color:#B4471A;border:1px solid #EDB08F}
.bill.spill{animation:billspill 2.6s cubic-bezier(.3,0,.6,1) forwards}
@keyframes billspill{0%{opacity:1;transform:translate(0,0) rotate(0)}25%{transform:translate(calc(var(--sx) * .45),-10px) rotate(calc(var(--rot) * .3))}70%{opacity:1;transform:translate(var(--sx),var(--sy)) rotate(var(--rot))}100%{opacity:0;transform:translate(var(--sx),var(--sy)) rotate(var(--rot))}}
.bill.injar{animation:billjar 1.5s cubic-bezier(.4,0,.6,1) forwards}
@keyframes billjar{0%{opacity:0;transform:translate(0,0) rotate(0)}10%{opacity:1}35%{transform:translate(calc(var(--dx) * .15),22px) rotate(calc(var(--rot) * .4))}88%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(.7)}}
.spjar{display:flex;flex-direction:column;align-items:center;gap:2px;width:max-content;margin:26px auto 0;text-decoration:none;color:var(--muted);font:700 11px var(--ui);text-transform:uppercase;letter-spacing:.08em}
.jarsvg{width:72px;height:84px;display:block;overflow:visible;transition:transform .2s ease}.spjar:hover .jarsvg{transform:translateY(-2px) scale(1.06)}.spjar:hover{color:var(--ink)}
.sphero .spjar+.kick{margin-top:10px}.spjar>span{font:800 20px/1.1 var(--hd);letter-spacing:.08em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}.spjar small{font:600 14.5px var(--ui);letter-spacing:0;text-transform:none;color:var(--route)}.spjar:hover small{text-decoration:underline}.sphero .spjar{margin-bottom:6px}
@keyframes billfall{0%{opacity:0;transform:translate(0,0) rotate(0)}12%{opacity:1}100%{opacity:0;transform:translate(var(--dx),95px) rotate(var(--rot))}}
.cfl{display:block;font:700 12px var(--ui);text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:14px 0 6px}
#modal #fbr.locked{background:var(--chip);color:var(--ink2);border-style:dashed;cursor:default}
.fbrn{margin:4px 0 10px;font-size:12.5px}
.cfrow{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#modal select{width:100%;font:500 14px var(--ui);color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:9px 10px}
.cfck{display:flex;gap:8px;align-items:flex-start;margin:14px 0 0;font-size:13.5px;color:var(--ink2)}
.cfck input{margin-top:3px}
.mytop{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.mytop h1{margin-right:4px}.savepill{border-radius:999px;padding:10px 18px}
.affnote{margin:10px 0 0;padding:14px 18px;border-radius:14px;font-size:14.5px;line-height:1.55;color:var(--ink);background:linear-gradient(100deg,color-mix(in srgb,#E3184F 13%,var(--panel)),color-mix(in srgb,#F28C28 15%,var(--panel)));border:1px solid color-mix(in srgb,#E85A2A 35%,var(--line))}
.affnote b{color:#D23A2A}
#nav a{white-space:nowrap}
.howto{margin:10px 0 0;font-size:14px;color:var(--ink2)}.howto summary{cursor:pointer;font-weight:600;color:var(--route);list-style:none;display:inline-flex;align-items:center;gap:6px}.howto summary::before{content:"?";display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:color-mix(in srgb,var(--route) 14%,var(--panel));font-size:12px}.howto summary::-webkit-details-marker{display:none}.howto p{margin:8px 0 0;padding:12px 14px;border-radius:12px;background:var(--panel);border:1px solid var(--line);line-height:1.55}
.affnote{padding:9px 14px;font-size:14px}
.hero h1 .g{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.home h1 .hk{color:var(--ink)}
/* header at in-between widths: nothing squeezes or overlaps */
.ibtn{flex:none}
#nav{min-width:0}
@media (max-width:1280px) and (min-width:821px){#acct .lbl{display:none}#acct{padding:0}#nav a{font-size:14px;padding:8px 9px}}
@media (max-width:1060px) and (min-width:821px){.brand .beta{display:none}.brand b{font-size:18px}#nav{margin-left:8px;gap:0}#nav a{font-size:13px;padding:8px 7px;letter-spacing:.04em}}
.bang{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;padding-left:1px}
.alli{display:grid;grid-template-columns:128px 72px 1fr auto;align-items:center;gap:12px;padding:11px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel);text-decoration:none;color:var(--ink);margin-bottom:8px}
.alli:hover{border-color:var(--muted)}
.alli .an{font-weight:600}
.alli .am{display:flex;gap:6px;align-items:center;white-space:nowrap}
.ak{font:700 11px var(--ui);text-transform:uppercase;letter-spacing:.05em;text-align:center;border-radius:999px;padding:3px 8px;--tc:var(--route);color:var(--tc);background:color-mix(in srgb,var(--tc) 12%,var(--panel))}
.ak.k-loco{--tc:#C98A12}.ak.k-expansion{--tc:var(--pink)}
.allbox .chips{margin-top:10px}
#mnu{display:none}#mnud{display:none}
@media all{#mnud.open{display:flex;flex-direction:column;position:fixed;top:64px;right:auto;z-index:3000;min-width:230px;padding:8px;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px -12px rgba(0,0,0,.35)}
#mnud a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;text-decoration:none;color:var(--ink2);font:700 14px var(--hd);letter-spacing:.06em;text-transform:uppercase;position:relative}#mnud a:hover{background:var(--chip);color:var(--ink)}#mnud a.on{background:var(--chip);color:var(--ink)}#mnud svg{width:18px;height:18px;flex:none}#mnud a i{margin-left:auto;font:600 11px var(--ui);font-style:normal;background:var(--pink);color:#fff;border-radius:999px;padding:0 6px;letter-spacing:0}}
/* phone: country boxes never wider than the screen */
details.rg,.box{min-width:0;max-width:100%}.rg .xtabs{max-width:100%;min-width:0}.tick{grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr))}
.fbar #fmap{margin-left:0}
/* theme icon: moon <-> sun */
#theme .tsvg{width:18px;height:18px;overflow:visible;transition:transform .55s cubic-bezier(.5,1.5,.45,1);transform:rotate(-30deg)}
#theme .tcore{transform-box:fill-box;transform-origin:center;transition:transform .55s cubic-bezier(.5,1.5,.45,1)}
#theme .tcut{transition:transform .55s ease}
#theme .trays{transform-box:view-box;transform-origin:12px 12px;opacity:0;transform:scale(.3) rotate(-90deg);transition:opacity .3s,transform .55s cubic-bezier(.5,1.5,.45,1)}
#theme.sun .tsvg{transform:rotate(90deg)}#theme.sun .tcore{transform:scale(.6)}#theme.sun .tcut{transform:translate(9px,-9px)}#theme.sun .trays{opacity:1;transform:scale(1) rotate(0)}
/* feedback sent: train carries the message away */
.fbscene{position:relative;height:92px;margin:6px -6px 4px;overflow:hidden;border-radius:12px;background:linear-gradient(180deg,color-mix(in srgb,var(--route) 7%,var(--panel)),var(--panel))}
.fbrail{position:absolute;left:0;right:0;bottom:14px;height:3px;background:color-mix(in srgb,var(--route) 35%,var(--panel))}
.fbrail::after{content:"";position:absolute;left:0;right:0;top:3px;height:3px;background:repeating-linear-gradient(90deg,transparent 0 8px,color-mix(in srgb,var(--ink) 22%,transparent) 8px 11px)}
.fbplat{position:absolute;left:50%;bottom:17px;margin-left:-70px;width:140px;height:7px;border-radius:2px 2px 0 0;background:color-mix(in srgb,var(--ink) 12%,var(--panel));font:800 0/1 var(--hd);color:transparent}
.fbsig{position:absolute;right:14%;bottom:17px;width:10px;height:44px;border-left:2px solid color-mix(in srgb,var(--ink) 40%,transparent)}
.fbsig i{position:absolute;left:-6px;width:10px;height:10px;border-radius:50%;background:color-mix(in srgb,var(--ink) 15%,var(--panel));border:1px solid color-mix(in srgb,var(--ink) 30%,transparent)}
.fbsig i:first-child{top:0;animation:fbred 3.4s steps(1) forwards}.fbsig i:last-child{top:13px;animation:fbgreen 3.4s steps(1) forwards}
@keyframes fbred{0%{background:#E3184F;box-shadow:0 0 8px #E3184F}45%,100%{background:color-mix(in srgb,var(--ink) 15%,var(--panel));box-shadow:none}}
@keyframes fbgreen{0%{background:color-mix(in srgb,var(--ink) 15%,var(--panel))}45%,100%{background:#22C55E;box-shadow:0 0 8px #22C55E}}
.fbtr{position:absolute;left:50%;bottom:16px;width:190px;margin-left:-95px;animation:fbgo 3.4s cubic-bezier(.55,0,.45,1) forwards}
.fbtr .sptrain{position:static;width:190px;height:17px;animation:none;display:block}
.fbenv{position:absolute;left:50%;bottom:16px;width:22px;margin-left:-11px;animation:fbload 3.4s ease forwards}
@keyframes fbgo{0%{transform:translateX(-360px)}30%,52%{transform:translateX(0)}100%{transform:translateX(460px)}}
@keyframes fbload{0%,30%{opacity:0;transform:translateY(-34px) rotate(-12deg)}42%{opacity:1;transform:translateY(2px) rotate(0)}48%,100%{opacity:1;transform:translateY(0)}}
.fbdone{animation:fbin .5s ease 2.6s both}@keyframes fbin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.fbtr,.fbenv,.fbsig i,.fbdone{animation:none}.fbtr{transform:translateX(0)}#theme *{transition:none!important}}
.pcard.wth{grid-template-columns:auto 150px 1fr auto}.pcard.wth .more{grid-column:2/5}.pth{display:block;line-height:0}.pth .th{border-radius:8px}
@media (max-width:820px){.pcard.wth{grid-template-columns:auto 1fr}.pcard.wth .pth{grid-column:2;max-width:260px}.pcard.wth .v{grid-column:2}.pcard.wth .more{grid-column:1/-1}}
/* mid-size screens: when a route card is open, the filter panel steps aside so the route stays visible */
@media (min-width:821px) and (max-width:1100px){body:has(#card.open) #find{display:none}}
@media (max-width:820px){.alli{grid-template-columns:104px 1fr;row-gap:4px}.alli>*:not(.th){grid-column:2;justify-self:start}.alli>.th{grid-row:1/span 3}}
.th{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:8px;background:color-mix(in srgb,var(--muted) 14%,var(--panel))}
.heroth{float:right;width:300px;margin:2px 0 10px 18px}.heroth .th{border-radius:10px;box-shadow:0 4px 14px rgba(0,0,0,.12)}
.hero::after{content:"";display:table;clear:both}
@media (max-width:640px){.heroth{float:none;display:block;width:100%;max-width:420px;margin:4px 0 12px}}
/* scrolling menu (22 Oct): tabs stay on top, the far one fades and an arrow invites a scroll */
#nav{flex:0 1 auto;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;scroll-behavior:smooth;-webkit-mask-image:linear-gradient(90deg,#000,#000);mask-image:linear-gradient(90deg,#000,#000)}
#nav::-webkit-scrollbar{display:none}
#nav.fr{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 70px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 70px),transparent)}
#nav.fl{-webkit-mask-image:linear-gradient(90deg,transparent,#000 50px);mask-image:linear-gradient(90deg,transparent,#000 50px)}
#nav.fl.fr{-webkit-mask-image:linear-gradient(90deg,transparent,#000 50px,#000 calc(100% - 70px),transparent);mask-image:linear-gradient(90deg,transparent,#000 50px,#000 calc(100% - 70px),transparent)}
.navar{display:none;flex:none;width:30px;height:30px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--ink);align-items:center;justify-content:center;cursor:pointer;padding:0;box-shadow:0 4px 14px -6px rgba(0,0,0,.3)}
.navar svg{width:15px;height:15px}
.navar:hover{border-color:var(--muted)}
.navar.show{display:inline-flex}
#navr{margin-left:-22px;position:relative;z-index:1}
#navl{margin-right:-22px;position:relative;z-index:1;order:0}
#navr.show svg{animation:navnudge 1.6s ease-in-out 3}
@keyframes navnudge{0%,100%{transform:none}50%{transform:translateX(3px)}}
@media (prefers-reduced-motion:reduce){#navr.show svg{animation:none}}
/* narrow desktop windows (mouse, not touch): keep the tabs on top instead of the phone bottom bar */
@media (min-width:561px) and (max-width:820px) and (hover:hover) and (pointer:fine){#nav{display:flex;margin-left:8px;gap:0}#nav a{font-size:13px;padding:8px 7px;letter-spacing:.04em}#bnav{display:none!important}#map,#page{bottom:0!important}#find{bottom:12px}.pabout{display:none!important}.brand .beta{display:none}}
#mnu{display:none!important}
.pabout{display:none}
@media (max-width:820px){.pabout{display:inline-flex;font:700 13px var(--hd);letter-spacing:.06em;text-transform:uppercase;text-decoration:none}.pabout.on{color:var(--ink);border-color:var(--muted)}}
.asfb{text-align:center;margin-top:4px}
/* About: support card with the tip jar (22 Oct) */
.asup{margin:16px auto 0;max-width:680px;text-align:center;padding:24px 30px 26px;border-radius:20px;background:var(--panel);border:1px solid var(--line)}
.asjar{display:inline-block;text-decoration:none}
.ajar{width:84px;height:134px;display:block;margin:-6px auto 4px;overflow:visible;transition:transform .2s ease}
.asjar:hover .ajar{transform:translateY(-2px) scale(1.06)}
.ajbill{opacity:0;animation:ajdrop 6s ease-in infinite;transform-box:view-box;transform-origin:30px -18px}
.ajbill.b2{animation-delay:1.5s;--sx:-5px;--r:-16deg}
.ajbill.b3{animation-delay:3s;--sx:4px;--r:22deg}
.ajbill.b4{animation-delay:4.5s;--sx:-3px;--r:-26deg}
@keyframes ajdrop{0%{transform:translate(0,0) rotate(0);opacity:0}5%{opacity:1}20%{transform:translate(var(--sx,4px),20px) rotate(var(--r,14deg))}34%{transform:translate(0,44px) rotate(calc(var(--r,14deg) * 1.6));opacity:1}40%,100%{transform:translate(0,52px) rotate(calc(var(--r,14deg) * 1.8));opacity:0}}
.ajbody{transform-box:view-box;transform-origin:30px 66px;animation:ajbump 1.5s ease-out infinite;animation-delay:.54s}
@keyframes ajbump{0%{transform:none}8%{transform:scale(1.035,.965)}18%{transform:scale(.99,1.01)}26%,100%{transform:none}}
@media (prefers-reduced-motion:reduce){.ajbill{animation:none;opacity:0}.ajbody{animation:none}}
.asup h3{margin:0 0 8px;font:800 24px var(--hd);text-transform:uppercase;letter-spacing:.04em}
.asup h3 span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.asup p{margin:0 auto 16px;max-width:520px;font-size:16px;line-height:1.6;color:var(--ink2)}
.asup .acts{justify-content:center;flex-wrap:wrap}
/* Ko-fi tip panel inside the site (22 Oct) */
#modal .mb.wide{width:min(460px,100%)}
#modal h3 .gt{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.kofi{position:relative;border-radius:14px;overflow:hidden;background:#fff;border:1px solid var(--line);height:min(560px,calc(90vh - 170px))}
.kofi iframe{position:absolute;inset:0;width:100%;height:100%;border:0;opacity:0;transition:opacity .25s}
.kofi.ready iframe{opacity:1}
.kofi .kload{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#6b6f8a;font:600 14px var(--ui)}
.kofi.ready .kload{display:none}
.kalt{margin:10px 0 0;text-align:center}
/* About boxes (22 Oct): both columns end level; Not official reads like the others */
.aside>.abox{flex:1}
.abox p+p{margin-top:10px}
.asrc .s5{--c:var(--pink)}
.aoff{border-color:color-mix(in srgb,var(--pink) 35%,var(--line))}
.aoff h3{color:var(--pink)}
.gtx{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:600}
.aoffs{margin:12px auto 0;max-width:680px;display:flex;gap:12px;align-items:baseline;padding:12px 20px;border-radius:14px;background:var(--panel);border:1px solid color-mix(in srgb,var(--pink) 35%,var(--line));font-size:13.5px;line-height:1.5;color:var(--ink2)}
.aoffs b{flex:none;font:800 14px var(--hd);text-transform:uppercase;letter-spacing:.05em;color:var(--pink)}
@media (max-width:600px){.aoffs{flex-direction:column;gap:4px;text-align:center;align-items:center}}
/* Support hero (22 Oct): ICE a touch bigger, runs between two tunnels; more air between the pieces */
.sptrack{height:40px;max-width:780px}
.sphero .sptrain{width:262px;height:23px;animation-name:sprun2}
@keyframes sprun2{0%{transform:translateX(-280px)}45%,55%{transform:translateX(259px)}100%{transform:translateX(800px)}}
@media (prefers-reduced-motion:reduce){.sphero .sptrain{animation:none;left:calc(50% - 131px)}}
.sptrack{-webkit-mask-image:linear-gradient(90deg,transparent,#000 60px,#000 calc(100% - 60px),transparent);mask-image:linear-gradient(90deg,transparent,#000 60px,#000 calc(100% - 60px),transparent)}
.sphero .spjar{margin:30px auto 22px}
.sphero .spjar small{margin-top:4px}
.sphero h1{margin:10px 0 24px}
.sphero>p{margin-bottom:34px}
.aoffs{flex-direction:column;align-items:center;text-align:center;gap:4px;padding:14px 22px}
/* News page (22 Oct) */
.nwgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.nwc{display:flex;flex-direction:column;gap:4px;text-decoration:none;color:var(--ink);border-radius:12px;padding:8px;border:1px solid var(--line);background:var(--panel)}
.nwc:hover{border-color:var(--muted)}
.nwi{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:8px;display:block;background:var(--chip)}
.nwn{font:700 15px/1.25 var(--hd);text-transform:uppercase;letter-spacing:.03em}
.nws{font-size:12.5px;color:var(--muted)}
.nws .own{color:var(--own);font-weight:600}
.nwchips{display:flex;flex-wrap:wrap;gap:6px}
.nwchip{font-size:13px;text-decoration:none;color:var(--ink2);background:var(--chip);border-radius:999px;padding:5px 11px}
.nwchip b{color:var(--pink)}
.nwchip.more{background:none;text-decoration:underline}
.nwposts{display:flex;flex-direction:column;gap:2px}
.nwsrch{margin:0 0 6px}.nwsrch .search{padding:9px 12px;font-size:14px}.nwqn{margin:0 0 8px;font-size:13px;color:var(--muted)}.nwqn:empty{margin:0}.nwp[hidden],.nwnone[hidden]{display:none}.nwnone{margin-top:6px}.nwnone b{color:var(--ink)}
@media (max-width:600px){.nwsrch .search{min-height:44px;font-size:16px}}
.nwp{display:flex;gap:14px;align-items:flex-start;text-decoration:none;color:var(--ink);padding:10px;border-radius:12px}
.nwp:hover{background:var(--chip)}
.nwp img{width:150px;aspect-ratio:16/9;object-fit:cover;border-radius:8px;flex:none}
.nwpt{display:flex;flex-direction:column;gap:3px;min-width:0}
.nwpt b{font-size:15.5px;line-height:1.35}
.nwpm{font:600 11.5px var(--ui);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.nwpx{font-size:13.5px;line-height:1.5;color:var(--ink2)}
@media (max-width:600px){.nwp img{width:96px}.nwgrid{grid-template-columns:repeat(2,1fr)}}
.nwsl{margin:0 0 10px;font-size:14.5px;color:var(--ink2)}
/* What's in it box (22 Oct) */
.wii{margin-top:12px}
.wil{margin:0;padding-left:20px;display:grid;grid-template-columns:1fr 1fr;column-gap:28px;row-gap:6px}
.wil li{font-size:14.5px;line-height:1.5;color:var(--ink2)}
@media (max-width:700px){.wil{grid-template-columns:1fr}}
/* sale alerts + sale card (22 Oct) */
.alopts{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:4px 0 6px 24px;font-size:13.5px;color:var(--ink2)}
.alopts select{width:auto!important;padding:5px 8px!important;font-size:13px!important}
.alnote{margin:2px 0 8px;font-size:12.5px}
.acch{margin:16px 0 4px;font:800 14px var(--hd);text-transform:uppercase;letter-spacing:.05em}
.alertbox{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:12px}
.alertbox h3{margin:0 0 4px}.alertbox .note{margin:0}
.salecard{display:block;margin:0 0 14px;padding:12px 16px;border-radius:14px;background:var(--panel);border:1px solid color-mix(in srgb,var(--pink) 35%,var(--line));color:var(--ink2);text-decoration:none;font-size:14.5px}
.salecard b{color:var(--pink)}.salecard span{color:var(--ink);font-weight:600}
.salecard:hover{border-color:var(--pink)}
.pv{max-width:820px;margin:12px 0 0}.pv ul{margin:0;padding-left:20px}.pv li,.pv p{font-size:14.5px;line-height:1.6;color:var(--ink2)}.pv li+li{margin-top:6px}.pv p{margin:0}.pv p+p,.pv ul+p{margin-top:8px}
.affnote{display:flex;align-items:center;gap:12px}
.affnote .trainbill{width:64px;height:45px;flex:none}
.affline{display:flex;align-items:center;gap:10px;margin:0 0 12px;padding:8px 10px;border-radius:12px;background:color-mix(in srgb,#3E9A6C 9%,var(--panel));font-size:13px;line-height:1.4;color:var(--ink2);text-align:left}
.affline .trainbill{width:58px;height:41px;flex:none}
.nwp{position:relative}.nwpa{position:absolute;inset:0;border-radius:12px;z-index:0}.nwp img,.nwpt{position:relative;z-index:0;pointer-events:none}
.nwbuy{margin-top:4px;pointer-events:auto;position:relative;z-index:1}.nwbuy a{display:inline-block;font:600 13px var(--ui);color:#2F7D55;background:color-mix(in srgb,#3E9A6C 12%,var(--panel));border-radius:999px;padding:4px 11px;text-decoration:none}.nwbuy a:hover{background:color-mix(in srgb,#3E9A6C 22%,var(--panel))}
.nwlogo{width:150px;aspect-ratio:16/9;flex:none;border-radius:8px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,color-mix(in srgb,var(--route) 14%,var(--panel)),color-mix(in srgb,var(--orange) 12%,var(--panel)));position:relative;z-index:0;pointer-events:none}.nwlogo svg{width:42px;height:42px}
@media (max-width:600px){.nwlogo{width:96px}.nwlogo svg{width:30px;height:30px}}
.natop{display:flex;flex-direction:column;gap:6px;margin:4px 0 8px 24px}.natop label{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13.5px;color:var(--ink2)}.natop select{width:auto!important;padding:5px 8px!important;font-size:13px!important}
.nwpm i{font-style:normal;margin-left:6px;padding:1px 7px;border-radius:999px;letter-spacing:.04em;background:var(--chip);color:var(--ink2)}.nwpm .nwc-out{background:color-mix(in srgb,#3E9A6C 16%,var(--panel));color:#2F7D55}.nwpm .nwc-ann{background:color-mix(in srgb,var(--route) 15%,var(--panel));color:var(--route)}.nwpm .nwc-patch{background:color-mix(in srgb,var(--orange) 15%,var(--panel));color:var(--amber)}.nwpm .nwc-road{background:color-mix(in srgb,var(--violet) 14%,var(--panel));color:var(--violet)}
.nwtl{display:block;margin-top:4px;padding:8px 12px;border-radius:10px;background:color-mix(in srgb,var(--orange) 8%,var(--panel));font-size:13.5px;line-height:1.45;color:var(--ink2)}.nwtl em{font-style:normal;font:800 12px var(--hd);letter-spacing:.06em;color:var(--amber)}.nwtl ul{margin:2px 0 0;padding-left:18px}
.thx{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,color-mix(in srgb,var(--route) 14%,var(--panel)),color-mix(in srgb,var(--orange) 12%,var(--panel)))!important}.thx svg{width:34%;max-width:56px;height:auto;aspect-ratio:1}
.tipty{position:fixed;left:16px;bottom:16px;z-index:2500;display:flex;align-items:center;gap:10px;max-width:340px;padding:10px 14px 10px 10px;border-radius:16px;background:var(--panel);border:1px solid var(--line);box-shadow:0 14px 34px -14px rgba(0,0,0,.35);opacity:0;transform:translateY(12px);transition:opacity .35s,transform .35s}
.tipty.on{opacity:1;transform:none}.tipty p{margin:0;font-size:14px;line-height:1.45;color:var(--ink2)}.tipty b{color:var(--ink)}.tipty p a{color:var(--pink);font-weight:600}
.tiptydone{margin-top:4px;padding:0;border:0;background:none;font:inherit;font-size:12.5px;color:var(--muted);text-decoration:underline;cursor:pointer}
.tiptyj .trainbill{width:58px;height:41px;display:block;flex:none}
.tiptyj .ajar{width:38px;height:60px;margin:0}.tiptyx{align-self:flex-start;border:0;background:none;font-size:20px;line-height:1;color:var(--muted);cursor:pointer;padding:0 0 0 4px}
@media (max-width:820px){.tipty{left:10px;right:10px;bottom:74px;max-width:none}}
.trainbill .tbp{transition:transform .18s ease-out}
.trainbill .tbe{transform-box:fill-box;transform-origin:center;animation:tbblink 5.5s infinite}
@keyframes tbblink{0%,94%,100%{transform:scaleY(1)}96.5%{transform:scaleY(.1)}}
@media (prefers-reduced-motion:reduce){.trainbill .tbe{animation:none}.trainbill .tbp{transition:none}}
.sphero .jarsvg{width:86px;height:100px}
.sphero .spjar>span{font-size:25px;margin-top:4px}
.sphero .spjar small{font-size:16px;max-width:340px;text-align:center;line-height:1.4}
.sphero .bill{width:19px;height:10px;font-size:7.5px}
/* calmer notes (22 Oct): no warning colours for normal information */
.note.vfy{background:none!important;border:0!important;padding:0!important;margin:10px 0 0!important;color:var(--muted)!important;font-size:13px!important}
.affnote{background:var(--panel)!important;border:1px solid var(--line)!important;color:var(--ink2)!important}
.affnote b{color:var(--ink)!important}
.affline{background:var(--chip)!important}
.tipbox{background:var(--panel)!important}
.frow{display:grid;grid-template-columns:96px 1fr;align-items:start;gap:10px;margin-top:12px}
.frow h4{margin:0;padding-top:9px;font:600 11px var(--ui);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.frow .chips{margin:0}
.allcount{margin:14px 0 0 106px!important}
@media (max-width:600px){.frow{grid-template-columns:1fr;gap:4px}.frow h4{padding-top:0}.allcount{margin-left:0!important}}
.home .hacts{justify-content:center}.home .alt,.home .hfacts,.home .hfree{text-align:center}
.affnote{justify-content:center;text-align:left}
.atiles>div{text-align:center;align-items:center}.atiles>div i{margin-left:auto;margin-right:auto}
/* Alignment rule (22 Oct): content left; centre only the home hero, the About/Support heroes and single-message boxes */
.home{margin-left:auto;margin-right:auto}
.home>.eyebrow{display:flex;width:fit-content;margin-left:auto;margin-right:auto}
.home h1{text-align:center}
.affnote{justify-content:center;flex-direction:column;text-align:center;gap:6px}
.astory p{text-align:left}
.astory h2,.astory h3,.astory .asig{text-align:center}
.astory .bang{color:inherit!important;background:none!important;-webkit-text-fill-color:currentColor!important}
.ahero .kick{margin-top:22px}
.ahero h1{margin:10px 0 16px}
.ahero>p{margin:0 auto}
.ahero .anums{margin-top:30px}
/* About layout (23 Oct): hero and story side by side on wide screens, compact hero on phones, so the story starts near the top */
.ahero .aring{width:96px;height:96px;margin-bottom:6px}.ahero .alogo{width:62px;height:62px}
.ahero .kick{margin-top:4px}.ahero h1{margin:6px 0 10px}.ahero .anums{margin-top:18px}
@media (min-width:761px){
.about{max-width:1040px;display:grid;grid-template-columns:clamp(240px,30%,300px) minmax(0,1fr);column-gap:28px;align-items:start}
.about>*{grid-column:1/-1}
.about>.ahero{grid-column:1;padding:28px 20px 22px;border-radius:20px;background:var(--panel);border:1px solid var(--line)}
.about>.astory{grid-column:2;margin:0;max-width:none;padding:30px 36px}
.ahero h1{font-size:44px}.ahero>p{font-size:15px;line-height:1.5}
.ahero .anums{display:grid;grid-template-columns:1fr 1fr;gap:8px}.ahero .anums div{min-width:0;padding:10px 8px}
.astory h2{text-align:left}.about>.aoffs{margin-top:22px}
}
@media (max-width:760px){.ahero{padding-top:8px}.ahero .aring{width:80px;height:80px}.ahero .alogo{width:52px;height:52px}.ahero .anums{margin-top:14px}.about>.astory{margin-top:18px}.ahero h1{font-size:38px;margin:4px 0 8px}.ahero>p{font-size:15px;line-height:1.45;max-width:340px}}
@media (max-width:760px){.ahero{display:grid;grid-template-columns:64px 1fr;column-gap:14px;align-items:center;text-align:left;padding-top:4px}.ahero .aring{grid-row:1/4;width:64px;height:64px;margin:0}.ahero .alogo{width:42px;height:42px}.ahero .kick{margin:0;text-align:left}.ahero h1{font-size:30px;margin:2px 0 4px;text-align:left}.ahero>p{grid-column:1/-1;margin:10px 0 0;text-align:left;max-width:none}.ahero .anums{grid-column:1/-1}.ahero .anums div{text-align:center}.ahero .anums{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.ahero .anums div{padding:8px 4px}.ahero .anums b{font-size:21px}.ahero .anums span{font-size:11px}}
.plgrp{margin-top:14px}
.plgrp h4{margin-bottom:8px}
.plhint{margin:8px 0 0;font-size:13px}
.plsteam{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:14px;padding:14px 16px;border-radius:14px;background:color-mix(in srgb,#1F5FD6 8%,var(--panel));border:1px solid color-mix(in srgb,#1F5FD6 30%,var(--line))}
.plsteam .seg{margin:0}
.plsteam span{font-size:14.5px;color:var(--ink2);flex:1 1 260px}
.plsteam b{color:var(--ink)}
.plsteam{background:color-mix(in srgb,#1F5FD6 17%,var(--panel));border-color:color-mix(in srgb,#1F5FD6 55%,var(--line))}
.plsteam b.gtx{color:transparent;font-weight:700}
.plsteam .btn{margin-left:auto}
.plsafe{display:block;margin-top:5px;font-size:12.5px;color:var(--muted);line-height:1.45}
.plsteam .btn{display:flex;width:fit-content;margin:10px 0 0}
.plsteam{background:color-mix(in srgb,#1F5FD6 8%,var(--panel));border-color:color-mix(in srgb,#1F5FD6 30%,var(--line));align-items:flex-start}
.plsteam .seg{margin-top:-4px}
.plsteam{background:color-mix(in srgb,#1F5FD6 8%,var(--panel));border-color:color-mix(in srgb,#1F5FD6 30%,var(--line));align-items:center}
.plleft{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.plsteam .plimp{margin:0;white-space:nowrap;position:relative;overflow:hidden}
.plundo{all:unset;cursor:pointer;font:600 12px var(--ui);color:var(--muted);padding:2px 4px;border-radius:6px}
.plundo:hover{color:var(--ink);text-decoration:underline}
.plimp.morph{animation:plgrow .6s cubic-bezier(.2,.8,.2,1)}
.plimp.morph::after{content:'Steam';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#fff;color:var(--ink);font:600 15px var(--ui);letter-spacing:0;text-transform:none;border-radius:inherit;animation:plfade .6s ease forwards;pointer-events:none}
@keyframes plgrow{from{max-width:110px;transform:scale(.96)}60%{transform:scale(1.03)}to{max-width:320px;transform:none}}
@keyframes plfade{0%,20%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.plimp.morph,.plimp.morph::after{animation:none}.plimp.morph::after{display:none}}
#nav a.nvsup{background:color-mix(in srgb,#E85A2A 12%,var(--panel));color:#B8301F;box-shadow:inset 0 0 0 1px color-mix(in srgb,#E85A2A 35%,transparent)}
#nav a.nvsup:hover,#nav a.nvsup.on{background:var(--grad);color:#fff;box-shadow:none}
.plsteam{position:relative;align-items:center}
.plx{all:unset;cursor:pointer;position:absolute;top:6px;right:10px;font:400 18px/1 var(--ui);color:var(--muted);opacity:.6;padding:2px 4px;border-radius:6px}
.plx:hover{opacity:1;color:var(--ink)}
.plleft{align-items:center}
.spamtip{display:block;margin-top:10px;padding:12px 14px;border-radius:12px;font-size:14px;line-height:1.5;color:var(--ink2);background:color-mix(in srgb,#1F5FD6 10%,var(--panel));border:1px solid color-mix(in srgb,#1F5FD6 35%,var(--line))}
.spamtip b{display:block;color:var(--ink);font-size:15px;margin-bottom:2px}
.wbhead{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.wbhead svg{width:40px;height:40px;flex:none}
.wbhead h3{margin:0}
.wbnew{margin-top:14px;text-align:center}
.stchoose{display:grid;gap:10px;margin-top:6px}
.stc{all:unset;cursor:pointer;display:block;padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:var(--panel)}
.stc b{display:block;font:800 17px var(--hd);letter-spacing:.05em;text-transform:uppercase;color:var(--ink)}
.stc span{font-size:14px;color:var(--ink2)}
.stc:hover{border-color:color-mix(in srgb,#1F5FD6 45%,var(--line));background:color-mix(in srgb,#1F5FD6 6%,var(--panel))}
.stc.stn{border-color:color-mix(in srgb,#E85A2A 40%,var(--line));background:color-mix(in srgb,#E85A2A 7%,var(--panel))}
.stc.stn b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stc.stn:hover{background:color-mix(in srgb,#E85A2A 12%,var(--panel))}
.whatis{margin:6px 0 2px;font-size:13.5px;color:var(--ink2)}
.whatis summary{cursor:pointer;color:#2E6BE6;font-weight:600;list-style:none;display:inline-flex;align-items:center;gap:6px}
.whatis summary::-webkit-details-marker{display:none}
.whatis summary::before{content:'?';display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;font-size:11px;font-weight:800;color:#fff;background:#2E6BE6}
.whatis p{margin:8px 0 0;padding:10px 12px;border-radius:10px;line-height:1.5;background:color-mix(in srgb,#1F5FD6 7%,var(--panel));border:1px solid color-mix(in srgb,#1F5FD6 25%,var(--line))}
.wbhead h3 .g{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stc{border:0;color:#fff;box-shadow:0 6px 18px -8px rgba(13,16,48,.35);transition:transform .15s,filter .15s}
.stc b,.stc.stn b{color:#fff;background:none;-webkit-text-fill-color:#fff}
.stc span{color:rgba(255,255,255,.92)}
#stback{background:linear-gradient(90deg,#1F5FD6,#0F9F8C)}
.stc.stn{background:var(--grad)}
.stc:hover,.stc.stn:hover{filter:brightness(1.06);transform:translateY(-1px);border:0;background-image:inherit}
#stback:hover{background:linear-gradient(90deg,#1F5FD6,#0F9F8C)}
.stc.stn:hover{background:var(--grad)}
.stor{text-align:center;font-size:14px;color:var(--muted);margin:-2px 0}
.wbhead{flex-direction:column;text-align:center;gap:8px;margin:4px 0 14px}
.wbhead svg{width:48px;height:48px}
/* returning-player hero: one centred column like the new-player hero */
.home .yhl{justify-content:center;margin:6px auto 16px}
.home .ytools{display:flex;justify-content:center;align-items:center;gap:18px;flex-wrap:wrap}
.home .yhl{margin:22px auto 22px}
.home .ytools{margin:0 0 30px}
.home>.eyebrow+h1{margin-top:18px}
.bstart{margin-top:18px;background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:24px 26px;display:grid;gap:22px}
.bsteps{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.bsteps div{display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--ink2)}
.bsteps b{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--grad);color:#fff;font:800 15px var(--hd)}
.bpick{text-align:center;padding:18px 10px;border-radius:16px;background:color-mix(in srgb,#1F5FD6 6%,var(--panel));border:1px solid color-mix(in srgb,#1F5FD6 22%,var(--line))}
.bpick h3{margin:0 0 12px}
.bpgrp{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin:6px 0}
.bpgrp>span{font:700 11px var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-right:4px}
.bpp{cursor:pointer;font-size:14px;padding:8px 14px}
.bpp:hover{border-color:#2E6BE6;color:#2E6BE6}
.bps{background:linear-gradient(90deg,#1F5FD6,#0F9F8C);color:#fff;border-color:transparent}
.bps:hover{color:#fff;filter:brightness(1.07)}
.bwhat{margin:0;padding-left:20px;display:grid;gap:6px;font-size:14.5px;color:var(--ink2)}
@media (max-width:700px){.bsteps{grid-template-columns:1fr}}
.bgo{margin:22px auto 0;max-width:520px;text-align:center;background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:30px 28px 28px;display:flex;flex-direction:column;align-items:center;gap:6px}
.bgo svg{width:52px;height:52px;margin-bottom:6px}
.bgo h3{margin:0}
.bgo p{margin:4px 0 14px;color:var(--ink2);font-size:15px;line-height:1.5}
.tk.ed{border-color:color-mix(in srgb,var(--violet) 45%,var(--line))!important;background:color-mix(in srgb,var(--violet) 7%,var(--panel))!important}
.tk.ed .bx{background:var(--violet)!important;border-color:var(--violet)!important}
.tk.ed small{color:var(--violet);font-weight:600}
.tklegend{display:flex;gap:18px;flex-wrap:wrap;margin:10px 0 0;font-size:13px;color:var(--muted)}
.tklegend span{display:inline-flex;align-items:center;gap:6px}
.tklegend i{width:14px;height:14px;border-radius:4px;display:inline-block}
.tklegend .lg-own{background:var(--green)}
.tklegend .lg-ed{background:var(--violet)}
/* 22 Oct audit fixes */
/* calm notes: no warning yellow or red shading; red stays only on the small x icons and the DLC chips */
.warnbox{border-left:3px solid var(--faint);background:var(--chip);color:var(--ink2)}
.warnbox b{color:var(--ink)}
.bdg.warn{background:var(--chip);color:var(--ink2)}
.warn2,.pcard .m.warn2{color:var(--ink2)}
.req.no b{color:var(--ink)}
.ded{border-left-color:var(--faint);background:var(--chip)}
.ttg.no{background:var(--chip);border:1px solid var(--line)}
/* facts Dovetail answered in public, with the source */
.srcn{font-size:13px;border-left:3px solid var(--route);padding:6px 10px;background:color-mix(in srgb,var(--route) 6%,var(--panel));border-radius:0 8px 8px 0;margin:10px 0 4px}
.srcn a{color:var(--ink);font-weight:600}
.chkby{font-style:normal;color:var(--muted)}
/* Get it box: left-aligned like the rest of the content */
.getit{text-align:left}.getit h3{justify-content:flex-start}.getit .acts{justify-content:flex-start}.getit .acts .btn{min-width:0}
/* desktop map: the region chips and the key move left of an open route card instead of hiding under it */
@media (min-width:821px){body.cardopen .leaflet-top.leaflet-right{right:384px}}
/* 26 Oct 2026 (owner: the route card covered Plain / Terrain / Satellite and the zoom buttons): the bottom-right corner
   (views, zoom, map credit) moves left of an open card too; the credit keeps clear of the route panel on the left */
@media (min-width:821px){body.cardopen .leaflet-bottom.leaflet-right{right:384px}body.cardopen .attc.esri{max-width:calc(100vw - 780px)}}
@media (min-width:821px) and (max-width:1100px){body.cardopen .attc.esri{max-width:calc(100vw - 400px)}}
@media (min-width:1180px){body.cardopen .rchips{display:flex}}
/* phone: Hub pills keep their text on one line of flow (a link inside no longer splits them into columns) */
@media (max-width:760px){.yhl span{display:inline}.home .yhl span{text-align:center}}
/* phone: My Collection numbers in a tidy 2 x 2 grid */
@media (max-width:640px){.stat{display:grid;grid-template-columns:1fr 1fr}.stat div{min-width:0}}
/* Sale alerts / news email card: button never breaks into lines; on phones it sits under the text */
.alertbox .btn{white-space:nowrap;flex:none}
@media (max-width:640px){.alertbox{flex-direction:column;align-items:flex-start;gap:10px}}
/* phone: suggestion cards show their picture as a full-width strip on top */
@media (max-width:820px){.pcard.wth{grid-template-columns:auto 1fr}.pcard.wth .pth{grid-column:1/-1;grid-row:1;max-width:none;width:100%;margin-bottom:6px}.pcard.wth .pth .th{width:100%;max-height:160px}}
/* phone: Routes / Locos / Packs tabs fit; if they still don't, the far edge fades to show they scroll */
@media (max-width:480px){.xtabs{gap:3px;padding:0 2px}.xt{padding:8px 7px;gap:4px;font-size:13px}.xt span{font-size:11px}.xt::before{width:6px;height:6px}}
.xtabs.ovf{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
/* phone: route fact tiles keep their text inside the tile */
@media (max-width:640px){.facts div{min-width:0;flex:1 1 0}.facts span{display:block;overflow-wrap:anywhere}.facts .unit{display:inline}}
/* first paint: a light loading line until the data has arrived */
#boot{position:fixed;inset:58px 0 0 0;z-index:1150;display:flex;align-items:center;justify-content:center;background:var(--bg);color:var(--muted);font:600 15px var(--ui);letter-spacing:.02em}
#boot.gone{display:none}
/* map: station status line, sketch note, card and hover thumbnails, one hover tooltip */
.stq{margin:8px 0 0;font-size:12.5px;line-height:1.4}
.box .stq{margin:-2px 0 10px}
.extn{margin:2px 0 10px;font:600 13.5px var(--ui);color:var(--ink2)}.card .extn,#card .extn{margin:2px 0 6px;font-size:12.5px}
.updn{font-size:13px;line-height:1.5;color:var(--ink2);border-left:3px solid var(--route);padding:7px 11px;background:color-mix(in srgb,var(--route) 6%,var(--panel));border-radius:0 8px 8px 0;margin:10px 0 0;max-width:760px}.updn b{color:var(--ink)}.updsrc{display:block;margin-top:2px;font-size:12px;color:var(--muted)}.updsrc a{color:var(--route);text-decoration:none}
.nwai{display:inline;margin-left:8px;font-size:11.5px;font-weight:500;color:var(--muted)}
.sline li.off .sn{color:var(--muted)}.sline .nmap{font-size:12px;color:var(--muted);margin-left:6px}.sline li.off::after{border-style:dashed}
.tth{display:flex;align-items:center;gap:9px}.tth>span{white-space:normal;min-width:170px;max-width:250px}.tth img{flex:none;width:64px;height:36px;object-fit:cover;border-radius:5px;background:color-mix(in srgb,var(--muted) 14%,var(--panel))}
#map.hovr{cursor:pointer}
/* feature tiles: a maybe (deduced from a train's data, not checked) is light and neutral */
.ft.maybe{color:var(--ink2,var(--ink));border-style:dashed;border-color:color-mix(in srgb,var(--muted) 55%,var(--line))}
.ft.maybe b{color:var(--muted)}.ft{min-width:0;overflow-wrap:break-word;hyphens:auto}.ft.maybe small,.ft.chkd small{color:var(--muted)}
i.maybe{display:inline-flex;align-items:center;justify-content:center;width:1.05em;height:1.05em;border-radius:50%;border:1.5px dashed var(--muted);color:var(--muted);font:700 .7em/1 var(--ui);font-style:normal;vertical-align:-1px}
.note i.maybe{width:15px;height:15px;font-size:10px;margin-right:2px}
/* stat tiles (card and route page): one strip, equal cells split by hairlines, whatever their number (1 to 3); trains to drive first */
.facts{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0;width:calc(100% * var(--n,3) / 3);max-width:calc(180px * var(--n,3));margin:12px 0 0;border:1px solid var(--line);border-radius:10px;background:var(--panel);overflow:hidden}
.facts>div,.box .facts>div{min-width:0;margin:0;padding:8px 12px 9px;border:0;border-radius:0;background:none;box-shadow:-1px 0 0 var(--line)}
.facts>.fdrv{order:-1}
.facts .fxtra{margin-top:1px;color:var(--ink2)}
.annl{margin:8px 0 0;font-size:14px;color:var(--ink2)}
.facts b{display:block;font:800 22px/1.05 var(--hd);letter-spacing:.01em;font-variant-numeric:tabular-nums}
.facts span{display:block;margin-top:2px;font-size:12px;line-height:1.3;color:var(--muted);overflow-wrap:anywhere}
.facts .est b{color:var(--ink2)}.facts .est small{font:600 12px var(--ui);color:var(--muted)}
.facts .sep{display:none}.facts .unit{display:block;width:fit-content;margin:2px 0 0;font:600 12px var(--ui);color:var(--ink2)}
/* tags: one quiet line, a small dot in each tag's filter colour */
.tags{gap:3px 12px;margin:10px 0 0}
.tg,.tg.sig{display:inline-flex;align-items:center;gap:5px;padding:0;border:0;border-radius:0;background:none;font:500 12px/1.4 var(--ui);color:var(--ink2)}
.tg::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--c,var(--muted))}
/* the map card: banner, name, a quiet meta line, what you get, features, tags, hops, actions, footer.
   One border (1px var(--line)), one radius scale (6 / 10 px, round for dots and pills), three type sizes (22 / 13.5 / 12) */
#card{--px:18px}
#card .cardin{padding:16px var(--px) 16px}
#card .x{top:10px;right:10px;z-index:2;width:32px;height:32px;padding:0;display:grid;place-items:center;border-radius:50%;background:color-mix(in srgb,var(--panel) 86%,transparent);backdrop-filter:blur(6px);font-size:22px;color:var(--ink2)}
#card .x:hover{color:var(--ink)}
#card .cth{display:block;margin:-16px calc(-1 * var(--px)) 14px;line-height:0}
#card .cth .th{aspect-ratio:auto;height:104px;border-radius:0;object-position:50% 60%}
#card .title{margin:0;padding-right:34px;font:800 22px/1.08 var(--hd);letter-spacing:.01em;text-transform:uppercase;text-wrap:balance}
#card .cth+.title{padding-right:0}
#card .title .tn{display:block}
#card .title .ts{display:block;margin-top:3px;font:600 13.5px/1.35 var(--ui);letter-spacing:0;text-transform:none;color:var(--ink2);text-wrap:balance}
#card .extn{margin:4px 0 0;font:600 12px var(--ui);color:var(--ink2)}
#card .cmeta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:6px 0 0}
#card .kick{font:600 12px var(--ui);letter-spacing:.05em}
#card .cline{display:inline-block;width:16px;height:4px;margin-right:7px;border-radius:999px;background:var(--c);vertical-align:2px}
#card .badges{margin:0;gap:4px}
#card .bdg{font:600 12px/1.5 var(--ui);border-radius:6px;padding:0 7px}
#card .ring{gap:10px;margin:10px 0 0;font-size:13.5px;color:var(--ink2)}
#card .ring svg{flex:none;width:30px;height:30px}
#card .ring b{font:700 13.5px var(--ui);color:var(--ink)}#card .ring .lbl{display:inline;font-size:13.5px}
#card .warnbox{margin:10px 0 0;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:none;font-size:12px;color:var(--ink2)}
#card .warnbox .src0{font-size:12px}
#card .feat.c{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:8px 6px;margin:14px 0 0}
#card .feat.c[style*="--n:4"]{grid-template-columns:repeat(2,minmax(0,1fr))}
#card .ft{min-width:0;padding:0 2px;border:0;border-radius:0;background:none;text-align:center;font:500 12px/1.3 var(--ui);color:var(--ink);hyphens:manual}
#card .ft b{display:flex;align-items:center;justify-content:center;height:15px;margin:0 0 3px;font:700 13.5px/1 var(--ui);color:var(--green)}
#card .ft.no{color:var(--faint)}#card .ft.no b{color:var(--faint);opacity:1}
#card .ft.maybe{color:var(--ink)}#card .ft.maybe b{color:var(--amber)}
#card .ft small{display:block;margin-top:1px;font-size:12px;line-height:1.3;color:var(--muted)}
#card .ft .half{width:.9em;height:.9em;vertical-align:0}
#card .note{margin:10px 0 0!important;font-size:12px}
#card .hops{display:flex;gap:8px;align-items:baseline;margin:12px 0 0;font-size:13.5px;line-height:1.45;color:var(--ink2)}
#card .hops .hi{flex:none;width:auto;height:auto;background:none;color:var(--violet);font-weight:700}
#card .hops p{margin:0;min-width:0}
#card a.hop{display:inline;padding:0;border:0;color:var(--ink);font-weight:600;text-decoration:none}
#card a.hop:hover{text-decoration:underline;text-underline-offset:3px}
#card .hops .ow{color:var(--green)}
#card .hops .more{display:inline;margin:0;font-size:12px;color:var(--muted);white-space:nowrap}
#card .acts{gap:8px;margin:16px 0 0;flex-wrap:nowrap}
#card .acts .btn{flex:1 1 0;min-width:0;min-height:40px;padding:9px 12px;border-radius:10px;font-size:13.5px}
#card .acts .btn.ghost{background:none;border:1px solid var(--line);color:var(--ink)}
#card .acts .btn.ghost:hover{border-color:var(--muted)}
#card .acts .btn.ic{flex:0 0 40px;padding:0;font-size:18px;letter-spacing:0}
#card .acts .btn.ic[aria-pressed="true"]{color:var(--amber)}
#card .crm{display:block;margin:8px 0 0;font-size:12px;color:var(--muted)}
#card .disc{margin:14px 0 0;padding-top:10px;border-top:1px solid var(--line);font-size:12px;line-height:1.45;color:var(--muted)}
#card .disc .fb{color:var(--ink2)}
@media (max-width:820px){#card{--px:16px}#card .cth .th{height:88px}}
/* route hop transition: the shared station, marked while the map moves between the two routes */
.hopx{border-width:3px;font-size:14px;box-shadow:0 0 0 6px color-mix(in srgb,var(--violet) 22%,transparent),var(--shadow)}
#rmap{transition:height .35s ease}
@media (prefers-reduced-motion:reduce){#rmap{transition:none}}
/* page to page links (View Transitions API): the clicked name grows into the new title, the page cross-fades with a slight slide; Back runs it in reverse */
html.vt #page{view-transition-name:vtp}
::view-transition-group(vtp),::view-transition-group(vtt),::view-transition-group(root),::view-transition-old(root),::view-transition-new(root){animation-duration:.3s}
::view-transition-group(vtt){animation-timing-function:cubic-bezier(.2,.7,.2,1)}
::view-transition-old(vtt),::view-transition-new(vtt){height:100%;width:100%;object-fit:contain;object-position:left center}
::view-transition-old(vtt){animation-duration:.18s}
::view-transition-old(vtp){animation:.3s cubic-bezier(.4,0,1,1) both vtout}
::view-transition-new(vtp){animation:.3s cubic-bezier(0,0,.2,1) both vtin}
html.vtb::view-transition-old(vtp){animation-name:vtoutb}
html.vtb::view-transition-new(vtp){animation-name:vtinb}
@keyframes vtout{to{opacity:0;transform:translateX(-20px)}}
@keyframes vtin{from{opacity:0;transform:translateX(20px)}}
@keyframes vtoutb{to{opacity:0;transform:translateX(20px)}}
@keyframes vtinb{from{opacity:0;transform:translateX(-20px)}}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}
.from{margin:-2px 0 10px;font-size:12.5px;color:var(--muted)}
/* keyboard focus: controls styled with all:unset lost the browser's own focus ring, so they get one back */
.fseg button:focus-visible,.lgall:focus-visible,.plundo:focus-visible,.plx:focus-visible,.stc:focus-visible,.xt:focus-visible,.ycz:focus-visible,.yfav:focus-visible{outline:2px solid var(--route);outline-offset:2px}
#modal .mb:focus{outline:none}
/* 24 Oct (real-life fixes): "Close this message?" under a dialog's form, the delete step, the new-version bar, the route page without its map, storage blocked */
#modal .mask{margin:14px 0 0;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--chip)}#modal .mask p{margin:0 0 8px;font-size:14px;color:var(--ink2)}#modal .mask .acts{margin:0;flex-wrap:wrap}
#modal .delw{margin:6px 0 10px;padding-left:20px;font-size:14px;line-height:1.5;color:var(--ink2)}
#modal .delok{display:flex;align-items:flex-start;gap:8px;margin:12px 0 4px;font:600 14px var(--ui);color:var(--ink);cursor:pointer}#modal .delok input{margin-top:2px;width:18px;height:18px;flex:none}
#modal .delmsg:empty{display:none}
.btn.danger{background:#C81E3A;color:#fff}.btn.danger:disabled{opacity:.45;cursor:not-allowed}
.newver{position:fixed;left:50%;top:70px;transform:translateX(-50%);z-index:1300;display:flex;align-items:center;gap:12px;max-width:calc(100% - 32px);box-sizing:border-box;padding:8px 8px 8px 14px;background:var(--bg2);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);font:500 13.5px var(--ui);color:var(--ink2)}
.newver .lnk{margin:0;font-size:13.5px;color:var(--ink)}.newver .nvx{background:none;border:0;color:var(--muted);font-size:18px;line-height:1;padding:4px 6px;cursor:pointer}
@media (max-width:560px){.newver{top:62px;font-size:13px}}
.gmiss{margin-top:12px}.gmiss .lnk{margin:0;font-size:inherit}
.stnote{margin:0 0 12px}
/* small phones (320-400 px, so 375 and 390 px iPhones too): the account and theme buttons keep their place at the right; the brand gives way */
/* "Don't count my visits" switch; the Steam import's plain failure box (WA) */
.ncsw{margin:10px 0 4px}
/* one toggle component (account box, Privacy page): a native checkbox drawn as a switch */
.tglrow{margin:14px 0 0}.tglrow+.tglrow,.tgldet+.tglrow{margin-top:16px}
.tgl{position:relative;display:flex;align-items:center;gap:12px;cursor:pointer;font-weight:600;color:var(--ink);min-height:32px}
.tgl input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer;z-index:1}
.tglk{position:relative;width:40px;height:22px;border-radius:11px;background:var(--line);transition:background .15s;flex:none}
.tglk::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--bg2);box-shadow:0 1px 2px rgba(0,0,0,.25);transition:left .15s}
.tgl input:checked+.tglk{background:var(--route)}.tgl input:checked+.tglk::after{left:21px}
.tgl input:focus-visible+.tglk{outline:2px solid var(--route);outline-offset:2px}
.tgl.tgloff{cursor:default;color:var(--muted)}.tgl.tgloff .tglk{opacity:.5}
.tgls{margin:2px 0 0 52px;font-size:13px;color:var(--ink2);line-height:1.4}
.tgldet{margin:8px 0 0 52px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font-size:14px}
.tgldet select{max-width:100%;padding:6px 8px;border-radius:8px;border:1px solid var(--line);background:var(--bg2);color:var(--ink);font:inherit;font-size:14px}
.tgldet .tglh{flex-basis:100%;color:var(--muted);font-size:12px}
.tgldet .natop{flex-basis:100%;display:grid;gap:6px;margin-top:4px}.tgldet .natop label{display:flex;justify-content:space-between;gap:8px;align-items:center;flex-wrap:wrap}
.acg{margin-top:20px}.acg .acch{margin:0 0 2px}.acpv{margin-top:20px}
.acfoot{margin-top:22px;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font-size:13px;color:var(--muted)}.acfoot a,.acfoot .lnk{color:var(--ink2);font-size:13px}
.svst{font-size:12px;font-weight:600;color:var(--muted);margin-left:6px}.svst.ok{color:var(--own)}.svst.bad{color:var(--pink)}
.tgldet[hidden],.tgldet .natop[hidden]{display:none}#modal .tgldet select{width:auto;flex:0 1 auto;min-height:0;padding:6px 8px}.acfoot .lnk{padding:0;margin:0;line-height:inherit;min-height:0;vertical-align:baseline}
@media (max-width:420px){.tgls,.tgldet{margin-left:0}}.swt{all:unset;display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-weight:600;color:var(--ink);min-height:32px}
.swt .swk{position:relative;width:40px;height:22px;border-radius:11px;background:var(--line);transition:background .15s;flex:none}
.swt .swk::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--bg2);box-shadow:0 1px 2px rgba(0,0,0,.25);transition:left .15s}
.swt[aria-checked="true"] .swk{background:var(--route)}.swt[aria-checked="true"] .swk::after{left:21px}
.swt:focus-visible{outline:2px solid var(--route);outline-offset:3px;border-radius:6px}
.ncsw .ncl{margin:4px 0 0}
.sfail{border:1px solid var(--line);border-left:3px solid var(--amber);border-radius:10px;padding:10px 14px;margin:10px 0;background:var(--bg2)}
.scheck{margin:6px 0 0;font-size:14px;min-height:0}.scheck:empty{display:none}.scheck.ok{color:var(--ok,#13A06A)}.scheck.bad{color:var(--amber,#B45309)}
.sfail p{margin:0 0 6px}.sfail .acts{margin:8px 0 4px;align-items:center}.sfail .sfc{font-size:12.5px;margin:0}
.sgage{font-size:12.5px}
@media (max-width:400px){#top{gap:6px;padding:0 8px}.brand{min-width:0;flex:0 1 auto;overflow:hidden;gap:6px}.brand .beta{display:none}.brand b{font-size:17px;white-space:nowrap}.pabout{padding:0 9px;letter-spacing:.03em}#acct,#theme{flex:none}}
/* 24 Oct (owner: "barely visible"): feature tiles stronger. Not-listed reads as a clear no, not a ghost. */
.ft{font:600 13px/1.3 var(--ui)}
.ft b{font-size:15px;height:17px}
.ft.no{color:var(--ink2)}
.ft.no b{color:var(--pink);opacity:.9}
/* 24 Oct (owner): on long news items (TL;DR box) the picture sits in the middle of the text, not at the top */
.nwp{align-items:center}
/* 24 Oct (owner): the store button sits in the right-hand column under the price, the same place on every card */
.pcard .v .vst{display:inline-block;margin-top:8px;padding:4px 10px;border-radius:999px;font:600 12.5px var(--ui);white-space:nowrap;text-decoration:none}
/* 24 Oct (owner): About hero and letter in one card on wide screens (shared edge, one outline, same height) */
@media (min-width:761px){
.about{column-gap:0;align-items:stretch}
.about>.ahero{border-radius:20px 0 0 20px;border-right:0}
.about>.astory{border-radius:0 20px 20px 0;border-left:1px solid var(--line)}
}
/* 24 Oct (owner: the picture "randomly floating in a corner"): route and DLC heroes are two columns that match the page
   grid below (text left, picture right, centred on the text), so the picture lines up with the right-hand boxes */
.hero>.htx{min-width:0;max-width:100%}
@media (min-width:641px){
.hero:has(>.heroth){display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);column-gap:18px;align-items:center}
.hero>.heroth{float:none;width:100%;max-width:none;margin:0}
}
@media (max-width:640px){.hero:has(>.heroth){display:flex;flex-direction:column}.hero>.heroth{order:-1}}
/* 24 Oct (owner): the Admin button at the top of the account box, not in the small links at the bottom */
.acadm{display:flex;align-items:center;gap:10px;margin:0 0 14px;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--route) 9%,var(--panel));border:1px solid color-mix(in srgb,var(--route) 25%,var(--line))}
.acadm .btn{flex:none}.acadm span{font-size:12.5px;color:var(--ink2);line-height:1.35}
/* scenarios on a route page (24 Oct 2026): one summary line that opens on a tap; rows are a name and one line, the rest small
   and muted. Self-contained (sc* classes), so a later pass over the route page can restyle it in one place. */
.scbox{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);margin-bottom:16px}
.scsumb{all:unset;box-sizing:border-box;display:flex;flex-wrap:wrap;align-items:center;gap:2px 0;width:100%;min-height:48px;padding:12px 44px 12px 18px;cursor:pointer;position:relative;border-radius:var(--r)}
.scsumb:focus-visible{outline:2px solid var(--route);outline-offset:-2px}
.scbox .sct{font:800 19px var(--hd);letter-spacing:.05em;text-transform:uppercase;color:var(--ink)}
.scsep{font-style:normal;margin:0 8px;color:var(--muted)}
.scs1{font-size:14px;font-weight:600;color:var(--ink2)}
.scs2{font-size:12.5px;color:var(--muted);margin-left:8px}
.scchev{position:absolute;right:18px;top:50%;width:8px;height:8px;border:solid var(--muted);border-width:0 2px 2px 0;transform:translateY(-70%) rotate(45deg);transition:transform .15s}
.scbox.open .scchev{transform:translateY(-30%) rotate(-135deg)}
.scbody{padding:0 18px 14px;border-top:1px solid var(--line)}
.scgap{margin:10px 0 0;font-size:12.5px;color:var(--muted)}.scgap .lnk,.scnone .lnk,.scline .lnk{margin:0}
.scl{list-style:none;margin:4px 0 0;padding:0}
.sc{padding:9px 0;border-bottom:1px solid var(--line);min-width:0}.scl .sc:last-child{border-bottom:0}
.sc .scn{display:block;font-weight:600;font-size:14px;color:var(--ink);overflow-wrap:anywhere}
.scd{margin:2px 0 0;font-size:13.5px;line-height:1.45;color:var(--ink2)}
.scq{margin:2px 0 0;font-size:13px;font-style:italic;color:var(--muted)}
.scm{margin-top:2px;font-size:12px;color:var(--muted);overflow-wrap:anywhere}.scm .scsep{margin:0 5px}
.scm a{color:var(--muted);text-underline-offset:2px}.scm a:hover{color:var(--ink2)}
.scdlc.have,a.scdlc.have{color:var(--green);font-weight:600}
.scsub{margin:14px 0 0;font:600 11px var(--ui);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.sclist.cut .scx{display:none}
.scmore{display:inline-flex;align-items:center;min-height:32px;margin:4px 0 0}
.scsrc{margin:8px 0 0;font-size:12px;color:var(--muted)}.scsrc a{color:var(--ink2)}
.scone{padding:12px 18px}.scline{margin:0;display:flex;flex-wrap:wrap;align-items:center;row-gap:4px;font-size:14px;color:var(--ink2)}
.scline .scask{min-height:32px;display:inline-flex;align-items:center;font-size:13.5px;color:var(--ink)}.scsrc1{color:var(--muted);font-size:12px;margin-left:4px}
.scnone{margin:0 0 16px;padding:0 2px}
.alli .scc{font-size:12px;color:var(--muted)}
@media (max-width:560px){.scsumb>.scsep,.scline>.scsep{display:none}.scsumb .sct{flex-basis:100%}.scline>span{flex-basis:100%}.scsumb,.scone{padding-left:16px}.scbody{padding:0 16px 12px}}
/* 24 Oct: the big map's pop-up (stations, landmarks): summary first, facts behind "More"; both themes, phone width */
.stpop .leaflet-popup-content-wrapper{background:var(--bg2);color:var(--ink);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:0}
.stpop .leaflet-popup-content{margin:12px 14px 11px;font:500 13px/1.45 var(--ui);min-height:0}
.stpop .leaflet-popup-tip{background:var(--bg2);border:1px solid var(--line);box-shadow:none}
.stpop .leaflet-popup-tip-container{margin-top:-1px}
.stpop a.leaflet-popup-close-button{top:7px;right:7px;width:26px;height:26px;border-radius:50%;font:400 20px/25px var(--ui);color:var(--muted);text-align:center}
.stpop a.leaflet-popup-close-button:hover{background:var(--chip);color:var(--ink)}
.stpop a{color:var(--route)}
.stpop a:focus-visible,.stpop button:focus-visible{outline:2px solid var(--route);outline-offset:2px;border-radius:4px}
.pp .ppk{display:flex;align-items:center;gap:5px;margin:0 28px 2px 0;font:600 10.5px var(--ui);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.pp .ppn{margin:0 28px 9px 0;font:700 20px/1.08 var(--hd);letter-spacing:.02em;color:var(--ink)}
.pp .ppf{margin:0 0 9px}
.pp .ppim{display:block;aspect-ratio:16/10;border-radius:10px;overflow:hidden;background:var(--chip)}
.pp .ppim img{display:block;width:100%;height:100%;object-fit:cover}
.pp figcaption{margin-top:4px;font:500 10.5px/1.35 var(--ui);color:var(--muted);overflow-wrap:anywhere}
.pp figcaption a{color:inherit;text-decoration:underline;text-decoration-color:var(--faint);text-underline-offset:2px}
.pp .ppt{margin:0 0 8px;color:var(--ink)}
.pp .ppld{color:var(--muted)}
.pp .ppa{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.pp .ppm{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:3px;font:600 12.5px var(--ui);color:var(--ink2);padding:2px 0}
.pp .ppm:hover{color:var(--ink)}
.pp .ppchev{width:12px;height:12px;transition:transform .15s ease}
.pp .ppm[aria-expanded=true] .ppchev{transform:rotate(180deg)}
.pp .ppw{font:600 12.5px var(--ui);text-decoration:none;margin-left:auto}
.pp .ppw:hover{text-decoration:underline}
.pp .ppfx{display:grid;gap:7px;margin:8px 0 0;padding:9px 10px;background:var(--chip);border-radius:10px}
.pp .ppfx[hidden]{display:none}
.pp .ppfx dt{font:600 10px var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.pp .ppfx dd{margin:1px 0 0;color:var(--ink)}
.pp .ppfx .ppcu:not(:first-child){padding-top:7px;border-top:1px solid var(--line)}
.pp .ppsrc{font-size:11px;color:var(--muted)}
.pp .ppr{margin-top:10px;padding-top:9px;border-top:1px solid var(--line)}
.pp .pprk{display:block;margin-bottom:5px;font:600 10px var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.pp .pprl{display:flex;flex-wrap:wrap;gap:5px}
.pp .pprb{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:6px;max-width:100%;box-sizing:border-box;font:600 12px/1.2 var(--ui);color:var(--ink);background:var(--chip);border:1px solid var(--line);border-radius:999px;padding:4px 10px}
.pp .pprb:hover{border-color:var(--faint)}
.pp .pprb .cline{flex:none;width:12px;height:4px;border-radius:999px;background:var(--c)}
.pp .pph{margin:7px 0 0;font:500 12px/1.4 var(--ui);color:var(--ink2)}
.pp .pphi{color:var(--violet);font-weight:700}
.pp .ppc{margin:9px 0 0;font:500 10.5px/1.35 var(--ui);color:var(--muted)}
@media (pointer:coarse){.pp .pprb{padding:6px 11px}.pp .ppm{padding:6px 0}.pp .ppw{padding:6px 0}}
/* 24 Oct: landmark icons on the big map (from zoom 8) and the Highlights line; they read on Plain, Terrain and Satellite, light and dark */
.lmk{background:none;border:0}
.lmk .lmkc{display:grid;place-items:center;width:22px;height:22px;box-sizing:border-box;border-radius:50%;background:var(--bg2);color:var(--violet);border:1.5px solid var(--violet);box-shadow:0 0 0 1.5px var(--bg2),0 1px 4px rgba(0,0,0,.4);cursor:pointer;transition:transform .12s ease}
.lmk .lmi{width:13px;height:13px}
.lmk:hover .lmkc,.lmk:focus-visible .lmkc{transform:scale(1.15)}
.lmk:focus-visible{outline:none}.lmk:focus-visible .lmkc{outline:2px solid var(--route);outline-offset:2px}
@media (pointer:coarse){.lmk::before{content:"";position:absolute;inset:-7px;border-radius:50%}}
.pp .ppk .ppki{width:13px;height:13px;flex:none;color:var(--violet)}
.pp .ppig{margin:-2px 0 8px;font:500 12px/1.4 var(--ui);color:var(--ink2)}
.hlline{display:flex;align-items:baseline;gap:5px;min-width:0;margin:8px 0 2px;font:500 13.5px/1.4 var(--ui);color:var(--ink2);white-space:nowrap}
.hlline .hlk{flex:none;display:inline-flex;align-items:center;gap:5px;color:var(--muted);font-weight:600}
.hlline .hli{width:14px;height:14px;flex:none;color:var(--violet);align-self:center}
.hlline a{min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--faint);text-underline-offset:2px}
.hlline a:hover{text-decoration-color:currentColor}
.legend .lgl{display:inline-grid;place-items:center;width:18px;height:18px;margin:0 2px;box-sizing:border-box;border-radius:50%;border:1.5px solid var(--violet);color:var(--violet);font-style:normal}.legend .lgl svg{width:11px;height:11px}
@media (max-width:600px){.pp .ppim{aspect-ratio:2/1}}
/* route and DLC pages (24 Oct 2026, owner: "not monsters of text"): a TL;DR block at the top, and folds. A fold is one summary
   line with a count that opens on a tap; .in is a fold inside a box. Same look as the Scenarios section (.scbox). */
.fold{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);margin-bottom:16px}
.fsum{all:unset;box-sizing:border-box;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;width:100%;min-height:48px;padding:13px 44px 12px 18px;cursor:pointer;position:relative;border-radius:var(--r)}
.fsum:focus-visible{outline:2px solid var(--route);outline-offset:-2px}
.fold>.fsum .ftl{font:800 19px/1.2 var(--hd);letter-spacing:.05em;text-transform:uppercase;color:var(--ink)}
.fcnt{font-size:13.5px;font-weight:600;color:var(--ink2)}
.fold.open>.fsum .scchev{transform:translateY(-30%) rotate(-135deg)}
.fbody{padding:2px 18px 14px;border-top:1px solid var(--line)}
.fold.in{background:none;border-radius:10px;margin:10px 0 0}
.fold.in>.fsum{min-height:44px;padding:10px 40px 10px 12px;border-radius:10px}
.fold.in>.fsum .ftl{font:600 14px/1.3 var(--ui);letter-spacing:0;text-transform:none;color:var(--ink)}
.fold.in>.fsum .fcnt{font-size:12.5px;color:var(--muted)}
.fold.in>.fsum .scchev{right:14px}
.fold.in>.fbody{padding:2px 12px 10px}
.fold .fbody>.note:first-child{margin-top:10px}
.fold.stf .sline{margin-top:12px}
.ttsums{display:grid;gap:8px;margin:4px 0 2px}
.ttsum{display:flex;gap:9px;align-items:flex-start;font-size:13.5px}
.ttsum small{display:block;color:var(--muted);font-size:12.5px;margin-top:1px}
.xl{list-style:none;margin:6px 0 0;padding:0}
.xl li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.xl li:last-child{border-bottom:0}.xl li b{font-weight:600;color:var(--ink)}.xl li span{color:var(--muted);font-size:12.5px}
.tldr{margin:10px 0 12px;padding:12px 14px;border-radius:12px;background:color-mix(in srgb,var(--route) 6%,var(--panel));border:1px solid color-mix(in srgb,var(--route) 20%,var(--line));max-width:720px}
.tlk{margin:0 0 3px;font:700 11px/1.2 var(--ui);letter-spacing:.09em;text-transform:uppercase;color:var(--route)}
.tl1{margin:0;font-size:15px;line-height:1.45;color:var(--ink)}
.tl2{margin:5px 0 0;font-size:13.5px;line-height:1.4;font-weight:600;color:var(--ink2)}
.xch{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;align-items:center}
.xc{display:inline-flex;align-items:center;gap:6px;min-height:28px;font:600 12.5px/1.2 var(--ui);padding:4px 11px;border-radius:999px;background:var(--bg2);border:1px solid var(--line);color:var(--ink2)}
.xc::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green);flex:none}
.xman{display:inline-flex;align-items:center;gap:7px;min-height:32px;font:700 13px/1.2 var(--ui);padding:6px 13px;border-radius:999px;background:#1F5FD6;color:#fff;text-decoration:none}
.xman:hover{background:#1A50B8}.xman:focus-visible{outline:2px solid var(--route);outline-offset:2px}
.xman svg{width:15px;height:15px;flex:none}
.xman2{display:inline-flex;align-items:center;min-height:32px;font-size:12.5px;color:var(--ink2);text-underline-offset:2px}
.tlsrc{margin:8px 0 0;font-size:12px;color:var(--muted)}.tlsrc a{color:var(--ink2);text-underline-offset:2px}
@media (max-width:560px){.fsum{padding-left:16px}.fbody{padding:2px 16px 12px}.tldr{padding:11px 12px}.tl1{font-size:14.5px}}
/* My Collection: the one-line Steam import nudge (5 or more DLCs selected by hand, no import yet) */
.snudge{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:12px 0 0;padding:9px 12px;border-radius:10px;border:1px solid color-mix(in srgb,var(--route) 25%,var(--line));background:color-mix(in srgb,var(--route) 6%,var(--panel));font-size:13.5px;color:var(--ink)}
.snudge span{font-weight:600}.snudge .btn{min-height:36px}.snudge .lnk{min-height:32px;color:var(--muted)}
/* the hop links beside a station wrap instead of being cut off with an ellipsis (on a phone the later links were unreachable) */
.sline li{flex-wrap:wrap;row-gap:0}.sline .hps{white-space:normal;overflow:visible}
/* 24 Oct (owner): the left column's logo and content sit at the top of the card again (centring them vertically was tried and undone the same day) */
@media (min-width:761px){.about>.ahero{display:flex;flex-direction:column;align-items:center;justify-content:flex-start}.about>.ahero .anums{width:100%}}
/* 24 Oct (owner): the home page shows off the map (it is one of the site's best parts), not just a small link */
.home .hmap{display:block;max-width:760px;margin:30px auto 0;padding:20px 24px;border-radius:18px;background:var(--panel);border:1px solid var(--line);box-shadow:0 8px 24px -16px rgba(20,30,80,.35);text-align:center;text-decoration:none;color:var(--ink)}
.home .hmap:hover{border-color:color-mix(in srgb,var(--route) 40%,var(--line))}
.home .hmap .hmk{display:block;font:700 11.5px var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--route)}
.home .hmap b{display:block;margin:4px 0 6px;font:800 22px/1.15 var(--hd);text-transform:uppercase;letter-spacing:.03em}
.home .hmap .hmd{display:block;font-size:15px;line-height:1.55;color:var(--ink2)}
.home .hmap .btn{margin-top:12px}
/* 24 Oct audit H-3: on narrow phones the feature tiles hyphenate long words ("Announce-ments") instead of breaking them anywhere */
@media (max-width:460px){.ft{font-size:12px;overflow-wrap:normal;word-break:normal;hyphens:auto;-webkit-hyphens:auto}}

/* 24 Oct, owner: the map filter's Favourites star sits in its own corner, hollow, solid yellow when selected */
.fsrow{display:flex;align-items:center;gap:8px;margin-bottom:6px}.fsrow .fseg{flex:1 1 auto;min-width:0;margin-bottom:0}
.fstar{all:unset;cursor:pointer;flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:color-mix(in srgb,var(--ink) 6%,var(--panel));transition:background .15s,transform .15s}
.fstar svg{width:20px;height:20px;fill:none;stroke:var(--ink2);stroke-width:1.8;stroke-linejoin:round;transition:fill .15s,stroke .15s}
.fstar:hover svg{stroke:#E3A512}
.fstar.on{background:color-mix(in srgb,#F5C542 22%,var(--panel))}.fstar.on svg{fill:#F5C542;stroke:#D99A0B}
.fstar.dis{opacity:.45}.fstar:focus-visible{outline:2px solid var(--route);outline-offset:2px}
.fstar:active{transform:scale(.92)}

/* 24 Oct, owner: each landmark group in its own colour (map markers, pop-up kicker, Highlights line, filter chips).
   Kept clear of the map's own meanings: green = owned, red = not owned, blue = the route, violet = route hop. */
:root{--lm-B:#C46A00;--lm-T:#4A5468;--lm-P:#8A5A2B;--lm-C:#B4237A;--lm-S:#0B8DA6;--lm-O:#6F7A12}
:root[data-theme="dark"]{--lm-B:#FFAA3B;--lm-T:#AEB8CC;--lm-P:#D9A066;--lm-C:#FF6FC8;--lm-S:#45CDE6;--lm-O:#C8D45A}
.lmg-B{--lmc:var(--lm-B)}.lmg-T{--lmc:var(--lm-T)}.lmg-P{--lmc:var(--lm-P)}.lmg-C{--lmc:var(--lm-C)}.lmg-S{--lmc:var(--lm-S)}.lmg-O{--lmc:var(--lm-O)}
.lmk .lmkc{color:var(--lmc,var(--violet));border-color:var(--lmc,var(--violet))}
.pp .ppk .ppki,.hlline .hli,.legend .lgl svg{color:var(--lmc,var(--violet))}
.legend .lgl:has(.lmg-B){border-color:var(--lm-B);color:var(--lm-B)}.legend .lgl.lgl-B{border-color:var(--lm-B);color:var(--lm-B)}.legend .lgl.lgl-T{border-color:var(--lm-T);color:var(--lm-T)}.legend .lgl.lgl-P{border-color:var(--lm-P);color:var(--lm-P)}.legend .lgl.lgl-C{border-color:var(--lm-C);color:var(--lm-C)}.legend .lgl.lgl-S{border-color:var(--lm-S);color:var(--lm-S)}.legend .lgl.lgl-O{border-color:var(--lm-O);color:var(--lm-O)}
.chip .hlci{width:14px;height:14px;margin:0 5px -2px 0;color:var(--lmc)}
.fsrow{gap:6px}.fsrow .fseg button{padding:6px 3px;flex:1 1 auto;min-width:0;letter-spacing:-.005em}.fsrow .fstar{width:34px;height:34px}

/* 24 Oct, owner: the Highlights stepper on the map */
.lmstep{position:absolute;z-index:850;left:50%;bottom:26px;transform:translateX(-50%);display:flex;width:max-content;align-items:center;gap:2px;max-width:calc(100% - 32px);padding:4px;border-radius:999px;background:var(--panel);border:1.5px solid var(--lmc,var(--violet));box-shadow:var(--shadow);font:600 13px var(--ui);color:var(--ink)}
.lmstep button{all:unset;cursor:pointer;flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;font:700 22px/1 var(--ui);color:var(--lmc,var(--violet))}
.lmstep button:hover{background:color-mix(in srgb,var(--lmc,var(--violet)) 14%,transparent)}.lmstep button:focus-visible{outline:2px solid var(--route);outline-offset:1px}
.lmsx{display:grid;grid-template-columns:auto 1fr;column-gap:7px;align-items:center;min-width:0;padding:0 4px}
.lmsx .lmsi{grid-row:span 2;width:18px;height:18px;color:var(--lmc,var(--violet))}
.lmsx b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46vw}.lmsx small{font:500 11.5px var(--ui);color:var(--muted)}
@media (max-width:820px){.lmstep{top:auto;bottom:12px}}
@media (max-width:820px){.lmsx b{max-width:56vw}}
/* 24 Oct, owner: DLC and route pictures sit the same way on every page: top of the hero, beside the title, one shape (16:9, the Steam screenshot shape), the boxes' corners */
.hero:has(>.heroth){align-items:start}
.hero>.heroth{align-self:start;margin-top:4px;position:relative}
.hero>.heroth .th{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r);box-shadow:var(--shadow);border:1px solid var(--line)}
@media (max-width:640px){.hero>.heroth{margin:0 0 14px}}
/* 24 Oct 2026, delight: the map tab's icon and first-visit shimmer, the route "Complete" stamp, the full collection, easter eggs.
/* 24 Oct 2026, delight (v2 after the owner's review): the map tab's icon, the "Complete" and Full collection badges, the
   celebration layer (#fx: confetti canvas, trains, searchlights, falling badges), the SPAD not-found takeover, easter eggs.
   Nothing here takes a click (pointer-events: none) and every motion is off for reduced motion; the badges stay. */
#nav a .nvic{width:15px;height:15px;flex:none;margin-right:-1px;opacity:.9}
#toast{pointer-events:none;width:max-content;max-width:calc(100vw - 32px);text-align:center}
#toast.gold::before{content:"\2605";color:#F2C230;margin-right:7px;font-size:14px;line-height:1}
#toast.top{top:70px;bottom:auto;opacity:0;transform:translateX(-50%);transition:opacity .2s}#toast.top.on{opacity:1;transform:translateX(-50%)}   /* moved off its usual place: it appears there, never sliding over the page */
@media (max-width:820px){#toast{bottom:calc(74px + env(safe-area-inset-bottom));opacity:0;visibility:hidden;transform:translateX(-50%) scale(.96);transition:transform .25s,opacity .2s,visibility 0s .25s}#toast.on{opacity:1;visibility:visible;transform:translateX(-50%);transition:transform .25s,opacity .2s}#toast.top{transform:translateX(-50%);transition:opacity .2s,visibility 0s .2s}#toast.top.on{transform:translateX(-50%);transition:opacity .2s}}   /* phones: a short fade in place, never sliding over the bottom bar */
@media (min-width:561px) and (max-width:820px) and (hover:hover) and (pointer:fine){#toast{bottom:24px}}
.bdg.done{display:inline-flex;align-items:center;gap:3px;background:linear-gradient(135deg,#FCE58A,#F2C230 55%,#E3A512);color:#5A3B00;box-shadow:inset 0 0 0 1px rgba(150,100,0,.28),0 1px 2px rgba(120,80,0,.18);font-weight:700;letter-spacing:.01em}
.bdg.done svg,.ydone svg,.fullbdg svg,.cdrop svg{width:11px;height:11px;fill:currentColor;flex:none}
.box h3 .bdg.done{margin-left:8px;vertical-align:3px;text-transform:none;letter-spacing:.01em}
.ydone{display:inline-flex;align-items:center;gap:3px;margin-left:6px;padding:0 6px;border-radius:6px;font:700 10.5px/1.6 var(--ui);font-style:normal;vertical-align:1px;background:linear-gradient(135deg,#FCE58A,#F2C230 55%,#E3A512);color:#5A3B00;box-shadow:inset 0 0 0 1px rgba(150,100,0,.25)}
.ycol li.yr .ydone{grid-column:2;justify-self:start;margin:1px 0 2px}
.fullbdg{display:flex;width:fit-content;align-items:center;gap:5px;margin:10px auto 0;padding:4px 12px;border-radius:999px;font:700 12px var(--ui);letter-spacing:.06em;text-transform:uppercase;background:linear-gradient(135deg,#FCE58A,#F2C230 55%,#E3A512);color:#5A3B00;box-shadow:inset 0 0 0 1px rgba(150,100,0,.3),0 4px 14px -6px rgba(180,120,0,.5)}
.fullbdg small{font:600 11.5px var(--ui);letter-spacing:0;text-transform:none;opacity:.8}.fullbdg small::before{content:"·";margin:0 5px 0 1px}
/* a badge waiting for the train to drop it keeps its place, unseen; it lands with a little squash */
.bdg.done.await,.ydone.await,.fullbdg.await{visibility:hidden}
.bdg.done.stamp,.ydone.stamp,.fullbdg.stamp{animation:cland .6s cubic-bezier(.2,1.4,.4,1) both}
@keyframes cland{0%{transform:scale(1.35,.7)}40%{transform:scale(.92,1.12)}70%{transform:scale(1.04,.97)}100%{transform:none}}
/* the celebration layer: above the page and its bars, under dialogs and toasts; takes no click */
#fx{position:fixed;inset:0;z-index:1250;pointer-events:none;overflow:hidden;contain:strict}
#fx *{pointer-events:none}
#fx .fxconf{position:absolute;inset:0;width:100%;height:100%}
#fx .crun{position:absolute;left:0;right:0}
#fx .cset{position:absolute;left:0;bottom:0;will-change:transform;filter:drop-shadow(0 3px 4px rgba(10,20,60,.28))}
#fx .ctrain{display:block}
#fx .ctrack{position:absolute;left:0;right:0;bottom:-3px;height:5px;background:linear-gradient(var(--faint),var(--faint)) 0 0/100% 1.5px no-repeat,repeating-linear-gradient(90deg,var(--faint) 0 3px,transparent 3px 11px) 0 2px/100% 3px no-repeat;opacity:0;animation:ctrk var(--T,3.5s) ease both}
@keyframes ctrk{0%,100%{opacity:0}10%,88%{opacity:.8}}
#fx .cdrop{position:absolute;left:0;top:0;display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:7px;font:700 12px/1.5 var(--ui);white-space:nowrap;background:linear-gradient(135deg,#FCE58A,#F2C230 55%,#E3A512);color:#5A3B00;box-shadow:inset 0 0 0 1px rgba(150,100,0,.3),0 6px 14px -4px rgba(120,80,0,.45);will-change:transform}
/* the full collection's night: the sky dims a little behind two searchlights sweeping from the bottom corners */
#fx .fxsky{position:absolute;inset:0;background:radial-gradient(130% 100% at 50% 115%,rgba(16,20,64,.34),rgba(7,10,38,.66) 70%,rgba(5,7,30,.74));opacity:0;animation:csky var(--T,6s) ease both}
:root[data-theme="dark"] #fx .fxsky{background:radial-gradient(130% 100% at 50% 115%,rgba(0,0,10,.25),rgba(0,0,10,.55) 70%,rgba(0,0,10,.62))}
@keyframes csky{0%,100%{opacity:0}12%,82%{opacity:1}}
#fx .beam{position:absolute;bottom:-4vh;width:34vmax;height:135vmax;margin-left:-17vmax;transform-origin:50% 100%;background:radial-gradient(40% 100% at 50% 100%,rgba(255,248,220,.95),rgba(255,240,196,.5) 30%,rgba(255,236,186,.16) 70%,rgba(255,236,186,0) 100%);clip-path:polygon(48.8% 100%,51.2% 100%,92% 0,8% 0);filter:blur(5px);mix-blend-mode:screen}
#fx .beam.bl{left:4vw;animation:cbeaml var(--T,6s) ease-in-out both}
#fx .beam.br{left:96vw;animation:cbeamr var(--T,6s) ease-in-out both}
@keyframes cbeaml{0%{transform:rotate(-8deg);opacity:0}12%{opacity:1}35%{transform:rotate(38deg)}65%{transform:rotate(4deg)}88%{opacity:1}100%{transform:rotate(30deg);opacity:0}}
@keyframes cbeamr{0%{transform:rotate(8deg);opacity:0}12%{opacity:1}35%{transform:rotate(-4deg)}65%{transform:rotate(-38deg)}88%{opacity:1}100%{transform:rotate(-30deg);opacity:0}}
.choorun{position:absolute;left:0;right:0;bottom:1px;height:12px;overflow:hidden;pointer-events:none;z-index:3}
.choorun .mtrain{position:absolute;left:0;bottom:0;animation:choogo 4s cubic-bezier(.45,.05,.5,1) both}
@keyframes choogo{from{transform:translateX(-120px)}to{transform:translateX(100vw)}}
#page.ontrain,#page.ontrain *{cursor:pointer}
/* the SPAD: the not-found page takes over the whole page below the top bar, a night scene in both themes */
#page.spadp{background:#05060F}
#page.spadp .wrap{max-width:none;margin:0;padding:0}
.spadx{position:relative;isolation:isolate;overflow:hidden;min-height:calc(100vh - 58px);min-height:calc(100dvh - 58px);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:2vw;padding:3vh max(20px,6vw);box-sizing:border-box;background:radial-gradient(90% 80% at 30% 40%,#1B1440 0%,#0B0E26 48%,#05060F 100%);color:#F2F3FF}
.spadx::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 55% at 30% 38%,rgba(255,30,60,.34),rgba(255,30,60,0) 70%);animation:spwash 1.1s steps(1,end) infinite}
.spadx::after{content:"";position:absolute;left:0;right:0;bottom:0;height:22vh;z-index:-1;background:linear-gradient(180deg,rgba(120,130,200,0),rgba(120,130,200,.07) 1px,rgba(5,6,15,.2) 2px,rgba(5,6,15,.85))}
.spsig{display:flex;justify-content:center;align-items:center;min-height:0}
.spbig{display:block;height:min(78vh,620px);height:min(78dvh,620px);width:auto;max-width:100%;overflow:visible}
.spbig .splamp,.spbig .spglow{animation:spblink 1.1s steps(1,end) infinite}
@keyframes spblink{0%{opacity:1}60%{opacity:.06}100%{opacity:1}}
@keyframes spwash{0%{opacity:1}60%{opacity:.25}100%{opacity:1}}
.sptx{max-width:620px}
.sptx h1{margin:0 0 14px;font:800 clamp(46px,7.2vw,112px)/.92 var(--hd);letter-spacing:.01em;text-transform:uppercase;color:#fff}
.sptx h1 span{color:#FF3355;text-shadow:0 0 28px rgba(255,40,70,.55)}
.sptx p{margin:0 0 26px;font-size:clamp(17px,1.7vw,22px);line-height:1.45;color:#C9CEF0}
.sptx .spgo{display:inline-flex;align-items:center;min-height:48px;padding:0 22px;border-radius:999px;background:#fff;color:#0D1030;font:700 16px var(--ui);text-decoration:none;box-shadow:0 8px 26px -10px rgba(255,40,70,.6)}
.sptx .spgo:hover{background:#FFE3E8}.sptx .spgo:focus-visible{outline:3px solid #FF3355;outline-offset:3px}
@media (max-width:760px){.spadx{grid-template-columns:1fr;grid-template-rows:auto auto;align-content:center;justify-items:center;text-align:center;gap:6px;padding:18px 16px 24px;min-height:calc(100vh - 114px);min-height:calc(100dvh - 114px)}.spbig{height:min(34vh,320px);height:min(34dvh,320px)}.sptx h1{font-size:clamp(38px,11vw,60px);margin-bottom:10px}.sptx p{margin-bottom:18px}.spadx::before{background:radial-gradient(80% 45% at 50% 28%,rgba(255,30,60,.34),rgba(255,30,60,0) 70%)}}
.afanty{display:none;margin:8px 0 0;font-size:13px;color:var(--ink2);text-align:center}.afanty.on{display:block;animation:fbin .5s ease both}.afanty.still{animation:none}
.anums .afan{-webkit-user-select:none;user-select:none}.ahero .afanty{grid-column:1/-1;font-size:13px;line-height:1.45;margin:8px 0 0;max-width:none;white-space:nowrap;text-align:center}
@media (prefers-reduced-motion:reduce){#fx,.choorun{display:none}.bdg.done.stamp,.ydone.stamp,.fullbdg.stamp,.spbig .splamp,.spbig .spglow,.spadx::before,.afanty.on{animation:none}}

/* audit M-5 (24 Oct): phone pop-ups: a shorter photo, and a fade at the bottom while there is more to scroll */
@media (max-width:600px){.pp .ppim{aspect-ratio:auto;height:112px}}
.stpop .leaflet-popup-content.more{-webkit-mask-image:linear-gradient(#000 calc(100% - 30px),transparent);mask-image:linear-gradient(#000 calc(100% - 30px),transparent)}
/* master audit 24 Oct evening L-2: the desktop panel's footer is sticky at the bottom of its scroll area; the area's 12 px bottom padding let filter chips show under it */
@media (min-width:821px){#find .fbody{padding-bottom:0}}
/* L-3 (master audit 24 Oct evening): the Tip jar tab's red at AA in both themes (was 4.14:1 light, 3.47:1 dark) */
:root[data-theme="dark"] #nav a.nvsup:not(.on):not(:hover),:root[data-theme="dark"] .nvsup:not(.on):not(:hover){color:#FF8A6E}
.legend .lgt{font:600 11px var(--ui);color:var(--ink2);display:block;margin-top:4px}

/* 24 Oct night (owner): add or remove from the top of a route or DLC page */
.badges .hown{all:unset;cursor:pointer;display:inline-flex;align-items:center;padding:2px 10px;border-radius:999px;font:700 12px/1.6 var(--ui);vertical-align:middle}
.badges .hown.add{background:var(--route);color:#fff;box-shadow:0 2px 8px -3px color-mix(in srgb,var(--route) 70%,transparent)}
.badges .hown.add:hover{filter:brightness(1.08)}
.badges .hown.rm{color:var(--muted);border:1px solid var(--line);background:var(--panel)}
.badges .hown.rm:hover{color:var(--pink);border-color:color-mix(in srgb,var(--pink) 50%,var(--line))}
.badges .hown:focus-visible{outline:2px solid var(--route);outline-offset:2px}

/* 24 Oct night (owner): favourite a route right from its tile in My Collection */
.tkw{position:relative}.tk.hasfav{padding-right:38px}
.tkfav{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:28px;height:28px;display:grid;place-items:center;border-radius:8px;font-size:17px;line-height:1;color:var(--faint);cursor:pointer;user-select:none}
.tkfav:hover{color:#E3A512;background:color-mix(in srgb,#F5C542 14%,transparent)}.tkfav.on{color:#E3A512}
.tkfav:focus-visible{outline:2px solid var(--route);outline-offset:1px}
/* 25 Oct 2026 (owner): the wishlist. An outline bookmark, filled when on, in violet so it never reads as the yellow favourite star */
:root{--wish:#6A47E0}:root[data-theme="dark"]{--wish:#B29BFF}
.wsh .bmk{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linejoin:round;transition:fill .15s}
.wsh.on .bmk{fill:currentColor}
.wsh:focus-visible{outline:2px solid var(--route);outline-offset:2px}
#card .acts .btn.ic.wsh{display:inline-grid;place-items:center;color:var(--muted)}
#card .acts .btn.ic.wsh:hover,#card .acts .btn.ic.wsh.on{color:var(--wish)}
#card .acts .btn.ic.wsh.on{border-color:color-mix(in srgb,var(--wish) 45%,var(--line));background:color-mix(in srgb,var(--wish) 9%,transparent)}
.fstar.fwish:hover svg{stroke:var(--wish)}
.fstar.fwish.on{background:color-mix(in srgb,var(--wish) 16%,var(--panel))}.fstar.fwish.on svg{fill:var(--wish);stroke:var(--wish)}
.badges .hwish{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:4px;padding:1px 10px 1px 7px;border-radius:999px;font:700 12px/1.6 var(--ui);vertical-align:middle;color:var(--wish);border:1px solid color-mix(in srgb,var(--wish) 45%,var(--line));background:var(--panel)}
.badges .hwish .bmk{width:14px;height:14px;stroke-width:2.1}
.badges .hwish:hover{background:color-mix(in srgb,var(--wish) 8%,var(--panel))}
.badges .hwish.on{background:color-mix(in srgb,var(--wish) 14%,var(--panel));border-color:color-mix(in srgb,var(--wish) 60%,var(--line))}
.tkwish{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:28px;height:28px;display:grid;place-items:center;border-radius:8px;color:var(--faint);cursor:pointer;user-select:none}
.tkwish .bmk{width:16px;height:16px}
.tkwish:hover{color:var(--wish);background:color-mix(in srgb,var(--wish) 10%,transparent)}.tkwish.on{color:var(--wish)}
.pcard .t .pwsh{all:unset;cursor:pointer;display:inline-grid;place-items:center;width:26px;height:26px;margin:-3px 0 -3px 4px;vertical-align:middle;border-radius:7px;color:var(--faint)}
.pcard .t .pwsh .bmk{width:16px;height:16px}
.pcard .t .pwsh:hover{color:var(--wish);background:color-mix(in srgb,var(--wish) 10%,transparent)}.pcard .t .pwsh.on{color:var(--wish)}
.pcard .t .pwsh:focus-visible{outline:2px solid var(--route);outline-offset:1px}
.bwh{display:flex;align-items:center;gap:6px;margin:6px 0 2px;font:800 17px var(--hd);letter-spacing:.05em;text-transform:uppercase;color:var(--ink)}
.bwh .bmk{width:17px;height:17px;fill:var(--wish);stroke:var(--wish);stroke-width:1.9;stroke-linejoin:round}
.bwh small{font:600 12px var(--ui);letter-spacing:0;text-transform:none;color:var(--muted);margin-left:2px}
.bwh2{margin-top:14px}.bwh2 .bmk{display:none}
.ri .riw{display:inline-block;vertical-align:-2px;margin-right:4px;line-height:0}.ri .riw .bmk{width:13px;height:13px;fill:var(--wish);stroke:var(--wish);stroke-width:2}
.bdg.wsb{background:color-mix(in srgb,var(--wish) 14%,var(--panel));color:var(--wish)}
/* the desktop panel is narrow: with both corner buttons the four ownership choices keep their spaces */
@media (min-width:561px){.fsrow:has(.fwish){gap:5px}.fsrow:has(.fwish) .fstar{width:31px}.fsrow:has(.fwish) .fseg{gap:1px;padding:3px 2px}.fsrow:has(.fwish) .fseg button{padding:6px 2px;font-size:11.5px;letter-spacing:-.01em}}
/* 25 Oct 2026 (pre-launch audit): small badge text and the dark "+ Add to my collection" button at WCAG AA contrast (axe-core measured 2.77, 4.21, 4.46 and 2.77 to 1) */
:root:not([data-theme="dark"]) .bdg.own{color:#087048}:root:not([data-theme="dark"]) .bdg.up,:root:not([data-theme="dark"]) .nwpm .nwc-road{color:#5A3BD0}
:root[data-theme="dark"] .badges .hown.add{background:#1F5FD6}

/* 25 Oct (owner, iPhone): Safari zooms the whole page in when a text box under 16px gets the focus (the sign-in email and
   code boxes), and the zoom stays after a reload, so the page spilled past the screen and the bottom bar went out of view.
   16px text in every box on phones stops that zoom. */
@media (max-width:560px){input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{font-size:16px!important}}
/* 25 Oct (owner, iPhone: "I constantly zoom in by mistake"): no double-tap zoom anywhere (quick taps on buttons and trains
   were zooming the page); pinch zoom still works for anyone who needs it
   (:where keeps it at zero weight, so the maps' own touch rules still win) */
:where(html,body,body *){touch-action:manipulation}
/* 25 Oct (owner, iPhone: the account box looked like it went on below the screen, and the X was gone once scrolled):
   the box is sized to the screen you can actually see (dvh, not the taller vh that runs under Safari's bars), so its
   rounded bottom always shows; the X stays at the top right while the box scrolls */
#modal .mb{max-height:calc(100dvh - 32px)}
#modal .mb>.x{position:sticky;top:-12px;float:right;margin:-12px -12px 0 0;z-index:3;width:36px;height:36px;padding:0;display:grid;place-items:center;border-radius:50%;background:color-mix(in srgb,var(--bg2) 88%,transparent)}
/* 25 Oct (owner, phone: "the whole menu was just weird"): on phones and tablets the bottom bar goes; a menu button at the
   top left opens every section in one list, with light or dark mode and the account at the end. Wide screens unchanged. */
@media (max-width:560px),(max-width:820px) and (pointer:coarse),(max-width:820px) and (hover:none){
  #bnav{display:none!important}
  #map,#page{bottom:0!important}
  #find,#card{bottom:0!important;padding-bottom:env(safe-area-inset-bottom)}
  .tipty{bottom:16px!important}
  #toast:not(.top):not(.mid){bottom:calc(16px + env(safe-area-inset-bottom))}
  #mnu{display:inline-flex!important;order:-1;flex:none;width:40px;height:40px;padding:0;align-items:center;justify-content:center}
  #mnu svg{width:22px;height:22px}
  #pabout,#theme{display:none!important}
  #mnud.open{top:58px;left:8px;right:8px;min-width:0;max-height:calc(100dvh - 72px);overflow:auto;gap:2px}
  #mnud a{padding:13px 14px;font-size:16px}
  #mnud a svg{width:20px;height:20px}
  #mnud .mnsep{height:1px;background:var(--line);margin:6px 4px}
  #mnud.open{background:var(--bg2);box-shadow:0 0 0 100vmax rgba(5,7,25,.35),0 18px 40px -12px rgba(0,0,0,.35)}
  #mnud .mnb svg{width:20px;height:20px;flex:none}
  #mnud .mnb{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:0;padding:13px 14px;border-radius:10px;color:var(--ink2);font:700 16px var(--hd);letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
  #mnud .mnb:hover{background:var(--chip);color:var(--ink)}
}
@media (max-width:560px){#mnud.open{top:56px}}
/* 25 Oct (owner, phone: "the top menu part feels proportionally small"): a taller phone top bar with a bigger logo,
   name and buttons */
@media (max-width:560px),(max-width:820px) and (pointer:coarse),(max-width:820px) and (hover:none){
  #top{height:62px!important;padding:0 12px!important;gap:10px!important}
  #map,#page{top:62px!important}
  .brand svg{width:38px;height:38px}
  .brand b{font-size:25px!important}
  #mnu,#acct{width:48px!important;height:48px!important;flex:none}
  #mnu svg,#acct svg{width:26px;height:26px}
  #mnud.open{top:68px!important}
  .newver{top:72px}
}
@media (max-width:360px){.brand svg{width:32px;height:32px}.brand b{font-size:21px!important}#mnu,#acct{width:44px!important;height:44px!important}#top{padding:0 8px!important;gap:8px!important}}
@media (max-width:560px),(max-width:820px) and (pointer:coarse),(max-width:820px) and (hover:none){.spadx{min-height:calc(100vh - 62px);min-height:calc(100dvh - 62px)}}   /* 25 Oct: the 404 takeover fills the phone page now there is no bottom bar */
/* 25 Oct (owner): the celebration line as a small bubble in the middle of the screen (its top set by toastPlace) */
#toast.mid{bottom:auto!important;max-width:min(320px,calc(100vw - 48px));padding:14px 18px;border-radius:16px;font-size:15px;line-height:1.4;box-shadow:0 18px 40px -12px rgba(0,0,0,.45);opacity:0;visibility:hidden;transform:translate(-50%,-50%) scale(.92)!important;transition:opacity .25s,transform .3s cubic-bezier(.3,1.4,.5,1),visibility 0s .3s}
#toast.mid.on{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1)!important;transition:opacity .25s,transform .3s cubic-bezier(.3,1.4,.5,1)}
/* 25 Oct (owner: "smooth out the transition" from In your library / Complete / Remove to + Add / Wishlist, and the same
   elsewhere): buttons and badges that swap when you add, remove, favourite or wishlist something fade and settle in instead
   of snapping, and their colours ease from one state to the next */
.badges>*,#card .acts>*,#card .crm,#pown,.svcbox .lnk,.svcbox .btn{animation:swapin .28s cubic-bezier(.3,1.3,.5,1) both}
@keyframes swapin{from{opacity:0;transform:scale(.92)}}
.hown,.bdg,.chip,.tk,.fstar,.fwish,.yfav,.tkfav,#pfav,#cfav,#pwish,#cwish,.btn,.tgl{transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s,opacity .2s,transform .15s}
@media (prefers-reduced-motion:reduce){.badges>*,#card .acts>*,#card .crm,#pown,.svcbox .lnk,.svcbox .btn{animation:none}}
/* 25 Oct: route tags are links to the map filtered to that tag */
a.tg{text-decoration:none;cursor:pointer;transition:background-color .15s,border-color .15s}a.tg:hover,a.tg:focus-visible{background:color-mix(in srgb,var(--c) 24%,var(--panel));border-color:color-mix(in srgb,var(--c) 50%,transparent)}
/* My Hub: the collection's value at today's full Steam price (25 Oct 2026; owner: same compact card, the amount in sparkling gold) */
.yval{margin:12px 0 0;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 16px;display:flex;flex-direction:column;gap:3px;text-align:left}
.yval b{font:700 17px/1.3 var(--ui)}.yval>span{color:var(--ink2);font-size:13px;line-height:1.45}.yval .yved{color:var(--ink);font-weight:600}
.yvn{position:relative;display:inline-block;padding:0 2px}
.yvg{font-weight:800;background:linear-gradient(180deg,#F7D35A 0%,#E2A91C 55%,#B98210 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.yvs{position:absolute;width:9px;height:9px;fill:#F2C230;opacity:0;pointer-events:none;animation:yvtw 4s ease-in-out infinite}.yvs svg{width:100%;height:100%;display:block}
.yvs.s1{left:-7px;top:-7px}.yvs.s2{right:-8px;bottom:-3px;width:7px;height:7px;animation-delay:2s}
@keyframes yvshine{0%,100%{background-position:100% 0}50%{background-position:0 0}}
@keyframes yvtw{0%,100%{opacity:0;transform:scale(.4) rotate(0)}45%{opacity:1;transform:scale(1) rotate(30deg)}70%{opacity:0;transform:scale(.6) rotate(60deg)}}
@media (prefers-reduced-motion:reduce){.yvs{animation:none;opacity:.8}}
/* 25 Oct (owner): the map's All / Owned / Not owned / Announced switch takes the colours of the map key */
.fseg button.on[data-show=all]{background:var(--ink);color:var(--panel);box-shadow:0 2px 8px -3px color-mix(in srgb,var(--ink) 50%,transparent)}
.fseg button.on[data-show=mine]{background:var(--own);color:#fff;box-shadow:0 2px 8px -3px color-mix(in srgb,var(--own) 70%,transparent)}
.fseg button.on[data-show=not]{background:var(--notown);color:#3A0A14;box-shadow:0 2px 8px -3px color-mix(in srgb,var(--notown) 70%,transparent)}
.fseg button.on[data-show=up]{background:var(--ann);color:#fff;box-shadow:0 2px 8px -3px color-mix(in srgb,var(--ann) 70%,transparent)}
:root[data-theme="dark"] .fseg button.on[data-show=not]{color:#fff}:root[data-theme="dark"] .fseg button.on[data-show=mine]{color:#04261A}
/* 25 Oct (owner): one colour per kind everywhere: routes green, locos amber, packs red. Hub tiles get a dot by the label
   instead of a bar along the top; the Type chips (All DLCs, Expand) carry the dot and take their colour when picked */
.ys.k-route::before,.ys.k-loco::before,.ys.k-expansion::before{content:none}
.ys.k-route small::before,.ys.k-loco small::before,.ys.k-expansion small::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--tc);margin-right:7px;vertical-align:0}
.chip.kc::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--tc);margin-right:6px;vertical-align:0}
.chip.kc.on{background:var(--tc);color:#fff}.chip.kc.on::before{background:#fff}
.chip.kc.k-loco.on{color:#2A1C00}.chip.kc.k-loco.on::before{background:#2A1C00}
/* the collection value's currency switch */
.yvc{display:flex;gap:4px;margin-top:4px}.yvc button{all:unset;cursor:pointer;min-width:26px;text-align:center;padding:3px 8px;border-radius:99px;font:600 12.5px var(--ui);color:var(--ink2);background:color-mix(in srgb,var(--ink) 6%,var(--panel))}
.yvc button.on{background:var(--ink);color:var(--panel)}.yvc button:focus-visible{outline:2px solid var(--route);outline-offset:2px}
.yval{position:relative}.yval b{padding-right:118px}.yvc{position:absolute;top:11px;right:14px;margin:0}
@media (max-width:620px){.yval b{padding-right:0}.yvc{position:static;margin-top:4px}}
/* 25 Oct (owner): the currency switch in money green */
.yvc button{color:#1F6B42;background:color-mix(in srgb,#2E8B57 12%,var(--panel))}
.yvc button.on{background:#1F7A4A;color:#fff}
:root[data-theme="dark"] .yvc button{color:#7FD9A6;background:color-mix(in srgb,#2E8B57 22%,var(--panel))}
:root[data-theme="dark"] .yvc button.on{background:#2E9E5B;color:#04261A}
/* 25 Oct (owner): the map's ownership colours stand out more: a stronger green for your routes, a quiet slate for the rest
   (the pink read oddly); the switch's pick is a pill that slides between options and changes colour on the way; All is
   the site's red-orange and has room */
:root{--own:#159A4E;--notown:#8E97B9}
:root[data-theme="dark"]{--own:#3FCF86;--notown:#6E779E}
.fseg{position:relative}
.fseg .fpill{position:absolute;top:3px;bottom:3px;left:0;width:0;border-radius:8px;opacity:0;pointer-events:none;z-index:0;background:#E9472E;box-shadow:0 2px 8px -3px rgba(0,0,0,.35);transition:left .32s cubic-bezier(.3,.7,.2,1),width .32s cubic-bezier(.3,.7,.2,1),background-color .32s ease,opacity .2s}
.fseg .fpill[data-k=all]{background:var(--allc)}
.fseg .fpill[data-k=mine]{background:var(--own)}
.fseg .fpill[data-k=not]{background:var(--notown)}
.fseg .fpill[data-k=up]{background:var(--ann)}
.fseg button{position:relative;z-index:1;transition:color .25s ease}
.fseg button.on,.fseg button.on[data-show]{background:transparent!important;box-shadow:none!important;color:#fff}
:root[data-theme="dark"] .fseg button.on[data-show=mine]{color:#04261A}
.fseg button[data-show=all]{flex:0 0 auto;padding-left:12px;padding-right:12px}
@media (prefers-reduced-motion:reduce){.fseg .fpill{transition:none}}
.fseg button{transition:color .2s ease}.fseg button.on{transition:color .2s ease .14s}.fseg button[data-show=all]{min-width:40px}
/* 25 Oct (owner): the switch was squeezed (its words overflowed): it gets the panel's full width, favourites and wishlist sit just under it */
#find .fsrow{flex-wrap:wrap;row-gap:6px}
#find .fsrow .fseg{flex:1 1 100%;min-width:100%;gap:2px;padding:3px}
#find .fseg button{padding:7px 6px;font-size:12.5px;letter-spacing:0}
#find .fseg button[data-show=all]{padding:7px 12px}

/* 25 Oct (owner, after m34): not owned in blue (the slate read as rivers and borders), the same weight as owned (set in app.js);
   the switch back on one line with the star and the bookmark, every option sized to its word (All had too much room) */
:root{--notown:#3570DC}
:root[data-theme="dark"]{--notown:#6A9CFF}
/* 25 Oct night (owner): the line colour follows the switch. All: every route blue; Owned: green; Not owned: red-orange */
:root{--allc:#3570DC;--notown:#E9472E}
:root[data-theme="dark"]{--allc:#6A9CFF;--notown:#FF6A4D}
:root[data-theme="dark"] .fseg button.on[data-show=not]{color:#06173A}
#find .fsrow{flex-wrap:nowrap;gap:5px}
#find .fsrow .fseg{flex:1 1 auto;min-width:0;gap:1px;padding:3px 2px}
#find .fseg button,#find .fseg button[data-show=all]{flex:1 1 auto;min-width:0;padding:6px 4px;font-size:12px;letter-spacing:-.01em}
#find .fsrow .fstar{width:31px;height:32px}
/* 25 Oct (m35 check): the words still overflowed their buttons by a pixel or two at the panel's width; each option now takes its
   word's width plus a little padding, the spare room spread between them, and the star and bookmark are 28 px */
#find .fsrow{gap:4px}
#find .fsrow .fseg{justify-content:space-between;padding:3px}
#find .fseg button,#find .fseg button[data-show=all]{flex:0 0 auto;padding:6px 4px;font-size:11.5px;letter-spacing:-.015em}
#find .fseg button[data-show=all]{padding:6px 8px}
#find .fsrow .fstar{width:28px;height:32px;flex:none}
#find .fsrow{gap:3px}#find .fsrow .fseg{padding:2px;gap:1px;overflow:hidden}
#find .fseg button,#find .fseg button[data-show=all]{padding:6px 3px}#find .fseg button[data-show=all]{padding:6px 6px}
#find .fsrow .fstar{width:27px}
/* v41 (owner, 25 Oct): contributor plates, compact checks, the Player checks box, the Crew Room */
.plate{display:block;height:auto;max-width:100%;filter:drop-shadow(0 6px 10px rgba(30,20,0,.22))}
.pmini{display:inline-flex;vertical-align:-4px;margin:0 3px}
.pcby{display:inline-flex;align-items:center;gap:3px;font:600 12.5px var(--ui);color:var(--ink2);margin-top:4px}.pcby b{color:var(--ink)}
.pcc{font:700 10px var(--ui);letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:99px;background:linear-gradient(180deg,#2F3A86,#0B0E2C);color:#F2C94C;margin-left:4px}
.ctk{margin:6px 0 0;font-size:13px}.ctk summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:99px;font:600 12.5px var(--ui)}
.ctk summary::-webkit-details-marker{display:none}.ctk .ctm{font-weight:800}
.ctk.wait summary{background:#FFF3D6;color:#7A5300}.ctk.ok summary{background:#E1F5EA;color:#0E6E43}
.ctk .ctd{margin:6px 0 2px;padding:8px 12px;border-radius:10px;background:color-mix(in srgb,var(--ink) 5%,var(--panel));color:var(--ink2);line-height:1.45}
:root[data-theme="dark"] .ctk.wait summary{background:#3A2E10;color:#FFD27A}:root[data-theme="dark"] .ctk.ok summary{background:#0F3324;color:#7FE3AE}
.pchk .pcl{list-style:none;margin:8px 0 0;padding:0;max-height:330px;overflow:auto;display:flex;flex-direction:column;gap:8px}
.pchk li{border:1px solid var(--line);border-radius:12px;padding:10px 12px}.pchk li p{margin:4px 0 0;line-height:1.45}
.pch{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}.pcm{color:var(--muted);font-size:12.5px}.pcsrc{font-size:12.5px;color:var(--muted)}
.ctag{font:700 11px var(--ui);letter-spacing:.04em;padding:3px 9px;border-radius:99px}.ctag.wait{background:#FFF3D6;color:#7A5300}.ctag.ok{background:#E1F5EA;color:#0E6E43}
:root[data-theme="dark"] .ctag.wait{background:#3A2E10;color:#FFD27A}:root[data-theme="dark"] .ctag.ok{background:#0F3324;color:#7FE3AE}
.pcall{display:none;margin-top:8px}
@media (max-width:760px){.pchk .pcl{max-height:none;overflow:visible}.pchk .pcl.more:not(.all) li:nth-child(n+4){display:none}.pcall{display:inline-flex}}
.yplate{margin:12px 0 0;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:14px 18px;display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center}
.yplate h3{font:800 22px/1 var(--hd);letter-spacing:.05em;text-transform:uppercase;margin:0 0 4px}.yplate p{margin:0;color:var(--ink2);font-size:14px}
.yplate ul{list-style:none;margin:8px 0;padding:0;font-size:13.5px}.yplate li{padding:2px 0}.yplate .ok{color:#0E7A50;font-weight:600}.yplate .wt{color:#7A5300;font-weight:600}
@media (max-width:620px){.yplate{grid-template-columns:1fr;justify-items:center;text-align:center}}
.spcrew{display:grid;grid-template-columns:1fr auto;gap:2px 14px;align-items:center;text-decoration:none;color:var(--ink);margin:16px 0}.spcrew b{font:700 17px var(--ui)}.spcrew span{color:var(--ink2);font-size:14px}.spcrew i{grid-row:1/3;grid-column:2;font:800 28px var(--hd);font-style:normal;color:var(--muted)}
.crg{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px;margin-top:10px}
.crc{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;padding:10px;border:1px solid var(--line);border-radius:14px}.crc b{font-size:15px}.crc span{color:var(--muted);font-size:12.5px}
.crlv{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:8px 0}.crlv>div{display:flex;flex-direction:column;align-items:center;text-align:center}.crlv b{font-size:14px}.crlv span{color:var(--muted);font-size:12px}
@media (max-width:560px){.crlv{grid-template-columns:repeat(2,1fr)}}
.crrules{margin:10px 0 0;padding-left:18px;color:var(--ink2);line-height:1.55}
/* 25 Oct (owner): Remastered in a soft gold glow, steady (no shimmer), the collection card's gold */
.rmw{font-weight:800;background:linear-gradient(180deg,#F7D35A 0%,#E2A91C 55%,#B98210 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 3px rgba(242,194,48,.55)) drop-shadow(0 0 8px rgba(242,194,48,.28));letter-spacing:.01em}
.bdg.rmb{background:color-mix(in srgb,#F2C230 12%,var(--panel));border:1px solid color-mix(in srgb,#E2A91C 55%,transparent);color:#9A6B06}
.updn.remn{border-left-color:#E2A91C;background:color-mix(in srgb,#F2C230 9%,var(--panel))}.updn.remn p{margin:0}.updn.remn p+p{margin-top:6px}.remu{font-weight:600;color:var(--ink)}
.rtstep{--lmc:var(--route)}.rtstep.rtrem{--lmc:#D49A12}
.alli .bdg.rmb{font-size:11px;padding:1px 7px}
/* 25 Oct night (owner): the stepper keeps one width while you click through, so the arrows stay under your finger; long names are cut with ... */
.lmstep{width:min(400px,calc(100% - 32px))}.lmstep .lmsx{flex:1 1 auto;overflow:hidden}.lmstep .lmsx b,.lmstep .lmsx small{max-width:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
@media (max-width:820px){.lmstep{width:calc(100% - 24px)}}
/* 25 Oct (owner): My Hub option B */
.yrun{display:flex;align-items:center;gap:22px;margin:18px 0 14px;padding:22px 26px;border-radius:20px;background:linear-gradient(135deg,#141A3C,#23306B);color:#fff;box-shadow:var(--shadow)}
.yrun .ys.yring{background:none;border:0;box-shadow:none;padding:0;display:flex;align-items:center;gap:12px;color:#fff;min-width:0}
.yrun .ys.yring b{color:#fff;font-size:34px}.yrun .ys.yring small{color:#C9D2F5}
.yrun .ys.yring svg circle:first-child{stroke:rgba(255,255,255,.16)}
.yrunt{min-width:0}.yrunt h3{margin:0 0 4px;font:800 20px var(--ui);color:#fff;letter-spacing:.01em}.yrunt p{margin:0;color:#DCE2FA;font-size:15px;line-height:1.45}.yrunt p b{color:#fff}
.ynear{margin-top:6px!important}.ynear a{color:#fff;font-weight:700}.ynear span{display:inline-block;margin-left:4px;padding:1px 8px;border-radius:999px;background:rgba(255,255,255,.14);font-weight:700;font-size:13px}
.ystats .ys small .yof{color:var(--muted);font-weight:500}
.ystats .ys .ybar{display:block;margin-top:8px;height:6px;border-radius:99px;background:var(--line);overflow:hidden}.ystats .ys .ybar i{display:block;height:100%;border-radius:99px}
.ystats .ys.k-route .ybar i{background:#3AA35B}.ystats .ys.k-loco .ybar i{background:#D9A021}.ystats .ys.k-expansion .ybar i{background:#D7334D}
.ystats .ys .ymore{display:block;margin-top:6px;font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ys.yflags .yfl{display:flex;flex-wrap:wrap;gap:4px 8px;margin-top:8px}.ys.yflags .yfl i{font-style:normal;font-size:15px}.ys.yflags .yfl small{font-size:12px;color:var(--muted);margin-left:2px;font-weight:600}
.y3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:14px 0 6px}
.y3c{display:block;min-width:0;padding:16px 18px;border-radius:16px;background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);color:var(--ink);text-decoration:none}
.y3c .y3k{display:block;font:700 11px var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.y3b b{display:block;font:800 16px/1.3 var(--ui);margin-bottom:4px}.y3b span{display:block;color:var(--ink2);font-size:14px}.y3c .y3m{display:block;margin-top:8px;color:var(--route);font-weight:700;font-size:13.5px}
.y3b:hover{border-color:var(--route)}
.y3d .ydykt{margin:0;font-size:14px;line-height:1.5;color:var(--ink2)}.y3d .ydykt b{color:var(--ink)}
.y3v .yval{margin:0;border:0;box-shadow:none;padding:0;background:none}
@media (max-width:900px){.y3{grid-template-columns:1fr}}
@media (max-width:600px){.yrun{flex-direction:column;align-items:flex-start;gap:12px;padding:18px}}
.home .ystats{grid-template-columns:repeat(4,1fr)}.home .ystats .ys{justify-content:flex-start}
.y3v .yval b{padding-right:0;display:block}.y3v .yvc{position:static;margin:10px 0 0}
.ys .yof{letter-spacing:0;text-transform:none}
@media (max-width:760px){.home .ystats{grid-template-columns:repeat(2,1fr)}}
/* 25 Oct (owner): logbook and monthly challenge */
.logb .lgd{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0}.logb .lgd span{font-size:12.5px;padding:2px 9px;border-radius:99px;background:var(--chip);color:var(--ink2)}.logb .lgd .more{background:none;color:var(--muted)}
.y3.y2{grid-template-columns:repeat(2,1fr)}.ylog b,.ychal b{display:block;font:800 16px/1.3 var(--ui);margin-bottom:4px}.ylog span{color:var(--ink2);font-size:14px}
.ychal ul{list-style:none;margin:6px 0 0;padding:0}.ychal li{padding:3px 0;font-size:14px}.ychal li a{color:var(--ink);font-weight:600}.ychal li.ok a{color:#159A4E}
.ychal.won{border-color:#E2A91C;background:color-mix(in srgb,#F2C230 8%,var(--panel))}
@media (max-width:900px){.y3.y2{grid-template-columns:1fr}}
.crtl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.crtl h4{margin:0 0 6px;font:700 12px var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}.crtl ol{margin:0;padding-left:22px}.crtl li{padding:3px 0}.crtl a{color:var(--ink);font-weight:600}
@media (max-width:600px){.crtl{grid-template-columns:1fr}}
/* 26 Oct (owner): option B as the mock-up: dark card left, tiles 2 x 2 right */
.yb{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:14px;margin:18px 0 14px}
.yb .yrun{margin:0;display:flex;align-items:center;gap:28px;padding:30px 34px;border-radius:22px;background:linear-gradient(135deg,#0E1233,#1F2A6E);box-shadow:var(--shadow)}
.yb .yrun .ys.yring{position:relative;flex:none;width:150px;height:150px;display:grid;place-items:center;padding:0;background:none;border:0;box-shadow:none}
.yb .yrun .ys.yring svg{position:absolute;inset:0;width:100%;height:100%}
.yb .yrun .ys.yring b{position:relative;font:800 34px var(--hd,var(--ui));color:#fff}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.yrunt .yk{display:block;font:800 15px var(--hd,var(--ui));letter-spacing:.08em;text-transform:uppercase;color:#AFC0F5;margin-bottom:4px}
.yrunt .ybig{margin:0 0 6px!important;color:#fff}.yrunt .ybig b{font:800 56px/1 var(--hd,var(--ui));color:#fff}.yrunt .ybig span{font-size:19px;color:#DCE2FA}
.yrunt .ynear a{color:#8FB4FF;font-weight:700;text-decoration:none}.yrunt .ynear a:hover{text-decoration:underline}
.yb .ystats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:0}
.yb .ystats .ys{justify-content:flex-start;padding:16px 20px;border-radius:18px}
.ys .ylb{display:flex;align-items:center;gap:8px;font:600 15px var(--ui);color:var(--ink)}.ys .ydt{width:10px;height:10px;border-radius:50%;background:var(--route)}
.ys.k-route .ydt{background:#3AA35B}.ys.k-loco .ydt{background:#D9A021}.ys.k-expansion .ydt{background:#D7334D}.ys.yflags .ydt{background:#3570DC}
.ys .ynum{display:flex;align-items:baseline;gap:6px;margin-top:4px}.ys .ynum b{font:800 40px/1 var(--hd,var(--ui));color:var(--ink)}.ys .ynum .yof{font-size:17px;color:var(--muted);font-weight:500}
.y3c .y3k{font:800 14px var(--hd,var(--ui));letter-spacing:.08em}
.y3b b{color:var(--route);font-size:21px}.ydkh{display:block;font:800 18px/1.3 var(--ui);margin-bottom:4px}.ydkh small{font-weight:500;color:var(--muted);font-size:13px}
.y3v .yval b{font-size:17px}
@media (max-width:980px){.yb{grid-template-columns:1fr}}
@media (max-width:600px){.yb .yrun{flex-direction:column;align-items:flex-start;padding:22px}.yb .yrun .ys.yring{width:120px;height:120px}.yrunt .ybig b{font-size:44px}}
.ys .ynum small::before{content:none!important}.ys.yflags .ylb{letter-spacing:0;margin-top:0;font-size:15px}.ys.yflags .ynum{letter-spacing:0;margin-top:4px}.ys.yflags .ynum b{font-size:40px}.ys.yflags .ynum .yof{font-size:17px}
.y3:not(.y2){grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
@media (max-width:900px){.y3:not(.y2){grid-auto-flow:row;grid-auto-columns:auto}}
/* 26 Oct: All DLCs, In development (Dovetail's roadmap) */
.devsec{margin:26px 0 8px}.devsec h2{font:800 22px/1.2 var(--hd,var(--ui));margin:0 0 4px;display:flex;align-items:baseline;gap:8px}.devsec h2 small{font:600 14px var(--ui);color:var(--muted)}
.devsec>.note{margin:0 0 12px;max-width:760px}
.devi{display:grid;grid-template-columns:72px 1fr auto;align-items:center;gap:12px;padding:11px 14px;border:1px dashed var(--line);border-radius:12px;background:var(--panel);margin-bottom:8px}
.devi .dvb{display:flex;flex-direction:column;gap:2px;min-width:0}.devi .an{font-weight:600}
.devi .dvs{font-size:13.5px;color:var(--ink2)}.devi .dvn{font-size:13.5px;color:var(--ink2)}.devi .dvm{font-size:12.5px;color:var(--muted)}.devi .dvm a{color:inherit}
.devi .dvw{align-self:center}
@media (max-width:820px){.devi{grid-template-columns:1fr auto}.devi .ak{grid-column:1;justify-self:start}.devi .dvb{grid-column:1}.devi .dvw{grid-column:2;grid-row:1/span 2}}
.devi .dvw{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:5px;padding:4px 12px 4px 9px;border-radius:999px;font:700 12.5px/1.4 var(--ui);color:var(--wish);border:1px solid color-mix(in srgb,var(--wish) 45%,var(--line));background:var(--panel);white-space:nowrap}
.devi .dvw .bmk{width:15px;height:15px;stroke-width:2.1}.devi .dvw:hover{background:color-mix(in srgb,var(--wish) 8%,var(--panel))}.devi .dvw:focus-visible{outline:2px solid var(--wish);outline-offset:2px}
.allcount .devj{margin-left:10px;font:inherit;font-weight:600}.devsec{scroll-margin-top:90px}
/* v43 (26 Oct): credits for mistakes spotted and ideas built */
.pfix ul{margin:0;padding-left:18px}.pfix li{margin:4px 0;line-height:1.5}.pfix .pfby{color:var(--muted);font-size:13.5px;white-space:nowrap}.pfix .pmini,.updideas .pmini,.crrec .pmini{vertical-align:-4px;margin-right:4px}
.yplate .ypcr{margin-top:6px}.yplate .ypcr .id{color:#7A4FD8;font-weight:700}.yplate .ypcr .fx{color:#C2410C;font-weight:700}
.updideas ul{margin:0}.updideas li{margin:4px 0}
.crrec ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}.crrec li{display:grid;grid-template-columns:150px 1fr auto;gap:10px;align-items:baseline;padding:8px 0;border-top:1px solid var(--line)}.crrec li:first-child{border-top:0}
.crrec .crk{font:700 12px var(--ui);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}.crrec .crk.idea{color:#7A4FD8}.crrec .crk.fix{color:#C2410C}.crrec .crk.check{color:#2E9E5B}.crrec .crb{color:var(--muted);font-size:13px;white-space:nowrap}
@media (max-width:700px){.crrec li{grid-template-columns:1fr}.crrec .crb{white-space:normal}}
[data-theme="dark"] .crrec .crk.idea,[data-theme="dark"] .yplate .ypcr .id{color:#B9A2FF}[data-theme="dark"] .crrec .crk.fix,[data-theme="dark"] .yplate .ypcr .fx{color:#FF9A6B}[data-theme="dark"] .crrec .crk.check{color:#5BD18A}
/* 26 Oct (owner): the platform switcher in the top bar, for players on more than one platform */
.ppl{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 12px 0 10px;flex:none;border-radius:999px;border:1.5px solid var(--route);background:color-mix(in srgb,var(--route) 8%,var(--panel));color:var(--ink);font:700 13px var(--ui);cursor:pointer;white-space:nowrap}
.ppl[hidden]{display:none}.ppl svg{width:19px;height:19px;color:var(--route);flex:none}.ppl i{font-style:normal;color:var(--muted);font-weight:600;font-size:11px}
.ppl:hover{background:color-mix(in srgb,var(--route) 14%,var(--panel))}.ppl:focus-visible{outline:2px solid var(--route);outline-offset:2px}
.ppm{position:fixed;z-index:3000;background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:14px;font:500 14px/1.45 var(--ui);color:var(--ink)}
.ppm h4{margin:0 0 4px;font:800 15px var(--ui)}.ppm p{margin:0 0 8px;color:var(--ink2)}
.ppm .o{all:unset;box-sizing:border-box;display:flex;width:100%;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;border:1.5px solid var(--line);margin-top:6px;cursor:pointer;font:500 14px/1.35 var(--ui);color:var(--ink)}
.ppm .o span{display:flex;flex-direction:column}.ppm .o b{font-weight:800}.ppm .o small{color:var(--muted);font-size:13px}.ppm .o i{font-style:normal;color:var(--route);font-weight:800}
.ppm .o:hover{border-color:color-mix(in srgb,var(--route) 50%,var(--line))}.ppm .o:focus-visible{outline:2px solid var(--route);outline-offset:2px}
.ppm .o.on{border-color:var(--route);background:color-mix(in srgb,var(--route) 8%,var(--panel))}
.ppm .pmore{display:inline-block;margin-top:10px;font-size:13px;color:var(--route);font-weight:600}
@media (max-width:820px){.ppl{height:40px;padding:0 10px}.ppl i{display:none}}
@media (max-width:360px){.ppl span{display:none}.ppl{padding:0 9px}}
.acg .acnt{margin:6px 0 0;font-size:13px}
.ppm .o{background:var(--panel)}
@media (max-width:600px){#top:has(#psw:not([hidden])) .brand b{font-size:19px!important;letter-spacing:.01em}#top:has(#psw:not([hidden])){gap:8px!important}#top:has(#psw:not([hidden])) .brand svg{width:28px;height:28px;flex:none;min-width:28px}.ppl{height:44px;padding:0 10px;gap:5px;font-size:13px}.ppl svg{width:18px;height:18px}}
@media (max-width:380px){#top:has(#psw:not([hidden])) .brand b{font-size:17px!important}}
/* the static page text (tools/launch.py) */
#pre .box h2{margin:0 0 10px;font:800 19px var(--hd);letter-spacing:.05em;text-transform:uppercase;display:flex;align-items:center;gap:8px}#pre .box h2 small{font:500 12px var(--ui);letter-spacing:0;text-transform:none;color:var(--muted);margin-left:auto}#pre h3{font:700 14px var(--ui);margin:12px 0 6px}#pre ul{margin:0 0 8px;padding-left:20px;font-size:14px}#pre li{margin:2px 0}#pre .lead{font-size:15.5px;line-height:1.55;max-width:760px}#pre .crumbs{font-size:13px;color:var(--muted);margin-bottom:10px}#pre .prel{columns:2 240px;column-gap:24px}#pre .preimg{float:right;width:300px;max-width:42%;height:auto;margin:2px 0 10px 18px;border-radius:10px}#pre a{color:var(--route)}#pre .prefoot{border-top:1px solid var(--line);margin-top:24px;padding-top:12px;font-size:13px}#pre .prefoot nav a{margin-right:4px}@media (max-width:560px){#pre .preimg{float:none;display:block;width:100%;max-width:none;margin:0 0 12px}}