@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap";:root{color:#234e42;font-synthesis:none;background:#eef3e9;font-family:DM Sans,Noto Sans TC,sans-serif;font-weight:400}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline-offset:4px;outline:3px solid #bd8745}button{color:inherit}#app{background:radial-gradient(at 48% 42%,#fafcf5 0%,#eef3e9 70%);height:100svh;min-height:700px;position:relative;overflow:hidden}#scene{position:absolute;inset:0}#scene canvas{touch-action:none;width:100%;height:100%;display:block}header{z-index:3;justify-content:space-between;align-items:center;display:flex;position:absolute;top:31px;left:42px;right:42px}.brand{color:inherit;letter-spacing:-.6px;align-items:center;gap:12px;font-size:20px;font-weight:700;text-decoration:none;display:flex}.brand small{letter-spacing:2.3px;margin-top:4px;font-size:8px;font-weight:500;display:block}.brand-mark{letter-spacing:-5px;border:1px solid #92b4a0;border-radius:13px;width:41px;height:42px;padding-left:6px;font-size:31px;line-height:40px;position:relative}.brand-mark span{letter-spacing:0;font-size:19px;position:absolute;top:-8px;right:3px}.mode-switch{background:#fff9;border:1px solid #d5e0d2;border-radius:30px;gap:3px;padding:4px;display:flex}.mode-switch button{background:0 0;border:0;border-radius:24px;padding:9px 18px;font-size:12px}.mode-switch .active{color:#fff;background:#285947;box-shadow:0 3px 8px #244d4220}.intro{pointer-events:none;position:absolute;top:155px;left:44px}.eyebrow{letter-spacing:2px;align-items:center;gap:8px;font-size:10px;display:flex}.eyebrow>span{background:#679b76;border-radius:100%;width:6px;height:6px}h1{letter-spacing:3px;margin:23px 0 16px;font-size:42px;font-weight:600;line-height:1.35}h1>span{letter-spacing:2px;margin-top:14px;font-size:23px;font-weight:500;line-height:1.65;display:block}.intro p{color:#829084;letter-spacing:1px;font-size:12px;line-height:1.9}.scene-hint{color:#839385;align-items:center;gap:8px;margin-top:26px;font-size:10px;display:flex}.scene-hint>span{border:1px solid #bbcdbb;border-radius:20px;padding:1px 6px;font-size:16px}.world-label{white-space:nowrap;pointer-events:none;background:#fff9;border:1px solid #dbe5d7;border-radius:25px;align-items:center;gap:9px;padding:10px 16px;font-size:10px;display:flex;position:absolute;top:112px;left:49%;transform:translate(-50%);box-shadow:0 3px 15px #326b3b04}.live-dot{background:#71a477;border-radius:100%;width:6px;height:6px;box-shadow:0 0 0 4px #71a47719}.label-divider{background:#d6dfcf;width:1px;height:11px}.performance-card{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#fffffff0;border:1px solid #fff;border-radius:20px;width:286px;padding:23px;position:absolute;top:154px;right:36px;box-shadow:0 15px 60px #24472c0b}.card-top{justify-content:space-between;align-items:center;display:flex}.tag{color:#5d855c;background:#eaf3e7;border-radius:6px;padding:5px 8px;font-size:10px}.program-number{letter-spacing:2px;color:#97a498;font-size:10px}.performer{align-items:center;gap:11px;margin-top:23px;display:flex}.avatar{color:#967849;background:#f4ead8;border-radius:50%;justify-content:center;align-items:center;width:43px;height:43px;font-size:16px;display:flex}.performer h2{margin:0 0 5px;font-size:19px;font-weight:500}.performer div>span{color:#8c9b8d;font-size:9px}.leaf-icon{color:#9bb68b;margin-left:auto;font-size:27px}.piece{border-top:1px solid #edf0e9;margin-top:22px;padding-top:20px}.piece>span{letter-spacing:2px;color:#94a08e;font-size:9px}.piece h3{letter-spacing:1px;margin:9px 0 4px;font-size:18px;font-weight:500}.piece p{color:#9ca495;margin:0;font-size:10px}.student-note{color:#7c8d7d;background:#f6f7f0;border-radius:8px;margin:18px 0 24px;padding:14px 12px;font-size:10px;line-height:1.9}.action-heading{justify-content:space-between;align-items:center;font-size:10px;display:flex}.action-heading>span:last-child{color:#8a9c80;font-size:9px}.gift-options{gap:7px;margin-top:12px;display:flex}.gift-options button{background:#fff;border:1px solid #e2e9dc;border-radius:10px;flex-direction:column;flex:1;align-items:center;gap:6px;padding:10px 3px;font-size:9px;transition:transform .2s,background .2s;display:flex}.gift-options button:hover{background:#eff5e9;transform:translateY(-3px)}.gift-options button>span{color:#d19a64;font-size:27px;line-height:1.2}.gift-options button:nth-child(2)>span{color:#d6b554}.gift-options button:nth-child(3)>span{color:#5a9471}.gift-options button:disabled{opacity:.5;cursor:wait}.feedback{color:#95a18e;text-align:center;min-height:30px;margin-top:15px;font-size:9px;line-height:1.7}.feedback.success{color:#42734d}.program-nav{flex-direction:column;align-items:center;gap:12px;display:flex;position:absolute;bottom:66px;left:50%;transform:translate(-50%)}.nav-title{letter-spacing:2px;color:#889d85;font-size:9px}.program-tabs{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#ffffffc9;border:1px solid #fff;border-radius:40px;padding:5px;display:flex;box-shadow:0 8px 30px #3d624414}.program-tabs button{white-space:nowrap;background:0 0;border:0;border-radius:30px;align-items:center;gap:8px;padding:12px 18px;font-size:12px;display:flex}.program-tabs button.active{color:#fff;background:#2f604b;box-shadow:0 4px 8px #2a54321a}.tab-dot{background:#b8c7a7;border-radius:50%;width:6px;height:6px}.active .tab-dot{background:#dfc477}.instrument{opacity:.6;font-size:9px}.view-tools{gap:8px;display:flex;position:absolute;bottom:130px;left:44px}.view-tools button{background:#fff9;border:1px solid #d6dfce;border-radius:50%;width:36px;height:36px;font-family:Arial;font-size:19px}.view-tools button:last-child{font-size:12px}footer{color:#91a08c;letter-spacing:.6px;justify-content:space-between;font-size:9px;display:flex;position:absolute;bottom:24px;left:44px;right:38px}.host-caption{color:#87967d;font-size:10px}.host-buttons{grid-template-columns:1fr 1fr;gap:8px;display:grid}.host-buttons button{background:#edf4e7;border:1px solid #d8e1d2;border-radius:8px;padding:10px 5px;font-size:11px}.host-buttons button:last-child{color:#fff;background:#2f604b;grid-column:1/-1}.host-buttons button:disabled{opacity:.4;cursor:default}#loading{letter-spacing:3px;z-index:10;background:#eef3e9;place-items:center;font-size:13px;transition:opacity .5s;display:grid;position:absolute;inset:0}#loading.loaded{opacity:0;pointer-events:none}[hidden]{display:none!important}@media (width>=1500px){.intro{top:20%;left:5%}.performance-card{width:306px;top:21%;right:5%}header{left:5%;right:5%}}@media (width<=1000px){h1{font-size:32px}h1>span{font-size:18px}.intro p{font-size:11px}.performance-card{width:246px;padding:19px;top:130px;right:20px}.world-label{top:98px;left:48%}.scene-hint{max-width:160px;font-size:9px}.program-nav{left:45%}header{left:27px;right:23px}.instrument{display:none}#app{height:100svh;min-height:640px}header{top:20px;left:20px;right:16px}.brand{gap:8px;font-size:15px}.brand-mark{transform-origin:0;width:36px;transform:scale(.85)}.brand small{letter-spacing:1.2px;font-size:6px}.mode-switch button{padding:8px 10px;font-size:10px}.intro{top:92px;left:23px}.eyebrow{letter-spacing:1.1px;font-size:8px}h1{letter-spacing:2px;margin-top:12px;font-size:29px}h1>span{letter-spacing:1px;margin-top:8px;font-size:12px;line-height:1.65}.intro p,.scene-hint{display:none}.world-label{padding:8px 12px;font-size:9px;top:255px;left:50%}.performance-card{border-radius:16px;width:auto;padding:16px 18px;inset:auto 16px 114px}.card-top{gap:10px;position:absolute;top:20px;right:18px}.performer{gap:9px;margin:0}.avatar{width:34px;height:34px;font-size:13px}.performer h2{font-size:16px}.performer div>span{font-size:8px}.leaf-icon{display:none}.piece{flex-wrap:wrap;align-items:center;gap:10px;margin-top:13px;padding-top:12px;display:flex}.piece>span{letter-spacing:1px;font-size:8px}.piece h3{margin:0;font-size:15px}.piece p{font-size:9px}.student-note{margin:10px 0 12px;padding:8px 10px;font-size:9px}.gift-options{gap:8px;margin-top:9px}.gift-options button{flex-direction:row;justify-content:center;gap:8px;padding:7px 0}.gift-options button>span{font-size:23px}.feedback{min-height:15px;margin-top:8px;font-size:8px}.program-nav{gap:0;bottom:42px;left:50%}.nav-title{display:none}.program-tabs{padding:4px}.program-tabs button{padding:10px 17px;font-size:11px}.instrument{font-size:8px;display:inline}.view-tools{flex-direction:column;bottom:410px;left:auto;right:18px}.view-tools button{width:31px;height:31px}footer{font-size:7px;bottom:15px;left:20px;right:20px}footer>span:first-child{display:none}footer>span:last-child{margin-left:auto}.host-caption{margin:8px 0}.host-buttons{display:flex}.host-buttons button{flex:1;padding:9px 4px;font-size:10px}}@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto;transition:none!important}}h1>strong{font-weight:600;font-size:inherit;letter-spacing:inherit;display:block}#app[data-theme=space] .intro,#app[data-theme=space] .brand{color:#e6e6f5}#app[data-theme=space] .intro p,#app[data-theme=space] .eyebrow,#app[data-theme=space] .scene-hint,#app[data-theme=space] footer,#app[data-theme=space] .nav-title{color:#a6b3d0}#app[data-theme=space] .brand-mark{border-color:#657596}#app[data-theme=space] .world-label{color:#e3e6f5;background:#28324be8;border-color:#45506d}#app[data-theme=space] .view-tools button{color:#d8def5;background:#29354c;border-color:#566480}#app[data-theme=space] .mode-switch{color:#d5deed;background:#273148;border-color:#52617a}#app[data-theme=space] .mode-switch .active,#app[data-theme=space] .program-tabs button.active{background:#666495}#app[data-theme=space] .program-tabs{color:#e4e8f5;background:#273148e6;border-color:#4d5972}#app[data-theme=space] .live-dot{background:#c2a3ed}#app[data-theme=ocean] .mode-switch .active,#app[data-theme=ocean] .program-tabs button.active{background:#386d7c}#app[data-theme=ocean] .intro,#app[data-theme=ocean] .brand{color:#305f6c}@media (width<=600px){h1>strong{font-size:27px}}@media (width<=1000px) and (height<=550px) and (orientation:landscape){#app{height:100svh;min-height:360px}.intro{display:none}.performance-card{width:290px;padding:12px 16px;inset:85px 16px auto auto}.performance-card .student-note{display:none}.performance-card .card-top{top:15px;right:16px}.world-label{top:86px;left:calc(50% - 161px)}.program-nav{bottom:12px;left:calc(50% - 161px)}.view-tools{bottom:80px;right:326px}footer{display:none}}@media (width<=600px) and (height<=740px) and (orientation:portrait){.intro{top:78px}h1>strong{font-size:24px}h1>span{display:none}.performance-card{padding:12px 16px;bottom:90px}.performance-card .student-note{display:none}.performance-card .card-top{top:15px;right:16px}.world-label{top:148px}.program-nav{bottom:24px}.view-tools{bottom:300px}footer{bottom:7px}}