/* =========================================================================================
   Stretcher: "Night", the default look from October 2026. Same family as Mbao's Night
   (Neon Afterglow): a deep indigo sky with three soft lights in it, glass over it, a hot
   sunset gradient for the one thing to press, holographic foil for the payoff, two glossy
   balls for a mark, and Frizzy G lime only as a wink.

   Made for stretching: calm, and legible from a metre away. The countdown is huge, white and
   crisp; a slow halo breathes round it during holds (10 s a breath, 4 in and 6 out); the last
   three seconds turn it sunset and beat once a second; paused dims it and dashes the ring.

   Hand-written, phone first at 390px, system fonts only (the CSP allows no web fonts); icons
   are data: SVGs used as masks (the CSP allows data:). The app redraws the play screen ten
   times a second, so nothing here depends on classes it doesn't set itself, and the countdown
   is never made a stacking context: its halo lives behind everything on the play screen and
   can never cover the photo. During a session only one thing moves continuously (the halo,
   in ten small steps a second); everything stops under prefers-reduced-motion, and the page
   still looks finished.

   The look's script (night.js) turns it up: a WebGL nebula you can stir, 3D cards with a
   glare, ripples, a confetti cannon at the end. It only adds the nfx- classes at the end of
   this file, and everything above them is the whole look without it.
   ========================================================================================= */

:root {
  color-scheme: dark;

  /* ground and surfaces: a deep indigo night, never neutral grey */
  --bg: #0a0820;
  --surface: rgba(25, 19, 60, .76);
  --surface-solid: #17123b;
  --hair: rgba(214, 200, 255, .085);
  --sunk: rgba(6, 3, 24, .5);

  /* text: each passes 4.5:1 on the brightest thing it can sit on (glows included) */
  --text: #f7f4ff;
  --text-2: #d4cff0;
  --text-3: #c0b9e2;

  /* the neon, and light versions of it that are safe as text on the dark */
  --pink: #ff4fa3;
  --pink-soft: #ffb6dc;
  --violet: #8b6cff;
  --violet-soft: #d0c2ff;
  --cyan: #2fe5ef;
  --cyan-soft: #98f3f8;
  --amber: #ffb547;
  --amber-soft: #ffd59a;
  --mint: #7dffc8;
  --ink: #1c0f26;                  /* text on the sunset and on the foil */
  /* (Frizzy G lime #55ff00 is only a wink: its swatch in the look switch, a few bits of confetti) */

  --sunset: linear-gradient(112deg, #ff3f9b 0%, #ff5d82 30%, #ff8760 64%, #ffba4b 100%);
  --sunset-x: linear-gradient(90deg, #ff3f9b, #ff7266 55%, #ffb84b);
  /* holographic foil: two turns of pink, peach, mint, sky and lilac, so a full rainbow always shows */
  --foil: linear-gradient(115deg, #ffb6dc 0%, #ffd4bb 10%, #c0ffdb 20%, #b5eeff 30%, #cbbbff 40%, #ffb6dc 50%, #ffd4bb 60%, #c0ffdb 70%, #b5eeff 80%, #cbbbff 90%, #ffb6dc 100%);
  --grad-card: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .015) 64%);
  --glass-btn: linear-gradient(180deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .055));

  --rim: inset 0 1px 0 rgba(255, 255, 255, .09), inset 0 0 0 1px rgba(214, 200, 255, .085);
  --lift: 0 1px 2px rgba(0, 0, 0, .35), 0 16px 36px -18px rgba(4, 0, 24, .9);
  --glow: 0 14px 34px -12px rgba(255, 79, 163, .62);
  --bevel: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -2px 0 rgba(120, 20, 50, .16);

  --r-xl: 28px;
  --r-l: 22px;
  --r-m: 16px;
  --gutter: 16px;
  --focus: #ffffff;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;

  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.34, 1.45, .64, 1);

  /* icons, drawn in black and used as masks so they take the text colour */
  --i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.5l3.2 3.2 6.5-7.2' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --i-cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.2 4.2l7.6 7.6M11.8 4.2l-7.6 7.6' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round'/%3E%3C/svg%3E");
  --i-gear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000'%3E%3Ccircle cx='12' cy='12' r='5.1' stroke-width='3.4'/%3E%3Ccircle cx='12' cy='12' r='8.2' stroke-width='3.3' stroke-dasharray='3.22 3.22' transform='rotate(-11.25 12 12)'/%3E%3C/g%3E%3C/svg%3E");
  --i-restart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.6 15.6a7.4 7.4 0 1 0 .9-8.4L4.2 9.4'/%3E%3Cpath d='M4 4.8v4.8h4.8'/%3E%3C/g%3E%3C/svg%3E");
  --i-prev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 6.6v10.8l-8.6-5.4z' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3Crect x='5.2' y='5.6' width='2.6' height='12.8' rx='1.3'/%3E%3C/svg%3E");
  --i-next: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6.6v10.8l8.6-5.4z' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3Crect x='16.2' y='5.6' width='2.6' height='12.8' rx='1.3'/%3E%3C/svg%3E");
  --i-pause: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='6.2' y='5' width='4.1' height='14' rx='1.5'/%3E%3Crect x='13.7' y='5' width='4.1' height='14' rx='1.5'/%3E%3C/svg%3E");
  --i-play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.4 5.8v12.4l9.8-6.2z' stroke='%23000' stroke-width='2.2' stroke-linejoin='round'/%3E%3C/svg%3E");
  /* the check in pink, for the ink badge on the foil (a mask can't take two colours) */
  --i-check-pink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.5l3.2 3.2 6.5-7.2' fill='none' stroke='%23ffb6dc' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --i-chev-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.8 6.2 8 10.4l4.2-4.2' fill='none' stroke='%23d4cff0' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  /* "Last time" (a clock), on to the next question (an arrow), Desk break (a bolt), and the play
     sign in ink for the sunset go buttons */
  --i-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.6 8h10.2M8.9 3.9 13 8l-4.1 4.1' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --i-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='6.1'/%3E%3Cpath d='M8 4.6v3.6l2.4 1.5'/%3E%3C/g%3E%3C/svg%3E");
  --i-bolt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M9.6 1.2 3.4 9.1h4.1l-1.1 5.7 6.2-7.9H8.5z' stroke='%23000' stroke-width='.9' stroke-linejoin='round'/%3E%3C/svg%3E");
  --i-play-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.4 5.8v12.4l9.8-6.2z' fill='%231c0f26' stroke='%231c0f26' stroke-width='2.2' stroke-linejoin='round'/%3E%3C/svg%3E");
  /* film grain in the sky, so the big gradients never band */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url%28%23g%29'/%3E%3C/svg%3E");
}

/* a real spring where the browser can do one */
@supports (transition-timing-function: linear(0, 1)) {
  :root { --spring: linear(0, .12 4%, .44 10%, .79 17%, .98 23%, 1.05 28%, 1.06 32%, 1.04 38%, 1.01 46%, .995 56%, 1); }
}

/* ---------- base (the screens' mechanics are the app's own: two fixed full-height screens) ---------- */

