:root{
    --bg:#12141C; --surface:#1A1E28; --surface2:#20242F; --line:#2A2F3C;
    --ivory:#F2F0EA; --muted:#8B90A0; --faint:#5A6070;
    --gold:#D9B366; --gold-hi:#EED9A8; --gold-dk:#A87F35;
    --red:#E4574E; --red-hi:#F58C85;
    --serif:'Didot','Bodoni MT','Playfair Display',Georgia,'Songti SC',serif;
    --sans:-apple-system,BlinkMacSystemFont,'PingFang SC','Helvetica Neue',sans-serif;
  }
  *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  html,body{background:var(--bg);color:var(--ivory);font-family:var(--sans);}
  body{min-height:100vh;display:flex;justify-content:center}
  .app{width:100%;max-width:480px;padding:max(14px,env(safe-area-inset-top)) 18px 30px;display:flex;flex-direction:column;gap:12px}

  header{display:flex;align-items:baseline;justify-content:space-between;padding:6px 2px 0}
  .brand{font-family:var(--serif);font-size:26px;letter-spacing:.06em}
  .brand em{font-style:normal;color:var(--gold)}
  .brand-sub{font-size:9.5px;letter-spacing:.34em;color:var(--muted);text-transform:uppercase;margin-top:2px}
  .demo-badge{font-size:10px;color:#7FB88A;border:1px solid #3E5A46;border-radius:99px;padding:3px 9px;letter-spacing:.12em}
  .hdr-right{display:flex;gap:8px;align-items:center}
  .lang-btn{border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:99px;
    padding:3px 11px;font-size:11px;letter-spacing:.08em;min-height:24px}
  .lang-btn:active{color:var(--gold);border-color:var(--gold-dk)}

  .seg{display:flex;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:3px;}
  .seg button{flex:1;border:0;background:transparent;color:var(--muted);font-family:var(--sans);font-size:14.5px;padding:9px 0;border-radius:9px;transition:all .25s}
  .seg button.on{background:var(--surface2);color:var(--ivory);box-shadow:0 1px 6px rgba(0,0,0,.4);font-weight:600}
  .seg button.on .en{color:var(--gold)}
  .seg .en{display:block;font-size:8.5px;letter-spacing:.28em;color:var(--faint);margin-top:1px;font-weight:400}

  /* 机型配置栏 */
  .rig{display:flex;gap:6px;align-items:stretch}
  .rig .opt{flex:1;display:flex;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:2.5px;position:relative}
  .rig .opt button{flex:1;border:0;background:transparent;color:var(--faint);font-size:11px;padding:6px 0 5px;border-radius:7.5px;letter-spacing:.03em}
  .rig .opt button.on{background:var(--surface2);color:var(--gold-hi);font-weight:600;box-shadow:0 1px 4px rgba(0,0,0,.35)}
  .rig .cap{position:absolute;top:-6.5px;left:9px;font-size:8px;letter-spacing:.2em;color:var(--faint);background:var(--bg);padding:0 4px}

  .stage{background:linear-gradient(175deg,#1D2230 0%,#141822 100%);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.35)}
  .staff-wrap{display:flex;align-items:center;justify-content:center;padding:10px 8px 0}
  .staff-wrap svg{width:230px;height:auto}
  .sel-name{text-align:center;font-family:var(--serif);font-size:29px;letter-spacing:.04em;padding:0 0 2px;color:var(--ivory)}
  .sel-name .arrow{color:var(--gold);font-size:22px;padding:0 4px}
  .sel-name sub{font-size:14px;color:var(--muted)}
  .sel-cn{text-align:center;font-size:11.5px;color:var(--muted);letter-spacing:.18em;padding-bottom:4px}

  .flute-wrap{padding:2px 2px 0;overflow:hidden;
    background:radial-gradient(62% 85% at 50% 42%,rgba(176,196,230,.05),transparent 72%)}
  .flute-wrap svg{width:100%;height:auto;display:block}
  .keylab{font-family:var(--sans);font-size:9.5px;fill:#6A7080;text-anchor:middle;letter-spacing:.05em}
  .grouplab{font-family:var(--sans);font-size:9.5px;fill:#7B8290;text-anchor:middle;letter-spacing:.35em}
  /* 按键金属永远保持真实银色；状态用覆盖在键上的发光色层表达（竞品同款架构，底图可换真照片） */
  .key .touch{transition:transform .12s}
  .key.pressed .touch,.key.ringed .touch{transform:translateY(1.4px)}
  .ov{opacity:0;transition:opacity .15s;pointer-events:none}
  .ov .core{fill:rgba(233,196,124,.52);stroke:#F2D9A0;stroke-width:1.1}
  .ov .pip{fill:#FFEFC9;opacity:.9}
  .key.pressed .ov,.key.ringed .ov,.key.half .ov{opacity:1}
  .key.pressed .ov{filter:drop-shadow(0 0 6px rgba(233,196,124,.85))}
  .key.ringed .ov .core{fill:none;stroke-width:4.5;stroke:rgba(233,196,124,.88)}
  .key.ringed .ov .pip{opacity:0}
  .key.ringed .ov{filter:drop-shadow(0 0 6px rgba(233,196,124,.6))}
  .key.half .ov{opacity:.55}
  .key.trilling .ov{opacity:1;animation:ovTrill .3s infinite ease-in-out;
      filter:drop-shadow(0 0 7px rgba(240,110,100,.9))}
  .key.trilling .ov .core{fill:rgba(236,105,95,.55);stroke:#F58C85}
  .key.trilling .ov .pip{fill:#FFD9D4}
  .key.trilling.ringed .ov .core{fill:none;stroke:rgba(236,105,95,.9)}
  .key.trilling .touch{animation:keyTrill .15s infinite alternate ease-in-out}
  @keyframes ovTrill{0%,100%{opacity:1}50%{opacity:.4}}
  @keyframes keyTrill{from{transform:translateY(0)}to{transform:translateY(2.5px)}}
  @media (prefers-reduced-motion: reduce){.key.trilling .ov{animation:none}.key.trilling .touch{animation:none;transform:translateY(1.4px)}}

  .legend{display:flex;justify-content:center;gap:15px;padding:3px 0 8px;font-size:10.5px;color:var(--muted);flex-wrap:wrap}
  .dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;vertical-align:-1px}
  .dot.g{background:radial-gradient(circle at 35% 30%,var(--gold-hi),var(--gold-dk))}
  .dot.r{background:radial-gradient(circle at 35% 30%,var(--red-hi),#A9332B)}
  .dot.s{background:radial-gradient(circle at 35% 30%,#DFE4EC,#6E7580)}
  .dot.o{background:radial-gradient(circle at 35% 30%,var(--gold-hi),var(--gold-dk));position:relative}
  .dot.o::after{content:'';position:absolute;inset:2.5px;border-radius:50%;background:#161923}

  .desc{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:13px 16px;display:flex;flex-direction:column;gap:8px}
  .alts{display:flex;gap:6px;flex-wrap:wrap}
  .alts button{border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:99px;padding:4px 11px;font-size:11.5px}
  .alts button.on{border-color:var(--gold-dk);color:var(--gold-hi);background:rgba(217,179,102,.08)}
  .fnote{font-size:11px;color:var(--gold);letter-spacing:.02em}
  .fnote .src{color:var(--faint);font-size:10px;margin-left:6px}
  .formula{font-family:var(--serif);font-size:15px;letter-spacing:.05em;color:var(--gold-hi)}
  .desc-line{font-size:13.5px;line-height:1.65;color:var(--ivory)}
  .desc-line b{color:var(--gold)}
  .desc-line .r{color:var(--red-hi);font-weight:600}
  .more{font-size:10.5px;color:var(--faint);line-height:1.5}
  .srcline{display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--faint)}
  .srcline .check{color:#7FB88A}
  .listen{align-self:flex-start;margin-top:2px;border:1px solid var(--gold-dk);background:transparent;color:var(--gold);border-radius:99px;padding:6px 16px;font-size:12.5px;letter-spacing:.1em}
  .listen:active{background:rgba(217,179,102,.12)}

  .reg{display:flex;gap:8px}
  .reg button{flex:1;border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:11px;padding:8px 0;font-size:12.5px;position:relative}
  .reg button.on{border-color:var(--gold-dk);color:var(--ivory);background:var(--surface2)}
  .reg .range{display:block;font-size:9px;color:var(--faint);margin-top:1px;font-family:var(--serif)}

  .chips{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 10px;scrollbar-width:none}
  .chips::-webkit-scrollbar{display:none}
  .chip{flex:0 0 auto;border:1px solid var(--line);background:var(--surface);color:var(--ivory);border-radius:12px;padding:9px 13px;font-family:var(--serif);font-size:15.5px;letter-spacing:.03em;position:relative}
  .chip sub{font-size:10px;color:var(--muted)}
  .chip .arr{color:var(--faint);font-size:12px;padding:0 2px}
  .chip.on{border-color:var(--gold);color:var(--gold-hi);background:linear-gradient(180deg,#242837,#1C202B);box-shadow:0 0 0 1px rgba(217,179,102,.25),0 4px 14px rgba(0,0,0,.4)}
  .chip .tag{position:absolute;top:-6px;right:-3px;background:#31404F;color:#9FC5E0;font-size:8px;border-radius:99px;padding:1px 6px;letter-spacing:.05em}

  footer{font-size:10px;color:var(--faint);text-align:center;line-height:1.8;padding-top:2px}
  footer b{color:var(--muted);font-weight:500}
  .toast{position:fixed;left:50%;bottom:110px;transform:translateX(-50%) translateY(10px);background:#0C0E14;border:1px solid var(--gold-dk);color:var(--gold-hi);font-size:12.5px;border-radius:99px;padding:9px 20px;opacity:0;transition:all .3s;pointer-events:none;z-index:60;white-space:nowrap}
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

  /* ===== v7 竖版指法图(教材图表方向:笛头朝上) ===== */
  .duo{display:flex;align-items:center;gap:0;padding:6px 4px 0}
  .flute-wrap{flex:0 0 45%;padding:0;overflow:visible}
  .flute-wrap svg{width:100%;height:auto}
  .info-col{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:2px;padding-right:6px}
  .info-col .staff-wrap{padding:0}
  .info-col .staff-wrap svg{width:100%;max-width:225px}
  .sel-name{font-size:23px}
  .kshape{fill:#161B26;stroke:#96A0B2;stroke-width:1.6;transition:fill .15s,stroke .15s}
  .kinner{fill:none;stroke:rgba(150,160,178,.35);stroke-width:.8;pointer-events:none}
  .knum{fill:#96A0B2;font-weight:700;transition:fill .15s}
  .dc{fill:#12151D;stroke:#3E4654;stroke-width:1.2}
  .lkshape{fill:#12151D;stroke:#4A5362;stroke-width:1.2;transition:fill .15s,stroke .15s}
  .key.pressed .kshape{fill:url(#gGold);stroke:#E3C179}
  .key.pressed .knum{fill:#2E2306}
  .key.pressed .lkshape{fill:rgba(217,179,102,.38);stroke:#B8934D}
  .key.trilling .kshape{fill:url(#gRed);stroke:#F58C85}
  .key.trilling .knum{fill:#47100B}
  .key.trilling .lkshape{fill:rgba(228,87,78,.38);stroke:#C4453C}
  .key.ringed .kshape{fill:none;stroke:#E3C179;stroke-width:3}
  .key.half .touch{opacity:.6}

  /* ===== v8 横版置顶·金属键 ===== */
  .flute-wrap{flex:none;padding:6px 6px 0;width:100%}
  .info-col{display:contents}
  .staff-wrap{padding:2px 8px 0}
  .staff-wrap svg{width:210px}
  .sel-name{font-size:24px;padding:0}
  .kshape{fill:url(#gSilver);stroke:#2A2F38}
  .knum{fill:#39404E}
  .dc{fill:url(#gSilver);stroke:#2E333D;opacity:.55}
  .lkshape{fill:url(#gSilver);stroke:#3A4150;opacity:.6}
  .key.pressed .lkshape,.key.trilling .lkshape{opacity:1}

  /* ===== v11 实拍照片模式 ===== */
  .kdot{fill:transparent;stroke:transparent;stroke-width:1.2;transition:fill .15s,stroke .15s;transform-box:fill-box;transform-origin:center}
    .key.pressed .kdot{fill:rgba(226,186,106,.78);stroke:#F4DCA4}
  .key.pressed{filter:drop-shadow(0 0 6px rgba(233,196,124,.85))}
  .key.trilling .kdot{fill:rgba(234,92,82,.82);stroke:#F8A19A;animation:dotPulse .3s infinite alternate ease-in-out}
  .key.trilling{filter:drop-shadow(0 0 7px rgba(234,92,82,.9))}
  @keyframes dotPulse{from{opacity:.5}to{opacity:1}}
  @media (prefers-reduced-motion: reduce){.key.trilling .kdot{animation:none}}

  /* ===== v14 键体着色(multiply 融合,非贴纸) ===== */
  .kdot{fill:transparent;stroke:none !important;mix-blend-mode:multiply;
        transform-box:fill-box;transform-origin:center;transition:fill .15s}
  .key.pressed .kdot{fill:url(#gDotGold)}
  .key.pressed{filter:none}
  .key.trilling .kdot{fill:url(#gDotRed);animation:dotPulse .3s infinite alternate ease-in-out}
  .key.trilling{filter:none}
  @keyframes dotPulse{from{opacity:.4;transform:scale(.93)}to{opacity:1;transform:scale(1.04)}}
  @media (prefers-reduced-motion: reduce){.key.trilling .kdot{animation:none}}

  /* ===== v15 烘焙染色件(无混合模式依赖) ===== */
  .spr{opacity:0;transition:opacity .12s;pointer-events:none}
  .key.pressed .sprG{opacity:1}
  .key.trilling .sprR{opacity:1;animation:sprPulse .3s infinite alternate ease-in-out}
  @keyframes sprPulse{from{opacity:.35}to{opacity:1}}
  @media (prefers-reduced-motion: reduce){.key.trilling .sprR{animation:none}}

  /* ===== v20 矢量终稿:键即色块 ===== */
  .kshape{fill:url(#gSilver);stroke:#2A2F38;stroke-width:1.2;transition:fill .15s,stroke .15s}
  .khole{fill:#14181F;stroke:rgba(255,255,255,.16);stroke-width:1}
  .knum{font-weight:700;fill:#39404E;transition:fill .15s}
  .knum.inhole{fill:#AEB4C0;font-weight:600}
  .key{transform-box:fill-box;transform-origin:center}
  .key.pressed .kshape{fill:url(#gGold);stroke:#8A6B2C}
  .key.pressed .knum{fill:#2E2306}
  .key.pressed .knum.inhole{fill:#F4E3B7}
  .key.pressed{filter:drop-shadow(0 0 6px rgba(217,179,102,.55))}
  .key.trilling .kshape{fill:url(#gRed);stroke:#8F2B24}
  .key.trilling .knum{fill:#47100B}
  .key.trilling .knum.inhole{fill:#FBD6D2}
  .key.trilling{filter:drop-shadow(0 0 7px rgba(228,87,78,.6));animation:vTrill .15s infinite alternate ease-in-out}
  @keyframes vTrill{from{transform:translateY(0)}to{transform:translateY(2.6px)}}
  @media (prefers-reduced-motion: reduce){.key.trilling{animation:none}}