:root { color-scheme:dark; --ink:#d6cdc2; --muted:#938b81; --safe-top:env(safe-area-inset-top,0px); --safe-bottom:env(safe-area-inset-bottom,0px); --safe-right:env(safe-area-inset-right,0px); }
* { box-sizing:border-box; }
html,body { margin:0; width:100%; height:100%; overflow:hidden; background:#040404; }
body { font-family:'PingFang SC','Hiragino Sans GB',sans-serif; color:var(--ink); }
button { font:inherit; color:inherit; -webkit-tap-highlight-color:transparent; }
button:focus-visible { outline:1px solid #d7b48a; outline-offset:6px; }
main { position:relative; width:100%; height:100dvh; min-height:340px; overflow:hidden; }
.stage { position:absolute; inset:0; overflow:hidden; }
.stage::before { content:''; position:absolute; inset:0; background:#030303 url('assets/grain.svg') repeat; opacity:var(--ambient,1); }
.stage .takeoff-scene { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(var(--scene-scale,1)); background:transparent; }
.stage .scene-background,.stage .scene-grain { display:none; }
.stage .scene-coordinates { color:#8b8781; }
body.clean .scene-coordinates,body.immersive .scene-coordinates { color:#575551; }
.window-control { position:absolute; padding:0; border:0; background:none; touch-action:none; cursor:grab; border-radius:35%; }
.window-control:active { cursor:grabbing; }
.interface { position:absolute; bottom:max(22px,env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); width:max-content; max-width:calc(100% - 24px); text-align:center; transition:opacity .35s ease; }
.hint { color:var(--muted); font-size:11px; letter-spacing:2px; margin:0 0 18px; }
.destinations { display:flex; justify-content:center; gap:5px; }
.destinations button { border:1px solid transparent; background:transparent; padding:7px 13px; font-size:12px; line-height:18px; color:#968f87; cursor:pointer; border-radius:20px; transition:color .2s,background .2s,border-color .2s; }
.destinations button[aria-pressed=true] { color:#d8c8b7; border-color:#40352b; background:#17130f; }
.destinations button:hover { color:#fff; background:#1c1713; }
.playback { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:14px; }
.icon-button { width:32px; height:32px; border:0; padding:7px; background:transparent; color:#8f877e; cursor:pointer; border-radius:50%; }
.icon-button:hover,.icon-button[aria-pressed=true] { color:#ece1d4; background:#191512; }
.icon-button svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; }
.play-button { display:flex; align-items:center; justify-content:center; gap:8px; min-width:106px; background:none; border:0; padding:7px 8px; font-size:11px; color:#b9ada0; cursor:pointer; border-radius:8px; letter-spacing:1px; }
.play-button:hover { background:#171310; color:white; }
#play-symbol { font-size:15px; min-width:12px; }
.divider { width:1px; height:12px; background:#302923; margin:0 5px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
#exit-immersive { display:none; position:absolute; right:22px; bottom:22px; padding:9px 13px; border:1px solid #302921; border-radius:20px; color:#a69b8f; background:#0d0b09; font-size:11px; opacity:.45; cursor:pointer; }
#exit-immersive span { margin-left:8px; color:#70675e; }
#exit-immersive:hover,#exit-immersive:focus-visible { opacity:1; }
body.immersive .interface { visibility:hidden; opacity:0; pointer-events:none; }
body.immersive #exit-immersive { display:block; }
body.clean .interface,body.clean #exit-immersive { display:none; }
body.clean * { cursor:none!important; }
@media(max-height:620px) { .interface { bottom:12px; } .hint { display:none; } .playback { margin-top:6px; } }
@media(max-width:480px) { .interface { bottom:max(24px,env(safe-area-inset-bottom)); } .hint { font-size:10px; letter-spacing:1.5px; } .destinations button { padding:7px 12px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; } }
/* Global destination library */
.seat-label { position:absolute; top:28px; left:30px; color:#a99d8e; font-size:10px; letter-spacing:3px; display:flex; align-items:center; gap:10px; }
.seat-mark { font-size:20px; color:#b59b7a; }
.seat-note { margin-left:14px; padding-left:22px; border-left:1px solid #38302a; color:#766e65; font-size:8px; letter-spacing:2px; }
.current-info { position:absolute; left:50%; transform:translateX(-50%); border:0; padding:0 8px; background:none; cursor:pointer; text-align:center; white-space:nowrap; }
.current-info span { display:block; }
#current-place { color:#b9a994; font-size:11px; letter-spacing:1.4px; }
#current-landmark { color:#8d8275; font-size:10px; margin-top:8px; }
.current-info:hover #current-landmark { color:#c0b3a2; }
.interface .hint { margin-bottom:14px; font-size:10px; }
.destinations { gap:10px; }
.destinations .browse-button { display:flex; align-items:center; gap:9px; padding:9px 15px; border:1px solid #45382d; background:#17130f; color:#d9c7b0; }
.browse-button svg { width:16px; height:16px; stroke:currentColor; stroke-width:1; fill:none; }
.count-pill { font-size:10px; color:#a78e6e; padding-left:8px; border-left:1px solid #4b3d30; }
.journey-status { position:absolute; left:30px; bottom:30px; font-size:10px; color:#8c8073; display:flex; flex-direction:column; gap:7px; letter-spacing:1px; }
#route-counter { font-family:'Takeoff Serif',serif; font-size:13px; color:#b3a18a; letter-spacing:2px; }
body.immersive .current-info,body.immersive .seat-label,body.immersive .journey-status,body.clean .current-info,body.clean .seat-label,body.clean .journey-status { visibility:hidden; }
button,a,input { -webkit-tap-highlight-color:transparent; }
dialog { color:#d6c8b8; background:#100f0c; border:1px solid #4b3c2d; border-radius:18px; padding:0; overscroll-behavior:contain; }
dialog::backdrop { background:rgba(0,0,0,.79); backdrop-filter:blur(12px); }
.atlas-dialog { width:min(1040px,calc(100vw - 64px)); height:min(850px,calc(100dvh - 70px)); }
.atlas-dialog[open] { display:flex; flex-direction:column; }
.atlas-heading { padding:28px 30px 0; display:flex; justify-content:space-between; align-items:flex-start; flex-shrink:0; }
.eyebrow { color:#a08665; font-size:9px; letter-spacing:2.5px; margin:0 0 12px; }
.atlas-heading h2 { font-size:25px; font-weight:400; margin:0; letter-spacing:1px; color:#eddfca; }
#atlas-summary { color:#9b8a74; font-size:11px; margin:13px 0 0; letter-spacing:.7px; }
.close-dialog { width:32px; height:32px; line-height:26px; background:#1d1913; border:1px solid #433728; border-radius:50%; color:#baa58a; font-size:24px; font-weight:200; cursor:pointer; flex-shrink:0; }
.close-dialog:hover { color:white; border-color:#9f835d; }
.atlas-map { height:86px; margin:0 30px 0; overflow:hidden; flex-shrink:0; }
.atlas-map svg { width:100%; height:100%; opacity:.9; }
.atlas-map circle { fill:#a4845d; opacity:.45; }
.atlas-map circle.active { fill:#f2d4a4; opacity:1; r:4px; }
.map-guide { fill:none; stroke:#71614b; stroke-opacity:.17; stroke-width:.5; }
.atlas-tools { padding:0 30px; flex-shrink:0; }
.search-wrap { display:flex; align-items:center; gap:10px; background:#191611; border:1px solid #3b3228; border-radius:8px; padding:10px 12px; }
.search-wrap svg { width:17px; height:17px; stroke:#958068; stroke-width:1.2; fill:none; flex-shrink:0; }
.search-wrap input { width:100%; min-width:0; background:none; color:#ded0bd; border:0; outline:none; font:inherit; font-size:12px; }
.search-wrap:focus-within { border-color:#947651; }
.search-wrap input::placeholder { color:#81705d; }
.search-wrap kbd { border:1px solid #423628; border-radius:3px; font-size:10px; color:#89765e; padding:2px 5px; }
.region-filters { display:flex; gap:5px; overflow-x:auto; padding:14px 0 12px; scrollbar-width:none; }
.region-filters button { flex-shrink:0; padding:8px 10px; background:none; border:1px solid transparent; border-radius:16px; color:#9f8e77; font-size:11px; cursor:pointer; }
.region-filters span { margin-left:6px; color:#77664e; font-size:9px; }
.region-filters button[aria-pressed=true] { background:#2a2218; border-color:#645039; color:#ead5b5; }
.atlas-list-header { display:flex; justify-content:space-between; align-items:center; padding:0 30px 13px; flex-shrink:0; color:#9c886d; font-size:10px; }
#tour-region { background:none; border:0; color:#ceb18b; font-size:11px; padding:4px 0; cursor:pointer; }
#tour-region:disabled { color:#655643; cursor:default; }
.city-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:15px; padding:2px 30px 24px; overflow-y:auto; min-height:0; flex:1; align-content:start; scrollbar-color:#5c4933 #14110d; scrollbar-width:thin; }
.city-card { min-width:0; height:190px; padding:0; text-align:left; background:#191510; border:1px solid #30291f; border-radius:9px; overflow:hidden; cursor:pointer; transition:border-color .2s,transform .2s; }
.city-card:hover { border-color:#a4875d; transform:translateY(-2px); }
.city-card[aria-pressed=true] { border-color:#cead7c; }
.card-photo { display:block; position:relative; height:112px; background:#241e17; overflow:hidden; }
.card-photo img { display:block; width:100%; height:100%; object-fit:cover; opacity:.83; transition:opacity .2s,transform .4s; }
.city-card:hover img { opacity:1; transform:scale(1.035); }
.card-region { position:absolute; top:8px; left:8px; font-size:8px; letter-spacing:.5px; background:rgba(13,11,8,.74); padding:4px 6px; border-radius:10px; color:#e3d5c4; }
.card-arrow { position:absolute; top:8px; right:10px; color:#efdfc8; font-size:15px; }
.card-caption { display:block; padding:10px 11px; }
.card-caption strong { font-size:12px; font-weight:400; color:#e1ceb1; }
.card-caption>span { display:block; margin-top:3px; font-family:'Takeoff Serif',serif; font-size:12px; color:#bfa98a; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.card-caption small { display:block; margin-top:7px; color:#98836a; font-size:8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.atlas-footer { padding:13px 30px; border-top:1px solid #30271c; color:#8c7860; font-size:9px; display:flex; justify-content:space-between; flex-shrink:0; gap:12px; }
.atlas-footer a { color:#bba17c; text-decoration:none; }
.no-results { text-align:center; padding:60px 20px; color:#a99375; font-size:12px; flex:1; }
.details-dialog { width:min(430px,calc(100vw - 32px)); max-height:calc(100dvh - 48px); overflow-y:auto; }
.details-dialog>.close-dialog { position:absolute; top:14px; right:14px; z-index:2; }
.detail-photo { width:100%; height:300px; object-fit:contain; background:#080705; display:block; }
#detail-content>.eyebrow { margin:24px 24px 12px; }
#detail-title { margin:0 24px; font-size:25px; font-weight:400; color:#e7d3b3; }
#detail-title span { display:block; font-family:'Takeoff Serif',serif; color:#bda580; font-size:20px; margin-top:5px; }
.detail-line { margin:18px 24px; color:#b7a185; font-size:12px; line-height:1.8; }
.detail-landmark { margin:20px 24px; font-size:12px; color:#d4be9e; }
.detail-landmark span { display:block; font-family:'Takeoff Serif',serif; font-size:12px; margin-top:10px; color:#9b896f; }
.source-links { margin:18px 24px; display:flex; gap:20px; }
.source-links a { color:#b99d73; font-size:10px; text-decoration:none; }
.photo-credit { padding:15px 24px; border-top:1px solid #3d3022; color:#9b866a; font-size:9px; line-height:1.7; overflow-wrap:anywhere; }
.photo-credit a { color:#bea17a; }
@media(max-width:850px) { .city-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:600px) {
  .seat-label { top:20px; left:20px; } .seat-note { display:none; } .journey-status { left:20px; bottom:26px; font-size:8px; } #route-counter { font-size:10px; }
  .atlas-dialog { width:100vw; height:100dvh; max-width:none; max-height:none; border-radius:0; border:0; }
  .atlas-heading { padding:24px 20px 0; } .atlas-heading h2 { font-size:21px; } .atlas-map { margin:0 20px; height:76px; }
  .atlas-tools { padding:0 20px; } .atlas-list-header { padding-left:20px; padding-right:20px; }
  .city-grid { padding-left:20px; padding-right:20px; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .atlas-footer { padding:13px 20px; font-size:8px; } .atlas-footer>a { white-space:nowrap; }
  .journey-status { display:none; }
  #current-place { font-size:10px; } #current-landmark { font-size:9px; }
}
@media(max-height:600px) { .seat-label { top:14px; left:20px; } .current-info { display:none; } .atlas-map { display:none; } .atlas-heading { padding-top:18px; padding-bottom:16px; } }
@media(max-height:760px) { .interface .hint,#current-landmark { display:none; } }
/* Touch layout keeps the window and its controls in separate areas. */
body.mobile-portrait main,body.mobile-landscape main { height:var(--visual-height,100dvh); min-height:0; }
body.mobile-portrait .seat-label { top:calc(20px + var(--safe-top)); left:max(20px,env(safe-area-inset-left)); }
body.mobile-portrait .seat-note,body.mobile-portrait .journey-status,body.mobile-landscape .journey-status { display:none; }
body.mobile-portrait .interface { width:min(440px,calc(100% - 40px)); max-width:none; bottom:calc(20px + var(--safe-bottom)); }
body.mobile-portrait .scene-title,body.mobile-landscape .scene-title { white-space:nowrap; }
body.mobile-portrait .current-info,body.mobile-landscape .current-info { display:block; min-height:44px; max-width:calc(100% - 32px); padding:5px 8px; }
body.mobile-portrait #current-place,body.mobile-landscape #current-place { font-size:12px; line-height:18px; letter-spacing:1px; }
body.mobile-portrait #current-landmark,body.mobile-landscape #current-landmark { font-size:11px; margin-top:4px; }
body.mobile-portrait .destinations button,body.mobile-landscape .destinations button { min-height:44px; padding:10px 15px; font-size:13px; }
body.mobile-portrait .browse-button,body.mobile-landscape .browse-button { justify-content:center; flex:1; }
body.mobile-portrait #random,body.mobile-landscape #random { border-color:#352c23; }
body.mobile-portrait .playback,body.mobile-landscape .playback { gap:2px; margin-top:10px; }
body.mobile-portrait .icon-button,body.mobile-landscape .icon-button { width:44px; height:44px; padding:12px; flex-shrink:0; }
body.mobile-portrait .icon-button svg,body.mobile-landscape .icon-button svg { width:20px; height:20px; }
body.mobile-portrait .play-button,body.mobile-landscape .play-button { min-height:44px; min-width:96px; max-width:126px; flex:1; font-size:12px; padding:7px 4px; gap:6px; }
body.mobile-portrait .divider,body.mobile-landscape .divider { display:none; }
body.mobile-portrait .hint { font-size:11px; letter-spacing:1px; }
body.mobile-portrait #exit-immersive,body.mobile-landscape #exit-immersive { min-height:44px; bottom:calc(16px + var(--safe-bottom)); right:max(16px,env(safe-area-inset-right)); opacity:.8; }
body.mobile-portrait .atlas-dialog,body.mobile-landscape .atlas-dialog { position:fixed; top:var(--visual-top,0px); height:var(--visual-height,100dvh); max-height:var(--visual-height,100dvh); margin:0 auto; bottom:auto; }
body.mobile-portrait .close-dialog,body.mobile-landscape .close-dialog { width:44px; height:44px; line-height:36px; font-size:28px; }
body.mobile-portrait .atlas-heading { padding:calc(20px + var(--safe-top)) 20px 12px; gap:12px; }
body.mobile-portrait .atlas-heading h2 { font-size:22px; line-height:1.4; }
body.mobile-portrait #atlas-summary { font-size:12px; line-height:1.6; margin-top:9px; }
body.mobile-portrait .atlas-map { height:58px; }
body.mobile-portrait .search-wrap,body.mobile-landscape .search-wrap { min-height:48px; padding:10px 12px; }
body.mobile-portrait .search-wrap input,body.mobile-landscape .search-wrap input { font-size:16px; line-height:24px; }
body.mobile-portrait .search-wrap kbd,body.mobile-landscape .search-wrap kbd { display:none; }
body.mobile-portrait .region-filters,body.mobile-landscape .region-filters { padding:10px 0; gap:4px; touch-action:pan-x; }
body.mobile-portrait .region-filters button,body.mobile-landscape .region-filters button { min-height:44px; min-width:44px; padding:10px 12px; font-size:12px; }
body.mobile-portrait .region-filters span,body.mobile-landscape .region-filters span { font-size:10px; }
body.mobile-portrait .atlas-list-header,body.mobile-landscape .atlas-list-header { padding-bottom:8px; min-height:44px; font-size:12px; }
body.mobile-portrait #tour-region,body.mobile-landscape #tour-region { min-height:44px; font-size:12px; padding:8px 0 8px 8px; }
body.mobile-portrait .city-grid { gap:12px; padding-bottom:20px; }
body.mobile-portrait .city-card { height:212px; }
body.mobile-portrait .card-photo { height:126px; }
body.mobile-portrait .card-caption { padding:10px; }
body.mobile-portrait .card-caption strong { font-size:14px; }
body.mobile-portrait .card-caption>span { font-size:13px; }
body.mobile-portrait .card-caption small { font-size:10px; }
body.mobile-portrait .card-region { font-size:9px; }
body.mobile-portrait .atlas-footer { font-size:10px; line-height:1.8; padding-bottom:calc(12px + var(--safe-bottom)); flex-wrap:wrap; justify-content:flex-start; gap:4px 12px; }
body.mobile-portrait .details-dialog { max-height:calc(var(--visual-height,100dvh) - 24px); width:min(460px,calc(100vw - 24px)); }
body.mobile-portrait .detail-photo { height:clamp(180px,35dvh,300px); }
body.mobile-portrait .details-dialog .source-links a { display:flex; align-items:center; min-height:44px; font-size:13px; }
body.mobile-portrait .detail-line { font-size:14px; }
body.mobile-portrait .photo-credit { font-size:12px; }
body.mobile-landscape .seat-label { top:calc(12px + var(--safe-top)); left:max(20px,env(safe-area-inset-left)); }
body.mobile-landscape .seat-note { display:none; }
body.mobile-landscape .interface { width:max(280px,min(330px,calc(48vw - 20px))); max-width:none; }
body.mobile-landscape .current-info { width:max(280px,min(330px,calc(48vw - 20px))); }
body.mobile-landscape .atlas-dialog { width:100vw; max-width:none; border:0; border-radius:0; }
body.mobile-landscape .atlas-heading { padding:calc(10px + var(--safe-top)) 20px 8px; }
body.mobile-landscape .atlas-heading .eyebrow,body.mobile-landscape #atlas-summary,body.mobile-landscape .atlas-map { display:none; }
body.mobile-landscape .atlas-heading h2 { font-size:19px; }
body.mobile-landscape .atlas-tools { padding:0 20px; display:flex; align-items:center; gap:14px; }
body.mobile-landscape .search-wrap { flex:1; min-width:180px; }
body.mobile-landscape .region-filters { flex:1; min-width:0; }
body.mobile-landscape .atlas-list-header,body.mobile-landscape .city-grid { padding-left:20px; padding-right:20px; }
body.mobile-landscape .city-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
body.mobile-landscape .atlas-footer { padding-bottom:calc(10px + var(--safe-bottom)); }
body.keyboard-open .atlas-heading .eyebrow,body.keyboard-open #atlas-summary,body.keyboard-open .atlas-map,body.keyboard-open .atlas-footer { display:none; }
body.keyboard-open .atlas-heading { padding-top:calc(8px + var(--safe-top)); padding-bottom:6px; }
body.keyboard-open .atlas-heading h2 { font-size:19px; }
body.keyboard-open .atlas-tools { padding-top:0; }
body.keyboard-open .region-filters { padding:4px 0; }
body.keyboard-open .city-card { height:184px; }
body.keyboard-open .card-photo { height:104px; }
@media(max-width:600px) { body.mobile-portrait .atlas-dialog { width:100vw; border:0; border-radius:0; } }
@media(min-width:601px) { body.mobile-portrait .atlas-dialog { width:calc(100vw - 40px); max-width:860px; } }
@media(max-height:320px) { body.mobile-landscape .scene-coordinates { display:none; } }
@media(pointer:coarse) { button,a { touch-action:manipulation; } .window-control { touch-action:none; } }

body.mobile-portrait .photo-credit a { display:inline-flex; align-items:center; min-height:44px; }
body.mobile-landscape .card-caption strong { font-size:14px; }
body.mobile-landscape .card-caption>span { font-size:13px; }
body.mobile-landscape .card-caption small { font-size:10px; }
body.mobile-landscape .city-card { height:202px; }