:root {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.45;
  color: #223128;
  background: #f7f8f5;
  font-synthesis: none;
  --ink: #223128;
  --muted: #667168;
  --green: #244b3e;
  --line: #dce2da;
  --paper: #fff;
}
* { box-sizing: border-box; }
body { margin: 0; }
button, input, select { font: inherit; color: inherit; }
button, a, input, select { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button, select { cursor: pointer; }
button { border: 0; }
button:disabled { opacity: .45; cursor: default; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid #92ac91; outline-offset: 2px; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 26px; font-weight: 600; letter-spacing: -.5px; line-height: 1.25; }
h2 { font-size: 22px; font-weight: 600; line-height: 1.3; }
h3 { font-size: 20px; font-weight: 500; line-height: 1.3; }
p { line-height: 1.55; }
svg { display: block; }
.icon { display: inline-block; vertical-align: middle; width: 20px; height: 20px; flex-shrink: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
[hidden] { display: none !important; }
.skip-link { position: fixed; left: 12px; top: -80px; z-index: 150; background: white; padding: 10px; }
.skip-link:focus { top: 8px; }
.muted, .row-meta { color: var(--muted); }
.row-meta { display: block; font-size: 14px; margin-top: 3px; }
.app-header { display: flex; align-items: center; gap: 24px; min-height: 58px; padding: 5px 18px; border-bottom: 1px solid var(--line); background: white; }
.brand { font-size: 26px; font-weight: 600; letter-spacing: -1px; line-height: 1; }
.brand span { color: #789371; }
.main-nav { display: flex; align-items: center; gap: 4px; }
.nav-link { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 12px; border-radius: 5px; font-size: 16px; white-space: nowrap; }
.nav-link:hover, .icon-button:hover { background: #f0f3ed; }
.nav-link.active { background: #e6eee0; color: var(--green); }
.header-tools { margin-left: auto; display: flex; align-items: center; gap: 6px; }
#offline-label { font-size: 14px; color: var(--muted); }
#offline-label:empty { display: none; }
.connection-chip { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 10px; background: transparent; border: 1px solid var(--line); border-radius: 5px; }
.connection-chip span { max-width: 170px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.status-dot { display: none; }
.status-dot.connected { display: block; width: 6px; height: 6px; border-radius: 50%; background: #658553; }
.mobile-route { display: none; }
#main { padding: 14px 18px; outline: none; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; min-height: 40px; }
.page-head h1 { display: flex; align-items: center; gap: 10px; min-width: 0; }
.page-head > .text-button { color: var(--muted); }
.btn, .text-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 14px; border-radius: 5px; font-size: 16px; font-weight: 500; white-space: nowrap; }
.btn.primary { background: var(--green); color: white; border: 1px solid var(--green); }
.btn.primary:hover { background: #315e4e; }
.btn.secondary, .btn.cream { background: white; border: 1px solid #ccd5c8; }
.btn.secondary:hover, .btn.cream:hover { background: #f0f4ed; }
.text-button { padding: 0 4px; color: var(--green); background: transparent; }
.text-button:hover { text-decoration: underline; text-underline-offset: 4px; }
.icon-button { width: 42px; height: 42px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 5px; background: transparent; color: var(--green); flex-shrink: 0; }
.danger { color: #a0463d; }
.danger-button { background: #a0463d; color: white; }
.panel { background: white; border: 1px solid var(--line); border-radius: 6px; padding: 14px; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; min-height: 30px; }
.section-head .btn { min-height: 40px; }
.content-note { color: var(--muted); font-size: 14px; margin-top: 12px; }
.today-layout { display: grid; grid-template-columns: minmax(0,2fr) minmax(260px,1fr); gap: 16px; align-items: start; }
.practice-plan { padding-bottom: 10px; }
.plan-list { border-top: 1px solid var(--line); }
.plan-row { display: grid; grid-template-columns: 28px minmax(0,1fr) auto 54px 20px; gap: 12px; align-items: center; width: 100%; min-height: 65px; padding: 8px 0; border-bottom: 1px solid #e6eae3; text-align: left; background: transparent; }
.plan-row:hover { background: #f6f8f3; }
.plan-index { color: var(--muted); font-size: 16px; }
.row-title { font-size: 18px; font-weight: 500; }
.plan-row .row-meta { margin: 0; font-size: 14px; }
.row-time { color: var(--muted); white-space: nowrap; font-size: 14px; text-align: right; }
.plan-total { font-size: 14px; color: var(--muted); margin-top: 8px; }
.today-tools { display: grid; gap: 16px; }
.tool-links { display: grid; }
.tool-links a { display: flex; align-items: center; gap: 10px; min-height: 48px; border-top: 1px solid #e6eae3; }
.tool-links a:hover { color: var(--green); background: #f6f8f3; }
.tool-links a > .icon:last-child { margin-left: auto; width: 18px; }
.recent-list a { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.recent-list .muted { font-size: 14px; }
input:not([type=checkbox]):not([type=range]), select { min-height: 42px; padding: 0 10px; border: 1px solid #cdd6c8; border-radius: 5px; background: white; max-width: 100%; }
input[type=range] { accent-color: var(--green); height: 24px; cursor: pointer; }
input[type=checkbox] { accent-color: var(--green); width: 18px; height: 18px; }
input::placeholder { color: #778172; }
.studio-tools { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
#exercise-category { width: 145px; }
.search { width: 230px; }
.scale-controls { display: flex; align-items: center; gap: 8px; margin-left: auto; }
#scale-root { width: 78px; }
#scale-mode { width: 190px; }
.exercise-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px 12px; }
.exercise-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 70px; padding: 10px 14px; background: white; border: 1px solid var(--line); border-radius: 5px; text-align: left; }
.exercise-card:hover { background: #f0f5eb; border-color: #b9c9af; }
.exercise-card h3 { font-size: 20px; }
.exercise-score { color: var(--green); flex-shrink: 0; font-size: 16px; }
.catalog-pager { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; font-size: 14px; }
.learning-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.lesson-row { display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 12px 14px; background: white; border: 1px solid var(--line); border-radius: 5px; text-align: left; }
.lesson-row:hover { background: #f0f5eb; }
.lesson-number { width: 24px; color: var(--muted); }
.lesson-row h2 { font-size: 20px; font-weight: 500; }
.lesson-row > .icon { margin-left: auto; }
.stats-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin-bottom: 14px; }
.stat-card { background: white; border: 1px solid var(--line); border-radius: 5px; padding: 10px 14px; display: flex; align-items: baseline; gap: 12px; }
.stat-card strong { font-size: 27px; font-weight: 500; }
.stat-card span { font-size: 14px; color: var(--muted); }
.progress-layout { display: grid; grid-template-columns: 1fr 1.3fr; gap: 14px; margin-bottom: 14px; }
.practice-calendar { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 5px; }
.calendar-day { min-height: 31px; display: grid; place-items: center; border-radius: 3px; font-size: 14px; }
.level-0 { background: #f1f3ed; color: #626e5b; }
.level-1 { background: #e0eacd; }
.level-2 { background: #b8d09e; }
.level-3 { background: #779b62; color: white; }
.skill-bars { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.skill-breakdown summary { font-size: 22px; font-weight: 600; cursor: pointer; }
.skill-breakdown[open] summary { margin-bottom: 10px; }
.skill-bar > div:first-child { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; margin-bottom: 4px; }
.bar-track { height: 4px; border-radius: 3px; background: #edf1e7; }
.bar-track i { display: block; height: 100%; background: #8fa879; border-radius: inherit; }
.session-row { display: flex; align-items: center; gap: 16px; padding: 10px 0; border-top: 1px solid var(--line); }
.session-row > div { flex: 1; }
.session-row > strong { min-width: 48px; text-align: right; font-size: 18px; }
.session-row > span { font-size: 14px; color: var(--muted); }
.session-row strong { font-weight: 500; }
.empty-state { padding: 12px 0; color: var(--muted); font-size: 16px; grid-column: 1/-1; }
.segmented { display: inline-flex; border: 1px solid #cdd6c8; border-radius: 5px; padding: 2px; gap: 2px; background: #f1f4ee; }
.segmented button { min-height: 38px; padding: 0 16px; border-radius: 3px; background: transparent; font-size: 16px; }
.segmented button.active { background: white; color: var(--green); box-shadow: 0 1px 3px #203b2912; }
.settings-tabs { margin-bottom: 14px; }
.settings-grid > .panel { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; align-items: start; }
.settings-grid > .panel > .field-help, .settings-grid > .panel > p, .settings-grid > .panel > .button-row { grid-column: 1/-1; }
.settings-grid > .panel > .btn, .settings-grid > .panel > .text-button { justify-self: start; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 16px; }
.field input:not([type=checkbox]), .field select { width: 100%; }
.two-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field-help { font-size: 14px; line-height: 1.5; color: var(--muted); }
.toggle-field { display: flex; align-items: center; gap: 14px; position: relative; min-height: 42px; cursor: pointer; }
.toggle-field strong { font-size: 16px; font-weight: 500; }
.toggle-field small { display: block; font-size: 14px; color: var(--muted); margin-top: 3px; }
.toggle-field input { position: absolute; right: 0; opacity: 0; }
.toggle-track { width: 38px; height: 22px; flex-shrink: 0; background: #d7dfd0; border-radius: 20px; position: relative; margin-left: auto; }
.toggle-track:before { content: ''; position: absolute; width: 16px; height: 16px; top: 3px; left: 3px; background: white; border-radius: 50%; }
.toggle-field input:checked + .toggle-track { background: #73945f; }
.toggle-field input:checked + .toggle-track:before { transform: translateX(16px); }
.toggle-field input:focus-visible + .toggle-track { outline: 3px solid #92ac91; outline-offset: 3px; }
.connection-state { display: flex; flex-direction: column; gap: 3px; }
.connection-state strong { font-size: 18px; font-weight: 500; }
.button-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.help-list { display: grid; gap: 10px; }
.help-list summary { cursor: pointer; font-size: 18px; font-weight: 500; }
.help-list p { margin-top: 12px; }
.source-list article { border-top: 1px solid var(--line); padding: 14px 0; }
.source-list { margin-top: 14px; }
.source-list h2 { font-size: 20px; }
.source-list a { text-decoration: underline; text-underline-offset: 3px; }
.source-list p { font-size: 16px; }
.practice-layout { display: flex; flex-direction: column; gap: 8px; }
.practice-main { min-width: 0; }
.practice-panel { background: white; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.practice-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px 0; }
.hand-control select { min-width: 145px; }
.score-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 12px 0; }
.score-key { font-size: 16px; color: var(--muted); }
.view-switch { display: flex; gap: 4px; margin-left: auto; }
.view-switch button { background: transparent; padding: 4px 10px; min-height: 40px; font-size: 16px; color: var(--muted); border-bottom: 2px solid transparent; }
.view-switch button.active { color: var(--green); border-bottom-color: #73945f; }
.score-container { height: 190px; display: flex; align-items: center; padding: 0 10px; }
.score-svg { width: 100%; height: 100%; }
.transport { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line); padding: 8px 12px 0; }
.tempo-control { display: flex; align-items: center; gap: 6px; }
.tempo-control label { display: flex; align-items: baseline; gap: 5px; }
.tempo-control strong { font-size: 24px; font-weight: 500; }
.tempo-control span { font-size: 14px; color: var(--muted); }
.tempo-control .icon-button { width: 34px; font-size: 24px; }
.transport-buttons { display: flex; align-items: center; gap: 8px; }
.play-button { min-width: 105px; }
.transport > .icon-button.on { background: #e6eee0; }
.tempo-slider { display: block; width: calc(100% - 24px); margin: 2px 12px 4px; }
.loop-controls { display: flex; align-items: center; gap: 8px; padding: 5px 12px; border-top: 1px solid var(--line); font-size: 16px; }
.loop-controls label { display: flex; align-items: center; gap: 8px; }
.loop-controls select { min-height: 36px; width: 60px; }
.loop-toggle { margin-right: auto; }
.keyboard-panel { margin-top: 8px; background: white; border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; }
.keyboard-top { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; font-size: 14px; color: var(--muted); }
.piano-wrapper { display: flex; align-items: stretch; gap: 6px; height: 112px; }
.piano { flex: 1; position: relative; height: 112px; overflow: hidden; border-radius: 3px; background: #294235; touch-action: none; user-select: none; -webkit-user-select: none; }
.piano-key { position: absolute; top: 2px; display: flex; align-items: flex-end; justify-content: center; padding: 0 0 8px; border-radius: 0 0 3px 3px; touch-action: none; user-select: none; -webkit-user-select: none; }
.white-key { height: 108px; border: 1px solid #c9d1c1; border-top: 0; background: #fffef9; z-index: 1; }
.black-key { height: 67px; background: #2b4033; color: #dee7d5; border: 1px solid #1c3025; z-index: 2; }
.piano-key span { font-size: 14px; pointer-events: none; }
.black-key span { font-size: 12px; }
.white-key.expected { background: #e5eed9; }
.black-key.expected { background: #6d8a5b; }
.piano-key.pressed, .piano-key.hit { background: #98b582; color: #17321c; }
.piano-key.wrong { background: #dbb39f; }
.keyboard-shift { width: 26px; background: transparent; font-size: 26px; color: var(--green); padding: 0; }
.keyboard-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 5px; font-size: 14px; color: var(--muted); }
.keyboard-foot kbd { font-family: inherit; font-size: 14px; }
#played-note { font-size: 18px; color: var(--ink); }
.live-stats { display: flex; justify-content: space-between; gap: 16px; padding: 4px 2px; font-size: 14px; color: var(--muted); }
.live-stats > div { display: flex; align-items: baseline; gap: 8px; }
.live-stats strong { font-size: 18px; font-weight: 500; color: var(--ink); }
.free-controls { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.free-controls #free-note { font-size: 26px; font-weight: 500; margin-left: auto; }
.free-controls #record-time { font-size: 14px; }
.recording { background: #96594c !important; border-color: #96594c !important; }
.recording .icon { fill: currentColor; }
.ear-panel { max-width: 850px; }
.ear-top { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 14px; margin-bottom: 14px; }
.ear-listen { display: flex; gap: 10px; margin: 14px 0; }
.interval-choices { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.interval-choice { min-height: 48px; background: white; border: 1px solid #cdd6c8; border-radius: 5px; font-size: 16px; display: flex; justify-content: center; align-items: center; gap: 8px; }
.interval-choice:hover { background: #edf3e7; }
.interval-choice.correct { opacity: 1; background: #e1eed3; border-color: #a0b98e; }
.interval-choice.incorrect { opacity: 1; background: #f3e1d7; border-color: #d9ae9d; }
.ear-feedback { font-size: 16px; margin: 12px 0; min-height: 24px; }
.modal-open { overflow: hidden; }
.modal-backdrop { position: fixed; inset: 0; z-index: 100; background: #1d302858; display: flex; justify-content: center; align-items: center; padding: 18px; }
.modal { position: relative; width: min(620px,100%); max-height: calc(100dvh - 36px); overflow: auto; background: white; border: 1px solid var(--line); border-radius: 8px; padding: 24px; outline: none; }
.modal-close { position: absolute; right: 8px; top: 8px; }
.modal h2 { font-size: 26px; padding-right: 30px; }
.modal h3 { margin-top: 16px; }
.modal > p { font-size: 16px; margin-top: 12px; }
.modal .button-row { margin-top: 18px; }
.check-list { list-style: none; padding: 0; margin: 14px 0; }
.check-list li { display: flex; align-items: center; gap: 10px; margin: 10px 0; }
.guidance-steps { padding-left: 24px; margin: 14px 0; }
.guidance-steps li { margin: 10px 0; }
.lesson-tip { display: flex; gap: 10px; padding: 12px; background: #f2f5ed; border-radius: 5px; margin-top: 14px; }
.lesson-tip p { font-size: 16px; }
.connection-method { padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--line); }
.connection-method h3 { display: flex; gap: 10px; align-items: center; }
.connection-method p { font-size: 14px; margin: 10px 0; }
.connection-method .field { margin: 12px 0; }
.result-stats { display: flex; justify-content: space-between; gap: 18px; padding: 14px; background: #f2f5ed; border-radius: 5px; margin-top: 16px; }
.result-stats strong { display: block; font-size: 27px; font-weight: 500; white-space: nowrap; }
.result-stats span { display: block; font-size: 14px; color: var(--muted); margin-top: 4px; }
.result-hint { font-size: 16px; }
#toast { position: fixed; bottom: 18px; left: 50%; transform: translate(-50%,12px); background: #244b3e; color: white; border-radius: 6px; padding: 12px 18px; font-size: 16px; max-width: calc(100% - 24px); opacity: 0; pointer-events: none; z-index: 150; }
#toast.visible { opacity: 1; transform: translate(-50%,0); }
@media (max-width:1150px) {
  .app-header { gap: 12px; padding-left: 12px; padding-right: 12px; }
  .nav-link { padding: 0 9px; }
  .help-link { display: none; }
  .header-tools { gap: 4px; }
  .connection-chip { padding: 0 8px; }
  .search { width: 180px; }
  #exercise-category { width: 130px; }
  #scale-mode { width: 165px; }
}
@media (max-width:900px) and (min-width:601px) {
  .app-header { flex-wrap: wrap; gap: 0 12px; }
  .main-nav { order: 3; width: 100%; justify-content: space-between; border-top: 1px solid #edf0e8; margin-top: 5px; }
  .main-nav .nav-link { flex: 1; }
  .help-link { display: inline-flex; }
  .today-layout { grid-template-columns: minmax(0,1fr) 240px; gap: 12px; }
  .plan-row { grid-template-columns: 22px minmax(0,1fr) 48px 18px; gap: 8px; }
  .plan-row .row-meta { display: none; }
  .scale-controls { margin-left: 0; }
  .progress-layout { grid-template-columns: 1fr 1fr; }
  .skill-bars { grid-template-columns: 1fr; gap: 6px; }
  .skill-bar > div:first-child { margin-bottom: 2px; }
}
@media (max-height:760px) and (min-width:601px) {
  #main { padding-top: 10px; padding-bottom: 10px; }
  .page-head { margin-bottom: 10px; }
  .score-container { height: 160px; }
  .practice-toolbar { padding-top: 6px; }
  .piano-wrapper, .piano { height: 102px; }
  .white-key { height: 98px; }
  .black-key { height: 62px; }
}
@media (max-width:600px) {
  .app-header { gap: 8px; min-height: 56px; padding: 4px 10px; }
  .brand { font-size: 26px; }
  .main-nav { display: none; }
  .mobile-route { display: block; }
  .mobile-route select { width: 126px; padding-left: 8px; padding-right: 16px; }
  .header-tools { gap: 0; }
  .connection-chip { min-height: 42px; width: 42px; border: 0; padding: 0; justify-content: center; }
  .connection-chip span, #offline-label { display: none; }
  .connection-chip .status-dot { position: absolute; transform: translate(9px,-8px); }
  .header-tools .icon-button { width: 38px; }
  .header-tools > a[data-nav=settings] { display: none; }
  #main { padding: 12px; }
  .page-head { margin-bottom: 12px; gap: 8px; }
  .page-head h1 { font-size: 26px; gap: 5px; }
  .page-head > .btn { padding: 0 10px; }
  .today-layout { grid-template-columns: 1fr; gap: 12px; }
  .plan-row { grid-template-columns: 22px minmax(0,1fr) 48px 18px; gap: 8px; min-height: 65px; }
  .plan-row .row-meta { display: none; }
  .row-title { font-size: 18px; }
  .practice-plan { padding: 10px 12px; }
  .today-tools { gap: 12px; }
  .tool-links a { min-height: 46px; }
  .studio-tools { gap: 8px; }
  #exercise-category { width: 120px; }
  .search { width: 0; min-width: 0; flex: 1; }
  .scale-controls { margin-left: 0; width: 100%; gap: 6px; }
  #scale-root { width: 64px; }
  #scale-mode { width: 0; min-width: 0; flex: 1; }
  .scale-controls .btn { padding: 0 10px; }
  .exercise-grid, .learning-list { grid-template-columns: 1fr; }
  .exercise-card { min-height: 68px; padding: 9px 12px; }
  .exercise-card h3 { font-size: 20px; }
  .lesson-row { min-height: 66px; padding: 10px 12px; }
  .lesson-row h2 { font-size: 20px; }
  .stats-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .stat-card { padding: 8px 10px; gap: 8px; }
  .progress-layout { grid-template-columns: 1fr; gap: 12px; }
  .settings-grid > .panel { display: flex; flex-direction: column; gap: 14px; padding: 14px; }
  .settings-grid .field, .settings-grid .two-fields, .settings-grid .toggle-field { width: 100%; }
  .settings-tabs { display: flex; width: 100%; }
  .settings-tabs button { flex: 1; padding: 0 10px; }
  .two-fields { gap: 10px; }
  .practice-toolbar { padding: 6px 8px 0; gap: 8px; flex-wrap: wrap; }
  .practice-toolbar .view-switch { order: 3; margin: 0; }
  .practice-toolbar .hand-control { margin-left: auto; }
  .segmented button { padding: 0 10px; min-height: 38px; }
  .hand-control select { min-width: 0; max-width: 130px; padding-left: 6px; }
  .page-head:has(+ .practice-layout) { flex-wrap: wrap; }
  .page-head:has(+ .practice-layout) > .btn { padding: 0 10px; }
  .page-head:has(+ .practice-layout) > .btn .icon { width: 21px; height: 21px; }
  .score-heading { padding: 3px 8px 0; }
  .score-container { height: 165px; padding: 0; }
  .transport { gap: 4px; padding: 6px 6px 0; }
  .tempo-control { gap: 0; }
  .tempo-control .icon-button { width: 27px; }
  .tempo-control label { display: flex; flex-direction: column; align-items: center; gap: 0; line-height: 1.1; }
  .tempo-control strong { font-size: 24px; }
  .tempo-control span { font-size: 14px; }
  .transport-buttons { gap: 4px; }
  .transport-buttons > .icon-button { width: 28px; }
  .transport-buttons .btn { padding: 0 10px; }
  .play-button { min-width: 85px; }
  .transport > .icon-button { width: 32px; }
  .loop-controls { padding: 5px 8px; gap: 6px; }
  .loop-controls label { gap: 5px; }
  .loop-controls select { width: 52px; padding-left: 7px; }
  .keyboard-panel { padding: 8px; }
  .piano-wrapper { gap: 4px; }
  .keyboard-shift { width: 20px; }
  .live-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 14px; padding: 0; }
  .live-stats > div { justify-content: space-between; }
  .free-controls { flex-wrap: wrap; }
  .free-controls #record-time { flex: 1; }
  .free-controls #free-note { width: 100%; text-align: right; }
  .interval-choices { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .ear-panel { padding: 14px; }
  .ear-listen { gap: 8px; }
  .ear-listen .btn { padding: 0 10px; }
  .modal { padding: 24px 18px; }
  .modal h2 { font-size: 26px; }
  .result-stats { gap: 10px; padding: 12px; }
  .result-stats strong { font-size: 24px; }
}
@media (pointer:coarse) {
  .btn, .icon-button, .connection-chip { min-height: 44px; }
  .segmented button { min-height: 40px; }
  input:not([type=checkbox]):not([type=range]), select { min-height: 44px; }
}
@media (prefers-reduced-motion:reduce) {
  *, *:before, *:after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}