/* ==========================================================================
   Realistic hero scenes for Solution pages (tools/solution_visual.py).
   A scene is a 60×48em stage; 1em = 1/60 of its container's width, so the
   whole composition scales with the card. Device screens keep their own
   (light) palette like real hardware; the stage follows the site theme.
   ========================================================================== */

.sol-visual { container-type: inline-size; }
.scene {
  position: relative; width: 100%; aspect-ratio: 60 / 48; font-size: calc(100cqw / 60);
  font-family: -apple-system, "SF Pro Text", "Geist", system-ui, sans-serif; color: #0b0b0f; overflow: visible;
  transform-style: preserve-3d; transform: perspective(1600px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
/* depth: floating cards sit in front of devices and windows */
.scene .s-card { translate: 0 0 70px; }
.scene .iphone, .scene .pixel, .scene .browser, .scene .editor, .scene .term { translate: 0 0 0; }
/* glass glare on screens and windows */
.screen::after, .browser::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 6; border-radius: inherit;
  background: linear-gradient(115deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 32%, rgba(255,255,255,0) 70%, rgba(255,255,255,.08) 100%);
  mix-blend-mode: soft-light;
}
.browser { position: absolute; }
.scene * { box-sizing: border-box; }
.scene .abs { position: absolute; }
.scene svg { display: block; }

/* ---------- devices ---------- */

.iphone {
  position: absolute; width: 21.6em; height: 44em; border-radius: 3.9em; padding: .82em;
  background: linear-gradient(145deg, #e8e6e3 0%, #9c9a97 18%, #d8d6d2 42%, #8d8b88 70%, #cfcdc9 100%);
  box-shadow: 0 0 0 .08em rgba(0,0,0,.35), 0 3em 5em -1em rgba(10,10,20,.35), 0 1em 2em -1em rgba(10,10,20,.25), inset 0 0 .15em rgba(255,255,255,.7);
}
.iphone::before, .iphone::after { content: ""; position: absolute; width: .35em; border-radius: .3em; background: linear-gradient(90deg, #7d7b78, #c9c7c3); }
.iphone::before { left: -.3em; top: 9em; height: 3.2em; box-shadow: 0 4.6em 0 0 #a9a7a3, 0 9.4em 0 0 #a9a7a3; }
.iphone::after { right: -.3em; top: 12em; height: 6em; }
.pixel {
  position: absolute; width: 21em; height: 44em; border-radius: 3em; padding: .55em;
  background: linear-gradient(160deg, #3b3d42, #1d1e22 60%, #2d2f33);
  box-shadow: 0 0 0 .08em rgba(0,0,0,.5), 0 3em 5em -1em rgba(10,10,20,.4), inset 0 0 .1em rgba(255,255,255,.25);
}
.pixel::after { content: ""; position: absolute; right: -.25em; top: 10em; height: 7em; width: .3em; border-radius: .3em; background: #2a2b2f; }
.screen { position: relative; width: 100%; height: 100%; border-radius: 3.3em; overflow: hidden; background: #f5f5f7; box-shadow: 0 0 0 .32em #050505, inset 0 0 0 .05em rgba(0,0,0,.4); }
.pixel .screen { border-radius: 2.5em; background: #f7f9fc; box-shadow: 0 0 0 .25em #050505; }
.island { position: absolute; z-index: 5; top: .95em; left: 50%; width: 7.6em; height: 2.2em; border-radius: 1.2em; background: #000; transform: translateX(-50%); }
.punch { position: absolute; z-index: 5; top: 1.1em; left: 50%; width: 1.3em; height: 1.3em; border-radius: 50%; background: #0b0b0d; transform: translateX(-50%); box-shadow: inset 0 0 0 .25em #1f2228; }
.status { position: absolute; z-index: 4; inset: 0 0 auto 0; height: 4.2em; display: flex; justify-content: space-between; align-items: center; padding: .9em 2.2em 0 2.6em; font-weight: 600; font-size: 1.25em; letter-spacing: -.01em; }
.status .ic { display: flex; gap: .3em; align-items: center; }
.pixel .status { font-size: 1.05em; padding: .6em 1.8em 0; height: 3.4em; font-weight: 500; }
.home-ind { position: absolute; bottom: .7em; left: 50%; width: 9em; height: .4em; border-radius: .3em; background: #111; transform: translateX(-50%); opacity: .85; }

.browser {
  position: absolute; border-radius: 1.2em; overflow: hidden; background: #fff;
  box-shadow: 0 0 0 .08em rgba(0,0,0,.12), 0 2.5em 4.5em -1em rgba(10,10,30,.3), 0 .8em 1.6em -.6em rgba(10,10,30,.18);
}
.browser .bar { height: 3.4em; display: flex; align-items: center; gap: .6em; padding: 0 1.2em; background: #f3f3f5; border-bottom: .08em solid #e4e4e8; }
.dots { display: flex; gap: .55em; }
.dots i { width: 1.05em; height: 1.05em; border-radius: 50%; background: #ff5f57; }
.dots i:nth-child(2) { background: #febc2e; } .dots i:nth-child(3) { background: #28c840; }
.url { flex: 1; margin: 0 4em; height: 2.1em; border-radius: .7em; background: #e8e8ec; display: flex; align-items: center; justify-content: center; gap: .5em; font-size: 1.05em; color: #55565c; }
.url svg { width: .9em; height: .9em; }

.editor, .term {
  position: absolute; border-radius: 1.1em; overflow: hidden; background: #16171d; color: #c8cad3;
  box-shadow: 0 0 0 .08em rgba(255,255,255,.06), 0 2.5em 4.5em -1em rgba(0,0,0,.45);
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
.editor .bar, .term .bar { height: 2.8em; display: flex; align-items: center; gap: .7em; padding: 0 1em; background: #1d1f27; border-bottom: .08em solid #262833; font-size: 1em; color: #8b8fa0; }
.editor .bar .tab { margin-left: 1em; padding: .35em .9em; border-radius: .45em; background: #262833; color: #e3e5ec; }
.code { padding: 1.1em 1.3em; font-size: 1.12em; line-height: 1.72; white-space: pre; }
.code .ln { display: inline-block; width: 1.8em; color: #4b4f5f; }
.k { color: #c792ea; } .f { color: #82aaff; } .s { color: #c3e88d; } .n { color: #f78c6c; } .c { color: #676e85; font-style: italic; }
.t { color: #f07178; } .a { color: #ffcb6b; } .p { color: #89ddff; } .v { color: #e3e5ec; }
.term .code { font-size: 1.05em; line-height: 1.75; }
.ok { color: #4ade80; } .warn { color: #fbbf24; } .dim { color: #6b7080; } .m-get { color: #60a5fa; } .m-post { color: #c084fc; }

.s-card {
  position: absolute; border-radius: 1.4em; background: rgba(255,255,255,.88); backdrop-filter: blur(1.4em); -webkit-backdrop-filter: blur(1.4em);
  box-shadow: 0 0 0 .08em rgba(0,0,0,.07), 0 1.8em 3.4em -1em rgba(10,10,30,.3);
  padding: 1.2em 1.4em; font-size: 1.15em;
}
:root[data-theme="dark"] .scene .s-card, :root:not([data-theme]) .scene .s-card { background: rgba(28,29,36,.86); color: #f3f3f6; box-shadow: 0 0 0 .08em rgba(255,255,255,.08), 0 1.8em 3.4em -1em rgba(0,0,0,.6); }
:root[data-theme="light"] .scene .s-card { background: rgba(255,255,255,.9); color: #0b0b0f; }
.s-card small { display: block; font-size: .78em; opacity: .6; margin-bottom: .2em; }
.s-card b { font-weight: 650; letter-spacing: -.01em; }
.pill { display: inline-flex; align-items: center; gap: .4em; padding: .35em .8em; border-radius: 99em; font-size: .85em; font-weight: 600; }

/* ---------- motion ---------- */

.scene [style*="--d"] { animation-delay: var(--d) !important; }
/* Story steps share one timeline driven by main.js (data-at = seconds into the loop). */
.scene [data-at] { opacity: 0; transform: translateY(.9em); transition: opacity .5s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.scene [data-at].is-on { opacity: 1; transform: none; }
.no-js .scene [data-at], .scene.is-static [data-at] { opacity: 1; transform: none; transition: none; }
.a-outline { opacity: 0; animation: sc-outline 2.4s ease-out infinite; }
@keyframes sc-outline { 0%, 100% { opacity: 0; } 10% { opacity: 1; } 45% { opacity: 0; } }
.a-float { animation: sc-float 5s ease-in-out infinite alternate both; }
@keyframes sc-float { from { transform: translateY(0); } to { transform: translateY(-1em); } }
.a-drop { animation: sc-drop 8s cubic-bezier(.2,.8,.2,1) infinite both; }
@keyframes sc-drop { 0%, 30% { opacity: 0; transform: translateY(-4em) scale(.92); } 36%, 70% { opacity: 1; transform: none; } 78%, 100% { opacity: 0; transform: translateY(-4em) scale(.92); } }
.a-island { animation: sc-island 8s cubic-bezier(.3,.8,.2,1) infinite both; }
@keyframes sc-island { 0%, 8%, 26%, 100% { width: 7.6em; height: 2.2em; } 12%, 22% { width: 16.4em; height: 3.7em; border-radius: 1.85em; } }
.island-live { position: absolute; inset: 0; display: flex; align-items: center; gap: .65em; padding: 0 1em 0 .7em; color: #fff; font-size: 1em; opacity: 0; animation: sc-island-live 8s ease infinite both; white-space: nowrap; }
@keyframes sc-island-live { 0%, 12%, 22%, 100% { opacity: 0; } 14%, 20% { opacity: 1; } }
.a-pulse { animation: sc-pulse 2s ease-in-out infinite; }
@keyframes sc-pulse { 50% { transform: scale(1.08); } }
.a-blink { animation: sc-blink 1s steps(1) infinite; }
@keyframes sc-blink { 50% { opacity: 0; } }
.a-type { overflow: hidden; display: inline-block; vertical-align: bottom; animation: sc-type 8s steps(28) infinite both; white-space: nowrap; }
@keyframes sc-type { 0% { max-width: 0; } 35%, 90% { max-width: 40em; } 100% { max-width: 0; } }
.a-flash-g { animation: sc-flash-g 2.4s ease-out infinite; }
.a-flash-r { animation: sc-flash-r 2.4s ease-out infinite; }
@keyframes sc-flash-g { 0%, 100% { background: transparent; } 8% { background: rgba(34,197,94,.28); } 40% { background: transparent; } }
@keyframes sc-flash-r { 0%, 100% { background: transparent; } 8% { background: rgba(239,68,68,.25); } 40% { background: transparent; } }
.a-draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: sc-draw 8s cubic-bezier(.4,0,.2,1) infinite both; }
@keyframes sc-draw { 0% { stroke-dashoffset: 1; } 45%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } }
.a-ring { stroke-dasharray: 100; stroke-dashoffset: 100; animation: sc-ring 8s cubic-bezier(.4,0,.2,1) infinite both; }
@keyframes sc-ring { 0% { stroke-dashoffset: 100; } 35%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 100; } }
.a-bar { transform-origin: bottom; animation: sc-bar 2.2s ease-in-out infinite alternate both; }
@keyframes sc-bar { from { transform: scaleY(.35); } to { transform: scaleY(1); } }
.a-grow-x { transform-origin: left; animation: sc-grow-x 8s cubic-bezier(.4,0,.2,1) infinite both; }
@keyframes sc-grow-x { 0% { transform: scaleX(0); } 50%, 90% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
.a-cursor1 { animation: sc-cur1 7s cubic-bezier(.5,0,.3,1) infinite both; }
@keyframes sc-cur1 { 0%, 10% { transform: translate(0, 0); } 40%, 60% { transform: translate(17.2em, -3.6em); } 85%, 100% { transform: translate(0, 0); } }
.a-cursor2 { animation: sc-cur2 6s cubic-bezier(.5,0,.3,1) infinite both; }
@keyframes sc-cur2 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-6em, 6em); } }
.a-move-card { animation: sc-move-card 7s cubic-bezier(.5,0,.3,1) infinite both; }
@keyframes sc-move-card { 0%, 10% { transform: translate(0, 0) rotate(0); } 20% { transform: translate(1.2em, -.6em) rotate(-2deg); } 40%, 60% { transform: translate(17.2em, -3.6em) rotate(0); } 85%, 100% { transform: translate(0, 0); } }
.a-swap1 { animation: sc-swap1 8s ease infinite both; }
.a-swap2 { animation: sc-swap2 8s ease infinite both; }
@keyframes sc-swap1 { 0%, 40% { opacity: 1; } 46%, 94% { opacity: 0; } 100% { opacity: 1; } }
@keyframes sc-swap2 { 0%, 40% { opacity: 0; transform: scale(.85); } 46%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.a-scan { animation: sc-scan 8s steps(1) infinite both; }
@keyframes sc-scan { 0% { transform: translateY(0); } 25% { transform: translateY(4.4em); } 50% { transform: translateY(8.8em); } 75% { transform: translateY(13.2em); } }
.a-hue { animation: sc-hue 8s ease-in-out infinite both; }
@keyframes sc-hue { 0%, 40% { filter: none; } 50%, 90% { filter: hue-rotate(150deg) saturate(1.2); } 100% { filter: none; } }
.a-ripple { animation: sc-ripple 2.2s ease-out infinite; }
@keyframes sc-ripple { 0% { transform: scale(.6); opacity: .6; } 100% { transform: scale(2.6); opacity: 0; } }
.a-spin { animation: sc-spin 1s linear infinite; }
@keyframes sc-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .scene *, .scene *::before, .scene *::after { animation: none !important; }
  .scene .a-draw, .scene .a-ring { stroke-dashoffset: 0; }
  .scene .island-live, .scene .a-swap2 { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) { .scene { transform: none !important; } }

/* ---------- AI agent canvas ---------- */
.ai-canvas { background: #fbfbfd; }
.ai-canvas::before { content: ""; position: absolute; inset: 3.4em 0 0; background-image: radial-gradient(#dfe1e8 .09em, transparent .1em); background-size: 1.6em 1.6em; }
.ai-node { position: absolute; z-index: 1; padding: .9em 1em; border-radius: 1em; background: #fff; box-shadow: 0 0 0 .07em #e6e7ee, 0 .8em 1.6em -.9em rgba(20,20,50,.25); }
.ai-agent { box-shadow: 0 0 0 .12em #c4b5fd, 0 0 0 .7em rgba(124,58,237,.07), 0 1.2em 2.4em -1em rgba(124,58,237,.45); }
.ai-orb { display: grid; place-items: center; width: 2.8em; height: 2.8em; border-radius: 50%; color: #fff; font-size: 1em; background: conic-gradient(from 0deg, #7c3aed, #c084fc, #60a5fa, #7c3aed); box-shadow: 0 .4em 1em -.2em rgba(124,58,237,.6); }
.ai-dot { width: .55em; height: .55em; border-radius: 50%; }
.ai-think i { font-style: normal; animation: sc-blink 1.2s infinite both; }
.ai-think i:nth-child(2) { animation-delay: .2s; } .ai-think i:nth-child(3) { animation-delay: .4s; }
@keyframes sc-blink { 0%, 80%, 100% { opacity: .2; } 40% { opacity: 1; } }
.ai-progress { width: 0; animation: sc-ai-progress 8s linear infinite; }
@keyframes sc-ai-progress { 0%, 8% { width: 0; } 78%, 100% { width: 100%; } }
.scene g[data-at] { transform: none; }
.flow-line { stroke-dasharray: 6 8; animation: sc-dash 1s linear infinite; }
@keyframes sc-dash { to { stroke-dashoffset: -28; } }
.flow-dot { offset-rotate: 0deg; offset-distance: 0%; opacity: 0; filter: drop-shadow(0 0 4px rgba(124,58,237,.8)); }
.is-on > .flow-dot { animation: sc-flow .7s cubic-bezier(.45,0,.25,1) both; }
@keyframes sc-flow { 0% { offset-distance: 0%; opacity: 1; } 85% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .flow-line, .ai-progress, .ai-think i { animation: none; } .ai-progress { width: 100%; } }

/* ---------- shared story primitives ---------- */
.s-cursor { position: absolute; left: 0; top: 0; z-index: 30; pointer-events: none; translate: 0 0 90px; }
.s-click { position: absolute; left: -1.1em; top: -1.1em; width: 2.2em; height: 2.2em; border-radius: 50%; opacity: 0; }
.scene [data-type].is-typing::after { content: ""; display: inline-block; width: .09em; height: 1.05em; margin-left: .06em; vertical-align: -.15em; background: currentColor; animation: sc-caret .7s steps(1) infinite; }
@keyframes sc-caret { 50% { opacity: 0; } }
.scene .hl.is-on { animation: sc-hl 2s ease-out both; }
@keyframes sc-hl { 0% { background-color: rgba(99,102,241,.18); } 100% { background-color: rgba(99,102,241,0); } }
.scene .hl-g.is-on { animation: sc-hl-g 2s ease-out both; }
@keyframes sc-hl-g { 0% { background-color: rgba(34,197,94,.2); } 100% { background-color: rgba(34,197,94,0); } }
.scene .pop.is-on { animation: sc-pop .5s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes sc-pop { 0% { transform: scale(.6); opacity: 0; } 100% { transform: none; opacity: 1; } }
.scene .press.is-on { animation: sc-press .4s ease both; }
@keyframes sc-press { 40% { transform: scale(.93); filter: brightness(.9); } }
.scene .slide-l[data-at] { transform: translateX(-1.2em); }
.scene .slide-l[data-at].is-on { transform: none; }
.scene .fade[data-at] { transform: none; }
.scene .grow-w[data-at] { transform: scaleX(0); transform-origin: left; opacity: 1; transition: transform 1.2s cubic-bezier(.3,.7,.2,1); }
.scene .grow-w[data-at].is-on { transform: none; }
.scene .grow-h[data-at] { transform: scaleY(0); transform-origin: bottom; opacity: 1; transition: transform .9s cubic-bezier(.3,.7,.2,1); }
.scene .grow-h[data-at].is-on { transform: none; }
.scene .shimmer { background: linear-gradient(90deg, #eef0f4 0%, #f7f8fa 40%, #eef0f4 80%) 0 0 / 200% 100%; animation: sc-shimmer 1.2s linear infinite; }
@keyframes sc-shimmer { to { background-position: -200% 0; } }
.scene .glow-ring { position: absolute; inset: -.5em; border-radius: inherit; border: .15em solid currentColor; opacity: 0; animation: sc-ripple 2s ease-out infinite; }
@media (prefers-reduced-motion: reduce) { .s-cursor { display: none; } }

/* ==========================================================================
   Build stage (tools/solution_stage.py): blueprint -> product, code, pipeline
   ========================================================================== */
.scene.stage { transform: none; --st-glass: rgba(255,255,255,.86); --st-ink: #0b0b0f; --st-sub: #6b6e78; --st-line: rgba(11,11,15,.08); --st-ok: #0891b2; }
:root[data-theme="dark"] .scene.stage, :root:not([data-theme]) .scene.stage { --st-glass: rgba(22,23,29,.82); --st-ink: #f3f3f6; --st-sub: #9a9ca6; --st-line: rgba(255,255,255,.08); --st-ok: #22d3ee; }
:root[data-theme="light"] .scene.stage { --st-glass: rgba(255,255,255,.86); --st-ink: #0b0b0f; --st-sub: #6b6e78; --st-line: rgba(11,11,15,.08); --st-ok: #0891b2; }
.stage .ly { position: absolute; will-change: translate; }
.st-glow { position: absolute; left: 38em; top: 20em; width: 40em; height: 40em; transform: translate(-50%, -50%); pointer-events: none; filter: blur(2em); opacity: .7;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%), radial-gradient(closest-side at 70% 70%, rgba(34,211,238,.22), transparent 70%); }
.stage .st-glow-live[data-at] { transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(34,211,238,.32), transparent 70%); }
.stage .st-glow-live[data-at].is-on { opacity: .8; transform: translate(-50%, -50%); }

/* product slot: the scene's product, scaled to fit (main.js) */
.st-product { left: 19em; top: 1.5em; width: 41em; height: 36em; }
.st-fit { position: absolute; left: 0; top: 0; width: 60em; height: 48em; transform-origin: 0 0; transform: scale(.75); }
.st-layer { position: absolute; inset: 0; }
.st-real { animation: st-reveal 8s cubic-bezier(.5,0,.3,1) infinite both; }
@keyframes st-reveal { 0%, 16% { clip-path: inset(-10% -10% 110% -10%); } 30%, 92% { clip-path: inset(-10% -10% -10% -10%); } 100% { clip-path: inset(-10% -10% 110% -10%); } }
.st-wire { animation: st-wire 8s linear infinite both; }
@keyframes st-wire { 0% { opacity: 0; } 4%, 28% { opacity: 1; } 34%, 92% { opacity: 0; } 97%, 100% { opacity: 1; } }
.st-scan { position: absolute; left: -2em; right: -2em; top: 0; height: .25em; border-radius: 1em; opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--accent) 20%, #22d3ee 80%, transparent); box-shadow: 0 0 1.6em .4em color-mix(in srgb, var(--accent) 45%, transparent);
  animation: st-scan 8s cubic-bezier(.5,0,.3,1) infinite both; }
@keyframes st-scan { 0%, 15% { top: 0; opacity: 0; } 16.5% { opacity: 1; } 28.5% { opacity: 1; } 30% { top: 48em; opacity: 0; } 100% { top: 48em; opacity: 0; } }
/* blueprint: the same UI, drawn as outlines and text bars */
.st-wire *, .st-wire *::before, .st-wire *::after { animation: none !important; transition: none !important; color: transparent !important; background: transparent !important;
  box-shadow: none !important; text-shadow: none !important; filter: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  border-color: color-mix(in srgb, var(--accent) 30%, transparent) !important; }
.st-wire div { outline: .07em dashed color-mix(in srgb, var(--accent) 42%, transparent); outline-offset: -.07em; }
.st-wire b, .st-wire small, .st-wire span:not(:has(*)) { background: color-mix(in srgb, var(--accent) 20%, transparent) !important; border-radius: .3em; }
.st-wire svg * { fill: none !important; stroke: color-mix(in srgb, var(--accent) 50%, transparent) !important; stroke-width: 1px !important; stroke-dasharray: 3 3 !important; vector-effect: non-scaling-stroke; }
.st-wire .s-cursor, .st-wire .glow-ring { display: none; }
.st-wire .w-rise { opacity: 1; }

/* code window */
.st-code-ly { left: 0; top: 5em; width: 21.5em; }
.st-code { border-radius: 1.1em; overflow: hidden; background: rgba(18,19,25,.9); backdrop-filter: blur(1.4em); -webkit-backdrop-filter: blur(1.4em);
  box-shadow: 0 0 0 .07em rgba(255,255,255,.08), 0 2.4em 4.4em -1.2em rgba(0,0,0,.55); font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace; color: #c8cad3; }
.st-bar { display: flex; align-items: center; gap: .7em; padding: .8em 1em; border-bottom: .07em solid rgba(255,255,255,.07); font-size: .9em; color: #8b8fa0; }
.st-bar .dots i { width: .75em; height: .75em; }
.st-bar em { margin-left: auto; display: inline-flex; align-items: center; gap: .35em; font-style: normal; font-size: .85em; letter-spacing: .14em; color: #a7adff; }
.st-bar em svg { width: .9em; height: .9em; }
.st-lines { padding: .9em 1.1em .5em; font-size: .8em; line-height: 1.75; white-space: pre; overflow: hidden; }
.st-review { display: inline-flex; align-items: center; gap: .5em; margin: .2em 1.1em 1em; padding: .4em .8em .4em .55em; border-radius: 99em; font-size: .8em; letter-spacing: .04em; color: #e3e5ec;
  background: rgba(34,211,238,.1); box-shadow: inset 0 0 0 .07em rgba(34,211,238,.3); }
.st-review svg { width: 1.1em; height: 1.1em; color: #22d3ee; }

/* glass cards: pipeline, progress, live toast */
.st-pipe, .st-day, .st-toast { background: var(--st-glass); color: var(--st-ink); backdrop-filter: blur(1.4em); -webkit-backdrop-filter: blur(1.4em);
  box-shadow: 0 0 0 .07em var(--st-line), 0 2em 3.6em -1.2em rgba(10,10,30,.35); border-radius: 1.1em; }
.st-pipe-ly { left: 1.5em; top: 29em; width: 18.5em; }
.st-pipe { padding: .9em 1.1em 1em; }
.st-pipe-h { display: flex; justify-content: space-between; align-items: center; padding-bottom: .7em; margin-bottom: .4em; border-bottom: .07em solid var(--st-line);
  font: 500 .75em/1 "Geist Mono", ui-monospace, monospace; letter-spacing: .18em; text-transform: uppercase; color: var(--st-sub); }
.st-pipe-h em { font-style: normal; letter-spacing: .04em; text-transform: none; padding: .3em .6em; border-radius: 99em; background: var(--st-line); color: var(--st-ink); }
.st-pipe ul { list-style: none; margin: 0; padding: 0; }
.st-pipe li { display: flex; align-items: center; gap: .7em; height: 2em; font-size: .98em; font-weight: 500; }
.st-pipe li small { margin-left: auto; font: .78em/1 "Geist Mono", ui-monospace, monospace; color: var(--st-sub); white-space: nowrap; }
.st-tx { opacity: .45; transition: opacity .4s ease; white-space: nowrap; }
.st-stt { position: relative; flex: none; width: 1.3em; height: 1.3em; }
.st-pend { position: absolute; left: 50%; top: 50%; width: .5em; height: .5em; margin: -.25em; border-radius: 50%; background: var(--st-sub); opacity: .6; animation: sc-pulse 1.1s ease-in-out infinite; transition: opacity .2s; }
.st-ok { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; color: var(--st-ok); background: color-mix(in srgb, var(--st-ok) 16%, transparent); }
.st-ok svg { width: .8em; height: .8em; }
.st-stt:has(.st-ok.is-on) .st-pend { opacity: 0; }
.st-stt:has(.st-ok.is-on) + .st-tx { opacity: 1; }
.st-day-ly { left: 48em; top: 37em; width: 12em; }
.st-day { display: grid; gap: .6em; padding: .85em 1em 1em; }
.st-day-t { display: flex; justify-content: space-between; font: 500 .72em/1 "Geist Mono", ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--st-sub); }
.st-dwin { height: 1.9em; overflow: hidden; font: 600 1.5em/1.9em "Geist", system-ui, sans-serif; letter-spacing: -.02em; }
.st-dstack { display: block; animation: st-roll 8s cubic-bezier(.6,0,.3,1) infinite both; }
.st-dstack span { display: block; height: 1.9em; }
@keyframes st-roll { 0%, 24% { transform: translateY(0); } 28%, 36% { transform: translateY(-20%); } 40%, 48% { transform: translateY(-40%); } 52%, 59% { transform: translateY(-60%); } 64%, 100% { transform: translateY(-80%); } }
.st-dtrack { height: .3em; border-radius: 1em; background: var(--st-line); overflow: hidden; }
.st-dfill { display: block; height: 100%; border-radius: 1em; background: linear-gradient(90deg, var(--accent), #22d3ee); transform-origin: 0 50%; animation: st-fill 8s cubic-bezier(.45,0,.25,1) infinite both; }
@keyframes st-fill { 0%, 4% { transform: scaleX(.03); } 64%, 100% { transform: scaleX(1); } }
.st-toast-ly { left: 29em; top: 0; width: 24em; z-index: 5; }
.st-toast { display: flex; align-items: center; gap: .8em; padding: .8em .9em; border-radius: 1.3em; }
.stage .st-toast[data-at] { transform: translateY(-1.6em) scale(.96); transition: opacity .5s ease, transform .7s cubic-bezier(.2,.9,.2,1.1); }
.stage .st-toast[data-at].is-on { transform: none; }
.st-toast b { display: block; font-size: 1em; font-weight: 650; letter-spacing: -.01em; }
.st-toast small { display: block; font-size: .85em; color: var(--st-sub); }
.st-appi { flex: none; display: grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: .75em; color: #fff; background: linear-gradient(135deg, #7c3aed, #22d3ee); }
.st-appi svg { width: 1.2em; height: 1.2em; }
.st-now { margin-left: auto; align-self: flex-start; font-size: .75em; color: var(--st-sub); }
@media (prefers-reduced-motion: reduce) {
  .st-real { clip-path: none; } .st-wire, .st-scan { display: none; }
  .st-dstack { transform: translateY(-80%); } .st-dfill { transform: none; }
}