:root{font-family:Inter,"PingFang SC","Microsoft YaHei",sans-serif;color:#fff;font-synthesis:none;color-scheme:dark}*{box-sizing:border-box}body{margin:0;background:#263e4b}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:2px solid #e9f6ad;outline-offset:5px}button:disabled{opacity:.45;cursor:wait}#world{position:relative;width:100%;height:100svh;min-height:700px;overflow:hidden}#scene,.shade{position:absolute;inset:0;width:100%;height:100%}#scene{touch-action:manipulation;cursor:crosshair}.shade{pointer-events:none;background:linear-gradient(90deg,rgba(9,26,35,.52),transparent 58%),linear-gradient(0deg,rgba(9,23,29,.7),transparent 35%,transparent 80%,rgba(9,23,29,.22))}header{position:absolute;top:36px;left:4.5%;right:4.5%;display:flex;justify-content:space-between;align-items:center}.brand{display:flex;gap:15px;align-items:center;text-decoration:none;color:inherit;font-size:16px;letter-spacing:.1em}.brand-mark{font-family:Georgia,serif;font-size:40px;font-weight:bold;line-height:1;letter-spacing:-5px;margin-right:5px}.brand small{display:block;font-size:10px;letter-spacing:.18em;margin-top:8px;opacity:.7}.round{background:#ffffff12;border:1px solid #ffffff40;width:42px;height:42px;border-radius:50%;font-size:20px;backdrop-filter:blur(12px)}.round:hover{background:#ffffff30}.scene-info{position:absolute;left:7.5%;top:23%;pointer-events:none}.eyebrow{font-size:11px;letter-spacing:.2em;opacity:.8}.eyebrow span{margin-right:14px}h1{font-family:"Songti SC","Noto Serif CJK SC",SimSun,serif;font-size:clamp(40px,4.8vw,72px);letter-spacing:.13em;font-weight:400;margin:22px 0 18px}#scene-description{font-size:16px;letter-spacing:.15em;opacity:.9}.fine-line{height:1px;width:36px;background:#ffffff55;margin:34px 0 20px}.hint{font-size:13px;line-height:2.1;letter-spacing:.08em;color:#ffffffbd}footer{position:absolute;bottom:24px;left:4.5%;right:4.5%;display:flex;flex-direction:column;align-items:center;pointer-events:none}.actions{display:flex;gap:12px;margin-bottom:22px;pointer-events:auto}.action{background:rgba(16,34,39,.4);border:1px solid #ffffff55;border-radius:30px;padding:12px 22px;backdrop-filter:blur(20px);display:flex;align-items:center;gap:9px;font-size:14px}.action:hover{background:#ffffff30}.action span{font-size:23px;line-height:17px}.action svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.5}nav{display:flex;padding:7px;gap:7px;background:#12282d75;border:1px solid #ffffff30;border-radius:22px;backdrop-filter:blur(25px);pointer-events:auto}.place{display:flex;align-items:center;gap:12px;padding:12px 16px;min-width:196px;background:transparent;border:1px solid transparent;border-radius:16px;text-align:left;transition:background .2s}.place.selected{background:#ffffffed;color:#294146;border-color:#fff}.place:hover:not(.selected){background:#ffffff15}.swatch{width:36px;height:44px;border-radius:10px;background-size:cover;background-position:center;flex-shrink:0}.cloud{background-image:url('assets/cloud.jpg');background-color:#bad3d7}.snow{background-image:url('assets/snow.jpg');background-color:#d6e3ec}.forest{background-image:url('assets/forest.jpg');background-color:#253f41}.place span:not(.swatch){font-size:15px;letter-spacing:.12em}.place small{display:block;font-size:8px;letter-spacing:.06em;margin-top:7px;opacity:.65}.place b{margin-left:auto;font-weight:400;font-size:11px;opacity:.55}.footer-note{font-size:11px;letter-spacing:.15em;margin:18px 0 0;opacity:.6}#loading{position:absolute;inset:0;background:#233e48;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;z-index:5;font-size:14px;letter-spacing:.15em}.loader{width:28px;height:28px;border:1px solid #ffffff33;border-top-color:white;border-radius:50%;animation:spin 1.5s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}#loading.hidden{display:none}#toast{position:absolute;top:110px;left:50%;transform:translateX(-50%);background:#132f3de0;padding:12px 20px;border-radius:30px;font-size:14px;opacity:0;transition:opacity .2s;pointer-events:none;white-space:nowrap}#toast.show{opacity:1}dialog{width:min(780px,94vw);padding:22px;border:1px solid #ffffff30;border-radius:24px;background:#16303a;box-shadow:0 25px 100px #0008}dialog::backdrop{background:#061820b3;backdrop-filter:blur(10px)}.photo-head,.photo-foot{display:flex;align-items:center;justify-content:space-between;gap:15px}.photo-head h2{font-size:19px;font-weight:400;letter-spacing:.08em}.photo-head{margin-bottom:16px}#photo-preview{display:block;max-height:65svh;max-width:100%;margin:auto;border-radius:10px}.photo-foot{margin-top:20px;font-size:12px;color:#c7d9df}.photo-foot a{display:block;text-decoration:none;background:#e6efda;color:#17312e;padding:13px 20px;border-radius:30px;font-size:14px;white-space:nowrap}@media(max-width:700px){#world{min-height:680px}header{top:24px;left:24px;right:24px}.brand{font-size:14px;gap:10px}.brand small{font-size:8px}.brand-mark{font-size:34px}.scene-info{left:28px;top:16%}h1{font-size:40px;margin:16px 0}#scene-description{font-size:14px}.fine-line{margin:20px 0 12px}.hint{font-size:12px}footer{left:16px;right:16px;bottom:max(18px,env(safe-area-inset-bottom))}nav{width:100%;gap:3px;padding:5px;border-radius:18px}.place{min-width:0;flex:1;gap:8px;padding:11px 8px;border-radius:13px}.place small{display:none}.place b{display:none}.place span:not(.swatch){font-size:14px;letter-spacing:.02em}.swatch{width:28px;height:35px;border-radius:7px}.actions{margin-bottom:17px}.action{padding:11px 19px}.footer-note{margin-top:15px}.photo-foot{font-size:11px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* Hub navigation stays in its own row on small screens. */
header{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:16px}
.back-home{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 16px;border:1px solid #ffffff55;border-radius:999px;background:#17313ac9;color:#fff;text-decoration:none;font-size:13px;letter-spacing:.04em;white-space:nowrap;backdrop-filter:blur(12px)}
.back-home svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.back-home:hover{background:#314b51}
@media(max-width:700px){header{grid-template-columns:minmax(0,1fr) auto;gap:12px}.brand{grid-column:1;grid-row:1}#pause{grid-column:2;grid-row:1}.back-home{grid-column:1/-1;grid-row:2;justify-self:start;padding:10px 14px;font-size:12px}.scene-info{top:max(158px,22%)}}