:root{color-scheme:dark;font-family:Georgia,"Songti SC",serif;color:rgba(255,255,255,.92);background:#172d2b;font-synthesis:none}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0}body{overflow:hidden}button,a,input{-webkit-tap-highlight-color:transparent}button{color:inherit;font:inherit;border:0;background:none;cursor:pointer;min-height:44px;min-width:44px;padding:0}button:focus-visible,a:focus-visible,input:focus-visible{outline:1px solid #f4f1de;outline-offset:5px}button:hover{color:white}button:disabled{opacity:.4}svg[hidden],[hidden]{display:none!important}svg{width:18px;height:18px;fill:currentColor;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
#lake{position:fixed;inset:0;isolation:isolate;overflow:hidden;background:#233d36;touch-action:none}#lake-background{position:absolute;inset:0;background:url('lake.webp') center/cover no-repeat;pointer-events:none}#lake:focus-visible{outline:1px solid #f6eedb70;outline-offset:-7px}#water,#weather-canvas{width:100%;height:100%;display:block;position:absolute;inset:0;pointer-events:none}#weather-canvas{z-index:1}.shade{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 38%,#05171626);z-index:2}.controls{position:absolute;z-index:3;top:50%;transform:translateY(-50%);text-shadow:0 2px 8px #001e20aa;animation:arrive 1.5s ease both}.identity{left:max(26px,env(safe-area-inset-left));display:flex;flex-direction:column;align-items:flex-start}.identity button{min-height:32px;font-size:19px;line-height:1.6}#time-button{display:flex;align-items:baseline;gap:12px}#clock{font:13px Georgia,serif;opacity:.62}#about-button{font-size:19px;letter-spacing:.05em;opacity:.8}.sound{right:max(25px,env(safe-area-inset-right));text-align:right}.sound>button{min-height:32px;font-size:18px;letter-spacing:.04em;padding-right:8px}.sound-buttons{display:flex;justify-content:flex-end;gap:0}.sound-buttons button{display:grid;place-items:center;min-width:40px;min-height:36px;opacity:.8}.sound-buttons button:hover{opacity:1}#hint{position:absolute;z-index:3;bottom:max(34px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);margin:0;font-size:12px;letter-spacing:.15em;color:#eef1e9a6;text-shadow:0 2px 8px #032a29;pointer-events:none;transition:opacity 2s;white-space:nowrap}#hint.dismissed{opacity:0}.motion{position:absolute;z-index:3;right:25px;bottom:18px;opacity:.4;font-size:11px;letter-spacing:.1em;text-shadow:0 1px 5px #032a29}.motion:hover,.motion:focus-visible{opacity:1}#cursor{position:absolute;z-index:2;width:48px;height:18px;border:1px solid #fff9;border-radius:50%;opacity:0;pointer-events:none;transform:translate(-50%,-50%);transition:opacity .4s}.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}
dialog{position:fixed;inset:0;margin:auto;color:#efefe6;border:0;background:#102a28d4;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);width:min(440px,calc(100% - 36px));max-height:calc(100% - 36px);padding:50px 44px;box-shadow:0 25px 120px #0002}dialog::backdrop{background:#051b1926}dialog[open]{animation:arrive .3s ease}.close{position:absolute;top:10px;right:13px;font-family:system-ui,sans-serif;font-size:25px;font-weight:200;color:#eee8;z-index:5}.overlay{width:100%;height:100%;max-width:100%;max-height:100%;padding:0;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;overflow:hidden}.overlay::backdrop{background:#081d181a}.overlay .close{right:22px;top:18px;opacity:.55}body:has(dialog[open]) .controls,body:has(dialog[open]) #hint,body:has(dialog[open]) .motion{visibility:hidden;pointer-events:none}.time-scrubber{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;grid-template-columns:130px 94px 130px;align-items:center;gap:25px;text-shadow:0 2px 8px #002525}.time-reading{text-align:right;display:flex;flex-direction:column;gap:8px;font-size:23px}.time-reading output{font:13px Georgia,serif;opacity:.65}.ruler{position:relative;width:94px;height:min(500px,64vh);touch-action:none}.ruler-lines,.ruler-major{position:absolute;inset:0;background:repeating-linear-gradient(180deg,transparent 0 calc(100%/48 - 1px),#f1f3eaba calc(100%/48 - 1px) calc(100%/48));mask-image:linear-gradient(transparent,#000 32%,#000 68%,transparent)}.ruler-major{left:-13px;right:-13px;background:repeating-linear-gradient(180deg,transparent 0 calc(100%/12 - 1px),#f1f3eae0 calc(100%/12 - 1px) calc(100%/12));mask-image:linear-gradient(transparent,#000 20%,#000 80%,transparent)}#time-range{position:absolute;inset:0;margin:0;writing-mode:vertical-lr;direction:ltr;appearance:none;-webkit-appearance:none;background:none;width:100%;height:100%;cursor:ns-resize;touch-action:none}#time-range::-webkit-slider-runnable-track{background:transparent;width:94px;height:100%}#time-range::-webkit-slider-thumb{-webkit-appearance:none;border:0;border-radius:0;height:2px;width:94px;background:#fff;box-shadow:0 0 12px #fff8}#time-range::-moz-range-track{background:transparent;width:94px;height:100%}#time-range::-moz-range-thumb{border:0;border-radius:0;height:2px;width:94px;background:#fff}.time-actions{display:flex;flex-direction:column;align-items:flex-start;gap:1px}.time-actions button{font-size:14px;white-space:nowrap;min-height:36px;opacity:.8}.time-actions #time-play{font-size:12px;opacity:.55}.time-actions #time-play[aria-pressed=true]{opacity:1}.weather-options{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;gap:10px}.weather-options button{font-size:21px;min-width:150px;opacity:.5;text-shadow:0 2px 9px #022c27}.weather-options button[aria-pressed=true]{opacity:1}.weather-options button:hover{opacity:1}.about-content h1{font-size:38px;font-weight:400;letter-spacing:.12em;margin:0 0 27px}.about-content p{line-height:1.9;font-size:17px}.about-content .instructions{font-size:14px;opacity:.65;margin:22px 0 43px}.about-content a{font-size:12px;color:inherit;opacity:.5;text-underline-offset:5px}.fallback-ripple{position:absolute;border:1px solid #f2edddc0;border-radius:50%;width:10px;height:5px;pointer-events:none;animation:ring 2s ease-out forwards;z-index:2}@keyframes ring{to{transform:translate(-50%,-50%) scale(36);opacity:0}}@keyframes arrive{from{opacity:0}to{opacity:1}}
@media(max-width:600px){.identity{left:19px}.identity button,#about-button{font-size:17px}#time-button{gap:8px}#clock{font-size:11px}.sound{right:13px}.sound>button{font-size:16px;padding-right:9px}.sound-buttons button{min-width:34px;min-height:36px}.sound-buttons svg{width:16px;height:16px}.time-scrubber{grid-template-columns:78px 72px 84px;gap:24px}.time-reading{font-size:21px}.time-reading output{font-size:12px}.ruler{width:72px;height:min(490px,62vh)}#time-range::-webkit-slider-runnable-track,#time-range::-webkit-slider-thumb,#time-range::-moz-range-track,#time-range::-moz-range-thumb{width:72px}.time-actions button{font-size:12px}.time-actions #time-play{font-size:11px}.motion{right:17px;bottom:14px}#hint{font-size:11px;bottom:31px}#cursor{display:none}dialog:not(.overlay){padding:46px 30px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}#cursor{display:none}}

/* Match the reference's quiet two-line controls. */
.identity{left:max(22px,env(safe-area-inset-left))}.identity button,#about-button{font-size:18px;font-weight:300;line-height:28px;min-height:28px;letter-spacing:0}#time-button #clock{display:none}.sound{right:max(22px,env(safe-area-inset-right))}.sound>button{font:italic 300 18px/28px Georgia,serif;min-height:28px;padding-right:0;letter-spacing:0}.sound-buttons button{min-width:34px;min-height:28px}.sound-buttons svg{width:16px;height:16px}.shade{background:radial-gradient(ellipse at center,transparent 58%,#010d1512)}
@media(max-width:600px){.identity{left:18px}.sound{right:18px}.identity button,#about-button,.sound>button{font-size:17px}}

#water{opacity:0;transition:opacity .9s}#water[data-renderer^='webgl2']{opacity:1}

/* A quiet progress ring appears only while the visitor holds the water. */
#charge{position:absolute;z-index:3;pointer-events:none;width:44px;height:44px;transform:translate(-50%,-50%);border-radius:50%;background:conic-gradient(from -90deg,#edf5f3 calc(var(--charge,0)*1turn),#e7efeb26 0);mask:radial-gradient(transparent 65%,#000 68%);filter:drop-shadow(0 1px 3px #082924);opacity:.9}#charge span{display:none}#lake[data-charging=true] #cursor{opacity:0!important}#lake{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}

/* Modern, quiet lake controls and a real music transport. */
.identity #time-button #clock{display:inline;font:300 18px/28px Georgia,serif;opacity:1}.time-reading output{font:18px/28px Georgia,serif;opacity:1}.time-scrubber{grid-template-columns:110px 94px 110px;gap:24px}.time-actions button{font-size:15px}.sound>button{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.music-panel{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(430px,calc(100vw - 64px));text-align:center;text-shadow:0 2px 10px #001c22}.music-panel>button{display:flex;flex-direction:column;align-items:center;width:100%;gap:12px;font-size:22px}#panel-state{font-size:13px;opacity:.6}.waveform{position:relative;height:64px;margin-top:24px}#music-wave{width:100%;height:56px;pointer-events:none}#music-range{appearance:none;-webkit-appearance:none;position:absolute;inset:0;background:transparent;width:100%;height:64px;margin:0;cursor:ew-resize}#music-range::-webkit-slider-runnable-track{height:56px;background:transparent}#music-range::-webkit-slider-thumb{-webkit-appearance:none;width:1px;height:56px;background:#fff9}#music-range::-moz-range-track{background:transparent}#music-range::-moz-range-thumb{border:0;border-radius:0;width:1px;height:56px;background:#fff9}.music-timing{display:flex;justify-content:space-between;font-size:12px;opacity:.6}.music-list{display:flex;flex-direction:column;margin-top:30px;gap:3px}.music-list button{font-size:16px;opacity:.68;min-height:34px}.music-list button[aria-pressed=true]{opacity:1}.music-credit{font-size:12px;line-height:1.9;opacity:.75;margin-top:25px}.music-credit a,.credits a{font-size:inherit;color:inherit;opacity:1;text-underline-offset:3px}.about-content .instructions{margin:20px 0;font-size:14px}.about-settings{display:flex;flex-direction:column;align-items:flex-start;margin:12px 0 20px}.about-settings button{font-size:14px;min-height:34px;opacity:.8}.credits{font-size:12px;line-height:1.7;opacity:.7;margin-bottom:22px}.credits summary{font-size:14px;cursor:pointer}.credits p{font-size:12px}#about-dialog{overflow-y:auto;max-height:calc(100dvh - 36px)}body:has(#music-dialog[open]) .shade{background:#07162229}#lake-background{background-image:url('chengdu-quiet.png'),linear-gradient(#718c95 0%,#a4b2b3 42%,#526d70 43%,#243e41 100%);background-size:auto 46%,cover;background-position:center top,center;background-repeat:no-repeat}
@media(max-width:600px){.identity #time-button #clock{font-size:17px}.sound>button{max-width:170px}.time-scrubber{grid-template-columns:72px 72px 84px;gap:20px}#hint{font-size:10px;letter-spacing:.03em}.music-panel{width:calc(100vw - 60px)}.music-panel>button{font-size:20px}.music-list{margin-top:22px}.music-credit{margin-top:19px}}

#weather-indicator{position:absolute;z-index:4;left:50%;bottom:14%;transform:translateX(-50%);font-size:17px;letter-spacing:.12em;text-shadow:0 2px 12px #001921;opacity:0;transition:opacity .6s;pointer-events:none}#weather-indicator.visible{opacity:.9}

.music-panel{max-height:calc(100dvh - 90px);overflow-y:auto;scrollbar-width:thin;padding:10px 8px}.music-list{gap:2px;margin-top:20px}.music-list button{display:grid;grid-template-columns:48px 1fr 60px;gap:14px;text-align:left;align-items:center;width:100%;min-height:36px}.track-year{font-size:13px;opacity:.75;font-variant-numeric:tabular-nums}.track-stage{font-size:12px;text-align:right;opacity:.64}.track-name{font-size:16px}.music-credit{margin-bottom:6px}@media(max-width:600px){.music-list button{grid-template-columns:40px 1fr 48px;gap:8px}.track-name{font-size:15px}}

.playlist-caption{font-size:13px;opacity:.65;margin:24px 0 8px}.music-list{margin-top:8px}.music-credit a{display:inline-block;min-height:32px;line-height:32px;opacity:1}

@media(min-width:601px) and (max-height:760px){.music-panel{max-height:calc(100dvh - 54px);padding-top:4px;padding-bottom:4px}.music-panel>button{gap:6px;font-size:20px}.waveform{height:42px;margin-top:14px}#music-wave,#music-range,#music-range::-webkit-slider-runnable-track,#music-range::-webkit-slider-thumb{height:42px}.playlist-caption{margin-top:14px}.music-list{gap:0}.music-list button{min-height:31px}.music-credit{margin-top:14px;font-size:11px;line-height:1.7}.music-credit a{min-height:28px;line-height:28px}}

.track-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#panel-title{max-width:100%;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:19px;line-height:1.4}

/* A translucent personal note over the lake. */
#about-dialog{width:min(480px,calc(100vw - 40px));max-height:calc(100dvh - 64px);padding:48px 44px 32px;border:1px solid rgba(255,255,255,.22);border-radius:22px;color:#fff;background:linear-gradient(145deg,rgba(52,72,82,.44),rgba(13,29,38,.52));backdrop-filter:blur(22px) saturate(110%);-webkit-backdrop-filter:blur(22px) saturate(110%);box-shadow:0 24px 80px rgba(0,12,23,.22),inset 0 1px 0 rgba(255,255,255,.10);scrollbar-width:thin;scrollbar-color:#ffffff66 transparent;overscroll-behavior:contain}
#about-dialog::backdrop{background:rgba(4,15,25,.12)}
#about-dialog .about-content{color:#fff;text-shadow:0 1px 12px rgba(0,15,24,.16)}
#about-dialog h1{font-size:34px;font-weight:400;letter-spacing:.08em;margin:0 0 18px}
#about-dialog p{color:#fff;opacity:1}
#about-dialog .instructions{font-size:15px;line-height:1.95;margin:24px 0;opacity:1}
#about-dialog .about-settings{gap:2px;margin:0;padding:15px 0 0;border-top:1px solid #ffffff26}
#about-dialog .about-settings button{color:#fff;opacity:1;min-height:38px}
#about-dialog a,#about-dialog summary{color:#fff;opacity:1}
#about-dialog .close{top:14px;right:14px;color:#fff;opacity:1;font-size:26px;min-width:40px;min-height:40px;border-radius:50%;transition:background .2s}
#about-dialog .close:hover{background:#ffffff12}
#about-dialog :focus-visible{outline-color:#fff}
#about-button{color:#fff;opacity:1}
@media(max-width:600px){#about-dialog{width:calc(100vw - 32px);max-height:calc(100dvh - 40px);padding:44px 26px 28px;border-radius:20px}#about-dialog h1{font-size:30px}#about-dialog .instructions{font-size:14px}}

/* A sparse, borderless time scale fading out in both directions. */
#time-ruler{width:76px;height:min(220px,30svh);cursor:grab;user-select:none;-webkit-user-select:none;border:0;outline:0;box-shadow:none}
#time-ruler.dragging,#time-ruler.dragging #time-range{cursor:grabbing}
#time-ruler .ruler-lines{background-image:linear-gradient(to bottom,#ffffffd4 0 1px,transparent 1px);background-size:100% calc(100% / 12);background-repeat:repeat-y;background-position:0 calc(var(--ruler-center,110px) + var(--ruler-offset,0px));pointer-events:none;-webkit-mask-image:linear-gradient(180deg,transparent 0%,#0001 12%,#0006 30%,#000 50%,#0006 70%,#0001 88%,transparent 100%),linear-gradient(90deg,transparent 0%,#0005 18%,#000 48%,#000 52%,#0005 82%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(180deg,transparent 0%,#0001 12%,#0006 30%,#000 50%,#0006 70%,#0001 88%,transparent 100%),linear-gradient(90deg,transparent 0%,#0005 18%,#000 48%,#000 52%,#0005 82%,transparent 100%);mask-composite:intersect}
#time-ruler::after{content:"";position:absolute;left:-12px;right:-12px;top:50%;height:1px;background:linear-gradient(90deg,transparent,#ffffffd9 28%,#fff 50%,#ffffffd9 72%,transparent);box-shadow:none;pointer-events:none;z-index:2}
#time-dialog #time-range,#time-dialog #time-range:focus,#time-dialog #time-range:focus-visible{cursor:grab;outline:none;border:0;box-shadow:none;-webkit-tap-highlight-color:transparent}
#time-ruler:has(#time-range:focus-visible)::after{height:2px;filter:drop-shadow(0 0 4px #ffffff30)}
#time-range::-webkit-slider-runnable-track{border:0;box-shadow:none;background:transparent}
#time-range::-moz-range-track{border:0;box-shadow:none;background:transparent}
#time-range::-webkit-slider-thumb{background:transparent;box-shadow:none;border:0}
#time-range::-moz-range-thumb{background:transparent;box-shadow:none;border:0}
#time-dialog .time-scrubber{grid-template-columns:76px 76px 84px;gap:20px}
#time-dialog .time-reading output{font-size:17px;color:#fff;font-variant-numeric:tabular-nums}
#time-dialog .time-actions button{font-size:14px;opacity:.66;transition:opacity .2s}
#time-dialog .time-actions button:hover,#time-dialog .time-actions button:focus-visible{opacity:1}
@media(max-width:600px){#time-ruler{width:64px;height:min(200px,28svh)}#time-dialog .time-scrubber{grid-template-columns:64px 64px 76px;gap:17px}#time-dialog .time-reading output{font-size:16px}#time-dialog .time-actions button{font-size:13px}}

#device-view{display:flex;align-items:center;flex-wrap:wrap;gap:0 18px}#device-view #motion-center{font-size:13px}#about-dialog #motion-status{flex-basis:100%;font-size:13px;line-height:1.7;margin:4px 0 0}

/* Restore the quiet, two-line controls at the middle of each shore. */
.controls,dialog{font-family:"Avenir Next","PingFang SC","Microsoft YaHei",sans-serif}
.controls{top:50%;bottom:auto;transform:translateY(-50%);text-shadow:0 1px 14px #00151f66}
.controls.identity{left:max(22px,env(safe-area-inset-left));right:auto;display:flex;flex-direction:column;align-items:flex-start;gap:0;pointer-events:none}
.identity button{pointer-events:auto;min-height:32px;padding:0;font-weight:400;line-height:32px}
.identity #about-button{font-family:"Songti SC","Noto Serif CJK SC",serif;font-size:18px;letter-spacing:.06em;opacity:.94}
.identity #time-button{justify-content:flex-start;min-width:64px}
.identity #time-button #clock{display:inline;font:400 17px/32px "Avenir Next","PingFang SC",sans-serif;letter-spacing:.015em;font-variant-numeric:tabular-nums;opacity:.9}
.controls.sound{left:auto;right:max(22px,env(safe-area-inset-right));display:flex;flex-direction:column;align-items:flex-end;gap:0;max-width:min(240px,44vw);pointer-events:none;white-space:nowrap}
.sound>button{pointer-events:auto;min-height:32px;padding:0;font:400 17px/32px "Avenir Next","PingFang SC",sans-serif;letter-spacing:.015em;opacity:.9}
.sound>button:hover,.sound>button:focus-visible{opacity:1}
.sound #music-title{display:block;max-width:100%;min-width:0;text-align:right;overflow:hidden;text-overflow:ellipsis}
.sound-buttons{display:flex;justify-content:flex-end;gap:0;pointer-events:auto}
.sound-buttons button{display:grid;place-items:center;min-width:36px;min-height:32px;opacity:.85}
.sound-buttons button:hover,.sound-buttons button:focus-visible{opacity:1}
.sound-buttons svg{width:15px;height:15px;stroke-width:1.4}
#sound-label{white-space:nowrap}
#lake[data-music=playing] .sound>button{opacity:1}
#music-dialog::backdrop{background:#0617231a}
#music-dialog .music-panel{inset:50% auto auto 50%;transform:translate(-50%,-50%);width:min(384px,calc(100vw - 40px));max-height:calc(100dvh - 48px);padding:25px 26px 17px;text-align:left;text-shadow:none;border:0;border-radius:20px;background:linear-gradient(150deg,#233a45bd,#132c38d4);backdrop-filter:blur(26px) saturate(105%);-webkit-backdrop-filter:blur(26px) saturate(105%);box-shadow:0 18px 60px #02111d29;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#ffffff38 transparent;color:#fff}
#music-dialog .close{inset:10px 10px auto auto;font-size:23px;min-width:40px;min-height:40px;opacity:.65}
#music-dialog .playlist-caption{font-size:12px;letter-spacing:.12em;margin:0 0 22px;opacity:.58}
.now-playing{display:flex;flex-direction:column;gap:8px}
.current-track{min-width:0}
#panel-title{display:block;margin:0;font:400 19px/1.6 "Songti SC","Noto Serif CJK SC",serif;letter-spacing:.05em;white-space:normal;overflow:visible}
#panel-artist{font-size:12px;line-height:1.6;opacity:.6;margin:4px 0 0}
.panel-transport{display:flex;align-items:center;justify-content:center;gap:18px}
.panel-transport button{min-width:44px;min-height:44px;display:grid;place-items:center}
.panel-transport svg{width:14px;height:14px;opacity:.74}
#panel-play{font-size:13px;min-width:54px;letter-spacing:.08em}
#panel-state{font-size:13px;opacity:.85}
.music-progress{height:28px;position:relative;margin-top:-6px}
#music-range{position:absolute;inset:0;width:100%;height:28px;margin:0;appearance:none;-webkit-appearance:none;cursor:ew-resize;background:transparent}
#music-range::-webkit-slider-runnable-track{height:1px;background:linear-gradient(to right,#fff 0 var(--progress,0%),#ffffff38 var(--progress,0%) 100%)}
#music-range::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:6px;height:6px;border:0;border-radius:50%;background:#fff;margin-top:-2.5px;box-shadow:none}
#music-range::-moz-range-track{height:1px;background:linear-gradient(to right,#fff 0 var(--progress,0%),#ffffff38 var(--progress,0%) 100%)}
#music-range::-moz-range-thumb{width:6px;height:6px;border:0;border-radius:50%;background:#fff}
.music-timing{font-size:12px;opacity:.52;font-variant-numeric:tabular-nums}
#music-dialog .music-list{margin-top:21px;gap:0;max-height:216px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#ffffff29 transparent}
#music-dialog .music-list button{grid-template-columns:22px minmax(0,1fr) 37px;gap:10px;min-height:43px;padding:0 5px;border-radius:5px;opacity:.6}
#music-dialog .music-list button:hover{background:#ffffff05;opacity:1}
#music-dialog .music-list button[aria-pressed=true]{background:#ffffff09;opacity:1}
.track-number{font-size:11px;opacity:.55;font-variant-numeric:tabular-nums}
#music-dialog .track-name{font-size:14px;line-height:1.6}
#music-dialog .track-stage{font-size:11px;opacity:.56;font-variant-numeric:tabular-nums}
#music-dialog .music-credit{margin:16px 0 0;text-align:center;font-size:11px;opacity:.5}
#music-dialog .music-credit a{min-height:28px;line-height:28px;text-decoration:none}
#music-error{font-size:12px;line-height:1.8;margin:12px 0;color:#fff}
#about-dialog .interaction-help{margin:22px 0}
#about-dialog .interaction-help summary{font-size:14px;cursor:pointer;opacity:.75;min-height:36px;line-height:36px;list-style:none}
#about-dialog .interaction-help summary::after{content:'+';margin-left:12px;font-size:16px;opacity:.7}
#about-dialog .interaction-help[open] summary::after{content:'−'}
#about-dialog .interaction-help summary::-webkit-details-marker{display:none}
#about-dialog .interaction-help .instructions{margin:4px 0 0;font-size:14px;line-height:1.95}
#about-dialog .about-settings{border-top:0;padding:0}
@media(max-width:600px){.controls.identity{left:max(18px,env(safe-area-inset-left))}.identity #about-button{font-size:17px}.identity #time-button #clock{font-size:16px}.controls.sound{right:max(18px,env(safe-area-inset-right));max-width:44vw}.sound>button{font-size:15px}.sound-buttons button{min-width:36px}.sound-buttons svg{width:14px;height:14px}#music-dialog .music-panel{width:calc(100vw - 32px);max-height:calc(100dvh - 48px);padding:22px 22px 13px;border-radius:18px}#music-dialog .playlist-caption{margin-bottom:18px}}
@media(max-height:540px){#music-dialog .music-list{margin-top:12px}.now-playing{gap:0}}

/* Selected weather plates also provide a quiet loading / no-WebGL view. */
#lake-background{background-image:url('weather/clear.png');background-size:cover;background-position:center;transition:filter .8s}

/* Chosen direction: typography 03, clear glass and weather cue 01. */
:root{--ui-font:"Avenir Next","PingFang SC","Microsoft YaHei",sans-serif}
.controls,dialog{font-family:var(--ui-font);color:#fff}
.identity #about-button{display:flex;align-items:center;gap:12px;font-family:var(--ui-font);font-size:21px;font-weight:600;letter-spacing:.025em;opacity:1}
.identity-dot{width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.identity #time-button #clock{font-family:var(--ui-font);font-size:16px;font-weight:400;letter-spacing:.025em;opacity:.94}
.sound>button{font-family:var(--ui-font);font-size:16px;font-weight:600;letter-spacing:.02em;opacity:1}
.sound-buttons button{position:relative;min-width:38px;min-height:38px;opacity:.94}
.sound-buttons svg{fill:none;width:16px;height:16px;stroke-width:1.35}
#sound-toggle::before{content:"";position:absolute;width:29px;height:29px;border:1px solid #ffffffa6;border-radius:50%;pointer-events:none}
#panel-title{font-family:var(--ui-font);font-weight:500;letter-spacing:.02em}
#about-dialog{width:min(404px,calc(100vw - 40px));padding:44px 42px 28px;border-radius:28px;background:linear-gradient(145deg,#f0f7ff30,#eff5fc18);border:1px solid #ffffff52;backdrop-filter:blur(30px) saturate(112%);-webkit-backdrop-filter:blur(30px) saturate(112%);box-shadow:0 16px 55px #0017251a,inset 0 1px 1px #ffffff38;text-align:left}
#about-dialog::backdrop{background:#0b20300a}
#about-dialog h1{font-family:var(--ui-font);font-size:31px;font-weight:600;letter-spacing:.035em;line-height:1.35;margin:4px 0 10px}
#about-dialog .about-content>p{font-size:18px;line-height:1.7;margin:0 0 32px;letter-spacing:.025em}
#about-dialog .close{top:12px;right:12px;display:grid;place-items:center;min-width:44px;min-height:44px}
#about-dialog .close svg{width:22px;height:22px;fill:none;stroke-width:1.3}
#about-dialog .about-settings{align-items:stretch;margin:0;padding:0;gap:0;border:0}
#about-dialog .about-settings>button,#about-dialog #motion-view{width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:44px;font-size:16px;line-height:1.5;text-align:left;font-weight:400;letter-spacing:.02em;border-radius:8px}
#about-dialog .about-settings>button:hover,#about-dialog #motion-view:hover{background:#ffffff0a}
#about-dialog .about-settings button span:last-child{white-space:nowrap;font-size:15px;font-weight:400}
#device-view{width:100%;gap:0}
#about-dialog #motion-center{margin-left:auto;min-height:32px;font-size:12px;opacity:.8}
#about-dialog #motion-status{font-size:12px;line-height:1.7;opacity:.8}
#about-dialog .interaction-help{margin:18px 0 0}
#about-dialog .interaction-help summary{font-size:12px;min-height:28px;line-height:28px;opacity:.65}
#about-dialog .interaction-help .instructions{font-size:13px;opacity:.9}
body:has(#about-dialog[open]) .controls{visibility:visible;pointer-events:none}
#weather-indicator{left:50%;top:50%;bottom:auto;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:12px;width:80px;font-family:var(--ui-font);font-size:23px;line-height:1.2;letter-spacing:0;text-shadow:0 1px 12px #19364840;transition:opacity .55s ease}
#weather-indicator.visible{opacity:1}
#weather-symbol{width:32px;height:32px;fill:none;stroke-width:1.15;filter:drop-shadow(0 1px 5px #19364826)}
.weather-dots{display:flex;gap:9px;align-items:center;margin-top:5px;height:8px}
.weather-dots i{width:5px;height:5px;border-radius:50%;background:#fff;opacity:.3;transition:opacity .3s}
.weather-dots i.active{opacity:1}
@media(max-width:600px){
 .identity #about-button{font-size:19px;gap:10px}.identity-dot{width:4px;height:4px}
 .identity #time-button #clock{font-size:14px}.sound>button{font-size:14px}.sound-buttons button{min-width:36px}
 #about-dialog{width:calc(100vw - 40px);padding:38px 30px 24px;border-radius:26px;max-height:calc(100dvh - 40px)}
 #about-dialog h1{font-size:28px}#about-dialog .about-content>p{font-size:16px;margin-bottom:26px}
 #about-dialog .about-settings>button,#about-dialog #motion-view{font-size:15px;min-height:46px}
 body:has(#about-dialog[open]) .controls{visibility:hidden}
 #weather-indicator{font-size:21px;gap:11px}#weather-symbol{width:30px;height:30px}
}

/* A visible native game link; only the 56px badge receives pointer input. */
.game-entry{position:absolute;z-index:3;width:56px;height:56px;min-width:44px;min-height:44px;border-radius:50%;color:#fff;font-family:var(--ui-font);text-decoration:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;outline-offset:6px}
#game-tower{display:block}
.game-badge{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:1px solid #ffffffd9;border-radius:50%;background:#173b4399;box-shadow:0 2px 12px #102b4240,inset 0 0 10px #ffffff0d;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);text-shadow:0 1px 5px #071f32;pointer-events:none}
.game-badge svg{width:28px;height:21px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.game-badge>span{font-family:var(--ui-font);font-size:9px;font-weight:650;letter-spacing:1.2px;line-height:1.15;padding-left:1.2px}
.game-ring{position:absolute;inset:0;border:1px solid #fff;border-radius:50%;opacity:0;pointer-events:none;animation:game-ripple 2.8s ease-out infinite}
.game-ring-second{animation-delay:-1.4s}
@keyframes game-ripple{0%{transform:scale(1);opacity:0}12%{opacity:.6}100%{transform:scale(1.65);opacity:0}}
.game-entry:hover .game-badge,.game-entry:focus-visible .game-badge{background:#173b43c9;box-shadow:0 2px 14px #102b4260,inset 0 0 12px #ffffff14}
.game-entry:focus-visible{outline:2px solid #fff}
#game-shortcut{right:max(32px,calc(env(safe-area-inset-right) + 20px));bottom:max(32px,calc(env(safe-area-inset-bottom) + 20px));display:none}
#game-shortcut.tower-unavailable{display:block}
.game-shortcut-caption{position:absolute;right:calc(100% + 24px);top:50%;transform:translateY(-50%);white-space:nowrap;font-size:12px;letter-spacing:.07em;line-height:1.5;color:#fff;text-shadow:0 1px 8px #102825;pointer-events:none}
body:has(dialog[open]) .game-entry{visibility:hidden;pointer-events:none}
@media(max-width:700px),(pointer:coarse){#game-shortcut{display:block}}
@media(prefers-reduced-motion:reduce){.game-ring{animation:none!important;opacity:.4;transform:scale(1.22)}.game-ring-second{opacity:.18;transform:scale(1.55)}}