/* Next Monday site. Colours mirror Design/DesignSystem/NMTokens.swift (level palettes). */
:root {
  --sun: #FF6A3D; --brand-ink: #15131C; --paper: #F4EEE8; --cheek: #FF4F6A;
  /* Motion tokens: Shared/Motion.swift's SwiftUI springs (duration, bounce) as CSS linear(),
     sampled from the damped spring until it settles within 0.2%. -dur is that settle time. */
  --snappy: linear(0, 0.019, 0.069, 0.138, 0.218, 0.303, 0.388, 0.47, 0.547, 0.618, 0.681, 0.737, 0.786, 0.829, 0.864, 0.895, 0.919, 0.94, 0.956, 0.97, 0.98, 0.988, 0.994, 0.998, 1.002, 1.004, 1.005, 1.006, 1.006, 1.006, 1.006, 1.006, 1.005, 1.005, 1.004, 1.004, 1.003, 1.003, 1.002, 1.002, 1);
  --snappy-dur: 0.4s;
  --standard: linear(0, 0.011, 0.041, 0.084, 0.136, 0.194, 0.254, 0.316, 0.377, 0.437, 0.494, 0.548, 0.598, 0.644, 0.687, 0.726, 0.761, 0.793, 0.821, 0.846, 0.868, 0.888, 0.905, 0.92, 0.933, 0.944, 0.954, 0.962, 0.969, 0.975, 0.98, 0.985, 0.988, 0.991, 0.993, 0.995, 0.997, 0.998, 0.999, 1, 1);
  --standard-dur: 0.4s;
  --gentle: linear(0, 0.015, 0.055, 0.11, 0.174, 0.243, 0.314, 0.383, 0.45, 0.513, 0.571, 0.624, 0.673, 0.716, 0.755, 0.789, 0.819, 0.846, 0.869, 0.889, 0.906, 0.921, 0.934, 0.945, 0.954, 0.962, 0.968, 0.974, 0.979, 0.982, 0.986, 0.988, 0.991, 0.992, 0.994, 0.995, 0.996, 0.997, 0.998, 0.998, 1);
  --gentle-dur: 0.65s;
  --celebrate: linear(0, 0.025, 0.089, 0.177, 0.28, 0.387, 0.494, 0.594, 0.685, 0.765, 0.834, 0.892, 0.938, 0.974, 1.001, 1.021, 1.034, 1.042, 1.045, 1.046, 1.044, 1.041, 1.036, 1.031, 1.027, 1.022, 1.017, 1.013, 1.01, 1.007, 1.004, 1.002, 1.001, 1, 0.999, 0.998, 0.998, 0.998, 0.998, 0.998, 1);
  --strike: cubic-bezier(.5, 0, .3, 1.25);
  --strike-dur: .6s;
  --fade-quick: .2s ease-out;
  --fade-calm: .4s ease-out;
  --celebrate-dur: 0.9s;
  --radius: 22px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  color-scheme: light dark;
}

