/* SUB 10, the app (easton/SPEC.md section 6). Every class starts with "sb-", every token "--sb-", everything is
   scoped to .sb-root except the icon (.sb-icon, a self-contained SVG the page may draw too: EastonApp.iconHTML).
   The host sets --sb-w / --sb-h on the mount (393 x 852, or 393 x 780: .sb-short). The page declares the fonts:
   Oswald 500 / 600 / 700 (titles, numbers, buttons) and Hanken Grotesk 400 / 500 / 600 (text, bubbles, UI).
   His gym at night: night #0B0B0C, cards #17171A, lines #2A2A2E, paper text, his bubbles #2A2A2E, one red #F40814
   (unread dots, the red lines, send, lock, checks). Motion: transform, opacity and stroke-dashoffset only. */

.sb-icon { display: block; overflow: visible; }

/* ------------------------------------------------------------------ root */
.sb-root {
  --sb-night: #0B0B0C; --sb-card: #17171A; --sb-line: #2A2A2E; --sb-paper: #F2F0EB; --sb-ink: #0B0B0C;
  --sb-mute: #9A9A96; --sb-faint: #6C6C69; --sb-his: #2A2A2E; --sb-veil: rgba(11, 11, 12, .66); --sb-red: #F40814;
  --sb-red-press: #C80610; --sb-bar: #111113;
  --sb-display: "Oswald", "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
  --sb-sans: "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --sb-out: cubic-bezier(.22, 1, .36, 1); --sb-ios: cubic-bezier(.32, .72, 0, 1);
  --sb-hl: 1px;
  /* the vertical rhythm (852; .sb-short below for 780) */
  --sb-top: 64px; --sb-spIcon: 288px;
  --sb-hoT: 664px; --sb-hoB: 44px;
  --sb-toM: 176px; --sb-toG: 52px; --sb-toSt: 516px;
  --sb-fuH: 400px; --sb-fuR: 128px; --sb-fuT: 420px; --sb-fuC: 512px;
  --sb-prP: 116px; --sb-prH: 214px; --sb-prG: 64px;
  --sb-trV: 112px; --sb-trVH: 404px;
  --sb-chP: 124px; --sb-chPH: 304px;
  --sb-reTh: 118px; --sb-vidW: 168px; --sb-lkW: 196px;
  position: relative; display: block; overflow: hidden; overflow: clip;
  width: var(--sb-w, 393px); height: var(--sb-h, 852px);
  background: var(--sb-night); color: var(--sb-paper);
  font: 400 15px/1.4 var(--sb-sans); letter-spacing: 0; text-align: left;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-synthesis: none; font-kerning: normal;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  touch-action: pan-y; isolation: isolate; contain: layout paint style;
}
.sb-root.sb-short {
  --sb-top: 58px; --sb-spIcon: 256px;
  --sb-hoT: 592px; --sb-hoB: 40px;
  --sb-toM: 150px; --sb-toG: 40px; --sb-toSt: 452px;
  --sb-fuH: 344px; --sb-fuR: 116px; --sb-fuT: 360px; --sb-fuC: 452px;
  --sb-prP: 106px; --sb-prH: 184px; --sb-prG: 58px;
  --sb-trV: 104px; --sb-trVH: 312px;
  --sb-chP: 116px; --sb-chPH: 214px;
  --sb-reTh: 110px; --sb-vidW: 150px; --sb-lkW: 176px;
}
@media (min-resolution: 2dppx) { .sb-root { --sb-hl: .5px; } }
.sb-root :where(*), .sb-root :where(*)::before, .sb-root :where(*)::after { box-sizing: border-box; touch-action: pan-y; }
.sb-root :where(button) { -webkit-appearance: none; appearance: none; font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; letter-spacing: inherit; -webkit-tap-highlight-color: transparent; }
.sb-root :where(h2, h3, p, ul, ol, li) { margin: 0; padding: 0; font: inherit; list-style: none; }
.sb-root :where(img, video, svg) { display: block; max-width: none; }
.sb-root :where(img) { -webkit-user-drag: none; }
.sb-root :where(b, strong) { font-weight: inherit; }
.sb-root :where(i, em) { font-style: normal; }
.sb-story { pointer-events: none; }
.sb-root :focus { outline: none; }
.sb-root :focus-visible { outline: 2px solid var(--sb-red); outline-offset: 3px; border-radius: 14px; }
.sb-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------------ the type roles (SPEC 3) */
.sb-big { font: 600 44px/.98 var(--sb-display); letter-spacing: 0; color: var(--sb-paper); }
.sb-ah { font: 600 28px/1.05 var(--sb-display); letter-spacing: 0; color: var(--sb-paper); }
.sb-cue { font: 400 14px/1.4 var(--sb-sans); color: var(--sb-paper); }
.sb-chip { font: 500 13px/1.3 var(--sb-sans); color: var(--sb-paper); }
.sb-bub { font: 500 15px/1.3 var(--sb-sans); }

