html,body{height:100%;min-height:0;box-sizing:border-box}body{margin:0;padding:0;display:flex;flex-direction:column}body>.wrap{flex:1;min-height:0;width:100%;max-width:1400px;box-sizing:border-box;margin:0 auto;padding:8px 16px;display:flex;flex-direction:column;gap:6px}.wrap>h1{flex:none;font-size:25px;margin:3px 70px;text-align:center;line-height:1.25}.wrap>.sub{flex:none;font-size:12px;margin:0;text-align:center}.wrap>.card{flex:1;min-height:0;display:flex;flex-direction:column;gap:6px;padding:10px}.card>.screen-tabs,.card>#gameTopbar,.card>#gameControls{flex:none;margin:0}.screen-tab{padding:6px 12px;font-size:13px}#noteGameScreen{flex:1;min-height:0;display:flex;flex-direction:column;gap:5px}#noteGameScreen.hidden{display:none}#noteGameScreen .staffbox{flex:1;min-height:100px;height:auto;margin:0;padding:0;display:flex;align-items:center;justify-content:center}#staffSvg{display:block;width:100%;height:100%;max-height:100%}#noteGameScreen .message{min-height:22px;padding:2px;margin:0;font-size:13px;flex:none}#noteGameScreen .hint{display:none}#noteGameScreen .accidental-controls{flex:none;margin:0;padding:4px;gap:5px}#noteGameScreen .accidental-controls button{padding:5px 9px;font-size:12px}#noteGameScreen .keys{flex:none;margin:0;height:64px}#noteGameScreen .midi{flex:none;margin:0;padding:3px;gap:6px;font-size:12px}#noteGameScreen .midi button,#noteGameScreen .midi select{padding:5px 8px;font-size:12px}body>footer{flex:none;margin:0!important;padding:3px!important;font-size:10px!important;line-height:14px!important}@media(max-height:700px){.wrap>.sub{display:none}#noteGameScreen .accidental-controls{zoom:.85}#noteGameScreen .keys{height:54px}}@media(max-width:700px){body>.wrap{padding:58px 7px 5px}.wrap>h1{font-size:19px;margin:0}.wrap>.sub{display:none}.card>#gameControls{font-size:11px}.wrap>.card{padding:7px;gap:4px}#noteGameScreen .accidental-controls{zoom:.8}}

