:root {
  color-scheme: light;
  font-family: "DM Sans", "Noto Sans KR", "Malgun Gothic", sans-serif;
  font-synthesis: none;
  color: #2e4439;
  background: #f6f5f0;
  --paper: #f6f5f0;
  --pine: #244c43;
  --pine-hover: #346153;
  --ink: #2e4439;
  --muted: #798573;
  --line: #dfe4d6;
  --purple: #7761bd;
  --left: #c2a1ff;
  --center: #83e9d7;
  --right: #ebd48f;
  --lime: #d8ed93;
  --stage: #272936;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 0; font-size: 17px; }
button, input, select { font: inherit; }
button, input, select, a, summary { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { opacity: .43; cursor: not-allowed; }
button, a { touch-action: manipulation; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid #a6bd71; outline-offset: 4px; }
input, select { min-width: 0; color: var(--ink); background: #fff; border: 1px solid #d9e0d0; border-radius: 11px; outline: none; }
input:focus, select:focus { border-color: #73998a; box-shadow: 0 0 0 4px #244c4310; }
input::placeholder { color: #98a18e; }
input[type=number] { appearance: textfield; -moz-appearance: textfield; }
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; text-decoration: none; }
svg { display: block; }
.icon { width: 22px; height: 22px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }
#notice { pointer-events: none; }
body[data-screen=prepare] .canvas-wrap { flex: none; }
.game-only { display: none !important; }
.app-shell { width: 100%; max-width: 1512px; margin: 0 auto; padding: 28px 48px; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 54px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { display: flex; align-items: center; gap: 4px; height: 36px; transform: rotate(-8deg); }
.brand-mark span { display: block; width: 6px; height: 25px; border-radius: 5px; background: var(--pine); }
.brand-mark span:nth-child(2) { height: 36px; }
.brand-mark span:nth-child(3) { height: 19px; background: #9daa76; }
.brand-mark span:nth-child(4) { height: 30px; }
.brand-name { display: flex; align-items: center; font-size: 30px; font-weight: 900; letter-spacing: -1.4px; }
.brand-divider { height: 22px; width: 1px; background: #d3dacb; margin: 0 17px; }
.brand-product { font-size: 17px; font-weight: 600; letter-spacing: -.45px; }
.header-right { display: flex; align-items: center; gap: 20px; }
.header-tag { display: flex; align-items: center; gap: 8px; color: #8d9880; font-size: 13px; }
.header-tag>span { height: 6px; width: 6px; border-radius: 50%; background: #8da776; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 52px; padding: 12px 20px; border: 1px solid transparent; border-radius: 11px; font-size: 17px; line-height: 1.45; font-weight: 600; text-align: center; transition: background .18s, border-color .18s, transform .18s; }
.button:active:not(:disabled) { transform: translateY(1px); }
.button .icon { width: 21px; height: 21px; }
:is(.button-primary,.primary) { color: #fff; background: var(--pine); border-color: var(--pine); }
:is(.button-primary,.primary):hover:not(:disabled) { background: var(--pine-hover); border-color: var(--pine-hover); }
:is(.button-outlined,.outline) { color: #68785b; background: transparent; border-color: #d5deca; }
:is(.button-outlined,.outline):hover:not(:disabled) { color: var(--pine); background: #edf1e3; border-color: #afc09a; }
.button-quiet { color: #6f7f62; background: transparent; }
.button-quiet:hover:not(:disabled) { background: #e9eedf; }
.button-soft { color: #6a8057; background: #ebf0df; border-color: #e0e8d2; }
.button-soft:hover:not(:disabled) { background: #e1e9d0; }
.button-purple { color: #77609e; background: #eee7f7; border-color: #e5dbf2; }
.button-purple:hover:not(:disabled) { background: #e3d8f2; }
:is(.button-lime,.lime) { color: #3d482b; background: var(--lime); border-color: var(--lime); }
:is(.button-lime,.lime):hover:not(:disabled) { background: #e3f6b0; }
:is(.button-dark-outline,.dark-outline) { color: #e6e2ef; border-color: #655f73; background: transparent; }
:is(.button-dark-outline,.dark-outline):hover:not(:disabled) { background: #ffffff0b; }
.icon-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 52px; min-height: 52px; padding: 10px 12px; color: #80936b; border: 1px solid #dce5d0; border-radius: 10px; background: transparent; font-size: 17px; }
.icon-button:hover:not(:disabled) { color: var(--pine); background: #eaf0df; }
.text-button { border: 0; background: transparent; color: #6f875b; padding: 8px 0; font-size: 17px; text-decoration: underline; text-underline-offset: 4px; }
.intro { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; padding: 44px 0 38px; }
.eyebrow { display: flex; align-items: center; gap: 13px; margin-bottom: 17px; font-size: 12px; font-weight: 700; letter-spacing: 2.2px; color: #7c9271; }
.eyebrow-line { width: 39px; height: 1px; background: #a3b593; }
h1 { font-size: clamp(35px,3.5vw,51px); font-weight: 800; letter-spacing: -2.1px; line-height: 1.35; color: #2d4d3e; }
.rhythm-word { color: #775f96; position: relative; }
.rhythm-word>svg { position: absolute; left: 0; bottom: -4px; width: 100%; height: 9px; fill: none; stroke: #bbacd0; stroke-width: 4; stroke-linecap: round; }
.intro-description { margin-top: 18px; color: #859178; font-size: 17px; line-height: 1.85; letter-spacing: -.25px; }
.intro-guide { padding-bottom: 6px; }
.guide-title { font-size: 14px; color: #879a76; }
.intro-guide ol { display: flex; gap: 19px; list-style: none; margin: 14px 0 0; padding: 0; }
.intro-guide li { display: flex; align-items: center; gap: 8px; font-size: 15px; color: #6f845e; }
.step-number { color: #a6b49a; font-size: 12px; }
.mobile-break { display: none; }
.workspace { position: relative; display: grid; grid-template-columns: minmax(0,.97fr) minmax(0,1.03fr); gap: 32px; align-items: start; }
.music-column, .activity-column { display: flex; flex-direction: column; min-width: 0; gap: 24px; }
.music-panel, .library-panel, .settings-panel, .rhythm-settings { min-width: 0; }
.section-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 19px; }
.section-kicker { display: block; font-size: 11px; letter-spacing: 1.7px; color: #94a783; font-weight: 700; margin-bottom: 7px; }
.section-heading h2 { font-size: 23px; line-height: 1.45; letter-spacing: -.65px; font-weight: 700; color: #40563c; }
.section-number { font-size: 43px; color: #dfe6d4; font-family: "DM Sans",sans-serif; letter-spacing: -2px; line-height: 1; }
:is(.search-form,.search-box) { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 17px; background: #fff; border: 1px solid #dbe3d0; border-radius: 13px; }
:is(.search-form,.search-box):focus-within { border-color: #799d85; box-shadow: 0 0 0 4px #244c430a; }
.search-icon { width: 22px; height: 22px; color: #a2ae96; }
:is(.search-form,.search-box) input { flex: 1; width: 100%; min-width: 0; padding: 12px 0; font-size: 17px; border: 0; background: transparent; box-shadow: none; }
:is(.search-form,.search-box) input:focus { box-shadow: none; }
:is(.search-form,.search-box) .button { flex-shrink: 0; padding: 11px 15px; }
:is(.field-hint,.hint) { margin-top: 10px; font-size: 15px; line-height: 1.75; color: #94a087; overflow-wrap: anywhere; }
.search-results { margin-top: 17px; max-height: 380px; overflow: auto; scrollbar-width: thin; }
.search-results:empty { display: none; }
.track-list { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.track-row { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 11px; background: #fff; border: 1px solid #e0e7d6; border-radius: 12px; }
.track-row.selected, .track-row.active, .track-row.is-active { border-color: #b6c8a0; background: #eef3e3; }
.track-main { display: flex; align-items: center; gap: 12px; text-align: left; min-width: 0; flex: 1; padding: 0; border: 0; background: transparent; color: inherit; }
.track-art { width: 82px; height: 53px; flex-shrink: 0; border-radius: 7px; object-fit: cover; background: #e6eed9; }
.track-copy { min-width: 0; display: block; }
.track-title { display: block; font-size: 17px; font-weight: 600; line-height: 1.55; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.track-meta { display: block; color: #95a285; font-size: 14px; line-height: 1.65; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.track-actions { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
.track-actions .icon-button { min-width: 42px; padding: 9px 8px; font-size: 14px; }
.library-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 13px; }
.library-heading h3, .library-heading h2 { display: flex; align-items: center; gap: 9px; font-size: 20px; font-weight: 600; color: #667d54; }
.library-heading>span { font-size: 13px; color: #a0af8c; }
.count-badge { color: #8bA471; background: #e7eeda; border-radius: 5px; padding: 2px 7px; font-size: 13px; }
.library-list { max-height: 410px; overflow: auto; scrollbar-width: thin; }
.empty-library { display: flex; gap: 13px; align-items: center; min-height: 95px; padding: 20px; border: 1px dashed #d5e0c6; border-radius: 12px; color: #90a178; background: #eef2e487; font-size: 16px; line-height: 1.75; }
.empty-library-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 43px; height: 43px; border-radius: 11px; background: #e2eccc; color: #91a875; }
.empty-library p { font-size: 14px; color: #a0af8b; margin-top: 3px; }
:is(.player-panel,#playerPanel) { min-width: 0; overflow: hidden; background: #fff; border: 1px solid #dfe6d4; border-radius: 15px; }
.player-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 49px; padding: 12px 17px; border-bottom: 1px solid #edf2e5; }
.player-label { display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: 1.5px; font-weight: 700; color: #91a57e; }
.tiny-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background: #97af78; }
.status-pill { padding: 4px 8px; border-radius: 5px; max-width: 60%; font-size: 12px; text-align: right; line-height: 1.6; color: #9caf85; background: #f1f6e8; }
.player-viewport, #playerFrame { position: relative; width: 100%; min-height: 200px; aspect-ratio: 16/9; overflow: hidden; background: #edf2e4; }
.player-viewport iframe, #playerFrame iframe, #playerMount { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; }
div#playerMount:empty { display: none; }
:is(.player-empty,#playerEmpty) { min-height: 200px; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 22px; text-align: center; background: radial-gradient(ellipse at 50% 40%,#f7f9f0,#edf2e4); color: #97aa82; }
.player-empty-disc { display: flex; align-items: center; justify-content: center; width: 63px; height: 63px; border-radius: 50%; border: 8px solid #e8efdc; background: #dfe9cf; box-shadow: 0 0 0 1px #dae4cb,0 0 0 10px #e7eedb65; margin-bottom: 20px; color: #a5b991; }
.player-empty-disc .icon { width: 23px; height: 23px; fill: currentColor; transform: translateX(1px); }
:is(.player-empty,#playerEmpty)>p { font-size: 18px; line-height: 1.7; font-weight: 500; }
:is(.player-empty,#playerEmpty)>span:last-child { margin-top: 7px; font-size: 14px; color: #a9b69a; }
.video-info { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 17px; }
.video-info>div { min-width: 0; }
.video-info h3 { color: #657d52; font-size: 18px; line-height: 1.55; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.video-info p { margin-top: 5px; color: #9cb18a; font-size: 14px; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.youtube-wordmark { display: inline-flex; align-items: center; gap: 4px; font-family: "DM Sans",sans-serif; font-size: 12px; font-weight: 700; color: #a5b797; flex-shrink: 0; }
.youtube-wordmark svg { width: 19px; height: 14px; }
.youtube-wordmark rect { fill: #acbc9d; }
.youtube-wordmark path { fill: white; }
.song-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; padding: 15px 17px; border-top: 1px solid #edf2e4; }
.song-controls .button { flex: 1; min-width: 0; }
.song-controls p { flex-basis: 100%; color: #9cab8a; font-size: 14px; line-height: 1.7; }
:is(.stage-panel,#stagePanel) { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; background: var(--stage); color: #f6f4fa; border: 1px solid #343642; border-radius: 16px; box-shadow: 0 8px 24px #30362e09; }
.stage-header { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 15px; min-height: 61px; padding: 16px 20px; border-bottom: 1px solid #ffffff08; background: #2e303e; }
.stage-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; min-width: 0; color: #ebe7f6; font-size: 16px; font-weight: 500; }
.live-dot { width: 6px; height: 6px; background: #d3e7a4; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 9px #d3e7a435; }
.stage-divider { width: 1px; height: 13px; margin: 0 1px; background: #5b596c; }
#stageMeta { color: #a49eb5; font-size: 13px; line-height: 1.6; }
.time-display { display: flex; align-items: center; gap: 7px; flex-shrink: 0; color: #d2cada; font-size: 22px; font-family: "DM Sans",sans-serif; font-variant-numeric: tabular-nums; letter-spacing: .35px; }
.time-display .icon { height: 17px; width: 17px; color: #9891a9; }
.canvas-wrap { flex: 1; position: relative; min-height: 280px; height: 320px; isolation: isolate; }
#rhythmCanvas { display: block; width: 100%; height: 100%; }
.stage-legend { flex-shrink: 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; padding: 14px 9%; color: #c2bacd; font-size: 16px; background: #252732; }
.stage-legend>span { display: flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; }
.legend-dot { width: 8px; height: 8px; flex-shrink: 0; border-radius: 2px; transform: rotate(45deg); }
.legend-left { background: var(--left); }
.legend-center { background: var(--center); }
.legend-right { background: var(--right); }
.stage-caption { display: flex; align-items: center; justify-content: center; gap: 7px; flex-shrink: 0; padding: 13px 16px; font-size: 13px; line-height: 1.6; color: #a09aae; background: #2e303d; text-align: center; }
.stage-caption .icon { width: 15px; height: 15px; color: #afa3c5; }
.stage-tools { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 6px 14px; flex-shrink: 0; background: #2e303d; }
.stage-tools .stage-caption { flex: 1; padding: 0; }
.sound-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex-shrink: 0; min-height: 40px; min-width: 94px; padding: 5px 10px; border: 1px solid #686276; border-radius: 9px; background: transparent; color: #ddd5e6; font-size: 16px; font-weight: 600; }
.sound-toggle>span:first-child { font-size: 24px; line-height: 1; }
.sound-toggle[aria-pressed=true] { color: #293b31; background: #83e9d7; border-color: #83e9d7; }
.sound-toggle:hover { border-color: #c2a1ff; }
:is(.stage-overlay,#stageOverlay) { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 13px; padding: 25px; text-align: center; background: #272936ed; backdrop-filter: blur(4px); }
.overlay-decoration { display: flex; align-items: center; justify-content: center; width: 57px; height: 57px; border-radius: 19px; background: #464151; color: #d9c9ee; transform: rotate(-7deg); }
.overlay-decoration .icon { width: 27px; height: 27px; }
:is(.stage-overlay,#stageOverlay) h2 { color: #fbf9ff; font-size: 32px; line-height: 1.35; letter-spacing: -.9px; }
:is(.stage-overlay,#stageOverlay) p { color: #b7afc4; font-size: 17px; line-height: 1.8; max-width: 590px; white-space: pre-line; }
:is(.stage-overlay,#stageOverlay)>.button { margin-top: 6px; }
:is(.complete-actions,#completeActions) { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 9px; }
.settings-panel, .rhythm-settings { padding: 0; }
.settings-heading { margin-bottom: 18px; }
.pace-options, .pace-buttons, .rhythm-paces { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.pace-button, .pace-options button, .pace-buttons button, .rhythm-paces button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; min-width: 0; min-height: 92px; padding: 15px 8px; border: 1px solid #dbe4cd; border-radius: 12px; background: #fff; color: #899e73; font-size: 17px; font-weight: 600; line-height: 1.45; }
.pace-button strong, .pace-options button strong, .pace-buttons button strong { font-size: 18px; font-weight: 600; }
.pace-button span, .pace-options button span, .pace-buttons button span { font-size: 14px; font-weight: 400; color: #a2b38d; }
.pace-button:hover:not(:disabled), .pace-options button:hover:not(:disabled), .pace-buttons button:hover:not(:disabled) { border-color: #adc78c; background: #f0f5e7; }
.pace-button.selected, .pace-button.active, .pace-button[aria-pressed=true], .pace-options button[aria-pressed=true], .pace-buttons button[aria-pressed=true] { color: #597443; background: #eaf2dc; border-color: #b2c895; box-shadow: inset 0 0 0 1px #b2c895; }
.pace-button.selected span, .pace-button[aria-pressed=true] span { color: #829969; }
.pattern-row { display: flex; justify-content: space-between; align-items: center; gap: 15px; border-top: 1px solid var(--line); padding-top: 19px; margin-top: 21px; }
.pattern-actions { display: flex; align-items: center; gap: 8px; }
.sound-toggles { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 20px; }
.switch-label { display: flex; align-items: center; gap: 9px; position: relative; color: #7c9167; font-size: 16px; cursor: pointer; }
.switch-label input { position: absolute; opacity: 0; width: 38px; height: 23px; }
.switch { display: block; width: 38px; height: 23px; padding: 3px; border-radius: 20px; background: #d8e2c9; transition: background .2s; }
.switch:after { content: ""; display: block; width: 17px; height: 17px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px #35432115; transition: transform .2s; }
.switch-label input:checked+.switch { background: var(--pine); }
.switch-label input:checked+.switch:after { transform: translateX(15px); }
.switch-label input:focus-visible+.switch { outline: 3px solid #a6bd71; outline-offset: 4px; }
:is(.action-bar,#actionBar) { grid-column: 1/-1; display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 1px; border-top: 1px solid #dbe2cf; padding-top: 23px; }
.action-note { display: flex; align-items: center; gap: 13px; }
.action-note-icon { display: flex; align-items: center; justify-content: center; width: 47px; height: 47px; border-radius: 13px; color: #92a575; background: #e7eeda; }
.action-note strong { display: block; color: #73885d; font-size: 17px; font-weight: 600; }
.action-note p { color: #a0af8b; font-size: 14px; line-height: 1.6; margin-top: 5px; }
.action-buttons { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.button-start { min-width: 175px; gap: 24px; }
.site-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-top: 35px; color: #a6b595; font-size: 12px; line-height: 1.7; }
.footer-divider { color: #bdc9af; margin: 0 7px; }
:is(.notice,#notice) { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 30; padding: 16px 23px; width: max-content; max-width: min(640px,calc(100vw - 32px)); color: #f8fbf1; background: #2d5141; border: 1px solid #456c50; border-radius: 12px; box-shadow: 0 10px 35px #273e2725; font-size: 16px; line-height: 1.75; text-align: center; overflow-wrap: anywhere; }
:is(.notice,#notice).error, :is(.notice,#notice)[data-type=error] { color: #fff8f2; background: #865f4d; border-color: #a97962; }
:is(.name-dialog,#nameDialog) { width: min(480px,calc(100vw - 32px)); border: 1px solid #e2e9d6; border-radius: 19px; padding: 30px; color: var(--ink); background: var(--paper); box-shadow: 0 25px 80px #243b2730; }
:is(.name-dialog,#nameDialog)::backdrop { background: #1f30265c; backdrop-filter: blur(4px); }
.dialog-icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 13px; background: #e4edD4; color: #91a975; margin-bottom: 18px; }
:is(.name-dialog,#nameDialog) h2 { font-size: 24px; line-height: 1.5; letter-spacing: -.7px; }
:is(.name-dialog,#nameDialog) p { font-size: 16px; line-height: 1.7; color: #91a07e; margin-top: 10px; }
:is(.name-dialog,#nameDialog) label { display: block; font-size: 16px; color: #7a9066; margin: 22px 0 9px; }
:is(.name-dialog,#nameDialog) input { width: 100%; height: 53px; padding: 0 13px; font-size: 17px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 24px; }
body[data-screen=game] { color: #f8f6fc; background: #242631; overflow: hidden; }
body[data-screen=game] .prepare-only, body[data-screen=game] .site-header, body[data-screen=game] .intro, body[data-screen=game] .site-footer { display: none !important; }
body[data-screen=game] .game-only { display: flex !important; }
body[data-screen=game] .app-shell { max-width: none; height: 100dvh; padding: 10px 16px; }
body[data-screen=game] .workspace { display: block; width: 100%; height: 100%; position: relative; }
body[data-screen=game] .music-column, body[data-screen=game] .activity-column { display: contents; }
body[data-screen=game] #stagePanel { height: calc(100dvh - 100px); min-height: 0; display: flex; flex-direction: column; border-radius: 15px; box-shadow: none; }
body[data-screen=game] .stage-header { min-height: 220px; height: 220px; padding: 32px 320px 26px 36px; display: flex; align-items: flex-start; justify-content: flex-start; flex-direction: column; gap: 24px; background: #292c39; flex-shrink: 0; }
body[data-screen=game] .stage-heading { font-size: 22px; gap: 11px; }
body[data-screen=game] #stageMeta { font-size: 16px; }
body[data-screen=game] .time-display { position: static; font-size: 41px; gap: 10px; color: #eee8f6; }
body[data-screen=game] .time-display .icon { width: 24px; height: 24px; }
body[data-screen=game] .canvas-wrap { flex: 1; height: auto; min-height: 0; }
body[data-screen=game] .stage-legend { padding: 16px 9%; font-size: 22px; letter-spacing: 1px; }
body[data-screen=game] .legend-dot { height: 10px; width: 10px; }
body[data-screen=game] #playerPanel { position: absolute; z-index: 3; top: 12px; right: 16px; width: 252px; height: 200px; min-height: 200px; border: 0; border-radius: 10px; background: #1d1e26; overflow: hidden; }
body[data-screen=game] #playerPanel .player-heading, body[data-screen=game] #playerPanel .video-info, body[data-screen=game] #playerPanel .song-controls { display: none !important; }
body[data-screen=game] #playerFrame, body[data-screen=game] .player-viewport { width: 100%; height: 200px; min-height: 200px; aspect-ratio: auto; }
body[data-screen=game] #playerPanel iframe { width: 100%; height: 200px; min-height: 200px; }
body[data-screen=game] :is(.action-bar,#actionBar) { min-height: 76px; height: 76px; padding: 12px 7px 4px; margin: 0; border: 0; color: #bbb4c8; }
body[data-screen=game] :is(.action-bar,#actionBar) .button { min-height: 52px; }
body[data-screen=game] :is(.action-bar,#actionBar) :is(.button-outlined,.outline) { color: #c6bfce; border-color: #535160; }
body[data-screen=game] :is(.action-bar,#actionBar) :is(.button-outlined,.outline):hover:not(:disabled) { color: #fff; background: #393847; border-color: #7c7389; }
body[data-screen=game] :is(.action-bar,#actionBar) .button-quiet { color: #aaa4b8; }
body[data-screen=game] :is(.action-bar,#actionBar) .button-quiet:hover:not(:disabled) { color: #fff; background: #393847; }
body[data-screen=game] :is(.action-bar,#actionBar) :is(.button-primary,.primary) { background: #d8ed93; border-color: #d8ed93; color: #38462a; }
body[data-screen=game] :is(.action-bar,#actionBar) :is(.button-primary,.primary):hover:not(:disabled) { background: #e6f7b9; }
body[data-screen=game] :is(.stage-overlay,#stageOverlay) h2 { font-size: clamp(32px,3.5vw,55px); letter-spacing: -1.6px; }
body[data-screen=game] :is(.stage-overlay,#stageOverlay) p { font-size: 19px; }
body[data-screen=game] :is(.stage-overlay,#stageOverlay) .overlay-decoration { width: 68px; height: 68px; border-radius: 22px; margin-bottom: 5px; }
body[data-phase=countdown] #stageOverlay { background: transparent; backdrop-filter: none; pointer-events: none; }
body[data-phase=countdown] .overlay-decoration, body[data-phase=countdown] #overlayText { display: none; }
body[data-screen=game][data-phase=countdown] #overlayTitle { font-family: "DM Sans",sans-serif; font-size: clamp(100px,12vw,160px); font-weight: 800; line-height: 1; letter-spacing: -5px; color: #e0efb0; text-shadow: 0 3px 24px #1a1b2870; }
@media(min-width:1700px) {
  .app-shell { max-width: 1580px; padding-top: 34px; }
  .intro { padding-top: 52px; padding-bottom: 43px; }
  .workspace { gap: 38px; }
  .canvas-wrap { height: 360px; }
  body[data-screen=game] .stage-header { padding-left: 48px; }
}
@media(max-width:1190px) {
  .app-shell { padding: 24px 32px; }
  .intro { align-items: flex-start; gap: 24px; }
  .intro-guide { padding-top: 11px; }
  .intro-guide ol { flex-direction: column; gap: 9px; }
  .workspace { gap: 24px; }
  .section-heading h2 { font-size: 21px; }
  :is(.search-form,.search-box) { padding-left: 12px; gap: 7px; }
  :is(.search-form,.search-box) input { font-size: 16px; }
  :is(.search-form,.search-box) .button { padding-left: 12px; padding-right: 12px; }
  :is(.search-form,.search-box) .button .icon { display: none; }
  .track-art { width: 68px; height: 48px; }
  .track-actions { flex-direction: column; gap: 3px; }
  .track-actions .icon-button { min-height: 31px; padding: 4px 7px; font-size: 13px; }
  .stage-heading { font-size: 15px; }
  #stageMeta { font-size: 12px; }
  .time-display { font-size: 19px; }
  .stage-header { padding: 16px; gap: 12px; }
  .pattern-row { flex-wrap: wrap; }
  .pattern-actions { margin-left: auto; }
  .action-note-icon { display: none; }
  .action-note p { font-size: 13px; }
}
@media(max-width:900px) {
  .app-shell { padding: 20px 24px; }
  .header-tag { display: none; }
  .brand-product { font-size: 15px; }
  .brand-divider { margin: 0 12px; }
  .intro-description { font-size: 16px; }
  .workspace { grid-template-columns: minmax(0,1fr); gap: 27px; }
  .music-column, .activity-column { gap: 24px; }
  .activity-column { margin-top: 5px; }
  .section-heading h2 { font-size: 24px; }
  :is(.search-form,.search-box) input { font-size: 17px; }
  :is(.search-form,.search-box) .button { padding-left: 19px; padding-right: 19px; }
  :is(.search-form,.search-box) .button .icon { display: block; }
  .track-actions { flex-direction: row; gap: 5px; }
  .track-actions .icon-button { min-height: 52px; font-size: 15px; padding: 9px; }
  .canvas-wrap { height: 370px; }
  .stage-heading { font-size: 17px; }
  #stageMeta { font-size: 14px; }
  .time-display { font-size: 23px; }
  .stage-header { padding: 17px 22px; }
  .pattern-row { flex-wrap: nowrap; }
  :is(.action-bar,#actionBar) { flex-direction: column; align-items: stretch; gap: 18px; }
  .action-note { text-align: center; justify-content: center; }
  .action-buttons { justify-content: center; }
  .action-buttons>.button { flex: 1; }
  body[data-screen=game] .activity-column { margin: 0; }
  body[data-screen=game] :is(.action-bar,#actionBar) { flex-direction: row; align-items: center; gap: 12px; }
  body[data-screen=game] .action-buttons { flex: 0 1 auto; }
  body[data-screen=game] .stage-heading { font-size: 20px; }
  body[data-screen=game] #stageMeta { flex-basis: 100%; font-size: 15px; }
  body[data-screen=game] .stage-divider { display: none; }
}
@media(max-width:600px) {
  .app-shell { padding: 17px 18px 24px; }
  .site-header { gap: 8px; }
  .brand { gap: 9px; }
  .brand-mark { transform: scale(.85) rotate(-8deg); margin-left: -3px; margin-right: -3px; }
  .brand-name { font-size: 26px; }
  .brand-product { font-size: 12px; letter-spacing: -.5px; }
  .brand-divider { height: 18px; margin: 0 9px; }
  .fullscreen-button { padding: 10px; min-width: 45px; }
  .fullscreen-button>span { display: none; }
  .intro { padding: 31px 0 28px; }
  .eyebrow { font-size: 10px; letter-spacing: 1.7px; margin-bottom: 13px; }
  h1 { font-size: 36px; letter-spacing: -2px; }
  .intro-description { font-size: 16px; margin-top: 18px; }
  .mobile-break { display: block; }
  .intro-guide { display: none; }
  .workspace, .music-column, .activity-column { gap: 25px; }
  .section-heading h2 { font-size: 22px; }
  .section-kicker { font-size: 10px; }
  .section-number { font-size: 37px; }
  :is(.search-form,.search-box) { flex-wrap: wrap; gap: 8px; padding: 10px; }
  :is(.search-form,.search-box) .search-icon { width: 20px; height: 20px; margin-left: 3px; }
  :is(.search-form,.search-box) input { flex: 1; width: calc(100% - 33px); font-size: 16px; padding: 9px 0; }
  :is(.search-form,.search-box) .button { width: 100%; min-height: 52px; }
  :is(.field-hint,.hint) { font-size: 14px; }
  .player-heading { padding: 12px 14px; }
  .player-label { font-size: 10px; letter-spacing: 1px; }
  .status-pill { font-size: 11px; }
  :is(.player-empty,#playerEmpty) { padding: 18px; }
  :is(.player-empty,#playerEmpty)>p { font-size: 16px; }
  :is(.player-empty,#playerEmpty)>span:last-child { font-size: 13px; }
  .video-info { padding: 15px 14px; gap: 9px; }
  .video-info h3 { font-size: 17px; }
  .video-info p { font-size: 13px; }
  .youtube-wordmark { font-size: 10px; }
  .song-controls { padding: 13px; }
  .song-controls .button { padding: 10px 12px; font-size: 17px; }
  .library-heading { gap: 8px; }
  .library-heading h3, .library-heading h2 { font-size: 19px; gap: 7px; }
  .library-heading>span { font-size: 11px; }
  .empty-library { padding: 16px; font-size: 15px; }
  .track-row { flex-wrap: wrap; gap: 8px; }
  .track-main { flex-basis: 100%; }
  .track-title { font-size: 16px; }
  .track-meta { font-size: 13px; }
  .track-art { width: 72px; height: 49px; }
  .track-actions { margin-left: auto; }
  .track-actions .icon-button { font-size: 15px; }
  .canvas-wrap { min-height: 280px; height: 300px; }
  .stage-header { padding: 15px; gap: 10px; }
  .stage-heading { font-size: 16px; gap: 7px; }
  .stage-heading #stageMeta { display: none; }
  .stage-divider { display: none; }
  .time-display { font-size: 20px; }
  .stage-caption { padding: 12px 10px; font-size: 12px; gap: 5px; }
  .stage-caption .icon { width: 13px; height: 13px; }
  .stage-legend { font-size: 16px; padding: 13px 6%; gap: 6px; }
  :is(.stage-overlay,#stageOverlay) { padding: 20px; }
  :is(.stage-overlay,#stageOverlay) h2 { font-size: 27px; }
  :is(.stage-overlay,#stageOverlay) p { font-size: 16px; }
  .pace-options, .pace-buttons, .rhythm-paces { gap: 7px; }
  .pace-button, .pace-options button, .pace-buttons button, .rhythm-paces button { min-height: 87px; padding: 12px 5px; font-size: 17px; }
  .pace-button strong, .pace-options button strong, .pace-buttons button strong { font-size: 17px; }
  .pace-button span, .pace-options button span, .pace-buttons button span { font-size: 12px; }
  .pattern-row { flex-wrap: wrap; gap: 13px; }
  .pattern-actions { width: 100%; justify-content: flex-end; }
  .action-buttons { flex-wrap: wrap; gap: 8px; }
  .action-buttons>.button { flex: 1 1 135px; min-width: 0; padding-left: 12px; padding-right: 12px; }
  .action-note strong { font-size: 17px; }
  .action-note p { font-size: 14px; }
  .site-footer { padding-top: 29px; font-size: 11px; flex-wrap: wrap; gap: 6px; }
  .site-footer>span:last-child { display: none; }
  :is(.notice,#notice) { font-size: 15px; padding: 13px 17px; bottom: 17px; }
  :is(.name-dialog,#nameDialog) { padding: 24px; }
  :is(.name-dialog,#nameDialog) h2 { font-size: 21px; }
  .dialog-actions .button { padding: 10px 16px; }
  body[data-screen=game] { overflow-x: hidden; overflow-y: auto; }
  body[data-screen=game] .app-shell { height: auto; min-height: 100dvh; padding: 6px; }
  body[data-screen=game] .workspace { height: auto; min-height: calc(100dvh - 12px); }
  body[data-screen=game] #stagePanel { min-height: 530px; height: calc(100dvh - 100px); border-radius: 11px; }
  body[data-screen=game] .stage-header { min-height: 220px; height: 220px; padding: 20px 213px 17px 12px; gap: 18px; }
  body[data-screen=game] .stage-heading { flex-direction: column; align-items: flex-start; gap: 8px; font-size: 17px; line-height: 1.55; overflow-wrap: anywhere; }
  body[data-screen=game] .stage-heading .live-dot { display: none; }
  body[data-screen=game] .stage-heading #stageMeta { display: block; font-size: 11px; line-height: 1.6; }
  body[data-screen=game] .time-display { position: static; display: block; font-size: 23px; line-height: 1.2; letter-spacing: -.5px; }
  body[data-screen=game] .time-display .icon { display: none; }
  body[data-screen=game] #playerPanel { width: 200px; height: 200px; min-height: 200px; top: 10px; right: 8px; border-radius: 8px; }
  body[data-screen=game] .canvas-wrap { min-height: 260px; }
  body[data-screen=game] .stage-legend { padding: 14px 6%; font-size: 17px; letter-spacing: 0; }
  body[data-screen=game] .stage-legend>span { gap: 6px; }
  body[data-screen=game] .legend-dot { height: 7px; width: 7px; }
  body[data-screen=game] :is(.action-bar,#actionBar) { height: auto; min-height: 82px; padding: 10px 3px 5px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
  body[data-screen=game] :is(.action-bar,#actionBar)>.button { min-height: 43px; padding: 9px 12px; font-size: 15px; }
  body[data-screen=game] .action-buttons { gap: 7px; flex: 1 1 auto; flex-wrap: nowrap; justify-content: center; }
  body[data-screen=game] .action-buttons>.button { min-height: 48px; flex: 1; font-size: 16px; padding: 9px 11px; gap: 6px; }
  body[data-screen=game] .action-buttons>.button .icon { width: 18px; height: 18px; }
  body[data-screen=game] :is(.stage-overlay,#stageOverlay) h2 { font-size: 28px; letter-spacing: -.8px; }
  body[data-screen=game] :is(.stage-overlay,#stageOverlay) p { font-size: 16px; }
  body[data-screen=game] :is(.stage-overlay,#stageOverlay) .button { padding: 11px 14px; font-size: 16px; }
  body[data-screen=game] :is(.stage-overlay,#stageOverlay) .overlay-decoration { width: 49px; height: 49px; border-radius: 17px; }
  body[data-screen=game][data-phase=countdown] #overlayTitle { font-size: 106px; }
}
@media(max-width:360px) {
  .app-shell { padding-left: 14px; padding-right: 14px; }
  .brand-product { font-size: 11px; }
  .brand-divider { margin: 0 7px; }
  .brand-name { font-size: 24px; }
  h1 { font-size: 32px; }
  .section-heading h2 { font-size: 20px; }
  .library-heading h3, .library-heading h2 { font-size: 17px; }
  .library-heading>span { font-size: 10px; }
  .song-controls .button { flex-basis: 100%; }
  body[data-screen=game] .stage-header { padding-left: 9px; padding-right: 210px; }
  body[data-screen=game] .stage-heading { font-size: 15px; }
  body[data-screen=game] .stage-heading #stageMeta { font-size: 10px; }
  body[data-screen=game] .time-display { font-size: 20px; }
  body[data-screen=game] .action-buttons>.button { font-size: 15px; padding-left: 9px; padding-right: 9px; }
}
/* Full-song document structure. */
.brand-mark { font-size: 34px; line-height: 1; letter-spacing: -9px; color: var(--pine); padding-right: 6px; }
.brand>strong { font-size: 31px; font-weight: 900; letter-spacing: -1.8px; }
.brand>span:last-child { font-size: 17px; padding-left: 17px; margin-left: 3px; border-left: 1px solid #d3dacb; letter-spacing: -.5px; }
.intro { display: block; }
.intro>p { font-size: 17px; line-height: 1.85; color: #819475; margin-top: 17px; }
.intro h1 { font-size: clamp(31px,3.1vw,45px); }
.section-heading { justify-content: flex-start; }
.step { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; background: #e7eedb; color: #8bA773; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.auto-badge { font-size: 12px; color: #8da574; background: #eaf1df; border: 1px solid #e0e9d2; border-radius: 6px; padding: 4px 8px; margin-left: auto; flex-shrink: 0; }
#playerStatus { max-width: 60%; color: #99ac87; font-size: 12px; line-height: 1.6; text-align: right; }
.player-heading .eyebrow { font-size: 11px; letter-spacing: 1.3px; margin: 0; gap: 7px; }
.player-heading .eyebrow i { display: block; width: 6px; height: 6px; border-radius: 50%; background: #9fb983; }
#playerEmpty strong { font-size: 18px; color: #94a77e; line-height: 1.7; font-weight: 500; }
.empty-play { display: flex; align-items: center; justify-content: center; width: 59px; height: 59px; border-radius: 50%; border: 7px solid #e6eddb; background: #dce7cd; box-shadow: 0 0 0 8px #e7eedc66; margin-bottom: 20px; color: #9db487; font-size: 22px; padding-left: 3px; }
.video-info { display: block; }
.video-info h3 { font-size: 18px; }
#songDuration { flex: 1; font-size: 15px; line-height: 1.65; color: #9aAD86; }
.song-controls .button { flex: 0 1 auto; }
#libraryCount { font-size: 14px; color: #8eA574; background: #e7eeda; border-radius: 5px; padding: 2px 7px; }
.library-heading .hint { margin: 0; font-size: 12px; }
#stageStatus { color: #e9e5f1; font-size: 17px; font-weight: 600; }
#stageMeta { margin-top: 5px; font-size: 13px; }
#remainingTime { color: #ddd5e6; font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.stage-legend i { display: block; width: 8px; height: 8px; border-radius: 2px; transform: rotate(45deg); background: var(--left); flex-shrink: 0; }
.stage-legend>span:nth-child(2) i { background: var(--center); }
.stage-legend>span:nth-child(3) i { background: var(--right); }
.settings-copy { font-size: 17px; line-height: 1.8; color: #829575; margin: -2px 0 18px; }
#actionBar { margin-top: 29px; }
.action-copy { display: flex; flex-direction: column; gap: 7px; }
.action-copy strong { font-size: 17px; color: #71885d; font-weight: 600; }
.action-copy span { font-size: 14px; color: #9cAE86; }
.action-buttons .button { white-space: nowrap; }
body[data-screen=game] .workspace { height: auto; }
body[data-screen=game] .stage-header { padding-top: 28px; padding-bottom: 18px; gap: 18px; }
body[data-screen=game] #stageStatus { display: block; font-size: 24px; line-height: 1.5; }
body[data-screen=game] #stageMeta { font-size: 17px; margin-top: 10px; color: #b3aabd; }
body[data-screen=game] #remainingTime { position: static; font-family: "DM Sans",sans-serif; font-size: 38px; line-height: 1; color: #f0e8fa; }
body[data-screen=game] .touch-hint { font-size: 14px; margin-top: 15px; color: #8f889e; }
body[data-screen=game] #actionBar { margin-top: 0; }
body[data-screen=game] #prepareButton { text-decoration: none; color: #b2aabc; }
body[data-screen=game] #stageSurface { cursor: pointer; }
@media(max-width:1190px) {
  .section-heading { gap: 9px; }
  .auto-badge { font-size: 10px; padding: 4px 6px; }
  .settings-copy { font-size: 16px; }
  #actionBar { align-items: flex-start; }
  .action-buttons .button { padding-left: 14px; padding-right: 14px; }
}
@media(max-width:900px) {
  .intro h1 { font-size: 37px; }
  .auto-badge { font-size: 12px; }
  .settings-copy { font-size: 17px; }
  #actionBar { align-items: stretch; }
  .action-copy { text-align: center; }
  body[data-screen=game] #actionBar { align-items: center; }
}
@media(max-width:600px) {
  .brand>strong { font-size: 27px; }
  .brand>span:last-child { font-size: 12px; padding-left: 10px; margin-left: 0; }
  .brand-mark { font-size: 30px; }
  .intro h1 { font-size: 32px; line-height: 1.45; letter-spacing: -1.4px; }
  .intro>p { font-size: 16px; line-height: 1.85; }
  .section-heading { gap: 8px; }
  .section-heading h2 { font-size: 20px; }
  .step { width: 26px; height: 26px; font-size: 11px; border-radius: 8px; }
  .auto-badge { display: none; }
  .search-box input { flex: 1 1 100%; width: 100%; padding: 10px 5px; }
  #playerStatus { font-size: 11px; }
  #playerEmpty strong { font-size: 16px; }
  .video-info h3 { font-size: 17px; }
  #songDuration { font-size: 14px; }
  .song-controls { flex-wrap: wrap; }
  .song-controls .button { flex: 0 1 auto; }
  .library-heading .hint { font-size: 11px; }
  #stageStatus { font-size: 16px; }
  #stageMeta { font-size: 11px; max-width: 230px; line-height: 1.65; }
  #remainingTime { font-size: 14px; }
  .settings-copy { font-size: 16px; }
  #actionBar { margin-top: 24px; }
  .action-buttons .button { font-size: 17px; min-height: 52px; }
  body[data-screen=game] .stage-header { gap: 15px; padding-top: 19px; }
  body[data-screen=game] #stageStatus { font-size: 17px; line-height: 1.5; overflow-wrap: anywhere; }
  body[data-screen=game] #stageMeta { font-size: 11px; line-height: 1.65; margin-top: 9px; overflow-wrap: anywhere; }
  body[data-screen=game] #remainingTime { font-size: 22px; }
  body[data-screen=game] .touch-hint { display: none !important; }
  body[data-screen=game] #actionBar { margin-top: 0; }
  body[data-screen=game] #actionBar #prepareButton { flex: 1 1 100%; min-height: 52px; font-size: 17px; }
  body[data-screen=game] .workspace { min-height: 0; }
  body[data-screen=game] #stagePanel { height: calc(100dvh - 136px); }
  body[data-screen=game] .action-buttons { width: 100%; }
  body[data-screen=game] .action-buttons .button { min-height: 52px; font-size: 17px; white-space: normal; padding: 9px 8px; line-height: 1.4; }
  body[data-screen=game] #fullscreenButton { flex: .9; }
}
@media(max-width:360px) {
  .intro h1 { font-size: 29px; }
  .brand>strong { font-size: 25px; }
  .brand>span:last-child { font-size: 11px; }
  .section-heading h2 { font-size: 18px; }
  .song-controls .button { flex-basis: 100%; }
  .library-heading .hint { font-size: 10px; }
  body[data-screen=game] #stageStatus { font-size: 15px; }
  body[data-screen=game] #stageMeta { font-size: 10px; }
  body[data-screen=game] #remainingTime { font-size: 19px; }
}
body[data-screen=game][data-player-hidden=true] .stage-header {
  min-height: 108px; height: 108px; padding: 20px 36px;
  flex-direction: row; align-items: center; justify-content: space-between; gap: 20px;
}
body[data-screen=game][data-player-hidden=true] .touch-hint { display: none !important; }
body[data-screen=game][data-player-hidden=true] #stageMeta { margin-top: 6px; }
@media(max-width:600px) {
  body[data-screen=game][data-player-hidden=true] .stage-header { min-height: 90px; height: 90px; padding: 16px; }
  body[data-screen=game][data-player-hidden=true] #stageStatus { font-size: 18px; }
  body[data-screen=game][data-player-hidden=true] #stageMeta { max-width: none; font-size: 13px; }
  body[data-screen=game][data-player-hidden=true] #remainingTime { font-size: 26px; }
}
@media(prefers-reduced-motion:reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* A compact working surface, followed by the local-file analysis workspace. */
body[data-screen=prepare] .site-header { margin-bottom: 30px; }
#analysisPanel, #libraryPanel { grid-column: 1 / -1; min-width: 0; }
#analysisPanel { display: grid; grid-template-columns: minmax(0,1fr); gap: 24px; margin-top: 0; padding: 24px; border: 1px solid #d8e0cd; border-radius: 18px; background: #edf1e4; }
.analysis-intro .eyebrow { margin-bottom: 12px; }
.analysis-intro h2 { font-size: 28px; letter-spacing: -1px; }
.analysis-body { min-width: 0; }
.file-picker { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 15px; padding: 24px; background: #fff; border: 1px dashed #a4b996; border-radius: 12px; }
.file-picker>span:first-child { grid-row: span 2; font-size: 35px; color: #799864; }
.file-picker>strong { font-size: 18px; }
.file-picker>span:nth-of-type(2) { font-size: 13px; color: #76886c; }
.file-button { position: relative; flex-basis: 100%; margin: 8px 0 0; overflow: hidden; cursor: pointer; }
.file-button input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.file-button:focus-within { outline: 3px solid #91ac72; outline-offset: 4px; }
.analysis-progress { display: flex; align-items: center; gap: 20px; margin-top: 15px; }
.analysis-progress progress { accent-color: var(--pine); height: 9px; flex: 1; width: 100%; }
.analysis-progress button { font-size: 15px; flex-shrink: 0; }
#analysisStatus { color: #617957; min-height: 26px; }
#analysisStatus.error { color: #a63636; }
#analysisResult { margin-top: 18px; padding-top: 20px; border-top: 1px solid #cfdbc4; }
#analysisTitle { font-size: 18px; overflow-wrap: anywhere; }
.analysis-stats { display: flex; gap: 24px; justify-content: space-between; margin: 19px 0; }
.analysis-stats>div { display: flex; flex-direction: column; gap: 5px; }
.analysis-stats span { color: #708464; font-size: 13px; }
.analysis-stats strong { font-size: 23px; color: #244c43; }
#energyStrip { display: flex; gap: 3px; height: 38px; align-items: stretch; }
#energyStrip span { flex: 1; min-width: 0; border-radius: 3px; background: #247969; }
.strip-caption { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; font-size: 12px; color: #708464; }
#localStartButton { margin-top: 18px; width: 100%; }
.file-privacy { margin-top: 18px; color: #6d805f; font-size: 13px; line-height: 1.75; }
#localPreview { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; padding: 28px; background: #eaf4ec; }
.local-disc { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #244c43; color: #d8ed93; font-size: 34px; flex-shrink: 0; }
#localPreview strong { font-size: 20px; }
#localPreview p { font-size: 14px; color: #72876a; margin-top: 8px; line-height: 1.7; }
#localAudio { width: 100%; height: 48px; }
body[data-source=local] .pace-buttons { display: none; }
@media(max-width:900px) {
  #analysisPanel { grid-template-columns: 1fr; gap: 25px; padding: 26px; }
}
@media(max-width:600px) {
  body[data-screen=prepare] .site-header { margin-bottom: 24px; }
  #analysisPanel { padding: 22px 18px; margin-top: 0; }
  .analysis-intro h2 { font-size: 25px; }
  .file-picker { flex-direction: column; padding: 20px 12px; text-align: center; }
  .file-button { margin: 8px 0 0; width: 100%; }
  .analysis-stats { gap: 10px; }
  .analysis-stats strong { font-size: 21px; }
  .strip-caption { font-size: 11px; }
  #localPreview { padding: 22px; gap: 14px; }
  #localPreview strong { font-size: 18px; }
}

/* The activity uses the full upper surface; its timer lives in the footer. */
body[data-screen=game] { overflow-x: hidden; overflow-y: auto; }
body[data-screen=game] .app-shell { display: flex; flex-direction: column; height: 100dvh; min-height: 500px; }
body[data-screen=game] .workspace { flex: 1; height: auto; min-height: 0; }
body[data-screen=game] #stagePanel { height: 100%; min-height: 0; }
body[data-screen=game] .canvas-wrap { min-height: 0; }
body[data-screen=game] .stage-tools, body[data-screen=game] .stage-legend { display: none; }
body[data-screen=game] #hitSoundToggle { min-height: 52px; }
body[data-screen=game] #actionBar { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 16px; flex: 0 0 auto; }
body[data-screen=game] #prepareButton { grid-column: 1; grid-row: 1; justify-self: start; }
body[data-screen=game] #gameTime { grid-column: 2; grid-row: 1; justify-content: center; align-items: center; }
body[data-screen=game] #gameTime #remainingTime { font-size: 38px; line-height: 1.2; white-space: nowrap; }
body[data-screen=game] #actionBar .action-buttons { grid-column: 3; grid-row: 1; justify-self: end; flex-wrap: nowrap; width: auto; }
@media(max-width:1280px) {
  body[data-screen=game] #actionBar { grid-template-columns: minmax(0,1fr) auto; height: auto; min-height: 0; gap: 6px 12px; padding: 8px 4px 4px; }
  body[data-screen=game] #actionBar .action-buttons { grid-column: 2; }
  body[data-screen=game] #gameTime { grid-column: 1 / -1; grid-row: 2; }
  body[data-screen=game] #gameTime #remainingTime { font-size: 30px; }
}
@media(max-width:800px) {
  body[data-screen=game] #actionBar { grid-template-columns: minmax(0,1fr); gap: 5px; padding: 5px 2px 2px; }
  body[data-screen=game] #actionBar #prepareButton { grid-column: 1; min-height: 42px; padding: 5px 8px; }
  body[data-screen=game] #actionBar .action-buttons { grid-column: 1; grid-row: 2; width: 100%; }
  body[data-screen=game] #gameTime { grid-column: 1; grid-row: 3; }
  body[data-screen=game] #hitSoundToggle { flex: 0 0 76px; min-width: 76px; padding: 5px 7px; gap: 6px; font-size: 14px; }
}
@media(max-width:360px) {
  body[data-screen=game] .action-buttons .button { font-size: 14px; padding: 9px 6px; }
}