/* PeptideAI: the live app screens inside the homepage devices.
   -------------------------------------------------------------------------
   Four screens (Home, Protocol, Track, Remi) drawn in markup instead of
   pasted in as screenshots, so they can move, and drawn to the app's
   Phase 27 light design: off-white page, white cards on a hairline, one
   green for the action, mint as a wash, rounded type. The markup lives in
   <template>s in index.html; design.js clones one into every [data-screen]
   slot and the screenshot the slot already holds stays underneath as the
   fallback for no-JS and for browsers without container queries.

   Everything is sized off one design width, 390 (the app's point width),
   in container-query units: --u is one design point. The same screen
   renders at 300px in the hero and at 220px in the trio with nothing
   changed.

   Motion obeys DESIGN.md §6: transform, opacity, clip-path and colour only
   (plus SVG stroke offsets, which are paint). Nothing plays until the
   screen is .is-live, which design.js grants to a device in view and takes
   away off-screen. Reduced motion gets the finished screen, still.
   ------------------------------------------------------------------------- */

[data-screen] { position: relative; }
[data-screen] > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
[data-screen-live] > img { visibility: hidden; }

@supports (container-type: inline-size) {

.pd-device-screen { container-type: inline-size; }

.scr {
  --u: 0.25641cqw;                        /* 1 design pt at 390 wide */
  --s-bg:     #F8F8F6;
  --s-card:   #FFFFFF;
  --s-line:   #E6EAE8;
  --s-ink:    #0E1418;
  --s-dim:    #4B5563;
  --s-faint:  #8A939C;
  --s-acc:    #009B74;
  --s-acc-text: #00795A;
  --s-mint:   #01D69C;
  --s-wash:   #E3F6EF;
  --s-wash-2: #CFF5E6;
  --s-indigo: #6D7AF2;
  --s-indigo-wash: #ECEEFF;
  --s-amber:  #FFB323;
  --s-amber-wash: #FFF3D6;
  --s-coral:  #FF5A3C;
  --s-coral-wash: #FFEDE6;
  --s-rose:   #F4607C;
  --s-rose-wash: #FFE6EB;
  --s-r: calc(20 * var(--u));
  position: absolute;
  inset: 0;
  overflow: clip;
  background: var(--s-bg);
  color: var(--s-ink);
  font-family: var(--pd-body);
  font-size: calc(15 * var(--u));
  font-weight: 600;
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  pointer-events: none;
}
.scr *, .scr *::before, .scr *::after { box-sizing: border-box; }
.scr p, .scr ul, .scr ol, .scr h1, .scr h2, .scr h3 { margin: 0; padding: 0; list-style: none; }
.scr svg { display: block; }
.scr strong, .scr b { font-weight: 800; font-variant-numeric: tabular-nums; }
.scr .is-acc { color: var(--s-acc-text); }
.scr .scr-dim { color: var(--s-dim); font-weight: 600; }
.scr .scr-faint { color: var(--s-faint); font-weight: 600; }

/* --- status bar ---------------------------------------------------------- */
.scr-status {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: calc(54 * var(--u));
  padding: calc(16 * var(--u)) calc(28 * var(--u)) 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: calc(15 * var(--u));
  font-weight: 800;
  z-index: 3;
}
.scr-sys { display: flex; align-items: center; gap: calc(6 * var(--u)); }
.scr-sig {
  width: calc(17 * var(--u));
  height: calc(11 * var(--u));
  background:
    linear-gradient(var(--s-ink), var(--s-ink)) 0 100% / calc(3 * var(--u)) 34% no-repeat,
    linear-gradient(var(--s-ink), var(--s-ink)) 33% 100% / calc(3 * var(--u)) 56% no-repeat,
    linear-gradient(var(--s-ink), var(--s-ink)) 66% 100% / calc(3 * var(--u)) 78% no-repeat,
    linear-gradient(var(--s-ink), var(--s-ink)) 100% 100% / calc(3 * var(--u)) 100% no-repeat;
}
.scr-wifi { width: calc(16 * var(--u)); height: calc(11 * var(--u)); color: var(--s-ink); }
.scr-batt {
  width: calc(25 * var(--u));
  height: calc(12 * var(--u));
  border: calc(1.2 * var(--u)) solid rgba(14, 20, 24, 0.4);
  border-radius: calc(4 * var(--u));
  padding: calc(1.5 * var(--u));
  position: relative;
}
.scr-batt::before { content: ""; display: block; width: 80%; height: 100%; border-radius: calc(2 * var(--u)); background: var(--s-ink); }
.scr-batt::after {
  content: "";
  position: absolute;
  right: calc(-4 * var(--u));
  top: 50%;
  width: calc(2 * var(--u));
  height: calc(5 * var(--u));
  transform: translateY(-50%);
  background: rgba(14, 20, 24, 0.4);
  border-radius: 0 calc(2 * var(--u)) calc(2 * var(--u)) 0;
}

/* --- body column --------------------------------------------------------- */
.scr-body {
  position: absolute;
  top: calc(54 * var(--u));
  left: 0; right: 0; bottom: 0;
  padding: calc(14 * var(--u)) calc(18 * var(--u)) 0;
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--u));
}

