:root{--ink:#353c36;--muted:#7f8176;--paper:#f7f2e9;--line:#e6ddce;--accent:#a66c48;--deep:#38564b;--ease:cubic-bezier(.2,.8,.2,1);--ease-out:cubic-bezier(.23,1,.32,1)}
*{box-sizing:border-box}
html{background:var(--paper)}
body{margin:0;color:var(--ink);background:var(--paper);font-family:Inter,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif}
button,input{font:inherit}
button{cursor:pointer}
.app-shell{max-width:1440px;margin:auto;padding:0 34px 34px}
.site-header{height:73px;border-bottom:1px solid #ded8cc;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px;font-size:20px}
.brand-mark{width:35px;height:35px;display:grid;place-items:center;color:#fff;border-radius:11px;background:#bf845c;font-size:23px}
.brand-caption{font-size:11px;font-weight:500;color:#9a9a8c;border-left:1px solid #d9d5ca;padding-left:13px;margin-left:6px}
.preview-tag{font-size:11px;font-weight:650;color:#a08c75;border:1px solid #e7dccc;background:#fffaf1;border-radius:30px;padding:7px 11px}
.preview-tag:before{content:"";display:inline-block;width:6px;height:6px;margin-right:7px;border-radius:50%;background:#d7a46d;vertical-align:2px}
.page-intro{display:flex;justify-content:space-between;align-items:end;gap:24px;padding:25px 4px 24px}
.eyebrow,.step-kicker{font-size:10px;letter-spacing:.15em;font-weight:800;color:#b17852}
.page-intro h1{font-size:30px;letter-spacing:-.03em;margin:8px 0 8px}
.page-intro p:not(.eyebrow){margin:0;color:#8a8e80;font-size:12px;line-height:1.7}
.progress-note{font-size:11px;color:#8a8d7f;border:1px solid #e2ddce;background:#fffaf1;border-radius:999px;padding:10px 15px;white-space:nowrap}
.room-stage{position:relative;min-width:1020px;height:640px;overflow:hidden;border-radius:25px;border:1px solid #d6c6aa;box-shadow:0 25px 55px #7963481e;background:#eadac0;isolation:isolate}
.room-art{position:absolute;inset:0;overflow:hidden;background:linear-gradient(100deg,#d5b99a 0%,#ead8bd 22%,#f2e5cc 58%,#ead7b9 100%)}
.room-art:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,#9f896b0b 0 1px,transparent 1px 170px);opacity:.7}
.wall-side{position:absolute;left:0;top:0;bottom:25%;width:19%;background:linear-gradient(90deg,#c8ac90,#ddc2a2);clip-path:polygon(0 0,100% 0,87% 100%,0 100%);box-shadow:inset -10px 0 20px #86674c20}
.window-glow{position:absolute;left:18%;top:5%;width:43%;height:70%;background:radial-gradient(ellipse at 35% 25%,#fff9dea8,#fff1c452 40%,transparent 70%);filter:blur(26px)}
.room-window{position:absolute;left:26%;top:11%;width:20%;height:33%;border:12px solid #fbefdb;border-radius:96px 96px 8px 8px;background:linear-gradient(#a9d3d0,#e3e9d5 72%,#9cae94 72%);box-shadow:0 0 0 1px #a88b6859,9px 15px 22px #856c4b22,inset 0 0 20px #779b9944}
.room-window:before{content:"";position:absolute;right:17%;top:22%;width:51px;height:51px;border-radius:50%;background:#fff5cf;box-shadow:0 0 27px 12px #fff1caaa}
.window-cross{position:absolute;inset:0}
.window-cross:before{content:"";position:absolute;width:9px;height:100%;left:50%;background:#fbefdb}
.window-cross:after{content:"";position:absolute;height:9px;width:100%;top:58%;background:#fbefdb}
.window-sill{position:absolute;left:-22px;right:-22px;bottom:-18px;height:12px;border-radius:3px;background:#f7e9cf;box-shadow:0 8px 7px #76583b27}
.picture{position:absolute;border:8px solid #a67b5c;background:#efe6d2;box-shadow:4px 8px 15px #7c5b3d26,inset 0 0 0 3px #fff9e9}
.picture i{display:block;position:absolute;inset:14%;background:linear-gradient(160deg,#e1d6b5 0 50%,#9ea991 50%);clip-path:polygon(0 100%,0 45%,33% 7%,58% 60%,100% 23%,100% 100%)}
.picture-one{right:17%;top:13%;width:10%;height:20%;transform:rotate(4deg)}
.picture-two{right:6%;top:17%;width:7%;height:14%;transform:rotate(-4deg);border-width:6px}
.floor{position:absolute;left:0;right:0;bottom:0;height:38%;background:linear-gradient(180deg,#ba946c,#a77e5d 35%,#987458 100%);border-top:7px solid #d1b18c;box-shadow:inset 0 12px #7d5b3b22}
.floor:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 57px,#795b452b 58px 60px)}
.rug{position:absolute;right:8%;bottom:-8%;width:56%;height:27%;border-radius:50%;background:#e2c9a76f;filter:blur(3px);transform:perspective(650px) rotateX(64deg);box-shadow:0 0 0 11px #f0dcc075,0 0 0 23px #d6b89967}
.bed-head{position:absolute;left:3.5%;bottom:29%;width:29%;height:27%;border-radius:24px 24px 5px 5px;background:linear-gradient(90deg,#9f7659,#b68a68);box-shadow:inset 6px 0 #704b302b,5px 9px 14px #6f4b3026}
.bed{position:absolute;left:-5%;bottom:9%;width:41%;height:28%;border-radius:46% 11% 12% 10%;background:linear-gradient(170deg,#fff8e7,#e9e6d8 62%,#bbbcae);box-shadow:7px 18px 23px #674b393d}
.bed:after{content:"";position:absolute;left:11%;right:0;bottom:1%;height:19%;border-radius:0 0 20px 10px;background:#a8aea3}
.pillow{position:absolute;left:31%;top:8%;width:30%;height:33%;border-radius:36%;background:#fffaf0;box-shadow:3px 4px 7px #71635121;transform:rotate(-10deg)}
.blanket{position:absolute;left:7%;right:-2%;bottom:16%;height:36%;border-radius:8px 40px 7px 8px;background:linear-gradient(160deg,#c2cdb9,#a6b79f);transform:rotate(3deg)}
.nightstand{position:absolute;left:4%;bottom:13%;width:12%;height:17%;border-radius:3px 3px 9px 9px;background:linear-gradient(90deg,#996d4d,#c69770 37%,#9e7151);box-shadow:8px 13px 16px #60473040}
.nightstand:before{content:"";position:absolute;left:-5%;right:-5%;top:-11px;height:17px;background:linear-gradient(#e1bb91,#b98961);border-radius:6px;box-shadow:0 4px 5px #5c392c33}
.nightstand-drawer{position:absolute;left:13%;right:13%;top:22%;height:30%;border:1px solid #8f6345;background:#bd8f6b}
.nightstand-drawer:after{content:"";position:absolute;left:48%;top:42%;width:6px;height:6px;border-radius:50%;background:#d8c09d}
.night-lamp{position:absolute;left:17%;bottom:32%;width:7%;height:18%;border-radius:50% 50% 9px 9px;background:linear-gradient(#ead5af,#cda578);clip-path:polygon(22% 0,78% 0,100% 63%,63% 63%,63% 100%,37% 100%,37% 63%,0 63%);box-shadow:0 0 32px #fff1c196}
.night-lamp span{position:absolute;left:37%;right:37%;bottom:0;height:6px;background:#86674b}
.back-table{position:absolute;left:42%;bottom:12%;width:47%;height:16%;background:linear-gradient(90deg,#a37453,#c89b73 44%,#996d4f);border-radius:4px 4px 2px 2px;box-shadow:5px 17px 20px #5b3c3038;z-index:1}
.back-table:before{content:"";position:absolute;left:-3%;right:-3%;top:-12px;height:17px;border-radius:5px;background:linear-gradient(#e2b788,#b8845f);box-shadow:0 6px 6px #5f3c2d38}
.table-drawer{position:absolute;left:30%;right:30%;top:19%;height:37%;border:1px solid #885c3e;background:#b18361}
.table-drawer:after{content:"";position:absolute;left:49%;top:42%;width:7px;height:7px;border-radius:50%;background:#e5c99e}
.table-leg{position:absolute;bottom:-62px;width:12px;height:65px;background:#8c5b40}.table-leg.left{left:5%}.table-leg.right{right:5%}
.plant{position:absolute;right:4%;bottom:30%;width:9%;height:22%}
.plant-pot{position:absolute;left:31%;right:25%;bottom:0;height:42%;border-radius:3px 3px 15px 15px;background:linear-gradient(90deg,#b88c72,#d2aa87,#aa7f65)}
.plant-leaf{position:absolute;bottom:38%;width:22%;height:55%;border-radius:90% 0 90% 0;background:#849d7f;transform-origin:bottom}
.plant-leaf.one{left:37%;transform:rotate(-34deg)}.plant-leaf.two{left:48%;height:75%;transform:rotate(14deg)}.plant-leaf.three{left:55%;height:48%;transform:rotate(46deg)}
.focus-wash{position:absolute;z-index:2;inset:0;background:radial-gradient(ellipse at 31% 45%,#fff9eab5 0%,#f8ecd8cc 53%,#ead6bcdc);opacity:0;pointer-events:none;transition:opacity 380ms ease}
.room-stage[data-phase=focus] .focus-wash,.room-stage[data-phase=returning] .focus-wash{opacity:1}
#room-canvas{position:absolute;z-index:3;inset:0;width:100%;height:100%;pointer-events:none}
.room-stage[data-phase=focus] #room-canvas{pointer-events:auto;touch-action:none}
.room-caption{position:absolute;z-index:5;left:31px;top:28px;display:flex;align-items:center;gap:9px;font-size:11px;font-weight:650;color:#715e48;background:#fff8e9dc;border:1px solid #fff9ed;border-radius:999px;padding:11px 14px;box-shadow:0 5px 15px #74594321;transition:opacity 200ms ease}
.caption-dot{width:7px;height:7px;border-radius:50%;background:#bb8056}
.room-stage[data-phase=focus] .room-caption,.room-stage[data-phase=returning] .room-caption{opacity:0;pointer-events:none}
.room-stage[data-phase=performance] .room-caption{opacity:0;pointer-events:none}
.corner-trigger{position:absolute;z-index:5;left:3%;bottom:27%;width:15%;height:22%;border:1px solid transparent;border-radius:20px;background:transparent;color:#6f4b35;transition:background 160ms ease,border-color 160ms ease}
.corner-trigger span{position:absolute;left:50%;bottom:-9px;transform:translate(-50%,5px);opacity:0;background:#fff9eb;border:1px solid #ead7bb;border-radius:99px;box-shadow:0 6px 17px #6b4b312c;padding:8px 11px;white-space:nowrap;font-size:11px;font-weight:750;transition:opacity 160ms ease,transform 160ms var(--ease)}
.corner-trigger:hover,.corner-trigger:focus-visible{outline:0;background:#fff8e420;border-color:#f8ead888}
.corner-trigger:hover span,.corner-trigger:focus-visible span{opacity:1;transform:translate(-50%,0)}
.room-stage[data-phase=focus] .corner-trigger,.room-stage[data-phase=returning] .corner-trigger,.room-stage[data-phase=performance] .corner-trigger{display:none}
.focus-panel{position:absolute;z-index:6;right:30px;top:28px;bottom:28px;width:316px;overflow:auto;padding:23px 23px 19px;border-radius:20px;background:#fffaf1ec;border:1px solid #fffdf6;box-shadow:0 18px 45px #5a423350;backdrop-filter:blur(12px);opacity:0;transform:translateX(28px);pointer-events:none;transition:opacity 240ms ease,transform 350ms var(--ease)}
.room-stage[data-phase=focus] .focus-panel{opacity:1;transform:none;pointer-events:auto}
.panel-top{display:flex;justify-content:space-between;align-items:center}
.quiet-button{border:0;background:none;color:#969181;font-size:10px;padding:4px}
.focus-panel h2{font-size:23px;letter-spacing:-.03em;margin:14px 0 4px}
.panel-description{font-size:11px;color:#8b8c7d;line-height:1.6;margin:0 0 19px}
.material-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:8px 0 12px}.material-row .field-title{margin:0}.material-options{display:flex;gap:5px}.material-options button{min-width:52px;border:1px solid #e4d8c8;border-radius:7px;background:#fffaf1;color:#746c61;font-size:10px;font-weight:700;padding:5px 8px}.material-options button[aria-pressed=true]{border-color:#a88a6e;background:#ead8c0;color:#563b2c}
.gear-step{width:100%;display:flex;align-items:center;gap:10px;margin:13px 0 4px;padding:9px 11px;border:1px solid #d9c8b0;border-radius:10px;background:#f5ead8;color:#69503c;text-align:left;font-size:11px;font-weight:760;transition:background-color 160ms ease,border-color 160ms ease,transform 140ms var(--ease-out)}
.gear-step:active{transform:scale(.985)}.gear-step:disabled{opacity:.55;cursor:not-allowed}
.gear-step-icon{display:grid;place-items:center;width:32px;height:32px;border:1px solid #bd9974;border-radius:50%;background:linear-gradient(145deg,#fff7e9,#d7b58f);color:#705137;font-size:21px;line-height:1;transition:transform 180ms var(--ease-out)}
.gear-step kbd{margin-left:auto;color:#a17a58;font-size:13px;font-weight:700}
@media(hover:hover) and (pointer:fine){.gear-step:hover:not(:disabled){border-color:#b28a65;background:#f0dfc9}}
.field{margin-top:17px}.field-title{display:block;font-size:11px;font-weight:780;color:#5d6559;margin-bottom:9px}
.option-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.option-grid button{min-height:34px;border:1px solid #e7e0d3;border-radius:8px;background:#fffdfa;color:#657166;font-size:11px;font-weight:650;padding:6px 4px;transition:background-color 130ms ease,border-color 130ms ease,transform 130ms var(--ease)}
.option-grid button:active{transform:scale(.98)}
.option-grid button[aria-pressed=true]{background:#e8f0e9;color:#315c49;border-color:#9fbca5;box-shadow:inset 0 0 0 1px #b5cfbb}
.rhythm-options{grid-template-columns:repeat(3,minmax(0,1fr))}
.swing-feedback{display:flex;flex-direction:column;align-items:flex-start;gap:3px;margin-top:13px;padding:9px 10px;border:1px solid #dbe3d8;border-radius:9px;background:#f0f4ed;color:#52695b;font-size:11px;font-weight:750}
.swing-feedback output{color:#a66c48;font-variant-numeric:tabular-nums}
.swing-feedback small{color:#7e8e80;font-size:9px;font-weight:500;line-height:1.45}
.range-field label{display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:750;color:#5d6559}
.range-field label strong{color:#a66c48;font-size:12px}
.range-field input{width:100%;accent-color:#a77c57;margin:12px 0 2px}
.range-field small{display:block;font-size:9px;color:#a2a497}
.panel-actions{display:flex;flex-direction:column;gap:7px;margin-top:20px}
.primary-button{display:flex;justify-content:space-between;align-items:center;min-height:43px;border:0;border-radius:10px;background:#38574a;color:#fff;padding:0 13px;font-size:11px;font-weight:780;box-shadow:0 7px 15px #3b65462f}
.primary-button:hover{background:#446e5a}
.secondary-button{border:0;background:transparent;color:#7c806f;font-size:10px;font-weight:650;padding:7px}
.performance-panel{position:absolute;z-index:5;left:29px;right:29px;top:27px;display:flex;align-items:center;justify-content:space-between;gap:20px;background:#fff9e9d8;border:1px solid #fffaf0;border-radius:16px;padding:15px 20px;opacity:0;pointer-events:none;transform:translateY(-10px);transition:opacity 230ms ease,transform 230ms var(--ease)}
.room-stage[data-phase=performance] .performance-panel{opacity:1;transform:none}
.performance-panel h2{font-size:17px;margin:5px 0 4px}.performance-panel p{font-size:10px;color:#8b8979;margin:0}
.beat-dots{display:flex;gap:8px}.beat-dots i{display:block;width:10px;height:10px;border-radius:50%;background:#d3c5b0}.beat-dots i.active{background:#bc865e;transform:scale(1.2)}
.below-stage{display:flex;justify-content:space-between;align-items:center;gap:18px;margin:15px 1px}
.stage-instruction{font-size:12px;color:#797f72}.stage-instruction span{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:9px;margin-right:8px;background:#e9e6dc;color:#aa7754;font-size:10px;font-weight:800}
.restart-button{font-size:11px;border:1px solid #ddd6c9;border-radius:8px;background:#fffaf1;color:#656d61;padding:8px 11px}
.arrangement{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:11px;min-height:93px}
.arrangement:empty:before{content:"还没有加入声部。选好乐器后，它会显示在这里。";grid-column:1/-1;display:grid;place-items:center;border:1px dashed #dcd4c7;border-radius:13px;color:#a1a394;font-size:12px;min-height:77px}
.instrument-card{min-width:0;border:1px solid #dedfd3;background:#fffdf7;border-radius:13px;padding:11px 12px;box-shadow:0 6px 13px #665a4610}
.instrument-card.pending{border-color:#c5946d}.card-heading{display:flex;align-items:center;justify-content:space-between;gap:6px}.card-heading small{font-size:10px;color:#a18d76}
.instrument-card p{font-size:10px;color:#878f80;margin:7px 0 10px}.card-bottom{display:flex;justify-content:space-between;align-items:center;color:#9a7a5f;font-size:10px}
.voice-select{border:0;background:transparent;padding:0;color:#48564a;font-size:12px;font-weight:780;text-align:left}.voice-select[aria-pressed=true]{color:#a66c48}
.voice-switch{width:32px;height:19px;border:0;border-radius:99px;background:#c9d0c8;padding:2px}
.voice-switch:after{content:"";display:block;width:15px;height:15px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0002;transition:transform 150ms var(--ease)}
.voice-switch[aria-checked=true]{background:#7fa890}.voice-switch[aria-checked=true]:after{transform:translateX(13px)}
.placed-hits{position:absolute;z-index:4;inset:0;pointer-events:none}
.placed-hit{position:absolute;left:65%;bottom:24%;width:13%;height:20%;transform:translateX(-50%);border:1px solid transparent;border-radius:12px;background:transparent;pointer-events:auto}
.placed-hit:hover,.placed-hit:focus-visible{outline:0;border-color:#fff8e4a8;background:#fff8e419;box-shadow:0 0 22px #fff3d87a}
.focus-overlay{position:fixed;z-index:50;inset:0;overflow:clip;visibility:hidden;opacity:0;pointer-events:none;background:#eee2cc;transition:opacity 420ms ease,visibility 420ms}
.focus-overlay.is-open{visibility:visible;opacity:1;pointer-events:auto}
.focus-overlay.is-leaving{visibility:visible;opacity:0;pointer-events:none}
.focus-atmosphere{position:absolute;inset:0;background:radial-gradient(ellipse at 35% 32%,#fff9e9 0%,#f6ead6 47%,#d7c1a3 100%)}
.focus-atmosphere:after{content:"";position:absolute;left:-10%;right:-10%;bottom:-18%;height:40%;background:linear-gradient(180deg,#d9b28b82,#b989657d);transform:perspective(700px) rotateX(47deg);border-top:1px solid #b38b6c70}
.focus-canvas-host{position:absolute;inset:0;z-index:1}
.focus-overlay #room-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:auto;touch-action:none}
.focus-overlay-heading{position:absolute;z-index:3;left:35px;top:28px;display:flex;flex-direction:column;gap:6px;pointer-events:none}
.focus-overlay-heading strong{font-size:20px;letter-spacing:-.025em;color:#484b41}
.focus-overlay-heading small{font-size:11px;color:#8c8b7c}
.focus-depth-note{position:absolute;z-index:3;left:36px;bottom:27px;border:1px solid #dfd2bd;background:#fff9ebba;border-radius:99px;padding:9px 12px;color:#917c65;font-size:10px}
.direction-status{position:absolute;z-index:3;left:35px;bottom:16px;max-width:42%;border:1px solid #d9ccb5;background:#fff9ebd9;border-radius:10px;padding:9px 11px;color:#8d765e;font-size:11px;font-weight:680;pointer-events:none}
.direction-status.is-forward{border-color:#a5c6aa;color:#3c7056;background:#eff8eeda}
.direction-status.is-reverse{border-color:#ceac91;color:#a36a49;background:#fff1e4e8}
.focus-overlay.is-leaving .focus-panel{opacity:0;pointer-events:none}
@media(max-width:800px){.focus-overlay-heading,.focus-depth-note{display:none}}
.focus-overlay .focus-panel{top:24px;right:26px;bottom:24px;width:300px;opacity:1;transform:none;pointer-events:auto;background:#fffaf1d9;box-shadow:0 22px 55px #6852373b}
body.is-zoomed{overflow:hidden}
@media(max-width:1100px){.app-shell{padding:0 20px 30px}.page-intro{align-items:start;flex-direction:column;gap:12px}.room-stage{min-width:0}.arrangement{grid-template-columns:repeat(3,minmax(0,1fr))}.focus-panel{right:18px;width:290px}.focus-overlay .focus-panel{right:18px;width:290px}}
@media(max-width:700px){.app-shell{padding:0 12px 25px}.site-header{height:62px}.brand-caption{display:none}.page-intro h1{font-size:25px}.page-intro{padding:19px 2px}.room-stage{height:620px}.focus-overlay .focus-panel{right:13px;top:14px;bottom:14px;width:274px;padding:18px}.focus-panel h2{font-size:20px}.panel-description{margin-bottom:11px}.field{margin-top:12px}.panel-actions{margin-top:13px}.room-caption{left:12px;top:13px;max-width:47%;font-size:10px}.arrangement{grid-template-columns:repeat(2,minmax(0,1fr))}.focus-overlay-heading{display:none}}
@media(max-width:540px){.room-stage{height:800px}.focus-overlay .focus-panel{left:12px;right:12px;top:auto;bottom:12px;width:auto;height:355px}.room-caption{max-width:70%}.arrangement{grid-template-columns:1fr}.focus-depth-note{display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:0s!important;animation-duration:0s!important}}