/* Fluid desktop layout, including small windows and browser zoom. */
body { padding: clamp(16px, 2.5vw, 48px); }
.app-layout { grid-template-columns: 220px minmax(0, 1fr) 190px; gap: clamp(20px, 2vw, 36px); max-width: 1680px; }
.main-content, .sidebar-right, #tutor-view { min-width: 0; }
.sidebar-left { padding: 12px 0; }
.sidebar-right > .stat-card { border: 1px solid var(--border); border-radius: 14px; padding: 20px; gap: 6px; }
.stat-sub { font-size: 12px; color: var(--text-muted); }
.lesson-info, .level-pills { white-space: normal; }
.lesson-title, .lesson-meta { line-height: 1.5; overflow-wrap: anywhere; }
.nav-content { margin-left: 14px; padding: 12px; }
.level-pills { display: flex; flex-direction: column; gap: 8px; }
.level-pill { appearance: none; display: block; font: inherit; font-size: 13px; line-height: 1.4; padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--text-muted); text-align: left; cursor: pointer; }
.level-pill.active { background: var(--pill-active-bg); color: var(--pill-active-text); border-color: var(--pill-active-bg); }
.level-pill.completed { background: var(--success-bg-soft); color: var(--success-text); border-color: var(--success-border); }
.app-layout .sidebar-left .level-pill:hover:not(.disabled-ui) {
  background: color-mix(in srgb, var(--accent) 22%, var(--bg));
  border-color: var(--accent);
  color: var(--text);
}
.top-toolbar { min-height: 44px; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.toolbar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.icon-btn { display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: 8px; width: auto; height: auto; min-height: 36px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; background: transparent; color: var(--text); font: inherit; font-size: 13px; white-space: nowrap; }
.icon-btn > span { position: static; }
.pattern-dashboard { display: flex; flex-direction: column; height: auto; min-height: 0; padding: 16px 20px; border: 1px solid var(--border); border-radius: 16px; gap: 10px; }
.pattern-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
#pattern-display { padding: 12px 16px; min-height: 0; overflow-wrap: anywhere; }
.pattern-letter { font-size: clamp(26px, 2.2vw, 36px); }
.pattern-reveal { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 240ms ease, margin-top 240ms ease; }
.pattern-reveal-inner { min-height: 0; overflow: hidden; }
.pattern-reveal:has(#pattern-display.hidden) { grid-template-rows: 0fr; margin-top: -10px; }
.repetition-progress { position: static; width: 100%; min-width: 0; flex-shrink: 0; }
.progress-caption { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; color: var(--text-muted); font-size: 12px; }
#repetition-progress { appearance: none; display: block; width: 100%; height: 6px; border: 0; border-radius: 99px; overflow: hidden; background: var(--border); color: var(--accent); }
#repetition-progress::-webkit-progress-bar { background: var(--border); border-radius: 99px; }
#repetition-progress::-webkit-progress-value { background: var(--accent); border-radius: 99px; }
#repetition-progress::-moz-progress-bar { background: var(--accent); border-radius: 99px; }
.workspace { padding-bottom: 100px; margin-top: 32px; margin-bottom: 16px; }
.keyboard { max-width: 900px; padding: 12px; border-radius: 18px; }
.key { height: clamp(42px, 3.3vw, 58px); }
.controls { padding: 20px 12px; text-align: center; }
.status { margin: 0; line-height: 1.6; }
.color-picker { flex-wrap: wrap; }
button:focus-visible, select:focus-visible, .color-swatch:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.toggle-switch input:focus-visible + .slider { outline: 3px solid var(--accent); outline-offset: 3px; }
.app-layout.sidebar-closed { grid-template-columns: minmax(0, 1fr) 190px; }
.app-layout.sidebar-closed .sidebar-left { display: none; }
/* Keep the practice area wide enough for a full keyboard. */
@media (max-width: 1279px) {
  .app-layout { grid-template-columns: 210px minmax(0, 1fr); }
  .sidebar-right { grid-column: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .sidebar-right > .stat-card { padding: 16px; }
  .app-layout.sidebar-closed { grid-template-columns: minmax(0, 1fr); }
  .app-layout.sidebar-closed .sidebar-right { grid-column: 1; }
}
@media (max-width: 980px) {
  .app-layout { grid-template-columns: minmax(0, 1fr); }
  .main-content { grid-row: 1; }
  .sidebar-right { grid-column: 1; grid-row: 2; }
  .sidebar-left { grid-row: 3; }
  .level-pills { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}
@media (max-width: 600px) {
  body { padding: 12px; }
  .sidebar-right { grid-template-columns: minmax(0, 1fr); }
  .keyboard { padding: 6px; }
  .kb-row { gap: 2px; }
  .key { min-width: 0; font-size: 10px; }
  .key.modifier { font-size: 8px; }
  .workspace { overflow: clip; }
}
/* Safe centering allows tall dialogs to scroll from their first heading. */
.mode-selection-overlay, .results-overlay { overflow-y: auto; padding: clamp(20px, 3vw, 48px); justify-content: flex-start; }
.mode-selection-content, .results-content { flex-shrink: 0; margin-block: auto; }
.mode-selection-content { width: 100%; max-width: 1080px; }
.mode-selection-content h2, .results-title { font-size: clamp(32px, 4vw, 56px); text-align: center; }
.mode-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mode-card-btn { width: 100%; padding: clamp(20px, 2vw, 32px); }
.stats-grid { gap: 24px; }
.grid-col { min-width: 0; }
.results-subtitle-wrapper { margin-bottom: 32px; }
.stats-grid { margin-bottom: 32px; }
@media (max-width: 700px) { .mode-cards { grid-template-columns: 1fr; } }
@media (max-height: 700px) {
  body { padding-block: 16px; }
  .mode-selection-content p { margin-bottom: 24px; }
  .mode-card-btn p { margin-bottom: 0; }
  .pattern-dashboard { padding-block: 12px; }
  #pattern-display { padding-block: 10px; }
  .workspace { margin-top: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Settings live in the left navigation; practice owns the remaining width. */
.key.target, .key.hint {
  background: color-mix(in srgb, var(--accent) 14%, var(--key-bg));
  color: var(--text);
  border: 2px solid var(--accent);
  font-weight: 700;
  opacity: 1;
  z-index: 11;
}
.hand-svg .finger.active { fill: var(--accent); opacity: 0.3; }
.app-layout { grid-template-columns: 220px minmax(0, 1fr); max-width: 1440px; }
.app-layout.sidebar-closed { grid-template-columns: minmax(0, 1fr); }
.sidebar-menu summary { list-style: none; }
.sidebar-menu summary::-webkit-details-marker { display: none; }
.menu-label { display: inline-flex; align-items: center; gap: 8px; }
.menu-chevron { color: var(--text-muted); transition: transform 160ms ease; }
.sidebar-menu[open] > summary > .menu-chevron { transform: rotate(180deg); }
.settings-sections { margin-left: 12px; border-left: 1px solid var(--border); padding-left: 4px; }
.sidebar-menu-content { display: flex; flex-direction: column; gap: 8px; padding: 8px 16px 16px; }
.sidebar-menu .color-picker { margin-top: 0; gap: 10px; }
.sidebar-menu .color-swatch { padding: 0; flex: 0 0 26px; height: 26px; }
.sidebar-menu summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.glow-circle { background: #101522; border: 2px solid #52617b; isolation: isolate; }
.glow-circle::before { display: none; }
.glow-circle .stat-value { color: #f8fafc; font-weight: 500; }
.glow-circle .stat-label, .glow-circle .stat-unit { color: #cbd5e1; }
body.showing-results { overflow: hidden; }
@media (max-width: 980px) { .app-layout { grid-template-columns: minmax(0, 1fr); } }

#sidebar-toggle:disabled { cursor: default; opacity: 0.5; background: transparent; }

.menu-copyright { margin-top: 24px; padding: 16px; border-top: 1px solid var(--border); color: var(--text-muted); font-size: 12px; }

/* Continuous silhouette keeps the fingers and palm seamless. */
.illustrated-hand .hand-art { opacity: .3; }
.illustrated-hand .hand-skin { fill: var(--skin-fill); stroke: #d8b397; stroke-width: .65; stroke-linejoin: round; }
.illustrated-hand .hand-nail { fill: #f3d9c5; stroke: #b99179; stroke-width: .55; opacity: .75; }
.illustrated-hand .hand-detail { fill: none; stroke: #855f4e; stroke-width: .8; stroke-linecap: round; opacity: .45; }
.illustrated-hand .palm-detail { opacity: .28; }
.illustrated-hand .finger .finger-tint { fill: var(--finger-fill); opacity: 0; stroke: none; }
.illustrated-hand .finger.active { opacity: 1; }
.illustrated-hand .finger.active .finger-tint { opacity: 1; }
.illustrated-hand .finger { transform-box: fill-box; transform-origin: center; transition: transform 100ms ease; }

.illustrated-hand .hand-volume { stroke: none; }
.illustrated-hand .hand-ridge { fill: none; stroke: #f7d1ae; stroke-width: 5; stroke-linecap: round; opacity: .13; }
.illustrated-hand .thumb-contour { fill: none; stroke: #704b38; stroke-width: 1.8; stroke-linecap: round; opacity: .18; }
.illustrated-hand .hand-nail { fill: #e8bea5; stroke: #f6d8c1; stroke-width: .6; opacity: .55; }
.illustrated-hand .hand-detail { stroke-width: .65; opacity: .32; }
.illustrated-hand .hand-skin { stroke-width: .5; }

#install-app[hidden] { display: none; }

/* Selected level's lesson menu in the homepage sidebar. */
.current-level-menu > summary{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;list-style:none;padding:12px 14px;color:var(--text);background:var(--card);border:1px solid var(--border);border-radius:8px;margin-bottom:12px;transition:background .15s,border-color .15s}
.current-level-menu > summary::-webkit-details-marker{display:none}
.current-level-menu .level-menu-chevron{flex-shrink:0;transition:transform .15s}
.current-level-menu[open] .level-menu-chevron{transform:rotate(180deg)}
.current-level-menu > summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}
@media(prefers-reduced-motion:reduce){.current-level-menu .level-menu-chevron{transition:none}}

.current-level-menu > summary:hover{background:color-mix(in srgb,var(--accent) 22%,var(--bg));border-color:var(--accent)}
.current-level-menu > summary:active{background:color-mix(in srgb,var(--accent) 30%,var(--bg));border-color:var(--accent)}
@media(prefers-reduced-motion:reduce){.current-level-menu > summary{transition:none}}

#keyboard .key, #guide-keyboard .key{cursor:default;user-select:none}

.settings-sections #audio-toggle{justify-content:flex-start;gap:8px}.settings-sections #audio-icon{display:flex;width:18px;height:18px}.settings-sections #audio-icon svg{width:18px;height:18px}

.practice-timer{display:flex;align-items:center;gap:8px;order:1}.practice-timer #practice-time{font-size:20px;font-variant-numeric:tabular-nums;min-width:48px}.practice-timer .stat-label{font-size:12px}

#practice-start-pause{width:30px;height:30px;min-height:30px;padding:0;border-radius:50%;color:var(--accent)}#practice-start-pause:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 15%,var(--bg))}

#practice-start-pause svg{width:14px;height:14px}.app-page-frame{position:fixed;inset:0;width:100%;height:100dvh;border:0;background:var(--bg);z-index:2000}body.viewing-app-page{overflow:hidden}

.practice-timer{column-gap:8px;flex-wrap:nowrap}#practice-start-pause{flex:0 0 30px;margin-inline-start:0}

.pattern-visual-controls{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left}.pattern-visual-controls .pattern-rep{align-self:flex-start;margin:0}

/* Desktop-only workspace: narrow windows scroll instead of stacking panels. */
body{min-width:1100px;box-sizing:border-box}
.app-layout{grid-template-columns:220px minmax(0,1fr);min-width:1000px}
.app-layout .sidebar-left{grid-column:1;grid-row:1}
.app-layout .main-content{grid-column:2;grid-row:1}
.app-layout .level-pills{display:flex;flex-direction:column}

#practice-start-pause svg{pointer-events:none}

/* Keep hand silhouettes legible against the pale keyboard in Light mode. */
:root[data-theme="light"] .illustrated-hand .hand-art { opacity: .58; }
:root[data-theme="light"] .illustrated-hand .hand-skin { stroke: #80543e; stroke-width: 1.2; }
:root[data-theme="light"] .illustrated-hand .hand-nail { stroke: #91634b; opacity: .8; }
:root[data-theme="light"] .illustrated-hand .hand-detail { stroke: #704a36; opacity: .65; }
:root[data-theme="light"] .illustrated-hand .palm-detail { opacity: .45; }
:root[data-theme="light"] .illustrated-hand .thumb-contour { opacity: .35; }

/* Keep hands and finger details visible against the Night keyboard. */
:root[data-theme="dark"] .illustrated-hand .hand-art { opacity: .58; }
:root[data-theme="dark"] .illustrated-hand .hand-skin { stroke: #e8bea5; stroke-width: 1.2; }
:root[data-theme="dark"] .illustrated-hand .hand-nail { stroke: #f6d8c1; opacity: .8; }
:root[data-theme="dark"] .illustrated-hand .hand-detail { stroke: #704a36; opacity: .65; }
:root[data-theme="dark"] .illustrated-hand .palm-detail { opacity: .45; }
:root[data-theme="dark"] .illustrated-hand .thumb-contour { opacity: .35; }

/* Soft navigation rail with rounded rows and aligned icons. */
:root { --sidebar-surface: #e9e9ed; --sidebar-selection: #fff; }
:root[data-theme="dark"] { --sidebar-surface: #111423; --sidebar-selection: #242a3d; }
.app-layout .sidebar-left {
  box-sizing: border-box;
  background: var(--sidebar-surface);
  border-radius: 24px;
  padding: 12px !important;
  min-height: calc(100vh - 64px);
}
.sidebar-left .nav-group { margin-bottom: 6px; }
.sidebar-left .nav-header {
  box-sizing: border-box; min-height: 46px; padding: 12px;
  border-radius: 14px; font-weight: 500; gap: 12px;
}
.sidebar-left .nav-header > div, .sidebar-left .menu-label { gap: 14px !important; }
.sidebar-left .nav-header svg { flex-shrink: 0; }
.sidebar-left .nav-header > div > svg, .sidebar-left .menu-label > svg { width: 20px; height: 20px; }
.sidebar-left .nav-header:hover, .sidebar-left .nav-header[aria-expanded="true"],
.sidebar-left #settings-menu[open] > summary { background: var(--sidebar-selection); color: var(--text); }
.sidebar-left .nav-header:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sidebar-left .nav-content { border: 0; margin: 0; padding: 4px 4px 0; gap: 0; }
.sidebar-left .current-level-menu > summary { border-color: transparent; border-radius: 12px; background: transparent; padding: 10px 8px; margin-bottom: 2px; }
.sidebar-left .current-level-menu > summary:hover { background: var(--sidebar-selection); border-color: var(--accent); }
.sidebar-left .level-pill { border-radius: 12px; background: transparent; border-color: transparent; padding: 11px 12px; }
.sidebar-left .level-pill.active { background: var(--sidebar-selection); color: var(--text); border-color: transparent; font-weight: 600; }
.sidebar-left .level-pill.completed:not(.active) { color: var(--success-text); }
.sidebar-left .settings-sections { border: 0; margin-left: 8px; padding-left: 0; }
.sidebar-left .sidebar-menu-content { padding: 6px 4px 12px; }
.sidebar-left #audio-toggle { justify-content: flex-start; }
.sidebar-left .menu-copyright { padding: 16px 8px; font-size: 12px; }

.toolbar-brand { display: flex; align-items: center; gap: 8px; }
.toolbar-logo { display: block; width: 30px; height: 30px; object-fit: contain; border-radius: 8px; flex-shrink: 0; }

.sidebar-left .nav-header:hover, .sidebar-left .nav-header[aria-expanded="true"],
.sidebar-left #settings-menu[open] > summary, .sidebar-left .current-level-menu > summary:hover,
.sidebar-left .level-pill.active {
  background: color-mix(in srgb,var(--accent) 16%,var(--sidebar-selection));
  box-shadow: inset 3px 0 0 var(--accent); color: var(--text);
}

.sidebar-left #nav-games-btn > div > svg { width: 22px; height: 22px; margin-inline: -1px; }

.sidebar-left .current-level-menu:not([open]) > summary { margin-bottom: 0; }

.current-level-label { display: inline-flex; align-items: center; gap: 12px; }
.current-level-icon { flex-shrink: 0; }
.current-level-label .lesson-title { margin-bottom: 0; }

.practice-lesson-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; font-size: 14px; line-height: 1.5; font-weight: 600; color: var(--text); }
#practice-level-label, .practice-lesson-heading svg { color: var(--text-muted); }
.practice-lesson-heading svg { flex-shrink: 0; }