/* Restrained motion lives behind opaque reading surfaces. */
html{overflow-x:clip;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{isolation:isolate;background:#101311}
#ambient-field{position:fixed;inset:0;width:100%;height:100vh;height:100dvh;pointer-events:none;z-index:-1}
.hero-note{font-size:12px;color:var(--muted);letter-spacing:.025em;margin:0}
.hero{align-items:start}
.hero-copy{padding-block:7px}
.hero-bottom{margin-top:48px}
.travel-panel{position:relative;min-width:0;overflow:hidden;border:1px solid #40504b;background:linear-gradient(145deg,#142323ee,#101917f5);box-shadow:0 0 70px #5dcab906;align-self:stretch}
.travel-panel .visual-top{padding:18px 20px;border-bottom:1px solid #c6fce50b;font-size:8px;gap:10px}
.travel-panel .visual-top i{background:#99e6d3}
.travel-panel .visual-top>span:last-child{font-size:7px;letter-spacing:.02em}
.globe-stage{height:355px;position:relative;background:radial-gradient(ellipse at center,#72bca309,transparent 68%)}
#travel-globe{display:block;width:100%;height:100%;cursor:grab;touch-action:pan-y;outline-offset:-4px}
#travel-globe:active{cursor:grabbing}
.globe-axis{position:absolute;top:18px;left:50%;transform:translateX(-50%);font:7px var(--mono);color:#748e84;pointer-events:none;letter-spacing:.1em}
.globe-caption{position:absolute;left:20px;bottom:14px;font:7px var(--mono);color:#91afa1;letter-spacing:.14em;pointer-events:none}
.globe-labels{position:absolute;inset:0;pointer-events:none}
.city-label{position:absolute;pointer-events:auto;padding:4px 5px;line-height:12px;font:10px var(--mono);color:#c1d9cd;background:#0c1819d6;border:1px solid #8be3c41a;border-radius:2px;white-space:nowrap;transition:opacity .18s linear,border-color .2s;min-height:21px}
.city-label:hover,.city-label:focus-visible,.city-label.selected{color:#e5ffb6;background:#192c26;border-color:#ccff7566;z-index:2}
.travel-copy{padding:11px 24px 16px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.travel-copy .eyebrow{color:#a9d1b5;font-size:8px;margin-bottom:8px}
.travel-copy h2{font-size:24px;letter-spacing:-.03em;font-weight:400;margin:0;line-height:1.15}
.travel-copy>span{color:var(--accent);font-size:28px}
.travel-controls{padding:0 24px 20px;display:flex;align-items:center;gap:20px}
.travel-controls label{font:8px var(--mono);color:#a2b8ad;white-space:nowrap}
.travel-controls select{width:100%;min-width:0;border:1px solid #4e6659;background:#14201a;color:#e2eade;font:11px var(--mono);padding:10px 24px 10px 10px;border-radius:0;color-scheme:dark;cursor:pointer}
.travel-controls select:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.travel-bottom{display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid #819c7c2b;padding:14px 24px;font:8px var(--mono);color:#9bad9e}
.travel-bottom button{background:none;border:0;padding:3px 0;font:8px var(--mono);color:var(--accent)}
.travel-bottom button:disabled{color:#88998c}
.neon-ribbon{height:57px;position:relative;overflow:hidden;transform:rotate(-1.1deg);background:#101922;border-block:1px solid #8ccddb33;isolation:isolate;margin-block:8px}
.neon-ribbon-field{position:absolute;inset:-100% -30%;background:linear-gradient(105deg,#3ca7b920 4%,#6874d445 24%,#48cfb838 47%,#a55a9335 69%,#5498d440 85%);background-size:160% 100%;filter:blur(12px);animation:neon-flow 38s ease-in-out infinite alternate,neon-color 68s ease-in-out infinite alternate}
.neon-ribbon-trace{position:absolute;inset:0;background:repeating-linear-gradient(116deg,transparent 0 110px,#8fcff529 112px,transparent 114px,transparent 172px,#8ddbc51a 173px,transparent 175px);background-size:760px 100%;animation:neon-trace 46s linear infinite;mask-image:linear-gradient(transparent,#0009,transparent)}
.neon-ribbon-grain{position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 3px,#07111466 4px),linear-gradient(90deg,#101311 0%,transparent 14%,transparent 86%,#101311 100%)}
.neon-ribbon:after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:linear-gradient(90deg,transparent,#80bbd550,#a7cebe60,#9481c650,transparent);box-shadow:0 0 9px #91c9d130}
.section-aside{letter-spacing:0;font-size:12px;max-width:300px}
.play-section{background:#171c18e8}
@keyframes neon-flow{from{transform:translateX(-5%);background-position:0% 50%}to{transform:translateX(5%);background-position:100% 50%}}
@keyframes neon-color{from{filter:blur(12px) hue-rotate(-12deg)}to{filter:blur(12px) hue-rotate(38deg)}}
@keyframes neon-trace{to{background-position:760px 0}}
@media(max-width:1100px){.globe-stage{height:325px}.travel-panel .visual-top{padding:15px}.travel-panel .visual-top>span:last-child{font-size:6px}.travel-copy{padding-inline:20px}.travel-copy h2{font-size:21px}.travel-controls{padding-inline:20px;gap:12px}.travel-controls label{font-size:7px}.travel-bottom{padding-inline:20px}}
@media(max-width:760px){.hero-copy{padding:0}.hero-note{font-size:11px}.hero-bottom{margin-top:30px}.globe-stage{height:345px}.travel-panel .visual-top{padding:16px 14px;font-size:7px}.travel-panel .visual-top>span:last-child{font-size:6px}.travel-copy{padding:10px 20px 18px}.travel-copy h2{font-size:24px}.travel-controls{gap:10px;padding-bottom:19px}.travel-controls label{font-size:7px}.travel-controls select{font-size:10px;min-height:39px}.travel-bottom{font-size:7px;padding:14px 20px}.travel-bottom button{font-size:7px;min-height:24px}.city-label{font-size:8px;padding:4px 3px}.section-aside{font-size:10px;max-width:125px}.neon-ribbon{height:46px}.globe-caption{font-size:6px;left:15px}.hero{gap:36px}}
@media(max-width:370px){.globe-stage{height:310px}.travel-panel .visual-top>span:last-child{font-size:5px}.city-label{font-size:7px}.travel-copy h2{font-size:21px}.travel-controls label{font-size:6px}.travel-controls{gap:7px}.section-aside{max-width:none}}
@media(prefers-reduced-motion:reduce){.city-label{transition:none}.neon-ribbon-field,.neon-ribbon-trace{animation:none}}
