/* ten — prototype gallery: coded phone-screen app mockups.
 *
 * Each template is its OWN design system — different type, colour philosophy,
 * layout and component treatment — so no two feel related.
 *
 * METHOD (2026-08-03): each block names the real app it is benchmarked against.
 * Palettes are sampled from that app's App Store screenshots rather than
 * invented, which is why the numbers look arbitrary (#58cc02, #14181b, #fdf5ef)
 * — they are measured, not chosen. Nothing is copied: the reference sets the
 * craft bar and the colour facts; the screen is original work built to it.
 *
 * Shared: the phone shell (.pf), the sizing system (cqw units, so screens stay
 * crisp from thumbnail to full-screen), and the craft layer (.gn / .art / .fc).
 * Everything else is per-style.
 *
 * TYPE: the five families this file uses (Inter, Playfair Display, Fraunces,
 * Space Grotesk, JetBrains Mono) must all be loaded by the consuming page.
 * resources/free-prototype/index.html is currently the only consumer. Before
 * 2026-08-03 it loaded Inter 400/500/600 only, so every serif here silently
 * rendered as Times New Roman and every 200/300/800 weight as regular — which
 * was most of why the gallery read as unstyled. Don't trim that font request
 * without trimming the stacks below to match.
 */

/* ---- the phone shell (the only shared chrome) ---- */
.pf {
  position: relative;
  width: 100%; aspect-ratio: 390 / 844;
  border-radius: 34px; padding: 7px;
  background: #08090B;
  box-shadow: 0 2px 3px rgba(17,18,19,0.06), 0 30px 60px -34px rgba(40,36,70,0.5), inset 0 0 0 1.5px rgba(255,255,255,0.05);
  overflow: hidden;
}
.pf-screen {
  position: relative; width: 100%; height: 100%;
  border-radius: 27px; overflow: hidden;
  display: flex; flex-direction: column;
  container-type: inline-size;
}
.pf-screen * { box-sizing: border-box; margin: 0; }

/* shared iOS home indicator — the single detail that reads "real screen".
 * Sits above every screen's own background; each style sets --hi to a color that
 * shows on its surface (dark screens use a light bar, light screens a dark one). */
.pf-screen::after {
  content: ""; position: absolute; left: 50%; bottom: 2cqw; transform: translateX(-50%);
  width: 35cqw; height: 1.1cqw; border-radius: 999px; z-index: 20;
  background: var(--hi, rgba(0,0,0,0.28)); pointer-events: none;
}

/* shared status bar (each style tints it via currentColor) */
.st { display: flex; align-items: center; justify-content: space-between; padding: 4.5cqw 6cqw 0; font-size: 3.4cqw; font-weight: 600; }
.st .d { display: flex; align-items: center; gap: 1.6cqw; }
.st .d svg { display: block; height: 3.2cqw; width: auto; }

