body
{
   background-color: #FFFFFF;
   color: #000000;
   font-family: Arial;
   font-weight: normal;
   font-size: 13px;
   line-height: 1.1875;
   margin: 0;
   padding: 0;
}
* { box-sizing:border-box; margin:0; padding:0; }
:root {
  --bg:#0c0c1a; --card:#1a1a38; --acc:#5b82c0; --acc2:#8ab4f8;
  --ok:#4ade80; --err:#f87171; --warn:#fbbf24; --muted:#3a3a60;
  --text:#e2e2f2; --dim:#5a5a88;
}
body { background:var(--bg); color:var(--text); font-family:'Segoe UI',system-ui,sans-serif; min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:12px; }
.screen { display:none; flex-direction:column; align-items:center; gap:10px; width:100%; max-width:700px; }
.screen.active { display:flex; }
.card { background:var(--card); border:1px solid rgba(255,255,255,.07); border-radius:12px; padding:12px 16px; width:100%; }
h1 { font-size:1.6rem; font-weight:800; background:linear-gradient(135deg,var(--acc2),var(--acc)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.subtitle { color:var(--dim); font-size:.78rem; text-align:center; }
#midi-status { font-size:.75rem; padding:4px 12px; border-radius:999px; background:var(--card); border:1px solid var(--muted); color:var(--dim); }
#midi-status.ok  { color:var(--ok);  border-color:var(--ok); }
#midi-status.err { color:var(--err); border-color:var(--err); }
.ctrl-grid { display:grid; grid-template-columns:max-content 1fr max-content; gap:7px 12px; align-items:center; }
.ctrl-lbl { font-size:.75rem; color:var(--dim); }
.ctrl-val { font-size:.75rem; color:var(--acc2); min-width:40px; text-align:right; }
input[type=range] { width:100%; accent-color:var(--acc); cursor:pointer; height:3px; }
.toggle-row { display:flex; align-items:center; justify-content:space-between; margin-top:8px; }
.toggle-lbl { font-size:.75rem; color:var(--dim); }
.toggle { position:relative; width:38px; height:20px; }
.toggle input { opacity:0; width:0; height:0; }
.toggle-track { position:absolute; inset:0; background:var(--muted); border-radius:999px; cursor:pointer; transition:background .2s; }
.toggle input:checked + .toggle-track { background:var(--acc); }
.toggle-track::after { content:''; position:absolute; left:2px; top:2px; width:16px; height:16px; background:#fff; border-radius:50%; transition:transform .2s; }
.toggle input:checked + .toggle-track::after { transform:translateX(18px); }
.btn { background:var(--acc); color:#fff; border:none; padding:9px 22px; border-radius:10px; font-size:.88rem; font-weight:700; cursor:pointer; transition:transform .1s,background .15s; }
.btn:hover { background:var(--acc2); color:var(--bg); transform:translateY(-1px); }
.btn:active { transform:none; }
.btn.red   { background:#7a1f1f; } .btn.red:hover { background:var(--err); color:#000; }
.btn.ghost { background:var(--muted); } .btn.ghost:hover { background:#505088; }
.btn-row { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.hud { display:flex; justify-content:space-between; align-items:center; width:100%; }
.hud-cell { text-align:center; min-width:60px; }
.hud-lbl { font-size:.55rem; color:var(--dim); text-transform:uppercase; letter-spacing:1.2px; }
.hud-val { font-size:1.1rem; font-weight:800; color:var(--acc2); }
#staff-wrap { background:#fff; border-radius:12px; padding:8px; width:100%; min-height:200px; max-height:600px; overflow-y:auto; display:flex; align-items:flex-start; justify-content:center; }
#blocked-bar { width:100%; height:4px; border-radius:999px; background:var(--err); opacity:0; transition:opacity .08s; }
#blocked-bar.active { opacity:1; }
#feedback { font-size:1.3rem; font-weight:800; min-height:36px; width:100%; text-align:center; display:flex; align-items:center; justify-content:center; }
.info-row { display:flex; justify-content:space-between; align-items:center; width:100%; }
#note-reveal { font-size:.85rem; color:var(--dim); }
#combo-txt   { font-size:.82rem; font-weight:700; color:var(--warn); }
#piano-wrap { width:100%; overflow-x:auto; background:var(--card); border:1px solid rgba(255,255,255,.07); border-radius:12px; padding:10px 10px 8px; display:flex; flex-direction:column; align-items:center; gap:6px; }
#piano-legend { display:flex; gap:14px; font-size:.65rem; color:var(--dim); }
#piano-legend span { display:flex; align-items:center; gap:4px; }
#piano-legend .dot { width:8px; height:8px; border-radius:50%; display:inline-block; }
#piano-svg-wrap { width:100%; overflow-x:auto; display:flex; justify-content:center; }
.grade-big { font-size:5.5rem; font-weight:900; line-height:1; background:linear-gradient(135deg,#fbbf24,#f97316); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.score-pct { font-size:1.3rem; font-weight:700; color:var(--acc2); }
.res-table { width:100%; border-collapse:collapse; }
.res-table td { padding:7px 4px; border-bottom:1px solid rgba(255,255,255,.06); font-size:.83rem; }
.res-table td:last-child { text-align:right; font-weight:700; color:var(--acc2); }
.clef-btn { flex:1; background:var(--muted); color:var(--text); border:2px solid transparent; padding:7px 4px; border-radius:8px; font-size:.78rem; font-weight:700; cursor:pointer; transition:background .15s,border-color .15s; }
.clef-btn.active { background:var(--acc); border-color:var(--acc2); color:#fff; }
.stag { font-size:.62rem; text-transform:uppercase; letter-spacing:2px; color:var(--dim); margin-bottom:6px; }
#level-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; width:100%; }
.lvl-btn { background:var(--muted); color:var(--text); border:2px solid transparent; border-radius:10px; padding:8px 4px; cursor:pointer; text-align:center; transition:background .15s,border-color .15s,transform .1s; }
.lvl-btn:hover { background:#505088; transform:translateY(-1px); }
.lvl-btn.active { background:var(--acc); border-color:var(--acc2); color:#fff; }
.lvl-num { font-size:1.2rem; font-weight:900; display:block; line-height:1; }
.lvl-tag { font-size:.52rem; text-transform:uppercase; letter-spacing:.6px; color:var(--dim); margin-top:3px; display:block; }
.lvl-btn.active .lvl-tag { color:rgba(255,255,255,.65); }
.lvl-chord { font-size:.58rem; color:var(--warn); margin-top:2px; display:block; }
.lvl-btn.active .lvl-chord { color:#fde68a; }
#lvl-desc { font-size:.75rem; color:var(--acc2); text-align:center; margin-top:8px; min-height:1.1em; }
#keysig-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; width:100%; }
.ks-btn { background:var(--muted); color:var(--text); border:2px solid transparent; border-radius:8px; padding:6px 4px; cursor:pointer; text-align:center; transition:background .15s,border-color .15s; }
.ks-btn:hover { background:#505088; }
.ks-btn.active { background:#2a5a2a; border-color:#4ade80; color:#fff; }
.ks-root { font-size:.95rem; font-weight:900; display:block; line-height:1; }
.ks-acc  { font-size:.55rem; color:var(--dim); margin-top:2px; display:block; }
.ks-btn.active .ks-acc { color:rgba(255,255,255,.6); }
#g-timer { font-size:1.1rem; font-weight:800; color:var(--acc2); transition:color .3s; font-variant-numeric:tabular-nums; }
#g-timer.warn   { color:var(--warn); }
#g-timer.danger { color:var(--err); animation:pulse-timer .5s ease-in-out infinite alternate; }
@keyframes pulse-timer { from{transform:scale(1);opacity:1} to{transform:scale(1.15);opacity:.75} }
#timer-bar-track { width:100%; height:5px; background:rgba(255,255,255,.06); border-radius:999px; overflow:hidden; }
#timer-bar { height:100%; width:100%; border-radius:999px; background:var(--ok); transition:background .4s; }
#metro-flash { width:100%; height:3px; border-radius:999px; background:var(--warn); opacity:0; transition:opacity .05s; }
#metro-flash.beat { opacity:1; }
#game-toolbar { display:flex; gap:7px; align-items:center; justify-content:flex-end; width:100%; }
.tool-btn { background:var(--card); color:var(--text); border:1px solid var(--muted); padding:5px 12px; border-radius:8px; font-size:.8rem; font-weight:700; cursor:pointer; transition:background .15s,transform .1s; }
.tool-btn:hover { background:#2a3a5a; transform:scale(1.04); }
.tool-btn.playing { background:var(--err); border-color:var(--err); color:#fff; }
#pressed-note { font-size:1.8rem; font-weight:900; text-align:center; min-height:2.2rem; letter-spacing:2px; color:var(--warn); }
.rhythm-good { color:var(--ok); } .rhythm-ok { color:var(--warn); } .rhythm-bad { color:var(--err); }
#tune-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:7px; width:100%; }
.tune-btn { background:var(--muted); color:var(--text); border:2px solid transparent; border-radius:10px; padding:9px 8px; cursor:pointer; text-align:left; transition:background .15s,border-color .15s,transform .1s; }
.tune-btn:hover { background:#505088; transform:translateY(-1px); }
.tune-btn.active { background:#2a4a2a; border-color:var(--ok); color:#fff; }
.tune-name { font-size:.82rem; font-weight:700; display:block; }
.tune-meta { font-size:.58rem; color:var(--dim); margin-top:2px; display:block; }
.tune-btn.active .tune-meta { color:rgba(255,255,255,.6); }
@media print {
  body { background:#fff !important; padding:0; }
  .screen { display:none !important; }
  #print-area { display:block !important; }
  #print-area svg { width:100% !important; height:auto !important; }
}
#print-area { display:none; }
      body{margin:8px;background:#fff;font-family:Arial,sans-serif;}
      h3{font-size:11px;color:#666;margin-bottom:6px;}
      svg{width:100%;height:auto;display:block;}
      @media print{
        @page{size:A4 portrait;margin:8mm;}
        h3{display:none;}body{margin:0;}
      }