@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600&display=swap');
:root{color:#304b43;font-family:Arial,"PingFang SC",sans-serif}*{box-sizing:border-box}body{margin:0;overflow:hidden;background:#d8e6ce}canvas{width:100vw;height:100dvh;display:block;touch-action:none;cursor:grab}canvas:active{cursor:grabbing}.grain{position:fixed;inset:0;pointer-events:none;opacity:.055;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%3Cpath fill='%23000' filter='url(%23n)' opacity='.4' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}header{position:fixed;top:0;left:0;width:100%;padding:32px 42px;display:flex;justify-content:space-between;align-items:center}.brand{text-decoration:none;color:inherit;font-size:13px;font-weight:600;letter-spacing:3px;display:flex;align-items:center;gap:13px}.mark{font-size:38px;line-height:20px;font-weight:400}.edition{font-size:10px;letter-spacing:2px;font-weight:400;border-left:1px solid #6b82745c;margin-left:12px;padding-left:22px}button{font:inherit;color:inherit;cursor:pointer;border:1px solid #ffffff6b;background:#f6f7df55;backdrop-filter:blur(16px);transition:background .25s,transform .25s}button:hover{background:#fff9dfb0;transform:translateY(-2px)}button:focus-visible{outline:2px solid #426d62;outline-offset:4px}#sound{padding:12px 17px;border-radius:30px;font-size:11px;letter-spacing:1px}#sound:first-letter{font-size:18px}main{position:fixed;left:7%;top:24%;pointer-events:none}.eyebrow{font-size:9px;letter-spacing:2px;display:flex;align-items:center;gap:10px}.eyebrow span{width:5px;height:5px;border-radius:50%;background:#557966}h1{font-family:"Noto Serif SC","Songti SC",serif;font-size:clamp(44px,5vw,76px);line-height:1.45;font-weight:400;letter-spacing:4px;margin:24px 0 20px}h1 span{color:#356f66}p{font-size:12px;line-height:2.2;letter-spacing:2px;opacity:.75}.coordinates{margin-top:37px;font-size:9px;letter-spacing:1.5px;display:flex;align-items:center;gap:18px}.coordinates i{font-size:19px;font-style:normal}aside{position:fixed;right:38px;top:41%;display:flex;align-items:center;flex-direction:column;gap:24px}.vertical{writing-mode:vertical-rl;font-size:8px;letter-spacing:3px;opacity:.6}#creature{border-radius:50%;width:39px;height:39px;font-size:21px}footer{position:fixed;bottom:30px;left:42px;right:42px;display:flex;justify-content:space-between;align-items:end;gap:18px}.view-label>span{font-size:8px;letter-spacing:2px}.view-label small{display:block;font-size:9px;letter-spacing:1px;opacity:.65;margin-top:10px}nav{display:flex;padding:5px;background:#f8f8e966;border:1px solid #ffffff6b;border-radius:50px;backdrop-filter:blur(20px);gap:3px}nav button{border:0;background:none;backdrop-filter:none;border-radius:30px;padding:14px 24px;font-size:11px}nav button.active{background:#f8f7eccc;box-shadow:0 2px 12px #435a4210}nav small{font-size:7px;letter-spacing:1px;margin-left:7px;opacity:.6}.time{border-radius:25px;padding:14px 18px;display:flex;align-items:center;gap:12px;font-size:11px}.time b{font-size:17px;font-weight:400;margin-left:7px}#toast{position:fixed;left:50%;top:22%;transform:translateX(-50%);background:#f9f9e7ae;border:1px solid #fff8;padding:14px 24px;border-radius:30px;font-size:12px;letter-spacing:2px;opacity:0;transition:opacity .8s;pointer-events:none}#toast.show{opacity:1}#fallback{position:fixed;top:50%;left:20%;right:20%}@media(max-width:700px){header{padding:24px}.edition{display:none}main{left:8%;top:20%}h1{font-size:46px;margin-top:22px}.eyebrow{font-size:7px;letter-spacing:1px}aside{right:20px}.view-label{display:none}footer{bottom:24px;left:20px;right:20px;align-items:center}nav button{padding:13px 16px}nav small{display:none}.time{padding:13px;font-size:10px;gap:7px}.coordinates{margin-top:24px}p{font-size:11px}}

.place-panel{pointer-events:auto;margin-top:30px;width:max-content;max-width:85vw;padding:16px 19px;border:1px solid #ffffff70;border-radius:19px;background:#f9f5e34a;backdrop-filter:blur(18px);box-shadow:0 4px 25px #455e4310}.place-heading{display:flex;align-items:center;gap:8px;font-size:10px;letter-spacing:1px}.place-dot{width:5px;height:5px;border-radius:50%;background:#588473}.place-heading label{opacity:.7}#city{border:0;border-bottom:1px solid #52706550;background:transparent;font:inherit;font-size:12px;letter-spacing:1px;color:#304b43;padding:3px 24px 5px 3px;cursor:pointer;max-width:240px}#city option{background:#faf6e8;color:#304b43}.place-panel .coordinates{margin-top:12px;font-size:9px;letter-spacing:1.5px}.weather-row{display:flex;align-items:center;gap:9px;font-size:11px;letter-spacing:.6px;margin-top:13px;min-height:20px}#weather-icon{font-size:19px}#retry-weather{padding:4px 9px;border-radius:15px;font-size:9px}.weather-meta{display:flex;justify-content:space-between;gap:18px;margin-top:9px;font-size:8px;letter-spacing:.3px;opacity:.65}.weather-meta a{color:inherit;text-decoration:none}#sea-character{border-top:1px solid #68846b25;margin-top:11px;padding-top:10px;font-size:9px;letter-spacing:1px;opacity:.65}#city:focus-visible{outline:2px solid #426d62;outline-offset:3px}@media(max-height:760px){main{top:17%}h1{font-size:48px;margin:12px 0}p{margin:8px 0}.place-panel{margin-top:15px;padding:12px 16px}.coordinates{margin-top:8px}}@media(max-width:700px){main{top:17%}h1{font-size:42px}.place-panel{margin-top:20px;padding:12px 15px}.weather-meta{font-size:7px;gap:10px}.weather-row{font-size:10px}#city{font-size:11px}}

body{transition:color 1.5s}.night-scene{color:#f5f4df}.night-scene h1 span{color:#c5eadb}.night-scene .brand,.night-scene #city{color:inherit}.night-scene .place-panel{background:#243d4b55}.night-scene .eyebrow span{background:#c5eadb}.night-scene .place-dot{background:#c5eadb}.night-scene nav button.active{color:#304b43}

/* Weather takes the place of the editorial heading, directly over the sea. */
.place-panel{margin:0;padding:0;width:auto;max-width:85vw;border:0;border-radius:0;background:none;backdrop-filter:none;box-shadow:none}
.city-title{display:inline-block;max-width:100%}
#city{max-width:100%;border:0;padding:0 30px 0 0;font:inherit;letter-spacing:inherit;color:inherit;line-height:inherit;outline-offset:6px}
#city option{font:16px Arial,"PingFang SC",sans-serif;letter-spacing:normal}
.place-panel h1{font-size:clamp(36px,5vw,76px)}
.weather-row{margin-top:0;font-size:12px;line-height:2.2;letter-spacing:2px;opacity:.75}
.place-panel .coordinates{margin-top:20px;font-size:9px}
#sea-character{border:0;padding:0;margin-top:10px;line-height:2;letter-spacing:2px}
.weather-meta{justify-content:flex-start;margin-top:14px;gap:16px;flex-wrap:wrap}
.night-scene .place-panel{background:none}
@media(max-width:700px){.place-panel{margin:0;padding:0}.place-panel h1{font-size:clamp(29px,7vw,42px)}.weather-row{font-size:11px;letter-spacing:1px}#city{font-size:inherit}.weather-meta{font-size:8px}}
@media(max-height:760px){.place-panel{margin:0;padding:0}.place-panel h1{font-size:clamp(29px,4.5vw,48px)}}

@media(min-width:701px){footer nav{position:absolute;left:50%;transform:translateX(-50%)}footer .time{margin-left:auto}}

.weather-row{flex-wrap:wrap}.weather-row #weather{font:inherit;color:inherit}.place-panel h1{margin-bottom:20px}
.credits{position:fixed;bottom:9px;left:20px;font-size:8px;letter-spacing:.5px;opacity:.65;max-width:340px}.credits summary{cursor:pointer}.credits p{font-size:9px;letter-spacing:.5px;margin:8px 0;padding:10px 12px;background:#f6f4e5e8;border-radius:10px;color:#304b43}.credits a{color:inherit}.credits[open]{opacity:1}#creature:disabled{cursor:wait;opacity:.45}

/* Quiet controls: only the city name and a sound glyph remain over the sea. */
#sound.ghost-icon,.ghost-icon{display:grid;place-items:center;width:44px;height:44px;padding:11px;border:0;border-radius:50%;background:transparent;backdrop-filter:none;color:inherit}
#sound.ghost-icon:hover,.ghost-icon:hover{background:#fff9e92b;transform:none}
.ghost-icon svg{width:22px;height:22px}.sound-on{display:none}#sound[aria-pressed="true"] .sound-on{display:inline}#sound[aria-pressed="true"] .sound-off{display:none}
#city.city-title{display:inline-block;width:auto;padding:0;border:0;border-radius:0;background:transparent;backdrop-filter:none;font:inherit;letter-spacing:inherit;line-height:inherit;text-align:left;color:inherit}
#city.city-title:hover{transform:none;opacity:.75}
footer{justify-content:center}footer nav{position:static;transform:none}
#city-dialog{width:min(520px,calc(100vw - 40px));max-height:calc(100dvh - 48px);padding:30px;border:1px solid #ffffffa6;border-radius:24px;background:#f4f4e9f0;backdrop-filter:blur(28px);color:#304b43;box-shadow:0 24px 90px #234e4633}
#city-dialog::backdrop{background:#24453c33;backdrop-filter:blur(8px)}
.city-dialog-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}.city-dialog-heading .eyebrow{font-size:8px;opacity:.6}h2{font:400 28px/1.5 "Noto Serif SC","Songti SC",serif;letter-spacing:2px;margin:10px 0 24px}
.city-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.city-options button{padding:15px 8px;border:1px solid #52706520;background:transparent;border-radius:12px;font-size:12px;letter-spacing:1px;backdrop-filter:none}.city-options button:hover{background:#80b9ad20;transform:none}.city-options button[aria-pressed="true"]{background:#80b9ad30;border-color:#52706566}
@media(max-width:520px){#city-dialog{padding:24px}.city-options{grid-template-columns:repeat(2,minmax(0,1fr))}}