/* Self+ app demo — see demo.js. Everything is scoped under .spd.
   Outside the phone: only the landing's own components from styles.css. Inside: the Claude Design export (Opal layer:
   lit glass cards, dark icon chips, copper check spheres, and the glass CTA / "+" with copper light from the lower left).
   Phone frame copies the landing's .screen. Motion per Emil Kowalski: short and ease-out. Nothing loops: the hint ring
   pulses 3 times (under 5 s) and is static under prefers-reduced-motion. */

.spd {
  --spd-ink: #0B0A09; --spd-fg: #F6F2EC; --spd-mut: rgba(246, 242, 236, .62); --spd-faint: rgba(246, 242, 236, .42);
  --spd-line: rgba(246, 242, 236, .08); --spd-cu: #D9935F; --spd-cu-lt: #F0C3A0; --spd-cu-dk: #B66A3E;
  --spd-fill: linear-gradient(90deg, #C2763F, #F0BE8F);
  --spd-ease: cubic-bezier(.23, 1, .32, 1);
  --spd-mono: ui-monospace, 'SF Mono', Menlo, monospace;
  position: relative; width: 100%; max-width: 1080px; margin: 0 auto; color: var(--spd-fg); font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
.spd *, .spd *::before, .spd *::after { box-sizing: border-box; }
:where(.spd) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
:where(.spd) button:disabled { cursor: default; }
.spd :focus-visible { outline: 2px solid var(--spd-cu); outline-offset: 2px; }

/* ---------- Outside the phone: the landing's own components only (.pill, .lux / .lux.hot, .ico, .btn + .ring, .btn-ghost) ---------- */
.spd-top { display: flex; justify-content: center; margin-bottom: 22px; }
.spd-top .pill { color: var(--bone, #F3ECE4); }

.spd-grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "flows" "phone" "cap" "note"; gap: 22px; justify-items: center; }
.spd-flows { grid-area: flows; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; max-width: 440px; }
.spd-flows .spd-flow:last-child:nth-child(odd) { grid-column: 1 / -1; }
.spd .spd-flow { display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 10px 12px; border-radius: 18px; text-align: left; color: var(--mute, #C9C1B8); transition: color 200ms var(--spd-ease); }
.spd .spd-flow .ico { width: 34px; height: 34px; }
.spd-flow.hot { color: var(--cream, #FFF5ED); }
.spd-ft b { display: block; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
.spd-flow.hot .spd-ft b { color: var(--cream, #FFF5ED); }
.spd-ft small { display: none; }
@media (hover: hover) and (pointer: fine) { .spd .spd-flow:hover { color: var(--cream, #FFF5ED); } }

.spd-phone { grid-area: phone; width: min(100%, 300px); }
.spd-cap { grid-area: cap; width: 100%; max-width: 440px; text-align: center; }
.spd-step { min-height: 3em; font-size: 17px; font-weight: 500; line-height: 1.45; letter-spacing: -.01em; color: var(--cream, #FFF5ED); text-wrap: balance; }
.spd-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin-top: 16px; }
.spd-note { max-width: 60ch; margin: 28px auto 0; font-size: 12px; font-style: italic; line-height: 1.45; color: var(--mute-2, #978D83); text-align: center; text-wrap: pretty; }

@media (min-width: 1024px) {
  .spd-grid { grid-template-columns: minmax(0, 460px) 320px; justify-content: center; grid-template-rows: auto 1fr auto; grid-template-areas: "flows phone" "cap phone" "cap note"; column-gap: 72px; row-gap: 26px; justify-items: stretch; align-items: start; }
  .spd-flows { grid-template-columns: 1fr; gap: 10px; max-width: 460px; justify-self: end; }
  .spd .spd-flow { align-items: flex-start; gap: 16px; padding: 18px 20px; border-radius: 22px; }
  .spd .spd-flow .ico { width: 36px; height: 36px; }
  .spd-ft b { font-size: 16px; font-weight: 700; padding-top: 1px; }
  .spd-ft small { display: block; margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--mute, #C9C1B8); }
  .spd-cap { max-width: 460px; justify-self: end; text-align: left; padding: 6px 4px 0; }
  .spd-actions { justify-content: flex-start; }
  .spd-phone { width: 320px; }
}

/* ---------- Phone frame (same as landing .screen) ---------- */
.spd-screen { position: relative; border-radius: 17%/7.9%; padding: 3.4%; background: #050505;
  box-shadow: 0 0 0 1.5px #8A8178, 0 0 0 2.5px #2B2724, inset 0 0 0 1px rgba(255, 255, 255, .06), 0 50px 80px -28px rgba(0, 0, 0, .95), 0 18px 30px -18px rgba(0, 0, 0, .8); }
.spd-screen::after { content: ""; position: absolute; right: -2.6%; top: 22%; width: 1.3%; height: 11%; border-radius: 0 3px 3px 0; background: linear-gradient(90deg, #5E5852, #A39A90 60%, #4A4541); }
.spd-scr { position: relative; width: 100%; aspect-ratio: 390/844; border-radius: 14.5%/6.7%; overflow: hidden; background: var(--spd-ink); isolation: isolate; }
.spd-scr::before { content: ""; position: absolute; z-index: 60; left: 50%; top: 1.45%; width: 30%; aspect-ratio: 3.35; transform: translateX(-50%); border-radius: 999px; background: #000; pointer-events: none; }

/* ---------- App canvas: 390 × 844 points, scaled to the phone ---------- */
.spd-app { position: absolute; left: 0; top: 0; width: 390px; height: 844px; transform: scale(var(--k, .75)); transform-origin: 0 0; overflow: hidden;
  font-size: 15px; line-height: 1.35; color: var(--spd-fg); user-select: none; -webkit-user-select: none;
  background: radial-gradient(120% 60% at 50% -5%, rgba(120, 66, 34, .55), rgba(40, 24, 14, .2) 55%, transparent 75%), linear-gradient(180deg, #1c140f 0%, #0d0b0a 60%, #0a0908 100%); }
.spd-page { position: absolute; inset: 0; }
.spd-app b { font-weight: 600; }
.spd-app small { display: block; font-size: 14px; color: var(--spd-mut); }
.spd-app [tabindex="-1"]:focus { outline: none; }

.spd-status { display: flex; justify-content: space-between; align-items: center; height: 54px; padding: 8px 34px 0 42px; font-size: 16px; font-weight: 600; }
.spd-sig { display: flex; align-items: flex-end; gap: 2px; height: 12px; }
.spd-sig i { width: 3px; background: var(--spd-fg); border-radius: 1px; }
.spd-sig i:nth-child(1) { height: 4px; } .spd-sig i:nth-child(2) { height: 6px; } .spd-sig i:nth-child(3) { height: 8px; } .spd-sig i:nth-child(4) { height: 11px; }
.spd-sig b { width: 24px; height: 12px; margin-left: 6px; border-radius: 4px; border: 1.5px solid rgba(246, 242, 236, .5); background: linear-gradient(90deg, var(--spd-fg) 75%, transparent 75%) content-box; padding: 1.5px; }

.spd-eyebrow { display: block; font: 600 13px var(--spd-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--spd-mut); }
.spd-bar { display: block; height: 5px; border-radius: 9px; background: rgba(255, 255, 255, .11); overflow: hidden; }
.spd-bar i { display: block; height: 100%; border-radius: inherit; background: var(--spd-fill); box-shadow: 0 0 10px rgba(182, 106, 62, .45); }
.spd-card { position: relative; margin: 0 16px; padding: 16px; border-radius: 24px;
  background: linear-gradient(180deg, rgba(246, 242, 236, .055), rgba(246, 242, 236, .01) 60%), linear-gradient(180deg, #181513, #121010); box-shadow: inset 0 1px 0 rgba(246, 242, 236, .15), 0 0 0 1px rgba(246, 242, 236, .05); }
.spd-card.glass { border-radius: 28px; background: linear-gradient(180deg, rgba(246, 242, 236, .09), rgba(246, 242, 236, .015) 55%), linear-gradient(180deg, #1b1715, #121010);
  box-shadow: inset 0 1px 0 rgba(246, 242, 236, .24), 0 0 0 1px rgba(246, 242, 236, .05), 0 30px 50px -28px #000; }
.spd-p { font-size: 14px; line-height: 1.5; color: var(--spd-mut); }
.spd-p b { color: var(--spd-fg); }
.spd-fine { display: flex; gap: 6px; margin: 12px 24px 0; font-size: 13px; line-height: 1.45; color: var(--spd-faint); }
.spd-fine svg { flex: none; margin-top: 1px; }
.spd-delta { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--spd-cu-lt); background: rgba(214, 132, 82, .16); box-shadow: inset 0 0 0 1px rgba(214, 132, 82, .45); }
.spd-round { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--spd-fg); background: rgba(255, 255, 255, .075); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 0 0 1px var(--spd-line); }
.spd-round.ghost { visibility: hidden; }

/* Opal pieces from the design export kit (kit.js: CHIP_CU, CHIP_N, SPHERE, CTA = .btn-glass-cta, cta2 quiet, pill, segBar) */
/* Icon tiles: the landing's glass .ico (copper light from below, copper-light glyph with glow), at app sizes */
.spd-chip { position: relative; flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; color: var(--spd-cu-lt);
  background: radial-gradient(120% 90% at 50% 110%, rgba(214, 132, 82, .35), rgba(214, 132, 82, 0) 60%), linear-gradient(180deg, rgba(255, 240, 228, .10), rgba(255, 240, 228, .02));
  box-shadow: inset 0 1px 0 rgba(255, 245, 235, .28), inset 0 -1px 0 rgba(0, 0, 0, .35), 0 0 0 1px rgba(214, 132, 82, .22), 0 8px 20px -8px rgba(214, 132, 82, .5); }
.spd-chip svg { filter: drop-shadow(0 0 5px rgba(214, 132, 82, .7)); }
.spd-chip.sm { width: 36px; height: 36px; border-radius: 11px; }
.spd-chip.lg { width: 56px; height: 56px; border-radius: 19px; }
.spd-sphere { flex: none; display: grid; place-items: center; width: var(--s); height: var(--s); border-radius: 50%; color: var(--spd-ink);
  background: radial-gradient(circle at 35% 25%, #F2C9A2, #B76A3E 55%, #855033 100%); box-shadow: inset 0 1px 1px rgba(246, 240, 231, .65), inset 0 -3px 6px rgba(11, 10, 9, .5), 0 6px 16px -4px rgba(183, 106, 62, .65); }
.spd-ring { flex: none; display: block; width: var(--s); height: var(--s); border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(246, 242, 236, .45), inset 0 3px 6px rgba(0, 0, 0, .5); }
/* Primary button: dark glass body, copper light entering from the lower left, gradient rim, soft halo. Never a copper fill. */
.spd-cta { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; padding: 0 22px; border-radius: 999px;
  font-size: 16px; font-weight: 600; color: #fff; text-shadow: 0 1px 0 #000; white-space: nowrap;
  background: radial-gradient(120% 190% at 6% 142%, rgba(238, 150, 80, 1), rgba(198, 106, 52, .64) 34%, transparent 68%), radial-gradient(60% 110% at 104% 140%, rgba(255, 176, 116, .42), transparent 62%), linear-gradient(180deg, #33261D, #1F150F);
  box-shadow: inset 0 1px 0 rgba(255, 232, 206, .3), inset 0 -1px 0 rgba(255, 170, 110, .3); transition: transform 140ms var(--spd-ease), opacity 200ms var(--spd-ease); }
.spd-cta::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 236, 214, .92), rgba(255, 236, 214, .05) 56%, rgba(255, 186, 128, .82));
  -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); }
.spd-cta::before { content: ""; position: absolute; z-index: -1; inset: -12px -26px -34px; border-radius: inherit; pointer-events: none; background: radial-gradient(closest-side, rgba(214, 133, 66, .5), transparent); }
.spd-cta.wide { width: 100%; }
.spd-cta:disabled { opacity: .4; }
.spd-cta:not(:disabled):active, .spd-cta2:active { transform: scale(.97); }
.spd-cta2 { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 40px; padding: 0 16px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--spd-fg); white-space: nowrap;
  background: linear-gradient(180deg, rgba(246, 242, 236, .11), rgba(11, 10, 9, .6)); box-shadow: inset 0 1px 0 rgba(246, 242, 236, .2), inset 0 0 0 1px rgba(246, 242, 236, .06); transition: transform 140ms var(--spd-ease); }
.spd-cta2.wide { width: 100%; height: 48px; margin-top: 10px; font-size: 15px; }
.spd-pill { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 500; color: var(--spd-mut); background: rgba(246, 242, 236, .07); font-variant-numeric: tabular-nums; }
.spd-pill.cu { color: var(--spd-fg); background: rgba(183, 106, 62, .16); box-shadow: inset 0 0 0 1px rgba(219, 144, 103, .3); }
.spd-delta.down { color: var(--spd-mut); background: rgba(246, 242, 236, .07); box-shadow: inset 0 0 0 1px rgba(246, 242, 236, .12); }
.spd-trow { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.spd-cnt { font-size: 14px; color: var(--spd-mut); }
.spd-cnt b { color: var(--spd-fg); font-variant-numeric: tabular-nums; }
.spd-own { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--spd-faint); }
/* Sub-page header (design subHeader): round back, centred title, right slot */
.spd-sub { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 50px; padding: 0 16px; }
.spd-subt { position: absolute; left: 80px; right: 80px; top: 0; height: 50px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; }
.spd-subt b { font-size: 17px; }
.spd-subt small { font-size: 12.5px; color: var(--spd-faint); }

/* Home */
.spd-hhead { display: flex; justify-content: space-between; align-items: flex-start; padding: 10px 22px 0; position: relative; z-index: 2; }
.spd-greet { display: block; font-size: 19px; color: var(--spd-mut); }
.spd-name { display: block; font-size: 22px; font-weight: 700; }
.spd-av { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; color: var(--spd-mut); background: rgba(255, 255, 255, .075); box-shadow: inset 0 0 0 1px var(--spd-line); }
.spd-orb { position: relative; height: 232px; margin-top: -28px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.spd-orb::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 360px; height: 252px; transform: translate(-50%, -50%); background: url(orb.webp) center / contain no-repeat; opacity: .92; }
.spd-orb .spd-eyebrow { color: rgba(246, 242, 236, .8); text-shadow: 0 1px 8px rgba(0, 0, 0, .6); margin-top: 18px; }
.spd-big { font-size: 80px; font-weight: 800; line-height: 1; letter-spacing: -.045em; font-variant-numeric: tabular-nums; text-shadow: 0 2px 18px rgba(0, 0, 0, .55); }
.spd-orbd { min-height: 24px; margin-top: 6px; }
.spd-orbd .spd-delta { height: 24px; padding: 0 10px; font-size: 13px; color: #FFE3CC; background: rgba(18, 12, 9, .82); box-shadow: inset 0 0 0 1px rgba(214, 132, 82, .6); }
.spd-orbd .spd-delta.down { color: var(--spd-fg); box-shadow: inset 0 0 0 1px rgba(246, 242, 236, .2); }
.spd-orb.is-pulse::before { animation: spd-glow 900ms var(--spd-ease); }
@keyframes spd-glow { 40% { opacity: 1; filter: brightness(1.35); transform: translate(-50%, -50%) scale(1.04); } }
.spd-how { display: flex; align-items: center; gap: 4px; width: fit-content; margin: 2px auto 0; height: 34px; padding: 0 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--spd-cu-lt); background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--spd-line); }
.spd-areas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 14px 16px 0; }
.spd-tile { display: flex; flex-direction: column; gap: 8px; height: 92px; padding: 12px 12px 13px; border-radius: 20px; text-align: left;
  background: linear-gradient(180deg, rgba(246, 242, 236, .055), rgba(246, 242, 236, .01) 60%), linear-gradient(180deg, #181513, #121010); box-shadow: inset 0 1px 0 rgba(246, 242, 236, .15), 0 0 0 1px rgba(246, 242, 236, .05); transition: transform 140ms var(--spd-ease); }
.spd-tile:active { transform: scale(.96); }
.spd-tile.is-flash { animation: spd-flash 1.1s var(--spd-ease); }
@keyframes spd-flash { 0%, 40% { box-shadow: inset 0 1px 0 rgba(246, 242, 236, .2), 0 0 0 1.5px rgba(214, 132, 82, .9), 0 0 24px -4px rgba(214, 132, 82, .7); } }
.spd-tl { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--spd-mut); }
.spd-tl svg { color: var(--spd-cu-lt); }
.spd-tv { display: flex; align-items: center; gap: 6px; }
.spd-tv b { font-size: 26px; font-weight: 700; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.spd-tv .spd-delta { height: 19px; padding: 0 6px; font-size: 11px; }
.spd-next { display: flex; align-items: center; gap: 14px; margin: 12px 16px 0; padding: 12px 14px 12px 12px; border-radius: 26px;
  background: linear-gradient(180deg, rgba(246, 242, 236, .09), rgba(246, 242, 236, .015) 55%), linear-gradient(180deg, #1b1715, #121010); box-shadow: inset 0 1px 0 rgba(246, 242, 236, .24), 0 0 0 1px rgba(246, 242, 236, .05); }
.spd-next > div { flex: 1; }
.spd-next b { font-size: 17px; }
.spd-tick { display: grid; place-items: center; border-radius: 50%; }

/* Today, next morning (How it connects) */
.spd-orb.sm { height: 200px; margin-top: -22px; }
.spd-orb.sm::before { width: 300px; height: 212px; }
.spd-orb.sm .spd-big { font-size: 68px; }
.spd-sleep { display: flex; align-items: center; gap: 14px; padding: 12px 16px 12px 12px; }
.spd-sleep > div:not(.spd-sv) { flex: 1; }
.spd-sleep b { font-size: 16px; }
.spd-sv { display: grid; grid-template-columns: auto auto; align-items: center; gap: 2px 6px; text-align: right; }
.spd-sv b { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.spd-sv small { grid-column: 1 / -1; font-size: 12px; }
.spd-sv .spd-delta { height: 20px; padding: 0 7px; font-size: 11.5px; }
.spd-plan { margin-top: 12px; padding: 16px; }
.spd-plan.is-hot, .spd-goal.is-hot { box-shadow: inset 0 1px 0 rgba(246, 242, 236, .24), 0 0 0 1px rgba(219, 144, 103, .4), 0 24px 50px -24px rgba(183, 106, 62, .55); }
.spd-prow { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.spd-prow b { font-size: 18px; }
.spd-reason { margin-top: 12px; }
.spd-suggest { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--spd-line); }
.spd-suggest .spd-p { flex: 1; }
.spd-morning .spd-fine { margin-top: 14px; }

/* Dock: four tabs as in the design + the glass "+" (same light as the primary button) */
.spd-dockwrap { position: absolute; left: 0; right: 0; bottom: 0; height: 130px; z-index: 20; display: flex; align-items: flex-end; justify-content: center; gap: 12px; padding-bottom: 30px; pointer-events: none;
  background: linear-gradient(to top, rgba(10, 9, 8, .95) 35%, rgba(10, 9, 8, 0)); }
.spd-dockwrap > * { pointer-events: auto; }
.spd-dock { display: flex; align-items: center; gap: 2px; height: 60px; padding: 0 6px; border-radius: 999px; background: rgba(30, 28, 26, .82); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 0 0 1px var(--spd-line), 0 26px 44px -26px #000; }
.spd-tab { display: grid; place-items: center; width: 52px; height: 48px; border-radius: 999px; color: var(--spd-mut); transition: background 200ms var(--spd-ease), color 200ms var(--spd-ease); }
.spd-tab.on { width: 60px; color: var(--spd-fg); background: rgba(255, 255, 255, .14); }
span.spd-tab { opacity: .7; }
.spd-fab { width: 60px; height: 60px; padding: 0; }
.spd-fab svg { transition: transform 240ms var(--spd-ease); }
.spd-app[data-sheet="log"] .spd-fab svg { transform: rotate(45deg); }
.spd-how, .spd-tick, .spd-tab, .spd-cheer { position: relative; }
.spd-how::after, .spd-tick::after, .spd-tab::after, .spd-cheer::after { content: ""; position: absolute; inset: -8px; }
.spd-tab::after { inset: -8px 0; }
.spd-tab:active, .spd-round:active, .spd-how:active, .spd-tick:active { transform: scale(.95); }

/* Detail */
.spd-dhero { display: flex; flex-direction: column; align-items: center; padding: 18px 0 20px; }
.spd-dbig { margin-top: 12px; font-size: 88px; font-weight: 800; line-height: .95; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.spd-dl { margin-top: 6px; font-size: 14px; color: var(--spd-mut); }
.spd-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0 8px; }
.spd-in b { font-size: 15px; }
.spd-in em { font-style: normal; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.spd-in em small { display: inline; font-size: 13px; font-weight: 500; }
.spd-maths { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 16px; padding: 12px 14px; border-radius: 16px; font-size: 13px; color: var(--spd-mut); background: rgba(0, 0, 0, .35); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .55), 0 0 0 1px rgba(246, 242, 236, .05); }
.spd-maths b { color: var(--spd-fg); font-variant-numeric: tabular-nums; white-space: nowrap; }
.spd-detail .spd-card + .spd-card { margin-top: 12px; }

/* Workout session (design 27a) */
.spd-seg { display: flex; gap: 4px; margin: 6px 20px 12px; }
.spd-seg i { flex: 1; height: 5px; border-radius: 4px; background: rgba(255, 255, 255, .11); transition: background 240ms var(--spd-ease); }
.spd-seg i.on { background: linear-gradient(90deg, #C3773E, #F2C9A2); box-shadow: 0 0 10px rgba(183, 106, 62, .45); }
.spd-ex { padding: 14px 12px 10px; }
.spd-exh, .spd-ex2 { display: flex; align-items: center; gap: 12px; }
.spd-exh { padding: 0 4px 8px; }
.spd-exh > div, .spd-ex2 > div { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.spd-exh b, .spd-ex2 b { font-size: 17px; }
.spd-exh em, .spd-ex2 em { font-style: normal; font-size: 13px; color: var(--spd-faint); font-variant-numeric: tabular-nums; }
.spd-exh .spd-pill, .spd-ex2 .spd-pill { height: 22px; padding: 0 8px; font-size: 11.5px; }
.spd-set { display: grid; grid-template-columns: 24px minmax(0, 1fr) minmax(0, 1fr) 44px; align-items: center; gap: 10px; min-height: 58px; padding: 0 2px 0 10px; border-radius: 18px; transition: background 200ms var(--spd-ease); }
.spd-set.on { background: rgba(183, 106, 62, .07); }
.spd-set > span { font-size: 13px; color: var(--spd-mut); font-variant-numeric: tabular-nums; }
.spd-set > span b { font-size: 21px; font-weight: 700; color: var(--spd-fg); }
.spd-set small { font-size: 11.5px; color: var(--spd-faint); }
.spd-sn { font-weight: 600; color: var(--spd-faint) !important; }
.spd-set .spd-tick { width: 44px; height: 44px; }
.spd-ex2 { margin-top: 10px; padding: 14px 16px 14px 14px; }
.spd-wofoot { position: absolute; left: 20px; right: 20px; bottom: 40px; }

/* Crew (design 37b challenge card + member rows) */
.spd-chead { padding: 6px 24px 12px; }
.spd-chead > b { display: block; font-size: 30px; font-weight: 700; letter-spacing: -.02em; }
.spd-goal { padding: 16px 16px 16px; }
.spd-gt { display: block; margin-top: 12px; font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.spd-you { margin-top: 12px; padding: 12px 14px 14px; border-radius: 18px; background: #0F0E0D; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .55), 0 0 0 1px rgba(246, 242, 236, .05); }
.spd-you .spd-bar { margin-top: 10px; height: 6px; }
.spd-gbtns { display: flex; gap: 8px; margin-top: 14px; }
.spd-gbtns .spd-cta { flex: 1; height: 48px; padding: 0 16px; font-size: 15px; }
.spd-gbtns .spd-cta2 { height: 48px; }
.spd-done { display: flex; align-items: center; gap: 12px; margin-top: 14px; min-height: 48px; }
.spd-done b { font-size: 16px; }
.spd-done small { font-size: 13px; }
.spd-sec { display: flex; justify-content: space-between; padding: 12px 24px 6px; font-size: 14px; font-weight: 600; color: var(--spd-faint); }
.spd-sec b { color: var(--spd-fg); }
.spd-list { margin: 0 16px; padding: 2px 14px; border-radius: 24px;
  background: linear-gradient(180deg, rgba(246, 242, 236, .055), rgba(246, 242, 236, .01) 60%), linear-gradient(180deg, #1E1C1A, #141310); box-shadow: inset 0 1px 0 rgba(246, 242, 236, .15), 0 0 0 1px rgba(246, 242, 236, .05); }
.spd-mrow { display: flex; align-items: center; gap: 12px; height: 46px; }
.spd-mrow + .spd-mrow { border-top: 1px solid var(--spd-line); }
.spd-mrow > div { flex: 1; min-width: 0; }
.spd-mrow b { font-size: 15px; }
.spd-mrow small { font-size: 12.5px; }
.spd-ini { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; font-size: 14px; font-weight: 700; color: var(--spd-fg);
  background: radial-gradient(120% 100% at 30% 10%, rgba(246, 242, 236, .24), rgba(246, 242, 236, .04) 70%), #1E1C1A; box-shadow: inset 0 1px 0 rgba(246, 242, 236, .25); }
.spd-mrow.me .spd-ini { box-shadow: inset 0 1px 0 rgba(246, 242, 236, .25), 0 0 0 2px #0B0A09, 0 0 0 3.5px rgba(219, 144, 103, .8); }
.spd-cheer { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--spd-mut); background: rgba(255, 255, 255, .06); transition: color 160ms, background 160ms; }
.spd-cheer.on { color: var(--spd-cu-lt); background: rgba(214, 132, 82, .2); }
.spd-cheer.on svg { fill: currentColor; }

/* Sheets */
.spd-scrim { position: absolute; inset: 0; z-index: 30; background: rgba(0, 0, 0, .6); }
.spd-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 31; padding: 10px 18px 34px; border-radius: 34px 34px 0 0; overflow: hidden; isolation: isolate;
  background: #13120F; box-shadow: inset 0 1px 0 rgba(246, 242, 236, .12); }
.spd-sheet::before { content: ""; position: absolute; z-index: -1; top: -220px; left: -40px; right: -40px; height: 420px; background: radial-gradient(closest-side, rgba(214, 132, 82, .46), transparent); opacity: .55; }
.spd-grab { display: block; width: 40px; height: 5px; margin: 0 auto 14px; border-radius: 9px; background: rgba(246, 242, 236, .25); }
.spd-shead { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.spd-shead > div { flex: 1; }
.spd-shead b { display: block; font-size: 22px; font-weight: 700; }
.spd-shead small { font-size: 13px; }
.spd-glab { display: block; padding: 10px 6px 6px; font-size: 13px; font-weight: 600; color: var(--spd-faint); }
.spd-group { padding: 2px 14px; border-radius: 22px;
  background: linear-gradient(180deg, rgba(246, 242, 236, .055), rgba(246, 242, 236, .01) 60%), linear-gradient(180deg, #1E1C1A, #141310); box-shadow: inset 0 1px 0 rgba(246, 242, 236, .15), 0 0 0 1px rgba(246, 242, 236, .05); }
.spd-lrow { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; text-align: left; color: var(--spd-mut); }
.spd-lrow + .spd-lrow { border-top: 1px solid var(--spd-line); }
.spd-lrow:disabled { opacity: .75; }
.spd-lt { flex: 1; }
.spd-lt b { display: block; font-size: 16px; color: var(--spd-fg); }
.spd-lt small { font-size: 13px; }
.spd-ways { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.spd-way { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 10px 18px; border-radius: 22px; color: var(--spd-cu-lt);
  background: rgba(183, 106, 62, .12); box-shadow: inset 0 0 0 1px rgba(219, 144, 103, .4); transition: transform 140ms var(--spd-ease); }
.spd-way:active { transform: scale(.97); }
.spd-way b { margin-top: 4px; font-size: 16px; color: var(--spd-fg); }
.spd-way small { font-size: 13px; }
.spd-well { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 12px 14px; border-radius: 18px; background: #0F0E0D; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .55), 0 0 0 1px rgba(246, 242, 236, .05); }
.spd-well b { font-size: 15px; }
.spd-well small { font-size: 12.5px; }
.spd-typed { font-size: 16px; color: var(--spd-fg); }
.spd-est { margin: 12px 0 14px; padding: 14px 16px 16px; }
.spd-est .spd-in { margin: 12px 0 0; }
.spd-macros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.spd-macros span { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 14px; font-size: 12.5px; color: var(--spd-mut); background: rgba(246, 242, 236, .05); }
.spd-macros b { font-size: 16px; color: var(--spd-fg); }
.spd-steps { list-style: none; display: grid; gap: 8px; margin: 0 0 16px; padding: 0; }
.spd-steps li { display: flex; align-items: center; gap: 14px; padding: 12px 14px 12px 12px; border-radius: 20px;
  background: linear-gradient(180deg, rgba(246, 242, 236, .055), rgba(246, 242, 236, .01) 60%), linear-gradient(180deg, #1E1C1A, #141310); box-shadow: inset 0 1px 0 rgba(246, 242, 236, .15), 0 0 0 1px rgba(246, 242, 236, .05); }
.spd-steps li.on { box-shadow: inset 0 1px 0 rgba(246, 242, 236, .2), 0 0 0 1px rgba(219, 144, 103, .5), 0 14px 34px -18px rgba(214, 132, 82, .6); }
.spd-steps b { font-size: 15.5px; }
.spd-steps small { font-size: 13px; }
.spd-sheet .spd-fine { margin: 14px 4px 0; }
.spd-bd { display: grid; gap: 12px; }
.spd-bdr { display: grid; grid-template-columns: 100px 1fr 30px; align-items: center; gap: 12px; }
.spd-bdr > b { text-align: right; font-size: 16px; font-variant-numeric: tabular-nums; }
.spd-maths.big { flex-direction: column; align-items: flex-start; gap: 4px; }
.spd-maths.big b { font-size: 20px; }

/* Toast + hint */
.spd-toast { position: absolute; z-index: 45; left: 14px; right: 14px; top: 52px; padding: 12px 14px; border-radius: 18px; font-size: 13px; font-weight: 600; line-height: 1.35; text-align: center; color: var(--spd-fg);
  background: rgba(28, 24, 21, .94); box-shadow: inset 0 1px 0 rgba(246, 242, 236, .14), 0 0 0 1px rgba(214, 132, 82, .45), 0 18px 30px -12px #000; animation: spd-drop 320ms var(--spd-ease); }
@keyframes spd-drop { from { opacity: 0; transform: translateY(-10px); } }
.spd-hint { position: absolute; z-index: 50; pointer-events: none; box-shadow: 0 0 0 2px var(--spd-cu-lt), 0 0 20px 2px rgba(214, 132, 82, .7); animation: spd-ring 1.6s var(--spd-ease) 3; }
@keyframes spd-ring { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* Entrances (no exits: closing is instant, which keeps taps snappy) */
.enter-page > .spd-page { animation: spd-fade 260ms var(--spd-ease); }
.enter-push > .spd-page { animation: spd-push 320ms var(--spd-ease); }
.enter-pop > .spd-page { animation: spd-pop 320ms var(--spd-ease); }
.enter-sheet > .spd-scrim { animation: spd-fade 240ms var(--spd-ease); }
.enter-sheet > .spd-sheet { animation: spd-up 380ms var(--spd-ease); }
@keyframes spd-fade { from { opacity: 0; } }
@keyframes spd-push { from { opacity: 0; transform: translateX(28px); } }
@keyframes spd-pop { from { opacity: 0; transform: translateX(-28px); } }
@keyframes spd-up { from { transform: translateY(100%); } }

@media (prefers-reduced-motion: reduce) {
  .spd-app *, .spd-app *::before, .spd-app *::after, .spd-app { animation: none !important; transition: none !important; }
}

/* Visually hidden live region for screen readers */
.spd-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Context line under an area's maths (shown, not scored) */
.spd-ctx { margin-top: 10px; font-size: 13px; color: var(--spd-faint); }

/* Start overlay on the phone: clearly a live app, not a picture */
.spd-start { position: absolute; z-index: 80; inset: 3.4%; border-radius: 14.5%/6.7%; border: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  color: var(--cream, #FFF5ED); font: inherit; background: radial-gradient(70% 50% at 50% 55%, rgba(214, 132, 82, .28), rgba(11, 10, 9, .55) 70%), rgba(11, 10, 9, .35);
  -webkit-backdrop-filter: blur(3px) saturate(1.1); backdrop-filter: blur(3px) saturate(1.1); transition: opacity 380ms cubic-bezier(.23, 1, .32, 1), transform 380ms cubic-bezier(.23, 1, .32, 1); }
.spd-start.out { opacity: 0; transform: scale(1.04); pointer-events: none; }
.spd-start b { font-weight: 800; font-size: 22px; letter-spacing: -.035em; }
.spd-start small { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: #F0C3A0; }
.spd-play { position: relative; width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center; color: #FFF5ED;
  background: radial-gradient(100% 100% at 50% 100%, rgba(214, 132, 82, .85), rgba(182, 106, 62, .45) 70%), linear-gradient(180deg, rgba(255, 240, 228, .25), rgba(255, 240, 228, .05));
  box-shadow: inset 0 1px 0 rgba(255, 245, 235, .5), 0 0 0 1px rgba(231, 176, 138, .7), 0 0 30px rgba(214, 132, 82, .6); }
.spd-play::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 1px solid rgba(231, 176, 138, .55); animation: spd-pulse 2s cubic-bezier(.23, 1, .32, 1) infinite; }
@keyframes spd-pulse { from { transform: scale(.85); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }
@media (hover: hover) { .spd-start:hover .spd-play { transform: scale(1.06); } }
.spd-play { transition: transform 200ms cubic-bezier(.23, 1, .32, 1); }
@media (prefers-reduced-motion: reduce) { .spd-play::after { animation: none; opacity: .6; } .spd-start { transition: none; } }

/* Avatar: photo inside a copper level ring + level pill (as in the app) */
.spd-av-me { position: relative; width: 50px; height: 50px; padding: 3px; color: inherit; background: conic-gradient(from 0deg, #F6D3B3 0deg, #D9935F 120deg, #B66A3E 250deg, rgba(182, 106, 62, .18) 250deg 360deg); box-shadow: 0 0 14px rgba(214, 132, 82, .35); }
.spd-av-me img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid #120f0d; display: block; }
.spd-lvl { position: absolute; right: -6px; bottom: -6px; min-width: 24px; height: 20px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: #FFF5ED;
  background: radial-gradient(100% 100% at 50% 100%, rgba(214, 132, 82, .9), rgba(182, 106, 62, .55) 70%), #2a201a; box-shadow: inset 0 1px 0 rgba(255, 245, 235, .45), 0 0 0 2px #120f0d, 0 0 10px rgba(214, 132, 82, .5); }

/* Toast: liquid-glass pill */
.spd-toast { left: 50%; right: auto; transform: translateX(-50%); width: max-content; max-width: calc(100% - 28px); padding: 10px 16px; border-radius: 999px; font-size: 12.5px; text-wrap: balance;
  background: linear-gradient(180deg, rgba(255, 245, 235, .16), rgba(255, 245, 235, .04)), rgba(24, 19, 16, .42);
  -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -1px 1px rgba(255, 255, 255, .08), inset 0 0 0 1px rgba(255, 245, 235, .14), 0 0 0 1px rgba(214, 132, 82, .35), 0 14px 30px -12px rgba(0, 0, 0, .85);
  animation: spd-drop-pill 360ms var(--spd-ease); }
@keyframes spd-drop-pill { from { opacity: 0; transform: translate(-50%, -10px) scale(.96); } }

/* ── 23 Oct: scan-friendly demo ── */
/* Guide text lives on the phone as a small glass tip; the caption under the phone stays for screen readers only */
.spd-step { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; min-height: 0; }
.spd-tip { position: absolute; z-index: 55; left: 50%; bottom: 15%; transform: translateX(-50%); width: max-content; max-width: 84%; padding: 9px 14px; border-radius: 16px; pointer-events: none;
  font-size: 12.5px; font-weight: 600; line-height: 1.35; text-align: center; color: #FFF5ED; text-wrap: balance;
  background: linear-gradient(180deg, rgba(255,245,235,.16), rgba(255,245,235,.04)), rgba(24,19,16,.55); -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 0 0 1px rgba(255,245,235,.12), 0 0 0 1px rgba(214,132,82,.4), 0 12px 26px -10px rgba(0,0,0,.85); }
.spd-tip:empty { display: none; }
.spd-tip.in { animation: spd-tip-in 380ms cubic-bezier(.23,1,.32,1); }
@keyframes spd-tip-in { from { opacity: 0; transform: translate(-50%, 8px) scale(.97); } }
/* Tap target: breathing copper glow until tapped */
.spd-hint { animation: spd-breathe 1.8s ease-in-out infinite; box-shadow: 0 0 0 2px #F0C3A0, 0 0 22px 4px rgba(214,132,82,.75); }
@keyframes spd-breathe { 0%, 100% { opacity: 1; box-shadow: 0 0 0 2px #F0C3A0, 0 0 26px 6px rgba(214,132,82,.8); } 50% { opacity: .6; box-shadow: 0 0 0 1.5px rgba(240,195,160,.7), 0 0 10px 1px rgba(214,132,82,.4); } }
@media (prefers-reduced-motion: reduce) { .spd-hint { animation: none; } .spd-tip.in { animation: none; } }
/* Glass checks instead of solid copper balls */
.spd-sphere { color: #FFE9D8; background: radial-gradient(100% 100% at 50% 100%, rgba(214,132,82,.6), rgba(214,132,82,.14) 70%), linear-gradient(180deg, rgba(255,240,228,.18), rgba(255,240,228,.03));
  box-shadow: inset 0 1px 0 rgba(255,245,235,.45), 0 0 0 1px rgba(214,132,82,.5), 0 0 14px rgba(214,132,82,.45); }
.spd-sphere svg { filter: drop-shadow(0 0 3px rgba(255,200,160,.8)); }
/* Check-in moment */
.spd-mrow.me.just .spd-sphere { animation: spd-checkpop 620ms cubic-bezier(.34,1.56,.64,1); }
.spd-mrow.me.just { animation: spd-row-glow 1.2s ease-out; border-radius: 14px; }
@keyframes spd-checkpop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.18); opacity: 1; } 100% { transform: scale(1); } }
@keyframes spd-row-glow { 0% { box-shadow: 0 0 0 0 rgba(214,132,82,0); background: rgba(214,132,82,.0); } 30% { box-shadow: 0 0 0 1px rgba(231,176,138,.6), 0 0 30px rgba(214,132,82,.45); background: rgba(214,132,82,.12); } 100% { box-shadow: 0 0 0 0 rgba(214,132,82,0); background: transparent; } }
/* Photo avatars in the crew list */
.spd-ph { overflow: hidden; padding: 0; }
.spd-ph img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.spd-note { grid-area: note; margin: 0; max-width: 320px; white-space: normal; text-align: center; }
.spd-tip { left: 0; right: 0; margin: 0 auto; width: fit-content; transform: none !important; }
@keyframes spd-tip-in { from { opacity: 0; translate: 0 8px; scale: .97; } }

.spd-av-me img { object-position: 50% 30%; }

/* ---------- Blueprint, Tracking and in-depth logging ---------- */
.spd-app input { user-select: text; -webkit-user-select: text; }
.spd-seg { display: flex; gap: 4px; margin: 0 16px; padding: 4px; border-radius: 999px; background: rgba(246, 242, 236, .06); box-shadow: inset 0 0 0 1px var(--spd-line); }
.spd-sheet .spd-seg { margin: 0; }
.spd-seg button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--spd-mut); transition: background 200ms var(--spd-ease), color 200ms var(--spd-ease), transform 140ms var(--spd-ease); }
.spd-seg button.on { color: var(--spd-fg); background: linear-gradient(180deg, rgba(246, 242, 236, .17), rgba(246, 242, 236, .07)); box-shadow: inset 0 1px 0 rgba(246, 242, 236, .22), 0 0 0 1px rgba(219, 144, 103, .35); }
.spd-seg button:active { transform: scale(.97); }
.spd-modehint { margin: 8px 6px 0; font-size: 13px; color: var(--spd-faint); }
.spd-counts { display: flex; gap: 8px; padding: 14px 16px 0; }
.spd-counts .spd-pill { height: 30px; padding: 0 12px; font-size: 13px; }
.spd-counts b { color: var(--spd-fg); font-variant-numeric: tabular-nums; }
.spd-hlist .spd-mrow { height: 58px; }
button.spd-mrow { width: 100%; text-align: left; }
.spd-gcard { display: grid; gap: 8px; margin-top: 10px; }
.spd-gcard b { font-size: 16px; }
.spd-gcard .spd-bar { height: 7px; }
.spd-gcard.behind .spd-bar i { background: linear-gradient(90deg, #6E6259, #A89D92); box-shadow: none; }

.spd-body { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 12px; width: calc(100% - 32px); margin: 0 16px; text-align: left; transition: transform 140ms var(--spd-ease); }
.spd-body:active { transform: scale(.98); }
.spd-wv { display: block; margin: 6px 0 8px; font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.spd-wv small { display: inline; margin-left: 4px; font-size: 16px; font-weight: 500; color: var(--spd-mut); }
.spd-spark { display: block; width: 132px; height: 44px; overflow: visible; }
.spd-spark polyline { stroke: var(--spd-cu-lt); }
.spd-spark circle { fill: var(--spd-cu); stroke: var(--spd-ink); stroke-width: 2; }
.spd-link { grid-column: 1 / -1; display: flex; align-items: center; gap: 2px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--spd-line); font-size: 14px; font-weight: 600; color: var(--spd-cu-lt); }
.spd-tgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px 16px 0; }
.spd-ttile { height: 92px; }
.spd-ttile:active { transform: none; }
.spd-tv small { display: inline; font-size: 12.5px; }

.spd-input { width: 100%; height: 52px; padding: 0 16px; border-radius: 18px; border: 0; font: inherit; font-size: 16px; color: var(--spd-fg); background: #0F0E0D; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .55), 0 0 0 1px rgba(246, 242, 236, .08); outline: none; }
.spd-input:focus { box-shadow: inset 0 1px 3px rgba(0, 0, 0, .55), 0 0 0 1.5px rgba(219, 144, 103, .8); }
.spd-flds { margin: 12px 0 14px; }
.spd-fld { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 54px; }
.spd-fld + .spd-fld { border-top: 1px solid var(--spd-line); }
.spd-fld > b { font-size: 15px; }
.spd-stp { display: flex; align-items: center; gap: 8px; }
.spd-stp em { min-width: 82px; text-align: center; font-style: normal; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.spd-stp .spd-round { width: 38px; height: 38px; }
.spd-wbig { display: flex; align-items: center; justify-content: center; gap: 20px; padding: 18px 0 6px; }
.spd-wbig .v { min-width: 150px; text-align: center; font-size: 56px; font-weight: 800; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.spd-wbig .v small { display: inline; margin-left: 4px; font-size: 18px; font-weight: 500; color: var(--spd-mut); }
.spd-wbig .spd-round { width: 52px; height: 52px; }
.spd-sheet .spd-fine.spd-center { justify-content: center; margin-bottom: 14px; }
.spd-ttile { height: 100px; }
.spd-ttile .spd-tv { flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
.spd-ttile .spd-tv b { white-space: nowrap; }
.spd-ttile .spd-tv small { white-space: nowrap; }
button.spd-mrow { border-radius: 16px; }

.spd-items { margin: 4px 0 12px; }
.spd-fi { display: flex; align-items: center; gap: 8px; min-height: 62px; }
.spd-fi + .spd-fi { border-top: 1px solid var(--spd-line); }
.spd-fit { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.spd-fit b { font-size: 15px; }
.spd-fit small { font-size: 12.5px; color: var(--spd-mut); white-space: nowrap; font-variant-numeric: tabular-nums; }
.spd-fi > em { font-style: normal; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; margin-right: 4px; }
.spd-fi > em small { display: inline; font-size: 12px; font-weight: 500; color: var(--spd-mut); }
.spd-fi .spd-round { width: 32px; height: 32px; flex: none; }
.spd-addi { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 50px; padding: 0; border: 0; border-top: 1px solid var(--spd-line); background: none; font: inherit; font-size: 15px; font-weight: 600; color: var(--spd-cu); cursor: pointer; }
.spd-empty { margin: 0; padding: 18px 0; text-align: center; font-size: 14px; color: var(--spd-mut); }
.spd-tot { margin: 0 0 14px; }
.spd-tot .spd-in { margin: 0; }
.spd-cta[disabled] { opacity: .4; pointer-events: none; }

/* What moved */
.spd-mv { margin-bottom: 14px; }
.spd-mv li { animation: spd-mv .38s cubic-bezier(.23, 1, .32, 1) both; animation-delay: calc(var(--i) * 70ms + 120ms); }
.spd-mv li > div { flex: 1; min-width: 0; }
.spd-mv em { font-style: normal; font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--spd-mut); }
.spd-mv em i { font-style: normal; opacity: .6; }
.spd-mv em b { font-size: 17px; color: var(--spd-cu-lt); }
@keyframes spd-mv { from { opacity: 0; transform: translateY(8px); } }
.demo-oneplace { margin: 20px auto 0; text-align: center; font-size: 15px; color: var(--spd-mut, #A9A39B); }

/* Today: rising orb (score in its light, six areas on an arc, one next step) */
.spd-rise .spd-orbimg { position: absolute; width: 450px; max-width: none; height: auto; left: -30px; top: 135px; filter: saturate(1.1) contrast(1.05); pointer-events: none; z-index: 0; }
.spd-rise .spd-orbimg.is-pulse { animation: spd-orbpulse 900ms var(--spd-ease); }
@keyframes spd-orbpulse { 40% { filter: saturate(1.1) contrast(1.05) brightness(1.35); } }
.spd-fadet, .spd-fadeb { position: absolute; left: 0; right: 0; pointer-events: none; z-index: 1; }
.spd-fadet { top: 0; height: 170px; background: linear-gradient(180deg, rgba(11, 10, 9, .85), rgba(11, 10, 9, .55) 55%, rgba(11, 10, 9, 0)); }
.spd-fadeb { top: 330px; height: 120px; background: linear-gradient(180deg, rgba(11, 10, 9, 0), #0B0A09 85%); }
.spd-rise .spd-status, .spd-rise .spd-hhead { position: relative; z-index: 5; }
.spd-score { position: absolute; left: 0; right: 0; top: 250px; z-index: 5; display: flex; flex-direction: column; align-items: center; transition: transform 140ms var(--spd-ease); }
.spd-score:active { transform: scale(.98); }
.spd-rise .spd-big { font-size: 112px; line-height: .9; letter-spacing: -.05em; text-shadow: 0 8px 40px rgba(0, 0, 0, .6); }
.spd-score .spd-eyebrow { margin-top: 10px; font: 500 11px var(--spd-mono); letter-spacing: .22em; color: var(--spd-cu-lt); text-shadow: none; }
.spd-arc { position: absolute; left: 0; right: 0; top: 455px; height: 110px; z-index: 6; }
.spd-arc svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.spd-pt { position: absolute; transform: translateX(-50%); text-align: center; }
.spd-pt::after { content: ""; position: absolute; inset: -6px -8px; }
.spd-pt b { display: block; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.spd-pt i { display: block; width: 6px; height: 6px; border-radius: 50%; margin: 5px auto 4px; background: linear-gradient(180deg, #F6D3B3, #D9935F); box-shadow: 0 0 8px rgba(231, 165, 118, .9); transition: transform 200ms var(--spd-ease); }
.spd-pt span { font-size: 11px; color: var(--spd-mut); }
.spd-pt:active i { transform: scale(1.6); }
.spd-pt.is-flash i { animation: spd-ptflash 1.1s var(--spd-ease); }
@keyframes spd-ptflash { 0%, 40% { transform: scale(2.2); box-shadow: 0 0 18px 4px rgba(231, 165, 118, 1); } }
.spd-rise .spd-next { position: absolute; left: 18px; right: 18px; top: 604px; margin: 0; z-index: 6; }
.spd-up { display: block; font: 500 11px var(--spd-mono); letter-spacing: .14em; text-transform: uppercase; color: #E7A576; margin-bottom: 2px; }
@media (prefers-reduced-motion: reduce) { .spd-rise .spd-orbimg.is-pulse, .spd-pt.is-flash i { animation: none; } }
.spd-orbglow { position: absolute; width: 420px; height: 420px; left: -15px; top: 85px; border-radius: 50%; background: radial-gradient(closest-side, rgba(214, 132, 82, .35), rgba(214, 132, 82, 0)); pointer-events: none; z-index: 0; }
.spd-pd { position: absolute; left: calc(50% + 13px); top: -3px; font: 600 11px 'Inter', sans-serif; font-style: normal; color: #E7A576; }
.spd-fadet, .spd-fadeb { display: none; }
.spd-score .spd-eyebrow { font-weight: 600; color: #FFF5ED; text-shadow: 0 0 6px rgba(0, 0, 0, .9), 0 1px 14px rgba(0, 0, 0, .9); }

/* Lock screen quick log: sample, ported unchanged from the lockscreen branch (a8a8b44, c7f883e). Used by the home hero loop. */
.spd-lock { background: #000; }
.spd-ltime { display: flex; flex-direction: column; align-items: center; margin-top: 6px; }
.spd-ltime small { font-size: 22px; font-weight: 600; color: rgba(246, 242, 236, .92); }
.spd-ltime b { margin-top: 2px; font-size: 132px; font-weight: 800; line-height: 1.02; letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: rgba(246, 242, 236, .26); outline: none; }
.spd-lwid { display: flex; justify-content: space-between; padding: 0 20px; margin-top: 10px; }
.spd-lc { position: relative; display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; font-size: 26px; font-weight: 600; color: rgba(246, 242, 236, .9); }
.spd-lc svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: rgba(246, 242, 236, .2); stroke-width: 4.2; }
.spd-lc svg .a { stroke: rgba(246, 242, 236, .8); stroke-linecap: round; }
.spd-lc .t { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; font-size: 20px; background: rgba(246, 242, 236, .12); }
.spd-lnotes { list-style: none; margin: 56px 0 0; padding: 0 26px; display: grid; gap: 10px; }
.spd-lnotes li { font-size: 23px; line-height: 1.25; color: rgba(246, 242, 236, .78); display: flex; gap: 14px; white-space: nowrap; }
.spd-lnotes li::before { content: "–"; color: rgba(246, 242, 236, .6); }
.spd-lbar { position: absolute; left: 30px; right: 30px; bottom: 74px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.spd-lsoon { flex: 1; text-align: center; }
.spd-lctl { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: rgba(34, 32, 30, .86); box-shadow: inset 0 1px 0 rgba(246, 242, 236, .1), 0 0 0 1px rgba(246, 242, 236, .08); }
.spd-lctl.plus { transition: transform 160ms var(--spd-ease); }
.spd-lctl.plus:active { transform: scale(.94); }
.spd-lctl.dim { color: rgba(246, 242, 236, .5); }
.spd-lfine { position: absolute; left: 24px; right: 24px; bottom: 152px; justify-content: center; margin: 0; text-align: center; }
.spd-lopen { position: absolute; left: 0; right: 0; bottom: 24px; margin: 0 auto; width: max-content; height: 36px; padding: 0 16px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--spd-mut); }
.spd-lopen:active { transform: scale(.97); }

/* Quick log dialog (one field, examples, Log) */
.spd-qd { top: 64px; bottom: auto; left: 12px; right: 12px; padding: 16px 16px 14px; border-radius: 34px; overflow: visible; }
.enter-sheet > .spd-qd { animation: spd-drop 320ms var(--spd-ease); }
@keyframes spd-drop { from { opacity: 0; transform: translateY(-14px) scale(.98); } }
.spd-qrow { display: flex; gap: 10px; align-items: center; }
.spd-qin { flex: 1; min-width: 0; height: 56px; border-radius: 28px; padding: 0 20px; }
.spd-mic { width: 52px; height: 52px; flex: none; }
.spd-mic.on { color: #1a120c; background: linear-gradient(135deg, #F6C9A0, #D9935F); }
.spd-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.spd-qchip { height: 38px; padding: 0 16px; border-radius: 999px; font-size: 14.5px; font-weight: 500; background: linear-gradient(180deg, rgba(246, 242, 236, .08), rgba(246, 242, 236, .02)); box-shadow: inset 0 1px 0 rgba(246, 242, 236, .14), 0 0 0 1px rgba(246, 242, 236, .07); transition: transform 160ms var(--spd-ease); }
.spd-qchip:active { transform: scale(.96); }
.spd-qmsg { min-height: 20px; margin: 10px 6px 0; font-size: 13px; color: var(--spd-cu-lt); }
.spd-qbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.spd-qbtns .spd-cta, .spd-qbtns .spd-cta2 { width: 100%; height: 54px; margin: 0; font-size: 17px; font-weight: 600; }
.spd-qd .spd-fine { margin: 12px 6px 0; }

.spd-qh { display: block; margin: 2px 4px 12px; font-size: 20px; font-weight: 700; outline: none; }

/* Lock screen confirmation + swipe up */
.spd-lnote { display: flex; align-items: center; gap: 12px; margin: 18px 16px 0; padding: 13px 14px; border-radius: 26px; background: rgba(58, 55, 52, .62); box-shadow: inset 0 1px 0 rgba(246, 242, 236, .12), 0 0 0 1px rgba(246, 242, 236, .06); animation: spd-drop 320ms var(--spd-ease); }
.spd-lnote > div { flex: 1; min-width: 0; }
.spd-lnote b { display: block; font-size: 16px; font-weight: 600; }
.spd-lnote small { font-size: 14px; color: var(--spd-mut); }
.spd-lnapp { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 11px; background: #14120F; box-shadow: inset 0 0 0 1px rgba(246, 242, 236, .1); }
.spd-lnow { align-self: flex-start; font-size: 13px; color: var(--spd-faint); }
.spd-swipe { position: absolute; left: 0; right: 0; bottom: 0; height: 74px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; padding-top: 6px; font-size: 14.5px; font-weight: 500; color: var(--spd-mut); touch-action: none; }
.spd-swipe svg { animation: spd-nudge 1.8s var(--spd-ease) 3; }
.spd-swipe i { position: absolute; bottom: 8px; width: 134px; height: 5px; border-radius: 3px; background: rgba(246, 242, 236, .85); }
@keyframes spd-nudge { 50% { transform: translateY(-4px); } }
.spd-lock:has(.spd-swipe) .spd-lfine { bottom: 164px; }
.spd-qin[readonly] { cursor: default; caret-color: transparent; }