.pwss-game {
      --bg: #f4f7fb;
      --panel: #ffffff;
      --panel-soft: #f8fbff;
      --text: #203047;
      --muted: #66758d;
      --line: #dbe4f0;
      --accent: #6a5cff;
      --accent-dark: #5145d1;
      --accent-soft: #efedff;
      --good: #23916b;
      --good-soft: #e8f8f1;
      --bad: #cb4e67;
      --bad-soft: #fdeef2;
      --shadow: 0 16px 40px rgba(26, 41, 64, 0.08);
      --radius: 20px;
    }

    .pwss-game * { box-sizing: border-box; }
    .pwss-game {
      margin: 0;
      background: transparent;
      color: var(--text);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      line-height: 1.45;
    }
    .pwss-game button,
.pwss-game input,
.pwss-game select,
.pwss-game textarea { font: inherit; }
    .pwss-game button { cursor: pointer; }
    .pwss-game [hidden] { display: none !important; }

    .pwss-game .app {
      width: min(1120px, calc(100% - 28px));
      margin: 22px auto 36px;
    }

    .pwss-game .topbar {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      align-items: center;
      margin-bottom: 18px;
    }
    .pwss-game .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
    }
    .pwss-game .brand-mark {
      width: 48px;
      height: 48px;
      border-radius: 14px;
      display: grid;
      place-items: center;
      background: linear-gradient(135deg, #7a6dff, #59a6ff);
      color: #fff;
      font-size: 26px;
      box-shadow: 0 10px 22px rgba(100, 92, 255, .24);
      flex: 0 0 auto;
    }
    .pwss-game .brand h1 {
      margin: 0;
      font-size: clamp(22px, 3vw, 30px);
      letter-spacing: -.03em;
    }
    .pwss-game .brand p {
      margin: 3px 0 0;
      color: var(--muted);
      font-size: 14px;
    }
    .pwss-game .range-pill {
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(255,255,255,.8);
      border: 1px solid var(--line);
      color: var(--muted);
      font-weight: 800;
      font-size: 13px;
      white-space: nowrap;
    }

    .pwss-game .panel {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }

    .pwss-game .setup-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.5fr) minmax(260px, .8fr);
      gap: 18px;
      align-items: start;
    }
    .pwss-game .setup-card,
.pwss-game .help-card,
.pwss-game .record-panel,
.pwss-game .practice-card {
      padding: clamp(18px, 3vw, 28px);
    }
    .pwss-game .section-kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
      color: var(--accent-dark);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: .12em;
      font-weight: 800;
    }
    .pwss-game .setup-card h2,
.pwss-game .help-card h2,
.pwss-game .record-panel h2 { margin: 0 0 8px; }
    .pwss-game .intro { margin: 0 0 18px; color: var(--muted); }

    .pwss-game .field { display: grid; gap: 7px; }
    .pwss-game .field label { font-weight: 800; font-size: 14px; }
    .pwss-game .field small { color: var(--muted); }
    .pwss-game .field-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 12px;
      margin-bottom: 16px;
    }
    .pwss-game input,
.pwss-game select,
.pwss-game textarea {
      width: 100%;
      min-height: 46px;
      border-radius: 12px;
      border: 1px solid var(--line);
      background: #fff;
      color: var(--text);
      padding: 11px 12px;
    }
    .pwss-game textarea {
      min-height: 170px;
      resize: vertical;
      line-height: 1.7;
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: 15px;
    }
    .pwss-game input:focus,
