/* Motion Studio landing page. Loaded after the Detalia site stylesheet (site.css, copied unchanged), so every token,
   button, section, bento tile, plan card, FAQ and footer comes from Detalia; this file adds only what Motion Studio
   needs: its lockup, the After Effects window in the hero, and the small live visuals inside the cards.
   Product UI (the panel, the AE window, the fragments in the cards) uses the Carbon app palette, exactly as the real
   panel does: neutral greys, hairlines, Electric Blue only for the main action and the current selection. */

:root {
  --c-page: #0A0716;
  --c-panel: #15102B;
  --c-panel-2: #1D1638;
  --c-well: #110C24;
  --c-line: #2A2245;
  --c-line-2: #3A3062;
  --c-text: #F2F0FA;
  --c-muted: #9A93B8;
  --c-faint: #6A6290;
  --c-blue: #5B2EFF;
  --c-blue-soft: rgba(91, 46, 255, 0.2);
  --c-sky: #B9A6FF;
  --c-ok: #6EE7A8;
  --c-warn: #F5C77A;
}

/* Lucide icons from the sprite: 24px outlines, stroke set once here. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg.i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.button svg.i { width: 16px; height: 16px; stroke-width: 2; }
/* A download arrow points down: it nudges down on hover instead of Detalia's up-right arrow move. */
.button:hover svg.i { transform: translateY(2px); }

/* Skip link: hidden until focused (Detalia's own is never visible). */
.skip-link { position: fixed; left: 16px; top: 12px; z-index: 100; padding: 10px 16px; border-radius: 999px; background: #fff; color: var(--accent-ink); font-weight: 600; font-size: 14px; transform: translateY(-160%); transition: transform 0.3s var(--ease-out); }
.skip-link:focus { transform: none; }

.text-link, .install__note a, .footer__company { color: var(--accent); text-decoration: underline; text-decoration-color: rgba(154, 123, 255, 0.4); text-underline-offset: 3px; transition: text-decoration-color 0.2s; }
.text-link:hover, .install__note a:hover, .footer__company:hover { text-decoration-color: currentColor; color: var(--accent); }

/* ---------- Lockup: the Motion Studio tile and name ---------- */
.ms-brand { gap: 10px; }
.ms-brand__tile { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: var(--electric); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.ms-brand__tile svg.i { width: 17px; height: 17px; stroke-width: 2.4; }
.ms-brand__name { font-size: 17px; font-weight: 600; letter-spacing: -0.03em; white-space: nowrap; }
.footer__family { max-width: 340px; color: var(--faint); font-size: 14px; line-height: 1.6; }
@media (min-width: 961px) { .footer__grid--three { grid-template-columns: 2fr 1fr 1fr; } }
.footer__legal { margin: 18px 0 0; color: var(--faint); font-size: 12.5px; }

/* ---------- Hero ---------- */
.hero__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 0; margin: -4px 0 0; color: var(--muted); font-size: 14px; }
.hero__meta span + span::before { content: ""; display: inline-block; width: 3px; height: 3px; margin: 0 12px; border-radius: 50%; background: var(--faint); vertical-align: middle; }
.device-note { margin: 0; max-width: 420px; padding: 10px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: 14px; }
.device-note[hidden] { display: none; }
.hero__stage { margin-top: 56px; }
/* A shorter fade than Detalia's, so the timeline's last layer stays readable under it. */
.hero__stage::after { height: 8%; }
.closing { padding-bottom: 170px; }

/* ---------- The After Effects window (Carbon) ---------- */
.ae {
  --side: clamp(300px, 35%, 352px);
  overflow: hidden; border-radius: 14px; border: 1px solid var(--c-line); background: var(--c-page);
  color: var(--c-muted); font-size: 12px; line-height: 1.45; text-align: left;
}
.ae-mono { font-family: "Geist Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.ae-grow { flex: 1; }
.ae svg.i { width: 15px; height: 15px; }

.ae__bar { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 14px; border-bottom: 1px solid var(--c-line); background: var(--c-well); }
.ae__app { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 5px; background: #00005B; color: #A08BFF; font-size: 10.5px; font-weight: 800; letter-spacing: -0.02em; }
.ae__title { color: var(--c-text); font-weight: 600; }
.ae__file { color: var(--c-faint); }
.ae__file::before { content: "—"; margin-right: 8px; }
.ae__spaces { margin-left: auto; display: flex; gap: 18px; font-size: 11.5px; }
.ae__spaces span { position: relative; padding: 4px 0; }
.ae__spaces .is-on { color: var(--c-text); }
.ae__spaces .is-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px; background: var(--c-sky); }

.ae__body { display: grid; grid-template-columns: minmax(0, 1fr) var(--side); gap: 4px; padding: 4px; height: 626px; }
.ae__left { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 4px; min-width: 0; }
.ae-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; border-radius: 8px; border: 1px solid var(--c-line); background: var(--c-panel); }
.ae-tab { display: flex; align-items: center; gap: 2px; height: 30px; padding: 0 6px; border-bottom: 1px solid var(--c-line); font-size: 11.5px; flex: none; }
.ae-tab > span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 6px; color: var(--c-faint); white-space: nowrap; }
.ae-tab > span.is-on { color: var(--c-text); background: var(--c-panel-2); }
.ae-tab b { font-weight: 600; }
.ae-tab__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-muted); }
.ae-tab__menu { margin-left: auto; color: var(--c-faint); }

