main { margin-top:22px; }
.hit:hover { fill:transparent!important; }
@media (min-width: 801px) {
  .card { display:grid; grid-template-columns:270px minmax(0,1fr); grid-template-areas:"settings question" "settings paper" "settings feedback" "settings actions"; gap:0 18px; overflow:visible; border:0; background:transparent; box-shadow:none; }
  .question { grid-area:question; min-height:108px; padding:20px 22px; border:1px solid rgba(23,37,34,.14); border-radius:22px 22px 0 0; background:#fffdfa; }
  .question h1 { font-size:clamp(25px,3vw,36px); }
  .train-sidebar { grid-area:settings; min-height:100%; display:flex; flex-direction:column; overflow:hidden; border:1px solid rgba(23,37,34,.14); border-radius:22px; background:#fffdfa; box-shadow:0 18px 45px rgba(42,48,44,.08); }
  .ear-settings,.construction-guide { display:block; padding:20px; border:0; border-radius:0; background:transparent; box-shadow:none; }
  .setting-group + .setting-group { margin-top:18px; padding-top:18px; border-top:1px solid #e8e3d8; }
  .choice-row { display:grid; grid-template-columns:1fr; }
  .choice-row button { width:100%; min-height:50px; padding:9px 10px; border-radius:11px; }
  #dict-levels,#construction-levels,#sound-modes,#construction-sound-modes { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .compact-options { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .compact-options button { min-height:48px; padding:8px 6px; text-align:center; }
  .choice-row button.active { box-shadow:inset 3px 0 #236b62; }
  .paper { grid-area:paper; display:block; padding:0 18px 18px; border:1px solid rgba(23,37,34,.14); border-top:0; background:#fffdfa; }
  .feedback { grid-area:feedback; }
  .card footer { grid-area:actions; border:1px solid rgba(23,37,34,.14); border-top:0; border-radius:0 0 22px 22px; }
  .card footer { height:74px; min-height:74px; }
  .card footer>span { min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
  .train-sidebar .listen-panel { min-height:190px; margin-top:auto; border:0; border-top:1px solid #e8e3d8; border-radius:0; box-shadow:none; }
}
.construction-guide>small { display:block; margin-bottom:7px; color:#6f7b77; font-size:10px; font-weight:800; letter-spacing:.08em; }
.construction-guide h2 { margin:18px 0 12px; padding-top:18px; border-top:1px solid #e8e3d8; color:#6f7b77; font-size:10px; font-weight:800; letter-spacing:.08em; }
.construction-sound-modes { display:grid; gap:6px; margin-top:0; }
.construction-sound-modes button { min-height:54px; padding:11px 13px; border:1px solid #ded9ce; border-radius:12px; background:#fff; color:#63706c; text-align:left; font-size:11px; font-weight:800; line-height:1.2; }
.construction-sound-modes button small { display:block; margin-top:3px; color:#919a96; font-size:8px; font-weight:500; line-height:1.35; }
.construction-sound-modes button.active { border-color:#236b62; background:#edf7f3; color:#236b62; box-shadow:inset 3px 0 #236b62; }
.construction-guide ol { display:grid; gap:8px; margin:0; padding:0; list-style:none; }
.construction-guide li { display:grid; grid-template-columns:32px 1fr; align-items:center; gap:8px; min-height:54px; padding:8px 10px; border:1px solid #ded9ce; border-radius:12px; background:#fff; }
.construction-guide li b { color:#236b62; font:italic 700 16px Georgia,serif; }
.construction-guide li span { color:#63706c; font-size:11px; font-weight:800; line-height:1.2; }
.construction-guide li small { display:block; margin-top:3px; color:#919a96; font-size:8px; font-weight:500; line-height:1.35; }
.listen-panel { min-height:220px; position:relative; display:grid; place-items:center; overflow:hidden; border-bottom:1px solid #eee9de; background:linear-gradient(180deg,#fffefa,#faf7ef); }
.listen-panel .sound-rings { position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; }
.listen-panel .sound-rings i { position:absolute; width:132px; height:132px; border:1px solid rgba(35,107,98,.12); border-radius:50%; }
.listen-panel .sound-rings i:nth-child(2) { width:158px; height:158px; }
.listen-panel .sound-rings i:nth-child(3) { width:184px; height:184px; }
.listen-panel.is-playing .sound-rings i { animation:sound-pulse 1.8s ease-out infinite; }
.listen-panel.is-playing .sound-rings i:nth-child(2) { animation-delay:.35s; }
.listen-panel.is-playing .sound-rings i:nth-child(3) { animation-delay:.7s; }
@keyframes sound-pulse { 0%{opacity:.15;transform:scale(.72)} 35%{opacity:.72} 100%{opacity:0;transform:scale(1.12)} }
@media (prefers-reduced-motion:reduce) { .listen-panel.is-playing .sound-rings i { animation:none; opacity:.55; } }
.listen-panel .play { position:relative; z-index:2; width:116px; height:116px; min-height:116px; display:block; padding:18px 8px; border-radius:50%; text-align:center; box-shadow:0 15px 35px rgba(18,38,32,.25); }
.listen-panel .play>span { width:auto; height:auto; display:block; margin:0 auto 7px; background:transparent; font-size:24px; }
.listen-panel .play b,.listen-panel .play small { display:block; }
.listen-panel .play small { margin-top:5px; }
.listen-panel[hidden],.listen-panel .play[hidden],.ear-settings[hidden],.construction-guide[hidden] { display:none!important; }
.paper { position:relative; }
.staff-labels { position:absolute; z-index:2; left:18px; right:18px; bottom:3px; display:flex; justify-content:center; gap:18%; color:#84908c; font-size:10px; pointer-events:none; user-select:none; }
.staff-labels.harmonic span:first-child { display:none; }
.staff-labels.harmonic { gap:0; }
.enharmonic-switch { position:absolute; z-index:3; left:50%; bottom:24px; width:max-content; max-width:calc(100% - 20px); min-height:38px; display:flex; align-items:center; justify-content:center; gap:7px; margin:0; padding:3px 7px; transform:translateX(-50%); border:1px solid rgba(216,212,202,.82); border-radius:11px; background:rgba(255,253,250,.94); color:#6f7b77; font-size:10px; font-weight:800; box-shadow:0 5px 14px rgba(23,37,34,.08); }
.enharmonic-switch[hidden] { display:none!important; }
.enharmonic-switch button { min-width:58px; min-height:32px; padding:6px 10px; border:1px solid #d8d4ca; border-radius:9px; background:#fff; color:#63706c; font-size:11px; font-weight:800; }
.enharmonic-switch button.active { border-color:#236b62; background:#edf7f3; color:#236b62; }
.accidentals button.active { border-color:#236b62; background:#edf7f3; color:#236b62; }

/* Calm, tactile feedback without changing document flow. */
.modes button,.choice-row button,.construction-sound-modes button,.enharmonic-switch button,.card footer button,.listen-panel .play {
  transform:translateZ(0);
  transition:transform .16s ease,background-color .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease,opacity .2s ease;
  -webkit-tap-highlight-color:transparent;
}
@media (hover:hover) {
  .modes button:hover,.choice-row button:hover,.construction-sound-modes button:hover,.enharmonic-switch button:hover,.card footer button:not(:disabled):hover { transform:translateY(-1px); }
  .listen-panel .play:not(:disabled):hover { transform:scale(1.025); }
}
.modes button:active,.choice-row button:active,.construction-sound-modes button:active,.enharmonic-switch button:active,.card footer button:not(:disabled):active { transform:scale(.975); transition-duration:.07s; }
.listen-panel .play:not(:disabled):active { transform:scale(.955); transition-duration:.07s; }
.modes button.active,.choice-row button.active,.construction-sound-modes button.active,.enharmonic-switch button.active { animation:option-select .24s ease-out; }
.card footer button:not(:disabled) { box-shadow:0 8px 18px rgba(228,92,58,.16); }
.card footer button:not(:disabled):active { box-shadow:0 3px 9px rgba(228,92,58,.12); }
@keyframes option-select { 0%{transform:scale(.975)} 65%{transform:scale(1.012)} 100%{transform:scale(1)} }
@media (prefers-reduced-motion:reduce) {
  .modes button,.choice-row button,.construction-sound-modes button,.enharmonic-switch button,.card footer button,.listen-panel .play { animation:none!important; transition:none!important; transform:none!important; }
}
@media (max-width:800px) {
  .train-sidebar { display:grid; gap:0; overflow:hidden; margin-bottom:14px; border:1px solid rgba(23,37,34,.14); border-radius:18px; background:#fffdfa; }
  .train-sidebar .ear-settings,.train-sidebar .construction-guide { display:block; padding:16px; border:0; border-radius:0; box-shadow:none; }
  .setting-group + .setting-group { margin-top:14px; padding-top:14px; border-top:1px solid #e8e3d8; }
  #dict-levels,#construction-levels,#sound-modes,#construction-sound-modes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .compact-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
  .choice-row button,.construction-sound-modes button { min-width:0; min-height:48px; padding:8px 9px; }
  .compact-options button { padding:8px 5px; text-align:center; }
  .train-sidebar .listen-panel { min-height:176px; border:0; border-top:1px solid #e8e3d8; border-radius:0; }
  .listen-panel .sound-rings i:nth-child(3) { width:min(164px,82vw); height:min(164px,82vw); }
}
@media (max-width:560px) {
  html,body { max-width:100%; overflow-x:hidden; }
  main { width:calc(100% - 20px); margin-top:14px; }
  .card,.train-sidebar,.ear-settings,.construction-guide,.setting-group,.choice-row,.question,.paper,.card footer { width:100%; min-width:0; max-width:100%; }
  .modes { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin-bottom:10px; }
  .modes button { min-width:0; min-height:58px; padding:9px 10px; grid-template-columns:28px minmax(0,1fr); border-radius:12px; }
  .modes i { font-size:17px; }
  .modes b { font-size:12px; }
  .modes small { font-size:8px; }
  .question { min-height:0; padding:16px; gap:12px; }
  .question h1 { font-size:clamp(24px,9vw,34px); overflow-wrap:anywhere; }
  .question p { font-size:12px; line-height:1.55; overflow-wrap:anywhere; }
  .train-sidebar { margin-bottom:10px; border-radius:14px; }
  .train-sidebar .ear-settings,.train-sidebar .construction-guide { padding:10px; }
  .setting-group + .setting-group { margin-top:9px; padding-top:9px; }
  .setting-group>span { margin-bottom:5px; font-size:9px; }
  #dict-levels,#construction-levels { grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; }
  #sound-modes,#construction-sound-modes { grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; }
  .compact-options { gap:5px; }
  .choice-row { overflow:hidden; }
  .choice-row button,.construction-sound-modes button { width:auto!important; min-width:0; max-width:100%; min-height:42px; padding:6px 5px; font-size:10px; border-radius:8px; }
  #dict-levels button small,#construction-levels button small { display:none; }
  .choice-row button small,.construction-sound-modes button small { margin-top:2px; font-size:7px; line-height:1.2; }
  .train-sidebar .listen-panel { min-height:132px; }
  .listen-panel .play { width:92px; height:92px; min-height:92px; padding:12px 5px; }
  .listen-panel .play>span { margin-bottom:3px; font-size:19px; }
  .listen-panel .sound-rings i { width:100px; height:100px; }
  .listen-panel .sound-rings i:nth-child(2) { width:112px; height:112px; }
  .listen-panel .sound-rings i:nth-child(3) { width:124px; height:124px; }
  .paper { width:100%; min-width:0; padding:8px; overflow:visible; }
  .staff-labels { left:8px; right:8px; bottom:1px; font-size:9px; }
  #staff { width:100%; max-width:100%; min-width:0; height:auto; touch-action:none; border-radius:12px; }
  .enharmonic-switch { bottom:12px; width:max-content; max-width:calc(100% - 16px); }
  .card footer { min-height:64px; padding:10px 12px; gap:10px; }
  .card footer { height:auto; }
  .card footer>span { min-width:0; font-size:10px; }
  .card footer button { min-width:118px; padding:11px 12px; }
  .tip { padding:11px 12px; }
}