/* Liquid Glass-inspired web surfaces. Content stays readable; controls float above it. */
:root { --ink:#14263d; --muted:#65758a; --blue:#2455f4; --glass:rgba(255,255,255,.62); --glass-line:rgba(255,255,255,.9); --rim:inset 0 1px 0 #fff, inset 0 -1px 0 #ffffff80; }
html { background:#e9eff8; scroll-behavior:smooth; }
body { max-width:480px; margin:auto; min-height:100dvh; background:radial-gradient(ellipse at 100% 20%,#d5e2ff 0,transparent 44%),radial-gradient(ellipse at 0 65%,#d8f0ed 0,transparent 45%),#f0f4fb; color:var(--ink); }
body:before { content:''; position:fixed; inset:0; pointer-events:none; background:radial-gradient(circle at 30% 2%,#fff9,transparent 42%); z-index:-1; }
button,a { touch-action:manipulation; }
button { transition:transform .24s cubic-bezier(.2,.9,.3,1.3),background .25s,box-shadow .25s; }
button:active { transform:scale(.965); }
.site-header { height:76px; padding:14px 22px; gap:12px; border:0; }
.site-header .brand { gap:12px; }
.site-header .brand img { width:132px; mix-blend-mode:multiply; }
.brand-divider { height:23px; background:#18345625; }
.event-brand { font-size:8px; letter-spacing:1.2px; color:#586b84; }
.event-brand b { font-size:12px; letter-spacing:3px; }
.main-nav,.site-footer,.intro-aside { display:none; }
.help-button { width:44px; height:44px; min-width:44px; padding:0; display:grid; place-items:center; border-radius:50%; background:var(--glass); border:1px solid var(--glass-line); box-shadow:var(--rim),0 4px 12px #3454830a; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
.help-button span:last-child { display:none; }
main { width:100%; max-width:480px; min-height:0; padding:15px 22px 130px; }
h1,h2,h3 { letter-spacing:-.8px; }
.journey-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:8px 0 24px; }
.journey-heading h1,.page-heading h1 { font-size:34px; line-height:1.12; font-weight:750; letter-spacing:-1.6px; }
.journey-heading p,.page-heading p { margin-top:9px; color:#65758a; font-size:13px; line-height:1.5; }
.journey-progress { width:62px; height:62px; flex:0 0 62px; padding:4px; border-radius:50%; background:conic-gradient(#2455f4 var(--progress),#d9e4f5 0); box-shadow:0 3px 12px #5a79b215; }
.journey-progress>span { width:100%; height:100%; border:2px solid #fff; border-radius:50%; background:#f3f7ff; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.journey-progress b { font-size:19px; line-height:1.1; letter-spacing:-1px; }
.journey-progress small { font-size:11px; font-weight:500; color:#7b8ca4; letter-spacing:0; }
.journey-progress .icon { width:12px; height:12px; color:#7187a5; margin-top:3px; }
.next-card { display:flex; min-height:274px; padding:22px; border-radius:30px; background:radial-gradient(ellipse at 87% 5%,#90c0fc77,transparent 56%),linear-gradient(130deg,#23486b,#142d49 77%); box-shadow:inset 0 1px 1px #ffffff80,0 18px 36px #27497920; border:1px solid #ffffff40; }
.next-card:after { right:-105px; top:-108px; width:275px; height:275px; border-color:#ffffff19; box-shadow:0 0 0 27px #ffffff05,0 0 0 53px #ffffff04; }
.next-top .eyebrow { font-size:9px; letter-spacing:1.4px; color:#d0e2fa; }
.next-top .zone-number { font-size:10px; color:#d3e3f5; }
.next-top>.icon { width:18px; height:18px; }
.next-copy { margin:63px 0 21px; position:relative; z-index:2; }
.next-card h2 { font-size:27px; line-height:1.1; font-weight:650; color:white; letter-spacing:-1px; }
.next-card p { font-size:13px; margin-top:8px; color:#d5e3f3; line-height:1.4; }
.zone-orb { position:absolute; right:23px; top:52px; width:94px; height:94px; border:1px solid #ffffffa8; border-radius:29px; transform:rotate(12deg); display:grid; place-items:center; background:linear-gradient(145deg,#ffffff80,#ffffff12 53%,#88c6fb36); backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px); box-shadow:inset 1px 2px 3px #fff7,inset -2px -3px 5px #0c304348,0 14px 30px #001b4b2e; animation:orb-float 7s ease-in-out infinite; }
.zone-orb>.icon { width:48px; height:48px; stroke-width:1.35; color:#defff0; filter:drop-shadow(0 2px 2px #03274240); }
.orb-spark { position:absolute; color:#d1edff; font-size:15px; }
.orb-spark.one { top:-15px; left:-17px; }.orb-spark.two { right:-9px; bottom:-14px; font-size:21px; }
.next-card .primary-button { background:linear-gradient(140deg,#ffffffed,#e4f0ffd9); color:#163654; border:1px solid #fff; box-shadow:inset 0 1px 0 white,0 6px 20px #00152c20; justify-content:space-between; min-height:51px; border-radius:18px; margin-top:auto; font-size:14px; }
.next-card .primary-button:hover { background:white; }
.complete-card h2 { margin-top:32px; font-size:31px; }.complete-card p { margin:10px 0 22px; }.gift-orb { top:63px; width:83px; height:83px; }
.audio-teaser { width:100%; margin:16px 0 0; display:flex; align-items:center; text-align:left; gap:13px; min-height:85px; padding:16px; border:1px solid var(--glass-line); border-radius:25px; background:linear-gradient(120deg,#ffffffad,#eef5ff8c); box-shadow:var(--rim),0 8px 22px #5c759b0b; backdrop-filter:blur(16px) saturate(150%); -webkit-backdrop-filter:blur(16px) saturate(150%); }
.audio-teaser-icon { width:43px; height:43px; flex:0 0 43px; border-radius:15px; background:linear-gradient(140deg,#c6d8ff,#ecf3ff); color:#2455e9; display:grid; place-items:center; box-shadow:inset 0 1px 1px #fff; }
.audio-teaser>span:nth-child(2) { flex:1; }.audio-teaser strong { font-size:15px; letter-spacing:-.3px; font-weight:650; }.audio-teaser small { display:block; font-size:11px; color:#6b7e96; margin-top:5px; }
.round-arrow { display:grid; place-items:center; width:29px; height:29px; border-radius:50%; color:#58708c; }.round-arrow .icon { width:16px; height:16px; }
.collection-section { margin-top:28px; }.section-heading { align-items:center; margin-bottom:13px; }.section-heading h2 { font-size:20px; font-weight:700; letter-spacing:-.6px; }.section-heading .text-button { font-size:12px; min-height:40px; }
.zone-cards { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.zone-card { min-height:152px; padding:14px; border:1px solid #ffffffc9; background:#ffffff7a; border-radius:23px; box-shadow:var(--rim),0 6px 16px #2f517508; }
.zone-card:hover { transform:translateY(-2px); box-shadow:0 9px 22px #2f517516; }.zone-card:active { transform:scale(.96); }
.zone-card-index { font-size:8px; letter-spacing:.8px; color:#6e7e95; }.zone-card-status { padding:3px 5px; font-size:7px; letter-spacing:.2px; background:#f4f8fc9c; color:#617691; border-radius:7px; }.zone-card-status.collected { color:#136e57; background:#ddf5e8; }
.zone-card-icon { width:43px; height:43px; margin:13px 0 12px; border:1px solid white; border-radius:15px; background:linear-gradient(145deg,white,var(--wash)); box-shadow:inset 0 1px 0 #fff,0 3px 8px #173d6310; }
.zone-card-icon .icon { width:23px; height:23px; }.zone-card h3 { font-size:14px; letter-spacing:-.3px; }.zone-card .zone-tagline { margin-top:5px; font-size:10px; color:#687c91; }.zone-card-arrow { display:none; }
.zone-card.done { background:linear-gradient(140deg,#ffffffae,var(--wash)); border-color:#fff; }
.zone-card.done .zone-card-icon { box-shadow:none; border:1px solid color-mix(in srgb,var(--zone) 40%,white); }
.journey-note { display:flex; justify-content:center; align-items:center; gap:7px; font-size:11px; line-height:1.5; color:#6d7f94; margin:22px 0 0; }.journey-note .icon { width:14px; height:14px; }
.mobile-nav { display:flex; position:fixed; left:50%; right:auto; bottom:calc(14px + env(safe-area-inset-bottom)); transform:translateX(-50%); width:min(424px,calc(100% - 30px)); padding:6px; border:1px solid #ffffffdf; border-radius:30px; background:linear-gradient(150deg,#ffffffb8,#eef4ff9e); backdrop-filter:blur(24px) saturate(175%); -webkit-backdrop-filter:blur(24px) saturate(175%); box-shadow:inset 0 1px 1px #fff,inset 0 -1px 2px #fff7,0 10px 30px #25477824; z-index:15; gap:0; }
.mobile-nav:before { content:''; position:absolute; top:6px; bottom:6px; left:6px; width:calc((100% - 12px)/4); border-radius:23px; background:linear-gradient(140deg,#fff,#dbe7ffb0); box-shadow:inset 0 1px 1px white,0 3px 8px #234f9220; transform:translateX(calc(var(--tab,0)*100%)); transition:transform .45s cubic-bezier(.2,.85,.25,1.1); }
.mobile-nav button { position:relative; display:flex; flex:1; min-width:0; min-height:54px; padding:5px 0; gap:4px; flex-direction:column; align-items:center; justify-content:center; color:#62758b; font-size:9px; border-radius:23px; background:transparent; }.mobile-nav button.active { background:transparent; color:#2455ea; font-weight:700; }.mobile-nav button .icon { width:21px; height:21px; }
.page-heading { margin:8px 0 25px; }.page-heading h1 { font-size:31px; }
.map-page-grid { display:flex; flex-direction:column; gap:16px; }.map-page-grid .map-guide { order:0; padding:7px 19px; border-radius:25px; background:#fff9; border-color:#fff; box-shadow:var(--rim); }.map-page-grid .map-card { min-height:245px; border-radius:28px; background:#ffffff50; border-color:#fff; box-shadow:var(--rim); }.map-page-grid .pavilion { width:calc(100% + 32px); height:230px; margin:4px 0 0 -16px; }.map-topline { top:18px; left:20px; right:20px; }.map-caption { font-size:9px; letter-spacing:1px; }.map-status { display:flex; font-size:9px; }.map-bottomline { left:20px; bottom:15px; }.map-bottomline p { font-size:10px; }
.map-list-button { min-height:73px; padding:13px 0; }.map-list-button strong { font-size:14px; }.map-list-button small { font-size:11px; }.map-list-button:last-child { border:0; }
.passport-layout { display:flex; flex-direction:column; gap:23px; }.passport-book { padding:23px 21px; background:linear-gradient(145deg,#fffffff0,#f3f6ffad); border:1px solid white; border-radius:28px; box-shadow:inset 0 1px 0 white,0 7px 0 -3px #e1e8f3,0 16px 28px #1d416912; }.passport-book:before { left:10px; border-color:#b6c8de66; }.passport-top { padding-bottom:15px; }.passport-top .eyebrow { font-size:9px; letter-spacing:1px; color:#536e8d; }.passport-top>span { font-size:13px; font-weight:700; color:#31547e; }
.passport-stamps { gap:13px; margin:23px 0; }.passport-slot { aspect-ratio:1; min-height:0; background:#f7fbff6b; border-color:#c7d7e9; border-radius:20px; }.passport-slot .seal { width:84%; height:auto; aspect-ratio:1; font-size:8px; gap:6px; letter-spacing:1px; }.passport-slot .seal .icon { width:29px; height:29px; }
.empty-stamp { width:100%; height:100%; display:flex; flex-direction:column; gap:9px; justify-content:center; align-items:center; margin:0!important; color:#617b95!important; }.empty-stamp>.icon { width:30px; height:30px; color:var(--zone); opacity:.65; }.empty-stamp strong { font-size:11px; font-weight:600; }.empty-stamp small { color:#2455e9; font-size:10px; }.passport-foot { font-size:8px; color:#69829d; }
.reward-box { padding:22px; border:1px solid white; border-radius:27px; background:#ffffff85; box-shadow:var(--rim); }.reward-box .gift-large { float:right; width:44px; height:44px; border-radius:15px; }.reward-box h2 { margin:6px 0 9px; font-size:23px; max-width:12ch; }.reward-box p { font-size:13px; }.reward-box .primary-button { margin-top:19px; }.feedback-link { width:100%; display:flex; align-items:center; gap:12px; border:1px solid #fff; background:#ffffff75; padding:18px; border-radius:22px; text-align:left; color:#426188; }.feedback-link span { flex:1; font-size:13px; }
.primary-button { min-height:52px; font-size:14px; border-radius:18px; background:linear-gradient(155deg,#487cfc,#2354ef); box-shadow:inset 0 1px 1px #b8d0ff,0 7px 15px #2354ef22; }.primary-button:hover { transform:none; background:#2658ef; }.primary-button:active { transform:scale(.97); }.secondary-button { border-radius:16px; min-height:46px; }.text-button { min-height:44px; }
.stamp-dialog,.info-dialog { width:min(480px,100%); max-width:100%; height:100dvh; max-height:100dvh; margin:0 auto; padding:0; border:0; border-radius:0; color:var(--ink); background:radial-gradient(ellipse at 85% 13%,#cfdefc,transparent 60%),linear-gradient(160deg,#f7faffee,#e4eef9f5); backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px); overflow-y:auto; }
.stamp-dialog-inner { padding:22px 24px max(26px,env(safe-area-inset-bottom)); }.dialog-close { width:44px; height:44px; background:#ffffff85; border:1px solid white; box-shadow:var(--rim); }.dialog-top .eyebrow { font-size:9px; color:#5c7696; letter-spacing:1.2px; }.stamp-zone-title { margin-top:29px; font-size:12px; }.stamp-dialog h2 { font-size:31px; margin:12px 0 9px; }.stamp-description { font-size:13px; color:#61758f; max-width:28ch; line-height:1.6; }.scanner { height:clamp(230px,34dvh,310px); margin:26px 0 19px; border-radius:35px; border:1px solid #ffffffb8; background:linear-gradient(130deg,#ffffff65,#dfeafe7a); box-shadow:var(--rim),0 14px 35px #47658e0b; }.scanner-grid { opacity:.25; }.scan-target { background:linear-gradient(145deg,#fff9,#dfeaff73); border:1px solid #fff; box-shadow:inset 0 2px 4px #fff,0 10px 25px #40699d18; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }.scan-status { font-size:12px; }.demo-hint { color:#6e8096; font-size:11px; }.stamp-steps { padding-top:19px; margin-top:23px; color:#688097; }.stamp-step { font-size:10px; }.info-dialog { padding:65px 25px 30px; }.info-dialog p { font-size:13px; }.info-dialog .eyebrow { font-size:9px; }.toast { bottom:110px; max-width:calc(100% - 32px); border-radius:18px; }
.companion-intro { display:flex; flex-direction:column; gap:0; min-height:0; padding:9px 0 0; border:0; border-radius:0; background:none; overflow:visible; }.companion-intro>div:first-child { width:100%; }.companion-intro h1 { font-size:34px; letter-spacing:-1.5px; margin:0 0 10px; }.companion-intro p { font-size:13px; line-height:1.55; color:#65758a; max-width:32ch; }.companion-visual { width:100%; height:225px; margin:24px 0 11px; border-radius:32px; background:radial-gradient(ellipse at 80% 5%,#b9d7ff,transparent 70%),linear-gradient(145deg,#dae8ff70,#cee5eb8a); border:1px solid #fff; box-shadow:var(--rim); }.visual-screen { left:22px; top:26px; transform:rotate(-8deg) scale(.84); transform-origin:top left; width:274px; height:160px; border-color:#385675; box-shadow:0 18px 26px #24496726; }.visual-phone { right:31px; bottom:17px; width:110px; height:177px; transform:rotate(12deg); border-color:#264464; background:linear-gradient(140deg,#739ee8,#284791); }.visual-ear { font-size:43px; }.visual-sync { top:16px; right:21px; border:1px solid #fff; border-radius:20px; background:#fff9; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); color:#355d8f; font-size:9px; }.visual-beam { right:40px; }
.companion-intro-actions { width:100%; margin-top:6px; display:flex; flex-direction:column; align-items:center; gap:12px; }.companion-intro-actions .primary-button { width:100%; min-height:54px; }.companion-intro-actions span { font-size:11px; color:#657991; }.companion-status { min-height:0; font-size:11px; justify-content:center; background:transparent; border:0; padding:0; margin:16px 0 23px; color:#6b8095; }.companion-status.error { padding:12px; border:1px solid #efc7c7; }.companion-library { margin-top:27px; }.companion-library .section-heading h2 { font-size:20px; }
.program-row { align-items:flex-start; padding:16px; gap:12px; border:1px solid white; border-radius:25px; background:#ffffff91; box-shadow:var(--rim); }.program-index { display:none; }.program-art { width:57px; height:64px; border-radius:15px; }.program-kicker { font-size:8px; letter-spacing:.9px; color:#657b95; }.program-details h3 { font-size:15px; }.program-details p { display:none; }.program-actions { gap:7px; margin-top:12px; }.program-actions button,.program-actions a { display:inline-flex; min-height:40px; align-items:center; justify-content:center; padding:0 10px; font-size:11px; border-radius:13px; background:#f7faff9e; border:1px solid white; color:#2e5ed4; }.program-actions button:first-child { background:#e0eaff; border-color:#e0eaff; }
.companion-disclosure { margin:20px 3px; color:#657b94; font-size:11px; }.companion-disclosure summary { cursor:pointer; min-height:40px; display:flex; align-items:center; gap:9px; }.companion-disclosure summary:before { content:'+'; font-size:17px; }.companion-disclosure[open] summary:before { content:'−'; }.companion-disclosure p { margin:0 0 14px; line-height:1.7; }
.scan-panel,.companion-player { scroll-margin-top:16px; padding:20px; border:1px solid white; border-radius:27px; background:#f9fcffd9; box-shadow:var(--rim),0 15px 30px #3154770b; }.scan-panel-head { flex-direction:column; }.camera-stage { aspect-ratio:16/9; }.camera-controls { flex-wrap:wrap; }.player-top { gap:8px; }.player-top .eyebrow { font-size:9px; letter-spacing:1px; }.player-origin { font-size:10px; }.audio-transcript { border-radius:20px; border:1px solid #e0e9ff; padding:18px; background:#eef4ff; }.audio-transcript p { font-size:20px; }.player-actions { flex-wrap:wrap; gap:10px; }.player-actions .primary-button { flex:1; }.player-actions .text-button { font-size:12px; }.companion-dock { width:min(410px,calc(100% - 38px)); bottom:calc(93px + env(safe-area-inset-bottom)); padding:10px; border:1px solid #fff9; border-radius:23px; background:#eaf2ffd9; color:#193859; backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); box-shadow:var(--rim),0 8px 24px #25477820; }.companion-dock button { width:44px; height:44px; border-radius:15px; color:#2455ea; border-color:#fff; background:#ffffffa8; }.dock-copy small { color:#617b99; }.dock-wave { color:#406cd9; }body[data-current-view="companion"] .companion-dock { display:none; }
@keyframes orb-float { 0%,100% { transform:translateY(0) rotate(12deg); }50% { transform:translateY(-6px) rotate(8deg); } }
@media (min-width:600px) { body { box-shadow:0 0 90px #26487917; } }
@media (max-width:360px) { main { padding-left:17px; padding-right:17px; }.site-header { padding-left:17px; padding-right:17px; }.event-brand,.brand-divider { display:none; }.journey-heading h1 { font-size:30px; }.journey-heading p { font-size:12px; }.journey-progress { width:55px; height:55px; flex-basis:55px; }.next-card { padding:20px; }.next-card h2 { font-size:25px; }.zone-orb { right:20px; width:80px; height:80px; }.next-copy { margin-top:66px; }.zone-card { padding:12px; }.zone-card h3 { font-size:12px; }.zone-card .zone-tagline { font-size:9px; }.audio-teaser { gap:9px; padding:13px; }.audio-teaser strong { font-size:14px; }.audio-teaser small { font-size:10px; }.page-heading h1 { font-size:29px; }.passport-book { padding:20px 17px; }.passport-stamps { gap:10px; }.passport-slot .seal { font-size:7px; gap:4px; }.visual-screen { left:16px; transform:rotate(-8deg) scale(.75); }.visual-phone { right:18px; transform:rotate(12deg) scale(.9); transform-origin:bottom right; }.companion-intro h1 { font-size:31px; }.stamp-dialog-inner { padding:19px; }.stamp-dialog h2 { font-size:28px; } }
@media (prefers-reduced-transparency:reduce) { :root { --glass:#f8faff; }.mobile-nav,.audio-teaser,.companion-dock,.zone-card { background:#f5f8ff; backdrop-filter:none; -webkit-backdrop-filter:none; } }
@media (prefers-contrast:more) { :root { --muted:#304964; }.journey-heading p,.page-heading p,.zone-card .zone-tagline,.companion-intro p,.journey-note { color:#304964; }.mobile-nav,.zone-card,.audio-teaser { border-color:#819ab9; background:#f8fbff; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.zone-orb { animation:none; }.mobile-nav:before { transition:none; } }

@media(max-width:360px){.zone-orb{top:40px;width:70px;height:70px}.zone-orb>.icon{width:39px;height:39px}}