/* Motion Cheat Code · UI Motion on the site · built by scripts/build-ui-motion.py from motioncheatcode-src/ui-motion */

/* Motion Cheat Code · UI Motion · uim.css
   The STUDIO look (calm, light, one accent) and the carousel slide frame, shared by all twelve animations.
   Slide: 1080x1350 (4:5). The animation itself lives on a 984x800 "stage" inside the panel; the same stage
   is used on a website, scaled to fit its section (web.js). */

.uim, .uim-slide {
  --uim-bg: #EEEEEA;
  --uim-paper: #FFFFFF;
  --uim-ink: #0C0C0D;
  --uim-muted: #66666C;
  --uim-soft: #A3A3A8;
  --uim-line: #DFDFD9;
  --uim-fill: #F4F4F1;
  --uim-dark: #111113;
  --uim-dark-2: #1B1B1E;
  --uim-dark-line: #2A2A2F;
  --uim-accent: #FF5A1F;
  --uim-accent-soft: rgba(255, 90, 31, .12);
  --uim-good: #16A34A;
  --uim-good-bright: #4ADE80;   /* green text on the dark stage (#1B1B1E and darker): 8:1 */
  --uim-good-text: #117E39;   /* green text on white or a light green tint: 4.5:1 */
  --uim-shadow: 0 40px 80px -40px rgba(12, 12, 13, .28), 0 2px 8px rgba(12, 12, 13, .05);
  --uim-card-shadow: 0 18px 40px -18px rgba(12, 12, 13, .30), 0 1px 3px rgba(12, 12, 13, .06);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: var(--uim-ink);
  -webkit-font-smoothing: antialiased;
}

/* ---------- the stage: 984x800 design pixels, the same in the video and on the web ---------- */
.uim-stage { position: relative; width: 984px; height: 800px; overflow: hidden; border-radius: 40px; isolation: isolate; }
.uim-stage.is-light { background: var(--uim-paper); box-shadow: inset 0 0 0 1px var(--uim-line); }
.uim-stage.is-dark { background: var(--uim-dark); box-shadow: inset 0 0 0 1px var(--uim-dark-line); color: #F5F5F2; }
.uim-stage *, .uim-stage *::before, .uim-stage *::after { box-sizing: border-box; }

/* ---------- web section (web.html): the stage scaled to the section's width ---------- */
.uim { position: relative; width: 100%; max-width: 984px; margin: 0 auto; }
.uim-fit { position: relative; width: 100%; aspect-ratio: 984 / 800; }
.uim-fit > .uim-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; }