.pwss-game select:focus,
.pwss-game textarea:focus {
      outline: 3px solid rgba(106, 92, 255, .14);
      border-color: var(--accent);
    }

    .pwss-game .syntax {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 9px;
      color: var(--muted);
      font-size: 13px;
    }
    .pwss-game .syntax code {
      padding: 4px 8px;
      border-radius: 8px;
      background: var(--panel-soft);
      border: 1px solid var(--line);
      color: var(--text);
    }

    .pwss-game .song-library {
      margin-bottom: 20px;
      padding: 16px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: var(--panel-soft);
    }
    .pwss-game .song-library-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 12px;
    }
    .pwss-game .song-library-head h3 { margin: 0 0 4px; font-size: 18px; }
    .pwss-game .song-library-head p { margin: 0; color: var(--muted); font-size: 13px; }
    .pwss-game .song-library-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto auto;
      gap: 10px;
      align-items: end;
    }
    .pwss-game .song-library-status {
      margin-top: 10px;
      color: var(--muted);
      font-size: 13px;
      font-weight: 700;
      min-height: 20px;
    }
    .pwss-game .song-library-status.is-error { color: #a13048; }
    .pwss-game .song-library-meta {
      margin-top: 8px;
      color: var(--accent-dark);
      font-size: 13px;
      font-weight: 800;
    }
    .pwss-game .source-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 5px 9px;
      border-radius: 999px;
      background: var(--accent-soft);
      color: var(--accent-dark);
      font-size: 12px;
      font-weight: 800;
      white-space: nowrap;
    }
    .pwss-game .error-box {
      margin-top: 12px;
      padding: 10px 12px;
      border: 1px solid #f1c0c9;
      border-radius: 11px;
      color: #a13048;
      background: var(--bad-soft);
      font-weight: 700;
      font-size: 14px;
    }

    .pwss-game .actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 18px;
    }
    .pwss-game .btn {
      min-height: 44px;
      border-radius: 12px;
      border: 1px solid transparent;
      padding: 10px 15px;
      font-weight: 800;
      transition: transform .12s ease, background .12s ease;
    }
    .pwss-game .btn:hover { transform: translateY(-1px); }
    .pwss-game .btn-primary { background: var(--accent); color: white; }
    .pwss-game .btn-primary:hover { background: var(--accent-dark); }
    .pwss-game .btn-secondary { background: var(--accent-soft); color: var(--accent-dark); border-color: #d9d1fb; }
    .pwss-game .btn-ghost { background: #fff; color: var(--text); border-color: var(--line); }
    .pwss-game .btn-danger { background: var(--bad-soft); color: #ab3c53; border-color: #efc2cb; }

    .pwss-game .help-list {
      margin: 14px 0 0;
      padding-left: 20px;
      color: var(--muted);
    }
    .pwss-game .help-list li { margin-bottom: 10px; }
    .pwss-game .sample-box {
      margin-top: 18px;
      padding: 14px;
      background: var(--panel-soft);
      border: 1px solid var(--line);
      border-radius: 14px;
    }
    .pwss-game .sample-box strong { display: block; margin-bottom: 6px; }
    .pwss-game .sample-box code { font-size: 12px; overflow-wrap: anywhere; color: #3e4860; }

    .pwss-game .record-panel {
      margin-top: 18px;
    }
    .pwss-game .record-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 12px;
      margin-bottom: 12px;
    }
    .pwss-game .record-indicator {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: #b63c56;
      font-size: 13px;
      font-weight: 800;
    }
    .pwss-game .record-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #f14f73;
      box-shadow: 0 0 0 8px rgba(241, 79, 115, .12);
    }
    .pwss-game .record-sequence {
      min-height: 56px;
      padding: 12px 14px;
      border-radius: 14px;
      background: var(--panel-soft);
      border: 1px solid var(--line);
      color: var(--text);
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      line-height: 1.7;
      overflow-wrap: anywhere;
      margin-bottom: 14px;
    }

    .pwss-game .practice-card { margin-top: 18px; }
    .pwss-game .practice-head {
      display: flex;
      justify-content: space-between;
      gap: 14px;
      align-items: flex-start;
      margin-bottom: 14px;
    }
    .pwss-game .practice-head h2 { margin: 0 0 4px; }
    .pwss-game .practice-meta { color: var(--muted); font-size: 14px; font-weight: 700; }

    .pwss-game .progress-card {
      display: grid;
      gap: 8px;
      margin-bottom: 16px;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: var(--panel-soft);
    }
    .pwss-game .progress-row {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: center;
      font-weight: 800;
    }
    .pwss-game .progress-bar {
      height: 12px;
      border-radius: 999px;
      overflow: hidden;
      background: #e8eef7;
    }
    .pwss-game .progress-fill {
      height: 100%;
      width: 0%;
      border-radius: inherit;
      background: linear-gradient(90deg, #6a5cff, #4ab5ff);
      transition: width .25s ease;
    }

    .pwss-game .live-stats {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      margin-top: 18px;
      margin-bottom: 0;
    }
    .pwss-game .stat,
.pwss-game .final-stat {
      padding: 14px;
      border-radius: 16px;
      background: var(--panel-soft);
      border: 1px solid var(--line);
    }
    .pwss-game .note-card .stat {
      padding: 10px 8px;
      text-align: center;
      background: #fff;
    }
    .pwss-game .stat span,
.pwss-game .final-stat span {
      display: block;
      color: var(--muted);
      font-size: 13px;
      font-weight: 700;
      margin-bottom: 4px;
    }
    .pwss-game .stat strong,
.pwss-game .final-stat strong {
      font-size: 26px;
      letter-spacing: -.03em;
    }

    .pwss-game .practice-grid {
      display: grid;
      grid-template-columns: minmax(220px, .65fr) minmax(0, 1fr);
      gap: 16px;
      margin-bottom: 16px;
    }
    .pwss-game .note-card,
.pwss-game .staff-card {
      padding: 16px;
      border-radius: 18px;
      border: 1px solid var(--line);
      background: var(--panel-soft);
    }
    .pwss-game .note-label {
      color: var(--muted);
      font-size: 13px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .08em;
      margin-bottom: 6px;
    }
    .pwss-game .current-note {
      font-size: clamp(34px, 5vw, 52px);
      font-weight: 900;
      letter-spacing: -.04em;
      line-height: 1;
      margin-bottom: 8px;
    }
    .pwss-game .note-subtext {
      color: var(--muted);
      font-weight: 700;
    }
    .pwss-game .staff-figure {
      position: relative;
      border-radius: 18px;
      background: linear-gradient(180deg, #f8fbff, #eef6ff);
      border: 1px solid #dbe7f2;
      padding: 10px;
    }
    .pwss-game .staff-figure svg {
      width: 100%;
      height: auto;
      display: block;
      max-height: 420px;
    }
    .pwss-game .staff-caption {
      margin-top: 10px;
      text-align: center;
      color: var(--muted);
      font-weight: 700;
    }
    .pwss-game .pwss-animal-emoji {
      width: 22px;
      height: 22px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0;
      padding: 0;
      overflow: visible;
      font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
      font-size: 14px;
      line-height: 1;
      text-align: center;
      white-space: nowrap;
    }
    .pwss-game .status-message {
      min-height: 52px;
      display: grid;
      place-items: center;
      text-align: center;
      border-radius: 16px;
      padding: 12px 14px;
      margin-bottom: 16px;
      background: #fff;
      border: 1px solid var(--line);
      font-weight: 800;
    }
    .pwss-game .status-message.is-good {
      color: #157a57;
      background: var(--good-soft);
      border-color: #c8ebd8;
    }
    .pwss-game .status-message.is-bad {
      color: #b2364d;
      background: var(--bad-soft);
      border-color: #f0c1cb;
    }
    .pwss-game .note-card .status-message {
      min-height: 46px;
      margin-top: 14px;
      margin-bottom: 0;
      padding: 10px 12px;
    }
    .pwss-game .note-card .status-message + .live-stats {
      margin-top: 10px;
    }

    .pwss-game .piano-section {
      padding: 16px;
      border-radius: 18px;
      border: 1px solid var(--line);
      background: var(--panel-soft);
    }
    .pwss-game .piano-head {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: center;
      margin-bottom: 12px;
    }
    .pwss-game .keyboard-help { color: var(--muted); font-size: 13px; font-weight: 700; }
    .pwss-game .piano-scroll { overflow-x: auto; padding-bottom: 4px; }
    .pwss-game .piano {
      position: relative;
      height: 200px;
      min-width: max-content;
      user-select: none;
    }
    .pwss-game .white-key,
.pwss-game .black-key {
      position: absolute;
      border-radius: 0 0 12px 12px;
      border: 1px solid #cfd8e5;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      padding-bottom: 10px;
      font-size: 12px;
      font-weight: 800;
      cursor: pointer;
      transition: transform .07s ease, background .12s ease, box-shadow .12s ease;
    }
    .pwss-game .piano-key {
      -webkit-appearance: none;
      appearance: none;
      top: 0;
      margin: 0 !important;
      padding: 0 0 10px !important;
      min-width: 0 !important;
      min-height: 0 !important;
      max-width: none !important;
      line-height: 1 !important;
      letter-spacing: normal !important;
      text-transform: none !important;
      font-family: inherit !important;
      vertical-align: baseline !important;
    }
    .pwss-game .white-key {
      width: 52px;
      height: 196px;
      background: linear-gradient(180deg, #fff, #f0f4fb);
      color: #51607a;
    }
    .pwss-game .black-key {
      width: 32px;
      height: 118px;
      background: linear-gradient(180deg, #3e4657, #1d2431);
      color: rgba(255,255,255,.85);
      z-index: 2;
      border-color: #1c2531;
      box-shadow: 0 8px 16px rgba(0,0,0,.18);
    }
    .pwss-game .white-key:hover,
.pwss-game .black-key:hover,
.pwss-game .white-key:focus-visible,
.pwss-game .black-key:focus-visible { transform: translateY(1px); }
    .pwss-game .piano-key.is-target {
      box-shadow: 0 0 0 4px rgba(226, 59, 79, .26), 0 8px 20px rgba(159, 24, 50, .22);
    }
    .pwss-game .white-key.piano-key.is-target {
      background: linear-gradient(180deg, #ff7b88, #e23b4f);
      border-color: #b82038;
      color: #fff;
    }
    .pwss-game .black-key.piano-key.is-target {
      background: linear-gradient(180deg, #e23b4f, #9f1832);
      border-color: #7f1026;
      color: #fff;
    }
    .pwss-game .piano-key.is-correct {
      background: linear-gradient(180deg, #dff6ea, #c7efd9);
      border-color: #87cfaa;
    }
    .pwss-game .black-key.piano-key.is-correct {
      background: linear-gradient(180deg, #3aae80, #257a5d);
      border-color: #257a5d;
      color: #fff;
    }
    .pwss-game .piano-key.is-wrong {
      background: linear-gradient(180deg, #ffe6ec, #ffd5dd);
      border-color: #ef9dad;
    }
    .pwss-game .black-key.piano-key.is-wrong {
      background: linear-gradient(180deg, #bb4e69, #833349);
      border-color: #833349;
      color: #fff;
    }

    .pwss-game .complete-panel {
      text-align: center;
      padding: 28px 18px 8px;
    }
    .pwss-game .complete-icon {
      width: 78px;
      height: 78px;
      margin: 0 auto 14px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: var(--good-soft);
      color: var(--good);
      font-size: 38px;
      font-weight: 900;
    }
    .pwss-game .complete-panel h2 { margin: 0 0 6px; }
    .pwss-game .complete-panel p { margin: 0 0 16px; color: var(--muted); }
    .pwss-game .final-stats {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      margin-bottom: 18px;
    }
    .pwss-game .complete-actions { justify-content: center; }

    @media (max-width: 900px){
      .pwss-game .setup-grid,
.pwss-game .practice-grid { grid-template-columns: 1fr; }
      .pwss-game .final-stats { grid-template-columns: 1fr; }
      .pwss-game .piano-head,
.pwss-game .practice-head,
.pwss-game .topbar,
.pwss-game .record-header { flex-direction: column; align-items: stretch; }
      .pwss-game .range-pill { align-self: flex-start; }
      .pwss-game .song-library-row { grid-template-columns: 1fr; }
      .pwss-game .animal-stage { height: 300px; }
    }