/* Composition viewer: a comp on the pasteboard, playing. motion-studio.js moves the title and logo from their keys. */
.ae-viewer { flex: 1; min-height: 0; display: grid; place-items: center; padding: 14px 18px; background: var(--c-well); }
.ae-comp {
  position: relative; width: min(100%, 520px); aspect-ratio: 16 / 9; overflow: hidden;
  background: radial-gradient(70% 90% at 78% 12%, #2A2F3B, transparent 70%), linear-gradient(160deg, #1A1D24, #0B0C10);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 18px 40px -18px rgba(0, 0, 0, 0.9);
}
.ae-comp__glow { position: absolute; left: -20%; bottom: -60%; width: 80%; height: 120%; border-radius: 50%; background: radial-gradient(closest-side, rgba(185, 166, 255, 0.16), transparent); }
.ae-comp__title { position: absolute; left: 9%; top: 40%; color: #F4F5F8; font-size: clamp(18px, 3.1vw, 36px); font-weight: 600; letter-spacing: -0.04em; line-height: 1; white-space: nowrap; }
.ae-comp__sub { position: absolute; left: 9.4%; top: calc(40% + clamp(26px, 4.2vw, 48px)); color: #9097A8; font-size: clamp(8px, 1vw, 12px); letter-spacing: 0.02em; white-space: nowrap; }
.ae-comp__logo { position: absolute; right: 9%; top: 13%; width: 12%; aspect-ratio: 1; border-radius: 50%; border: 2px solid #F4F5F8; display: grid; place-items: center; }
.ae-comp__logo i { width: 38%; aspect-ratio: 1; border-radius: 3px; background: #F4F5F8; rotate: 45deg; }
/* The layer Claude is changing is selected, as the panel shows each change in the timeline. */
.ae-comp__box { position: absolute; border: 1px solid var(--c-blue); opacity: 0; transition: opacity 0.25s; pointer-events: none;
  background-image: linear-gradient(var(--c-blue), var(--c-blue)), linear-gradient(var(--c-blue), var(--c-blue)), linear-gradient(var(--c-blue), var(--c-blue)), linear-gradient(var(--c-blue), var(--c-blue));
  background-size: 5px 5px; background-repeat: no-repeat; background-position: -3px -3px, calc(100% + 3px) -3px, -3px calc(100% + 3px), calc(100% + 3px) calc(100% + 3px); }
.ae-comp__box.is-on { opacity: 1; }
.ae-comp__flash { position: absolute; inset: 0; border: 2px solid rgba(255, 255, 255, 0.9); opacity: 0; pointer-events: none; }
.ae-comp__flash.is-on { animation: ae-flash 0.7s ease-out; }
@keyframes ae-flash { 0% { opacity: 0; } 15% { opacity: 1; background: rgba(255, 255, 255, 0.12); } 100% { opacity: 0; } }
.ae-viewer__foot { display: flex; align-items: center; gap: 14px; height: 28px; padding: 0 12px; border-top: 1px solid var(--c-line); font-size: 11px; white-space: nowrap; flex: none; }
.ae-viewer__foot [data-timecode] { color: var(--c-sky); }

/* Timeline */
.ae-tl { --info: 168px; font-size: 11.5px; }
.ae-tl__head { display: grid; grid-template-columns: var(--info) minmax(0, 1fr); height: 34px; border-bottom: 1px solid var(--c-line); }
.ae-tl__info { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 0 10px; border-right: 1px solid var(--c-line); }
.ae-tl__tc { color: var(--c-sky); font-size: 12.5px; }
.ae-tl__cols { margin-left: auto; color: var(--c-faint); font-size: 10.5px; white-space: nowrap; }
.ae-tl__ruler { position: relative; display: flex; justify-content: space-between; align-items: flex-end; padding: 0 8px 6px; color: var(--c-faint); font: 500 10px/1 "Geist Mono", ui-monospace, monospace;
  background: repeating-linear-gradient(90deg, var(--c-line-2) 0 1px, transparent 1px calc(25% / 4)) left bottom / 100% 5px no-repeat; }
.ae-tl__rows { position: relative; }
.ae-row { display: grid; grid-template-columns: var(--info) minmax(0, 1fr); height: 34px; border-bottom: 1px solid var(--c-line); transition: background-color 0.3s; }
.ae-row:last-of-type { border-bottom: 0; }
.ae-row .ae-tl__info { gap: 9px; }
.ae-row.is-selected { background: var(--c-blue-soft); }
.ae-row.is-selected .ae-row__name { color: #fff; }
.ae-row__label { width: 8px; height: 12px; border-radius: 2px; background: var(--label); opacity: 0.75; flex: none; }
.ae-row__num { width: 12px; color: var(--c-faint); font: 500 10.5px/1 "Geist Mono", ui-monospace, monospace; text-align: right; }
.ae-row__icon { width: 16px; height: 16px; display: grid; place-items: center; border-radius: 4px; background: var(--c-panel-2); color: var(--c-muted); font-size: 10px; font-weight: 700; flex: none; }
.ae-row__icon svg.i { width: 11px; height: 11px; }
.ae-row__icon--solid { background: #2B2F38; border: 1px solid var(--c-line-2); }
.ae-row__name { color: var(--c-text); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ae-row__track { position: relative; margin: 0 8px; }
.ae-row__bar { position: absolute; left: 0; right: 0; top: 9px; bottom: 9px; border-radius: 4px; background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(255, 255, 255, 0.05); }
/* A keyframe: easy-ease keys are drawn as an hourglass in AE; a rounded diamond reads well at this size. */
.ae-key { position: absolute; left: var(--at); top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 2px; background: var(--c-text); rotate: 45deg; scale: 0; transition: scale 0.45s var(--ease-out); }
.ae-row.has-keys .ae-key { scale: 1; }
.ae-row.has-keys .ae-key + .ae-key { transition-delay: 0.12s; }
.ae-tl__playhead { position: absolute; top: -34px; bottom: 0; left: calc(var(--info) + 8px + (100% - var(--info) - 16px) * var(--ph, 0)); width: 1px; background: var(--c-sky); pointer-events: none; }
.ae-tl__playhead::before { content: ""; position: absolute; top: 0; left: -5px; width: 11px; height: 9px; background: var(--c-sky); clip-path: polygon(0 0, 100% 0, 100% 55%, 50% 100%, 0 55%); }

/* ---------- The Motion Studio panel (as in panel/index.html, Carbon block) ---------- */
.ae-pane--ms .ae-tab > span.is-on .ae-tab__dot { background: var(--c-blue); }
.ms { flex: 1; min-height: 0; display: grid; grid-template-columns: 54px minmax(0, 1fr); background: var(--c-page); }
.ms__rail { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 0; border-right: 1px solid var(--c-line); }
.ms__brand { position: relative; margin-bottom: 10px; }
.ms-tile { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: var(--c-blue); color: #fff; }
.ms-tile svg.i { width: 17px; height: 17px; stroke-width: 2.2; }
.ms-tile--tiny { width: 20px; height: 20px; border-radius: 6px; }
.ms-tile--tiny svg.i { width: 12px; height: 12px; }
.ms-tile--lg { width: 46px; height: 46px; border-radius: 13px; }
.ms-tile--lg svg.i { width: 24px; height: 24px; }
.ms__dot { position: absolute; right: -3px; bottom: -3px; width: 10px; height: 10px; border-radius: 50%; background: var(--c-ok); border: 2px solid var(--c-page); }
.ms__tab { width: 44px; padding: 7px 0 5px; display: flex; flex-direction: column; align-items: center; gap: 3px; border-radius: 10px; color: var(--c-muted); font-size: 9.5px; }
.ms__tab svg.i { width: 17px; height: 17px; }
.ms__tab.is-on { background: var(--c-blue-soft); color: #fff; }
.ms__tab.is-busy svg.i { animation: ms-pulse 1.4s var(--ease-out) infinite; }
@keyframes ms-pulse { 50% { opacity: 0.45; } }
.ms__spacer { flex: 1; }
.ms__main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ms__head { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px; border-bottom: 1px solid var(--c-line); flex: none; }
.ms__head b { color: var(--c-text); font-size: 15px; font-weight: 600; letter-spacing: -0.02em; }
.ms-pill { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px 2px 8px; border-radius: 999px; border: 1px solid var(--c-line); background: var(--c-panel); color: var(--c-text); font-size: 11px; }
.ms-pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--c-ok); }
.ms-pill.is-working i { background: var(--c-sky); animation: ms-pulse 1s ease-in-out infinite; }
.ms__top { display: flex; align-items: center; gap: 8px; padding: 8px 12px; color: var(--c-muted); font-size: 11.5px; flex: none; }
.ms__top > span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-ghost { display: inline-flex; align-items: center; gap: 5px; color: var(--c-muted); white-space: nowrap; }
.ms-ghost svg.i { width: 13px; height: 13px; }

/* The conversation is anchored to the bottom, so new rows push older ones up as a real chat scrolls. Each row
   opens its own height (0fr to 1fr) instead of popping in. */
.ms__log { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; padding: 0 12px 4px;
  -webkit-mask-image: linear-gradient(transparent, #000 36px); mask-image: linear-gradient(transparent, #000 36px); transition: opacity 0.6s; }
.ms__log.is-clearing { opacity: 0; }
.ms-item { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 0.45s var(--ease-out), opacity 0.4s var(--ease-out); }
.ms-item.is-shown { grid-template-rows: 1fr; opacity: 1; }
.ms-item__in { min-height: 0; overflow: hidden; }
.ms-item__in > * { margin-top: 8px; }
.ms-you { margin-left: auto; width: fit-content; max-width: 88%; padding: 9px 12px; border-radius: 14px 14px 4px 14px; background: var(--c-panel-2); border: 1px solid var(--c-line); color: var(--c-text); font-size: 12.5px; }
.ms-claude { display: flex; align-items: center; gap: 7px; margin-top: 12px !important; color: var(--c-text); font-size: 12px; }
.ms-claude b { font-weight: 600; }
.ms-think { display: flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--c-line); background: var(--c-panel); font-size: 11.5px; }
.ms-think > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-think svg.i { width: 13px; height: 13px; color: var(--c-muted); }
.ms-think:not(.is-done) > span { background: linear-gradient(90deg, var(--c-muted) 40%, var(--c-text) 50%, var(--c-muted) 60%) 0 0 / 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: ms-shimmer 1.6s linear infinite; }
@keyframes ms-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.ms-step { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 6px 9px; border-radius: 10px; border: 1px solid var(--c-line); background: var(--c-panel); }
.ms-step__ic { position: relative; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; background: var(--c-panel-2); border: 1px solid var(--c-line); color: var(--c-text); }
.ms-step__ic svg.i { width: 13px; height: 13px; }
.ms-step.is-running .ms-step__ic::after { content: ""; position: absolute; inset: -3px; border-radius: 9px; border: 1.5px solid transparent; border-top-color: var(--c-blue); border-right-color: var(--c-blue); animation: ms-spin 0.8s linear infinite; }
@keyframes ms-spin { to { rotate: 360deg; } }
.ms-step__tx { display: grid; min-width: 0; }
.ms-step__tx b { color: var(--c-text); font-size: 11.5px; font-weight: 500; }
.ms-step__tx span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; }
.ms-step__st { color: var(--c-faint); font: 400 10px "Geist Mono", ui-monospace, monospace; }
.ms-text { margin-bottom: 0; color: var(--c-text); font-size: 12.5px; line-height: 1.55; }
.ms-ask { display: grid; gap: 7px; padding: 12px; border-radius: 14px; border: 1px solid var(--c-line-2); background: var(--c-panel); }
.ms-ask__title { color: var(--c-muted); font-size: 12px; font-weight: 600; }
.ms-ask__chip { justify-self: start; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--c-line); background: var(--c-panel-2); color: var(--c-text); font-size: 10.5px; }
.ms-ask__q { color: var(--c-text); font-size: 12.5px; font-weight: 500; }
.ms-ask__opt { display: grid; padding: 8px 11px; border-radius: 10px; border: 1px solid var(--c-line); background: var(--c-panel-2); color: var(--c-text); font-size: 12px;
  transition: border-color 0.25s, background-color 0.25s, opacity 0.4s, max-height 0.5s var(--ease-out), padding 0.5s var(--ease-out), margin 0.5s var(--ease-out); max-height: 60px; }
.ms-ask__opt b { font-weight: 500; }
.ms-ask__opt span { color: var(--c-muted); font-size: 10.5px; }
.ms-ask__opt.is-hover { border-color: var(--c-line-2); background: #20232B; }
.ms-ask__opt.is-on { border-color: var(--c-blue); background: var(--c-blue-soft); }
.ms-ask.is-answered { border-color: var(--c-line); }
.ms-ask.is-answered .ms-ask__opt:not(.is-on) { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; margin-top: -7px; border-width: 0; }
.ms__composer { margin: 6px 10px 10px; padding: 8px; border-radius: 14px; border: 1px solid var(--c-line-2); background: var(--c-panel); flex: none; }
.ms__input { position: relative; display: grid; margin: 0; padding: 4px 4px 8px; min-height: 2.9em; color: var(--c-text); font-size: 12.5px; line-height: 1.45; }
.ms__input > span { grid-area: 1 / 1; }
.ms__ph { color: var(--c-faint); }
.ms__ph.is-hidden { visibility: hidden; }
.ms__typed.is-caret::after { content: ""; display: inline-block; width: 1.5px; height: 1.05em; margin-left: 1px; vertical-align: -2px; background: var(--c-blue); animation: flow-caret 0.9s steps(1) infinite; }
.ms__row { display: flex; align-items: center; gap: 6px; }
.ms-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; color: var(--c-muted); }
.ms-send { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 9px; border: 1px solid var(--c-blue); background: var(--c-blue); color: #fff; font-size: 11.5px; font-weight: 500; transition: scale 0.2s var(--ease-out), background-color 0.25s, border-color 0.25s; }
.ms-send svg.i { width: 13px; height: 13px; }
.ms-send.is-pressed { scale: 0.93; }
.ms-send.is-stop { background: var(--c-panel); border-color: var(--c-line); color: var(--c-text); }
.ms-send--sm { height: 24px; width: 24px; padding: 0; justify-content: center; border-radius: 7px; }

/* ---------- How it works: three cards ---------- */
.howto { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.howto__step { grid-column: auto; }
.howto .bento__visual { height: 200px; }

/* 01: the installer downloading */
.dl { display: grid; grid-template-columns: 40px minmax(0, 1fr) 24px; align-items: center; gap: 12px; width: min(300px, 86%); padding: 14px; border-radius: 14px; border: 1px solid var(--c-line); background: var(--c-panel); box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.9); }
.dl__file { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: var(--c-panel-2); border: 1px solid var(--c-line); color: var(--c-text); }
.dl__meta { display: grid; gap: 7px; min-width: 0; }
.dl__meta b { overflow-wrap: anywhere; color: var(--c-text); font-size: 12px; font-weight: 500; line-height: 1.35; }
.dl__bar { height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.dl__bar i { display: block; height: 100%; background: var(--c-blue); transform-origin: left; animation: dl-fill 4s var(--ease-out) infinite; }
@keyframes dl-fill { 0% { transform: scaleX(0); } 55%, 100% { transform: scaleX(1); } }
.dl__state { display: grid; color: var(--c-muted); font: 500 10.5px/1.3 "Geist Mono", ui-monospace, monospace; }
.dl__state span { grid-area: 1 / 1; animation: dl-swap 4s steps(1) infinite; }
.dl__state span + span { color: var(--c-ok); animation-name: dl-swap-2; }
@keyframes dl-swap { 0% { opacity: 1; } 58% { opacity: 0; } }
@keyframes dl-swap-2 { 0% { opacity: 0; } 58% { opacity: 1; } }
.dl__check { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--c-ok); color: #052012; animation: dl-check 4s var(--ease-out) infinite; }
.dl__check svg.i { width: 13px; height: 13px; stroke-width: 3; }
@keyframes dl-check { 0%, 55% { scale: 0; } 64%, 100% { scale: 1; } }

/* 02: Window › Extensions › Motion Studio */
.menu { position: relative; width: 296px; height: 172px; font-size: 11.5px; color: var(--c-text); }
.menu__bar { display: flex; gap: 2px; width: max-content; padding: 4px; border-radius: 9px; border: 1px solid var(--c-line); background: var(--c-well); }
.menu__bar span { padding: 3px 8px; border-radius: 6px; color: var(--c-muted); }
.menu__bar .is-on { background: var(--c-panel-2); color: var(--c-text); }
.menu__drop { position: absolute; left: 46px; top: 32px; width: 122px; display: grid; padding: 5px; border-radius: 10px; border: 1px solid var(--c-line-2); background: var(--c-panel); box-shadow: 0 20px 40px -16px rgba(0, 0, 0, 0.9); }
.menu__drop > span { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px; border-radius: 6px; color: var(--c-muted); white-space: nowrap; }
.menu__drop svg.i { width: 12px; height: 12px; }
.menu__drop .is-on { background: var(--c-panel-2); color: var(--c-text); }
.menu__sep { height: 1px; padding: 0 !important; margin: 4px 6px; background: var(--c-line); }
.menu__sub { position: absolute; left: 162px; top: 113px; display: grid; padding: 5px; border-radius: 10px; border: 1px solid var(--c-line-2); background: var(--c-panel); box-shadow: 0 20px 40px -16px rgba(0, 0, 0, 0.9); transform-origin: 0 50%; animation: menu-sub 4.5s var(--ease-out) infinite; }
.menu__sub span { display: flex; align-items: center; gap: 8px; padding: 5px 10px 5px 6px; border-radius: 7px; white-space: nowrap; }
.menu__sub .is-pick { background: var(--c-blue); color: #fff; }
.menu__sub .ms-tile { background: rgba(255, 255, 255, 0.18); }
@keyframes menu-sub { 0%, 18% { opacity: 0; scale: 0.94; } 28%, 86% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 1; } }
.menu__cursor { position: absolute; left: 0; top: 0; width: 16px !important; height: 16px !important; fill: #fff; stroke: #0A0716; stroke-width: 1.4; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5)); animation: menu-cursor 4.5s var(--ease-out) infinite; }
@keyframes menu-cursor { 0% { translate: 70px 14px; } 16% { translate: 112px 122px; } 40%, 100% { translate: 236px 128px; } }

/* 03: one exchange in the chat */
.mini-chat { display: grid; gap: 8px; width: min(290px, 88%); }
.mini-chat__you { justify-self: end; padding: 8px 12px; border-radius: 14px 14px 4px 14px; border: 1px solid var(--c-line); background: var(--c-panel-2); color: var(--c-text); font-size: 12px; }
.mini-chat__step { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 6px 9px; border-radius: 10px; border: 1px solid var(--c-line); background: var(--c-panel); font-size: 11.5px; animation: mini-step 4.5s var(--ease-out) infinite; }
.mini-chat__step > span:nth-child(2) { display: grid; }
.mini-chat__step b { color: var(--c-text); font-weight: 500; }
.mini-chat__step small { color: var(--c-muted); font-size: 10.5px; }
.mini-chat__ok { width: 14px !important; height: 14px !important; color: var(--c-ok); stroke-width: 2.5 !important; }
@keyframes mini-step { 0%, 20% { opacity: 0; translate: 0 6px; } 32%, 92% { opacity: 1; translate: 0 0; } 100% { opacity: 0; } }
.mini-chat__composer { display: flex; align-items: center; justify-content: space-between; padding: 6px 6px 6px 12px; border-radius: 12px; border: 1px solid var(--c-line-2); background: var(--c-panel); color: var(--c-faint); font-size: 11.5px; }

/* ---------- Features ---------- */
.bento__kicker { display: inline-flex; align-items: center; gap: 8px; }
.bento__kicker svg.i { width: 16px; height: 16px; stroke-width: 2; }
.bento__tile--half { grid-column: span 3; }
.bento__tile--panel .bento__visual { height: 244px; }
.bento__tile--half .bento__visual { height: 236px; }

/* In your project: a value graph with an overshoot curve, and what Claude can build. */
.bento__visual--split { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 26px; padding: 22px 28px; place-items: center stretch; }
.graph { position: relative; height: 164px; border-radius: 14px; border: 1px solid var(--c-line); background: var(--c-panel); overflow: hidden; }
.graph__label, .graph__ease { position: absolute; z-index: 1; left: 12px; top: 9px; color: var(--c-muted); font: 500 10.5px/1.3 "Geist Mono", ui-monospace, monospace; }
.graph__ease { left: auto; right: 12px; top: auto; bottom: 9px; color: var(--c-sky); }
.graph__svg { position: absolute; inset: 22px 10px 24px; width: calc(100% - 20px); height: calc(100% - 46px); overflow: visible; }
.graph__grid { stroke: var(--c-line); stroke-width: 1; vector-effect: non-scaling-stroke; fill: none; }
.graph__handle { stroke: var(--c-faint); stroke-width: 1; vector-effect: non-scaling-stroke; fill: none; }
.graph__curve { fill: none; stroke: var(--c-sky); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: graph-draw 5s var(--ease-out) infinite; }
@keyframes graph-draw { 0% { stroke-dashoffset: 1; } 45%, 88% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.graph__key { fill: var(--c-text); }
.graph__knob { fill: var(--c-panel); stroke: var(--c-muted); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.caps { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; padding: 0; list-style: none; }
.caps li { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--c-line); background: var(--c-panel); color: var(--c-text); font-size: 12.5px; white-space: nowrap; animation: caps-lit 6.4s ease-in-out infinite; animation-delay: calc(var(--n) * 0.8s - 6.4s); }
.caps svg.i { width: 14px; height: 14px; color: var(--c-muted); transition: color 0.3s; }
@keyframes caps-lit { 0%, 16%, 100% { border-color: var(--c-line); background: var(--c-panel); } 4%, 11% { border-color: rgba(185, 166, 255, 0.5); background: #1C2030; } }

/* Self-check: three preview frames, the scan resting on each in turn. */
.frames { position: relative; display: flex; gap: 10px; }
.frames__f { position: relative; width: 74px; aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; border: 1px solid var(--c-line-2); background: linear-gradient(160deg, #1A1D24, #0B0C10); }
.frames__f i { position: absolute; left: 12%; top: 42%; width: 56%; height: 9px; border-radius: 2px; background: #F4F5F8; opacity: var(--o); translate: 0 var(--y); }
.frames__f i::after { content: ""; position: absolute; left: 0; top: 13px; width: 60%; height: 4px; border-radius: 2px; background: #9097A8; }
.frames__f small { position: absolute; right: 5px; bottom: 3px; color: var(--c-muted); font: 500 9px/1.2 "Geist Mono", ui-monospace, monospace; }
.frames__scan { position: absolute; left: 0; top: -6px; width: 74px; height: calc(100% + 12px); display: grid; place-items: start end; border-radius: 10px; border: 2px solid #fff; animation: frames-scan 4.8s var(--ease-out) infinite; }
.frames__scan svg.i { width: 20px; height: 20px; margin: -10px -10px 0 0; padding: 3px; border-radius: 50%; background: #fff; color: #0A0716; stroke-width: 2; }
@keyframes frames-scan { 0%, 22% { translate: 0 0; } 33%, 55% { translate: 84px 0; } 66%, 88% { translate: 168px 0; } 100% { translate: 0 0; } }

/* Chat: a question with options; the pick moves between them. */
.ask-demo { display: grid; gap: 6px; width: min(250px, 86%); padding: 12px; border-radius: 14px; border: 1px solid var(--c-line-2); background: var(--c-panel); font-size: 12px; box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.9); }
.ask-demo__q { margin-bottom: 2px; color: var(--c-text); font-weight: 500; }
.ask-demo__opt { padding: 7px 10px; border-radius: 9px; border: 1px solid var(--c-line); background: var(--c-panel-2); color: var(--c-text); animation: ask-pick 6s steps(1) infinite; }
.ask-demo__opt:nth-child(3) { animation-delay: -4s; }
.ask-demo__opt:nth-child(4) { animation-delay: -2s; }
@keyframes ask-pick { 0% { border-color: var(--c-blue); background: var(--c-blue-soft); } 33.3% { border-color: var(--c-line); background: var(--c-panel-2); } }

/* Your plan: Motion Studio wired to Claude Code. */
.plan-link { display: grid; justify-items: center; gap: 18px; }
.plan-link__row { display: flex; align-items: center; }
.plan-link__wire { position: relative; width: 64px; height: 2px; background: repeating-linear-gradient(90deg, var(--c-line-2) 0 4px, transparent 4px 8px); }
.plan-link__wire i { position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--c-sky); animation: wire-run 2.4s ease-in-out infinite; }
@keyframes wire-run { 0% { left: 0; opacity: 0; } 15%, 85% { opacity: 1; } 100% { left: calc(100% - 8px); opacity: 0; } }
.plan-link__cc { padding: 11px 16px; border-radius: 13px; border: 1px solid var(--c-line-2); background: var(--c-panel); color: var(--c-text); font-size: 13px; font-weight: 600; }
.plan-link__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.plan-link__chips span { padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line-strong); color: #D6CCFF; font-size: 12px; }

/* Activity: steps streaming in, with the action bar; Pause flips to Paused. */
.live { display: grid; gap: 6px; width: min(270px, 88%); }
.live__row { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 6px 9px; border-radius: 10px; border: 1px solid var(--c-line); background: var(--c-panel); font-size: 11.5px; }
.live__row b { color: var(--c-text); font-weight: 500; }
.live__row small { color: var(--c-faint); font: 400 10px "Geist Mono", ui-monospace, monospace; }
.live__row--run .ms-step__ic::after { content: ""; position: absolute; inset: -3px; border-radius: 9px; border: 1.5px solid transparent; border-top-color: var(--c-blue); border-right-color: var(--c-blue); animation: ms-spin 0.8s linear infinite, live-hold 4s steps(1) infinite; }
@keyframes live-hold { 50% { opacity: 0; } }
.live__bar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin-top: 4px; }
.live__btn { display: flex; align-items: center; justify-content: center; gap: 5px; height: 30px; border-radius: 8px; border: 1px solid var(--c-line); background: var(--c-panel); color: var(--c-text); font-size: 11px; }
.live__btn svg.i { width: 13px; height: 13px; color: var(--c-muted); }
.live__btn--pause { animation: live-pause 4s steps(1) infinite; }
.live__btn--pause svg.i { animation: live-pause-ic 4s steps(1) infinite; }
.live__pause-label { display: grid; }
.live__pause-label span { grid-area: 1 / 1; animation: live-hold 4s steps(1) infinite; }
.live__pause-label span + span { animation-name: live-show; }
@keyframes live-show { 0% { opacity: 0; } 50% { opacity: 1; } }
@keyframes live-pause { 0% { border-color: var(--c-line); color: var(--c-text); background: var(--c-panel); } 50% { border-color: var(--c-warn); color: var(--c-warn); background: var(--c-panel-2); } }
@keyframes live-pause-ic { 0% { color: var(--c-muted); } 50% { color: var(--c-warn); } }

/* Protection */
.guard { display: grid; gap: 8px; width: min(380px, 88%); }
.guard__row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--c-line); background: var(--c-panel); }
.guard__ic { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; border: 1px solid var(--c-line); background: var(--c-panel-2); color: var(--c-muted); }
.guard__row--on .guard__ic { color: var(--c-ok); }
.guard__name { display: grid; min-width: 0; }
.guard__name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--c-text); font-size: 12.5px; font-weight: 500; }
.guard__name small { color: var(--c-muted); font-size: 11px; }
.guard__switch { position: relative; width: 36px; height: 20px; border-radius: 999px; background: var(--c-blue); }
.guard__switch i { position: absolute; top: 3px; left: 19px; width: 14px; height: 14px; border-radius: 50%; background: #fff; }
.guard__tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--c-line); color: var(--c-muted); font-size: 11px; }
.guard__tag svg.i { width: 12px; height: 12px; }
.guard__row:not(.guard__row--on) { animation: guard-nudge 5s var(--ease-out) infinite; }
@keyframes guard-nudge { 0%, 70%, 100% { translate: 0 0; } 74% { translate: -4px 0; } 78% { translate: 4px 0; } 82% { translate: -2px 0; } 86% { translate: 0 0; } }

/* Lessons */
.lessons { display: grid; gap: 8px; width: min(380px, 88%); }
.lessons__row { display: grid; gap: 2px; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--c-line); background: var(--c-panel); color: var(--c-text); font-size: 12.5px; }
.lessons__row b { font-weight: 500; }
.lessons__row small { color: var(--c-muted); font-size: 11px; }
.lessons__row small::before { content: "✓ "; color: var(--c-ok); }
.lessons__kind { color: var(--c-faint); font: 500 10px/1.4 "Geist Mono", ui-monospace, monospace; letter-spacing: 0.06em; text-transform: uppercase; }
.lessons__row--fix { border-color: var(--c-line-2); animation: lesson-glow 5s ease-in-out infinite; }
@keyframes lesson-glow { 0%, 100% { background: var(--c-panel); } 50% { background: #1A1D26; } }

/* ---------- Install ---------- */
.install__plans { margin-top: 8px; }
.install__file { font: 500 13px/1.5 "Geist Mono", ui-monospace, monospace; color: var(--muted); overflow-wrap: anywhere; }
.plan__head svg.i { width: 26px; height: 26px; color: var(--accent); }
.install__req-title { margin-top: 6px; color: var(--faint); font: 500 12px/1.4 "Geist Mono", ui-monospace, monospace; letter-spacing: 0.08em; text-transform: uppercase; }
.install__req-title + .plan__features { margin-top: -6px; }
.plan__badge[hidden] { display: none; }
.install .plan--popular { translate: none; }

.install__how { margin-top: 64px; }
.install__how-title { margin: 0 0 22px; text-align: center; font-size: 20px; font-weight: 600; letter-spacing: -0.025em; }
.install-steps { counter-reset: step; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin: 0; padding: 0; list-style: none; }
.install-steps li { counter-increment: step; position: relative; display: grid; align-content: start; gap: 6px; padding-top: 18px; color: var(--muted); font-size: 14.5px; }
.install-steps li::before, .install-steps li::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; border-radius: 2px; background: var(--line-strong); }
.install-steps li::after { background: var(--accent); transform-origin: left; transform: scaleX(0); transition: transform 0.9s var(--ease-out); }
.install__how.is-in .install-steps li::after { transform: scaleX(1); }
.install__how.is-in .install-steps li:nth-child(1)::after { transition-delay: 0.25s; }
.install__how.is-in .install-steps li:nth-child(2)::after { transition-delay: 0.75s; }
.install__how.is-in .install-steps li:nth-child(3)::after { transition-delay: 1.25s; }
.install__how.is-in .install-steps li:nth-child(4)::after { transition-delay: 1.75s; }
.install-steps b { display: flex; align-items: baseline; gap: 10px; color: var(--text); font-size: 16px; font-weight: 600; }
.install-steps b::before { content: "0" counter(step); color: var(--faint); font: 500 12px/1 "Geist Mono", ui-monospace, monospace; }
.install__note { display: flex; gap: 12px; align-items: flex-start; max-width: 760px; margin: 44px auto 0; padding: 16px 20px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: 14.5px; line-height: 1.6; }
.install__note > svg.i { margin-top: 2px; color: var(--accent); }
.install__note b { color: var(--text); font-weight: 600; }

/* ---------- Footer additions ---------- */
.footer__bottom > span:last-child { color: var(--faint); }
.footer .ms-brand__name { font-size: 18px; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .skip-link { transition: none; }
  .ms-item { transition: none; }
  .ms-think > span, .ms-step__ic::after, .ms-pill i, .ms__tab svg.i, .ms__typed::after,
  .dl__bar i, .dl__state span, .dl__check, .menu__sub, .menu__cursor, .mini-chat__step, .graph__curve, .caps li, .frames__scan,
  .ask-demo__opt, .plan-link__wire i, .live__row--run .ms-step__ic::after, .live__btn--pause, .live__btn--pause svg.i, .live__pause-label span,
  .guard__row, .lessons__row--fix, .ae-comp__flash { animation: none !important; }
  .ms-think > span { color: var(--c-muted); background: none; }
  .dl__state span + span { opacity: 0; }
  .menu__cursor { translate: 236px 128px; }
  .graph__curve { stroke-dashoffset: 0; }
  .ask-demo__opt:nth-child(2) { border-color: var(--c-blue); background: var(--c-blue-soft); }
  .live__pause-label span + span { opacity: 0; }
  .ae-key, .install-steps li::after { transition: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .ae__spaces span:not(.is-on) { display: none; }
}
@media (max-width: 960px) {
  .nav__actions .button { width: 100%; max-width: 320px; }
  .ae__body { height: 560px; }
  .ae { --side: 300px; }
  .ae-tl { --info: 132px; }
  .ae-tl__cols, .ae-row__label { display: none; }
  .ae-viewer__foot span:nth-last-child(-n + 2) { display: none; }
  .howto { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; }
  .bento__tile--half { grid-column: span 1; }
  .bento__visual--split { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 18px; padding: 20px; }
  .install-steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  /* Tablet portrait: the panel takes the window; the comp sits above it, the timeline steps out. */
  .ae__body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 540px; height: auto; }
  .ae__left { grid-template-rows: auto; }
  .ae-pane--timeline { display: none; }
  .ae-viewer { padding: 12px; }
  .ae-comp { width: min(100%, 420px); }
}
@media (max-width: 640px) {
  .hero__meta { font-size: 13px; }
  .hero__meta span + span::before { margin: 0 9px; }
  .hero__actions .button { flex: 1 1 100%; }
  .ae__bar { height: 34px; padding: 0 10px; gap: 8px; }
  .ae__title { display: none; }
  .ae__file::before { display: none; }
  .ae__spaces { font-size: 11px; }
  .ae__body { grid-template-rows: auto 500px; padding: 3px; gap: 3px; }
  .ae-pane--comp .ae-tab > span:not(.is-on) { display: none; }
  .ae-viewer__foot { display: none; }
  .ae-viewer { padding: 10px; }
  .ae-comp__title { font-size: 22px; }
  .ae-comp__sub { top: calc(40% + 30px); font-size: 8.5px; }
  .ms { grid-template-columns: 46px minmax(0, 1fr); }
  .ms__tab { width: 36px; }
  .ms__tab > span { display: none; }
  .ms__tab { padding: 8px 0; }
  .ms__top > span:first-child { font-size: 11px; }
  .howto .bento__visual { height: 180px; }
  .bento__visual--split { grid-template-columns: minmax(0, 1fr); height: auto !important; padding: 18px; gap: 14px; }
  .graph { height: 150px; }
  .caps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .frames__f { width: 64px; }
  .frames__scan { width: 64px; }
  @keyframes frames-scan { 0%, 22% { translate: 0 0; } 33%, 55% { translate: 74px 0; } 66%, 88% { translate: 148px 0; } 100% { translate: 0 0; } }
  .install__how { margin-top: 48px; }
  .install-steps { grid-template-columns: 1fr; gap: 18px; }
  .install__note { padding: 14px 16px; font-size: 14px; }
  .footer__bottom { flex-direction: column; }
}
@media (max-width: 380px) {
  .menu { transform: scale(0.9); transform-origin: 50% 50%; }
}

/* ---------- The hero panel, as the plugin looks now: work folds into groups, a closing line, a notification ---------- */
.ms-group { border-radius: 12px; border: 1px solid var(--c-line); background: var(--c-panel); overflow: hidden; }
.ms-group__head { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto auto; align-items: center; gap: 9px; padding: 7px 9px; }
.ms-group__tx { display: grid; min-width: 0; } .ms-group__tx b { color: var(--c-text); font-size: 11.5px; font-weight: 600; }
.ms-group__tx span { color: var(--c-muted); font-size: 10.5px; }
.ms-group:not(.is-done) .ms-group__tx span { background: linear-gradient(90deg, var(--c-muted) 40%, var(--c-text) 50%, var(--c-muted) 60%) 0 0 / 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: ms-shimmer 1.6s linear infinite; }
.ms-group:not(.is-done) .ms-group__head .ms-step__ic::after { content: ""; position: absolute; inset: -3px; border-radius: 9px; border: 1.5px solid transparent; border-top-color: var(--c-blue); border-right-color: var(--c-blue); animation: ms-spin 0.8s linear infinite; }
.ms-group__ics { display: flex; gap: 6px; color: var(--c-muted); opacity: 0; transition: opacity .3s; } .ms-group__ics svg.i { width: 12px; height: 12px; }
.ms-group.is-done .ms-group__ics { opacity: 1; }
.ms-group__head .ms-think__chev { width: 12px; height: 12px; color: var(--c-faint); transition: transform .3s; } .ms-group:not(.is-done) .ms-group__head .ms-think__chev { transform: rotate(90deg); }
.ms-group__body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .5s var(--ease-out); } .ms-group.is-done .ms-group__body { grid-template-rows: 0fr; }
.ms-group__in { min-height: 0; overflow: hidden; display: grid; gap: 4px; padding: 0 7px; } .ms-group:not(.is-done) .ms-group__in { padding-bottom: 7px; }
.ms-group .ms-step { border-color: transparent; background: var(--c-panel-2); padding: 5px 8px; }
.ms-step.is-pending { display: none; }
.ms-done { display: flex; align-items: center; gap: 7px; padding: 6px 2px 2px; border-top: 1px solid var(--c-line); color: var(--c-muted); font-size: 11px; }
.ms-done svg.i { width: 12px; height: 12px; color: var(--c-ok); } .ms-done span { flex: 1; } .ms-done .ms-think__chev { color: var(--c-faint); }
.ms__main { position: relative; }
.ms-toast { position: absolute; z-index: 3; top: 52px; right: 10px; left: 10px; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 9px; align-items: center; padding: 9px 11px 11px; overflow: hidden;
  border-radius: 12px; border: 1px solid var(--c-line-2); background: #161033; box-shadow: 0 16px 30px -14px #000; opacity: 0; transform: translateY(-8px) scale(.97); pointer-events: none; transition: opacity .35s var(--ease-out), transform .45s var(--ease-out); }
.ms-toast::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--c-ok); }
.ms-toast.is-on { opacity: 1; transform: none; }
.ms-toast__ic { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: rgba(94, 230, 160, .14); color: var(--c-ok); } .ms-toast__ic svg.i { width: 13px; height: 13px; }
.ms-toast__tx { display: grid; } .ms-toast__tx b { color: var(--c-text); font-size: 11.5px; } .ms-toast__tx span { color: var(--c-muted); font-size: 10.5px; }
.ms-toast__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--c-ok); opacity: .6; transform-origin: left; }
.ms-toast.is-on .ms-toast__bar { animation: ms-toast-bar 2.2s linear forwards; } @keyframes ms-toast-bar { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ---------- Inside the panel: small live pictures of each part ---------- */
.lib { display: grid; grid-template-columns: repeat(2, 118px); gap: 8px; }
.lib__item { display: grid; gap: 3px; padding: 6px 6px 8px; border-radius: 12px; border: 1px solid var(--c-line); background: var(--c-panel); font-size: 11px; transition: border-color .4s, transform .4s var(--ease-out); }
.lib__item b { color: var(--c-text); font-weight: 600; } .lib__item small { color: var(--c-muted); font-size: 10px; }
.lib__item.is-on { border-color: var(--c-blue); box-shadow: 0 0 0 3px var(--c-blue-soft); transform: translateY(-2px); }
.lib__thumb { display: block; height: 38px; border-radius: 8px; position: relative; overflow: hidden; }
.lib__thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .25) 50%, transparent 65%); transform: translateX(-100%); animation: lib-sweep 3.2s ease-in-out infinite; }
.lib__thumb--a { background: radial-gradient(60% 80% at 30% 30%, #B9A6FF, transparent 70%), linear-gradient(135deg, #3504D6, #7B5CFF); }
.lib__thumb--b { background: repeating-linear-gradient(100deg, #1D1638 0 10px, #5B2EFF 10px 13px); } .lib__thumb--b::after { animation-delay: .5s; }
.lib__thumb--c { background: linear-gradient(180deg, #241B47 0 30%, transparent 30%), repeating-linear-gradient(180deg, #2E2458 0 8px, transparent 8px 14px) 8px 22px / 70% 100% no-repeat, #15102B; } .lib__thumb--c::after { animation-delay: 1s; }
.lib__thumb--d { background: radial-gradient(circle at 50% 55%, #FF7A5C 0 8px, transparent 9px), radial-gradient(70% 80% at 50% 50%, #5B2EFF, #15102B 70%); } .lib__thumb--d::after { animation-delay: 1.5s; }
@keyframes lib-sweep { 0%, 40% { transform: translateX(-100%); } 80%, 100% { transform: translateX(100%); } }
.refs { display: grid; justify-items: center; gap: 10px; width: 84%; }
.refs__link { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 99px; background: #fff; color: #1A0E4F; font: 600 11.5px "Geist Mono", ui-monospace, monospace; }
.refs__link svg.i { width: 13px; height: 13px; } .refs__arrow svg.i { width: 16px; height: 16px; color: var(--c-muted); transform: rotate(90deg); }
.refs__frames { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; width: 100%; }
.refs__frames i { display: block; aspect-ratio: 16 / 10; border-radius: 6px; background: linear-gradient(135deg, #2A1F55, #5B2EFF); opacity: .25; animation: frame-in 3.6s ease-in-out infinite; }
.refs__frames i:nth-child(2) { animation-delay: .25s; } .refs__frames i:nth-child(3) { animation-delay: .5s; } .refs__frames i:nth-child(4) { animation-delay: .75s; } .refs__frames i:nth-child(5) { animation-delay: 1s; }
@keyframes frame-in { 20%, 80% { opacity: 1; transform: translateY(-2px); } }
.refs__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; } .refs__chips span { padding: 3px 8px; border-radius: 99px; border: 1px solid var(--c-line); color: var(--c-muted); font-size: 10.5px; }
.brw { width: 82%; border-radius: 12px; overflow: hidden; border: 1px solid var(--c-line-2); background: var(--c-panel); box-shadow: 0 16px 30px -18px #000; }
.brw__bar { display: flex; align-items: center; gap: 5px; padding: 7px 10px; border-bottom: 1px solid var(--c-line); font-size: 10.5px; color: var(--c-muted); }
.brw__bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--c-line-2); } .brw__bar i:first-child { background: #FF7A5C; } .brw__bar span { margin-left: 6px; }
.brw__page { position: relative; display: grid; gap: 7px; padding: 12px; }
.brw__q { justify-self: start; padding: 6px 10px; border-radius: 99px; background: var(--c-panel-2); color: var(--c-text); font-size: 11px; overflow: hidden; white-space: nowrap; max-width: 100%; animation: brw-type 4s steps(24) infinite; }
@keyframes brw-type { 0% { max-width: 3em; } 45%, 100% { max-width: 100%; } }
.brw__row { height: 26px; border-radius: 7px; background: linear-gradient(90deg, var(--c-panel-2), #2A2050); } .brw__row.short { width: 60%; }
.brw__cursor { position: absolute; width: 16px; height: 16px; color: #fff; left: 60%; top: 50%; animation: brw-move 4s ease-in-out infinite; filter: drop-shadow(0 2px 3px #000); }
@keyframes brw-move { 0%, 30% { transform: translate(0, 0); } 60% { transform: translate(-60px, 22px); } 75% { transform: translate(-60px, 22px) scale(.85); } 100% { transform: translate(0, 0); } }
.ntf { display: grid; gap: 7px; width: 84%; }
.ntf__card { position: relative; display: grid; grid-template-columns: 8px minmax(0, 1fr); column-gap: 10px; padding: 8px 12px 8px 10px; border-radius: 11px; border: 1px solid var(--c-line-2); background: #161033; overflow: hidden;
  animation: ntf-in 4.5s calc(var(--n) * .35s) ease-in-out infinite both; }
.ntf__card i { grid-row: span 2; align-self: center; width: 8px; height: 8px; border-radius: 50%; background: var(--tone); box-shadow: 0 0 10px var(--tone); }
.ntf__card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--tone); }
.ntf__card b { color: var(--c-text); font-size: 11.5px; } .ntf__card small { color: var(--c-muted); font-size: 10.5px; }
.ntf__card--ok { --tone: #6EE7A8; } .ntf__card--up { --tone: #B9A6FF; } .ntf__card--bad { --tone: #FF8F85; }
@keyframes ntf-in { 0% { opacity: 0; transform: translateX(24px); } 12%, 82% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateX(24px); } }
.upd { display: grid; gap: 10px; width: 82%; padding: 14px; border-radius: 14px; border: 1px solid var(--c-line-2); background: #161033; }
.upd__head { display: flex; align-items: center; gap: 8px; } .upd__head b { flex: 1; color: var(--c-text); font-size: 12px; } .upd__head small { padding: 2px 8px; border-radius: 99px; background: rgba(110, 231, 168, .14); color: #6EE7A8; font-size: 10px; font-weight: 600; }
.upd__bar { height: 6px; border-radius: 6px; background: var(--c-panel-2); overflow: hidden; } .upd__bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #8E72FF, #5B2EFF); animation: upd-fill 4s ease-in-out infinite; }
@keyframes upd-fill { 0% { width: 4%; } 70%, 100% { width: 100%; } }
.upd__done { display: flex; align-items: center; gap: 6px; color: #6EE7A8; font-size: 11px; opacity: 0; animation: upd-done 4s ease-in-out infinite; } .upd__done svg.i { width: 13px; height: 13px; }
@keyframes upd-done { 0%, 68% { opacity: 0; } 76%, 100% { opacity: 1; } }
.use { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 84%; }
.use__box { display: grid; gap: 2px; padding: 10px; border-radius: 11px; border: 1px solid var(--c-line); background: var(--c-panel); } .use__box small { color: var(--c-muted); font-size: 10.5px; } .use__box b { color: var(--c-text); font-size: 18px; letter-spacing: -.02em; }
.use__bar { grid-column: 1 / -1; display: grid; gap: 5px; } .use__bar small { color: var(--c-muted); font-size: 10.5px; }
.use__bar i { display: block; height: 6px; border-radius: 6px; background: linear-gradient(90deg, #6EE7A8 var(--w), var(--c-panel-2) var(--w)); }
@media (prefers-reduced-motion: reduce) { .lib__thumb::after, .refs__frames i, .brw__q, .brw__cursor, .ntf__card, .upd__bar i, .upd__done { animation: none; } .upd__done, .refs__frames i { opacity: 1; } .upd__bar i { width: 100%; } }

/* ---------- Get Motion Studio: the cards say how fast it is, the key bar, four quick steps ---------- */
.plan__amount--sm { font-size: 30px; letter-spacing: -.03em; }
.plan__features a { color: var(--accent); }
.keybar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 22px; max-width: 900px; margin: 28px auto 0; padding: 18px 20px; border-radius: 22px;
  border: 1px solid rgba(154, 123, 255, .35); background: radial-gradient(80% 140% at 0% 0%, rgba(123, 92, 255, .22), transparent 60%), var(--surface); }
.keybar__card { position: relative; width: 150px; aspect-ratio: 1.68; border-radius: 13px; padding: 12px; display: grid; align-content: space-between; color: #fff; overflow: hidden;
  background: radial-gradient(60% 60% at 20% 20%, #B9A6FF, transparent 70%), conic-gradient(from 210deg at 50% 56%, #3504D6, #8E72FF, #5B2EFF, #2A0399, #3504D6); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.keybar__card img { position: absolute; top: 11px; right: 12px; width: 52px; filter: brightness(0) invert(1); }
.keybar__chip { width: 22px; height: 16px; border-radius: 4px; background: linear-gradient(135deg, #FBE6AE, #DDAD52 55%, #F4D88F); margin-top: 24px; }
.keybar__dots { font: 600 10px "Geist Mono", ui-monospace, monospace; letter-spacing: .08em; opacity: .9; }
.keybar__tx { display: grid; gap: 4px; } .keybar__tx b { font-size: 17px; } .keybar__tx span { color: var(--muted); font-size: 14px; line-height: 1.55; }
.quick { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; max-width: 900px; margin: 18px auto 0; padding: 0; counter-reset: q; }
.quick li { counter-increment: q; display: grid; align-content: start; gap: 4px; padding: 16px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); }
.quick li::before { content: counter(q, decimal-leading-zero); color: var(--accent); font: 500 12px "Geist Mono", ui-monospace, monospace; letter-spacing: .08em; }
.quick b { font-size: 15px; } .quick span { color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.quick__more { text-align: center; margin: 16px 0 0; } .quick__more a { color: var(--accent); font-weight: 500; text-decoration: none; } .quick__more a:hover { text-decoration: underline; }
@media (max-width: 860px) { .quick { grid-template-columns: repeat(2, minmax(0, 1fr)); } .keybar { grid-template-columns: minmax(0, 1fr); justify-items: start; } }
@media (max-width: 520px) { .quick { grid-template-columns: minmax(0, 1fr); } .lib { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 86%; } }

/* ---------- Closing: the title always readable over its light ---------- */
.closing { position: relative; isolation: isolate; }
.closing .fx-layer { opacity: .55; }
.closing__glow { position: absolute; z-index: -1; left: 50%; bottom: -30%; width: min(1100px, 120%); aspect-ratio: 2; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(123, 92, 255, .55), rgba(91, 46, 255, .18) 45%, transparent 70%); filter: blur(10px); pointer-events: none; }
.closing__inner { z-index: 1; }
.closing .section-title { color: #fff; text-shadow: 0 2px 24px rgba(10, 7, 22, .85), 0 0 2px rgba(10, 7, 22, .6); }
.closing .section-title em { text-shadow: none; }
.closing__lead { color: #D9D3F3; text-shadow: 0 1px 14px rgba(10, 7, 22, .9); }
.closing .hero__meta { color: #CFC8EE; }

/* On a phone: no installer to run, so the hero offers the key first */
html[data-os="mobile"] .hero__actions[data-install-group] { display: none; }
.hero__mobile-buy { justify-self: center; margin-top: 4px; min-width: 220px; }

/* ---------- Terms, Privacy, Refunds ---------- */
.legal { padding-top: 120px; }
.legal__wrap { max-width: 820px; }
.legal__title { margin-top: 14px; }
.legal__meta { margin: 12px 0 0; color: var(--muted); font-size: 14px; }
.legal__nav { display: flex; flex-wrap: wrap; gap: 6px; margin: 22px 0 0; padding: 4px; width: fit-content; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); }
.legal__nav a { padding: 8px 16px; border-radius: 99px; color: var(--muted); font-size: 14px; font-weight: 500; text-decoration: none; transition: color .2s, background .2s; }
.legal__nav a:hover { color: var(--text); } .legal__nav a[aria-current="page"] { background: #fff; color: var(--accent-ink); }
.legal__lead { margin: 26px 0 0; font-size: 18px; line-height: 1.6; color: #E4E0F5; }
.legal__short { margin: 22px 0 0; padding: 20px 22px; border-radius: 20px; border: 1px solid rgba(154, 123, 255, .35); background: radial-gradient(80% 140% at 0% 0%, rgba(123, 92, 255, .2), transparent 60%), var(--surface); }
.legal__short b { display: block; margin-bottom: 10px; font-size: 15px; }
.legal__short ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.legal__short li { position: relative; padding-left: 26px; color: #D9D3F3; font-size: 15px; line-height: 1.5; }
.legal__short li::before { content: ""; position: absolute; left: 0; top: .3em; width: 16px; height: 16px; border-radius: 50%; background: rgba(110, 231, 168, .16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236EE7A8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 10px no-repeat; }
.legal__body { margin-top: 18px; }
.legal__body h2 { display: flex; align-items: baseline; gap: 12px; margin: 44px 0 12px; font-size: clamp(20px, 2.4vw, 24px); font-weight: 600; letter-spacing: -.02em; scroll-margin-top: 100px; }
.legal__body h2 span { color: var(--accent); font: 500 13px "Geist Mono", ui-monospace, monospace; letter-spacing: .08em; }
.legal__body p, .legal__body li { color: var(--muted); font-size: 16px; line-height: 1.7; }
.legal__body p { margin: 0 0 12px; } .legal__body b { color: var(--text); font-weight: 600; }
.legal__body ul { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 8px; }
.legal__body a, .legal__help a { color: var(--accent); }
.legal__help { display: grid; gap: 4px; margin: 52px 0 0; padding: 18px 20px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); }
.legal__help span { color: var(--muted); font-size: 15px; }
.footer__legal-links { display: inline-flex; flex-wrap: wrap; gap: 16px; }
.footer__legal-links a { color: inherit; text-decoration: none; } .footer__legal-links a:hover { color: var(--text); }
@media (max-width: 560px) { .legal { padding-top: 96px; } .legal__lead { font-size: 16.5px; } .legal__body p, .legal__body li { font-size: 15px; } .legal__nav a { padding: 7px 12px; font-size: 13px; } }