.note-studio-brand{position:fixed;right:65px;top:14px;z-index:1000;display:flex;align-items:center;gap:8px;direction:ltr;min-height:38px;white-space:nowrap;font:800 17px/1.2 system-ui;color:var(--text,#eef4fc)}.note-studio-brand img{width:30px;height:30px}
.note-game-fullscreen{position:fixed;left:64px;top:14px;z-index:1000;min-height:38px;padding:7px 12px;border:1px solid #63c9ef;border-radius:9px;background:#17415e;color:#fff;font:700 13px system-ui;cursor:pointer}
.wrap>h1{margin-left:235px;margin-right:285px;font-size:23px;min-height:38px}
#speed,#rhythmTempo{direction:ltr!important;writing-mode:horizontal-tb!important}
.secondary.difficulty[data-level="1"]{--level-bg:#224c40;--level-fg:#a5e2c5;--level-edge:#70b999}
.secondary.difficulty[data-level="2"]{--level-bg:#244866;--level-fg:#b0d9fb;--level-edge:#7badd4}
.secondary.difficulty[data-level="3"]{--level-bg:#5b4525;--level-fg:#f4d29a;--level-edge:#c9a263}
.secondary.difficulty[data-level="4"]{--level-bg:#593348;--level-fg:#f1b2cb;--level-edge:#c381a0}
.secondary.difficulty{background:var(--level-bg);color:var(--level-fg);border:1px solid var(--level-edge);font-weight:700}
.secondary.difficulty.active{background:var(--level-fg);color:#12202b;border-color:var(--level-fg);box-shadow:0 0 0 1px var(--level-edge)}
.accidental-choice[data-accidental="-1"]{--sign-bg:#49375f;--sign-fg:#e2c7f6}
.accidental-choice[data-accidental="0"]{--sign-bg:#245248;--sign-fg:#b0e3cf}
.accidental-choice[data-accidental="1"]{--sign-bg:#264e70;--sign-fg:#bbdef9}
.secondary.accidental-choice{background:var(--sign-bg);color:var(--sign-fg);border:1px solid var(--sign-fg)}
.secondary.accidental-choice.active{background:var(--sign-fg);color:#101923;box-shadow:0 0 0 2px var(--sign-bg)}
@media(max-width:900px){.wrap>h1{margin:58px 0 0;font-size:19px}.note-studio-brand{font-size:13px;gap:5px}.note-studio-brand img{width:25px;height:25px}}

#noteGameScreen .keys.note-piano-keyboard{position:relative;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));direction:ltr;gap:2px;height:104px;min-height:104px;padding:5px 5px 7px;background:#121d2c;border:1px solid #607187;border-radius:10px}
.note-piano-keyboard>.key{height:100%;min-width:0;padding:58px 3px 6px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:2px;border:1px solid #929caa;border-radius:0 0 6px 6px;background:linear-gradient(#fff,#faf9f4 85%,#e0e3df);color:#182637;box-shadow:0 3px 0 #adb7c1}
.note-piano-keyboard>.key .letter{font-size:16px;font-weight:800}.note-piano-keyboard>.key .name{font-size:12px;color:#34465a}
.note-piano-black{position:absolute;top:5px;z-index:3;width:8.6%;height:60px;padding:3px 1px 7px;display:flex;align-items:flex-end;justify-content:center;background:linear-gradient(100deg,#303b4a,#080d15 40%,#142030);color:#fff;border:1px solid #050a10;border-bottom:4px solid #354455;border-radius:0 0 5px 5px;box-shadow:2px 4px 4px #0005;font:700 10px/1.2 system-ui;cursor:pointer}
.note-piano-keyboard>.key:active{background:#b6daf5}.note-piano-black:active{background:#255982}
@media(max-width:700px){.note-piano-black{font-size:8px}.note-piano-keyboard>.key .letter{font-size:14px}.note-piano-keyboard>.key .name{font-size:10px}}

#noteGameScreen .accidental-controls{display:none!important}
#noteGameScreen .keys.note-piano-keyboard{height:146px;min-height:146px}
.note-piano-keyboard>.key{padding-top:85px;padding-bottom:10px}
.note-piano-black{height:88px;font-size:12px}
.note-piano-keyboard>.key .letter{font-size:19px}.note-piano-keyboard>.key .name{font-size:14px}
@media(max-height:650px){#noteGameScreen .keys.note-piano-keyboard{height:122px;min-height:122px}.note-piano-black{height:72px}.note-piano-keyboard>.key{padding-top:72px}}

#rhythmScreen:not(.hidden){flex:1;min-height:0;display:flex;flex-direction:column;gap:6px;padding:0;margin:0}
#rhythmScreen .rhythm-toolbar{flex:none;margin:0;padding:5px;gap:6px}
#rhythmScreen .rhythm-toolbar button,#rhythmScreen .rhythm-toolbar select{padding:5px 8px;font-size:12px}
#rhythmScreen .rhythm-play-wrap{flex:none;margin:0}
#rhythmScreen .hand-keys{flex:none;margin:0;gap:7px}
#rhythmScreen .hand-key{padding:6px 10px;font-size:13px}
#rhythmScreen .staffbox{flex:1;min-height:80px;height:auto;margin:0;padding:0;display:flex;align-items:center;justify-content:center}
#rhythmSvg{display:block;width:100%;height:100%;max-height:100%}
#rhythmScreen .rhythm-message{flex:none;margin:0;padding:4px;font-size:12px;line-height:1.3;min-height:0}
#rhythmScreen .rhythm-legend{flex:none;margin:0;font-size:10px;gap:4px}
@media(max-height:700px){#rhythmScreen .rhythm-toolbar{gap:4px}#rhythmScreen .rhythm-toolbar button,#rhythmScreen .rhythm-toolbar select{font-size:11px;padding:4px 6px}#rhythmScreen .rhythm-legend{display:none}}

.drum-metronome:focus-visible{outline:2px solid #10b981;outline-offset:2px;border-radius:8px}
.drum-metronome .measure-circle{box-sizing:border-box;position:relative;display:block;width:52px;height:52px;border-radius:50%;border:2px solid #64748b;background:radial-gradient(circle,#101827,#1e293b);box-shadow:inset 0 3px 8px #0008}
.drum-metronome .circle-hand{position:absolute;bottom:50%;left:50%;width:2px;height:21px;background:linear-gradient(to top,#e5c15833,#e5c158);transform-origin:bottom center;transform:translateX(-50%) rotate(0deg);border-radius:2px;z-index:2}
.drum-metronome .circle-marker{position:absolute;top:50%;left:50%;width:13px;height:13px;margin:-6.5px;background:#cbd5e1;border-radius:50%;z-index:4;color:#0f172a}
.drum-metronome .circle-marker.downbeat{background:#e74c3c;color:white}
.drum-metronome .circle-marker.flash{background:#fff;box-shadow:0 0 7px #fff8}
.drum-metronome .circle-marker.downbeat.flash{background:#ff9999;box-shadow:0 0 7px #ff9999}
.drum-metronome .beat-number{position:absolute;top:50%;left:50%;font:700 8px/1 system-ui;white-space:nowrap}
#rhythmScreen .rhythm-play-wrap{display:flex;align-items:center;justify-content:center;gap:25px;min-height:62px}
.note-rhythm-metronome{display:flex;align-items:center;justify-content:center;padding:6px;flex:none}

#metronomeBtn{display:none!important}

#rhythmScreen .rhythm-toolbar{gap:8px;padding:7px}
#rhythmScreen .rhythm-toolbar .secondary{min-height:38px;padding:8px 12px;font-size:14px;border-radius:9px}
.rhythm-control-with-info{display:inline-flex;align-items:center;gap:4px;flex:none}
#rhythmScreen .rhythm-toolbar .note-rhythm-info{width:22px;height:22px;min-height:22px;padding:0;border:1px solid #ad91cf;border-radius:5px;background:#49375f;color:#f0e2ff;font:700 15px/1 system-ui;cursor:pointer}
.note-rhythm-info-dialog{position:fixed;inset:0;margin:auto;width:min(520px,calc(100vw - 32px));height:fit-content;max-height:calc(100dvh - 48px);overflow:auto;box-sizing:border-box;padding:22px;border:1px solid #8199b6;border-radius:15px;background:#1c2939;color:#eef4fc;font:16px/1.7 system-ui;direction:rtl}
.note-rhythm-info-dialog::backdrop{background:#030915aa}.note-rhythm-info-dialog h2{font-size:22px;margin:0 0 12px}.note-rhythm-info-dialog p{margin:0 0 16px}.note-rhythm-info-dialog button{padding:7px 15px;border:1px solid #ad91cf;border-radius:7px;background:#49375f;color:#fff}
@media(max-height:650px){#rhythmScreen .rhythm-toolbar .secondary{min-height:33px;padding:6px 9px;font-size:12px}}

#rhythmScreen .rhythm-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
#rhythmScreen .rhythm-legend .badge{background:#30435a;color:#eef5ff;border:1px solid #66809e;font-size:12px;line-height:1.4;font-weight:600;padding:5px 10px;border-radius:8px}
@media(max-height:650px){#rhythmScreen .rhythm-legend .badge{font-size:11px;padding:3px 7px}}

#handKeyIndicators .hand-key{cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:none}
@media(pointer:coarse){#rhythmScreen .hand-keys{display:flex;gap:10px}#rhythmScreen .hand-key{flex:1;min-height:58px;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800;border-radius:12px}}

#twoHandsBtn{display:inline-flex;align-items:center;gap:7px}#twoHandsBtn .two-hands-icon{display:inline-block;font-size:26px;line-height:1;flex:none}

#twoHandStaffLabels{display:none!important}

#rhythmScreen .rhythm-legend .badge{font-size:13px!important;font-weight:800!important;color:#fff!important;padding:7px 12px!important;line-height:1.5;border-color:#92aac6;box-shadow:0 2px 5px #0002}
#rhythmScreen .rhythm-legend .badge:nth-child(1){background:#54383e;border-color:#c7808c}
#rhythmScreen .rhythm-legend .badge:nth-child(2){background:#304f70;border-color:#8eb9df}
#rhythmScreen .rhythm-legend .badge:nth-child(3){background:#285748;border-color:#82c7ad}