@font-face{font-family:ClubSerif;src:local('Baskerville')}@font-face{font-family:ClubSans;src:local('Avenir Next')}*{box-sizing:border-box} :root{--ink:#183c35;--sea:#102e2b;--paper:#f0e9d9;--muted:#8a9f93;--mint:#afdfbc;--orange:#e77f50;--line:#d5cebb}body{margin:0;background:var(--sea);color:var(--paper);font-family:ClubSans,'PingFang SC','Microsoft Yahei',sans-serif;font-size:13px}button,input,select{font:inherit}button,select{cursor:pointer}button{border:0;background:none;color:inherit}button:focus-visible,select:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid var(--orange);outline-offset:4px}button:disabled{cursor:not-allowed;opacity:.35}button:not(:disabled){transition:background .18s,transform .18s,color .18s}button:active:not(:disabled){transform:translateY(1px)}.masthead{height:96px;max-width:1600px;padding:0 4%;margin:auto;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #45634e55}.brand{color:var(--paper);text-decoration:none;display:flex;align-items:center;gap:12px;font-family:ClubSerif,Georgia,serif;font-weight:bold;font-size:25px;letter-spacing:1px;line-height:1}.brand small{font-family:ClubSans,'PingFang SC',sans-serif;display:block;font-size:9px;letter-spacing:5px;font-weight:400;margin-top:10px}.brand-mark{font-family:Georgia,serif;font-size:62px;font-weight:normal;color:var(--mint);transform:rotate(-12deg);line-height:.7}.edition{font-size:10px;letter-spacing:2.5px;line-height:1.8;color:#b1bd9e;text-align:center}.edition span{display:block;font-size:10px;letter-spacing:2px;color:#819a8b}.icon-btn{font-size:11px;border:1px solid #63806d77;padding:10px 14px;border-radius:3px}.icon-btn span{color:var(--mint);margin-left:15px}.performance{height:min(630px,60vw);min-height:490px;max-height:720px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 56% 65%,#2a5142,#0b2625 75%)}#scene{position:absolute;inset:0}#scene canvas{display:block;touch-action:none;width:100%;height:100%}.scene-title{position:absolute;left:5%;top:50px;pointer-events:none}.eyebrow{font-size:9px;letter-spacing:2px;color:#a5b897;display:flex;align-items:center;gap:9px}.live-dot,.mint-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--mint);box-shadow:0 0 10px #afdfbc55}.scene-title h1{font-family:ClubSerif,'Songti SC','STSong',serif;font-weight:400;font-size:clamp(35px,4.6vw,68px);line-height:1.2;letter-spacing:2px;margin:24px 0 19px}.intro{font-size:12px;letter-spacing:2px;color:#acb9a5}.stage-label{position:absolute;left:5%;bottom:25px;display:flex;gap:12px;align-items:center;font-size:9px;letter-spacing:1.5px;color:#b9c5a9;pointer-events:none}.tiny-star{color:var(--orange);font-size:22px}.label-rule{width:35px;height:1px;background:#82917a}.camera-tools{position:absolute;right:4%;top:30px;display:flex;gap:6px}.camera-tools button{border:1px solid #82947a44;border-radius:3px;padding:8px 11px;font-size:15px;backdrop-filter:blur(10px);background:#102e2b44}.camera-tools button span{font-size:10px;margin-left:4px}.camera-tools button:hover{background:#375440}.drag-hint{position:absolute;right:4%;bottom:62px;background:#12352ed9;border:1px solid #8fb89b66;border-radius:30px;padding:9px 15px;color:#bdd9b7;font-size:10px;letter-spacing:.5px;pointer-events:none}.drag-hint>span{font-size:19px;vertical-align:-2px;margin-right:5px}.orbit-hint{position:absolute;right:4%;bottom:29px;font-size:9px;letter-spacing:1px;color:#a3b29a;pointer-events:none}.console{background:var(--paper);color:var(--ink);padding:0 4%;position:relative}.transport-row{display:flex;align-items:center;gap:30px;justify-content:space-between;min-height:99px;border-bottom:1px solid var(--line)}.transport-main{display:flex;align-items:center;gap:30px}.play-btn{background:var(--ink);color:var(--paper);padding:15px 24px;min-width:151px;display:flex;align-items:center;gap:16px;border-radius:3px;font-size:12px;letter-spacing:1px}.play-btn:hover{background:#2f5c49}.play-btn.playing{background:#ca6741}.play-btn.playing:hover{background:#b85933}#play-icon{font-size:12px}.tempo{width:145px}.tempo label{display:flex;align-items:center;gap:6px;font-size:9px;letter-spacing:1.3px}.tempo output{font-family:ClubSerif,Georgia,serif;font-size:23px;margin-left:auto;letter-spacing:0}.tempo small{font-size:8px}.tempo input{appearance:none;width:100%;height:3px;display:block;background:#c9cbb4;margin:10px 0 0;accent-color:var(--ink);cursor:pointer}.tempo input::-webkit-slider-thumb{appearance:none;width:11px;height:11px;background:var(--ink);border:2px solid var(--paper);border-radius:50%;box-shadow:0 0 0 1px var(--ink)}.record-section{display:flex;gap:9px;align-items:center}.record-section button{padding:11px 14px;border:1px solid #c6c9b4;border-radius:3px;font-size:11px;white-space:nowrap}.record-dot{width:7px;height:7px;border-radius:50%;background:#c96043;display:inline-block;margin-right:8px}.record-btn.recording{border-color:#c96043!important;color:#ac3e2e;background:#e5cfc0}.recording .record-dot{animation:pulse 1s infinite}.record-section button:hover:not(:disabled){background:#dddac5}#record-status{font-size:10px;color:#75836d;max-width:125px;line-height:1.5;margin-left:6px;font-variant-numeric:tabular-nums}.utility{display:flex;gap:15px;font-size:16px}.utility span{font-size:10px;margin-left:4px}.utility button{padding:8px 3px}.utility button:hover{color:#ba5c36}.score-header{display:flex;justify-content:space-between;align-items:center;padding:22px 0 17px}.eyebrow.dark{color:#687d61;font-size:8px;letter-spacing:2px}.score-header h2{font-family:ClubSerif,'Songti SC',serif;font-size:24px;font-weight:400;margin:7px 0 0;letter-spacing:1px}.score-actions{display:flex;align-items:center;gap:14px;font-size:10px}.score-actions select{appearance:none;background:transparent;border:1px solid #bdc2ab;color:var(--ink);border-radius:2px;padding:10px 30px 10px 12px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6'%3E%3Cpath d='M1 1l3.5 3.5L8 1' stroke='%23183c35' fill='none'/%3E%3C/svg%3E");background-position:right 10px center;background-repeat:no-repeat}.score-actions button{padding:10px 13px;border:1px solid #bdc2ab;border-radius:2px}#pattern-name{color:#788572}.sequencer-scroll{overflow:auto;scrollbar-width:thin;scrollbar-color:#a9b49c transparent}#sequencer{display:grid;grid-template-columns:155px repeat(16,minmax(25px,1fr));gap:5px;min-width:760px;padding-bottom:5px}.beat-number{font-size:9px;text-align:center;height:20px;color:#8c957e;line-height:20px;font-variant-numeric:tabular-nums}.beat-number.major{color:var(--ink);font-weight:600}.instrument{display:flex;align-items:center;gap:9px;text-align:left;font-size:11px;padding:0 7px 0 0;height:30px;white-space:nowrap}.instrument kbd{border:1px solid #bec4aa;color:#5f7457;display:flex;align-items:center;justify-content:center;width:21px;height:21px;border-radius:3px;font-size:10px;font-family:inherit}.instrument .english{font-size:8px;color:#839078;margin-left:auto;margin-right:9px;letter-spacing:1px}.instrument.hit kbd{background:var(--orange);color:white;border-color:var(--orange)}.step{border:1px solid #d9d7c2;border-radius:3px;background:#e5e2cf;min-height:30px;position:relative;padding:0}.step.bar{margin-left:5px}.step:hover{border-color:#849b7c;background:#dadfc9}.step.on{background:var(--ink);border-color:var(--ink)}.step.on::after{content:'';width:4px;height:4px;border-radius:50%;background:#acd2a4;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.step.current{outline:2px solid #d48249;outline-offset:1px;z-index:1}.step.on.current{background:#d48249;border-color:#d48249}.step.on.current::after{background:#fff3d5}.console-footer{border-top:1px solid var(--line);margin-top:15px;min-height:49px;display:flex;align-items:center;justify-content:space-between;font-size:9px;letter-spacing:.3px;color:#7b8870}.console-footer b{font-weight:400;border:1px solid #bec4ab;padding:2px 6px;border-radius:2px}.console-footer .mint-dot{background:#537751;margin-right:4px;box-shadow:none}.footer-sep{margin:0 8px;color:#b5b9a4}.page-footer{padding:23px 4%;display:flex;align-items:center;justify-content:space-between;color:#829c87;font-size:8px;letter-spacing:1.7px}.page-footer span span{font-size:17px;color:#d49d5e;margin-left:12px}#toast{position:fixed;left:50%;bottom:25px;transform:translate(-50%,15px);background:#183c35ee;color:var(--paper);padding:12px 24px;border:1px solid #92aa7d66;box-shadow:0 6px 25px #0003;border-radius:3px;font-size:12px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:10;max-width:90vw;text-align:center}#toast.show{opacity:1;transform:translate(-50%,0)}#guide{position:absolute;right:4%;top:80px;max-width:340px;background:var(--paper);color:var(--ink);padding:24px;border:1px solid #bcc5a7;box-shadow:0 20px 60px #0005;z-index:5;border-radius:4px}#guide h2{font-family:'Songti SC',serif;font-weight:400}#guide ol{padding-left:18px;font-size:12px;line-height:2.2}#guide p:last-child{font-size:11px;color:#657855}#close-guide{position:absolute;right:12px;top:10px;font-size:22px}#loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--sea);font-size:13px;letter-spacing:4px;z-index:8}.immersive .console,.immersive .page-footer{display:none}.immersive .performance{height:calc(100dvh - 96px);max-height:none}.immersive .scene-title{opacity:.45}@keyframes pulse{50%{opacity:.3}}@media(min-width:1600px){main,.page-footer{max-width:1600px;margin:auto}.performance{height:670px}}@media(max-width:1000px){.transport-row{gap:15px}.transport-main{gap:17px}.record-section{gap:5px}#record-status{display:none}.utility{gap:8px}.play-btn{min-width:133px;padding:15px 17px}.tempo{width:125px}.scene-title h1{font-size:44px}.scene-title .eyebrow{font-size:7px;letter-spacing:1px}.scene-title{top:30px}.performance{min-height:500px}.stage-label{font-size:8px;gap:7px}}@media(max-width:700px){.masthead{height:76px;padding:0 5%}.brand{font-size:20px;gap:8px}.brand-mark{font-size:45px}.brand small{font-size:8px;letter-spacing:3px}.edition{display:none}.icon-btn{font-size:10px;padding:8px}.performance{height:560px;min-height:0}.scene-title{left:5%;top:23px}.scene-title h1{font-size:33px;line-height:1.15;margin:13px 0 10px}.intro{font-size:10px;letter-spacing:1px}.scene-title .eyebrow{max-width:210px;font-size:6px;letter-spacing:1px}.camera-tools{top:23px;right:5%;flex-direction:column;gap:5px}.camera-tools button{padding:7px 9px;font-size:13px}.camera-tools button span{font-size:9px}.drag-hint{bottom:58px;right:5%;font-size:9px;padding:6px 11px}.orbit-hint{bottom:37px;right:5%;font-size:8px}.stage-label{left:5%;bottom:12px;font-size:7px;letter-spacing:.6px}.tiny-star{font-size:16px}.label-rule{width:20px}.console{padding:0 5%}.transport-row{flex-wrap:wrap;min-height:0;gap:15px;padding:20px 0 15px}.transport-main{justify-content:space-between;width:100%;gap:20px}.play-btn{min-width:150px}.tempo{width:calc(100% - 175px)}.record-section{flex:1}.record-section button{padding:9px 11px;font-size:10px}.utility{gap:12px}.utility button{font-size:14px}.utility span{font-size:9px}.score-header{gap:10px;padding:19px 0 15px}.score-header h2{font-size:19px}.score-header .eyebrow{font-size:6px;letter-spacing:1.3px}.score-actions{gap:7px}.score-actions select{width:96px;font-size:9px;padding:8px}.score-actions button{font-size:9px;padding:8px}#pattern-name{display:none}#sequencer{min-width:690px;grid-template-columns:112px repeat(16,minmax(25px,1fr));gap:4px}.instrument .english{display:none}.instrument{font-size:10px;gap:7px}.console-footer{font-size:8px;display:block;padding:12px 0;line-height:2.6}.console-footer>span{display:block}.page-footer{font-size:6px;letter-spacing:.6px;padding:17px 5%;gap:10px}.page-footer span span{font-size:12px;margin-left:2px}#guide{top:65px;right:5%;left:5%;max-width:none;padding:22px}.immersive .performance{height:calc(100dvh - 76px)}}@media(prefers-reduced-motion:reduce){button,#toast{transition:none}.recording .record-dot{animation:none}}