:root{font-family:Inter,PingFang SC,Microsoft YaHei,system-ui,sans-serif;color:#282d29;background:#faf8f4;font-synthesis:none;font-weight:400;--green:#2c695b;--orange:#ee714b;--line:#e7e7de}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer;border:0;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;color:inherit;transition:background .18s,transform .18s}button:hover:not(:disabled){filter:brightness(.96)}button:active:not(:disabled){transform:translateY(1px)}button:disabled{opacity:.45;cursor:not-allowed}button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid #d89749;outline-offset:4px}button svg{width:19px;height:19px;flex-shrink:0}[hidden]{display:none!important}header{max-width:1440px;margin:auto;padding:26px 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;gap:12px;align-items:center;text-decoration:none;color:inherit;font-size:23px;font-weight:750;letter-spacing:-.8px}.brand-icon{width:44px;height:44px;background:var(--green);color:#fff;display:grid;place-items:center;border-radius:14px;transform:rotate(-7deg)}.brand-icon svg{width:26px;height:26px}.brand small{display:block;font-size:10px;font-weight:500;letter-spacing:1.8px;color:#7c837b;margin-top:3px}.header-right{display:flex;gap:8px;align-items:center;color:#6f776e;font-size:12px}.local-dot{width:6px;height:6px;border-radius:50%;background:#789878}.student-tag{margin-left:18px;padding:8px 13px;background:#eeeee6;border-radius:8px;color:#535e53}main{max-width:1440px;margin:auto;padding:0 5%}.intro{display:flex;justify-content:space-between;align-items:center;padding:44px 0 30px}.eyebrow{font-size:10px;letter-spacing:2px;color:var(--green);font-weight:700}h1{font-size:clamp(28px,3vw,42px);line-height:1.35;letter-spacing:-1.5px;margin:14px 0}h2{font-size:20px;letter-spacing:-.5px;margin:13px 0 9px}h3{font-size:16px}.intro p{color:#7c8178;font-size:14px;margin:0}.mobile-break{display:none}.intro-art{height:118px;width:200px;position:relative}.intro-art span{position:absolute;left:15px;top:10px;width:75px;height:80px;background:#e0e8d2;border-radius:42% 58% 52% 48%;display:grid;place-items:center;font-size:51px;color:var(--green);transform:rotate(-13deg)}.intro-art b{position:absolute;right:10px;bottom:0;width:82px;height:82px;background:#eddfed;border-radius:30px;display:grid;place-items:center;font-size:43px;color:#7f6188;transform:rotate(12deg)}.intro-art em{position:absolute;right:21px;top:0;color:var(--orange);font-size:31px;font-style:normal}.intro-art i{position:absolute;bottom:0;left:70px;width:8px;height:8px;background:#e9b773;border-radius:50%}.tabs{display:flex;gap:24px;border-bottom:1px solid var(--line)}.tab{background:none;padding:14px 6px 17px;font-size:14px;color:#83877e;position:relative}.tab.active{color:var(--green);font-weight:650}.tab.active:after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:3px;background:var(--green);border-radius:3px}.tab>span{background:#eeeae3;font-size:11px;padding:2px 7px;border-radius:6px}.steps{display:flex;align-items:center;justify-content:center;gap:20px;padding:27px 0;color:#a0a399;font-size:12px}.steps span{display:flex;align-items:center;gap:8px}.steps b{display:grid;place-items:center;background:#eaece5;width:23px;height:23px;border-radius:50%;font-size:11px}.steps .current{color:var(--green)}.steps .current b{color:#fff;background:var(--green)}.steps>i{height:1px;width:55px;background:#dddcd3}.studio-grid{display:grid;grid-template-columns:minmax(300px,.85fr) minmax(0,1.25fr);gap:22px;align-items:start}.panel{background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px}.panel-top{display:flex;justify-content:space-between;align-items:center;gap:8px}.section-kicker{color:#8a8d83;letter-spacing:1.2px;font-size:10px;font-weight:650}.pill{border:1px solid #efebe1;background:#fbf8f0;border-radius:7px;padding:5px 9px;color:#9b8863;font-size:10px}.pill.teal{background:#f0f5f1;border-color:#e8efe8;color:#688777}.muted{font-size:12px;line-height:1.8;color:#90948b;margin:0}.record-space{display:flex;flex-direction:column;align-items:center;padding:36px 0 18px}.meter{height:75px;display:flex;align-items:center;justify-content:center;gap:4px;width:100%}.meter i{width:4px;height:var(--height);border-radius:4px;background:#dedfd6;transition:height .08s}.meter.live i{background:var(--orange)}#record-time{font-size:32px;font-variant-numeric:tabular-nums;font-weight:550;letter-spacing:1px;margin:12px 0 23px}#record-time span{font-size:14px;font-weight:400;letter-spacing:0;color:#a0a298}.record-button{border-radius:40px;background:var(--orange);color:#fff;font-size:15px;font-weight:650;min-width:174px;min-height:57px;box-shadow:0 5px 15px #ee714b20}.record-button svg{width:20px;height:20px}.record-button.recording{background:#b64c3d}.record-space>p{font-size:11px;color:#9b9e95;margin:14px 0 0}.capture-options{display:flex;align-items:center;justify-content:center;gap:12px;padding-bottom:21px}.capture-options>span{width:1px;height:13px;background:var(--line)}.text-button{background:none;font-size:11px;color:#788272;min-height:36px;padding:4px}.text-button svg{width:15px;height:15px}.tip{display:flex;gap:10px;background:#f7f7f0;border-radius:12px;padding:15px;font-size:11px;line-height:1.9;color:#8d917f}.tip>span{color:#89966c;font-size:23px}.tip p{margin:0}.tip strong{font-weight:550;color:#6d795a}.empty-editor{min-height:338px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#a0a69b;text-align:center}.empty-wave{width:73px;height:73px;display:grid;place-items:center;background:#f0f3ea;border-radius:24px;color:#9ba991;margin-bottom:9px}.empty-wave svg{width:31px;height:31px}.empty-editor h3{font-weight:500;color:#7e8978;margin:14px 0 5px;font-size:14px}.empty-editor p{font-size:11px;margin:4px}.empty-editor>span{margin-top:24px;color:#b0b5a8;font-size:10px;letter-spacing:1px}.source-info{margin-top:17px;display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:11px;color:#7a8177}.source-info>span{max-width:65%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}canvas{display:block;width:100%;height:120px;border-radius:9px}.axis{display:flex;justify-content:space-between;font-size:10px;color:#a4a69e;margin-top:5px}.slice-heading{display:flex;align-items:center;justify-content:space-between;margin-top:10px;font-size:12px}.slices{display:flex;gap:8px;overflow-x:auto;padding-bottom:7px}.slice{display:flex;flex-direction:column;flex-shrink:0;gap:4px;background:#f8f8f4;border:1px solid #eceee7;border-radius:10px;min-width:86px;min-height:80px;padding:10px;color:#93978b}.slice svg{width:22px;height:22px}.slice span{font-size:11px}.slice small{font-size:10px}.slice.selected{background:#eef4ee;border-color:#8eae96;color:var(--green)}.sensitivity{display:flex;align-items:center;gap:12px;font-size:10px;color:#899080;margin:8px 0 15px}.sensitivity input{min-width:50px;flex:1}.small-button{font-size:10px;border:1px solid var(--line);border-radius:6px;background:#fff;padding:6px 9px;min-height:36px}.trim-box{background:#f8f9f5;padding:15px;border-radius:12px}.trim-title{display:flex;justify-content:space-between;font-size:11px;margin-bottom:8px}.trim-title span{color:var(--green);font-variant-numeric:tabular-nums}.trim-control{display:flex;align-items:center;gap:12px;font-size:11px;color:#788071;min-height:40px}.trim-control input{flex:1;min-width:60px}.trim-control output{width:53px;font-size:10px;font-variant-numeric:tabular-nums}input[type=range]{accent-color:var(--green);height:28px;cursor:pointer}.preview-button{width:100%;background:#fff;border:1px solid #dde6d9;color:var(--green);border-radius:8px;margin-top:6px;font-size:12px}.save-row{display:flex;gap:10px}input:not([type=range]):not([type=file]){border:1px solid #dfe3d9;border-radius:9px;padding:12px;min-width:0;background:#fff;color:#354431;font-size:12px}input::placeholder{color:#a5aa9d}.save-row input{flex:1}#save-form>label{display:block;margin:18px 0 8px;font-size:11px;color:#747e6f}.primary{background:var(--green);color:#fff;border-radius:9px;padding:11px 16px;font-size:12px;font-weight:550}.secondary{background:#fff;border:1px solid #dfe3d9;border-radius:9px;padding:10px 13px;font-size:12px}.library-top{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:27px}.library-top h2{margin:0 0 8px}.library-actions{display:flex;gap:10px}#capacity{margin-left:10px;color:var(--green);font-size:11px}.storage-note{font-size:11px;color:#9b927f;margin:20px 0}.library-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.sound-card{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}.sound-art{height:130px;display:flex;align-items:center;justify-content:center;position:relative;background:#e3ecdd;color:#77936a}.sound-art>span>svg{width:100px;height:55px}.tone-1{background:#eee3d7;color:#b29575}.tone-2{background:#e9e1ed;color:#a48cb4}.tone-3{background:#dfeaea;color:#7c9fa3}.sound-play{width:42px;height:42px;min-height:42px;background:#ffffffd9;border-radius:50%;position:absolute;bottom:12px;right:12px;color:#405541}.sound-details{padding:15px}.sound-details h3{margin:0 0 9px;overflow-wrap:anywhere;font-size:14px}.sound-details p{font-size:10px;color:#979d90;margin:0}.sound-details p span{padding:0 5px}.sound-actions{display:flex;justify-content:space-between;gap:3px;margin-top:12px;border-top:1px solid #eeefe8;padding-top:7px}.sound-actions .text-button{font-size:10px}.library-empty{grid-column:1/-1;min-height:320px;border:1px dashed #d9dfd1;border-radius:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.library-empty h3{font-weight:500;color:#67765e}.library-empty p{font-size:12px;color:#909b86;margin:0 0 20px}footer{display:flex;justify-content:space-between;font-size:10px;color:#a7aa9e;padding:30px 0;letter-spacing:.6px}#toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%);background:#284a3f;color:#fff;box-shadow:0 4px 25px #0002;border-radius:12px;padding:14px 22px;font-size:13px;max-width:min(90vw,620px);width:max-content;z-index:20;line-height:1.7}#toast.error{background:#884638}dialog{border:1px solid #e1e4d9;border-radius:17px;padding:24px;max-width:calc(100vw - 32px);width:380px}dialog::backdrop{background:#26382d66}dialog input{width:100%;margin:10px 0}dialog p{font-size:12px;color:#7a8273;line-height:1.8}.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:14px}.danger{background:#b35948;color:#fff;border-radius:9px;padding:10px 16px}@media(min-width:1450px){main{padding-left:72px;padding-right:72px}}@media(max-width:1000px){header{padding:22px 4%}main{padding:0 4%}.studio-grid{gap:16px;grid-template-columns:minmax(270px,.9fr) minmax(0,1.1fr)}.panel{padding:20px}.library-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.save-row{flex-wrap:wrap}.save-row input{flex-basis:100%}.save-row .primary{width:100%}.intro h1{font-size:30px}}@media(max-width:740px){.header-right{font-size:0;gap:0}.local-dot{display:none}.student-tag{font-size:11px;margin:0}.intro{padding:30px 0 25px}.intro-art{width:100px;transform:scale(.72);transform-origin:right center}.intro-art span{left:-15px}.intro-art b{right:-12px}.intro h1{font-size:27px;letter-spacing:-.8px}.intro p{font-size:11px}.mobile-break{display:block}.eyebrow{font-size:8px}.studio-grid{grid-template-columns:1fr}.steps{gap:10px;font-size:10px}.steps>i{width:25px}.panel{padding:22px}.library-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.library-top{align-items:flex-start;flex-direction:column}.library-actions{width:100%}.library-actions button{flex:1}.sound-actions{flex-wrap:wrap}.empty-editor{min-height:260px}.record-space{padding:18px 0}.save-row{flex-wrap:nowrap}.save-row input{flex-basis:auto}.save-row .primary{width:auto}.source-info{gap:6px}footer{font-size:8px;gap:14px}.record-panel{order:0}.brand{font-size:20px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}#waveform{touch-action:none;-webkit-user-select:none;user-select:none;cursor:crosshair}.waveform-help{font-size:10px;color:#788777;line-height:1.7;margin:7px 0 0}#waveform{display:block;width:100%;height:120px;border-radius:9px;background:#f5f5f5;overflow:hidden}#waveform::part(region){pointer-events:none;border-left:2px solid var(--green);border-right:2px solid var(--green)}#waveform::part(region):before,#waveform::part(region):after{content:"";position:absolute;top:44px;width:8px;height:32px;border-radius:4px;background:var(--green)}#waveform::part(region):before{left:0}#waveform::part(region):after{right:0}footer{flex-wrap:wrap;gap:12px}#offline-ready{flex-basis:100%;color:var(--green);line-height:1.7}.class-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:30px 0 22px}.class-heading h2{margin-top:8px}.identity-name{font-size:12px;color:#53735d;margin-right:14px}.auth-panel{max-width:450px;margin:10px auto 30px}.auth-tabs{display:flex;gap:22px;margin-bottom:16px}.auth-tabs button{background:none;color:#8b9485}.auth-tabs button.active{color:var(--green);border-bottom:2px solid var(--green)}#auth-form label,#register-fields label,.create-fields label{display:flex;flex-direction:column;gap:8px;font-size:12px;color:#65755e;margin-bottom:14px}#auth-form .primary{width:100%;margin-bottom:16px}select{font:inherit;font-size:12px;padding:11px;border:1px solid #dfe3d9;background:#fff;color:#354431;border-radius:9px;min-width:0;min-height:44px}.inline-error{color:#a44a3d;font-size:12px;line-height:1.6}.connection-note,.waiting-note{background:#fbf0d9;border:1px solid #ecdfba;border-radius:10px;padding:13px 16px;color:#886f3e;font-size:12px;margin-bottom:18px}.class-tools{max-width:760px}.join-panel label,.submission-picker label{display:block;font-size:12px;color:#6e7a64;margin:12px 0 9px}.join-panel .muted{margin-top:12px}.create-fields{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px}.class-list-heading{display:flex;justify-content:space-between;align-items:center;margin-top:22px}.room-list{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0 18px}.room-chip{background:#fff;border:1px solid var(--line);border-radius:11px;padding:12px 16px;font-size:13px}.room-chip small{font-size:10px;color:#8e9686;margin-left:8px}.room-chip.active{background:#edf3e9;border-color:#94b29a;color:var(--green)}.room-title{display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line);padding-bottom:15px}.room-code{display:flex;flex-direction:column;gap:5px}.room-code small{font-size:10px;color:#919987}.room-code strong{font-size:25px;letter-spacing:4px;color:var(--green)}.submission-item{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:15px 0;border-bottom:1px solid #ecefe6}.submission-item strong{font-size:13px;overflow-wrap:anywhere}.submission-item p,.queue-row p{font-size:10px;color:#8b9481;margin-bottom:0}.status-pill{display:inline-block;background:#f0f3e9;color:#708264;border-radius:6px;padding:4px 7px;font-size:10px;margin-left:8px;vertical-align:middle}.status-pill.pending{background:#fff0d9;color:#a68136}.status-pill.rejected{background:#f7e7e2;color:#a06c5e}.submission-item audio{width:245px;max-width:100%;height:36px}.student-submissions{margin:18px 0}.submission-picker .save-row select{flex:1}.submission-picker .muted{margin-top:10px}.teacher-tools{display:flex;justify-content:space-between;gap:24px;align-items:center;margin:20px 0}.teacher-tools p{max-width:430px}#capacity-form{display:flex;align-items:center;gap:10px;margin:15px 0;font-size:12px}#increase-capacity{width:80px}.member-card{border-top:1px solid var(--line);padding:10px 0 17px}.member-card h3{font-size:14px}.decision-actions{display:flex;gap:10px;margin-top:10px}.queue-panel{margin-top:18px}.queue-row{display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:12px;padding:10px 0}.submit-sound{width:100%;margin-top:8px;color:var(--green)}.student-tag{min-height:36px;font-size:12px}.header-right .student-tag{font-size:12px}#room-qr{border-radius:10px;flex-shrink:0}#submit-summary{overflow-wrap:anywhere}#room-detail .save-row .primary{white-space:nowrap}@media(max-width:740px){.class-heading{align-items:flex-start;flex-direction:column}.create-fields{grid-template-columns:1fr 1fr}.create-fields label:first-child{grid-column:1/-1}.submission-item{align-items:flex-start;flex-direction:column}.submission-item audio{width:100%}.teacher-tools{flex-direction:column;align-items:flex-start}.room-code strong{font-size:20px;letter-spacing:2px}.tabs{gap:12px}.tab{font-size:12px}.save-row select{max-width:100%}#room-detail .save-row{flex-wrap:wrap}#room-detail .save-row select{flex-basis:100%}.room-title h2{font-size:17px}}.teacher-summary{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border:1px solid var(--line);border-radius:13px;margin-top:20px;background:#fafbf6}.teacher-summary>div{padding:18px 12px;display:flex;flex-direction:column;gap:7px;text-align:center;border-right:1px solid var(--line)}.teacher-summary>div:last-child{border:0}.teacher-summary strong{font-size:23px;color:var(--green);font-variant-numeric:tabular-nums}.teacher-summary span{font-size:11px;color:#7e8875}.teacher-preparation{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(290px,1fr);gap:25px;margin-top:25px;border-top:1px solid var(--line);padding-top:24px}.teacher-section-title{display:flex;align-items:center;justify-content:space-between;gap:12px}.teacher-section-title h3{font-size:17px;margin:10px 0}.teacher-section-title .pill{white-space:nowrap;font-size:10px}.teacher-scene{position:relative;height:420px;overflow:hidden;border-radius:16px;background:#e6ebde;border:1px solid #d6dfce;isolation:isolate}.scene-decoration{position:absolute;inset:0;z-index:-1;pointer-events:none}.scene-decoration span{position:absolute;top:20px;left:50%;transform:translate(-50%);font-size:12px;letter-spacing:4px;white-space:nowrap}.classroom .scene-decoration{background:linear-gradient(0deg,#e5d8bf 0 32%,transparent 32%),repeating-linear-gradient(90deg,#eaf0e4 0 79px,#dce6d5 80px)}.classroom .scene-decoration:before{content:"";position:absolute;left:22%;right:22%;top:11px;height:60px;border:5px solid #d5c5a7;border-radius:5px;background:#436d5c}.classroom .scene-decoration span{color:#f3f5e8;top:32px;font-size:11px;letter-spacing:1px}.kitchen .scene-decoration{background:linear-gradient(0deg,#ded5c7 0 31%,transparent 31%),repeating-linear-gradient(0deg,transparent 0 38px,#dcdcd2 39px,transparent 40px),repeating-linear-gradient(90deg,#f4efe2 0 58px,#dbdfd4 59px,#f4efe2 60px)}.kitchen .scene-decoration span{background:#fff9ed;padding:10px;border-radius:8px;color:#a18857;letter-spacing:2px}.playground .scene-decoration{background:linear-gradient(#c8e5ee 0 22%,#cadeae 22% 68%,#d6b6a4 68%)}.playground .scene-decoration:after{content:"";position:absolute;inset:73% 8% 3%;border:2px solid #ffffff8a;border-radius:50%}.playground .scene-decoration span{color:#4e7e89;top:26px}.place-marker{position:absolute;transform:translate(-50%,-50%);width:42px;height:42px;min-height:42px;border:1.5px dashed #91a995;border-radius:50%;background:#ffffffc9;color:#829480;font-size:13px;touch-action:none;-webkit-user-select:none;user-select:none;font-variant-numeric:tabular-nums;box-shadow:0 4px 8px #405b3210;transition:background .15s}.place-marker.assigned{border:2px solid #609080;color:#2c695b;background:#fcfff8;font-weight:700}.place-marker:hover,.place-marker:focus-visible{background:#f7e6c5;z-index:2}.place-marker:active,.place-marker.dragging{transform:translate(-50%,-50%);cursor:grabbing;background:#f6dba7;z-index:3}.place-marker{cursor:grab}.many-places .place-marker{width:30px;height:30px;min-height:30px;font-size:10px}.scene-explanation{font-size:11px;line-height:1.8;color:#8a967e;padding:12px;background:#f6f7f0;border-radius:9px}.teacher-waiting .teacher-roster{max-height:560px;overflow-y:auto;padding-right:8px;overscroll-behavior:contain}.teacher-waiting .member-card{padding:14px 12px;border:1px solid var(--line);border-radius:12px;margin:12px 0;background:#fdfdf9}.member-card.place-highlight{border-color:#be975c;background:#fff8ea}.member-place{display:inline-grid;place-items:center;width:26px;height:26px;background:#e7eee1;color:#627e57;border-radius:8px;font-size:12px;margin-right:8px}.teacher-waiting .member-card h3{display:flex;align-items:center;flex-wrap:wrap;gap:4px;margin:0 0 8px}.teacher-waiting .submission-item{flex-wrap:wrap;gap:9px;padding:10px 0}.teacher-waiting .submission-item>div{min-width:110px}.teacher-waiting .submission-item audio{width:100%;height:32px}.teacher-waiting .submission-image{width:64px;height:64px}.teacher-waiting .decision-actions{gap:6px}.teacher-waiting .decision-actions button{font-size:11px;padding:9px 12px;min-height:40px}.waiting-empty{min-height:270px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;border:1px dashed #dce1d5;border-radius:15px;color:#849277;margin-top:10px;padding:15px}.waiting-empty>span{font-size:42px;color:#9eaf8f}.waiting-empty h3{font-size:14px}.waiting-empty p{font-size:11px;line-height:1.8}.expansion-queue{border:1px solid #eaddbc;background:#fdf8ea;padding:18px;border-radius:12px;margin-top:20px}.expansion-queue h3{font-size:14px}.expansion-queue .status-pill{margin:3px}#layout-status{min-height:20px}@media(max-width:1000px){.teacher-preparation{grid-template-columns:1fr}.teacher-scene{height:390px}.teacher-waiting .teacher-roster{max-height:none;display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0}.teacher-waiting .member-card{margin:0}.waiting-empty{grid-column:1/-1}}@media(max-width:580px){.teacher-summary{grid-template-columns:repeat(3,1fr)}.teacher-summary>div{padding:12px 5px}.teacher-summary strong{font-size:19px}.teacher-summary span{font-size:10px}.teacher-waiting .teacher-roster{grid-template-columns:1fr}.teacher-section-title{flex-wrap:wrap}.teacher-scene{height:350px}.place-marker{width:34px;height:34px;min-height:34px}.many-places .place-marker{width:25px;height:25px;min-height:25px;font-size:9px}}.teacher-preparation{display:block}.rhythm-editor{margin-top:30px;padding-top:26px;border-top:1px solid var(--line);min-width:0}.rhythm-heading{display:flex;justify-content:space-between;align-items:center;gap:18px}.rhythm-heading h3{font-size:21px;letter-spacing:-.5px;margin:10px 0}.rhythm-heading button{flex-shrink:0}.rhythm-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;background:#f4f6ef;border:1px solid #e6eade;border-radius:12px;padding:14px 18px;margin-top:20px}.rhythm-meter{display:flex;gap:14px;align-items:center}.rhythm-meter strong{font-size:24px;color:var(--green);font-variant-numeric:tabular-nums}.rhythm-meter span,.rhythm-toolbar label{font-size:12px;color:#667460}.rhythm-toolbar label{display:flex;align-items:center;gap:10px}.rhythm-toolbar select{min-width:95px}.rhythm-navigation{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:18px 0;color:#77816e;font-size:11px}.rhythm-bars{display:flex;flex-wrap:wrap;gap:5px;flex:1}.rhythm-bars button{min-height:34px;width:34px;padding:0;border:1px solid #e4e8dd;border-radius:7px;background:#fff;color:#87917e;font-size:11px;font-variant-numeric:tabular-nums}.rhythm-bars button[aria-pressed=true]{background:var(--green);border-color:var(--green);color:#fff}.rhythm-navigation>span:last-child{font-variant-numeric:tabular-nums;white-space:nowrap}.rhythm-grid-scroll{max-height:550px;overflow:auto;overscroll-behavior:contain;border:1px solid #e1e7db;border-radius:12px;scroll-padding-top:65px}.rhythm-grid{min-width:920px}.rhythm-grid-header,.rhythm-track{display:grid;grid-template-columns:175px minmax(640px,1fr) 104px;align-items:center}.rhythm-grid-header{grid-template-rows:28px 27px;position:sticky;top:0;background:#f6f7f1;z-index:3;border-bottom:1px solid #e0e6d9;color:#7c8775;font-size:10px}.rhythm-grid-header>div:first-child{grid-column:1;grid-row:1/3;position:sticky;left:0;z-index:4;background:#f6f7f1;height:100%;display:flex;flex-direction:column;justify-content:center;gap:5px;padding-left:18px;font-size:11px}.rhythm-grid-header>div:first-child span{color:#939c8a;font-size:10px}.rhythm-beats{grid-column:2;grid-row:1;display:grid;grid-template-columns:repeat(4,1fr);text-align:center;height:100%;align-items:center}.rhythm-beats span+span{border-left:1px solid #dce3d4}.rhythm-step-numbers{grid-column:2;grid-row:2;display:grid;grid-template-columns:repeat(16,1fr);text-align:center;color:#9aa38e;font-variant-numeric:tabular-nums}.rhythm-actions-label{grid-column:3;grid-row:1/3;text-align:center}.rhythm-track{min-height:72px;border-bottom:1px solid #edf0e7;background:#fff}.rhythm-track:last-child{border-bottom:0}.rhythm-track:nth-child(odd){background:#fcfcf8}.rhythm-track-name{display:flex;align-items:center;gap:10px;position:sticky;left:0;z-index:2;background:inherit;padding:12px;align-self:stretch;box-shadow:4px 0 5px #32412104}.rhythm-track-number{background:var(--track-colour);color:#fff;flex-shrink:0;width:27px;height:32px;border-radius:9px;display:grid;place-items:center;font-size:11px}.rhythm-track-name>div{display:flex;flex-direction:column;gap:6px;min-width:0}.rhythm-track-name strong{font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rhythm-track-name div>span{font-size:10px;color:#909985;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rhythm-steps{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:0;padding:10px 0}.rhythm-step{min-width:0;min-height:44px;padding:0 3px;position:relative;touch-action:none;-webkit-user-select:none;user-select:none;background:transparent;border-radius:0;transition:none}.rhythm-step.beat-start{border-left:2px solid #d4dec9}.rhythm-step>span{display:block;width:100%;height:36px;border:1px solid #e6eadf;border-radius:6px;background:#f0f3eb;pointer-events:none;position:relative}.rhythm-step>span:after{content:"";width:5px;height:5px;background:#c2cdb8;border-radius:50%;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.rhythm-step[aria-pressed=true]>span{background:var(--track-colour);border-color:var(--track-colour);box-shadow:0 2px 3px #31443117}.rhythm-step[aria-pressed=true]>span:after{width:9px;height:9px;background:#fff;border-radius:50%}.rhythm-step:focus-visible{outline:2px solid #253e34;outline-offset:-1px;z-index:1;border-radius:6px}.rhythm-step:active:not(:disabled){transform:none}.rhythm-row-actions{display:flex;gap:8px;justify-content:center;padding:4px}.rhythm-row-actions button{font-size:10px;color:#7b8c72}.rhythm-row-actions button:first-child{color:var(--green)}.rhythm-footnote{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:12px}.rhythm-footnote p{margin:0;font-size:10px;color:#89937f;line-height:1.8}.rhythm-save{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-height:38px;margin-top:9px;font-size:11px;color:var(--green)}.rhythm-save>span:before{content:"●";font-size:7px;margin-right:8px;vertical-align:2px}.rhythm-editor.has-unsaved .rhythm-save{color:#a05437}.rhythm-stage-note{font-size:11px;color:#92998a;line-height:1.8;margin:0}.rhythm-empty{min-height:175px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:20px;color:#8a987f}.rhythm-empty>span{font-size:30px;letter-spacing:7px;color:#9aac8b}.rhythm-empty h4{font-size:14px;font-weight:500;margin:10px 0}.rhythm-empty p{font-size:11px;line-height:1.8;margin:0}.rhythm-grid:has(.rhythm-empty){min-width:0}@media(max-width:740px){.rhythm-heading{align-items:flex-start}.rhythm-heading h3{font-size:18px}.rhythm-heading .muted{font-size:11px}.rhythm-toolbar{flex-wrap:wrap;padding:12px}.rhythm-meter span{font-size:11px}.rhythm-navigation{gap:9px}.rhythm-navigation>span:last-child{width:100%;text-align:right}.rhythm-grid-header,.rhythm-track{grid-template-columns:136px minmax(640px,1fr) 104px}.rhythm-grid{min-width:880px}.rhythm-grid-scroll{max-height:480px}.rhythm-track-name{padding:10px 8px;gap:7px}.rhythm-track-number{width:23px}.rhythm-footnote{gap:4px}}.rhythm-step.rhythm-held{background:#227a6530}.teacher-performance{border-top:1px solid var(--line);padding-top:25px;margin-top:26px}.performance-stage{height:360px;margin-top:12px}.performance-characters{position:absolute;inset:0}.performance-empty{position:absolute;inset:0;display:grid;place-items:center;margin:0;color:#557267;font-size:14px;pointer-events:none;background:#fff3}.performer{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;gap:4px;background:transparent;padding:0;touch-action:none;cursor:grab;z-index:2;min-height:0}.performer:active:not(:disabled){transform:translate(-50%,-50%);cursor:grabbing}.performer-art{width:68px;height:68px;display:grid;place-items:center;background:#fff8;border-radius:18px;color:var(--green);font-size:38px}.performer-art img{width:100%;height:100%;object-fit:contain}.performer-name{background:#fffffff0;font-size:10px;padding:3px 7px;border-radius:6px;color:#3d594c;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.performance-progress{margin-top:13px}.performance-progress progress{width:100%;height:9px;border:0;border-radius:8px;overflow:hidden;accent-color:var(--green);display:block;background:#e9eee2}.performance-progress progress::-webkit-progress-bar{background:#e9eee2}.performance-progress progress::-webkit-progress-value{background:var(--green)}.performance-progress>div{display:flex;justify-content:space-between;gap:12px;margin-top:8px;font-size:11px;color:#73816c;font-variant-numeric:tabular-nums}.performance-controls{display:flex;align-items:center;flex-wrap:wrap;gap:25px;padding:20px 0}.transport{display:flex;gap:9px}.tempo-control{display:flex;align-items:center;gap:8px;flex-wrap:wrap;width:225px}.tempo-control>label{font-size:11px;color:#6b7b63}.tempo-control>div{display:flex;align-items:center;gap:5px}.tempo-control button{border-radius:8px;min-width:30px;background:#f0f4e9}.tempo-control input[type=number]{width:68px;padding:9px}.tempo-control input[type=range]{width:100%}.performance-slider{font-size:11px;color:#6b7b63;display:grid;grid-template-columns:1fr auto;width:135px;gap:8px}.performance-slider input{grid-column:1/-1;width:100%}.performance-slider output{font-variant-numeric:tabular-nums}.performance-roster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;max-height:310px;overflow:auto;margin-top:16px}.performance-member{display:flex;flex-direction:column;gap:9px;padding:10px;border:1px solid var(--line);border-radius:10px;background:#fdfdf8;min-width:0}.performance-member .member-place{flex-shrink:0;margin:0}.performance-member-main>div{display:flex;flex-direction:column;gap:5px;min-width:0;flex:1}.performance-member strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.performance-member small{font-size:10px;color:#89967d}.performance-member button{font-size:11px;white-space:nowrap;padding:9px}.performance-member-main>label{font-size:10px;color:#87947b;width:68px;flex-shrink:0}.performance-member input{width:100%;height:20px}.performance-rule{color:#8b957f;font-size:10px;line-height:1.8;margin:13px 0 0}.teacher-performance:fullscreen{padding:20px 5%;background:#faf8f4;overflow:auto}.teacher-performance:fullscreen .performance-stage{height:55vh}.teacher-performance:fullscreen .performance-roster{max-height:180px}.rhythm-step.is-playing{background:#eddfb4}.rhythm-step.is-playing:after{content:"";position:absolute;bottom:0;width:5px;height:3px;background:#a27a30;border-radius:2px}.rhythm-track.pending-rhythm .rhythm-track-name{box-shadow:inset 3px 0 #cfab55}.rhythm-track.pending-rhythm .rhythm-track-name strong:after{content:" · 待生效";font-size:9px;color:#aa842f}.status-pill.accepted{background:#fff0d9;color:#a68136}@media(max-width:900px){.performance-roster{grid-template-columns:1fr}.performance-controls{gap:17px}.performance-stage{height:320px}}@media(max-width:580px){.performance-controls{justify-content:space-between}.tempo-control{width:190px}.performance-progress>div{flex-direction:column;gap:5px}.performer-art{width:44px;height:44px;font-size:28px}.performer-name{max-width:70px;font-size:9px}.performance-member-main>label{width:52px}}.performance-member-main{display:flex;align-items:center;gap:9px;width:100%;min-width:0}.performance-replacement{border-top:1px solid var(--line);padding-top:5px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;width:100%}.performance-replacement>span{font-size:10px;color:#a18144;flex:1;overflow-wrap:anywhere}.many-performers .performer-art{width:38px;height:38px;font-size:24px;border-radius:12px}.many-performers .performer-name{font-size:8px;max-width:70px;padding:2px 4px}.performance-progress{--loop-progress:0;display:grid;grid-template-columns:76px minmax(0,1fr) auto;align-items:center;gap:18px;padding:17px 18px;border:1px solid var(--line);border-radius:16px;background:#fff}.performance-progress>div{margin:0}.performance-progress .loop-dial{position:relative;width:76px;height:76px;display:grid;place-items:center;color:var(--green)}.loop-dial svg{width:100%;height:100%;overflow:visible}.loop-dial circle{fill:none;stroke-width:5}.loop-dial-track{stroke:#e9eee2}.loop-dial-fill{stroke:var(--green);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--loop-progress)*100);transform:rotate(-90deg);transform-origin:40px 40px}.loop-dial>div{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1px}.loop-dial strong{font-size:24px;font-weight:650;font-variant-numeric:tabular-nums}.loop-dial span{font-size:10px;color:#73816c}.performance-progress .loop-timeline{display:block;min-width:0}.loop-heading,.loop-footer{display:flex;align-items:center;justify-content:space-between;gap:12px}.loop-heading{margin-bottom:10px;color:#3d594c}#loop-position{font-size:12px;font-weight:600}#loop-countdown{white-space:nowrap;font-size:11px;color:#73816c}.loop-bars{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:3px;margin-top:5px}.loop-bars>span{--bar-progress:0;position:relative;isolation:isolate;overflow:hidden;border-radius:4px;min-width:0;padding:4px 0;text-align:center;font-size:10px;color:#87947b;background:#f2f5ed}.loop-bars>span:before{content:"";position:absolute;inset:0;z-index:-1;background:#dce9d7;transform:scaleX(var(--bar-progress));transform-origin:left}.loop-bars>span.is-current{color:#3d594c;font-weight:700;box-shadow:inset 0 -2px var(--green)}.loop-bars>span.is-complete{color:#557267}.loop-footer{margin-top:9px;min-height:23px}.loop-beats{display:flex;gap:4px;flex-shrink:0}.loop-beats>span{display:grid;place-items:center;width:21px;height:21px;border-radius:50%;font-size:10px;background:#f2f5ed;color:#87947b}.loop-beats>span.is-current{background:var(--green);color:#fff}#loop-joining{font-size:10px;text-align:right;line-height:1.5;color:#73816c}.has-waiting #loop-joining,.has-waiting #mix-waiting{color:#a18144}.performance-progress .mix-summary{display:flex;flex-direction:column;align-items:center;gap:3px;padding-left:18px;border-left:1px solid var(--line);min-width:102px}.mix-summary strong{font-size:28px;line-height:1.15;color:var(--green);font-variant-numeric:tabular-nums}.mix-summary>span{font-size:11px;color:#3d594c}.mix-summary small{font-size:10px;color:#87947b;white-space:nowrap;margin-top:4px}.layer-symbol{display:flex;flex-direction:column;align-items:center;gap:4px;flex-shrink:0;width:30px}.layer-signal{display:flex;align-items:center;gap:2px;height:10px;opacity:.35;transform:scaleY(.35)}.layer-signal i{display:block;width:3px;height:6px;border-radius:2px;background:#a1ad98}.layer-signal i:nth-child(2){height:10px}.is-layer-active .layer-signal i{background:var(--green)}.performance-member.is-layer-active{border-color:#bfd2b6;background:#f9fcf6}.performance-member.is-layer-waiting{border-color:#e5d3a9;background:#fffdf7}.performance-sound{font-size:10px;color:#87947b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.performance-layer-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px}.performance-layer-heading>div{display:flex;align-items:center;gap:8px}.performance-layer-heading strong{font-size:13px;color:#3d594c}.performance-layer-heading span{font-size:10px;color:#87947b}.performance-layer-heading button{font-size:11px;padding:9px 12px;white-space:nowrap}.performance-layer-heading+.performance-roster{margin-top:10px}.teacher-performance input[type=range]{margin:0;min-width:0}.performance-member-main>.layer-symbol{flex:0 0 30px}@media(max-width:900px){.performance-progress{gap:12px;padding:14px}.performance-progress .mix-summary{padding-left:12px;min-width:86px}.loop-heading{align-items:flex-start;flex-direction:column;gap:4px}}@media(max-width:580px){.performance-progress{grid-template-columns:60px minmax(0,1fr);gap:12px}.performance-progress .loop-dial{width:60px;height:60px}.loop-dial strong{font-size:21px}.performance-progress .mix-summary{grid-column:1/-1;border-left:0;border-top:1px solid var(--line);padding:10px 0 0;flex-direction:row;justify-content:center;gap:8px}.mix-summary strong{font-size:19px}.mix-summary small{margin-top:0}.loop-bars{grid-auto-flow:row;grid-template-columns:repeat(8,minmax(0,1fr))}.loop-footer{align-items:flex-start;flex-direction:column;gap:6px}#loop-joining{text-align:left}.performance-layer-heading{align-items:flex-start}.performance-layer-heading>div:first-child{flex-direction:column;align-items:flex-start;gap:4px}.performance-layer-heading>div:last-child{gap:5px}.performance-layer-heading button{padding:9px}}.performance-scene-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(290px,1fr);gap:22px;align-items:start;margin-top:12px}.performance-scene-main,.performance-waiting{min-width:0}.performance-scene-layout .performance-stage{margin-top:0}.performance-waiting .teacher-waiting .teacher-roster{max-height:390px;display:block;overflow-y:auto}.performance-waiting .teacher-section-title h3{margin-top:0}.performance-waiting .member-card[hidden]{display:none}.performance-waiting [data-waiting-toggle]{width:100%;margin-top:9px;font-size:12px}.teacher-performance:fullscreen .performance-waiting .teacher-roster{max-height:55vh}@media(max-width:900px){.performance-scene-layout{grid-template-columns:1fr}.performance-waiting .teacher-waiting .teacher-roster{max-height:280px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.performance-waiting .member-card{margin:0}}@media(max-width:580px){.performance-waiting .teacher-waiting .teacher-roster{grid-template-columns:1fr}}