:root{--bg:#0a101c;--ink:#f5f2e9;--muted:#89939c;--line:rgba(218,233,238,.14);--mint:#cbefdb;--accent:#c9f1dc;font-family:'DM Sans',sans-serif;color:var(--ink);font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:var(--bg);overflow:hidden}button,a,select,textarea{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}button:focus-visible,a:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--mint);outline-offset:5px}a{color:inherit;text-decoration:none}.app{position:relative;width:100%;height:100svh;min-height:640px;overflow:hidden;background:radial-gradient(ellipse at 68% 48%,#162936 0,transparent 48%),radial-gradient(ellipse at 35% 82%,#242b3c 0,transparent 55%),#0a101c;transition:background 1.8s}.app.day{background:radial-gradient(ellipse at 65% 40%,#46525b 0,transparent 55%),#243240}.sky-wash{position:absolute;inset:0;background:radial-gradient(ellipse at 60% 105%,#94bfb81c,transparent 50%)}.grain{pointer-events:none;position:absolute;z-index:6;inset:0;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.6' filter='url(%23n)'/%3E%3C/svg%3E")}#world{position:absolute;inset:0;z-index:1}#world canvas{display:block;outline:0}header{height:102px;position:relative;z-index:8;display:flex;align-items:center;justify-content:space-between;padding:0 4%;border-bottom:1px solid var(--line);margin:0 2%}.brand{display:flex;align-items:center;gap:13px;font-weight:650;letter-spacing:2.4px;font-size:15px}.brand-symbol{border:1px solid #f5f2e983;border-radius:50%;height:39px;width:39px;display:grid;place-items:center;font-family:serif;font-size:23px;letter-spacing:0}.brand-year{display:block;font-size:12px;font-weight:400;color:#a5b8bd;letter-spacing:5.1px;margin-top:3px}nav{display:flex;gap:32px;margin-left:55px}.nav-link{font-size:12px;color:#87959d;padding:12px 0;position:relative}.nav-link.active{color:var(--ink)}.nav-link.active:after{content:'';height:3px;width:3px;background:var(--mint);border-radius:50%;position:absolute;left:50%;bottom:2px}.nav-link span{font-size:15px;margin-left:6px}.header-right{display:flex;align-items:center;gap:30px}.local-clock{font-size:9px;letter-spacing:1.1px;display:flex;align-items:center;gap:8px;color:#9eafb5}.local-clock b{font-family:monospace;font-size:11px;font-weight:400;color:#c7d5d6}.local-clock>i,#scene-status>i,.route-loading>i{height:5px;width:5px;background:#a5e9c8;border-radius:100%;display:inline-block;box-shadow:0 0 10px #a5e9c855}.plan-button{border:1px solid #99afab55;padding:13px 18px;border-radius:4px;font-size:11px}.plan-button span{padding-left:26px;font-size:17px}.plan-button:hover{background:#c9f1dc;color:#102b26}.intro{position:absolute;z-index:3;top:19%;left:6%;pointer-events:none;transition:opacity .7s,transform .7s}.eyebrow{font-size:9px;letter-spacing:2.6px;font-weight:500;color:#b4c3c6;display:flex;align-items:center;gap:9px}.tiny-star{color:#b7e8ce;font-size:21px;margin-right:4px}.intro h1{font-size:clamp(64px,6.2vw,99px);line-height:1.03;letter-spacing:-5px;font-weight:450;margin:26px 0 20px}.intro h1 em{font-family:'Italiana',Georgia,serif;font-weight:400;color:#cce6d8;letter-spacing:-3px;font-size:1.08em}.intro-copy{font-size:12px;line-height:1.9;color:#95a5b0;letter-spacing:.1px}.explore-link{pointer-events:auto;font-size:11px;display:flex;gap:52px;align-items:center;padding:16px 0;margin-top:9px}.explore-link span{font-size:23px;color:#cce6d8}.intro-rule{height:1px;width:44px;background:#94a59e63;margin-top:19px}.edition{display:block;color:#637682;font-size:8px;letter-spacing:1.9px;margin-top:20px}.world-caption{position:absolute;right:6%;top:20%;z-index:3;text-align:right;pointer-events:none}.crosshair{display:block;color:#b0c2c0;font-size:25px;margin-bottom:13px;font-weight:300}.world-caption p{font-size:9px;letter-spacing:1.7px;line-height:1.8;color:#adbfc2}.caption-line{display:block;background:#8b9f9a4d;height:1px;width:25px;margin:20px 0 20px auto}.world-caption .caption-small{font-size:9px;letter-spacing:.2px;line-height:1.8;color:#6f858f}.scene-meta{position:absolute;right:6%;top:46%;z-index:3;display:flex;flex-direction:column;gap:7px;font-size:8px;letter-spacing:1.6px;color:#afc6c9;text-align:right}.scene-meta i{margin-right:6px}#weather-source{color:#6e8893;font-size:8px;letter-spacing:.5px}.scene-tools{position:absolute;left:6%;bottom:145px;z-index:4;display:flex;gap:6px}.icon-button{border:1px solid var(--line);border-radius:50%;width:33px;height:33px;display:grid;place-items:center;color:#93a6ae;font-size:16px;background:#0d17263d}.icon-button:hover,.icon-button.enabled{color:#d3eddf;border-color:#aac8ba88;background:#97d0b41c}.weather-switch{position:absolute;right:6%;bottom:144px;z-index:5;display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:14px;width:330px}.weather-switch>span{font-size:8px;letter-spacing:1.8px;color:#859ba1}.weather-switch>div{display:flex;padding:4px;border:1px solid var(--line);border-radius:30px;background:#0b182980;backdrop-filter:blur(18px)}.weather-switch button{font-size:9px;padding:7px 11px;border-radius:20px;color:#7f969f;transition:.3s}.weather-switch button.selected{background:#cee6d5;color:#132b28}.weather-switch button span{margin-left:4px}.weather-switch small{font-size:8px;color:#7f949d;letter-spacing:.3px;width:100%;text-align:right;margin-top:-5px}.labels{position:absolute;inset:0;z-index:3;pointer-events:none}.island-label{position:absolute;transform:translate(-50%,0);text-align:left;pointer-events:auto;min-width:145px;white-space:nowrap;padding:0;transition:opacity .4s}.island-label:before{content:'';position:absolute;left:0;top:-24px;width:1px;height:18px;background:linear-gradient(transparent,#79978b99)}.island-label .label-top{display:flex;align-items:center;gap:6px;font-size:7px;letter-spacing:1.3px;color:#91a5a9;margin-bottom:6px}.island-label .label-name{font-size:18px;font-weight:450;letter-spacing:-.4px;display:flex;align-items:center;gap:13px}.island-label .label-name span{font-family:serif;font-size:12px;color:#8ba49e}.island-label .label-bottom{font-size:8px;margin-top:7px;color:#7f969e;display:flex;gap:10px}.island-label:hover .label-name{color:var(--mint)}.island-label .label-arrow{display:inline-block!important;font-family:inherit!important;margin-left:2px;font-size:15px!important;color:#b8d7c8!important}.tooltip{position:absolute;z-index:9;border:1px solid #a8cdba55;background:#0f202ce8;border-radius:4px;backdrop-filter:blur(12px);padding:9px 13px;pointer-events:none;font-size:10px;color:#cce7d7}footer{position:absolute;bottom:0;left:4%;right:4%;height:111px;z-index:5;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line)}.footnote{font-size:10px;line-height:1.8;color:#728791;letter-spacing:.2px}.footnote b{font-weight:400;color:#adbdc0}.made-with{font-size:7px;letter-spacing:1.4px;line-height:2.2;color:#6d828b;text-align:right}.made-with b{font-size:9px;letter-spacing:.4px;color:#adc3bf;font-weight:400}.made-with span{margin-left:10px}.city-dock{display:flex;gap:0;border:1px solid #a2bcb323;border-radius:8px;background:linear-gradient(110deg,#abc6b911,#0c192555);backdrop-filter:blur(24px);padding:7px}.city-dock button{position:relative;display:flex;gap:14px;align-items:center;padding:13px 21px;text-align:left;border-radius:4px;transition:.3s}.city-dock button+button:before{content:'';position:absolute;left:0;height:28px;width:1px;background:var(--line)}.city-dock button:hover,.city-dock button.selected{background:#b6d9c315}.city-dock button>span:nth-child(2){font-size:11px;font-weight:450;letter-spacing:.1px}.city-dock small{display:block;font-size:6.5px;letter-spacing:1.5px;color:#7a9198;margin-top:6px}.city-number{font-family:Georgia,serif;font-size:10px;color:#70888e}.city-glyph{font-family:serif;color:#a5bdb7;font-size:20px;padding-left:12px}.loading{position:absolute;inset:0;background:#0b121e;z-index:30;display:flex;align-items:center;justify-content:center;flex-direction:column;transition:opacity 1s,visibility 1s}.loading.done{opacity:0;visibility:hidden}.loading-orbit{border:1px solid #8eae9b44;border-radius:50%;width:85px;height:85px;display:grid;place-items:center;position:relative}.loading-orbit:after{content:'';position:absolute;inset:-12px;border:1px solid #bcdac51a;border-top-color:#bcdac5;border-radius:50%;animation:spin 5s linear infinite}.loading-orbit span{font:38px Georgia,serif;color:#cbe6d3}.loading p{font:29px 'Italiana',Georgia,serif;margin:35px 0 18px}.loading>span{color:#748c93;font-size:8px;letter-spacing:2px}.loading-bar{width:160px;height:1px;background:#244039;margin-top:22px}.loading-bar i{display:block;width:0;height:1px;background:#c9edda;transition:width .3s}@keyframes spin{to{transform:rotate(360deg)}}.scrim{position:absolute;inset:0;background:#03081222;z-index:10}.drawer{position:absolute;right:0;top:0;bottom:0;width:410px;max-width:100%;z-index:11;background:#101e28f5;backdrop-filter:blur(28px);border-left:1px solid #c6ded029;padding:72px 35px 30px;overflow:auto;transform:translateX(102%);transition:transform .6s cubic-bezier(.2,.8,.2,1);box-shadow:-30px 0 90px #0002}.drawer.open{transform:translateX(0)}.close{position:absolute;right:24px;top:22px;width:32px;height:32px;border:1px solid #a8bcba44;border-radius:50%;font-size:25px;line-height:26px;font-weight:300;color:#a9bdbe}.close:hover{background:#b8d9c522}.drawer .eyebrow{font-size:8px;letter-spacing:2px}.drawer h2{font:45px 'Italiana',Georgia,serif;margin:18px 0 4px}.drawer .zh-name{font:15px serif;letter-spacing:7px;color:#a8cbbb}.drawer .tagline{font-size:13px;line-height:1.7;color:#c3d1d0;margin-top:23px}.drawer .weather-detail{display:flex;gap:16px;border-block:1px solid var(--line);padding:17px 0;margin:24px 0;color:#a3bcb9;font-size:10px}.section-label{font-size:8px;letter-spacing:2px;color:#8da6ab;margin:28px 0 15px}.tip{border-bottom:1px solid var(--line);padding:0 0 20px;margin-bottom:18px}.tip h3{font-size:13px;font-weight:500;line-height:1.5;margin:0 0 9px}.tip p{font-size:11px;line-height:1.9;color:#8fa5ae;margin:0 0 9px}.source-link{font-size:8px;color:#b1cabb;text-decoration:underline;text-underline-offset:3px}.art-note{font-size:9px;color:#788f99;line-height:1.8;margin:20px 0}.primary-button{display:flex;align-items:center;justify-content:space-between;width:100%;padding:16px 19px;border-radius:4px;background:#cbe8d6;color:#142c27;font-size:11px;font-weight:550;transition:.25s}.primary-button:hover{background:#e0f3e7}.primary-button:disabled{opacity:.5;cursor:progress}.primary-button span{font-size:19px}dialog{color:var(--ink);background:#101d29;border:1px solid #9cbaa438;border-radius:12px;max-height:90svh;width:570px;max-width:calc(100vw - 30px);padding:40px 45px;overflow:auto;box-shadow:0 20px 100px #0008}dialog::backdrop{background:#030912aa;backdrop-filter:blur(12px)}.planner-intro h2{font-size:45px;line-height:1.05;letter-spacing:-1.5px;font-weight:450;margin:20px 0 13px}.planner-intro em{font:italic 52px 'Italiana',Georgia,serif;color:#c7e5d5}.planner-intro p{font-size:11px;line-height:1.8;color:#91a7b0}.planner-intro .eyebrow{font-size:8px}form{margin-top:26px}label{display:flex;flex-direction:column;gap:10px;font-size:8px;letter-spacing:1.5px;color:#94adb1;margin-bottom:20px}select,textarea{width:100%;padding:12px;background:#ffffff05;border:1px solid #a3bfad33;border-radius:4px;font:11px 'DM Sans',sans-serif;color:#d2e0dd;resize:vertical}select option{background:#142331}.form-row{display:flex;gap:15px}.form-row label{width:50%}.planner-note{font-size:8px;line-height:1.8;color:#6b858f;margin:18px 0 0}.route-result{padding-top:25px}.route-result h3{font:30px 'Italiana',serif;margin:10px 0 15px}.route-result p,.route-result li{font-size:11px;line-height:1.9;color:#abc0c6}.route-step{border-left:1px solid #9abca555;padding:0 0 20px 19px;margin-left:5px;position:relative}.route-step:before{content:'';position:absolute;left:-4px;top:5px;background:#badfc9;width:7px;height:7px;border-radius:50%}.route-step b{font-size:12px;color:#dae8e0;font-weight:500}.route-step small{display:block;color:#859d9e;font-size:9px;margin-bottom:5px}.route-step p{margin:5px 0}.route-status{font-size:9px;line-height:1.8;padding:14px;background:#adc9ba0c;border-radius:5px;border:1px solid #a3bcab22;color:#a1bdb6}.route-loading{font-size:11px;color:#c6e8d5;line-height:1.8;padding-top:25px}.route-loading i{margin-right:8px;animation:pulse 1s alternate infinite}.route-actions{display:flex;gap:10px;margin-top:16px}.route-actions button{border:1px solid var(--line);font-size:10px;padding:10px 15px;border-radius:4px}.toast{position:absolute;z-index:50;left:50%;bottom:125px;transform:translate(-50%,20px);background:#d5ecdf;color:#193b32;padding:14px 20px;font-size:11px;border-radius:6px;opacity:0;pointer-events:none;transition:.3s;max-width:90%;text-align:center}.toast.show{opacity:1;transform:translate(-50%,0)}.exploring .intro{opacity:0;transform:translateY(-15px);pointer-events:none}.exploring .intro button{pointer-events:none}.exploring .world-caption{opacity:0}@keyframes pulse{to{opacity:.2}}@media(min-width:1600px){.intro{top:21%}.intro h1{font-size:110px}.intro-copy{font-size:14px}.world-caption{top:24%}.island-label .label-name{font-size:21px}}@media(max-width:1100px){header{padding:0 3%}.local-clock{display:none}.intro{top:18%}.intro h1{font-size:70px}.world-caption{right:5%}.city-dock button{padding:12px 16px}.city-glyph{display:none}.footnote{font-size:9px}.made-with{font-size:6px}.scene-meta{top:42%}.intro-copy{font-size:11px}}@media(max-width:760px){.app{min-height:570px}header{height:80px;margin:0 5%;padding:0}.brand{font-size:12px;gap:8px}.brand-symbol{height:31px;width:31px;font-size:19px}.brand-year{font-size:9px;letter-spacing:4.1px}nav{display:none}.header-right{gap:0}.plan-button{font-size:10px;padding:10px 12px}.plan-button span{padding-left:15px}.intro{top:108px;left:7%}.intro h1{font-size:55px;letter-spacing:-3px;margin:18px 0 13px;line-height:.98}.intro h1 br{display:none}.intro h1 em{display:block;font-size:1.1em}.eyebrow{font-size:6.5px;letter-spacing:1.8px;gap:3px}.tiny-star{font-size:17px}.intro-copy{font-size:9px;line-height:1.7;max-width:240px}.explore-link{font-size:10px;gap:28px;padding:6px 0}.explore-link span{font-size:18px}.intro-rule,.edition,.world-caption,.scene-meta{display:none}.weather-switch{bottom:115px;right:6%;width:250px;gap:8px}.weather-switch>span{display:none}.weather-switch button{font-size:8px;padding:6px 9px}.weather-switch small{font-size:7px}.scene-tools{left:6%;bottom:125px;gap:5px}.icon-button{width:28px;height:28px;font-size:13px}#capture{display:none}footer{height:94px;left:5%;right:5%}.footnote,.made-with{display:none}.city-dock{width:100%;justify-content:space-between;padding:4px}.city-dock button{padding:12px 9px;gap:8px;flex:1}.city-dock button>span:nth-child(2){font-size:10px}.city-dock small{font-size:5px;letter-spacing:.7px}.city-number{font-size:8px}.island-label{min-width:90px}.island-label .label-name{font-size:13px;gap:5px}.island-label .label-name span{font-size:10px}.island-label .label-top{font-size:5px;letter-spacing:.8px}.island-label .label-bottom{font-size:6px;gap:5px;margin-top:4px}.island-label:before{height:10px;top:-15px}.drawer{width:100%;padding:65px 28px 25px}.drawer h2{font-size:42px}.drawer .tip p{font-size:12px}dialog{padding:35px 25px}.planner-intro h2{font-size:37px}.planner-intro em{font-size:44px}.loading p{font-size:24px}.toast{bottom:165px;font-size:10px}.form-row{gap:9px}.weather-switch>div{backdrop-filter:blur(8px)}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01ms!important}}
@media(min-width:761px){.intro{top:18%}.intro h1{font-size:clamp(64px,6vw,99px);margin:22px 0 18px}.intro-copy{font-size:11px;max-width:300px}.weather-switch{right:auto;left:6%;bottom:190px;justify-content:flex-start;width:260px}.weather-switch>span{display:none}.weather-switch small{text-align:left}.intro-rule,.edition{display:none}.scene-tools{bottom:140px}}

@media(max-width:760px){.intro h1{font-size:51px}.island-label .label-top{font-size:5px}.city-dock button{padding-inline:6px}.intro-copy{max-width:270px}}
/* The city is the interface. Notes stay in the margins. */
.experience{position:absolute;inset:102px 0 0;z-index:7;pointer-events:none}.experience[hidden]{display:none}.experience button,.experience input{pointer-events:auto}.experience-back{position:absolute;left:6%;top:30px;color:#b3c7c8;display:flex;gap:17px;align-items:center;font-size:21px}.experience-back span{font-size:8px;letter-spacing:2px}.experience-heading{position:absolute;left:6%;top:105px}.experience-heading .eyebrow{font-size:8px;letter-spacing:2.3px;color:#8eaaa9}.experience-heading h2{font-weight:400;font-size:clamp(35px,3.2vw,56px);letter-spacing:-1.7px;line-height:1.15;margin:23px 0 18px}.experience-heading h2 em{font-family:'Italiana',Georgia,serif;font-size:1.12em;font-weight:400;color:#cee5d4}.experience-heading>p{font-size:11px;color:#90a8af;line-height:1.9;max-width:280px}.experience-controls{position:absolute;left:6%;top:350px;width:285px}.experience-primary{display:flex;align-items:center;justify-content:space-between;width:100%;padding:16px 18px;color:#17392f;background:#d0ead8;border:1px solid #cfead7;border-radius:4px;font-size:11px}.experience-primary:hover{background:#e7f4e9}.experience-primary span{font-size:21px}.experience-primary:disabled{opacity:.6;cursor:wait}.experience-fineprint{font-size:7px;color:#6e8c96;line-height:1.7;display:block;margin-top:12px;max-width:270px}.interaction-hint{display:flex;align-items:center;gap:12px;margin:0 0 20px;font-size:10px;color:#a5c0bc}.hand-symbol{font-size:27px}.shape-control{display:flex;flex-wrap:wrap;align-items:center;gap:15px}.shape-control>span,.glaze-picker>span{font-size:7px;letter-spacing:1.5px;color:#8ea8ac}.shape-control input{flex:1;width:120px;height:2px;accent-color:#c5e5d1;cursor:ew-resize}.shape-control small{font-size:8px;color:#6f9098;display:block;width:100%;margin-top:-7px}.glaze-picker{display:flex;align-items:center;gap:12px;margin:22px 0 26px}.glaze-picker>span{margin-right:auto}.swatch{width:23px;height:23px;border-radius:50%;border:3px solid #10212e;box-shadow:0 0 0 1px #738c8a66}.swatch.chosen{box-shadow:0 0 0 1px #d5efdb}.swatch.cobalt{background:linear-gradient(135deg,#f0f4ed 48%,#3d64a8 50%)}.swatch.jade{background:#9cc8b5}.swatch.ember{background:#c18d69}.experience-footer{position:absolute;bottom:31px;left:6%;right:6%;display:flex;align-items:center;justify-content:space-between;border-top:1px solid #a9cab326;padding-top:20px}.experience-footer>button{font-size:10px;color:#9eb7b9}.experience-footer>button span{margin-left:20px;color:#d3e9d8}.passport{display:flex;align-items:center;gap:12px}.passport-stamp{display:grid;place-items:center;border:1px dashed #a2c9b933;width:35px;height:35px;border-radius:50%;font:18px serif;color:#536d78;transition:.7s}.passport-stamp.collected{border:1px solid #bbdec4;color:#d8efde;box-shadow:0 0 20px #9ec9af11;transform:rotate(-12deg)}.passport small{font-size:6px;letter-spacing:1.3px;line-height:1.8;color:#83a19e;margin-left:7px}.in-experience footer,.in-experience .scene-meta,.in-experience .scene-tools,.in-experience .weather-switch,.in-experience .world-caption,.in-experience .labels{visibility:hidden;pointer-events:none}.in-experience .intro{visibility:hidden}.ticket{border:1px solid #a7ceba33;border-radius:4px;display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;background:linear-gradient(125deg,#b5d5be0a,transparent);position:relative;overflow:hidden}.ticket>div{padding:19px}.ticket span{font-size:6px;letter-spacing:1.5px;color:#91b1ad}.ticket strong{display:block;font-size:25px;letter-spacing:2px;font-weight:450;margin:14px 0}.ticket strong i{background:none!important;box-shadow:none!important;height:auto!important;width:auto!important;color:#b9d7c4;margin-inline:10px;font:21px serif}.ticket small{font-size:6px;letter-spacing:1px;color:#6d8e94}.ticket-punch{height:118px;border-left:1px dashed #9ebeb633;width:39px;background:repeating-linear-gradient(0deg,transparent,transparent 5px,#a9cbb211 5px,#a9cbb211 7px)}.order-picker{display:flex;gap:12px;margin-bottom:24px}.order-item{border:1px solid #86a9a638;border-radius:6px;width:50%;padding:20px 7px 14px;display:flex;align-items:center;flex-direction:column;background:#8bcbb007;transition:.25s}.order-item.chosen{border-color:#b7ddc6;background:#9cccb51a}.order-item b{font-size:10px;font-weight:450;margin-top:20px}.order-item small{font-size:5px;letter-spacing:1px;color:#7b9a9b;margin-top:7px}.cup-drawing{display:block;width:27px;height:36px;border:1px solid #c2d7d2;border-top:3px solid #c2d7d2;border-radius:3px 3px 7px 7px;position:relative;transform:rotate(-9deg);background:linear-gradient(0deg,#a2bfa022 60%,transparent 60%)}.cup-drawing:after{content:'';position:absolute;left:17px;top:-13px;width:1px;height:23px;background:#a6c1b7;transform:rotate(10deg)}.bowl-drawing{display:block;width:38px;height:25px;border:1px solid #c2d7d2;border-top:3px solid #c2d7d2;border-radius:3px 3px 20px 20px;margin-top:11px;position:relative;background:#b4cba515}.bowl-drawing:after{content:'∿ ∿';font-size:15px;color:#8eaaa0;position:absolute;top:-27px;left:5px}.experience-progress{position:absolute;bottom:111px;left:38%;right:12%;height:1px;background:#99c8ab33}.experience-progress[hidden]{display:none}.experience-progress i{display:block!important;height:1px!important;border-radius:0!important;width:0;background:#d1edd8!important;box-shadow:0 0 9px #bdedcc66!important;transition:width .05s linear}.experience-progress span{position:absolute;top:13px;font-size:7px;color:#9eb7b5;letter-spacing:1.7px}.arrival{position:absolute;right:8%;top:24%;opacity:0;transform:translateY(15px);transition:opacity .8s,transform .8s;pointer-events:none;text-align:right}.arrival.visible{opacity:1;transform:translateY(0)}.arrival small{font-size:7px;color:#abc8b3;letter-spacing:2px}.arrival strong{display:block;font-weight:400;font-size:24px;line-height:1.3;margin-top:12px}.arrival em{font:italic 32px 'Italiana',serif;color:#c3e4d0}.stamp-reveal{position:absolute;left:58%;top:33%;z-index:16;width:180px;height:180px;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;opacity:0;transform:scale(1.4) rotate(-20deg);transition:opacity .6s,transform 1s cubic-bezier(.17,.89,.3,1.2)}.stamp-reveal[hidden]{display:none}.stamp-reveal.show{opacity:1;transform:scale(1) rotate(-10deg)}.stamp-orbit{position:absolute;inset:0;border:1px solid #c8e9cd;border-radius:50%;box-shadow:0 0 0 8px #b7dcbe0e,0 0 60px #a0d4b244;background:#0d2636dd;backdrop-filter:blur(5px)}.stamp-character{z-index:1;font:53px serif;color:#d8efda}.stamp-name{z-index:1;font-size:9px;letter-spacing:2px;margin-top:13px}.stamp-caption{z-index:1;font-size:5px;letter-spacing:.7px;margin-top:10px;color:#b0ccbd}.ride-hud{position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,#03111dcc,transparent 35%,transparent 75%,#03111d88)}.ride-hud[hidden]{display:none}.ride-hud>span{position:absolute;left:6%;top:30px;font-size:9px;letter-spacing:2px;color:#d4eddd}.ride-hud strong{position:absolute;left:6%;bottom:145px;font-weight:400;line-height:1.1;font-size:38px;text-shadow:0 2px 30px #000}.ride-hud em{font:italic 53px 'Italiana',serif;color:#cee5d7}.ride-hud>small{position:absolute;right:6%;top:30px;font-size:6px;letter-spacing:1.8px;color:#a2bdb5}.ride-hud button{position:absolute;right:6%;bottom:130px;padding:14px 18px;border:1px solid #b9d2c688;border-radius:4px;font-size:11px;background:#0b1c28aa;backdrop-filter:blur(10px)}.riding .experience-back,.riding .experience-heading,.riding .experience-controls{visibility:hidden}.drawer{top:auto;bottom:120px;right:5%;height:auto;max-height:70%;width:360px;border:1px solid #a5c7b433;border-radius:10px;padding:55px 26px 25px;transform:translateX(130%)}.drawer h2{font-size:32px;margin:14px 0}.drawer .tip{margin-bottom:0;border-bottom:0;padding-bottom:0}.drawer .tip p{font-size:12px;line-height:1.85}.note-nav{display:flex;align-items:center;justify-content:space-between;margin-top:24px;font-size:8px;color:#9ab6b5}.note-nav button{border:1px solid #a1c5b533;border-radius:50%;width:28px;height:28px;font-size:17px}.scrim{background:#0002}.in-experience .scrim{background:transparent}.in-experience .drawer{z-index:15}
@media(max-height:800px) and (min-width:761px){.experience-heading{top:85px}.experience-heading h2{font-size:36px;margin:18px 0 13px}.experience-controls{top:285px;width:260px}.interaction-hint{margin-bottom:13px}.glaze-picker{margin:17px 0}.ticket{margin-bottom:16px}.ticket>div{padding:13px 18px}.ticket strong{margin:10px 0}.ticket-punch{height:100px}.order-item{padding-top:14px}.order-picker{margin-bottom:15px}.experience-primary{padding:12px 16px}}
@media(max-width:760px){.experience{top:80px}.experience-back{left:7%;top:20px;font-size:18px;gap:10px}.experience-back span{font-size:6px}.experience-heading{left:7%;top:65px}.experience-heading .eyebrow{font-size:6px}.experience-heading h2{font-size:33px;letter-spacing:-1px;margin:16px 0 10px;line-height:1.1}.experience-heading>p{font-size:9px}.experience-controls{left:7%;right:7%;top:auto;bottom:113px;width:auto;max-width:100%}.interaction-hint{font-size:8px;margin-bottom:8px}.hand-symbol{font-size:20px}.shape-control{gap:10px}.shape-control small{display:none}.glaze-picker{margin:15px 0}.glaze-picker>span{margin-right:8px}.swatch{height:20px;width:20px}.experience-primary{padding:12px 15px;font-size:10px}.experience-fineprint{font-size:6px;margin-top:7px;max-width:100%}.experience-footer{bottom:26px;left:7%;right:7%;padding-top:17px;gap:10px}.experience-footer>button{font-size:7px}.experience-footer>button span{display:none}.passport{gap:5px}.passport-stamp{height:25px;width:25px;font-size:13px}.passport small{font-size:5px;margin-left:3px}.ticket{width:100%;margin-bottom:13px}.ticket>div{padding:13px 17px}.ticket strong{font-size:21px;margin:9px 0}.ticket-punch{height:88px}.ticket small{font-size:5px}.order-picker{margin-bottom:12px;gap:9px}.order-item{flex-direction:row;flex-wrap:wrap;padding:13px;gap:10px}.order-item b{font-size:9px;margin-top:0}.order-item small{display:none}.cup-drawing{width:18px;height:25px}.bowl-drawing{width:25px;height:18px;margin-top:7px}.arrival{right:8%;top:39%}.arrival small{font-size:5px}.arrival strong{font-size:18px}.arrival em{font-size:22px}.experience-progress{left:7%;right:7%;bottom:97px}.experience-progress span{font-size:5px;letter-spacing:1px;top:7px}.stamp-reveal{width:135px;height:135px;left:calc(50% - 67px);top:42%}.stamp-character{font-size:39px}.stamp-name{font-size:7px}.stamp-caption{font-size:4px}.ride-hud strong{left:7%;font-size:29px;bottom:180px}.ride-hud em{font-size:42px}.ride-hud button{bottom:129px;left:7%;right:auto;font-size:9px}.ride-hud>span{font-size:7px;left:7%}.ride-hud>small{font-size:4px;right:7%}.drawer{left:5%;right:5%;bottom:115px;width:90%;padding:50px 22px 22px}.drawer h2{font-size:29px}}
.in-experience footer,.in-experience .scene-meta,.in-experience .scene-tools,.in-experience .weather-switch,.in-experience .world-caption,.in-experience .labels{display:none!important}
.experience:before{content:attr(data-glyph);position:absolute;right:8%;top:1%;font-family:Georgia,'Songti SC',serif;font-size:300px;color:#c9e6d6;opacity:.035;pointer-events:none}.riding .experience:before{display:none}@media(max-width:760px){.experience:before{font-size:210px;right:3%;top:14%}}
.golden .experience-heading>.eyebrow,.golden .experience-heading>p,.golden .experience-fineprint,.golden .shape-control>span,.golden .shape-control small,.golden .glaze-picker>span,.golden .interaction-hint,.golden .experience-footer>button,.golden .experience-back,.golden .passport small{color:#e4dfd1}.golden .ticket small,.golden .ticket span{color:#dfd8c8}.golden .experience-footer,.golden header{border-color:#eee5d126}
#passport-reset{font-size:14px;color:#87a79c;margin-left:6px;padding:6px;pointer-events:auto}#passport-reset:hover{color:#d2ebdb}@media(max-width:760px){#passport-reset{font-size:12px;margin-left:0;padding:2px}}

/* Editorial polish: quieter chrome, clearer hierarchy, one gesture per city. */
:root{--line:rgba(218,233,238,.11);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.app:after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(ellipse at 62% 50%,transparent 38%,#02091424 100%)}
header{border-bottom-color:#c3d8d51a}.nav-link,.plan-button{transition:color .25s,background .25s,border-color .25s}
.nav-link:hover{color:#e6efe8}.nav-link.active:after{width:4px;height:4px;background:#c6e7d5}
.brand-symbol{border-color:#d6e3da66}.local-clock b{font-variant-numeric:tabular-nums;letter-spacing:.4px}
.intro h1{letter-spacing:-3.7px;font-weight:400;line-height:1.04}.intro h1 em{letter-spacing:-2.5px;font-size:1.06em;color:#d2e9dc}
.intro-copy{color:#a5b5bb;line-height:1.85}.intro .eyebrow{color:#9ab4b7;letter-spacing:2px}
.explore-link{gap:24px;width:fit-content;color:#e4ede6}.explore-link>span{display:grid;place-items:center;width:34px;height:34px;border:1px solid #bbd5c33d;border-radius:50%;font-size:18px;transition:transform .35s,background .35s,border-color .35s}
.explore-link:hover>span{transform:translate(3px,-3px);background:#bed7c61a;border-color:#c5e4d189}
.world-caption .crosshair{font-size:20px;font-weight:300;opacity:.75}.world-caption p{color:#a7baba}.world-caption .caption-small{color:#8da3aa}
.scene-meta{color:#a1c0bc}#weather-source{color:#91a8af}
.icon-button{width:35px;height:35px;border-color:#a8c4bc2e;background:#0b182448;transition:background .3s,border-color .3s,transform .3s;color:#a4babd}.icon-button svg{width:16px;height:16px;display:block}.icon-button:hover{transform:translateY(-2px)}
.weather-switch>div{border-color:#b7cebf2d;box-shadow:inset 0 1px 0 #d7e9db06}.weather-switch button{font-size:10px;line-height:1.3;color:#9cb1b7;padding:8px 12px}.weather-switch button.selected{background:#d3e8da;box-shadow:0 2px 10px #0002}.weather-switch small{color:#95aaaf;line-height:1.5}
.island-label{padding:2px 0;outline-offset:9px;transition:opacity .4s,color .3s}.island-label .label-top{font-size:8px;letter-spacing:1.1px;color:#9cb5b5}.island-label .label-name{font-weight:400;letter-spacing:-.35px;transition:color .3s}.island-label .label-name>span{color:#9fb5b0}.island-label .label-bottom{font-size:9px;color:#90a8ae;transition:opacity .25s,transform .3s}.island-label .label-arrow{transition:transform .35s}
.label-invitation{position:absolute;bottom:2px;left:0;font-size:9px;letter-spacing:.1px;color:#cce6d5;display:flex;gap:13px;align-items:center;opacity:0;transform:translateY(4px);transition:opacity .25s,transform .3s;pointer-events:none}.label-invitation>span{font-size:12px}
.island-label.is-hovered .label-name{color:#d9efdf}.island-label.is-hovered .label-arrow{transform:translate(2px,-2px)}.island-label.is-hovered .label-bottom{opacity:0;transform:translateY(-3px)}.island-label.is-hovered .label-invitation{opacity:1;transform:translateY(0)}
.city-dock{border-color:#a9c6b52b;background:linear-gradient(125deg,#acc8bb0c,#0c19255c);border-radius:6px;box-shadow:0 12px 35px #0109131a}.city-dock button{transition:background .35s}.city-dock button.is-hovered{background:#b6d9c315}.city-dock small{color:#92a9ae;letter-spacing:1.2px}.city-glyph{transition:color .35s,transform .35s}.city-dock button.is-hovered .city-glyph{color:#d5eadb;transform:rotate(-6deg)}.city-number{color:#91a8ac}
.experience-heading h2{font-weight:400;letter-spacing:-1.4px}.experience-heading>p{color:#a5b8bd}.experience-primary{box-shadow:inset 0 1px 0 #fff5,0 5px 20px #00000012;border-radius:3px;transition:background .3s,box-shadow .3s,transform .2s}.experience-primary:not(:disabled):hover{box-shadow:0 8px 28px #bce1c619}.experience-primary:not(:disabled):active{transform:translateY(1px)}.experience-primary span,.experience-footer>button span{transition:transform .3s}.experience-primary:hover span,.experience-footer>button:hover span{transform:translate(2px,-2px);display:inline-block}
.experience-fineprint{color:#94a8ae;font-size:8px}.experience-footer>button{color:#b2c7c5}.experience-back{transition:color .3s}.experience-back:hover{color:#e3f0e4}.experience-back span{letter-spacing:1.7px}
.ticket{border-color:#abc5b843;background:linear-gradient(120deg,#b5d5be0e,transparent)}.ticket span{font-size:7px;color:#adc2bd}.ticket small{color:#9eb4b4;font-size:7px}.ticket-punch{background:repeating-linear-gradient(0deg,transparent,transparent 4px,#a9cbb219 4px,#a9cbb219 5px);opacity:.75}
.shape-control>span,.glaze-picker>span{font-size:8px;color:#a3bdbb}.shape-control small{color:#99afb1}.swatch{transition:transform .25s,box-shadow .25s}.swatch:hover{transform:translateY(-2px)}.swatch.chosen{box-shadow:0 0 0 1px #d5efdb,0 0 0 4px #d5efdb13}
.order-item{transition:background .3s,border-color .3s,transform .3s}.order-item:hover{border-color:#bed9ca88;transform:translateY(-2px)}.order-item small{font-size:6px;letter-spacing:.7px;color:#9eb5b4}
.drawer{border-radius:6px;border-color:#bad5c338;background:linear-gradient(140deg,#182a34f8,#10202bf8);box-shadow:0 20px 80px #0005}.drawer .tip p{color:#b1c3c6;font-size:13px;line-height:1.8}.source-link{font-size:10px;color:#b9d8c3}.note-nav{font-size:9px}.note-nav button{transition:background .25s}.note-nav button:hover{background:#b5d5be1a}
dialog{border-radius:8px;background:linear-gradient(145deg,#182731,#0d1b28);border-color:#b8d2c340}.planner-intro p{color:#afc0c5;font-size:12px}.planner-note{font-size:9px;color:#9bb1b8}.planner-intro .eyebrow,label{color:#adc3c2}select,textarea{font-size:12px;line-height:1.5;transition:border-color .25s,background .25s}select:focus,textarea:focus{border-color:#c3dfce88;background:#bfdac90a}.close{transition:background .25s,transform .3s}.close:hover{transform:rotate(90deg)}
.riding .experience-footer{opacity:0;visibility:hidden;pointer-events:none}.riding .arrival{visibility:hidden}.ride-hud strong{font-size:34px}.ride-hud em{font-size:48px}.ride-hud>small{font-size:7px}.experience-progress span{color:#b5ccc4}.riding .experience-progress{left:6%;right:6%;bottom:66px}.riding .experience-progress span{font-size:8px;letter-spacing:1.6px}
@media(min-width:761px){.intro{top:18.5%}.intro h1{font-size:clamp(60px,5.65vw,94px);margin:23px 0 22px}.intro-copy{font-size:12px;max-width:320px}.explore-link{padding:9px 0;margin-top:15px;font-size:12px}.weather-switch{bottom:184px;width:285px;gap:13px}.scene-tools{bottom:139px;gap:8px}.weather-switch small{font-size:8px}.island-label .label-name{font-size:19px}.scene-meta{top:47%}.world-caption{top:21%}.city-dock button{padding-block:14px}.city-dock small{font-size:7px}.made-with{color:#8aa3a8}.footnote{color:#91a6ac}.experience-heading{max-width:42%}}
@media(max-width:1100px) and (min-width:761px){.intro h1{font-size:60px}.intro-copy{max-width:290px;font-size:11px}.world-caption{right:4%}.island-label .label-name{font-size:16px}.island-label .label-bottom{font-size:8px}.island-label .label-top{font-size:7px}.city-dock button{padding-inline:14px}}
@media(max-width:760px){.intro{top:104px}.intro h1{font-size:52px;letter-spacing:-2.8px;line-height:1.03;margin:18px 0 15px}.intro h1 br{display:block}.intro h1 em{font-size:1.08em;letter-spacing:-1.7px}.intro .eyebrow{font-size:7px;letter-spacing:1.25px}.intro-copy{font-size:10px;max-width:310px;line-height:1.8}.explore-link{padding:4px 0;gap:19px;font-size:11px;margin-top:8px}.explore-link>span{width:29px;height:29px;font-size:16px}.icon-button{height:31px;width:31px}.icon-button svg{width:14px;height:14px}.weather-switch{width:235px;gap:10px}.weather-switch button{font-size:9px;padding:7px 9px}.weather-switch small{font-size:7px}.island-label .label-top{font-size:6px;letter-spacing:.6px}.island-label .label-name{font-size:14px;gap:5px}.island-label .label-bottom{font-size:7px;gap:5px}.label-invitation{font-size:8px}.city-dock small{font-size:6px;letter-spacing:.4px}.city-dock button>span:nth-child(2){font-size:10px}.city-dock button{padding-block:12px}.experience-heading{max-width:90%}.experience-heading h2{font-size:32px}.experience-heading>p{font-size:10px}.experience-fineprint{font-size:7px}.experience-controls{padding:14px 0 0;background:linear-gradient(0deg,#0c1b2900,#0c1b2900)}.experience-footer>button{font-size:8px}.ticket small{font-size:6px}.ticket span{font-size:6px}.shape-control>span,.glaze-picker>span{font-size:7px}.passport small{font-size:6px;letter-spacing:.6px}.drawer .tip p{font-size:12px}.riding .experience-progress{left:7%;right:7%;bottom:69px}.riding .experience-progress span{font-size:6px;letter-spacing:1px}.ride-hud strong{font-size:28px;bottom:174px}.ride-hud em{font-size:40px}.ride-hud>small{font-size:5px}.planner-intro p{font-size:11px}}
@media(prefers-reduced-motion:reduce){.icon-button:hover,.explore-link:hover>span,.swatch:hover,.order-item:hover,.close:hover{transform:none}}

@media(min-width:761px){.scene-meta{top:34%}.world-caption{top:21%}.world-caption p{line-height:1.9}.island-label{filter:drop-shadow(0 2px 9px #06131b88)}}
@media(max-width:760px){.island-label .label-top{display:none}.island-label{filter:drop-shadow(0 1px 5px #04111bcc)}.island-label:before{height:9px;top:-13px}.island-label .label-bottom{margin-top:5px}}

.golden .intro-copy,.golden .island-label .label-bottom,.golden .island-label .label-top,.golden .city-dock small,.golden .city-number,.golden .footnote,.golden .made-with,.golden #weather-source,.golden .scene-meta,.golden .world-caption p,.golden .weather-switch small{color:#cbd4ce}.golden .nav-link{color:#d2dbd6}.golden .city-dock{background:#10202b57}.golden .intro .eyebrow{color:#d1ddd4}


/* ChinaStay In-Depth City Guide & Soft Landing Integration */
.drawer-guide-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 18px;
  padding: 12px 14px;
  border: 1px solid rgba(168, 205, 186, 0.28);
  border-radius: 4px;
  background: rgba(182, 217, 195, 0.08);
  color: #cee5d4;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3px;
  transition: all 0.25s ease;
  text-decoration: none;
}
.drawer-guide-link:hover {
  background: rgba(182, 217, 195, 0.16);
  border-color: rgba(168, 205, 186, 0.55);
  color: #ffffff;
  transform: translateY(-1px);
}
.drawer-guide-link span:last-child {
  font-size: 14px;
  transition: transform 0.2s ease;
}
.drawer-guide-link:hover span:last-child {
  transform: translateX(3px);
}

/* Modals / Dialogs General */
dialog.planner-dialog,
dialog#planner {
  width: 820px;
  max-width: min(840px, 94vw);
  max-height: 88vh;
  padding: 40px 48px;
  border-radius: 12px;
  background: linear-gradient(145deg, #182731, #0d1b28);
  border: 1px solid rgba(184, 210, 195, 0.25);
  box-shadow: 0 25px 90px rgba(0, 0, 0, 0.65);
  color: var(--ink);
  overflow-y: auto;
  box-sizing: border-box;
}

dialog.route-dialog,
dialog#route-modal {
  width: 660px;
  max-width: min(680px, 94vw);
  max-height: 88vh;
  padding: 38px 44px;
  border-radius: 12px;
  background: linear-gradient(145deg, #182731, #0d1b28);
  border: 1px solid rgba(184, 210, 195, 0.25);
  box-shadow: 0 25px 90px rgba(0, 0, 0, 0.65);
  color: var(--ink);
  overflow-y: auto;
  box-sizing: border-box;
}

/* Planner Header & Strip */
.planner-intro {
  margin-bottom: 24px;
}
.planner-intro .eyebrow {
  font-size: 8px;
  letter-spacing: 2px;
  color: #9cb5b5;
}
.planner-intro h2 {
  font-family: 'Italiana', Georgia, serif;
  font-size: 40px;
  line-height: 1.1;
  font-weight: 400;
  margin: 12px 0 10px;
  color: #e5f2eb;
}
.planner-intro em {
  font-style: italic;
  color: var(--mint);
}
.planner-intro p {
  font-size: 11.5px;
  line-height: 1.8;
  color: #8da4ac;
  max-width: 680px;
  margin: 0;
}

.planner-guides-strip {
  margin: 24px 0 30px;
  padding: 22px 0 26px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.planner-section-title {
  font-size: 8px;
  letter-spacing: 1.8px;
  color: #8da6ab;
  margin-bottom: 14px;
  text-transform: uppercase;
  font-weight: 600;
}
.planner-guide-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 680px) {
  .planner-guide-cards {
    grid-template-columns: 1fr;
  }
}
.planner-guide-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(163, 191, 173, 0.2);
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.25s ease;
}
.planner-guide-card:hover {
  background: rgba(182, 217, 195, 0.08);
  border-color: rgba(163, 191, 173, 0.45);
  transform: translateY(-2px);
}
.guide-card-tag {
  font-size: 7.5px;
  letter-spacing: 1.2px;
  color: #7f999f;
  margin-bottom: 6px;
  font-weight: 500;
}
.guide-card-title {
  font-size: 13px;
  font-weight: 500;
  color: #e2ede8;
  margin-bottom: 6px;
}
.guide-card-desc {
  font-size: 10px;
  line-height: 1.6;
  color: #92a8af;
  margin-bottom: 14px;
  flex: 1;
}
.guide-card-action {
  font-size: 9.5px;
  font-weight: 500;
  color: var(--mint);
  display: flex;
  align-items: center;
  gap: 4px;
}
.guide-card-action span {
  transition: transform 0.2s;
}
.planner-guide-card:hover .guide-card-action span {
  transform: translateX(3px);
}

/* Inquiry Form */
.planner-inquiry-box {
  margin-top: 10px;
}
.planner-inquiry-box h3 {
  font-family: 'Italiana', Georgia, serif;
  font-size: 26px;
  font-weight: 400;
  color: #dceee2;
  margin: 6px 0 6px;
}
.planner-inquiry-box p {
  font-size: 11px;
  line-height: 1.7;
  color: #8da4ac;
  margin: 0 0 20px;
}
.planner-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  width: 100%;
}
@media (max-width: 680px) {
  .planner-grid-2 {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}
.planner-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
  width: 100%;
}
.planner-field label,
.field-label {
  font-size: 8.5px;
  letter-spacing: 1.5px;
  color: #9cb5b5;
  text-transform: uppercase;
  font-weight: 600;
  margin: 0;
  display: block;
}
.planner-input,
.planner-select {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(163, 191, 173, 0.22);
  border-radius: 4px;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  color: #e2ede8;
  box-sizing: border-box;
  transition: border-color 0.2s, background 0.2s;
  appearance: none;
  -webkit-appearance: none;
}
.planner-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239cb5b5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
.planner-input:focus,
.planner-select:focus,
.planner-textarea:focus {
  outline: none;
  border-color: rgba(203, 239, 219, 0.6);
  background: rgba(203, 239, 219, 0.05);
  box-shadow: 0 0 0 3px rgba(203, 239, 219, 0.08);
}
.planner-textarea {
  width: 100%;
  min-height: 84px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(163, 191, 173, 0.22);
  border-radius: 4px;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  line-height: 1.6;
  color: #e2ede8;
  box-sizing: border-box;
  resize: vertical;
}

/* Clickable Service Pills */
.services-selector {
  margin-bottom: 18px;
}
.services-pills {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
  margin-top: 8px;
}
.service-pill {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 15px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(163, 191, 173, 0.2);
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}
.service-pill:hover {
  background: rgba(182, 217, 195, 0.08);
  border-color: rgba(163, 191, 173, 0.4);
}
.service-pill input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid rgba(163, 191, 173, 0.35);
  border-radius: 3px;
  background: transparent;
  margin: 0;
  display: grid;
  place-content: center;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}
.service-pill input[type="checkbox"]:checked {
  background: #cbefdb;
  border-color: #cbefdb;
}
.service-pill input[type="checkbox"]:checked::after {
  content: "✓";
  color: #0b171e;
  font-size: 11px;
  font-weight: 700;
}
.service-pill:has(input:checked) {
  background: rgba(203, 239, 219, 0.09);
  border-color: rgba(203, 239, 219, 0.45);
}
.pill-text {
  font-size: 11px;
  color: #cbd8d6;
  line-height: 1.4;
}
.service-pill:has(input:checked) .pill-text {
  color: #ffffff;
  font-weight: 500;
}

/* Route Modal Styles ("Make a day of it") */
.route-dialog-header {
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.route-city-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 8px;
  letter-spacing: 2px;
  color: #9bb7b5;
  margin-bottom: 6px;
}
.route-modal-zh {
  font-family: serif;
  font-size: 16px;
  color: var(--mint);
}
.route-dialog-header h2 {
  font-family: 'Italiana', Georgia, serif;
  font-size: 34px;
  font-weight: 400;
  margin: 6px 0 10px;
  color: #e5f2eb;
}
.route-dialog-header h2 em {
  font-style: italic;
  color: var(--mint);
}
.route-modal-note {
  font-size: 11px;
  line-height: 1.7;
  color: #8da4ac;
  margin: 0;
}
.route-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 18px 0 22px;
}
.route-step {
  position: relative;
  padding: 0 0 22px 24px;
  border-left: 1px solid rgba(168, 205, 186, 0.25);
  margin-left: 6px;
}
.route-step:last-child {
  border-left-color: transparent;
  padding-bottom: 4px;
}
.route-step::before {
  content: '';
  position: absolute;
  left: -4px;
  top: 4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 10px rgba(203, 239, 219, 0.6);
}
.route-step small {
  display: block;
  font-size: 8px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #8aa5ab;
  margin-bottom: 4px;
}
.route-step b {
  font-size: 13.5px;
  font-weight: 500;
  color: #e8f3ee;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.route-step .step-zh {
  font-family: serif;
  font-size: 12px;
  font-weight: normal;
  color: #9bb7b0;
}
.route-step p {
  font-size: 11.5px;
  line-height: 1.8;
  color: #9cb1b7;
  margin: 0 0 6px;
}
.route-dialog-footer {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.route-actions-bar {
  display: flex;
  gap: 10px;
}
.route-action-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: all 0.2s;
  background: var(--mint);
  color: #102621;
  border: 1px solid var(--mint);
}
.route-action-btn:hover {
  background: #e1f5e8;
}
.route-action-btn.secondary {
  background: rgba(255, 255, 255, 0.04);
  color: #d1e2dd;
  border-color: rgba(163, 191, 173, 0.25);
}
.route-action-btn.secondary:hover {
  background: rgba(182, 217, 195, 0.1);
  color: #ffffff;
}
.route-guide-link-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: rgba(182, 217, 195, 0.06);
  border: 1px solid rgba(168, 205, 186, 0.25);
  border-radius: 4px;
  color: #cde6d7;
  font-size: 11px;
  text-decoration: none;
  transition: all 0.25s;
}
.route-guide-link-btn:hover {
  background: rgba(182, 217, 195, 0.14);
  border-color: rgba(168, 205, 186, 0.5);
  color: #ffffff;
}

/* Form Confirmation & Error */
.form-success-box {
  padding: 28px 24px;
  background: rgba(203, 239, 219, 0.08);
  border: 1px solid rgba(203, 239, 219, 0.25);
  border-radius: 6px;
  text-align: center;
  margin-top: 18px;
}
.form-success-box h4 {
  font-family: 'Italiana', Georgia, serif;
  font-size: 24px;
  font-weight: 400;
  color: #d8efde;
  margin: 10px 0 10px;
}
.form-success-box p {
  font-size: 12px;
  line-height: 1.8;
  color: #a4bcc0;
  margin: 0;
  max-width: 520px;
  margin-inline: auto;
}
.form-error-msg {
  color: #f7a8a8;
  font-size: 11px;
  margin-top: 10px;
  display: block;
}