@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap");
:root{--cream:#fff8f0;--paper:rgba(255,250,244,.91);--tan:#ddbea9;--olive:#6b705c;--sage:#b7b7a4;--terracotta:#cb997e;--ink:#403f37;--muted:#716f64;--line:rgba(107,112,92,.24);font-family:"Noto Sans TC",sans-serif;color:var(--ink)}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#eadfd3}button,a{font:inherit}button{color:inherit}.app,.scene,#webgl-container{position:absolute;inset:0}.app{overflow:hidden}.scene canvas{display:block;width:100%;height:100%}.labels-layer{z-index:2}.skip-link{position:fixed;left:1rem;top:-5rem;z-index:100;background:#fff;padding:.7rem 1rem;border-radius:99px;color:#303226}.skip-link:focus{top:1rem}
.topbar{position:fixed;z-index:20;left:0;right:0;top:0;min-height:72px;display:flex;align-items:center;gap:28px;padding:12px 28px;background:linear-gradient(180deg,rgba(255,251,246,.92),rgba(255,251,246,.65) 76%,transparent);pointer-events:none}.topbar button{pointer-events:auto}.brand{border:0;background:transparent;display:flex;align-items:center;gap:10px;padding:0;text-align:left;cursor:pointer}.brand-mark{width:39px;height:39px;border-radius:50%;display:grid;place-items:center;background:var(--olive);color:#fff;font:700 21px "Playfair Display",serif}.brand strong{display:block;font:700 19px "Playfair Display",serif;letter-spacing:.02em}.brand small{display:block;font-size:8px;letter-spacing:.25em;color:var(--muted);margin-top:1px}.zone-nav{display:flex;align-items:center;gap:5px;margin:auto}.zone-nav button{border:0;background:transparent;padding:8px 7px;font-size:10px;font-weight:700;letter-spacing:.12em;color:#5e6252;cursor:pointer;border-bottom:1px solid transparent}.zone-nav button:hover,.zone-nav button:focus-visible,.zone-nav button.is-active{color:#8c5640;border-color:var(--terracotta)}.controls{display:flex;gap:6px}.controls button{width:55px;height:44px;border:1px solid var(--line);border-radius:15px;background:rgba(255,250,245,.84);display:grid;place-items:center;font-size:10px;cursor:pointer;box-shadow:0 8px 28px rgba(74,62,50,.08)}.controls button span:first-child{font-size:16px;line-height:12px}.controls button:hover,.controls button:focus-visible{border-color:var(--terracotta);background:#fff}
.hero{position:fixed;z-index:10;left:34px;top:108px;width:min(370px,calc(100vw - 68px));padding:26px 28px;border:1px solid rgba(255,255,255,.7);border-radius:26px;background:rgba(255,250,244,.82);backdrop-filter:blur(13px);box-shadow:0 22px 70px rgba(68,58,47,.12);transition:.3s ease}.hero.is-hidden{opacity:0;transform:translateX(-30px);pointer-events:none}.eyebrow,.panel-kicker{font-size:10px;font-weight:700;letter-spacing:.21em;color:#8e684f;margin:0 0 10px}.hero h1{font:700 clamp(30px,2.65vw,38px)/1.17 "Playfair Display","Noto Sans TC",serif;margin:0 0 15px;color:#44483a}.hero>p:not(.eyebrow){margin:6px 0;color:#5c6153;font-size:14px;line-height:1.75}.hero-actions{display:flex;gap:9px;margin-top:19px}.button,.hero-actions button{border:0;border-radius:99px;padding:11px 18px;text-decoration:none;font-weight:700;font-size:13px;cursor:pointer}.button.primary{background:var(--terracotta);color:#fff;box-shadow:0 10px 24px rgba(161,104,78,.22)}.button.quiet{background:#eee6db;color:#5c5d50}
.sample-badge{display:inline-block!important;margin:0 0 9px!important;padding:5px 9px;border-radius:99px;background:#eee3d5;color:#8d624f!important;font-size:9px!important;font-weight:700;letter-spacing:.08em;line-height:1.2!important}
.scene-guide{position:fixed;z-index:8;left:50%;bottom:31px;transform:translateX(-50%);display:flex;align-items:center;gap:9px;padding:9px 15px;border-radius:99px;background:rgba(255,250,245,.75);color:#66685d;font-size:10px;letter-spacing:.05em;backdrop-filter:blur(10px);white-space:nowrap}.scene-guide i{width:3px;height:3px;border-radius:50%;background:var(--terracotta)}
.zone-label{pointer-events:auto;border:1px solid rgba(107,112,92,.2);border-radius:12px;background:rgba(255,252,247,.93);padding:7px 10px;color:#4c5043;cursor:pointer;box-shadow:0 7px 18px rgba(60,52,45,.14);transition:.2s ease}.zone-label b{font:700 11px "Playfair Display","Noto Sans TC",serif}.zone-label small{display:block;font-size:9px;margin-top:2px;color:#7e756b}.label-short{display:none}.zone-label:hover,.zone-label:focus-visible,.zone-label.is-active{outline:none;border-color:#b16f54;background:#fff5ea;transform:translateY(-2px)}
.zone-preview{position:fixed;z-index:16;left:50%;bottom:75px;transform:translateX(-50%);width:min(330px,calc(100vw - 36px));padding:13px 16px;border-radius:16px;background:rgba(64,63,55,.9);color:#fff;box-shadow:0 14px 38px rgba(32,28,24,.2);pointer-events:none}.zone-preview span{font-size:8px;letter-spacing:.18em;color:#efd7c8}.zone-preview strong{display:block;font-size:13px;margin:3px 0}.zone-preview p{font-size:11px;line-height:1.55;margin:0;color:#eee9e3}
.detail-panel{position:fixed;z-index:35;top:88px;right:24px;width:min(390px,calc(100vw - 32px));max-height:calc(100vh - 148px);overflow:auto;padding:28px 28px 24px;border-radius:28px;background:rgba(255,251,246,.96);border:1px solid rgba(255,255,255,.8);box-shadow:0 28px 90px rgba(47,41,34,.23);transform:translateX(calc(100% + 40px));opacity:0;transition:.35s ease}.detail-panel.is-open{transform:none;opacity:1}.panel-close,#list-close{position:absolute;right:16px;top:14px;width:35px;height:35px;border:0;border-radius:50%;background:#eee7de;font-size:21px;cursor:pointer}.panel-index{font:600 11px "Playfair Display",serif;color:#a17d66;margin-bottom:5px}.detail-panel h2{font:700 27px/1.3 "Playfair Display","Noto Sans TC",serif;margin:0 35px 12px 0;color:#484a3f}.panel-lead{font-weight:600;line-height:1.65;color:#626456}.panel-body{font-size:13px;line-height:1.85;color:#68675d}.decision-note{margin:18px 0;padding:14px 15px;border-left:3px solid var(--terracotta);background:#f5ece2}.decision-note span{font-size:9px;font-weight:700;letter-spacing:.14em;color:#936a55}.decision-note p{font-size:13px;line-height:1.6;margin:5px 0 0}.panel-actions{display:flex;gap:8px;flex-wrap:wrap}.panel-actions a{border:1px solid var(--line);border-radius:99px;padding:10px 14px;text-decoration:none;color:#5f6254;font-size:12px;font-weight:700}.panel-actions a.is-primary{background:var(--terracotta);color:#fff;border-color:var(--terracotta)}.panel-nav{display:flex;justify-content:space-between;border-top:1px solid var(--line);margin-top:18px;padding-top:14px}.panel-nav button{border:0;background:transparent;font-size:11px;color:#6a6b5f;cursor:pointer}
.island-list{position:fixed;z-index:42;inset:70px 50px 58px;padding:30px;border-radius:28px;background:rgba(255,251,246,.98);box-shadow:0 30px 100px rgba(49,43,36,.28);transform:translateY(30px);opacity:0;pointer-events:none;transition:.3s;overflow:auto}.island-list.is-open{transform:none;opacity:1;pointer-events:auto}.list-heading{display:flex;justify-content:space-between}.list-heading h2{font:700 27px "Playfair Display","Noto Sans TC",serif;margin:0}.list-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:22px}.list-item{display:flex;gap:13px;text-align:left;border:1px solid var(--line);background:#fffaf4;border-radius:18px;padding:16px;cursor:pointer}.list-item>span{font:700 12px "Playfair Display",serif;color:#a4755c}.list-item strong{display:block;font:700 16px "Playfair Display","Noto Sans TC",serif}.list-item em{display:block;font-size:11px;font-style:normal;color:#9a725d;margin:3px 0}.list-item small{font-size:11px;line-height:1.55;color:#727166}.list-note{font-size:11px;color:#77776c}.scrim{position:fixed;z-index:40;inset:0;background:rgba(40,38,32,.28);opacity:0;pointer-events:none;transition:.2s}.scrim.is-visible{opacity:1;pointer-events:auto}
.cta{position:fixed;z-index:18;right:24px;bottom:22px;display:flex;align-items:center;gap:13px;border-radius:99px;padding:6px 7px 6px 16px;background:rgba(255,250,245,.89);box-shadow:0 10px 32px rgba(55,48,40,.15);font-size:11px;color:#66675c}.cta a{border-radius:99px;padding:10px 16px;background:var(--terracotta);color:#fff;text-decoration:none;font-weight:700}.toast{position:fixed;z-index:60;left:50%;bottom:90px;transform:translate(-50%,15px);opacity:0;background:#3f4438;color:#fff;border-radius:99px;padding:10px 16px;font-size:11px;transition:.2s;pointer-events:none}.toast.show{transform:translate(-50%,0);opacity:1}
.loading{position:fixed;z-index:80;inset:0;display:grid;place-content:center;justify-items:center;background:#f3eadf;transition:.4s}.loading.is-done{opacity:0;pointer-events:none}.loading span{width:44px;height:44px;border:3px solid #d9cabc;border-top-color:var(--olive);border-radius:50%;animation:spin 1s linear infinite}.loading p{font-size:11px;letter-spacing:.12em;color:#6d6f61}.webgl-fallback{position:fixed;z-index:25;inset:0;padding:130px 8vw;background:linear-gradient(140deg,#f5eadf,#dce0d1)}.webgl-fallback h1{font:700 38px "Playfair Display","Noto Sans TC",serif;max-width:600px}.fallback-actions{display:flex;gap:10px;margin-top:20px}@keyframes spin{to{transform:rotate(360deg)}}.is-paused .loading span{animation-play-state:paused}
body[data-theme="night"]{--ink:#e7e2d7;--muted:#b8bbb1;--line:rgba(226,216,199,.23)}body[data-theme="night"] .topbar{background:linear-gradient(180deg,rgba(24,34,36,.9),rgba(24,34,36,.55),transparent)}body[data-theme="night"] .brand,body[data-theme="night"] .zone-nav button{color:#e7e0d5}body[data-theme="night"] .hero,body[data-theme="night"] .detail-panel,body[data-theme="night"] .island-list{background:rgba(31,39,39,.94);border-color:rgba(255,255,255,.14)}body[data-theme="night"] .hero h1,body[data-theme="night"] .detail-panel h2,body[data-theme="night"] .list-heading h2{color:#f5eadf}body[data-theme="night"] .hero>p:not(.eyebrow),body[data-theme="night"] .panel-lead,body[data-theme="night"] .panel-body{color:#cbd0c7}body[data-theme="night"] .controls button,body[data-theme="night"] .zone-label,body[data-theme="night"] .scene-guide,body[data-theme="night"] .cta{background:rgba(29,40,40,.88);color:#e9e4da}body[data-theme="night"] .list-item{background:#293534;color:#ece6db}body[data-theme="night"] .decision-note{background:#35413e}
@media(max-width:900px){.topbar{padding:10px 15px;gap:12px}.zone-nav{position:fixed;left:12px;right:12px;top:68px;justify-content:center;background:rgba(255,250,244,.78);border-radius:14px;padding:2px;backdrop-filter:blur(8px)}.zone-nav button{font-size:8px;padding:7px 5px}.hero{top:116px;left:18px;width:330px;padding:20px}.hero h1{font-size:31px}.list-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.topbar{height:60px;padding:8px 10px}.brand-mark{width:33px;height:33px}.brand strong{font-size:16px}.controls{margin-left:auto}.controls button{width:44px;height:44px}.controls button span:last-child{display:none}.zone-nav{top:61px;overflow-x:auto;justify-content:flex-start}.zone-nav button{flex:0 0 auto;min-width:44px;min-height:44px}.hero{top:126px;left:12px;width:calc(100vw - 24px);padding:15px 17px;border-radius:20px}.hero h1{font-size:25px;margin-bottom:8px}.hero>p:not(.eyebrow){font-size:12px;line-height:1.55;margin:3px 0}.hero-actions{margin-top:12px}.button,.hero-actions button{font-size:11px;padding:9px 13px}.scene-guide{bottom:66px;max-width:calc(100vw - 20px);overflow:hidden}.scene-guide span{font-size:8px}.cta{left:12px;right:12px;bottom:10px;justify-content:space-between}.cta span:first-child{font-size:9px}.zone-label{padding:4px 6px;border-radius:8px}.label-full{display:none}.label-short{display:block;font-size:9px;font-weight:700}.detail-panel{top:108px;right:10px;width:calc(100vw - 20px);max-height:calc(100vh - 175px);padding:21px 20px}.detail-panel h2{font-size:22px}.island-list{inset:74px 10px 62px;padding:20px 15px}.list-grid{grid-template-columns:1fr}.zone-preview{bottom:112px}.webgl-fallback{padding:120px 22px}.webgl-fallback h1{font-size:29px}}
@media(max-height:600px) and (max-width:720px){.hero{top:100px;padding:11px 15px;width:300px}.hero .eyebrow,.hero>p:last-of-type,.hero .quiet{display:none}.hero h1{font-size:21px}.scene-guide{display:none}.detail-panel{top:90px;max-height:calc(100vh - 105px)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}

.loading[hidden]{display:none!important}

body[data-theme="night"] .panel-actions a:not(.is-primary),body[data-theme="night"] .panel-nav button{color:#e8e2d8;border-color:rgba(232,226,216,.3)}

body[data-theme="night"] .decision-note p{color:#e8e2d8}
body[data-theme="night"] .decision-note span{color:#d7ae98}
.panel-figure[hidden]{display:none!important}
.panel-figure{margin:20px 0}.panel-figure button{display:block;width:100%;padding:8px;border:1px solid #d8c7b5;border-radius:14px;background:#f3ece2;color:#6e5142;cursor:zoom-in}.panel-figure img{display:block;width:100%;height:auto;max-height:360px;object-fit:contain}.panel-figure span{display:block;padding:10px 4px 4px;font-size:12px}
.card-dialog{width:min(1080px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:16px;border:1px solid #dac8b6;border-radius:18px;background:#faf6f0;color:#554336;box-shadow:0 25px 100px #201c1866}.card-dialog::backdrop{background:#292720c9}.card-dialog header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}.card-dialog h2{font-size:18px;margin:0}.card-dialog header div{display:flex;gap:8px}.card-dialog button{min-height:44px;border:1px solid #ccb49f;border-radius:10px;padding:8px 12px;background:#fffaf3;color:#654c3c;cursor:pointer}.card-scroll{max-height:calc(100dvh - 160px);overflow:auto;overscroll-behavior:contain;background:#eee5d8;border-radius:8px}.card-scroll img{display:block;width:100%;height:auto}.card-dialog.is-zoomed .card-scroll img{width:1024px;max-width:none}.card-dialog>a{display:inline-block;color:#755541;padding:10px 0 0;font-size:12px}.card-dialog :focus-visible{outline:3px solid #ac785c;outline-offset:3px}
@media(max-width:620px){.card-dialog{padding:10px}.card-dialog h2{font-size:14px}.card-dialog button{padding:7px 9px;font-size:12px}.panel-figure img{max-height:300px}}
.zone-nav button{font-size:12px;letter-spacing:.06em}
.explore-chip{pointer-events:auto;display:flex;align-items:center;gap:3px;height:44px;padding:0 12px;border:1px solid var(--line);border-radius:15px;background:rgba(255,250,245,.84);font-size:11px;color:var(--muted);white-space:nowrap;box-shadow:0 8px 28px rgba(74,62,50,.08)}.explore-chip b{font-size:16px;color:#6d8a4f;margin-left:2px}.explore-chip small{font-size:11px}
.zoom-group{display:flex}.zoom-group button{width:46px}.zoom-group button:first-child{border-radius:15px 0 0 15px}.zoom-group button:last-child{border-radius:0 15px 15px 0;border-left:0}.zoom-group button span:first-child{font-size:19px}
.controls #music-button[aria-pressed="true"]{background:#f6e3c9;border-color:var(--terracotta)}
.clock-weather{position:fixed;z-index:18;left:24px;bottom:22px;padding:9px 16px 10px;border-radius:18px;background:rgba(74,80,62,.86);border:1px solid rgba(255,255,255,.14);color:#efe7cf;box-shadow:0 10px 30px rgba(40,38,30,.18);backdrop-filter:blur(8px);pointer-events:none}.cw-top{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;white-space:nowrap}#cw-text{font-weight:500;color:#e6ddbd}#cw-temp{font-weight:500;color:#cfc7a8}.cw-icon svg{width:17px;height:17px;display:block}.clock-weather time{display:block;margin-top:3px;font:700 21px/1.1 "Noto Sans TC",sans-serif;letter-spacing:.08em;font-variant-numeric:tabular-nums}
body[data-theme="night"] .explore-chip{background:rgba(29,40,40,.88);color:#e9e4da}body[data-theme="night"] .controls #music-button[aria-pressed="true"]{background:#4a4330}
@media(min-width:621px){.hero{top:96px;width:300px;padding:18px 20px;border-radius:22px}.hero .eyebrow{font-size:9px;margin-bottom:7px}.hero h1{font-size:clamp(22px,1.9vw,27px);margin-bottom:10px}.hero>p:not(.eyebrow){font-size:12.5px;line-height:1.65;margin:4px 0}.hero-actions{margin-top:13px}.hero-actions button{padding:9px 14px;font-size:12px}}
@media(max-width:1180px){.controls button{width:44px}.controls button span:last-child{display:none}.zoom-group{display:none}.explore-chip{padding:0 10px}}
@media(max-width:620px){.brand>span:last-child{display:none}.explore-chip{display:none}.controls{gap:5px}.hero>p:last-of-type{display:none}.clock-weather{left:12px;bottom:104px;padding:6px 11px 7px;border-radius:14px}.cw-top{font-size:10px}.cw-icon svg{width:14px;height:14px}.clock-weather time{font-size:15px}}
@media(min-width:621px){.clock-weather{left:auto;right:28px;bottom:auto;top:76px;padding:7px 13px 8px;border-radius:15px}.cw-top{font-size:11px}.cw-icon svg{width:15px;height:15px}.clock-weather time{font-size:17px}}
.cta{gap:9px;padding:4px 5px 4px 13px;font-size:10px}.cta a{padding:7px 12px;font-size:11px}
.panel-photo{margin:4px 0 14px}.panel-photo img{display:block;width:100%;max-height:300px;object-fit:cover;object-position:center 25%;border-radius:18px}
.panel-actions a.has-cover{display:flex;align-items:center;gap:12px;padding:8px 16px 8px 8px;border-radius:18px}.panel-actions a.has-cover img{width:54px;height:96px;object-fit:cover;border-radius:10px;flex:none}
@media(min-width:1181px){.hero{z-index:21;left:236px;top:12px}}
@media(min-width:621px) and (max-width:1180px){.hero{top:80px}}
@media(max-width:620px){.hero{top:70px}}
.controls{margin-left:auto}
.hero .eyebrow{letter-spacing:.14em;line-height:1.5}
.loading p{display:grid;justify-items:center;gap:6px;margin-top:16px}.loading p strong{font-size:17px;letter-spacing:.22em;color:#55594b}.loading p span{font-size:12px;letter-spacing:.16em;color:#7a7c6e}
.hero .eyebrow,.hero>p:last-of-type,.hero .quiet{display:none}
@media(min-width:621px){.hero{left:24px;top:74px;width:264px;padding:16px 18px;border-radius:20px;z-index:10}.hero h1{font-size:23px;margin-bottom:8px}.hero>p:not(.eyebrow){font-size:12.5px;line-height:1.6}.hero-actions{margin-top:11px}}
@media(max-width:620px){.hero{width:auto;right:12px;padding:13px 15px}.hero h1{font-size:22px}}
.panel-photo+.panel-lead{margin-top:0;text-align:center;font-size:14px}
.panel-gallery{margin:16px 0 4px}.gallery-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:16px;background:#f3ebe0}.gallery-track::-webkit-scrollbar{display:none}.gallery-slide{flex:0 0 100%;margin:0;scroll-snap-align:center}.gallery-slide img{display:block;width:100%;height:auto}.gallery-slide figcaption{padding:8px 0 2px;text-align:center;font-size:12px;font-weight:700;color:#8c5640;background:#fffaf4}.gallery-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px}.gallery-nav>button{width:36px;height:36px;border:1px solid var(--line);border-radius:50%;background:#fffaf4;font-size:20px;line-height:1;color:#6a6b5f;cursor:pointer}.gallery-dots{display:flex;gap:7px}.gallery-dots button{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:#dccbb8;cursor:pointer}.gallery-dots button.is-active{width:20px;border-radius:99px;background:var(--terracotta)}
.panel-actions a.cover-card{display:flex;align-items:center;gap:14px;width:100%;padding:10px;border:1.5px solid #e4cdb3;border-radius:18px;background:#fbf3e8;color:#4c5043;font-weight:400}.cover-card img{width:62px;height:110px;object-fit:cover;border-radius:10px;flex:none}.cover-card span{display:grid;gap:4px}.cover-card small{font-size:10px;font-weight:700;letter-spacing:.12em;color:#a17d66}.cover-card strong{font-size:15px;line-height:1.4;color:#484a3f}
.panel-actions a,.list-item,.panel-nav button,.cta a,.hero-actions button,#open-travel-card,.gallery-nav>button,.gallery-dots button{transition:background-color .2s,border-color .2s,color .2s,transform .2s,box-shadow .2s}
.panel-actions a:hover,.panel-actions a:focus-visible{border-color:var(--terracotta);background:#fff1e2;color:#8c5640;transform:translateY(-2px);box-shadow:0 10px 24px rgba(161,104,78,.16)}.panel-actions a.is-primary:hover,.panel-actions a.is-primary:focus-visible{background:#b77c5d;border-color:#b77c5d;color:#fff}.cover-card:hover strong,.cover-card:focus-visible strong{color:#8c5640}
.list-item:hover,.list-item:focus-visible{border-color:var(--terracotta);background:#fff1e2;transform:translateY(-2px);box-shadow:0 10px 24px rgba(161,104,78,.14)}.panel-nav button:hover,.panel-nav button:focus-visible{color:#8c5640}.cta a:hover,.cta a:focus-visible,.hero-actions .primary:hover,.hero-actions .primary:focus-visible{background:#b77c5d;transform:translateY(-1px)}#open-travel-card:hover,#open-travel-card:focus-visible{box-shadow:0 0 0 2px var(--terracotta);transform:translateY(-2px)}.gallery-nav>button:hover,.gallery-nav>button:focus-visible{border-color:var(--terracotta);background:#fff1e2;color:#8c5640}.gallery-dots button:hover{background:#c99a80}
body[data-theme="night"] .panel-actions a.cover-card{background:#2c3836;border-color:rgba(226,216,199,.3);color:#ece6db}body[data-theme="night"] .cover-card strong{color:#f5eadf}
.loading p em{font-style:normal;font-size:12px;letter-spacing:.16em;color:#7a7c6e}
.panel-lead,.decision-note p{white-space:pre-line}
.hero h1,.hero>p,.detail-panel h2,.panel-lead,.decision-note p,.list-item strong,.list-item small,.zone-preview p,.cover-card strong,.gallery-title{word-break:keep-all;overflow-wrap:anywhere}
.detail-panel h2,.hero h1,.gallery-title{text-wrap:balance}.panel-body p,.list-item small,.zone-preview p,.hero>p{text-wrap:pretty}
.gallery-title{margin:0 0 10px;font:700 17px "Playfair Display","Noto Sans TC",serif;color:#484a3f;letter-spacing:.06em}body[data-theme="night"] .gallery-title{color:#f5eadf}
.panel-body p,.gallery-slide figcaption{word-break:keep-all;overflow-wrap:anywhere}
.panel-article{margin:16px 0 14px}.panel-article a.cover-card{display:flex;align-items:center;gap:14px;padding:10px;border:1.5px solid #e4cdb3;border-radius:18px;background:#fbf3e8;color:#4c5043;text-decoration:none;transition:background-color .2s,border-color .2s,transform .2s,box-shadow .2s}.article-card img{width:86px;height:86px;border-radius:12px;object-fit:cover}.panel-article a.cover-card:hover,.panel-article a.cover-card:focus-visible{border-color:var(--terracotta);background:#fff1e2;transform:translateY(-2px);box-shadow:0 10px 24px rgba(161,104,78,.16)}
body[data-theme="night"] .panel-article a.cover-card{background:#2c3836;border-color:rgba(226,216,199,.3);color:#ece6db}
.article-card img{object-position:38% 35%}
.panel-ig{margin:18px 0 6px}.ig-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}.ig-head span{font-size:11px;letter-spacing:.32em;color:#8a7a6b}.ig-head a{font-size:13px;color:#8a7a6b;text-decoration:none}.ig-head a:hover,.ig-head a:focus-visible{color:#8c5640;text-decoration:underline}
.ig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.ig-cell{display:block;aspect-ratio:1;border-radius:12px;overflow:hidden;background:#eee5da;border:1.5px solid transparent;transition:transform .2s,border-color .2s,box-shadow .2s}.ig-cell img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .3s}.ig-cell.is-loading{animation:igPulse 1.4s ease-in-out infinite}a.ig-cell:hover,a.ig-cell:focus-visible{border-color:var(--terracotta);transform:translateY(-2px);box-shadow:0 10px 22px rgba(161,104,78,.18)}a.ig-cell:hover img{transform:scale(1.05)}
@keyframes igPulse{50%{opacity:.55}}body[data-theme="night"] .ig-cell{background:#2c3836}
.panel-magazines{margin:18px 0 6px}.magazine-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.magazine-card{display:flex;flex-direction:column;gap:7px;padding:9px 9px 12px;border:1.5px solid #e6dccb;border-radius:16px;background:#fffdf8;color:#3f4a38;text-decoration:none;transition:background-color .2s,border-color .2s,transform .2s,box-shadow .2s}.magazine-card img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:10px;box-shadow:0 6px 14px rgba(60,52,45,.14)}.magazine-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.magazine-meta b{font:600 12px "Playfair Display",serif;color:#a17d66}.magazine-meta small{padding:2px 8px;border-radius:7px;font-size:10px;font-weight:700}.tag-travel{background:#e7efdc;color:#5d7a46}.tag-observe{background:#f6e2d6;color:#9a5c40}.magazine-card strong{font-size:13px;line-height:1.45;word-break:keep-all;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.magazine-card:hover,.magazine-card:focus-visible{border-color:var(--terracotta);background:#fff1e2;transform:translateY(-2px);box-shadow:0 10px 24px rgba(161,104,78,.16)}.magazine-card:hover strong{color:#8c5640}
body[data-theme="night"] .magazine-card{background:#2c3836;border-color:rgba(226,216,199,.3);color:#ece6db}
.panel-photo.is-contain img{width:auto;max-width:100%;max-height:300px;margin:0 auto;object-fit:contain;background:#fff;border-radius:14px}
.panel-feature{margin:18px 0 14px}.feature-title{margin:0 0 6px;font:700 17px/1.5 "Playfair Display","Noto Sans TC",serif;color:#484a3f;white-space:pre-line;word-break:keep-all;overflow-wrap:anywhere}.feature-subtitle{margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:.14em;color:#a17d66}body[data-theme="night"] .feature-title{color:#f5eadf}
.panel-posts,.panel-reading{margin:20px 0 6px}.post-row{display:grid;grid-auto-flow:column;grid-auto-columns:46%;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 2px 10px;scrollbar-width:thin}.post-row.is-single{grid-auto-columns:62%}.post-card{display:block;aspect-ratio:1;border-radius:16px;overflow:hidden;scroll-snap-align:start;border:1.5px solid transparent;background:#eee5da;transition:transform .2s,border-color .2s,box-shadow .2s}.post-card img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .3s}.post-card:hover,.post-card:focus-visible{border-color:var(--terracotta);transform:translateY(-2px);box-shadow:0 10px 22px rgba(161,104,78,.18)}.post-card:hover img{transform:scale(1.04)}
/* ---- top bar (avatar + two-line name, weather, list, info) ---- */
.topbar{min-height:76px;gap:16px;padding:12px 24px;background:linear-gradient(180deg,rgba(255,251,246,.95),rgba(255,251,246,.72) 70%,transparent)}
.brand{gap:12px}.brand-avatar{width:46px;height:46px;border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:0 4px 14px rgba(74,62,50,.18);flex:none}
.brand-text strong{display:block;font:700 16px "Playfair Display",serif;letter-spacing:.05em;color:#3f4a38;white-space:nowrap}.brand-text strong em{font:600 11.5px "Noto Sans TC",sans-serif;font-style:normal;letter-spacing:.26em;margin-left:5px;color:#5c6153}.brand-text small{display:block;font-size:13px;letter-spacing:.34em;color:#55594b;margin-top:3px}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:12px;pointer-events:auto}
.topbar .clock-weather{position:static;padding:6px 14px 7px;border-radius:14px;background:#e6efdc;border:1px solid #cddcbf;color:#4d5a40;box-shadow:none;backdrop-filter:none}.topbar .cw-top{font-size:11px;color:#5d6a50}.topbar #cw-text{color:#6d7a5d}.topbar #cw-temp{color:#7a866b}.topbar .clock-weather time{font-size:18px;color:#4d5a40;letter-spacing:.1em}
.top-link{display:flex;align-items:center;gap:7px;border:0;background:transparent;font-size:14px;font-weight:600;color:#4d5246;cursor:pointer;padding:8px 8px;border-radius:10px;transition:background-color .2s,color .2s}.top-link span:first-child{font-size:17px}.top-link:hover,.top-link:focus-visible{color:#8c5640;background:rgba(255,241,226,.8)}
.top-info{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#fffaf4;font:italic 700 17px "Playfair Display",serif;color:#4d5246;cursor:pointer;box-shadow:0 6px 18px rgba(74,62,50,.1);transition:background-color .2s,border-color .2s,color .2s}.top-info:hover,.top-info:focus-visible{border-color:var(--terracotta);color:#8c5640;background:#fff1e2}
body[data-theme="night"] .brand-text strong,body[data-theme="night"] .brand-text small,body[data-theme="night"] .brand-text strong em,body[data-theme="night"] .top-link{color:#ece6db}body[data-theme="night"] .top-info{background:#2c3836;color:#ece6db}
@media(min-width:621px){.hero{top:88px}}
/* ---- bottom dock ---- */
.scene-guide{display:none}
.dock{position:fixed;z-index:19;left:50%;bottom:18px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:999px;background:rgba(255,250,244,.92);border:1px solid rgba(255,255,255,.85);box-shadow:0 14px 40px rgba(55,48,40,.18);backdrop-filter:blur(12px);white-space:nowrap}
.dock-stat{padding:0 9px;font-size:13px;color:#7a7c6e}.dock-stat b{font-size:16px;color:#4d5a40;margin:0 2px}.dock-stat small{font-size:12px;color:#9a9c8e}.dock-sep{width:1px;height:22px;background:var(--line)}
.dock-btn{display:flex;align-items:center;gap:6px;height:40px;padding:0 15px;border-radius:999px;border:1px solid transparent;background:transparent;font-size:13px;font-weight:600;color:#4d5246;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s,transform .2s}.dock-btn span:first-child{font-size:15px}.dock-btn.is-sand{background:#fbecd8;border-color:#f0d9b8;color:#7a5a3c}.dock-btn.is-sage{background:#e6efdc;border-color:#cddcbf;color:#4d5a40}.dock-btn:hover,.dock-btn:focus-visible{border-color:var(--terracotta);background:#fff1e2;color:#8c5640;transform:translateY(-1px)}.dock-btn[aria-pressed="true"]{box-shadow:inset 0 0 0 1.5px var(--terracotta)}
.theme-switch{display:flex;gap:2px;padding:3px;border-radius:999px;background:#f1ece2}.theme-switch button{width:40px;height:34px;border:0;border-radius:999px;background:transparent;font-size:17px;color:#a99d8b;cursor:pointer;transition:background-color .2s,color .2s}.theme-switch button:hover{color:#8c5640}.theme-switch button[aria-pressed="true"]{background:#fff;color:#d08a3c;box-shadow:0 3px 10px rgba(74,62,50,.15)}#theme-night[aria-pressed="true"]{color:#6b74a8}
.zoom-pill{display:flex;align-items:center;gap:2px;height:40px;padding:0 6px;border:1px solid var(--line);border-radius:999px;background:#fffdf8}.zoom-pill span{font-size:12px;color:#8a8c7e;padding:0 5px}.zoom-pill button{width:30px;height:30px;border:0;border-radius:50%;background:transparent;font-size:18px;color:#4d5246;cursor:pointer;transition:background-color .2s,color .2s}.zoom-pill button:hover,.zoom-pill button:focus-visible{background:#fff1e2;color:#8c5640}
body[data-theme="night"] .dock{background:rgba(29,40,40,.92);border-color:rgba(255,255,255,.12)}body[data-theme="night"] .dock-stat,body[data-theme="night"] .dock-btn{color:#e9e4da}body[data-theme="night"] .dock-stat b{color:#f5eadf}body[data-theme="night"] .theme-switch{background:#34413f}body[data-theme="night"] .theme-switch button[aria-pressed="true"]{background:#1f2a29}body[data-theme="night"] .zoom-pill{background:#2c3836}body[data-theme="night"] .zoom-pill button{color:#e9e4da}
@media(max-width:1280px){.dock{left:16px;transform:none}}
@media(max-width:1120px){#motion-label,#music-label{display:none}.dock-btn{padding:0 12px}}
/* ---- wider detail panel, single-line titles, 已顯示 x / N rows ---- */
@media(min-width:901px){.detail-panel{top:86px;right:20px;width:min(760px,calc(100vw - 340px));max-height:calc(100vh - 170px);padding:30px 34px 26px}.magazine-grid{grid-template-columns:repeat(3,1fr)}}
.detail-panel h2{white-space:nowrap;font-size:clamp(20px,2.2vw,28px)}
.panel-photo img{max-height:380px;object-fit:contain;background:#f6efe6}.gallery-slide img{max-height:540px;object-fit:contain;background:#f3ebe0}
.list-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:10px}.list-head .gallery-title{margin:0}.list-count{font-size:12px;color:#8a8c7e;white-space:nowrap}
.card-row{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 20px) / 3);gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 2px 10px;scrollbar-width:thin}.card-row>a{scroll-snap-align:start}.post-card{aspect-ratio:4/5}
@media(max-width:900px){.card-row{grid-auto-columns:46%}}
/* ---- phone ---- */
@media(max-width:620px){.topbar{padding:8px 10px;gap:8px}.brand>span.brand-text{display:block}.brand-avatar{width:38px;height:38px}.brand-text strong{font-size:14px}.brand-text strong em{display:none}.brand-text small{font-size:11px;letter-spacing:.22em}.topbar-right{gap:6px}.topbar .cw-top{display:none}.topbar .clock-weather{padding:6px 9px}.topbar .clock-weather time{font-size:14px}.top-link span:last-child{display:none}.top-link{padding:8px 6px}.top-info{width:36px;height:36px}
.hero{top:74px}.detail-panel{top:72px;max-height:calc(100vh - 196px)}.detail-panel h2{font-size:19px}
.dock{left:8px;right:8px;bottom:58px;transform:none;overflow-x:auto;justify-content:flex-start;scrollbar-width:none}.dock::-webkit-scrollbar{display:none}.dock-stat{font-size:12px;padding:0 6px}.dock-btn{height:36px}.theme-switch button{width:34px;height:30px}.zoom-pill{height:36px}}
/* ---- dock lives in the top bar on wide screens ---- */
@media(min-width:1101px){.topbar .dock{position:static;transform:none;left:auto;bottom:auto;padding:4px 6px;gap:6px;background:rgba(255,250,244,.82);box-shadow:0 6px 18px rgba(74,62,50,.08)}.topbar .dock .dock-btn{height:36px;padding:0 12px;font-size:12.5px}.topbar .dock-stat{font-size:12px;padding:0 7px}.topbar .dock-stat b{font-size:15px}.topbar .theme-switch button{width:34px;height:30px;font-size:15px}.topbar .zoom-pill{height:36px}}
@media(min-width:1101px) and (max-width:1420px){#motion-label,#music-label{display:none}.topbar .dock .dock-btn{padding:0 11px}}
@media(min-width:1101px) and (max-width:1260px){.top-link span:last-child{display:none}.zoom-pill span{display:none}.topbar .cw-top{display:none}}
@media(max-width:1100px){.dock{left:16px;transform:none}}
/* carousels: keep the whole card and its controls in view */
.gallery-slide img{max-height:min(400px,46vh)}
/* narrow card titles: CJK breaking with kinsoku (no punctuation at line start) and no orphan lines */
.magazine-card strong,.cover-card strong{word-break:normal;overflow-wrap:normal;line-break:strict;text-wrap:pretty}
/* magazine titles break between clauses first; full title shown */
.magazine-card strong{display:block;-webkit-line-clamp:unset;overflow:visible}.magazine-card strong .clause{display:inline-block}
@media(max-width:620px){.magazine-card strong{font-size:12.5px}}
@media(max-width:620px){.magazine-grid{grid-template-columns:1fr}.magazine-grid .magazine-card{display:grid;grid-template-columns:92px 1fr;grid-template-rows:auto 1fr;column-gap:12px;row-gap:6px;align-items:start}.magazine-grid .magazine-card img{grid-row:1 / span 2}#panel-reading .card-row{grid-auto-columns:72%}}
/* primary CTA: wide and centred */
.panel-actions{justify-content:center}.panel-actions a.is-primary{display:block;width:min(420px,100%);padding:15px 28px;text-align:center;font-size:15px;letter-spacing:.06em;box-shadow:0 10px 24px rgba(161,104,78,.25)}
@media(max-width:620px){#panel-magazines .card-row{grid-auto-columns:72%}}
/* ---- stage 1: numbered map labels, script slogans, compass (after the reference map) ---- */
.zone-label{display:flex;align-items:center;gap:9px;padding:8px 9px 8px 8px;border-radius:16px;text-align:left;border:1px solid rgba(185,165,143,.45);background:rgba(255,252,247,.94)}
.label-num{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#c9b49c;color:#fff;font:600 13px "Playfair Display",serif}
.zone-label[data-zone="style"] .label-num{background:#cf8f7c}
.label-full b{display:block;font:700 12.5px "Playfair Display","Noto Sans TC",serif;color:#4c5043}.label-full small{display:block;font-size:11.5px;font-weight:700;letter-spacing:.08em;color:#4c5043;margin-top:1px}
.label-tag{display:block;max-width:150px;margin-top:4px;font-style:normal;font-size:9.5px;line-height:1.45;color:#8a7c6e;word-break:keep-all;overflow-wrap:anywhere}
.label-arrow{flex:none;align-self:flex-end;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#c9b49c;color:#fff;font-size:11px;transition:background-color .2s,transform .2s}
.zone-label:hover .label-arrow,.zone-label:focus-visible .label-arrow,.zone-label.is-active .label-arrow{background:var(--terracotta);transform:translateX(2px)}
.zone-label:hover .label-num,.zone-label.is-active .label-num{background:var(--terracotta)}
.slogan{position:fixed;z-index:8;margin:0;font:400 34px/1.05 "Great Vibes",cursive;color:#8a7663;pointer-events:none;transform:rotate(-8deg);text-shadow:0 1px 0 rgba(255,255,255,.6)}
.slogan-top{left:52px;top:300px}.slogan-bottom{left:40px;bottom:42px;font-size:36px}
.compass{position:fixed;z-index:8;right:30px;bottom:82px;width:84px;height:84px;pointer-events:none;filter:drop-shadow(0 6px 14px rgba(74,62,50,.15))}
body[data-theme="night"] .slogan{color:#e6d6c2;text-shadow:none}body[data-theme="night"] .zone-label{background:rgba(29,40,40,.9)}body[data-theme="night"] .label-full b,body[data-theme="night"] .label-full small{color:#ece6db}body[data-theme="night"] .label-tag{color:#c9bfb1}
@media(max-width:1100px){.label-tag,.label-arrow{display:none}.slogan,.compass{display:none}}
@media(max-width:620px){.zone-label{gap:0;padding:4px 7px}.label-num{display:none}}
@media(min-width:1101px){.zone-label{gap:7px;padding:6px 7px 6px 6px;border-radius:14px}.label-num{width:26px;height:26px;font-size:12px}.label-full b{font-size:11.5px}.label-full small{font-size:10.5px}.label-tag{max-width:112px;font-size:9px;margin-top:3px}.label-arrow{width:18px;height:18px;font-size:10px}
.zone-label[data-zone="lighthouse"]{margin-left:-46px;margin-top:-18px}.zone-label[data-zone="body"]{margin-top:-30px}.zone-label[data-zone="style"]{margin-left:46px;margin-top:-10px}.zone-label[data-zone="travel"]{margin-left:40px;margin-top:-14px}.zone-label[data-zone="cafe"]{margin-top:30px;margin-left:-20px}.zone-label[data-zone="academy"]{margin-left:-24px}}
.compass{width:56px;height:56px;right:34px;bottom:78px}