.noise-guide { max-width: 1000px; }
.noise-guide .site-nav { margin-bottom: 70px; }
.guide-intro { max-width: 780px; margin-bottom: 52px; }
.guide-intro h1 { font-size: clamp(46px, 7.5vw, 80px); line-height: 1.04; }
.guide-lede { max-width: 680px; font-size: clamp(19px, 3vw, 23px); color: #ded9ec; }
.guide-meta, .small-note, .source-note { color: var(--muted); font-size: 14px; }
.guide-player { padding: clamp(22px, 5vw, 44px); background: var(--panel); border: 1px solid #59617d; border-radius: 20px; box-shadow: var(--shadow); }
.player-heading, .player-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.player-heading { justify-content: space-between; }
.player-badge { color: var(--muted); font-size: 13px; }
.guide-player h2, .guide-section h2, .guide-app h2 { font-size: clamp(29px, 4vw, 40px); line-height: 1.14; }
.noise-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 0; border: 0; margin: 26px 0; }
.noise-options legend { margin-bottom: 10px; font-size: 14px; color: var(--muted); }
.noise-option { display: grid; position: relative; padding: 22px 16px 16px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; background: var(--page); }
.noise-option:has(:checked) { border-color: var(--accent); background: #30283a; }
.noise-option:has(:focus-visible) { outline: 3px solid var(--gold); outline-offset: 4px; }
.noise-option input { position: absolute; top: 14px; right: 12px; accent-color: var(--accent); }
.noise-symbol { font-family: Georgia, serif; font-size: 42px; color: var(--accent); line-height: 1; margin-bottom: 16px; }
.noise-option strong { font-size: 19px; margin-bottom: 6px; }
.noise-option span:last-child { color: var(--muted); font-size: 14px; }
.player-settings { display: grid; grid-template-columns: 1.5fr 1fr; gap: 28px; }
.player-settings label { display: grid; gap: 10px; }
.player-settings input { width: 100%; min-height: 44px; accent-color: var(--accent); }
.player-settings select { color: var(--ink); background: var(--page); border: 1px solid var(--line); border-radius: 8px; font: inherit; min-height: 44px; padding: 8px; }
.player-actions { margin-top: 22px; }
.player-actions button { font: inherit; font-weight: 800; cursor: pointer; border: 1px solid transparent; }
.player-actions .secondary-button { border-color: var(--line); }
.player-actions button:disabled { opacity: .45; cursor: default; }
#player-status { margin: 18px 0 14px; min-height: 1.55em; }
#remaining { color: var(--muted); font-variant-numeric: tabular-nums; }
.guide-section { margin-top: 72px; scroll-margin-top: 24px; }
.care-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; }
.care-columns h3 { font-size: 19px; margin-bottom: 8px; }
.sleep-table-wrap { overflow-x: auto; }
.sleep-table-wrap table { width: 100%; border-collapse: collapse; text-align: left; font-size: 18px; }
.sleep-table-wrap caption { text-align: left; color: var(--muted); font-size: 14px; padding-bottom: 12px; }
.sleep-table-wrap th, .sleep-table-wrap td { padding: 18px 12px; border-bottom: 1px solid var(--line); }
.sleep-table-wrap thead { color: var(--muted); font-size: 14px; }
.sleep-table-wrap tbody th { font-weight: 500; }
.sleep-table-wrap td span { color: var(--muted); font-size: 14px; }
.guide-app { display: flex; gap: 24px; margin: 72px 0 36px; padding: clamp(22px, 5vw, 40px); border-radius: 20px; background: var(--panel-2); }
.guide-app img { border-radius: 18px; flex-shrink: 0; }
.guide-app .store-button { line-height: 1.3; text-align: center; }
.skip-link { position: absolute; left: 16px; top: -90px; z-index: 2; background: var(--ink); color: var(--page); padding: 12px; }
.skip-link:focus { top: 12px; }
.noise-guide :focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
@media (max-width: 640px) {
  .noise-guide .site-nav { margin-bottom: 44px; gap: 12px; }
  .noise-guide .site-nav .secondary-button { font-size: 13px; padding: 10px; }
  .noise-options { grid-template-columns: 1fr; gap: 10px; }
  .noise-option { grid-template-columns: 36px 1fr; column-gap: 14px; padding: 16px; }
  .noise-symbol { grid-row: span 2; align-self: center; margin: 0; }
  .noise-option strong { padding-right: 20px; }
  .player-settings, .care-columns { grid-template-columns: 1fr; gap: 16px; }
  .guide-section { margin-top: 48px; }
  .guide-app { flex-direction: column; margin-top: 48px; }
  .noise-guide footer { flex-direction: column; }
  .sleep-table-wrap th, .sleep-table-wrap td { padding: 16px 8px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }