:root{--ink:#171713;--paper:#f1eee5;--red:#b2352c;--gold:#bd8b37;--muted:#777268;--line:rgba(23,23,19,.17)}*{box-sizing:border-box}html{background:var(--paper);color:var(--ink);font-family:"Noto Serif SC","Songti SC",serif}body{margin:0;min-height:100vh;background:radial-gradient(circle at 78% 16%,rgba(178,53,44,.08),transparent 25%),linear-gradient(110deg,transparent 74%,rgba(23,23,19,.035) 74.2%,transparent 75%)}.grain{position:fixed;inset:0;pointer-events:none;opacity:.12;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E")}header{height:78px;padding:0 clamp(24px,5vw,72px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;gap:12px;align-items:center;color:inherit;text-decoration:none;font-weight:800;letter-spacing:.2em}.seal{display:grid;place-items:center;width:35px;height:35px;background:var(--red);color:var(--paper);font-size:21px}.midi-pill{display:flex;align-items:center;gap:10px;font:12px system-ui;color:var(--muted)}.midi-pill i{width:7px;height:7px;border-radius:50%;background:#999}.midi-pill i.on{background:#3b8d5a;box-shadow:0 0 0 4px rgba(59,141,90,.12)}button{font:inherit}.midi-pill button,.outline{border:1px solid var(--line);background:transparent;padding:8px 13px;cursor:pointer}.page{display:none;max-width:1440px;min-height:calc(100vh - 78px);margin:auto;padding:48px clamp(24px,6vw,86px) 28px}.page.active{display:flex;flex-direction:column;animation:enter .4s ease}@keyframes enter{from{opacity:0;transform:translateY(8px)}}.eyebrow{font:600 12px system-ui;color:var(--red);letter-spacing:.25em;text-transform:uppercase;margin-bottom:13px}h1{font-size:clamp(42px,5vw,76px);line-height:1.04;letter-spacing:-.04em;margin:0;font-weight:500}h1 em{font-style:normal;color:var(--red)}.lead{font-size:15px;line-height:1.8;color:var(--muted);max-width:560px;margin:20px 0 30px}.carousel{display:flex;gap:18px;overflow-x:auto;padding:6px 3px 26px;scroll-snap-type:x mandatory}.instrument-card{position:relative;flex:0 0 min(300px,72vw);height:340px;border:1px solid var(--line);background:rgba(255,255,255,.22);padding:22px;text-align:left;cursor:pointer;scroll-snap-align:start;transition:.25s}.instrument-card:hover,.instrument-card:focus-visible{transform:translateY(-5px);border-color:var(--red);outline:none}.number{font:11px system-ui;color:var(--muted)}.art{height:210px;margin:10px 0;display:grid;place-items:center;background:radial-gradient(circle,rgba(189,139,55,.18),transparent 58%);position:relative}.art:before,.art:after{content:"";position:absolute;border:1px solid rgba(23,23,19,.25);border-radius:50%;width:112px;height:112px}.art:after{width:76px;height:76px}.art span{font-size:36px;color:rgba(23,23,19,.16)}.card-name{font-size:27px}.card-en{font:11px system-ui;letter-spacing:.15em;color:var(--muted);margin-top:4px}.play-icon{position:absolute;right:20px;bottom:21px;width:38px;height:38px;border-radius:50%;border:1px solid var(--ink);display:grid;place-items:center;font:14px system-ui}.instrument-card.hit .play-icon{background:var(--red);color:white;border-color:var(--red)}.bottom-bar{margin-top:auto;border-top:1px solid var(--line);padding-top:20px;display:flex;align-items:center;justify-content:space-between;color:var(--muted);font:12px system-ui;gap:15px}.primary{background:var(--ink);color:var(--paper);border:0;padding:15px 23px;cursor:pointer;min-width:155px}.primary:disabled{opacity:.3;cursor:not-allowed}.primary b{color:#e76e57;margin-left:20px}.text-button{border:0;background:none;cursor:pointer;color:var(--muted)}kbd{border:1px solid var(--line);padding:3px 7px;margin:2px;font:11px system-ui;background:rgba(255,255,255,.3)}.mapping-layout{display:grid;grid-template-columns:230px 1fr;gap:clamp(30px,5vw,80px);flex:1;min-height:440px}.mapping-layout aside{border-right:1px solid var(--line);padding-right:24px}.mapping-layout h2{font-size:15px}.mapping-layout h2 small{float:right;color:var(--red);font:11px system-ui}.bank-item{display:flex;align-items:center;gap:12px;padding:12px 8px;border-bottom:1px solid var(--line);cursor:grab}.bank-item.selected{background:rgba(178,53,44,.09)}.bank-item.used{opacity:.35}.bank-glyph{width:35px;height:35px;border:1px solid var(--line);display:grid;place-items:center;color:var(--gold)}.bank-item span{font-size:15px}.bank-item small{display:block;font:9px system-ui;color:var(--muted)}.hint{font:10px system-ui;color:var(--muted);line-height:1.5}.stage-wrap{position:relative;max-width:720px;margin:auto;width:100%}.axis{display:flex;justify-content:space-around;color:var(--muted);font-size:12px}.slot-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px 60px;margin-top:10px}.slot{min-height:150px;border:1px dashed rgba(23,23,19,.35);display:flex;align-items:center;justify-content:center;text-align:center;position:relative;cursor:pointer;transition:.2s;background:rgba(255,255,255,.14)}.slot:nth-child(1),.slot:nth-child(2){margin-bottom:40px}.slot.drag{background:rgba(178,53,44,.08);border-color:var(--red)}.slot.filled{border-style:solid}.slot .position{position:absolute;top:10px;left:12px;font:10px system-ui;color:var(--muted)}.slot .note{position:absolute;right:10px;top:10px;font:9px monospace;color:var(--muted)}.slot strong{font-size:22px}.slot small{display:block;font:9px system-ui;color:var(--muted);margin-top:4px}.body-mark{position:absolute;left:50%;top:43%;transform:translate(-50%,-50%);pointer-events:none}.body-mark span{display:block;width:22px;height:22px;border:1px solid var(--red);border-radius:50%}.body-mark i{display:block;height:66px;width:1px;background:var(--red);margin:auto}.performance-head{display:flex;justify-content:space-between;align-items:end}.performance h1{font-size:clamp(36px,4vw,58px)}.last-note{text-align:right;font:10px system-ui;color:var(--muted)}.last-note strong{display:block;color:var(--ink);font-size:32px}.performance-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;flex:1;margin:25px 0;min-height:430px}.perform-slot{position:relative;border:1px solid var(--line);display:grid;place-items:center;overflow:hidden;background:rgba(255,255,255,.16)}.perform-slot:after{content:"";position:absolute;width:0;height:0;border-radius:50%;background:rgba(178,53,44,.16);transition:.08s}.perform-slot.active:after{width:420px;height:420px}.perform-slot .visual{position:relative;z-index:1;text-align:center}.perform-slot .visual-art{width:120px;height:120px;border:1px solid rgba(23,23,19,.25);border-radius:50%;display:grid;place-items:center;font-size:34px;margin:auto;transition:.08s}.perform-slot.active .visual-art{transform:scale(.91);border-color:var(--red);color:var(--red)}.perform-slot h3{font-size:23px;margin:13px 0 2px}.perform-slot p{font:9px system-ui;color:var(--muted);letter-spacing:.12em}.corner{position:absolute;top:12px;left:14px;font:10px system-ui;color:var(--muted)}.test-keys{text-align:center;font:11px system-ui;color:var(--muted);margin-bottom:14px}.toast{position:fixed;left:50%;bottom:30px;transform:translate(-50%,20px);background:var(--ink);color:white;padding:11px 18px;font:12px system-ui;opacity:0;pointer-events:none;transition:.2s;z-index:10}.toast.show{opacity:1;transform:translate(-50%,0)}@media(max-width:750px){header{padding:0 18px}.midi-pill>span{display:none}.page{padding:30px 18px 20px}.mapping-layout{grid-template-columns:1fr}.mapping-layout aside{border-right:0;border-bottom:1px solid var(--line);padding:0 0 12px}.mapping-layout #instrumentBank{display:flex;overflow-x:auto}.bank-item{min-width:135px}.slot-grid{gap:20px}.slot{min-height:115px}.performance-grid{min-height:480px}.bottom-bar>span{display:none}}