* { margin: 0; padding: 0; box-sizing: border-box; }
*::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
body {
  color: var(--text);
  font: 400 16px/1.45 var(--font);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
input, select { user-select: text; -webkit-user-select: text; }
::selection { background: rgba(255, 79, 163, .42); color: #fff; }

/* the sky: deep indigo, lighter overhead, three soft lights (violet overhead on the left, magenta
   in from the right, cyan low down) and a fine grain so the big gradients never band. Static:
   the effects script lays a living nebula over it, and nothing here costs a frame */
body::before {
  --l1: circle 59vw at 0vw -4vh; --l2: circle 56vw at 102vw 40vh; --l3: circle 59vw at -4vw 90vh;
  content: ""; position: fixed; inset: 0; z-index: -3; pointer-events: none;
  background:
    var(--grain),
    radial-gradient(var(--l1), rgba(124, 82, 255, .38), rgba(124, 82, 255, .15) 55%, rgba(124, 82, 255, 0) 100%),
    radial-gradient(var(--l2), rgba(255, 52, 160, .3), rgba(255, 52, 160, .11) 55%, rgba(255, 52, 160, 0) 100%),
    radial-gradient(var(--l3), rgba(30, 214, 235, .2), rgba(30, 214, 235, .075) 55%, rgba(30, 214, 235, 0) 100%),
    radial-gradient(120% 55% at 50% -12%, rgba(78, 52, 178, .3), rgba(78, 52, 178, 0) 70%),
    radial-gradient(100% 50% at 50% 118%, rgba(48, 22, 120, .42), rgba(48, 22, 120, 0) 70%),
    linear-gradient(180deg, #0d0a29 0%, #0a0820 50%, #08061a 100%);
}
/* a desktop: the lights spread out into the margins (night.js puts the nebula's in the same places) */
@media (min-width: 1100px) {
  body::before { --l1: circle 30vw at 14vw 6vh; --l2: circle 26vw at 92vw 42vh; --l3: circle 29vw at 16vw 100vh; }
}

/* the luminous type: white running into pink and lilac, with a soft glow round it */
.logo-text {
  color: var(--text);
  background: linear-gradient(100deg, #ffffff 0%, #fff0f8 36%, #ffb3da 70%, #c9b8ff 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

button {
  font: inherit; color: inherit; margin: 0; border: 0; background: none;
  appearance: none; -webkit-appearance: none;
  cursor: pointer; touch-action: manipulation; /* no double-tap-zoom delay on phones */
  -webkit-tap-highlight-color: transparent;
}
:focus-visible { outline: 2.5px solid var(--focus); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }

/* icon buttons: the app's glyphs (emoji on some phones) give way to crisp drawn icons; the
   buttons keep their aria-labels, so nothing changes for a screen reader */
#btnSettings, #btnExit, .play-controls button { font-size: 0; color: var(--text); }
#btnSettings::before, #btnExit::before, .play-controls button::before {
  content: ""; position: absolute; inset: 0; margin: auto; width: 22px; height: 22px;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat;
  pointer-events: none;
}
#btnSettings { --icon: var(--i-gear); }
#btnExit { --icon: var(--i-cross); }
#btnRestart { --icon: var(--i-restart); }
#btnBack { --icon: var(--i-prev); }
#btnSkip { --icon: var(--i-next); }
#btnPlayPause { --icon: var(--i-pause); }
#btnPlayPause[aria-label="Resume"] { --icon: var(--i-play); }
#btnPlayPause[aria-label="Finished"] { --icon: var(--i-check); }

/* the round glass buttons in the corners */
button.icon {
  position: relative; flex: none; width: 44px; height: 44px; border-radius: 50%;
  background: var(--glass-btn);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .13), inset 0 0 0 1px rgba(214, 200, 255, .12), 0 8px 18px -10px rgba(0, 0, 0, .8);
  transition: transform .45s var(--spring), box-shadow .25s var(--ease), background-color .25s var(--ease);
}
button.icon::before { transition: transform .6s var(--spring); }
button.icon:active { transform: scale(.92); }
@media (hover: hover) {
  button.icon:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 0 1px rgba(255, 150, 210, .4), 0 8px 18px -10px rgba(0, 0, 0, .8); }
}
/* settings open: the gear turns and the button lights pink (and aria-expanded says so) */
#btnSettings[aria-expanded="true"] {
  color: var(--ink);
  background: var(--sunset);
  box-shadow: var(--bevel), 0 0 0 1px rgba(255, 110, 170, .35), 0 10px 24px -10px rgba(255, 79, 163, .8);
}
#btnSettings[aria-expanded="true"]::before { transform: rotate(60deg); }

/* ---------- screens ---------- */

/* each screen is the full dynamic viewport, capped in width so a desktop gets a phone-shaped column */
.screen {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 100vh;
  height: 100dvh;
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
  padding: max(12px, env(safe-area-inset-top)) max(var(--gutter), env(safe-area-inset-right))
           max(14px, env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left));
}

/* ---------- home: the top bar ---------- */

.topbar { display: flex; align-items: center; gap: 10px; flex-shrink: 0; min-height: 44px; }

/* the mark: two glossy balls, pink and cyan, on a band that stretches as they breathe apart */
.brand {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 0;
  font: 780 23px/1 var(--font-display); letter-spacing: -.03em; white-space: nowrap;
  color: var(--text); background: none; -webkit-text-fill-color: currentColor;
}
.brand::before, .brand::after { content: ""; flex: none; height: 17px; }
.brand::before { /* the pink ball, over the end of the band */
  order: -2; z-index: 2; width: 17px; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #ffffff 0, #ffd2ea 14%, #ff4fa3 52%, #a8125c 100%);
  box-shadow: 0 0 12px rgba(255, 79, 163, .65), 0 0 26px rgba(255, 79, 163, .25);
}
.brand::after { /* the cyan ball, trailing the band back under the pink one */
  order: -1; z-index: 1; width: 44px; margin: 0 13px 0 -14px;
  background:
    radial-gradient(circle at 34% 28%, #ffffff 0, #d2fdff 14%, #2fe5ef 52%, #0b7894 100%) right / 17px 17px no-repeat,
    linear-gradient(90deg, #ff4fa3, #b07cff 50%, #2fe5ef) 4px 50% / calc(100% - 14px) 2.5px no-repeat;
  -webkit-mask: radial-gradient(circle 8.5px at calc(100% - 8.5px) 50%, #000 8px, transparent 8.5px), linear-gradient(#000 0 0) 4px 50% / calc(100% - 14px) 2.5px no-repeat;
  mask: radial-gradient(circle 8.5px at calc(100% - 8.5px) 50%, #000 8px, transparent 8.5px), linear-gradient(#000 0 0) 4px 50% / calc(100% - 14px) 2.5px no-repeat;
  filter: drop-shadow(0 0 7px rgba(47, 229, 239, .55));
  animation: nfx-stretch 10s ease-in-out infinite;
}

.scroll {
  flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
  /* run to the screen's edges, so the cards' glow and focus rings are never clipped */
  margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter);
  scrollbar-width: thin; scrollbar-color: rgba(214, 200, 255, .22) transparent;
}

/* ---------- settings: a glass card ---------- */

.settings-panel {
  position: relative; flex-shrink: 0;
  display: flex; flex-direction: column;
  padding: 4px 16px 14px; border-radius: var(--r-l);
  background: radial-gradient(110% 70% at 100% 0%, rgba(255, 79, 163, .12), rgba(255, 79, 163, 0) 60%), var(--grad-card), var(--surface);
  box-shadow: var(--rim), inset 0 0 0 1px rgba(255, 140, 200, .14), var(--lift);
  font: 600 15px/1.3 var(--font); color: var(--text);
  animation: nfx-drop .4s var(--ease) backwards;
}
.settings-panel label {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  min-height: 56px; padding: 8px 0; border-bottom: 1px solid var(--hair);
  cursor: pointer;
}
.settings-panel select, .settings-panel input[type="number"] {
  flex: none; min-height: 44px; padding: 0 12px; border: 0; border-radius: 13px;
  font: 650 15px/1 var(--font); color: var(--text);
  background-color: rgba(255, 255, 255, .07);
  box-shadow: inset 0 0 0 1px rgba(214, 200, 255, .2), inset 0 1px 0 rgba(255, 255, 255, .06);
  transition: box-shadow .2s var(--ease);
}
.settings-panel select {
  appearance: none; -webkit-appearance: none; max-width: 72%;
  padding-right: 36px; text-overflow: ellipsis;
  background: var(--i-chev-down) right 12px center / 16px no-repeat, rgba(255, 255, 255, .07);
}
.settings-panel select option { background: var(--surface-solid); color: var(--text); }
.settings-panel input[type="number"] { width: 80px; text-align: center; font-variant-numeric: tabular-nums; }
@media (hover: hover) {
  .settings-panel select:hover, .settings-panel input[type="number"]:hover { box-shadow: inset 0 0 0 1px rgba(255, 150, 210, .5), inset 0 1px 0 rgba(255, 255, 255, .06); }
}
/* the two checkboxes become switches: the knob is a background layer that slides across, so
   on and off differ by position as well as colour */
.settings-panel input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; flex: none;
  width: 54px; height: 32px; border-radius: 999px; cursor: pointer;
  background: radial-gradient(circle closest-side, #ffffff 0 88%, rgba(255, 255, 255, 0) 100%) 3px 50% / 26px 26px no-repeat, rgba(255, 255, 255, .13);
  box-shadow: inset 0 0 0 1px rgba(214, 200, 255, .24), inset 0 1px 3px rgba(0, 0, 0, .45);
  transition: background-position .4s var(--spring);
}
.settings-panel input[type="checkbox"]:checked {
  background: radial-gradient(circle closest-side, #ffffff 0 88%, rgba(255, 255, 255, 0) 100%) calc(100% - 3px) 50% / 26px 26px no-repeat, var(--sunset);
  box-shadow: var(--bevel), 0 0 16px -4px rgba(255, 79, 163, .7);
}
.fine-print { margin-top: 12px; font-size: 12.5px; font-weight: 500; line-height: 1.5; color: var(--text-2); }
.fine-print b { color: var(--mint); font-weight: 700; }

/* ---------- home: three questions, one card at a time ---------- */

/* a column: the question, its cards (they take the room there is), then the look switch */
#dashboard { display: flex; flex-direction: column; padding-bottom: 8px; }

/* the question: Back (from the second step on), where you are, and the question itself */
.hero {
  flex-shrink: 0;
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 14px;
  padding: 8px 2px 0;
}
/* Back: a glass pill, slid in from the left when a step needs it */
.step-back {
  position: relative; isolation: isolate; grid-row: 1; justify-self: start;
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 18px 0 14px; border-radius: 999px;
  font: 650 15px/1 var(--font); letter-spacing: -.005em; color: var(--text); white-space: nowrap;
  background: var(--glass-btn);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .13), inset 0 0 0 1px rgba(214, 200, 255, .14), 0 8px 18px -10px rgba(0, 0, 0, .8);
  transition: transform .45s var(--spring), box-shadow .25s var(--ease);
  animation: nfx-slide .5s var(--spring) backwards;
}
@media (hover: hover) {
  .step-back:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 0 1px rgba(255, 150, 210, .45), 0 8px 18px -10px rgba(0, 0, 0, .8); }
}
.step-back:active { transform: scale(.94); transition-duration: .12s, .25s; }

/* where you are: three dots for the three questions. Answered ones stay lit, the current one burns
   and pings, the rest wait in the dark (and the words say it too: "2 of 3 · Hips") */
.hero-kicker {
  --d1: var(--pink); --g1: rgba(255, 79, 163, .95);
  --d2: rgba(214, 200, 255, .26); --g2: rgba(255, 79, 163, 0);
  --d3: rgba(214, 200, 255, .26); --g3: rgba(255, 79, 163, 0);
  --at: 0px;
  position: relative; grid-row: 1; display: flex; align-items: center; min-width: 0; min-height: 30px;
  font: 750 12px/1.3 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--pink-soft);
  text-wrap: balance;
}
#home[data-step="time"] .hero-kicker { --d1: var(--pink-soft); --g1: rgba(255, 79, 163, 0); --d2: var(--pink); --g2: rgba(255, 79, 163, .95); --at: 12px; }
#home[data-step="hold"] .hero-kicker { --d1: var(--pink-soft); --g1: rgba(255, 79, 163, 0); --d2: var(--pink-soft); --d3: var(--pink); --g3: rgba(255, 79, 163, .95); --at: 24px; }
.hero-kicker::before {
  content: ""; flex: none; width: 7px; height: 7px; margin-right: 34px; border-radius: 50%;
  background: var(--d1);
  box-shadow: 0 0 10px var(--g1), 12px 0 0 var(--d2), 12px 0 10px var(--g2), 24px 0 0 var(--d3), 24px 0 10px var(--g3);
}
.hero-kicker::after {
  content: ""; position: absolute; left: var(--at); top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%;
  box-shadow: 0 0 0 1.5px rgba(255, 110, 180, .8); opacity: 0;
  animation: nfx-ping 2.4s var(--ease) infinite;
}
.hero-title {
  grid-column: 1 / -1; position: relative; margin-top: 10px;
  font: 780 34px/1.06 var(--font-display); letter-spacing: -.032em; padding-bottom: .06em;
  text-wrap: balance;
  filter: drop-shadow(0 0 22px rgba(255, 79, 163, .28));
}
/* the app moves focus here at each step so a screen reader hears the question; it isn't a control */
.hero-title:focus { outline: none; }

/* the cards: glass, a neon edge, each in its own light, dealt in afresh at every step (the app
   draws each step new). The effects script tilts them toward a finger with a glare */
.cards { position: relative; margin-top: 18px; }
.card {
  --accent: 47, 229, 239; --accent-text: var(--cyan-soft);
  position: relative; isolation: isolate; min-width: 0; min-height: 56px;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 7px;
  padding: 14px 16px 15px; border-radius: var(--r-l); text-align: left; line-height: 1;
  color: var(--text);
  background:
    radial-gradient(120% 95% at 100% 0%, rgba(var(--accent), .2), rgba(var(--accent), 0) 62%),
    radial-gradient(90% 80% at 0% 100%, rgba(139, 108, 255, .12), rgba(139, 108, 255, 0) 70%),
    var(--grad-card), var(--surface);
  box-shadow: 0 22px 44px -24px rgba(var(--accent), .6), var(--lift);
  transition: transform .5s var(--spring), box-shadow .3s var(--ease);
  animation: nfx-deal .62s var(--spring) backwards;
}
.cards > :nth-child(2) { animation-delay: .035s; }
.cards > :nth-child(3) { animation-delay: .07s; }
.cards > :nth-child(4) { animation-delay: .105s; }
.cards > :nth-child(5) { animation-delay: .14s; }
.cards > :nth-child(6) { animation-delay: .175s; }
.cards > :nth-child(7) { animation-delay: .21s; }
.cards > :nth-child(8) { animation-delay: .245s; }
/* the neon edge: a gradient ring, a full-size layer masked down to its rim */
.card::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: linear-gradient(150deg, rgba(var(--accent), .95), rgba(139, 108, 255, .4) 42%, rgba(255, 255, 255, .06) 68%, rgba(var(--accent), .45));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
/* the glare the effects script slides about (it sets the three properties): a light twice the
   card's size, moved by its background position, so nothing ever spills over the edge */
.card::before, .step-back::before {
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 244, 252, .42), rgba(255, 196, 236, .13) 40%, rgba(255, 196, 236, 0) 70%) var(--nfx-gx, 50%) var(--nfx-gy, 50%) / 200% 200% no-repeat;
  mix-blend-mode: screen;
  opacity: var(--nfx-ga, 0);
}
@media (hover: hover) {
  .card:hover { box-shadow: 0 26px 50px -22px rgba(var(--accent), .8), var(--lift); }
}
.card:active { transform: scale(.97); transition-duration: .12s, .3s; }

