#clay-beat { --ink: #f4f0e6; --muted: #afbed0; --line: #415369; color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", sans-serif; max-width: 1120px; margin: auto; padding: 0 32px 40px; }
#clay-beat * { box-sizing: border-box; }
#clay-beat [hidden] { display: none !important; }
#clay-beat button, #clay-beat input { font: inherit; }
#clay-beat a { color: inherit; text-underline-offset: 5px; }
#clay-beat .review-header { display: flex; justify-content: space-between; gap: 12px; padding: 24px 0; font-size: 11px; letter-spacing: .12em; }
#clay-beat .review-header a { text-decoration: none; }
#clay-beat .review-header span { color: var(--muted); letter-spacing: .03em; }
#clay-beat .layout { display: grid; grid-template-columns: minmax(0, 430px) minmax(0, 340px); justify-content: center; align-items: center; gap: 80px; }
#clay-beat .stage-shell { min-width: 0; width: 100%; }
#clay-beat .player-controls { display: flex; align-items: center; justify-content: flex-end; min-height: 48px; margin-bottom: 8px; padding: 4px 0 8px; border-bottom: 1px solid var(--line); }
#clay-beat .player-viewport { min-width: 0; width: 100%; }
#clay-beat .stage { position: relative; width: 100%; aspect-ratio: 9 / 16; overflow: hidden; background: #132c4c; border-radius: 6px; }
#clay-beat canvas { display: block; width: 100%; height: 100%; touch-action: manipulation; }
#clay-beat .surface { position: absolute; left: 8%; right: 8%; top: 15%; text-align: center; }
#clay-beat .eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .15em; }
#clay-beat h1 { font-size: clamp(54px, 7vw, 76px); line-height: .92; letter-spacing: -.065em; margin: 28px 0; font-weight: 850; }
#clay-beat h1 span { display: block; font-size: 12px; letter-spacing: .28em; margin-top: 18px; font-weight: 500; }
#clay-beat .instruction { font-size: 13px; line-height: 1.9; margin: 24px 0; }
#clay-beat .track-label { font-size: 10px; letter-spacing: .15em; margin-top: 32px; }
#clay-beat button { cursor: pointer; border: 1px solid transparent; border-radius: 6px; padding: 13px 18px; min-height: 44px; background: #fa876c; color: #14283c; font-weight: 700; }
#clay-beat button:disabled { opacity: .65; cursor: wait; }
#clay-beat button:focus-visible, #clay-beat a:focus-visible, #clay-beat summary:focus-visible { outline: 2px solid #9fe6ee; outline-offset: 4px; }
#clay-beat .surface button { display: block; width: 100%; margin-top: 12px; }
#clay-beat button.secondary { background: #182f4b; color: var(--ink); border-color: #63758b; }
#clay-beat .fullscreen { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 8px 12px; color: #f4f0e6; background: #182f4b; border-color: #63758b; font-size: 12px; line-height: 1; white-space: nowrap; }
#clay-beat .fullscreen:hover { background: #203b5b; border-color: #8295aa; }
#clay-beat .fullscreen[aria-pressed="true"] { color: #f4f0e6; background: #203b5b; border-color: #9bacc0; }
#clay-beat .fullscreen-icon { width: 18px; height: 18px; flex: 0 0 18px; fill: none; stroke: #a7eaf0; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#clay-beat .fullscreen-icon-collapse { display: none; }
#clay-beat .fullscreen[aria-pressed="true"] .fullscreen-icon-expand { display: none; }
#clay-beat .fullscreen[aria-pressed="true"] .fullscreen-icon-collapse { display: inline; }
#clay-beat .small { color: var(--muted); font-size: 11px; line-height: 1.8; }
#clay-beat .hud { position: absolute; left: 7%; right: 7%; top: 5%; display: flex; justify-content: space-between; pointer-events: none; }
#clay-beat .hud div { text-align: center; }
#clay-beat .hud span { display: block; font-size: 9px; letter-spacing: .15em; color: #b8cadd; }
#clay-beat .hud strong { display: block; font-size: 25px; font-weight: 500; font-variant-numeric: tabular-nums; margin-top: 6px; }
#clay-beat .pause { position: absolute; bottom: 5%; right: 5%; background: #162c44; color: #f4f0e6; border-color: #526881; font-size: 11px; padding: 8px 10px; }
#clay-beat .cue { position: absolute; top: 58%; left: 5%; right: 5%; text-align: center; color: #a7eaf0; letter-spacing: .12em; font-size: 17px; pointer-events: none; }
#clay-beat .stage-caption { position: absolute; bottom: 1%; width: 100%; text-align: center; font-size: 7px; letter-spacing: .13em; color: #9fb4c9; pointer-events: none; }
#clay-beat .review h2 { font-size: 36px; line-height: 1.5; font-weight: 600; letter-spacing: -.035em; margin: 24px 0; }
#clay-beat .review > p:not(.eyebrow, .small, .status) { font-size: 14px; color: #bdcad8; line-height: 2; }
#clay-beat .music { border-top: 1px solid var(--line); margin-top: 32px; padding-top: 24px; }
#clay-beat h3 { font-size: 15px; font-weight: 600; }
#clay-beat .music p { color: var(--muted); font-size: 12px; line-height: 1.8; }
#clay-beat audio { display: block; width: 100%; margin: 16px 0; }
#clay-beat .music a { font-size: 12px; }
#clay-beat details { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 18px 0; margin: 28px 0 16px; font-size: 13px; }
#clay-beat summary { cursor: pointer; }
#clay-beat label { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
#clay-beat input { accent-color: #fa876c; }
#clay-beat .result-score { font-size: 60px; margin: 20px 0 0; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
#clay-beat .result h2, #clay-beat .paused h2 { font-size: 23px; margin: 26px 0; }
#clay-beat dl { border-top: 1px solid #50627b; margin: 24px 0; padding-top: 8px; }
#clay-beat dl div { display: flex; justify-content: space-between; font-size: 12px; padding: 7px 0; }
#clay-beat dd { margin: 0; font-variant-numeric: tabular-nums; }
#clay-beat .status { font-size: 12px; line-height: 1.8; }
@media (max-width: 780px) { #clay-beat { padding: 0 16px 32px; } #clay-beat .layout { grid-template-columns: minmax(0, 430px); gap: 32px; } #clay-beat .review { padding: 0 8px; } #clay-beat .review h2 { font-size: 28px; } }
@media (max-width: 360px) { #clay-beat { padding: 0 8px 24px; } #clay-beat .surface { top: 12%; } #clay-beat h1 { font-size: 52px; margin: 20px 0; } #clay-beat .instruction { margin: 18px 0; } #clay-beat .track-label { margin-top: 20px; } #clay-beat .result-score { font-size: 44px; } #clay-beat dl { margin: 16px 0; } }
#clay-beat { color-scheme: dark; background: #101e31; }
#clay-beat h1, #clay-beat h2, #clay-beat h3 { color: inherit; background: none; border: 0; padding: 0; }
#clay-beat .level-label { margin: 12px 0 0; justify-content: center; font-size: 12px; }
#clay-beat select { font: inherit; color: #f4f0e6; background: #182f4b; border: 1px solid #63758b; border-radius: 6px; padding: 8px; min-height: 40px; }
#clay-beat input[type=number] { width: 78px; padding: 8px; border: 1px solid #63758b; border-radius: 6px; background: #182f4b; color: inherit; }
#clay-beat .level-help { margin: 8px 0; min-height: 20px; }
#clay-beat .intro { top: 9%; }
#clay-beat .intro h1 { margin: 20px 0; }
#clay-beat .intro .track-label { margin-top: 16px; }
#clay-beat .result { top: 8%; }
#clay-beat .result h2 { margin: 16px 0; font-size: 21px; }
#clay-beat .result-score { margin-top: 12px; }
#clay-beat .result dl { margin: 14px 0; }
#clay-beat .policy-links { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; padding-top: 24px; }
#clay-beat .stage-shell:fullscreen, #clay-beat .stage-shell[data-expanded="true"] { width: 100%; height: 100%; margin: 0; padding: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; background: #101e31; }
#clay-beat .stage-shell[data-expanded="true"] { position: fixed; inset: 0; z-index: 2147483647; height: 100dvh; }
#clay-beat .stage-shell:fullscreen .player-controls, #clay-beat .stage-shell[data-expanded="true"] .player-controls { width: 100%; min-height: 52px; margin: 0; padding: calc(env(safe-area-inset-top, 0px) + 6px) max(12px, env(safe-area-inset-right, 0px)) 6px max(12px, env(safe-area-inset-left, 0px)); background: #101e31; }
#clay-beat .stage-shell:fullscreen .player-viewport, #clay-beat .stage-shell[data-expanded="true"] .player-viewport { min-height: 0; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; padding-bottom: env(safe-area-inset-bottom, 0px); }
#clay-beat .stage-shell:fullscreen .stage, #clay-beat .stage-shell[data-expanded="true"] .stage { width: auto; height: min(100%, 177.7778vw); max-width: 100%; max-height: 100%; }
#clay-beat .stage-shell:fullscreen .pause, #clay-beat .stage-shell[data-expanded="true"] .pause { bottom: max(5%, env(safe-area-inset-bottom, 0px)); }
@media (max-width: 420px) {
  #clay-beat .intro { top: 7%; }
  #clay-beat .intro h1 { font-size: 48px; margin: 16px 0; }
  #clay-beat .intro .instruction { margin: 14px 0; font-size: 12px; }
  #clay-beat .intro .track-label { margin-top: 12px; }
  #clay-beat .result-score { font-size: 42px; }
  #clay-beat .result dl div { padding: 5px 0; }
}