.bottom-grid { grid-template-columns: minmax(0, 1fr); }
.practice-playground-link { display:block; margin:20px 10px 0; padding:15px 12px; border:1px solid #d9e2cf; border-radius:10px; background:#edf1e4; color:#386047; font-size:13px; font-weight:800; text-decoration:none; }
.practice-playground-link span { display:block; margin-top:6px; font-size:10px; font-weight:600; color:#7a8970; }
.result-game-link { display:block; margin-top:20px; padding-top:17px; border-top:1px solid #e1e7dc; color:#426949; font-size:12px; line-height:1.8; text-decoration:none; }
.result-game-link:hover { text-decoration:underline; }
.target.sequence-target { flex-wrap: wrap; overflow: visible; white-space: normal; font-size: clamp(18px, 2.5vw, 30px); gap: 8px 0; line-height: 1.5; }
.target-group { display: inline-flex; white-space: nowrap; }
.target-space { color: #8d998f; }
.target-space.current { background: #edf5e9; border-radius: 4px; }
.prerequisite-hint { display: block; margin-top: 4px; font-size: 9px; font-weight: 600; white-space: normal; }
.guide-toggles { display: flex; align-items: center; justify-content: flex-end; gap: 16px; }
.hands-toggle { display: flex; align-items: center; gap: 7px; color: #718276; font-size: 12px; cursor: pointer; }
.hands-toggle input { accent-color: #4387d5; }
.finger-coach { overflow: hidden; border: 1px solid #dfe6e3; border-radius: 8px; background: #fff; }
.coach-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 19px; border-bottom: 1px solid #edf0ed; }
#finger-hint { color: #3776bd; font-size: 12px; font-weight: 800; }
.typing-pace { flex: none; color: #8b968e; font-size: 11px; }
.typing-pace strong { margin-right: 4px; color: #354e40; font: 500 20px 'DM Mono', monospace; }
.keyboard-scroll { overflow-x: auto; padding: 16px 16px 0; scrollbar-width: thin; }
.keyboard-stage { position: relative; min-width: 600px; aspect-ratio: 900 / 440; }
.keyboard-stage.without-hands { aspect-ratio: 900 / 270; }
.keyboard { position: absolute; inset: 0 0 auto; padding: 0; border: 0; border-radius: 0; background: transparent; }
.keyboard-row { height: auto; aspect-ratio: 900 / 52; gap: 0; margin: 0; }
.keyboard-key { position: relative; display: flex; flex: 0 0 calc(100% * var(--key-width) / 15 - 4px); flex-direction: column; justify-content: center; align-items: center; align-self: stretch; width: auto; height: auto; margin: 2px; border: 1px solid #d6ded8; border-bottom: 3px solid #cbd5ce; border-radius: 5px; background: #fcfdfb; color: #5f6f64; font: 500 clamp(12px, 1.5vw, 19px) 'DM Mono', monospace; }
.keyboard-key small { color: #8d9a90; font-size: .65em; line-height: 1.2; }
.keyboard-key.function-key { font: 600 clamp(9px, .9vw, 12px) 'Nunito', 'Noto Sans SC', sans-serif; color: #94a096; }
.keyboard-key.home-key { background: #f0f5ef; }
.key-bump { position: absolute; bottom: 3px; width: 10px; height: 2px; border-radius: 2px; background: currentColor; opacity: .65; }
.keyboard-key.highlight { transform: none; background: #7bb8f3; border-color: #4f95df; color: #123f72; box-shadow: 0 0 0 1px #4f95df, 0 3px 9px #4e8fd32b; }
.keyboard-key.highlight small { color: #285e98; }
.keyboard-key.pressed { transform: translateY(2px); background: #cbe9d3; border-color: #67a57a; box-shadow: none; }
.keyboard-key.wrong-key { background: #ffe0da; border-color: #d77968; color: #9f3f31; }
.hand-guide { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hand-guide[hidden] { display: none; }
.hand-body { fill: #bfc1c622; fill-opacity: .5; }
.hand-outline, .finger-dividers, .joint-folds { stroke-opacity: .5; }
.hand-outline, .finger-dividers { fill: none; stroke: #9da2a7; stroke-width: 2.7; stroke-linecap: round; stroke-linejoin: round; }
.finger-dividers { stroke: #a3a8ad; stroke-width: 2.2; }
.finger-fill { fill: none; }
.joint-folds { fill: none; stroke: #8f99a17a; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.finger-contact { fill: #5187cf; opacity: 0; }
.rig-finger.active .finger-fill { fill: url(#active-finger-wash); }
.rig-finger.active .joint-folds { stroke: #638ab59c; }
.rig-finger[data-phase="press"] .finger-contact { opacity: .8; }
.rig-finger.is-error .finger-fill { fill: #d77e6330; }
.rig-finger.is-error .joint-folds { stroke: #b56d5c99; }
.rig-finger.is-error .finger-contact { fill: #c66b58; }
.keyboard-note { margin: 0; padding: 12px 19px; border-top: 1px solid #edf0ed; color: #87978a; line-height: 1.7; }
.keyboard-note .note-orb { flex: none; background: #6b9dd7; }
.level-item.login-required { color: #8a6a27; background: #fff8e8; }
.level-item.login-required .level-status { font-size: 10px; color: #a77a22; }
.rewards-section { display: grid; grid-template-columns: 1fr 1.4fr; align-items: center; column-gap: 20px; }
.rewards-section .section-heading { margin: 0; }
.rewards-section .reward-feature { grid-column: 2; grid-row: 1 / 3; min-height: 105px; padding: 15px 22px; }
.rewards-section .reward-footer { grid-column: 1; margin-top: 8px; }
@media (max-width: 680px) {
  .guide-toggles { gap: 10px; }
  .coach-toolbar { padding: 12px; gap: 8px; }
  #finger-hint { font-size: 11px; }
  .typing-pace { font-size: 10px; }
  .typing-pace strong { font-size: 17px; }
  .keyboard-scroll { padding: 12px 10px 0; }
  .keyboard-note { padding: 10px 12px; }
  .rewards-section { display: block; }
  .rewards-section .section-heading { margin-bottom: 15px; }
  .rewards-section .reward-footer { margin-top: 12px; }
}