@charset "UTF-8";
:root{--ink:#23483f;--muted:#6e827a;--cream:#fcfbf6;--line:#e2e7dc;--green:#315b4a;--shadow:0 14px 40px #24483f16}*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--ink);font-family:"Microsoft JhengHei","PingFang TC",system-ui,sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit}button:focus-visible,a:focus-visible{outline:3px solid #df8555;outline-offset:4px}button{border:0}a{color:inherit;text-decoration:none}[hidden]{display:none!important}.header{height:88px;padding:0 34px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:26px;background:var(--cream);position:relative;z-index:5}.brand{display:flex;align-items:center;gap:12px;font-weight:800;font-size:21px;letter-spacing:2px}.brand svg{width:35px;height:40px;fill:none;stroke:var(--ink);stroke-width:1.5}.brand small{display:block;font-size:10px;letter-spacing:3px;margin-top:3px;font-weight:500}.edition{display:flex;align-items:center;gap:7px;font-size:11px;letter-spacing:1px;border-left:1px solid #d7ddd5;padding-left:25px;color:#7b867d}.edition span{height:6px;width:6px;border-radius:50%;background:#df936b}.catalog{margin-left:auto;font-size:13px;font-weight:600}.catalog span{margin-left:10px;font-size:18px}main{display:grid;grid-template-columns:minmax(0,1fr) 360px;height:calc(100dvh - 88px);min-height:650px}.world{position:relative;overflow:hidden;background:radial-gradient(ellipse at 45% 35%,#f2f6eb 0,#dfefea 55%,#cce6e2 100%);transition:background 1s}.intro{position:absolute;top:34px;left:38px;z-index:2;pointer-events:none}.eyebrow{font-size:10px;letter-spacing:2.5px;font-weight:700;color:#73887c}.intro h1{font-family:"Noto Serif TC","PMingLiU",serif;font-size:46px;letter-spacing:3px;line-height:1.35;margin:13px 0 13px;font-weight:700}.intro-note{font-size:13px;line-height:1.9;color:#657e72;letter-spacing:.3px}.time-switch{position:absolute;right:24px;top:31px;display:flex;gap:3px;padding:5px;background:#ffffff80;border:1px solid #ffffff9c;border-radius:30px;z-index:3;box-shadow:0 5px 20px #37655108}.time-switch button{background:none;border-radius:20px;font-size:12px;padding:9px 12px;color:#70867b}.time-switch button.active{background:var(--cream);box-shadow:0 3px 9px #23483f13;color:var(--ink)}#scene{position:absolute;inset:0;touch-action:none;cursor:grab}#scene:active{cursor:grabbing}#scene canvas{display:block;width:100%;height:100%}.map-pin{position:absolute;z-index:2;display:flex;align-items:center;gap:7px;padding:9px 11px 9px 7px;border-radius:9px;background:#fffef9f2;box-shadow:0 5px 16px #223c3626;white-space:nowrap;font-size:12px;font-weight:700;transform:translate(-50%,-100%);border:1px solid #ffffff;transition:background .2s,box-shadow .2s}.map-pin:after{content:"";position:absolute;bottom:-7px;left:calc(50% - 7px);border-left:7px solid transparent;border-right:7px solid transparent;border-top:7px solid #fffef9}.map-pin:hover,.map-pin.selected{background:#f8e6c3;box-shadow:0 4px 18px #23483f3a}.map-pin.selected:after{border-top-color:#f8e6c3}.pin-num{display:grid;place-items:center;width:22px;height:22px;background:#e6eee4;border-radius:5px;font-size:9px}.map-pin[data-id=traffic] .pin-num{background:#e4e9ee}.map-pin[data-id=family] .pin-num{background:#f5dfd1}.map-pin b{font-size:13px;margin-left:2px}.world-footer{position:absolute;bottom:30px;left:30px;right:30px;display:flex;align-items:center;justify-content:space-between;gap:12px;z-index:3}.hint{font-size:10px;color:#657e73;letter-spacing:.5px}.hint span{font-size:17px;margin-right:5px}.map-controls{display:flex;background:#fffef5da;border:1px solid #fff;border-radius:12px;box-shadow:var(--shadow);padding:4px;gap:2px}.map-controls button{width:35px;height:35px;background:none;border-radius:8px;font-size:21px}.map-controls button:hover{background:#e5eee3}.map-controls button:last-child{font-size:15px;border-left:1px solid var(--line);border-radius:0}.island-caption{position:absolute;bottom:93px;left:34px;font-size:9px;letter-spacing:3px;writing-mode:vertical-rl;color:#79988c}.sidebar{background:var(--cream);border-left:1px solid var(--line);overflow-y:auto;padding:30px 26px 15px;z-index:4;scrollbar-width:thin}.side-top h2{font-size:21px;letter-spacing:.5px;margin:12px 0 8px}.side-top p{font-size:12px;color:var(--muted);margin:0 0 24px}.district-list{display:flex;flex-direction:column;gap:9px}.district{display:flex;align-items:center;gap:15px;width:100%;padding:15px 14px;background:transparent;border:1px solid var(--line);border-radius:13px;text-align:left;transition:.2s}.district:hover{transform:translateX(-3px);background:#f1f4ec;border-color:#b7cbb4}.district.active{background:#eaf0e4;border-color:#94b498;box-shadow:inset 3px 0 #42674e}.district-icon{height:51px;width:51px;display:grid;place-items:center;border-radius:50%;flex-shrink:0}.district-icon svg{width:29px;height:29px;stroke:currentColor;stroke-width:1.4;fill:none}.traffic{background:#e8edf0;color:#567c8b}.family{background:#fae7da;color:#bc805e}.forest{background:#e3edd7;color:#6d8a51}.district small{font-size:10px;color:var(--muted);letter-spacing:1px}.district strong{display:block;font-size:18px;margin:3px 0 3px;font-weight:700;letter-spacing:1px}.district em{display:block;font-size:11px;font-style:normal;color:#7c8e80}.district b{margin-left:auto;font-size:18px;color:#6e8873}.welcome{padding:23px 0 12px;text-align:center}.compass{font-size:34px;color:#9bad88}.welcome h3{font-family:"PMingLiU",serif;font-size:18px;font-weight:700;letter-spacing:.5px;margin:12px 0}.welcome p{font-size:12px;line-height:1.9;color:var(--muted);margin:8px 0 24px}.visited{text-align:left;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:10px;color:var(--muted)}#visited-count{font-size:16px;font-weight:700;color:var(--ink);letter-spacing:2px}.visited>div{height:3px;background:#e7eadf;width:100%;margin-top:4px;border-radius:2px;overflow:hidden}#progress{display:block;width:0;height:100%;background:#64876b;transition:width .5s}.side-footer{border-top:1px solid var(--line);margin-top:21px;display:flex;gap:7px;padding-top:13px;color:#819183;font-size:9px;line-height:1.8}.footer-dot{width:4px;height:4px;border-radius:50%;background:#a6b59b;flex-shrink:0;margin-top:10px}.side-footer p{margin:0}.detail-top{display:flex;align-items:center;justify-content:space-between;margin-top:25px}.detail-top span{font-size:10px;letter-spacing:1px;color:#8a7956;background:#f5eedf;border-radius:4px;padding:4px 7px}.detail-top button{background:none;font-size:11px;color:var(--muted);padding:8px}#detail h3{font-size:23px;margin:14px 0 8px;letter-spacing:1px}#detail .summary{font-size:13px;line-height:1.95;margin:0 0 16px;color:#607468}.video-button{width:100%;background:#264c3d;color:#fff;padding:14px;border-radius:9px;text-align:left;display:flex;gap:11px;align-items:center}.video-button:hover{background:#39694e}.play-icon{display:grid;place-items:center;height:32px;width:32px;border:1px solid #ffffff55;border-radius:50%;font-size:12px}.video-button strong{font-size:13px}.video-button small{display:block;font-size:10px;opacity:.7;margin-top:4px}.source-link{display:block;padding:13px 2px;font-size:12px;border-bottom:1px solid var(--line)}.detail-caption{font-size:10px;color:#899586;line-height:1.7;margin-top:14px}#loading{position:absolute;left:50%;top:55%;transform:translate(-50%,-50%);font-size:13px;color:#688375;letter-spacing:2px}#loading span{display:block;width:90px;height:2px;background:#a2b994;margin:15px auto;animation:loading 1s infinite alternate}@keyframes loading{to{width:30px;opacity:.3}}#fallback{position:absolute;top:52%;left:15%;font-size:13px;color:var(--muted)}dialog{border:1px solid #dee7d9;background:var(--cream);border-radius:18px;width:min(840px,94vw);padding:22px;color:var(--ink);box-shadow:0 30px 100px #112f4266}dialog::backdrop{background:#122e2b99;backdrop-filter:blur(6px)}.video-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.video-heading small{font-size:11px;letter-spacing:2px;color:var(--muted)}.video-heading h2{font-size:20px;margin:6px 0 0}.video-heading button{background:#e9eee5;width:38px;height:38px;border-radius:50%;font-size:17px}#video-frame{aspect-ratio:16/9;background:#16241e;border-radius:10px;overflow:hidden}#video-frame iframe{width:100%;height:100%;border:0}.video-note{font-size:11px;line-height:1.8;color:var(--muted);margin-bottom:0}.video-note a{text-decoration:underline}body.night .world{background:radial-gradient(ellipse at 50% 40%,#29475b 0,#203d4d 65%,#19343e 100%)}body.night .intro h1{color:#e8ebdb}body.night .intro-note,body.night .intro .eyebrow,body.night .hint,body.night .island-caption{color:#adbfbb}body.night .time-switch{background:#ffffff16;border-color:#ffffff22}body.night .time-switch button:not(.active){color:#c1c9be}@media(min-width:1600px){main{grid-template-columns:minmax(0,1fr) 400px}.sidebar{padding:38px 32px}.intro{left:48px;top:43px}.intro h1{font-size:52px}.district{padding:18px 16px}.welcome{padding-top:30px}}@media(max-width:1100px){main{grid-template-columns:minmax(0,1fr) 320px}.sidebar{padding:26px 20px}.intro{left:24px;top:24px}.intro h1{font-size:36px}.intro-note{font-size:11px}.intro .eyebrow{font-size:8px}.time-switch{right:15px;top:24px}.time-switch button{padding:8px;font-size:10px}.hint{max-width:150px;line-height:1.8}.world-footer{left:20px;right:20px}.district{padding:12px;gap:12px}.district-icon{width:44px;height:44px}.district strong{font-size:16px}}@media(max-width:760px){.header{height:74px;padding:0 18px;gap:10px}.brand{font-size:18px;letter-spacing:1px;gap:9px}.brand small{font-size:8px;letter-spacing:2px}.brand svg{width:28px}.edition{display:none}.catalog{font-size:10px}.catalog span{margin-left:3px}main{display:block;height:auto;min-height:0}.world{height:590px;max-height:78dvh;min-height:490px}.intro{top:22px;left:22px}.intro h1{font-size:32px;line-height:1.3;letter-spacing:2px;margin:11px 0}.intro .eyebrow{font-size:7px;letter-spacing:2px}.intro-note{font-size:10px;line-height:1.9}.time-switch{top:20px;right:15px;flex-direction:column;gap:1px;border-radius:24px}.time-switch button{padding:8px 9px}.world-footer{bottom:18px;left:18px;right:18px}.hint{font-size:8px;max-width:150px}.map-controls button{width:31px;height:31px}.island-caption{display:none}.map-pin{font-size:10px;padding:6px;gap:5px}.pin-num{width:19px;height:19px;font-size:8px}.map-pin b{display:none}.sidebar{padding:27px 22px;border-left:0;border-top:1px solid var(--line);overflow:visible}.side-top h2{font-size:23px}.district-list{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.district{display:block;padding:13px 8px;text-align:center;border-radius:12px}.district-icon{width:39px;height:39px;margin:0 auto 8px}.district-icon svg{width:24px;height:24px}.district small{font-size:9px;letter-spacing:0}.district strong{font-size:15px;letter-spacing:0;margin:6px 0}.district em{font-size:9px}.district b{display:none}.district:hover{transform:none}.district.active{box-shadow:inset 0 -3px #42674e}.welcome{padding:20px 0 0}.compass{display:none}.welcome h3{font-size:18px}.welcome p{margin-bottom:20px}.side-footer{margin-top:24px;font-size:10px}.map-pin[data-id=forest]{z-index:3}#detail h3{font-size:25px}#detail .summary{font-size:14px}.video-button{padding:16px}.source-link{font-size:13px}.detail-caption{font-size:11px}.video-heading h2{font-size:17px}dialog{padding:16px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}