html,body{margin:0;height:100%;background:#000;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,sans-serif;-webkit-font-smoothing:antialiased}
#cesiumContainer{position:absolute;inset:0}
.cesium-viewer-bottom{display:none!important}
.glass{background:rgba(20,22,28,.55);backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);border:1px solid rgba(255,255,255,.14);border-radius:18px;box-shadow:0 8px 32px rgba(0,0,0,.45)}
/* boot */
#boot{position:fixed;inset:0;background:#000;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:34px;transition:opacity .9s ease}
#boot.gone{opacity:0;pointer-events:none}
#boot-eye{width:120px;opacity:0;transform:scale(.82);animation:eyein 1.1s cubic-bezier(.2,.7,.2,1) .15s forwards}
@keyframes eyein{to{opacity:1;transform:scale(1)}}
#boot-name{width:min(320px,68vw);opacity:0;filter:blur(12px);transform:scale(1.06);animation:namein 1.2s cubic-bezier(.2,.7,.2,1) .9s forwards}
@keyframes namein{to{opacity:1;filter:blur(0);transform:scale(1)}}
/* hud */
#hud{position:fixed;top:calc(10px + env(safe-area-inset-top));left:10px;right:10px;z-index:20;display:flex;gap:8px;align-items:flex-start;pointer-events:none}
#hud>*{pointer-events:auto}
#brand{display:flex;align-items:center;gap:9px;padding:10px 14px;flex:none}
#brand .brand-eye{width:24px;height:auto}
#brand .brand-word{height:14px;width:auto}
#searchbox{position:relative;flex:1;display:flex;align-items:center;max-width:520px}
#q{flex:1;background:transparent;border:0;outline:0;color:#fff;font-size:15px;padding:12px 14px;min-width:0}
#q::placeholder{color:rgba(255,255,255,.45)}
#mic{background:transparent;border:0;color:rgba(255,255,255,.75);font-size:18px;padding:10px 12px;cursor:pointer}
#mic.listening{color:#7fd8ff}
#suggest{position:absolute;top:calc(100% + 8px);left:0;right:0;display:none;flex-direction:column;background:rgba(16,18,24,.82);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,.14);border-radius:16px;overflow:hidden}
#suggest.open{display:flex}
#suggest button{display:flex;justify-content:space-between;gap:10px;background:transparent;border:0;color:#fff;text-align:left;padding:12px 14px;font-size:14px;cursor:pointer}
#suggest button:active,#suggest button:hover{background:rgba(255,255,255,.08)}
#suggest small{color:rgba(255,255,255,.5);flex:none}
#info-btn{width:42px;height:42px;color:#fff;font-size:17px;font-style:italic;font-family:Georgia,serif;cursor:pointer;flex:none}
#info{position:fixed;z-index:30;left:50%;top:50%;transform:translate(-50%,-50%);width:min(420px,88vw);padding:22px 22px 18px;color:#eee;font-size:14px;line-height:1.55}
#info.hidden{display:none}
#info h2{margin:0 0 8px;font-size:17px;letter-spacing:.25em}
#info .muted{color:rgba(255,255,255,.55);font-size:12px}
#info a{color:#9fd4ff}
#info-close{position:absolute;top:8px;right:12px;background:none;border:0;color:#fff;font-size:20px;cursor:pointer}
#place-label{position:fixed;left:50%;bottom:95px;transform:translateX(-50%);z-index:15;color:#fff;font:500 13px/1.3 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:.035em;text-shadow:0 1px 2px #000,0 0 5px #000;background:rgba(0,0,0,.26);backdrop-filter:blur(7px);padding:4px 9px;border-radius:10px;white-space:nowrap;max-width:80vw;overflow:hidden;text-overflow:ellipsis}
#place-label:empty{display:none}
#layers{position:fixed;bottom:calc(18px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:20;max-width:calc(100vw - 22px);display:flex;align-items:center;gap:2px;padding:5px;overflow-x:auto;scrollbar-width:none;border-radius:19px;white-space:nowrap;background:rgba(30,34,42,.48);box-shadow:inset 0 1px 1px rgba(255,255,255,.23),0 12px 32px rgba(0,0,0,.42)}
#layers::-webkit-scrollbar{display:none}
#layers button{position:relative;z-index:2;background:none;border:0;border-radius:14px;color:rgba(255,255,255,.72);padding:10px 12px;font:500 12px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;cursor:pointer;flex:none;transition:color .35s ease,transform .35s ease;min-height:36px}
#layers button.selected{color:white;transform:scale(1.025)}
#layer-highlight{position:absolute;left:0;top:5px;height:36px;z-index:1;border-radius:14px;background:linear-gradient(135deg,rgba(255,255,255,.28),rgba(145,190,220,.12) 60%,rgba(255,255,255,.2));border:1px solid rgba(255,255,255,.38);box-sizing:border-box;box-shadow:inset 0 1px 0 rgba(255,255,255,.42),0 3px 12px rgba(0,0,0,.2);transition:transform .48s cubic-bezier(.18,1.3,.38,1),width .48s cubic-bezier(.18,1.3,.38,1)}
.layer-paused{font-size:11px;color:rgba(255,255,255,.42);padding:0 10px;border-left:1px solid rgba(255,255,255,.16);flex:none}
@media (max-width:520px){#hud{left:8px;right:8px;gap:6px}#brand .brand-word{display:none}#brand{padding:11px}#searchbox{min-width:0;flex:1}#q{font-size:13px;padding:12px 9px}#info-btn{width:38px;height:42px;flex:none}#layers{left:11px;right:11px;transform:none;justify-content:flex-start}#layers button{padding:10px 11px}}
@media (prefers-reduced-motion:reduce){#layer-highlight,#layers button,#boot,#boot-eye,#boot-name{animation:none;transition:none}}


/* Echo Music reference: glass lens glides between tabs; a brief soft crossfade on view switch. */
#scene-wash{position:fixed;inset:0;z-index:12;pointer-events:none;opacity:0;background:rgba(5,8,14,.16);backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0)}
#scene-wash.switching{animation:scene-morph .56s cubic-bezier(.2,.65,.3,1)}
@keyframes scene-morph{0%{opacity:0;backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0)}43%{opacity:1;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}100%{opacity:0;backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0)}}
#brand,#searchbox,#info-btn{box-shadow:inset 0 1px 1px rgba(255,255,255,.28),inset 0 -1px 0 rgba(255,255,255,.08),0 8px 28px rgba(0,0,0,.4)}
#layers{border-color:rgba(255,255,255,.28);background:rgba(12,14,18,.55)}
#layer-highlight{background:linear-gradient(140deg,rgba(255,255,255,.35),rgba(159,180,197,.18) 60%,rgba(255,255,255,.26));backdrop-filter:blur(18px) saturate(155%);-webkit-backdrop-filter:blur(18px) saturate(155%);border-color:rgba(255,255,255,.4);box-shadow:inset 0 1px 2px rgba(255,255,255,.48),0 3px 12px rgba(0,0,0,.2)}
@media (prefers-reduced-motion:reduce){#scene-wash.switching{animation:none}}

/* Segmented map view, floating like the reference rather than a dock across the screen. */
#layers{left:50%;right:auto;transform:translateX(-50%);width:max-content;max-width:calc(100vw - 40px);justify-content:center;padding:5px;border-radius:999px;background:rgba(24,24,29,.44);backdrop-filter:blur(24px) saturate(135%);-webkit-backdrop-filter:blur(24px) saturate(135%);border:1px solid rgba(255,255,255,.27);box-shadow:inset 0 1px 1px rgba(255,255,255,.32),0 8px 24px rgba(0,0,0,.28)}
#layers button{min-width:85px;min-height:42px;border-radius:999px;font-size:14px;letter-spacing:.01em}
#layer-highlight{height:42px;border-radius:999px;background:linear-gradient(145deg,rgba(255,255,255,.38),rgba(173,180,189,.16) 65%,rgba(255,255,255,.22));box-shadow:inset 0 1px 2px rgba(255,255,255,.5),0 3px 10px rgba(0,0,0,.16)}
#flight-status{position:fixed;bottom:calc(82px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:18;padding:7px 12px;border-radius:999px;font:500 11px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:rgba(255,255,255,.62);white-space:nowrap;background:rgba(20,20,25,.34);border-color:rgba(255,255,255,.12)}
#place-label{bottom:calc(120px + env(safe-area-inset-bottom))}
@media (max-width:520px){#layers{left:50%;right:auto;transform:translateX(-50%);justify-content:center}#layers button{min-width:82px}}

/* Contextual view-angle control below the right-hand options menu. */
#options-btn{width:42px;height:42px;flex:none;color:#fff;font:500 28px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;cursor:pointer}
#options-menu{position:fixed;z-index:25;top:calc(60px + env(safe-area-inset-top));right:10px;min-width:172px;display:flex;flex-direction:column;gap:2px;padding:8px;color:#fff}
#options-menu.hidden,#layers.hidden{display:none!important}
#options-menu button{padding:10px 12px;text-align:left;border:0;background:transparent;color:#fff;font:500 14px/1.2 inherit;cursor:pointer}
#options-menu span{padding:9px 12px;color:rgba(255,255,255,.54);font-size:12px}
#layers{top:calc(65px + env(safe-area-inset-top));bottom:auto;left:auto;right:10px;transform:none;display:flex;flex-direction:column;align-items:stretch;gap:2px;padding:5px;width:53px;border-radius:22px;overflow:hidden}
#layers button{min-width:0;min-height:43px;padding:10px 8px;font-size:13px;border-radius:17px}
#layer-highlight{top:0;left:5px;width:43px;height:43px;border-radius:17px;transition:transform .48s cubic-bezier(.18,1.3,.38,1),height .48s cubic-bezier(.18,1.3,.38,1)}
#flight-status{bottom:calc(22px + env(safe-area-inset-bottom))}
#place-label{bottom:calc(66px + env(safe-area-inset-bottom))}
@media(max-width:520px){#options-btn{width:38px}#layers{top:calc(65px + env(safe-area-inset-top));bottom:auto;left:auto;right:8px;transform:none;justify-content:center}#layers button{min-width:0}}

/* Rounded vertical glass capsule and lens. */
#layers{width:55px;padding:5px;border-radius:999px;box-shadow:inset 0 1px 2px rgba(255,255,255,.32),0 10px 24px rgba(0,0,0,.3)}
#layers button{min-height:43px;border-radius:999px}
#layer-highlight{left:5px;border-radius:999px;box-shadow:inset 0 1px 2px rgba(255,255,255,.46),0 5px 12px rgba(0,0,0,.18)}
#compass{position:fixed;right:10px;top:calc(65px + env(safe-area-inset-top));width:55px;height:54px;z-index:19;border-radius:999px;color:#fff;cursor:pointer;display:grid;place-items:center;background:rgba(24,24,29,.44)}
#compass-needle{display:flex;flex-direction:column;align-items:center;font:700 10px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;transition:transform .15s linear}
#compass-needle b{color:#ff625f;font-size:11px}#compass-needle i{display:block;width:2px;height:13px;background:linear-gradient(#ff625f 50%,#e5f0ff 50%);margin:2px 0}#compass-needle small{font-size:9px;color:rgba(255,255,255,.75)}
#layers{top:calc(126px + env(safe-area-inset-top))}
#flight-status{bottom:auto;left:auto;right:10px;top:calc(235px + env(safe-area-inset-top));transform:none;z-index:19;cursor:pointer}
#place-label{bottom:calc(28px + env(safe-area-inset-bottom))}
@media(max-width:520px){#compass{right:8px}#layers{top:calc(126px + env(safe-area-inset-top))}#flight-status{right:8px;top:calc(235px + env(safe-area-inset-top))}}

/* A restrained chromatic arrival, then crisp white text. Never a perpetual flicker. */
#place-label{font-size:clamp(16px,4.4vw,22px);font-weight:800;letter-spacing:.14em;background:rgba(5,8,12,.35);border:1px solid rgba(255,255,255,.12);padding:7px 14px;isolation:isolate;text-shadow:0 2px 8px #000}
#place-label::before,#place-label::after{content:attr(data-text);position:absolute;inset:7px 14px;pointer-events:none;opacity:0}
#place-label.glitch-in{animation:label-arrive .62s steps(7,end) both}
#place-label.glitch-in::before{color:#6df6ed;text-shadow:-2px 0 #50ffec;animation:label-channel-left .58s steps(5,end) both}
#place-label.glitch-in::after{color:#ff6094;text-shadow:2px 0 #ff4b7c;animation:label-channel-right .58s steps(5,end) both}
@keyframes label-arrive{0%{opacity:0;filter:blur(3px);transform:translateX(-50%) translateY(7px)}40%{opacity:1;filter:blur(1px)}100%{opacity:1;filter:none;transform:translateX(-50%) translateY(0)}}
@keyframes label-channel-left{0%,25%,55%{opacity:.85;transform:translateX(-3px)}15%,40%{opacity:.55;transform:translateX(2px)}100%{opacity:0;transform:none}}
@keyframes label-channel-right{0%,30%,60%{opacity:.7;transform:translateX(3px)}20%,48%{opacity:.5;transform:translateX(-2px)}100%{opacity:0;transform:none}}
@media(prefers-reduced-motion:reduce){#place-label.glitch-in,#place-label.glitch-in::before,#place-label.glitch-in::after{animation:none}}