:root{color-scheme:dark;--bg:#101d19;--ink:#e7e8da;--muted:#9fae9e;--gold:#d2bf8e;--line:#b8bb9630;--scene-rgb:103,144,108;--signal:0}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{font-family:"PingFang TC","Microsoft JhengHei",sans-serif;background:var(--bg);color:var(--ink);-webkit-tap-highlight-color:transparent}button,input,textarea{font:inherit}button,a{color:inherit}button{border:0;background:none;cursor:pointer;touch-action:manipulation}button:disabled{opacity:.32;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--gold);outline-offset:3px}a{text-decoration:none}button,[role=button]{-webkit-user-select:none;user-select:none}[hidden]{display:none!important}.experience{position:relative;isolation:isolate;width:100%;max-width:1440px;margin:auto;height:100vh;height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;padding:env(safe-area-inset-top) max(24px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(24px,env(safe-area-inset-left));overflow:hidden}.experience:before{content:'';position:absolute;z-index:-1;inset:0;pointer-events:none;background:radial-gradient(ellipse at 28% 42%,rgba(var(--scene-rgb),.14),transparent 65%);transition:background 1s}.experience:after{content:'';position:absolute;z-index:-1;inset:0;pointer-events:none;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E")}.topbar{display:flex;align-items:center;justify-content:space-between;min-height:85px;border-bottom:1px solid var(--line);gap:10px}.identity{display:flex;align-items:center;gap:12px;min-width:0}.brand-symbol{font-size:38px;font-weight:200;color:var(--gold)}.identity strong{font-family:"Songti TC","Noto Serif TC",serif;font-size:21px;letter-spacing:5px;font-weight:400}.identity small{display:block;font-size:10px;letter-spacing:.6px;color:var(--muted);margin-top:5px}.round-button{width:44px;height:44px;border:1px solid var(--line);border-radius:50%;font-family:Georgia,serif;color:var(--gold);flex-shrink:0}.stage{display:grid;grid-template-columns:1.2fr 1fr;align-items:center;min-height:0;gap:6%;padding:20px 3%}.sphere-zone{height:100%;min-height:0;display:grid;place-items:center;touch-action:none}.sphere-art{height:100%;max-height:540px;aspect-ratio:1;max-width:100%;position:relative;container-type:inline-size}#sphere{display:block;height:100%;width:100%;overflow:visible}.svg-caption{font-size:5px;letter-spacing:2px;fill:#adbaa088}.ring-base{stroke:#99b18c2d;fill:none;stroke-width:.8}.ring-light{stroke:url(#ringLight);stroke-width:1.8;fill:none;opacity:0;transition:opacity .7s,stroke-width .7s}.ring-haze{stroke:var(--gold);stroke-width:12;filter:url(#glow);fill:none;opacity:0;transition:opacity .7s}.sphere-ring.active .ring-light{opacity:1;stroke-width:2}.sphere-ring.active .ring-haze{opacity:.14}.sphere-ring.passed .ring-base{stroke:#aab38d55}.sphere-ring.current .ring-light{stroke-width:2.4}.sphere-ring.all-lit .ring-light{transition-delay:calc(var(--i)*70ms)}.ring-mark{fill:var(--gold);opacity:.18;transition:opacity .7s}.active .ring-mark{opacity:.9}.center-fill{fill:#d2bf8e;opacity:0;transition:opacity .7s}.active .center-fill{opacity:.09}.ring-hit{stroke:transparent;stroke-width:14;fill:none;cursor:pointer;pointer-events:stroke}.orb-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;text-align:center;white-space:nowrap}.orb-center small{display:block;font-size:clamp(5px,2cqw,10px);letter-spacing:.8px;color:var(--gold)}.orb-center strong{display:block;font-family:"Songti TC",serif;font-size:clamp(13px,7.2cqw,35px);font-weight:400;letter-spacing:2px;margin-top:5px}.playing .sphere-ring.current .ring-haze{animation:breathing 7s ease-in-out infinite}.playing .sphere-ring.all-lit .ring-haze{animation:breathing 8s ease-in-out infinite;animation-delay:calc(var(--i)*.3s)}@keyframes breathing{50%{opacity:.045}}.slide-panel{width:100%;max-width:520px;min-width:0}.slide-kicker{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:10px;letter-spacing:1.5px;color:var(--gold)}#sceneShort{font-size:10px;color:var(--muted);letter-spacing:.5px;white-space:nowrap}.slide-panel h1{font-family:"Songti TC","Noto Serif TC",serif;font-weight:400;font-size:clamp(26px,2.8vw,42px);line-height:1.5;letter-spacing:2px;margin:20px 0 14px}.slide-description{font-size:14px;line-height:1.9;color:#bbc5b5;margin:0;min-height:54px}.stage-interaction{margin-top:25px;min-height:105px}.thought-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.thought-button{min-height:49px;border:1px solid #cfb78345;background:#d2bf8e06;display:flex;align-items:center;justify-content:space-between;gap:5px;padding:10px 12px;color:#e1d6b8;font-size:12px;border-radius:3px;text-align:left;transition:background .35s,opacity .35s}.thought-button .voice-indicator{font-size:16px;color:var(--gold);font-weight:300}.thought-button.quiet{background:#adc39408;border-color:#adc39425;opacity:.4}.thought-button.quiet .voice-indicator{font-size:12px;color:#a7c294}.thought-button.quiet-all{background:#d2bf8e18;border-color:#cfb78370;color:var(--gold)}.quiet-panel{padding:20px;border:1px solid #b6c8a13b;display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;color:#c6d6b6;font-size:13px}.quiet-panel button{font-size:11px;color:var(--muted);min-height:44px}.listening-cue{display:flex;gap:15px;align-items:center;min-height:85px}.cue-line{width:27px;height:1px;background:var(--gold);flex-shrink:0}.listening-cue p{font-size:13px;line-height:1.8;color:var(--gold);margin:0}.whole-options{display:flex;align-items:center;gap:12px;min-height:85px;font-size:13px}.whole-options input{width:20px;height:20px;accent-color:var(--gold)}.whole-options small{display:block;color:var(--muted);font-size:11px;margin-top:8px}.control-deck{max-width:880px;width:100%;margin:0 auto;padding:10px 0 0;border-top:1px solid var(--line)}.status-row{display:flex;gap:10px;align-items:center;min-height:24px;font-size:10px;color:var(--muted)}#status{flex:1;line-height:1.4}.signal{width:38px;height:3px;background:#adc39720;overflow:hidden}.signal i{display:block;height:100%;width:0;background:var(--gold);transition:width .1s}#pageCount{font-family:Georgia,serif;color:var(--gold);font-size:11px;letter-spacing:1px;white-space:nowrap}.progress{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin:3px 0 8px}.progress button{height:18px;position:relative;padding:0}.progress button:before{content:'';position:absolute;top:8px;left:0;right:0;height:2px;background:#a7b29230;transition:background .5s}.progress button.visited:before{background:#a7b29275}.progress button.active:before{height:3px;background:var(--gold)}.progress button:disabled{opacity:1}.transport{display:grid;grid-template-columns:46px 1fr 1.3fr;gap:10px}.transport button{height:52px;border-radius:3px;font-size:13px}.previous{border:1px solid var(--line);font-size:22px!important;color:var(--gold)}.play-button{border:1px solid #cfb78350;display:flex;gap:12px;align-items:center;justify-content:center;color:var(--gold)}#playIcon{font-size:12px}.next-button{background:var(--gold);color:#18241d;display:flex;gap:15px;align-items:center;justify-content:space-between;padding:0 20px}.utility-bar{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:3px}.utility-bar button{height:43px;font-size:11px;color:var(--muted);white-space:nowrap}.utility-bar button>span:first-child{color:var(--gold);font-size:15px;margin-right:5px}footer{display:flex;gap:15px;justify-content:center;align-items:center;font-size:10px;line-height:1.5;color:#9eae947a;padding:5px 0 10px}footer a{color:#b9b28d;white-space:nowrap}.sheet{color:var(--ink);background:#18271f;border:1px solid #cfb78350;border-radius:9px;width:min(540px,calc(100vw - 30px));max-height:calc(100dvh - 50px);padding:28px;overflow:auto;box-shadow:0 20px 100px #0006}.sheet::backdrop{background:#07110dd9;backdrop-filter:blur(8px)}.sheet-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:20px}.sheet-head small{font-size:9px;letter-spacing:2px;color:var(--gold)}.sheet-head h2{font:400 26px/1.5 "Songti TC",serif;letter-spacing:1px;margin:10px 0 0}.sheet-head>button{width:44px;height:44px;color:var(--gold);font-size:26px;flex-shrink:0}.sheet p,.sheet li{font-size:13px;color:var(--muted);line-height:1.9}.sheet p a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}.sheet-note{font-size:11px!important}.scene-list{display:grid;gap:8px}.scene-choice{display:flex;gap:16px;align-items:center;text-align:left;border:1px solid var(--line);padding:13px;min-height:70px;border-radius:4px}.scene-choice[aria-pressed=true]{border-color:var(--gold);background:#d2bf8e0a}.scene-number{font:16px Georgia,serif;color:var(--gold)}.scene-choice strong{display:block;font-size:14px;font-weight:400}.scene-choice small{display:block;font-size:10px;color:var(--muted);margin-top:6px}.scene-choice .chosen{margin-left:auto;color:var(--gold)}.volume-control{display:flex;justify-content:space-between;color:var(--gold);font-size:13px;margin-top:20px}.volume{width:100%;height:44px;accent-color:var(--gold)}.setting-button{display:block;text-align:left;width:100%;padding:17px 0;min-height:70px;border-bottom:1px solid var(--line);color:var(--ink);font-size:14px}.setting-button span{display:block;color:var(--muted);font-size:11px;margin-top:9px}.setting-button[aria-pressed=true]{color:var(--gold)}#noteLabel{display:block;font-size:11px;color:var(--gold);line-height:1.8;margin-bottom:14px}textarea{width:100%;height:180px;max-height:35dvh;resize:vertical;background:#09170f30;border:1px solid var(--line);border-radius:4px;padding:14px;line-height:1.8;font-size:15px;color:var(--ink)}.note-actions{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:10px}.note-actions span{font-size:10px;color:var(--muted)}.note-actions button{min-height:44px;font-size:12px;color:var(--gold)}.help-steps{padding-left:22px}.help-steps li{padding-left:5px;margin-bottom:12px}.slide-panel.entering{animation:slide-in .5s ease both}@keyframes slide-in{from{opacity:.25;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:700px){.experience{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}.topbar{min-height:65px}.identity{gap:8px}.brand-symbol{font-size:30px}.identity strong{font-size:18px;letter-spacing:4px}.identity small{font-size:8px;letter-spacing:0;margin-top:3px}.round-button{width:38px;height:38px}.stage{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;gap:0;padding:8px 0 12px}.sphere-zone{padding:0 8px}.sphere-art{max-height:360px}.slide-panel{max-width:none}.slide-kicker{font-size:9px;letter-spacing:1px}#sceneShort{font-size:9px}.slide-panel h1{font-size:26px;line-height:1.4;letter-spacing:1px;margin:10px 0 8px}.slide-description{font-size:12px;line-height:1.7;min-height:40px}.stage-interaction{margin-top:10px;min-height:60px}.thought-controls{gap:6px}.thought-button{font-size:11px;padding:8px 9px;min-height:44px}.quiet-panel{padding:9px 13px;min-height:72px;font-size:12px;gap:8px}.listening-cue{min-height:60px;gap:10px}.listening-cue p{font-size:12px}.whole-options{min-height:60px;font-size:12px}.whole-options small{font-size:10px}.control-deck{padding-top:6px}.status-row{font-size:9px;min-height:23px}.progress{margin:0 0 5px}.transport{grid-template-columns:42px 1fr 1.3fr;gap:8px}.transport button{height:48px;font-size:12px}.next-button{padding:0 13px;gap:5px}.play-button{gap:7px}.utility-bar{gap:2px;margin-top:0}.utility-bar button{font-size:10px;height:39px}.utility-bar button>span:first-child{font-size:13px}footer{font-size:8px;gap:10px;padding:3px 0 6px}.sheet{padding:20px;max-height:calc(100dvh - 24px)}.sheet-head{margin-bottom:12px}.sheet-head h2{font-size:24px}.scene-choice{min-height:65px;padding:10px}.sheet .sheet-note{margin-bottom:0}}
@media(max-height:710px) and (max-width:700px){.topbar{min-height:54px}.brand-symbol{font-size:25px}.identity strong{font-size:16px}.identity small{font-size:7.5px}.stage{padding-top:3px;padding-bottom:7px}.slide-panel h1{font-size:22px;margin:7px 0 5px}.slide-description{font-size:11px;line-height:1.6;min-height:34px}.stage-interaction{margin-top:7px;min-height:48px}.thought-button{min-height:40px;font-size:10px;padding:6px 7px}.thought-controls{gap:5px}.quiet-panel{min-height:55px}.listening-cue,.whole-options{min-height:48px}.status-row{font-size:8px;min-height:20px}.transport button{height:44px}.utility-bar button{height:35px}.progress{margin-bottom:3px}.progress button{height:14px}.progress button:before{top:6px}.control-deck{padding-top:3px}footer{padding-bottom:3px;font-size:7.5px}}
@media(max-width:350px){.experience{padding-left:13px;padding-right:13px}.identity small{font-size:7px}.slide-panel h1{font-size:21px}.thought-button{font-size:10px}.next-button{padding:0 10px}.transport{gap:6px}.transport button{font-size:11px}.slide-kicker,#sceneShort{font-size:8px}footer{gap:6px;font-size:7px}}
@media(max-height:500px) and (orientation:landscape){.experience{padding-left:20px;padding-right:20px}.topbar{min-height:45px}.identity strong{font-size:15px}.brand-symbol{font-size:24px}.identity small{font-size:8px}.round-button{width:32px;height:32px}.stage{grid-template-columns:.8fr 1.2fr;grid-template-rows:minmax(0,1fr);gap:5%;padding:7px 2%}.slide-panel h1{font-size:23px;margin:6px 0}.slide-description{font-size:11px;line-height:1.5;min-height:30px}.stage-interaction{margin-top:7px;min-height:44px}.thought-button{min-height:36px;font-size:10px;padding:6px}.thought-controls{gap:5px}.listening-cue,.whole-options{min-height:42px}.control-deck{padding-top:2px;max-width:720px}.status-row{min-height:16px;font-size:8px}.progress{margin:0 0 3px}.progress button{height:9px}.progress button:before{top:3px}.transport button{height:36px}.transport{grid-template-columns:40px 1fr 1.3fr}.utility-bar button{height:28px;font-size:9px}footer{padding:0 0 3px;font-size:7px}.quiet-panel{min-height:44px;padding:4px 10px}.quiet-panel button{min-height:34px}.sphere-zone{padding:0}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

@media(max-width:700px){.stage-interaction{min-height:94px}}
@media(max-height:710px) and (max-width:700px){.stage-interaction{min-height:85px}}
@media(max-height:500px) and (orientation:landscape){.stage-interaction{min-height:77px}}
/* Keep the sphere's aspect ratio from enlarging the grid beyond a narrow screen. */
.stage{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}.sphere-zone{min-width:0}
@media(max-width:700px){.stage{grid-template-columns:minmax(0,1fr)}.sphere-art{max-height:min(360px,calc(100vw - 56px))}}
@media(max-height:500px) and (orientation:landscape){.stage{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}}
footer{color:#95a58f}
@media(max-width:700px){footer{font-size:9px}.identity small{font-size:9px}}
@media(max-width:350px){footer{font-size:8px}.identity small{font-size:8px}}
@media(max-height:500px) and (orientation:landscape){footer{font-size:8px}}

/* 08 / BLEND — every outer sphere sounds at once; the swept ring leads the mix. */
.progress{grid-template-columns:repeat(8,1fr)}
.blend .sphere-ring .ring-light,.blend .sphere-ring .ring-haze,.blend .sphere-ring .ring-mark{transition-duration:.25s;transition-delay:0s}
.blend .sphere-ring.lead .ring-light{stroke-width:3.4}
.blend .sphere-ring.lead .ring-haze{opacity:.34}
.blend .sphere-ring.lead .ring-mark{opacity:1}
.playing.blend .sphere-ring.blend-lit .ring-haze{animation:breathing 8s ease-in-out infinite}
.playing.blend .sphere-ring.lead .ring-haze{animation:blend-flicker 2.4s steps(1,end) infinite}
@keyframes blend-flicker{0%,100%{opacity:.34}11%{opacity:.13}17%{opacity:.36}29%{opacity:.18}37%{opacity:.32}51%{opacity:.10}59%{opacity:.35}73%{opacity:.20}85%{opacity:.34}}
.blend-panel{display:grid;gap:8px;align-content:center;min-height:85px}
.blend-panel label{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:12px;color:var(--gold)}
.blend-panel output{font-family:Georgia,serif;letter-spacing:1px}
.blend-range{width:100%;height:24px;margin:0;accent-color:var(--gold)}
.blend-panel small{font-size:11px;line-height:1.7;color:var(--muted)}
.scene-choice[disabled]{opacity:.4;cursor:default}
.scene-choice[disabled] small{color:var(--gold)}
.loading-overlay{position:absolute;z-index:20;inset:0;display:grid;place-items:center;padding:24px;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.loading-overlay:before{content:'';position:absolute;inset:0;background:#07110da8;backdrop-filter:blur(7px)}
.loading-card{position:relative;width:min(320px,calc(100vw - 56px));min-height:190px;border:1px solid #cfb78370;background:linear-gradient(180deg,#1d2d25f2,#101d19f2);box-shadow:0 24px 90px #0009,0 0 0 1px #ffffff08 inset;display:grid;place-items:center;text-align:center;gap:12px;padding:28px;border-radius:8px;transform:translateY(10px) scale(.96);transition:transform .25s;color:var(--ink)}
.loading-spinner{width:58px;height:58px;border-radius:50%;border:1px solid #cfb78345;border-top-color:var(--gold);border-right-color:#e9d9a8;box-shadow:0 0 32px #d2bf8e20;animation:loading-spin 1s linear infinite}
.loading-card strong{font:400 24px/1.35 "Songti TC","Noto Serif TC",serif;letter-spacing:2px;color:var(--gold)}
.loading-card span:last-child{font-size:12px;line-height:1.7;color:var(--muted)}
body.loading-audio .loading-overlay{opacity:1;visibility:visible}
body.loading-audio .loading-card{transform:none}
@keyframes loading-spin{to{transform:rotate(360deg)}}
@media(max-width:700px){.blend-panel{min-height:94px}.blend-panel small{font-size:10px}}
@media(max-height:710px) and (max-width:700px){.blend-panel{min-height:85px;gap:6px}.blend-panel small{font-size:9.5px;line-height:1.6}}
@media(max-height:500px) and (orientation:landscape){.blend-panel{min-height:77px;gap:5px}.blend-panel small{font-size:9px}}