*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;background:#000;color:#fff;font-feature-settings:'cv11','ss01','tnum';font-family:'Inter',-apple-system,Helvetica,Arial,sans-serif;overflow:hidden;-webkit-font-smoothing:antialiased}
/* touch: the globe owns every gesture on it (js/45-gestures.js); elsewhere no double-tap page zoom, panels keep their scrolling */
html{touch-action:manipulation}
#canvas{position:fixed;inset:0;width:100%;height:100%;display:block;cursor:crosshair;touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
#canvasTop{position:fixed;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:12}
.trail{position:fixed;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:13}
#trailA{mix-blend-mode:color-dodge;filter:blur(6px)}
#trailB{mix-blend-mode:overlay;filter:blur(14px);opacity:.9}
#trailC{mix-blend-mode:multiply;filter:blur(22px);opacity:.55}
.ui{position:fixed;z-index:10;pointer-events:none}
.ui *{pointer-events:auto}

.top{top:0;left:0;right:0;height:52px;display:flex;align-items:flex-start;padding:12px 33px 0;font-size:13px;font-weight:400;transition:padding .45s cubic-bezier(.2,.8,.2,1)}
.top .logo{display:flex;align-items:center;gap:10px;font-family:'Circular','Circular Std','CircularStd','Circular Spotify Text','Circular Pro',Inter,Helvetica,sans-serif;font-weight:900;font-size:22px;letter-spacing:-.045em;text-transform:none;margin-right:40px;cursor:pointer;white-space:nowrap;margin-top:26px;position:relative;isolation:isolate;padding:6px 10px 6px 6px;border-radius:999px}
.top .logo::before{content:'';position:absolute;inset:-10px -22px;border-radius:999px;background:rgba(14,12,52,.6);filter:blur(22px);z-index:-1}
.top .logo canvas{width:36px;height:36px;display:block;filter:drop-shadow(0 0 5px rgba(79,227,240,.45)) drop-shadow(0 0 10px rgba(255,90,214,.3))}
@keyframes pulse{0%,100%{box-shadow:0 0 5px #fff,0 0 12px #4FE3F0,0 0 20px #8A4CFF}50%{box-shadow:0 0 8px #fff,0 0 20px #4FE3F0,0 0 38px #8A4CFF}}
.top .right a.shine{background:linear-gradient(100deg,#FFB0EA 0%,#fff 25%,#FF5AD6 50%,#fff 75%,#FFB0EA 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:600;animation:sheen 3s linear infinite}
@keyframes sheen{to{background-position:-250% 0}}
.top .search{display:none!important;align-items:center;gap:6px;width:170px;transition:opacity .3s}
.top .search.off{opacity:0;pointer-events:none}
.top .search svg{width:11px;height:11px;stroke:#fff;fill:none;stroke-width:2}
.top .search input{flex:1;background:none;border:0;border-bottom:1px solid #fff;color:#fff;font:inherit;padding:2px 0;outline:none}
.top .search input::placeholder{color:#777}
.top .groups{margin-left:18px;color:#fff;cursor:pointer;user-select:none}
.top .groups span{color:#4FE3F0}
.top .filters{display:none}
.filterdock{width:100%;margin-top:14px}
.home .filterdock{display:block}
.filterdock .filters{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.filterdock .filters label,.filterdock .filters .groups{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:500;letter-spacing:.04em;color:#c9c6e4;background:rgba(4,8,30,.7);border:1px solid rgba(255,255,255,.1);padding:7px 12px;border-radius:999px;margin:0;cursor:pointer}
.filterdock .filters label.hidden{display:none}
.filterdock .filters select{background:none;border:0;color:#fff;font:inherit;font-size:11px;font-weight:600;padding:0;outline:none;cursor:pointer;-webkit-appearance:none;appearance:none}
.filterdock .filters option{background:#0a0c10}
.filterdock .filters label.chk input{appearance:none;-webkit-appearance:none;width:11px;height:11px;border:1px solid #777;border-radius:3px;background:none;cursor:pointer;margin:0}
.filterdock .filters label.chk input:checked{background:#FF5AD6;border-color:#FF5AD6}
.filterdock .filters .groups span{color:#4FE3F0}
.filterdock .filters label{position:relative}
.filterdock .filters select{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.filterdock .filters label .val{color:#fff;font-weight:600}
.filterdock .filters label .car{width:8px;height:8px;border-top:1.5px solid #9ea3ad;border-right:1.5px solid #9ea3ad;transform:rotate(-45deg) translate(1px,1px);margin-left:2px;transition:transform .2s}
.filterdock .filters label.open .car{transform:rotate(135deg) translate(-1px,-1px)}
.filterdock .filters label.open{border-color:rgba(255,90,214,.6);background:rgba(255,90,214,.1)}
.pop{position:fixed;z-index:60;display:flex;flex-direction:column;gap:6px;padding:10px;background:rgba(8,10,34,.82);backdrop-filter:blur(20px) saturate(1.2);-webkit-backdrop-filter:blur(20px) saturate(1.2);border:1px solid rgba(255,255,255,.14);border-radius:16px;box-shadow:0 24px 60px rgba(2,3,20,.7);min-width:150px;transform-origin:bottom left;animation:popin .22s cubic-bezier(.2,.8,.2,1)}
.pop.down{transform-origin:top left}
@keyframes popin{from{opacity:0;transform:translateY(6px) scale(.96)}to{opacity:1;transform:none}}
.pop h5{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:#9ea3ad;font-weight:600;margin:2px 4px 4px}
.pop .row{display:flex;flex-wrap:wrap;gap:6px}
.pop button{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#e8e6f4;font:inherit;font-size:11px;font-weight:500;padding:7px 12px;border-radius:999px;cursor:pointer;white-space:nowrap}
.pop button:hover{border-color:rgba(255,255,255,.5)}
.pop button.on{background:#FF5AD6;border-color:#FF5AD6;color:#1a0a16;font-weight:700}
.pop .seg{display:flex;background:rgba(255,255,255,.06);border-radius:999px;padding:3px;gap:2px}
.pop .seg button{border:0;background:none;padding:6px 14px}
.pop .seg button.on{background:#FF5AD6}
.railcats .filterdock{margin-top:8px;display:none}
.railcats .filterdock.on{display:block}
.railcats .filtersbtn{width:68px;margin-top:8px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);color:#fff;font:inherit;font-size:9px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:9px 4px;border-radius:12px;cursor:pointer}
.railcats .filtersbtn.on{border-color:#FF5AD6;background:rgba(255,90,214,.14)}
@media(max-height:1040px){.railcats .filtersbtn{width:58px;font-size:8px;padding:7px 2px}}
.railcats .filters{flex-direction:column;gap:6px;align-items:stretch}
.railcats .filters label,.railcats .filters .groups{justify-content:space-between;padding:6px 9px;font-size:10px}
.top .filters label{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:300;color:#999}
.top .filters select{background:none;border:0;border-bottom:1px solid #444;color:#fff;font:inherit;font-size:12px;padding:2px 0;outline:none;cursor:pointer;-webkit-appearance:none;appearance:none}
.top .filters select:hover,.top .filters select:focus{border-color:#fff}
.top .filters option{background:#0a0c10}
.top .filters label.chk{cursor:pointer;color:#ccc}
.top .filters label.chk input{appearance:none;-webkit-appearance:none;width:11px;height:11px;border:1px solid #666;background:none;cursor:pointer;margin:0}
.top .filters label.chk input:checked{background:#FF5AD6;border-color:#FF5AD6}
.top .listbtn{display:none;margin-left:auto;background:none;border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:5px 9px;cursor:pointer}
.top .listbtn svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round}
.top .listbtn.on{background:rgba(79,227,240,.18);border-color:#4FE3F0}
.top .burger{display:none;margin-left:auto;background:none;border:0;padding:6px;cursor:pointer;flex-direction:column;gap:4px}
.top .burger span{display:block;width:16px;height:1.5px;background:#fff;transition:transform .25s,opacity .25s}
.top .burger.on span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.top .burger.on span:nth-child(2){opacity:0}
.top .burger.on span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
.top .burger .n{position:absolute;top:2px;right:0;font-size:9px;color:#8ab4ff;font-weight:600}
.top .right{margin-left:auto;display:flex;gap:16px;align-items:center;margin-top:26px}
.top .menubtn{background:none;border:0;padding:8px;cursor:pointer;display:flex;flex-direction:column;gap:4px}
.top .menubtn span{display:block;width:20px;height:2px;background:#fff;border-radius:2px;transition:transform .25s,opacity .25s}
.top .menubtn.on span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.top .menubtn.on span:nth-child(2){opacity:0}
.top .menubtn.on span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.top .menu{position:absolute;right:28px;top:50px;width:300px;background:rgba(6,8,12,.96);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(10px);padding:8px 0;display:none;flex-direction:column;z-index:40}
.top .menu.on{display:flex}
.top .menu a{display:block;padding:10px 18px;color:#fff;font-size:14px;font-weight:500;cursor:pointer;text-decoration:none}
.top .menu a:hover{background:rgba(255,255,255,.05)}
.top .menu a small{display:block;font-size:11px;font-weight:300;color:#8a8f97;margin-top:1px;letter-spacing:.01em}
.top .menu .look{display:flex;align-items:center;gap:6px;padding:12px 18px 8px;border-top:1px solid rgba(255,255,255,.08);margin-top:6px;font-size:11px;color:#8a8f97;letter-spacing:.1em;text-transform:uppercase}
.top .menu .look button{background:none;border:1px solid #333;color:#aaa;font:inherit;font-size:11px;padding:4px 8px;cursor:pointer;text-transform:none;letter-spacing:0}
.top .menu .look button.on,.top .menu .look button:hover{border-color:#fff;color:#fff}
.top .right a{color:#fff;text-decoration:none;cursor:pointer}
.top .right a:hover{color:#4FE3F0}

.brand{left:14px;bottom:18px;font-weight:300;font-size:22px;letter-spacing:-.3px;line-height:1}
.brand small{display:block;font-size:10px;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:#777;margin-top:6px}

.cursorbtns{position:fixed;left:0;top:0;width:0;height:0;z-index:36;pointer-events:none;opacity:0;transition:opacity .35s}
.cursorbtns.on{opacity:1}
.cursorbtns button{pointer-events:auto;position:absolute;left:0;top:0;will-change:transform;width:42px;height:42px;border-radius:50%;background:radial-gradient(circle at 50% 42%,#ff5aa0 0%,#ef1f5a 40%,#c40f3a 100%);border:1px solid rgba(255,100,150,.45);color:#fff;font:inherit;font-size:24px;font-weight:500;line-height:1;cursor:pointer;text-shadow:0 1px 3px rgba(80,0,0,.5);box-shadow:0 10px 24px rgba(40,0,20,.5),0 0 16px rgba(230,30,90,.45);transition:scale .25s cubic-bezier(.2,.8,.2,1),width .3s,height .3s,box-shadow .2s;isolation:isolate}
/* bigger invisible hit area so the buttons are easy to click */
.cursorbtns button::after{content:'';position:absolute;inset:-4px -12px;border-radius:24px}
.cursorbtns.near button{scale:1.14}
.cursorbtns button::before{content:'';position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 50% 44%,rgba(210,150,255,.6),rgba(180,90,230,.3) 40%,transparent 66%);mix-blend-mode:screen;z-index:-1;animation:cbcore 2.8s ease-in-out infinite}
@keyframes cbcore{0%,100%{opacity:.75;transform:scale(.9)}50%{opacity:1;transform:scale(1.05)}}
.cursorbtns button span,.cursorbtns button svg{position:relative;z-index:1}
.cursorbtns button:hover{scale:1.2;box-shadow:0 10px 26px rgba(40,0,20,.55),0 0 24px rgba(255,70,140,.6)}
.cursorbtns button.world{background:#fff;border-color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 24px rgba(60,0,20,.45),0 0 18px rgba(255,255,255,.25)}
.cursorbtns button.world::before{display:none}
.cursorbtns button.world svg{width:30px;height:30px;stroke:#E01050;fill:none;stroke-width:1.35;stroke-linecap:round}
.cursorbtns button.world:hover{background:#FFE9EE}
.cursorbtns.docked{gap:10px}
.cursorbtns.docked button{width:46px;height:46px}
.zoom{right:33px;bottom:22px;display:none;transition:right .45s cubic-bezier(.2,.8,.2,1);flex-direction:column;align-items:flex-end;gap:10px}
.zoom .levels{display:flex;flex-direction:column;background:rgba(8,10,34,.55);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:4px;box-shadow:0 20px 50px rgba(2,3,20,.6)}
.zoom .levels button{background:none;border:0;color:#9ea3ad;font:inherit;font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:8px 14px;border-radius:10px;cursor:pointer;text-align:right;position:relative}
.zoom .levels button::before{content:'';position:absolute;left:8px;top:50%;width:5px;height:5px;border-radius:50%;background:#555;transform:translateY(-50%)}
.zoom .levels button.on{color:#fff;background:rgba(255,90,214,.16)}
.zoom .levels button.on::before{background:#FF5AD6;box-shadow:0 0 8px #FF5AD6}
.zoom .levels button:hover{color:#fff}
.zoom .pm{display:flex;gap:4px}
.zoom .pm button{width:28px;height:28px;border-radius:50%;background:rgba(8,10,34,.6);border:1px solid rgba(255,255,255,.2);color:#fff;font-size:16px;line-height:1;cursor:pointer;font-family:inherit}
.zoom .pm button:hover{border-color:#fff}

.hudline{left:33px;bottom:20px;font-size:10px;letter-spacing:.06em;color:#6d7a8c;font-weight:400;max-width:60vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
@media(max-width:768px){.hudline{display:none}}
.mode{left:50%;bottom:22px;transform:translateX(-50%);display:flex;gap:6px}
.mode span{width:18px;height:2px;background:#333;transition:background .4s}
.mode span.on{background:#4FE3F0}


@media(min-width:1700px){.home{left:2vw!important}.home .pair,.home .cats,.home .filterdock,.home .sub,.home .status{align-self:flex-start}}
@media(min-width:1700px){.home{width:min(32vw,620px)}}
.home{left:48px;right:auto;top:auto;bottom:10vh;width:min(44vw,640px);display:flex;flex-direction:column;align-items:flex-start;padding:26px 28px 24px;margin-left:-28px;background:rgba(4,8,30,.3);box-shadow:0 30px 80px rgba(2,4,18,.45);backdrop-filter:blur(2px);border-radius:2px;isolation:isolate;transition:opacity .4s,top .6s cubic-bezier(.2,.8,.2,1),bottom .6s cubic-bezier(.2,.8,.2,1)}
.home.up{top:9vh;bottom:auto}
.home.off{opacity:0;pointer-events:none}
.home::before{content:'';position:absolute;inset:-14px -22px;border-radius:24px;background:rgba(8,10,34,.5);backdrop-filter:blur(26px) saturate(1.3);-webkit-backdrop-filter:blur(26px) saturate(1.3);box-shadow:0 40px 110px rgba(2,3,20,.75),0 0 0 1px rgba(255,255,255,.07),0 1px 0 rgba(255,255,255,.12) inset;opacity:1;transition:opacity .6s,background .6s;z-index:-1;pointer-events:none}
.home.plate::before{opacity:1;background:rgba(8,10,34,.6)}
.home.plate{background:transparent;backdrop-filter:none;box-shadow:none;border-radius:20px}
.home.off *{pointer-events:none}
.home .pair{display:flex;flex-direction:column;gap:10px;width:100%}
.home .big{position:relative;flex:1;min-width:0;display:flex;align-items:center;gap:14px;padding:0 4px 10px}
.home .big svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:1.6;flex:none}
.home .big.what svg{stroke:#FF8FD0}
.home .big input{flex:1;background:none;border:0;color:#fff;font:inherit;font-weight:300;font-size:clamp(20px,2.4vw,32px);letter-spacing:-.01em;outline:none;padding:6px 0}
.home .big input::placeholder{color:#5b5f66}
.home .big .line{position:absolute;left:0;right:0;bottom:0;height:1px;background:#3a3d44}
.home .big input:focus~.line{background:#fff}
.home .cats{display:grid;grid-template-columns:repeat(5,74px);gap:16px;margin-top:18px;min-height:168px}
.railcats .cats{min-height:0}
.home .cat{background:none;border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:8px 4px 8px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:5px;transition:border-color .2s,background .2s}
.home .cat{height:76px;justify-content:center}
.home .cat img{width:40px;height:40px;object-fit:contain;display:block}
.home .cat span{font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:#9ea3ad;line-height:1}
.home .cat:hover{border-color:rgba(255,255,255,.4)}
.home .cat.on{border-color:#ff5ad6;background:rgba(255,90,214,.12)}
.home .cat.on span{color:#fff}
.home .status{margin-top:10px;font-size:11px;font-weight:300;color:#4FE3F0;letter-spacing:.04em;min-height:14px}
.home .status i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#4FE3F0;margin-right:6px;animation:pulse 1s ease-in-out infinite}
.home .sub{margin-top:14px;font-size:13px;font-weight:300;color:#6d7178;letter-spacing:.02em}
.home .sub em{font-style:normal;color:#aeb3bb;cursor:pointer;border-bottom:1px dotted #555}
.home .sub em:hover{color:#fff}
.hint{left:50%;top:44px;transform:translateX(-50%);font-size:11px;font-weight:300;color:#777;letter-spacing:.06em;transition:opacity .6s}
.hint.off{opacity:0}

.modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:flex-end;justify-content:center;z-index:50;opacity:0;pointer-events:none;transition:opacity .3s}
.modal.on{opacity:1;pointer-events:auto}
.modal .box{position:relative;width:calc(100% - 36px);margin:0 18px 18px;max-height:86vh;overflow-y:auto;background:rgba(10,12,24,.8);border:1px solid rgba(255,255,255,.12);border-radius:26px;backdrop-filter:blur(26px) saturate(1.3);-webkit-backdrop-filter:blur(26px) saturate(1.3);box-shadow:0 30px 90px rgba(0,0,0,.55);padding:36px 40px 40px;transform:translateY(calc(100% + 40px));transition:transform .42s cubic-bezier(.2,.8,.2,1)}
.modal.on .box{transform:none}
.modal .box>*{max-width:720px;margin-left:auto;margin-right:auto}
.modal .box h3{font-size:22px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px}
.modal .box p{font-size:14px;font-weight:300;color:#aaa;margin-bottom:14px;line-height:1.5}
.modal .box input,.modal .box textarea{width:100%;background:none;border:0;border-bottom:1px solid #444;color:#fff;font:inherit;font-size:16px;padding:8px 0;margin-bottom:12px;outline:none;resize:none}
.modal .box input:focus,.modal .box textarea:focus{border-color:#fff}
.modal .box button.go{width:100%;background:#fff;color:#000;border:0;border-radius:999px;font:inherit;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:11px;cursor:pointer;margin-top:4px}
.modal .box .x{position:absolute;right:24px;top:18px;background:none;border:0;color:#666;font-size:26px;cursor:pointer;max-width:none;margin:0}
.modal .box .amt{flex:1;background:none;border:1px solid #444;border-radius:999px;color:#fff;font:inherit;font-size:12px;padding:8px 0;cursor:pointer}
.modal .box .amt.on{border-color:#FF5AD6;color:#FF5AD6}
.modal .box .err{font-size:11px;color:#ff6b6b;margin:-6px 0 10px;display:none}


.railcats{left:30px;top:50%;transform:translateY(-50%);display:none;flex-direction:column;gap:8px;z-index:11;padding:14px 10px;max-height:calc(100vh - 90px);border-radius:20px;background:rgba(8,10,34,.42);backdrop-filter:blur(18px) saturate(1.1);-webkit-backdrop-filter:blur(18px) saturate(1.1);box-shadow:0 30px 90px rgba(2,3,20,.7),0 0 0 1px rgba(255,255,255,.06)}
.railcats.on{display:flex}
.railcats .cats{display:flex;flex-direction:column;flex-wrap:wrap;gap:8px;margin:0;align-content:flex-start}
.railcats .cats.two{column-gap:8px}
.railcats .cat{width:68px;height:76px;padding:6px 2px 7px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:none;border-radius:12px;border:1px solid rgba(255,255,255,.14)}
.railcats .cat img{width:44px;height:44px;object-fit:contain;display:block}
.railcats .cat span{display:block;font-size:8px;letter-spacing:.08em;text-transform:uppercase;color:#9ea3ad;line-height:1}
.railcats .cats{gap:10px}
@media(max-height:1040px){.railcats .world{width:58px;padding:6px 2px;font-size:8px}.railcats .world svg{width:16px;height:16px}.railcats{padding:10px 8px;top:calc(50% + 14px)}.railcats .cat{width:58px;height:62px;padding:4px 2px 5px;gap:3px}.railcats .cat img{width:34px;height:34px}.railcats .cat span{font-size:7px}.railcats .cats{gap:6px}.railcats .deep{width:58px;padding:7px 2px;font-size:8px}}
.cat{will-change:transform;transition:border-color .2s,background .2s}
.cat.on{border-color:#FF5AD6!important;background:rgba(255,90,214,.12)!important;box-shadow:0 0 0 1px rgba(255,90,214,.45)!important}
.cat.on span{color:#fff}
.cat.flip{transition:transform .65s cubic-bezier(.2,.8,.2,1),border-color .2s,background .2s}
.railcats .world{width:68px;margin-bottom:6px;background:rgba(170,30,120,.55);border:1px solid rgba(255,120,210,.45);color:#fff;font:inherit;font-size:9px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:8px 4px;border-radius:14px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px}
.railcats .world svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:1.6}
.railcats .world.srch{background:rgba(170,30,120,.55);border-color:rgba(255,120,210,.45)}
.railcats .world.srch svg{stroke:#fff}
.railcats .world:hover{background:rgba(255,255,255,.2)}
.railcats .deep{width:68px;margin-top:6px;background:rgba(255,179,71,.14);border:1px solid rgba(255,179,71,.5);color:#FFB347;font:inherit;font-size:9px;letter-spacing:.1em;text-transform:uppercase;padding:9px 4px;border-radius:14px;cursor:pointer}
.railcats .deep.on{background:rgba(255,179,71,.3);color:#fff}
@media(max-width:768px){.railcats{left:8px;top:auto;bottom:70px;transform:none}.railcats .cats{flex-direction:row;flex-wrap:wrap;width:min(70vw,300px)}.railcats .cat{width:46px;padding:3px 1px}.railcats .cat img{width:30px;height:30px}.railcats .cat span{display:none}.railcats .deep{width:46px;padding:7px 2px;font-size:8px}}
.cityhd{left:50%;top:52px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#FFB0EA;opacity:0;transition:opacity .4s;white-space:nowrap;padding:12px 26px 14px;border-radius:28px;isolation:isolate;text-align:center}
.cityhd .row1{display:flex;align-items:center;gap:8px}
.cityhd .row3{display:flex;align-items:center;gap:8px;margin-top:6px}
.cityhd .caret{background:none;border:0;padding:4px;cursor:pointer}
.cityhd .caret svg{width:14px;height:14px;stroke:#FFB0EA;fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.cityhd .citymenu{display:none;flex-direction:column;gap:2px;margin-top:8px;padding:8px;background:rgba(8,10,34,.82);border:1px solid rgba(255,255,255,.14);border-radius:14px;backdrop-filter:blur(20px);min-width:200px}
.cityhd .citymenu.on{display:flex}
.cityhd .citymenu button{background:none;border:0;color:#fff;font:inherit;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:none;padding:7px 12px;border-radius:8px;cursor:pointer;text-align:left;display:flex;justify-content:space-between;gap:16px}
.cityhd .citymenu button small{color:#9ea3ad;font-weight:400}
.cityhd .citymenu button:hover{background:rgba(255,255,255,.08)}
.cityhd::before{content:'';position:absolute;inset:-26px -60px;border-radius:999px;background:rgba(14,12,52,.62);filter:blur(44px);z-index:-1}
.cityhd.on{opacity:1}
.cityhd b{font-weight:800;font-size:17px;color:#FF5AD6;letter-spacing:.16em}
.cityhd span{color:#c9c6e4;font-weight:500;letter-spacing:.06em;text-transform:none}
.cityhd button{background:none;border:1px solid rgba(255,255,255,.3);color:#ddd;font:inherit;font-size:10px;font-weight:600;padding:5px 10px;border-radius:999px;cursor:pointer;letter-spacing:.1em}
.cityhd button.listbig{background:rgba(138,76,255,.22);border:1px solid rgba(255,90,214,.7);color:#fff;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:none;padding:7px 14px;border-radius:999px;margin:0}
.cityhd button.listbig:hover{background:rgba(255,90,214,.22)}
.cityhd button.listbig.on{background:#FF5AD6;color:#fff}
.cityhd button.leave{display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.35);color:#fff;padding:7px 12px 7px 8px;font-size:11px;margin:0;text-transform:none;letter-spacing:.06em}
.cityhd button.leave svg{width:14px;height:14px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cityhd button:hover{border-color:#fff;color:#fff}
.list{left:33px;top:116px;bottom:70px;width:380px;height:auto;background:linear-gradient(170deg,rgba(255,90,214,.42),rgba(190,60,170,.38) 50%,rgba(120,40,140,.52));border:1px solid rgba(255,255,255,.25);border-radius:24px;backdrop-filter:blur(30px) saturate(1.4);-webkit-backdrop-filter:blur(30px) saturate(1.4);box-shadow:0 40px 110px rgba(40,0,40,.6),0 1px 0 rgba(255,255,255,.25) inset;display:none;flex-direction:column;overflow:hidden;transform:translateX(-40px);opacity:0;transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .4s}
body.listopen .railcats{transform:translate(400px,-50%)}
body.listopen .home{transform:translateX(400px)}
body.listopen .home.up{transform:translateX(400px)}
.railcats{transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .3s}
.home{transition:opacity .4s,top .6s cubic-bezier(.2,.8,.2,1),bottom .6s cubic-bezier(.2,.8,.2,1),transform .5s cubic-bezier(.2,.8,.2,1)!important}
.list.on{display:flex}
.list.show{transform:none;opacity:1}
.list.on{display:flex}
.list .lh{padding:20px 22px 12px;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#fff;display:flex;justify-content:space-between;align-items:center}
.list .lh button{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.4);border-radius:50%;width:36px;height:36px;color:#fff;font-size:20px;cursor:pointer}
.list .lb{overflow-y:auto;scrollbar-width:thin;flex:1;padding:0 14px 20px;display:flex;flex-direction:column;gap:2px}
.list .row{display:flex;align-items:center;gap:12px;padding:10px 8px;border-bottom:1px solid rgba(255,255,255,.18);cursor:pointer;border-radius:10px}
.list .row:hover{background:rgba(255,255,255,.12)}
.list .row i{width:28px;height:28px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.14);overflow:hidden}
.list .row i img{width:100%;height:100%;object-fit:cover}
.list .row i:has(img[data-guide]){border:0;width:34px;height:34px;border-radius:0;overflow:visible}
.list .row .t{flex:1;min-width:0}
.list .row .t b{display:block;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list .row .t small{font-size:11px;color:rgba(255,255,255,.75);font-weight:400}
.list .row .o{font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;flex:none}
.plan-items{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;max-height:40vh;overflow-y:auto}
.plan-items .pi{display:flex;align-items:center;gap:12px;font-size:14px;padding:6px 0;border-bottom:1px dotted #333}
.plan-items .pi .n{width:18px;height:18px;border:1px solid #FF5AD6;color:#FF5AD6;font-size:10px;display:flex;align-items:center;justify-content:center;flex:none}
.plan-items .pi .t{flex:1;min-width:0}
.plan-items .pi .t b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plan-items .pi .t small{color:#8a8f97;font-weight:300;font-size:10px}
.plan-items .pi button{background:none;border:0;color:#555;cursor:pointer;font-size:14px}
.modal .box .row2{display:flex;gap:6px}
.modal .box .row2 button{flex:1}
.modal .box button.alt{width:100%;background:none;border:1px solid #444;border-radius:999px;color:#fff;font:inherit;font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:10px;cursor:pointer;margin-top:6px}
.modal .box button.alt:hover{border-color:#fff}

.explorehd{left:50%;top:60px;transform:translateX(-50%);display:flex;align-items:center;gap:14px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#4FE3F0;opacity:0;transition:opacity .4s;white-space:nowrap;padding:9px 18px;border-radius:999px;isolation:isolate}
.explorehd::before{content:'';position:absolute;inset:-26px -60px;border-radius:999px;background:rgba(14,12,52,.62);filter:blur(44px);z-index:-1}
.explorehd.on{opacity:1}
.explorehd b{font-weight:700;font-size:14px;color:#fff}
.explorehd span{color:#8a8f97;letter-spacing:.04em;text-transform:none}
.explorehd button{background:none;border:1px solid #444;color:#aaa;font:inherit;font-size:11px;padding:2px 7px;cursor:pointer}
.ptip{position:fixed;z-index:34;pointer-events:none;opacity:0;transition:opacity .25s;transform:translate(-50%,calc(-100% - 14px));background:#FFB347;border-radius:4px;padding:7px 11px 6px;box-shadow:0 10px 24px rgba(60,20,0,.35);white-space:nowrap}
.ptip::after{content:'';position:absolute;left:50%;bottom:-6px;width:12px;height:12px;background:#FFB347;transform:translateX(-50%) rotate(45deg);border-radius:2px}
.ptip.on{opacity:1}
.ptip b{display:block;font-size:13px;font-weight:700;color:#fff;letter-spacing:-.01em;line-height:1.1}
.ptip small{display:block;font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#2a1600;margin-top:3px}
.ctip{position:fixed;z-index:35;pointer-events:none;opacity:0;transition:opacity .15s;transform:translate(14px,-50%);background:rgba(6,8,12,.92);border:1px solid rgba(255,255,255,.12);padding:8px 12px;white-space:nowrap}
.ctip.on{opacity:1}
/* touch long press: above the finger, centred, never under it */
.ctip.touch{transform:translate(-50%,calc(-100% - 46px));border-radius:4px}
.ctip b{display:block;font-size:15px;font-weight:600;letter-spacing:-.01em}
.ctip small{display:block;font-size:11px;color:#8a8f97;font-weight:300;margin-top:1px}
.hold{position:fixed;z-index:35;width:44px;height:44px;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);opacity:0;background:conic-gradient(#fff var(--p,0%),rgba(255,255,255,.12) 0);-webkit-mask:radial-gradient(circle,transparent 58%,#000 60%);mask:radial-gradient(circle,transparent 58%,#000 60%)}
.hold.on{opacity:1}
@media(max-width:768px){
 .explorehd{top:auto;bottom:60px;font-size:10px}.explorehd span{display:none}
 .list{left:0;right:0;top:auto;bottom:0;width:auto;height:52vh;border-left:0;border-right:0;border-radius:22px 22px 0 0;background:rgba(10,12,24,.82);backdrop-filter:blur(20px)}
 .list .row{padding:10px 14px}
 .list .row .t b{font-size:14px}
 .cityhd{top:auto;bottom:34px;font-size:10px}

 .top{height:auto;flex-wrap:wrap;padding:10px 16px;gap:8px 0;background:linear-gradient(#000,transparent);align-items:center}
 .top .logo{margin-top:0;font-size:19px;margin-right:12px}
 .top .logo canvas{width:30px;height:30px}
 .top .search{width:110px}
 .top .listbtn{display:inline-flex;align-items:center}
 .top .burger{display:none}
 .top .right{margin-left:8px}
 .top .menu{right:0;left:0;width:auto;top:40px}
 .top .filters{display:none;order:3;width:100%;margin:0;flex-direction:column;gap:12px;padding:10px 0 6px;border-top:1px solid #1e2128}
 .top .filters.on{display:flex}
 .top .filters label{justify-content:space-between;font-size:12px}
 .top .filters select{font-size:13px;min-width:120px;text-align:right}
 .top .right{gap:12px}
  .top .logo{margin-right:10px}
 .home{left:14px;right:14px;width:auto;bottom:10vh;margin-left:0;padding:18px 16px 16px}
 .home .cats{grid-template-columns:repeat(5,1fr);gap:8px;min-height:0}
 .home .cat{height:64px;padding:5px 2px 6px}
 .home .cat img{width:30px;height:30px}
 .home.up{top:14vh;bottom:auto}
 .home .pair{flex-direction:column;gap:14px;width:86vw}
 .home.dim{opacity:.15;pointer-events:none}
 .panel.on{transform:none}
 .brand{bottom:14px;font-size:18px}
 .hint{display:none}
}
@media(prefers-reduced-motion:reduce){.panel,.hint{transition:none}}

.gp{display:flex;gap:24px;align-items:flex-start;margin-bottom:16px}
.gp img{width:130px;height:130px;border-radius:0;object-fit:contain;flex:none}
.gp .t b{font-size:22px;font-weight:600;display:block}
.gp .t small{font-size:13px;color:#8a8f97;display:block;margin-top:2px}
.gp .t p{margin-top:8px;font-size:14px;color:#ddd}
.gl{display:flex;flex-direction:column;gap:4px}
.gl a{display:flex;justify-content:space-between;font-size:14px;padding:7px 0;border-bottom:1px dotted #333;cursor:pointer;color:#fff}
.gl a span{color:#8a8f97;font-size:11px}
.gl a:hover{color:#EFA8A8}
.guides-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.guides-grid a{display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;text-align:center}
.guides-grid img{width:104px;height:104px;border-radius:0;object-fit:contain}
.guides-grid b{font-size:13px;font-weight:600}
.guides-grid small{font-size:11px;color:#8a8f97}
@media(max-width:1000px){.panel .inner{grid-template-columns:1fr 1fr}.panel .col.c{grid-column:1/-1}}

.panel{position:fixed;left:15vw;right:15vw;bottom:18px;top:auto;z-index:30;background:linear-gradient(160deg,rgba(60,52,110,.42),rgba(22,20,52,.5) 45%,rgba(14,12,34,.6));border:1px solid rgba(255,255,255,.14);border-radius:28px;backdrop-filter:blur(30px) saturate(1.4);-webkit-backdrop-filter:blur(30px) saturate(1.4);box-shadow:0 40px 110px rgba(4,2,20,.6),0 0 0 1px rgba(120,100,255,.08),0 1px 0 rgba(255,255,255,.16) inset,0 -40px 80px rgba(138,76,255,.06) inset;transform:translateY(calc(100% + 150px));transition:transform .55s cubic-bezier(.2,.8,.2,1);max-height:46vh;overflow:visible;font-family:'Inter',Helvetica,sans-serif;text-align:left;color:#fff}
.panel.on{transform:none}
.panel.big{max-height:92vh}
.panel:not(.on),.panel:not(.on) *{pointer-events:none!important}
.panel .close{position:absolute;right:-14px;top:-18px;z-index:5;width:52px;height:52px;border-radius:50%;background:rgba(20,16,50,.92);border:1px solid rgba(255,255,255,.3);color:#fff;font-size:26px;line-height:1;cursor:pointer;font-family:inherit;box-shadow:0 12px 30px rgba(0,0,0,.5),0 0 0 4px rgba(10,8,30,.5)}
.panel .close:hover{background:#FF5AD6;color:#1a0a16;border-color:#FF5AD6}
.panel .close:hover{background:rgba(255,255,255,.2)}
.panel .stage{position:relative;width:120px;height:150px;margin:-10px 0 4px auto;pointer-events:none}
.panel .stage canvas{width:120px;height:150px;display:block;filter:drop-shadow(0 0 14px rgba(79,227,240,.35))}
.panel .stageShadow{position:absolute;left:18px;right:18px;top:100px;height:26px;border-radius:50%;background:radial-gradient(ellipse at center,rgba(6,4,20,.55),rgba(6,4,20,0) 70%);filter:blur(4px)}
.panel .inner{display:grid;grid-template-columns:minmax(300px,1.1fr) minmax(300px,1.25fr) minmax(220px,.85fr);gap:36px;margin:0 auto;padding:34px 44px 36px;position:relative}
.panel .ext{display:none;grid-column:1/-1;grid-template-columns:1.1fr 1.1fr 1fr;gap:44px;margin-top:8px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);max-height:40vh;overflow-y:auto;scrollbar-width:thin}
.panel.big .ext{display:grid}
.panel .col.a{margin-top:-96px}
.panel .carousel{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:#161430;border-radius:20px;outline:10px solid rgba(255,255,255,.4);outline-offset:0;box-shadow:0 30px 60px rgba(0,0,0,.6),0 0 40px rgba(138,76,255,.18);transform:rotate(-1.4deg) translateY(10px);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.panel.on .carousel{transform:none}
.panel .carousel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s;filter:saturate(1.15) contrast(1.06)}
.panel .carousel::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(135deg,rgba(79,227,240,.16),rgba(120,80,220,.14) 50%,rgba(255,90,214,.16));mix-blend-mode:screen}
.panel .carousel .cap,.panel .carousel .walk,.panel .carousel .dots{z-index:2}
.panel .carousel img.on{opacity:1}
.panel .carousel .cap{position:absolute;left:0;right:0;bottom:0;padding:70px 24px 22px;background:linear-gradient(to top,rgba(255,90,214,.24),rgba(255,90,214,.08) 50%,rgba(255,90,214,0));pointer-events:none}
.panel .carousel .capText{font-size:13.5px;font-weight:500;line-height:1.5;color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.6);max-width:74%;letter-spacing:.005em}
.panel .carousel .walk{position:absolute;left:22px;bottom:80px;display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;letter-spacing:.04em;color:#fff;background:#8A4CFF;padding:7px 13px 7px 10px;border-radius:999px;box-shadow:0 10px 22px rgba(60,20,120,.5),0 0 0 1px rgba(255,255,255,.18);transform:translateY(-4px)}
.panel .carousel .walk svg{width:13px;height:13px;stroke:#fff;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.panel .carousel .walk small{font-weight:400;color:rgba(255,255,255,.85);letter-spacing:.02em}
.panel .carousel .dots{position:absolute;right:18px;bottom:20px;display:flex;gap:7px;z-index:2}
.panel .carousel .dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.4)}
.panel .carousel .dots i.on{background:#fff}
.panel .credit{font-size:11px;color:rgba(255,255,255,.4);margin-top:10px;font-weight:300}
.panel .eyebrow{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#FF8FD0;margin-bottom:18px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.panel .eyebrow .tag{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:6px 13px;border-radius:999px;margin:0;box-shadow:0 6px 16px rgba(0,0,0,.25)}
.panel .tag.feat{color:#fff;background:rgba(255,90,214,.42);border:1px solid rgba(255,120,210,.45)}
.panel .tag.local{color:#031a1f;background:#4FE3F0}
.panel .tag:not(.feat):not(.local){color:#1a0f33;background:#C9A3FF;border:0!important}
.panel h2{font-size:40px;font-weight:800;letter-spacing:-.03em;line-height:1.02;margin-bottom:14px;color:#FFE49A;text-shadow:0 2px 20px rgba(255,200,100,.25)}
.panel .subhead{font-size:15px;font-weight:600;color:#FF8FD0;margin-bottom:18px;letter-spacing:.01em}
.panel .ingress{font-size:16.5px;font-weight:300;color:#cfcbe6;line-height:1.7;margin:0 0 18px}
.panel .desc.short{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.panel .guide{display:flex;align-items:center;gap:14px;margin:8px 0 20px;cursor:pointer}
.panel .guide img,.panel .guide span{width:54px;height:54px;border-radius:50%;object-fit:cover;display:flex;align-items:center;justify-content:center}
.panel .guide img[data-guide]{border-radius:0;width:60px;height:60px}
.panel .guide.sp img{border-color:#FF5AD6}
.panel .guide b{display:block;font-size:15px;font-weight:700;color:#fff}
.panel .guide small{display:block;font-size:12px;color:#4FE3F0;font-weight:400;margin-top:2px}
.panel #pvote{font-size:12px;margin-bottom:10px}
.panel .acts{display:flex;gap:8px;margin-top:6px;flex-wrap:wrap}
.panel .acts button{background:rgba(255,255,255,.85);border:1px solid rgba(255,255,255,.9);color:#0b0820;font:inherit;font-size:12px;font-weight:600;padding:11px 20px;border-radius:999px;cursor:pointer;letter-spacing:.06em;text-transform:uppercase;box-shadow:0 8px 20px rgba(0,0,0,.25)}
.panel .acts button:hover{background:#fff}
.panel .acts .morebtn{background:rgba(255,255,255,.85);color:#0b0820}
.panel .facts{display:flex;flex-direction:column;gap:2px;padding-top:0}
.panel .rows{display:flex;flex-direction:column;gap:9px;font-size:15px}
.panel .rows div{display:grid;grid-template-columns:76px 1fr;gap:12px;align-items:baseline;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.08)}
.panel .rows label{font-weight:600;font-size:10px;color:#4FE3F0;letter-spacing:.18em;text-transform:uppercase}
.panel .rows b{font-weight:600;color:#fff}
.panel .openrow{display:none}
.panel .tag.openpill{color:#fff;border:0}
.panel .tag.openpill.open{background:rgba(79,227,240,.16);color:#4FE3F0;box-shadow:inset 0 0 0 1px rgba(79,227,240,.35)} /* was green: never green */
.panel .tag.openpill.closed{background:rgba(90,60,130,.6)}
.panel #pvote{margin:8px 0 0}
.panel #pvote button{border-radius:999px!important;padding:6px 12px!important;background:rgba(79,227,240,.1)!important}
.panel .sec{margin-top:0}
.panel .sec+.sec{margin-top:18px}
.panel .sec h4{font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#4FE3F0;margin-bottom:8px}
.panel .sec p{font-size:14px;font-weight:300;color:#e0ddf0;line-height:1.6}
.panel .near{display:flex;flex-direction:column;gap:4px}
.panel .near a{font-size:14px;color:#fff;cursor:pointer;display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.panel .near a span{color:#FF8FD0;font-weight:600;font-size:10px;letter-spacing:.14em}
.panel .near a:hover{color:#FF8FD0}
.panel .deal{margin-top:14px;padding:14px 16px;border:1px solid rgba(255,90,214,.5);border-radius:16px;background:rgba(255,90,214,.08)}
.panel .deal b{color:#FF5AD6;font-size:15px;display:block}
.panel .deal span{font-size:13px;color:#eee;font-weight:300}
.panel .dia{margin-top:8px}
.panel .dia svg{width:100%;height:auto;display:block}
.panel .dia .cap{font-size:11px;color:rgba(255,255,255,.5);margin-top:4px;font-weight:300}
.panel .plan label{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:300;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.08);cursor:pointer}
.panel .plan input{appearance:none;-webkit-appearance:none;width:15px;height:15px;border-radius:4px;border:1px solid rgba(255,255,255,.4);background:none;cursor:pointer;flex:none}
.panel .plan input:checked{background:#FF5AD6;border-color:#FF5AD6}
.panel .charity{margin-top:16px;padding:14px;border:1px solid rgba(255,90,214,.35);border-radius:16px;background:rgba(255,255,255,.03)}
.panel .charity b{display:block;font-size:14px;color:#FFB0EA}
.panel .charity span{font-size:12px;color:#ddd;font-weight:300;display:block;margin:4px 0 10px}
.panel .charity button{background:#FF5AD6;color:#000;border:0;border-radius:999px;font:inherit;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:8px 14px;cursor:pointer}
@media(max-width:1500px){.panel{left:220px;right:40px}}
@media(max-width:1100px){.panel{left:120px;right:16px}.panel .inner{grid-template-columns:minmax(300px,1fr) 1.2fr}.panel .col.c{grid-column:1/-1}.panel .ext{grid-template-columns:1fr 1fr}}
@media(max-width:768px){.panel{left:8px;right:8px;bottom:8px;border-radius:22px;max-height:68vh;overflow-y:auto}.panel.big{max-height:92vh}.panel .ext{display:none;grid-template-columns:1fr;max-height:none;overflow:visible;gap:18px}.panel.big .ext{display:grid}.panel .stage{display:none}.panel .col.a{margin-top:-40px}.panel .inner{grid-template-columns:1fr;gap:12px;padding:14px 14px 18px}.panel .close{right:4px;top:-14px;width:44px;height:44px;font-size:22px}.panel .eyebrow{font-size:9px;margin-bottom:6px;letter-spacing:.16em}.panel h2{font-size:21px;margin-bottom:4px;letter-spacing:-.02em}.panel .subhead{font-size:13px;margin-bottom:8px}.panel .ingress{font-size:13.5px;line-height:1.5;margin-bottom:8px}.panel .desc.short{-webkit-line-clamp:2}.panel .guide{margin:2px 0 8px}.panel .guide img,.panel .guide span{width:36px;height:36px}.panel .acts button{font-size:10.5px;padding:8px 13px}.panel .rows{gap:5px;font-size:13px}.panel .rows div{grid-template-columns:62px 1fr;padding-bottom:5px}.panel .rows label{font-size:9px}.panel .openrow{font-size:11.5px;margin:6px 0 2px}.panel .deal{padding:10px 12px;margin-top:8px}.panel .deal b{font-size:13px}.panel .deal span{font-size:12px}.panel .carousel .capText{max-width:100%;font-size:12px}.panel .carousel .walk{font-size:10px;bottom:50px}.panel .carousel .cap{padding:34px 14px 12px}.panel .credit{display:none}}

/* Street-view place labels on the destination tubes */
#tlabs{position:fixed;inset:0;z-index:20;pointer-events:none}
.tlab{position:absolute;left:0;top:0;transition:opacity .25s,transform .3s;display:flex;align-items:center;gap:6px;padding:5px 11px 5px 8px;border-radius:999px;background:rgba(8,10,34,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.16);color:#fff;font:600 11px/1 Inter,Helvetica,Arial,sans-serif;letter-spacing:.01em;white-space:nowrap;cursor:pointer;opacity:0;pointer-events:none;will-change:transform}
.tlab.on{opacity:1;pointer-events:auto}
.tlab i{width:7px;height:7px;border-radius:50%;background:#FF5AD6;box-shadow:0 0 8px #FF5AD6;flex:none}
.tlab.sel{border-color:#FFB347;background:rgba(255,179,71,.22)}
.tlab.sel i{background:#FFB347;box-shadow:0 0 8px #FFB347}
.tlab:hover{border-color:#fff}
#tlines{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
#tlines line{stroke:rgba(255,255,255,.38);stroke-width:1}
.tlab.hov{border-color:#FF5AD6;background:rgba(255,90,214,.22)}

/* ===== Issue 4: the info sheet and the search box scale with the window =====
   --pk (set in JS from the window size) is one scale for the whole sheet: about 30% below the old sizes on big screens and smaller on
   small ones, never under readable minimums (body 14px, labels 11px). The sheet stays under ~40% of the window height. */
:root{--pk:.75}
.panel{max-height:40vh;border-radius:calc(var(--pk)*28px)}
.panel .inner{grid-template-columns:minmax(calc(var(--pk)*280px),1fr) minmax(calc(var(--pk)*320px),1.3fr) minmax(calc(var(--pk)*230px),.85fr);gap:calc(var(--pk)*36px);padding:calc(var(--pk)*30px) calc(var(--pk)*40px) calc(var(--pk)*30px)}
.panel .col.a{margin-top:0} /* the image sits inside the sheet, never over its top edge */
.panel .carousel{aspect-ratio:auto;height:calc(var(--pk)*250px);outline-width:max(4px,calc(var(--pk)*8px));border-radius:calc(var(--pk)*20px)}
.panel .carousel .cap{padding:calc(var(--pk)*56px) calc(var(--pk)*22px) calc(var(--pk)*18px)}
.panel .carousel .capText{font-size:max(12px,calc(var(--pk)*13.5px));-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
.panel .carousel .walk{bottom:calc(var(--pk)*66px);left:calc(var(--pk)*20px);padding:calc(var(--pk)*6px) calc(var(--pk)*12px)}
.panel .credit{margin-top:6px}
.panel .eyebrow{margin-bottom:calc(var(--pk)*14px)}
.panel h2{font-size:clamp(22px,calc(var(--pk)*40px),40px);margin-bottom:calc(var(--pk)*10px)}
.panel .subhead{font-size:max(13px,calc(var(--pk)*15px));margin-bottom:calc(var(--pk)*14px)}
.panel .ingress{font-size:max(14px,calc(var(--pk)*16.5px));line-height:1.6;margin-bottom:calc(var(--pk)*14px)}
.panel .guide{gap:calc(var(--pk)*14px);margin:calc(var(--pk)*6px) 0 calc(var(--pk)*14px)}
.panel .guide img,.panel .guide span{width:max(34px,calc(var(--pk)*54px));height:max(34px,calc(var(--pk)*54px))}
.panel .guide img[data-guide]{width:max(38px,calc(var(--pk)*60px));height:max(38px,calc(var(--pk)*60px))}
.panel .guide b{font-size:max(13px,calc(var(--pk)*15px))}
.panel .acts button{font-size:max(11px,calc(var(--pk)*12px));padding:calc(var(--pk)*11px) calc(var(--pk)*20px)}
.panel .rows{font-size:max(13px,calc(var(--pk)*15px));gap:calc(var(--pk)*9px)}
.panel .rows div{grid-template-columns:calc(var(--pk)*76px + 14px) 1fr;padding-bottom:calc(var(--pk)*8px)}
.panel .stage,.panel .stage canvas{width:calc(var(--pk)*120px);height:calc(var(--pk)*150px)}
.panel .stage{margin:calc(var(--pk)*-8px) 0 2px auto}
.panel .stageShadow{top:calc(var(--pk)*100px);height:calc(var(--pk)*26px)}
.panel .close{width:max(40px,calc(var(--pk)*52px));height:max(40px,calc(var(--pk)*52px));font-size:max(20px,calc(var(--pk)*26px))}
@media(max-height:820px){.panel .desc.short{-webkit-line-clamp:2}} /* short windows: two lines of ingress, the rest is under More */
@media(max-width:1100px){.panel .inner{grid-template-columns:minmax(260px,1fr) 1.2fr}.panel .col.c{grid-column:1/-1}}
@media(max-width:768px){.panel{max-height:68vh}.panel .inner{grid-template-columns:1fr}.panel .carousel{height:auto;aspect-ratio:16/9}}

/* search box: never wider than a third of the window (the frosted plate included); its type scales with it; the category icons keep
   their size and wrap into fewer columns instead of shrinking */
.home{width:min(calc(33.3vw - 44px),640px)}
@media(min-width:1700px){.home{width:min(calc(33.3vw - 44px),640px)}}
.home .big input{font-size:clamp(15px,1.3vw,28px)}
.home .cats{grid-template-columns:repeat(auto-fill,74px);min-height:0;width:100%}
@media(max-width:768px){.home{width:auto}.home .cats{grid-template-columns:repeat(5,1fr)}}
.panel .ext .deal{margin:0 0 18px}
.panel .carousel .walk{top:calc(var(--pk)*16px);bottom:auto;left:calc(var(--pk)*16px)} /* badge in the image's top corner, clear of the caption */
/* the header (logo, menu) sits above the flying-card layer (#canvasTop, z 12) so an open menu is never crossed by a card */
.ui.top{z-index:14}

/* category buttons: a filled translucent purple tile with flat 2D line icons (default) or the 3D glyph snapshots (#3dicons) */
/* the tile is translucent glass: 75% opaque at the top-left fading to 55% at the bottom-right, so the globe glows through */
.cat{background:linear-gradient(165deg,rgba(90,71,159,.75) 0%,rgba(58,42,122,.65) 55%,rgba(42,30,96,.55) 100%)!important;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(190,165,255,.32)!important;position:relative;overflow:hidden}
.cat:hover{border-color:rgba(230,215,255,.7)!important}
.cat.on{background:linear-gradient(165deg,rgba(192,55,159,.75) 0%,rgba(122,42,154,.65) 60%,rgba(74,30,122,.55) 100%)!important;border-color:#ff5ad6!important}
.cat span{color:#efeaff!important;position:relative;z-index:1}
.home .cat img{width:60px;height:60px;margin:-8px 0 -6px}
.railcats .cat img{width:52px;height:52px;margin:-6px 0 -4px}
.cat svg.flat{display:none;fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
body.icons-flat .cat img{display:none}
body.icons-flat .cat svg.flat{display:block}
body.icons-flat .home .cat svg.flat{width:34px;height:34px;margin-bottom:4px}
body.icons-flat .railcats .cat svg.flat{width:30px;height:30px;margin-bottom:2px}
@media(max-height:1040px){.railcats .cat img{width:44px;height:44px;margin:-5px 0 -3px}body.icons-flat .railcats .cat svg.flat{width:26px;height:26px}}
/* the rail is placed below the logo by JS (placeRail), so no vertical centring transform; the list slide stays horizontal */
@media(min-width:769px){.railcats{transform:none}body.listopen .railcats{transform:translateX(400px)}.railcats.on{overflow-y:auto;scrollbar-width:none}}
/* info sheet: the same navy glass as the search box; the place name in white, regular weight; the actions under the facts column */
.panel{background:rgba(8,10,34,.66)!important;backdrop-filter:blur(26px) saturate(1.3);-webkit-backdrop-filter:blur(26px) saturate(1.3);border-color:rgba(255,255,255,.08)!important;box-shadow:0 40px 110px rgba(2,3,20,.75),0 0 0 1px rgba(255,255,255,.05)!important}
.panel h2{font-weight:400;color:#fff;text-shadow:none;letter-spacing:-.02em}
.panel .col.c .ctail{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:calc(var(--pk)*14px)}
.panel .col.c .ctail .acts{margin-top:0}
.panel .col.c .ctail .stage{margin:0 0 -6px auto;flex:none}
/* category tiles: half the purple (37% to 27% opacity) */
.cat{background:linear-gradient(165deg,rgba(90,71,159,.375) 0%,rgba(58,42,122,.325) 55%,rgba(42,30,96,.275) 100%)!important}
/* the left rail in the same dark frosted glass as the search box */
.railcats{background:rgba(8,10,34,.66)!important;backdrop-filter:blur(26px) saturate(1.3)!important;-webkit-backdrop-filter:blur(26px) saturate(1.3)!important;border:1px solid rgba(255,255,255,.07)!important;box-shadow:0 40px 110px rgba(2,3,20,.6)!important}
/* the hint row under the search box and the status line: comfortable line height, and the link chips keep a gap when they wrap */
.home .sub{line-height:1.7}
.home .sub em{display:inline-block;line-height:1.45;margin:2px 3px 2px 0}
.hudline{line-height:1.65;padding-block:2px}
/* the Groups label never wraps: "(Local guides)" wrapped to two lines inside its reserved width and still made the search box jump */
#groupName,.groups{white-space:nowrap}
/* category tiles: 5% less saturation inside (same opacities) */
.cat{background:linear-gradient(165deg,rgba(91,73,157,.375) 0%,rgba(59,44,120,.325) 55%,rgba(43,32,94,.275) 100%)!important}
.cat.on{background:linear-gradient(165deg,rgba(189,58,157,.75) 0%,rgba(121,45,151,.65) 60%,rgba(74,32,120,.55) 100%)!important}

/* ===== one state system everywhere: ROLLOVER = cyan (pointing at), SELECTED = crimson (picked, the zoom buttons' colour) ===== */
.tlab:hover,.tlab.hov{border-color:#4FE3F0;background:rgba(79,227,240,.18)}
.tlab.hov i{background:#4FE3F0;box-shadow:0 0 8px #4FE3F0}
.tlab.sel{border-color:#EF1F5A;background:rgba(239,31,90,.32)}
.tlab.sel i{background:#FF5AA0;box-shadow:0 0 8px #EF1F5A}
.ptip{background:#EF1F5A;box-shadow:0 10px 24px rgba(80,0,30,.4)}
.ptip::after{background:#EF1F5A}
.ptip small{color:#ffe1ea}
.cat:hover{border-color:#4FE3F0!important;box-shadow:0 0 0 1px rgba(79,227,240,.35) inset}
.cat.on:hover{border-color:#ff8fc0!important}


/* ===== Type scale (search box, rail): one fluid base and fixed ratio steps =====
   --s0 is the smallest text (tile labels, hints, status): never under 11px (web minimum), growing with the window up to 15px.
   Every other size is a fixed step above it (ratio 1.2), so the size contrast between levels is the same at every resolution.
   The search box and its tiles are sized from the same scale, so the whole box scales in proportion (no zoom: zoom shrank text
   below the minimum). */
:root{--s0:clamp(11px,calc(5px + .42vw),15px);--s1:calc(var(--s0)*1.2);--s2:calc(var(--s0)*1.44);--s3:calc(var(--s0)*1.728)}
@media(min-width:769px){
  .home{width:min(calc(33.3vw - 44px),calc(var(--s0)*34));padding:calc(var(--s0)*1.8) calc(var(--s0)*1.9) calc(var(--s0)*1.6)}
  .home .pair{gap:calc(var(--s0)*.5)}
  .home .big{gap:calc(var(--s0)*.9);padding:0 2px calc(var(--s0)*.6)}
  .home .big input{font-size:var(--s3);padding:calc(var(--s0)*.35) 0}
  .home .big svg{width:var(--s2);height:var(--s2)}
  .home .cats{grid-template-columns:repeat(auto-fill,calc(var(--s0)*6));gap:calc(var(--s0)*.8);margin-top:calc(var(--s0)*1.2)}
  .home .cat{width:calc(var(--s0)*6);height:calc(var(--s0)*5.8);padding:calc(var(--s0)*.45) 2px;gap:calc(var(--s0)*.35);border-radius:calc(var(--s0)*.9)}
  .home .cat span{font-size:var(--s0);letter-spacing:.02em}
  body.icons-flat .home .cat svg.flat{width:calc(var(--s0)*2.3);height:calc(var(--s0)*2.3);margin-bottom:0}
  .home .cat img{width:calc(var(--s0)*4);height:calc(var(--s0)*4);margin:calc(var(--s0)*-.5) 0 calc(var(--s0)*-.4)}
  .home .filterdock .filters label,.home .filterdock .filters .groups{font-size:var(--s0);padding:calc(var(--s0)*.55) calc(var(--s0)*1)}
  .home .filterdock .filters{gap:calc(var(--s0)*.5)}
  .home .status{font-size:var(--s0)}
  .home .sub{font-size:var(--s1);line-height:1.7;margin-top:calc(var(--s0)*1)}
  .hudline{font-size:var(--s0)}
  .railcats .cat{width:calc(var(--s0)*6.1)}
  .railcats .cat span{font-size:var(--s0);letter-spacing:.02em}
}
/* info sheet small labels up to the 11px minimum (were 10px) */
.panel .rows label,.panel .eyebrow .tag,.panel .sec h4{font-size:11px}
@media(min-width:769px){.railcats .world,.railcats .filtersbtn{font-size:var(--s0);width:calc(var(--s0)*6.1)}}
/* page margins scale with the window: the logo's left margin is 33px at ~3000px wide and shrinks proportionally (never under 16px) */
@media(min-width:769px){.ui.top{padding-left:max(16px,1.1vw);padding-right:max(16px,1.1vw)}.hudline{bottom:max(12px,1vw)}}
@media(min-width:769px){
  .home{width:min(calc(33.3vw - 44px),calc(var(--s0)*37))}
  .home .cats{grid-template-columns:repeat(auto-fill,calc(var(--s0)*6.7))}
  .home .cat{width:calc(var(--s0)*6.7)}
  .home .cat span{white-space:nowrap;letter-spacing:.01em}
}
/* issue 7: the three-line Groups indicator is gone (the Groups pill already shows the state) */
#modeBar{display:none!important}

/* ===== version to compare (#plaintiles): no tile background or outline, just icon and label; states shown by colour =====
   lit/selected = crimson, switched off = dimmed, hover = cyan (the same state system as everywhere else) */
body.tiles-plain .cat{background:none!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border-radius:8px}
body.tiles-plain .cat svg.flat{stroke:#c9c6e4;transition:stroke .2s}
body.tiles-plain .cat span{color:#c9c6e4!important;transition:color .2s}
body.tiles-plain .cat.on svg.flat{stroke:#FF4F86}
body.tiles-plain .cat.on span{color:#FF8FB3!important}
body.tiles-plain .cat:hover svg.flat{stroke:#4FE3F0}
body.tiles-plain .cat:hover span{color:#4FE3F0!important}
@media(min-width:769px){
  body.tiles-plain .home .cats{gap:calc(var(--s0)*.3) calc(var(--s0)*.2);margin-top:calc(var(--s0)*.9)}
  body.tiles-plain .home .cat{height:calc(var(--s0)*4.6);padding:0}
  body.tiles-plain .railcats .cats{gap:2px}
  body.tiles-plain .railcats .cat{height:calc(var(--s0)*4.8);padding:0}
}
/* category tile labels: a fixed 11px at every screen size (Jens) */
@media(min-width:769px){.home .cat span,.railcats .cat span{font-size:11px;letter-spacing:.04em}}

/* icon + label only (the standard now): a much stronger frosted blur behind them, and a soft dark halo under each icon so they stay
   clear over the moving globe */
.home::before{backdrop-filter:blur(44px) saturate(1.4)!important;-webkit-backdrop-filter:blur(44px) saturate(1.4)!important}
.railcats{backdrop-filter:blur(44px) saturate(1.4)!important;-webkit-backdrop-filter:blur(44px) saturate(1.4)!important}
body.tiles-plain .cat{overflow:visible}
body.tiles-plain .cat::before{content:'';position:absolute;left:8%;right:8%;top:6%;bottom:6%;border-radius:50%;background:radial-gradient(closest-side,rgba(4,6,24,.6),rgba(4,6,24,0));filter:blur(6px);mix-blend-mode:multiply;z-index:-1;pointer-events:none}
body.tiles-plain .cat svg.flat,body.tiles-plain .cat span{position:relative;z-index:1}
body.tiles-plain .cat{isolation:isolate}
/* left rail ("tuck mode"): category buttons at 75% of their size (labels stay 11px); in the icon-only style one column so labels never collide */
@media(min-width:769px){
  .railcats .cat{width:calc(var(--s0)*6.1*.75);height:calc(var(--s0)*5.8*.75)}
  body.icons-flat .railcats .cat svg.flat{width:calc(var(--s0)*2.3*.75);height:calc(var(--s0)*2.3*.75)}
  body.tiles-plain .railcats .cats,body.tiles-plain .railcats .cats.two{flex-wrap:nowrap;max-height:none!important}
  body.tiles-plain .railcats .cat{width:calc(var(--s0)*6.4);height:calc(var(--s0)*4.8*.75)}
}
/* suggested cities for a country without places (Wikidata): chips in the search panel, each opens the city with live places */
.home .sugg{display:none;flex-wrap:wrap;align-items:center;gap:calc(var(--s0)*.5);margin-top:calc(var(--s0)*.9)}
.home .sugg.on{display:flex}
.home .sugg span{font-size:var(--s0);letter-spacing:.12em;text-transform:uppercase;color:#4FE3F0;width:100%;margin-bottom:2px}
.home .sugg button{font:inherit;font-size:var(--s1);color:#fff;background:rgba(239,31,90,.16);border:1px solid rgba(255,90,160,.45);border-radius:999px;padding:calc(var(--s0)*.45) calc(var(--s0)*1.1);cursor:pointer}
.home .sugg button:hover{border-color:#4FE3F0;background:rgba(79,227,240,.16)}

/* ===== left rail in a country/city: category icons only, small, thin 2px lines at 15% opacity; cyan on rollover; full with an outline
   only for the categories the guest has actually selected (body.cats-filtered), never in the default all-lit state ===== */
@media(min-width:769px){
  .railcats .cat{background:none!important;border:1px solid transparent!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;width:calc(var(--s0)*3.6)!important;height:calc(var(--s0)*3.6)!important;padding:0!important;border-radius:10px;justify-content:center}
  .railcats .cat span{display:none!important}
  .railcats .cat img{display:none!important}
  .railcats .cat svg.flat{display:block!important;width:calc(var(--s0)*1.6)!important;height:calc(var(--s0)*1.6)!important;stroke:#fff!important;stroke-width:2!important;opacity:.15;transition:opacity .2s,stroke .2s}
  .railcats .cat:hover svg.flat{opacity:1;stroke:#4FE3F0!important}
  body.cats-filtered .railcats .cat.on svg.flat{opacity:1;stroke:#FF5AA0!important}
  body.cats-filtered .railcats .cat.on{border-color:rgba(239,31,90,.85)!important}
  .railcats .cats,.railcats .cats.two{flex-wrap:nowrap!important;max-height:none!important;gap:2px!important;align-items:center}
}

/* ===== boot and entrances: a dot-matrix globe forms while the scene loads; then the globe grows into place and the interface arrives in order ===== */
#boot{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;pointer-events:none;background:radial-gradient(circle at 50% 46%,#0c1036 0%,#05061a 55%,#020309 100%);transition:opacity .9s ease,visibility 0s linear .9s}
#boot.hide{opacity:0;visibility:hidden}
#boot .bootcore{position:relative;display:grid;place-items:center}
#boot .bootglobe{width:min(34vmin,240px);height:min(34vmin,240px);overflow:visible;filter:drop-shadow(0 0 18px rgba(138,76,255,.55))}
#boot .br{fill:none;stroke-width:5;stroke-linecap:round;stroke-dasharray:0 11;transform-origin:0 0}
#boot .r1{stroke:#4FE3F0;animation:bspin 6s linear infinite}
#boot .r2{stroke:#8A4CFF;animation:bspin 3.4s linear infinite reverse}
#boot .r3{stroke:#FF5AD6;animation:bspin 4.6s linear infinite}
#boot .r4{stroke:#1E63D8;opacity:.8;animation:bspin 8s linear infinite reverse}
#boot .bootword{position:absolute;font:900 clamp(18px,2.2vw,26px)/1 'Inter',Helvetica,sans-serif;letter-spacing:-.045em;color:#fff;text-shadow:0 0 22px rgba(255,90,214,.55);animation:bpulse 1.6s ease-in-out infinite}
@keyframes bspin{to{transform:rotate(360deg)}}
@keyframes bpulse{0%,100%{opacity:.75}50%{opacity:1}}
/* entrances (fill backwards only, so the normal states such as a hidden search box still apply afterwards) */
@keyframes inDown{from{opacity:0;translate:0 -18px}to{opacity:1;translate:0 0}}
@keyframes inUp{from{opacity:0;translate:0 28px}to{opacity:1;translate:0 0}}
@keyframes inFade{from{opacity:0}to{opacity:1}}
body.booting .ui.top,body.booting .home,body.booting .hudline{opacity:0}
body.booted .ui.top{animation:inDown .9s cubic-bezier(.2,.8,.2,1) .25s backwards}
body.booted .home{animation:inUp 1s cubic-bezier(.2,.8,.2,1) .55s backwards}
body.booted .home .cat{animation:inUp .7s cubic-bezier(.2,.8,.2,1) backwards}
body.booted .home .cat:nth-child(1){animation-delay:.85s}body.booted .home .cat:nth-child(2){animation-delay:.9s}body.booted .home .cat:nth-child(3){animation-delay:.95s}body.booted .home .cat:nth-child(4){animation-delay:1s}body.booted .home .cat:nth-child(5){animation-delay:1.05s}body.booted .home .cat:nth-child(6){animation-delay:1.1s}body.booted .home .cat:nth-child(7){animation-delay:1.15s}body.booted .home .cat:nth-child(8){animation-delay:1.2s}body.booted .home .cat:nth-child(9){animation-delay:1.25s}body.booted .home .cat:nth-child(10){animation-delay:1.3s}
body.booted .hudline{animation:inFade 1.2s ease 1.2s backwards}
.railcats.on{animation:inFade .6s ease backwards}
.cityhd.on{animation:inDown .7s cubic-bezier(.2,.8,.2,1) backwards}
@media(prefers-reduced-motion:reduce){#boot .br,#boot .bootword{animation:none}body.booted .ui.top,body.booted .home,body.booted .home .cat,body.booted .hudline,.railcats.on,.cityhd.on{animation:none}}
/* the fixed zoom cluster: always visible; the compass is a white disc like the World button, its needle shows north */
.cursorbtns.on{opacity:1!important}
/* no free spot (e.g. a sheet open on a phone): the cluster really hides instead of covering the sheet */
.cursorbtns:not(.on){opacity:0!important;pointer-events:none!important}
.cursorbtns:not(.on) button{pointer-events:none!important}
.cursorbtns button.north{background:#fff;border-color:#fff;display:flex;align-items:center;justify-content:center;color:#2a1640;box-shadow:0 10px 24px rgba(60,0,20,.45),0 0 18px rgba(255,255,255,.25)}
.cursorbtns button.north::before{display:none}
.cursorbtns button.north svg{width:26px;height:26px;transition:transform .15s linear}
.cursorbtns button.north:hover{background:#E9FDFF}
.cursorbtns.near button{scale:1}
.cursorbtns button.north.tilted{box-shadow:0 0 0 3px rgba(79,227,240,.55),0 0 22px rgba(79,227,240,.7);animation:npulse 1.6s ease-in-out infinite}
@keyframes npulse{0%,100%{box-shadow:0 0 0 3px rgba(79,227,240,.35),0 0 14px rgba(79,227,240,.45)}50%{box-shadow:0 0 0 4px rgba(79,227,240,.7),0 0 26px rgba(79,227,240,.85)}}
/* panels sit above the flying-card layer (#canvasTop, z 12): a card must never drift across the search box, the rail or the list */
.ui.home,.ui.railcats,.ui.list,.ui.cityhd{z-index:13}
.cursorbtns button.north{cursor:grab;touch-action:none}
.cursorbtns button.north:active{cursor:grabbing}
.cursorbtns button.north.tick{box-shadow:0 0 0 4px rgba(239,31,90,.75),0 0 26px rgba(239,31,90,.8)!important}

/* zoom buttons at the end of their range (closest lens zoom / widest world view) */
.cursorbtns button.dim{opacity:.4;filter:saturate(.5);cursor:default}
.cursorbtns button.dim:hover{scale:1}

/* Phones: the search panel is a bottom sheet showing only "Where" by default; the rest slides up from below the fold (homeSheet in JS) */
.sheethandle{display:none}
@media(max-width:760px){
 body.phone-sheet .home,body.phone-sheet .home.up{left:0!important;right:0!important;top:auto!important;bottom:0!important;width:auto!important;max-width:none!important;margin:0!important;
  padding:16px 18px calc(18px + env(safe-area-inset-bottom,0px));border-radius:24px 24px 0 0;max-height:84vh;overflow:hidden;overscroll-behavior:contain;
  background:rgba(8,10,34,.78);backdrop-filter:blur(22px) saturate(1.3);-webkit-backdrop-filter:blur(22px) saturate(1.3);box-shadow:0 -18px 50px rgba(2,3,20,.55),0 0 0 1px rgba(255,255,255,.07);
  align-items:stretch;transform:translateY(calc(100% - var(--peek,132px)))}
 body.phone-sheet .home::before{display:none}
 body.phone-sheet .home.sheet-open{transform:none;overflow-y:auto}
 body.phone-sheet .home .pair{display:contents}
 body.phone-sheet .home .big{order:1;width:100%}
 body.phone-sheet .home .status{order:2}
 body.phone-sheet .home .sugg{order:3}
 body.phone-sheet .home .sheethandle{order:4}
 body.phone-sheet .home .big.what{order:5;margin-top:6px}
 body.phone-sheet .home .cats{order:6;margin-top:12px}
 body.phone-sheet .home .filterdock{order:7}
 body.phone-sheet .home .sub{order:8}
 body.phone-sheet .home .big input{font-size:20px}
 body.phone-sheet .home .sheethandle{display:flex;align-items:center;justify-content:center;gap:10px;position:relative;width:100%;min-height:44px;margin:6px 0 0;padding:14px 0 4px;background:none;border:0;
  color:#a9adc8;font:500 11px/1 inherit;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent}
 body.phone-sheet .home .sheethandle .grip{position:absolute;top:2px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:2px;background:rgba(255,255,255,.28)}
 body.phone-sheet .home .sheethandle svg{width:16px;height:16px;stroke:#4FE3F0;fill:none;stroke-width:2;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
 body.phone-sheet .home.sheet-open .sheethandle svg{transform:rotate(180deg)}
 body.phone-sheet .home .sheethandle:focus-visible{outline:2px solid #4FE3F0;outline-offset:2px;border-radius:12px}
}
@media(max-width:760px) and (prefers-reduced-motion:reduce){body.phone-sheet .home{transition:opacity .2s!important}}

/* First flight (js/40-tour.js): a self-running tour with a "Meanwhile, in ..." caption; the interface steps back while it plays */
#tourCap{position:fixed;left:50%;top:max(84px,9vh);z-index:35;transform:translate(-50%,-8px);display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none;opacity:0;transition:opacity .7s,transform .9s cubic-bezier(.2,.8,.2,1);text-align:center}
#tourCap.on{opacity:1;transform:translate(-50%,0)}
#tourCap .eb{font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:#4FE3F0}
#tourCap .city{font-weight:400;font-size:clamp(30px,4.2vw,64px);letter-spacing:-.03em;line-height:1;color:#fff;text-shadow:0 2px 18px rgba(4,5,20,.9),0 0 60px rgba(4,5,20,.75)}
#tourCap .eb,#tourCap .meta{text-shadow:0 1px 10px rgba(4,5,20,.95)}
#tourCap .meta{font-size:13px;letter-spacing:.06em;color:#FFE49A}
#tourTake{position:fixed;left:50%;bottom:max(28px,4vh);z-index:35;transform:translateX(-50%);padding:12px 22px;border-radius:999px;background:rgba(8,10,34,.55);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
 border:1px solid rgba(79,227,240,.35);color:#fff;font-size:13px;letter-spacing:.08em;pointer-events:none;opacity:0;transition:opacity .6s}
#tourTake.on{opacity:1;animation:takePulse 2.6s ease-in-out infinite}
@keyframes takePulse{0%,100%{box-shadow:0 0 0 0 rgba(79,227,240,.0)}50%{box-shadow:0 0 0 8px rgba(79,227,240,.12)}}
#tourCoach{position:fixed;left:50%;bottom:max(28px,4vh);z-index:35;transform:translate(-50%,8px);padding:11px 20px;border-radius:14px;background:rgba(8,10,34,.7);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
 color:#eceaf8;font-size:13px;letter-spacing:.04em;pointer-events:none;opacity:0;transition:opacity .5s,transform .6s cubic-bezier(.2,.8,.2,1)}
#tourCoach.on{opacity:1;transform:translate(-50%,0)}
body.touring .home:not(.off),body.touring .railcats,body.touring #cursorBtns,body.touring .hudline{opacity:.18!important;transition:opacity .8s}
body.touring .cityhd{opacity:0!important;transition:opacity .6s}
body.touring .panel.on{opacity:1}
@media(max-width:760px){#tourCap{top:96px}body.phone-sheet.touring .home{opacity:.35!important}#tourTake{bottom:calc(var(--peek,132px) + 16px)}}
@media(prefers-reduced-motion:reduce){#tourTake.on{animation:none}}

/* ===== "No button should scream" (Jens, B_117). Interface controls are quiet: a line icon with a small uppercase label, hairline
   dividers between groups, no filled blocks, capsules, borders or glows. Hover = a little brighter (icon to the rollover cyan, as
   the category icons do); active = a short thin crimson line under the label. Keyboard focus = a thin cyan outline.
   The crimson zoom buttons and the info sheet's actions keep their colour; the search box keeps its boxed tiles (Jens, B_104). ===== */
.railcats .world,.railcats .world.srch,.railcats .filtersbtn{background:none!important;border:0!important;border-radius:8px!important;box-shadow:none!important;
 display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--s0)*.45);margin:0!important;padding:calc(var(--s0)*.8) 0!important;
 position:relative;color:rgba(236,234,248,.66);font-weight:500;letter-spacing:.12em;line-height:1;transition:color .2s}
.railcats .world svg,.railcats .world.srch svg{width:calc(var(--s0)*1.6)!important;height:calc(var(--s0)*1.6)!important;stroke:currentColor!important;stroke-width:1.8;opacity:.85;transition:stroke .2s,opacity .2s}
.railcats .world:hover,.railcats .filtersbtn:hover{color:#fff;background:none!important}
.railcats .world:hover svg{stroke:#4FE3F0!important;opacity:1}
/* one hairline between the groups (Search / World / categories / Filters), centred in the rail's 8px gap */
.railcats .world::after,.railcats .filtersbtn::before{content:'';position:absolute;left:12%;right:12%;height:1px;background:rgba(255,255,255,.12);pointer-events:none}
.railcats .world::after{bottom:-4.5px}
.railcats .filtersbtn::before{top:-4.5px}
/* active: Search while the search box is open, Filters while the filter dock is open */
.railcats .filtersbtn.on,body:has(#home:not(.off)) .railcats .world.srch{color:#fff}
body:has(#home:not(.off)) .railcats .world.srch svg{opacity:1}
.railcats .filtersbtn.on::after,body:has(#home:not(.off)) .railcats .world.srch::before{content:'';position:absolute;left:50%;bottom:calc(var(--s0)*.3);width:14px;height:2px;margin-left:-7px;border-radius:1px;background:#EF1F5A}
.railcats .world:focus-visible,.railcats .filtersbtn:focus-visible{outline:1px solid rgba(79,227,240,.8);outline-offset:-1px}
.railcats .cat:focus-visible{outline:1px solid rgba(79,227,240,.8)!important;outline-offset:-1px}
/* the filter dock widens the rail when open: keep Search, World, the icons and Filters on the centre line */
@media(min-width:769px){.railcats>.world,.railcats>.cats,.railcats>.filtersbtn{align-self:center}}

/* "Popular in ..." city suggestions: plain text links like "Try a city ...", a faint dotted underline as the only affordance,
   separated by a thin middle dot that sits outside the link (never underlined, never clickable). The dot leads each name and the
   box clips at its left edge, so a wrapped line never starts or ends with a dangling dot */
.home .sugg{gap:calc(var(--s0)*.35) calc(var(--s0)*1.5);overflow:hidden}
.home .sugg button{position:relative;background:none!important;border:0!important;border-radius:0!important;padding:2px 0!important;color:#aeb3bb;
 border-bottom:1px dotted rgba(255,255,255,.28)!important;transition:color .2s,border-color .2s}
.home .sugg button::before{content:'\00B7';position:absolute;left:calc(var(--s0)*-.95);top:50%;transform:translateY(-55%);color:rgba(255,255,255,.3);pointer-events:none}
.home .sugg button:hover{color:#fff;background:none!important;border-bottom:1px solid rgba(255,255,255,.45)!important}
.home .sugg button:focus-visible{color:#fff;outline:none;border-bottom:1px solid #4FE3F0!important}
@media(pointer:coarse){.home .sugg button::after{content:'';position:absolute;inset:-10px -8px}}

/* city header: World and See All Destinations as quiet text links with one hairline between them */
.cityhd .row3{gap:0}
.cityhd button.leave,.cityhd button.listbig{background:none!important;border:0!important;border-radius:6px!important;box-shadow:none!important;padding:6px 14px!important;margin:0!important;
 position:relative;color:rgba(236,234,248,.72);font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;transition:color .2s}
.cityhd button.leave{padding-left:8px!important}
.cityhd button.leave svg{stroke:currentColor;width:13px;height:13px;transition:stroke .2s}
.cityhd button.listbig::before{content:'';position:absolute;left:0;top:25%;bottom:25%;width:1px;background:rgba(255,255,255,.18);pointer-events:none}
.cityhd button.leave:hover,.cityhd button.listbig:hover{color:#fff;background:none!important}
.cityhd button.leave:hover svg{stroke:#4FE3F0}
.cityhd button.listbig.on{color:#fff;background:none!important}
.cityhd button.listbig.on::after{content:'';position:absolute;left:50%;bottom:0;width:14px;height:2px;margin-left:-7px;border-radius:1px;background:#EF1F5A}
.cityhd button:focus-visible{outline:1px solid rgba(79,227,240,.8);outline-offset:0}

/* phones: the rail is one quiet strip just above the city header (it used to stack into a tall purple block over the header):
   Search | World | categories | Filters in one row that scrolls sideways, line icons only, lit crimson once the guest has filtered */
@media(max-width:768px){
 .railcats.on{left:8px;right:8px;top:auto;bottom:150px;transform:none;flex-direction:row;align-items:center;gap:10px;padding:4px 10px;border-radius:16px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;max-height:none}
 .railcats.on::-webkit-scrollbar{display:none}
 .railcats .world,.railcats .world.srch,.railcats .filtersbtn{flex:0 0 auto;width:auto!important;min-width:52px;font-size:11px;padding:8px 2px!important}
 .railcats .world::after{left:auto;right:-5.5px;top:22%;bottom:22%;width:1px;height:auto}
 .railcats .filtersbtn::before{left:-5.5px;right:auto;top:22%;bottom:22%;width:1px;height:auto}
 .railcats .cats,.railcats .cats.two{flex-direction:row!important;flex-wrap:nowrap!important;width:auto!important;max-height:none!important;gap:0!important;flex:0 0 auto}
 .railcats .cat{width:40px!important;height:44px!important;padding:0!important;justify-content:center}
 body.icons-flat .railcats .cat svg.flat{width:22px;height:22px;margin:0}
 .railcats .cat{background:none!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
 .railcats .cat svg.flat{stroke:#fff;opacity:.6;transition:opacity .2s,stroke .2s}
 body.cats-filtered .railcats .cat.on svg.flat{stroke:#FF5AA0;opacity:1}
 body:not(.cats-filtered) .railcats .cat.on{background:none!important}
}

/* "Right now in <city>" (js/42-rightnow.js): a quiet list beside the lens; rows are text, no buttons that scream */
#top3{position:fixed;right:max(96px,7vw);top:50%;z-index:19;transform:translate(10px,-50%);width:min(300px,26vw);opacity:0;pointer-events:none;transition:opacity .5s,transform .7s cubic-bezier(.2,.8,.2,1)}
#top3.on{opacity:1;transform:translate(0,-50%);pointer-events:auto}
#top3 .eb{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:#FFE49A;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.1);text-shadow:0 1px 10px rgba(4,5,20,.9)}
#top3 ol{list-style:none;margin:0;padding:0;counter-reset:t}
#top3 li{counter-increment:t;border-bottom:1px solid rgba(255,255,255,.08)}
#top3 button{display:grid;grid-template-columns:22px 1fr;column-gap:10px;row-gap:3px;width:100%;text-align:left;background:none;border:0;padding:11px 2px;color:rgba(236,234,248,.86);font:inherit;cursor:pointer;text-shadow:0 1px 10px rgba(4,5,20,.9)}
#top3 button::before{content:counter(t);grid-row:1/3;align-self:center;font-size:12px;color:#FFB347;font-variant-numeric:tabular-nums}
#top3 button b{font-weight:600;font-size:15px;letter-spacing:-.005em;color:#fff}
#top3 button span{font-size:12px;color:rgba(236,234,248,.6);letter-spacing:.03em}
#top3 li.hov button b,#top3 button:hover b{color:#4FE3F0}
#top3 button:focus-visible{outline:1px solid rgba(79,227,240,.7);outline-offset:2px}
@media(max-width:1100px){#top3{display:none}}

/* the three right-now picks: their name chips carry the same warm amber as their pillars and the list numbers */
.tlab.t3 i{background:#FFB347!important;box-shadow:0 0 8px rgba(255,179,71,.7)}

/* Take it with you (js/46-takeaway.js): the QR card rises from "Send to phone" inside the sheet; white code, quiet words */
#qrPop{position:absolute;right:calc(28px*var(--pk,1));bottom:calc(100% + 14px);z-index:6;display:flex;align-items:center;gap:18px;padding:16px 20px 16px 16px;border-radius:22px;
 background:rgba(10,10,32,.9);backdrop-filter:blur(24px) saturate(1.3);-webkit-backdrop-filter:blur(24px) saturate(1.3);border:1px solid rgba(255,255,255,.12);box-shadow:0 30px 80px rgba(2,3,20,.6);
 opacity:0;transform:translateY(10px) scale(.98);transform-origin:right bottom;pointer-events:none;transition:opacity .3s,transform .45s cubic-bezier(.2,.8,.2,1)}
#qrPop.on{opacity:1;transform:none;pointer-events:auto}
#qrPop .qr canvas{display:block;width:196px;height:196px;border-radius:12px;image-rendering:pixelated}
#qrPop .tx{display:flex;flex-direction:column;gap:6px;max-width:210px}
#qrPop .tx b{font-size:16px;color:#FFE49A;font-weight:600}
#qrPop .tx span{font-size:13px;line-height:1.5;color:rgba(236,234,248,.72)}
@media(max-width:760px){#qrPop{right:12px;left:12px}#qrPop .tx{max-width:none}}

/* ===== Rail, option C (Jens, B_126): on mouse/trackpad screens the rail is icons only and each name appears in a small flat tooltip
   beside the hovered or keyboard-focused icon (js/43-railtip.js). Touch screens keep the labels under the icons: there is no hover.
   The names stay in the page for screen readers (visually hidden, not removed). ===== */
.railcats .filtersbtn svg{display:block;width:calc(var(--s0)*1.6);height:calc(var(--s0)*1.6);fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;opacity:.85;transition:stroke .2s,opacity .2s}
.railcats .filtersbtn{gap:calc(var(--s0)*.45)}
.railcats .filtersbtn:hover svg{stroke:#4FE3F0;opacity:1}
.railcats .filtersbtn.on svg{opacity:1}
.railtip{position:fixed;z-index:36;left:0;top:0;pointer-events:none;opacity:0;transform:translate(-4px,-50%);
 transition:opacity .14s ease .14s,transform .22s cubic-bezier(.2,.8,.2,1) .14s;background:rgba(6,8,12,.92);border-radius:4px;padding:6px 10px;
 white-space:nowrap;color:#fff;font-size:var(--s0);font-weight:500;letter-spacing:.12em;text-transform:uppercase;line-height:1.2}
.railtip.on{opacity:1;transform:translate(0,-50%)}
/* moving from icon to icon: no delay, the tip glides along the rail */
.railtip.quick{transition:opacity .1s,transform .2s cubic-bezier(.2,.8,.2,1),top .14s cubic-bezier(.2,.8,.2,1)}
@media(prefers-reduced-motion:reduce){.railtip,.railtip.quick{transition:opacity .1s}}
@media(hover:hover) and (pointer:fine) and (min-width:769px){
 .railcats .world span,.railcats .filtersbtn span,.railcats .cat span{position:absolute!important;display:block!important;width:1px!important;height:1px!important;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
 .railcats .world,.railcats .world.srch,.railcats .filtersbtn{width:calc(var(--s0)*3.6)!important;height:calc(var(--s0)*3.6);padding:0!important;gap:0}
 .railcats .filtersbtn.on::after,body:has(#home:not(.off)) .railcats .world.srch::before{bottom:3px}
}
/* rail categories: hover = the cyan icon only (no outline box); a category the guest has filtered = a crimson icon, no box */
.railcats .cat:hover,.railcats .cat.on:hover,body.cats-filtered .railcats .cat.on{border-color:transparent!important;box-shadow:none!important;background:none!important}
/* B_127: the image card only exists when the place has a real photo; the credit links to the photo's page */
.panel .carousel.nophoto{display:none}
.panel .credit a{color:inherit;text-decoration:none}
.panel .credit a:hover{color:rgba(255,255,255,.75);text-decoration:underline;text-underline-offset:2px}

/* B_132 (Jens): the three sheet actions sit on ONE row; the weather is the last row of the facts table (NOW, aligned with PRICE..TYPE);
   the guide's "Useful" vote lives with the guide it rates, as quiet text (no capsule) */
.panel .col.c .ctail .acts{flex-wrap:nowrap;gap:calc(var(--pk)*8px)}
.panel .col.c .ctail .acts button{white-space:nowrap;padding:calc(var(--pk)*11px) calc(var(--pk)*13px)}
.panel .facts #pweather:empty{display:none}
.panel #pvote{margin:calc(var(--pk)*10px) 0 0}
.panel #pvote:empty{display:none}
.panel #pvote button{background:none!important;border:0!important;border-radius:0!important;padding:4px 0!important;color:rgba(255,255,255,.62)!important;font-size:11px!important;letter-spacing:.14em!important}
.panel #pvote button:hover{color:#4FE3F0!important}
.panel #pvote button:focus-visible{outline:1px solid #4FE3F0;outline-offset:3px}
/* the category glyph now stands in the free bottom-right corner of the middle column, beside the guide line (the action row needs the whole facts column) */
.panel .col.b{position:relative}
.panel .col.b .stage{position:absolute;right:0;bottom:0;margin:0;width:calc(var(--pk)*92px);height:calc(var(--pk)*115px)}
.panel .col.b .stage canvas{width:100%;height:100%}
.panel .col.b #pguide,.panel .col.b #pvote{padding-right:calc(var(--pk)*100px)}
/* B_134: the tooltip flips left of the pointer near the right edge or the zoom buttons; the touch variant slides by --dx */
.ctip{transform:translate(calc(14px + var(--dx,0px)),-50%)}
.ctip.flip{transform:translate(calc(-100% - 14px),-50%)}
.ctip.touch{transform:translate(calc(-50% + var(--dx,0px)),calc(-100% - 46px))}
/* B_135: on a phone the place sheet scrolls inside itself; its lower edge fades out instead of cutting a row in half, and the
   last row can scroll clear of the fade */
@media(max-width:768px){.panel{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 56px),transparent);padding-bottom:64px!important}}
/* ...and the city header behind it steps aside, so nothing ghosts through the fade */
@media(max-width:768px){body:has(#panel.on) #cityhd{opacity:0!important;pointer-events:none}}