/* Palette: Marine — shared with the Deutsch Feed. Burnt-orange spark marks progress only. */
:root {
  --bg: #eaeff4; --card: #f9fbfd; --ink: #182734; --ink-soft: #4f6272; --ink-faint: #8b9aa7;
  --rule: #d5dee7; --accent: #3d6d9a; --accent-ink: #ffffff; --spark: #c06b3a;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e141b; --card: #151f28; --ink: #dbe5ef; --ink-soft: #8a9bab; --ink-faint: #5b6b79;
    --rule: #243039; --accent: #6ba3d6; --accent-ink: #0e141b; --spark: #e0925a;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body { font: 17px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; -webkit-tap-highlight-color: transparent; }

.app { max-width: 30rem; margin: 0 auto; min-height: 100dvh; padding: max(1.5rem, env(safe-area-inset-top)) 16px max(1.5rem, env(safe-area-inset-bottom)); display: flex; }
.screen { width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .9rem; justify-content: center; }
h1 { font-family: Georgia, "Times New Roman", serif; font-size: 2rem; margin: 0; }
h2 { font-family: Georgia, "Times New Roman", serif; font-size: 1.7rem; margin: .1rem 0 0; }
.sub { color: var(--ink-soft); margin: 0; font-size: .95rem; }
.note { color: var(--ink-faint); font-size: .8rem; margin: 0; }
.note a { color: inherit; }

.pose-list { list-style: none; padding: 0; margin: .5rem 0; width: 100%; background: var(--card); border: 1px solid var(--rule); border-radius: 14px; }
.pose-list li { display: flex; justify-content: space-between; padding: .6rem 1rem; border-bottom: 1px solid var(--rule); text-align: left; }
.pose-list li:last-child { border-bottom: 0; }
.pose-list span:last-child { color: var(--ink-soft); font-variant-numeric: tabular-nums; }

.btn { font: inherit; border: 1px solid var(--rule); background: var(--card); color: var(--ink); border-radius: 999px; padding: .6rem 1.2rem; cursor: pointer; min-width: 3rem; }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.big { padding: .9rem 3rem; font-size: 1.15rem; }
.btn.small { padding: .3rem .8rem; font-size: .85rem; }
.link { background: none; border: 0; color: var(--ink-faint); font: inherit; font-size: .85rem; text-decoration: underline; cursor: pointer; margin-top: .5rem; }

.pose-img { max-width: 100%; max-height: 30vh; aspect-ratio: 4 / 3; object-fit: contain; border-radius: 14px; border: 1px solid var(--rule); background: var(--card); }
.ring-wrap { position: relative; width: min(48vw, 11rem); aspect-ratio: 1; }
.ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 5; }
.ring .track { stroke: var(--rule); }
.ring .arc { stroke: var(--spark); stroke-linecap: round; stroke-dasharray: 339.292; stroke-dashoffset: 0; }
.clock { position: absolute; inset: 0; display: grid; place-items: center; font-size: 2.4rem; font-variant-numeric: tabular-nums; font-weight: 300; }
.pose-text { margin: 0; max-width: 24rem; min-height: 5.5em; color: var(--ink-soft); }
.controls { display: flex; gap: .8rem; align-items: center; margin-top: .5rem; }
.music { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: .5rem; font-size: .8rem; color: var(--ink-soft); margin-top: 1rem; text-align: left; }
.music a { color: inherit; }
.music-btns { display: flex; gap: .4rem; flex-shrink: 0; }