/* shared body flex so screens fill the phone height */
.bd { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
/* The status bar renders as a sibling BEFORE .bd in all 20 stock templates, so
 * it sat on the bare black bezel instead of the screen's own background, and
 * every `.s-x .st` colour rule silently never matched (they were written as
 * descendant selectors). Pull .bd up behind it and pad the content back down:
 * layout is unchanged, the background now reaches the top edge, and .pf-screen's
 * overflow:hidden clips the overshoot. Kit screens carry their own .k-st INSIDE
 * .bd, so they have no preceding .st and are untouched. */
.st { position: relative; z-index: 6; }
.st + .bd { margin-top: -8.8cqw; padding-top: 8.8cqw; }

/* shared tab-bar scaffold — each style paints it (--tb-bg / --tb-line / colors).
 * Icons are inline SVG so the vocabulary is consistent across every aesthetic.
 * The extra bottom padding clears the home indicator. */
.tb { display: flex; align-items: flex-start; justify-content: space-around; gap: 2cqw;
  padding: 3cqw 5cqw calc(4.6cqw + 2cqw); margin-top: auto;
  background: var(--tb-bg, transparent); border-top: 1px solid var(--tb-line, transparent); }
.tb .ti { display: flex; flex-direction: column; align-items: center; gap: 1.2cqw;
  font-size: 2.5cqw; font-weight: 600; letter-spacing: 0.01em; color: var(--tb-off, #9aa0a8); }
.tb .ti svg { width: 5.6cqw; height: 5.6cqw; display: block; }
.tb .ti.on { color: var(--tb-on, currentColor); }

/* ---- craft layer (shared by every screen) ----
 * Matching block in prototype-templates.js. These are the three things every
 * real app screen has that a coded mockup doesn't: texture, imagery, faces.
 */

/* grain — one fractal-noise tile. Overlaid at 4-7% it removes the plastic
 * evenness of flat CSS fills. `overlay` keeps it invisible in the mid-tones and
 * lets it bite in the highlights and shadows, the way real sensor noise does. */
.pf-screen .gn {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  opacity: 0.055; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 32cqw 32cqw;
}

/* art — the cover-art / photography primitive. The JS supplies a four-stop mesh;
 * this adds the vignette and top sheen that make it read as a captured image
 * rather than a fill. */
.pf-screen .art { position: relative; overflow: hidden; isolation: isolate; }
.pf-screen .art > .art-v {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 118%, rgba(0,0,0,0.34) 0%, transparent 58%),
    linear-gradient(196deg, rgba(255,255,255,0.20) 0%, transparent 34%);
}

/* faces — duotone head-and-shoulders on a tinted disc. Six hair masses, picked
 * deterministically per name, so a row of avatars reads as different people. */
.pf-screen .fc {
  position: relative; display: inline-flex; flex: 0 0 auto;
  overflow: hidden; border-radius: 50%; width: 9cqw; height: 9cqw;
}
.pf-screen .fc svg { width: 100%; height: 100%; display: block; }

/* ---- collision guard (load-bearing) ----
 * The phone-screen mockups render INSIDE the live marketing page, not an iframe,
 * so any generic class name a template uses (.hero, .card, .eyebrow, .big, .dot,
 * .md) inherits the site-wide rule from v2.css / resources.css. That is how a
 * template's inner `.hero` was picking up the home page's `.hero{min-height:100svh}`
 * and blowing a screen to 900px tall. Neutralize the structural leak inside any
 * phone screen: these classes carry ONLY what their own `.s-<slug>` rule sets
 * (same specificity, and every template block is defined after this, so the
 * scoped rule still wins for the properties it declares). Display is left alone
 * so flex/grid layouts inside templates are unaffected. */
.pf-screen .hero, .pf-screen .card, .pf-screen .eyebrow,
.pf-screen .big, .pf-screen .dot, .pf-screen .md, .pf-screen .band, .pf-screen .step {
  min-height: 0; max-width: none; width: auto; height: auto;
  margin: 0; padding: 0; background: none; border: 0; box-shadow: none;
  position: static; letter-spacing: normal; text-transform: none; line-height: normal;
}

/* ============================================================ 1 · VOID
 * Dala-inspired: pure black, electric violet, no cards/borders — elements float
 * on the void. Ultra-light body, massive tight headlines. */
.s-void { background: #050506; color: #fff; font-family: 'Inter', sans-serif; --hi: rgba(255,255,255,0.4); }
.st:has(+ .s-void) { color: #7c7c86; }
.s-void .vpad { padding: 6cqw 7cqw 0; display: flex; flex-direction: column; flex: 1; gap: 4.5cqw; }
.s-void .vk { font-size: 3cqw; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #6a6a76; }
.s-void .vbig { font-size: 19cqw; font-weight: 300; letter-spacing: -0.05em; line-height: 0.92; }
.s-void .vbig b { font-weight: 400; color: #8052ff; }  /* the .2 in the accent so the number itself carries the one color */
.s-void .vsub { font-size: 3.7cqw; font-weight: 200; color: #a8a8b0; line-height: 1.4; letter-spacing: -0.01em; }
.s-void .vdot { color: #8052ff; }    /* one accent only — violet */
/* Slack distribution (this screen + the 8 below): each pad used to hold ONE
 * auto margin, so all leftover phone height pooled into a single dead hole at
 * modal size. Auto margins on 2-3 late blocks split that slack into even,
 * intentional breathing gaps instead — flexbox divides free space equally
 * across every auto margin. Type groups (kicker/headline/body) stay glued. */
.s-void .vspark { margin-top: auto; }
.s-void .vspark svg { width: 100%; height: 16cqw; display: block; }
.s-void .vspark-x { display: flex; justify-content: space-between; font-size: 2.7cqw; color: #55555f; margin-top: 1.6cqw; letter-spacing: 0.04em; }
.s-void .vlevel { margin-top: auto; }
.s-void .vlrow { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2.6cqw; }
.s-void .vlp { font-size: 3.4cqw; font-weight: 500; color: #8052ff; }
.s-void .vltrack { display: flex; gap: 1.4cqw; }
.s-void .vltrack i { flex: 1; height: 1.4cqw; border-radius: 999px; background: #1c1c22; }

/* spend breakdown. A net-worth number and a sparkline is a widget, not a home
 * screen — Copilot's equivalent view always answers "where did it go" directly
 * underneath. Bars are hairlines so they read on the void without becoming
 * a second focal point against the violet. */
.s-void .vcats { margin-top: 1cqw; }
.s-void .vck { font-size: 2.8cqw; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #55555f; margin-bottom: 3cqw; }
.s-void .vcrow { display: flex; align-items: center; gap: 3cqw; padding: 1.9cqw 0; }
.s-void .vcn { flex: 0 0 30cqw; font-size: 3.1cqw; font-weight: 300; color: #a8a8b0; }
.s-void .vcbar { flex: 1; height: 0.9cqw; border-radius: 999px; background: #17171c; overflow: hidden; }
.s-void .vcbar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #5b34d6 0%, #8052ff 100%); }
.s-void .vcv { flex: 0 0 15cqw; text-align: right; font-size: 3.1cqw; font-weight: 400; color: #e6e6ec; font-variant-numeric: tabular-nums; }

.s-void .vltrack i.on { background: #8052ff; box-shadow: 0 0 6cqw -2cqw rgba(128,82,255,0.9); }
.s-void .vfoot { margin-top: auto; }
.s-void .vrow { display: flex; justify-content: space-between; align-items: baseline; padding: 3.2cqw 0; border-bottom: 1px solid #17171b; }
.s-void .vrow .l { font-size: 3.7cqw; font-weight: 200; color: #c8c8d0; }
.s-void .vrow .r { font-size: 4.2cqw; font-weight: 400; }
.s-void .tb { --tb-line: #17171b; --tb-off: #55555f; --tb-on: #fff; margin-top: 3cqw; }

/* ============================================================ 4 · PLAYGROUND
 * Reference bar: Duolingo. Its real signature is not "green" — it is the
 * tactile 3D press (every button and card sits on a solid, un-blurred bottom
 * edge, so the UI looks moulded rather than printed), 2px hard borders, plump
 * 8-12px radii, and heavy weights on a calm grey body. Palette sampled from the
 * store screenshots: #58cc02 go, #1cb0f6 info, #ffc800 reward, #e5e5e5 rule,
 * #4b4b4b ink, #afafaf mute. */
.s-play { background: #fff; color: #4b4b4b; font-family: 'Inter', ui-sans-serif, sans-serif; --hi: rgba(0,0,0,0.2); }
.st:has(+ .s-play) { color: #afafaf; }
.s-play .ppad { padding: 4.6cqw 5.6cqw 0; display: flex; flex-direction: column; flex: 1; gap: 3cqw; }

/* header: the two counters Duolingo puts at the top, drawn not emoji'd */
.s-play .phead { display: flex; align-items: center; gap: 4.5cqw; }
.s-play .pstreak, .s-play .pcrown { display: flex; align-items: center; gap: 1.4cqw; font-size: 4cqw; font-weight: 800; letter-spacing: -0.01em; }
.s-play .pstreak { color: #ff9600; }
.s-play .pcrown { color: #1cb0f6; margin-left: auto; }
.s-play .pfl, .s-play .pgm { display: block; width: 5.4cqw; height: 5.4cqw; }
.s-play .pfl svg, .s-play .pgm svg { width: 100%; height: 100%; display: block; }

/* unit banner — the solid colour block that anchors Duolingo's path screen */
.s-play .punit { background: #58cc02; border-radius: 4.4cqw; padding: 4.2cqw 4.6cqw; color: #fff; box-shadow: 0 2.2cqw 0 #46a302; }
.s-play .punit-k { font-size: 2.8cqw; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; color: rgba(255,255,255,0.78); }
.s-play .punit-t { font-size: 5.2cqw; font-weight: 800; letter-spacing: -0.02em; margin-top: 1cqw; }
.s-play .punit-bar { height: 2.2cqw; border-radius: 999px; background: rgba(0,0,0,0.16); margin-top: 3cqw; overflow: hidden; }
.s-play .punit-bar i { display: block; height: 100%; border-radius: 999px; background: #ffc800; }
.s-play .punit-m { font-size: 2.9cqw; font-weight: 700; color: rgba(255,255,255,0.86); margin-top: 1.8cqw; }

/* lesson rows */
.s-play .pcard { border: 2px solid #e5e5e5; border-radius: 4cqw; padding: 3.2cqw; }
.s-play .pcard--live { border-color: #58cc02; box-shadow: 0 2.2cqw 0 #d7f0c2; }
.s-play .pcard--lock { border-style: dashed; border-color: #ececec; }
.s-play .prow { display: flex; align-items: center; gap: 3cqw; }
.s-play .pgrow { flex: 1; min-width: 0; }
.s-play .pico { width: 10cqw; height: 10cqw; border-radius: 3.2cqw; display: grid; place-items: center; flex-shrink: 0; }
.s-play .pico svg { width: 5.6cqw; height: 5.6cqw; display: block; }
.s-play .pico.pdone { background: #58cc02; color: #fff; }
.s-play .pico.pnow { background: #ddf0ff; color: #1cb0f6; }
.s-play .pico.plock { background: #f2f2f2; color: #c0c0c0; }
.s-play .prt { font-size: 3.8cqw; font-weight: 800; color: #4b4b4b; letter-spacing: -0.01em; }
.s-play .prt.pdim { color: #b4b4b4; }
.s-play .prs { font-size: 3.1cqw; font-weight: 600; color: #afafaf; margin-top: 0.4cqw; }
.s-play .pxp { font-size: 3.2cqw; font-weight: 800; color: #58cc02; }
.s-play .parr { font-size: 6cqw; font-weight: 800; color: #58cc02; line-height: 0.7; padding-right: 1cqw; }

/* daily quests — the section that keeps the home screen from being three rows
 * and a void. Bar and counter share a track so the row stays one object. */
.s-play .pquest { border-top: 2px solid #f0f0f0; padding-top: 3.2cqw; display: flex; flex-direction: column; gap: 2.8cqw; }
.s-play .pqh { font-size: 3cqw; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #afafaf; }
.s-play .pqrow { display: flex; align-items: center; gap: 3cqw; }
.s-play .pqi { width: 8.4cqw; height: 8.4cqw; border-radius: 2.6cqw; display: grid; place-items: center; flex-shrink: 0; }
.s-play .pqi svg { width: 4.6cqw; height: 4.6cqw; display: block; }
.s-play .pqi--x { background: #fff2cc; color: #ffc800; }
.s-play .pqi--f { background: #ffe8d1; color: #ff9600; }
.s-play .pqt { font-size: 3.3cqw; font-weight: 700; color: #4b4b4b; }
.s-play .pqbar { height: 2.6cqw; border-radius: 999px; background: #ececec; margin-top: 1.2cqw; overflow: hidden; }
.s-play .pqbar i { display: block; height: 100%; border-radius: 999px; background: #ffc800; }
/* count sits outside the track: centred inside it was unreadable the moment the
 * fill edge crossed the digits */
.s-play .pqn { flex: 0 0 auto; font-size: 2.7cqw; font-weight: 800; color: #afafaf; font-variant-numeric: tabular-nums; }
.s-play .pqn--done { color: #58cc02; }
.s-play .pqi--g { background: #e4f6d6; color: #58cc02; }

/* social proof strip — overlapping faces, the cheapest way to make a learning
 * app feel populated instead of single-player */
.s-play .pfriends { display: flex; align-items: center; gap: 2.6cqw; margin-top: auto; }
.s-play .pfaces { display: flex; }
.s-play .pfaces .fc { width: 7.4cqw; height: 7.4cqw; box-shadow: 0 0 0 0.7cqw #fff; }
.s-play .pfaces .fc + .fc { margin-left: -2.4cqw; }
.s-play .pfrt { font-size: 2.9cqw; font-weight: 700; color: #afafaf; }

/* the press. Solid offset, zero blur — blur here would read as a generic
 * drop-shadow and lose the moulded-plastic quality the whole style rests on. */
.s-play .pfoot { margin-top: 3.4cqw; padding-bottom: 1cqw; }
.s-play .pbtn { text-align: center; padding: 3.8cqw; border-radius: 4cqw; font-size: 3.6cqw; font-weight: 800; letter-spacing: 0.045em; text-transform: uppercase; color: #fff; background: #58cc02; box-shadow: 0 3.4cqw 0 #46a302; }
.s-play .tb { --tb-line: #efefef; --tb-off: #c8c8c8; --tb-on: #58cc02; margin-top: 4.6cqw; }

/* ============================================================ 7 · DUSK
 * Reference bar: Calm / Headspace sleep mode. Deep indigo ground with exactly
 * one warm light source, because the screen is used at 3AM by a dark-adapted
 * eye — the previous peach-to-lavender wash read as a daytime wellness app and
 * would have been physically unpleasant to look at in the dark. Everything
 * except the timer and the ember accent sits at low contrast. */
.s-dusk { position: relative; overflow: hidden; color: #ffffff; font-family: 'Inter', ui-sans-serif, sans-serif;
  background: linear-gradient(168deg, #0a0c23 0%, #161139 46%, #241a4a 100%); --hi: rgba(255,255,255,0.34); }
.s-dusk .dglow { position: absolute; top: -18cqw; right: -26cqw; width: 92cqw; height: 92cqw; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(122,86,214,0.55) 0%, rgba(88,58,168,0.18) 46%, transparent 70%); filter: blur(6cqw); }
.s-dusk .dpad { position: relative; z-index: 2; padding: 5.4cqw 7cqw 0; display: flex; flex-direction: column; flex: 1; }

.s-dusk .dtop { display: flex; align-items: center; justify-content: space-between; }
.s-dusk .dgreet { font-size: 3.1cqw; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: #9a93c8; }
.s-dusk .dlive { display: inline-flex; align-items: center; gap: 1.4cqw; font-size: 2.7cqw; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: #f6c453; background: rgba(246,196,83,0.12); border: 1px solid rgba(246,196,83,0.28); border-radius: 999px; padding: 1cqw 2.6cqw; }
.s-dusk .dlive i { width: 1.5cqw; height: 1.5cqw; border-radius: 50%; background: #f6c453; box-shadow: 0 0 0 0.7cqw rgba(246,196,83,0.22); }

.s-dusk .dbig { font-size: 11.4cqw; font-weight: 300; line-height: 1.02; letter-spacing: -0.035em; margin-top: 4.4cqw; }
.s-dusk .dsub { font-size: 3.5cqw; font-weight: 300; line-height: 1.5; color: #a49dd0; margin-top: 2.8cqw; max-width: 74cqw; }

/* the timer IS the screen at 3AM — ring, count, and target in one object */
.s-dusk .dtimer { position: relative; align-self: center; width: 46cqw; height: 46cqw; margin-top: auto; display: grid; place-items: center; }
.s-dusk .dring { position: absolute; inset: 0; width: 100%; height: 100%; }
.s-dusk .dtin { text-align: center; }
.s-dusk .dtnum { font-size: 12cqw; font-weight: 200; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; line-height: 1; }
.s-dusk .dtlab { font-size: 2.9cqw; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: #8e86bd; margin-top: 1.4cqw; }

.s-dusk .dbtn { margin-top: 5cqw; text-align: center; padding: 4cqw; border-radius: 999px; font-size: 3.6cqw; font-weight: 600; letter-spacing: 0.01em;
  color: #1a1330; background: linear-gradient(180deg, #f7cd68 0%, #efb14b 100%); box-shadow: 0 1.6cqw 4.4cqw rgba(239,177,75,0.30); }

/* tonight's log — three real events. A sleep app with no history on the home
 * screen is the thing parents open it for, missing. */
.s-dusk .dlog { margin-top: auto; padding: 6cqw 0 2cqw; }
.s-dusk .dlk { font-size: 2.8cqw; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #7b74a8; }
.s-dusk .dlrow { display: flex; align-items: baseline; gap: 3cqw; padding: 2.6cqw 0; border-bottom: 1px solid rgba(255,255,255,0.07); font-size: 3.1cqw; }
.s-dusk .dlrow:last-child { border-bottom: 0; }
.s-dusk .dlt { flex: 0 0 17cqw; color: #8e86bd; font-variant-numeric: tabular-nums; font-weight: 500; }
.s-dusk .dld { flex: 1; color: #ded9f2; font-weight: 500; }
.s-dusk .dlv { color: #8e86bd; font-weight: 500; }
.s-dusk .dlv.ok { color: #86d6a8; }
.s-dusk .dlrow.on .dld { color: #fff; }
.s-dusk .dlrow.on .dlv { color: #f6c453; }
.s-dusk .tb { --tb-line: rgba(255,255,255,0.09); --tb-off: #6f6899; --tb-on: #f6c453; }

/* ============================================================ 9 · SOFT LIGHT
 * Reference bar: MasterClass / Domestika, translated to a light ground. The
 * white space is the style, but it has to surround something — cover art, a
 * face, a lesson list — or it reads as an unfinished wireframe. Type is Apple-
 * adjacent: tight negative tracking, 600 weight, generous leading. */
.s-soft { background: #fff; color: #1d1d1f; font-family: 'Inter', ui-sans-serif, sans-serif; --hi: rgba(29,29,31,0.22); }
.st:has(+ .s-soft) { color: #b0b0b5; }
.s-soft .fpad { padding: 5.6cqw 6.4cqw 0; display: flex; flex-direction: column; flex: 1; }

.s-soft .ftop { display: flex; align-items: baseline; justify-content: space-between; }
.s-soft .fk { font-size: 3.1cqw; font-weight: 600; color: #f5623d; letter-spacing: 0.005em; }
.s-soft .fpct { font-size: 3.1cqw; font-weight: 600; color: #86868b; font-variant-numeric: tabular-nums; }
.s-soft .fbar { height: 0.9cqw; border-radius: 999px; background: #ededf0; margin-top: 2cqw; overflow: hidden; }
.s-soft .fbar i { display: block; height: 100%; border-radius: 999px; background: #f5623d; }

.s-soft .fbig { font-size: 7.8cqw; font-weight: 600; letter-spacing: -0.035em; line-height: 1.06; color: #1d1d1f; margin-top: 4cqw; }

/* cover art: the focal point the old layout was missing entirely */
.s-soft .fcover { margin-top: 4.4cqw; height: 40cqw; border-radius: 5cqw; box-shadow: 0 2.4cqw 5cqw -1.6cqw rgba(61,21,22,0.34); }
.s-soft .fcov-tag { margin-top: -8.2cqw; margin-left: 4.4cqw; z-index: 6; position: relative; align-self: flex-start;
  font-size: 2.7cqw; font-weight: 600; letter-spacing: 0.04em; color: #fff;
  background: rgba(20,10,10,0.42); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,0.22);
  border-radius: 999px; padding: 1.3cqw 3cqw; }

.s-soft .fby { display: flex; align-items: center; gap: 3cqw; margin-top: 5.4cqw; }
.s-soft .fby .fc { width: 9.6cqw; height: 9.6cqw; }
.s-soft .fbyn { font-size: 3.5cqw; font-weight: 600; letter-spacing: -0.015em; color: #1d1d1f; }
.s-soft .fbym { font-size: 3.1cqw; color: #86868b; margin-top: 0.6cqw; }

.s-soft .flist { margin-top: 4.6cqw; }
.s-soft .frow { display: flex; align-items: center; gap: 3.4cqw; padding: 3.1cqw 0; border-top: 1px solid #f0f0f2; }
.s-soft .frow .fn { font-size: 2.9cqw; font-weight: 600; color: #c7c7cc; font-variant-numeric: tabular-nums; }
.s-soft .frow .l { flex: 1; font-size: 3.5cqw; color: #1d1d1f; letter-spacing: -0.01em; }
.s-soft .frow .r { font-size: 3.1cqw; color: #86868b; font-variant-numeric: tabular-nums; }
.s-soft .frow.on .fn, .s-soft .frow.on .r { color: #f5623d; }
.s-soft .frow.on .l { font-weight: 600; }

/* the live session — a course app's home screen without a "what's happening
 * next" hook is a table of contents, not a product */
.s-soft .flive { display: flex; align-items: center; gap: 3cqw; margin-top: 4.4cqw; padding: 3.6cqw 4cqw;
  border-radius: 4cqw; background: #faf7f6; box-shadow: inset 0 0 0 1px rgba(245,98,61,0.16); }
.s-soft .flive-d { width: 2cqw; height: 2cqw; border-radius: 50%; background: #f5623d; flex: 0 0 auto;
  box-shadow: 0 0 0 1.2cqw rgba(245,98,61,0.16); }
.s-soft .flive-t { font-size: 3.3cqw; font-weight: 600; letter-spacing: -0.01em; color: #1d1d1f; }
.s-soft .flive-m { font-size: 2.9cqw; color: #86868b; margin-top: 0.5cqw; }
.s-soft .flive-a { margin-left: auto; flex: 0 0 auto; font-size: 2.9cqw; font-weight: 600; color: #f5623d; }

.s-soft .fpill { align-self: stretch; text-align: center; padding: 3.6cqw; border-radius: 999px; background: #1d1d1f; color: #fff;
  font-size: 3.5cqw; font-weight: 500; letter-spacing: -0.01em; margin-top: auto; margin-bottom: 2cqw; }
.s-soft .tb { --tb-line: #f0f0f2; --tb-off: #b0b0b5; --tb-on: #1d1d1f; margin-top: 3cqw; }

/* =================================================== gallery presentation ==== */
/* horizontal-scroll rail of template cards */

/* the scroller */
.tpl-rail-wrap { position: relative; margin: 0 calc(-1 * clamp(24px, 4vw, 40px)); }
.tpl-rail {
  display: flex; gap: 20px; overflow-x: auto;
  /* proximity, not mandatory: with 9 cards the last snap point sits ~100px past
   * max scroll, so mandatory sprang back and the final design was unreachable.
   * Also, at ~324px of rail only ~1.5 cards show, which made start-snapping jumpy
   * on every swipe. */
  scroll-snap-type: x proximity;
  scroll-padding-inline: clamp(24px, 4vw, 40px);
  /* stop a right-swipe at the start of the rail from chaining to the document and
   * firing Safari's edge-swipe back gesture — that drops the user off a long form
   * with nothing persisted. */
  overscroll-behavior-x: contain;
  padding: 6px clamp(24px, 4vw, 40px) 20px;
  -webkit-overflow-scrolling: touch; scrollbar-width: thin;
}
.tpl-rail::-webkit-scrollbar { height: 8px; }
.tpl-rail::-webkit-scrollbar-thumb { background: #D8D2EC; border-radius: 999px; }
.tpl-rail::-webkit-scrollbar-track { background: transparent; }
/* styling the scrollbar opts out of iOS overlay scrollbars, leaving a permanent
 * lilac desktop bar. Every other rail in the codebase hides it on touch. */
@media (hover: none), (pointer: coarse) {
  .tpl-rail { scrollbar-width: none; }
  .tpl-rail::-webkit-scrollbar { display: none; }
}
.tpl-hint { font-family: var(--font-display); font-size: 0.82rem; color: var(--mute); margin: 0 0 14px; display: inline-flex; align-items: center; gap: 8px; }
/* "scroll" is a mouse verb; on a phone the gesture is a swipe. Naming the count
 * ("all 9") also tells them there's more than the 1.5 cards they can see. */
.tpl-hint-touch { display: none; }
@media (hover: none), (pointer: coarse) {
  .tpl-hint-touch { display: inline; }
  .tpl-hint-desk { display: none; }
}
.tpl-hint .arw { color: var(--accent); }

.tpl-card {
  position: relative; cursor: pointer; flex: 0 0 auto; width: 220px; scroll-snap-align: start;
  border-radius: 20px; padding: 12px;
  background: #FFFFFF; border: 1.5px solid var(--rule);
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease), border-color 180ms var(--ease);
}
@media (max-width: 560px) { .tpl-card { width: 200px; } }
@media (hover: hover) { .tpl-card:hover { transform: translateY(-4px); box-shadow: 0 26px 46px -30px rgba(70,58,160,0.4); border-color: #E0DAF0; } }
/* tinted ground as well as border, so "picked" is unmistakable on touch where the
 * lifted-hover look is no longer available to contrast against */
.tpl-card.is-picked { border-color: var(--accent); background: rgba(106,83,206,0.06); box-shadow: 0 22px 42px -26px rgba(106,83,206,0.5); }
.tpl-card .pf { pointer-events: none; }
/* Now a real button, not a passive confirmation glyph: it is the direct way to
 * pick a design from the rail. So it must be permanently visible (an invisible
 * control can't be discovered) and a 44px target. Unpicked reads as an empty
 * outline on white; picked fills with accent. */
.tpl-check {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  appearance: none; cursor: pointer; padding: 0;
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,0.92); border: 1.5px solid var(--rule); color: #C9C4D8;
  box-shadow: 0 4px 10px -3px rgba(40,36,70,0.25);
  transition: background 160ms var(--ease), color 160ms var(--ease), border-color 160ms var(--ease);
}
@media (hover: hover) { .tpl-check:hover { border-color: var(--accent); color: var(--accent); } }
.tpl-check:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tpl-check svg { width: 17px; height: 17px; }
.tpl-card.is-picked .tpl-check { background: var(--accent); border-color: var(--accent); color: #FFFFFF; box-shadow: 0 4px 10px -3px rgba(106,83,206,0.6); }
.tpl-meta { padding: 12px 6px 4px; }
/* the niche tag: who this look is FOR, so a creator can self-select in one glance */
.tpl-niche {
  font-family: var(--font-display); font-weight: 500; font-size: 0.66rem;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--accent);
  margin: 0 0 4px;
}
.tpl-name { font-family: var(--font-display); font-weight: 600; font-size: 0.92rem; color: var(--ink); }
.tpl-blurb { font-family: var(--font-body); font-size: 0.82rem; line-height: 1.4; color: var(--mute); margin: 4px 0 0; }
.tpl-picked-count { font-family: var(--font-display); font-size: 0.86rem; color: var(--accent); font-weight: 500; margin: 18px 0 0; min-height: 1.2em; }

/* full-screen preview modal */
.tpl-modal { position: fixed; inset: 0; z-index: 90; display: none; }
/* The panel used to be absolutely centered inside a container with no overflow.
 * The phone frame alone is ~726px tall at 390px wide (aspect-ratio 390/844), so
 * with the caption and the pick button the panel ran ~878px against ~745px of
 * visible Safari viewport — and since nothing in the chain scrolled, the "Pick
 * this design" button was simply unreachable. As that button is the only way to
 * select a template, step 3 was a dead end on every phone. The modal is now the
 * scroller and the frame is capped to the viewport height. */
.tpl-modal.is-open { display: flex; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.tpl-modal-back { position: fixed; inset: 0; background: rgba(20,18,30,0.72); backdrop-filter: blur(6px); }
/* Vertical padding must stay SYMMETRIC. margin:auto centers the padded box, so a
 * heavier top pad (it was 72px top / 28px bottom, to reserve room for the close
 * button) pushes the visible content below true center — which is exactly the
 * off-centre look. The close button clears the panel on its own: it ends at
 * ~58px from the top, and the frame now starts at 64px. */
/* Width is the single driver: aspect-ratio derives the frame height from it, and
 * the caption + button inherit the same measure. Deriving the other way (width:auto
 * + max-height) does NOT narrow an aspect-ratio box — a block's auto width still
 * fills the parent, so max-height just squashes the phone out of proportion.
 * The third term budgets 288px of chrome out of the viewport height so the pick
 * button stays above the fold: 128px padding + 18 + 23 name + 44 blurb + 18 + 49
 * button, plus a few px of slack. (Below 760px tall the blurb hides, which just
 * buys extra room.) The 180px floor stops it collapsing on very short screens,
 * where the modal scrolls instead. */
.tpl-modal-panel {
  position: relative; margin: auto;
  width: min(340px, 86vw, max(180px, calc((100svh - 288px) * 390 / 844)));
  padding: calc(64px + env(safe-area-inset-top, 0px)) 0 calc(64px + env(safe-area-inset-bottom, 0px));
}
/* on short screens the two-line blurb is what pushes the button under; the name
 * alone identifies the design. */
@media (max-height: 760px) { .tpl-modal-cap .b { display: none; } }
.tpl-modal-panel .pf { box-shadow: 0 40px 90px -30px rgba(0,0,0,0.6); }
.tpl-modal-cap { text-align: center; color: #FFFFFF; margin-top: 18px; }
.tpl-modal-cap .k {
  font-family: var(--font-display); font-weight: 500; font-size: 0.68rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: #C9BFF5; margin-bottom: 5px;
}
.tpl-modal-cap .n { font-family: var(--font-serif); font-size: 1.2rem; }
.tpl-modal-cap .b { font-family: var(--font-body); font-size: 0.9rem; color: rgba(255,255,255,0.7); margin-top: 4px; }
.tpl-modal-pick { margin-top: 18px; display: flex; gap: 10px; justify-content: center; }
/* fixed (not absolute) so it stays pinned now that the modal scrolls; 44px min
 * target; the panel's top padding reserves room so it no longer sits on top of
 * the mockup's status bar. env() is 0 in mobile Safari, so the additive form
 * gives real clearance from the browser chrome rather than only helping in
 * standalone mode the way the old max(20px, env()) did. */
.tpl-modal-close { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 14px); right: 16px; z-index: 3; appearance: none; background: rgba(255,255,255,0.18); border: 0; color: #fff; width: 44px; height: 44px; border-radius: 50%; font-size: 1.4rem; line-height: 1; cursor: pointer; }

/* ============================================================ 10 · Gilt Ledger (from design file) */
.s-vault { background:#08080a; color:#e2e3e9; font-family:'Inter',sans-serif; --hi: rgba(255,255,255,0.35); } .st:has(+ .s-vault) { color:#9194a1; } .s-vault .vpad { padding:6cqw 7cqw 0; display:flex; flex-direction:column; flex:1; } .s-vault .vk { font-size:2.8cqw; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:#9194a1; } .s-vault .vbig { font-family:'Playfair Display', Charter, Georgia, serif; font-size:14.5cqw; font-weight:400; letter-spacing:0.01em; line-height:1; color:#ffffff; margin-top:2.4cqw; } .s-vault .vchg { display:flex; align-items:baseline; gap:1.6cqw; margin-top:3.4cqw; font-size:3.6cqw; } .s-vault .vchg .amt { color:#e2e3e9; font-weight:500; } .s-vault .vchg .arrow { color:#5e616e; font-size:2.6cqw; } .s-vault .vchg .ctx { color:#5e616e; font-weight:400; } .s-vault .vdiv { margin-top:4.6cqw; height:0.45cqw; border-radius:999px; background-image:linear-gradient(103deg, rgb(174,147,87), rgb(255,240,204) 40%, rgb(174,147,87) 70%, rgba(189,157,79,0)); box-shadow:0 0 1.2cqw rgba(204,145,102,0.3); } .s-vault .valloc { padding-top:3.6cqw; } .s-vault .vlabel { font-size:2.8cqw; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:#9194a1; margin-bottom:3.2cqw; } .s-vault .vbar { display:flex; height:2.8cqw; border-radius:999px; overflow:hidden; border:1px solid #1c1d22; background:#040406; gap:0.3cqw; } .s-vault .vbar span { height:100%; } .s-vault .seg1 { background-image:linear-gradient(103deg, rgb(174,147,87), rgb(255,240,204) 40%, rgb(174,147,87) 70%, rgba(189,157,79,0)); } .s-vault .seg2 { background:#8a6f45; } .s-vault .seg3 { background:#4c5361; } .s-vault .seg4 { background:#2a2d36; } .s-vault .vlegend { display:flex; flex-direction:column; gap:2.2cqw; margin-top:3.4cqw; }
.s-vault .vdot.dot1 { background-image:linear-gradient(103deg, rgb(174,147,87), rgb(255,240,204) 60%); }
.s-vault .vdot.dot2 { background:#8a6f45; }
.s-vault .vdot.dot3 { background:#4c5361; }
.s-vault .vdot.dot4 { background:#2a2d36; } .s-vault .vlrow { display:flex; align-items:center; justify-content:space-between; font-size:3.4cqw; color:#c7c9d1; } .s-vault .vlrow .lname { display:flex; align-items:center; gap:1.8cqw; } .s-vault .vlrow.accent .lname { color:#cc9166; } .s-vault .vdot { width:1.7cqw; height:1.7cqw; border-radius:999px; display:inline-block; } .s-vault .dot1 { background-image:linear-gradient(103deg, rgb(174,147,87), rgb(255,240,204) 40%, rgb(174,147,87) 70%, rgba(189,157,79,0)); } .s-vault .dot2 { background:#2e3038; } .s-vault .dot3 { background:#121317; border:1px solid #1c1d22; } .s-vault .dot4 { background:#464853; } .s-vault .vlrow .lpct { color:#5e616e; font-variant-numeric:tabular-nums; } .s-vault .vact { margin-top:auto; padding-top:3.6cqw; padding-bottom:3cqw; } .s-vault .varow { display:flex; align-items:center; justify-content:space-between; padding:2.6cqw 0; border-bottom:1px solid #1c1d22; } .s-vault .varow:last-child { border-bottom:none; } .s-vault .valeft { display:flex; align-items:center; gap:2.8cqw; } .s-vault .vicon { width:8cqw; height:8cqw; min-width:8cqw; border-radius:999px; border:1px solid #1c1d22; display:flex; align-items:center; justify-content:center; font-size:3cqw; font-weight:600; color:#acafb9; background:#040406; } .s-vault .vnames { display:flex; flex-direction:column; gap:0.7cqw; } .s-vault .vname { font-size:3.5cqw; color:#e2e3e9; font-weight:500; } .s-vault .vmeta { font-size:2.8cqw; color:#5e616e; } .s-vault .vamt { font-size:3.5cqw; color:#e2e3e9; font-weight:500; font-variant-numeric:tabular-nums; } .s-vault .vamt.neg { color:#acafb9; } .s-vault .tb { --tb-bg:transparent; --tb-line:#1c1d22; --tb-off:#9194a1; --tb-on:#ffffff; margin-top:3cqw; }

/* ============================================================ 11 · Vantage (from design file) */
.s-observatory { background: #ffffff; color: #091135; font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; --hi: rgba(9,17,53,0.32); } .st:has(+ .s-observatory) { color: #3a3a3a; } .s-observatory .ob-pad { padding: 6cqw 6.5cqw 0; display: flex; flex-direction: column; flex: 1; gap: 3cqw; } .s-observatory .ob-k { font-size: 3.1cqw; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: #36394a; } .s-observatory .ob-hero { display: flex; align-items: baseline; gap: 3cqw; margin-top: 0.5cqw; flex-wrap: wrap; } .s-observatory .ob-big { font-size: 18.5cqw; font-weight: 600; letter-spacing: 0.014em; line-height: 0.94; color: #091135; } .s-observatory .ob-big b { font-weight: 500; } .s-observatory .ob-delta { font-size: 3.4cqw; font-weight: 600; letter-spacing: 0.02em; color: #0f77ff; background: #f5f3ff; border-radius: 999px; padding: 1.2cqw 2.8cqw; white-space: nowrap; } .s-observatory .ob-sub { font-size: 3.6cqw; font-weight: 400; color: #36394a; line-height: 1.5; letter-spacing: 0.004em; max-width: 94%; } .s-observatory .ob-chartcard { margin-top: auto; background: #f5f3ff; border: 1px solid #e1e9f0; border-radius: 4.2cqw; padding: 4.2cqw 4.2cqw 3cqw; } .s-observatory .ob-chartrow { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2.5cqw; } .s-observatory .ob-chartlabel { font-size: 3cqw; font-weight: 500; color: #36394a; letter-spacing: 0.02em; text-transform: uppercase; } .s-observatory .ob-chartval { font-size: 3.4cqw; font-weight: 600; color: #127ee3; } .s-observatory .ob-svg { width: 100%; height: 18cqw; display: block; } .s-observatory .ob-chartx { display: flex; justify-content: space-between; margin-top: 1.6cqw; font-size: 2.6cqw; color: #b1bbcd; font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase; } .s-observatory .ob-stats { margin-top: auto; display: flex; gap: 2.4cqw; } .s-observatory .ob-stat { flex: 1; background: #ffffff; border: 1px solid #e1e9f0; border-radius: 3.2cqw; padding: 3.4cqw 2.8cqw; display: flex; flex-direction: column; gap: 1.6cqw; } .s-observatory .ob-statk { font-size: 2.6cqw; font-weight: 500; color: #36394a; letter-spacing: 0.01em; } .s-observatory .ob-statv { font-size: 4.6cqw; font-weight: 600; color: #091135; letter-spacing: 0.006em; } .s-observatory .ob-top { margin-top: auto; border-top: 1px solid #e1e9f0; padding: 3.4cqw 0 1cqw; } .s-observatory .ob-toph { font-size: 2.8cqw; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #36394a; margin-bottom: 2.4cqw; } .s-observatory .ob-toprow { display: flex; align-items: center; gap: 2.4cqw; padding: 2.4cqw 0; border-bottom: 1px solid #e1e9f0; } .s-observatory .ob-toprow:last-child { border-bottom: none; } .s-observatory .ob-topdot { width: 1.8cqw; height: 1.8cqw; border-radius: 50%; background: #b1bbcd; flex-shrink: 0; } .s-observatory .ob-topname { flex: 1; font-size: 3.2cqw; font-weight: 400; color: #091135; letter-spacing: 0.004em; line-height: 1.3; } .s-observatory .ob-topviews { font-size: 3.2cqw; font-weight: 600; color: #36394a; } .s-observatory .tb { --tb-bg: rgba(255,255,255,0.92); --tb-line: #e1e9f0; --tb-off: #b1bbcd; --tb-on: #0f77ff; }

/* ============================================================ 12 · Harvest (from design file) */
.s-greenhouse { background: #eef2e3; color: #043f2e; font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; --hi: rgba(4,63,46,0.35); } .st:has(+ .s-greenhouse) { color: #242423; } .s-greenhouse .vpad { padding: 6cqw 6cqw 0; display: flex; flex-direction: column; flex: 1; gap: 3.2cqw; } .s-greenhouse .gh-eyebrow { font-size: 2.9cqw; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: #2a6f2b; } .s-greenhouse .gh-head { font-family: 'Fraunces', Charter, Georgia, serif; font-size: 8.5cqw; font-weight: 400; letter-spacing: -0.02em; line-height: 1.05; color: #043f2e; margin-top: 0.6cqw; } .s-greenhouse .gh-hero { margin-top: 1cqw; background: #043f2e; border-radius: 4.1cqw; padding: 4.6cqw; display: flex; flex-direction: column; gap: 2.2cqw; } .s-greenhouse .gh-hero-eyebrow { font-size: 2.8cqw; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: #c8f169; } .s-greenhouse .gh-hero-num { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; font-size: 14cqw; font-weight: 400; letter-spacing: -0.02em; line-height: 0.95; color: #fcfcfc; } .s-greenhouse .gh-hero-num span { font-size: 0.5em; font-weight: 400; color: rgba(252,252,252,0.55); margin-left: 0.15em; } .s-greenhouse .gh-hero-sub { font-size: 3.4cqw; font-weight: 400; line-height: 1.35; color: rgba(252,252,252,0.78); } .s-greenhouse .gh-chart { margin-top: auto; } .s-greenhouse .gh-sec-eyebrow { font-size: 2.7cqw; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: #242423; margin-bottom: 2.4cqw; } .s-greenhouse .gh-bars { display: flex; align-items: flex-end; gap: 2.2cqw; } .s-greenhouse .gh-bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1.6cqw; } .s-greenhouse .gh-track { width: 100%; height: 10cqw; background: rgba(4,63,46,0.08); border-radius: 1cqw; display: flex; align-items: flex-end; overflow: hidden; } .s-greenhouse .gh-track i { display: block; width: 100%; background: #78c51c; border-radius: 1cqw; } .s-greenhouse .gh-bl { font-size: 2.6cqw; font-weight: 500; color: #5b6158; text-transform: uppercase; } .s-greenhouse .gh-list { margin-top: auto; } .s-greenhouse .gh-list-card { background: #fcfcfc; border-radius: 4.1cqw; padding: 1.2cqw 5cqw; border: 1px solid rgba(0,0,0,0.08); } .s-greenhouse .gh-row { display: flex; align-items: center; justify-content: space-between; padding: 2.8cqw 0; border-bottom: 1px solid rgba(0,0,0,0.08); gap: 2cqw; } .s-greenhouse .gh-row.last { border-bottom: none; } .s-greenhouse .gh-row-l { display: flex; flex-direction: column; } .s-greenhouse .gh-row-time { font-size: 2.6cqw; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: #2a6f2b; } .s-greenhouse .gh-row-title { font-size: 3.6cqw; font-weight: 500; color: #043f2e; margin-top: 0.6cqw; } .s-greenhouse .gh-tag { display: flex; align-items: center; gap: 1.3cqw; font-size: 3cqw; font-weight: 500; color: #242423; white-space: nowrap; } .s-greenhouse .gh-tag .dot { width: 1.8cqw; height: 1.8cqw; border-radius: 50%; background: transparent; border: 1.4px solid #8a9186; } .s-greenhouse .gh-tag .dot.on { background: #78c51c; border-color: #78c51c; } .s-greenhouse .gh-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 3cqw; padding-bottom: 1cqw; } .s-greenhouse .gh-foot-t { font-size: 3.8cqw; font-weight: 500; color: #043f2e; } .s-greenhouse .gh-foot-s { font-size: 2.9cqw; font-weight: 400; color: #2a6f2b; margin-top: 0.6cqw; } .s-greenhouse .gh-cta { background: #c8f169; color: #000000; border: none; border-radius: 1.03cqw; padding: 2.6cqw 4.6cqw; font-family: inherit; font-size: 3.2cqw; font-weight: 500; white-space: nowrap; } .s-greenhouse .tb { --tb-bg: #fcfcfc; --tb-line: rgba(0,0,0,0.1); --tb-off: #8a9186; --tb-on: #043f2e; }

/* ============================================================ 13 · Pulse Room (from design file) */
.s-controlroom { background: radial-gradient(120% 90% at 50% 0%, #06105a 0%, #00052e 46%, #00050f 100%); color: #ffffff; font-family: 'Inter', sans-serif; --hi: rgba(255,255,255,0.4); } .st:has(+ .s-controlroom) { color: #8a8a92; } .s-controlroom .vpad { padding: 6cqw 6.5cqw 0; display: flex; flex-direction: column; flex: 1; gap: 4cqw; } .s-controlroom .vtop { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; } .s-controlroom .vkicker { font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace; font-size: 2.5cqw; letter-spacing: 0.08em; color: #6b6b83; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .s-controlroom .vzone { display: flex; align-items: center; gap: 1.4cqw; font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace; font-size: 2.4cqw; letter-spacing: 0.07em; color: #afb4db; background: rgba(4,40,203,0.16); border: 1px solid rgba(4,40,203,0.45); padding: 1.6cqw 2.4cqw; border-radius: 1cqw; white-space: nowrap; } .s-controlroom .vzone-dot { width: 1.4cqw; height: 1.4cqw; min-width: 1.4cqw; border-radius: 50%; background: #0428cb; box-shadow: 0 0 2cqw 0.4cqw rgba(52,252,255,0.55); } .s-controlroom .vhr { margin-top: 3cqw; } .s-controlroom .vhr-num { font-weight: 300; font-size: 23cqw; line-height: 0.9; letter-spacing: -0.03em; color: #ffffff; text-shadow: 0 0 7cqw rgba(52,252,255,0.32), 0 0 1.6cqw rgba(4,40,203,0.65); } .s-controlroom .vhr-unit { font-size: 5.2cqw; font-weight: 400; color: #8185a0; letter-spacing: 0; margin-left: 1.2cqw; } .s-controlroom .vhr-sub { font-size: 3.3cqw; font-weight: 300; color: #6b6b83; margin-top: 1.6cqw; } /* time-in-zone, replacing the decorative "live trace" squiggle. WHOOP's screens
 * are dense readouts, and a fake ECG line in a glass box is the fitness-app
 * equivalent of lorem ipsum — it carries no information at all. */
.s-controlroom .vzones { margin-top: 4.4cqw; background: rgba(6,16,60,0.5); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid rgba(107,107,131,0.35); border-radius: 2cqw; padding: 4cqw 4cqw 3cqw; }
.s-controlroom .vzones-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3.2cqw; }
.s-controlroom .vtrace-label { display: flex; align-items: center; gap: 1.6cqw; font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace; font-size: 2.4cqw; letter-spacing: 0.08em; color: #6b6b83; }
.s-controlroom .vtrace-range { font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace; font-size: 2.2cqw; letter-spacing: 0.05em; color: #4f5166; }
.s-controlroom .vpulse { width: 1.4cqw; height: 1.4cqw; border-radius: 50%; background: #34fcff; box-shadow: 0 0 0 0.7cqw rgba(52,252,255,0.18); }
.s-controlroom .vzrow { display: flex; align-items: center; gap: 2.4cqw; padding: 1.5cqw 0; }
.s-controlroom .vzk { flex: 0 0 5.4cqw; font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace; font-size: 2.5cqw; font-weight: 500; color: #6b6b83; }
.s-controlroom .vzn { flex: 0 0 19cqw; font-size: 2.8cqw; font-weight: 500; color: #9aa0bd; }
.s-controlroom .vzbar { flex: 1; height: 1.8cqw; border-radius: 999px; background: rgba(255,255,255,0.07); overflow: hidden; }
.s-controlroom .vzbar i { display: block; height: 100%; border-radius: 999px; }
.s-controlroom .vzp { flex: 0 0 8cqw; text-align: right; font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace; font-size: 2.5cqw; color: #6b6b83; }
.s-controlroom .vzrow.on .vzn { color: #fff; font-weight: 600; }
.s-controlroom .vzrow.on .vzp { color: #34fcff; }
/* live HR chart. The old version was a decorative ECG squiggle inside a glass
 * card; this is the same signal drawn as a real time-series with a stated range,
 * which is what a running app actually shows. */
.s-controlroom .vchart { margin-top: 4.4cqw; }
.s-controlroom .vchart-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 2.4cqw; }
.s-controlroom .vchart svg { width: 100%; height: 19cqw; display: block; }
.s-controlroom .vchart-x { display: flex; justify-content: space-between; margin-top: 1.8cqw; font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace; font-size: 2.2cqw; color: #4f5166; }


/* restored: the stat grid and tab bar were collateral of the vtrace removal */
.s-controlroom .vgrid { margin-top: auto; margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 3cqw; padding-bottom: 4cqw; }
.s-controlroom .vstat { background: rgba(6,16,60,0.4); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(107,107,131,0.25); border-radius: 2cqw; padding: 3.6cqw 4cqw; display: flex; flex-direction: column; gap: 1.8cqw; }
.s-controlroom .vstat-l { font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace; font-size: 2.2cqw; letter-spacing: 0.08em; color: #6b6b83; }
.s-controlroom .vstat-v { font-weight: 300; font-size: 6.2cqw; letter-spacing: -0.02em; color: #ffffff; }
.s-controlroom .vstat-v i { font-style: normal; font-size: 3.1cqw; color: #8185a0; margin-left: 0.6cqw; }
.s-controlroom .tb { --tb-bg: transparent; --tb-line: rgba(107,107,131,0.22); --tb-off: #6b6b83; --tb-on: #ffffff; }


/* ============================================================ 14 · Quiet Hours
 * Reference bar: Headspace light mode. Bone-paper ground, one blurred warm wash
 * as the only ornament, high-contrast display serif against a plain sans for
 * data. The amber accent replaces the old dusk-pink: pink read cosmetic, amber
 * reads like the light in the room, which is the feeling the app is selling. */
.s-poetry { position: relative; overflow: hidden; background: #fbfaf7; color: #212123; font-family: 'Playfair Display', Charter, Georgia, serif; --hi: rgba(33,33,35,0.32); }
.st:has(+ .s-poetry) { color: #4a4a4a; }
.s-poetry .mpad { position: relative; z-index: 1; padding: 6cqw 7cqw 0; display: flex; flex-direction: column; flex: 1; }
.s-poetry .mwash { position: absolute; top: -22cqw; right: -26cqw; width: 76cqw; height: 76cqw; border-radius: 50%; pointer-events: none; z-index: 0;
  background: linear-gradient(120deg, rgba(255,150,0,0.34) 0%, rgba(246,196,83,0.30) 100%); filter: blur(16cqw); }
.s-poetry .mtop { position: relative; z-index: 1; }
.s-poetry .mk { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; font-size: 2.9cqw; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #8a827a; }
.s-poetry .mhead { font-weight: 500; font-size: 9.6cqw; line-height: 1.08; letter-spacing: -0.02em; color: #212123; margin-top: 2.6cqw; max-width: 82cqw; }
.s-poetry .msub { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; font-weight: 400; font-size: 3.4cqw; line-height: 1.5; color: #6a635c; margin-top: 2.6cqw; max-width: 76cqw; }

.s-poetry .mcard { margin-top: 5cqw; position: relative; z-index: 1; background: #ffffff; border: 1px solid #ebe6de; border-radius: 5cqw; padding: 4.4cqw;
  display: flex; align-items: center; justify-content: space-between; gap: 4cqw; box-shadow: 0 1.4cqw 3.4cqw -1.4cqw rgba(90,70,40,0.18); }
.s-poetry .mcard-label { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; font-size: 2.5cqw; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #b09a76; }
.s-poetry .mcard-title { font-weight: 500; font-size: 5.4cqw; letter-spacing: -0.01em; color: #212123; margin-top: 1.4cqw; }
.s-poetry .mcard-meta { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; font-weight: 400; font-size: 3cqw; color: #8a827a; margin-top: 1cqw; }
.s-poetry .mdot { color: #c4bcb2; }
.s-poetry .mplay { flex: 0 0 auto; width: 13cqw; height: 13cqw; border-radius: 50%; background: #1b1917; border: none; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 0.9cqw rgba(255,150,0,0.18), 0 0 3.4cqw 0.6cqw rgba(246,196,83,0.24); }
.s-poetry .mplay svg { width: 4.4cqw; height: 4.4cqw; }

/* this week — the practice log. Seven bars is the smallest honest picture of
 * consistency, which is the only metric a meditation app really has. */
.s-poetry .mweek { position: relative; z-index: 1; margin-top: 5.6cqw; }
.s-poetry .mweek-h { display: flex; align-items: baseline; justify-content: space-between; }
.s-poetry .mweek-k { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; font-size: 2.7cqw; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #8a827a; }
.s-poetry .mweek-t { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; font-size: 3.1cqw; font-weight: 600; color: #212123; }
.s-poetry .mweek-row { display: flex; align-items: flex-end; gap: 2.2cqw; height: 20cqw; margin-top: 2.6cqw; }
.s-poetry .mbar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 1.6cqw; }
.s-poetry .mbar i { width: 100%; border-radius: 1.4cqw; background: #e6ded1; }
.s-poetry .mbar.on i { background: linear-gradient(180deg, #ffab2e 0%, #f08c14 100%); }
.s-poetry .mbar.off i { background: #f0ece5; }
.s-poetry .mbar span { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; font-size: 2.4cqw; font-weight: 600; color: #b3aaa0; }
.s-poetry .mbar.on span { color: #212123; }

.s-poetry .mup { position: relative; z-index: 1; margin-top: 5cqw; }
.s-poetry .mup-k { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; font-size: 2.7cqw; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #8a827a; }
.s-poetry .mup-row { display: flex; align-items: baseline; justify-content: space-between; padding: 2.8cqw 0; border-bottom: 1px solid #eee9e1; }
.s-poetry .mup-row:last-child { border-bottom: 0; }
.s-poetry .mup-n { font-size: 4.2cqw; font-weight: 500; color: #212123; }
.s-poetry .mup-m { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; font-size: 3cqw; color: #8a827a; }

.s-poetry .mstats { margin-top: auto; position: relative; z-index: 1; display: flex; align-items: center; padding: 4.4cqw 0; border-top: 1px solid #eee9e1; }
.s-poetry .mstat { flex: 1; }
.s-poetry .mstat-num { font-weight: 500; font-size: 7.6cqw; letter-spacing: -0.01em; color: #212123; }
.s-poetry .mstat-num span { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; font-weight: 400; font-size: 2.8cqw; color: #8a827a; margin-left: 1.2cqw; }
.s-poetry .mstat-label { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; font-weight: 400; font-size: 2.8cqw; color: #8a827a; margin-top: 0.8cqw; }
.s-poetry .msep { width: 1px; align-self: stretch; background: #eee9e1; margin: 0 5cqw; }
.s-poetry .tb { --tb-bg: transparent; --tb-line: #eee9e1; --tb-off: #b3aaa0; --tb-on: #212123; }

/* ============================================================ 15 · Ironleaf (from design file) */
.s-slate { background: #040404; color: #ffffff; font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; --hi: rgba(255,255,255,0.4); } .st:has(+ .s-slate) { color: #8a8a92; } .s-slate .vpad { padding: 7cqw 6.5cqw 5cqw; display: flex; flex-direction: column; flex: 1; } .s-slate .vhead { display: flex; flex-direction: column; gap: 1.5cqw; } .s-slate .vk { font-size: 3.1cqw; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #6e797a; } .s-slate .vtitle { font-size: 13.5cqw; font-weight: 800; letter-spacing: -0.02em; line-height: 1.02; color: #ffffff; margin-top: 0.5cqw; } .s-slate .vsub { font-size: 3.6cqw; font-weight: 400; color: #6e797a; line-height: 1.45; margin-top: 1cqw; } .s-slate .vchart { margin-top: auto; } .s-slate .vchart-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 3.5cqw; } .s-slate .vval { font-size: 4.6cqw; font-weight: 800; color: #ffffff; } .s-slate .vval i { font-style: normal; font-size: 3cqw; font-weight: 400; color: #6e797a; margin-left: 0.5cqw; } .s-slate .vbars { display: flex; align-items: flex-end; gap: 2.4cqw; height: 19cqw; } .s-slate .vbarcol { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; gap: 2cqw; } .s-slate .vbar { width: 100%; background: rgba(255,255,255,0.09); border-radius: 1.5cqw 1.5cqw 0 0; min-height: 1cqw; } .s-slate .vbarcol.on .vbar { background: #98e58e; } .s-slate .vbarcol span { font-size: 2.7cqw; color: #565a5a; font-weight: 700; } .s-slate .vbarcol.on span { color: #98e58e; } .s-slate .vlist { margin-top: auto; } .s-slate .vlist-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2cqw; } .s-slate .vpill { background: #98e58e; color: #040404; font-size: 3cqw; font-weight: 700; padding: 1.2cqw 3cqw; border-radius: 6.2cqw; } .s-slate .vex { display: flex; align-items: center; gap: 3.5cqw; padding: 3.2cqw 0; border-bottom: 1px solid rgba(255,255,255,0.08); } .s-slate .vex:last-child { border-bottom: none; } .s-slate .vdot { width: 5.6cqw; height: 5.6cqw; border-radius: 50%; border: 1.5px solid #3a3f3f; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 3cqw; color: transparent; box-sizing: border-box; } .s-slate .vdot.done { background: #98e58e; border-color: #98e58e; color: #040404; font-weight: 800; } .s-slate .vexname { display: flex; flex-direction: column; gap: 0.8cqw; font-size: 4cqw; font-weight: 700; color: #ffffff; } .s-slate .vexname i { font-style: normal; font-size: 3.2cqw; font-weight: 400; color: #6e797a; } .s-slate .vcta { margin-top: auto; width: 100%; background: #98e58e; color: #040404; border: none; border-radius: 1.6cqw; padding: 4.6cqw 6cqw; font-size: 4.2cqw; font-weight: 700; font-family: inherit; letter-spacing: 0.01em; } .s-slate .tb { --tb-bg: transparent; --tb-line: rgba(255,255,255,0.08); --tb-off: #565a5a; --tb-on: #98e58e; }

/* ============================================================ 16 · Firstlight (from design file) */
.s-dawn{background:#ffffff;color:#18181b;font-family:'Inter', ui-sans-serif, system-ui, sans-serif;--hi: rgba(0,0,0,0.25);} .st:has(+ .s-dawn){color:#e3ecff;} .s-dawn .dwrap{flex:1;display:flex;flex-direction:column;} .s-dawn .dhero{position:relative;overflow:hidden;padding:7cqw 7cqw 10cqw;background:radial-gradient(130% 100% at 50% -10%, #8fc0f5 0%, #3f79e8 38%, #123fb0 68%, #022c70 100%);} .s-dawn .dhero::after{content:'';position:absolute;left:0;right:0;bottom:0;height:62%;background:linear-gradient(to bottom, rgba(243,248,255,0) 0%, #f3f8ff 92%);pointer-events:none;} .s-dawn .dridge{position:absolute;left:0;right:0;bottom:0;width:100%;height:11cqw;display:block;} .s-dawn .dhero-top{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;} .s-dawn .dkicker{font-size:2.7cqw;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:rgba(255,255,255,0.72);} .s-dawn .dnew{font-size:2.7cqw;font-weight:500;color:rgba(255,255,255,0.85);} .s-dawn .dgreet{position:relative;z-index:2;font-family:'Fraunces', Charter, Georgia, serif;font-weight:500;font-size:10.5cqw;line-height:1.04;letter-spacing:-0.012em;color:#ffffff;margin-top:5cqw;} .s-dawn .dsub{position:relative;z-index:2;font-size:3.5cqw;font-weight:400;line-height:1.45;color:rgba(255,255,255,0.82);margin-top:3cqw;max-width:78%;} .s-dawn .dbody{flex:1;min-height:0;display:flex;flex-direction:column;padding:5cqw 6cqw 4cqw;background:#f3f8ff;} .s-dawn .dcard{position:relative;z-index:2;background:#ffffff;border:1px solid #e4e4e7;border-radius:5cqw;padding:5cqw;} .s-dawn .dcard-head{display:flex;align-items:center;gap:2.4cqw;} .s-dawn .davatar{width:6.4cqw;height:6.4cqw;flex-shrink:0;}
/* The coach's own turn, right-aligned and tinted — a coach screen with a single
 * bubble and half a screen of white below it reads as an empty state, not a
 * conversation. */
.s-dawn .dmine{align-self:flex-end;max-width:78%;margin-top:2.4cqw;background:#3c83f6;color:#fff;font-size:3.3cqw;line-height:1.42;padding:3cqw 3.6cqw;border-radius:4cqw 4cqw 1.2cqw 4cqw;box-shadow:0 1.4cqw 3cqw -1cqw rgba(60,131,246,0.5);}
.s-dawn .dact{display:flex;gap:2cqw;margin-top:3.2cqw;flex-wrap:wrap;}
.s-dawn .dact-b{font-size:2.9cqw;font-weight:600;color:#fff;background:#0f172a;border-radius:999px;padding:1.8cqw 3.4cqw;}
.s-dawn .dact-g{font-size:2.9cqw;font-weight:600;color:#3c83f6;background:#eaf2ff;border-radius:999px;padding:1.8cqw 3.4cqw;} .s-dawn .dcard-label{font-size:2.8cqw;font-weight:500;color:#777a88;} .s-dawn .dcard-text{margin-top:3cqw;font-size:3.9cqw;font-weight:400;line-height:1.48;color:#18181b;} .s-dawn .dchips{margin-top:auto;display:flex;gap:2.4cqw;flex-wrap:wrap;padding-top:5cqw;} .s-dawn .dchip{font-size:3cqw;font-weight:500;color:#18181b;background:#edeef2;border:1px solid #e4e4e7;border-radius:999px;padding:2.6cqw 4.2cqw;} .s-dawn .dinput{margin-top:auto;display:flex;align-items:center;justify-content:space-between;background:#ffffff;border:1px solid #e4e4e7;border-radius:999px;padding:2.6cqw 2.6cqw 2.6cqw 5cqw;box-shadow:0 1.2cqw 3.5cqw rgba(2,44,112,0.08);} .s-dawn .dph{font-size:3.4cqw;font-weight:400;color:#afb3c4;} .s-dawn .dsend{width:8cqw;height:8cqw;border-radius:50%;background:#3c83f6;color:#ffffff;font-size:3.6cqw;font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0;} .s-dawn .tb{--tb-bg: transparent;--tb-line: #e4e4e7;--tb-off: #afb3c4;--tb-on: #3c83f6;}

/* ============================================================ 17 · Coastline (from design file) */
.s-broadcast { background: #ffffff; color: #151e1b; font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; --hi: rgba(21,30,27,0.35); }
.st:has(+ .s-broadcast) { color: #3a3a3a; }
.s-broadcast .bpad { padding: 6.5cqw 7cqw 3cqw; display: flex; flex-direction: column; flex: 1; }
.s-broadcast .btop { display: flex; align-items: center; gap: 1.6cqw; }
.s-broadcast .bch { font-size: 3cqw; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #214538; }
.s-broadcast .bdot { color: #b7c2bc; font-size: 3cqw; }
/* 13cqw, not 16.5: at the old size a 9-character word measured wider than the
 * screen and the headline was clipped mid-word on every render. */
.s-broadcast .btitle { font-family: 'Playfair Display', Charter, Georgia, serif; font-weight: 600; font-size: 13cqw; line-height: 0.94; letter-spacing: -0.004em; text-transform: uppercase; color: #151e1b; margin-top: 2.6cqw; }
.s-broadcast .bsub { font-size: 3.6cqw; font-weight: 400; color: #4d4d4f; line-height: 1.45; margin-top: 3cqw; max-width: 92%; }
.s-broadcast .bwavewrap { margin-top: auto; padding-top: 6cqw; }
.s-broadcast .bwave svg { width: 100%; height: 13cqw; display: block; }
.s-broadcast .btime { display: flex; justify-content: space-between; margin-top: 2.2cqw; font-size: 3cqw; font-weight: 500; color: #4d4d4f; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.s-broadcast .bctrl { margin-top: auto; padding-top: 6cqw; display: flex; align-items: center; justify-content: center; gap: 7cqw; }
.s-broadcast .bside { position: relative; width: 11cqw; height: 11cqw; border: none; background: none; padding: 0; display: flex; align-items: center; justify-content: center; }
.s-broadcast .bside svg { width: 100%; height: 100%; }
.s-broadcast .bside b { position: absolute; font-size: 2.3cqw; font-weight: 600; color: #214538; }
.s-broadcast .bplay { width: 18cqw; height: 18cqw; border-radius: 999px; background: #214538; border: none; display: flex; align-items: center; justify-content: center; box-shadow: 0 2.4cqw 3.6cqw -1.4cqw rgba(33,69,56,0.55); }
.s-broadcast .bplay svg { width: 40%; height: 40%; margin-left: 1.2cqw; }
.s-broadcast .bnext { margin-top: auto; padding-top: 6.5cqw; }
.s-broadcast .bnk { font-size: 2.7cqw; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #4d4d4f; margin-bottom: 2.6cqw; }
.s-broadcast .bnrow { display: flex; align-items: center; gap: 3.2cqw; padding: 2.6cqw 0; border-top: 1px solid #e4e5e6; }
/* distinct artwork per show. Three copies of the same mic glyph read as a
 * placeholder set; every real podcast client shows the actual cover. */
.s-broadcast .bnart { width: 10.5cqw; height: 10.5cqw; border-radius: 2.2cqw; flex-shrink: 0; }
.s-broadcast .bnbody { flex: 1; min-width: 0; }
.s-broadcast .bnt { font-size: 3.5cqw; font-weight: 600; color: #151e1b; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-broadcast .bnm { font-size: 2.9cqw; font-weight: 400; color: #4d4d4f; margin-top: 0.8cqw; }
.s-broadcast .bnn { font-size: 3cqw; font-weight: 500; color: #b7c2bc; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.s-broadcast .tb { --tb-bg: #ffffff; --tb-line: #e4e5e6; --tb-off: #9a9a96; --tb-on: #214538; }

/* ============================================================ 18 · Marble (from design file) */
.s-marble { background:#f8f9fb; color:#0b3558; font-family:'Space Grotesk', 'Inter', sans-serif; --hi: rgba(11,53,88,0.35); } .st:has(+ .s-marble) { color:#0b3558; } .s-marble .mpad { padding:6cqw 6cqw 5cqw; display:flex; flex-direction:column; flex:1; gap:4cqw; } .s-marble .mtop { display:flex; flex-direction:column; gap:1cqw; } .s-marble .mgreet { font-size:3.4cqw; font-weight:500; color:#476788; } .s-marble .mdate { font-size:7cqw; font-weight:700; letter-spacing:-0.02em; color:#0b3558; } .s-marble .mnext { background:#ffffff; border-radius:6.2cqw; padding:5.5cqw 5.5cqw 5cqw; box-shadow: rgba(71,103,136,0.15) 0 1cqw 1.3cqw, rgba(71,103,136,0.1) 0 2cqw 3.8cqw, rgba(71,103,136,0.14) 0 5cqw 8cqw; } .s-marble .mnext-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:3.5cqw; } .s-marble .mnext-badge { background:#e6f0ff; color:#004eba; font-size:2.9cqw; font-weight:600; letter-spacing:0.02em; border-radius:999px; padding:1cqw 2.6cqw; } .s-marble .mnext-dur { font-size:3cqw; font-weight:500; color:#a6bbd1; } .s-marble .mnext-body { display:flex; align-items:center; gap:3.5cqw; } .s-marble .mnext-avatar { width:12cqw; height:12cqw; border-radius:50%; background:#0b3558; color:#ffffff; display:flex; align-items:center; justify-content:center; font-size:4.4cqw; font-weight:600; flex-shrink:0; } .s-marble .mnext-info { display:flex; flex-direction:column; gap:0.8cqw; } .s-marble .mnext-name { font-size:5cqw; font-weight:700; color:#0b3558; } .s-marble .mnext-type { font-size:3.4cqw; font-weight:400; color:#476788; } .s-marble .mnext-time { margin-top:4.5cqw; font-size:10cqw; font-weight:700; letter-spacing:-0.03em; color:#0b3558; line-height:1; } .s-marble .mnext-time span { color:#a6bbd1; font-weight:400; font-size:6cqw; margin:0 1.2cqw; } .s-marble .mnext-actions { display:flex; gap:2.6cqw; margin-top:4.5cqw; } .s-marble .mjoin { flex:1; background:#006bff; color:#ffffff; border:none; border-radius:2.1cqw; padding:3.2cqw 0; font-size:3.8cqw; font-weight:600; font-family:inherit; } .s-marble .mresched { flex:1; background:transparent; color:#0b3558; border:1px solid #d4e0ed; border-radius:2.1cqw; padding:3.2cqw 0; font-size:3.8cqw; font-weight:600; font-family:inherit; } .s-marble .mstats { margin-top:auto; display:flex; align-items:center; justify-content:space-between; padding:3.5cqw 1cqw; background:#ffffff; border-radius:4.1cqw; border:1px solid #d4e0ed; } .s-marble .mstat { flex:1; display:flex; flex-direction:column; align-items:center; gap:0.6cqw; } .s-marble .mstat-n { font-size:5.4cqw; font-weight:700; color:#0b3558; } .s-marble .mstat-l { font-size:2.5cqw; font-weight:600; text-transform:uppercase; letter-spacing:0.04em; color:#476788; } .s-marble .mstat-div { width:1px; height:7cqw; background:#d4e0ed; } .s-marble .mday-wrap { margin-top:auto; } .s-marble .msec-head { font-size:2.9cqw; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:#476788; margin-bottom:2.6cqw; } .s-marble .mday { display:flex; gap:1.4cqw; } .s-marble .mday-i { flex:1; display:flex; flex-direction:column; align-items:center; gap:1cqw; padding:2.6cqw 0; border-radius:3.2cqw; background:#ffffff; border:1px solid #d4e0ed; } .s-marble .mday-i.on { background:#006bff; border-color:#006bff; } .s-marble .mday-d { font-size:2.6cqw; font-weight:500; text-transform:uppercase; color:#a6bbd1; } .s-marble .mday-i.on .mday-d { color:rgba(255,255,255,0.75); } .s-marble .mday-n { font-size:4cqw; font-weight:700; color:#0b3558; } .s-marble .mday-i.on .mday-n { color:#ffffff; } .s-marble .mday-i i { width:1cqw; height:1cqw; border-radius:999px; background:#006bff; display:block; } .s-marble .mday-i.on i { background:#ffffff; } .s-marble .mslots-wrap { margin-top:auto; } .s-marble .mslots { display:flex; flex-wrap:wrap; gap:2.4cqw; } .s-marble .mslot { padding:2.6cqw 4.2cqw; border-radius:999px; border:1px solid #d4e0ed; background:#ffffff; color:#0b3558; font-size:3.4cqw; font-weight:600; } .s-marble .mslot.on { background:#006bff; border-color:#006bff; color:#ffffff; } .s-marble .mbook { width:100%; background:#006bff; color:#ffffff; border:none; border-radius:2.1cqw; padding:4.2cqw 0; font-size:4.4cqw; font-weight:600; font-family:inherit; box-shadow: rgba(71,103,136,0.12) 0 1cqw 1.3cqw, rgba(71,103,136,0.1) 0 2cqw 3.8cqw, rgba(0,107,255,0.18) 0 3cqw 6cqw; } .s-marble .tb { --tb-bg: transparent; --tb-line:#d4e0ed; --tb-off:#a6bbd1; --tb-on:#006bff; }

/* ============================================================ 19 · Aperture (from design file) */
.s-curator { background: #050505; color: #fdfdfd; font-family: 'Inter', sans-serif; --hi: rgba(255,255,255,0.4); } .st:has(+ .s-curator) { color: #a3a3a3; } .s-curator .vpad { padding: 6cqw 6cqw 0; display: flex; flex-direction: column; flex: 1; } .s-curator .ctop { display: flex; align-items: flex-start; justify-content: space-between; gap: 3cqw; } .s-curator .ck { font-size: 3cqw; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: #737373; } .s-curator .ctitle { font-size: 9cqw; font-weight: 500; letter-spacing: -0.01em; line-height: 1.06; color: #fdfdfd; margin-top: 1.4cqw; } .s-curator .cadd { width: 9cqw; height: 9cqw; min-width: 9cqw; border-radius: 9999px; background: #1500ff; color: #fdfdfd; border: none; font-size: 5cqw; font-weight: 400; line-height: 1; display: flex; align-items: center; justify-content: center; padding: 0; } .s-curator .cmeta { font-size: 3.2cqw; font-weight: 400; color: #a3a3a3; margin-top: 2.4cqw; } .s-curator .cdot { color: #737373; } .s-curator .cgrid { margin-top: 5cqw; flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, 1fr); gap: 1.6cqw; } .s-curator .ctile { border-radius: 3.6cqw; position: relative; background-size: cover; } .s-curator .t1 { grid-column: 1 / 3; grid-row: 1 / 3; } .s-curator .t2 { grid-column: 3 / 4; grid-row: 1 / 2; } .s-curator .t3 { grid-column: 3 / 4; grid-row: 2 / 3; } .s-curator .t4 { grid-column: 1 / 2; grid-row: 3 / 4; } .s-curator .t5 { grid-column: 2 / 3; grid-row: 3 / 4; } .s-curator .t6 { grid-column: 3 / 4; grid-row: 3 / 5; } .s-curator .t7 { grid-column: 1 / 2; grid-row: 4 / 5; } .s-curator .t8 { grid-column: 2 / 3; grid-row: 4 / 5; } .s-curator .ctag { position: absolute; left: 3cqw; bottom: 3cqw; padding: 1.2cqw 2.6cqw; border-radius: 9999px; background: rgba(5,5,5,0.55); color: #fdfdfd; font-size: 2.4cqw; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; } .s-curator .cfoot { margin-top: 4cqw; padding: 4cqw 0 4cqw; border-top: 1px solid #2f2f2f; display: flex; align-items: center; justify-content: space-between; } .s-curator .cfoot .l { font-size: 3.2cqw; font-weight: 400; color: #a3a3a3; } .s-curator .cfoot .r { font-size: 3.2cqw; font-weight: 400; color: #737373; } .s-curator .tb { --tb-bg: transparent; --tb-line: #2f2f2f; --tb-off: #737373; --tb-on: #fdfdfd; }
/* Aperture tiles are mesh art, not flat gradients — a curation app whose grid is
 * eight two-stop linear-gradients is the clearest "no real content" tell in the
 * set. The featured cell wraps the art so the tag and attribution can sit above
 * the art's own vignette layer. */
.s-curator .cwrap { position: relative; border-radius: 3.6cqw; overflow: hidden; }
.s-curator .cwrap.t1 { grid-column: 1 / 3; grid-row: 1 / 3; }
.s-curator .cwrap .ctile { position: absolute; inset: 0; border-radius: 0; }
.s-curator .ctag, .s-curator .cby { z-index: 6; }
.s-curator .cby { position: absolute; right: 3.2cqw; bottom: 3.4cqw; font-size: 2.4cqw; font-weight: 500; letter-spacing: 0.02em; color: rgba(255,255,255,0.76); text-shadow: 0 1px 3px rgba(0,0,0,0.5); }


/* ============================================================ 20 · Almanac (from design file) */
.s-fieldjournal { background:#faf5f1; color:#0e0f0a; font-family:'Space Grotesk', 'Inter', sans-serif; --hi: rgba(14,15,10,0.32); } .st:has(+ .s-fieldjournal) { color:#3a3a3a; } .s-fieldjournal .fjpad { padding:6cqw 7cqw 2cqw; display:flex; flex-direction:column; flex:1; gap:3.6cqw; } .s-fieldjournal .fj-kicker { font-size:2.9cqw; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; color:rgba(14,15,10,0.45); } .s-fieldjournal .fj-head { font-family:'Playfair Display', Charter, Georgia, serif; font-weight:200; font-size:10.5cqw; line-height:0.94; letter-spacing:-0.03em; color:#0e0f0a; } .s-fieldjournal .fj-em { position:relative; font-style:italic; display:inline-block; } .s-fieldjournal .fj-u { position:absolute; left:-2%; bottom:-0.16em; width:104%; height:0.22em; overflow:visible; } .s-fieldjournal .fj-group { margin-top:auto; display:flex; flex-direction:column; gap:3.2cqw; } .s-fieldjournal .fj-check { background:#3d4128; border-radius:6.2cqw; padding:4.4cqw 5.5cqw; display:flex; flex-direction:column; gap:3cqw; } .s-fieldjournal .fj-check-top { display:flex; align-items:center; justify-content:space-between; } .s-fieldjournal .fj-clabel { font-size:2.7cqw; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; color:rgba(254,255,250,0.55); } .s-fieldjournal .fj-streak { font-size:2.7cqw; font-weight:400; color:rgba(254,255,250,0.55); } .s-fieldjournal .fj-prompt { font-size:4.4cqw; font-weight:400; line-height:1.35; color:#fefffa; } .s-fieldjournal .fj-moods { display:flex; flex-wrap:wrap; gap:1.8cqw; } .s-fieldjournal .fj-mood { font-size:3.1cqw; font-weight:500; padding:2cqw 3.4cqw; border-radius:999px; border:1px solid rgba(254,255,250,0.22); color:rgba(254,255,250,0.75); } .s-fieldjournal .fj-mood.on { background:#e1f079; border-color:#e1f079; color:#0e0f0a; } .s-fieldjournal .fj-cta { width:100%; background:#de7653; color:#ffffff; border:none; border-radius:2.6cqw; padding:4cqw 0; font-size:4cqw; font-weight:400; font-family:inherit; } .s-fieldjournal .fj-week { margin-top:auto; display:flex; flex-direction:column; gap:0; } .s-fieldjournal .fj-week-title { font-family:'Playfair Display', Charter, Georgia, serif; font-weight:300; font-size:5.6cqw; letter-spacing:-0.02em; color:#0e0f0a; margin-bottom:2.6cqw; } .s-fieldjournal .fj-row { display:flex; align-items:center; gap:4cqw; padding:2.4cqw 0; border-bottom:1px solid rgba(14,15,10,0.1); } .s-fieldjournal .fj-row-l { display:flex; flex-direction:column; gap:0.8cqw; width:15cqw; flex-shrink:0; } .s-fieldjournal .fj-day { font-size:3cqw; font-weight:500; text-transform:uppercase; letter-spacing:0.04em; color:rgba(14,15,10,0.45); } .s-fieldjournal .fj-mtag { font-size:3.4cqw; font-weight:500; color:#0e0f0a; } .s-fieldjournal .fj-row-r { font-size:3.6cqw; font-weight:400; line-height:1.35; color:rgba(14,15,10,0.72); } .s-fieldjournal .fj-insight { margin-top:auto; background:#e5e1d6; border-radius:6.2cqw; padding:3.6cqw 5cqw; display:flex; flex-direction:column; gap:2cqw; } .s-fieldjournal .fj-badge { align-self:flex-start; font-size:2.6cqw; font-weight:500; letter-spacing:0.1em; background:#e1f079; color:#0e0f0a; padding:1.2cqw 2.8cqw; border-radius:4.6cqw; } .s-fieldjournal .fj-insight-txt { font-size:3.6cqw; font-weight:400; line-height:1.4; color:#0e0f0a; } .s-fieldjournal .tb { --tb-bg: transparent; --tb-line: rgba(14,15,10,0.12); --tb-off: rgba(14,15,10,0.4); --tb-on: #de7653; }

/* ============================================================ 21 · Bloomwork (from design file) */
.s-atelier { background: #f9fbf2; color: #130e30; font-family: 'Inter', ui-sans-serif, sans-serif; --hi: rgba(19,14,48,0.35); }
.st:has(+ .s-atelier) { color: #3a3a3a; }
.s-atelier .apad { position: relative; padding: 6.2cqw 6.5cqw 0; display: flex; flex-direction: column; flex: 1; gap: 4.4cqw; overflow: hidden; }

.s-atelier .ablobs { position: absolute; inset: -6cqw -8cqw auto -8cqw; height: 46cqw; z-index: 0; pointer-events: none; }
.s-atelier .ablob { position: absolute; display: block; }
.s-atelier .ab-moss { top: -10cqw; left: -9cqw; width: 46cqw; height: 40cqw; background: #59e25d; opacity: 0.4; border-radius: 62% 38% 55% 45% / 48% 60% 40% 52%; }
.s-atelier .ab-fuchsia { top: -6cqw; right: -12cqw; width: 40cqw; height: 36cqw; background: #e261e5; opacity: 0.34; border-radius: 45% 55% 60% 40% / 55% 45% 55% 45%; }
.s-atelier .ab-yellow { top: 18cqw; left: 24cqw; width: 30cqw; height: 26cqw; background: #ffe228; opacity: 0.55; border-radius: 55% 45% 40% 60% / 60% 40% 60% 40%; }

.s-atelier .ahead { position: relative; z-index: 1; }
.s-atelier .akicker { font-family: 'Inter', sans-serif; font-size: 3cqw; font-weight: 500; letter-spacing: -0.01em; text-transform: uppercase; color: #5f5c6e; margin-bottom: 2.4cqw; }
.s-atelier .atitle { font-family: 'Fraunces', Charter, Georgia, serif; font-size: 12.6cqw; font-weight: 700; letter-spacing: -0.01em; line-height: 1.02; color: #130e30; }

.s-atelier .aprog { position: relative; z-index: 1; margin-top: auto; }
.s-atelier .aprow { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 2.2cqw; }
.s-atelier .aprow .al { font-size: 3.3cqw; font-weight: 500; color: #130e30; }
.s-atelier .aprow .ar { font-size: 3.3cqw; font-weight: 600; color: #130e30; }
.s-atelier .atrack { height: 2.6cqw; background: #eff2e5; border-radius: 50cqw; overflow: hidden; border: 1px solid rgba(19,14,48,0.08); }
.s-atelier .atrack i { display: block; height: 100%; background: #ffe228; border-radius: 50cqw; }

.s-atelier .ahero { position: relative; z-index: 1; margin-top: auto; background: #eff2e5; border-radius: 6.2cqw; padding: 5.6cqw 6cqw 6cqw; display: flex; flex-direction: column; gap: 1.6cqw; }
.s-atelier .aherotop { display: flex; justify-content: space-between; align-items: center; }
.s-atelier .ahk { font-size: 2.8cqw; font-weight: 500; letter-spacing: -0.01em; text-transform: uppercase; color: #5f5c6e; }
.s-atelier .ahd { font-size: 2.8cqw; font-weight: 500; color: #5f5c6e; background: #f9fbf2; border-radius: 50cqw; padding: 1cqw 2.6cqw; }
.s-atelier .aherotitle { font-family: 'Fraunces', Charter, Georgia, serif; font-size: 7.4cqw; font-weight: 700; letter-spacing: -0.01em; line-height: 1.1; color: #130e30; margin-bottom: 1.4cqw; }
.s-atelier .acta { display: flex; align-items: center; justify-content: center; gap: 2.2cqw; width: 100%; background: #ffe228; color: #130e30; border: none; border-radius: 50cqw; padding: 4cqw 6cqw; font-family: 'Inter', sans-serif; font-size: 3.9cqw; font-weight: 500; letter-spacing: -0.01em; }
.s-atelier .acta svg { width: 4cqw; height: 4cqw; flex-shrink: 0; }

.s-atelier .aup { position: relative; z-index: 1; margin-top: auto; padding-bottom: 4cqw; }
.s-atelier .aupk { font-size: 2.8cqw; font-weight: 500; letter-spacing: -0.01em; text-transform: uppercase; color: #5f5c6e; margin-bottom: 1.2cqw; }
.s-atelier .arow { display: flex; align-items: center; gap: 3.4cqw; padding: 3.6cqw 0; border-bottom: 1px solid rgba(19,14,48,0.1); }
.s-atelier .arow-last { border-bottom: none; }
.s-atelier .anum { font-size: 3.2cqw; font-weight: 600; color: #5f5c6e; width: 6cqw; flex-shrink: 0; }
.s-atelier .atxt { display: flex; flex-direction: column; gap: 0.6cqw; flex: 1; }
.s-atelier .atl { font-size: 3.7cqw; font-weight: 500; letter-spacing: -0.01em; color: #130e30; }
.s-atelier .asub { font-size: 2.9cqw; font-weight: 400; color: #5f5c6e; }
.s-atelier .achev { width: 4cqw; height: 4cqw; color: #5f5c6e; flex-shrink: 0; }

.s-atelier .tb { --tb-bg: transparent; --tb-line: rgba(19,14,48,0.1); --tb-off: #9a97a8; --tb-on: #130e30; }

/* ============================================================ 22 · Telemetry (from design file) */
.s-console { background: #132322; color: #ffffff; font-family: 'Inter', sans-serif; --hi: rgba(255,255,255,0.4); }
.st:has(+ .s-console) { color: #8a8f8e; }
.s-console .vpad { padding: 6.5cqw 6cqw 0; display: flex; flex-direction: column; flex: 1; }
.s-console .kr { display: flex; align-items: center; gap: 2cqw; }
.s-console .kdot { position: relative; width: 2cqw; height: 2cqw; display: flex; align-items: center; justify-content: center; }
.s-console .kdot i { width: 1.7cqw; height: 1.7cqw; border-radius: 50%; background: #3ddc91; box-shadow: 0 0 1.6cqw 0.3cqw rgba(61,220,145,0.55); }
.s-console .kt { font-size: 2.7cqw; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: #97ddbc; }
.s-console .big { margin-top: 4cqw; font-size: 20cqw; font-weight: 500; letter-spacing: -0.03em; line-height: 0.94; color: #3ddc91; }
.s-console .big span { font-size: 10cqw; font-weight: 400; color: #ffffff; }
.s-console .sub { margin-top: 2.6cqw; font-size: 3.5cqw; font-weight: 400; color: rgba(255,255,255,0.62); line-height: 1.45; max-width: 84%; }
.s-console .chart { margin-top: auto; }
.s-console .chart svg { width: 100%; height: 21cqw; display: block; }
.s-console .chart .gl { stroke: rgba(255,255,255,0.07); stroke-width: 0.4; }
.s-console .chart .bl { stroke: rgba(255,255,255,0.28); stroke-width: 0.5; stroke-dasharray: 1.6 1.6; }
.s-console .chart .pl { fill: none; stroke: #3ddc91; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.s-console .chart .pt { fill: #132322; stroke: #3ddc91; stroke-width: 1; }
.s-console .chart .pt-live { fill: #3ddc91; }
.s-console .chart-x { display: flex; justify-content: space-between; margin-top: 1.6cqw; font-size: 2.6cqw; font-weight: 500; letter-spacing: 0.08em; color: rgba(255,255,255,0.4); }
.s-console .card { margin: 5.5cqw -6cqw 0; padding: 6cqw 6cqw 3cqw; background: #edf7f5; border-radius: 7cqw 7cqw 0 0; color: #132322; }
.s-console .ceb { font-size: 2.6cqw; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: #424f4f; margin-bottom: 3.4cqw; }
.s-console .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2.6cqw; }
.s-console .metric { background: #ffffff; border: 1px solid #d0d3d3; border-radius: 4cqw; padding: 3.4cqw 3.6cqw; }
.s-console .ml { font-size: 2.5cqw; font-weight: 400; color: #828786; }
.s-console .mv { margin-top: 1.4cqw; font-size: 5.4cqw; font-weight: 500; letter-spacing: -0.02em; }
.s-console .mv b { font-size: 3cqw; font-weight: 400; color: #828786; margin-left: 0.4cqw; }
.s-console .md { margin-top: 0.8cqw; font-size: 2.7cqw; font-weight: 500; color: #1fae72; }
.s-console .divider { height: 1px; background: #d0d3d3; margin: 5cqw 0 4cqw; }
.s-console .sessions { display: flex; flex-direction: column; }
.s-console .srow { display: flex; justify-content: space-between; align-items: center; padding: 3.2cqw 0; border-bottom: 1px solid #d0d3d3; }
.s-console .srow:last-child { border-bottom: none; padding-bottom: 0; }
.s-console .sname { font-size: 3.4cqw; font-weight: 500; }
.s-console .smeta { margin-top: 0.6cqw; font-size: 2.5cqw; color: #828786; }
.s-console .sr { text-align: right; }
.s-console .sval { font-size: 3.4cqw; font-weight: 500; }
.s-console .sval b { font-size: 2.5cqw; font-weight: 400; color: #828786; margin-left: 0.3cqw; }
.s-console .ssub { margin-top: 0.6cqw; font-size: 2.5cqw; color: #828786; }
.s-console .tb { --tb-bg: transparent; --tb-line: rgba(255,255,255,0.1); --tb-off: rgba(255,255,255,0.4); --tb-on: #3ddc91; }

/* ============================================================ 23 · The Circle (from design file) */
.s-savvy { background: #fcf7ed; color: #1c1917; font-family: 'Inter', sans-serif; --hi: rgba(28,25,23,0.32); }
.st:has(+ .s-savvy) { color: #cfe3c9; }
.s-savvy .vwrap { display: flex; flex-direction: column; flex: 1; overflow: hidden; }
.s-savvy .hero { background: linear-gradient(160deg, #0d542b 0%, #008236 130%); padding: 6cqw 7cqw 11cqw; position: relative; }
.s-savvy .h-eyebrow { font-family: 'Inter', sans-serif; font-size: 2.7cqw; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #b9ff78; margin-bottom: 3.4cqw; }
.s-savvy .h-greet { font-family: 'Playfair Display', Charter, Georgia, serif; font-weight: 700; font-size: 11.2cqw; line-height: 1.02; letter-spacing: -0.01em; color: #fcf7ed; }
.s-savvy .h-dot { color: #b9ff78; }
.s-savvy .h-sub { margin-top: 3cqw; font-size: 3.5cqw; font-weight: 400; letter-spacing: -0.007em; color: rgba(252,247,237,0.7); line-height: 1.4; }
.s-savvy .sheet { background: #fcf7ed; flex: 1; display: flex; flex-direction: column; overflow: hidden; margin-top: -6cqw; border-radius: 7cqw 7cqw 0 0; padding: 6.5cqw 6cqw 4cqw; position: relative; z-index: 1; }
.s-savvy .eyebrow { display: inline-block; font-family: 'Inter', sans-serif; font-size: 2.7cqw; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #1c1917; text-decoration: underline; text-decoration-style: wavy; text-decoration-color: #f54320; text-decoration-thickness: 0.55cqw; text-underline-offset: 2.2cqw; margin-bottom: 3.6cqw; }
.s-savvy .blk-drop { margin-top: 5cqw; }
.s-savvy .blk-disc { margin-top: auto; }
.s-savvy .blk-event { margin-top: auto; }
.s-savvy .dropcard { display: flex; align-items: center; gap: 3.4cqw; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 2.4cqw; padding: 3.6cqw; }
.s-savvy .drop-mark { flex: 0 0 auto; width: 10cqw; height: 10cqw; border-radius: 1.8cqw; background: #0d542b; color: #b9ff78; font-family: 'Playfair Display', Charter, Georgia, serif; font-weight: 700; font-size: 4.4cqw; display: flex; align-items: center; justify-content: center; }
.s-savvy .drop-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1cqw; }
.s-savvy .drop-ttl { font-size: 3.5cqw; font-weight: 700; letter-spacing: -0.01em; color: #1c1917; }
.s-savvy .drop-sub { font-size: 2.8cqw; font-weight: 400; color: #44403b; line-height: 1.35; }
.s-savvy .drop-cta { flex: 0 0 auto; font-size: 2.7cqw; font-weight: 700; color: #1c1917; border: 1.5px solid #1c1917; border-radius: 1.8cqw; padding: 1.8cqw 3.4cqw; }
.s-savvy .disc-row { display: flex; align-items: flex-start; gap: 3cqw; padding: 3.2cqw 0; border-bottom: 1px solid #e5e7eb; }
.s-savvy .disc-row:last-child { border-bottom: none; }
/* member faces replace the grey status dots: the threads now belong to people,
 * which is the entire proposition of a community product. */
.s-savvy .disc-fc { width: 8.4cqw; height: 8.4cqw; flex: 0 0 auto; }
.s-savvy .event-fc { width: 8cqw; height: 8cqw; flex: 0 0 auto; }
.s-savvy .h-members { display: flex; align-items: center; gap: 2.6cqw; margin-top: 2.4cqw; }
.s-savvy .h-faces { display: flex; }
.s-savvy .h-faces .fc { width: 6.6cqw; height: 6.6cqw; box-shadow: 0 0 0 0.6cqw #14512f; }
.s-savvy .h-faces .fc + .fc { margin-left: -2.2cqw; }
.s-savvy .disc-dot { flex: 0 0 auto; width: 2.2cqw; height: 2.2cqw; border-radius: 999px; margin-top: 1.2cqw; background: #d6d3d1; }
.s-savvy .disc-dot.on { background: #b9ff78; box-shadow: 0 0 0 1.2cqw rgba(185,255,120,0.22); }
.s-savvy .disc-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1cqw; }
.s-savvy .disc-ttl { font-size: 3.4cqw; font-weight: 700; letter-spacing: -0.01em; color: #1c1917; line-height: 1.3; }
.s-savvy .disc-meta { font-size: 2.6cqw; font-weight: 400; color: #44403b; }
.s-savvy .eventcard { display: flex; align-items: center; gap: 3.2cqw; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 2.4cqw; padding: 3.6cqw; }
.s-savvy .event-dot { flex: 0 0 auto; width: 3cqw; height: 3cqw; border-radius: 999px; background: #b9ff78; box-shadow: 0 0 0 1.6cqw rgba(185,255,120,0.22); }
.s-savvy .event-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1cqw; }
.s-savvy .event-ttl { display: block; font-size: 3.3cqw; font-weight: 700; color: #1c1917; }
.s-savvy .event-time { display: block; font-size: 2.6cqw; color: #44403b; }
.s-savvy .event-cta { flex: 0 0 auto; font-size: 2.8cqw; font-weight: 700; color: #1c1917; background: #b9ff78; border-radius: 1.8cqw; padding: 1.9cqw 3.8cqw; }
.s-savvy .tb { --tb-bg: transparent; --tb-line: #e5e7eb; --tb-off: rgba(28,25,23,0.38); --tb-on: #0d542b; }

/* ============================================================ 24 · Daybook (from design file) */
.s-analyst { background: #fafaf9; color: #0c0a09; font-family: 'Inter', sans-serif; --hi: rgba(12,10,9,0.32); }
.st:has(+ .s-analyst) { color: #3a3a3a; }
.s-analyst .apad { padding: 6cqw 6.5cqw 4cqw; display: flex; flex-direction: column; flex: 1; }
.s-analyst .ahead { display: flex; align-items: center; justify-content: space-between; }
.s-analyst .ak { font-size: 3cqw; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: #a8a29e; }
.s-analyst .adone { display: flex; align-items: center; gap: 1.4cqw; font-size: 3cqw; font-weight: 500; color: #3398e1; background: #c1e1f7; padding: 1.6cqw 3.2cqw; border-radius: 999px; }
.s-analyst .adone svg { width: 3.4cqw; height: 3.4cqw; flex-shrink: 0; }
.s-analyst .ahero { margin-top: 5.4cqw; }
.s-analyst .ahero-label { font-size: 3cqw; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: #78716c; }
.s-analyst .ahero-num { font-family: 'Space Grotesk', 'Inter', sans-serif; font-size: 20cqw; font-weight: 400; letter-spacing: -0.03em; line-height: 0.94; color: #0c0a09; margin-top: 1.6cqw; }
.s-analyst .ahero-num span { font-size: 6cqw; font-weight: 400; color: #a8a29e; margin-left: 2cqw; }
.s-analyst .ahero-sub { font-size: 3.6cqw; font-weight: 400; color: #78716c; line-height: 1.5; margin-top: 3cqw; max-width: 82%; }
.s-analyst .ahl { color: #3398e1; background: #c1e1f7; padding: 0.3cqw 1.4cqw; border-radius: 4px; }
.s-analyst .aweek { margin-top: 6cqw; }
.s-analyst .aweek-label { font-size: 3cqw; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: #78716c; margin-bottom: 3.2cqw; }
.s-analyst .aweek-row { display: flex; gap: 2.2cqw; }
.s-analyst .acell { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2cqw; }
.s-analyst .acell i { width: 100%; height: 9cqw; border-radius: 2.6cqw; background: #ffffff; border: 1px solid #e8e6e5; display: block; }
.s-analyst .acell.on i { background: #1c1917; border-color: #1c1917; }
.s-analyst .acell.today i { box-shadow: 0 0 0 1.5px #3ba6f1; }
.s-analyst .acell span { font-size: 2.8cqw; font-weight: 500; color: #a8a29e; }
.s-analyst .acell.today span { color: #3398e1; font-weight: 600; }
.s-analyst .arows { margin-top: auto; background: #ffffff; border: 1px solid #e8e6e5; border-radius: 10px; box-shadow: rgba(0,0,0,0.05) 0px 4px 16px 0px; padding: 0 4cqw; }
.s-analyst .arow { display: flex; justify-content: space-between; align-items: center; padding: 3.6cqw 0; border-bottom: 1px solid #e8e6e5; }
.s-analyst .arow:last-child { border-bottom: none; }
.s-analyst .arow .l { font-size: 3.4cqw; font-weight: 400; color: #78716c; }
.s-analyst .arow .r { font-size: 3.4cqw; font-weight: 500; color: #0c0a09; }
.s-analyst .tb { --tb-bg: transparent; --tb-line: #e8e6e5; --tb-off: #a8a29e; --tb-on: #3ba6f1; }
/* the habit grid — Streaks' actual product surface. Ring + glyph + name + value
 * per tile, so the screen answers "what am I tracking and where am I on each"
 * instead of showing one number over an empty half-screen. */
.s-analyst .ahabits { margin-top: 5.6cqw; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4.4cqw 2cqw; }
.s-analyst .ahb { display: flex; flex-direction: column; align-items: center; }
.s-analyst .ahb-r { position: relative; width: 17cqw; height: 17cqw; display: grid; place-items: center; }
.s-analyst .ah-ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.s-analyst .ahb-i { display: grid; place-items: center; width: 7.6cqw; height: 7.6cqw; color: #78716c; }
.s-analyst .ahb-i svg { width: 100%; height: 100%; display: block; }
.s-analyst .ahb.done .ahb-i { color: #3398e1; }
.s-analyst .ahb-n { font-size: 2.9cqw; font-weight: 600; color: #0c0a09; margin-top: 1.8cqw; letter-spacing: -0.01em; }
.s-analyst .ahb-m { font-size: 2.6cqw; font-weight: 500; color: #a8a29e; margin-top: 0.4cqw; font-variant-numeric: tabular-nums; }


/* ============================================================ 25 · Corkboard (from design file) */
.s-moodboard { background: #f1e8de; color: #000; font-family: 'Inter', sans-serif; --hi: rgba(0,0,0,0.35); } .st:has(+ .s-moodboard) { color: #3a3a3a; } .s-moodboard .mb-pad { display: flex; flex-direction: column; flex: 1; padding: 6cqw 7cqw 0; } .s-moodboard .mb-top { display: flex; align-items: center; gap: 2.8cqw; margin-bottom: 4.5cqw; } .s-moodboard .mb-tag { font-size: 2.6cqw; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; background: #fff; border: 1px solid #000; border-radius: 1.3cqw; padding: 1.2cqw 2.6cqw; transform: rotate(-2deg); } .s-moodboard .mb-client { font-size: 3.2cqw; color: #999999; letter-spacing: -0.02em; } .s-moodboard .mb-title { font-weight: 400; font-size: 12.5cqw; line-height: 0.96; letter-spacing: -0.03em; margin-bottom: 5cqw; } .s-moodboard .mb-title span { position: relative; display: inline-block; z-index: 1; } .s-moodboard .mb-title span::before { content: ''; position: absolute; left: -2cqw; right: -2cqw; top: 20%; bottom: 10%; background: #ffde3b; transform: rotate(-1.6deg); z-index: -1; border-radius: 1.5cqw; } .s-moodboard .mb-stats { display: flex; justify-content: space-between; background: #fbf8f5; border: 1px solid #000; border-radius: 1.3cqw; padding: 3.6cqw 4cqw; margin-bottom: 6cqw; } .s-moodboard .mb-stat { display: flex; flex-direction: column; gap: 0.8cqw; } .s-moodboard .mb-n { font-size: 7.4cqw; letter-spacing: -0.03em; line-height: 1; } .s-moodboard .mb-l { font-size: 2.5cqw; color: #999999; letter-spacing: -0.01em; } .s-moodboard .mb-miles { margin-top: auto; margin-bottom: 6cqw; } .s-moodboard .mb-mrow { display: flex; justify-content: space-between; align-items: baseline; font-size: 3.1cqw; letter-spacing: -0.02em; margin-bottom: 2.4cqw; color: #999999; } .s-moodboard .mb-mrow b { font-weight: 400; color: #000; } .s-moodboard .mb-track { display: flex; gap: 1.6cqw; } .s-moodboard .mb-track i { flex: 1; height: 2.2cqw; border-radius: 999px; background: #e3d6c6; border: 1px solid #000; } .s-moodboard .mb-track i.on { background: #ffde3b; } .s-moodboard .mb-tasks { margin-top: auto; display: flex; flex-direction: column; gap: 2.6cqw; margin-bottom: 6cqw; } .s-moodboard .mb-row { display: flex; align-items: center; gap: 3cqw; background: #fbf8f5; border: 1px solid #000; border-radius: 1.3cqw; padding: 3cqw 3.4cqw; } .s-moodboard .mb-row:nth-child(odd) { transform: rotate(-0.6deg); } .s-moodboard .mb-row:nth-child(even) { transform: rotate(0.6deg); } .s-moodboard .mb-chk { width: 5.4cqw; height: 5.4cqw; min-width: 5.4cqw; border-radius: 50%; border: 1px solid #000; display: flex; align-items: center; justify-content: center; font-size: 3cqw; } .s-moodboard .mb-row.done .mb-chk { background: #000; color: #fff; border-color: #000; } .s-moodboard .mb-txt { flex: 1; font-size: 3.6cqw; letter-spacing: -0.02em; } .s-moodboard .mb-pill { font-size: 2.3cqw; letter-spacing: 0.02em; padding: 1cqw 2.4cqw; border-radius: 1.2cqw; white-space: nowrap; } .s-moodboard .mb-pill.lime { background: #c1f32b; } .s-moodboard .mb-pill.peri { background: #6483ff; color: #fff; } .s-moodboard .mb-pill.sand { background: #eadcce; } .s-moodboard .mb-next { margin: auto -7cqw 0; position: relative; overflow: hidden; background: #2f2c29; border-radius: 3cqw 3cqw 0 0; padding: 6cqw 7cqw 9cqw; } .s-moodboard .mb-c1 { position: absolute; width: 13cqw; height: 13cqw; border-radius: 50%; background: #ffde3b; top: -4cqw; right: -3cqw; } .s-moodboard .mb-c2 { position: absolute; width: 0; height: 0; border-left: 6cqw solid transparent; border-right: 6cqw solid transparent; border-bottom: 10cqw solid #ff4dd5; bottom: -2cqw; left: -2cqw; transform: rotate(12deg); } .s-moodboard .mb-nk { position: relative; font-size: 2.7cqw; letter-spacing: 0.16em; text-transform: uppercase; color: #ffde3b; margin-bottom: 2cqw; } .s-moodboard .mb-nt { position: relative; font-size: 4.4cqw; letter-spacing: -0.02em; color: #fff; line-height: 1.25; max-width: 72%; } .s-moodboard .tb { --tb-bg: #f1e8de; --tb-line: rgba(0,0,0,0.15); --tb-off: #999999; --tb-on: #000000; }

/* ============================================================ DESIGN KIT (personalised, token-driven)
 * Restrained by design: the surface is the creator's own bg/ink; the accent is
 * spent only where it earns attention — the trend line, the ring, the live
 * numerals, the progress fill, the CTA. color-mix derives muted text, card
 * surfaces and hairlines from the two brand tokens, so one accent repaints the
 * whole screen. Two layouts: --home (dashboard) and --course (lessons). */
.s-kit { background: var(--k-bg, #0f1017); color: var(--k-ink, #f2f3f7); font-family: var(--k-font, 'Inter', sans-serif);
  --k-mute: color-mix(in srgb, var(--k-ink) 48%, transparent);
  --k-card: color-mix(in srgb, var(--k-ink) 5%, var(--k-bg));
  --k-line: color-mix(in srgb, var(--k-ink) 12%, transparent);
  --k-line-soft: color-mix(in srgb, var(--k-ink) 7%, transparent); }
.s-kit .k-pad { display: flex; flex-direction: column; flex: 1; padding: 5.4cqw 6.5cqw 0; gap: 6.2cqw; }
.s-kit .k-st { display: flex; align-items: center; justify-content: space-between; padding: 4.5cqw 6.5cqw 0; font-size: 3.4cqw; font-weight: 600; color: var(--k-ink); }
.s-kit .k-sd { display: flex; align-items: center; gap: 1.6cqw; }
.s-kit .k-sd svg { display: block; height: 3.2cqw; width: auto; }

/* header */
.s-kit .k-top { display: flex; align-items: center; justify-content: space-between; }
.s-kit .k-hi-k { font-size: 2.8cqw; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--k-acc); }
.s-kit .k-hi-t { font-size: 6.6cqw; font-weight: 700; letter-spacing: -0.03em; line-height: 1.02; margin-top: 1.2cqw; }
.s-kit .k-av { width: 11cqw; height: 11cqw; min-width: 11cqw; border-radius: 3.4cqw; display: flex; align-items: center; justify-content: center;
  font-size: 4.4cqw; font-weight: 700; background: var(--k-acc); color: var(--k-acc-ink); }
.s-kit .k-av--img { background-size: cover; background-position: center; color: transparent; }

/* ---- kit craft lift (2026-08-03) ----
 * The personalised phones are the FIRST thing a creator sees and they are
 * pre-selected, so they have to clear the same bar as the 20 stock screens.
 * They were flat: no texture, no imagery, an initial in a box. Everything below
 * still derives from the creator's own --k-* tokens; none of it hard-codes a
 * colour, so a brand repaint still repaints the whole screen. */
.s-kit { position: relative; }
/* the portrait avatar keeps the old square footprint */
.s-kit .fc.k-av { width: 9.4cqw; height: 9.4cqw; border-radius: 2.8cqw; }

/* course hero: real cover art behind the ring, not a grey card. White type over
 * the art, and the ring goes to a glass treatment so it reads on the image. */
.s-kit--course .k-chero { position: relative; overflow: hidden; border-color: transparent; background: transparent; }
.s-kit--course .k-chero-art { position: absolute; inset: 0; z-index: 0; }
.s-kit--course .k-chero > .k-ring, .s-kit--course .k-chero > .k-chero-b { position: relative; z-index: 6; }
.s-kit--course .k-chero .k-chero-t { color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,0.32); }
.s-kit--course .k-chero .k-chero-s { color: rgba(255,255,255,0.86); text-shadow: 0 1px 6px rgba(0,0,0,0.3); }
.s-kit--course .k-chero .k-ring-bg { stroke: rgba(255,255,255,0.28); }
.s-kit--course .k-chero .k-ring-fg { stroke: #fff; }
.s-kit--course .k-chero .k-ring-n { color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,0.3); }

/* a little elevation so cards sit on the ground rather than being drawn on it */
.s-kit .k-today, .s-kit .k-uprow { box-shadow: 0 0.8cqw 2.4cqw -1.2cqw rgba(20,16,10,0.16); }
.s-kit .k-cta { box-shadow: 0 1.4cqw 3.4cqw -1.2cqw var(--k-acc); }


/* dashboard: hero metric (no solid accent block — restraint) */
.s-kit .k-metric { display: flex; flex-direction: column; gap: 1cqw; }
.s-kit .k-metric-k { font-size: 3cqw; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--k-mute); }
.s-kit .k-metric-n { font-size: 18cqw; font-weight: 800; letter-spacing: -0.05em; line-height: 0.9; }
.s-kit .k-metric-s { font-size: 3.4cqw; color: var(--k-mute); line-height: 1.35; }

/* branded trend chart */
.s-kit .k-chart svg { width: 100%; height: 25cqw; display: block; overflow: visible; }
.s-kit .k-chart-fill { fill: var(--k-acc); opacity: 0.13; }
.s-kit .k-chart-line { fill: none; stroke: var(--k-acc); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.s-kit .k-chart-dot { fill: var(--k-acc); }
.s-kit .k-chart-x { display: flex; justify-content: space-between; font-size: 2.6cqw; color: var(--k-mute); margin-top: 1.8cqw; letter-spacing: 0.02em; }

/* today's action — the block that makes the screen read as an app that DOES
 * something, not a stats readout. Also what fills the dead space above the CTA. */
.s-kit .k-today { display: flex; align-items: center; gap: 3.4cqw;
  background: var(--k-card); border: 1px solid var(--k-line); border-radius: 4.2cqw; padding: 4.4cqw 4cqw; }
.s-kit .k-today-ic { width: 10.4cqw; height: 10.4cqw; min-width: 10.4cqw; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; background: var(--k-acc); color: var(--k-acc-ink); }
.s-kit .k-today-ic svg { width: 4.4cqw; height: 4.4cqw; display: block; }
.s-kit .k-today-b { flex: 1; min-width: 0; }
.s-kit .k-today-k { font-size: 2.5cqw; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--k-acc); }
.s-kit .k-today-t { font-size: 3.9cqw; font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; margin-top: 0.9cqw;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-kit .k-today-s { font-size: 2.9cqw; color: var(--k-mute); margin-top: 0.7cqw; }
.s-kit .k-today-arr { font-size: 5cqw; line-height: 1; color: var(--k-mute); }

/* level / progress */
.s-kit .k-prog { display: flex; flex-direction: column; gap: 2.4cqw; }
.s-kit .k-prog-top { display: flex; justify-content: space-between; align-items: baseline; }
.s-kit .k-prog-k { font-size: 2.9cqw; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--k-mute); }
.s-kit .k-prog-p { font-size: 3.6cqw; font-weight: 700; color: var(--k-acc); }
.s-kit .k-prog-track { display: flex; gap: 1.4cqw; }
.s-kit .k-prog-track i { flex: 1; height: 1.6cqw; border-radius: 999px; background: var(--k-line); }
.s-kit .k-prog-track i.on { background: var(--k-acc); }

/* stat rows */
.s-kit .k-rows { display: flex; flex-direction: column; }
.s-kit .k-statrow { display: flex; justify-content: space-between; align-items: baseline; padding: 3.4cqw 0; border-bottom: 1px solid var(--k-line-soft); }
.s-kit .k-statrow:last-child { border-bottom: none; }
.s-kit .k-statrow .l { font-size: 3.5cqw; color: var(--k-mute); }
.s-kit .k-statrow .r { font-size: 3.8cqw; font-weight: 600; }

/* CTA */
.s-kit .k-cta { margin-top: auto; margin-bottom: 5.5cqw; background: var(--k-acc); color: var(--k-acc-ink); border: none; border-radius: 3.2cqw;
  padding: 4.2cqw; font-size: 4cqw; font-weight: 700; font-family: inherit; letter-spacing: -0.01em;
  display: flex; align-items: center; justify-content: center; gap: 2.4cqw; }
.s-kit .k-cta--play .k-play { width: 0; height: 0; border-left: 3.4cqw solid var(--k-acc-ink); border-top: 2.1cqw solid transparent; border-bottom: 2.1cqw solid transparent; }

/* course variant */
.s-kit .k-chero { display: flex; align-items: center; gap: 4cqw; background: var(--k-card); border: 1px solid var(--k-line); border-radius: 4.5cqw; padding: 5.4cqw; }
.s-kit .k-ring { position: relative; width: 22cqw; height: 22cqw; min-width: 22cqw; }
.s-kit .k-ring svg { width: 100%; height: 100%; }
.s-kit .k-ring-bg { fill: none; stroke: var(--k-line); stroke-width: 3; }
.s-kit .k-ring-fg { fill: none; stroke: var(--k-acc); stroke-width: 3; stroke-linecap: round; }
.s-kit .k-ring-n { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 4.8cqw; font-weight: 700; }
.s-kit .k-chero-t { font-size: 4.4cqw; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.s-kit .k-chero-s { font-size: 3.2cqw; color: var(--k-mute); margin-top: 1.4cqw; line-height: 1.35; }
.s-kit .k-up { display: flex; flex-direction: column; gap: 3.2cqw; }
.s-kit .k-up-k { font-size: 2.9cqw; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--k-mute); }
.s-kit .k-uprow { display: flex; align-items: center; gap: 3cqw; background: var(--k-card); border: 1px solid var(--k-line); border-radius: 3.2cqw; padding: 4cqw 3.8cqw; }
.s-kit .k-upn { font-size: 4cqw; font-weight: 700; color: var(--k-acc); min-width: 7cqw; }
.s-kit .k-row-b { flex: 1; }
.s-kit .k-row-t { font-size: 3.7cqw; font-weight: 600; letter-spacing: -0.01em; }
.s-kit .k-row-s { font-size: 3cqw; color: var(--k-mute); margin-top: 0.4cqw; }
.s-kit .k-row-arr { font-size: 5.2cqw; color: var(--k-mute); font-weight: 400; }

/* tab bar */
.s-kit .k-tb { display: flex; align-items: flex-start; justify-content: space-around; padding: 3cqw 6cqw calc(4.6cqw + 2cqw); border-top: 1px solid var(--k-line); margin-top: auto; background: var(--k-bg); }
.s-kit .k-ti { display: flex; flex-direction: column; align-items: center; gap: 1.3cqw; font-size: 2.5cqw; font-weight: 600; color: var(--k-mute); }
.s-kit .k-ti svg { width: 5.6cqw; height: 5.6cqw; display: block; }
.s-kit .k-ti.on { color: var(--k-acc); }