:root {
      --bg: #081120;
      --panel: #0f1a2f;
      --line: rgba(255,255,255,.10);
      --text: #eef4ff;
      --muted: #a8bbdb;
      --good: #33d17a;
      --bad: #ff6b6b;
      --note-r: #ffac2d;
      --note-l: #a45cff;
      --note-b: #39c6a0;
      --white-key: #fbfdff;
      --white-key-text: #0d1a2f;
      --white-key-border: #cfdaea;
      --shadow: 0 10px 30px rgba(0,0,0,.25);
      --radius: 18px;
      --safe-bottom: env(safe-area-inset-bottom, 0px);
      --safe-top: env(safe-area-inset-top, 0px);
      --settings-height: 34vh;
      --top-section-height: 34vh;
      --staff-bg: rgba(7,13,24,.72);
      --staff-line: rgba(220,232,255,.25);
      --stack-gap: 6px;
      --falling-ratio: 0.42;
      --keyboard-ratio: 0.58;
      --left-panel-width: 48%;
      --right-panel-width: 52%;
    }

    * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
    html, body {
      margin: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      font-family: Arial, Helvetica, sans-serif;
      background: linear-gradient(180deg, #06101e 0%, #0a1425 100%);
      color: var(--text);
    }

    .app {
      height: 100dvh;
      display: grid;
      grid-template-rows: var(--top-section-height) 1fr;
    }
    .app.middle-scale-on {
      grid-template-rows: var(--top-section-height) auto 1fr;
    }

    .top {
      padding: calc(6px + var(--safe-top)) 8px 4px;
      overflow: auto;
    }

    .top-inner {
      display: grid;
      grid-template-columns: minmax(0, var(--left-panel-width)) minmax(0, var(--right-panel-width));
      gap: 8px;
      height: 100%;
    }
    .app.x-scale-on .top-inner {
      grid-template-columns: minmax(0, var(--left-panel-width)) auto minmax(0, var(--right-panel-width));
    }

    .panel {
      background: rgba(15, 26, 47, 0.96);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 8px;
      min-height: 0;
    }

    .panel h1 { font-size: clamp(20px, 2.5vw, 28px); margin: 0 0 2px; }
    .panel h2 { font-size: 16px; margin: 0 0 4px; }
    .panel-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }
    .panel-head button {
      width: auto;
      min-width: 112px;
      min-height: 38px;
      padding: 8px 12px;
    }

    .sub {
      font-size: 12px;
      color: var(--muted);
      line-height: 1.4;
      margin-bottom: 4px;
    }

    .form-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }

    .row { margin-bottom: 3px; }
    .measure-range-card {
      margin-top: 8px;
      padding: 10px 12px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,.08);
      background: rgba(255,255,255,.04);
    }
    .measure-range-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 8px;
      font-size: 12px;
      color: var(--muted);
    }
    .measure-range-head strong {
      color: #eef4ff;
      font-size: 13px;
    }
    .measure-range-sliders {
      display: grid;
      gap: 6px;
    }
    label {
      display: block;
      font-size: 12px;
      color: var(--muted);
      margin-bottom: 4px;
    }

    select, button, input[type="range"] {
      width: 100%;
      font: inherit;
    }

    select, button {
      min-height: 36px;
      border-radius: 12px;
      border: 1px solid var(--line);
      background: #0b1528;
      color: var(--text);
      padding: 7px 10px;
    }

    button {
      font-weight: 700;
      border: none;
      background: linear-gradient(180deg, #2e77ff, #1f56c8);
      cursor: pointer;
    }

    button.secondary { background: linear-gradient(180deg, #31405f, #202b40); }
    .button-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
    .button-grid.three { grid-template-columns: 1fr 1fr 1fr; }
    .button-grid.four { grid-template-columns: repeat(4, 1fr); }
    .settings-grid { margin-top: 6px; }

    .status-list { display: grid; gap: 6px; }
    .pill {
      min-height: 34px;
      display: flex;
      align-items: center;
      padding: 6px 9px;
      border-radius: 12px;
      background: rgba(7,13,24,.75);
      border: 1px solid var(--line);
      font-size: 13px;
      line-height: 1.35;
    }
    .pill strong { margin-right: 6px; }
    .pill.good { color: #bcffd8; border-color: rgba(51,209,122,.45); }
    .pill.bad { color: #ffd0d0; border-color: rgba(255,107,107,.45); }
    .pill.info { color: #d6ecff; border-color: rgba(91,188,255,.35); }

    .progress-wrap { margin-top: 2px; }
    .progress {
      height: 12px;
      background: #09111f;
      border-radius: 999px;
      overflow: hidden;
      border: 1px solid var(--line);
    }
    .progress > div {
      height: 100%; width: 0%;
      background: linear-gradient(90deg, #5bbcff, #33d17a);
      transition: width .15s ease;
    }

    .scoreboard {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 6px;
      margin-top: 4px;
    }
    .score-card {
      background: rgba(7,13,24,.72);
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 6px;
      text-align: center;
    }
    .score-card .v { font-size: 20px; font-weight: 700; margin-top: 2px; }
    .score-card .k { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }

    .tag {
      display: inline-block;
      border-radius: 999px;
      padding: 3px 8px;
      font-size: 11px;
      background: rgba(91,188,255,.15);
      border: 1px solid rgba(91,188,255,.22);
      color: #d8eeff;
      margin-left: 6px;
    }

    .staff-shell { display: grid; grid-template-rows: minmax(0, 1fr); gap: 4px; height: 100%; min-height: 0; }
    #staffTopHost {
      height: 100%;
      min-height: 0;
    }
    #staffView {
      overflow: hidden;
    }
    .staff {
      position: relative;
      height: 100%;
      min-height: 0;
      background: var(--staff-bg);
      border: 1px solid var(--line);
      border-radius: 14px;
      overflow: auto hidden;
      padding: 6px 10px;
    }
    .staff.lyrics-mode {
      overflow: hidden;
      padding: 0;
      background:
        radial-gradient(circle at top right, rgba(91,188,255,.20), transparent 38%),
        linear-gradient(180deg, rgba(7,13,24,.90), rgba(10,18,34,.98));
    }
    .staff-scroll { position: relative; min-width: 900px; height: 100%; }
    .staff-scroll.lyrics-scroll {
      min-width: 0;
      width: 100%;
      padding: 18px;
    }
    .lyrics-panel {
      height: 100%;
      width: 100%;
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      gap: 14px;
      max-width: 900px;
      margin: 0 auto;
      text-align: center;
    }
    .lyrics-label {
      font-size: 12px;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: rgba(220,232,255,.72);
    }
    .lyrics-viewport {
      position: relative;
      min-height: 0;
      height: 100%;
      overflow-y: auto;
      overflow-x: hidden;
      padding: 16vh 0;
      scrollbar-width: none;
      -ms-overflow-style: none;
      mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
    }
    .lyrics-viewport::-webkit-scrollbar {
      display: none;
      width: 0;
      height: 0;
    }
    .lyrics-track {
      display: grid;
      gap: 18px;
      align-content: start;
      width: 100%;
    }
    .lyrics-empty {
      display: grid;
      place-items: center;
      min-height: 100%;
      font-size: clamp(22px, 3vw, 40px);
      font-weight: 700;
      color: #f8fbff;
      text-shadow: 0 8px 24px rgba(0,0,0,.34);
    }
    .lyrics-line {
      --lyrics-fit-scale: 1;
      font-size: clamp(18px, 2.2vw, 30px);
      line-height: 1.15;
      font-weight: 600;
      color: rgba(220,232,255,.42);
      white-space: nowrap;
      width: 100%;
      overflow: visible;
      transform: scale(calc(var(--lyrics-fit-scale) * .92));
      transform-origin: center center;
      transition: color .22s ease, transform .22s ease, opacity .22s ease;
      opacity: .5;
      padding: 2px 0;
    }
    .lyrics-line.active {
      font-size: clamp(28px, 4.6vw, 62px);
      font-weight: 800;
      color: #f8fbff;
      opacity: 1;
      transform: scale(var(--lyrics-fit-scale));
      text-shadow: 0 10px 28px rgba(0,0,0,.34);
    }
    .staff-track { position: absolute; left: 0; right: 0; }
    .staff-track.treble { top: 16px; height: 118px; }
    .staff-track.bass { top: 150px; height: 118px; }
    .staff-line { position: absolute; left: 0; right: 0; height: 1px; background: var(--staff-line); }
    .staff-label { position: absolute; left: 4px; font-size: 12px; color: var(--muted); top: -2px; }
    .clef-symbol {
      position: absolute;
      color: rgba(238,244,255,.92);
      line-height: 1;
      user-select: none;
      pointer-events: none;
      text-shadow: 0 4px 14px rgba(0,0,0,.18);
      z-index: 1;
    }
    .clef-symbol.treble { font-size: 58px; }
    .clef-symbol.bass { font-size: 46px; }
    .bar-line { position: absolute; top: 8px; width: 2px; height: 248px; background: rgba(255,255,255,.18); }

    .note-token {
      position: absolute;
      width: 24px;
      height: 16px;
      border-radius: 50%;
      transform: translate(-50%, -50%) rotate(-18deg);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      touch-action: manipulation;
      user-select: none;
      box-shadow: 0 4px 12px rgba(0,0,0,.25);
      border: 1px solid rgba(255,255,255,.16);
    }
    .note-token.right { background: var(--note-r); color: #182133; }
    .note-token.left { background: var(--note-l); color: #fff; }
    .note-token.both { background: var(--note-b); color: #06261c; }
    .note-token.current { box-shadow: 0 0 0 4px rgba(91,188,255,.18), 0 0 18px rgba(91,188,255,.42); }
    .note-token.upcoming { box-shadow: 0 0 0 2px rgba(255,255,255,.08); opacity: .88; }
    .note-token.done { opacity: .45; }
    .note-token.hit { background: linear-gradient(180deg, #72f1ae, #33d17a); color: #062514; }
    .note-token.missed { background: linear-gradient(180deg, #ffb0b0, #ff6b6b); color: #fff; opacity: .92; }
    .stem { position: absolute; width: 2px; background: currentColor; border-radius: 2px; opacity: .95; }
    .ledger { position: absolute; width: 22px; height: 2px; background: rgba(255,255,255,.28); transform: translateX(-50%); }
    .playhead {
      position: absolute;
      top: 8px;
      width: 3px;
      height: 248px;
      border-radius: 999px;
      background: linear-gradient(180deg, rgba(91,188,255,.16), rgba(91,188,255,.95), rgba(51,209,122,.72));
      box-shadow: 0 0 16px rgba(91,188,255,.4);
      pointer-events: none;
      opacity: 0;
      transition: opacity .15s ease;
      z-index: 5;
    }
    .playhead.visible { opacity: 1; }
    .falling-roll-shell {
      position: relative;
      flex: 0 0 auto;
      height: calc((100% - var(--stack-gap)) * var(--falling-ratio));
    }
    .falling-roll-shell[hidden] { display: none; }
    .falling-roll {
      position: relative;
      height: 100%;
      min-height: 0;
      width: 100%;
      overflow: hidden;
      border-radius: 16px;
      border: 1px solid var(--line);
      background:
        linear-gradient(180deg, rgba(91,188,255,.08), rgba(7,13,24,.2) 22%, rgba(7,13,24,.82)),
        repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0, rgba(255,255,255,.03) 1px, transparent 1px, transparent 40px);
    }
    .falling-lane {
      position: absolute;
      inset: 0;
    }
    .falling-hitline {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 8px;
      border-radius: 0;
      background: linear-gradient(90deg, rgba(91,188,255,.28), rgba(91,188,255,.98), rgba(51,209,122,.72));
      box-shadow: 0 0 20px rgba(91,188,255,.42);
      z-index: 3;
    }
    .falling-note {
      position: absolute;
      left: 0;
      top: 0;
      width: 34px;
      height: 34px;
      border-radius: 8px 8px 2px 2px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 800;
      border: 1px solid rgba(255,255,255,.22);
      box-shadow: 0 10px 18px rgba(0,0,0,.26);
      transition: transform 70ms linear, box-shadow 120ms ease;
      will-change: transform;
      backface-visibility: hidden;
      z-index: 2;
    }
    .falling-note.right { background: var(--note-r); color: #182133; }
    .falling-note.left { background: var(--note-l); color: #fff; }
    .falling-note.both { background: var(--note-b); color: #06261c; }
    .falling-note.current { box-shadow: 0 0 0 4px rgba(91,188,255,.20), 0 0 18px rgba(91,188,255,.46); }
    .progress-wide { width: 100%; margin-top: 2px; }

    .x-scale-panel,
    .center-y-scale-panel {
      border-radius: 14px;
      border: 1px solid var(--line);
      background: rgba(7,13,24,.84);
    }
    .x-scale-panel[hidden],
    .center-y-scale-panel[hidden] { display: none; }
    .x-scale-panel {
      width: 44px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 10px 6px;
      min-height: 0;
    }
    .x-scale-title {
      font-size: 11px;
      color: var(--muted);
      text-align: center;
      writing-mode: vertical-rl;
      transform: rotate(180deg);
      letter-spacing: .04em;
      text-transform: uppercase;
    }
    #xScaleRange {
      width: 28px;
      height: 120px;
      margin: 0;
      writing-mode: bt-lr;
      -webkit-appearance: slider-vertical;
      appearance: slider-vertical;
    }
    .x-scale-value,
    .center-y-scale-value {
      font-size: 11px;
      color: #dce8ff;
      font-weight: 700;
      text-align: center;
      min-height: 16px;
    }
    .center-y-scale-panel {
      margin: 0 8px 4px;
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 12px;
      padding: 8px 12px;
    }
    .center-y-scale-title {
      font-size: 11px;
      color: var(--muted);
      letter-spacing: .04em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .bottom {
      padding: 4px 8px calc(8px + var(--safe-bottom));
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      min-height: 0;
    }
    .keyboard-shell {
      background: rgba(15, 26, 47, 0.98);
      border: 1px solid var(--line);
      border-radius: 20px;
      box-shadow: var(--shadow);
      padding: 8px 8px 8px;
      height: 100%;
      display: grid;
      grid-template-rows: 1fr;
      gap: 4px;
    }

    .keyboard-stage {
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: 8px;
      min-height: 0;
      height: 100%;
      align-items: stretch;
    }
    .keyboard-main {
      min-width: 0;
      min-height: 0;
      height: 100%;
    }
    .y-scale-panel {
      width: 58px;
      border-radius: 14px;
      border: 1px solid var(--line);
      background: rgba(7,13,24,.84);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 10px 6px;
    }
    .y-scale-panel[hidden] { display: none; }
    .timing-panel {
      width: 58px;
      border-radius: 14px;
      border: 1px solid var(--line);
      background: rgba(7,13,24,.84);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 10px 6px;
    }
    .timing-panel[hidden] { display: none; }
    .y-scale-title {
      font-size: 11px;
      color: var(--muted);
      text-align: center;
      writing-mode: vertical-rl;
      transform: rotate(180deg);
      letter-spacing: .04em;
      text-transform: uppercase;
    }
    .timing-title {
      font-size: 11px;
      color: var(--muted);
      text-align: center;
      writing-mode: vertical-rl;
      letter-spacing: .04em;
      text-transform: uppercase;
    }
    #yScaleRange {
      width: 28px;
      height: 140px;
      margin: 0;
      writing-mode: bt-lr;
      -webkit-appearance: slider-vertical;
      appearance: slider-vertical;
    }
    #timingRange {
      width: 28px;
      height: 140px;
      margin: 0;
      writing-mode: bt-lr;
      -webkit-appearance: slider-vertical;
      appearance: slider-vertical;
    }
    .y-scale-value {
      font-size: 11px;
      color: #dce8ff;
      font-weight: 700;
      text-align: center;
      min-height: 16px;
    }
    .timing-value {
      font-size: 11px;
      color: #dce8ff;
      font-weight: 700;
      text-align: center;
      min-height: 16px;
    }
    .keyboard-wrap {
      overflow-x: auto; overflow-y: hidden;
      border-radius: 14px;
      background: linear-gradient(180deg, #09111f, #0d1628);
      padding: 8px; min-height: 0;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      gap: var(--stack-gap);
      height: 100%;
    }
    #staffBottomHost {
      flex: 0 0 auto;
      height: calc((100% - var(--stack-gap)) * var(--falling-ratio));
      min-height: 160px;
      width: 100%;
    }
    #staffBottomHost[hidden] { display: none; }
    #staffBottomHost .staff {
      height: 100%;
      min-height: 0;
      width: 100%;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
    #staffBottomHost .staff::-webkit-scrollbar {
      display: none;
      height: 0;
    }
    #bottomStaffScroll {
      position: relative;
      min-width: 900px;
      height: 100%;
    }
    #bottomPlayhead {
      position: absolute;
    }
    .keyboard-wrap.no-falling .keyboard { height: 100%; }
    .keyboard-wrap.no-falling #staffBottomHost {
      height: calc((100% - var(--stack-gap)) * var(--falling-ratio));
      min-height: 0;
    }
    .keyboard-wrap.no-falling .keyboard {
      height: calc((100% - var(--stack-gap)) * var(--keyboard-ratio));
      min-height: 110px;
    }
    .keyboard { position: relative; height: calc((100% - var(--stack-gap)) * var(--keyboard-ratio)); min-height: 0; user-select: none; flex: 0 0 auto; }
    .key {
      position: absolute;
      border-radius: 0 0 10px 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 10px;
      font-weight: 700;
      transition: transform .05s ease, box-shadow .12s ease, background .12s ease;
      overflow: hidden;
      white-space: nowrap;
      cursor: pointer;
      touch-action: manipulation;
    }
    .key.white {
      width: 44px; height: 100%; min-height: 0;
      background: var(--white-key); color: var(--white-key-text);
      border: 1px solid var(--white-key-border);
      box-shadow: inset 0 -10px 14px rgba(0,0,0,.08); z-index: 1;
    }
    .key.black {
      width: 28px; height: 58%; min-height: 0;
      background: linear-gradient(180deg, #1b2436, #03060c); color: #edf4ff;
      border: 1px solid #000; z-index: 2;
      box-shadow: inset 0 -10px 14px rgba(255,255,255,.03), 0 6px 16px rgba(0,0,0,.35);
    }
    .app.keyboard-colors-off .key.white {
      background: linear-gradient(180deg, #ffffff, #edf3fa);
      color: var(--white-key-text);
      border-color: #c7d3e2;
      box-shadow: inset 0 -10px 14px rgba(0,0,0,.06);
    }
    .app.keyboard-colors-off .key.black {
      background: linear-gradient(180deg, #273246, #060a12);
      color: #edf4ff;
      border-color: #02050b;
      box-shadow: inset 0 -8px 12px rgba(255,255,255,.03), 0 5px 14px rgba(0,0,0,.28);
    }
    .key.target-right {
      background: linear-gradient(180deg, #ffc65e, #ffac2d) !important; color: #182133 !important;
      box-shadow: 0 0 0 4px rgba(255,172,45,.18), 0 0 16px rgba(255,172,45,.45) !important;
    }
    .key.target-left {
      background: linear-gradient(180deg, #d38cff, #a45cff) !important; color: #140a1f !important;
      box-shadow: 0 0 0 4px rgba(164,92,255,.18), 0 0 16px rgba(164,92,255,.42) !important;
    }
    .key.target-both {
      background: linear-gradient(180deg, #8cebc7, #39c6a0) !important; color: #06261c !important;
      box-shadow: 0 0 0 4px rgba(57,198,160,.18), 0 0 16px rgba(57,198,160,.44) !important;
    }
    .key.pressed {
      transform: translateY(3px);
      background: linear-gradient(180deg, #b1dbff, #7ec8ff) !important; color: #0b1a2a !important;
      box-shadow: 0 0 0 4px rgba(126,200,255,.18), 0 0 16px rgba(126,200,255,.40) !important;
    }
    .key.correct {
      background: linear-gradient(180deg, #72f1ae, #33d17a) !important; color: #062514 !important;
      box-shadow: 0 0 0 4px rgba(51,209,122,.18), 0 0 16px rgba(51,209,122,.44) !important;
    }
    .key.wrong {
      background: linear-gradient(180deg, #ffb0b0, #ff6b6b) !important; color: white !important;
      box-shadow: 0 0 0 4px rgba(255,107,107,.18), 0 0 16px rgba(255,107,107,.45) !important;
      animation: wrongFade .95s ease-out forwards;
    }
    @keyframes wrongFade {
      0% { opacity: 1; }
      70% { opacity: .92; }
      100% { opacity: .5; }
    }
    .key-label {
      position: absolute;
      bottom: 8px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 10px;
      font-weight: 700;
      pointer-events: none;
    }
    .key-finger {
      position: absolute;
      left: 50%;
      top: 49%;
      transform: translate(-50%, -50%);
      min-width: 30px;
      min-height: 24px;
      border-radius: 999px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 4px 8px;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .01em;
      white-space: nowrap;
      background: rgba(8,17,32,.76);
      border: 1px solid rgba(255,255,255,.18);
      color: #eef4ff;
      box-shadow: 0 6px 14px rgba(0,0,0,.22);
      opacity: 0;
      transition: opacity .12s ease, transform .12s ease;
      pointer-events: none;
      z-index: 3;
    }
    .key.show-finger .key-finger {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }
    .key.black .key-finger {
      top: 39%;
      background: rgba(238,244,255,.12);
      border-color: rgba(255,255,255,.16);
      color: #fff;
    }
    .key.white .key-finger {
      top: 72%;
    }
    .welcome-modal {
      position: fixed;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 18px;
      background: rgba(4, 10, 18, .76);
      backdrop-filter: blur(7px);
      z-index: 30;
    }
    .welcome-modal[hidden] { display: none; }
    .drop-overlay {
      position: fixed;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      background: rgba(4, 10, 20, 0.66);
      backdrop-filter: blur(8px);
      z-index: 30;
    }
    .drop-overlay[hidden] { display: none; }
    .drop-overlay-card {
      width: min(480px, 100%);
      padding: 24px 28px;
      border-radius: 24px;
      border: 2px dashed rgba(91,188,255,.55);
      background: linear-gradient(180deg, rgba(13, 25, 45, 0.96), rgba(8, 18, 32, 0.96));
      box-shadow: 0 24px 60px rgba(0,0,0,.35);
      text-align: center;
    }
    .drop-overlay-card strong {
      display: block;
      font-size: 24px;
      margin-bottom: 8px;
      color: #eef4ff;
    }
    .drop-overlay-card span {
      display: block;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.5;
    }
    .welcome-card {
      width: min(720px, 100%);
      max-height: min(88dvh, 760px);
      overflow: auto;
      background: rgba(15, 26, 47, 0.98);
      border: 1px solid var(--line);
      border-radius: 22px;
      box-shadow: 0 22px 60px rgba(0,0,0,.42);
      padding: 20px;
    }
    .welcome-card h2 {
      font-size: 22px;
      margin: 0 0 10px;
    }
    .welcome-card p {
      margin: 0 0 10px;
      color: #dce8ff;
      line-height: 1.5;
      font-size: 14px;
    }
    .welcome-card button { margin-top: 8px; }

    .footer-note { font-size: 11px; color: var(--muted); text-align: center; line-height: 1.3; }

    .app.drag-import-active {
      filter: saturate(1.05) brightness(1.03);
    }
    .notation-sheet .playable-staff-note {
      cursor: pointer;
    }

    .app.falling-on .key.black {
      min-height: 0;
      height: 50%;
    }
    .app.falling-on .key.white .key-finger {
      top: 80%;
    }

    @media (orientation: portrait) and (max-width: 1024px) {
      .app { grid-template-rows: var(--top-section-height) 1fr; }
      .app.middle-scale-on { grid-template-rows: var(--top-section-height) auto 1fr; }
      .top-inner { grid-template-columns: 1fr; }
      .x-scale-panel { display: none !important; }
      .center-y-scale-panel {
        grid-template-columns: 1fr;
        justify-items: stretch;
      }
      .form-grid { grid-template-columns: 1fr; }
      .button-grid.four { grid-template-columns: 1fr 1fr; }
      .keyboard-stage { grid-template-columns: 1fr; }
      .y-scale-panel {
        width: 100%;
        min-height: 56px;
        flex-direction: row;
        justify-content: space-between;
      }
      .timing-panel {
        width: 100%;
        min-height: 56px;
        flex-direction: row;
        justify-content: space-between;
      }
      .y-scale-title {
        writing-mode: horizontal-tb;
        transform: none;
      }
      .timing-title {
        writing-mode: horizontal-tb;
        transform: none;
      }
      #yScaleRange {
        width: 100%;
        height: auto;
        transform: none;
      }
      #timingRange {
        width: 100%;
        height: auto;
        transform: none;
      }
    }
    @media (max-width: 820px) {
      .key.white { width: 42px; }
      .key.black { width: 26px; }
      .scoreboard { grid-template-columns: repeat(2, 1fr); }
      .button-grid.three, .button-grid.four { grid-template-columns: 1fr 1fr; }
      .staff { min-height: 166px; }
      .panel-head { align-items: flex-start; flex-direction: column; }
    }