/* u01 Headline Focus */
/* u01 Headline Focus · scoped to its stage (984x800) */
.uim-u01 .bar { position: absolute; left: 0; right: 0; top: 0; height: 60px; background: #FAFAF8; border-bottom: 1px solid var(--uim-line); }
.uim-u01 .dots { position: absolute; left: 26px; top: 23px; display: flex; gap: 9px; }
.uim-u01 .dots i { width: 14px; height: 14px; border-radius: 50%; background: #E2E2DC; }
.uim-u01 .url { position: absolute; left: 50%; top: 13px; width: 300px; height: 34px; margin-left: -150px; border-radius: 999px; background: #F0F0EC;
  display: flex; align-items: center; justify-content: center; gap: 8px; font: 500 17px/1 'JetBrains Mono', ui-monospace, monospace; color: var(--uim-muted); }
.uim-u01 .url svg { width: 13px; height: 13px; }
.uim-u01 .nav { position: absolute; left: 40px; right: 40px; top: 84px; height: 44px; display: flex; align-items: center; }
.uim-u01 .logo { display: flex; align-items: center; gap: 12px; font-weight: 750; font-size: 24px; letter-spacing: -.02em; }
.uim-u01 .logo i { width: 30px; height: 30px; border-radius: 9px; background: var(--uim-accent); }
.uim-u01 .links { margin: 0 auto; display: flex; gap: 32px; font-weight: 550; font-size: 20px; color: var(--uim-muted); }
.uim-u01 .signin { height: 40px; padding: 0 18px; border-radius: 999px; background: var(--uim-ink); color: #FFF; display: flex; align-items: center; font-weight: 650; font-size: 19px; }
.uim-u01 .badge { position: absolute; left: 50%; top: 168px; transform: translateX(-50%); height: 40px; padding: 0 18px; border-radius: 999px; background: #FFF;
  box-shadow: inset 0 0 0 1.5px var(--uim-line); display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 19px; white-space: nowrap; }
.uim-u01 .badge i { width: 8px; height: 8px; border-radius: 50%; background: var(--uim-accent); }
.uim-u01 .hl { position: absolute; left: 30px; right: 30px; top: 232px; text-align: center; font-weight: 750; font-size: 76px; line-height: 1.04; letter-spacing: -.035em; }
.uim-u01 .ln { display: block; white-space: nowrap; }
.uim-u01 .w { display: inline-block; margin: 0 .12em; will-change: transform, filter, opacity; }
.uim-u01 .acc { position: relative; display: inline-block; }
.uim-u01 .uline { position: absolute; left: .12em; right: .12em; bottom: -2px; height: 7px; border-radius: 4px; background: var(--uim-accent); transform-origin: 0 50%; }
.uim-u01 .subline { position: absolute; left: 40px; right: 40px; top: 486px; text-align: center; font-weight: 500; font-size: 26px; color: var(--uim-muted); white-space: nowrap; }
.uim-u01 .btns { position: absolute; left: 0; right: 0; top: 548px; display: flex; justify-content: center; gap: 14px; }
.uim-u01 .btn { height: 56px; padding: 0 30px; border-radius: 999px; display: flex; align-items: center; font-weight: 650; font-size: 23px; white-space: nowrap; }
.uim-u01 .b1 { background: var(--uim-ink); color: #FFF; }
.uim-u01 .b2 { background: #FFF; box-shadow: inset 0 0 0 1.5px var(--uim-line); }
.uim-u01 .card { position: absolute; left: 212px; width: 560px; top: 650px; height: 220px; border-radius: 26px; background: #FFF;
  box-shadow: var(--uim-card-shadow), inset 0 0 0 1px var(--uim-line); padding: 24px 28px; }
.uim-u01 .clab { font-weight: 600; font-size: 19px; color: var(--uim-muted); }
.uim-u01 .cval { margin-top: 6px; display: flex; align-items: center; gap: 12px; font-weight: 750; font-size: 50px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.uim-u01 .chip { font-weight: 700; font-size: 18px; letter-spacing: 0; color: var(--uim-good-text); background: rgba(22, 163, 74, .12); border-radius: 999px; padding: 5px 11px; }
.uim-u01 .chart { position: absolute; right: 26px; top: 26px; width: 210px; height: 92px; }
.uim-u01 .chart path { fill: none; stroke: var(--uim-accent); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.uim-u01 .chart .area { stroke: none; fill: var(--uim-accent-soft); }

/* u02 Swap Word */
/* u02 Swap Word · scoped to its stage (984x800), dark */
.uim-u02 .glow { position: absolute; left: 50%; top: 80px; width: 940px; height: 560px; margin-left: -470px; pointer-events: none;
  /* a little fixed noise dithers the gradient, so video compression does not turn it into rings */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .22 0 0 0 -.08'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 200px 200px,
    radial-gradient(closest-side, color-mix(in srgb, var(--uim-accent) 17%, transparent), transparent);
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent); mask-image: radial-gradient(closest-side, #000 55%, transparent); }
.uim-u02 .nav { position: absolute; left: 40px; right: 40px; top: 36px; height: 44px; display: flex; align-items: center; }
.uim-u02 .logo { display: flex; align-items: center; gap: 12px; font-weight: 750; font-size: 24px; letter-spacing: -.02em; }
.uim-u02 .logo i { width: 30px; height: 30px; border-radius: 9px; background: var(--uim-accent); }
.uim-u02 .links { margin: 0 24px 0 auto; display: flex; gap: 30px; font-weight: 550; font-size: 20px; color: color-mix(in srgb, currentColor 62%, transparent); }
.uim-u02 .navcta { height: 40px; padding: 0 18px; border-radius: 999px; background: #F5F5F2; color: var(--uim-ink); display: flex; align-items: center; font-weight: 650; font-size: 19px; }

.uim-u02 .hl { position: absolute; left: 0; right: 0; top: 190px; text-align: center; font-weight: 750; font-size: 88px; letter-spacing: -.035em; }
.uim-u02 .l1, .uim-u02 .l3 { display: block; height: 1.12em; line-height: 1.12em; white-space: nowrap; }
.uim-u02 .w { display: inline-block; margin: 0 .12em; will-change: transform, filter, opacity; }
.uim-u02 .l2 { display: flex; justify-content: center; height: 1.3em; margin: .03em 0; }
.uim-u02 .pill { position: relative; flex: none; display: block; height: 1.3em; border-radius: 999px; overflow: hidden;
  background: var(--uim-accent); color: var(--pill-ink, #0C0C0D);
  box-shadow: 0 26px 60px -28px color-mix(in srgb, var(--uim-accent) 70%, transparent); }
.uim-u02 .ww { position: absolute; left: 0; right: 0; top: -.012em; height: 100%; line-height: 1.3em; text-align: center; white-space: nowrap; will-change: transform, opacity; }
.uim-u02 .meas { position: absolute; left: 0; top: 0; visibility: hidden; white-space: nowrap; }
.uim-u02 .meas span { display: inline-block; white-space: nowrap; }

.uim-u02 .subline { position: absolute; left: 40px; right: 40px; top: 538px; text-align: center; font-weight: 500; font-size: 28px; line-height: 1.3; color: color-mix(in srgb, currentColor 64%, transparent); white-space: nowrap; }
.uim-u02 .btns { position: absolute; left: 0; right: 0; top: 614px; display: flex; justify-content: center; gap: 14px; }
.uim-u02 .btn { height: 58px; padding: 0 32px; border-radius: 999px; display: flex; align-items: center; font-weight: 650; font-size: 23px; white-space: nowrap; }
.uim-u02 .b1 { background: #F5F5F2; color: var(--uim-ink); }
.uim-u02 .b2 { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, currentColor 26%, transparent); }

/* u03 Live Signups */
/* u03 Live Signups · scoped to its stage (984x800) */
.uim-u03 .tray { position: absolute; left: 72px; top: 192px; width: 840px; height: 556px; border-radius: 32px; background: var(--uim-fill); box-shadow: inset 0 0 0 1px var(--uim-line); }
.uim-u03 .head { position: absolute; left: 108px; right: 108px; top: 44px; height: 130px; }
.uim-u03 .lab { font-weight: 600; font-size: 24px; line-height: 1.3; color: var(--uim-muted); }
.uim-u03 .num { margin-top: 6px; font-weight: 750; font-size: 84px; line-height: 1.05; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.uim-u03 .live { position: absolute; right: 0; top: 2px; height: 44px; padding: 0 20px 0 17px; border-radius: 999px; background: var(--uim-paper);
  box-shadow: inset 0 0 0 1.5px var(--uim-line); display: flex; align-items: center; gap: 11px; font-weight: 650; font-size: 20px; line-height: 1.25; }
.uim-u03 .dot { position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--uim-accent); }
.uim-u03 .pulse { position: absolute; inset: 0; border-radius: 50%; background: var(--uim-accent); }

.uim-u03 .toast { position: absolute; left: 108px; top: 224px; width: 768px; height: 88px; border-radius: 24px; background: var(--uim-paper);
  box-shadow: var(--uim-card-shadow), inset 0 0 0 1px var(--uim-line); display: flex; align-items: center; gap: 18px; padding: 0 30px 0 18px; transform-origin: 50% 0; will-change: transform, opacity; }
.uim-u03 .ring { position: absolute; inset: 0; border-radius: 24px; border: 2px solid var(--uim-accent); pointer-events: none; }
.uim-u03 .av { flex: none; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 22px; line-height: 1; letter-spacing: .01em; }
.uim-u03 .c0 { background: var(--uim-accent); color: var(--on-accent, #0C0C0D); }
.uim-u03 .c1 { background: var(--uim-ink); color: #FFF; }
.uim-u03 .c2 { background: var(--uim-good); color: var(--uim-ink); }
.uim-u03 .c3 { background: var(--uim-line); color: var(--uim-ink); }
.uim-u03 .c4 { background: color-mix(in srgb, var(--uim-accent) 16%, #FFF); color: var(--uim-ink); }
.uim-u03 .tx { flex: 1 1 auto; min-width: 0; }
.uim-u03 .nm { font-weight: 650; font-size: 25px; line-height: 1.25; letter-spacing: -.01em; white-space: nowrap; }
.uim-u03 .ac { font-weight: 500; font-size: 21px; line-height: 1.3; color: var(--uim-muted); white-space: nowrap; }
.uim-u03 .tm { flex: none; font: 500 19px/1.3 'JetBrains Mono', ui-monospace, monospace; color: var(--uim-muted); white-space: nowrap; }

/* u04 Logo Wall */
/* u04 Logo Wall · scoped to its stage (984x800) */
.uim-u04 .head { position: absolute; left: 40px; right: 40px; top: 96px; text-align: center; }
.uim-u04 .h { font-weight: 750; font-size: 52px; line-height: 1.15; letter-spacing: -.035em; white-space: nowrap; }
.uim-u04 .rows { position: absolute; left: 0; right: 0; top: 206px; height: 240px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 17%, #000 83%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 17%, #000 83%, transparent 100%); }
.uim-u04 .row { position: absolute; left: 0; right: 0; height: 96px; }
.uim-u04 .r1 { top: 8px; }
.uim-u04 .r2 { top: 136px; }
.uim-u04 .track { position: absolute; top: 0; height: 96px; display: flex; align-items: center; white-space: nowrap; }
.uim-u04 .r1 .track { left: 0; }
.uim-u04 .r2 .track { left: -460px; }
.uim-u04 .logo { flex: none; display: flex; align-items: center; gap: 13px; margin-right: 72px; color: color-mix(in srgb, var(--uim-ink) 78%, transparent); line-height: 1.25; }
.uim-u04 .logo svg { width: 38px; height: 38px; flex: none; fill: currentColor; }
.uim-u04 .logo b { font-weight: 750; font-size: 36px; letter-spacing: -.03em; }
.uim-u04 .s1 b { font-weight: 650; font-size: 36px; letter-spacing: -.02em; text-transform: lowercase; }
.uim-u04 .s2 b { font-weight: 700; font-size: 28px; letter-spacing: .16em; text-transform: uppercase; }
.uim-u04 .s3 b { font-weight: 500; font-size: 38px; letter-spacing: -.02em; }
.uim-u04 .s4 b { font: 600 31px/1.25 'JetBrains Mono', ui-monospace, monospace; letter-spacing: -.04em; text-transform: lowercase; }
.uim-u04 .s5 b { font-weight: 800; font-size: 37px; letter-spacing: -.05em; text-transform: lowercase; }
.uim-u04 .rule { position: absolute; left: 252px; right: 252px; top: 486px; height: 1px; background: var(--uim-line); }

.uim-u04 .rate { position: absolute; left: 0; right: 0; top: 534px; display: flex; justify-content: center; align-items: center; gap: 32px; }
.uim-u04 .stars { display: flex; gap: 12px; }
.uim-u04 .star { position: relative; width: 64px; height: 64px; }
.uim-u04 .star svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.uim-u04 .star .base path { fill: var(--uim-line); }
.uim-u04 .star .fill path { fill: var(--uim-accent); }
.uim-u04 .score { font-weight: 750; font-size: 76px; line-height: 1.05; letter-spacing: -.04em; font-variant-numeric: tabular-nums; min-width: 128px; }
.uim-u04 .cap { position: absolute; left: 40px; right: 40px; top: 636px; text-align: center; font-weight: 500; font-size: 26px; line-height: 1.3; color: var(--uim-muted); white-space: nowrap; }

/* u05 Metric Tiles */
/* u05 Metric Tiles · scoped to its stage (984x800) */
.uim-u05 .head { position: absolute; left: 36px; right: 36px; top: 84px; height: 56px; display: flex; align-items: center; justify-content: space-between; }
.uim-u05 .ttl { font-weight: 750; font-size: 44px; line-height: 1.2; letter-spacing: -.035em; }
.uim-u05 .per { height: 44px; padding: 0 20px; border-radius: 999px; background: var(--uim-paper); box-shadow: inset 0 0 0 1.5px var(--uim-line);
  display: flex; align-items: center; font-weight: 650; font-size: 20px; line-height: 1.25; }

.uim-u05 .tile { position: absolute; top: 178px; width: 288px; height: 530px; border-radius: 28px; background: var(--uim-fill); box-shadow: inset 0 0 0 1px var(--uim-line); }
.uim-u05 .t1 { left: 36px; }
.uim-u05 .t2 { left: 348px; }
.uim-u05 .t3 { left: 660px; }
.uim-u05 .lab { position: absolute; left: 28px; top: 28px; font-weight: 600; font-size: 22px; line-height: 1.3; color: var(--uim-muted); white-space: nowrap; }
.uim-u05 .val { position: absolute; left: 28px; top: 66px; font-weight: 750; font-size: 60px; line-height: 1.1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.uim-u05 .foot { position: absolute; left: 28px; right: 24px; top: 462px; height: 36px; display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.uim-u05 .chip { font-weight: 700; font-size: 20px; line-height: 1.25; color: var(--uim-good-text); background: color-mix(in srgb, var(--uim-good) 14%, transparent); border-radius: 999px; padding: 5px 12px; }
.uim-u05 .note { font-weight: 500; font-size: 19px; line-height: 1.3; color: var(--uim-muted); }

.uim-u05 .spark { position: absolute; left: 28px; top: 168px; width: 232px; height: 250px; overflow: visible; }
.uim-u05 .spark path { fill: none; stroke: var(--uim-accent); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.uim-u05 .spark .area { stroke: none; fill: color-mix(in srgb, var(--uim-accent) 14%, transparent); }
.uim-u05 .spark circle { fill: var(--uim-accent); stroke: var(--uim-fill); stroke-width: 3.5; }

.uim-u05 .ring { position: absolute; left: 26px; top: 128px; width: 236px; height: 236px; overflow: visible; }
.uim-u05 .ring circle { fill: none; stroke-width: 20; }
.uim-u05 .ring .trk { stroke: color-mix(in srgb, var(--uim-ink) 10%, transparent); }
.uim-u05 .ring .arc { stroke: var(--uim-accent); stroke-linecap: round; }
.uim-u05 .pct { position: absolute; left: 26px; top: 128px; width: 236px; height: 236px; display: grid; place-items: center; font-weight: 750; font-size: 56px; line-height: 1.1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }

.uim-u05 .bars { position: absolute; left: 28px; top: 166px; width: 232px; height: 236px; display: flex; align-items: flex-end; gap: 12px; }
.uim-u05 .bar { flex: 1 1 0; border-radius: 9px 9px 4px 4px; background: color-mix(in srgb, var(--uim-ink) 18%, transparent); transform-origin: 50% 100%; }
.uim-u05 .bar.hi { background: var(--uim-accent); }
.uim-u05 .days { position: absolute; left: 28px; top: 414px; width: 232px; display: flex; gap: 12px; }
.uim-u05 .days span { flex: 1 1 0; text-align: center; font: 500 18px/1.3 'JetBrains Mono', ui-monospace, monospace; color: var(--uim-muted); }

/* u06 Bento Build */
/* u06 Bento Build · scoped to its stage (984x800), dark theme */
.uim-u06 .slot, .uim-u06 .tile { position: absolute; border-radius: 28px; }
.uim-u06 .slot { border: 2px dashed var(--uim-dark-line); }
.uim-u06 .tile { background: var(--uim-dark-2); box-shadow: inset 0 0 0 1px var(--uim-dark-line); overflow: hidden; color: #F5F5F2; will-change: transform, opacity; }
.uim-u06 .t1 { left: 44px; top: 44px; width: 440px; height: 504px; }
.uim-u06 .t2 { left: 500px; top: 44px; width: 440px; height: 244px; }
.uim-u06 .t3 { left: 500px; top: 304px; width: 212px; height: 244px; }
.uim-u06 .t4 { left: 728px; top: 304px; width: 212px; height: 244px; }
.uim-u06 .t5 { left: 44px; top: 564px; width: 896px; height: 192px; }
.uim-u06 .flash { position: absolute; inset: 0; border-radius: 28px; border: 2px solid var(--uim-accent); opacity: 0; pointer-events: none; }

.uim-u06 .lab { position: absolute; left: 32px; top: 28px; font-weight: 600; font-size: 20px; line-height: 1.25; color: var(--uim-soft); white-space: nowrap; }
.uim-u06 .rng { position: absolute; right: 28px; top: 28px; font-weight: 500; font-size: 20px; line-height: 1.25; color: var(--uim-soft); white-space: nowrap; }
.uim-u06 .big { font-weight: 750; letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.uim-u06 .chip { position: absolute; right: 28px; top: 24px; font-weight: 700; font-size: 18px; line-height: 1.25; color: var(--uim-good-bright); background: rgba(22, 163, 74, .16); border-radius: 999px; padding: 5px 12px; }

/* 1 revenue */
.uim-u06 .t1 .val { position: absolute; left: 32px; top: 62px; font-size: 64px; line-height: 1.12; }
.uim-u06 .gl { position: absolute; left: 32px; right: 32px; height: 1px; background: var(--uim-dark-line); }
.uim-u06 .bars { position: absolute; left: 32px; right: 32px; top: 164px; height: 270px; display: flex; align-items: flex-end; gap: 14px; }
.uim-u06 .col { flex: 1 1 0; border-radius: 12px 12px 5px 5px; background: #34343A; transform-origin: 50% 100%; }
.uim-u06 .col.hi { background: var(--uim-accent); }
.uim-u06 .days { position: absolute; left: 32px; right: 32px; top: 452px; display: flex; gap: 14px; font: 500 18px/22px 'JetBrains Mono', ui-monospace, monospace; color: var(--uim-soft); }
.uim-u06 .days span { flex: 1 1 0; text-align: center; }

/* 2 visitors */
.uim-u06 .t2 .val { position: absolute; left: 32px; top: 56px; font-size: 50px; line-height: 1.12; }
.uim-u06 .spark { position: absolute; left: 28px; top: 130px; width: 384px; height: 84px; overflow: visible; }
.uim-u06 .sline { fill: none; stroke: var(--uim-accent); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.uim-u06 .sarea { fill: var(--uim-accent-soft); stroke: none; }
.uim-u06 .dot { position: absolute; width: 16px; height: 16px; border-radius: 50%; background: var(--uim-accent); box-shadow: 0 0 0 4px var(--uim-dark-2); }
.uim-u06 .pulse { position: absolute; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--uim-accent); opacity: 0; }

/* 3 toggle */
.uim-u06 .ico { position: absolute; left: 24px; top: 24px; width: 48px; height: 48px; border-radius: 50%; background: #2A2A2F; display: grid; place-items: center; color: #F5F5F2; }
.uim-u06 .ico svg { width: 24px; height: 24px; }
.uim-u06 .tg { position: absolute; left: 96px; top: 26px; width: 92px; height: 52px; border-radius: 999px; background: #3A3A41; }
.uim-u06 .kn { position: absolute; left: 6px; top: 6px; width: 40px; height: 40px; border-radius: 50%; background: #FFF; box-shadow: 0 2px 6px rgba(0, 0, 0, .35); }
.uim-u06 .tt { position: absolute; left: 24px; right: 24px; top: 150px; font-weight: 650; font-size: 26px; line-height: 1.3; letter-spacing: -.01em; white-space: nowrap; }
.uim-u06 .ts { position: absolute; left: 24px; right: 24px; top: 188px; font-weight: 500; font-size: 20px; line-height: 1.3; color: var(--uim-soft); white-space: nowrap; }

/* 4 ring */
.uim-u06 .ring { position: absolute; left: 46px; top: 24px; width: 120px; height: 120px; transform: rotate(-90deg); }
.uim-u06 .ring circle { fill: none; stroke-width: 12; }
.uim-u06 .rtrack { stroke: #2A2A2F; }
.uim-u06 .rbar { stroke: var(--uim-accent); stroke-linecap: round; }
.uim-u06 .rnum { position: absolute; left: 46px; top: 24px; width: 120px; height: 120px; display: grid; place-items: center; font-weight: 750; font-size: 30px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.2; }
.uim-u06 .t4 .tt { top: 160px; }
.uim-u06 .t4 .ts { top: 196px; }
.uim-u06 .c { text-align: center; left: 12px; right: 12px; }

/* 5 team */
.uim-u06 .stack { position: absolute; left: 36px; top: 54px; display: flex; }
.uim-u06 .av { width: 84px; height: 84px; margin-left: -10px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 750; font-size: 26px; line-height: 1.2; box-shadow: 0 0 0 4px var(--uim-dark-2); }
.uim-u06 .av:first-child { margin-left: 0; }
.uim-u06 .a1 { background: #F5F5F2; color: var(--uim-ink); }
.uim-u06 .a2 { background: #8A8A91; color: var(--uim-ink); }
.uim-u06 .a3 { background: var(--uim-accent); color: var(--uim-ink); }
.uim-u06 .a4 { background: #3A3A41; color: #F5F5F2; }
.uim-u06 .more { background: #2A2A2F; color: #F5F5F2; }
.uim-u06 .tx { position: absolute; left: 440px; top: 38px; width: 280px; height: 120px; }
.uim-u06 .tx .lab { left: 0; top: 0; }
.uim-u06 .tv { position: absolute; left: 0; top: 28px; font-size: 40px; line-height: 1.25; }
.uim-u06 .tx .ts { left: 0; right: auto; top: 80px; }
.uim-u06 .inv { position: absolute; right: 36px; top: 66px; height: 60px; padding: 0 32px; border-radius: 999px; background: #F5F5F2; color: var(--uim-ink); display: flex; align-items: center; font-weight: 650; font-size: 24px; white-space: nowrap; }

/* u07 Cursor Demo */
/* u07 Cursor Demo · scoped to its stage (984x800), light theme */
.uim-u07 .bg { position: absolute; left: 0; right: 0; top: 88px; bottom: 0; background: var(--uim-fill); }
.uim-u07 .top { position: absolute; left: 0; right: 0; top: 0; height: 88px; background: #FFF; border-bottom: 1px solid var(--uim-line); }
.uim-u07 .logo { position: absolute; left: 40px; top: 0; height: 88px; display: flex; align-items: center; gap: 12px; font-weight: 750; font-size: 26px; letter-spacing: -.02em; }
.uim-u07 .logo i { width: 34px; height: 34px; border-radius: 10px; background: var(--uim-accent); }
.uim-u07 .newbtn { position: absolute; right: 40px; top: 16px; height: 56px; padding: 0 26px 0 20px; border-radius: 16px; background: var(--uim-ink); color: #FFF;
  display: flex; align-items: center; gap: 10px; font-weight: 650; font-size: 22px; white-space: nowrap; }
.uim-u07 .newbtn svg { width: 20px; height: 20px; }
.uim-u07 .ttl { position: absolute; left: 40px; top: 124px; font-weight: 750; font-size: 44px; line-height: 1.2; letter-spacing: -.03em; }
.uim-u07 .list { position: absolute; left: 40px; right: 40px; top: 216px; height: 456px; }
.uim-u07 .row { position: absolute; left: 0; right: 0; height: 100px; border-radius: 22px; background: #FFF; box-shadow: inset 0 0 0 1px var(--uim-line), 0 1px 2px rgba(12, 12, 13, .04); }
.uim-u07 .flash { position: absolute; inset: 0; border-radius: 22px; border: 2px solid var(--uim-accent); box-shadow: 0 0 0 5px var(--uim-accent-soft); opacity: 0; pointer-events: none; }
.uim-u07 .th { position: absolute; left: 22px; top: 22px; width: 56px; height: 56px; border-radius: 16px; background: var(--uim-fill); display: grid; place-items: center; }
.uim-u07 .th i { display: block; border-radius: 6px; background: #CFCFC8; }
.uim-u07 .t-a i { width: 26px; height: 26px; }
.uim-u07 .t-b i { width: 26px; height: 26px; border-radius: 50%; }
.uim-u07 .t-c i { width: 26px; height: 14px; }
.uim-u07 .t-new { background: var(--uim-accent-soft); }
.uim-u07 .t-new i { width: 26px; height: 26px; background: var(--uim-accent); }
.uim-u07 .nm { position: absolute; left: 100px; top: 17px; font-weight: 650; font-size: 26px; line-height: 1.3; letter-spacing: -.01em; white-space: nowrap; }
.uim-u07 .mt2 { position: absolute; left: 100px; top: 53px; font-weight: 500; font-size: 20px; line-height: 1.3; color: var(--uim-muted); white-space: nowrap; }
.uim-u07 .tag { position: absolute; right: 24px; top: 33px; height: 34px; padding: 0 14px; border-radius: 999px; background: var(--uim-fill); font-weight: 650; font-size: 18px; display: flex; align-items: center; }
.uim-u07 .nw .tag { background: var(--uim-accent-soft); }

.uim-u07 .scrim { position: absolute; inset: 0; background: rgba(12, 12, 13, .4); opacity: 0; }
.uim-u07 .modal { position: absolute; left: 222px; top: 222px; width: 540px; height: 356px; padding: 36px; border-radius: 28px; background: #FFF; box-shadow: 0 40px 80px -30px rgba(12, 12, 13, .5), 0 2px 8px rgba(12, 12, 13, .08); opacity: 0; display: flex; flex-direction: column; }
.uim-u07 .mh { font-weight: 750; font-size: 30px; line-height: 1.25; letter-spacing: -.02em; }
.uim-u07 .ms { margin-top: 6px; font-weight: 500; font-size: 20px; line-height: 1.25; color: var(--uim-muted); white-space: nowrap; }
.uim-u07 .ml { margin-top: 26px; font-weight: 600; font-size: 18px; line-height: 1.25; color: var(--uim-muted); }
.uim-u07 .inp { position: relative; margin-top: 10px; height: 68px; border-radius: 16px; background: #FFF; box-shadow: inset 0 0 0 2px var(--uim-line); padding: 0 22px; display: flex; align-items: center; font-weight: 600; font-size: 28px; white-space: nowrap; }
.uim-u07 .ph { position: absolute; left: 22px; top: 0; height: 68px; display: flex; align-items: center; font-weight: 500; color: var(--uim-muted); }
.uim-u07 .typed { line-height: 1.3; }
.uim-u07 .caret { width: 3px; height: 34px; margin-left: 2px; background: var(--uim-accent); flex: 0 0 auto; }
.uim-u07 .ring { position: absolute; inset: 0; border-radius: 16px; border: 2px solid var(--uim-accent); box-shadow: 0 0 0 5px var(--uim-accent-soft); opacity: 0; pointer-events: none; }
.uim-u07 .mb { margin-top: auto; display: flex; justify-content: flex-end; gap: 12px; }
.uim-u07 .cancel, .uim-u07 .create { height: 56px; padding: 0 28px; border-radius: 14px; display: flex; align-items: center; font-weight: 650; font-size: 22px; white-space: nowrap; }
.uim-u07 .cancel { background: var(--uim-fill); }
.uim-u07 .create { background: var(--uim-ink); color: #FFF; }

.uim-u07 .rip { position: absolute; width: 56px; height: 56px; border-radius: 50%; border: 3px solid var(--uim-accent); opacity: 0; pointer-events: none; }
.uim-u07 .cur { position: absolute; left: 0; top: 0; width: 36px; height: 46px; transform-origin: 3px 3px; filter: drop-shadow(0 3px 5px rgba(12, 12, 13, .3)); pointer-events: none; }

/* u08 Steps Path */
/* u08 Steps Path · scoped to its stage (984x800), dark theme */
.uim-u08 .hd { position: absolute; left: 40px; right: 40px; top: 58px; text-align: center; font-weight: 750; font-size: 46px; line-height: 1.2; letter-spacing: -.03em; color: #F5F5F2; white-space: nowrap; }
.uim-u08 .sh { position: absolute; left: 40px; right: 40px; top: 118px; text-align: center; font-weight: 500; font-size: 24px; line-height: 1.3; color: var(--uim-soft); white-space: nowrap; }
.uim-u08 .path { position: absolute; left: 0; top: 0; width: 984px; height: 800px; overflow: visible; }
.uim-u08 .path path { fill: none; stroke-width: 6; stroke-linecap: round; }
.uim-u08 .track { stroke: var(--uim-dark-line); }
.uim-u08 .seg { stroke: var(--uim-accent); }

.uim-u08 .nd { position: absolute; width: 88px; height: 88px; border-radius: 50%; background: var(--uim-dark-2); box-shadow: inset 0 0 0 3px var(--uim-dark-line); }
.uim-u08 .num { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 750; font-size: 34px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.uim-u08 .num.m { color: var(--uim-soft); }
.uim-u08 .fill { position: absolute; inset: 0; border-radius: 50%; background: var(--uim-accent); }
.uim-u08 .num.k { color: var(--uim-ink); }
.uim-u08 .pl { position: absolute; inset: -3px; border-radius: 50%; border: 3px solid var(--uim-accent); opacity: 0; pointer-events: none; }
.uim-u08 .ck { position: absolute; right: -8px; top: -8px; width: 34px; height: 34px; border-radius: 50%; background: #F5F5F2; box-shadow: 0 0 0 4px var(--uim-dark); display: grid; place-items: center; }
.uim-u08 .ck svg { width: 20px; height: 20px; }

.uim-u08 .lb { position: absolute; width: 280px; text-align: center; }
.uim-u08 .lb.up { display: flex; flex-direction: column; justify-content: flex-end; height: 74px; }
.uim-u08 .lt { font-weight: 700; font-size: 28px; line-height: 1.25; letter-spacing: -.015em; color: #F5F5F2; white-space: nowrap; }
.uim-u08 .ls { margin-top: 4px; font-weight: 500; font-size: 20px; line-height: 1.3; color: var(--uim-soft); white-space: nowrap; }

.uim-u08 .pillbox { position: absolute; left: 0; right: 0; top: 672px; height: 68px; display: flex; justify-content: center; }
.uim-u08 .pill { position: relative; height: 68px; padding: 0 36px 0 26px; border-radius: 999px; background: var(--uim-accent); color: var(--uim-ink); display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 28px; white-space: nowrap; letter-spacing: -.01em; }
.uim-u08 .pill svg { width: 28px; height: 28px; }
.uim-u08 .halo { position: absolute; inset: 0; border-radius: 999px; border: 3px solid var(--uim-accent); opacity: 0; pointer-events: none; }

/* u09 Compare Slider */
/* u09 Compare Slider · scoped to its stage (984x800), light theme */
.uim-u09 .fr { position: absolute; left: 40px; top: 44px; width: 904px; height: 604px; border-radius: 28px; overflow: hidden; background: #FFF; box-shadow: 0 0 0 1px var(--uim-line), var(--uim-card-shadow); }
.uim-u09 .old, .uim-u09 .new { position: absolute; inset: 0; }

/* the old page: cramped, boxed, mixed fonts, greys only */
.uim-u09 .old { background: #D9D9D3; color: #1F1F22; }
.uim-u09 .old > * { position: absolute; }
.uim-u09 .o-util { left: 0; right: 0; top: 0; height: 34px; padding: 0 12px; background: #B4B4AE; font: 500 18px/34px 'JetBrains Mono', ui-monospace, monospace; white-space: nowrap; }
.uim-u09 .o-logo { left: 12px; top: 44px; width: 200px; height: 72px; border: 4px double #4A4A4F; background: #C8C8C2; display: flex; align-items: center; justify-content: center;
  font: 800 24px/1.2 'JetBrains Mono', ui-monospace, monospace; text-transform: uppercase; letter-spacing: 2px; white-space: nowrap; }
.uim-u09 .o-nav { left: 226px; top: 58px; display: flex; gap: 4px; }
.uim-u09 .nb { height: 44px; padding: 0 9px; border: 2px solid #5C5C61; background: #C4C4BE; font: 800 18px/40px Inter, sans-serif; white-space: nowrap; }
.uim-u09 .o-banner { left: 12px; right: 12px; top: 126px; height: 54px; border: 3px dashed #9A9A9F; background: #3A3A3E; color: #ECECE6; text-align: center;
  font: italic 900 26px/48px Inter, sans-serif; letter-spacing: 2px; text-transform: uppercase; white-space: nowrap; }
.uim-u09 .o-side { left: 12px; top: 188px; width: 176px; height: 268px; border: 2px solid #5C5C61; background: #CDCDC7; }
.uim-u09 .st { background: #6B6B70; color: #F2F2EE; padding: 4px 8px; font: 800 18px/1.25 Inter, sans-serif; letter-spacing: 1px; }
.uim-u09 .lk { padding: 8px 10px; font: 700 18px/28px Inter, sans-serif; text-decoration: underline; }
.uim-u09 .o-main { left: 200px; top: 188px; width: 330px; height: 268px; }
.uim-u09 .oh { font: italic 700 26px/1.25 Inter, sans-serif; letter-spacing: .5px; text-decoration: underline; }
.uim-u09 .op { margin-top: 4px; font: 400 18px/1.3 Inter, sans-serif; }
.uim-u09 .tb { margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr 1fr; }
.uim-u09 .tb i { font: 500 18px/30px 'JetBrains Mono', ui-monospace, monospace; font-style: normal; border: 1.5px solid #5C5C61; background: #D2D2CC; padding: 0 8px; margin: -0.75px; white-space: nowrap; }
.uim-u09 .o-right { left: 542px; top: 188px; width: 350px; height: 268px; }
.uim-u09 .nw { border: 2px dotted #5C5C61; background: #D6D6D0; padding: 8px 10px; font: 600 18px/26px Inter, sans-serif; white-space: nowrap; }
.uim-u09 .ob { margin-top: 10px; height: 46px; background: #55555A; color: #F2F2EE; font: 900 20px/46px Inter, sans-serif; letter-spacing: 2px; text-align: center; border: 3px outset #8A8A8F; }
.uim-u09 .oc { margin-top: 10px; height: 40px; background: #1F1F22; color: #D6D6D0; font: 500 18px/40px 'JetBrains Mono', ui-monospace, monospace; text-align: center; }
.uim-u09 .o-right > div { position: relative; }
.uim-u09 .o-strip { left: 12px; right: 12px; top: 464px; height: 84px; display: flex; gap: 8px; }
.uim-u09 .o-strip i { flex: 1 1 0; border: 2px solid #5C5C61; font: 500 18px/1.2 'JetBrains Mono', ui-monospace, monospace; font-style: normal; padding: 54px 0 0 6px; white-space: nowrap; overflow: hidden;
  background: linear-gradient(to top right, transparent calc(50% - 1px), #5C5C61 50%, transparent calc(50% + 1px)), linear-gradient(to top left, transparent calc(50% - 1px), #5C5C61 50%, transparent calc(50% + 1px)), #CDCDC7; }
.uim-u09 .o-foot { left: 0; right: 0; bottom: 0; height: 48px; padding: 0 12px; border-top: 3px solid #5C5C61; background: #B4B4AE; font: 500 18px/45px 'JetBrains Mono', ui-monospace, monospace; white-space: nowrap; }

/* the new page: clean, STUDIO. Its text sits in a left block (x < 440) and a right block (x > 480), so the resting handle at 452 cuts between them. */
.uim-u09 .new { background: #FFF; will-change: clip-path; }
.uim-u09 .n-nav { position: absolute; left: 44px; right: 44px; top: 0; height: 88px; display: flex; align-items: center; }
.uim-u09 .n-logo { display: flex; align-items: center; gap: 12px; font-weight: 750; font-size: 26px; letter-spacing: -.02em; }
.uim-u09 .n-logo i { width: 32px; height: 32px; border-radius: 9px; background: var(--uim-accent); }
.uim-u09 .n-links { margin-left: auto; display: flex; gap: 26px; font-weight: 550; font-size: 20px; color: var(--uim-muted); }
.uim-u09 .n-btn { margin-left: 30px; height: 44px; padding: 0 20px; border-radius: 999px; background: var(--uim-ink); color: #FFF; display: flex; align-items: center; font-weight: 650; font-size: 19px; white-space: nowrap; }
.uim-u09 .n-hl { position: absolute; left: 44px; top: 124px; font-weight: 750; font-size: 54px; line-height: 1.08; letter-spacing: -.035em; }
.uim-u09 .n-hl .ln { display: block; width: fit-content; white-space: nowrap; }
.uim-u09 .n-sub { position: absolute; left: 44px; top: 254px; font-weight: 500; font-size: 24px; line-height: 1.3; color: var(--uim-muted); white-space: nowrap; }
.uim-u09 .n-cta { position: absolute; left: 44px; top: 312px; display: flex; gap: 12px; }
.uim-u09 .n-cta div { height: 56px; padding: 0 28px; border-radius: 999px; display: flex; align-items: center; font-weight: 650; font-size: 22px; white-space: nowrap; }
.uim-u09 .c1 { background: var(--uim-ink); color: #FFF; }
.uim-u09 .c2 { background: #FFF; box-shadow: inset 0 0 0 1.5px var(--uim-line); }
.uim-u09 .n-feat { position: absolute; left: 44px; top: 416px; display: flex; flex-direction: column; gap: 10px; font-weight: 600; font-size: 20px; line-height: 1.3; }
.uim-u09 .n-feat span { display: flex; align-items: center; gap: 12px; white-space: nowrap; width: fit-content; }
.uim-u09 .n-feat i { width: 10px; height: 10px; border-radius: 50%; background: var(--uim-accent); }
.uim-u09 .n-art { position: absolute; left: 500px; top: 112px; width: 360px; height: 416px; border-radius: 28px; background: var(--uim-fill); overflow: hidden; }
.uim-u09 .sun { position: absolute; left: 150px; top: 54px; width: 170px; height: 170px; border-radius: 50%; background: var(--uim-accent); }
.uim-u09 .slab { position: absolute; left: 40px; top: 210px; width: 250px; height: 140px; border-radius: 24px; background: var(--uim-ink); }
.uim-u09 .pebble { position: absolute; left: 250px; top: 292px; width: 80px; height: 80px; border-radius: 50%; background: #FFF; box-shadow: inset 0 0 0 1.5px var(--uim-line); }

/* the handle: one wrapper moved with x, so the line and the knob stay together */
.uim-u09 .hdl { position: absolute; left: 0; top: 0; bottom: 0; width: 0; }
.uim-u09 .hdl .ln { position: absolute; left: -2px; top: 0; bottom: 0; width: 4px; background: var(--uim-accent); box-shadow: 0 0 0 1.5px #FFF; }
.uim-u09 .kn { position: absolute; left: -34px; top: 268px; width: 68px; height: 68px; border-radius: 50%; background: #FFF; box-shadow: 0 6px 18px rgba(12, 12, 13, .28), 0 0 0 3px var(--uim-accent); display: grid; place-items: center; }
.uim-u09 .kn svg { width: 30px; height: 30px; }

/* labels and the result chip in a row under the frame */
.uim-u09 .lbl { position: absolute; top: 686px; height: 56px; padding: 0 22px 0 18px; border-radius: 999px; background: #FFF; box-shadow: inset 0 0 0 1.5px var(--uim-line); display: flex; align-items: center; gap: 12px; font-weight: 650; font-size: 22px; white-space: nowrap; }
.uim-u09 .lbl i { width: 12px; height: 12px; border-radius: 50%; background: #B4B4AE; }
.uim-u09 .lbl.b { left: 40px; }
.uim-u09 .lbl.a { right: 40px; }
.uim-u09 .lbl.a i { background: var(--uim-accent); }
.uim-u09 .chiprow { position: absolute; left: 0; right: 0; top: 682px; display: flex; justify-content: center; pointer-events: none; }
.uim-u09 .chip { height: 64px; padding: 0 28px 0 15px; border-radius: 999px; background: #FFF; box-shadow: var(--uim-card-shadow), inset 0 0 0 1.5px var(--uim-line); display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.uim-u09 .ar { width: 34px; height: 34px; border-radius: 50%; background: var(--uim-good); display: grid; place-items: center; }
.uim-u09 .ar svg { width: 18px; height: 18px; }
.uim-u09 .cv { font-weight: 750; font-size: 30px; line-height: 1.25; letter-spacing: -.02em; color: var(--uim-good-text); font-variant-numeric: tabular-nums; min-width: 70px; }
.uim-u09 .cl { font-weight: 600; font-size: 22px; color: var(--uim-muted); }

/* u10 Pricing Toggle */
/* u10 Pricing Toggle · scoped to its stage (984x800) */
.uim-u10 .head { position: absolute; left: 0; right: 0; top: 44px; text-align: center; }
.uim-u10 .h { font-weight: 750; font-size: 46px; line-height: 1.15; letter-spacing: -.03em; white-space: nowrap; }
.uim-u10 .s { margin-top: 8px; font-weight: 500; font-size: 22px; line-height: 1.3; color: var(--uim-muted); white-space: nowrap; }
.uim-u10 .sw { position: absolute; left: 50%; top: 168px; width: 388px; height: 64px; margin-left: -194px; border-radius: 999px; background: var(--uim-fill);
  box-shadow: inset 0 0 0 1px var(--uim-line); }
.uim-u10 .thumb { position: absolute; left: 6px; top: 6px; width: 188px; height: 52px; border-radius: 999px; background: #FFF;
  box-shadow: 0 6px 14px -6px rgba(12, 12, 13, .35), 0 0 0 1px var(--uim-line); }
.uim-u10 .opt { position: absolute; top: 6px; width: 188px; height: 52px; display: flex; align-items: center; justify-content: center;
  font-weight: 650; font-size: 23px; letter-spacing: -.01em; white-space: nowrap; }
.uim-u10 .o1 { left: 6px; color: var(--uim-ink); }
.uim-u10 .o2 { left: 194px; color: var(--uim-muted); }
.uim-u10 .badge { position: absolute; left: 50%; top: 174px; margin-left: 214px; height: 52px; padding: 0 20px; border-radius: 999px; background: var(--uim-accent);
  color: var(--uim-ink); display: flex; align-items: center; font-weight: 700; font-size: 22px; letter-spacing: -.005em; white-space: nowrap; transform-origin: 0 50%; }
.uim-u10 .cards { position: absolute; left: 36px; top: 262px; width: 912px; display: flex; gap: 24px; }
.uim-u10 .card { position: relative; width: 288px; height: 490px; border-radius: 30px; background: #FFF; padding: 28px 28px 0;
  box-shadow: var(--uim-card-shadow), inset 0 0 0 1.5px var(--uim-line); }
.uim-u10 .card.pop { box-shadow: var(--uim-card-shadow), inset 0 0 0 2px var(--uim-ink); }
.uim-u10 .nm { height: 36px; display: flex; align-items: center; justify-content: space-between; font-weight: 650; font-size: 26px; letter-spacing: -.015em; }
.uim-u10 .tag { height: 32px; padding: 0 12px; border-radius: 999px; background: var(--uim-accent-soft); color: var(--uim-ink); display: flex; align-items: center;
  font-weight: 650; font-size: 18px; letter-spacing: 0; white-space: nowrap; }
.uim-u10 .pr { margin-top: 20px; height: 96px; display: flex; align-items: flex-start; }
.uim-u10 .cur { margin: 17px 4px 0 0; font-weight: 650; font-size: 30px; line-height: 36px; letter-spacing: -.02em; }
.uim-u10 .digits { display: flex; height: 96px; overflow: hidden; font-weight: 750; font-size: 80px; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.uim-u10 .col { display: block; height: 96px; overflow: hidden; }
.uim-u10 .strip { display: block; will-change: transform; }
.uim-u10 .strip i { display: block; height: 96px; line-height: 96px; font-style: normal; text-align: center; }
.uim-u10 .per { align-self: flex-end; margin: 0 0 16px 8px; font-weight: 550; font-size: 22px; line-height: 28px; color: var(--uim-muted); white-space: nowrap; }
.uim-u10 .note { position: relative; margin-top: 4px; height: 28px; font-weight: 500; font-size: 20px; line-height: 28px; color: var(--uim-muted); white-space: nowrap; }
.uim-u10 .note span { position: absolute; left: 0; top: 0; }
.uim-u10 .rule { margin-top: 26px; height: 1px; background: var(--uim-line); }
.uim-u10 .feat { margin-top: 20px; display: flex; flex-direction: column; gap: 0; }
.uim-u10 .feat div { height: 42px; display: flex; align-items: center; gap: 12px; font-weight: 550; font-size: 21px; letter-spacing: -.005em; white-space: nowrap; }
.uim-u10 .feat svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--uim-accent); }
.uim-u10 .btn { position: absolute; left: 28px; right: 28px; bottom: 28px; height: 58px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
  font-weight: 650; font-size: 22px; letter-spacing: -.005em; background: #FFF; box-shadow: inset 0 0 0 1.5px var(--uim-line); white-space: nowrap; }
.uim-u10 .pop .btn { background: var(--uim-accent); box-shadow: none; color: var(--uim-ink); }

/* u11 FAQ Accordion */
/* u11 FAQ Accordion · scoped to its stage (984x800) */
.uim-u11 .head { position: absolute; left: 0; right: 0; top: 84px; text-align: center; }
.uim-u11 .h { font-weight: 750; font-size: 46px; line-height: 1.15; letter-spacing: -.03em; white-space: nowrap; }
.uim-u11 .s { margin-top: 8px; font-weight: 500; font-size: 22px; line-height: 1.3; color: var(--uim-muted); white-space: nowrap; }
.uim-u11 .list { position: absolute; left: 92px; top: 220px; width: 800px; border-radius: 30px; background: #FFF; overflow: hidden;
  border: 1.5px solid var(--uim-line); box-shadow: var(--uim-card-shadow); }
.uim-u11 .row { position: relative; background: #FFF; }
.uim-u11 .row + .row { border-top: 1px solid var(--uim-line); }
.uim-u11 .q { height: 96px; padding: 0 30px 0 40px; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  font-weight: 650; font-size: 26px; line-height: 1.25; letter-spacing: -.015em; white-space: nowrap; }
.uim-u11 .chev { width: 46px; height: 46px; flex: 0 0 auto; border-radius: 50%; background: var(--uim-fill); display: grid; place-items: center; }
.uim-u11 .chev svg { width: 20px; height: 20px; color: var(--uim-ink); }
.uim-u11 .body { height: 0; overflow: hidden; }
.uim-u11 .in { padding: 0 120px 30px 40px; font-weight: 500; font-size: 22px; line-height: 1.5; letter-spacing: -.005em; color: var(--uim-muted); }

/* u12 Signup Success */
/* u12 Signup Success · scoped to its stage (984x800) */
.uim-u12 .bg { position: absolute; inset: 1px; border-radius: 39px; background: var(--uim-fill); }
.uim-u12 .card { position: absolute; left: 132px; top: 116px; width: 720px; height: 568px; border-radius: 40px; background: #FFF;
  box-shadow: var(--uim-card-shadow), inset 0 0 0 1.5px var(--uim-line); }
.uim-u12 .tile { position: absolute; left: 330px; top: 44px; width: 60px; height: 60px; border-radius: 18px; background: var(--uim-accent); display: grid; place-items: center;
  box-shadow: 0 10px 20px -10px var(--uim-accent); }
.uim-u12 .tile svg { width: 28px; height: 28px; fill: #FFF; }
.uim-u12 .t { position: absolute; left: 0; right: 0; top: 126px; text-align: center; }
.uim-u12 .tt { font-weight: 750; font-size: 46px; line-height: 1.15; letter-spacing: -.03em; white-space: nowrap; }
.uim-u12 .ts { margin-top: 10px; font-weight: 500; font-size: 24px; line-height: 1.3; color: var(--uim-muted); white-space: nowrap; }
.uim-u12 .field { position: absolute; left: 52px; top: 272px; width: 616px; height: 80px; }
.uim-u12 .ring { position: absolute; left: -7px; top: -7px; right: -7px; bottom: -7px; border-radius: 999px; background: var(--uim-accent-soft); opacity: 0; }
.uim-u12 .inp { position: absolute; inset: 0; border-radius: 999px; background: #FFF; border: 2px solid var(--uim-line); display: flex; align-items: center; gap: 14px; padding: 0 32px; }
.uim-u12 .inp svg { width: 28px; height: 28px; flex: 0 0 auto; color: var(--uim-muted); }
.uim-u12 .ph { position: absolute; left: 74px; top: 0; height: 76px; display: flex; align-items: center; font-weight: 500; font-size: 28px; color: var(--uim-muted); white-space: nowrap; }
.uim-u12 .ty { font-weight: 550; font-size: 28px; line-height: 36px; letter-spacing: -.01em; white-space: nowrap; }
.uim-u12 .caret { width: 3px; height: 36px; margin-left: -10px; border-radius: 2px; background: var(--uim-accent); opacity: 0; flex: 0 0 auto; }
.uim-u12 .brow { position: absolute; left: 52px; top: 376px; width: 616px; height: 80px; display: flex; justify-content: center; }
.uim-u12 .btn { position: relative; width: 616px; height: 80px; border-radius: 999px; background: var(--uim-ink); }
.uim-u12 .lab { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #FFF; font-weight: 650; font-size: 27px; letter-spacing: -.005em; white-space: nowrap; }
.uim-u12 .btn svg { position: absolute; left: 20px; top: 20px; width: 40px; height: 40px; }
.uim-u12 .spin { opacity: 0; }
.uim-u12 .spin circle { fill: none; stroke: #FFF; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 62 26; }
.uim-u12 .chk path { fill: none; stroke: #FFF; stroke-width: 4.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 28 28; stroke-dashoffset: 28; }
.uim-u12 .pulse { position: absolute; left: 50%; top: 0; width: 80px; height: 80px; margin-left: -40px; border-radius: 50%; border: 3px solid var(--uim-good); opacity: 0; }
.uim-u12 .note { position: absolute; left: 0; right: 0; top: 488px; text-align: center; font-weight: 500; font-size: 20px; line-height: 1.3; color: var(--uim-muted); white-space: nowrap; }
.uim-u12 .burst { position: absolute; left: 492px; top: 532px; width: 0; height: 0; }
.uim-u12 .cf { position: absolute; left: 0; top: 0; width: 0; height: 0; transform: scale(0); }
.uim-u12 .ci { position: absolute; border-radius: 2px; }

/* u13 Command Palette */
/* u13 Command Palette · scoped to its stage (984x800), dark theme */
/* the app behind: a quiet skeleton, never text */
.uim-u13 .side { position: absolute; left: 0; top: 0; bottom: 0; width: 200px; background: #151518; border-right: 1px solid var(--uim-dark-line); }
.uim-u13 .sk { position: absolute; border-radius: 9px; background: #222226; }
.uim-u13 .sk.lg { background: #1B1B1E; box-shadow: inset 0 0 0 1px #26262B; border-radius: 24px; }
.uim-u13 .sk.mk { background: var(--uim-accent); opacity: .9; border-radius: 11px; }
.uim-u13 .scrim { position: absolute; inset: 0; background: rgba(5, 5, 6, .5); opacity: 0; }

/* the shortcut chip: two keycaps and a hint */
.uim-u13 .hero { position: absolute; left: 0; right: 0; top: 292px; display: flex; flex-direction: column; align-items: center; will-change: transform, opacity; }
.uim-u13 .keys { display: flex; gap: 18px; }
.uim-u13 .key { position: relative; width: 104px; height: 112px; }
.uim-u13 .edge { position: absolute; left: 0; top: 8px; width: 104px; height: 104px; border-radius: 26px; background: #6B6B72; }
.uim-u13 .face { position: absolute; left: 0; top: 0; width: 104px; height: 104px; border-radius: 26px; background: #F5F5F2; color: var(--uim-ink);
  display: grid; place-items: center; font-weight: 750; font-size: 50px; line-height: 1.2; letter-spacing: -.02em; }
.uim-u13 .face svg { width: 48px; height: 48px; }
.uim-u13 .hint { margin-top: 34px; font-weight: 550; font-size: 26px; line-height: 1.3; letter-spacing: -.01em; color: var(--uim-soft); white-space: nowrap; }

/* the palette */
.uim-u13 .pal { position: absolute; left: 142px; top: 150px; width: 700px; border-radius: 30px; background: var(--uim-dark-2); overflow: hidden;
  box-shadow: inset 0 0 0 1px #34343A, 0 50px 90px -30px rgba(0, 0, 0, .85); opacity: 0; will-change: transform, opacity; }
.uim-u13 .srch { position: relative; height: 92px; padding: 0 30px; display: flex; align-items: center; gap: 18px; border-bottom: 1px solid var(--uim-dark-line); }
.uim-u13 .srch svg { width: 30px; height: 30px; flex: 0 0 auto; color: var(--uim-soft); }
.uim-u13 .ph { position: absolute; left: 92px; top: 0; height: 92px; display: flex; align-items: center; font-weight: 500; font-size: 28px; letter-spacing: -.01em; color: var(--uim-soft); white-space: nowrap; }
.uim-u13 .typed { font-weight: 550; font-size: 28px; line-height: 1.3; letter-spacing: -.01em; white-space: nowrap; }
.uim-u13 .caret { width: 3px; height: 36px; margin-left: 2px; border-radius: 2px; background: var(--uim-accent); flex: 0 0 auto; }
.uim-u13 .grp { height: 52px; padding: 0 30px; display: flex; align-items: center; font: 600 18px/1.3 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--uim-soft); }
.uim-u13 .rows { padding: 0 12px 12px; }
.uim-u13 .row { height: 68px; overflow: hidden; }
.uim-u13 .ri { position: relative; height: 68px; border-radius: 18px; display: flex; align-items: center; gap: 18px; padding: 0 18px 0 12px; }
.uim-u13 .hl { position: absolute; inset: 0; border-radius: 18px; background: #2A2A2F; opacity: 0; }
.uim-u13 .ring { position: absolute; inset: 0; border-radius: 18px; border: 2px solid var(--uim-accent); box-shadow: 0 0 0 5px var(--uim-accent-soft); opacity: 0; pointer-events: none; }
.uim-u13 .ic { position: relative; width: 44px; height: 44px; flex: 0 0 auto; border-radius: 13px; background: #26262B; color: #F5F5F2; display: grid; place-items: center; }
.uim-u13 .ic svg { width: 24px; height: 24px; }
.uim-u13 .lb { position: relative; flex: 1 1 auto; font-weight: 600; font-size: 26px; line-height: 1.3; letter-spacing: -.015em; white-space: nowrap; }
.uim-u13 .lb mark { background: transparent; color: inherit; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 3px; text-underline-offset: 6px; }
.uim-u13 .kb { position: relative; min-width: 42px; height: 42px; padding: 0 10px; border-radius: 11px; background: var(--uim-dark-2); box-shadow: inset 0 0 0 1px #3A3A41; display: grid; place-items: center; font: 600 18px/1.3 'JetBrains Mono', ui-monospace, monospace; color: var(--uim-soft); }
.uim-u13 .ok { position: absolute; right: 22px; top: 18px; width: 32px; height: 32px; border-radius: 50%; background: var(--uim-accent); color: var(--uim-ink); display: grid; place-items: center; opacity: 0; }
.uim-u13 .ok svg { width: 18px; height: 18px; }

/* the confirmation */
.uim-u13 .toast { position: absolute; left: 0; right: 0; display: flex; justify-content: center; opacity: 0; }
.uim-u13 .tp { height: 68px; padding: 0 30px 0 18px; border-radius: 999px; background: #F5F5F2; color: var(--uim-ink); display: flex; align-items: center; gap: 14px; font-weight: 650; font-size: 24px; line-height: 1.3; letter-spacing: -.01em; white-space: nowrap;
  box-shadow: 0 24px 40px -18px rgba(0, 0, 0, .7); }
.uim-u13 .tc { width: 36px; height: 36px; border-radius: 50%; background: var(--uim-accent); color: var(--uim-ink); display: grid; place-items: center; }
.uim-u13 .tc svg { width: 20px; height: 20px; }

/* u14 AI Answer */
/* u14 AI Answer · scoped to its stage (984x800), light theme */
.uim-u14 .top { position: absolute; left: 0; right: 0; top: 0; height: 92px; border-bottom: 1px solid var(--uim-line); }
.uim-u14 .who { position: absolute; left: 40px; top: 0; height: 92px; display: flex; align-items: center; gap: 16px; font-weight: 750; font-size: 28px; line-height: 1.3; letter-spacing: -.02em; }
.uim-u14 .av { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; background: var(--uim-accent); color: var(--uim-ink); display: grid; place-items: center; }
.uim-u14 .av svg { width: 26px; height: 26px; fill: currentColor; }
.uim-u14 .more { position: absolute; right: 40px; top: 22px; width: 48px; height: 48px; border-radius: 50%; background: var(--uim-fill); display: grid; place-items: center; }
.uim-u14 .more svg { width: 24px; height: 24px; fill: var(--uim-ink); }

.uim-u14 .q { position: absolute; right: 40px; top: 132px; max-width: 640px; padding: 18px 30px; border-radius: 30px 30px 8px 30px; background: var(--uim-ink); color: #FFF;
  font-weight: 550; font-size: 27px; line-height: 1.35; letter-spacing: -.012em; transform-origin: 100% 100%; will-change: transform, opacity; }

.uim-u14 .a { position: absolute; left: 40px; right: 40px; top: 252px; display: flex; gap: 22px; align-items: flex-start; }
.uim-u14 .a .av { width: 48px; height: 48px; margin-top: 2px; }
.uim-u14 .col { flex: 1 1 auto; min-width: 0; position: relative; }
.uim-u14 .txt { font-weight: 500; font-size: 28px; line-height: 1.5; letter-spacing: -.012em; color: var(--uim-ink); }
.uim-u14 .w { display: inline-block; }
.uim-u14 .dots { position: absolute; left: 4px; top: 14px; display: flex; gap: 9px; }
.uim-u14 .dots i { width: 12px; height: 12px; border-radius: 50%; background: #B9B9B3; }
.uim-u14 .src { margin-top: 26px; display: flex; }
.uim-u14 .chip { height: 52px; padding: 0 22px 0 16px; border-radius: 999px; background: var(--uim-fill); box-shadow: inset 0 0 0 1px var(--uim-line); display: flex; align-items: center; gap: 12px;
  font-weight: 600; font-size: 21px; line-height: 1.3; letter-spacing: -.005em; white-space: nowrap; }
.uim-u14 .chip svg { width: 24px; height: 24px; flex: 0 0 auto; color: var(--uim-muted); }
.uim-u14 .acts { margin-top: 18px; display: flex; gap: 12px; }
.uim-u14 .btn { height: 52px; padding: 0 22px 0 16px; border-radius: 999px; background: #FFF; box-shadow: inset 0 0 0 1.5px var(--uim-line); display: flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: 21px; line-height: 1.3; letter-spacing: -.005em; white-space: nowrap; }
.uim-u14 .btn svg { width: 22px; height: 22px; flex: 0 0 auto; color: var(--uim-muted); }

.uim-u14 .comp { position: absolute; left: 40px; right: 40px; bottom: 40px; height: 80px; border-radius: 999px; background: var(--uim-fill); box-shadow: inset 0 0 0 1.5px var(--uim-line);
  display: flex; align-items: center; padding: 0 14px 0 34px; font-weight: 500; font-size: 25px; line-height: 1.3; color: var(--uim-muted); white-space: nowrap; }
.uim-u14 .send { margin-left: auto; width: 54px; height: 54px; border-radius: 50%; background: var(--uim-accent); color: var(--uim-ink); display: grid; place-items: center; }
.uim-u14 .send svg { width: 26px; height: 26px; }

/* u15 Kanban Move */
/* u15 Kanban Move · scoped to its stage (984x800), light theme */
.uim-u15 .bt { position: absolute; left: 36px; top: 44px; font-weight: 750; font-size: 38px; line-height: 1.2; letter-spacing: -.03em; white-space: nowrap; }
.uim-u15 .col { position: absolute; top: 132px; width: 292px; height: 570px; border-radius: 28px; background: var(--uim-fill); box-shadow: inset 0 0 0 1px var(--uim-line); }
.uim-u15 .ch { position: absolute; left: 22px; right: 18px; top: 0; height: 72px; display: flex; align-items: center; justify-content: space-between; }
.uim-u15 .cn { font-weight: 650; font-size: 25px; line-height: 1.3; letter-spacing: -.015em; white-space: nowrap; }
.uim-u15 .ct { min-width: 42px; height: 38px; padding: 0 12px; border-radius: 999px; background: #FFF; box-shadow: inset 0 0 0 1px var(--uim-line); display: grid; place-items: center;
  font-weight: 700; font-size: 20px; line-height: 1.3; font-variant-numeric: tabular-nums; }
.uim-u15 .slot { position: absolute; width: 264px; height: 124px; border-radius: 20px; border: 2px dashed var(--uim-accent); background: var(--uim-accent-soft); opacity: 0; }

.uim-u15 .card { position: absolute; width: 264px; height: 124px; border-radius: 20px; background: #FFF; box-shadow: inset 0 0 0 1px var(--uim-line), 0 1px 2px rgba(12, 12, 13, .06); z-index: 1; will-change: transform, opacity; }
.uim-u15 .card.mv { z-index: 3; transform-origin: 50% 50%; }
.uim-u15 .sh { position: absolute; inset: 0; border-radius: 20px; box-shadow: 0 30px 46px -16px rgba(12, 12, 13, .40), 0 8px 16px rgba(12, 12, 13, .10); opacity: 0; pointer-events: none; }
.uim-u15 .rg { position: absolute; inset: 0; border-radius: 20px; border: 2px solid var(--uim-accent); opacity: 0; pointer-events: none; }
.uim-u15 .ti { position: absolute; left: 20px; right: 20px; top: 18px; font-weight: 650; font-size: 23px; line-height: 1.3; letter-spacing: -.015em; white-space: nowrap; }
.uim-u15 .tg { position: absolute; left: 20px; bottom: 18px; height: 38px; padding: 0 14px; border-radius: 999px; background: var(--uim-fill); display: flex; align-items: center; font-weight: 600; font-size: 18px; line-height: 1.3; color: var(--uim-muted); white-space: nowrap; }
.uim-u15 .pp { position: absolute; right: 18px; bottom: 16px; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 18px; line-height: 1.2; }
.uim-u15 .p0 { background: var(--uim-ink); color: #FFF; }
.uim-u15 .p1 { background: #E4E4DE; color: var(--uim-ink); }
.uim-u15 .p2 { background: color-mix(in srgb, var(--uim-accent) 18%, #FFF); color: var(--uim-ink); }

/* u16 Notification Center */
/* u16 Notification Center · scoped to its stage (984x800), dark theme */
.uim-u16 .bar { position: absolute; left: 0; right: 0; top: 0; height: 88px; border-bottom: 1px solid var(--uim-dark-line); }
.uim-u16 .mk { position: absolute; left: 40px; top: 26px; width: 36px; height: 36px; border-radius: 11px; background: var(--uim-accent); }
.uim-u16 .br { position: absolute; left: 92px; top: 0; height: 88px; display: flex; align-items: center; font-weight: 750; font-size: 28px; line-height: 1.3; letter-spacing: -.02em; white-space: nowrap; }
.uim-u16 .sk { position: absolute; border-radius: 9px; background: #222226; }
.uim-u16 .sk.lg { background: var(--uim-dark-2); box-shadow: inset 0 0 0 1px #26262B; border-radius: 24px; }

.uim-u16 .bell { position: absolute; right: 40px; top: 16px; width: 56px; height: 56px; border-radius: 50%; background: var(--uim-dark-2); box-shadow: inset 0 0 0 1px var(--uim-dark-line); display: grid; place-items: center; color: #F5F5F2; }
.uim-u16 .bell svg { width: 28px; height: 28px; }
.uim-u16 .badge { position: absolute; right: -8px; top: -8px; min-width: 30px; height: 30px; padding: 0 8px; border-radius: 999px; background: var(--uim-accent); color: var(--uim-ink); box-shadow: 0 0 0 4px var(--uim-dark);
  display: grid; place-items: center; font-weight: 750; font-size: 18px; line-height: 1.2; font-variant-numeric: tabular-nums; }

.uim-u16 .panel { position: absolute; right: 40px; top: 112px; width: 600px; border-radius: 30px; background: var(--uim-dark-2); overflow: hidden; transform-origin: 100% 0;
  box-shadow: inset 0 0 0 1px #34343A, 0 50px 90px -30px rgba(0, 0, 0, .85); opacity: 0; will-change: transform, opacity; }
.uim-u16 .ph { height: 92px; padding: 0 24px 0 32px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--uim-dark-line); }
.uim-u16 .pt { font-weight: 700; font-size: 28px; line-height: 1.3; letter-spacing: -.02em; white-space: nowrap; }
.uim-u16 .mark { position: relative; height: 50px; padding: 0 22px; border-radius: 999px; background: #26262B; box-shadow: inset 0 0 0 1px #3A3A41; display: flex; align-items: center; font-weight: 650; font-size: 20px; line-height: 1.3; white-space: nowrap; }
.uim-u16 .flash { position: absolute; inset: 0; border-radius: 999px; border: 2px solid var(--uim-accent); box-shadow: 0 0 0 5px var(--uim-accent-soft); opacity: 0; pointer-events: none; }
.uim-u16 .list { padding-bottom: 12px; }
.uim-u16 .item { position: relative; height: 96px; display: flex; align-items: center; gap: 18px; padding: 0 28px; will-change: transform, opacity; }
.uim-u16 .item + .item::before { content: ""; position: absolute; left: 28px; right: 28px; top: 0; height: 1px; background: var(--uim-dark-line); }
.uim-u16 .tint { position: absolute; inset: 0; background: rgba(255, 255, 255, .04); pointer-events: none; }
.uim-u16 .av { position: relative; flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-weight: 750; font-size: 20px; line-height: 1.2; }
.uim-u16 .t0 { background: #F5F5F2; color: var(--uim-ink); }
.uim-u16 .t1 { background: #8A8A91; color: var(--uim-ink); }
.uim-u16 .t2 { background: #3A3A41; color: #F5F5F2; }
.uim-u16 .t3 { background: #D4D4CE; color: var(--uim-ink); }
.uim-u16 .t4 { background: #52525A; color: #F5F5F2; }
.uim-u16 .tx { position: relative; flex: 1 1 auto; min-width: 0; }
.uim-u16 .l1 { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.uim-u16 .nm { font-weight: 650; font-size: 24px; line-height: 1.3; letter-spacing: -.015em; white-space: nowrap; }
.uim-u16 .tm { font: 500 18px/1.3 'JetBrains Mono', ui-monospace, monospace; color: var(--uim-soft); white-space: nowrap; }
.uim-u16 .ac { font-weight: 500; font-size: 22px; line-height: 1.3; letter-spacing: -.005em; color: var(--uim-soft); white-space: nowrap; }
.uim-u16 .dot { position: relative; flex: 0 0 auto; width: 14px; height: 14px; margin-left: -2px; border-radius: 50%; background: var(--uim-accent); }
.uim-u16 .dot.none { background: transparent; }

/* u17 Booking Picker */
/* u17 Booking Picker · scoped to its stage (984x800), light theme */
.uim-u17 .card { position: absolute; left: 82px; top: 40px; width: 820px; height: 720px; border-radius: 32px; background: #FFF;
  border: 1.5px solid var(--uim-line); box-shadow: var(--uim-card-shadow); }
.uim-u17 .card > * { position: absolute; }

/* service header */
.uim-u17 .hd { left: 40px; right: 40px; top: 36px; height: 56px; display: flex; align-items: center; gap: 18px; }
.uim-u17 .tile { width: 56px; height: 56px; flex: 0 0 auto; border-radius: 16px; background: var(--uim-accent); display: grid; place-items: center; }
.uim-u17 .tile svg { width: 28px; height: 28px; }
.uim-u17 .sv { font-weight: 700; font-size: 26px; line-height: 1.25; letter-spacing: -.02em; white-space: nowrap; }
.uim-u17 .vn { font-weight: 500; font-size: 20px; line-height: 1.3; color: var(--uim-muted); white-space: nowrap; }

/* month bar, weekdays, day grid */
.uim-u17 .mo { left: 40px; right: 40px; top: 116px; height: 40px; display: flex; align-items: center; justify-content: space-between; }
.uim-u17 .mt { font-weight: 700; font-size: 24px; line-height: 1.25; letter-spacing: -.015em; white-space: nowrap; }
.uim-u17 .nav { display: flex; gap: 10px; }
.uim-u17 .nv { width: 40px; height: 40px; border-radius: 50%; background: var(--uim-fill); display: grid; place-items: center; }
.uim-u17 .nv svg { width: 18px; height: 18px; }
.uim-u17 .wk { left: 40px; right: 40px; top: 166px; height: 28px; display: grid; grid-template-columns: repeat(7, 1fr); }
.uim-u17 .wk i { font: 600 18px/28px 'JetBrains Mono', ui-monospace, monospace; font-style: normal; letter-spacing: .04em; text-transform: uppercase; text-align: center; color: var(--uim-muted); }
.uim-u17 .grid { left: 40px; right: 40px; top: 196px; display: grid; grid-template-columns: repeat(7, 1fr); }
.uim-u17 .d { position: relative; display: grid; place-items: center; }
.uim-u17 .d em { position: relative; z-index: 2; font-style: normal; font-weight: 600; font-size: 22px; line-height: 1.25; font-variant-numeric: tabular-nums; }
.uim-u17 .d.ok::before { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: var(--uim-fill); }
.uim-u17 .d.off em { font-weight: 500; color: var(--uim-muted); }
.uim-u17 .sel, .uim-u17 .rip { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; }
.uim-u17 .sel { z-index: 1; background: var(--uim-accent); }
.uim-u17 .rip { z-index: 0; border: 3px solid var(--uim-accent); }

/* time slots: a dashed hint first, then four chips */
.uim-u17 .sl-l { left: 40px; top: 490px; font: 600 18px/24px 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--uim-muted); white-space: nowrap; }
.uim-u17 .ph { left: 40px; right: 40px; top: 524px; height: 56px; border-radius: 16px; border: 1.5px dashed #C9C9C2; display: flex; align-items: center; justify-content: center;
  font-weight: 500; font-size: 20px; line-height: 1.3; color: var(--uim-muted); white-space: nowrap; }
.uim-u17 .chips { left: 40px; right: 40px; top: 524px; height: 56px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.uim-u17 .chip { height: 56px; border-radius: 16px; background: #FFF; box-shadow: inset 0 0 0 1.5px var(--uim-line); display: flex; align-items: center; justify-content: center;
  font-weight: 650; font-size: 22px; line-height: 1.25; letter-spacing: -.005em; font-variant-numeric: tabular-nums; }

/* the button: three stacked layers (idle, ready, booked) */
.uim-u17 .bt { left: 40px; right: 40px; top: 620px; height: 64px; }
.uim-u17 .bt > div { position: absolute; inset: 0; border-radius: 20px; display: flex; align-items: center; justify-content: center; gap: 14px;
  font-weight: 650; font-size: 24px; line-height: 1.25; letter-spacing: -.01em; white-space: nowrap; }
.uim-u17 .b1 { background: var(--uim-fill); color: var(--uim-muted); }
.uim-u17 .b2 { background: var(--uim-ink); color: #FFF; }
.uim-u17 .b3 { background: #E5F4EB; color: var(--uim-ink); }
.uim-u17 .ok-c { width: 36px; height: 36px; flex: 0 0 auto; border-radius: 50%; background: var(--uim-good); display: grid; place-items: center; }
.uim-u17 .ok-c svg { width: 20px; height: 20px; }

/* u18 Upload Progress */
/* u18 Upload Progress · scoped to its stage (984x800), light theme */
.uim-u18 .card { position: absolute; left: 82px; top: 64px; width: 820px; height: 672px; border-radius: 32px; background: #FFF;
  border: 1.5px solid var(--uim-line); box-shadow: var(--uim-card-shadow); }
.uim-u18 .card > * { position: absolute; }
.uim-u18 .hd { left: 40px; right: 40px; top: 34px; }
.uim-u18 .h { font-weight: 750; font-size: 30px; line-height: 1.25; letter-spacing: -.025em; white-space: nowrap; }
.uim-u18 .s { margin-top: 2px; font-weight: 500; font-size: 21px; line-height: 1.3; color: var(--uim-muted); white-space: nowrap; }

/* the dashed drop zone, with the empty hint in the middle */
.uim-u18 .zone { left: 40px; right: 40px; top: 128px; height: 420px; border-radius: 26px; border: 2px dashed #C9C9C2; background: #FAFAF8; }
.uim-u18 .glow { position: absolute; inset: 0; border-radius: 24px; background: var(--uim-accent-soft); }
.uim-u18 .hint { position: absolute; left: 0; right: 0; top: 50%; margin-top: -88px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.uim-u18 .hi { width: 72px; height: 72px; border-radius: 50%; background: var(--uim-accent-soft); display: grid; place-items: center; }
.uim-u18 .hi svg { width: 32px; height: 32px; }
.uim-u18 .ht { margin-top: 18px; font-weight: 650; font-size: 26px; line-height: 1.25; letter-spacing: -.015em; white-space: nowrap; }
.uim-u18 .hs { margin-top: 4px; font-weight: 500; font-size: 20px; line-height: 1.3; color: var(--uim-muted); white-space: nowrap; }

/* file rows */
.uim-u18 .row { position: absolute; left: 28px; right: 28px; height: 108px; border-radius: 22px; background: #FFF; padding: 0 24px; display: flex; align-items: center; gap: 20px;
  box-shadow: 0 0 0 1px var(--uim-line), 0 12px 24px -14px rgba(12, 12, 13, .28); }
.uim-u18 .r1 { top: 28px; } .uim-u18 .r2 { top: 156px; } .uim-u18 .r3 { top: 284px; }
.uim-u18 .ic { width: 64px; height: 64px; flex: 0 0 auto; border-radius: 18px; background: var(--uim-fill); display: grid; place-items: center; }
.uim-u18 .ic svg { width: 32px; height: 32px; }
.uim-u18 .mid { flex: 1 1 auto; min-width: 0; }
.uim-u18 .nm { font-weight: 650; font-size: 24px; line-height: 1.25; letter-spacing: -.015em; white-space: nowrap; }
.uim-u18 .mt { font-weight: 500; font-size: 20px; line-height: 1.3; color: var(--uim-muted); white-space: nowrap; }
.uim-u18 .bar { margin-top: 12px; height: 8px; border-radius: 4px; background: var(--uim-line); overflow: hidden; }
.uim-u18 .fl { width: 0; height: 100%; border-radius: 4px; background: var(--uim-accent); }
.uim-u18 .end { position: relative; flex: 0 0 auto; width: 76px; height: 44px; }
.uim-u18 .pc { position: absolute; right: 0; top: 0; line-height: 44px; font-weight: 700; font-size: 24px; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.uim-u18 .ck { position: absolute; right: 0; top: 2px; width: 40px; height: 40px; border-radius: 50%; background: var(--uim-good); display: grid; place-items: center; }
.uim-u18 .ck svg { width: 22px; height: 22px; }

/* summary line */
.uim-u18 .sum { left: 40px; right: 40px; top: 578px; height: 56px; display: flex; align-items: center; gap: 16px; }
.uim-u18 .sum .ck { position: relative; top: 0; right: 0; width: 40px; height: 40px; }
.uim-u18 .dn { font-weight: 700; font-size: 26px; line-height: 1.25; letter-spacing: -.02em; white-space: nowrap; }
.uim-u18 .tot { margin-left: auto; font-weight: 500; font-size: 22px; line-height: 1.3; color: var(--uim-muted); white-space: nowrap; }

/* u19 Settings Cascade */
/* u19 Settings Cascade · scoped to its stage (984x800), light theme */
.uim-u19 .card { position: absolute; left: 82px; top: 36px; width: 820px; height: 640px; border-radius: 32px; background: #FFF;
  border: 1.5px solid var(--uim-line); box-shadow: var(--uim-card-shadow); overflow: hidden; }
.uim-u19 .hd { position: absolute; left: 0; right: 0; top: 0; height: 120px; padding: 0 40px; display: flex; align-items: center; justify-content: space-between; }
.uim-u19 .h { font-weight: 750; font-size: 30px; line-height: 1.25; letter-spacing: -.025em; white-space: nowrap; }
.uim-u19 .s { margin-top: 2px; font-weight: 500; font-size: 21px; line-height: 1.3; color: var(--uim-muted); white-space: nowrap; }
.uim-u19 .cn { height: 44px; padding: 0 18px; border-radius: 999px; background: var(--uim-fill); display: flex; align-items: center; white-space: nowrap;
  font: 600 18px/1.25 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .02em; }
.uim-u19 .cn b { font-weight: 800; }

.uim-u19 .list { position: absolute; left: 0; right: 0; top: 120px; }
.uim-u19 .row { height: 96px; padding: 0 40px; display: flex; align-items: center; gap: 22px; border-top: 1px solid var(--uim-line); }
.uim-u19 .ic { width: 52px; height: 52px; flex: 0 0 auto; border-radius: 16px; background: var(--uim-fill); display: grid; place-items: center; }
.uim-u19 .ic svg { width: 26px; height: 26px; }
.uim-u19 .tx { flex: 1 1 auto; min-width: 0; }
.uim-u19 .nm { font-weight: 650; font-size: 24px; line-height: 1.25; letter-spacing: -.015em; white-space: nowrap; }
.uim-u19 .hp { margin-top: 1px; font-weight: 500; font-size: 20px; line-height: 1.3; color: var(--uim-muted); white-space: nowrap; }

/* the toggle: a track and a knob that slides */
.uim-u19 .tg { position: relative; flex: 0 0 auto; width: 76px; height: 44px; border-radius: 22px; background: #D4D4CE; }
.uim-u19 .kn { position: absolute; left: 4px; top: 4px; width: 36px; height: 36px; border-radius: 50%; background: #FFF; box-shadow: 0 2px 6px rgba(12, 12, 13, .28); }

/* the Saved toast */
.uim-u19 .tw { position: absolute; left: 0; right: 0; top: 704px; display: flex; justify-content: center; pointer-events: none; }
.uim-u19 .toast { height: 64px; padding: 0 30px 0 14px; border-radius: 999px; background: var(--uim-dark); color: #F5F5F2; display: flex; align-items: center; gap: 14px; white-space: nowrap;
  box-shadow: 0 18px 36px -14px rgba(12, 12, 13, .5); }
.uim-u19 .ok-c { width: 36px; height: 36px; flex: 0 0 auto; border-radius: 50%; background: var(--uim-good); display: grid; place-items: center; }
.uim-u19 .ok-c svg { width: 20px; height: 20px; }
.uim-u19 .tt { font-weight: 650; font-size: 24px; line-height: 1.25; letter-spacing: -.01em; }
.uim-u19 .tb { width: 1.5px; height: 26px; background: #3A3A40; }
.uim-u19 .tm { font-weight: 500; font-size: 20px; line-height: 1.3; color: var(--uim-soft); }

/* u20 Theme Switch */
/* u20 Theme Switch · scoped to its stage (984x800), light theme.
   The card exists twice, a light layer and a dark copy on top of it; the dark copy is revealed by a growing circle (clip-path) that starts at the toggle. */
.uim-u20 .card { position: absolute; left: 92px; top: 56px; width: 800px; height: 688px; border-radius: 32px; overflow: hidden; background: #FFF;
  box-shadow: 0 18px 40px -18px rgba(12, 12, 13, .30), 0 1px 3px rgba(12, 12, 13, .06); isolation: isolate; }
.uim-u20 .layer { position: absolute; inset: 0; background: var(--bg); color: var(--fg); box-shadow: inset 0 0 0 1.5px var(--ln); border-radius: 32px; }
.uim-u20 .lt { --bg: #FFFFFF; --fg: var(--uim-ink); --mu: var(--uim-muted); --ln: var(--uim-line); --tile: var(--uim-fill); --bar: #E6E6E0; --gd: var(--uim-good-text); --gdbg: rgba(22, 163, 74, .1); }
.uim-u20 .dk { --bg: #111113; --fg: #F5F5F2; --mu: #A3A3A8; --ln: #2A2A2F; --tile: #1B1B1E; --bar: #2E2E34; --gd: var(--uim-good-bright); --gdbg: rgba(74, 222, 128, .14); will-change: clip-path; }

/* header */
.uim-u20 .av { position: absolute; left: 40px; top: 40px; width: 56px; height: 56px; border-radius: 50%; background: var(--uim-accent); color: var(--uim-ink); display: grid; place-items: center;
  font-weight: 750; font-size: 22px; line-height: 1.25; letter-spacing: -.01em; }
.uim-u20 .who { position: absolute; left: 112px; top: 40px; display: flex; flex-direction: column; align-items: flex-start; }
.uim-u20 .nm { font-weight: 650; font-size: 24px; line-height: 1.25; letter-spacing: -.015em; white-space: nowrap; }
.uim-u20 .rl { font-weight: 500; font-size: 20px; line-height: 1.3; color: var(--mu); white-space: nowrap; }
.uim-u20 .tlab { position: absolute; right: 154px; top: 54px; font: 600 18px/28px 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--mu); white-space: nowrap; }

/* the metric */
.uim-u20 .ml { position: absolute; left: 40px; top: 130px; font-weight: 500; font-size: 22px; line-height: 1.3; color: var(--mu); white-space: nowrap; }
.uim-u20 .mrow { position: absolute; left: 40px; right: 40px; top: 160px; display: flex; align-items: center; gap: 20px; }
.uim-u20 .mv { font-weight: 750; font-size: 72px; line-height: 1.1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.uim-u20 .dl { height: 40px; padding: 0 16px; border-radius: 999px; background: var(--gdbg); color: var(--gd); display: flex; align-items: center; font-weight: 650; font-size: 22px; line-height: 1.25; white-space: nowrap; }
.uim-u20 .dn { font-weight: 500; font-size: 20px; line-height: 1.3; color: var(--mu); white-space: nowrap; }

/* the chart */
.uim-u20 .ch { position: absolute; left: 40px; right: 40px; top: 268px; height: 236px; }
.uim-u20 .gl { position: absolute; left: 0; right: 0; height: 1px; background: var(--ln); }
.uim-u20 .bars { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 16px; }
.uim-u20 .bar { flex: 1 1 0; border-radius: 10px 10px 5px 5px; background: var(--bar); transform-origin: 50% 100%; }
.uim-u20 .bar.hi { background: var(--uim-accent); }

/* two small stats */
.uim-u20 .st { position: absolute; top: 540px; width: 350px; height: 104px; border-radius: 22px; background: var(--tile); padding: 16px 24px; }
.uim-u20 .st.a { left: 40px; } .uim-u20 .st.b { right: 40px; }
.uim-u20 .sl { width: fit-content; font-weight: 500; font-size: 20px; line-height: 1.3; color: var(--mu); white-space: nowrap; }
.uim-u20 .sv { width: fit-content; font-weight: 700; font-size: 36px; line-height: 1.25; letter-spacing: -.025em; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* the theme toggle sits above both layers and changes by itself */
.uim-u20 .tgl { position: absolute; right: 40px; top: 42px; width: 96px; height: 52px; border-radius: 26px; z-index: 5; }
.uim-u20 .tk { position: absolute; inset: 0; border-radius: 26px; background: #E6E6E0; }
.uim-u20 .kb { position: absolute; left: 6px; top: 6px; width: 40px; height: 40px; border-radius: 50%; background: #FFF; box-shadow: 0 2px 8px rgba(12, 12, 13, .3); }
.uim-u20 .kb svg { position: absolute; left: 10px; top: 10px; width: 20px; height: 20px; }
.uim-u20 .ring { position: absolute; inset: -3px; border-radius: 29px; border: 3px solid var(--uim-accent); z-index: 4; pointer-events: none; }
.uim-u20 .sun { color: var(--uim-accent); }

/* u21 Onboarding Checklist */
/* u21 Onboarding Checklist · scoped to its stage (984x800), light theme */
.uim-u21 .bg { position: absolute; inset: 0; background: var(--uim-fill); }
.uim-u21 .card { position: absolute; left: 92px; top: 56px; width: 800px; height: 688px; border-radius: 32px; background: var(--uim-paper); box-shadow: 0 0 0 1px var(--uim-line), var(--uim-card-shadow); }
.uim-u21 .hd { position: absolute; left: 44px; top: 54px; font-weight: 750; font-size: 40px; line-height: 1.2; letter-spacing: -.03em; white-space: nowrap; }
.uim-u21 .sh { position: absolute; left: 44px; top: 108px; font-weight: 500; font-size: 22px; line-height: 1.3; color: var(--uim-muted); white-space: nowrap; }
.uim-u21 .rg { position: absolute; left: 611px; top: 22px; width: 150px; height: 150px; }
.uim-u21 .rg svg { position: absolute; inset: 0; width: 150px; height: 150px; overflow: visible; }
.uim-u21 .rg circle { fill: none; stroke-width: 14; }
.uim-u21 .rg .trk { stroke: color-mix(in srgb, var(--uim-ink) 10%, transparent); }
.uim-u21 .rg .arc { stroke: var(--uim-accent); stroke-linecap: round; }
.uim-u21 .pct { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 750; font-size: 32px; line-height: 1.2; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.uim-u21 .dv { position: absolute; left: 44px; right: 44px; top: 188px; height: 1px; background: var(--uim-line); }

.uim-u21 .rw { position: absolute; left: 28px; width: 744px; height: 72px; border-radius: 18px; }
.uim-u21 .hl { position: absolute; inset: 0; border-radius: 18px; background: var(--uim-fill); opacity: 0; }
.uim-u21 .cb { position: absolute; left: 16px; top: 16px; width: 40px; height: 40px; border-radius: 12px; box-shadow: inset 0 0 0 2.5px color-mix(in srgb, var(--uim-ink) 22%, transparent); }
.uim-u21 .fl { position: absolute; inset: 0; border-radius: 12px; background: var(--uim-accent); }
.uim-u21 .ck { position: absolute; left: 8px; top: 8px; width: 24px; height: 24px; }
.uim-u21 .ck path { fill: none; stroke: var(--uim-ink); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.uim-u21 .lb { position: absolute; left: 76px; top: 0; height: 72px; display: flex; align-items: center; }
.uim-u21 .lt { position: relative; font-weight: 600; font-size: 26px; line-height: 1.3; letter-spacing: -.01em; white-space: nowrap; }
.uim-u21 .st { position: absolute; left: 0; top: 50%; width: 100%; height: 2px; margin-top: -1px; border-radius: 2px; background: var(--uim-muted); transform-origin: 0 50%; }
.uim-u21 .mt { position: absolute; right: 20px; top: 0; height: 72px; display: flex; align-items: center; font: 500 18px/1.3 'JetBrains Mono', ui-monospace, monospace; color: var(--uim-muted); white-space: nowrap; }

.uim-u21 .dn { position: absolute; left: 44px; right: 44px; top: 596px; height: 64px; border-radius: 20px; background: color-mix(in srgb, var(--uim-good) 12%, transparent); display: flex; align-items: center; gap: 14px; padding: 0 24px 0 14px; }
.uim-u21 .dc { width: 36px; height: 36px; border-radius: 50%; background: var(--uim-good); display: grid; place-items: center; flex: 0 0 auto; }
.uim-u21 .dc svg { width: 22px; height: 22px; }
.uim-u21 .dc path { fill: none; stroke: #FFFFFF; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.uim-u21 .dt { font-weight: 650; font-size: 26px; line-height: 1.3; letter-spacing: -.01em; white-space: nowrap; }
.uim-u21 .dm { margin-left: auto; font-weight: 500; font-size: 20px; line-height: 1.3; color: var(--uim-muted); white-space: nowrap; }

/* u22 Delivery Tracker */
/* u22 Delivery Tracker · scoped to its stage (984x800), light theme */
.uim-u22 .bk { position: absolute; border-radius: 16px; background: color-mix(in srgb, var(--uim-ink) 6%, transparent); }
.uim-u22 .bk.pk { background: color-mix(in srgb, var(--uim-good) 16%, transparent); display: flex; align-items: center; justify-content: center; }
.uim-u22 .pkl { font-weight: 650; font-size: 20px; line-height: 1.3; color: var(--uim-muted); white-space: nowrap; }

.uim-u22 .rt { position: absolute; left: 0; top: 0; width: 984px; height: 800px; overflow: visible; }
.uim-u22 .rt path { fill: none; stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
.uim-u22 .rt .base { stroke: color-mix(in srgb, var(--uim-accent) 38%, transparent); }
.uim-u22 .rt .done { stroke: var(--uim-accent); }

.uim-u22 .sd { position: absolute; left: 118px; top: 448px; width: 24px; height: 24px; border-radius: 50%; background: var(--uim-ink); box-shadow: 0 0 0 5px var(--uim-paper), 0 4px 10px rgba(12, 12, 13, .25); }
.uim-u22 .tgw { position: absolute; width: 260px; display: flex; justify-content: center; }
.uim-u22 .tg { height: 44px; padding: 0 18px; border-radius: 999px; background: var(--uim-paper); box-shadow: 0 0 0 1px var(--uim-line), var(--uim-card-shadow); display: flex; align-items: center; font-weight: 650; font-size: 20px; line-height: 1.3; white-space: nowrap; }
.uim-u22 .pin { position: absolute; left: 758px; top: 84px; width: 44px; height: 58px; filter: drop-shadow(0 5px 6px rgba(12, 12, 13, .22)); }
.uim-u22 .land { position: absolute; left: 764px; top: 124px; width: 32px; height: 32px; border-radius: 50%; border: 3px solid var(--uim-accent); opacity: 0; pointer-events: none; }

.uim-u22 .cr { position: absolute; left: 0; top: 0; width: 96px; height: 96px; }
.uim-u22 .pp { position: absolute; inset: 0; }
.uim-u22 .hal { position: absolute; inset: 0; border-radius: 50%; background: color-mix(in srgb, var(--uim-accent) 16%, transparent); }
.uim-u22 .crd { position: absolute; left: 22px; top: 22px; width: 52px; height: 52px; border-radius: 50%; background: var(--uim-accent); box-shadow: 0 0 0 5px var(--uim-paper), 0 8px 18px rgba(12, 12, 13, .25); display: grid; place-items: center; }
.uim-u22 .crd svg { width: 26px; height: 26px; fill: none; stroke: var(--uim-ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.uim-u22 .chip { position: absolute; left: 36px; top: 36px; height: 52px; padding: 0 24px 0 20px; border-radius: 999px; background: var(--uim-paper); box-shadow: 0 0 0 1px var(--uim-line), var(--uim-card-shadow); display: flex; align-items: center; gap: 12px; font-weight: 650; font-size: 22px; line-height: 1.3; white-space: nowrap; }
.uim-u22 .chip i { width: 12px; height: 12px; border-radius: 50%; background: var(--uim-good); box-shadow: 0 0 0 5px color-mix(in srgb, var(--uim-good) 20%, transparent); }

.uim-u22 .eta { position: absolute; left: 36px; top: 596px; width: 912px; height: 168px; border-radius: 28px; background: var(--uim-paper); box-shadow: 0 0 0 1px var(--uim-line), var(--uim-card-shadow); }
.uim-u22 .el { position: absolute; left: 32px; top: 24px; font-weight: 600; font-size: 22px; line-height: 1.3; color: var(--uim-muted); white-space: nowrap; }
.uim-u22 .ev { position: absolute; left: 32px; top: 48px; display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.uim-u22 .en { font-weight: 750; font-size: 64px; line-height: 1.1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.uim-u22 .eu { font-weight: 650; font-size: 30px; line-height: 1.2; letter-spacing: -.01em; color: var(--uim-muted); }
.uim-u22 .av { position: absolute; left: 596px; top: 26px; width: 56px; height: 56px; border-radius: 50%; background: var(--uim-accent); display: grid; place-items: center; font-weight: 750; font-size: 26px; line-height: 1.2; color: var(--uim-ink); }
.uim-u22 .cn { position: absolute; left: 668px; top: 24px; font-weight: 650; font-size: 26px; line-height: 1.3; letter-spacing: -.01em; white-space: nowrap; }
.uim-u22 .cs { position: absolute; left: 668px; top: 54px; font-weight: 500; font-size: 20px; line-height: 1.3; color: var(--uim-muted); white-space: nowrap; }
.uim-u22 .bar { position: absolute; left: 32px; top: 136px; width: 848px; height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--uim-ink) 10%, transparent); overflow: hidden; }
.uim-u22 .bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 4px; background: var(--uim-accent); }

/* u23 Invoice Paid */
/* u23 Invoice Paid · scoped to its stage (984x800), light theme */
.uim-u23 .bg { position: absolute; inset: 0; background: var(--uim-fill); }
.uim-u23 .doc { position: absolute; left: 152px; top: 32px; width: 680px; height: 648px; border-radius: 28px; background: var(--uim-paper); box-shadow: 0 0 0 1px var(--uim-line), var(--uim-card-shadow); }
.uim-u23 .hm { position: absolute; left: 48px; top: 36px; width: 48px; height: 48px; border-radius: 14px; background: var(--uim-accent); }
.uim-u23 .hc { position: absolute; left: 112px; top: 36px; height: 48px; display: flex; align-items: center; font-weight: 700; font-size: 28px; line-height: 1.3; letter-spacing: -.02em; white-space: nowrap; }
.uim-u23 .hn { position: absolute; right: 48px; top: 40px; height: 40px; padding: 0 14px; border-radius: 10px; background: var(--uim-fill); display: flex; align-items: center; font: 600 20px/1.3 'JetBrains Mono', ui-monospace, monospace; white-space: nowrap; }
.uim-u23 .dv { position: absolute; left: 48px; right: 48px; height: 1px; background: var(--uim-line); }
.uim-u23 .mb { position: absolute; top: 132px; }
.uim-u23 .cap { font: 500 18px/1.3 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--uim-muted); white-space: nowrap; }
.uim-u23 .mv { margin-top: 4px; font-weight: 650; font-size: 28px; line-height: 1.3; letter-spacing: -.01em; white-space: nowrap; }
.uim-u23 .th { position: absolute; top: 232px; }
.uim-u23 .tr { position: absolute; left: 48px; right: 48px; height: 68px; border-top: 1px solid var(--uim-line); display: flex; align-items: center; justify-content: space-between; font-weight: 600; font-size: 26px; line-height: 1.3; white-space: nowrap; }
.uim-u23 .tr b { font-weight: 600; font-variant-numeric: tabular-nums; }
.uim-u23 .tl { position: absolute; right: 48px; top: 496px; font-weight: 600; font-size: 24px; line-height: 1.3; color: var(--uim-muted); white-space: nowrap; text-align: right; }
.uim-u23 .tv { position: absolute; right: 48px; top: 528px; font-weight: 750; font-size: 56px; line-height: 1.15; letter-spacing: -.04em; font-variant-numeric: tabular-nums; white-space: nowrap; transform-origin: 100% 50%; }

.uim-u23 .sw { position: absolute; left: 48px; top: 496px; width: 252px; height: 112px; transform: rotate(-9deg); pointer-events: none; }
.uim-u23 .st, .uim-u23 .imp { position: absolute; inset: 0; border-radius: 16px; }
.uim-u23 .st { display: grid; place-items: center; color: var(--uim-good-text); font-weight: 800; font-size: 68px; line-height: 1.2; letter-spacing: .08em; padding-left: .08em;
  box-shadow: inset 0 0 0 5px var(--uim-good-text), inset 0 0 0 9px var(--uim-paper), inset 0 0 0 11px var(--uim-good-text); }
.uim-u23 .imp { border: 3px solid var(--uim-good); opacity: 0; }

.uim-u23 .cw { position: absolute; left: 0; right: 0; top: 704px; height: 60px; display: flex; justify-content: center; }
.uim-u23 .chip { height: 60px; padding: 0 30px 0 13px; border-radius: 999px; background: var(--uim-paper); box-shadow: 0 0 0 1px var(--uim-line), var(--uim-card-shadow); display: flex; align-items: center; gap: 14px; font-weight: 650; font-size: 26px; line-height: 1.3; letter-spacing: -.01em; white-space: nowrap; }
.uim-u23 .cc { width: 34px; height: 34px; border-radius: 50%; background: var(--uim-good); display: grid; place-items: center; flex: 0 0 auto; }
.uim-u23 .cc svg { width: 22px; height: 22px; }
.uim-u23 .cc path { fill: none; stroke: #FFFFFF; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }

/* u24 Team Cursors */
/* u24 Team Cursors · scoped to its stage (984x800), light theme */
.uim-u24 .bg { position: absolute; inset: 0; background: var(--uim-fill); }
.uim-u24 .a1, .uim-u24 .c1 { --cc: var(--uim-accent); }
.uim-u24 .a2, .uim-u24 .c2 { --cc: var(--c2); }
.uim-u24 .a3, .uim-u24 .c3 { --cc: var(--c3); }

.uim-u24 .bar { position: absolute; left: 48px; right: 48px; top: 28px; height: 56px; display: flex; align-items: center; justify-content: space-between; }
.uim-u24 .lg { display: flex; align-items: center; gap: 14px; font-weight: 700; font-size: 26px; line-height: 1.3; letter-spacing: -.02em; white-space: nowrap; }
.uim-u24 .lg i { width: 36px; height: 36px; border-radius: 11px; background: var(--uim-ink); }
.uim-u24 .lg svg { display: block; width: 36px; height: 36px; fill: none; stroke: #FFFFFF; stroke-width: 2.6; stroke-linecap: round; }
.uim-u24 .avs { display: flex; align-items: center; }
.uim-u24 .av { width: 44px; height: 44px; margin-left: -6px; border-radius: 50%; background: var(--cc); box-shadow: 0 0 0 3px var(--uim-fill); display: grid; place-items: center; font-weight: 700; font-size: 20px; line-height: 1.2; color: var(--uim-ink); }
.uim-u24 .av:first-child { margin-left: 0; }

.uim-u24 .pg { position: absolute; left: 48px; top: 112px; width: 888px; height: 632px; border-radius: 24px; background: var(--uim-paper); box-shadow: 0 0 0 1px var(--uim-line), var(--uim-card-shadow); }
.uim-u24 .hls { position: absolute; left: 0; top: 0; }
.uim-u24 .hl { position: absolute; border-radius: 6px; background: color-mix(in srgb, var(--uim-accent) 28%, transparent); transform-origin: 0 50%; }
.uim-u24 .col { position: absolute; left: 56px; top: 44px; width: 520px; display: flex; flex-direction: column; gap: 26px; }
.uim-u24 .h1 { font-weight: 750; font-size: 48px; line-height: 1.2; letter-spacing: -.035em; white-space: nowrap; }
.uim-u24 .p { margin: 0; font-weight: 500; font-size: 28px; line-height: 1.6; letter-spacing: -.005em; }
.uim-u24 .tl { display: flex; align-items: center; gap: 16px; height: 45px; }
.uim-u24 .cbx { width: 26px; height: 26px; flex: 0 0 auto; border-radius: 8px; box-shadow: inset 0 0 0 2.5px color-mix(in srgb, var(--uim-ink) 22%, transparent); }
.uim-u24 .tb { display: grid; align-items: center; font-weight: 500; font-size: 28px; line-height: 1.6; letter-spacing: -.005em; white-space: nowrap; }
.uim-u24 .phd { grid-area: 1 / 1; color: var(--uim-muted); }
.uim-u24 .tyr { grid-area: 1 / 1; display: flex; align-items: center; }
.uim-u24 .cr2 { width: 3px; height: 34px; margin-left: 2px; border-radius: 2px; background: var(--c2); }
.uim-u24 .sk { position: absolute; left: 56px; height: 14px; border-radius: 7px; background: color-mix(in srgb, var(--uim-ink) 6%, transparent); }
.uim-u24 .s1 { top: 528px; width: 440px; }
.uim-u24 .s2 { top: 560px; width: 300px; }

.uim-u24 .pn { position: absolute; width: 44px; height: 44px; border-radius: 50% 50% 50% 8px; background: var(--c3); box-shadow: 0 0 0 4px var(--uim-paper), 0 8px 18px rgba(12, 12, 13, .22); display: grid; place-items: center; }
.uim-u24 .pn svg { width: 22px; height: 22px; fill: none; stroke: var(--uim-ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.uim-u24 .bb { position: absolute; width: 232px; padding: 14px 16px 16px; border-radius: 6px 20px 20px 20px; background: var(--uim-paper); box-shadow: 0 0 0 2px var(--c3), var(--uim-card-shadow); transform-origin: 0 0; }
.uim-u24 .bh { display: flex; align-items: center; gap: 10px; font-weight: 650; font-size: 20px; line-height: 1.3; white-space: nowrap; }
.uim-u24 .bh i { width: 28px; height: 28px; border-radius: 50%; background: var(--c3); display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: 18px; line-height: 1.2; color: var(--uim-ink); }
.uim-u24 .bt { margin-top: 8px; font-weight: 500; font-size: 22px; line-height: 1.35; }

.uim-u24 .cu { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.uim-u24 .ci { position: absolute; left: 0; top: 0; width: max-content; padding: 30px 0 0 18px; transform-origin: 3px 3px; filter: drop-shadow(0 3px 5px rgba(12, 12, 13, .25)); }
.uim-u24 .ci svg { position: absolute; left: 0; top: 0; width: 28px; height: 36px; }
.uim-u24 .ci path { fill: var(--cc); stroke: #FFFFFF; stroke-width: 2.4; stroke-linejoin: round; }
.uim-u24 .tg { position: relative; height: 34px; padding: 0 14px; border-radius: 6px 14px 14px 14px; background: var(--cc); color: var(--uim-ink); font-weight: 650; font-size: 20px; line-height: 34px; white-space: nowrap; }

/* u25 Add to Cart */
/* u25 Add to Cart · scoped to its stage (984x800), light theme */
.uim-u25 .bar { position: absolute; left: 0; right: 0; top: 0; height: 88px; border-bottom: 1px solid var(--uim-line); }
.uim-u25 .mk { position: absolute; left: 40px; top: 26px; width: 36px; height: 36px; border-radius: 11px; background: var(--uim-accent); }
.uim-u25 .br { position: absolute; left: 92px; top: 0; height: 88px; display: flex; align-items: center; font-weight: 750; font-size: 28px; line-height: 1.3; letter-spacing: -.02em; white-space: nowrap; }
.uim-u25 .cart { position: absolute; left: 888px; top: 16px; width: 56px; height: 56px; border-radius: 50%; background: var(--uim-fill); box-shadow: inset 0 0 0 1px var(--uim-line); display: grid; place-items: center; z-index: 6; }
.uim-u25 .cart svg { width: 28px; height: 28px; }
.uim-u25 .pulse { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--uim-accent); opacity: 0; pointer-events: none; }
.uim-u25 .badge { position: absolute; right: -9px; top: -9px; min-width: 30px; height: 30px; padding: 0 8px; border-radius: 999px; background: #E4E4DE; color: var(--uim-ink); box-shadow: 0 0 0 4px #FFF;
  display: grid; place-items: center; font-weight: 750; font-size: 18px; line-height: 1.2; font-variant-numeric: tabular-nums; }

.uim-u25 .card { position: absolute; left: 72px; top: 144px; width: 840px; height: 600px; border-radius: 32px; background: #FFF; box-shadow: var(--uim-card-shadow), inset 0 0 0 1.5px var(--uim-line); z-index: 1; }
.uim-u25 .card > * { position: absolute; }
.uim-u25 .tile { left: 28px; top: 28px; width: 392px; height: 544px; border-radius: 24px; background: var(--uim-fill); }
.uim-u25 .tile > * { position: absolute; }
.uim-u25 .tag { left: 20px; top: 20px; height: 38px; padding: 0 16px; border-radius: 999px; background: var(--uim-accent); color: var(--uim-ink); display: flex; align-items: center; font-weight: 700; font-size: 18px; line-height: 1.3; white-space: nowrap; }
.uim-u25 .heart { right: 20px; top: 16px; width: 46px; height: 46px; border-radius: 50%; background: #FFF; box-shadow: 0 1px 2px rgba(12, 12, 13, .08); display: grid; place-items: center; }
.uim-u25 .heart svg { width: 22px; height: 22px; }
.uim-u25 .bag { left: 46px; top: 112px; width: 300px; height: 300px; }
.uim-u25 .pg { left: 0; right: 0; bottom: 30px; display: flex; justify-content: center; gap: 10px; }
.uim-u25 .pg i { width: 9px; height: 9px; border-radius: 50%; background: #C9C9C2; }
.uim-u25 .pg i:first-child { background: var(--uim-ink); }
.uim-u25 .bag svg, .uim-u25 .ghost svg { display: block; width: 100%; height: 100%; }

.uim-u25 .lbl { left: 456px; top: 44px; font: 600 18px/24px 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--uim-muted); white-space: nowrap; }
.uim-u25 .nm { left: 456px; top: 84px; font-weight: 750; font-size: 42px; line-height: 1.15; letter-spacing: -.03em; white-space: nowrap; }
.uim-u25 .pr { left: 456px; top: 148px; font-weight: 700; font-size: 34px; line-height: 1.25; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.uim-u25 .ds { left: 456px; top: 214px; width: 356px; font-weight: 500; font-size: 22px; line-height: 1.5; letter-spacing: -.005em; color: var(--uim-muted); }
.uim-u25 .rule { left: 456px; top: 330px; width: 356px; height: 1px; background: var(--uim-line); }
.uim-u25 .facts { left: 456px; top: 356px; width: 356px; }
.uim-u25 .fa { height: 44px; display: flex; align-items: center; gap: 14px; font-weight: 550; font-size: 20px; line-height: 1.3; white-space: nowrap; }
.uim-u25 .fa i { width: 28px; height: 28px; flex: 0 0 auto; border-radius: 50%; background: var(--uim-fill); display: grid; place-items: center; }
.uim-u25 .fa svg { width: 16px; height: 16px; }

/* the button: two stacked layers (add, added) */
.uim-u25 .bt { left: 456px; top: 500px; width: 356px; height: 72px; }
.uim-u25 .bt > div { position: absolute; inset: 0; border-radius: 22px; display: flex; align-items: center; justify-content: center; gap: 14px; font-weight: 650; font-size: 25px; line-height: 1.25; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; }
.uim-u25 .b1 { background: var(--uim-ink); color: #FFF; }
.uim-u25 .b1 svg { width: 26px; height: 26px; }
.uim-u25 .rp { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; background: rgba(255, 255, 255, .3); opacity: 0; }
.uim-u25 .b2 { background: #E5F4EB; color: var(--uim-ink); }
.uim-u25 .ok-c { width: 36px; height: 36px; flex: 0 0 auto; border-radius: 50%; background: var(--uim-good); display: grid; place-items: center; }
.uim-u25 .ok-c svg { width: 20px; height: 20px; }

/* the copy of the product image that flies to the cart: centred on the image, 340 px square */
.uim-u25 .ghost { position: absolute; left: 126px; top: 264px; width: 340px; height: 340px; border-radius: 40px; background: var(--uim-fill); opacity: 0; z-index: 4; will-change: transform; }
.uim-u25 .ghost .gsh { position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 34px 50px -20px rgba(12, 12, 13, .45), 0 8px 18px rgba(12, 12, 13, .12); opacity: 0; }
.uim-u25 .ghost svg { position: relative; padding: 20px; }
.uim-u25 .b1 > span { display: flex; align-items: center; gap: 14px; }

/* u26 Color Swatches */
/* u26 Color Swatches · scoped to its stage (984x800), light theme */
.uim-u26 .card { position: absolute; left: 142px; top: 40px; width: 700px; height: 720px; border-radius: 32px; background: #FFF; box-shadow: var(--uim-card-shadow), inset 0 0 0 1.5px var(--uim-line); }
.uim-u26 .card > * { position: absolute; }
.uim-u26 .tile { left: 28px; top: 28px; width: 644px; height: 380px; border-radius: 28px; overflow: hidden; background: var(--uim-fill); }
.uim-u26 .ly { position: absolute; inset: 0; background: color-mix(in srgb, var(--pc) 18%, #F4F4F1); will-change: clip-path; }
.uim-u26 .ly svg { position: absolute; left: 112px; top: 40px; width: 420px; height: 320px; transform-origin: 50% 90%; }

.uim-u26 .pn { left: 28px; top: 434px; font-weight: 750; font-size: 34px; line-height: 1.25; letter-spacing: -.03em; white-space: nowrap; }
.uim-u26 .pp { right: 28px; top: 434px; font-weight: 700; font-size: 34px; line-height: 1.25; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.uim-u26 .cl { left: 28px; top: 506px; font: 600 18px/24px 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--uim-muted); white-space: nowrap; }
.uim-u26 .nw { left: 28px; top: 538px; width: 380px; height: 56px; }
.uim-u26 .nm { position: absolute; left: 0; top: 0; font-weight: 750; font-size: 44px; line-height: 1.25; letter-spacing: -.03em; white-space: nowrap; }
.uim-u26 .tw { right: 28px; top: 546px; width: 260px; height: 40px; }
.uim-u26 .tg { position: absolute; right: 0; top: 0; height: 40px; padding: 0 18px; border-radius: 999px; background: var(--uim-accent-soft); display: flex; align-items: center;
  font-weight: 600; font-size: 20px; line-height: 1.3; white-space: nowrap; }

.uim-u26 .sws { left: 28px; top: 602px; width: 388px; height: 76px; }
.uim-u26 .sb { position: absolute; top: 8px; width: 60px; height: 60px; }
.uim-u26 .sc { position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(12, 12, 13, .10); }
.uim-u26 .ring { position: absolute; left: 0; top: 0; width: 76px; height: 76px; border-radius: 50%; border: 3px solid var(--uim-accent); }
.uim-u26 .bt { right: 28px; top: 610px; width: 232px; height: 60px; border-radius: 20px; background: var(--uim-ink); color: #FFF; display: flex; align-items: center; justify-content: center;
  font-weight: 650; font-size: 22px; line-height: 1.3; letter-spacing: -.01em; white-space: nowrap; }

/* u27 Size Picker */
/* u27 Size Picker · scoped to its stage (984x800), light theme */
.uim-u27 .card { position: absolute; left: 142px; top: 100px; width: 700px; height: 600px; border-radius: 32px; background: #FFF; box-shadow: var(--uim-card-shadow), inset 0 0 0 1.5px var(--uim-line); }
.uim-u27 .card > * { position: absolute; }
.uim-u27 .th { left: 36px; top: 36px; width: 128px; height: 128px; border-radius: 28px; background: var(--uim-fill); }
.uim-u27 .th svg { position: absolute; left: 16px; top: 16px; width: 96px; height: 96px; }
.uim-u27 .pn { left: 188px; top: 40px; font-weight: 750; font-size: 34px; line-height: 1.25; letter-spacing: -.03em; white-space: nowrap; }
.uim-u27 .vr { left: 188px; top: 88px; font-weight: 500; font-size: 22px; line-height: 1.4; color: var(--uim-muted); white-space: nowrap; }
.uim-u27 .pp { left: 188px; top: 124px; font-weight: 700; font-size: 30px; line-height: 1.25; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.uim-u27 .rule { left: 36px; top: 196px; width: 628px; height: 1px; background: var(--uim-line); }
.uim-u27 .sl { left: 36px; top: 222px; font: 600 18px/28px 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--uim-muted); white-space: nowrap; }
.uim-u27 .sg { right: 36px; top: 222px; font-weight: 550; font-size: 20px; line-height: 28px; color: var(--uim-muted); text-decoration: underline; text-underline-offset: 4px; white-space: nowrap; }

/* the size chips: backgrounds, the sliding selection, the labels on top (three layers on the same grid) */
.uim-u27 .row { left: 36px; top: 268px; width: 628px; height: 88px; }
.uim-u27 .row > * { position: absolute; }
.uim-u27 .cbs, .uim-u27 .cts { left: 0; top: 0; width: 628px; height: 88px; display: grid; gap: 14px; }
.uim-u27 .cb { border-radius: 22px; background: #FFF; box-shadow: inset 0 0 0 1.5px var(--uim-line); }
.uim-u27 .cb.so { background: linear-gradient(to top right, transparent calc(50% - 1px), #B4B4AD calc(50% - 1px), #B4B4AD calc(50% + 1px), transparent calc(50% + 1px)), var(--uim-fill); box-shadow: none; border: 1.5px dashed #C9C9C2; }
.uim-u27 .sel { left: 0; top: 0; height: 88px; border-radius: 22px; background: var(--uim-accent); opacity: 0; }
.uim-u27 .ct { display: flex; align-items: center; justify-content: center; font-weight: 650; font-size: 28px; line-height: 1.25; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.uim-u27 .ct.so { color: var(--uim-muted); font-weight: 600; }
.uim-u27 .cap { top: 368px; text-align: center; font-weight: 550; font-size: 18px; line-height: 1.4; color: var(--uim-muted); white-space: nowrap; }
.uim-u27 .fit { left: 36px; top: 424px; height: 40px; display: flex; align-items: center; gap: 14px; font-weight: 550; font-size: 20px; line-height: 1.3; white-space: nowrap; }
.uim-u27 .fit i { width: 28px; height: 28px; flex: 0 0 auto; border-radius: 50%; background: var(--uim-fill); display: grid; place-items: center; }
.uim-u27 .fit svg { width: 16px; height: 16px; }

/* the button: three stacked layers (idle, ready, added) */
.uim-u27 .bt { left: 36px; top: 484px; width: 628px; height: 80px; }
.uim-u27 .bt > div { position: absolute; inset: 0; border-radius: 24px; display: flex; align-items: center; justify-content: center; gap: 14px;
  font-weight: 650; font-size: 26px; line-height: 1.25; letter-spacing: -.01em; white-space: nowrap; }
.uim-u27 .b1 { background: var(--uim-fill); color: var(--uim-muted); }
.uim-u27 .b2 { background: var(--uim-ink); color: #FFF; }
.uim-u27 .b3 { background: #E5F4EB; color: var(--uim-ink); }
.uim-u27 .ok-c { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%; background: var(--uim-good); display: grid; place-items: center; }
.uim-u27 .ok-c svg { width: 22px; height: 22px; }

/* u28 Review Stream */
/* u28 Review Stream · scoped to its stage (984x800), dark theme */
.uim-u28 .hd { position: absolute; left: 36px; top: 44px; font-weight: 700; font-size: 26px; line-height: 1.3; letter-spacing: -.02em; white-space: nowrap; }
.uim-u28 .big { position: absolute; left: 36px; top: 84px; font-weight: 750; font-size: 60px; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.uim-u28 .hs { position: absolute; left: 160px; top: 88px; }
.uim-u28 .nt { position: absolute; left: 160px; top: 122px; font-weight: 500; font-size: 20px; line-height: 1.3; color: var(--uim-soft); white-space: nowrap; }
.uim-u28 .wr { position: absolute; right: 36px; top: 78px; height: 52px; padding: 0 24px; border-radius: 999px; background: #26262B; box-shadow: inset 0 0 0 1px #3A3A41; display: flex; align-items: center;
  font-weight: 650; font-size: 22px; line-height: 1.3; white-space: nowrap; }

/* the stream: a clipped window with soft top and bottom edges; the rail inside moves up one card at a time */
.uim-u28 .win { position: absolute; left: 0; top: 172px; width: 984px; height: 592px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 40px, #000 calc(100% - 24px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 40px, #000 calc(100% - 24px), transparent 100%); }
.uim-u28 .rail { position: absolute; left: 36px; top: 40px; width: 912px; will-change: transform; }
.uim-u28 .rv { position: absolute; left: 0; width: 912px; height: 168px; border-radius: 28px; background: var(--uim-dark-2); box-shadow: inset 0 0 0 1px #2E2E34; will-change: transform; }
.uim-u28 .av { position: absolute; left: 28px; top: 28px; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-weight: 750; font-size: 22px; line-height: 1.2; }
.uim-u28 .t0 { background: #F5F5F2; color: var(--uim-ink); }
.uim-u28 .t1 { background: #8A8A91; color: var(--uim-ink); }
.uim-u28 .t2 { background: #3A3A41; color: #F5F5F2; }
.uim-u28 .t3 { background: #D4D4CE; color: var(--uim-ink); }
.uim-u28 .t4 { background: #52525A; color: #F5F5F2; }
.uim-u28 .nm { position: absolute; left: 104px; top: 24px; font-weight: 650; font-size: 24px; line-height: 1.3; letter-spacing: -.015em; white-space: nowrap; }
.uim-u28 .tm { position: absolute; left: 104px; top: 55px; font: 500 18px/1.3 'JetBrains Mono', ui-monospace, monospace; color: var(--uim-soft); white-space: nowrap; }
.uim-u28 .rs { position: absolute; right: 28px; top: 28px; }
.uim-u28 .tx { position: absolute; left: 104px; top: 88px; width: 780px; font-weight: 500; font-size: 22px; line-height: 1.45; letter-spacing: -.005em; color: #D4D4CE; }

/* star rows: a grey star with an accent star on top that fills in */
.uim-u28 .stars { display: flex; gap: 6px; }
.uim-u28 .st { position: relative; width: 24px; height: 24px; }
.uim-u28 .hs .st { width: 28px; height: 28px; }
.uim-u28 .hs.stars { gap: 8px; }
.uim-u28 .st svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.uim-u28 .st .fl { opacity: 0; }

/* u29 Shipping Progress */
/* u29 Shipping Progress · scoped to its stage (984x800), light theme */
.uim-u29 .bg { position: absolute; inset: 0; background: var(--uim-fill); }
.uim-u29 .card { position: absolute; left: 132px; top: 40px; width: 720px; height: 720px; border-radius: 32px; background: var(--uim-paper); box-shadow: 0 0 0 1px var(--uim-line), var(--uim-card-shadow); }
.uim-u29 .hd { position: absolute; left: 36px; top: 30px; font-weight: 750; font-size: 40px; line-height: 1.2; letter-spacing: -.03em; white-space: nowrap; }
.uim-u29 .cnt { position: absolute; right: 36px; top: 32px; height: 40px; padding: 0 18px; border-radius: 999px; background: var(--uim-fill); display: flex; align-items: center; font-weight: 600; font-size: 22px; line-height: 1.3; color: var(--uim-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

.uim-u29 .sp { position: absolute; left: 36px; top: 96px; width: 648px; height: 108px; border-radius: 22px; background: var(--uim-fill); }
.uim-u29 .tn { position: absolute; inset: 0; border-radius: 22px; background: color-mix(in srgb, var(--uim-good) 12%, transparent); opacity: 0; }
.uim-u29 .ma, .uim-u29 .mb { position: absolute; left: 24px; top: 20px; height: 32px; display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 24px; line-height: 1.3; letter-spacing: -.01em; white-space: nowrap; }
.uim-u29 .mb { opacity: 0; }
.uim-u29 .am { font-weight: 750; font-variant-numeric: tabular-nums; }
.uim-u29 .mc { width: 32px; height: 32px; border-radius: 50%; background: var(--uim-good); display: grid; place-items: center; flex: 0 0 auto; }
.uim-u29 .mc svg { width: 20px; height: 20px; }
.uim-u29 .mc path { fill: none; stroke: #FFFFFF; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.uim-u29 .gt { position: absolute; right: 24px; top: 20px; height: 32px; display: flex; align-items: center; font: 500 18px/1.3 'JetBrains Mono', ui-monospace, monospace; color: var(--uim-muted); white-space: nowrap; }
.uim-u29 .tk { position: absolute; left: 24px; top: 70px; width: 600px; height: 14px; border-radius: 7px; background: color-mix(in srgb, var(--uim-ink) 10%, transparent); overflow: hidden; }
.uim-u29 .tk i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 7px; background: var(--uim-accent); }

.uim-u29 .it { position: absolute; left: 36px; width: 648px; height: 88px; }
.uim-u29 .hl { position: absolute; left: -14px; right: -14px; top: 2px; bottom: 2px; border-radius: 18px; background: var(--uim-accent-soft); opacity: 0; }
.uim-u29 .th { position: absolute; left: 0; top: 12px; width: 64px; height: 64px; border-radius: 16px; background: color-mix(in srgb, var(--uim-ink) 6%, transparent); }
.uim-u29 .th svg { position: absolute; inset: 0; width: 64px; height: 64px; }
.uim-u29 .th path, .uim-u29 .th rect { fill: none; stroke: var(--uim-ink); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.uim-u29 .th .ac { stroke: var(--uim-accent); }
.uim-u29 .nm { position: absolute; left: 88px; top: 11px; font-weight: 650; font-size: 26px; line-height: 1.3; letter-spacing: -.01em; white-space: nowrap; }
.uim-u29 .mt { position: absolute; left: 88px; top: 45px; font-weight: 500; font-size: 20px; line-height: 1.3; color: var(--uim-muted); white-space: nowrap; }
.uim-u29 .pr { position: absolute; right: 0; top: 0; height: 88px; display: flex; align-items: center; font-weight: 650; font-size: 26px; line-height: 1.3; font-variant-numeric: tabular-nums; white-space: nowrap; }
.uim-u29 .sep { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--uim-line); }

.uim-u29 .tot { position: absolute; left: 36px; right: 36px; bottom: 32px; height: 168px; }
.uim-u29 .tot .dv { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--uim-line); }
.uim-u29 .tr { position: absolute; left: 0; right: 0; height: 32px; display: flex; align-items: center; justify-content: space-between; font-weight: 500; font-size: 24px; line-height: 1.3; color: var(--uim-muted); white-space: nowrap; }
.uim-u29 .tr b { font-weight: 600; color: var(--uim-ink); font-variant-numeric: tabular-nums; }
.uim-u29 .r1 { top: 22px; }
.uim-u29 .r2 { top: 62px; }
.uim-u29 .sv { position: relative; width: 220px; height: 32px; }
.uim-u29 .old { position: absolute; right: 0; top: 0; height: 32px; display: flex; align-items: center; font-weight: 600; font-size: 24px; line-height: 1.3; font-variant-numeric: tabular-nums; color: var(--uim-ink); }
.uim-u29 .old span { position: relative; }
.uim-u29 .old i { position: absolute; left: 0; top: 50%; width: 100%; height: 2px; margin-top: -1px; border-radius: 2px; background: var(--uim-muted); transform-origin: 0 50%; transform: scaleX(0); }
.uim-u29 .fr { position: absolute; right: 0; top: 0; height: 32px; padding: 0 14px; border-radius: 999px; background: color-mix(in srgb, var(--uim-good) 14%, transparent); color: var(--uim-good-text); display: flex; align-items: center; font-weight: 700; font-size: 22px; line-height: 1.3; white-space: nowrap; opacity: 0; }
.uim-u29 .r3 { top: 112px; height: 48px; font-weight: 650; font-size: 26px; color: var(--uim-ink); letter-spacing: -.01em; }
.uim-u29 .r3 b { font-weight: 750; font-size: 40px; line-height: 1.2; letter-spacing: -.03em; }

/* u30 Order Status */
/* u30 Order Status · scoped to its stage (984x800), light theme */
.uim-u30 .bg { position: absolute; inset: 0; background: var(--uim-fill); }
.uim-u30 .card { position: absolute; left: 132px; top: 40px; width: 720px; height: 720px; border-radius: 32px; background: var(--uim-paper); box-shadow: 0 0 0 1px var(--uim-line), var(--uim-card-shadow); }
.uim-u30 .ol { position: absolute; left: 36px; top: 34px; font: 500 18px/1.3 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--uim-muted); white-space: nowrap; }
.uim-u30 .on { position: absolute; left: 36px; top: 58px; font-weight: 750; font-size: 40px; line-height: 1.2; letter-spacing: -.03em; white-space: nowrap; }
.uim-u30 .dv { position: absolute; left: 36px; right: 36px; top: 132px; height: 1px; background: var(--uim-line); }

.uim-u30 .pill { position: absolute; right: 36px; top: 38px; width: 252px; height: 52px; border-radius: 999px; background: var(--uim-fill); opacity: 0; }
.uim-u30 .pd { position: absolute; left: 22px; top: 20px; width: 12px; height: 12px; border-radius: 50%; background: var(--uim-accent); box-shadow: 0 0 0 5px var(--uim-accent-soft); }
.uim-u30 .ps { position: absolute; left: 48px; top: 0; height: 52px; display: flex; align-items: center; font-weight: 650; font-size: 24px; line-height: 1.3; letter-spacing: -.01em; white-space: nowrap; opacity: 0; }

.uim-u30 .sp { position: absolute; left: 36px; width: 648px; height: 68px; }
.uim-u30 .dt { position: absolute; left: 0; top: 2px; width: 32px; height: 32px; border-radius: 50%; background: var(--uim-paper); box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--uim-ink) 22%, transparent); }
.uim-u30 .fl { position: absolute; inset: 0; border-radius: 50%; background: var(--uim-accent); transform: scale(0); }
.uim-u30 .ck { position: absolute; left: 7px; top: 7px; width: 18px; height: 18px; }
.uim-u30 .ck path { fill: none; stroke: var(--uim-ink); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.uim-u30 .pl { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--uim-accent); opacity: 0; pointer-events: none; }
.uim-u30 .lb { position: absolute; left: 64px; top: 0; font-weight: 650; font-size: 28px; line-height: 1.3; letter-spacing: -.015em; color: var(--uim-muted); white-space: nowrap; }
.uim-u30 .nt { position: absolute; left: 64px; top: 38px; font-weight: 500; font-size: 22px; line-height: 1.3; color: var(--uim-muted); white-space: nowrap; }
.uim-u30 .ln { position: absolute; left: 50px; width: 4px; height: 56px; border-radius: 2px; background: color-mix(in srgb, var(--uim-ink) 10%, transparent); }
.uim-u30 .ln i { position: absolute; left: 0; right: 0; top: 0; bottom: 0; border-radius: 2px; background: var(--uim-accent); transform-origin: 50% 0; transform: scaleY(0); }

.uim-u30 .dn { position: absolute; left: 36px; top: 568px; width: 648px; height: 112px; border-radius: 24px; background: var(--uim-fill); }
.uim-u30 .di { position: absolute; left: 28px; top: 28px; width: 56px; height: 56px; border-radius: 50%; background: var(--uim-accent); display: grid; place-items: center; }
.uim-u30 .di svg { width: 30px; height: 30px; fill: none; stroke: var(--uim-ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.uim-u30 .dl { position: absolute; left: 108px; top: 22px; font-weight: 500; font-size: 20px; line-height: 1.3; color: var(--uim-muted); white-space: nowrap; }
.uim-u30 .dy { position: absolute; left: 108px; top: 46px; font-weight: 750; font-size: 34px; line-height: 1.2; letter-spacing: -.03em; white-space: nowrap; }
.uim-u30 .dc { position: absolute; right: 28px; top: 36px; height: 40px; padding: 0 16px; border-radius: 999px; background: color-mix(in srgb, var(--uim-good) 14%, transparent); color: var(--uim-good-text); display: flex; align-items: center; font-weight: 700; font-size: 22px; line-height: 1.3; white-space: nowrap; }

/* u31 Receipt Print */
/* u31 Receipt Print · scoped to its stage (984x800), light theme */
.uim-u31 .bg { position: absolute; inset: 0; background: var(--uim-fill); }
.uim-u31 .clip { position: absolute; left: 192px; top: 0; width: 600px; height: 700px; overflow: hidden; }
.uim-u31 .rc { position: absolute; left: 80px; top: 40px; width: 440px; filter: drop-shadow(0 14px 16px rgba(12, 12, 13, .14)) drop-shadow(0 1px 2px rgba(12, 12, 13, .10)); }
.uim-u31 .pp { background: var(--uim-paper); padding: 32px 32px 26px; font-family: 'JetBrains Mono', ui-monospace, monospace; color: var(--uim-ink); }
.uim-u31 .zz { display: block; width: 440px; height: 14px; margin-top: -1px; }
.uim-u31 .zz path { fill: var(--uim-paper); }

.uim-u31 .sn { height: 42px; text-align: center; font-weight: 800; font-size: 34px; line-height: 42px; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
.uim-u31 .sl { height: 28px; text-align: center; font-weight: 500; font-size: 20px; line-height: 28px; color: var(--uim-muted); white-space: nowrap; }
.uim-u31 .dd { margin: 16px 0 12px; height: 0; border-top: 2px dashed color-mix(in srgb, var(--uim-ink) 30%, transparent); }
.uim-u31 .ir { height: 34px; display: flex; align-items: center; justify-content: space-between; font-weight: 500; font-size: 24px; line-height: 1.3; white-space: nowrap; }
.uim-u31 .tr { height: 32px; display: flex; align-items: center; justify-content: space-between; font-weight: 500; font-size: 22px; line-height: 1.3; color: var(--uim-muted); white-space: nowrap; }
.uim-u31 .tt { margin-top: 8px; height: 54px; display: flex; align-items: center; justify-content: space-between; font-weight: 800; font-size: 28px; line-height: 1.3; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; }
.uim-u31 .tt .am { position: relative; font-size: 44px; line-height: 1.2; letter-spacing: -.02em; }
.uim-u31 .ul { position: absolute; left: -6px; width: calc(100% + 12px); bottom: -9px; height: 14px; overflow: visible; }
.uim-u31 .ul path { fill: none; stroke: var(--uim-accent); stroke-width: 6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.uim-u31 .dd.d3 { margin: 22px 0 14px; }
.uim-u31 .bc { display: block; width: 320px; height: 44px; margin: 0 auto; }
.uim-u31 .bc rect { fill: var(--uim-ink); }
.uim-u31 .th { margin-top: 14px; height: 28px; text-align: center; font-weight: 500; font-size: 20px; line-height: 28px; white-space: nowrap; }

.uim-u31 .prn { position: absolute; left: 152px; top: 700px; width: 680px; height: 76px; border-radius: 28px; background: var(--uim-ink); box-shadow: inset 0 2px 0 #2A2A2F, 0 18px 30px -16px rgba(12, 12, 13, .45); }
.uim-u31 .prn i { position: absolute; display: block; }
.uim-u31 .pb { left: 40px; top: 40px; width: 52px; height: 12px; border-radius: 6px; background: #2A2A2F; }
.uim-u31 .led { right: 44px; top: 38px; width: 16px; height: 16px; border-radius: 50%; background: var(--uim-accent); box-shadow: 0 0 0 6px var(--uim-accent-soft); }
.uim-u31 .slot { position: absolute; left: 232px; top: 690px; width: 520px; height: 18px; border-radius: 9px; background: #000; box-shadow: 0 0 0 4px #2A2A2F; }

/* u32 Rating Badge */
/* u32 Rating Badge · scoped to its stage (984x800), dark theme */
.uim-u32 .card { position: absolute; left: 152px; top: 81px; width: 680px; height: 638px; border-radius: 36px; background: var(--uim-dark-2); box-shadow: 0 0 0 1px var(--uim-dark-line), 0 30px 60px -30px rgba(0, 0, 0, .6); color: #F5F5F2; }
.uim-u32 .lb { position: absolute; left: 0; right: 0; top: 40px; text-align: center; font: 500 22px/1.3 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--uim-soft); white-space: nowrap; }
.uim-u32 .nw { position: absolute; left: 0; right: 0; top: 128px; height: 175px; display: flex; justify-content: center; }
.uim-u32 .nm { height: 175px; display: flex; align-items: baseline; gap: 14px; white-space: nowrap; }
.uim-u32 .rn { height: 175px; font-weight: 750; font-size: 240px; line-height: 175px; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.uim-u32 .rd { font-weight: 650; font-size: 56px; line-height: 1.2; letter-spacing: -.02em; color: var(--uim-soft); }
.uim-u32 .st { position: absolute; left: 88px; top: 362px; width: 504px; height: 88px; display: flex; gap: 16px; }
.uim-u32 .sr { position: relative; width: 88px; height: 88px; }
.uim-u32 .sr svg { position: absolute; inset: 0; width: 88px; height: 88px; }
.uim-u32 .sr path { stroke-width: 1.6; stroke-linejoin: round; }
.uim-u32 .sr .base path { fill: #3E3E45; stroke: #3E3E45; }
.uim-u32 .sr .fill { clip-path: inset(0 100% 0 0); }
.uim-u32 .sr .fill path { fill: var(--uim-accent); stroke: var(--uim-accent); }
.uim-u32 .cl { position: absolute; left: 0; right: 0; top: 480px; text-align: center; font-weight: 500; font-size: 28px; line-height: 1.3; letter-spacing: -.01em; color: var(--uim-soft); white-space: nowrap; }
.uim-u32 .cl b { font-weight: 650; color: #F5F5F2; font-variant-numeric: tabular-nums; }
.uim-u32 .vw { position: absolute; left: 0; right: 0; top: 540px; height: 56px; display: flex; justify-content: center; }
.uim-u32 .vc { height: 56px; padding: 0 28px 0 13px; border-radius: 999px; background: rgba(22, 163, 74, .16); display: flex; align-items: center; gap: 12px; font-weight: 650; font-size: 26px; line-height: 1.3; letter-spacing: -.01em; color: var(--uim-good-bright); white-space: nowrap; }
.uim-u32 .vk { width: 34px; height: 34px; border-radius: 50%; background: var(--uim-good); display: grid; place-items: center; flex: 0 0 auto; }
.uim-u32 .vk svg { width: 20px; height: 20px; }
.uim-u32 .vk path { fill: none; stroke: #FFFFFF; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }

/* u33 Testimonial Wall */
/* u33 Testimonial Wall · scoped to its stage (984x800) */
.uim-u33 .bg { position: absolute; inset: 1px; border-radius: 39px; background: var(--uim-fill); }
.uim-u33 .hd { position: absolute; left: 48px; right: 48px; top: 36px; height: 64px; display: flex; align-items: center; justify-content: space-between; }
.uim-u33 .ht { font-weight: 750; font-size: 36px; line-height: 1.25; letter-spacing: -.03em; white-space: nowrap; }
.uim-u33 .sp { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 20px 0 16px; border-radius: 999px; background: var(--uim-paper); box-shadow: inset 0 0 0 1.5px var(--uim-line);
  font-weight: 650; font-size: 20px; line-height: 1.25; white-space: nowrap; }
.uim-u33 .sp i { width: 14px; height: 14px; border-radius: 4px; background: var(--uim-accent); }
.uim-u33 .cols { position: absolute; left: 48px; top: 120px; width: 888px; height: 632px; display: flex; gap: 18px; }
.uim-u33 .col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.uim-u33 .card { position: relative; flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; padding: 24px; border-radius: 24px; background: var(--uim-paper);
  box-shadow: var(--uim-card-shadow), inset 0 0 0 1px var(--uim-line); will-change: transform, opacity; }
.uim-u33 .sh { position: absolute; inset: 0; border-radius: 24px; opacity: 0; box-shadow: 0 34px 56px -22px rgba(12, 12, 13, .42), 0 6px 16px rgba(12, 12, 13, .08); pointer-events: none; }
.uim-u33 .rg { position: absolute; inset: 0; border-radius: 24px; border: 3px solid var(--uim-accent); opacity: 0; pointer-events: none; }
.uim-u33 .q { font-weight: 500; font-size: 23px; line-height: 1.4; letter-spacing: -.012em; }
.uim-u33 .by { display: flex; align-items: center; gap: 12px; }
.uim-u33 .av { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--uim-fill); box-shadow: inset 0 0 0 1px var(--uim-line);
  font-weight: 700; font-size: 18px; line-height: 1.2; letter-spacing: .01em; }
.uim-u33 .who { min-width: 0; }
.uim-u33 .nm { font-weight: 650; font-size: 20px; line-height: 1.25; letter-spacing: -.01em; white-space: nowrap; }
.uim-u33 .bt { font-weight: 500; font-size: 18px; line-height: 1.3; color: var(--uim-muted); white-space: nowrap; }

/* u34 Loyalty Points */
/* u34 Loyalty Points · scoped to its stage (984x800) */
.uim-u34 .bg { position: absolute; inset: 1px; border-radius: 39px; background: var(--uim-fill); }
.uim-u34 .pts, .uim-u34 .rw { position: absolute; left: 72px; width: 840px; background: var(--uim-paper); box-shadow: var(--uim-card-shadow), inset 0 0 0 1px var(--uim-line); }
.uim-u34 .pts { top: 92px; height: 416px; border-radius: 36px; will-change: transform, opacity; }
.uim-u34 .tile { position: absolute; left: 44px; top: 36px; width: 52px; height: 52px; border-radius: 16px; background: var(--uim-accent); display: grid; place-items: center; box-shadow: 0 10px 20px -10px var(--uim-accent); }
.uim-u34 .tile svg { width: 26px; height: 26px; fill: #FFF; }
.uim-u34 .pn { position: absolute; left: 112px; top: 36px; height: 52px; display: flex; align-items: center; font-weight: 700; font-size: 26px; line-height: 1.3; letter-spacing: -.02em; white-space: nowrap; }
.uim-u34 .tier { position: absolute; right: 44px; top: 40px; height: 44px; padding: 0 20px; border-radius: 999px; background: var(--uim-fill); box-shadow: inset 0 0 0 1px var(--uim-line);
  display: flex; align-items: center; font-weight: 650; font-size: 20px; line-height: 1.25; white-space: nowrap; }
.uim-u34 .pl { position: absolute; left: 44px; top: 108px; font-weight: 600; font-size: 22px; line-height: 1.3; color: var(--uim-muted); white-space: nowrap; }
.uim-u34 .num { position: absolute; left: 44px; top: 154px; font-weight: 750; font-size: 124px; line-height: 1; letter-spacing: -.045em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.uim-u34 .gt { position: absolute; right: 44px; top: 234px; font-weight: 500; font-size: 26px; line-height: 1.3; color: var(--uim-muted); white-space: nowrap; }
.uim-u34 .gt b { font-weight: 750; color: var(--uim-ink); font-variant-numeric: tabular-nums; }
.uim-u34 .track { position: absolute; left: 62px; top: 304px; width: 716px; height: 24px; border-radius: 12px; background: var(--uim-fill); box-shadow: inset 0 0 0 1px var(--uim-line); overflow: hidden; }
.uim-u34 .fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 12px; background: var(--uim-accent); }
.uim-u34 .mk { position: absolute; top: 298px; width: 36px; height: 36px; margin-left: -18px; border-radius: 50%; background: var(--uim-paper); box-shadow: inset 0 0 0 3px var(--uim-line); display: grid; place-items: center; }
.uim-u34 .mk svg { width: 18px; height: 18px; }
.uim-u34 .mk.goal { color: var(--uim-muted); }
.uim-u34 .mkf { position: absolute; inset: 0; border-radius: 50%; background: var(--uim-accent); display: grid; place-items: center; transform: scale(0); }
.uim-u34 .mkf svg { width: 22px; height: 22px; }
.uim-u34 .mkf path { fill: none; stroke: #FFF; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 22 22; stroke-dashoffset: 22; }
.uim-u34 .mkp { position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--uim-accent); opacity: 0; pointer-events: none; }
.uim-u34 .tk { position: absolute; top: 350px; width: 120px; margin-left: -60px; text-align: center; font: 500 18px/1.3 'JetBrains Mono', ui-monospace, monospace; color: var(--uim-muted); white-space: nowrap; }

.uim-u34 .slot { position: absolute; left: 72px; top: 536px; width: 840px; height: 172px; border-radius: 32px; border: 2px dashed #CFCFC8; display: flex; align-items: center; justify-content: center; gap: 14px;
  font-weight: 600; font-size: 24px; line-height: 1.3; color: var(--uim-muted); white-space: nowrap; }
.uim-u34 .slot svg { width: 28px; height: 28px; flex: none; }
.uim-u34 .rw { top: 536px; height: 172px; border-radius: 32px; opacity: 0; transform-origin: 50% 0; will-change: transform, opacity; }
.uim-u34 .gift { position: absolute; left: 40px; top: 40px; width: 92px; height: 92px; border-radius: 28px; background: var(--uim-accent-soft); display: grid; place-items: center; color: var(--uim-accent); }
.uim-u34 .gift svg { width: 46px; height: 46px; }
.uim-u34 .rk { position: absolute; left: 160px; top: 34px; font: 600 18px/1.3 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--uim-muted); white-space: nowrap; }
.uim-u34 .rt { position: absolute; left: 160px; top: 60px; font-weight: 750; font-size: 46px; line-height: 1.15; letter-spacing: -.03em; white-space: nowrap; }
.uim-u34 .rn { position: absolute; left: 160px; top: 116px; font-weight: 500; font-size: 22px; line-height: 1.3; color: var(--uim-muted); white-space: nowrap; }
.uim-u34 .ok { position: absolute; right: 44px; top: 54px; width: 64px; height: 64px; border-radius: 50%; background: var(--uim-good); display: grid; place-items: center; transform: scale(0); }
.uim-u34 .ok svg { width: 36px; height: 36px; }
.uim-u34 .ok path { fill: none; stroke: #FFF; stroke-width: 4.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 28 28; stroke-dashoffset: 28; }

/* u35 Product Spotlight */
/* u35 Product Spotlight · scoped to its stage (984x800), dark theme */
.uim-u35 .card { position: absolute; left: 56px; top: 56px; width: 872px; height: 688px; border-radius: 40px; background: var(--uim-dark-2); box-shadow: inset 0 0 0 1px var(--uim-dark-line); will-change: transform, opacity; }
.uim-u35 .pane { position: absolute; left: 24px; top: 24px; width: 392px; height: 640px; border-radius: 28px; overflow: hidden; background: radial-gradient(ellipse 75% 50% at 50% 24%, rgba(255, 255, 255, .11), rgba(255, 255, 255, 0) 70%), #202024; box-shadow: inset 0 0 0 1px var(--uim-dark-line); }
.uim-u35 .tag { position: absolute; left: 22px; top: 22px; height: 36px; padding: 0 16px; border-radius: 999px; background: #F5F5F2; color: var(--uim-ink); display: flex; align-items: center; font: 600 18px/1.3 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.uim-u35 .plinth { position: absolute; left: 36px; top: 440px; width: 320px; height: 76px; border-radius: 50%; background: radial-gradient(ellipse at 50% 40%, #3C3C43 0%, #2C2C32 70%); box-shadow: 0 20px 0 -2px #202024, 0 22px 0 -2px #2A2A2F, 0 40px 50px -14px rgba(0, 0, 0, .7); }
.uim-u35 .cast { position: absolute; left: 56px; top: 456px; width: 280px; height: 40px; border-radius: 50%; background: radial-gradient(ellipse, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 70%); }
.uim-u35 .prod { position: absolute; left: 76px; top: 118px; width: 240px; height: 360px; transform-style: preserve-3d; will-change: transform; }
.uim-u35 .ly { position: absolute; inset: 0; border-radius: 56px; background: #9D988C; }
.uim-u35 .ft { position: absolute; inset: 0; border-radius: 56px; overflow: hidden; background: linear-gradient(160deg, #F6F3EC 0%, #E0DBD0 52%, #CBC6BA 100%); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .75), inset 0 -14px 28px rgba(0, 0, 0, .10); }
.uim-u35 .grille { position: absolute; left: 33px; top: 128px; width: 174px; height: 192px; border-radius: 32px; background: radial-gradient(circle, #5E5A52 1.7px, rgba(94, 90, 82, 0) 2.3px) 0 0 / 12px 12px, #C4BFB2; box-shadow: inset 0 3px 8px rgba(0, 0, 0, .18), 0 1px 0 rgba(255, 255, 255, .7); }
.uim-u35 .dial { position: absolute; left: 88px; top: 38px; width: 64px; height: 64px; border-radius: 50%; background: #25252A; box-shadow: inset 0 0 0 2px #3A3A41, 0 3px 6px rgba(0, 0, 0, .25); display: grid; place-items: center; }
.uim-u35 .dial i { width: 32px; height: 32px; border-radius: 50%; background: var(--uim-accent); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35); }
.uim-u35 .sw { position: absolute; left: 0; top: -60px; width: 76px; height: 480px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .6), rgba(255, 255, 255, 0)); pointer-events: none; }

.uim-u35 .cat { position: absolute; left: 456px; top: 44px; font: 600 18px/1.3 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--uim-soft); white-space: nowrap; }
.uim-u35 .nm { position: absolute; left: 456px; top: 74px; font-weight: 750; font-size: 54px; line-height: 1.1; letter-spacing: -.035em; color: #F5F5F2; white-space: nowrap; }
.uim-u35 .tg { position: absolute; left: 456px; top: 144px; font-weight: 500; font-size: 24px; line-height: 1.35; letter-spacing: -.01em; color: var(--uim-soft); white-space: nowrap; }
.uim-u35 .sp { position: absolute; left: 456px; width: 392px; height: 64px; display: flex; align-items: center; gap: 18px; }
.uim-u35 .ic { flex: none; width: 48px; height: 48px; border-radius: 15px; background: #26262B; box-shadow: inset 0 0 0 1px #34343A; display: grid; place-items: center; color: var(--uim-accent); opacity: 0; }
.uim-u35 .ic svg { width: 24px; height: 24px; }
.uim-u35 .tx { display: flex; align-items: center; min-width: 0; }
.uim-u35 .ty { font-weight: 550; font-size: 24px; line-height: 1.3; letter-spacing: -.01em; color: #F5F5F2; white-space: nowrap; }
.uim-u35 .cr { flex: none; width: 3px; height: 28px; margin-left: 3px; border-radius: 2px; background: var(--uim-accent); opacity: 0; }
.uim-u35 .chip { position: absolute; left: 456px; top: 520px; height: 72px; padding: 0 34px; border-radius: 999px; background: var(--uim-accent); color: var(--on-accent, #0C0C0D); display: flex; align-items: center;
  font-weight: 750; font-size: 36px; line-height: 1.2; letter-spacing: -.03em; white-space: nowrap; opacity: 0; }
.uim-u35 .pnote { position: absolute; top: 520px; height: 72px; display: flex; align-items: center; font-weight: 500; font-size: 20px; line-height: 1.3; color: var(--uim-soft); white-space: nowrap; opacity: 0; }
.uim-u35 .dv { position: absolute; left: 456px; top: 216px; width: 392px; height: 1px; background: var(--uim-dark-line); }

/* u36 Gift Card */
/* u36 Gift Card · scoped to its stage (984x800) */
.uim-u36 .bg { position: absolute; inset: 1px; border-radius: 39px; background: var(--uim-fill); }
.uim-u36 .fsh { position: absolute; left: 232px; top: 548px; width: 520px; height: 46px; border-radius: 50%; background: radial-gradient(ellipse, rgba(12, 12, 13, .20), rgba(12, 12, 13, 0) 70%); }
.uim-u36 .lift { position: absolute; left: 162px; top: 130px; width: 660px; height: 416px; will-change: transform, opacity; }
.uim-u36 .flip { position: absolute; inset: 0; transform-style: preserve-3d; }
.uim-u36 .face { position: absolute; inset: 0; border-radius: 32px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: var(--uim-shadow); }
.uim-u36 .front { background: linear-gradient(145deg, #1F1F23 0%, #111113 62%); color: #F5F5F2; }
.uim-u36 .front::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 92% 112%, color-mix(in srgb, var(--uim-accent) 58%, transparent) 0, color-mix(in srgb, var(--uim-accent) 0%, transparent) 46%); }
.uim-u36 .ring1, .uim-u36 .ring2 { position: absolute; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .09); }
.uim-u36 .ring1 { right: -130px; top: -160px; width: 420px; height: 420px; }
.uim-u36 .ring2 { right: -44px; top: -76px; width: 240px; height: 240px; }
.uim-u36 .mark { position: absolute; left: 48px; top: 44px; width: 64px; height: 40px; }
.uim-u36 .mark i { position: absolute; top: 2px; width: 36px; height: 36px; border-radius: 50%; }
.uim-u36 .mark .m1 { left: 0; background: var(--uim-accent); }
.uim-u36 .mark .m2 { left: 24px; border: 2.5px solid #F5F5F2; }
.uim-u36 .bn { position: absolute; left: 128px; top: 40px; height: 48px; display: flex; align-items: center; font-weight: 700; font-size: 30px; line-height: 1.3; letter-spacing: -.02em; white-space: nowrap; }
.uim-u36 .cl { position: absolute; right: 48px; top: 48px; font: 600 18px/1.3 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--uim-soft); white-space: nowrap; }
.uim-u36 .am { position: absolute; left: 48px; bottom: 40px; font-weight: 750; font-size: 124px; line-height: 1; letter-spacing: -.045em; white-space: nowrap; }
.uim-u36 .back { visibility: hidden; background: var(--uim-paper); box-shadow: var(--uim-shadow), inset 0 0 0 1px var(--uim-line); transform: rotateY(180deg); }
.uim-u36 .stripe { position: absolute; left: 0; right: 0; top: 40px; height: 60px; background: var(--uim-dark); }
.uim-u36 .cdl { position: absolute; left: 48px; top: 136px; font: 600 18px/1.3 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--uim-muted); white-space: nowrap; }
.uim-u36 .cbox { position: absolute; left: 48px; top: 172px; width: 564px; height: 112px; border-radius: 24px; background: var(--uim-fill); border: 2px dashed #CFCFC8; display: grid; place-items: center; }
.uim-u36 .hl { position: absolute; inset: -2px; border-radius: 24px; background: var(--uim-accent-soft); border: 2px solid var(--uim-accent); opacity: 0; pointer-events: none; }
.uim-u36 .code { position: relative; font: 700 42px/1.3 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .06em; white-space: nowrap; }
.uim-u36 .cn { position: absolute; left: 48px; top: 312px; font-weight: 500; font-size: 24px; line-height: 1.3; color: var(--uim-muted); white-space: nowrap; }

.uim-u36 .btn { position: absolute; left: 376px; top: 602px; width: 232px; height: 68px; border-radius: 999px; opacity: 0; will-change: transform, opacity; }
.uim-u36 .b1, .uim-u36 .b2 { position: absolute; inset: 0; border-radius: 999px; display: flex; align-items: center; justify-content: center; gap: 12px; font-weight: 650; font-size: 26px; line-height: 1.3; letter-spacing: -.005em; white-space: nowrap; }
.uim-u36 .b1 { background: var(--uim-ink); color: #FFF; }
.uim-u36 .b1 svg { width: 26px; height: 26px; }
.uim-u36 .b2 { background: #E1F4E8; color: var(--uim-good-text); box-shadow: inset 0 0 0 1.5px var(--uim-good); clip-path: inset(0 100% 0 0 round 34px); }
.uim-u36 .ok { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--uim-good); display: grid; place-items: center; }
.uim-u36 .ok svg { width: 20px; height: 20px; }
.uim-u36 .ok path { fill: none; stroke: #FFF; stroke-width: 4.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 28 28; stroke-dashoffset: 28; }