/* ------------------------------------------------------------------ glass, layers, chrome */
.sb-glass { position: absolute; inset: 0; overflow: hidden; background: var(--sb-night); }
.sb-layer { position: absolute; inset: 0; z-index: 1; overflow: hidden; background: var(--sb-night); contain: layout style size; }
.sb-layer:not(.is-on):not(.is-leaving) { opacity: 0 !important; visibility: hidden; pointer-events: none; }
.sb-layer.is-moving { box-shadow: -14px 0 38px -10px rgba(0, 0, 0, .6); }
.sb-l-pre { z-index: 3; } .sb-l-splash { z-index: 9; }
.sb-status { position: absolute; left: 0; right: 0; top: 0; height: 54px; z-index: 20; pointer-events: none; color: var(--sb-paper); }
.sb-status__t { position: absolute; left: 0; width: 140px; top: 18px; text-align: center; font: 600 17px/1 var(--sb-sans); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.sb-status__r { position: absolute; right: 26px; top: 20px; display: flex; align-items: center; gap: 6px; }
.sb-homeind { position: absolute; left: 50%; bottom: 8px; width: 134px; height: 5px; margin-left: -67px; border-radius: 3px; background: rgba(242, 240, 235, .92); z-index: 20; pointer-events: none; }
.sb-full .sb-status, .sb-full .sb-homeind { display: none; }
.sb-tabbar { position: absolute; left: 0; right: 0; bottom: 0; height: 83px; z-index: 5; display: flex; padding: 0 4px 34px; background: var(--sb-bar); box-shadow: inset 0 var(--sb-hl) 0 var(--sb-line); }
.sb-tab { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; padding-top: 7px; color: var(--sb-faint); font: 500 10.5px/13px var(--sb-sans); letter-spacing: .01em; transition: color .2s linear; }
.sb-tab svg { width: 24px; height: 24px; }
.sb-tab.is-on { color: var(--sb-paper); }
.sb-story .sb-tab { transition: none; }
.sb-tab__ic { position: relative; display: block; width: 24px; height: 24px; }
.sb-tab__dot { position: absolute; right: -3px; top: -1px; width: 9px; height: 9px; border-radius: 50%; background: var(--sb-red); box-shadow: 0 0 0 2px var(--sb-bar); }
.sb-tab--re { font-weight: 600; letter-spacing: .04em; }
.sb-tabbar__ul { position: absolute; left: 0; top: 52px; width: 18px; height: 3px; border-radius: 2px; background: var(--sb-red); pointer-events: none; will-change: transform; }
.sb-touch { position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%; z-index: 21; pointer-events: none; opacity: 0; background: rgba(242, 240, 235, .22); box-shadow: 0 0 0 1.5px rgba(242, 240, 235, .95), 0 6px 18px rgba(0, 0, 0, .5); }
.sb-ripple { position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%; z-index: 21; pointer-events: none; opacity: 0; box-shadow: 0 0 0 1.5px rgba(242, 240, 235, .6); }

/* ------------------------------------------------------------------ shared parts */
.sb-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sb-av { position: relative; display: inline-block; flex: none; width: var(--s); height: var(--s); border-radius: 50%; overflow: hidden; background: #2A2A2E; }
.sb-av .sb-img { transform: scale(1.18); transform-origin: 50% 40%; }
.sb-vs { position: relative; display: block; overflow: hidden; background: #1A1A1D; }
.sb-vs__p, .sb-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sb-video { opacity: 0; transition: opacity .2s linear; pointer-events: none; }
.sb-vs.is-playing .sb-video { opacity: 1; }
/* the button: paper is the action (ink Oswald 20); its label sits optically centred on its caps */
.sb-btn { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 56px; border-radius: 28px; background: var(--sb-paper); color: var(--sb-ink); font: 600 20px/1 var(--sb-display); letter-spacing: .04em; box-shadow: 0 16px 28px -20px rgba(0, 0, 0, .9); transition: transform .16s var(--sb-out), background-color .2s linear; }
.sb-btn > span { position: relative; padding-top: .06em; white-space: nowrap; }
.sb-btn.is-press, .sb-live .sb-btn:active { transform: scale(.97); }
.sb-live .sb-btn:active { background: #DAD7D0; }
.sb-story .sb-btn { transition: none; }
.sb-ib { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--sb-paper); }
/* the round check: a grey ring, a red disc that pops in, a white tick drawn on it */
.sb-ck { position: relative; display: block; flex: none; width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 2px #3A3A3F; }
.sb-ck__f { position: absolute; inset: 0; border-radius: 50%; background: var(--sb-red); transform: scale(0); }
.sb-ck__m { position: absolute; left: 5px; top: 5px; width: 20px; height: 20px; overflow: visible; }
.sb-ck__m path { fill: none; stroke: #FFFFFF; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }

/* ------------------------------------------------------------------ splash */
.sb-sp { position: absolute; inset: 0; background: var(--sb-night); }
.sb-sp__icon { position: absolute; left: 50%; top: var(--sb-spIcon); width: 104px; height: 104px; margin-left: -52px; border-radius: 23.26px; box-shadow: 0 26px 44px -22px rgba(0, 0, 0, .9), 0 0 0 var(--sb-hl) rgba(255, 255, 255, .06); }
.sb-sp__wm { position: absolute; left: 16px; right: 16px; top: calc(var(--sb-spIcon) + 128px); height: 52px; overflow: hidden; text-align: center; }
.sb-sp__wf { display: inline-block; padding-top: 4px; }
.sb-sp__by { position: absolute; left: 16px; right: 16px; top: calc(var(--sb-spIcon) + 192px); display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--sb-mute); }

/* ------------------------------------------------------------------ home (his breakfast reel, his line) */
.sb-ho__vs { position: absolute; inset: 0; }
.sb-ho__top { position: absolute; left: 0; right: 0; top: 0; height: 104px; background: linear-gradient(180deg, rgba(11, 11, 12, .5), rgba(11, 11, 12, 0)); pointer-events: none; }
.sb-ho__veil { position: absolute; left: 0; right: 0; bottom: 0; height: 46%; background: linear-gradient(180deg, rgba(11, 11, 12, 0) 0%, rgba(11, 11, 12, .62) 38%, rgba(11, 11, 12, .94) 72%, var(--sb-night) 100%); pointer-events: none; }
.sb-ho__h { position: absolute; left: 24px; right: 24px; top: var(--sb-hoT); }
.sb-ho__go { position: absolute; left: 24px; right: 24px; bottom: var(--sb-hoB); width: auto; }
.sb-short .sb-ho__top { height: 96px; }

/* ------------------------------------------------------------------ today (day 12: two bars, the routine) */
.sb-to__t { position: absolute; left: 24px; top: var(--sb-top); }
/* his two numbers (a.to.r): the label, the number in large Oswald, "/ target" small, a 6 px bar; carbs' red tick at 250g */
.sb-macs { position: absolute; left: 24px; right: 24px; top: var(--sb-toM); display: flex; flex-direction: column; gap: var(--sb-toG); }
.sb-mac { position: relative; display: block; }
.sb-mac__l { color: var(--sb-mute); letter-spacing: .02em; }
.sb-mac__n { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; color: var(--sb-paper); }
.sb-mac__n b { font: 600 60px/1 var(--sb-display); letter-spacing: -.01em; }
.sb-mac__n span { font: 500 15px/1 var(--sb-sans); color: var(--sb-mute); }
.sb-mac__bar { position: relative; display: block; height: 6px; margin-top: 14px; }
.sb-mac__clip { position: absolute; inset: 0; border-radius: 3px; overflow: hidden; background: var(--sb-line); }
.sb-mac__f { position: absolute; inset: 0; border-radius: 3px; background: var(--sb-paper); transform: translate3d(-100%, 0, 0); }
.sb-mac__tick { position: absolute; right: -1px; top: 50%; width: 2px; height: 20px; margin-top: -10px; border-radius: 1px; background: var(--sb-red); transform: scaleY(0); }
.sb-short .sb-mac__n b { font-size: 54px; }
.sb-to__st { position: absolute; left: 24px; right: 24px; top: var(--sb-toSt); }
.sb-days { display: flex; gap: 6px; height: 26px; }
.sb-day { position: relative; flex: 1; display: block; border-radius: 7px; background: var(--sb-card); box-shadow: inset 0 0 0 1px var(--sb-line); }
.sb-day__f { position: absolute; inset: 0; border-radius: 7px; background: var(--sb-paper); transform: scale(0); }
.sb-day--now .sb-day__f { background: var(--sb-red); }
.sb-to__cue { margin-top: 12px; color: var(--sb-mute); }

/* ------------------------------------------------------------------ fuel (his pancakes: his video, his ring, his steps) */
.sb-fu__hero { position: absolute; left: 0; right: 0; top: 0; height: var(--sb-fuH); overflow: hidden; }
.sb-fu__vs { position: absolute; inset: 0; }
.sb-fu__vs .sb-vs__p, .sb-fu__vs .sb-video { object-position: 50% 0%; }
.sb-fu__top { position: absolute; left: 0; right: 0; top: 0; height: 66px; background: linear-gradient(180deg, rgba(11, 11, 12, .55), rgba(11, 11, 12, 0)); pointer-events: none; }
.sb-fu__fade { position: absolute; left: 0; right: 0; bottom: 0; height: 28%; background: linear-gradient(180deg, rgba(11, 11, 12, 0), var(--sb-night)); pointer-events: none; }
/* his ring (app/macros, its centre at 228 x 194 px of 720 x 900, radius 176): a circle crop, drawn clockwise */
.sb-ring { position: absolute; right: 24px; top: calc(var(--sb-fuH) - var(--sb-fuR) / 2 - 8px); width: var(--sb-fuR); height: var(--sb-fuR); border-radius: 50%; background: var(--sb-night); box-shadow: 0 0 0 4px var(--sb-night), 0 18px 34px -16px rgba(0, 0, 0, .9); }
.sb-ring__in { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; -webkit-mask-image: conic-gradient(#000 calc(var(--sb-a, 1) * 360deg), transparent 0); mask-image: conic-gradient(#000 calc(var(--sb-a, 1) * 360deg), transparent 0); }
.sb-ring__in .sb-img { position: absolute; left: -14.77%; top: -5.11%; width: 204.55%; height: 255.68%; max-width: none; object-fit: fill; }
.sb-fu__tx { position: absolute; left: 24px; right: calc(var(--sb-fuR) + 36px); top: var(--sb-fuT); }
.sb-fu__m { margin-top: 10px; color: var(--sb-mute); }
.sb-fu__chips { position: absolute; left: 24px; right: 24px; top: var(--sb-fuC); display: flex; flex-wrap: wrap; gap: 8px; }
.sb-step { position: relative; display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 18px; background: var(--sb-night); box-shadow: inset 0 0 0 1px var(--sb-line); color: var(--sb-paper); white-space: nowrap; transition: background-color .25s linear, color .25s linear, box-shadow .25s linear; }
.sb-step.is-now { background: var(--sb-paper); color: var(--sb-ink); box-shadow: inset 0 0 0 1px var(--sb-paper); }
.sb-story .sb-step { transition: none; }

/* ------------------------------------------------------------------ pre (before the lift: his 2 meals on a line) */
.sb-pr__t { position: absolute; left: 24px; top: var(--sb-top); }
.sb-pr__rail { position: absolute; left: 31px; top: calc(var(--sb-prP) + 28px); width: 2px; height: calc(2 * var(--sb-prH) + 2 * var(--sb-prG) + 4px); border-radius: 1px; background: var(--sb-line); }
.sb-pr__fill { position: absolute; inset: 0; border-radius: 1px; background: var(--sb-paper); transform: scaleY(0); transform-origin: 50% 0; }
.sb-pr__item { position: absolute; left: 56px; right: 24px; height: calc(var(--sb-prH) + 40px); }
.sb-pr__item--2 { top: calc(var(--sb-prP) + var(--sb-prH) + var(--sb-prG)); }
.sb-pr__item--1 { top: var(--sb-prP); }
.sb-pr__ph { position: absolute; left: 0; right: 0; top: 0; height: var(--sb-prH); border-radius: 18px; overflow: hidden; background: #1A1A1D; }
.sb-pr__ph .sb-img { object-position: 50% 26%; }
.sb-pr__cap { position: absolute; left: 0; right: 0; top: calc(var(--sb-prH) + 12px); color: var(--sb-paper); }
.sb-node { position: absolute; left: 25px; width: 14px; height: 14px; border-radius: 50%; background: var(--sb-night); box-shadow: inset 0 0 0 2px #3A3A3F; }
.sb-node__f { position: absolute; inset: 0; border-radius: 50%; background: var(--sb-red); transform: scale(0); }
.sb-node--1 { top: calc(var(--sb-prP) + 21px); }
.sb-node--2 { top: calc(var(--sb-prP) + var(--sb-prH) + var(--sb-prG) + 21px); }
.sb-pr__end { position: absolute; left: 14px; top: calc(var(--sb-prP) + 2 * var(--sb-prH) + 2 * var(--sb-prG) + 14px); width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--sb-card); box-shadow: inset 0 0 0 1.5px var(--sb-line); color: var(--sb-mute); }
.sb-pr__endF { position: absolute; inset: 0; border-radius: 50%; background: var(--sb-red); transform: scale(0); }
.sb-pr__end svg { position: relative; width: 20px; height: 20px; }
.sb-pr__end.is-lit { color: #FFFFFF; }

/* ------------------------------------------------------------------ train (his curls, 3 sets, his cue) */
.sb-tr__t { position: absolute; left: 24px; top: var(--sb-top); }
.sb-tr__card { position: absolute; left: 24px; right: 24px; top: var(--sb-trV); height: var(--sb-trVH); border-radius: 24px; overflow: hidden; background: #1A1A1D; }
/* his curls, framed on the arm: a 1.3 zoom from the top right keeps the dumbbell's maker name out of the frame */
.sb-tr__vs { position: absolute; inset: 0; transform: scale(1.3); transform-origin: 100% 0; }
.sb-tr__vs .sb-vs__p, .sb-tr__vs .sb-video { object-position: 50% 0%; }
.sb-tr__s { position: absolute; left: 24px; right: 24px; top: calc(var(--sb-trV) + var(--sb-trVH) + 20px); color: var(--sb-mute); }
.sb-sets { position: absolute; left: 24px; right: 24px; top: calc(var(--sb-trV) + var(--sb-trVH) + 52px); display: flex; gap: 8px; height: 60px; }
.sb-set { position: relative; flex: 1; display: grid; place-items: center; border-radius: 16px; background: var(--sb-card); box-shadow: inset 0 0 0 1px var(--sb-line); transition: transform .16s var(--sb-out); }
.sb-set.is-press, .sb-live .sb-set:active { transform: scale(.96); }
.sb-story .sb-set { transition: none; }
.sb-tr__q { position: absolute; left: 24px; right: 56px; top: calc(var(--sb-trV) + var(--sb-trVH) + 136px); padding-left: 14px; box-shadow: inset 2px 0 0 var(--sb-red); }
.sb-short .sb-sets { height: 54px; top: calc(var(--sb-trV) + var(--sb-trVH) + 48px); }
.sb-short .sb-tr__q { top: calc(var(--sb-trV) + var(--sb-trVH) + 122px); }

/* ------------------------------------------------------------------ check-in (week 2, 12 days, his line, coaching) */
.sb-ch__t { position: absolute; left: 24px; top: var(--sb-top); }
.sb-ch__card { position: absolute; left: 24px; right: 24px; top: var(--sb-chP); height: var(--sb-chPH); border-radius: 24px; overflow: hidden; background: #1A1A1D; }
.sb-ch__card .sb-img { object-position: 50% 14%; }
.sb-dots { position: absolute; left: 24px; right: 24px; top: calc(var(--sb-chP) + var(--sb-chPH) + 24px); display: flex; justify-content: space-between; height: 18px; }
.sb-dot { position: relative; display: block; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #3A3A3F; }
.sb-dot__f { position: absolute; inset: 0; border-radius: 50%; background: var(--sb-red); transform: scale(0); }
.sb-ch__r { position: absolute; left: 24px; right: 24px; top: calc(var(--sb-chP) + var(--sb-chPH) + 56px); display: flex; justify-content: space-between; gap: 12px; color: var(--sb-mute); }
.sb-ch__r b { color: var(--sb-paper); }
.sb-ch__q { position: absolute; left: 24px; right: 40px; top: calc(var(--sb-chP) + var(--sb-chPH) + 96px); display: flex; align-items: flex-end; gap: 10px; }
.sb-ch__go { position: absolute; left: 24px; right: 24px; bottom: 107px; width: auto; }
.sb-short .sb-ch__q { top: calc(var(--sb-chP) + var(--sb-chPH) + 90px); }
.sb-short .sb-ch__go { bottom: 99px; height: 52px; }
/* his bubble (grey, left) and ours (paper, right): radius 22, a 6 px tail */
.sb-msg { position: relative; display: block; max-width: 278px; padding: 10px 14px 11px; border-radius: 22px; }
.sb-msg--his { background: var(--sb-his); color: var(--sb-paper); border-bottom-left-radius: 6px; }
.sb-msg--me { background: var(--sb-paper); color: var(--sb-ink); border-bottom-right-radius: 6px; margin-left: auto; }
/* the coaching sheet (live: "Demo: nothing is sent.") */
.sb-sheet { position: absolute; inset: 0; z-index: 8; visibility: hidden; }
.sb-sheet__scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .56); opacity: 0; }
.sb-sheet__p { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 24px 52px; border-radius: 28px 28px 0 0; background: var(--sb-card); box-shadow: inset 0 var(--sb-hl) 0 var(--sb-line); transform: translate3d(0, 100%, 0); text-align: center; }
.sb-grab { display: block; width: 36px; height: 5px; margin: 0 auto 10px; border-radius: 3px; background: #3A3A3F; }
.sb-sheet__x { position: absolute; right: 12px; top: 10px; }
.sb-sheet__x svg { width: 22px; height: 22px; }
.sb-sheet__av { display: block; margin: 14px auto 14px; }
.sb-sheet__h { font: 600 20px/1.1 var(--sb-display); letter-spacing: .04em; }
.sb-sheet__n { margin-top: 10px; color: var(--sb-mute); }

/* ------------------------------------------------------------------ recomp (the thread, the signature: T6) */
.sb-re__hd { position: absolute; left: 0; right: 0; top: 54px; height: calc(var(--sb-reTh) - 54px); display: flex; align-items: center; gap: 12px; padding: 0 24px 6px; box-shadow: inset 0 calc(-1 * var(--sb-hl)) 0 var(--sb-line); background: var(--sb-night); z-index: 2; }
.sb-re__hd .sb-ah { padding-top: 2px; }
.sb-th { position: absolute; left: 0; right: 0; top: var(--sb-reTh); bottom: 147px; overflow: hidden; z-index: 1; }
.sb-th__track { position: absolute; left: 0; right: 0; top: 0; padding: 14px 24px 12px; display: flex; flex-direction: column; will-change: transform; }
.sb-it { position: relative; display: block; flex: none; opacity: 0; visibility: hidden; }
.sb-it--me { align-self: flex-end; transform-origin: 100% 100%; }
.sb-it--his { align-self: flex-start; transform-origin: 0 100%; }
.sb-it[data-it="vid"] { transform-origin: 0 0; }
/* the empty thread: his face, a red ring (an unread message) */
.sb-th__hi { position: absolute; left: 50%; top: 42%; width: 88px; height: 88px; margin: -44px 0 0 -44px; border-radius: 50%; box-shadow: 0 0 0 3px var(--sb-night), 0 0 0 5px var(--sb-red); }
.sb-th__hi .sb-av { display: block; }
.sb-g1 { margin-top: 14px; } .sb-g2 { margin-top: 4px; } .sb-g3 { margin-top: 16px; }
.sb-it .sb-msg { max-width: 278px; }
.sb-it--me .sb-msg { letter-spacing: .04em; }
/* his video bubble: his full frame (9:16), his labels at 14 to 27% never covered */
.sb-vb { position: relative; display: block; width: var(--sb-vidW); height: calc(var(--sb-vidW) * 16 / 9); border-radius: 22px; border-bottom-left-radius: 6px; overflow: hidden; background: #1A1A1D; }
.sb-vb .sb-vs { position: absolute; inset: 0; }
.sb-lb { position: relative; display: block; width: var(--sb-lkW); height: calc(var(--sb-lkW) * 1.25); border-radius: 22px; border-bottom-left-radius: 6px; overflow: hidden; background: #1A1A1D; }
.sb-lb .sb-vs { position: absolute; inset: 0; }
.sb-typing { position: absolute; left: 24px; display: flex; align-items: center; gap: 5px; width: 62px; height: 38px; padding: 0 0 0 16px; border-radius: 19px; border-bottom-left-radius: 6px; background: var(--sb-his); opacity: 0; visibility: hidden; transform-origin: 0 100%; }
.sb-typing i { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--sb-mute); }
/* the day card: his breakfast as day 1, "Lock in"; then locked: a red border drawn, the padlock, the stamp */
.sb-dc { position: relative; display: block; width: 100%; height: 122px; padding: 16px 16px 0; border-radius: 20px; background: var(--sb-card); box-shadow: inset 0 0 0 1px var(--sb-line); }
.sb-dc__bd { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.sb-dc__bd path { fill: none; stroke: var(--sb-red); stroke-width: 2.5; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.sb-dc__tx { padding-right: 40px; color: var(--sb-paper); }
.sb-lock { position: absolute; right: 14px; top: 12px; width: 26px; height: 26px; color: var(--sb-faint); }
.sb-lock svg { width: 26px; height: 26px; overflow: visible; }
.sb-lock.is-on { color: var(--sb-red); }
.sb-lock__sh { transform-box: fill-box; transform-origin: 50% 100%; }
.sb-dc__act { position: absolute; left: 16px; right: 16px; bottom: 14px; height: 52px; }
.sb-dc__go { position: absolute; inset: 0; width: 100%; height: 52px; border-radius: 26px; }
.sb-dc__glow { position: absolute; left: 8px; right: 8px; top: 6px; bottom: 0; border-radius: 26px; box-shadow: 0 10px 26px 4px rgba(244, 8, 20, .5); opacity: 0; pointer-events: none; }
.sb-dc__act.is-hint .sb-dc__glow { will-change: opacity; animation: sb-glow 1.8s .3s ease-in-out infinite; }
@keyframes sb-glow { 0%, 100% { opacity: 0; } 45% { opacity: .75; } }
.sb-dc__st { position: absolute; left: 0; right: 0; bottom: 3px; color: var(--sb-paper); white-space: nowrap; opacity: 0; visibility: hidden; transform-origin: 0 60%; }
.sb-re__cap { padding: 8px 14px 9px; border-radius: 18px; border-bottom-left-radius: 6px; background: var(--sb-his); color: var(--sb-paper); }
/* the composer: the RECOMP chip, the field, send */
.sb-chipq { position: absolute; left: 24px; bottom: 147px; height: 38px; display: inline-flex; align-items: center; gap: 8px; padding: 0 16px 0 14px; border-radius: 19px; background: var(--sb-night); box-shadow: inset 0 0 0 1.5px var(--sb-red); color: var(--sb-paper); letter-spacing: .04em; z-index: 3; transition: transform .16s var(--sb-out); }
.sb-chipq__d { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--sb-red); }
.sb-chipq__p { position: absolute; inset: -1px; border-radius: 20px; box-shadow: 0 0 0 1.5px var(--sb-red); opacity: 0; pointer-events: none; }
.sb-chipq.is-hint .sb-chipq__p { will-change: transform, opacity; animation: sb-ping 1.6s .2s cubic-bezier(.2, .7, .3, 1) infinite; }
@keyframes sb-ping { 0% { transform: scale(1); opacity: .9; } 70%, 100% { transform: scale(1.22, 1.5); opacity: 0; } }
.sb-chipq.is-press, .sb-live .sb-chipq:active { transform: scale(.95); }
.sb-story .sb-chipq { transition: none; }
.sb-cmp { position: absolute; left: 24px; right: 24px; bottom: 95px; height: 44px; display: flex; align-items: center; gap: 8px; z-index: 3; }
.sb-cmp__in { position: relative; flex: 1; height: 44px; display: flex; align-items: center; padding: 0 16px; border-radius: 22px; background: var(--sb-card); box-shadow: inset 0 0 0 1px var(--sb-line); overflow: hidden; }
.sb-cmp__tx { white-space: pre; letter-spacing: .04em; color: var(--sb-paper); }
.sb-cmp__caret { display: block; width: 2px; height: 20px; margin-left: 2px; border-radius: 1px; background: var(--sb-red); }
.sb-live .sb-cmp__caret { animation: sb-blink 1.1s steps(1) infinite; }
@keyframes sb-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
.sb-cmp__send { position: relative; flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--sb-line); color: var(--sb-mute); }
.sb-cmp__sendF { position: absolute; inset: 0; border-radius: 50%; background: var(--sb-red); opacity: 0; }
.sb-cmp__send svg { position: relative; width: 20px; height: 20px; }
.sb-cmp__send.is-on { color: #FFFFFF; }
.sb-cmp__send.is-press { transform: scale(.9); }
.sb-osrm .sb-chipq__p, .sb-rm .sb-chipq__p, .sb-osrm .sb-dc__glow, .sb-rm .sb-dc__glow, .sb-osrm .sb-cmp__caret, .sb-rm .sb-cmp__caret { animation: none !important; }
.sb-osrm .sb-chipq__p, .sb-rm .sb-chipq__p, .sb-osrm .sb-dc__glow, .sb-rm .sb-dc__glow { opacity: 0 !important; }

/* ------------------------------------------------------------------ hover (desktop, live) */
@media (hover: hover) {
  .sb-desk.sb-live .sb-tab:hover { color: var(--sb-mute); }
  .sb-desk.sb-live .sb-tab.is-on:hover { color: var(--sb-paper); }
  .sb-desk.sb-live .sb-btn:hover { background: #FFFFFF; }
  .sb-desk.sb-live .sb-set:hover, .sb-desk.sb-live .sb-step:hover { box-shadow: inset 0 0 0 1px #4A4A50; }
  .sb-desk.sb-live .sb-step.is-now:hover { box-shadow: inset 0 0 0 1px var(--sb-paper); }
  .sb-desk.sb-live .sb-chipq:hover { background: #1A0A0B; }
}