/* "Last time": a cyan tag clipped onto the top edge of what the last session used. A hint, not a
   choice: the card itself stays exactly like the others */
.last-pick .c-last {
  position: absolute; z-index: 2; top: -9px; left: 14px;
  display: inline-flex; align-items: center; gap: 5px;
  height: 19px; padding: 0 9px 0 7px; border-radius: 999px;
  font: 800 9.5px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  color: var(--cyan-soft);
  background: linear-gradient(180deg, #1b1548, #110c30);
  box-shadow: inset 0 0 0 1px rgba(47, 229, 239, .6), 0 0 16px -3px rgba(47, 229, 239, .75), 0 4px 10px -4px rgba(0, 0, 0, .8);
}
.last-pick .c-last::before {
  content: ""; flex: none; width: 10px; height: 10px; background: currentColor;
  -webkit-mask: var(--i-clock) center / contain no-repeat; mask: var(--i-clock) center / contain no-repeat;
}

/* step 1, the focus: All over across the top, six areas two by two, and Desk break, which isn't a
   focus at all but a quick start, across the bottom */
.focus-grid {
  flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto repeat(3, minmax(84px, 1fr)) auto;
  gap: 14px 10px; max-height: 640px;
}
.focus-card { gap: 5px; padding: 13px 14px 13px 15px; }
.focus-card .c-name { font: 730 17px/1.14 var(--font-display); letter-spacing: -.016em; color: var(--text); text-wrap: balance; }
.focus-card .c-note { font: 540 12.5px/1.34 var(--font); color: var(--text-2); text-wrap: pretty; }
/* an arrow in the card's light, level with the name's first line at the right: this one leads on
   to the next question (the name keeps clear of it) */
.focus-card .c-name { position: relative; align-self: stretch; padding-right: 24px; }
.focus-card:first-child .c-name, .desk-card .c-name { padding-right: 0; }
.focus-card .c-name::after {
  content: ""; position: absolute; top: .5px; right: -3px; width: 18px; height: 18px;
  background: linear-gradient(135deg, #ffffff, rgb(var(--accent)) 70%);
  -webkit-mask: var(--i-arrow) center / contain no-repeat; mask: var(--i-arrow) center / contain no-repeat;
  transition: transform .45s var(--spring);
}
@media (hover: hover) { .focus-card:hover .c-name::after { transform: translateX(3px); } }
.focus-card:first-child .c-name::after, .desk-card .c-name::after { content: none; }
/* each area its own light */
.focus-card:nth-child(2) { --accent: 255, 79, 163; }
.focus-card:nth-child(3) { --accent: 255, 181, 71; }
.focus-card:nth-child(4) { --accent: 47, 229, 239; }
.focus-card:nth-child(5) { --accent: 125, 255, 200; }
.focus-card:nth-child(6) { --accent: 168, 139, 255; }
.focus-card:nth-child(7) { --accent: 255, 93, 130; }
/* All over: the full width, and every light at once */
.focus-card:first-child {
  --accent: 168, 139, 255;
  grid-column: 1 / -1; min-height: 64px; padding: 13px 16px 13px 17px;
  background:
    radial-gradient(60% 160% at 100% 0%, rgba(47, 229, 239, .16), rgba(47, 229, 239, 0) 70%),
    radial-gradient(50% 160% at 72% 100%, rgba(255, 79, 163, .16), rgba(255, 79, 163, 0) 70%),
    radial-gradient(40% 140% at 0% 0%, rgba(139, 108, 255, .16), rgba(139, 108, 255, 0) 70%),
    var(--grad-card), var(--surface);
}
.focus-card:first-child::after { background: linear-gradient(100deg, #8b6cff, #ff4fa3 30%, rgba(255, 184, 75, .65) 55%, rgba(125, 255, 200, .45) 78%, #2fe5ef); }
/* instead of an arrow: the six areas' lights in a row, all lit */
.focus-card:first-child .c-note::after {
  content: ""; position: absolute; top: 50%; right: 20px; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%;
  background: #ff5d82;
  box-shadow:
    0 0 9px rgba(255, 93, 130, .9), -17px 0 0 #a88bff, -17px 0 9px rgba(168, 139, 255, .9),
    -34px 0 0 #7dffc8, -34px 0 9px rgba(125, 255, 200, .8), -51px 0 0 #2fe5ef, -51px 0 9px rgba(47, 229, 239, .9),
    -68px 0 0 #ffb547, -68px 0 9px rgba(255, 181, 71, .9), -85px 0 0 #ff4fa3, -85px 0 9px rgba(255, 79, 163, .9);
}

/* Desk break: a quick start, so it's lit like one. Sunset edge and corner, a bolt, and its own
   "5 min · starts now" pill */
.desk-card {
  --accent: 255, 135, 96;
  grid-column: 1 / -1;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name tag" "note note";
  align-content: center; align-items: center; gap: 8px 12px;
  padding: 15px 16px 15px 17px;
  background:
    radial-gradient(70% 150% at 100% 100%, rgba(255, 135, 96, .26), rgba(255, 63, 155, .12) 45%, rgba(255, 63, 155, 0) 75%),
    radial-gradient(55% 120% at 0% 0%, rgba(255, 79, 163, .13), rgba(255, 79, 163, 0) 70%),
    var(--grad-card), var(--surface);
  box-shadow: 0 22px 44px -22px rgba(255, 93, 130, .7), var(--lift);
}
.desk-card::after { padding: 2px; background: linear-gradient(100deg, #ff3f9b, #ff7266 30%, rgba(255, 184, 75, .8) 55%, rgba(139, 108, 255, .35) 78%, #2fe5ef); }
.desk-card .c-name {
  grid-area: name; display: flex; align-items: center; gap: 8px;
  font: 780 19px/1.1 var(--font-display); letter-spacing: -.02em;
}
.desk-card .c-name::before {
  content: ""; flex: none; width: 18px; height: 18px;
  background: linear-gradient(180deg, #ffd59a, #ff8760 60%, #ff4fa3);
  -webkit-mask: var(--i-bolt) center / contain no-repeat; mask: var(--i-bolt) center / contain no-repeat;
  filter: drop-shadow(0 0 6px rgba(255, 150, 90, .8));
}
.desk-card .c-note { grid-area: note; font: 540 13.5px/1.36 var(--font); color: var(--text-2); text-wrap: pretty; }
.desk-card .c-tag {
  grid-area: tag; justify-self: end;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 28px; padding: 0 12px 0 10px; border-radius: 999px;
  font: 800 10.5px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  color: var(--ink);
  background: var(--sunset);
  box-shadow: var(--bevel), 0 0 0 1px rgba(255, 110, 170, .35), 0 8px 18px -8px rgba(255, 79, 163, .85);
}
.desk-card .c-tag::before {
  content: ""; flex: none; width: 10px; height: 10px; background: currentColor;
  -webkit-mask: var(--i-play) center / 13px 13px no-repeat; mask: var(--i-play) center / 13px 13px no-repeat;
}

/* step 2, how long: glass cards with a neon edge, each with its own light (cool for the short
   ones, hot for the long ones) and a little dial showing its share of an hour */
.time-grid {
  flex: 1; display: grid; grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 14px 12px; max-height: 540px; min-height: 300px;
}
/* five lengths in two columns: the longest takes the whole bottom row */
.time-grid .time-card:last-child { grid-column: 1 / -1; }
.time-card { --share: 30deg; }
.time-card:nth-child(2) { --accent: 168, 139, 255; --accent-text: var(--violet-soft); --share: 60deg; }
.time-card:nth-child(3) { --accent: 255, 79, 163; --accent-text: var(--pink-soft); --share: 90deg; }
.time-card:nth-child(4) { --accent: 255, 181, 71; --accent-text: var(--amber-soft); --share: 120deg; }
.time-card:nth-child(5) { --accent: 255, 93, 130; --accent-text: #ffc6a8; --share: 180deg; }
/* the works: a sunset rising behind it from the far corner */
.time-grid .time-card:last-child {
  background:
    radial-gradient(70% 130% at 100% 100%, rgba(255, 135, 96, .26), rgba(255, 63, 155, .12) 45%, rgba(255, 63, 155, 0) 75%),
    radial-gradient(120% 95% at 100% 0%, rgba(var(--accent), .16), rgba(var(--accent), 0) 62%),
    radial-gradient(90% 80% at 0% 100%, rgba(139, 108, 255, .12), rgba(139, 108, 255, 0) 70%),
    var(--grad-card), var(--surface);
}
.time-card:last-child::after { background: linear-gradient(100deg, #ff3f9b, #ff7266 30%, rgba(255, 184, 75, .7) 55%, rgba(139, 108, 255, .3) 78%, #2fe5ef); }
.time-card .t-num {
  position: relative; display: flex; align-items: baseline;
  font: 760 54px/.92 var(--font-display); letter-spacing: -.045em; font-variant-numeric: tabular-nums;
  color: #ffffff; text-shadow: 0 0 26px rgba(var(--accent), .55);
}
.time-card .t-unit {
  margin-left: 5px; font: 680 15px/1 var(--font); letter-spacing: 0;
  color: var(--accent-text); text-shadow: none;
}
.time-card .t-tag { display: block; font: 600 13.5px/1.25 var(--font); color: var(--text-2); }
/* the dial: this length's share of an hour, in the card's light (placed against the card) */
.time-card .t-tag::before {
  content: ""; position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 50%;
  background: conic-gradient(rgb(var(--accent)) 0 var(--share), rgba(255, 255, 255, .13) 0);
  -webkit-mask: radial-gradient(closest-side, transparent 58%, #000 61%); mask: radial-gradient(closest-side, transparent 58%, #000 61%);
  filter: drop-shadow(0 0 6px rgba(var(--accent), .6));
}
.time-card:last-child .t-tag::before { background: conic-gradient(from -90deg, #ff3f9b, #ff8760 90deg, #ffba4b 180deg, rgba(255, 255, 255, .13) 0); transform: rotate(90deg); }
.time-card:last-child .t-num { font-size: 60px; }

/* step 3, how long a hold, and the last tap: each card starts the session, so each carries a sunset
   go button, ringed by a dial of the hold against the longest one */
.hold-grid {
  flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(3, minmax(96px, 1fr));
  gap: 14px; max-height: 470px;
}
.hold-card {
  --share: 160deg;
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "secs name" "secs note";
  align-content: center; align-items: center; column-gap: 16px; row-gap: 6px;
  padding: 14px 88px 14px 18px;
}
.hold-card:nth-child(2) { --accent: 168, 139, 255; --accent-text: var(--violet-soft); --share: 240deg; }
.hold-card:nth-child(3) { --accent: 255, 79, 163; --accent-text: var(--pink-soft); --share: 360deg; }
.hold-card .c-secs {
  grid-area: secs;
  font: 760 46px/.92 var(--font-display); letter-spacing: -.045em; font-variant-numeric: tabular-nums;
  color: #ffffff; text-shadow: 0 0 26px rgba(var(--accent), .55);
}
.hold-card .c-name {
  grid-area: name; align-self: end;
  font: 780 12.5px/1.1 var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--accent-text);
}
.hold-card .c-note { grid-area: note; align-self: start; font: 560 14px/1.32 var(--font); color: var(--text-2); text-wrap: pretty; }
/* the go button (decoration: the whole card is the button) */
.hold-card .c-secs::after {
  content: ""; position: absolute; top: 50%; right: 23px; width: 46px; height: 46px; margin-top: -23px; border-radius: 50%;
  background: var(--i-play-ink) 58% 50% / 20px 20px no-repeat, var(--sunset);
  box-shadow: var(--bevel), 0 0 0 1px rgba(255, 110, 170, .35), 0 10px 24px -8px rgba(255, 79, 163, .8);
}
/* and its dial: 40, 60 or 90 seconds of the 90 */
.hold-card .c-name::after {
  content: ""; position: absolute; top: 50%; right: 16px; width: 60px; height: 60px; margin-top: -30px; border-radius: 50%;
  background: conic-gradient(rgb(var(--accent)) 0 var(--share), rgba(255, 255, 255, .12) 0);
  -webkit-mask: radial-gradient(closest-side, transparent 87%, #000 90%); mask: radial-gradient(closest-side, transparent 87%, #000 90%);
}

/* the look switch: a sunk track, the look that's on raised in glass with a ring round its swatch */
.look-pick {
  display: grid; grid-template-columns: repeat(3, auto); justify-content: center; align-items: center;
  column-gap: 4px; row-gap: 14px; margin: 26px 0 6px; flex-shrink: 0;
}
.look-label {
  grid-column: 1 / -1; grid-row: 1; justify-self: center;
  font: 700 11px/1 var(--font); letter-spacing: .18em; text-transform: uppercase; color: var(--text-2);
}
.look-pick::before {
  content: ""; grid-column: 1 / -1; grid-row: 2; align-self: stretch; margin: -4px; border-radius: 999px;
  background: var(--sunk); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(214, 200, 255, .08);
}
.look-night { grid-area: 2 / 1; } /* page order (Night, the default, first), which is also Tab order */
.look-frizzy { grid-area: 2 / 2; }
.look-tom { grid-area: 2 / 3; }
.look-opt {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 15px 0 12px; border-radius: 999px;
  color: var(--text-2); font: 600 14px/1 var(--font); white-space: nowrap;
  transition: background-color .25s var(--ease), color .2s var(--ease), transform .45s var(--spring);
}
@media (hover: hover) { .look-opt:hover { color: var(--text); } }
.look-opt:active { transform: scale(.95); }
.look-opt:focus-visible { outline-offset: 1px; }
/* each option shows a swatch of its look */
.look-opt::before { content: ""; flex: none; width: 14px; height: 14px; border-radius: 50%; }
.look-night::before { background: conic-gradient(from 210deg, #ff4fa3, #8b6cff, #2fe5ef, #ff4fa3); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.look-frizzy::before { background: linear-gradient(135deg, #808080 0 50%, #55ff00 50% 100%); box-shadow: inset 0 0 0 1.5px #000, 0 0 0 1px rgba(255, 255, 255, .3); }
.look-tom::before { background: conic-gradient(from 20deg, #ff00d4, #ffe600, #00e5ff, #ff00d4); box-shadow: 0 0 0 1px rgba(255, 255, 255, .3); }
.look-opt[aria-pressed="true"] {
  color: var(--text); font-weight: 700;
  background: linear-gradient(180deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .06)), #2a2166;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 0 0 1px rgba(255, 150, 210, .5), 0 4px 14px -2px rgba(0, 0, 0, .6), 0 0 20px -6px rgba(255, 79, 163, .6);
}
.look-opt[aria-pressed="true"]::before { box-shadow: 0 0 0 2px #2a2166, 0 0 0 3.5px rgba(255, 255, 255, .85); }

/* ---------- play ---------- */

#play { gap: 10px; }
.play-top { display: flex; align-items: center; gap: 12px; flex-shrink: 0; min-height: 44px; }
/* "All over · 10 min · Medium holds": two lines when it needs them, rather than cut short */
.play-top .routine-title {
  flex: 1; min-width: 0;
  font: 650 14px/1.22 var(--font); letter-spacing: .01em; color: var(--text-2);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
  text-wrap: balance;
}
.play-top .total-remaining {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  min-height: 36px; padding: 0 14px 0 12px; border-radius: 999px;
  font: 700 16px/1 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -.01em; color: var(--text);
  background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(214, 200, 255, .14);
}
.play-top .total-remaining::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 3px rgba(47, 229, 239, .16), 0 0 10px rgba(47, 229, 239, .8); }

.play-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-height: 0;
  text-align: center;
  container-type: size; /* the numerals size themselves to this area's real height (cqh) */
}
/* when a long name, a note and a tall photo all land on a small phone, the photo is the one
   thing that gives way (it keeps its shape: its width follows its height); every line of text
   keeps its full height */
.play-main > * { flex-shrink: 0; }

/* the phase: a lit pill. Cyan while you get into position, pink while you hold, violet on the
   way down and amber on the way up of a rep, amber with a pause sign when paused. The word
   says it too, so colour is never the only signal */
.phase-label {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 30px; padding: 0 14px 0 12px; border-radius: 999px;
  font: 760 12.5px/1 var(--font); letter-spacing: .2em; text-transform: uppercase;
  color: var(--cyan-soft);
  background: rgba(47, 229, 239, .1); box-shadow: inset 0 0 0 1px rgba(47, 229, 239, .38), 0 0 22px -8px rgba(47, 229, 239, .6);
}
.phase-label::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.phase-label:empty { visibility: hidden; }
.phase-label.holding { color: var(--pink-soft); background: rgba(255, 79, 163, .12); box-shadow: inset 0 0 0 1px rgba(255, 130, 200, .45), 0 0 22px -8px rgba(255, 79, 163, .7); }
.phase-label.lowering { color: var(--violet-soft); background: rgba(139, 108, 255, .16); box-shadow: inset 0 0 0 1px rgba(170, 150, 255, .5), 0 0 22px -8px rgba(139, 108, 255, .7); }
.phase-label.up { color: var(--amber-soft); background: rgba(255, 181, 71, .12); box-shadow: inset 0 0 0 1px rgba(255, 196, 120, .48), 0 0 22px -8px rgba(255, 181, 71, .6); }

.stretch-title {
  max-width: 100%; padding: 10px 6px 0;
  font: 760 clamp(24px, 6.8vw, 32px)/1.12 var(--font-display); letter-spacing: -.022em;
  color: var(--text); text-wrap: balance;
  background: linear-gradient(100deg, #ffffff 40%, #ffe0f0 78%, #e6ddff 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.side-chip {
  display: inline-flex; align-items: center; min-height: 28px; margin-top: 8px; padding: 0 14px;
  border-radius: 999px; visibility: hidden;
  font: 720 clamp(14px, 4vmin, 16px)/1 var(--font); letter-spacing: .02em; color: var(--cyan-soft);
  background: rgba(47, 229, 239, .1); box-shadow: inset 0 0 0 1px rgba(47, 229, 239, .42), 0 0 18px -6px rgba(47, 229, 239, .6);
}
.side-chip.visible { visibility: visible; }

/* the photo, framed: a neon hairline (pink to violet to cyan) round it and its light under it.
   Some are photos, some illustrations, a few carry watermarks: all shown as they are */
.stretch-img {
  display: none;
  flex: 0 1 auto; min-height: 84px;
  max-width: min(92%, 360px);
  max-height: 29vh;
  max-height: 29dvh;
  margin: 12px 0 6px;
  object-fit: contain;
  border: 2px solid transparent; border-radius: 20px;
  background: linear-gradient(#f6f3ff, #f6f3ff) padding-box, linear-gradient(135deg, #ff6fb4, #8b6cff 50%, #44e8f1) border-box;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), 0 20px 44px -20px rgba(255, 79, 163, .55), 0 26px 50px -30px rgba(47, 229, 239, .5);
  transition: filter .35s var(--ease);
}
.stretch-img.visible { display: block; }

/* the countdown: big, white and crisp, on a soft glow behind everything on the play screen
   (z-index -1 in the screen, which the countdown never stacks above). The glow holds still: no
   ring and no breathing (a ring sized to the font fitted "50" and swamped "1", and spilled onto
   the photo and the line below), so nothing moves behind the numbers but the last three beats */
.countdown {
  position: relative;
  margin: 4px 0 8px; padding: 0 .06em;
  font: 720 clamp(80px, min(37vmin, 17.5dvh), 210px)/1 var(--font-display);
  font-size: clamp(80px, min(37vmin, 23cqh), 210px);
  letter-spacing: -.045em; font-variant-numeric: tabular-nums;
  color: #ffffff;
  background: linear-gradient(180deg, #ffffff 35%, #ffe6f3 70%, #ffd2ea 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.countdown::before { /* the glow */
  content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; border-radius: 50%; pointer-events: none;
  width: 1.75em; height: 1.75em; margin: -.875em 0 0 -.875em;
  background: radial-gradient(closest-side, rgba(255, 79, 163, .3), rgba(160, 90, 255, .14) 50%, rgba(139, 108, 255, .045) 74%, rgba(139, 108, 255, 0));
}
/* a note on screen (two or three lines of it): the numerals give the photo a little room back */
.play-main:has(> .step-note:not([hidden])) .countdown:not(.reps) { font-size: clamp(80px, min(37vmin, 20cqh), 210px); }
/* get ready: cool and still */
.countdown.lead { background-image: linear-gradient(180deg, #ffffff 35%, #dcfcff 72%, #b8f6fb 100%); }
.countdown.lead::before { background: radial-gradient(closest-side, rgba(47, 229, 239, .24), rgba(80, 140, 255, .12) 52%, rgba(80, 140, 255, 0)); }
/* the last three seconds: sunset numerals, and the glow beats once a second */
.countdown.ending { background-image: linear-gradient(180deg, #ffe2c2 0%, #ffb08c 45%, #ff8fc8 100%); }
.countdown.ending::before {
  background: radial-gradient(closest-side, rgba(255, 93, 130, .42), rgba(255, 135, 96, .2) 52%, rgba(255, 186, 75, .06) 76%, rgba(255, 186, 75, 0));
  animation: nfx-beat 1s var(--ease) infinite;
}
/* a rep count: smaller, with its total in lilac; the halo glows violet and holds still */
.countdown.reps { font-size: clamp(60px, min(22vmin, 11.5dvh), 140px); font-size: clamp(60px, min(22vmin, 15cqh), 140px); }
.countdown.reps .of { font-size: .42em; letter-spacing: -.02em; -webkit-text-fill-color: var(--violet-soft); color: var(--violet-soft); }
.countdown.reps::before { background: radial-gradient(closest-side, rgba(139, 108, 255, .3), rgba(255, 79, 163, .12) 55%, rgba(255, 79, 163, 0)); }

/* the rep cadence: a sunset bar that fills on the way down and drains on the way up */
.cadence {
  width: min(78%, 300px); height: 10px; margin: 14px auto 0; border-radius: 999px;
  background: rgba(220, 210, 255, .1); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(214, 200, 255, .07);
}
.cadence-fill {
  height: 100%; width: 0%; border-radius: inherit;
  background: var(--sunset-x);
  box-shadow: 0 0 16px rgba(255, 79, 163, .65), 0 0 4px rgba(255, 140, 120, .9);
  transition: width .1s linear; /* smooths the app's ten steps a second; reps sets are short */
}
.cadence-fill.up { background: linear-gradient(90deg, #ffb84b, #ff8760 50%, #ff5d82); box-shadow: 0 0 16px rgba(255, 160, 80, .6), 0 0 4px rgba(255, 200, 120, .9); }

.step-note {
  position: relative; max-width: min(96%, 460px); margin: 14px auto 0;
  padding: 10px 14px 10px 18px; border-radius: var(--r-m);
  font: 500 clamp(13.5px, 3.6vmin, 16px)/1.42 var(--font); color: var(--text-2); text-align: left;
  background: var(--grad-card), var(--surface); box-shadow: var(--rim);
}
.step-note::before {
  content: ""; position: absolute; left: 7px; top: 11px; bottom: 11px; width: 3px; border-radius: 3px;
  background: linear-gradient(180deg, #ff3f9b, #ff8760 60%, #ffba4b); box-shadow: 0 0 10px rgba(255, 79, 163, .6);
}
/* no photo (the desk break's stretches): the note is all the how-to there is, so it becomes a lit
   card with a heading, in bigger, brighter type, and the numerals take back the photo's room */
.play-main:has(> .stretch-img:not(.visible)) .countdown:not(.reps) { font-size: clamp(96px, min(44vmin, 28cqh), 230px); }
.stretch-img:not(.visible) ~ .step-note {
  max-width: min(100%, 470px); margin-top: 18px; padding: 38px 20px 17px 25px; border-radius: var(--r-l);
  font-size: clamp(16.5px, 4.6vmin, 19px); font-weight: 560; line-height: 1.42; color: var(--text);
  background:
    radial-gradient(110% 80% at 100% 0%, rgba(255, 79, 163, .17), rgba(255, 79, 163, 0) 60%),
    radial-gradient(90% 80% at 0% 100%, rgba(139, 108, 255, .14), rgba(139, 108, 255, 0) 70%),
    var(--grad-card), var(--surface);
  box-shadow: var(--rim), inset 0 0 0 1px rgba(255, 140, 200, .2), 0 22px 44px -24px rgba(255, 79, 163, .6), var(--lift);
}
.stretch-img:not(.visible) ~ .step-note::before { left: 10px; top: 17px; bottom: 17px; width: 3.5px; }
.stretch-img:not(.visible) ~ .step-note::after {
  content: "Here's how"; content: "Here's how" / "";
  position: absolute; left: 25px; top: 16px;
  font: 800 11px/1 var(--font); letter-spacing: .18em; text-transform: uppercase; color: var(--pink-soft);
}
.intensity {
  max-width: min(94%, 460px); margin-top: 10px;
  font: italic 500 clamp(12.5px, 3.3vmin, 14px)/1.35 var(--font); color: var(--text-3);
}
.next-up {
  max-width: 100%; height: 22px; margin-top: 8px;
  font: 500 clamp(14px, 4vmin, 16.5px)/22px var(--font); color: var(--text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.next-up b { font-weight: 700; color: var(--text); }

/* the controls: glass circles either side of the one lit button */
.play-controls {
  display: flex; justify-content: center; align-items: center; gap: 14px;
  flex-shrink: 0; padding: 4px 0 6px;
}
.play-controls button {
  position: relative; flex: none; width: 54px; height: 54px; border-radius: 50%;
  background: var(--glass-btn);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(214, 200, 255, .12), 0 10px 22px -12px rgba(0, 0, 0, .9);
  transition: transform .45s var(--spring), box-shadow .25s var(--ease), filter .25s var(--ease);
}
.play-controls button:active { transform: scale(.92); transition-duration: .12s; }
@media (hover: hover) {
  .play-controls button:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 0 1px rgba(255, 150, 210, .4), 0 10px 22px -12px rgba(0, 0, 0, .9); }
}
.play-controls .big {
  width: 96px; height: 66px; border-radius: 999px; color: var(--ink);
  background: var(--sunset);
  box-shadow: var(--bevel), 0 0 0 1px rgba(255, 110, 170, .35), var(--glow);
}
.play-controls .big::before { width: 28px; height: 28px; }
@media (hover: hover) {
  .play-controls .big:hover { filter: brightness(1.06); box-shadow: var(--bevel), 0 0 0 1px rgba(255, 110, 170, .5), 0 16px 38px -12px rgba(255, 79, 163, .8); }
}
/* finished: nothing left to pause, so the button steps back to glass with a tick */
#btnPlayPause[aria-label="Finished"] { color: var(--text-2); background: var(--glass-btn); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(214, 200, 255, .12); cursor: default; }

/* the whole session: a thin sunset line with a spark at its head */
.progress-track {
  flex-shrink: 0; height: 8px; margin: 2px 6px 0; border-radius: 999px;
  background: rgba(220, 210, 255, .1); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(214, 200, 255, .06);
}
.progress-fill {
  position: relative; height: 100%; width: 0%; min-width: 8px; border-radius: inherit;
  background: var(--sunset-x); box-shadow: 0 0 12px rgba(255, 79, 163, .5);
}
.progress-fill::after {
  content: ""; position: absolute; right: -1px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%;
  background: #fff6e8; box-shadow: 0 0 0 2px rgba(255, 186, 75, .35), 0 0 12px 2px rgba(255, 186, 75, .75);
}
.kbd-hint { flex-shrink: 0; font-size: 12px; font-weight: 500; text-align: center; color: var(--text-3); }
.kbd-hint kbd {
  display: inline-block; min-width: 22px; padding: 2px 6px; margin: 0 1px; border-radius: 6px;
  font: 700 11.5px/1.2 var(--font); color: var(--text);
  background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(214, 200, 255, .18), inset 0 -1.5px 0 rgba(0, 0, 0, .35);
}
/* keyboard shortcuts mean nothing on a phone */
@media (hover: none) { .kbd-hint { display: none; } }

/* paused: the word turns amber with a pause sign, the numerals and photo dim, the halo stops
   and its ring breaks into dashes; the lit button breathes, asking to be pressed */
#play:has(#btnPlayPause[aria-label="Resume"]) .phase-label {
  color: var(--amber-soft); background: rgba(255, 181, 71, .14);
  box-shadow: inset 0 0 0 1px rgba(255, 196, 120, .55), 0 0 22px -8px rgba(255, 181, 71, .7);
}
#play:has(#btnPlayPause[aria-label="Resume"]) .phase-label::before {
  width: 11px; height: 12px; border-radius: 0; box-shadow: none;
  -webkit-mask: var(--i-pause) center / 15px 15px no-repeat; mask: var(--i-pause) center / 15px 15px no-repeat;
}
#play:has(#btnPlayPause[aria-label="Resume"]) .countdown { background-image: linear-gradient(180deg, rgba(247, 244, 255, .5), rgba(212, 207, 240, .42)); }
#play:has(#btnPlayPause[aria-label="Resume"]) .countdown .of { -webkit-text-fill-color: rgba(208, 194, 255, .5); }
#play:has(#btnPlayPause[aria-label="Resume"]) .countdown::before { animation: none; opacity: .4; transform: scale(.88); }
#play:has(#btnPlayPause[aria-label="Resume"]) .stretch-img { filter: grayscale(.55) brightness(.62); }
#play:has(#btnPlayPause[aria-label="Resume"]) .cadence-fill { transition: none; }
#btnPlayPause[aria-label="Resume"]::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 8px rgba(255, 79, 163, .14), 0 18px 46px -8px rgba(255, 90, 140, .9);
  opacity: 0; animation: nfx-invite 3.6s ease-in-out infinite;
}

/* ---------- finished: a holographic foil ticket ---------- */

.finish-box {
  --stub: 86px; /* bottom edge to the perforation: 18px padding + 48px buttons + half the 40px gap */
  --focus: var(--ink);
  --ticket-mask:
    radial-gradient(circle 13px at 0 calc(100% - var(--stub)), #0000 12.5px, #000 13px) left / 51% 100% no-repeat,
    radial-gradient(circle 13px at 100% calc(100% - var(--stub)), #0000 12.5px, #000 13px) right / 51% 100% no-repeat;
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; align-items: flex-start;
  width: min(100%, 372px); padding: 24px 22px 18px; color: var(--ink); text-align: left;
  animation: nfx-ticket 1s var(--spring) backwards;
}
/* the foil: an iridescent film that slides one way while a light slides the other, notched by
   the mask (background-position only, on this one card, for forty seconds) */
.finish-box::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: var(--r-xl); pointer-events: none;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 46%),
    repeating-linear-gradient(-55deg, rgba(60, 30, 110, .05) 0 1px, rgba(60, 30, 110, 0) 1px 6px),
    linear-gradient(62deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .6) 46%, rgba(255, 255, 255, 0) 62%) 100% 0 / 260% 100% no-repeat,
    var(--foil) 0 0 / 200% 100%;
  -webkit-mask: var(--ticket-mask); mask: var(--ticket-mask);
  animation: nfx-foil 10s ease-in-out 4 alternate;
}
/* the light it casts, pink one side and cyan the other */
.finish-box::after {
  content: ""; position: absolute; inset: 0; z-index: -2; border-radius: var(--r-xl); pointer-events: none;
  box-shadow: -14px 24px 52px -22px rgba(255, 105, 190, .7), 14px 26px 56px -22px rgba(70, 215, 255, .6), 0 12px 26px -10px rgba(0, 0, 0, .6);
}
/* the party popper becomes an ink badge with a pink tick, and "Session complete" beside it
   (it's aria-hidden, so this is decoration only) */
.finish-box .big-check {
  position: relative; flex: none; width: 46px; height: 46px; border-radius: 15px;
  font-size: 0; color: transparent; overflow: visible;
  background: var(--i-check-pink) center / 24px no-repeat, var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 8px 18px -8px rgba(40, 0, 60, .7);
  animation: nfx-badge .6s var(--spring) .3s backwards;
}
.finish-box .big-check::after {
  content: "Session complete"; content: "Session complete" / "";
  position: absolute; left: 60px; top: 50%; transform: translateY(-50%); white-space: nowrap;
  font: 800 12px/1.2 var(--font); letter-spacing: .15em; text-transform: uppercase; color: rgba(28, 15, 38, .84);
}
.finish-box h2 {
  margin: 20px 52px 0 0;
  font: 820 64px/.95 var(--font-display); letter-spacing: -.05em;
  color: var(--ink); background: none; -webkit-text-fill-color: currentColor; filter: none;
}
/* a sheen across it as it lands */
.finish-box h2::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: var(--r-xl); pointer-events: none;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .85) 50%, rgba(255, 255, 255, 0) 62%) 160% 0 / 260% 100% no-repeat;
  -webkit-mask: var(--ticket-mask); mask: var(--ticket-mask);
  animation: nfx-sheen 1.2s .5s ease-in-out backwards;
}
/* and the small print up its side (decoration: screen readers skip it) */
.finish-box h2::after {
  content: "Admit one \B7  Stretcher"; content: "Admit one \B7  Stretcher" / "";
  position: absolute; top: 24px; right: 55px; writing-mode: vertical-rl; white-space: nowrap;
  font: 800 8px/1 var(--font); letter-spacing: .22em; text-transform: uppercase; color: rgba(28, 15, 38, .72);
}
.finish-box .meta { margin: 10px 52px 0 0; font: 690 19px/1.25 var(--font-display); letter-spacing: -.012em; color: rgba(28, 15, 38, .86); }
/* a tall barcode down the right, because it's a ticket */
.finish-box .meta::after {
  content: ""; position: absolute; top: 24px; right: 22px; bottom: calc(var(--stub) + 16px); width: 26px; opacity: .8;
  background: linear-gradient(180deg,
    var(--ink) 0 2px, #0000 0 4px, var(--ink) 0 5px, #0000 0 7px, var(--ink) 0 10px, #0000 0 11px, var(--ink) 0 12px,
    #0000 0 14px, var(--ink) 0 15px, #0000 0 17px, var(--ink) 0 20px, #0000 0 21px, var(--ink) 0 22px, #0000 0 24px,
    var(--ink) 0 26px, #0000 0 28px, var(--ink) 0 29px, #0000 0 30px, var(--ink) 0 33px, #0000 0 35px, var(--ink) 0 36px,
    #0000 0 37px, var(--ink) 0 38px, #0000 0 40px, var(--ink) 0 43px, #0000 0 44px, var(--ink) 0 45px, #0000 0 47px,
    var(--ink) 0 49px, #0000 0 51px, var(--ink) 0 52px, #0000 0 53px, var(--ink) 0 56px, #0000 0 57px, var(--ink) 0 58px, #0000 0 60px)
    0 0 / 100% 60px repeat-y;
}
.finish-box .btns { display: flex; gap: 10px; width: 100%; margin-top: 40px; }
/* the perforation above the stub */
.finish-box .btns::before {
  content: ""; position: absolute; left: 7px; right: 7px; bottom: calc(var(--stub) - 3px); height: 6px; pointer-events: none;
  background: radial-gradient(circle, rgba(28, 15, 38, .42) 1.6px, rgba(28, 15, 38, 0) 2.3px) 0 0 / 12px 6px repeat-x;
}
.finish-box .btns button {
  position: relative; flex: 1 1 auto; min-height: 48px; padding: 0 16px; border-radius: 999px;
  font: 720 15.5px/1.1 var(--font); letter-spacing: -.005em; white-space: nowrap;
  color: var(--ink); background: transparent; box-shadow: inset 0 0 0 2px var(--ink);
  transition: transform .45s var(--spring), background-color .2s var(--ease);
}
.finish-box .btns button:active { transform: scale(.96); }
@media (hover: hover) { .finish-box .btns button:hover { background-color: rgba(28, 15, 38, .09); } }
.finish-box .btns .primary {
  color: #ffffff; background: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 10px 22px -10px rgba(40, 0, 60, .75);
}
@media (hover: hover) { .finish-box .btns .primary:hover { background: #2c1a3c; } }

/* ---------- motion ---------- */

/* screens settle into place as they appear (the app swaps them with the hidden attribute, and
   an element coming out of display:none starts its animations afresh). Transform only: content
   is readable from the first frame */
.topbar { animation: nfx-drop .5s var(--ease) backwards; }
.hero, .look-pick { animation: nfx-rise .55s var(--ease) backwards; }
.look-pick { animation-delay: .2s; }
.play-top { animation: nfx-drop .5s var(--ease) backwards; }
.phase-label, .stretch-title, .side-chip, .step-note, .intensity, .next-up, .cadence { animation: nfx-rise .5s var(--ease) backwards; }
.stretch-title { animation-delay: .03s; }
.side-chip { animation-delay: .06s; }
.stretch-img { animation: nfx-rise .6s var(--ease) .08s backwards; }
.play-controls, .progress-track, .kbd-hint { animation: nfx-rise .55s var(--ease) .1s backwards; }

@keyframes nfx-beat { 0% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(.9); opacity: .55; } }
@keyframes nfx-invite { 50% { opacity: 1; } }
@keyframes nfx-stretch { 0%, 100% { transform: translateX(-4px); } 40% { transform: translateX(2px); } }
@keyframes nfx-ping { 0% { transform: scale(1); opacity: .9; } 70%, 100% { transform: scale(2.8); opacity: 0; } }
@keyframes nfx-rise { from { transform: translateY(14px); } }
@keyframes nfx-drop { from { transform: translateY(-8px); } }
/* a card dealt onto the table: up from below, leaning back, and it lands with a little bounce */
@keyframes nfx-deal { from { transform: perspective(700px) translateY(26px) rotateX(-24deg) scale(.94); } }
@keyframes nfx-slide { from { transform: translateX(-16px); } }
@keyframes nfx-badge { from { transform: scale(0) rotate(-20deg); } }
@keyframes nfx-ticket { from { transform: translateY(18px) scale(.95); } }
@keyframes nfx-sheen { from { background-position: 160% 0; } to { background-position: -60% 0; } }
@keyframes nfx-foil { from { background-position: 0 0, 0 0, 100% 0, 0 0; } to { background-position: 0 0, 0 0, 0 0, 100% 0; } }

/* everything stops, and the page still looks finished: the halo rests at the top of a breath,
   the ring holds still, the foil holds its colours */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  /* presses answer with light and shadow only, nothing shrinks */
  .card:active, .step-back:active, .look-opt:active, button.icon:active, .play-controls button:active, .finish-box .btns button:active { transform: none; }
}

/* ---------- sizes ---------- */

@media (max-width: 360px) {
  :root { --gutter: 12px; }
  .hero-title { font-size: 30px; }
  .focus-card .c-name { font-size: 16px; }
  .focus-card .c-note { font-size: 12px; }
  .focus-card { padding: 12px 12px 12px 13px; }
  .desk-card .c-name { font-size: 18px; }
  .desk-card .c-tag { gap: 5px; padding: 0 10px 0 8px; font-size: 10px; letter-spacing: .08em; }
  .hold-card { padding-right: 80px; column-gap: 14px; }
  .hold-card .c-secs { font-size: 40px; }
  .hold-card .c-secs::after { right: 21px; width: 42px; height: 42px; margin-top: -21px; background-size: 18px 18px, auto; }
  .hold-card .c-name::after { right: 14px; width: 56px; height: 56px; margin-top: -28px; }
  .time-card .t-num { font-size: 48px; }
  .time-card:last-child .t-num { font-size: 54px; }
  .look-opt { gap: 6px; padding: 0 12px 0 10px; font-size: 13.5px; }
  .look-opt::before { width: 12px; height: 12px; }
  .finish-box { padding: 22px 18px 18px; }
  .finish-box h2 { font-size: 56px; margin-right: 44px; }
  .finish-box .meta { margin-right: 44px; font-size: 17.5px; }
  .finish-box .meta::after { right: 18px; width: 22px; }
  .finish-box h2::after { right: 47px; }
  .finish-box .btns button { padding: 0 12px; font-size: 15px; }
}
/* a very narrow phone: Desk break's pill goes under its name */
@media (max-width: 340px) {
  .desk-card { grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "tag" "note"; }
  .desk-card .c-tag { justify-self: start; }
}
@media (max-width: 330px) {
  .look-opt::before { display: none; }
  .look-opt { padding: 0 11px; }
}
/* short phones (and landscape): the photo and the numerals give a little room back */
@media (max-height: 700px) {
  .stretch-img { max-height: 25vh; max-height: 25dvh; margin: 10px 0 4px; }
  .step-note { margin-top: 10px; }
}

@media (min-width: 700px) {
  .hero-title { font-size: 44px; }
  .focus-card .c-name { font-size: 19px; }
  .focus-card .c-note { font-size: 13.5px; }
  .time-card .t-num { font-size: 60px; }
  .time-card:last-child .t-num { font-size: 66px; }
  .hold-card .c-secs { font-size: 54px; }
  .hold-card .c-note { font-size: 15px; }
}

/* a desktop: the name runs up the left like a giant neon sign with the power off */
@media (min-width: 1100px) and (min-height: 560px) {
  body::after {
    --size: min(9vh, 100px);
    content: "Stretcher"; content: "Stretcher" / "";
    position: fixed; z-index: -1; left: calc(50% - 280px - var(--size) - 90px); bottom: 7vh; pointer-events: none;
    writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap;
    font: 850 var(--size)/1 var(--font-display); letter-spacing: .04em; text-transform: uppercase;
    color: transparent; -webkit-text-stroke: 1.5px rgba(230, 220, 255, .085);
  }
}

/* more contrast asked for: solid surfaces, crisper edges, stronger secondary text */
@media (prefers-contrast: more) {
  :root {
    --text-2: #e6e1fa; --text-3: #d2cced;
    --surface: #17123b; --hair: rgba(230, 220, 255, .3);
    --rim: inset 0 0 0 1.5px rgba(230, 220, 255, .55);
  }
  .look-pick::before, .step-note, .total-remaining, button.icon, .step-back, .play-controls button:not(.big) { box-shadow: inset 0 0 0 1.5px rgba(230, 220, 255, .55); }
  .card::after { padding: 2px; background: rgba(230, 220, 255, .7); }
}

/* Windows high contrast: the app's own glyphs come back, every edge and state stays visible */
@media (forced-colors: active) {
  #btnSettings, #btnExit { font-size: 22px; }
  .play-controls button { font-size: 20px; }
  #btnSettings::before, #btnExit::before, .play-controls button::before, #btnPlayPause[aria-label="Resume"]::after { display: none; }
  button.icon, .play-controls button, .card, .step-back, .look-opt, .settings-panel, .step-note, .phase-label, .side-chip, .finish-box, .finish-box .btns button { border: 1px solid CanvasText; }
  .countdown::before, .card::after, .card::before, .step-back::before, .finish-box::before, .finish-box::after, .finish-box h2::before, .time-card .t-tag::before, .hold-card .c-secs::after, .hold-card .c-name::after, .focus-card .c-name::after, .focus-card .c-note::after, .desk-card .c-name::before, .hero-kicker::after, body::before, body::after { display: none; }
  .logo-text, .stretch-title, .countdown, .hero-title { -webkit-text-fill-color: currentColor; background: none; filter: none; }
  .hold-card { padding-right: 18px; }
  .last-pick .c-last, .desk-card .c-tag { border: 1px solid CanvasText; color: CanvasText; background: Canvas; }
  .look-opt[aria-pressed="true"] { outline: 2px solid Highlight; }
  .finish-box .big-check { font-size: 48px; color: CanvasText; background: none; }
}

/* =========================================================================================
   Effects. The look's script (night.js) adds the nfx- classes below while it runs: only on
   Night, only when motion is allowed, and it takes every one of them away again when the look
   changes. Without it none of them exist and everything above is the whole look.
   ========================================================================================= */

:root { --night-fx: on; } /* tells the script this sheet is live (the switch can load sheets late) */

/* the sky: a WebGL nebula at under half resolution, scaled up, over the CSS lights. It fades in,
   and if the GPU drops it the CSS sky is simply there again */
.nfx-sky { position: fixed; inset: 0; z-index: -2; display: block; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity .8s var(--ease); }
.nfx-sky.nfx-in { opacity: 1; }

/* confetti, stars, glossy balls and sparks: one canvas over everything, only while something flies */
.nfx-burst { position: fixed; inset: 0; z-index: 30; display: block; width: 100%; height: 100%; pointer-events: none; }

/* ripples from the finger: drawn in a layer of their own over the page (the app rebuilds some of
   these buttons as they're tapped), each clipped to its button's shape */
.nfx-ripples { position: fixed; inset: 0; z-index: 20; overflow: hidden; pointer-events: none; }
.nfx-clip { position: absolute; overflow: hidden; pointer-events: none; }
.nfx-clip i {
  position: absolute; display: block; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .5), rgba(255, 255, 255, .18) 58%, rgba(255, 255, 255, 0));
}
.nfx-clip.nfx-on-light i { background: radial-gradient(closest-side, rgba(255, 255, 255, .7), rgba(255, 240, 250, .25) 58%, rgba(255, 255, 255, 0)); }

/* 3D cards: while the script tilts one (every frame, with a spring of its own), it holds it on its
   own layer and the CSS transition steps aside */
.nfx-tilting { will-change: transform; transition: none; }

/* a picked focus or length flying up into "2 of 3 · Hips" (in the ripples' layer; the script
   copies the card's font and places it) */
.nfx-fly {
  position: absolute; left: 0; top: 0; white-space: nowrap; pointer-events: none; transform-origin: 0 0;
  color: #ffffff; text-shadow: 0 0 2px #ffffff, 0 0 10px #ff4fa3, 0 0 22px rgba(255, 79, 163, .85), 0 0 44px rgba(255, 79, 163, .45);
}

/* each question decodes out of scrambled glyphs as it arrives: an aria-hidden copy scrambles over
   the real text, which stays exactly where it is (just transparent), so screen readers only ever
   read it */
.hero-title.nfx-decoding { background: none; -webkit-text-fill-color: transparent; color: transparent; }
.nfx-decode {
  position: absolute; left: 0; top: 0; right: 0; pointer-events: none; -webkit-user-select: none; user-select: none;
  color: var(--text);
  background: linear-gradient(100deg, #ffffff 0%, #fff0f8 36%, #ffb3da 70%, #c9b8ff 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.nfx-decode > span { white-space: nowrap; }
.nfx-decode .nfx-c { display: inline-block; text-align: center; white-space: pre; }
.nfx-decode .nfx-q { -webkit-text-fill-color: var(--cyan-soft); text-shadow: 0 0 12px rgba(47, 229, 239, .95), 0 0 2px rgba(47, 229, 239, .9); }
.nfx-decode .nfx-hit { animation: nfx-hit .5s var(--ease); }
@keyframes nfx-hit { from { -webkit-text-fill-color: var(--pink-soft); text-shadow: 0 0 16px #fff, 0 0 30px var(--pink); } }

@media (forced-colors: active) {
  .nfx-sky, .nfx-burst, .nfx-ripples, .nfx-decode, .nfx-fly { display: none; }
  .hero-title.nfx-decoding { -webkit-text-fill-color: currentColor; color: CanvasText; }
}

/* ---- "alright powelly": an incoming text (app.js; on average once per three hours open) ---- */
.powelly {
  position: fixed; z-index: 300; top: max(12px, env(safe-area-inset-top)); left: 12px; right: 12px; margin: 0 auto; max-width: 420px;
  display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 12px 16px 13px; border-radius: 20px; cursor: pointer;
  color: #f6f3ff; background: linear-gradient(180deg, #261d62, #181242);
  box-shadow: inset 0 0 0 1px rgba(214, 200, 255, .26), 0 20px 44px -20px rgba(0, 0, 0, .95), 0 0 34px -12px rgba(255, 79, 163, .55);
  font: 600 15px/1.3 var(--font); opacity: 0; transform: translateY(calc(-100% - 28px));
  transition: transform .4s cubic-bezier(.2, .8, .2, 1), opacity .25s ease;
}
.powelly-in { opacity: 1; transform: none; }
.powelly-from { font-size: 13px; font-weight: 800; letter-spacing: .04em; color: #ff8fc8; }
.powelly-from::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: #ff4fa3; box-shadow: 0 0 10px #ff4fa3; vertical-align: 1px; }
.powelly-time { font-size: 12px; color: rgba(222, 214, 255, .6); }
.powelly-text { grid-column: 1 / -1; font-size: 18px; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .powelly { transition: none; transform: none; } }