/* ============================================================
   Stillwater — a quieter way to be well
   Design tokens & screens rebuilt from design_handoff_stillwater_wellness
   All measurements are expressed in mock units (300px-wide screen)
   scaled through --u so the app stays proportional at any width.
   ============================================================ */

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('/static/fonts/cormorant-roman.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('/static/fonts/cormorant-italic.woff2') format('woff2');
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito Sans';
  src: url('/static/fonts/nunito-sans.woff2') format('woff2');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

/* the design sets every gap explicitly — strip UA block margins */
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

button {
  font-family: inherit;
}

:root {
  /* palette */
  --sand: #e8e0d0;
  --sand-2: #d8cdb5;
  --sage: #8a9d7a;
  --sage-deep: #5e7050;
  --ink: #3a3a32;
  --ink-soft: #807a6e;
  --cream: #faf6ed;
  --mauve: #b89aa0;

  /* hairlines */
  --hair: rgba(58, 58, 50, 0.06);
  --divider: rgba(58, 58, 50, 0.1);
  --dash: rgba(58, 58, 50, 0.2);

  /* scale unit: 1 mock px, capped so the app never exceeds ~420px wide */
  --u: min(1.4px, calc(100vw / 300));

  --serif: 'Cormorant Garamond', 'Iowan Old Style', 'Times New Roman', serif;
  --sans: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

body {
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--sand);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ------------------------------------------------------------
   App shell
   ------------------------------------------------------------ */
.app {
  position: relative;
  width: calc(300 * var(--u));
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--cream);
  transition: opacity 0.17s ease;
}

.app.leaving,
.app.entering {
  opacity: 0;
}

.app--breathe {
  background: var(--sage-deep);
}

.screen {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.screen::-webkit-scrollbar {
  display: none;
}

.screen--breathe {
  overflow: hidden;
  display: flex;
}

/* Quiet bottom tab bar ------------------------------------- */
.tabbar {
  flex-shrink: 0;
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  padding: calc(7 * var(--u)) calc(8 * var(--u)) max(calc(7 * var(--u)), env(safe-area-inset-bottom));
  border-top: 1px solid var(--hair);
  background: rgba(250, 246, 237, 0.94);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(3 * var(--u));
  padding: calc(4 * var(--u)) 0 calc(3 * var(--u));
  border-radius: calc(12 * var(--u));
  color: rgba(58, 58, 50, 0.4);
  font-size: calc(8 * var(--u));
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.28s ease, opacity 0.15s ease;
}
.tab svg {
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
  display: block;
}
.tab[aria-current='page'] {
  color: var(--sage-deep);
}
.tab:active {
  opacity: 0.65;
}

/* Generic helpers ------------------------------------------ */
.serif {
  font-family: var(--serif);
}
.em {
  font-style: italic;
  color: var(--sage-deep);
}
.press {
  transition: transform 0.15s ease-out, opacity 0.15s ease-out;
}
.press:active {
  transform: scale(0.98);
  opacity: 0.85;
}
:focus-visible {
  outline: 2px solid var(--sage-deep);
  outline-offset: 2px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* screen entry — soft fade up */
@keyframes screen-in {
  from {
    opacity: 0;
    transform: translateY(calc(6 * var(--u)));
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.screen-in > * {
  animation: screen-in 0.42s cubic-bezier(0.33, 0, 0.2, 1) both;
}
.screen-in > *:nth-child(1) { animation-delay: 0.02s; }
.screen-in > *:nth-child(2) { animation-delay: 0.05s; }
.screen-in > *:nth-child(3) { animation-delay: 0.08s; }
.screen-in > *:nth-child(4) { animation-delay: 0.11s; }
.screen-in > *:nth-child(5) { animation-delay: 0.14s; }
.screen-in > *:nth-child(6) { animation-delay: 0.17s; }

/* ------------------------------------------------------------
   01 · Today
   ------------------------------------------------------------ */
.s-today {
  display: flex;
  flex-direction: column;
  gap: calc(16 * var(--u));
  padding: max(calc(20 * var(--u)), env(safe-area-inset-top)) calc(24 * var(--u)) calc(10 * var(--u));
  min-height: 100%;
}

.today-date {
  font-size: calc(11 * var(--u));
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(58, 58, 50, 0.55);
}

.today-greet {
  font-family: var(--serif);
  font-weight: 300;
  font-size: calc(34 * var(--u));
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}
.today-greet .em {
  font-weight: 300;
}

.today-sub {
  font-size: calc(13 * var(--u));
  line-height: 1.5;
  color: rgba(58, 58, 50, 0.65);
  margin-top: calc(-4 * var(--u));
}

.ritual-card {
  position: relative;
  overflow: hidden;
  margin-top: calc(4 * var(--u));
  padding: calc(20 * var(--u));
  border-radius: calc(22 * var(--u));
  background: var(--sage);
  color: #fff;
  text-align: left;
  border: 0;
  width: 100%;
  font-family: inherit;
  cursor: pointer;
  display: block;
  text-decoration: none;
}
.ritual-card::after {
  content: '';
  position: absolute;
  right: calc(-30 * var(--u));
  top: calc(-30 * var(--u));
  width: calc(130 * var(--u));
  height: calc(130 * var(--u));
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.15), transparent 70%);
  pointer-events: none;
}
.ritual-label {
  font-size: calc(10 * var(--u));
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
.ritual-name {
  font-family: var(--serif);
  font-size: calc(24 * var(--u));
  font-style: italic;
  font-weight: 400;
  line-height: 1.15;
  margin: calc(4 * var(--u)) 0 calc(8 * var(--u));
}
.ritual-meta {
  font-size: calc(11 * var(--u));
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.85);
}
.ritual-cta {
  display: inline-flex;
  align-items: center;
  gap: calc(6 * var(--u));
  margin-top: calc(14 * var(--u));
  padding: calc(9 * var(--u)) calc(18 * var(--u));
  border-radius: calc(30 * var(--u));
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  font-size: calc(11 * var(--u));
  letter-spacing: 0.1em;
  color: #fff;
}
.ritual-cta svg {
  width: calc(12 * var(--u));
  height: calc(12 * var(--u));
}

.mini-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(10 * var(--u));
  margin-top: calc(4 * var(--u));
}

.mini-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  aspect-ratio: 1.15 / 1;
  padding: calc(14 * var(--u));
  border-radius: calc(18 * var(--u));
  background: var(--sand-2);
  color: var(--ink);
  border: 0;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
}
.mini-icon {
  color: var(--sage-deep);
  display: block;
  line-height: 0;
}
.mini-icon svg {
  width: calc(22 * var(--u));
  height: calc(22 * var(--u));
}
.mini-text {
  display: flex;
  flex-direction: column;
  gap: calc(3 * var(--u));
}
.mini-name {
  display: block;
  font-family: var(--serif);
  font-size: calc(17 * var(--u));
  font-style: italic;
  font-weight: 400;
  line-height: 1.1;
}
.mini-meta {
  display: block;
  font-size: calc(10 * var(--u));
  letter-spacing: 0.08em;
  color: rgba(58, 58, 50, 0.55);
}

/* ------------------------------------------------------------
   02 · Breathe
   ------------------------------------------------------------ */
.s-breathe {
  position: relative;
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: max(calc(20 * var(--u)), env(safe-area-inset-top)) calc(24 * var(--u)) calc(26 * var(--u));
  background: linear-gradient(180deg, #8a9d7a 0%, #5e7050 100%);
  color: #fff;
}

.breathe-back {
  position: absolute;
  top: calc(16 * var(--u));
  left: calc(18 * var(--u));
  width: calc(34 * var(--u));
  height: calc(34 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  z-index: 3;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.breathe-back svg {
  width: calc(15 * var(--u));
  height: calc(15 * var(--u));
}

.breathe-eyebrow {
  margin-top: calc(12 * var(--u));
  font-size: calc(10 * var(--u));
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
.breathe-name {
  margin-top: calc(4 * var(--u));
  font-family: var(--serif);
  font-size: calc(30 * var(--u));
  font-style: italic;
  font-weight: 300;
  line-height: 1.12;
  max-width: 90%;
}

.breathe-circle {
  --orb: min(calc(220 * var(--u)), 33vh);
  position: relative;
  width: var(--orb);
  height: var(--orb);
  margin-top: min(calc(40 * var(--u)), 6vh);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(0.85);
  transform-origin: 50% 50%;
  will-change: transform;
  flex-shrink: 0;
}
.breathe-circle::before {
  content: '';
  position: absolute;
  inset: calc(var(--orb) * 0.109);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.breathe-circle::after {
  content: '';
  position: absolute;
  inset: calc(var(--orb) * -0.091);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.breathe-instr {
  position: relative;
  z-index: 1;
  font-family: var(--serif);
  font-size: calc(24 * var(--u));
  font-style: italic;
  font-weight: 400;
  padding: 0 10%;
  transition: opacity 0.28s ease;
}

.breathe-time {
  margin-top: calc(30 * var(--u));
  font-family: var(--serif);
  font-size: calc(13 * var(--u));
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.8);
  font-variant-numeric: tabular-nums;
}

.breathe-controls {
  display: flex;
  align-items: center;
  gap: calc(26 * var(--u));
  margin-top: auto;
  padding-top: calc(24 * var(--u));
  padding-bottom: calc(6 * var(--u));
}
.ctrl {
  width: calc(50 * var(--u));
  height: calc(50 * var(--u));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  cursor: pointer;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: transform 0.15s ease-out, background 0.2s ease;
}
.ctrl svg {
  width: calc(17 * var(--u));
  height: calc(17 * var(--u));
}
.ctrl:active {
  transform: scale(0.95);
}
.ctrl--play {
  background: #fff;
  border: 0;
  color: var(--sage-deep);
}
.ctrl--play svg {
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
}

.breathe-foot {
  margin-top: calc(10 * var(--u));
  font-size: calc(10 * var(--u));
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

/* ------------------------------------------------------------
   03 · Library
   ------------------------------------------------------------ */
.s-library {
  padding: calc(20 * var(--u)) calc(22 * var(--u)) calc(10 * var(--u));
}

.lib-h {
  margin: 0 0 calc(4 * var(--u));
  font-family: var(--serif);
  font-size: calc(32 * var(--u));
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.lib-sub {
  font-size: calc(12 * var(--u));
  color: rgba(58, 58, 50, 0.55);
  margin-bottom: calc(18 * var(--u));
}

.lib-cat {
  display: flex;
  gap: calc(6 * var(--u));
  margin-bottom: calc(14 * var(--u));
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.lib-cat::-webkit-scrollbar {
  display: none;
}
.chip {
  flex-shrink: 0;
  padding: calc(7 * var(--u)) calc(14 * var(--u));
  border-radius: calc(30 * var(--u));
  background: var(--sand-2);
  color: var(--ink-soft);
  font-family: inherit;
  font-size: calc(11 * var(--u));
  text-decoration: none;
  border: 0;
  transition: background 0.22s ease, color 0.22s ease;
  cursor: pointer;
}
.chip[aria-current='true'] {
  background: var(--sage-deep);
  color: #fff;
}

.lib-list {
  transition: opacity 0.2s ease;
}

.lib-card {
  display: flex;
  align-items: center;
  gap: calc(14 * var(--u));
  padding: calc(12 * var(--u));
  margin-bottom: calc(10 * var(--u));
  background: var(--cream);
  border: 1px solid var(--hair);
  border-radius: calc(18 * var(--u));
  text-decoration: none;
  color: var(--ink);
}
.lib-card img {
  width: calc(64 * var(--u));
  height: calc(64 * var(--u));
  border-radius: calc(12 * var(--u));
  object-fit: cover;
  flex-shrink: 0;
  background: var(--sand-2);
}
.lib-card .info {
  flex: 1;
  min-width: 0;
}
.lib-card h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: calc(17 * var(--u));
  font-style: italic;
  font-weight: 400;
  line-height: 1.1;
}
.lib-card .meta {
  margin-top: calc(4 * var(--u));
  font-size: calc(10 * var(--u));
  letter-spacing: 0.08em;
  color: rgba(58, 58, 50, 0.55);
}
.play-mini {
  flex-shrink: 0;
  width: calc(36 * var(--u));
  height: calc(36 * var(--u));
  border-radius: 50%;
  background: var(--sage);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  cursor: pointer;
  transition: transform 0.15s ease-out, opacity 0.15s ease-out;
}
.play-mini svg {
  width: calc(12 * var(--u));
  height: calc(12 * var(--u));
  margin-left: calc(2 * var(--u));
}
.play-mini:active {
  transform: scale(0.94);
  opacity: 0.9;
}

.lib-empty {
  padding: calc(40 * var(--u)) calc(10 * var(--u));
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(17 * var(--u));
  color: rgba(58, 58, 50, 0.5);
}

/* ------------------------------------------------------------
   04 · Journal
   ------------------------------------------------------------ */
.s-journal {
  min-height: 100%;
  background: var(--sand);
  padding: calc(20 * var(--u)) calc(24 * var(--u)) calc(14 * var(--u));
}

.journal-h {
  margin: 0 0 calc(6 * var(--u));
  font-family: var(--serif);
  font-size: calc(28 * var(--u));
  font-style: italic;
  font-weight: 300;
  letter-spacing: -0.01em;
}
.journal-date {
  font-size: calc(11 * var(--u));
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(58, 58, 50, 0.5);
  margin-bottom: calc(22 * var(--u));
}

.journal-prompt {
  background: var(--cream);
  border: 1px dashed var(--dash);
  border-radius: calc(18 * var(--u));
  padding: calc(16 * var(--u));
  margin-bottom: calc(16 * var(--u));
}
.journal-prompt .label {
  font-size: calc(10 * var(--u));
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(58, 58, 50, 0.55);
  margin-bottom: calc(6 * var(--u));
}
.journal-prompt .q {
  font-family: var(--serif);
  font-size: calc(19 * var(--u));
  font-style: italic;
  font-weight: 400;
  line-height: 1.2;
}

.journal-entry {
  background: var(--cream);
  border: 1px solid var(--hair);
  border-radius: calc(18 * var(--u));
  padding: calc(16 * var(--u));
}
.journal-entry textarea {
  display: block;
  width: 100%;
  min-height: calc(88 * var(--u));
  border: 0;
  outline: 0;
  padding: 0;
  margin: 0;
  resize: none;
  overflow: hidden;
  background: transparent;
  color: var(--ink);
  font-family: var(--serif);
  font-size: calc(15 * var(--u));
  font-weight: 400;
  line-height: 1.5;
  caret-color: var(--sage-deep);
}
.journal-entry textarea::placeholder {
  color: rgba(58, 58, 50, 0.32);
  font-style: italic;
}

.mood-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: calc(18 * var(--u));
  padding-top: calc(14 * var(--u));
  border-top: 1px solid var(--divider);
}
.mood {
  width: calc(38 * var(--u));
  height: calc(38 * var(--u));
  border-radius: 50%;
  background: var(--sand-2);
  opacity: 0.6;
  border: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.2s ease, opacity 0.2s ease, transform 0.2s ease, color 0.2s ease;
}
.mood svg {
  width: calc(17 * var(--u));
  height: calc(17 * var(--u));
}
.mood.sel {
  background: var(--sage);
  color: #fdfbf4;
  opacity: 1;
  transform: scale(1.1);
}
.mood--dot {
  color: rgba(58, 58, 50, 0.45);
}
.mood--dot svg {
  width: calc(6 * var(--u));
  height: calc(6 * var(--u));
}

.journal-saved {
  margin-top: calc(12 * var(--u));
  text-align: right;
  font-size: calc(9 * var(--u));
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(58, 58, 50, 0.34);
  min-height: calc(12 * var(--u));
  transition: opacity 0.4s ease;
}

.journal-actions {
  margin-top: calc(18 * var(--u));
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(10 * var(--u));
}
.quiet-link {
  font-size: calc(10 * var(--u));
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(58, 58, 50, 0.45);
  background: none;
  border: 0;
  padding: 0;
  text-decoration: none;
  cursor: pointer;
}
.quiet-link:hover {
  color: var(--sage-deep);
}

/* ------------------------------------------------------------
   05 · Stats
   ------------------------------------------------------------ */
.s-stats {
  padding: calc(20 * var(--u)) calc(22 * var(--u)) calc(10 * var(--u));
}

.stats-h {
  margin: 0;
  font-family: var(--serif);
  font-size: calc(28 * var(--u));
  font-weight: 300;
  letter-spacing: -0.01em;
}
.stats-sub {
  margin: calc(4 * var(--u)) 0 calc(20 * var(--u));
  font-size: calc(11 * var(--u));
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(58, 58, 50, 0.55);
}

.streak-big {
  background: var(--cream);
  border: 1px solid var(--hair);
  border-radius: calc(22 * var(--u));
  padding: calc(22 * var(--u)) calc(18 * var(--u));
  text-align: center;
  margin-bottom: calc(14 * var(--u));
}
.streak-num {
  font-family: var(--serif);
  font-size: calc(64 * var(--u));
  font-weight: 300;
  line-height: 1;
  color: var(--sage-deep);
  font-variant-numeric: lining-nums;
}
.streak-label {
  margin-top: calc(4 * var(--u));
  font-size: calc(11 * var(--u));
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(58, 58, 50, 0.55);
}

.week-grid {
  display: flex;
  justify-content: space-between;
  gap: calc(6 * var(--u));
  margin-top: calc(16 * var(--u));
}
.week-day {
  flex: 1;
  text-align: center;
}
.week-dot {
  height: calc(38 * var(--u));
  border-radius: calc(10 * var(--u));
  background: var(--sand-2);
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(11 * var(--u));
}
.week-dot svg {
  width: calc(12 * var(--u));
  height: calc(12 * var(--u));
}
.week-dot.done {
  background: var(--sage);
  color: #fff;
}
.week-dot.today {
  background: var(--sage-deep);
  color: #fff;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--sage-deep);
}
.week-day .lbl {
  margin-top: calc(5 * var(--u));
  font-size: calc(9 * var(--u));
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(58, 58, 50, 0.5);
}

.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(10 * var(--u));
  margin-top: calc(16 * var(--u));
}
.stat-mini {
  background: var(--cream);
  border: 1px solid var(--hair);
  border-radius: calc(16 * var(--u));
  padding: calc(14 * var(--u));
}
.stat-mini .lbl {
  font-size: calc(10 * var(--u));
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(58, 58, 50, 0.55);
}
.stat-mini .val {
  margin-top: calc(6 * var(--u));
  font-family: var(--serif);
  font-size: calc(28 * var(--u));
  font-weight: 300;
  color: var(--sage-deep);
  line-height: 1.1;
}

.stats-note {
  margin-top: calc(22 * var(--u));
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(14 * var(--u));
  color: rgba(58, 58, 50, 0.45);
  text-align: center;
  line-height: 1.4;
}

/* ------------------------------------------------------------
   Small screens / desktop frame
   ------------------------------------------------------------ */
@media (min-width: 520px) and (min-height: 620px) {
  body {
    padding: 20px;
  }
  .app {
    height: min(calc(100dvh - 40px), 900px);
    border-radius: calc(26 * var(--u));
    border: 1px solid rgba(58, 58, 50, 0.09);
  }
  .screen {
    border-radius: calc(26 * var(--u));
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}