.scr-head { display: flex; justify-content: space-between; align-items: flex-start; }
.scr-head > div { display: flex; flex-direction: column; gap: calc(1 * var(--u)); }
.scr-head .scr-dim { font-size: calc(15 * var(--u)); }
.scr-head strong {
  font-size: calc(30 * var(--u));
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.scr-head .scr-sub { font-size: calc(13 * var(--u)); color: var(--s-dim); margin-top: calc(3 * var(--u)); }
/* the Remi header is a row (avatar beside the name), not the column every other header is */
.scr-head > .scr-remi { flex-direction: row; align-items: center; }
.scr-head > .scr-remi > div { gap: calc(2 * var(--u)); }
.scr-head > .scr-remi > div span { font-size: calc(12.5 * var(--u)); color: var(--s-dim); }
.scr-avatar {
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
  border-radius: 50%;
  background: var(--s-acc);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: calc(16 * var(--u));
  font-weight: 800;
  flex: none;
}
.scr-plusbtn {
  width: calc(36 * var(--u));
  height: calc(36 * var(--u));
  border-radius: 50%;
  background: var(--s-card);
  border: calc(1 * var(--u)) solid var(--s-line);
  box-shadow: 0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(14, 20, 24, 0.06);
  display: grid;
  place-items: center;
  flex: none;
}
.scr-plusbtn svg { width: 46%; height: 46%; fill: none; stroke: var(--s-ink); stroke-width: 2; stroke-linecap: round; }

/* --- cards --------------------------------------------------------------- */
.scr-card {
  background: var(--s-card);
  border: calc(1 * var(--u)) solid var(--s-line);
  border-radius: var(--s-r);
  box-shadow: 0 calc(1 * var(--u)) calc(2 * var(--u)) rgba(14, 20, 24, 0.03), 0 calc(8 * var(--u)) calc(20 * var(--u)) rgba(14, 20, 24, 0.05);
  padding: calc(14 * var(--u)) calc(16 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--u));
}
.scr-card--wash { background: var(--s-wash); border-color: var(--s-wash-2); }
.scr-card--coral { background: var(--s-coral-wash); border-color: #FFD9CC; }
.scr-card-head { display: flex; align-items: center; justify-content: space-between; gap: calc(8 * var(--u)); }
.scr-card-head > b { font-size: calc(17 * var(--u)); }
.scr-label {
  font-size: calc(11 * var(--u));
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--s-acc-text);
}
.scr-label--dim { color: var(--s-faint); }
.scr-title { font-size: calc(17 * var(--u)); font-weight: 800; letter-spacing: -0.01em; }
.scr-card p.scr-dim { font-size: calc(13.5 * var(--u)); line-height: 1.4; }

