* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; width: 100%; min-height: 100%;
  background: #0b0d13; color: #ffffff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
  user-select: none; -webkit-user-select: none;
  touch-action: manipulation;
}
body { overflow-x: hidden; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }

.app {
  width: 100%; max-width: 1460px; margin: 0 auto; padding: 14px;
}

/* 顶部 */
.header {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px;
}
.title h1 { margin: 0; font-size: 22px; font-weight: 800; }
.title p { margin: 4px 0 0; color: #8c93a1; font-size: 12px; }
.header-buttons { display: flex; gap: 8px; }

/* 按钮通用 */
.btn {
  border: 1px solid #323846; background: #181c25; color: #ffffff;
  border-radius: 8px; padding: 8px 12px; font-size: 12px; font-weight: 600;
  transition: background .15s, transform .1s;
}
.btn:hover { background: #232936; }
.btn:active { transform: scale(.97); }
.btn.primary { background: #6366f1; color: #ffffff; border-color: transparent; }
.btn.primary:hover { background: #4f46e5; }
.btn.active { background: #4338ca; border-color: #6366f1; }

/* 主面板 */
.main-card {
  width: 100%; background: #13161f; border: 1px solid #252b38; border-radius: 12px; padding: 12px;
}

/* 状态栏与控制 */
.status-bar {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px;
  margin-bottom: 10px; padding: 6px 10px; background: #0c0e15; border-radius: 8px; border: 1px solid #1f2430;
  font-size: 12px; color: #94a3b8;
}
.status-indicator { display: flex; align-items: center; gap: 6px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #64748b; }
.status-dot.ready { background: #10b981; box-shadow: 0 0 10px rgba(16,185,129,.7); }

.controls-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px;
}
.control-group {
  display: flex; align-items: center; gap: 6px; padding: 6px 10px;
  background: #181c26; border: 1px solid #282f3d; border-radius: 8px; font-size: 12px; color: #94a3b8;
}
.control-group input[type="range"] { width: 100px; accent-color: #6366f1; cursor: pointer; }

/* 曲谱与多音进度 */
.score-card {
  background: #0d1017; border: 1px solid #232937; border-radius: 10px; padding: 12px; margin-bottom: 12px;
}
.score-header {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 8px;
}
.current-target {
  display: flex; align-items: center; gap: 6px; background: #191e2b;
  border: 1px solid #6366f1; border-radius: 8px; padding: 4px 10px;
}
.current-target .tag { font-size: 11px; color: #94a3b8; }
.current-target .val { font-size: 15px; font-weight: 800; color: #818cf8; letter-spacing: 0.5px; }

.note-track-wrapper {
  width: 100%; overflow: hidden; position: relative; padding: 10px 0; margin-bottom: 8px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 15%, #000 85%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 15%, #000 85%, transparent 100%);
}
.note-track {
  display: flex; gap: 8px; width: max-content; position: relative;
  transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.step-item {
  flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 58px; height: 50px; padding: 4px 6px; border-radius: 7px;
  background: #181c26; border: 1px solid #2b3342; font-size: 11px; font-weight: 700; color: #cbd5e1;
  cursor: pointer; transition: all .12s;
}
.step-item.current {
  background: #4f46e5; border-color: #a5b4fc; color: #ffffff; transform: scale(1.06); box-shadow: 0 0 12px rgba(99,102,241,.6);
}
.step-item.done { background: #11141c; border-color: #1e2430; color: #64748b; }
.step-item .dur { font-size: 9px; opacity: 0.8; margin-top: 2px; font-weight: 500; font-family: monospace; }
.step-item .chord-badge { font-size: 8px; background: rgba(0,0,0,0.3); padding: 0 3px; border-radius: 3px; margin-bottom: 2px; }

.progress { width: 100%; height: 5px; background: #232836; border-radius: 99px; overflow: hidden; margin-top: 6px; }
.progress-bar { width: 0%; height: 100%; background: linear-gradient(90deg, #6366f1, #10b981); transition: width .1s linear; }

.sheet-container {
  margin-top: 10px; background: #ffffff; color: #000; border-radius: 8px; padding: 10px; max-height: 220px; overflow: auto;
}

/* 钢琴 88 键容器 */
.piano-wrapper {
  width: 100%; overflow-x: auto; background: #07080c; border: 1px solid #232836; border-radius: 12px; padding: 10px 6px 14px;
}
.piano-wood {
  width: 1480px; height: 6px; background: linear-gradient(90deg, #450a0a, #7f1d1d, #450a0a); border-radius: 3px 3px 0 0; margin-bottom: 1px;
}
.piano {
  position: relative; height: 260px; width: 1480px; user-select: none; touch-action: none;
}
.white-keys {
  position: absolute; inset: 0; display: flex;
}

/* 节奏瀑布流提示块 */
.falling-wrapper {
  width: 1480px;
  height: 170px;
  position: relative; overflow: hidden;
  background: linear-gradient(to bottom, transparent, #0a0c13);
  border-bottom: 2px solid #6366f1;
  border-radius: 8px 8px 0 0; margin-bottom: 2px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 25%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 25%, #000 100%);
}
.falling-track {
  position: absolute; bottom: 0; left: 0; width: 100%; height: 100%;
  transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
  transform: translateZ(0);
}
.falling-block {
  position:absolute; border-radius:4px; opacity:0.92;
  will-change: transform;
  /* 移除 transition，防止高频增删 class 时触发 CSS 动画补间导致的掉帧 */
}
.falling-block.white-note { background: linear-gradient(180deg, #6366f1, #818cf8); z-index: 1; }
.falling-block.black-note { background: linear-gradient(180deg, #f59e0b, #fbbf24); z-index: 2; }

.falling-block.hit {
  filter: brightness(1.5) drop-shadow(0 0 8px rgba(255,255,255,0.7)) !important;
}
.falling-block.finished {
  opacity: 0 !important;
}

.hit-line-error {
  position: absolute; bottom: 0; left: 0; width: 100%; height: 40px;
  background: linear-gradient(to top, rgba(239, 68, 68, 0.5), transparent);
  opacity: 0; pointer-events: none; z-index: 10;
}
@keyframes trackErrorFlash {
  0% { opacity: 1; height: 60px; }
  100% { opacity: 0; height: 40px; }
}
.hit-line-error.flash {
  animation: trackErrorFlash 0.35s ease-out;
}

@keyframes keyErrorFlash {
  0% { background-color: #ef4444; box-shadow: 0 0 25px #ef4444; transform: translateY(2px); }
  100% { }
}
.key.error {
  animation: keyErrorFlash 0.3s ease-out !important;
}

/* 白键 */
.key.white {
  flex: 1; height: 100%;
  background: linear-gradient(to bottom, #ffffff 0%, #f6f6f4 75%, #d1d1ce 100%);
  border-left: 1px solid #a8a8a8; border-bottom: 5px solid #787874; border-radius: 0 0 6px 6px;
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  padding-bottom: 8px; cursor: pointer; transition: background .08s, transform .05s; z-index: 1;
}
.key.white.active {
  background: linear-gradient(to bottom, #e0e7ff 0%, #c7d2fe 70%, #818cf8 100%);
  border-bottom-width: 2px; transform: translateY(2px);
}
.key.white.guide {
  background: linear-gradient(to bottom, #eef2ff 0%, #e0e7ff 70%, #c7d2fe 100%);
  box-shadow: inset 0 0 0 3px #6366f1, 0 0 10px rgba(99,102,241,.5);
}

/* 黑键 */
.key.black {
  position: absolute; top: 0; width: 1.15%; height: 61%; transform: translateX(-50%);
  background: linear-gradient(to right, #383d47 0%, #0d0e12 50%, #20242b 100%);
  border: 1px solid #000000; border-radius: 0 0 5px 5px; box-shadow: 0 5px 10px rgba(0,0,0,.7);
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  padding-bottom: 6px; cursor: pointer; z-index: 10; transition: background .08s, transform .05s;
}
.key.black.active {
  background: linear-gradient(to right, #6366f1 0%, #1e1b4b 50%, #4338ca 100%);
  border-color: #818cf8; transform: translateX(-50%) translateY(2px);
}
.key.black.guide {
  box-shadow: 0 0 0 3px #818cf8, 0 5px 12px rgba(99,102,241,.8);
}

/* 键位文字与快捷键 */
.note-name { font-size: 10px; font-weight: 700; color: #475569; pointer-events: none; line-height: 1; }
.key.black .note-name { font-size: 8px; color: #cbd5e1; }
.key.active .note-name { color: #1e1b4b; }
.key.black.active .note-name { color: #ffffff; }

.key-shortcut {
  margin-top: 2px; padding: 1px 3px; font-size: 8px; font-family: monospace; font-weight: 800;
  border-radius: 3px; background: rgba(0,0,0,0.1); color: #1e293b; border: 1px solid rgba(0,0,0,0.15); pointer-events: none;
}
.key.black .key-shortcut { background: #1e2430; color: #fbbf24; border-color: #334155; font-size: 7px; }

/* 延音踏板与底部 */
.pedal-box { display: flex; justify-content: center; margin-top: 10px; }
.pedal-btn {
  padding: 8px 24px; border-radius: 10px; background: linear-gradient(#2a303c, #14171f);
  border: 1px solid #3c4455; color: #fff; font-size: 12px; font-weight: 700;
}
.pedal-btn.active {
  background: linear-gradient(#6366f1, #3730a3); border-color: #818cf8; box-shadow: 0 0 15px rgba(99,102,241,.5);
}

/* 自定义歌曲面板 */
.custom-panel {
  margin-top: 12px; padding: 12px; background: #0f121a; border: 1px solid #232938; border-radius: 10px;
}
.custom-panel h3 { margin: 0 0 6px; font-size: 14px; font-weight: 700; color: #e2e8f0; }
.custom-panel p { margin: 0 0 8px; font-size: 12px; color: #94a3b8; line-height: 1.5; }
.custom-panel code { background: #181d29; padding: 2px 4px; border-radius: 4px; color: #a5b4fc; }
.custom-textarea {
  width: 100%; min-height: 80px; background: #07090e; border: 1px solid #2e3646; border-radius: 8px;
  color: #fff; padding: 8px; font-family: monospace; font-size: 13px; outline: none; resize: vertical;
}
.custom-textarea:focus { border-color: #6366f1; }

/* 主题与高级视觉系统 */
:root { --ink:#10100e; --panel:rgba(27,27,23,.78); --line:rgba(255,250,235,.13); --paper:#f7f0e1; --muted:#aaa595; --gold:#e4b66a; --gold-hi:#ffe0a5; --mint:#79d6b4; }
html,body { background: #10100e; color:var(--paper); height: 100%; }
body { 
  background-image: 
    radial-gradient(circle at 12% -10%, #403321 0, transparent 50rem), 
    radial-gradient(circle at 100% 20%, #223a32 0, transparent 50rem),
    radial-gradient(circle at 50% 100%, #17241e 0, transparent 45rem);
  background-attachment: fixed;
}
.app { min-height: 100vh; max-width:1580px; padding:24px clamp(16px,3vw,42px) 42px; }
.header { align-items:flex-end; padding:0 4px 24px; margin:0; border-bottom:1px solid var(--line); }
.title { display:grid; grid-template-columns:auto 1fr; column-gap:14px; align-items:center; }
.title:before { content:"P"; display:grid; place-items:center; width:38px; height:38px; border:1px solid var(--gold); color:var(--gold); border-radius:50%; font-family:Georgia,serif; font-size:22px; }
.title h1 { font-family:Georgia,"Times New Roman","Noto Serif SC",serif; font-weight:500; font-size:clamp(25px,3vw,38px); letter-spacing:.04em; line-height:1; }
.title p { grid-column:2; margin:7px 0 0; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.header-buttons { gap:9px; }
.btn { border:1px solid var(--line); border-radius:999px; padding:9px 15px; background:rgba(255,255,255,.045); color:var(--paper); font-size:12px; letter-spacing:.03em; }
.btn:hover { background:rgba(255,255,255,.11); border-color:rgba(255,224,165,.4); }
.btn.primary { background:var(--gold); color:#21190c; border-color:var(--gold); font-weight:800; }
.btn.primary:hover { background:var(--gold-hi); }
.btn.active { background:#30463c; border-color:#79d6b4; }
.main-card { padding:0; border:0; border-radius:0; background:transparent; }
.status-bar { order:1; margin:14px 0 0; padding:0; border:0; background:transparent; color:var(--muted); }
.status-indicator { letter-spacing:.02em; }.status-dot.ready { background:var(--mint); box-shadow:0 0 12px rgba(121,214,180,.6); }
.controls-row { order:2; margin:22px 0 18px; padding:12px; justify-content:space-between; gap:12px; background:var(--panel); border:1px solid var(--line); border-radius:14px; box-shadow:0 15px 40px rgba(0,0,0,.16); }
.control-group { gap:9px; background:rgba(0,0,0,.16); border-color:transparent; border-radius:9px; color:var(--muted); }
.control-group input[type="range"] { accent-color:var(--gold); }.control-group input[type="number"] { background:transparent;border:0;color:var(--paper);outline:0; }
.score-card { margin:0 0 18px; padding:20px; border:1px solid var(--line); border-radius:18px; background:linear-gradient(125deg,rgba(41,38,30,.8),rgba(21,23,20,.75)); box-shadow:0 20px 50px rgba(0,0,0,.2); }
.score-header { align-items:flex-start; margin-bottom:12px; }.score-header > div:first-child:before { content:"NOW PLAYING"; display:block; margin-bottom:5px; color:var(--gold); font-size:10px; letter-spacing:.18em; font-weight:800; }
#songTitle { font-family:Georgia,"Noto Serif SC",serif; font-size:22px !important; font-weight:500; } #songBpm { color:var(--muted)!important; }
.current-target { gap:9px; min-width:172px; justify-content:center; padding:10px 14px; background:rgba(228,182,106,.08); border-color:rgba(228,182,106,.42); border-radius:10px; }.current-target .tag { color:var(--muted); }.current-target .val { color:var(--gold-hi); font-family:ui-monospace,monospace; }
.note-track-wrapper { padding:15px 0 8px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); }
.note-track { gap:7px; }.step-item { min-width:62px; height:55px; border-color:rgba(255,255,255,.09); background:rgba(0,0,0,.19); border-radius:99px; color:#d7d1c3; }.step-item.current { background:var(--gold); border-color:var(--gold-hi); color:#221a0c; box-shadow:0 0 0 4px rgba(228,182,106,.12),0 8px 22px rgba(0,0,0,.3); }.step-item.done { background:rgba(0,0,0,.1); color:#6e6b62; }.progress { height:3px; background:rgba(255,255,255,.09); }.progress-bar { background:linear-gradient(90deg,var(--gold),var(--mint)); }
.sheet-container { display:none; }
.piano-wrapper { padding:12px 8px 16px; border:1px solid var(--line); border-radius:18px; background:linear-gradient(160deg,#161712,#0a0b09); box-shadow:0 24px 60px rgba(0,0,0,.32); }.piano-wood { height:9px; background:linear-gradient(90deg,#2c1a10,#8d5a2f,#2c1a10); }
.falling-wrapper { height:190px; background:linear-gradient(to bottom,rgba(228,182,106,.06),transparent 62%,rgba(121,214,180,.08)); border-bottom-color:var(--gold); }.falling-block.white-note { background:linear-gradient(180deg,#f4c875,#c88c3d); }.falling-block.black-note { background:linear-gradient(180deg,#8ae0c0,#3c9a78); }
.key.white.guide { background:linear-gradient(to bottom,#fff9e6,#f4ddb1 70%,#d69a45); box-shadow:inset 0 0 0 3px var(--gold),0 0 12px rgba(228,182,106,.4); }.key.black.guide { box-shadow:0 0 0 3px #83dbba,0 5px 12px rgba(121,214,180,.6); }.key.white.active { background:linear-gradient(to bottom,#f9dc9e,#e8b762 70%,#b97828); }.key.black.active { background:linear-gradient(to right,#62b99a,#173a30,#438b72); border-color:#9be4cb; }
.pedal-box { justify-content:flex-start; margin:14px 0 0; }.pedal-btn { padding:9px 17px; border-radius:999px; background:rgba(255,255,255,.05); border-color:var(--line); color:var(--muted); }.pedal-btn.active { background:linear-gradient(#3e6c59,#203f33); border-color:var(--mint); }
.custom-panel { margin-top:28px; padding:18px; background:rgba(21,22,18,.55); border:1px solid var(--line); border-radius:14px; }.custom-panel h3 { font-family:Georgia,"Noto Serif SC",serif; font-weight:500; font-size:17px; }.custom-panel h3:before { content:"COMPOSE  "; font-family:inherit; font-size:10px; letter-spacing:.16em; color:var(--gold); vertical-align:middle; }.custom-panel p { max-width:900px; color:var(--muted); }.custom-panel code { color:var(--gold-hi); background:rgba(228,182,106,.1); }.custom-textarea { border-color:var(--line); background:#0d0e0b; color:#f1eadc; }.custom-textarea:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(228,182,106,.1); }
@media (max-width:720px) { .app { padding:16px 12px 28px; }.header { align-items:flex-start; flex-direction:column; padding-bottom:17px; }.title h1 { font-size:27px; }.header-buttons { width:100%; }.header-buttons .btn { flex:1; }.controls-row { align-items:stretch; }.controls-row > div { width:100%; justify-content:space-between; }.control-group { padding:6px; }.control-group input[type="range"] { width:72px; }.score-card { padding:15px; }.score-header { gap:14px; }.current-target { width:100%; }.falling-wrapper { height:150px; }.piano-wrapper { border-radius:12px; }.custom-panel { margin-top:20px; } }

.piano-wrapper { width:100%; overflow:hidden; }
.piano, .piano-wood, .falling-wrapper { width:100%; }
.piano { min-width:0; }
.white-keys { width:100%; }

.control-drawer, .custom-drawer { margin:0 0 18px; }
.control-drawer > summary, .custom-drawer > summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 15px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.045); color:var(--paper); font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.control-drawer > summary::-webkit-details-marker, .custom-drawer > summary::-webkit-details-marker { display:none; }
.control-drawer > summary:after, .custom-drawer > summary:after { content:"＋"; color:var(--gold); font-size:17px; font-weight:400; }
.control-drawer[open] > summary, .custom-drawer[open] > summary { border-color:rgba(228,182,106,.35); border-radius:12px 12px 0 0; }
.control-drawer[open] > summary:after, .custom-drawer[open] > summary:after { content:"－"; }
.control-drawer > summary span, .custom-drawer > summary span { margin-left:auto; color:var(--muted); font-size:10px; font-weight:500; letter-spacing:.03em; text-transform:none; }
.control-drawer .controls-row { margin:0; border-top:0; border-radius:0 0 12px 12px; box-shadow:none; }
.custom-drawer { margin-top:26px; }
.custom-drawer .custom-panel { margin:0; border-top:0; border-radius:0 0 14px 14px; }
.custom-drawer[open] > summary { margin-bottom:0; }
@media (max-width:720px) { .control-drawer > summary span, .custom-drawer > summary span { display:none; } .piano { height:220px; } }

.piano-wrapper { position:relative; height:454px; padding:0 8px 14px; overflow:hidden; cursor:grab; }
.piano-wrapper.dragging { cursor:grabbing; }
.piano-stage { position:absolute; top:0; left:0; width:2184px; will-change:transform; }
.falling-wrapper { position:relative; width:2184px; height:170px; margin:0 0 2px; }
.piano-wood { position:relative; width:2184px; }
.piano { position:relative; width:2184px; height:260px; }
.piano .key.white { flex:0 0 42px; }
.piano .key.black { width:26px; }
@media (max-width:720px) { .piano-wrapper { height:414px; }.piano { height:220px; }.piano .key.white { flex-basis:42px; } }

.app { padding-bottom:500px; }
.main-card { max-width:1120px; margin:0 auto; }
.piano-wrapper { position:fixed; left:0; bottom:0; z-index:30; width:100%; border-radius:18px 18px 0 0; border-bottom:0; box-shadow:0 -18px 48px rgba(0,0,0,.45); }
.piano-wrapper .pedal-box { position:absolute; top:12px; right:18px; z-index:4; margin:0; }
.piano-wrapper .pedal-btn { background:rgba(12,14,11,.82); backdrop-filter:blur(10px); }
@media (max-width:720px) { .app { padding-bottom:452px; }.piano-wrapper { border-radius:13px 13px 0 0; }.piano-wrapper .pedal-box { top:9px; right:10px; }.piano-wrapper .pedal-btn { padding:7px 11px; font-size:11px; } }

.main-card { max-width:1120px; margin:22px auto 0; padding:0; overflow:hidden; border:1px solid var(--line); border-radius:18px; background:linear-gradient(135deg,rgba(37,35,28,.82),rgba(20,22,19,.85)); box-shadow:0 20px 50px rgba(0,0,0,.18); }
.status-bar { margin:0; padding:14px 18px; border-bottom:1px solid var(--line); border-radius:0; }
.control-drawer, .custom-drawer { margin:0; border-bottom:1px solid var(--line); }
.control-drawer > summary, .custom-drawer > summary { padding:14px 18px; border:0; border-radius:0; background:transparent; }
.control-drawer[open] > summary, .custom-drawer[open] > summary { border:0; border-radius:0; background:rgba(255,255,255,.025); }
.control-drawer .controls-row { padding:14px 18px; background:rgba(0,0,0,.1); border:0; border-radius:0; }
.score-card { margin:0; padding:20px 18px; border:0; border-radius:0; background:transparent; box-shadow:none; }
.score-header > div:first-child:before { display:none; }
.custom-drawer { margin-top:0; }
.custom-drawer .custom-panel { padding:18px; background:rgba(0,0,0,.1); border:0; border-radius:0; }
.piano-wrapper { padding:0; background:transparent; border:0; border-radius:0; box-shadow:none; }
@media (max-width:720px) { .main-card { margin-top:14px; border-radius:13px; }.status-bar { padding:12px 14px; }.score-card { padding:16px 14px; }.control-drawer > summary, .custom-drawer > summary { padding:13px 14px; }.control-drawer .controls-row, .custom-drawer .custom-panel { padding:14px; }.piano-wrapper { border-radius:0; } }

:root { --piano-dock-height:432px; }
.app { max-width:1580px; padding-bottom:calc(var(--piano-dock-height) + 150px); }
.workspace-drawer { display:block; position:relative; max-width:1120px; margin:20px auto 0; }
.workspace-drawer > summary { list-style:none; position:absolute; top:12px; left:12px; z-index:3; display:flex; align-items:center; height:34px; padding:0 12px; border:1px solid var(--line); border-radius:999px; background:rgba(14,15,12,.72); color:transparent; cursor:pointer; backdrop-filter:blur(10px); }
.workspace-drawer > summary::-webkit-details-marker { display:none; }
.workspace-drawer > summary::after { content:"打开演奏面板"; color:var(--gold-hi); font-size:11px; font-weight:800; letter-spacing:.06em; white-space:nowrap; }
.workspace-drawer[open] > summary::after { content:"收起面板"; }
.workspace-drawer > .header { margin:0; min-height:78px; padding:18px 18px 18px 142px; border:1px solid var(--line); border-bottom:0; border-radius:18px 18px 0 0; background:linear-gradient(135deg,rgba(37,35,28,.9),rgba(20,22,19,.94)); }
.workspace-drawer .main-card { max-width:none; margin:0; border-top:0; border-radius:0 0 18px 18px; box-shadow:0 20px 50px rgba(0,0,0,.18); }
.workspace-drawer .status-bar { padding:14px 18px; }
.workspace-drawer .controls-row { margin:0; padding:14px 18px; border:0; border-bottom:1px solid var(--line); border-radius:0; background:rgba(0,0,0,.1); box-shadow:none; }
.workspace-drawer .panel-pedal { justify-content:flex-start; margin:0; padding:12px 18px; border-bottom:1px solid var(--line); }
.workspace-drawer .custom-panel { margin:0; padding:18px; border:0; border-radius:0; background:transparent; }

.score-card { position:fixed; left:50%; bottom:var(--piano-dock-height); z-index:25; width:min(1120px,calc(100% - 32px)); margin:0; padding:8px 12px 10px; transform:translateX(-50%); border:0; border-radius:0; background:transparent; box-shadow:none; pointer-events:none; }
.score-card .score-header, .score-card .note-track-wrapper { pointer-events:auto; }
.score-card .score-header { margin:0 0 2px; padding:0 8px; }
.score-card .note-track-wrapper { margin:0; padding:3px 0 7px; background:transparent; }
.score-card .progress { margin:0 8px; }
.score-card .current-target { background:rgba(228,182,106,.06); }
.score-card .step-item { background:rgba(25,24,20,.62); backdrop-filter:blur(6px); }
.score-card .step-item.current { background:var(--gold); }

.piano-wrapper { height:var(--piano-dock-height); padding:0; background:transparent; border:0; border-radius:0; box-shadow:none; }
.piano-stage { height:var(--piano-dock-height); }
.falling-wrapper { background:transparent; border-bottom:0; }
.piano-wood { display:none; }
@media (max-width:720px) { :root { --piano-dock-height:392px; }.app { padding:14px 12px calc(var(--piano-dock-height) + 132px); }.workspace-drawer { margin-top:0; }.workspace-drawer > .header { min-height:76px; padding:15px 14px 15px 122px; border-radius:13px 13px 0 0; }.workspace-drawer .main-card { border-radius:0 0 13px 13px; }.workspace-drawer .status-bar, .workspace-drawer .controls-row, .workspace-drawer .panel-pedal, .workspace-drawer .custom-panel { padding-left:14px; padding-right:14px; }.score-card { width:calc(100% - 16px); padding:6px 0 8px; }.score-card .score-header { padding:0 4px; }.score-card .progress { margin:0 4px; } }

.workspace-drawer { position:fixed; top:6px; left:4px; bottom:calc(var(--piano-dock-height) + 6px); width:min(568px,calc(100vw - 24px)); height:auto; margin:0; z-index:40; }
.workspace-drawer > summary { position:absolute; top:14px; left:12px; z-index:5; width:48px; height:48px; padding:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; border:1px solid rgba(228,182,106,.42); border-radius:12px; background:rgba(18,18,14,.88); color:transparent; box-shadow:0 10px 24px rgba(0,0,0,.28); backdrop-filter:blur(14px); }
.workspace-drawer > summary::after { content:none; }
.workspace-drawer > summary span { width:19px; height:2px; border-radius:99px; background:var(--gold-hi); }
.workspace-drawer > .header { height:88px; min-height:0; margin:0; padding:17px 18px 16px 78px; border:1px solid rgba(228,182,106,.28); border-bottom:1px solid var(--line); border-radius:18px 18px 0 0; background:linear-gradient(135deg,rgba(45,38,25,.96),rgba(19,23,19,.96)); }
.workspace-drawer > .header .title h1 { font-size:24px; }.workspace-drawer > .header .title:before { width:32px; height:32px; font-size:18px; }.workspace-drawer > .header .title p { font-size:9px; letter-spacing:.09em; }
.workspace-drawer > .header .header-buttons { gap:6px; }.workspace-drawer > .header .btn { padding:8px 10px; font-size:11px; }
.workspace-drawer .main-card { height:calc(100% - 88px); display:flex; flex-direction:column; margin:0; overflow-y:auto; overscroll-behavior:contain; border:1px solid rgba(228,182,106,.28); border-top:0; border-radius:0 0 18px 18px; background:rgba(18,20,17,.96); }
.workspace-drawer .status-bar { flex:0 0 auto; padding:11px 16px; font-size:11px; }.workspace-drawer .status-bar > div:last-child { display:none; }
.workspace-drawer .controls-row { display:grid; grid-template-columns:1fr; gap:11px; padding:15px 16px; background:transparent; }
.control-section-label { color:var(--gold); font-size:10px; font-weight:800; letter-spacing:.16em; }
.settings-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }.settings-grid .control-group { min-height:42px; justify-content:space-between; padding:7px 8px; }.settings-grid .control-group:last-child { grid-column:span 2; }.settings-grid .control-group input[type="range"] { width:92px; }
.play-actions { display:grid; grid-template-columns:1fr 1fr; gap:7px; }.play-actions .btn { width:100%; padding:9px 8px; border-radius:99px; }
.workspace-drawer .panel-pedal { padding:0 16px 15px; border:0; }.workspace-drawer .panel-pedal .pedal-btn { width:100%; padding:10px 14px; border-radius:99px; text-align:left; }
.workspace-drawer .custom-panel { margin-top:auto; padding:16px; border-top:1px solid var(--line); background:rgba(0,0,0,.12); }.custom-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; }.custom-panel h3 { margin:0; font-size:15px; }.custom-panel h3:before { content:"SCORE  "; }.template-list { display:flex; gap:5px; }.template-list .btn { padding:6px 8px; font-size:10px; }.custom-panel p { margin:0 0 8px; font-size:10px; line-height:1.45; }.custom-textarea { min-height:92px; }.custom-actions { display:flex; gap:7px; margin-top:8px; }.custom-actions .btn { padding:8px 10px; }
.workspace-drawer:not([open]) { height:62px; bottom:auto; }.workspace-drawer:not([open]) > summary { position:relative; top:14px; left:12px; }

@media (max-width:720px) { .workspace-drawer { top:5px; left:5px; bottom:calc(var(--piano-dock-height) + 5px); width:calc(100vw - 10px); }.workspace-drawer > .header { height:auto; min-height:78px; padding:14px 12px 14px 70px; }.workspace-drawer > .header .title h1 { font-size:20px; }.workspace-drawer > .header .title p { display:none; }.workspace-drawer > .header .header-buttons .btn { padding:7px 8px; }.workspace-drawer .main-card { height:calc(100% - 78px); }.settings-grid { grid-template-columns:1fr; }.settings-grid .control-group:last-child { grid-column:auto; }.settings-grid .control-group input[type="range"] { width:100px; }.custom-panel p { display:none; }.template-list { flex-wrap:wrap; }.workspace-drawer:not([open]) { height:62px; } }

.score-card { bottom:calc(var(--piano-dock-height) + 170px); width:min(980px,calc(100% - 32px)); padding:0 14px 8px; }
.score-card .score-header { align-items:center; padding:0 4px 7px; }.score-card #songTitle { font-size:14px !important; letter-spacing:.04em; }.score-card #songBpm { font-size:10px !important; }.score-card .current-target { min-width:145px; padding:7px 10px; border-radius:8px; }.score-card .current-target .val { font-size:13px; }
.score-card .note-track-wrapper { padding:0 0 4px; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%); }
.score-card .note-track { gap:8px; }.score-card .step-item { position:relative; min-width:68px; height:62px; padding:7px 6px 6px; border:1px solid rgba(255,255,255,.1); border-radius:12px; background:linear-gradient(145deg,rgba(37,36,29,.92),rgba(17,18,15,.85)); box-shadow:inset 0 1px rgba(255,255,255,.06),0 7px 16px rgba(0,0,0,.23); color:#e7dfcf; }
.score-card .step-item:before { content:""; position:absolute; top:0; left:12px; right:12px; height:2px; border-radius:99px; background:rgba(228,182,106,.4); }.score-card .step-item .chord-badge { order:-1; margin:0 0 2px; padding:1px 4px; background:transparent; color:#a7a092; font-size:8px; }.score-card .step-item .dur { margin-top:3px; color:#969081; }
.score-card .step-item.current { transform:translateY(-3px) scale(1.04); background:linear-gradient(145deg,#f4c875,#bd8034); border-color:#ffe5b0; color:#251a0b; box-shadow:0 0 0 3px rgba(228,182,106,.14),0 10px 24px rgba(0,0,0,.35); }.score-card .step-item.current:before { background:#fff2cd; }.score-card .step-item.current .chord-badge, .score-card .step-item.current .dur { color:#5f421b; }.score-card .step-item.done { opacity:.42; }
.score-card .progress { display:none; }
@media (max-width:720px) { .score-card { bottom:calc(var(--piano-dock-height) + 170px); width:calc(100% - 12px); padding:0 5px 5px; }.score-card .score-header { padding:0 4px 5px; }.score-card #songTitle { font-size:12px !important; }.score-card .current-target { min-width:116px; padding:5px 7px; }.score-card .note-track { gap:6px; }.score-card .step-item { min-width:58px; height:54px; font-size:10px; } }

:root { --keyboard-height:260px; --falling-stage-top:98px; --piano-dock-height:var(--keyboard-height); }
.workspace-drawer { bottom:calc(var(--keyboard-height) + 6px); }
.score-card { top:10px; bottom:auto; z-index:35; }

.piano-wrapper, .piano-stage, .falling-wrapper, .falling-track, .piano { 
  background: transparent !important; 
  background-color: transparent !important; 
  background-image: none !important; 
  box-shadow: none !important; 
  border: none !important; 
}

.piano-wrapper {
  position: fixed !important;
  top: var(--auto-stage-top, 110px) !important; 
  bottom: 0 !important;
  height: auto !important;
}

.piano-stage { height: 100% !important; }

.falling-wrapper {
  position:absolute !important; top:0 !important; bottom:var(--keyboard-height, 260px) !important;
  left:0; width:2184px; height:auto !important; margin:0 !important; 
  overflow:hidden;
  contain: strict;
  /* 移除 mask-image 渐变遮罩，可显著提升瀑布流动画帧率 */
}

.piano {
  position: absolute !important;
  bottom: 0 !important;
  height: var(--keyboard-height, 260px) !important;
}