/* Light palettes per level: ground, three fields, ink, ink2, action, onAction, Mo */
html[data-level="1"], .lv-1 { --ground:#141432; --f1:#3B2F6E; --f2:#5C3570; --f3:#1E2A5A; --ink:#F2E6D8; --ink2:#C9BFB3; --action:#F2E6D8; --on:#141432; --mo:#8E86E8; --card:rgba(255,255,255,.08); --line:rgba(255,255,255,.14); }
html[data-level="2"], .lv-2 { --ground:#E4F2F1; --f1:#9EDCD6; --f2:#BFE3FF; --f3:#CFF0E6; --ink:#0F2422; --ink2:#36504D; --action:#0F2422; --on:#fff; --mo:#5CC9BF; }
html[data-level="3"], .lv-3 { --ground:#E3E8F5; --f1:#FFC3A0; --f2:#F6A9C8; --f3:#C4CEFF; --ink:#15131C; --ink2:#3D3A48; --action:#15131C; --on:#fff; --mo:#FFA27A; }
html[data-level="4"], .lv-4 { --ground:#FFD9C2; --f1:#FF8A4C; --f2:#FFC266; --f3:#FF7A9A; --ink:#15131C; --ink2:#2A2734; --action:#15131C; --on:#fff; --mo:#FFB347; }
html[data-level="5"], .lv-5 { --ground:#FF8A4C; --f1:#FFB347; --f2:#FF5A2C; --f3:#FF4F6A; --ink:#15131C; --ink2:#2A1A14; --action:#15131C; --on:#fff; --mo:#FF5A2C; }
html { --card: rgba(255,255,255,.42); --line: rgba(21,19,28,.1); }

@media (prefers-color-scheme: dark) {
  html[data-level="1"], .lv-1 { --ground:#0A0A1C; --f1:#2E2766; --f2:#3A2458; --f3:#0A0A1C; --ink:#E9E2D8; --ink2:#A9A2B8; --action:#E9E2D8; --on:#0A0A1C; }
  html[data-level="2"], .lv-2 { --ground:#061413; --f1:#11615A; --f2:#134A66; --f3:#061413; --ink:#E6F4F2; --ink2:#9FBDB9; --action:#E6F4F2; --on:#061413; }
  html[data-level="3"], .lv-3 { --ground:#0E0B10; --f1:#6B3A2E; --f2:#5A2F4A; --f3:#0E0B10; --ink:#F4EEE8; --ink2:#B8AFAB; --action:#F4EEE8; --on:#0E0B10; }
  html[data-level="4"], .lv-4 { --ground:#120A05; --f1:#B5541E; --f2:#A8742A; --f3:#120A05; --ink:#FFF1E6; --ink2:#D4B9A6; --action:#FFF1E6; --on:#120A05; }
  html[data-level="5"], .lv-5 { --ground:#160704; --f1:#E2451E; --f2:#FF6A3D; --f3:#C2304A; --ink:#fff; --ink2:#E0C4BB; --action:#FF6A3D; --on:#1A0500; }
  html { --card: rgba(255,255,255,.07); --line: rgba(255,255,255,.12); }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  background: var(--ground); color: var(--ink);
  line-height: 1.55; font-size: 17px;
  transition: background-color var(--gentle-dur) var(--gentle), color var(--gentle-dur) var(--gentle);
  -webkit-font-smoothing: antialiased;
}

/* The ambient light field */
.sky { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.field { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .9; transition: background-color var(--gentle-dur) var(--gentle); }
.f1 { background: var(--f1); width: 60vw; height: 50vw; left: -15vw; top: -18vw; }
.f2 { background: var(--f2); width: 45vw; height: 45vw; right: -10vw; top: 20vh; opacity: .75; }
.f3 { background: var(--f3); width: 70vw; height: 50vw; left: 5vw; bottom: -25vw; }

/* Header */
.top {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px clamp(18px, 4vw, 48px);
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  background: color-mix(in srgb, var(--ground) 55%, transparent);
  border-bottom: 1px solid var(--line);
}
.brand { display: block; line-height: 0; }
.logo { height: 30px; width: auto; }
.logo-dark { display: none; }
@media (prefers-color-scheme: dark) { .logo-light { display: none; } .logo-dark { display: block; } }
html[data-level="1"] .logo-light { display: none; }
html[data-level="1"] .logo-dark { display: block; }
.nav { display: flex; gap: clamp(10px, 2.4vw, 28px); align-items: center; font-size: 15px; }
.nav a { color: var(--ink2); text-decoration: none; }
.nav a:hover { color: var(--ink); }
.nav .pill { color: var(--on); background: var(--action); padding: 7px 14px; border-radius: 999px; font-weight: 600; }
@media (max-width: 640px) { .nav a:not(.pill) { display: none; } }

main, .foot { max-width: 1120px; margin: 0 auto; padding: 0 clamp(18px, 4vw, 48px); }
section { padding: clamp(56px, 9vw, 120px) 0; }
h1, h2, h3 { line-height: 1.08; letter-spacing: -.02em; margin: 0 0 .5em; }
h1 { font-size: clamp(48px, 8.4vw, 104px); font-weight: 800; letter-spacing: -.035em; }
h2 { font-size: clamp(32px, 4.6vw, 54px); font-weight: 800; }
h3 { font-size: 21px; font-weight: 700; }
p { margin: 0 0 1em; }
.sub, .muted, .note { color: var(--ink2); }
.sub { max-width: 640px; font-size: 19px; }

/* Hero */
.hero { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 32px; min-height: calc(100vh - 70px); padding-top: 32px; }
@media (max-width: 860px) { .hero { grid-template-columns: 1fr; min-height: 0; } }
.eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: 13px; font-weight: 700; color: var(--ink2); }
.struck { position: relative; color: var(--ink2); }
.struck::after {
  content: ""; position: absolute; left: -3%; right: -3%; top: 54%; height: .09em;
  background: var(--sun); border-radius: 99px; transform-origin: left center;
  transform: scaleX(0); animation: strike var(--strike-dur) .5s var(--strike) forwards;
}
@keyframes strike { to { transform: scaleX(1); } }
.lead { font-size: clamp(19px, 2vw, 23px); color: var(--ink2); max-width: 34ch; }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.button { display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px; border-radius: 999px; font-weight: 650; text-decoration: none; font-size: 17px; transition: transform var(--snappy-dur) var(--snappy); }
.button:active { transform: scale(.97); }
.primary { background: var(--action); color: var(--on); }
.ghost { color: var(--ink); border: 1.5px solid var(--line); background: var(--card); }

.horizon-wrap { display: flex; justify-content: center; }
.mo { width: min(460px, 90%); overflow: visible; }
.mo-sun { fill: var(--mo); transition: fill var(--gentle-dur) var(--gentle); }
.hero .mo-sun { fill: var(--sun); }
/* Mo, Design/docs/mo.md: 100-unit face, centre on the horizon (0,0 here). */
.eye { fill: var(--brand-ink); }
.eye-light { fill: #fff; }
.mo-gloss { fill: #fff; opacity: .18; }
.eyes-blink { fill: none; stroke: var(--brand-ink); stroke-width: 4.2; stroke-linecap: round; display: none; }
.mo.blinking .eyes-open { display: none; }
.mo.blinking .eyes-blink { display: inline; }
.horizon { stroke: var(--ink); stroke-width: 1.2; stroke-linecap: round; opacity: .55; }
/* Waking: rises from behind the line once (gentle). */
/* Waking keeps a longer stroke than a UI move: the gentle curve stretched over 1.1 s. */
.hero-mo .mo-body { transform: translateY(52px); animation: rise 1.1s .15s var(--gentle) forwards; }
@keyframes rise { to { transform: translateY(0); } }
/* Breathing: 1.5% over 4 s, only while a message is on screen (the coach bubble). */
.breathing { transform-box: fill-box; transform-origin: 50% 50%; animation: breathe 4s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.015); } }

/* The gap */
.gap { max-width: 760px; }
blockquote { margin: 0 0 24px; font-size: clamp(30px, 4.4vw, 50px); font-weight: 800; line-height: 1.12; letter-spacing: -.02em; }
.gap p { font-size: 20px; color: var(--ink2); }

/* Cards */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-top: 28px; }
.card, .cols > div {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.card p { color: var(--ink2); font-size: 16px; }
.mini { margin-top: 18px; padding: 14px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; font-size: 15px; }
.chip { align-self: flex-start; font-family: ui-rounded, "SF Pro Rounded", system-ui; font-weight: 700; font-size: 13px; padding: 2px 10px; border-radius: 99px; background: var(--action); color: var(--on); }
.week { flex-direction: row; justify-content: space-between; }
.week span { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; color: var(--ink2); }
.dot { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--line); display: block; }
.dot.on { background: var(--sun); border-color: var(--sun); }
.dot.fixed { background: var(--ink2); border-color: var(--ink2); }
.scores { gap: 8px; }
.score { align-self: flex-start; padding: 4px 12px; border-radius: 99px; font-weight: 650; font-size: 14px; }
.whole { background: #DDF3E2; color: #1D5B2E; }
.light { background: #FFEBC2; color: #6A4A00; }
.ultra { background: #E7E5F7; color: #3A3670; }
@media (prefers-color-scheme: dark) {
  .whole { background: #173A24; color: #A8E6BB; }
  .light { background: #3D2E0A; color: #FFD98A; }
  .ultra { background: #2A2850; color: #CFCBF5; }
}
.bar { height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; margin: 6px 0; }
.fill { display: block; height: 100%; width: 0; background: var(--sun); border-radius: 99px; transition: width var(--gentle-dur) var(--gentle); }
.in .fill { width: 78%; }

.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; margin-top: 28px; }
.cols p { color: var(--ink2); font-size: 16px; margin: 0; }

/* Coach */
.styles, .dial { display: inline-flex; flex-wrap: wrap; gap: 6px; padding: 6px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); margin: 12px 0 28px; }
.styles button, .dial button {
  font: inherit; font-size: 15px; font-weight: 650; color: var(--ink2); background: transparent;
  border: 0; border-radius: 999px; padding: 10px 18px; min-height: 44px; cursor: pointer;
  transition: background-color var(--snappy-dur) var(--snappy), color var(--snappy-dur) var(--snappy);
}
.styles button[aria-selected="true"], .dial button[aria-checked="true"] { background: var(--action); color: var(--on); }
.speaker { display: flex; align-items: flex-end; gap: 18px; }
.mo.small { width: 96px; flex: none; }
.bubble {
  margin: 0; padding: 16px 22px; border-radius: 22px 22px 22px 6px; font-size: 21px; font-weight: 600;
  background: var(--card); border: 1px solid var(--line); max-width: 520px;
  transition: opacity var(--fade-quick);
}
.bubble.swap { opacity: 0; }
.note { margin-top: 22px; }

/* Privacy */
.privacy h2 { max-width: 18ch; }
.privacy ul { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 12px; max-width: 680px; }
.privacy li { padding: 16px 20px 16px 48px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); position: relative; }
.privacy li::before { content: ""; position: absolute; left: 20px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--sun); }

.soon { text-align: center; }
.soon p { font-size: 19px; }

.foot { padding-top: 32px; padding-bottom: 48px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink2); }

/* Reveal on scroll: cards rise in, staggered */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--fade-calm), transform var(--gentle-dur) var(--gentle); }
.js .reveal.in { opacity: 1; transform: none; }

:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; border-radius: 8px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-property: opacity, background-color, color !important; }
  .hero-mo .mo-body { transform: none; }
  .struck::after { transform: scaleX(1); }
  .js .reveal { transform: none; }
}

/* Links in running text */
.foot a, .more a, .doc a, .soon a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.more { margin-top: 20px; }

/* Text pages (privacy) */
.doc { max-width: 720px; padding-top: clamp(32px, 6vw, 72px); padding-bottom: 64px; }
.doc h1 { font-size: clamp(40px, 6vw, 64px); }
.doc h2 { font-size: clamp(22px, 2.6vw, 28px); margin-top: 1.8em; }
.doc p, .doc li { color: var(--ink2); }
.doc ul { padding-left: 1.2em; margin: 0 0 1em; }
.doc li { margin-bottom: .5em; }
.draft { padding: 14px 18px; border-radius: 16px; background: var(--card); border: 1px dashed var(--ink2); color: var(--ink); font-size: 15px; }

/* Phone width: the pickers wrap as a rounded block, the bubble gets a calmer size. */
@media (max-width: 520px) {
  .styles, .dial { display: flex; border-radius: 28px; }
  .styles button, .dial button { flex: 1 1 auto; padding: 10px 12px; font-size: 14px; }
  .bubble { font-size: 18px; padding: 14px 18px; }
  .mo.small { width: 72px; }
  .hero .mo { width: min(320px, 80%); }
}

/* The day clock in the header: time and level, follows the scroll. */
.clock { margin-right: auto; margin-left: 14px; font-family: ui-rounded, "SF Pro Rounded", system-ui; font-size: 14px; color: var(--ink2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.clock b { color: var(--ink); font-weight: 700; }
.linklike { font: inherit; color: inherit; background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; cursor: pointer; }

/* Pause animations: the same stillness as Reduce Motion; colours still change. */
.motion-paused *, .motion-paused *::before, .motion-paused *::after { animation: none !important; }
.motion-paused .hero-mo .mo-body { transform: none; }
.motion-paused .struck::after { transform: scaleX(1); }
.motion-paused .js .reveal, .motion-paused.js .reveal { opacity: 1; transform: none; transition: none; }

/* Chromium only: no glass blur; the translucent fills carry the glass. */
.chromium .top, .chromium .card, .chromium .cols > div { backdrop-filter: none; -webkit-backdrop-filter: none; }
.chromium .top { background: color-mix(in srgb, var(--ground) 88%, transparent); }
.nav .pill { white-space: nowrap; }
@media (max-width: 400px) { .clock { margin-left: 8px; font-size: 13px; } .nav .pill { padding: 7px 12px; font-size: 14px; } }

/* The coach Mo wears the level's face (mo.md): 1 Sleeping, 2 Drowsy, 3 Awake, 4 Bright, 5 Focused. */
.face-cheeks, .face-lids, .face-drowsy, .face-sleep { display: none; }
.face-cheeks { fill: var(--cheek); opacity: .22; }
.lid-cover { fill: var(--mo); transition: fill var(--gentle-dur) var(--gentle); }
.lid-line, .face-sleep { fill: none; stroke: var(--brand-ink); stroke-linecap: round; stroke-width: 3.4; }
.lid-line.thick, .face-sleep { stroke-width: 4.2; }
html[data-level="1"] .mo.small .eyes-open { display: none; }
html[data-level="1"] .mo.small .face-sleep { display: inline; }
html[data-level="2"] .mo.small .face-drowsy { display: inline; }
html[data-level="4"] .mo.small .face-cheeks { display: inline; }
html[data-level="4"] .mo.small .eye { transform-box: fill-box; transform-origin: center; transform: scale(1.08); }
html[data-level="5"] .mo.small .face-lids { display: inline; }
html[data-level="2"] .mo.small .eye-light, html[data-level="5"] .mo.small .eye-light { display: none; }

/* ---- App kit: real screens drawn in HTML, sized in iOS points (Pooppy's --pt idea).
   1pt = var(--pt) px. iPhone 17 Pro: 402 x 874 pt; Apple Watch 46 mm: 208 x 248 pt. */
.kit { --pt: .72px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: calc(48 * var(--pt)); margin: 36px 0 12px; }
@media (max-width: 520px) { .kit { --pt: .7px; } }
.kit figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.kit figcaption { font-size: 14px; color: var(--ink2); }

.phone { --w: 402; --h: 874; }
.phone .screen {
  position: relative; overflow: hidden; isolation: isolate;
  width: calc(var(--w) * var(--pt)); height: calc(var(--h) * var(--pt));
  border-radius: calc(62 * var(--pt)); background: var(--ground); color: var(--ink);
  outline: calc(10 * var(--pt)) solid #0B0A0F; box-shadow: 0 30px 60px -20px rgba(0,0,0,.45), 0 0 0 calc(11 * var(--pt)) #2A2830;
  font-size: calc(17 * var(--pt)); line-height: 1.3;
}
.s-field { position: absolute; inset: 0; z-index: -1; }
.s-field i { position: absolute; border-radius: 50%; filter: blur(calc(60 * var(--pt))); }
.s-field i:first-child { background: var(--f1); width: 70%; height: 40%; left: -20%; top: -8%; }
.s-field i:last-child { background: var(--f2); width: 60%; height: 35%; right: -20%; top: 30%; opacity: .7; }
.s-status { display: flex; justify-content: space-between; align-items: center; height: calc(54 * var(--pt)); padding: 0 calc(34 * var(--pt)); font-weight: 600; font-size: calc(17 * var(--pt)); }
.island { width: calc(124 * var(--pt)); height: calc(36 * var(--pt)); border-radius: 99px; background: #000; }
.s-bat { width: calc(27 * var(--pt)); height: calc(13 * var(--pt)); border-radius: calc(4 * var(--pt)); border: calc(1.5 * var(--pt)) solid var(--ink); opacity: .8; }
.s-body { padding: calc(8 * var(--pt)) calc(20 * var(--pt)); display: flex; flex-direction: column; gap: calc(14 * var(--pt)); }
.s-head { display: flex; justify-content: space-between; align-items: flex-start; }
.s-title { margin: 0; font-size: calc(34 * var(--pt)); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.s-date { margin: 0; color: var(--ink2); font-size: calc(15 * var(--pt)); }
.s-pill { display: inline-flex; align-items: center; gap: calc(6 * var(--pt)); padding: calc(6 * var(--pt)) calc(12 * var(--pt)); border-radius: 99px; background: var(--card); border: 1px solid var(--line); font-size: calc(13 * var(--pt)); font-weight: 650; }
.s-sun { width: calc(12 * var(--pt)); height: calc(12 * var(--pt)); border-radius: 50%; background: var(--sun); }
.s-coach { display: flex; align-items: flex-end; gap: calc(12 * var(--pt)); }
.s-coach p { margin: 0; padding: calc(12 * var(--pt)) calc(14 * var(--pt)); border-radius: calc(18 * var(--pt)) calc(18 * var(--pt)) calc(18 * var(--pt)) calc(4 * var(--pt)); background: var(--card); border: 1px solid var(--line); font-weight: 600; font-size: calc(16 * var(--pt)); }
.s-mo { width: calc(58 * var(--pt)); flex: none; overflow: visible; }
.s-card, .s-habit { background: var(--card); border: 1px solid var(--line); border-radius: calc(24 * var(--pt)); padding: calc(18 * var(--pt)); }
.s-label { margin: 0; text-transform: uppercase; letter-spacing: .1em; font-size: calc(12 * var(--pt)); font-weight: 700; color: var(--ink2); }
.s-name { margin: calc(4 * var(--pt)) 0 calc(12 * var(--pt)); font-size: calc(24 * var(--pt)); font-weight: 750; letter-spacing: -.01em; }
.s-name.small { font-size: calc(17 * var(--pt)); margin: 0 0 calc(6 * var(--pt)); }
.s-bars { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: calc(8 * var(--pt)) calc(10 * var(--pt)); font-size: calc(13 * var(--pt)); color: var(--ink2); }
.s-bars b { color: var(--ink); font-family: ui-rounded, "SF Pro Rounded", system-ui; font-variant-numeric: tabular-nums; }
.s-bar { height: calc(8 * var(--pt)); border-radius: 99px; background: var(--line); overflow: hidden; }
.s-bar i { display: block; height: 100%; border-radius: 99px; background: var(--ink); width: 0; transition: width var(--gentle-dur) var(--gentle); }
.s-bars .s-bar:nth-of-type(4) i { background: var(--sun); }
.kit.in .w66 { width: 66%; } .kit.in .w100 { width: 100%; }
.s-meta { margin: calc(10 * var(--pt)) 0 0; font-size: calc(14 * var(--pt)); color: var(--ink2); }
.s-button { display: flex; justify-content: center; align-items: center; margin-top: calc(14 * var(--pt)); height: calc(52 * var(--pt)); border-radius: 99px; background: var(--action); color: var(--on); font-weight: 700; }
.s-habit { display: flex; justify-content: space-between; align-items: center; }
.s-habit .s-meta { margin-top: calc(6 * var(--pt)); }
.s-seg { display: flex; gap: calc(4 * var(--pt)); }
.s-seg i { width: calc(30 * var(--pt)); height: calc(6 * var(--pt)); border-radius: 99px; background: var(--line); }
.s-seg i.on { background: var(--ink); }
.s-check { width: calc(44 * var(--pt)); height: calc(44 * var(--pt)); border-radius: 50%; border: calc(2 * var(--pt)) solid var(--ink2); }
.s-tabs { position: absolute; left: calc(16 * var(--pt)); right: calc(16 * var(--pt)); bottom: calc(26 * var(--pt)); display: flex; align-items: center; gap: calc(4 * var(--pt)); padding: calc(6 * var(--pt)); border-radius: 99px; background: color-mix(in srgb, var(--ground) 70%, transparent); border: 1px solid var(--line); font-size: calc(12 * var(--pt)); font-weight: 650; color: var(--ink2); }
.s-tabs span { flex: 1; text-align: center; padding: calc(10 * var(--pt)) 0; border-radius: 99px; }
.s-tabs .on { background: var(--card); color: var(--ink); }
.s-tabs .s-add { flex: none; width: calc(40 * var(--pt)); height: calc(40 * var(--pt)); padding: 0; display: grid; place-items: center; background: var(--action); color: var(--on); font-size: calc(22 * var(--pt)); }

/* The watch is always dark, with the level's dark palette as a soft glow (watch-and-widgets.md). Work = 5 Go. */
.watch { --w: 208; --h: 248; }
.w-screen {
  position: relative; overflow: hidden; isolation: isolate;
  width: calc(var(--w) * var(--pt)); height: calc(var(--h) * var(--pt));
  border-radius: calc(54 * var(--pt)); background: #000; color: #fff;
  box-shadow: 0 0 0 calc(12 * var(--pt)) #1B1A20, 0 0 0 calc(14 * var(--pt)) #3A3842, 0 24px 50px -18px rgba(0,0,0,.5);
  padding: calc(18 * var(--pt)) calc(16 * var(--pt)); display: flex; flex-direction: column; align-items: flex-start;
  font-family: -apple-system, "SF Compact Text", system-ui; line-height: 1.15;
}
.w-glow { position: absolute; z-index: -1; width: 120%; height: 70%; left: -10%; bottom: -30%; border-radius: 50%; background: #E2451E; filter: blur(calc(28 * var(--pt))); opacity: .55; }
.w-screen p { margin: 0; }
.w-head { font-size: calc(15 * var(--pt)); font-weight: 600; color: #FF6A3D; }
.w-phase { margin-top: calc(6 * var(--pt)) !important; font-size: calc(13 * var(--pt)); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.w-digits { font-family: ui-rounded, "SF Compact Rounded", "SF Pro Rounded", system-ui; font-size: calc(76 * var(--pt)); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1; }
.w-line { font-size: calc(16 * var(--pt)); font-weight: 600; }
.w-meta { font-size: calc(13 * var(--pt)); color: #E0C4BB; margin-top: calc(2 * var(--pt)) !important; }
.w-rounds { display: flex; gap: calc(4 * var(--pt)); margin-top: auto; width: 100%; }
.w-rounds i { flex: 1; height: calc(5 * var(--pt)); border-radius: 99px; background: rgba(255,255,255,.22); }
.w-rounds i.on { background: #fff; }
.w-rounds i.now { background: #FF6A3D; }
@media (max-width: 400px) { #clock-level { display: none; } .top { gap: 10px; } }

/* 404: Calm, Mo asleep on the line. */
.lost { text-align: center; min-height: 80vh; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.lost-mo { width: 140px; margin-bottom: 24px; }
.lost-sleep { display: inline; }