.scr-chip {
  display: inline-flex;
  align-items: center;
  gap: calc(4 * var(--u));
  padding: calc(4 * var(--u)) calc(9 * var(--u));
  border-radius: 999px;
  background: var(--s-wash);
  color: var(--s-acc-text);
  font-size: calc(11.5 * var(--u));
  font-weight: 800;
  white-space: nowrap;
}
.scr-chip--amber { background: var(--s-amber-wash); color: #A66A00; }
.scr-chip--coral { background: var(--s-coral-wash); color: #C2410C; }

.scr-seg {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  padding: calc(3 * var(--u));
  border-radius: calc(12 * var(--u));
  background: #EEF0EE;
  font-size: calc(13 * var(--u));
}
.scr-seg > * {
  text-align: center;
  padding: calc(6 * var(--u)) 0;
  border-radius: calc(9 * var(--u));
  font-style: normal;
  font-weight: 700;
  color: var(--s-dim);
}
.scr-seg > b { background: var(--s-card); color: var(--s-ink); box-shadow: 0 calc(1 * var(--u)) calc(3 * var(--u)) rgba(14, 20, 24, 0.08); }

/* The one filled button */
.scr-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(1 * var(--u));
  min-height: calc(54 * var(--u));
  padding: calc(9 * var(--u)) calc(16 * var(--u));
  border-radius: 999px;
  background: var(--s-acc);
  color: #fff;
  font-size: calc(16 * var(--u));
  font-weight: 800;
  box-shadow: 0 calc(8 * var(--u)) calc(18 * var(--u)) rgba(0, 155, 116, 0.24);
  position: relative;
  overflow: clip;
}
.scr-btn small { font-size: calc(12 * var(--u)); font-weight: 700; opacity: 0.85; }
/* the logged state, stacked on top and revealed at the cue */
.scr-btn .scr-btn-done {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(8 * var(--u));
  background: var(--s-acc-text);
  color: #fff;
  opacity: 0;
}
.scr-btn-done svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.scr-btn-done svg path { stroke-dasharray: 1; }

/* icon disc */
.scr-disc {
  flex: none;
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--s-wash);
  color: var(--s-acc-text);
}
.scr-disc svg { width: 50%; height: 50%; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.scr-disc--sq { border-radius: calc(12 * var(--u)); }
.scr-disc--indigo { background: var(--s-indigo-wash); color: var(--s-indigo); }
.scr-disc--amber { background: var(--s-amber-wash); color: #C97514; }
.scr-disc--coral { background: var(--s-coral-wash); color: var(--s-coral); }
.scr-disc--rose { background: var(--s-rose-wash); color: var(--s-rose); }
.scr-disc--lg { width: calc(52 * var(--u)); height: calc(52 * var(--u)); }

/* the vial, drawn */
.scr-vial { position: relative; }
.scr-vial::before {
  content: "";
  width: calc(14 * var(--u));
  height: calc(24 * var(--u));
  border-radius: calc(3 * var(--u)) calc(3 * var(--u)) calc(5 * var(--u)) calc(5 * var(--u));
  border: calc(1.4 * var(--u)) solid var(--s-acc-text);
  border-top: calc(5 * var(--u)) solid var(--s-ink);
  background: linear-gradient(to top, var(--s-mint) 50%, #fff 50%);
  display: block;
}
.scr-vial--indigo::before { border-color: var(--s-indigo); border-top-color: var(--s-ink); background: linear-gradient(to top, #B9C0FF 50%, #fff 50%); }

/* rows */
.scr-row {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  font-size: calc(15 * var(--u));
}
.scr-row > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(1 * var(--u)); }
.scr-row b { font-size: calc(15 * var(--u)); }
.scr-row .scr-dim { font-size: calc(12.5 * var(--u)); }
.scr-row + .scr-row { padding-top: calc(10 * var(--u)); border-top: calc(1 * var(--u)) solid var(--s-line); }
.scr-row-time { width: calc(40 * var(--u)); font-size: calc(12.5 * var(--u)); color: var(--s-dim); font-weight: 700; flex: none; }
.scr-chev { width: calc(8 * var(--u)); height: calc(14 * var(--u)); color: #B5BDC4; flex: none; }

/* Swap: two readings in one cell; the second replaces the first on cue. */
.scr-swap { display: inline-grid; }
.scr-swap > * { grid-area: 1 / 1; white-space: nowrap; }
.scr-swap > :first-child { opacity: 1; }
.scr-swap > :last-child  { opacity: 0; }

/* --- Home: the rings ----------------------------------------------------- */
.scr-rings { display: grid; grid-template-columns: calc(150 * var(--u)) 1fr; gap: calc(14 * var(--u)); align-items: center; }
.scr-ringset { position: relative; width: calc(150 * var(--u)); height: calc(150 * var(--u)); }
.scr-ringset svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.scr-ringset circle { fill: none; stroke-linecap: round; }
.scr-ringset .t1 { stroke: var(--s-wash-2); stroke-width: 9; }
.scr-ringset .t2 { stroke: var(--s-indigo-wash); stroke-width: 9; }
.scr-ringset .t3 { stroke: #DDF3E8; stroke-width: 9; }
.scr-ringset .r1 { stroke: var(--s-mint); stroke-width: 9; stroke-dasharray: 1; stroke-dashoffset: var(--arc-end, 0); }
.scr-ringset .r2 { stroke: var(--s-indigo); stroke-width: 9; stroke-dasharray: 1; stroke-dashoffset: var(--arc-end, 0); }
.scr-ringset .r3 { stroke: #4CB860; stroke-width: 9; stroke-dasharray: 1; stroke-dashoffset: var(--arc-end, 0); }
.scr-score { display: flex; flex-direction: column; gap: calc(6 * var(--u)); }
.scr-score > span { display: flex; align-items: baseline; gap: calc(2 * var(--u)); line-height: 1; }
.scr-score b { font-size: calc(44 * var(--u)); letter-spacing: -0.03em; }
.scr-score small { font-size: calc(18 * var(--u)); font-weight: 800; color: var(--s-dim); }
.scr-score em { font-style: normal; font-size: calc(15 * var(--u)); font-weight: 800; color: var(--s-acc-text); }
.scr-legend { display: flex; flex-direction: column; gap: calc(5 * var(--u)); margin-top: calc(4 * var(--u)); font-size: calc(13 * var(--u)); }
.scr-legend li { display: flex; align-items: center; gap: calc(7 * var(--u)); color: var(--s-dim); }
.scr-legend li i { width: calc(9 * var(--u)); height: calc(9 * var(--u)); border-radius: 50%; background: var(--s-mint); flex: none; }
.scr-legend li i.d2 { background: var(--s-indigo); }
.scr-legend li i.d3 { background: #4CB860; }
.scr-legend li b { margin-left: auto; color: var(--s-ink); font-size: calc(13 * var(--u)); }

/* Remi line */
.scr-remi { display: flex; align-items: center; gap: calc(10 * var(--u)); }
.scr-remi-av {
  flex: none;
  width: calc(38 * var(--u));
  height: calc(38 * var(--u));
  border-radius: 50%;
  background: var(--s-wash);
  display: grid;
  place-items: center;
  overflow: clip;
}
.scr-remi-av img, .scr-remi-av svg { width: 84%; height: 84%; }
.scr-remi > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(1 * var(--u)); }
.scr-remi b { font-size: calc(13.5 * var(--u)); }
.scr-remi span { font-size: calc(13 * var(--u)); color: var(--s-dim); line-height: 1.3; }
.scr-remi .scr-link { font-size: calc(13 * var(--u)); font-weight: 800; color: var(--s-acc-text); white-space: nowrap; }

/* streak */
.scr-streak { display: flex; align-items: center; gap: calc(10 * var(--u)); }
.scr-avs { display: flex; flex: none; }
.scr-avs i {
  width: calc(30 * var(--u));
  height: calc(30 * var(--u));
  border-radius: 50%;
  border: calc(2 * var(--u)) solid var(--s-coral-wash);
  background: var(--s-indigo);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: calc(12 * var(--u));
  font-weight: 800;
  font-style: normal;
}
.scr-avs i + i { margin-left: calc(-8 * var(--u)); background: var(--s-acc); }
.scr-streak > div { flex: 1; display: flex; flex-direction: column; gap: calc(1 * var(--u)); }
.scr-streak b { font-size: calc(14 * var(--u)); }
.scr-streak span { font-size: calc(12.5 * var(--u)); color: var(--s-dim); }
.scr-flame { display: flex; align-items: center; gap: calc(3 * var(--u)); color: var(--s-coral); font-weight: 800; font-size: calc(16 * var(--u)); }
.scr-flame svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); fill: currentColor; }

/* feelings */
.scr-faces { display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(4 * var(--u)); padding-top: calc(2 * var(--u)); }
.scr-faces li { display: flex; flex-direction: column; align-items: center; gap: calc(6 * var(--u)); font-size: calc(11.5 * var(--u)); color: var(--s-dim); font-weight: 700; }
.scr-face {
  width: calc(44 * var(--u));
  height: calc(44 * var(--u));
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--s-wash);
  color: var(--s-acc-text);
  border: calc(2 * var(--u)) solid transparent;
}
.scr-face svg { width: 56%; height: 56%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.scr-face--amber { background: var(--s-amber-wash); color: #C97514; }
.scr-face--indigo { background: var(--s-indigo-wash); color: var(--s-indigo); }
.scr-face--rose { background: var(--s-rose-wash); color: var(--s-rose); }
.scr-faces .is-picked .scr-face { border-color: var(--s-acc); }
.scr-faces .is-picked { color: var(--s-ink); font-weight: 800; }

/* wearables */
.scr-wear { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(6 * var(--u)); }
.scr-wear li { display: flex; flex-direction: column; align-items: center; gap: calc(2 * var(--u)); padding: calc(6 * var(--u)) 0; border-left: calc(1 * var(--u)) solid var(--s-line); }
.scr-wear li:first-child { border-left: 0; }
.scr-wear b { font-size: calc(16 * var(--u)); letter-spacing: -0.01em; }
.scr-wear span { font-size: calc(11 * var(--u)); color: var(--s-dim); }
.scr-wear em { font-style: normal; font-size: calc(11 * var(--u)); font-weight: 800; color: var(--s-acc-text); }
.scr-live { display: inline-flex; align-items: center; gap: calc(5 * var(--u)); font-size: calc(12 * var(--u)); font-weight: 700; color: var(--s-dim); }
.scr-live i { width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 50%; background: var(--s-mint); }

/* --- Protocol ------------------------------------------------------------ */
.scr-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: calc(4 * var(--u)); }
.scr-days li { display: flex; flex-direction: column; align-items: center; gap: calc(4 * var(--u)); padding: calc(6 * var(--u)) 0; border-radius: calc(12 * var(--u)); font-size: calc(15 * var(--u)); font-weight: 800; }
.scr-days small { font-size: calc(10.5 * var(--u)); font-weight: 800; color: var(--s-faint); letter-spacing: 0.04em; }
.scr-days i { width: calc(5 * var(--u)); height: calc(5 * var(--u)); border-radius: 50%; background: var(--s-mint); }
.scr-days i.is-amber { background: var(--s-amber); }
.scr-days i.is-off { background: transparent; }
.scr-days .is-today { background: var(--s-ink); color: #fff; }
.scr-days .is-today small { color: rgba(255, 255, 255, 0.7); }
.scr-days .is-today i { background: #fff; }
.scr-next { display: flex; align-items: center; gap: calc(12 * var(--u)); }
.scr-next > div { display: flex; flex-direction: column; gap: calc(1 * var(--u)); }
.scr-next .scr-label { font-size: calc(10.5 * var(--u)); }
.scr-next b { font-size: calc(19 * var(--u)); letter-spacing: -0.01em; }
.scr-next span { font-size: calc(13 * var(--u)); color: var(--s-dim); }
.scr-stat3 { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }
.scr-stat3 li { display: flex; flex-direction: column; align-items: center; gap: calc(6 * var(--u)); }
.scr-stat3 b { font-size: calc(14 * var(--u)); }
.scr-stat3 span { font-size: calc(11.5 * var(--u)); color: var(--s-dim); }
.scr-gauge { position: relative; width: calc(54 * var(--u)); height: calc(54 * var(--u)); display: grid; place-items: center; font-size: calc(15 * var(--u)); font-weight: 800; }
.scr-gauge svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.scr-gauge circle { fill: none; stroke-width: 7; stroke-linecap: round; }
.scr-gauge .t { stroke: var(--s-wash-2); }
.scr-gauge .r { stroke: var(--s-acc); stroke-dasharray: 1; stroke-dashoffset: var(--arc-end, 0); }
.scr-gauge--indigo .t { stroke: var(--s-indigo-wash); }
.scr-gauge--indigo .r { stroke: var(--s-indigo); }
.scr-tick {
  flex: none;
  width: calc(22 * var(--u));
  height: calc(22 * var(--u));
  border-radius: 50%;
  border: calc(2 * var(--u)) solid #C9D1CD;
  display: grid;
  place-items: center;
  color: #fff;
}
.scr-tick.is-done { background: var(--s-acc); border-color: var(--s-acc); }
.scr-tick svg { width: 60%; height: 60%; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.scr-tick svg path { stroke-dasharray: 1; }
.scr-tools { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; }
.scr-tools li { display: flex; flex-direction: column; align-items: center; gap: calc(6 * var(--u)); font-size: calc(12 * var(--u)); font-weight: 700; color: var(--s-dim); }

/* --- Track --------------------------------------------------------------- */
.scr-goal { display: flex; align-items: center; gap: calc(10 * var(--u)); }
.scr-goal > div { flex: 1; display: flex; flex-direction: column; gap: calc(1 * var(--u)); }
.scr-goal b { font-size: calc(17 * var(--u)); }
.scr-slider { position: relative; height: calc(26 * var(--u)); margin: calc(6 * var(--u)) 0 calc(2 * var(--u)); }
.scr-slider::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: calc(6 * var(--u)); transform: translateY(-50%); border-radius: 999px; background: var(--s-wash-2); }
.scr-slider .scr-fill { position: absolute; left: 0; width: 100%; top: 50%; height: calc(6 * var(--u)); transform: translateY(-50%) scaleX(var(--bar-end, 0.34)); transform-origin: left center; border-radius: 999px; background: var(--s-acc); }
.scr-slider i { position: absolute; top: 50%; width: calc(14 * var(--u)); height: calc(14 * var(--u)); border-radius: 50%; transform: translate(-50%, -50%); }
.scr-slider .k0 { left: 0; background: #fff; border: calc(2 * var(--u)) solid #C9D1CD; }
.scr-slider .k1 { left: var(--knob-end, 34%); width: calc(18 * var(--u)); height: calc(18 * var(--u)); background: var(--s-acc); box-shadow: 0 0 0 calc(4 * var(--u)) rgba(0, 155, 116, 0.18); }
.scr-slider .k2 { left: 100%; background: transparent; border: calc(2 * var(--u)) dashed var(--s-acc); }
.scr-goal-lbls { display: flex; justify-content: space-between; font-size: calc(11.5 * var(--u)); color: var(--s-dim); font-weight: 700; }
.scr-goal-lbls b { color: var(--s-ink); }
.scr-goal-foot { display: flex; justify-content: space-between; font-size: calc(12.5 * var(--u)); color: var(--s-dim); padding-top: calc(6 * var(--u)); }
.scr-find { font-size: calc(16 * var(--u)); font-weight: 800; line-height: 1.3; letter-spacing: -0.01em; }
.scr-metrics { display: flex; flex-direction: column; }
.scr-metrics li { display: grid; grid-template-columns: calc(36 * var(--u)) 1fr calc(84 * var(--u)) auto; align-items: center; gap: calc(10 * var(--u)); padding: calc(10 * var(--u)) 0; border-bottom: calc(1 * var(--u)) solid var(--s-line); }
.scr-metrics li:last-child { border-bottom: 0; }
.scr-metrics .scr-disc { width: calc(36 * var(--u)); height: calc(36 * var(--u)); }
.scr-metrics li > div { display: flex; flex-direction: column; gap: 0; }
.scr-metrics li > div span { font-size: calc(12 * var(--u)); color: var(--s-dim); }
.scr-metrics li > div b { font-size: calc(17 * var(--u)); display: flex; align-items: baseline; gap: calc(2 * var(--u)); }
.scr-metrics li > div b small { font-size: calc(11 * var(--u)); color: var(--s-dim); font-weight: 700; }
.scr-spark { width: 100%; height: calc(30 * var(--u)); overflow: visible; }
.scr-spark path { fill: none; stroke: var(--s-amber); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: var(--spark-end, 0); }
.scr-spark--indigo path { stroke: var(--s-indigo); }
.scr-spark--mint path { stroke: var(--s-mint); }

/* --- Remi chat ----------------------------------------------------------- */
.scr-chat { display: flex; flex-direction: column; gap: calc(10 * var(--u)); }
.scr-bub {
  max-width: 84%;
  padding: calc(10 * var(--u)) calc(14 * var(--u));
  border-radius: calc(18 * var(--u));
  font-size: calc(14 * var(--u));
  font-weight: 600;
  line-height: 1.35;
}
.scr-bub--me { align-self: flex-end; background: var(--s-acc); color: #fff; border-bottom-right-radius: calc(6 * var(--u)); }
.scr-bub--remi { align-self: flex-start; background: var(--s-card); border: calc(1 * var(--u)) solid var(--s-line); border-bottom-left-radius: calc(6 * var(--u)); }
.scr-typing { align-self: flex-start; display: flex; gap: calc(4 * var(--u)); padding: calc(12 * var(--u)) calc(14 * var(--u)); border-radius: calc(18 * var(--u)); background: var(--s-card); border: calc(1 * var(--u)) solid var(--s-line); }
.scr-typing i { width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 50%; background: #B5BDC4; }
.scr-chart { display: flex; flex-direction: column; gap: calc(8 * var(--u)); }
.scr-bars { display: flex; align-items: flex-end; justify-content: space-between; gap: calc(4 * var(--u)); height: calc(64 * var(--u)); }
.scr-bars i { flex: 1; border-radius: calc(3 * var(--u)) calc(3 * var(--u)) 0 0; background: var(--s-wash-2); transform-origin: bottom center; transform: scaleY(var(--bar-end, 1)); }
.scr-bars i.is-hi { background: var(--s-indigo); }
.scr-bars-lbl { display: flex; justify-content: space-between; font-size: calc(10.5 * var(--u)); color: var(--s-faint); font-weight: 700; }
.scr-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: calc(8 * var(--u)); }
.scr-tiles li { display: flex; flex-direction: column; gap: calc(1 * var(--u)); padding: calc(8 * var(--u)) calc(10 * var(--u)); border-radius: calc(12 * var(--u)); background: var(--s-bg); }
.scr-tiles b { font-size: calc(16 * var(--u)); }
.scr-tiles span { font-size: calc(11 * var(--u)); color: var(--s-dim); }
.scr-asknext { display: flex; gap: calc(6 * var(--u)); flex-wrap: wrap; }
.scr-asknext li { padding: calc(6 * var(--u)) calc(11 * var(--u)); border-radius: 999px; border: calc(1 * var(--u)) solid var(--s-line); background: var(--s-card); font-size: calc(12 * var(--u)); font-weight: 700; color: var(--s-ink); }
.scr-compose {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  padding: calc(8 * var(--u)) calc(8 * var(--u)) calc(8 * var(--u)) calc(16 * var(--u));
  border-radius: 999px;
  background: var(--s-card);
  border: calc(1 * var(--u)) solid var(--s-line);
  font-size: calc(13.5 * var(--u));
  color: var(--s-faint);
  font-weight: 600;
}
.scr-compose i { margin-left: auto; width: calc(32 * var(--u)); height: calc(32 * var(--u)); border-radius: 50%; background: var(--s-acc); display: grid; place-items: center; }
.scr-compose i svg { width: 48%; height: 48%; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* --- tab bar ------------------------------------------------------------- */
.scr-tabs {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: calc(124 * var(--u));
  padding: calc(34 * var(--u)) calc(16 * var(--u)) 0;
  display: flex;
  align-items: flex-start;
  gap: calc(10 * var(--u));
  background: linear-gradient(to bottom, rgba(248, 248, 246, 0) 0%, rgba(248, 248, 246, 0.94) 36%, #F8F8F6 100%);
  z-index: 2;
}
.scr-tabbar {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: calc(5 * var(--u));
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  border: calc(1 * var(--u)) solid var(--s-line);
  box-shadow: 0 calc(8 * var(--u)) calc(24 * var(--u)) rgba(14, 20, 24, 0.10);
}
.scr-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(3 * var(--u));
  padding: calc(8 * var(--u)) 0 calc(7 * var(--u));
  border-radius: 999px;
  font-size: calc(10.5 * var(--u));
  font-weight: 700;
  color: var(--s-dim);
}
.scr-tab svg { width: calc(21 * var(--u)); height: calc(21 * var(--u)); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.scr-tab.is-on { background: var(--s-wash); color: var(--s-acc-text); font-weight: 800; }
.scr-plus {
  flex: none;
  width: calc(58 * var(--u));
  height: calc(58 * var(--u));
  border-radius: 50%;
  background: var(--s-acc);
  box-shadow: 0 calc(8 * var(--u)) calc(20 * var(--u)) rgba(0, 155, 116, 0.28);
  display: grid;
  place-items: center;
}
.scr-plus svg { width: 40%; height: 40%; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; }

/* =========================================================================
   Motion. Only here do the "before" states exist, so reduced motion and
   no-JS both get the finished screen. One short story per screen:
     Home      the rings draw, the dose is logged, 84 steps to 92
     Protocol  the day strip and score draw, Ipamorelin is logged
     Track     the goal knob slides to 34%, the sparklines draw
     Remi      a question, typing, the answer and its chart
   ========================================================================= */
@media (prefers-reduced-motion: no-preference) {

  .scr .a { opacity: 0; transform: translateY(calc(10 * var(--u))); }
  .scr.is-live .a { animation: scr-enter var(--pd-enter) forwards; }
  .scr.is-live .a2 { animation-delay: 90ms; }
  .scr.is-live .a3 { animation-delay: 180ms; }
  .scr.is-live .a4 { animation-delay: 270ms; }
  .scr.is-live .a5 { animation-delay: 360ms; }
  .scr.is-live .a6 { animation-delay: 450ms; }
  @keyframes scr-enter { to { opacity: 1; transform: none; } }

  .scr .scr-swap > :first-child { opacity: 1; }
  .scr .scr-swap > :last-child  { opacity: 0; }
  .scr.is-live .scr-swap > :first-child { animation: scr-out 220ms ease-out var(--cue, 2400ms) forwards; }
  .scr.is-live .scr-swap > :last-child  { animation: scr-in  220ms ease-out var(--cue, 2400ms) forwards; }
  @keyframes scr-out { to { opacity: 0; } }
  @keyframes scr-in  { to { opacity: 1; } }

  /* rings and gauges draw from empty; a stepped ring takes a second step */
  .scr .scr-ringset .r1, .scr .scr-ringset .r2, .scr .scr-ringset .r3, .scr .scr-gauge .r { stroke-dashoffset: 1; }
  .scr.is-live .scr-ringset .r1, .scr.is-live .scr-gauge .r { animation: scr-ring 1100ms cubic-bezier(0.2, 0, 0, 1) 500ms forwards; }
  .scr.is-live .scr-ringset .r2 { animation: scr-ring 1100ms cubic-bezier(0.2, 0, 0, 1) 650ms forwards; }
  .scr.is-live .scr-ringset .r3 { animation: scr-ring 1100ms cubic-bezier(0.2, 0, 0, 1) 800ms forwards; }
  .scr.is-live .scr-ringset .r1.is-step { animation: scr-ring-step 2600ms cubic-bezier(0.2, 0, 0, 1) 500ms forwards; }
  @keyframes scr-ring { to { stroke-dashoffset: var(--arc-end, 0); } }
  @keyframes scr-ring-step {
    0%   { stroke-dashoffset: 1; }
    45%  { stroke-dashoffset: var(--arc-mid, 0.5); }
    72%  { stroke-dashoffset: var(--arc-mid, 0.5); }
    100% { stroke-dashoffset: var(--arc-end, 0); }
  }

  /* the log button: pressed, then the logged state slides in */
  .scr.is-live .scr-btn { animation: scr-press 320ms ease-out calc(var(--cue, 2400ms) - 200ms); }
  .scr.is-live .scr-btn .scr-btn-done { animation: scr-in 240ms ease-out var(--cue, 2400ms) forwards; }
  .scr .scr-btn-done svg path { stroke-dashoffset: 1; }
  .scr.is-live .scr-btn-done svg path { animation: scr-draw 320ms cubic-bezier(0.2, 0, 0, 1) calc(var(--cue, 2400ms) + 120ms) forwards; }
  @keyframes scr-press { 50% { transform: scale(0.96); } }
  @keyframes scr-draw { to { stroke-dashoffset: 0; } }

  /* a tick that lands at the cue */
  .scr .scr-tick.is-cue { background: transparent; border-color: #C9D1CD; }
  .scr .scr-tick.is-cue svg path { stroke-dashoffset: 1; }
  .scr.is-live .scr-tick.is-cue { animation: scr-tick-fill 240ms ease-out var(--cue, 2400ms) forwards; }
  .scr.is-live .scr-tick.is-cue svg path { animation: scr-draw 300ms cubic-bezier(0.2, 0, 0, 1) calc(var(--cue, 2400ms) + 120ms) forwards; }
  @keyframes scr-tick-fill { to { background: var(--s-acc); border-color: var(--s-acc); } }

  /* the picked face rings itself at the cue */
  .scr .scr-faces .is-picked .scr-face { border-color: transparent; }
  .scr .scr-faces .is-picked { color: var(--s-dim); font-weight: 700; }
  .scr.is-live .scr-faces .is-picked .scr-face { animation: scr-pick 260ms ease-out 1500ms forwards; }
  .scr.is-live .scr-faces .is-picked { animation: scr-ink 260ms ease-out 1500ms forwards; }
  @keyframes scr-pick { 50% { transform: scale(1.1); } to { border-color: var(--s-acc); } }
  @keyframes scr-ink { to { color: var(--s-ink); } }

  /* Live breathes, only while live */
  .scr.is-live .scr-live i { animation: scr-breathe 1800ms ease-in-out 800ms infinite; }
  @keyframes scr-breathe { 50% { opacity: 0.35; transform: scale(0.8); } }

  /* the goal slider: knob and fill travel from the start */
  .scr .scr-slider .scr-fill { transform: translateY(-50%) scaleX(0); }
  .scr .scr-slider .k1 { left: 0; }
  .scr.is-live .scr-slider .scr-fill { animation: scr-fill 1300ms cubic-bezier(0.2, 0, 0, 1) 600ms forwards; }
  .scr.is-live .scr-slider .k1 { animation: scr-knob 1300ms cubic-bezier(0.2, 0, 0, 1) 600ms forwards; }
  @keyframes scr-fill { to { transform: translateY(-50%) scaleX(var(--bar-end, 0.34)); } }
  @keyframes scr-knob { to { left: var(--knob-end, 34%); } }

  /* sparklines draw */
  .scr .scr-spark path { stroke-dashoffset: 1; }
  .scr.is-live .scr-spark path { animation: scr-draw 1100ms cubic-bezier(0.2, 0, 0, 1) 700ms forwards; }
  .scr.is-live li:nth-child(2) .scr-spark path { animation-delay: 850ms; }
  .scr.is-live li:nth-child(3) .scr-spark path { animation-delay: 1000ms; }

  /* the chat: question, typing, answer, chart */
  .scr .scr-chat > * { opacity: 0; transform: translateY(calc(8 * var(--u))); }
  .scr.is-live .scr-chat > * { animation: scr-enter 420ms cubic-bezier(0.2, 0, 0, 1) forwards; }
  .scr.is-live .scr-chat > .c1 { animation-delay: 400ms; }
  .scr.is-live .scr-chat > .scr-typing { animation: scr-typing-in 300ms ease-out 900ms forwards, scr-out 200ms ease-out 1900ms forwards; }
  .scr.is-live .scr-chat > .c2 { animation-delay: 2000ms; }
  .scr.is-live .scr-chat > .c3 { animation-delay: 2300ms; }
  .scr.is-live .scr-chat > .c4 { animation-delay: 2700ms; }
  @keyframes scr-typing-in { to { opacity: 1; transform: none; } }
  .scr.is-live .scr-typing i { animation: scr-dot 900ms ease-in-out 900ms infinite; }
  .scr.is-live .scr-typing i:nth-child(2) { animation-delay: 1050ms; }
  .scr.is-live .scr-typing i:nth-child(3) { animation-delay: 1200ms; }
  @keyframes scr-dot { 30% { transform: translateY(calc(-3 * var(--u))); opacity: 0.5; } }
  .scr .scr-bars i { transform: scaleY(0); }
  .scr.is-live .scr-bars i { animation: scr-stand 420ms cubic-bezier(0.2, 0, 0, 1) forwards; }
  .scr.is-live .scr-bars i:nth-child(1)  { animation-delay: 2500ms; }
  .scr.is-live .scr-bars i:nth-child(2)  { animation-delay: 2550ms; }
  .scr.is-live .scr-bars i:nth-child(3)  { animation-delay: 2600ms; }
  .scr.is-live .scr-bars i:nth-child(4)  { animation-delay: 2650ms; }
  .scr.is-live .scr-bars i:nth-child(5)  { animation-delay: 2700ms; }
  .scr.is-live .scr-bars i:nth-child(6)  { animation-delay: 2750ms; }
  .scr.is-live .scr-bars i:nth-child(7)  { animation-delay: 2800ms; }
  .scr.is-live .scr-bars i:nth-child(8)  { animation-delay: 2850ms; }
  .scr.is-live .scr-bars i:nth-child(9)  { animation-delay: 2900ms; }
  .scr.is-live .scr-bars i:nth-child(10) { animation-delay: 2950ms; }
  .scr.is-live .scr-bars i:nth-child(11) { animation-delay: 3000ms; }
  .scr.is-live .scr-bars i:nth-child(12) { animation-delay: 3050ms; }
  .scr.is-live .scr-bars i:nth-child(13) { animation-delay: 3100ms; }
  .scr.is-live .scr-bars i:nth-child(14) { animation-delay: 3150ms; }
  @keyframes scr-stand { to { transform: scaleY(var(--bar-end, 1)); } }
}

} /* @supports */

/* --- extras for the Round 12 screens (nutrition, scanner, supplements, TRT,
       training, vials, community, privacy) ---------------------------------- */
@supports (container-type: inline-size) {
.scr .scr-left { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: calc(2 * var(--u)); text-align: right; }
.scr .scr-left > b { font-size: calc(18 * var(--u)); line-height: 1; }
.scr .scr-left > span { font-size: calc(10.5 * var(--u)); color: var(--s-dim); font-weight: 700; }
.scr .scr-rank { flex: none; width: calc(18 * var(--u)); font-size: calc(13 * var(--u)); font-weight: 800; color: var(--s-faint); }
.scr .scr-vial--amber::before { border-color: #C97514; }
.scr .scr-vial--coral::before { border-color: var(--s-coral); }
.scr .scr-chip--amber { background: var(--s-amber-wash); color: #A66A00; }
/* the estimated level curve */
.scr .scr-curve { width: 100%; height: calc(104 * var(--u)); overflow: visible; }
.scr .scr-curve .g { fill: none; stroke: var(--s-line); stroke-width: 1; stroke-dasharray: 3 4; }
.scr .scr-curve .band { fill: var(--s-wash); }
.scr .scr-curve .d { fill: none; stroke: var(--s-acc); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
/* a toggle */
.scr .scr-toggle { flex: none; position: relative; width: calc(46 * var(--u)); height: calc(28 * var(--u)); border-radius: 999px; background: #C9D1CD; }
.scr .scr-toggle::after { content: ""; position: absolute; top: calc(3 * var(--u)); left: calc(3 * var(--u)); width: calc(22 * var(--u)); height: calc(22 * var(--u)); border-radius: 50%; background: #fff; box-shadow: 0 calc(1 * var(--u)) calc(3 * var(--u)) rgba(0, 0, 0, 0.22); }
.scr .scr-toggle.is-on, .scr .scr-toggle.is-cue { background: var(--s-acc); }
.scr .scr-toggle.is-on::after, .scr .scr-toggle.is-cue::after { transform: translateX(81.8%); }
/* the camera */
.scr--cam { --s-ink: #FFFFFF; background: #0D1412; }
.scr--cam .scr-batt { border-color: rgba(255, 255, 255, 0.5); }
.scr--cam .scr-batt::after { background: rgba(255, 255, 255, 0.5); }
.scr-cam { position: absolute; inset: 0; background: radial-gradient(120% 70% at 50% 34%, #243530 0%, #121b18 55%, #0b100e 100%); }
.scr-cam-top { position: absolute; top: calc(64 * var(--u)); left: calc(18 * var(--u)); right: calc(18 * var(--u)); display: flex; justify-content: space-between; align-items: center; font-size: calc(15 * var(--u)); font-weight: 800; color: #fff; }
.scr-cam-top i { width: calc(32 * var(--u)); height: calc(32 * var(--u)); border-radius: 50%; background: rgba(255, 255, 255, 0.14); display: grid; place-items: center; }
.scr-cam-top i svg { width: 50%; height: 50%; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.scr-bottle { position: absolute; left: 50%; top: calc(236 * var(--u)); width: calc(156 * var(--u)); height: calc(250 * var(--u)); transform: translateX(-50%); border-radius: calc(26 * var(--u)) calc(26 * var(--u)) calc(20 * var(--u)) calc(20 * var(--u)); background: linear-gradient(90deg, #2a3330 0%, #566663 38%, #46544f 62%, #1f2724 100%); box-shadow: 0 calc(30 * var(--u)) calc(50 * var(--u)) rgba(0, 0, 0, 0.5); }
.scr-bottle::before { content: ""; position: absolute; left: 16%; right: 16%; top: calc(-28 * var(--u)); height: calc(34 * var(--u)); border-radius: calc(10 * var(--u)) calc(10 * var(--u)) 0 0; background: linear-gradient(90deg, #171e1b, #303936 50%, #141a17); }
.scr-bottle-label { position: absolute; left: 7%; right: 7%; top: 20%; bottom: 12%; border-radius: calc(8 * var(--u)); background: #F1EFE6; color: #1d2622; padding: calc(12 * var(--u)) calc(10 * var(--u)); display: flex; flex-direction: column; align-items: center; gap: calc(5 * var(--u)); text-align: center; }
.scr-bottle-label b { font-size: calc(13 * var(--u)); line-height: 1.1; letter-spacing: 0.02em; }
.scr-bottle-label span { font-size: calc(9.5 * var(--u)); color: #5a645f; font-weight: 700; }
.scr-bottle-label .scr-barcode { margin-top: auto; width: 84%; height: calc(30 * var(--u)); background: repeating-linear-gradient(90deg, #1d2622 0 2px, transparent 2px 4px, #1d2622 4px 5px, transparent 5px 8px, #1d2622 8px 11px, transparent 11px 13px, #1d2622 13px 14px, transparent 14px 17px); }
.scr-cam-box { position: absolute; left: 50%; top: calc(386 * var(--u)); width: calc(236 * var(--u)); height: calc(112 * var(--u)); transform: translateX(-50%); }
.scr-cam-box i { position: absolute; width: calc(28 * var(--u)); height: calc(28 * var(--u)); border: calc(3 * var(--u)) solid #fff; }
.scr-cam-box .c1 { left: 0; top: 0; border-right: 0; border-bottom: 0; border-top-left-radius: calc(10 * var(--u)); }
.scr-cam-box .c2 { right: 0; top: 0; border-left: 0; border-bottom: 0; border-top-right-radius: calc(10 * var(--u)); }
.scr-cam-box .c3 { left: 0; bottom: 0; border-right: 0; border-top: 0; border-bottom-left-radius: calc(10 * var(--u)); }
.scr-cam-box .c4 { right: 0; bottom: 0; border-left: 0; border-top: 0; border-bottom-right-radius: calc(10 * var(--u)); }
.scr-cam-line { position: absolute; left: 6%; right: 6%; top: 10%; height: calc(2 * var(--u)); background: var(--s-mint); box-shadow: 0 0 calc(12 * var(--u)) var(--s-mint); border-radius: 999px; }
.scr-cam-hint { position: absolute; left: 0; right: 0; top: calc(520 * var(--u)); text-align: center; color: #fff; font-size: calc(14 * var(--u)); font-weight: 700; display: grid; justify-items: center; }
.scr-cam-modes { position: absolute; left: 0; right: 0; bottom: calc(42 * var(--u)); display: flex; justify-content: center; align-items: center; gap: calc(20 * var(--u)); font-size: calc(13 * var(--u)); color: rgba(255, 255, 255, 0.62); font-weight: 700; }
.scr-cam-modes b { color: #fff; padding: calc(7 * var(--u)) calc(13 * var(--u)); border-radius: 999px; background: rgba(255, 255, 255, 0.16); }
.scr-sheet { --s-ink: #0E1418; position: absolute; left: calc(12 * var(--u)); right: calc(12 * var(--u)); bottom: calc(12 * var(--u)); color: var(--s-ink); background: #fff; border-radius: calc(26 * var(--u)); padding: calc(16 * var(--u)); display: flex; flex-direction: column; gap: calc(10 * var(--u)); box-shadow: 0 calc(-10 * var(--u)) calc(50 * var(--u)) rgba(0, 0, 0, 0.45); z-index: 5; }
.scr-sheet .scr-btn { margin-top: calc(2 * var(--u)); }

@media (prefers-reduced-motion: no-preference) {
  .scr .scr-curve .d { stroke-dashoffset: 1; }
  .scr.is-live .scr-curve .d { animation: scr-draw 1800ms cubic-bezier(0.2, 0, 0, 1) 700ms forwards; }
  .scr .scr-toggle.is-cue { background: #C9D1CD; }
  .scr .scr-toggle.is-cue::after { transform: none; }
  .scr.is-live .scr-toggle.is-cue { animation: scr-tog 260ms ease-out var(--cue, 2400ms) forwards; }
  .scr.is-live .scr-toggle.is-cue::after { animation: scr-knob2 260ms ease-out var(--cue, 2400ms) forwards; }
  @keyframes scr-tog { to { background: var(--s-acc); } }
  @keyframes scr-knob2 { to { transform: translateX(81.8%); } }
  .scr .scr-sheet { transform: translateY(112%); }
  .scr.is-live .scr-sheet { animation: scr-sheet 540ms cubic-bezier(0.2, 0, 0, 1) calc(var(--cue, 2400ms) + 260ms) forwards; }
  @keyframes scr-sheet { to { transform: none; } }
  .scr.is-live .scr-cam-line { animation: scr-sweep 800ms ease-in-out 200ms 2 alternate forwards; }
  @keyframes scr-sweep { to { top: 88%; } }
  .scr.is-live .scr-cam-box i { animation: scr-match 240ms ease-out var(--cue, 2400ms) forwards; }
  @keyframes scr-match { to { border-color: var(--s-mint); } }
  .scr.is-live .scr-bottle { animation: scr-settle 1200ms cubic-bezier(0.2, 0, 0, 1) forwards; }
  @keyframes scr-settle { from { transform: translateX(-50%) translateY(calc(10 * var(--u))) scale(1.04); } to { transform: translateX(-50%); } }
}
}

/* --- the watch face (396 design px, black, no status bar, no tabs) ------ */
@supports (container-type: inline-size) {
.pd-watch-screen { container-type: inline-size; }
.scr--watch { --u: 0.25253cqw; background: #000; color: #fff; }
.scr--watch .scr-status { display: none; }
.scr--watch .is-mint { color: #01D69C; }
.scr-w { position: absolute; inset: 0; padding: calc(18 * var(--u)) calc(24 * var(--u)) calc(22 * var(--u)); display: flex; flex-direction: column; gap: calc(14 * var(--u)); }
.scr-w-head { display: flex; justify-content: space-between; align-items: center; font-size: calc(30 * var(--u)); font-weight: 900; }
.scr-w-rings { display: flex; align-items: center; gap: calc(18 * var(--u)); }
.scr-w-rings > div { display: flex; flex-direction: column; gap: calc(4 * var(--u)); font-size: calc(26 * var(--u)); font-weight: 800; }
.scr--watch .scr-ringset { width: calc(176 * var(--u)); height: calc(176 * var(--u)); flex: none; }
.scr--watch .scr-ringset .t1 { stroke: #0B3B2E; } .scr--watch .scr-ringset .t2 { stroke: #24264F; } .scr--watch .scr-ringset .t3 { stroke: #22401F; }
.scr--watch .scr-ringset .r1 { stroke: #00D69C; } .scr--watch .scr-ringset .r2 { stroke: #7C82F2; } .scr--watch .scr-ringset .r3 { stroke: #7BD66B; }
.scr-w-pct { font-size: calc(66 * var(--u)); font-weight: 900; line-height: 1; display: inline-flex; align-items: baseline; }
.scr-w-pct small { font-size: calc(32 * var(--u)); }
.scr-w-legend { display: flex; flex-direction: column; gap: calc(7 * var(--u)); }
.scr-w-legend li { display: flex; align-items: center; gap: calc(10 * var(--u)); font-size: calc(25 * var(--u)); font-weight: 800; }
.scr-w-legend li i { width: calc(14 * var(--u)); height: calc(14 * var(--u)); border-radius: 50%; background: #00D69C; flex: none; }
.scr-w-legend li i.d2 { background: #7C82F2; } .scr-w-legend li i.d3 { background: #7BD66B; }
.scr-w-legend li > span { color: #B9C2C0; flex: 1; }
.scr-w-foot { margin-top: auto; }
.scr--watch .scr-w-btn { height: calc(80 * var(--u)); border-radius: calc(40 * var(--u)); font-size: calc(30 * var(--u)); font-weight: 900; }
}