@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}.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}header{left:27px;right:23px}#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}.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{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{background:#666495}#app[data-theme=space] .live-dot{background:#c2a3ed}#app[data-theme=ocean] .mode-switch .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)}.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}.view-tools{bottom:300px}footer{bottom:7px}}#performance-page{position:absolute;inset:0}.bottom-nav{z-index:5;bottom:max(20px,env(safe-area-inset-bottom));-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#fffffff5;border:1px solid #dbe5d6;border-radius:24px;width:280px;padding:5px;display:flex;position:absolute;left:50%;transform:translate(-50%);box-shadow:0 8px 30px #24472c15}.bottom-nav button{color:#738670;background:0 0;border:0;border-radius:19px;flex:1;justify-content:center;align-items:center;gap:9px;min-height:49px;font-size:13px;display:flex}.bottom-nav button>span{font-size:21px}.bottom-nav button.active{color:#fff;background:#2f604b}#app[data-theme=space] .bottom-nav{background:#273148f5;border-color:#52617a}#app[data-theme=space] .bottom-nav button{color:#c6cee1}#app[data-theme=space] .bottom-nav button.active{color:#fff;background:#666495}#app[data-theme=ocean] .bottom-nav button.active{background:#386d7c}.return-live{background:#f3f6ef;border:1px solid #dbe5d6;border-radius:8px;width:100%;margin-top:5px;padding:8px;font-size:10px}#program-page{color:#234e42;padding:5px 6px 20px;position:absolute;inset:120px max(36px,5%) 110px;overflow:auto}.program-heading h1{letter-spacing:2px;margin:12px 0;font-size:30px}.program-heading p{color:#72856e;margin:0 0 22px;font-size:13px}.live-banner{text-align:left;color:#355e45;background:#e0ecdc;border:1px solid #d1e0cd;border-radius:12px;width:100%;margin-bottom:24px;padding:15px 18px;font-size:12px;display:block}.program-layout{grid-template-columns:1.2fr 1fr;align-items:start;gap:25px;display:grid}#program-list{gap:12px;display:grid}.program-item{text-align:left;background:#ffffffc9;border:1px solid #dbe5d6;border-radius:14px;align-items:center;gap:15px;width:100%;padding:21px 18px;display:flex}.program-item.active{background:#edf4e7;border-color:#648d68}.program-order{color:#85977e;letter-spacing:1px;font-size:12px}.program-item-copy{flex:1;gap:8px;display:grid}.program-item-copy strong{font-size:16px;font-weight:500}.program-item-copy>span{color:#7b8d76;font-size:11px}.program-item-status{color:#68805f;white-space:nowrap;font-size:10px}.program-detail{background:#ffffffdf;border:1px solid #e0e8da;border-radius:18px;padding:26px}.program-detail h2{margin:14px 0;font-size:24px;font-weight:500}.program-detail p{color:#7a8973;font-size:12px;line-height:1.8}.program-detail blockquote{color:#4b6850;margin:20px 0;font-size:13px;line-height:1.9}.detail-theme{color:#7d8c72;border-top:1px solid #e2e9dc;padding:16px 0;font-size:12px}#preview-performance{color:#fff;background:#2f604b;border:0;border-radius:10px;width:100%;padding:13px 18px;font-size:12px}.program-detail .program-disclaimer{text-align:center;margin:14px 0 0;font-size:10px}@media (width<=1000px){.bottom-nav{bottom:max(16px,env(safe-area-inset-bottom));border-radius:22px;width:calc(100% - 32px);max-width:360px}#program-page{padding:4px 0 12px;inset:94px 16px 100px}.program-heading{padding:0 7px}.program-heading h1{margin:10px 0;font-size:25px}.program-heading p{margin-bottom:18px;font-size:11px}.program-heading .eyebrow{font-size:9px}.program-layout{grid-template-columns:1fr;gap:18px}.program-item{gap:12px;padding:16px 14px}.program-item-copy strong{font-size:14px}.program-detail{padding:21px}.program-detail h2{font-size:20px}.live-banner{margin-bottom:16px;padding:12px;font-size:10px;line-height:1.8}footer{font-size:6px;bottom:3px}.return-live{margin-top:4px;padding:5px;font-size:9px}}@media (width<=600px) and (height<=740px) and (orientation:portrait){.bottom-nav{bottom:12px}.bottom-nav button{min-height:44px}}@media (width<=1000px) and (height<=550px) and (orientation:landscape){.bottom-nav{width:calc(100% - 350px);max-width:300px;bottom:8px;left:calc(50% - 161px)}.bottom-nav button{min-height:40px}#program-page{top:85px;bottom:80px}.program-layout{grid-template-columns:1.1fr 1fr}#app[data-page=program] .bottom-nav{width:280px;left:50%}}#waiting-content{text-align:center;padding-top:24px}.waiting-note{color:#a6b885;margin-bottom:12px;font-size:40px;display:block}#waiting-content h2{margin:8px 0 14px;font-size:21px;font-weight:500}#waiting-content p{color:#7c8c74;margin:0 0 22px;font-size:12px;line-height:1.9}#waiting-program{color:#fff;background:#2f604b;border:0;border-radius:10px;width:100%;padding:12px;font-size:12px}.host-reset{background:0 0;border:1px solid #dbe5d6;border-radius:8px;width:100%;margin-top:8px;padding:8px;font-size:10px}.host-reset:disabled{opacity:.4;cursor:default}.program-layout{max-width:820px;margin-inline:auto;display:block}.program-heading,.live-banner{max-width:820px;margin-left:auto;margin-right:auto}.program-modal{color:#234e42;background:#fcfdf9;border:1px solid #e0e8da;border-radius:20px;width:calc(100% - 32px);max-width:460px;max-height:calc(100svh - 48px);margin:auto;padding:24px;overflow:auto;box-shadow:0 22px 80px #172c3940}.program-modal::backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#172c3960}.program-modal[open]{animation:.23s ease-out program-modal-in}.program-modal[open]::backdrop{animation:.23s ease-out program-backdrop-in}.modal-bar{justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;display:flex}#close-program-modal{color:#62795d;background:#edf2e7;border:0;border-radius:9px;min-height:40px;padding:8px 12px;font-size:12px}.program-modal .program-detail{background:0 0;border:0;border-radius:0;padding:0}#app:has(#program-modal[open]) #program-page{overflow:hidden}@keyframes program-modal-in{0%{opacity:0;transform:translateY(12px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes program-backdrop-in{0%{opacity:0}to{opacity:1}}@media (width<=1000px){#waiting-content{padding-top:14px}.waiting-note{margin-bottom:8px;font-size:29px}#waiting-content h2{margin:8px 0 10px;font-size:18px}#waiting-content p{margin-bottom:16px;font-size:11px}.program-modal{padding:20px}.program-modal .program-detail h2{font-size:22px}}@media (width<=600px) and (height<=740px) and (orientation:portrait){#waiting-content p{margin-bottom:12px}.waiting-note{margin-bottom:4px;font-size:23px}#waiting-content h2{font-size:16px}.host-reset{margin-top:5px;padding:5px}}@media (prefers-reduced-motion:reduce){.program-modal[open],.program-modal[open]::backdrop{animation:none}}.intro{top:70px}.world-label{top:40px}.performance-card{top:100px}#program-page,#blessings-page{top:40px}#blessings-page{color:#234e42;padding:5px 6px 20px;position:absolute;bottom:110px;left:max(36px,5%);right:max(36px,5%);overflow:auto}.bottom-nav{width:340px}footer a{color:inherit;pointer-events:auto;font-size:10px;text-decoration:underline}.blessings-content{max-width:820px;margin:auto}.blessing-picker{align-items:center;gap:14px;margin:20px 0 12px;font-size:12px;display:flex}.blessing-picker select,.blessing-demo select{color:#355b43;max-width:100%;font:inherit;background:#fff;border:1px solid #d6e2d0;border-radius:10px;padding:11px 12px}.blessings-summary{color:#82927a;margin:16px 0;font-size:12px}#blessing-list{gap:12px;display:grid}.blessing-row{background:#ffffffde;border:1px solid #dde6d6;border-radius:14px;align-items:center;gap:16px;padding:20px;display:flex}.blessing-icon{color:#b79845;background:#f6efd9;border-radius:13px;flex-shrink:0;place-items:center;width:42px;height:42px;font-size:28px;display:grid}.blessing-icon.flower{color:#be8c65;background:#f8eade}.blessing-icon.tree{color:#719b73;background:#e8f0e3}.blessing-row p{margin:0;font-size:15px;line-height:1.8}.blessing-row strong{font-weight:600}.blessing-quantity{color:#587a48;font-variant-numeric:tabular-nums}.blessing-empty{color:#8b9a81;text-align:center;padding:28px 0;font-size:13px}.blessing-demo{color:#7a8c71;border-top:1px solid #dce5d4;margin-top:28px;padding-top:18px;font-size:12px}.blessing-demo summary{cursor:pointer;color:#5d7853;padding:8px 0}.blessing-demo p{line-height:1.8}.blessing-demo label{align-items:center;gap:12px;margin:14px 0;display:flex}.demo-gifts{flex-wrap:wrap;gap:8px;display:flex}.demo-gifts button{color:#54724c;background:#fff;border:1px solid #d5e1cd;border-radius:9px;min-height:44px;padding:12px;font-size:12px}#demo-gift-feedback{min-height:22px}@media (width>=1500px){.intro{top:10%}.performance-card{top:13%}}@media (width<=1000px){.intro{top:28px}.world-label{top:190px}.performance-card{top:auto}#program-page,#blessings-page{top:max(24px,env(safe-area-inset-top));padding:4px 0 12px;bottom:100px;left:16px;right:16px}.bottom-nav{width:calc(100% - 32px)}.bottom-nav button{gap:7px;font-size:12px}.bottom-nav button>span{font-size:18px}.blessing-picker{gap:9px;display:grid}.blessing-picker select{width:100%;font-size:14px}.blessing-row{gap:12px;padding:16px}.blessing-row p{font-size:14px}footer{bottom:1px}footer a{font-size:9px}}@media (width<=600px) and (height<=740px) and (orientation:portrait){.intro{top:24px}.world-label{top:100px}}@media (width<=1000px) and (height<=550px) and (orientation:landscape){.performance-card,.world-label{top:24px}#app[data-page=program] .bottom-nav,#app[data-page=blessings] .bottom-nav{width:340px;left:50%}}