:root {
  color-scheme: light;
  --md-ink: #101b35;
  --md-paper: #f7f5ef;
  --md-card: #fffdf9;
  --md-line: #d9d6cc;
  --md-muted: #697080;
  --md-pink: #e94f78;
  --md-lime: #c7fa55;
  --md-green: #6aaa64;
  --md-yellow: #c9b458;
}

html, body { background: var(--md-paper); color: var(--md-ink); }
body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
.sl-screen { min-height: 100%; padding: 0 0 16px; background: var(--md-paper); }
.sl-screenFinished { padding-bottom: 24px; }
.sl-topbar { width: min(100%, 840px); padding: 11px 16px; border-bottom-color: var(--md-line); }
.sl-brand { color: var(--md-ink); font-family: Georgia, serif; font-size: 1.38rem; font-weight: 800; letter-spacing: -0.5px; }
.sl-brand span { margin-left: 5px; color: var(--md-pink); font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-size: .63em; letter-spacing: .02em; text-transform: uppercase; }
.sl-iconButton { border-color: var(--md-line); background: var(--md-card); color: var(--md-ink); box-shadow: none; }
.sl-iconButton:hover { border-color: var(--md-pink); color: var(--md-pink); }
.sl-boardWrap, .sl-panel, .sl-resultPanel { width: min(100%, 840px); }
.sl-boardWrap { padding-top: 12px; }
.sl-metaText, .sl-timeLabel, .sl-statusLine { color: var(--md-muted); }
.sl-slot { min-height: 32px; border-color: var(--md-line); border-radius: 7px; background: #ece9df; color: var(--md-ink); font-weight: 700; }
.sl-slotEmpty { background: #f0eee8; }
.sl-slotWrong { border-color: #ddb2bd; background: #f9e6eb; }
.sl-slotSkipped { border-color: #dac77c; background: #f7f0d6; }
.sl-slotCorrect { border-color: #6aaa64; background: #dff0d6; }
.sl-panel { margin-top: 20px; padding: 20px 18px 8px; border: 0; border-top: 1px solid var(--md-line); border-radius: 0; background: transparent; box-shadow: none; }
.sl-progressIndicatorLabel { color: var(--md-ink); text-shadow: none; }
.sl-progressIndicatorArrow { border-top-color: var(--md-ink); }
.sl-progressSegments { border-color: #c4c1b8; }
.sl-progressSegmentsPreview { background: #e7e4dc; }
.sl-segment { border-color: #cfcbc1; }
.sl-segmentCurrent { background: #cbd7e7; }
.sl-segmentSkipped { background: #eadc9e; }
.sl-segmentWrong { background: #efbdc9; }
.sl-segmentCorrect { background: #9fd28e; }
.sl-progressPlaybackFill { background: var(--md-pink); box-shadow: none; }
.sl-playButton { border-color: var(--md-ink); background: var(--md-ink); color: #fff; box-shadow: 0 7px 14px rgba(16,27,53,.2); }
.sl-playButton:hover, .sl-playButton:focus-visible { border-color: var(--md-pink); background: var(--md-pink); box-shadow: 0 9px 18px rgba(233,79,120,.22); }
.sl-searchWrap { border-color: #aeb4bd; border-radius: 9px; background: #fff; }
.sl-searchIcon, .sl-clearButton, .sl-searchInput { color: var(--md-ink); }
.sl-searchInput::placeholder { color: #8b92a0; }
.sl-suggestionList { border-color: var(--md-line); background: var(--md-card); box-shadow: 0 14px 28px rgba(16,27,53,.16); }
.sl-suggestionButton { background: transparent; color: var(--md-ink); }
.sl-suggestionButton:hover, .sl-suggestionButton:focus-visible, .sl-suggestionButtonActive { border-color: var(--md-pink); background: #f9edf0; }
.sl-skipButton { border-color: var(--md-line); background: #ece9df; color: var(--md-ink); }
.sl-submitButton { border-color: var(--md-ink); background: var(--md-ink); box-shadow: 0 7px 14px rgba(16,27,53,.18); }
.sl-submitButton:hover, .sl-submitButton:focus-visible, .sl-shareButton:hover, .sl-shareButton:focus-visible { background: var(--md-pink); box-shadow: 0 9px 17px rgba(233,79,120,.22); }
.sl-resultSongCard { background: var(--md-ink); border-color: var(--md-ink); border-radius: 14px; box-shadow: 0 12px 24px rgba(16,27,53,.22); }
.sl-resultSongLink { color: var(--md-lime); }
.sl-resultQuote, .sl-resultSummary { color: var(--md-muted); }
.sl-finishedPlaybackRail::before { background: var(--md-line); }
.sl-finishedProgressTrack { background: #e7e4dc; box-shadow: inset 0 1px 1px rgba(16,27,53,.12); }
.sl-finishedProgressFill { background: var(--md-pink); }
.sl-resultActions .sl-shareButton { border-color: var(--md-pink); background: var(--md-pink); box-shadow: 0 8px 16px rgba(233,79,120,.22); }
.sl-resultActions .sl-shareButton:hover, .sl-resultActions .sl-shareButton:focus-visible { background: #d94369; }
.sl-modalBackdrop { background: rgba(16,27,53,.58); }
.sl-modal, .sl-statsModal { border-color: var(--md-line); background: var(--md-card); color: var(--md-ink); }
.sl-modalClose, .sl-modalText, .sl-statCard strong { color: var(--md-ink); }
.sl-statCard span { color: var(--md-muted); }

@media (max-width: 620px) {
  .sl-topbar { padding-inline: 12px; }
  .sl-brand { font-size: 1.18rem; }
  .sl-brand span { display: block; margin: 2px 0 0; font-size: .49em; }
  .sl-panel { padding: 18px 13px 14px; }
}