/* tokens.css */
/* Aevilo design tokens (0.11.4). Matches the extension's 0.10 visual system (shared/refine.css): neutral graphite,
   flat surfaces, hairline borders, corners 3–9 px, shadows only on floating layers. Dark is the default;
   [data-theme="light"] swaps the palette. Colour is reserved for state (ok / warn / bad) and the selection outline. */
:root{
  --font: "Inter var", "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --font-display: "Inter var", "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --fs-xs: .75rem; --fs-sm: .875rem; --fs-md: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.375rem;
  --fs-h3: clamp(1.2rem, 1.05rem + .5vw, 1.5rem);
  --fs-h2: clamp(1.9rem, 1.35rem + 2vw, 3.1rem);
  --fs-h1: clamp(2.6rem, 1.4rem + 4.4vw, 5.5rem);
  --r-xs: 3px; --r-sm: 4px; --r-md: 5px; --r-lg: 7px; --r-xl: 9px;
  --wrap: 1240px; --gutter: clamp(20px, 4vw, 40px);
  --ease: cubic-bezier(.2,.8,.2,1); --ease-out: cubic-bezier(.16,1,.3,1); --ease-in-out: cubic-bezier(.65,0,.35,1);
  --spring: linear(0, .013, .048, .098, .16, .228, .3, .373, .446, .515, .581, .642, .698, .749, .795, .835, .871, .901, .927, .949, .967, .982, .994, 1.003, 1.01, 1.016, 1.019, 1.022, 1.023, 1.023, 1.023, 1.022, 1.021, 1.02, 1.018, 1.017, 1.015, 1.013, 1.012, 1.01, 1);
  --t-fast: .14s; --t-med: .26s; --t-slow: .6s;

  --bg: #0a0a0a; --bg-2: #0e0e0e; --bg-3: #131313;
  --surface: rgba(255,255,255,.03); --surface-2: rgba(255,255,255,.05); --surface-3: rgba(255,255,255,.08);
  --solid: #111111; --solid-2: #161616; --solid-3: #1d1d1d;
  --line: rgba(255,255,255,.07); --line-2: rgba(255,255,255,.11); --line-3: rgba(255,255,255,.2);
  --fg: #ededed; --fg-2: #a8a8a8; --fg-3: #8a8a8a; --fg-4: #5e5e5e;
  --inv: #ededed; --on-inv: #0a0a0a;
  /* --sel is the inspector selection colour, the one chromatic value in the system; --accent aliases it for demos */
  --sel: #4b7bff; --accent: var(--sel); --accent-strong: #7d9dff; --accent-soft: rgba(75,123,255,.14); --on-accent: #ffffff;
  --glass: rgba(14,14,14,.74); --glass-line: rgba(255,255,255,.1); --glass-hi: rgba(255,255,255,.04);
  --shadow-1: none;
  --shadow-2: 0 8px 24px rgba(0,0,0,.4);
  --shadow-3: 0 16px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06);
  --focus: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--fg);
  --ok: #7cc79b; --warn: #d9b062; --bad: #e5807a;
  --hero-falloff: none;
  color-scheme: dark;
}
[data-theme="light"]{
  --bg: #f5f5f4; --bg-2: #f0f0ef; --bg-3: #e9e9e8;
  --surface: rgba(0,0,0,.025); --surface-2: rgba(0,0,0,.045); --surface-3: rgba(0,0,0,.07);
  --solid: #ffffff; --solid-2: #fafafa; --solid-3: #f0f0ef;
  --line: rgba(0,0,0,.07); --line-2: rgba(0,0,0,.11); --line-3: rgba(0,0,0,.22);
  --fg: #111111; --fg-2: #505050; --fg-3: #646464; --fg-4: #9a9a9a;
  --inv: #111111; --on-inv: #fafafa;
  --sel: #2f5bd3; --accent: var(--sel); --accent-strong: #2440b0; --accent-soft: rgba(47,91,211,.1); --on-accent: #ffffff;
  --glass: rgba(250,250,249,.78); --glass-line: rgba(0,0,0,.09); --glass-hi: rgba(255,255,255,.8);
  --shadow-1: none;
  --shadow-2: 0 8px 24px rgba(0,0,0,.08);
  --shadow-3: 0 16px 40px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.06);
  --focus: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--fg);
  --ok: #2f8a57; --warn: #7f560b; --bad: #b8443c;
  --hero-falloff: none;
  color-scheme: light;
}

/* base.css */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--fg);font:400 var(--fs-md)/1.6 var(--font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration-color:var(--line-3);text-underline-offset:3px}
a:hover{text-decoration-color:currentColor}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:3px}
::selection{background:var(--fg);color:var(--bg)}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:620;letter-spacing:-.025em;line-height:1.08;text-wrap:balance}
p{margin:0;text-wrap:pretty}
code,kbd,pre{font-family:var(--mono);font-size:.9em}
kbd{display:inline-block;padding:1px 6px;border-radius:3px;border:1px solid var(--line-2);border-bottom-width:2px;background:var(--surface);font-size:.8em;line-height:1.5}
hr{border:0;border-top:1px solid var(--line);margin:32px 0}
.skip{position:absolute;left:12px;top:-60px;z-index:100;padding:10px 14px;border-radius:5px;background:var(--inv);color:var(--on-inv);text-decoration:none;font-weight:600}
.skip:focus{top:12px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
main{display:block;outline:none}
.ico{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ico-xs{width:12px;height:12px}
/* page transitions (cross-document view transitions where supported) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .22s var(--ease) both}
::view-transition-new(root){animation:vt-in .38s var(--ease-out) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-6px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(10px)}}
@media (prefers-reduced-motion: reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}
[hidden]{display:none!important}

/* layout.css */
.wrap{width:min(100% - var(--gutter) * 2, var(--wrap));margin-inline:auto}
.section{position:relative;padding-block:clamp(84px, 10vw, 148px)}
/* tonal bands give the page rhythm instead of decoration: content sits on a solid surface */
.band{background:var(--bg-2);border-block:1px solid var(--line)}
.section-head{display:flex;flex-direction:column;gap:14px;max-width:640px;margin-bottom:clamp(36px, 4.5vw, 60px)}
.section-head .lead{max-width:56ch}
.section-head.center{margin-inline:auto;text-align:center;align-items:center}
.section-head.split{display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);gap:clamp(20px, 4vw, 64px);align-items:end;max-width:none}
.section-head.split>div{display:flex;flex-direction:column;gap:14px}
@media (max-width: 860px){.section-head.split{grid-template-columns:1fr}}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font:600 .7rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
.eyebrow .dot{width:6px;height:6px;border-radius:2px;background:var(--fg)}
.h1{font-size:var(--fs-h1);letter-spacing:-.045em;line-height:.98;font-weight:620}
.h2{font-size:var(--fs-h2);letter-spacing:-.034em;line-height:1.04;font-weight:610}
.h3{font-size:var(--fs-h3);letter-spacing:-.02em;font-weight:610}
.lead{font-size:clamp(1.04rem, .98rem + .25vw, 1.18rem);line-height:1.58;color:var(--fg-2);max-width:58ch}
.muted{color:var(--fg-2)}.faint{color:var(--fg-3)}
/* two-tone headings: the second clause steps back (replaces gradient text) */
.silver{color:var(--fg-3)}
.grid-2{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:clamp(20px, 3vw, 40px);align-items:center}
.grid-3{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:16px}
.grid-4{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:16px}
@media (max-width: 960px){.grid-2{grid-template-columns:1fr}.grid-3{grid-template-columns:repeat(2, minmax(0, 1fr))}.grid-4{grid-template-columns:repeat(2, minmax(0, 1fr))}}
@media (max-width: 600px){.grid-3,.grid-4{grid-template-columns:1fr}}

/* header */
.site-header{position:sticky;top:0;z-index:50;transition:background-color var(--t-med) var(--ease),border-color var(--t-med) var(--ease),backdrop-filter var(--t-med)}
.site-header::after{content:"";position:absolute;inset:auto 0 0;height:1px;background:var(--line);opacity:0;transition:opacity var(--t-med)}
.site-header.scrolled{background:color-mix(in srgb, var(--bg) 80%, transparent);backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2)}
.site-header.scrolled::after{opacity:1}
.header-row{display:flex;align-items:center;gap:24px;height:68px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font:650 1.06rem/1 var(--font-display);letter-spacing:-.02em}
.brand img{border-radius:4px}
.nav{display:flex;gap:2px;margin-left:12px}
.nav a{position:relative;padding:8px 12px;border-radius:4px;font-size:var(--fs-sm);font-weight:500;color:var(--fg-2);text-decoration:none;transition:color var(--t-fast),background-color var(--t-fast)}
.nav a:hover{color:var(--fg);background:var(--surface)}
.nav a[aria-current="page"]{color:var(--fg)}
.nav a[aria-current="page"]::after{content:"";position:absolute;left:12px;right:12px;bottom:3px;height:1.5px;border-radius:1px;background:var(--fg)}
.header-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.header-actions .menu-btn{display:none}
@media (max-width: 900px){.nav{display:none}.header-actions .menu-btn{display:inline-grid}.header-cta .btn-tag{display:none}}
@media (max-width: 520px){.header-cta{display:none}}
.mobile-menu{position:fixed;inset:0;z-index:60;background:color-mix(in srgb, var(--bg) 82%, transparent);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}
.mobile-menu[hidden]{display:none}
.mobile-menu-inner{display:flex;flex-direction:column;height:100%;padding:14px var(--gutter) 28px}
.mobile-menu-top{display:flex;justify-content:space-between;align-items:center;height:40px}
.mobile-menu nav{display:flex;flex-direction:column;margin-top:28px}
.mobile-menu nav a{padding:14px 0;border-bottom:1px solid var(--line);font:600 1.6rem/1.1 var(--font-display);letter-spacing:-.03em;text-decoration:none;color:var(--fg-2)}
.mobile-menu nav a[aria-current="page"]{color:var(--fg)}
.mobile-menu-foot{margin-top:auto}
@media (prefers-reduced-motion: no-preference){.mobile-menu:not([hidden]) nav a{animation:menu-in .5s var(--ease-out) both}.mobile-menu nav a:nth-child(2){animation-delay:.03s}.mobile-menu nav a:nth-child(3){animation-delay:.06s}.mobile-menu nav a:nth-child(4){animation-delay:.09s}.mobile-menu nav a:nth-child(5){animation-delay:.12s}.mobile-menu nav a:nth-child(6){animation-delay:.15s}.mobile-menu nav a:nth-child(7){animation-delay:.18s}}
@keyframes menu-in{from{opacity:0;transform:translateY(12px)}}

/* footer */
.site-footer{border-top:1px solid var(--line);padding:64px 0 36px;background:var(--bg-2)}
.footer-top{display:grid;grid-template-columns:minmax(0, 1.2fr) minmax(0, 2fr);gap:48px}
.footer-brand p{margin-top:14px;color:var(--fg-3);font-size:var(--fs-sm);max-width:38ch}
.footer-version{font:500 var(--fs-xs) var(--mono)}
.footer-cols{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:24px}
.footer-cols h2{font:600 .72rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);margin-bottom:14px}
.footer-cols a{display:block;padding:5px 0;color:var(--fg-2);text-decoration:none;font-size:var(--fs-sm)}
.footer-cols a:hover{color:var(--fg)}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:48px;padding-top:24px;border-top:1px solid var(--line);color:var(--fg-3);font-size:var(--fs-xs)}
@media (max-width: 760px){.footer-top{grid-template-columns:1fr}.footer-cols{grid-template-columns:repeat(2, minmax(0, 1fr))}}

/* inner page hero: direct, on the page surface */
.page-hero{padding:clamp(64px, 8vw, 112px) 0 clamp(36px, 4vw, 56px);border-bottom:1px solid var(--line)}
.page-hero .wrap{display:flex;flex-direction:column;gap:18px}
.page-hero .h1{font-size:clamp(2.4rem, 1.5rem + 3.4vw, 4.25rem);max-width:18ch}
.page-hero+.section{padding-top:clamp(56px, 6vw, 88px)}

/* Account navigation: muted current-page state, with keyboard focus preserved. */
.header-account.account-current{color:var(--fg-2);background:var(--bg-2);border-color:var(--line);box-shadow:inset 0 -2px 0 var(--fg-3)}

.auth-controls{display:grid;gap:18px}.auth-divider{text-align:center;color:var(--fg-2);font-size:var(--fs-sm);padding-block:4px}.auth-controls .btn-row{justify-content:space-between;gap:12px;flex-wrap:wrap}

/* components.css */
/* buttons */
.btn{--h:44px;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;height:var(--h);padding:0 18px;border-radius:5px;border:1px solid var(--line-2);background:var(--surface-2);color:var(--fg);font-size:var(--fs-sm);font-weight:600;letter-spacing:-.005em;text-decoration:none;cursor:pointer;white-space:nowrap;transition:transform var(--t-fast) var(--ease),background-color var(--t-fast),border-color var(--t-fast),box-shadow var(--t-med) var(--ease)}
.btn:hover{background:var(--surface-3);border-color:var(--line-3)}
.btn:active{transform:none;background:var(--surface-3)}
.btn-primary{background:var(--inv);color:var(--on-inv);border-color:transparent;box-shadow:var(--shadow-1)}
.btn-primary:hover{background:color-mix(in srgb,var(--inv) 86%,var(--bg));opacity:1}
.btn-ghost{background:transparent;border-color:transparent}
.btn-sm{--h:36px;padding:0 13px;border-radius:5px}
.btn-lg{--h:52px;padding:0 24px;border-radius:6px;font-size:var(--fs-md)}
.btn-block{width:100%}
.btn .ico{width:17px;height:17px}
.btn-tag{margin-left:2px;padding:3px 6px;opacity:.75;border-radius:4px;font:600 .64rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;background:color-mix(in srgb, var(--on-inv) 10%, transparent);border:1px solid color-mix(in srgb, var(--on-inv) 22%, transparent)}
.btn:not(.btn-primary) .btn-tag{background:var(--surface-2);border-color:var(--line-2)}
.icon-btn{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:5px;border:1px solid transparent;background:transparent;color:var(--fg-2);cursor:pointer;transition:background-color var(--t-fast),color var(--t-fast),border-color var(--t-fast)}
.icon-btn:hover{background:var(--surface-2);color:var(--fg);border-color:var(--line)}
[data-theme="dark"] .ico-moon,[data-theme="light"] .ico-sun{display:none}
.link-arrow{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:var(--fs-sm);text-decoration:none}
.link-arrow .ico{width:15px;height:15px;transition:transform var(--t-fast) var(--ease)}
.link-arrow:hover .ico{transform:translateX(3px)}

/* glass card */
.card{position:relative;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--solid);overflow:hidden}
.feature-card{padding:24px;display:flex;flex-direction:column;gap:12px;transition:border-color var(--t-med),transform var(--t-med) var(--ease)}
.feature-card:hover{border-color:var(--line-2)}
.feature-card .fc-ico{display:grid;place-items:center;width:34px;height:34px;border-radius:4px;border:1px solid var(--line-2);color:var(--fg)}
.feature-card h3{font-size:1.08rem;letter-spacing:-.015em}
.feature-card p{color:var(--fg-2);font-size:var(--fs-sm);line-height:1.6}
.chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:4px;border:1px solid var(--line-2);background:var(--surface);font:550 .7rem/1 var(--mono);letter-spacing:.03em;color:var(--fg-2);white-space:nowrap}
.chip.ok{color:var(--ok)}.chip.warn{color:var(--warn)}
.demo-label{display:inline-flex;align-items:center;gap:6px;font:500 .74rem/1.3 var(--font);color:var(--fg-3)}

/* forms */
.field{display:flex;flex-direction:column;gap:7px}
.field label,.field legend{font-size:var(--fs-sm);font-weight:600}
.field .hint{font-size:var(--fs-xs);color:var(--fg-3)}
.input,.field input:not([type=checkbox]):not([type=radio]),.field select,.field textarea,.waitlist input{width:100%;min-height:46px;padding:11px 14px;border-radius:5px;border:1px solid var(--line-2);background:var(--surface);color:var(--fg);outline:none;transition:border-color var(--t-fast),box-shadow var(--t-fast),background-color var(--t-fast)}
.field textarea{min-height:130px;resize:vertical;line-height:1.55}
.field select{appearance:none;background-image:linear-gradient(45deg, transparent 50%, var(--fg-3) 50%),linear-gradient(135deg, var(--fg-3) 50%, transparent 50%);background-position:calc(100% - 19px) 52%,calc(100% - 14px) 52%;background-size:5px 5px;background-repeat:no-repeat;padding-right:38px}
.field select option{background:var(--solid);color:var(--fg)}
.input:focus,.field input:focus,.field select:focus,.field textarea:focus,.waitlist input:focus{border-color:var(--line-3);box-shadow:0 0 0 4px var(--surface-2);background:var(--surface-2)}
[aria-invalid="true"]{border-color:var(--bad)!important}
.field-error{font-size:var(--fs-xs);color:var(--bad)}
.form-note{font-size:var(--fs-sm);color:var(--fg-2)}
.form-note:empty{display:none}
.check{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-sm);color:var(--fg-2);cursor:pointer}
.check input{margin-top:3px;width:16px;height:16px;accent-color:var(--fg)}

/* segmented control */
.seg{display:inline-flex;padding:3px;gap:2px;border-radius:5px;border:1px solid var(--line);background:var(--surface)}
.seg button{all:unset;box-sizing:border-box;cursor:pointer;padding:7px 13px;border-radius:4px;font-size:var(--fs-sm);font-weight:550;color:var(--fg-2);transition:background-color var(--t-fast),color var(--t-fast)}
.seg button:hover{color:var(--fg)}
.seg button[aria-pressed="true"],.seg button[aria-selected="true"],.seg button[aria-checked="true"]{background:var(--solid-3);color:var(--fg);box-shadow:0 0 0 1px var(--line-2),var(--shadow-1)}
.seg button:focus-visible{box-shadow:var(--focus)}

/* dialog */
.dialog{width:min(480px, calc(100vw - 32px));padding:32px;border-radius:8px;border:1px solid var(--line-2);background:var(--solid);color:var(--fg);box-shadow:var(--shadow-3)}
.dialog::backdrop{background:rgba(5,5,7,.55);backdrop-filter:blur(6px)}
.dialog[open]{animation:dlg-in .42s var(--ease-out) both}
@keyframes dlg-in{from{opacity:0;transform:translateY(10px) scale(.98)}}
@media (prefers-reduced-motion: reduce){.dialog[open]{animation:none}}
.dialog h2{font-size:1.5rem;margin:18px 0 10px}
.dialog p{color:var(--fg-2);font-size:var(--fs-sm)}
.dialog-close-form{position:absolute;top:14px;right:14px;margin:0}
.dialog-mark{border-radius:5px}
.waitlist{display:flex;flex-direction:column;gap:8px;margin:22px 0 14px}
.waitlist label{font-size:var(--fs-sm);font-weight:600}
.waitlist-row{display:flex;gap:8px}
.waitlist-row input{flex:1;min-width:0}
.dialog-fine{font-size:var(--fs-xs)!important;color:var(--fg-3)!important}

/* reveal on scroll (only when JS marks the document ready; content is visible without JS) */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.js .reveal{opacity:1;transform:none;transition:none}}

/* tables, prose */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-md)}
table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
th,td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
th{font-weight:600;color:var(--fg-2);background:var(--surface)}
tr:last-child td{border-bottom:0}
.prose{max-width:760px}
.prose>*+*{margin-top:16px}
.prose h2{font-size:1.6rem;margin-top:48px}.prose h3{font-size:1.2rem;margin-top:32px}
.prose p,.prose li{color:var(--fg-2)}
.prose li+li{margin-top:6px}
.prose ul,.prose ol{padding-left:1.25em}
.prose code{padding:1px 6px;border-radius:3px;background:var(--surface-2);border:1px solid var(--line)}
.prose blockquote{margin:0;padding:14px 18px;border-left:2px solid var(--line-3);background:var(--surface);border-radius:0 5px 5px 0}
.prose strong{color:var(--fg)}
.notice{display:flex;gap:12px;padding:16px 18px;border-radius:6px;border:1px solid color-mix(in srgb, var(--warn) 40%, transparent);background:color-mix(in srgb, var(--warn) 8%, transparent);color:var(--fg);font-size:var(--fs-sm)}
.notice .ico{color:var(--warn);margin-top:2px}
.notice.info{border-color:var(--line-2);background:var(--surface)}
.notice.info .ico{color:var(--fg-2)}

.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
@media (max-width: 520px){.header-account{display:none}}

/* demos.css */
/* ============================================================ browser frame */
.browser{position:relative;border-radius:6px;border:1px solid var(--line-2);background:var(--solid);box-shadow:var(--shadow-2);overflow:hidden;isolation:isolate}
.browser-bar{display:flex;align-items:center;gap:12px;height:42px;padding:0 12px;border-bottom:1px solid var(--line);background:var(--solid-2)}
.bb-dots{display:flex;gap:7px}.bb-dots i{width:11px;height:11px;border-radius:50%;background:var(--solid-3);border:1px solid var(--line-2)}
.bb-nav{display:flex;gap:2px;color:var(--fg-3)}
.bb-nav svg,.browser-url svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.browser-url{flex:1;max-width:420px;margin:0 auto;height:26px;display:flex;align-items:center;justify-content:center;gap:6px;border-radius:4px;background:var(--bg);border:1px solid var(--line);font:500 .76rem/1 var(--font);color:var(--fg-2)}
.browser-url svg{width:12px;height:12px;color:var(--fg-3)}
.browser-ext{display:grid;place-items:center;width:28px;height:26px;border-radius:4px;background:var(--accent-soft);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent)}
.browser-ext img{border-radius:4px}
.browser-view{position:relative;overflow:hidden}
/* tool panels: solid, docked; glass only where a panel floats over page content */
.glass-panel{position:relative;border-radius:6px;border:1px solid var(--line-2);background:var(--solid-2)}
.gp-head{position:relative;display:flex;align-items:center;gap:8px;min-height:42px;padding:0 16px;border-bottom:1px solid var(--line);font-size:var(--fs-sm)}
.gp-head img{border-radius:4px}
.gp-head b{font-weight:620}
.gp-head .chip{margin-left:auto}
.gp-head .gp-sp{flex:1}
/* a demo is one tool window: the page and Aevilo's panel share a frame */
.demo-window{border-radius:7px;border:1px solid var(--line-2);background:var(--solid);box-shadow:var(--shadow-2);overflow:hidden}
.demo-window .browser{border:0;border-radius:0;box-shadow:none}
.demo-window .glass-panel{border:0;border-radius:0;background:var(--solid-2)}
.demo{display:grid;grid-template-columns:minmax(0, 1fr) 340px;gap:20px;align-items:start}
@media (max-width: 1040px){.demo{grid-template-columns:1fr}}
.code-mini,.code-block{margin:0;padding:12px 14px;border-radius:5px;border:1px solid var(--line);background:var(--bg);font:500 .74rem/1.65 var(--mono);color:var(--fg-2);white-space:pre;overflow:auto;max-height:220px}
.code-block{max-height:340px;margin:0 16px 16px}
.code-mini .k,.code-block .k{color:var(--fg)} .code-mini .v,.code-block .v{color:#c9b38a} [data-theme="light"] .code-mini .v,[data-theme="light"] .code-block .v{color:#7b5a17}
.switch{all:unset;position:relative;width:38px;height:22px;border-radius:8px;background:var(--surface-3);border:1px solid var(--line-2);cursor:pointer;flex:none;transition:background-color var(--t-fast)}
.switch::after{content:"";position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:var(--fg-2);transition:transform .4s var(--spring),background-color var(--t-fast)}
.switch[aria-checked="true"]{background:var(--inv)}.switch[aria-checked="true"]::after{transform:translateX(16px);background:var(--on-inv)}
.switch:focus-visible{box-shadow:var(--focus)}
.seg-sm button{padding:5px 10px;font-size:.78rem}
input[type=range]{accent-color:var(--fg)}

/* ============================================================ Meridian (fictional site) */
.mx{--mx-bg:#0f1014;--mx-fg:#f1f0ec;--mx-fg2:#9c9ca3;--mx-line:rgba(255,255,255,.09);--mx-card:#17181d;--mx-accent:#e9e9e5;--mx-on:#111;--mx-r:12px;--mx-font:var(--font);
  position:relative;display:flex;flex-direction:column;gap:18px;padding:18px 22px 22px;background:var(--mx-bg);color:var(--mx-fg);font-family:var(--mx-font);min-height:100%;transition:background-color .6s var(--ease)}
[data-theme="light"] .mx:not(.mx-keep){--mx-bg:#fbfbf9;--mx-fg:#151517;--mx-fg2:#6a6a70;--mx-line:rgba(0,0,0,.08);--mx-card:#fff;--mx-accent:#151517;--mx-on:#fff}
.mx-nav{display:flex;align-items:center;gap:16px;padding-bottom:12px;border-bottom:1px solid var(--mx-line)}
.mx-logo{font-weight:700;letter-spacing:-.02em;font-size:.95rem}
.mx-links{display:flex;gap:14px;margin-left:8px;font-size:.72rem;color:var(--mx-fg2)}.mx-links i{font-style:normal}
.mx-nav .mx-btn{margin-left:auto}
.mx-btn{display:inline-flex;align-items:center;height:28px;padding:0 13px;border-radius:calc(var(--mx-r) * .7);background:var(--mx-accent);color:var(--mx-on);font-size:.72rem;font-weight:650;transition:all .6s var(--ease)}
.mx-ghost{background:transparent;color:var(--mx-fg);border:1px solid var(--mx-line)}
.mx-hero{display:flex;flex-direction:column;gap:10px;padding:14px 0 4px}
.mx-tag{align-self:flex-start;padding:4px 9px;border-radius:4px;border:1px solid var(--mx-line);font-size:.64rem;color:var(--mx-fg2)}
.mx-title{font-size:clamp(1.3rem, .9rem + 1.6vw, 2.05rem);letter-spacing:-.035em;line-height:1.05;max-width:15ch;font-family:var(--mx-font);transition:font-family .2s}
.mx-text{font-size:.8rem;color:var(--mx-fg2);max-width:40ch}
.mx-actions{display:flex;gap:8px;margin-top:4px}
.mx-cards{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:12px}
.mx-card{display:flex;flex-direction:column;gap:6px;padding:10px;border-radius:var(--mx-r);background:var(--mx-card);border:1px solid var(--mx-line);transition:all .6s var(--ease)}
.mx-card b{font-size:.78rem}.mx-card span{font-size:.66rem;color:var(--mx-fg2);line-height:1.4}
.mx-thumb{display:block;aspect-ratio:16/9;border-radius:calc(var(--mx-r) * .6);background:linear-gradient(135deg, #3a3c44, #1d1e23);transition:border-radius .6s var(--ease)}
.mx-thumb-1{background:linear-gradient(135deg, #4b4d55, #24252b)}.mx-thumb-2{background:linear-gradient(135deg, #2f3036, #4a4c55)}
[data-theme="light"] .mx:not(.mx-keep) .mx-thumb{background:linear-gradient(135deg, #e3e3df, #cfd0cc)}
/* customised looks (Styles demo, AI demo, hero "Restyle") */
.mx.mx-custom{--mx-accent:var(--acc, #a9c1e6)}
.mx.mx-glass .mx-card{background:color-mix(in srgb, var(--mx-card) 55%, transparent);backdrop-filter:blur(10px);border-color:color-mix(in srgb, var(--mx-fg) 14%, transparent);box-shadow:0 1px 0 color-mix(in srgb, #fff 12%, transparent) inset, 0 10px 30px rgba(0,0,0,.25)}
.mx.mx-glass{background:radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--mx-accent) 22%, transparent), transparent 60%), var(--mx-bg)}
.mx-font-serif{--mx-font:"Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif}
.mx-font-mono{--mx-font:var(--mono)}
.mx-font-grotesk{--mx-font:var(--font)}

/* ============================================================ hero demo */
.hero-demo{position:relative;perspective:1600px}
.hd-stage{transform-style:preserve-3d;transition:transform .9s var(--ease-out);will-change:transform}
.hd-browser{box-shadow:var(--shadow-3)}
.hd-browser .browser-view{height:clamp(400px, 42vw, 560px)}
.hd-browser .mx{gap:14px}
.hd-browser .mx{height:100%}
.hd-wire{position:absolute;inset:0;pointer-events:none}
.hd-wire i{position:absolute;background:color-mix(in srgb, var(--fg) 55%, transparent);transform-origin:0 0}
.hd-wire i.v{width:1px}.hd-wire i.h{height:1px}
.hd-outline{position:absolute;left:0;top:0;width:0;height:0;border:1.5px solid var(--accent);border-radius:5px;box-shadow:0 0 0 4px var(--accent-soft);opacity:0;pointer-events:none;transition:opacity .3s,transform .7s var(--ease-out),width .7s var(--ease-out),height .7s var(--ease-out)}
.hd-tip{position:absolute;left:-1px;bottom:calc(100% + 8px);padding:5px 9px;border-radius:4px;background:var(--accent);color:var(--on-accent);font:500 .66rem/1.4 var(--mono);white-space:nowrap;box-shadow:0 6px 20px rgba(0,0,0,.35)}
.hd-cursor{position:absolute;left:0;top:0;width:22px;height:22px;opacity:0;pointer-events:none;transition:opacity .3s;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
.hd-cursor svg{width:100%;height:100%;fill:#fff;stroke:#111;stroke-width:1.2}
.hd-panel{position:absolute;right:16px;top:64px;width:min(272px, 40%);border-radius:6px;border:1px solid rgba(255,255,255,.14);background:rgba(18,19,23,.72);backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3);color:#f2f2ef;box-shadow:0 30px 70px rgba(0,0,0,.5);transform-origin:top right;transition:opacity .5s var(--ease),transform .7s var(--ease-out)}
[data-theme="light"] .hd-panel{background:rgba(255,255,255,.78);color:#141416;border-color:rgba(0,0,0,.1);box-shadow:0 30px 70px rgba(20,20,30,.18)}
.hd-panel.off{opacity:0;transform:translateY(-8px) scale(.97)}
.hd-panel-head{display:flex;align-items:center;gap:7px;padding:12px 14px;border-bottom:1px solid color-mix(in srgb, currentColor 12%, transparent);font-size:.74rem}
.hd-panel-head span{margin-left:auto;font:500 .62rem var(--mono);opacity:.6}
.hd-panel-body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:9px;font-size:.74rem;min-height:128px}
.hd-row{display:flex;justify-content:space-between;gap:10px;font-family:var(--mono);font-size:.7rem}
.hd-row span:first-child{opacity:.6}
.hd-swatches{display:flex;gap:6px}.hd-swatches i{width:20px;height:20px;border-radius:3px;border:1px solid color-mix(in srgb, currentColor 18%, transparent)}
.hd-swatches i.on{box-shadow:0 0 0 2px currentColor}
.hd-bar{height:4px;border-radius:4px;background:color-mix(in srgb, currentColor 14%, transparent);position:relative;overflow:hidden}.hd-bar b{position:absolute;inset:0 auto 0 0;background:var(--fg);border-radius:inherit;transition:width .8s var(--ease-out)}
.hd-tl{display:flex;flex-direction:column;gap:5px;position:relative}
.hd-tl i{display:block;height:7px;border-radius:4px;background:color-mix(in srgb, currentColor 30%, transparent)}
.hd-tl i{width:56%}.hd-tl i:nth-child(2){margin-left:12%}.hd-tl i:nth-child(3){margin-left:24%}
.hd-tl em{position:absolute;top:-3px;bottom:-3px;width:1.5px;background:var(--accent);left:0}
.hero-demo{display:flex;flex-direction:column}
.hd-modes{order:-1;align-self:center;display:inline-flex;gap:2px;margin:0 0 18px;padding:4px;border-radius:6px;border:1px solid var(--line-2);background:var(--solid);box-shadow:var(--shadow-1)}
.hd-modes button{all:unset;box-sizing:border-box;position:relative;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:5px;font-size:var(--fs-sm);font-weight:560;color:var(--fg-2);cursor:pointer;overflow:hidden;transition:color var(--t-fast),background-color var(--t-fast)}
.hd-modes button:hover{color:var(--fg);background:var(--surface-2)}
.hd-modes button[aria-selected="true"]{color:var(--fg);background:var(--solid-3);box-shadow:0 0 0 1px var(--line-2)}
.hd-modes button[aria-selected="true"] .ico{color:var(--fg)}
.hd-modes button:focus-visible{box-shadow:var(--focus)}
.hd-progress{position:absolute;left:14px;right:14px;bottom:5px;height:2px;border-radius:2px;background:transparent;overflow:hidden}
.hd-progress::after{content:"";position:absolute;inset:0;background:var(--fg);transform:scaleX(var(--prog, 0));transform-origin:left}
button[aria-selected="false"] .hd-progress::after{opacity:0}
.hd-caption{display:flex;justify-content:center;margin-top:16px}
/* construction state on the hero page */
.mx.building [data-i],.mx.building .mx-card,.mx.building .mx-links{color:transparent!important;background:transparent!important;border-color:transparent!important;box-shadow:none!important}
.mx.building .mx-thumb{background:transparent!important}
.mx.building [data-hd-block]{outline:1px dashed color-mix(in srgb, var(--mx-fg) 35%, transparent);outline-offset:-1px}

/* ============================================================ inspector */
.inspector-demo [data-i]{cursor:crosshair}
.inspector-demo [data-i]:focus-visible{box-shadow:none;outline:2px solid var(--accent);outline-offset:2px}
.ins-hover{position:absolute;pointer-events:none;border:1px dashed color-mix(in srgb, var(--accent) 80%, transparent);background:var(--accent-soft);border-radius:4px;transition:all .18s var(--ease);z-index:3}
.ins-sel{position:absolute;pointer-events:none;border:1.5px solid var(--accent);border-radius:4px;box-shadow:0 0 0 4px var(--accent-soft);z-index:4;transition:all .3s var(--ease-out)}
.ins-pad{position:absolute;pointer-events:none;background:repeating-linear-gradient(45deg, rgba(143,211,171,.18) 0 4px, transparent 4px 8px);z-index:2}
.ins-tag{position:absolute;bottom:calc(100% + 6px);left:-1px;padding:3px 8px;border-radius:3px;background:var(--accent);color:var(--on-accent);font:500 .64rem/1.4 var(--mono);white-space:nowrap}
.ins-body{position:relative;padding:14px 16px 16px;display:flex;flex-direction:column;gap:14px;min-height:420px}
.ins-empty{color:var(--fg-3);font-size:var(--fs-sm)}
.ins-sec h4{font:600 .66rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);margin-bottom:8px}
.ins-kv{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;font:500 .74rem/1.4 var(--mono)}
.ins-kv dt{color:var(--fg-3)}.ins-kv dd{margin:0;color:var(--fg);text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ins-sw{display:inline-block;width:11px;height:11px;border-radius:3px;border:1px solid var(--line-2);vertical-align:-1px;margin-right:6px}
.ins-box{display:grid;place-items:center;padding:10px;border:1px dashed var(--line-2);border-radius:5px;font:500 .64rem var(--mono);color:var(--fg-3);position:relative}
.ins-box .ins-box-p{padding:10px 16px;border:1px solid color-mix(in srgb, var(--ok) 50%, transparent);border-radius:4px;background:color-mix(in srgb, var(--ok) 8%, transparent);text-align:center}
.ins-box .ins-box-c{padding:6px 12px;border-radius:3px;background:var(--surface-3);color:var(--fg)}
.ins-sel-name{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:5px;background:var(--accent-soft);box-shadow:inset 2px 0 0 var(--accent);font:600 .8rem var(--mono);color:var(--fg)}
.ins-sel-name::before{content:"";width:8px;height:8px;border-radius:2px;border:1.5px solid var(--accent)}
.ins-css-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}

/* ============================================================ styles + compare */
.sty-compare{height:clamp(380px, 40vw, 470px);touch-action:pan-y}
.sty-layer{position:absolute;inset:0}
.sty-layer .mx{height:100%}
.sty-after{clip-path:inset(0 0 0 var(--split, 50%))}
.sty-badge{position:absolute;left:14px;bottom:14px;z-index:2;padding:5px 10px;border-radius:4px;background:rgba(10,10,12,.7);color:#f2f2ef;backdrop-filter:blur(8px);font:550 .66rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.sty-badge-r{left:auto;right:14px}
.sty-handle{position:absolute;top:0;bottom:0;left:var(--split, 50%);width:2px;margin-left:-1px;background:#f2f2ef;z-index:3;box-shadow:0 0 0 1px rgba(0,0,0,.25);pointer-events:none}
.sty-handle i{position:absolute;top:50%;left:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:#f2f2ef;box-shadow:0 6px 18px rgba(0,0,0,.4)}
.sty-handle i::before,.sty-handle i::after{content:"";position:absolute;top:50%;width:6px;height:6px;margin-top:-3px;border:solid #141416;border-width:0 0 1.5px 1.5px}
.sty-handle i::before{left:9px;transform:rotate(45deg)}.sty-handle i::after{right:9px;transform:rotate(-135deg)}
.sty-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;z-index:4;margin:0}
.sty-range:focus-visible+*{outline:none}
.sty-compare:has(.sty-range:focus-visible) .sty-handle i{box-shadow:var(--focus)}
.sty-panel{display:flex;flex-direction:column}
.sty-row{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);font-size:var(--fs-sm)}
.sty-row input[type=range]{flex:1;max-width:130px}
.sty-row output{font:500 .74rem var(--mono);color:var(--fg-2);min-width:44px;text-align:right}
.sty-l{font-size:var(--fs-sm);color:var(--fg-2);font-weight:500}
.sty-swatches{display:flex;gap:6px}
.sty-swatches button{all:unset;cursor:pointer;width:26px;height:26px;border-radius:4px;display:grid;place-items:center;border:1px solid var(--line-2);transition:transform var(--t-fast) var(--ease)}
.sty-swatches button:hover{transform:translateY(-1px)}
.sty-swatches button[aria-checked="true"]{box-shadow:0 0 0 2px var(--bg),0 0 0 3.5px var(--fg)}
.sty-swatches button:focus-visible{box-shadow:var(--focus)}
.sty-swatches i{width:18px;height:18px;border-radius:3px}
.sw-graphite{background:#e9e9e5}.sw-ivory{background:#efe3c8}.sw-sage{background:#b7cbb5}.sw-azure{background:#a9c1e6}.sw-ember{background:#e6b39b}
.sty-panel .code-mini{margin:14px 16px 16px}

/* ============================================================ motion */
.wf{display:grid;grid-template-columns:120px 1fr;height:clamp(360px, 36vw, 440px);background:#0e0f12;color:#ecebe8}
[data-theme="light"] .wf{background:#f7f7f5;color:#151517}
.wf-side{display:flex;flex-direction:column;gap:9px;padding:16px 12px;background:#131418;border-right:1px solid rgba(255,255,255,.07)}
[data-theme="light"] .wf-side{background:#efefec;border-color:rgba(0,0,0,.07)}
.wf-side b{font-size:.78rem;margin-bottom:8px}.wf-side i{display:block;height:7px;border-radius:4px;background:currentColor;opacity:.18}.wf-side i.s{margin-top:auto;height:44px;border-radius:4px;opacity:.1}
.wf-main{display:flex;flex-direction:column;gap:12px;padding:14px 18px;min-width:0}
.wf-top{display:flex;gap:10px;align-items:center}.wf-search{flex:1;max-width:220px;height:22px;border-radius:5px;background:currentColor;opacity:.08}.wf-pill{margin-left:auto;width:64px;height:22px;border-radius:5px;background:currentColor;opacity:.85}
.wf-title{font-size:1.25rem;letter-spacing:-.03em}
.wf-grid{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:10px}
.wf-card{display:flex;flex-direction:column;gap:5px;padding:8px;border-radius:5px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06)}
[data-theme="light"] .wf-card{background:#fff;border-color:rgba(0,0,0,.06)}
.wf-cover{display:block;aspect-ratio:1.6;border-radius:4px;background:linear-gradient(135deg, #43454d, #1f2025)}
.wf-c1{background:linear-gradient(135deg, #5a5c63, #2b2c31)}.wf-c2{background:linear-gradient(160deg, #2d2e33, #50525a)}.wf-c3{background:linear-gradient(120deg, #3c3d43, #222327)}.wf-c4{background:linear-gradient(140deg, #4d4f56, #26272c)}.wf-c5{background:linear-gradient(135deg, #34353b, #5d5f66)}
[data-theme="light"] .wf-cover{background:linear-gradient(135deg, #deded9, #c9cac5)}
.wf-card b{display:block;height:6px;width:70%;border-radius:3px;background:currentColor;opacity:.5}.wf-card em{display:block;height:5px;width:45%;border-radius:3px;background:currentColor;opacity:.2}
.wf-bar{margin-top:auto;display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:5px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06)}
[data-theme="light"] .wf-bar{background:#fff;border-color:rgba(0,0,0,.06)}
.wf-bar i{flex:1;height:4px;border-radius:4px;background:currentColor;opacity:.15}
.wf-play{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:currentColor}.wf-play .ico{width:13px;height:13px;stroke:none;fill:#0e0f12}[data-theme="light"] .wf-play .ico{fill:#f7f7f5}
.motion-demo [data-t]{cursor:pointer;outline:1px solid transparent;outline-offset:3px;border-radius:4px;transition:outline-color .2s}
.motion-demo [data-t]:hover{outline-color:color-mix(in srgb, currentColor 30%, transparent)}
.motion-demo [data-t].mo-on{outline:1.5px solid currentColor}
.motion-demo [data-t]:focus-visible{outline:2px solid currentColor;box-shadow:none}
.mo-panel{display:flex;flex-direction:column}
.mo-hint{padding:10px 16px 0;font-size:var(--fs-xs);color:var(--fg-3)}
.mo-sec{padding:12px 16px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.mo-presets{display:grid;grid-template-columns:repeat(3, 1fr);gap:6px}
.mo-presets button{all:unset;box-sizing:border-box;cursor:pointer;text-align:center;padding:8px 4px;border-radius:5px;border:1px solid var(--line);background:var(--surface);font-size:.78rem;color:var(--fg-2);transition:all var(--t-fast)}
.mo-presets button:hover{color:var(--fg);border-color:var(--line-2)}
.mo-presets button[aria-pressed="true"]{color:var(--fg);border-color:var(--fg);background:var(--surface-2)}
.mo-presets button:focus-visible{box-shadow:var(--focus)}
.mo-sliders{display:flex;flex-direction:column;gap:6px}
.mo-sl{display:grid;grid-template-columns:70px 1fr 46px;gap:10px;align-items:center;font-size:.78rem;color:var(--fg-2)}
.mo-sl output{font:500 .72rem var(--mono);text-align:right;color:var(--fg)}
.mo-effects{display:flex;gap:16px;flex-wrap:wrap}
.mo-timeline{padding:12px 16px 16px;display:flex;flex-direction:column;gap:10px}
.mo-transport{display:flex;align-items:center;gap:4px}
.mo-time{margin-left:auto;font:600 .74rem var(--mono);color:var(--fg-2)}
.mo-ruler{position:relative;height:16px;margin-left:72px;border-bottom:1px solid var(--line-2);background:repeating-linear-gradient(90deg, var(--line-2) 0 1px, transparent 1px calc(100% / 12)) bottom/100% 5px no-repeat}
.mo-ruler input{position:absolute;inset:-4px 0;width:100%;opacity:0;cursor:pointer;margin:0}
.mo-ruler:has(input:focus-visible){box-shadow:var(--focus);border-radius:4px}
.mo-head{position:absolute;top:-2px;width:9px;height:9px;margin-left:-4.5px;border-radius:2px 2px 3px 3px;background:var(--fg);pointer-events:none}
.mo-lanes{position:relative;display:flex;flex-direction:column;gap:5px}
.mo-lane{display:grid;grid-template-columns:66px 1fr;gap:6px;align-items:center;height:20px}
.mo-lane>span{font-size:.7rem;color:var(--fg-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mo-lane.on>span{color:var(--fg);font-weight:600}
.mo-lane-box{position:relative;height:100%;border-radius:3px;background:repeating-linear-gradient(90deg, transparent 0 calc(100% / 6 - 1px), var(--line) calc(100% / 6 - 1px) calc(100% / 6))}
.mo-bar{all:unset;position:absolute;top:3px;bottom:3px;border-radius:3px;background:var(--surface-3);border:1px solid var(--line-2);cursor:grab;touch-action:none}
.mo-lane.on .mo-bar{background:var(--inv);border-color:transparent}
.mo-bar:focus-visible{box-shadow:var(--focus)}
.mo-playline{position:absolute;top:0;bottom:0;width:1.5px;background:var(--fg);pointer-events:none;z-index:2}
.mo-export{grid-column:1 / -1}
.mo-fx-border{position:relative}
@property --mo-a{syntax:"<angle>";inherits:false;initial-value:0deg}
.mo-fx-border::after{content:"";position:absolute;inset:-2px;border-radius:5px;padding:1.5px;background:conic-gradient(from var(--mo-a), transparent 0 70%, color-mix(in srgb, currentColor 90%, transparent) 85%, transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;animation:mo-spin 3.2s linear infinite}
@keyframes mo-spin{to{--mo-a:360deg}}
@media (prefers-reduced-motion: reduce){.mo-fx-border::after{animation:none}}

/* ============================================================ AI */
.ai-panel{display:flex;flex-direction:column;min-height:470px}
.ai-thread{flex:1;display:flex;flex-direction:column;gap:10px;padding:14px 16px;overflow:auto;max-height:340px}
.ai-msg{padding:10px 12px;border-radius:6px;font-size:.82rem;line-height:1.55;max-width:92%}
.ai-bot{background:var(--surface-2);border:1px solid var(--line);align-self:flex-start}
.ai-user{background:var(--inv);color:var(--on-inv);align-self:flex-end;border-bottom-right-radius:3px}
.ai-msg pre{margin:8px 0 0}
.ai-acts{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.ai-suggest{display:flex;flex-direction:column;gap:6px;padding:0 16px 12px}
.ai-suggest .btn{justify-content:flex-start;white-space:normal;text-align:left;height:auto;min-height:34px;padding:7px 12px;font-weight:500}
.ai-compose{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--line)}
.ai-compose .input{min-height:36px;padding:7px 12px;border-radius:5px;font-size:var(--fs-sm)}
.ai-disclaimer{padding:0 16px 14px;font-size:.7rem;color:var(--fg-3);line-height:1.5}
.ai-caret{display:inline-block;width:6px;height:13px;background:currentColor;vertical-align:-2px;margin-left:2px;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.mx .ai-preview-ring{outline:1.5px dashed var(--mx-fg);outline-offset:4px}
@keyframes ai-bounce{0%,100%{translate:0 0}40%{translate:0 -4px}70%{translate:0 1px}}
.mx.ai-hover .mx-card:nth-child(2):hover,.mx.ai-hover .mx-btn:hover{animation:ai-bounce .6s var(--ease-out)}
.mx.ai-premium .mx-card:nth-child(2){background:linear-gradient(180deg, color-mix(in srgb, var(--mx-card) 80%, #fff 6%), var(--mx-card));border-color:color-mix(in srgb, var(--mx-fg) 18%, transparent);box-shadow:0 1px 0 color-mix(in srgb, #fff 14%, transparent) inset, 0 18px 40px rgba(0,0,0,.35);border-radius:7px}
.mx.ai-premium .mx-card:nth-child(2) .mx-thumb{border-radius:5px}
.mx.ai-calm{--mx-bg:#101317;--mx-card:#151a20;--mx-fg:#e7ebef;--mx-fg2:#8f98a3;--mx-accent:#c8d3de;--mx-line:rgba(200,215,230,.1)}

/* ============================================================ construction story */
.construct{position:relative;height:250vh}
.cs-sticky{position:sticky;top:0;height:100vh;display:grid;grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr);gap:clamp(24px, 5vw, 64px);align-items:center}
.cs-copy{display:flex;flex-direction:column;gap:18px}
.cs-phases{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
.cs-phases li{display:flex;gap:14px;align-items:baseline;padding:8px 0;color:var(--fg-4);border-bottom:1px solid var(--line);transition:color .4s}
.cs-phases li b{font:600 .72rem var(--mono)}
.cs-phases li.on{color:var(--fg)}
.cs-stage{--p:0;position:relative;aspect-ratio:1.15;border-radius:8px;border:1px solid var(--line-2);background:var(--bg-2);overflow:hidden;box-shadow:var(--shadow-3)}
.cs-page{position:absolute;inset:7%;display:flex;flex-direction:column;gap:5%}
.cs-b{position:relative;border-radius:5px;--o:clamp(0, (var(--p) - var(--d, 0)) * 5, 1);--m:clamp(0, (var(--p) - .42 - var(--d, 0)) * 4, 1);
  border:1px dashed color-mix(in srgb, var(--fg) calc(45% * var(--o) * (1 - var(--m))), transparent);
  background:color-mix(in srgb, var(--solid-2) calc(100% * var(--m)), transparent);
  box-shadow:0 18px 40px rgba(0,0,0,calc(.3 * var(--m)));
  clip-path:inset(0 calc((1 - var(--o)) * 100%) 0 0 round 12px)}
.cs-nav{height:9%;display:flex;gap:4%;align-items:center;padding:0 4%;--d:0}
.cs-nav i{height:24%;border-radius:4px;flex:0 0 12%;background:var(--fg);opacity:calc(.5 * clamp(0, (var(--p) - .72) * 6, 1))}
.cs-nav i:first-child{flex-basis:18%;opacity:calc(.85 * clamp(0, (var(--p) - .7) * 6, 1))}
.cs-hero{flex:1;--d:.06;padding:6%;display:flex;flex-direction:column;justify-content:center;gap:5%}
.cs-hero i{display:block;border-radius:3px;background:var(--fg)}
.cs-l1{height:10%;width:70%;opacity:calc(.9 * clamp(0, (var(--p) - .74) * 6, 1));transform:translateY(calc((1 - clamp(0, (var(--p) - .74) * 6, 1)) * 10px))}
.cs-l2{height:10%;width:52%;opacity:calc(.9 * clamp(0, (var(--p) - .78) * 6, 1));transform:translateY(calc((1 - clamp(0, (var(--p) - .78) * 6, 1)) * 10px))}
.cs-l3{height:5%;width:44%;opacity:calc(.35 * clamp(0, (var(--p) - .82) * 6, 1))}
.cs-btn{height:11%;width:22%;border-radius:4px!important;opacity:calc(clamp(0, (var(--p) - .86) * 6, 1))}
.cs-row{height:30%;display:flex;gap:4%}
.cs-card{flex:1}.cs-card:nth-child(1){--d:.12}.cs-card:nth-child(2){--d:.16}.cs-card:nth-child(3){--d:.2}
.cs-dims{position:absolute;inset:0;pointer-events:none;opacity:calc(clamp(0, (var(--p) - .2) * 6, 1) * (1 - clamp(0, (var(--p) - .62) * 5, 1)))}
.cs-dim{position:absolute;font:500 .62rem var(--mono);color:var(--fg-3)}
.cs-dim-h{top:-6%;left:50%;transform:translateX(-50%)}.cs-dim-v{right:-5%;top:50%;transform:rotate(90deg)}
.cs-dim-h::before,.cs-dim-h::after{content:"";position:absolute;top:50%;width:180px;height:1px;background:var(--line-3)}.cs-dim-h::before{right:calc(100% + 8px)}.cs-dim-h::after{left:calc(100% + 8px)}
@media (max-width: 900px){.construct{height:auto}.cs-sticky{position:relative;height:auto;grid-template-columns:1fr;padding-block:40px}}
@media (prefers-reduced-motion: reduce){.construct{height:auto}.cs-sticky{position:relative;height:auto}}
.demo-failed::after{content:"This demonstration could not load. Reload the page to try again.";display:block;padding:14px;font-size:var(--fs-sm);color:var(--fg-3)}
.demo>*{min-width:0}
.mo-export{overflow:hidden}
.mo-export .gp-head{flex-wrap:wrap}
@media (max-width: 600px){
  .hd-panel{display:none}
  .mx{padding:14px;gap:12px}.mx-links{display:none}.mx-cards{gap:8px}.mx-card{padding:7px}.mx-card span{display:none}
  .hd-browser .browser-view{height:340px}
  .hd-modes button{padding:9px 12px 11px}.hd-modes button span{font-size:.8rem}
  .wf{grid-template-columns:72px 1fr}.wf-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}.wf-card:nth-child(n+5){display:none}
}

/* ============================================================ refined demo compositions */
/* Inspector: the page and the docked Inspector share one window, so selection → measurements reads left to right */
.inspector-demo{gap:0;grid-template-columns:minmax(0, 1fr) 360px;border-radius:7px;border:1px solid var(--line-2);background:var(--solid);box-shadow:var(--shadow-2);overflow:hidden}
.inspector-demo .browser{border:0;border-radius:0;box-shadow:none;display:flex;flex-direction:column}
.inspector-demo .browser-view{flex:1;display:flex;flex-direction:column}
.inspector-demo .browser-view .mx{flex:1}
.inspector-demo .ins-panel{border:0;border-left:1px solid var(--line-2);border-radius:0;background:var(--solid-2)}
.inspector-demo .browser-view{min-height:520px}
.inspector-demo .browser-view .mx{min-height:520px}
@media (max-width: 1040px){.inspector-demo{grid-template-columns:1fr}.inspector-demo .ins-panel{border-left:0;border-top:1px solid var(--line-2)}.inspector-demo .browser-view,.inspector-demo .browser-view .mx{min-height:0}}
/* Styles: the comparison is the focus; controls dock below as one toolbar */
.styles-demo{display:block;border-radius:7px;border:1px solid var(--line-2);background:var(--solid);box-shadow:var(--shadow-2);overflow:hidden}
.styles-demo .sty-browser{border:0;border-radius:0;box-shadow:none}
.sty-compare{height:clamp(420px, 46vw, 600px)}
.sty-panel{display:flex;flex-direction:row;flex-wrap:wrap;align-items:stretch;border-top:1px solid var(--line-2);background:var(--solid-2)}
.sty-panel .sty-row{border-bottom:0;border-right:1px solid var(--line);padding:12px 16px;gap:10px;justify-content:flex-start}
.sty-panel .sty-title{gap:8px;font-weight:620}
@media (min-width: 761px){.sty-panel .sty-title{display:none}}
.sty-panel .sty-title img{border-radius:4px}
.sty-panel .sty-view{margin-left:auto;border-right:0;border-left:1px solid var(--line)}
.sty-row input[type=range]{width:92px}
.sty-code{flex:1 0 100%;border-top:1px solid var(--line)}
.sty-code summary{cursor:pointer;padding:10px 18px;font-size:var(--fs-sm);color:var(--fg-2);list-style:none}
.sty-code summary::-webkit-details-marker{display:none}
.sty-code summary::before{content:"+";display:inline-block;width:16px;color:var(--fg-3)}
.sty-code[open] summary::before{content:"–"}
.sty-code summary:focus-visible{box-shadow:inset var(--focus)}
.sty-panel .sty-code .code-mini{margin:0 18px 16px}
.sty-badge{background:var(--glass);color:var(--fg);border:1px solid var(--glass-line);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.sty-handle{background:#f2f2ef}
.sty-handle i{background:#f2f2ef;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.sty-handle i::before,.sty-handle i::after{border-color:#141416}
.sty-swatches button[aria-checked="true"]{box-shadow:0 0 0 2px var(--solid-2),0 0 0 3.5px var(--fg)}
@media (max-width: 760px){.sty-panel .sty-row{flex:1 1 50%;border-right:0;border-bottom:1px solid var(--line)}.sty-panel .sty-view{margin-left:0;border-left:0}.sty-panel .sty-title{flex-basis:100%}}
/* Motion Studio: stage + controls side by side, the timeline docked full width beneath both */
.motion-demo{gap:0;grid-template-columns:minmax(0, 1fr) 340px;border-radius:7px;border:1px solid var(--line-2);background:var(--solid);box-shadow:var(--shadow-2);overflow:hidden}
.motion-demo .browser{border:0;border-radius:0;box-shadow:none}
.motion-demo .mo-panel{border:0;border-left:1px solid var(--line-2);border-radius:0;background:var(--solid-2)}
.motion-demo .mo-timeline{grid-column:1 / -1;border-top:1px solid var(--line-2);background:var(--solid-2);padding:14px 20px 18px;display:grid;grid-template-columns:auto minmax(0, 1fr);column-gap:24px;row-gap:10px;align-items:center}
.motion-demo .mo-transport{grid-row:1 / span 2;flex-direction:column;align-items:flex-start;gap:6px}
.motion-demo .mo-time{margin-left:0;font-size:.82rem;color:var(--fg)}
.motion-demo .mo-ruler{margin-left:110px}
.motion-demo .mo-lane{grid-template-columns:104px 1fr;height:24px}
.motion-demo .mo-lane>span{font-size:.76rem}
.motion-demo .mo-lane.on .mo-bar{background:var(--fg);border-color:transparent}
.motion-demo .mo-playline,.motion-demo .mo-head{background:var(--fg)}
.motion-demo .mo-sec:last-child{border-bottom:0}
.motion-demo [data-t].mo-on{outline-color:var(--accent)}
.mo-presets button[aria-pressed="true"]{border-color:var(--fg);box-shadow:inset 0 0 0 1px var(--fg)}
.motion-demo .mo-export{grid-column:1 / -1;border:0;border-top:1px solid var(--line-2);border-radius:0;background:var(--solid)}
.motion-demo .code-block{margin:0 20px 20px}
@media (max-width: 1040px){.motion-demo{grid-template-columns:1fr}.motion-demo .mo-panel{border-left:0;border-top:1px solid var(--line-2)}}
@media (max-width: 600px){.motion-demo .mo-timeline{grid-template-columns:1fr}.motion-demo .mo-transport{grid-row:auto;flex-direction:row;align-items:center}.motion-demo .mo-time{margin-left:auto}.motion-demo .mo-ruler{margin-left:76px}.motion-demo .mo-lane{grid-template-columns:70px 1fr}}
/* AI: the conversation leads; the page it changes sits beside it */
.ai-demo{gap:0;grid-template-columns:380px minmax(0, 1fr);border-radius:7px;border:1px solid var(--line-2);background:var(--solid);box-shadow:var(--shadow-2);overflow:hidden}
.ai-demo .ai-panel{order:-1;border:0;border-right:1px solid var(--line-2);border-radius:0;background:var(--solid-2)}
.ai-demo .browser{border:0;border-radius:0;box-shadow:none;display:flex;flex-direction:column}
.ai-demo .browser-view{flex:1;display:flex;flex-direction:column}
.ai-demo .browser-view .mx{flex:1}
.ai-demo .browser-view{min-height:480px}
.ai-user{background:var(--inv);color:var(--on-inv)}
@media (max-width: 1040px){.ai-demo{grid-template-columns:1fr}.ai-demo .ai-panel{order:0;border-right:0;border-top:1px solid var(--line-2)}.ai-demo .browser-view,.ai-demo .browser-view .mx{min-height:0}}
/* construction stage: a solid surface, the drawing carries it */
.cs-stage{border-radius:7px;border-color:var(--line-2);background:var(--solid);box-shadow:var(--shadow-2)}
.cs-phases li.on b{color:var(--fg)}
/* Styles: centre the fictional hero so the comparison line crosses real content */
.styles-demo .mx-hero{align-items:center;text-align:center;padding-top:28px}
.styles-demo .mx-title{max-width:none;font-size:clamp(1.6rem, 1rem + 2.4vw, 3rem)}
.styles-demo .mx-tag{align-self:center}
.styles-demo .mx-text{max-width:46ch}
.styles-demo .mx-cards{margin-top:auto}
@media (max-width: 600px){.hd-modes{align-self:stretch;justify-content:space-between}.hd-modes button{padding:0 9px;gap:6px}}
@media (max-width: 380px){.hd-modes button .ico{display:none}}

/* pages.css */
/* ============================================================ home hero */
.hero{position:relative;padding:clamp(44px, 5.5vw, 84px) 0 clamp(56px, 7vw, 96px)}
.hero-top{display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);gap:clamp(24px, 5vw, 80px);align-items:end;margin-bottom:clamp(36px, 4vw, 60px)}
.hero-title{font-size:clamp(3rem, 1.2rem + 5.6vw, 6.6rem);letter-spacing:-.05em;line-height:.94;max-width:9.5ch}
.hero-side{display:flex;flex-direction:column;gap:20px;padding-bottom:6px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:10px}
.hero-fine{font-size:var(--fs-sm);color:var(--fg-3)}
.hero-stage{position:relative;width:min(100% - var(--gutter) * 2, 1180px)}
.hero-falloff{position:absolute;inset:-18% 0 -10%;background:var(--hero-falloff);pointer-events:none;z-index:-1}
@media (max-width: 960px){.hero-top{grid-template-columns:1fr;align-items:start}.hero-title{max-width:none}}
.wrap-wide{width:min(100% - var(--gutter) * 2, 1320px)}
/* tools: an index of the four tools, not a row of cards */
.tools{border-block:1px solid var(--line)}
.tools-grid{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr))}
.tool{display:flex;flex-direction:column;gap:6px;padding:26px 24px 28px;text-decoration:none;border-left:1px solid var(--line);transition:background-color var(--t-med)}
.tool:first-child{border-left:0}
.tool:hover{background:var(--surface)}
.tool-n{font:600 .7rem var(--mono);color:var(--fg-4);letter-spacing:.08em}
.tool b{display:flex;align-items:center;gap:9px;font-size:1rem;letter-spacing:-.015em;margin-top:6px}
.tool b .ico{color:var(--fg);width:17px;height:17px}
.tool>span:last-child{color:var(--fg-2);font-size:var(--fs-sm);line-height:1.5}
@media (max-width: 960px){.tools-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}.tool:nth-child(3){border-left:0}.tool:nth-child(n+3){border-top:1px solid var(--line)}}
@media (max-width: 520px){.tools-grid{grid-template-columns:1fr}.tool{border-left:0;border-top:1px solid var(--line);padding:20px 4px}.tool:first-child{border-top:0}}
.construct-section{padding-block:0}

/* ============================================================ story */
.story{display:grid;grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr);gap:clamp(24px, 5vw, 72px)}
.story-visual{position:sticky;top:110px;height:min(62vh, 520px);border-radius:7px;border:1px solid var(--line-2);background:var(--solid);box-shadow:var(--shadow-2);overflow:hidden}
.story-pane{position:absolute;inset:0;display:grid;place-items:center;padding:8%;opacity:0;transform:translateY(14px) scale(.985);transition:opacity .6s var(--ease),transform .8s var(--ease-out)}
.story-pane.on{opacity:1;transform:none}
.story-steps{display:flex;flex-direction:column}
.story-step{min-height:62vh;display:flex;flex-direction:column;justify-content:center;gap:14px;padding:24px 0;color:var(--fg-4);transition:color .5s}
.story-step.on{color:var(--fg)}.story-step p{color:var(--fg-3);max-width:46ch;transition:color .5s}.story-step.on p{color:var(--fg-2)}
.story-n{font:600 .72rem var(--mono);letter-spacing:.1em}
.story-step.on .story-n{color:var(--fg)}
@media (max-width: 900px){.story{grid-template-columns:1fr}.story-visual{display:none}.story-step{min-height:auto;color:var(--fg)}.story-step p{color:var(--fg-2)}}
.sp-site{width:100%;max-width:380px;display:flex;flex-direction:column;gap:12px}
.sp-bar{display:block;height:10px;width:40%;border-radius:3px;background:var(--fg-4)}
.sp-sites{display:flex;flex-direction:column;gap:8px}
.sp-site-row{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:6px;border:1px solid var(--line-2);background:var(--solid);box-shadow:var(--shadow-1)}
.sp-site-row b{flex:1;font:500 .82rem var(--mono)}
.sp-sw{width:22px;height:22px;border-radius:4px}.sp-sw-0{background:#e9e9e5}.sp-sw-1{background:#a9c1e6}.sp-sw-2{background:#b7cbb5}
.sp-on{width:34px;height:20px;border-radius:7px;background:var(--inv);position:relative}.sp-on::after{content:"";position:absolute;right:2px;top:2px;width:16px;height:16px;border-radius:50%;background:var(--on-inv)}
.sp-tokens{width:100%;max-width:400px;display:grid;grid-template-columns:repeat(5, 1fr);gap:10px}
.sp-tok{display:flex;flex-direction:column;gap:8px;font:500 .64rem var(--mono);color:var(--fg-3)}
.sp-tok i{aspect-ratio:1;border-radius:5px;border:1px solid var(--line-2)}
.sp-tok-0 i{background:#0f1012}.sp-tok-1 i{background:#e9e9e5}.sp-tok-2 i{background:#a9c1e6}.sp-tok-3 i{background:#8f98a3}.sp-tok-4 i{background:#1b1c21}
.sp-type{grid-column:1 / -1;display:flex;align-items:baseline;gap:16px;margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}
.sp-type b{font-size:3.6rem;letter-spacing:-.04em;line-height:1}.sp-type span{font:500 .78rem var(--mono);color:var(--fg-3)}
.sp-assets{width:100%;max-width:380px;display:grid;grid-template-columns:repeat(3, 1fr);gap:10px}
.sp-a{aspect-ratio:1.2;border-radius:5px;border:1px solid var(--line-2);background:linear-gradient(135deg, var(--surface-3), var(--surface))}
.sp-a-1{background:repeating-linear-gradient(45deg, var(--surface-2) 0 8px, var(--surface) 8px 16px)}.sp-a-2{background:radial-gradient(circle at 50% 50%, var(--fg-4) 0 22%, transparent 23%), var(--surface)}
.sp-code{width:100%;max-width:420px;font-size:.8rem;max-height:none}
.sp-privacy{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.sp-shield{width:72px;height:72px;stroke-width:1;color:var(--fg)}
.sp-privacy b{font-size:1.4rem;letter-spacing:-.02em}.sp-privacy span{color:var(--fg-3);font:500 .8rem var(--mono)}

/* ============================================================ screenshots */
.shot{margin:0;display:flex;flex-direction:column;gap:14px}
.shot-frame{border-radius:6px;border:1px solid var(--line-2);overflow:hidden;background:var(--bg-3);box-shadow:var(--shadow-2)}
.shot-frame img{width:100%;height:auto}
.shot figcaption{font-size:var(--fs-sm);color:var(--fg-2);max-width:72ch;line-height:1.55}
.shot figcaption b{color:var(--fg);font-weight:600;margin-right:6px}
.shot-hero{margin-bottom:clamp(40px, 5vw, 64px)}
.crops{display:grid;grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr);grid-template-rows:auto auto;gap:24px 24px}
.crops .crop:first-child{grid-row:span 2}
.crop figcaption b{display:block;margin:0 0 2px}
/* CSS crops of real 1440×900 captures: the image keeps its proportions, only the window moves */
.crop-frame{position:relative}
.crop-frame img{position:absolute;max-width:none;height:auto}
.c-motion-panel{aspect-ratio:384 / 690}.c-motion-panel img{width:375%;left:-270.833%;top:-2.6%}
.c-motion-timeline{aspect-ratio:384 / 150}.c-motion-timeline img{width:375%;left:-270.833%;top:-466.667%}
.c-styles-looks{aspect-ratio:338 / 372}.c-styles-looks img{width:426.036%;left:-317.751%;top:-51.075%}
@media (max-width: 760px){.crops{grid-template-columns:1fr}.crops .crop:first-child{grid-row:auto}}

/* ============================================================ privacy, final CTA */
.pv-grid{display:grid;grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr);gap:clamp(24px, 5vw, 72px);align-items:start}
.pv-grid>div{display:flex;flex-direction:column;gap:18px}
.pv-facts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:0 32px}
.pv-facts li{display:flex;gap:14px;padding:20px 0;border-top:1px solid var(--line-2)}
.pv-facts li>.ico{margin-top:2px;color:var(--fg)}
.pv-facts b{display:block;margin-bottom:4px;font-weight:600}.pv-facts span{color:var(--fg-2);font-size:var(--fs-sm)}
@media (max-width: 900px){.pv-grid{grid-template-columns:1fr}.pv-facts{grid-template-columns:1fr}}
.final-cta{text-align:center}
.final-inner{display:flex;flex-direction:column;align-items:center;gap:20px}
.final-inner img{border-radius:6px}
.final-inner .hero-ctas{justify-content:center}

/* ============================================================ features page */
.feat-grid{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:14px}
@media (max-width: 960px){.feat-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}}
@media (max-width: 600px){.feat-grid{grid-template-columns:1fr}}
.feat-group+.feat-group{margin-top:56px}
.feat-group>h3{font:600 .74rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);margin-bottom:16px}
.anchor-nav{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.anchor-nav a{padding:6px 12px;border-radius:4px;border:1px solid var(--line-2);font-size:var(--fs-sm);text-decoration:none;color:var(--fg-2)}
.anchor-nav a:hover{color:var(--fg);border-color:var(--line-3)}
.ms-points{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:14px;margin-top:40px}
@media (max-width: 900px){.ms-points{grid-template-columns:1fr}}
.trig-list{display:grid;grid-template-columns:repeat(5, minmax(0, 1fr));gap:0 24px}
.trig-list li{list-style:none;padding:18px 0;border-top:1px solid var(--line-2)}
.trig-list b{display:block;margin-bottom:6px}.trig-list span{font-size:var(--fs-sm);color:var(--fg-2)}
.trig-list{margin:0;padding:0}
@media (max-width: 960px){.trig-list{grid-template-columns:repeat(2, minmax(0, 1fr))}}
@media (max-width: 520px){.trig-list{grid-template-columns:1fr}}

/* ============================================================ docs */
.docs{display:grid;grid-template-columns:240px minmax(0, 1fr);gap:clamp(24px, 5vw, 64px);align-items:start}
.docs-toc{position:sticky;top:96px;display:flex;flex-direction:column;gap:1px;padding-left:12px;border-left:1px solid var(--line)}
.docs-toc a{position:relative;padding:7px 10px;border-radius:4px;font-size:var(--fs-sm);color:var(--fg-2);text-decoration:none}
.docs-toc a:hover{background:var(--surface-2);color:var(--fg)}
.docs-toc a.on{color:var(--fg)}
.docs-toc a.on::before{content:"";position:absolute;left:-13px;top:6px;bottom:6px;width:1.5px;background:var(--fg)}
.docs .prose h2{scroll-margin-top:96px}
.docs .prose h2:first-child{margin-top:0}
.steps{counter-reset:s;list-style:none;padding:0!important}
.steps>li{counter-increment:s;position:relative;padding-left:44px;margin-top:14px}
.steps>li::before{content:counter(s);position:absolute;left:0;top:-1px;width:28px;height:28px;border-radius:4px;display:grid;place-items:center;border:1px solid var(--line-3);color:var(--fg);font:600 .76rem var(--mono)}
@media (max-width: 900px){.docs{grid-template-columns:1fr}.docs-toc{position:relative;top:0;flex-direction:row;flex-wrap:wrap}}

/* ============================================================ changelog */
.cl{display:flex;flex-direction:column;gap:18px;max-width:880px}
.cl{gap:0}
.cl-entry{display:grid;grid-template-columns:150px minmax(0, 1fr);gap:28px;padding:32px 0;border-top:1px solid var(--line)}
.cl-entry:first-child{border-top:0;padding-top:0}
.cl-entry header{display:flex;flex-direction:column;gap:8px}
.cl-v{font:650 1.15rem var(--mono);letter-spacing:-.02em}
.cl-entry h3{font-size:1.25rem;margin-bottom:10px}
.cl-entry ul{margin:0;padding-left:1.15em;color:var(--fg-2);display:flex;flex-direction:column;gap:6px;font-size:var(--fs-sm)}
@media (max-width: 680px){.cl-entry{grid-template-columns:1fr;gap:14px}}

/* ============================================================ support + feedback */
.support-grid{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:14px}
@media (max-width: 900px){.support-grid{grid-template-columns:1fr}}
.faq{max-width:860px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;display:flex;justify-content:space-between;gap:16px;padding:20px 0;cursor:pointer;font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 1.4rem/1 var(--font);color:var(--fg-3);transition:transform var(--t-med) var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:focus-visible{box-shadow:var(--focus)}
.faq details>div{padding:0 0 20px;color:var(--fg-2)}
.faq details>div p+p{margin-top:10px}
.fb{display:grid;grid-template-columns:minmax(0, 1.25fr) minmax(0, .75fr);gap:clamp(24px, 4vw, 48px);align-items:start}
@media (max-width: 960px){.fb{grid-template-columns:1fr}}
.fb-card{padding:clamp(20px, 3vw, 36px);background:var(--solid)}
.fb-tabs{margin-bottom:24px}
.fb-form{display:flex;flex-direction:column;gap:18px}
.fb-form[hidden]{display:none}
.fb-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width: 600px){.fb-row{grid-template-columns:1fr}}
.fb-form .form-note{padding:12px 14px;border-radius:5px;border:1px solid var(--line-2);background:var(--surface)}
.fb-form .form-note[data-state="ok"]{border-color:color-mix(in srgb, var(--ok) 50%, transparent);color:var(--ok)}
.fb-form .form-note[data-state="demo"]{border-color:color-mix(in srgb, var(--warn) 45%, transparent)}
.fb-form .form-note[data-state="bad"]{border-color:color-mix(in srgb, var(--bad) 50%, transparent);color:var(--bad)}
.fb-preview pre{max-height:240px}
.fb-side{display:flex;flex-direction:column;gap:14px}
.fb-side .card{padding:22px}
.fb-side h3{font-size:1.05rem;margin-bottom:8px}
.fb-side p,.fb-side li{font-size:var(--fs-sm);color:var(--fg-2)}
.fb-side ul{margin:10px 0 0;padding-left:1.1em;display:flex;flex-direction:column;gap:6px}
.legal-wrap{display:flex;flex-direction:column;gap:24px}
.not-found{min-height:60vh;display:grid;place-items:center;text-align:center}
.not-found .wrap{display:flex;flex-direction:column;align-items:center;gap:18px}

/* ============================================================ pricing, account, owner (0.2) */
.spacer{flex:1}
.pr-toggle{margin-bottom:24px}
.pr-grid{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:16px;align-items:stretch}
.pr-card{display:flex;flex-direction:column;gap:14px;padding:28px;border-radius:var(--r-lg);border:1px solid var(--line-2);background:var(--solid)}
.pr-card.pr-hi{border-color:var(--fg-3);box-shadow:0 0 0 1px var(--fg-3)}
.pr-card header{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pr-tag{color:var(--fg-2);font-size:var(--fs-sm);min-height:2.6em}
.pr-price{display:flex;align-items:baseline;gap:6px}
.pr-price b{font:620 2.4rem/1 var(--font-display);letter-spacing:-.03em}
.pr-price span{color:var(--fg-3);font-size:var(--fs-sm)}
.pr-list{list-style:none;margin:0;padding:16px 0 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:9px;font-size:var(--fs-sm);color:var(--fg-2)}
.pr-list li{display:flex;gap:9px;align-items:flex-start}
.pr-list .ico{width:15px;height:15px;color:var(--fg);margin-top:3px}
.pr-list b{color:var(--fg);font-weight:600}
.pr-cta{margin-top:auto;padding-top:8px}
.pr-cta .btn[disabled]{opacity:.55;cursor:not-allowed}
.pr-status{margin-top:18px}
.pr-table td,.pr-table th{text-align:left}
.pr-table td{width:16%;color:var(--fg-2)}
.pr-table tbody th{font-weight:500;color:var(--fg)}
.pc-yes .ico{width:16px;height:16px;color:var(--fg)}
.pc-no{color:var(--fg-4)}
.pr-notes{margin-top:18px;max-width:72ch;font-size:var(--fs-sm);color:var(--fg-3)}
@media (max-width: 1100px){.pr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width: 600px){.pr-grid{grid-template-columns:1fr}}
.acc{display:flex;flex-direction:column;gap:18px}
.acc-card{padding:clamp(20px, 3vw, 32px);display:flex;flex-direction:column;gap:14px}
.acc-card[hidden],.acc-grid[hidden]{display:none}
.acc-grid{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:16px}
.acc-plan{grid-column:1 / -1}
.acc-form{display:flex;flex-direction:column;gap:14px;max-width:460px}
.acc-dl{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:0;font-size:var(--fs-sm)}.acc-dl dt{color:var(--fg-3)}.acc-dl dd{margin:0}
.acc-sessions,.acc-history{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.acc-sessions li,.acc-history li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line);font-size:var(--fs-sm)}
.acc-del-btn{color:var(--bad);align-self:flex-start}
.acc-loading{color:var(--fg-3)}
.acc-result{max-width:640px}
.link-code{font:600 1.4rem/1 var(--mono)!important;letter-spacing:.12em;text-transform:uppercase}
@media (max-width: 760px){.acc-grid{grid-template-columns:1fr}}
.own{display:flex;flex-direction:column;gap:20px}
.own-head{display:flex;align-items:center;gap:12px}
.own-stats{display:grid;grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));gap:12px}
.own-stats div{padding:16px;border-radius:5px;border:1px solid var(--line-2);background:var(--solid);display:flex;flex-direction:column;gap:4px}
.own-stats b{font:620 1.6rem/1 var(--font-display)}.own-stats span{font-size:var(--fs-xs);color:var(--fg-3)}
.own-tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.own-tools select{min-height:38px;padding:6px 32px 6px 12px;border-radius:5px;border:1px solid var(--line-2);background:var(--solid);color:var(--fg)}
.own-q{max-width:240px;min-height:38px}
.own-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.own-item{padding:18px;border-radius:6px;border:1px solid var(--line-2);background:var(--solid);display:flex;flex-direction:column;gap:8px}
.own-item header{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.own-item p{font-size:var(--fs-sm);white-space:pre-wrap;overflow-wrap:anywhere}
.own-edit{display:grid;grid-template-columns:160px 180px 1fr auto auto;gap:8px;align-items:start}
.own-edit select,.own-edit .input{min-height:36px;padding:6px 10px;border-radius:4px;border:1px solid var(--line-2);background:var(--bg);color:var(--fg);font-size:var(--fs-sm)}
@media (max-width: 900px){.own-edit{grid-template-columns:1fr 1fr}}
/* Owner workspace: calm inbox, progressive disclosure, shared theme tokens. */
.own{max-width:1120px;gap:28px}.own-head{justify-content:space-between;align-items:center;gap:24px}.own-head h1{margin:10px 0}.own-head .muted{margin:0}.own [hidden]{display:none!important}
.own-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:28px}.own-stats div{padding:24px;border-radius:7px;gap:12px;background:var(--solid)}.own-stats b{font:600 clamp(1.8rem,3vw,2.5rem)/1 var(--font-display);letter-spacing:-.04em}.own-stats span{font-size:var(--fs-sm);color:var(--fg-2)}.own-stats small{color:var(--fg-3);font-size:var(--fs-xs)}
.own-workspace{border:1px solid var(--line-2);background:var(--solid);border-radius:7px;overflow:hidden}.own-tabs{display:flex;align-items:center;gap:8px;padding:18px 22px;border-bottom:1px solid var(--line)}.own-tabs [aria-pressed=true]{background:var(--fg);color:var(--bg);border-color:var(--fg)}.own-tools{padding:22px 22px 12px;gap:12px}.own-tools .seg{flex-shrink:0}.own-q{flex:1;max-width:none;min-width:180px}.own-tools select,.own-q{min-height:42px}.own-list-heading{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:12px 22px 20px;font-size:var(--fs-xs)}.own-list-heading p{margin:0}.own-list-heading h2{margin:0 0 8px}.own-list{gap:0}.own-item{display:block;padding:0;border:0;border-top:1px solid var(--line);border-radius:0;background:transparent}.own-summary{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px;cursor:pointer;list-style:none}.own-summary::-webkit-details-marker{display:none}.own-summary:after{content:'+';font-size:1.4rem;color:var(--fg-3)}.own-request-detail[open]>.own-summary:after{content:'−'}.own-summary:hover{background:var(--bg)}.own-summary:focus-visible{outline:2px solid var(--fg);outline-offset:-4px;border-radius:4px}.own-request{min-width:0;flex:1;display:flex;flex-direction:column;gap:8px}.own-kind{font-size:var(--fs-xs);color:var(--fg-3)}.own-request strong{font-weight:600;font-size:1rem;overflow-wrap:anywhere}.own-excerpt{font-size:var(--fs-sm);color:var(--fg-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.own-request-detail[open] .own-excerpt{display:none}.own-meta{display:flex;flex-direction:column;align-items:flex-end;gap:9px;flex-shrink:0;font-size:var(--fs-xs);color:var(--fg-3)}.own-badge{padding:5px 9px;border:1px solid var(--line-2);border-radius:3px;color:var(--fg-2);background:var(--bg)}
.own-body{padding:0 24px 24px;display:flex;flex-direction:column;gap:20px}.own-message{max-width:78ch;line-height:1.75;margin:0;white-space:pre-wrap;overflow-wrap:anywhere}.own-contact{display:flex;align-items:center;gap:14px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:20px;font-size:var(--fs-sm);overflow-wrap:anywhere}.own-edit{display:grid;grid-template-columns:1fr 1fr;gap:18px}.own-edit label{display:flex;flex-direction:column;gap:8px;color:var(--fg-2);font-size:var(--fs-sm)}.own-note{grid-column:1/-1}.own-edit select,.own-edit .input{width:100%;min-height:42px;font:inherit;padding:10px 12px}.own-edit textarea{resize:vertical;min-height:96px}.own-context,.own-health{font-size:var(--fs-sm);color:var(--fg-3)}.own-context summary,.own-health summary{cursor:pointer;padding:8px 0}.own-health{margin-top:20px}.own-context p{margin-top:10px}.own-empty{text-align:center;padding:54px 24px;list-style:none}.own-empty h3{margin-bottom:10px}.own-person{padding:20px 24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:var(--fs-sm);overflow-wrap:anywhere}.own-status{min-height:24px;margin:0}.own-list[aria-busy=true]{opacity:.55;pointer-events:none}
@media(max-width:720px){.own-head{align-items:flex-start}.own-stats{gap:8px}.own-stats div{padding:16px 12px;border-radius:5px}.own-stats small{display:none}.own-tabs{padding:14px;flex-wrap:wrap}.own-tabs .spacer{display:none}.own-tools{padding:16px}.own-tools .seg{width:100%;justify-content:space-between}.own-sel{flex:1}.own-sel select{width:100%}.own-q{width:100%;flex-basis:100%}.own-list-heading{padding:8px 16px 16px;align-items:flex-start}.own-list-heading>span{display:none}.own-summary{padding:18px 16px;gap:12px}.own-body{padding:0 16px 20px}.own-meta time{font-size:10px}.own-edit{grid-template-columns:1fr}.own-note{grid-column:auto}.own-body .btn-row{flex-wrap:wrap}.own-head h1{font-size:2rem}}
/* Pro Studio marketing preview: scoped to the illustration, using the site's appearance tokens. */

/* Pro Studio feature story */

/* pro.css */
/* Pro Studio page. Flat graphite, hairlines, sharp corners. Motion: one eased transition per state change; the only
   continuous movement is the timeline playhead, and only while the visitor plays it. */
.pro-page{overflow:clip}
.pro-hero{padding:clamp(72px,9vw,132px) 0 0}
.pro-hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(28px,6vw,96px);align-items:end}
.pro-title{font-size:clamp(3.6rem,8.4vw,8.6rem);line-height:.92;letter-spacing:-.06em;margin:22px 0 0;font-weight:620}
.pro-title em{font-style:normal;color:var(--fg-3)}
.pro-hero-aside .lead{max-width:40ch}
.pro-hero-aside .hero-ctas{margin-top:22px}
.pro-specs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:clamp(48px,7vw,104px) 0 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pro-specs div{padding:16px 18px 16px 0;border-right:1px solid var(--line)}
.pro-specs div:not(:first-child){padding-left:18px}
.pro-specs div:last-child{border-right:0}
.pro-specs dt{font:600 .66rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
.pro-specs dd{margin:8px 0 0;font-size:var(--fs-sm);font-weight:500;color:var(--fg)}
@media (max-width:1000px){.pro-hero-grid{grid-template-columns:1fr}.pro-specs{grid-template-columns:repeat(3,1fr)}.pro-specs div:nth-child(3){border-right:0}.pro-specs div:nth-child(n+4){border-top:1px solid var(--line)}.pro-specs div:nth-child(4){padding-left:0}}
@media (max-width:560px){.pro-title{font-size:clamp(3rem,13vw,5rem)}.pro-specs{grid-template-columns:1fr 1fr}.pro-specs div{border-right:0!important;padding-left:0!important}.pro-specs div:nth-child(n+3){border-top:1px solid var(--line)}}

/* stage */
.pro-stage-section{padding:clamp(64px,8vw,112px) 0}
.pro-stage-lead{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:24px}
.pro-stage-lead p{max-width:40ch;color:var(--fg-2);margin:0}
.pro-stage-frame{padding:clamp(6px,1vw,12px);border:1px solid var(--line-2);background:var(--solid)}
.pro-stage-frame .studio-showcase{box-shadow:none;border-color:var(--line)}
.pro-stage-foot{font-size:var(--fs-xs);color:var(--fg-3);margin:14px 0 0}
@media (max-width:650px){.pro-stage-lead{display:block}.pro-stage-lead p{margin-top:10px}}

/* chapters + instrument */
.pro-chapters{padding:clamp(40px,6vw,80px) 0 clamp(64px,8vw,120px);border-top:1px solid var(--line)}
.pro-chapters-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,80px);align-items:start}
.pro-chapter{padding:clamp(56px,8vw,120px) 0;border-bottom:1px solid var(--line);scroll-margin-top:120px}
.pro-chapter:last-child{border-bottom:0}
.pro-chapter-index{display:flex;align-items:baseline;gap:14px;font:500 .72rem/1 var(--mono);color:var(--fg-3);letter-spacing:.08em}
.pro-chapter-index b{font:600 .8rem/1 var(--font);letter-spacing:0;color:var(--fg)}
.pro-chapter h2{font-size:clamp(2.1rem,3.6vw,3.6rem);line-height:1.02;letter-spacing:-.045em;margin:20px 0 18px;max-width:14ch}
.pro-chapter p{color:var(--fg-2);line-height:1.7;max-width:48ch}
.pro-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:26px}
.pro-tags span{border:1px solid var(--line-2);padding:6px 10px;border-radius:var(--r-sm);font:500 .7rem/1 var(--mono);color:var(--fg-2)}
.pro-chapter.active .pro-chapter-index b{color:var(--fg)}
.pro-chapter.active .pro-tags span{border-color:var(--line-3);color:var(--fg)}
.pro-instrument-col{position:sticky;top:96px}
.pro-instrument{position:relative;border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--solid);overflow:hidden;font:500 11px/1.3 var(--mono);color:var(--fg-3);--pi-t:.42s;--pi-e:var(--ease-out)}
.pi-bar{display:flex;align-items:center;gap:14px;height:38px;padding:0 14px;border-bottom:1px solid var(--line)}
.pi-dots{display:inline-flex;gap:5px}.pi-dots i{width:8px;height:8px;border-radius:50%;background:var(--surface-3)}
.pi-title{flex:1;text-align:center;color:var(--fg-3)}
.pi-mode{padding:4px 8px;border-radius:var(--r-xs);background:var(--surface-2);border:1px solid var(--line);color:var(--fg);transition:background-color var(--pi-t)}
.pi-body{display:grid;grid-template-columns:164px minmax(0,1fr) 168px;min-height:330px}
.pi-layers,.pi-inspector{display:flex;flex-direction:column;gap:4px;padding:14px 12px;position:relative}
.pi-layers{border-right:1px solid var(--line)}
.pi-inspector{border-left:1px solid var(--line)}
.pi-label{display:block;font:600 .62rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-4);margin:0 0 8px}
.pi-layers button{all:unset;display:block;padding:7px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-radius:var(--r-xs);color:var(--fg-2);cursor:default;transition:background-color var(--t-fast),color var(--t-fast)}
.pi-layers button:not([data-pi-layer="page"]){padding-left:20px}
.pi-layers button:not([data-pi-layer="page"])::before{content:"↳ ";color:var(--fg-4)}
.pi-layers button.on,.pi-layers button:hover{background:var(--surface-2);color:var(--fg)}
.pi-layers button.on{box-shadow:inset 2px 0 0 var(--fg)}
.pi-projects{margin-top:auto;display:flex;flex-direction:column;gap:3px;opacity:0;transform:translateY(8px);transition:opacity var(--pi-t) var(--pi-e),transform var(--pi-t) var(--pi-e);pointer-events:none}
.pi-prj{display:flex;flex-direction:column;gap:3px;padding:8px;border-radius:var(--r-xs);border:1px solid transparent}
.pi-prj.on{border-color:var(--line-2);background:var(--surface)}
.pi-prj b{font:600 11px/1.2 var(--font);color:var(--fg)}
.pi-prj em{font-style:normal;color:var(--fg-4);font-size:10px}
.pi-canvas{position:relative;padding:22px;background:var(--bg-2);display:grid;place-items:center}
.pi-page{position:relative;width:100%;max-width:360px;aspect-ratio:4/3;padding:16px;border-radius:var(--r-sm);background:var(--solid);border:1px solid var(--line-2);display:grid;grid-template-rows:auto 1fr auto;gap:14px}
.pi-page>div{position:relative;border-radius:var(--r-xs);outline:1.5px solid transparent;outline-offset:3px;transition:outline-color var(--t-med) var(--ease),transform var(--pi-t) var(--pi-e),opacity var(--pi-t) var(--pi-e)}
.pi-page>div.hot{outline-color:var(--line-3)}
.pi-page>div.on{outline-color:var(--sel)}
.pi-nav{display:flex;gap:8px;height:16px;align-items:center}.pi-nav i{height:5px;border-radius:2px;background:var(--surface-3);width:28px}.pi-nav i:first-child{width:40px;background:var(--fg-3)}
.pi-card{padding:12px;border-radius:var(--r-sm);background:var(--surface-2);border:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.pi-thumb{display:block;height:54%;min-height:48px;border-radius:var(--r-xs);background:linear-gradient(135deg,var(--solid-3),var(--surface-3))}
.pi-card b{display:block;height:9px;width:62%;border-radius:2px;background:var(--fg-2)}
.pi-card span{display:block;height:6px;width:84%;border-radius:2px;background:var(--surface-3)}
.pi-text{display:flex;flex-direction:column;gap:6px}.pi-text i{height:5px;border-radius:2px;background:var(--surface-3)}.pi-text i:last-child{width:70%}
.pi-sel{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);padding:4px 8px;border-radius:var(--r-xs);background:var(--sel);color:#fff;font-size:10px;white-space:nowrap;transition:opacity var(--pi-t) var(--pi-e)}
.pi-props,.pi-motion,.pi-export{display:flex;flex-direction:column;gap:2px;transition:opacity var(--pi-t) var(--pi-e),transform var(--pi-t) var(--pi-e)}
.pi-props span,.pi-motion span{display:flex;justify-content:space-between;gap:10px;padding:7px 8px;border-radius:var(--r-xs);color:var(--fg-3)}
.pi-props span:nth-child(odd),.pi-motion span:nth-child(odd){background:var(--surface)}
.pi-props b,.pi-motion b{color:var(--fg);font-weight:500}
.pi-motion,.pi-export{position:absolute;left:12px;right:12px;top:40px;opacity:0;transform:translateY(8px);pointer-events:none}
.pi-file{display:flex;align-items:center;gap:8px;padding:8px;border:1px dashed var(--line-3);border-radius:var(--r-xs);color:var(--fg-2);font-size:10px;margin-top:4px}
.pi-file i{width:9px;height:11px;border-radius:2px;background:var(--fg-3)}
.pi-timeline{border-top:1px solid var(--line);padding:12px 14px 14px;transition:background-color var(--pi-t)}
.pi-tl-head{display:flex;align-items:center;gap:12px;margin-bottom:10px;color:var(--fg-2)}
.pi-tl-head b{color:var(--fg);font-weight:500;font-variant-numeric:tabular-nums;margin-left:auto}
.pi-play{all:unset;padding:4px 9px;border-radius:var(--r-xs);border:1px solid var(--line-2);background:var(--surface);color:var(--fg);cursor:pointer;font:500 10px/1.2 var(--mono);transition:background-color var(--t-fast),border-color var(--t-fast)}
.pi-play:hover{background:var(--surface-3);border-color:var(--line-3)}
.pi-lanes{position:relative;display:flex;flex-direction:column;gap:6px;padding-top:2px}
.pi-lane{display:grid;grid-template-columns:120px 1fr;align-items:center;gap:10px;color:var(--fg-3)}
.pi-lane i{position:relative;height:14px;border-radius:2px;background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),var(--line) calc(10% - 1px) 10%)}
.pi-lane:nth-child(1) i{--l:0%;--w:48%}.pi-lane:nth-child(2) i{--l:18%;--w:52%}.pi-lane:nth-child(3) i{--l:40%;--w:30%}
.pi-lane i::after{content:"";position:absolute;top:2px;bottom:2px;left:var(--l);width:var(--w);border-radius:2px;background:var(--fg-3);transition:background-color var(--pi-t)}
.pi-head{position:absolute;top:0;bottom:0;left:calc(130px + var(--p,0) * (100% - 130px));width:1px;background:var(--fg);opacity:.35;transition:opacity var(--pi-t)}
.pi-head::before{content:"";position:absolute;top:-2px;left:-3px;width:7px;height:7px;border-radius:1px;background:var(--fg);transform:rotate(45deg)}
/* states */
.pro-instrument[data-state="animate"] .pi-lane i::after{background:var(--fg)}
.pro-instrument[data-state="animate"] .pi-head{opacity:1}
.pro-instrument[data-state="animate"] .pi-timeline{background:var(--surface)}
.pro-instrument[data-state="animate"] .pi-props,.pro-instrument[data-state="projects"] .pi-props{opacity:0;transform:translateY(-8px);pointer-events:none}
.pro-instrument[data-state="animate"] .pi-motion{opacity:1;transform:none}
.pro-instrument[data-state="projects"] .pi-export{opacity:1;transform:none}
.pro-instrument[data-state="projects"] .pi-projects{opacity:1;transform:none}
.pro-instrument[data-state="projects"] .pi-layers>button{opacity:.35}
.pro-instrument[data-state="projects"] .pi-sel{opacity:0}
.pro-instrument[data-state="projects"] .pi-page>div{outline-color:transparent}
.pro-instrument.playing .pi-card{transform:none}
@media (max-width:1000px){.pro-chapters-grid{grid-template-columns:1fr}.pro-instrument-col{position:static;order:-1}.pro-chapter{padding:clamp(40px,6vw,64px) 0}.pro-chapter h2{max-width:none}}
@media (max-width:720px){.pi-body{grid-template-columns:120px 1fr}.pi-inspector{display:none}.pi-lane{grid-template-columns:90px 1fr}.pi-head{left:calc(100px + var(--p,0) * (100% - 100px))}}
@media (max-width:480px){.pi-body{grid-template-columns:1fr}.pi-layers{display:none}}

/* anatomy */
.pro-anatomy{padding:clamp(72px,9vw,120px) 0}
.pro-anatomy-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--solid)}
.pro-tile{padding:clamp(20px,2.4vw,30px);border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:10px;transition:background-color var(--t-med)}
.pro-tile:hover{background:var(--surface)}
.pro-tile:nth-child(3n){border-right:0}.pro-tile:nth-child(n+4){border-bottom:0}
.pro-tile-n{font:500 .7rem/1 var(--mono);color:var(--fg-4)}
.pro-tile h3{font-size:1.1rem;letter-spacing:-.015em}
.pro-tile p{color:var(--fg-2);font-size:var(--fs-sm);line-height:1.6}
@media (max-width:900px){.pro-anatomy-grid{grid-template-columns:1fr 1fr}.pro-tile:nth-child(3n){border-right:1px solid var(--line)}.pro-tile:nth-child(2n){border-right:0}.pro-tile:nth-child(n+4){border-bottom:1px solid var(--line)}.pro-tile:nth-child(n+5){border-bottom:0}}
@media (max-width:560px){.pro-anatomy-grid{grid-template-columns:1fr}.pro-tile{border-right:0!important;border-bottom:1px solid var(--line)!important}.pro-tile:last-child{border-bottom:0!important}}

/* modes */
.pro-modes{padding:clamp(72px,9vw,120px) 0}
.pro-modes-head{margin-bottom:clamp(32px,4vw,56px)}
.pro-mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px)}
.pro-mode-grid article{display:flex;flex-direction:column;gap:12px;padding:clamp(18px,2.4vw,28px);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--solid)}
.pro-mode-grid article>span{font:500 .7rem/1 var(--mono);color:var(--fg-3);letter-spacing:.06em}
.pro-mode-grid h3{font-size:clamp(1.3rem,1.8vw,1.7rem);letter-spacing:-.025em;max-width:18ch;line-height:1.15}
.pro-mode-grid p{color:var(--fg-2);line-height:1.65;max-width:50ch;font-size:var(--fs-sm)}
.pro-mode-art{position:relative;height:150px;border-radius:var(--r-sm);background:var(--bg-2);border:1px solid var(--line);overflow:hidden;margin-bottom:8px}
.pro-mode-art i{position:absolute;border-radius:3px;background:var(--surface-3);transition:transform var(--t-slow) var(--ease-out)}
.pro-mode-canvas .a{left:12px;top:12px;width:70px;bottom:12px;background:var(--surface-2);border:1px solid var(--line)}
.pro-mode-canvas .b{left:94px;right:94px;top:12px;bottom:40px;background:var(--solid);border:1px solid var(--line-3)}
.pro-mode-canvas .c{right:12px;top:12px;width:70px;bottom:12px;background:var(--surface-2);border:1px solid var(--line)}
.pro-mode-canvas .d{left:94px;right:94px;bottom:12px;height:20px;background:var(--surface-2);border:1px solid var(--line)}
.pro-mode-live .a{left:12px;top:12px;right:40%;bottom:12px;background:var(--solid);border:1px solid var(--line-3)}
.pro-mode-live .a::before{content:"";position:absolute;left:0;right:0;top:0;height:14px;border-bottom:1px solid var(--line);background:var(--surface)}
.pro-mode-live .b{right:12px;top:12px;width:calc(40% - 24px);bottom:12px;background:var(--surface-2);border:1px solid var(--line)}
.pro-mode-grid article:hover .pro-mode-canvas .b{transform:scale(1.03)}
.pro-mode-grid article:hover .pro-mode-live .b{transform:translateX(-4px)}
@media (max-width:760px){.pro-mode-grid{grid-template-columns:1fr}}

/* faq */
.pro-faq{padding:clamp(72px,9vw,120px) 0}
.pro-faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,80px);align-items:start}
.pro-faq-grid .lead{margin-top:14px}
.pro-faq-list{border-top:1px solid var(--line)}
.pro-q{border-bottom:1px solid var(--line)}
.pro-q summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 0;cursor:pointer;font-weight:600;font-size:1.02rem;letter-spacing:-.01em;list-style:none}
.pro-q summary::-webkit-details-marker{display:none}
.pro-q summary i{position:relative;flex:none;width:18px;height:18px;border:1px solid var(--line-3);border-radius:var(--r-xs);transition:transform var(--t-med) var(--ease)}
.pro-q summary i::before,.pro-q summary i::after{content:"";position:absolute;left:4px;right:4px;top:50%;height:1px;background:var(--fg);transition:transform var(--t-med) var(--ease)}
.pro-q summary i::after{transform:rotate(90deg)}
.pro-q[open] summary i::after{transform:rotate(0)}
.pro-q p{padding:0 0 22px;color:var(--fg-2);line-height:1.7;max-width:60ch}
@media (max-width:860px){.pro-faq-grid{grid-template-columns:1fr}}

/* close */
.pro-close{padding:clamp(80px,11vw,150px) 0}
.pro-close-inner{max-width:900px}
.pro-close h2{margin:18px 0 22px}
.pro-close p{max-width:56ch;line-height:1.7;color:var(--fg-2);margin-bottom:30px}
@media (prefers-reduced-motion:reduce){.pro-instrument *{transition:none!important}}

/* account.css */
/* Account area (website). Flat panels on hairlines, one status chip, generous spacing. Loaded after pages.css. */
.acc-section{padding-top:clamp(40px,5vw,64px)}
.acc{gap:16px}
.acc-loading{display:flex;align-items:center;gap:10px;color:var(--fg-3);font-size:var(--fs-sm);padding:12px 0}
.acc-spinner{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--line-3);border-top-color:var(--fg);animation:acc-spin .9s linear infinite}
@keyframes acc-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.acc-spinner{animation:none;border-top-color:var(--line-3)}}
.acc-signin-wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:16px;align-items:start}
.acc-signin-wrap[hidden]{display:none}
.acc-signin .h3{margin-top:4px}
.acc-why{padding:clamp(20px,3vw,32px);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.acc-why ul{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column}
.acc-why li{padding:12px 0;border-top:1px solid var(--line);font-size:var(--fs-sm);color:var(--fg-2);line-height:1.6}
.acc-why li b{color:var(--fg);font-weight:600}
.acc-card{gap:12px}
.acc-card .eyebrow{margin-bottom:2px}
.acc-plan{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(20px,3vw,40px);align-items:start}
.acc-plan-main,.acc-plan-side{display:flex;flex-direction:column;gap:12px;min-width:0}
.acc-plan-side{padding-left:clamp(20px,3vw,40px);border-left:1px solid var(--line);align-self:stretch;justify-content:center}
.acc-plan-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.acc-plan-name{font-size:clamp(2.2rem,3.5vw,3.4rem);letter-spacing:-.045em;line-height:1}
.acc-chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:var(--r-xs);border:1px solid var(--line-2);background:var(--surface);font:600 .68rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-2)}
.acc-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--fg-3)}
.acc-chip.ok{color:var(--ok)}.acc-chip.ok::before{background:var(--ok)}
.acc-chip.warn{color:var(--warn)}.acc-chip.warn::before{background:var(--warn)}
.acc-actions{gap:8px}
.acc-fine{font-size:var(--fs-xs);color:var(--fg-3);line-height:1.5}
.acc-card-foot{margin-top:auto}
.acc-dl{gap:10px 20px}
.acc-dl dt{color:var(--fg-3)}.acc-dl dd{margin:0;color:var(--fg)}
.acc-sessions li,.acc-history li{padding:12px 0}
.acc-sessions li:first-child,.acc-history li:first-child{border-top:0}
.acc-sessions li b{font-weight:600}
.acc-danger{grid-column:1 / -1}
.acc-danger .acc-delete{margin-top:6px;padding-top:16px;border-top:1px solid var(--line)}
.acc-del-btn{border-color:color-mix(in srgb,var(--bad) 35%,transparent)}
.acc-del-btn:hover{background:color-mix(in srgb,var(--bad) 10%,transparent);border-color:var(--bad)}
@media (max-width:900px){.acc-signin-wrap{grid-template-columns:1fr}.acc-plan{grid-template-columns:1fr}.acc-plan-side{padding-left:0;border-left:0;padding-top:16px;border-top:1px solid var(--line)}}
/* 0.11.4b: identity strip, includes, facts, device rows */
.acc-id{grid-column:1 / -1;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;padding:6px 0 14px}
.acc-avatar{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-md);background:var(--inv);color:var(--on-inv);font:600 1.1rem/1 var(--font-display)}
.acc-id-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.acc-id-text b{font-size:1.02rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acc-id [data-password-status]{grid-column:1 / -1}
.acc-includes{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 20px}
.acc-includes li{display:flex;align-items:center;gap:9px;font-size:var(--fs-sm);color:var(--fg-2);padding:6px 0;border-top:1px solid var(--line)}
.acc-includes li i{flex:none;width:14px;height:14px;border-radius:3px;border:1px solid var(--line-3);position:relative}
.acc-includes li i::after{content:"";position:absolute;left:4px;top:1px;width:3px;height:7px;border:solid var(--fg);border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.acc-includes li.acc-more{grid-column:1 / -1}.acc-includes li.acc-more a{font-weight:600;color:var(--fg)}
.acc-facts{display:grid;gap:0;margin:0 0 6px}
.acc-facts div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:var(--fs-sm)}
.acc-facts dt{color:var(--fg-3)}.acc-facts dd{margin:0;font-weight:500;text-align:right}
.acc-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.acc-sessions li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px}
.acc-dev-ico{width:30px;height:30px;border-radius:var(--r-sm);border:1px solid var(--line-2);background:var(--surface);position:relative}
.acc-dev-ico::before{content:"";position:absolute;left:7px;right:7px;top:8px;height:10px;border:1.5px solid var(--fg-2);border-radius:2px}
.acc-dev-ico::after{content:"";position:absolute;left:11px;right:11px;bottom:7px;height:1.5px;background:var(--fg-2)}
.acc-dev-ico.ext::before{top:7px;height:13px;border-radius:3px}.acc-dev-ico.ext::after{left:13px;right:13px;bottom:10px;height:3px;background:var(--fg)}
.acc-dev{display:flex;flex-direction:column;gap:2px;min-width:0}
.acc-dev span{font-size:var(--fs-xs)}
.acc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.acc-list li{padding:10px 0;border-top:1px solid var(--line);font-size:var(--fs-sm);color:var(--fg-2);line-height:1.6}
.acc-list li:first-child{border-top:0}.acc-list li b{color:var(--fg)}
@media (max-width:760px){.acc-id{grid-template-columns:auto minmax(0,1fr)}.acc-id .btn-row{grid-column:1 / -1}.acc-includes{grid-template-columns:1fr}}

.pr-trial{margin:0 0 18px;padding:12px 16px;border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--surface);font-size:var(--fs-sm);color:var(--fg)}
.pr-trial[hidden]{display:none}

/* studio.css */
/* Pro Studio showcase (.st). A miniature workspace: flat graphite chrome, hairlines, the fictional "Meridian" page on
   the canvas. All motion is either user-driven (controls, timeline) or the single idle choreography that runs once
   when the showcase enters view and stops at the first interaction. Reduced motion: no choreography, instant states. */
.st{--st-accent:#ededed;--st-r:5px;--st-gap:24px;--st-cols:3;--st-align:start;--st-size:30px;--st-track:-.03em;--st-font:var(--font-display);
  position:relative;display:flex;flex-direction:column;border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--solid);color:var(--fg);font:500 12px/1.4 var(--font);overflow:hidden;text-align:left;width:100%;container-type:inline-size}
[data-theme="light"] .st{--st-accent:#111}
.st *{box-sizing:border-box}
.st button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.st .st-label{display:block;font:600 .62rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-4)}
.st-faint{color:var(--fg-3)}
/* bar */
.st-bar{display:flex;align-items:center;gap:14px;height:44px;padding:0 14px;border-bottom:1px solid var(--line)}
.st-dots{display:inline-flex;gap:5px}.st-dots i{width:8px;height:8px;border-radius:50%;background:var(--surface-3)}
.st-brand{font-weight:600;color:var(--fg-2)}.st-brand b{color:var(--fg);font-weight:600;margin-left:6px}
.st-modes,.st-devices{display:inline-flex;padding:2px;gap:2px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg-2)}
.st-modes{margin-left:auto}
.st-modes button,.st-devices button{height:26px;padding:0 11px;border-radius:var(--r-sm);color:var(--fg-2);transition:background-color var(--t-fast),color var(--t-fast)}
.st-modes button:hover,.st-devices button:hover{color:var(--fg)}
.st-modes button[aria-selected="true"],.st-devices button[aria-pressed="true"]{background:var(--solid-3);color:var(--fg);box-shadow:0 0 0 1px var(--line-2)}
.st-live{display:inline-flex;align-items:center;gap:6px;font:600 .62rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3)}
.st-live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok)}
.st.auto .st-live::before{animation:st-blink 1.4s steps(2) infinite}
@keyframes st-blink{50%{opacity:.3}}
/* body */
.st-body{display:grid;grid-template-columns:200px minmax(0,1fr) 236px;min-height:520px}
.st-layers,.st-inspector{display:flex;flex-direction:column;gap:4px;padding:14px 10px;min-width:0}
.st-layers{border-right:1px solid var(--line)}
.st-inspector{border-left:1px solid var(--line);gap:14px;padding:12px 12px 14px}
.st-layer{display:grid;grid-template-columns:12px minmax(0,1fr);gap:2px 8px;align-items:center;width:100%;padding:6px 8px;border-radius:var(--r-xs);text-align:left;color:var(--fg-2);transition:background-color var(--t-fast),color var(--t-fast)}
.st-layer[data-depth="1"]{padding-left:18px}.st-layer[data-depth="2"]{padding-left:30px}
.st-layer i{width:8px;height:8px;border-radius:2px;border:1px solid var(--line-3)}
.st-layer[data-depth="0"] i{background:var(--fg-3);border-color:transparent}
.st-layer span{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-layer code{grid-column:2;font:400 10px/1 var(--mono);color:var(--fg-4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-layer:hover{background:var(--surface);color:var(--fg)}
.st-layer[aria-pressed="true"]{background:var(--surface-2);color:var(--fg);box-shadow:inset 2px 0 0 var(--fg)}
.st-layer[aria-pressed="true"] i{background:var(--sel);border-color:transparent}
.st-layers-foot{margin-top:auto;padding:12px 8px 2px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:5px}
.st-layers-foot b{font-weight:600}
/* canvas */
.st-canvas-wrap{display:flex;flex-direction:column;min-width:0;background:var(--bg-2)}
.st-canvas{position:relative;flex:1;display:grid;place-items:start center;padding:46px 24px 24px;overflow:hidden;min-height:360px}
.st-url{position:absolute;left:0;right:0;top:0;height:30px;display:flex;align-items:center;justify-content:center;gap:8px;font:500 10.5px/1 var(--mono);color:var(--fg-3);border-bottom:1px solid var(--line)}
.st-url i{width:9px;height:11px;border:1px solid var(--line-3);border-radius:2px 2px 3px 3px}
.st-page{position:relative;width:100%;max-width:760px;padding:22px 26px 26px;border-radius:var(--r-sm);background:var(--solid);border:1px solid var(--line-2);display:flex;flex-direction:column;gap:22px;font-family:var(--st-font);
  transition:max-width var(--t-slow) var(--ease-out),padding var(--t-slow) var(--ease-out)}
.st[data-device="tablet"] .st-page{max-width:520px}
.st[data-device="phone"] .st-page{max-width:300px;padding:16px 16px 18px}
.st-page [data-target]{outline:1px solid transparent;outline-offset:4px;transition:outline-color var(--t-fast)}
.st-page .st-nav,.st-page .st-hero,.st-page .st-cards,.st-page .st-headline,.st-page .st-actions{border-radius:var(--r-xs)}
.st-nav{display:flex;align-items:center;gap:16px;height:26px;font-size:11px;color:var(--fg-3)}
.st-nav b{color:var(--fg);font-size:13px;margin-right:6px}.st-nav em{margin-left:auto;font-style:normal;padding:5px 9px;border:1px solid var(--line-2);border-radius:var(--st-r);color:var(--fg)}
.st[data-device="phone"] .st-nav span{display:none}
.st-hero{display:flex;flex-direction:column;align-items:var(--st-align);text-align:var(--st-align,start);gap:10px;padding:6px 0 2px}
.st-hero[style],.st-hero{text-align:left}.st[data-align="center"] .st-hero{align-items:center;text-align:center}
.st-pill{display:inline-block;padding:4px 8px;border-radius:var(--st-r);border:1px solid var(--line-2);font-size:10px;color:var(--fg-2);background:var(--surface)}
.st-headline{margin:4px 0 0;font-size:var(--st-size);line-height:1.05;letter-spacing:var(--st-track);font-weight:620;color:var(--fg);transition:font-size var(--t-med) var(--ease),letter-spacing var(--t-med) var(--ease)}
.st[data-font="serif"] .st-page{--st-font:Georgia,"Times New Roman",serif}.st[data-font="mono"] .st-page{--st-font:var(--mono)}
.st-hero p{margin:0;font-size:12px;color:var(--fg-2);max-width:34ch;font-family:var(--font)}
.st-actions{display:flex;gap:8px;margin-top:4px;font-family:var(--font)}
.st-btn-a,.st-btn-b{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:var(--st-r);font-size:11px;font-weight:600;transition:border-radius var(--t-med) var(--ease),background-color var(--t-med)}
.st-btn-a{background:var(--st-accent);color:var(--on-inv)}
.st[data-accent="azure"] .st-btn-a,.st[data-accent="sage"] .st-btn-a,.st[data-accent="ember"] .st-btn-a{color:#0a0a0a}
.st-btn-b{border:1px solid var(--line-2);color:var(--fg)}
.st-cards{display:grid;grid-template-columns:repeat(var(--st-cols),minmax(0,1fr));gap:calc(var(--st-gap) * .5);transition:gap var(--t-med) var(--ease)}
.st[data-device="phone"] .st-cards{grid-template-columns:1fr}
.st[data-device="tablet"] .st-cards{grid-template-columns:repeat(min(var(--st-cols),2),minmax(0,1fr))}
.st-card{display:flex;flex-direction:column;gap:6px;padding:calc(var(--st-gap) * .5);border-radius:var(--st-r);background:var(--surface-2);border:1px solid var(--line);font-family:var(--font);
  transition:border-radius var(--t-med) var(--ease),padding var(--t-med) var(--ease),box-shadow var(--t-med) var(--ease),background-color var(--t-med),border-color var(--t-med)}
.st-thumb{display:block;height:58px;border-radius:calc(var(--st-r) * .7);background:linear-gradient(135deg,var(--solid-3),var(--surface-3));transition:border-radius var(--t-med) var(--ease)}
.st-card b{font-size:11px;font-weight:600}.st-card span{font-size:10px;color:var(--fg-3)}
.st[data-shadow="on"] .st-card{box-shadow:0 10px 26px rgba(0,0,0,.28);background:var(--solid-2)}
[data-theme="light"] .st[data-shadow="on"] .st-card{box-shadow:0 10px 26px rgba(0,0,0,.1)}
.st[data-surface="glass"] .st-card{background:color-mix(in srgb,var(--solid) 60%,transparent);backdrop-filter:blur(10px);border-color:var(--line-2)}
.st[data-surface="outline"] .st-card{background:transparent;border-color:var(--line-3)}
.st[data-accent="azure"] .st-page{--st-accent:#5b8cff}.st[data-accent="sage"] .st-page{--st-accent:#8fd3ab}.st[data-accent="ember"] .st-page{--st-accent:#ff9a6b}
.st[data-accent]:not([data-accent="graphite"]) .st-card:nth-child(2) .st-thumb{background:linear-gradient(135deg,color-mix(in srgb,var(--st-accent) 55%,var(--solid)),var(--surface-3))}
.st-page .hot{outline-color:var(--line-3)}
/* selection overlay */
.st-sel{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;border:1.5px solid var(--sel);border-radius:3px;box-shadow:0 0 0 3px color-mix(in srgb,var(--sel) 18%,transparent);opacity:0;transition:left var(--t-med) var(--ease-out),top var(--t-med) var(--ease-out),width var(--t-med) var(--ease-out),height var(--t-med) var(--ease-out),opacity var(--t-fast)}
.st-sel.on{opacity:1}
.st-sel span{position:absolute;left:-1.5px;bottom:calc(100% + 6px);padding:3px 7px;border-radius:3px;background:var(--sel);color:#fff;font:500 10px/1.4 var(--mono);white-space:nowrap}
.st-sel i{position:absolute;width:7px;height:7px;background:var(--solid);border:1.5px solid var(--sel);border-radius:1px}
.st-sel .h1{left:-4.5px;top:-4.5px}.st-sel .h2{right:-4.5px;top:-4.5px}.st-sel .h3{left:-4.5px;bottom:-4.5px}.st-sel .h4{right:-4.5px;bottom:-4.5px}
.st-hover{position:absolute;pointer-events:none;border:1px dashed color-mix(in srgb,var(--sel) 70%,transparent);background:color-mix(in srgb,var(--sel) 8%,transparent);border-radius:3px;opacity:0;transition:all var(--t-fast) var(--ease)}
.st-hover.on{opacity:1}
.st-cursor{position:absolute;left:0;top:0;width:18px;height:18px;pointer-events:none;opacity:0;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5));transition:opacity var(--t-med)}
.st-cursor svg{width:100%;height:100%;fill:#fff;stroke:#111;stroke-width:1.2}
.st.auto .st-cursor{opacity:1}
.st-cursor.down svg{transform:scale(.85);transform-origin:20% 20%}
/* projects overlay */
.st-projects{position:absolute;inset:30px 0 0;padding:22px 26px;background:var(--bg-2);display:flex;flex-direction:column;gap:14px;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity var(--t-med) var(--ease),transform var(--t-med) var(--ease-out)}
.st[data-mode="projects"] .st-projects{opacity:1;transform:none;pointer-events:auto}
.st[data-mode="projects"] .st-sel,.st[data-mode="projects"] .st-hover{opacity:0}
.st-prj-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.st-prj-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.st-prj{display:flex;flex-direction:column;gap:6px;padding:14px;border-radius:var(--r-sm);background:var(--solid);border:1px solid var(--line-2);transition:border-color var(--t-fast),transform var(--t-med) var(--ease-out)}
.st-prj:hover{border-color:var(--line-3)}
.st-prj-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.st-prj b{font-size:12.5px;font-weight:600}.st-prj em{font:500 10px/1 var(--mono);font-style:normal;color:var(--fg-3);letter-spacing:.06em;text-transform:uppercase}.st-prj>span{font-size:11px;color:var(--fg-2)}
.st-tog{width:26px;height:15px;border-radius:15px;background:var(--surface-3);position:relative;flex:none}
.st-tog::after{content:"";position:absolute;left:2px;top:2px;width:11px;height:11px;border-radius:50%;background:var(--fg-3);transition:transform var(--t-med) var(--ease-out),background-color var(--t-med)}
.st-tog.on{background:var(--fg)}.st-tog.on::after{transform:translateX(11px);background:var(--bg)}
.st-prj-revs{display:flex;flex-direction:column;margin-top:6px;border-top:1px solid var(--line)}
.st-prj-revs:empty{display:none}
.st-prj-revs i{font:400 10.5px/1.3 var(--mono);font-style:normal;color:var(--fg-3);padding:5px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between}
.st-prj-revs i:last-child{border-bottom:0}
.st-prj-revs i.new{color:var(--fg);animation:st-rev-in .5s var(--ease-out) both}
@keyframes st-rev-in{from{opacity:0;transform:translateY(-4px)}}
.st-prj-revs i::after{content:"restore";color:var(--fg-4);font-size:9px;letter-spacing:.08em;text-transform:uppercase}
/* timeline */
.st-timeline{border-top:1px solid var(--line);padding:10px 14px 12px;background:var(--solid);transition:background-color var(--t-med)}
.st[data-mode="animate"] .st-timeline{background:var(--bg-2)}
.st-tl-head{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.st-play{display:grid;place-items:center;width:28px;height:28px;border-radius:var(--r-sm);background:var(--fg);color:var(--bg)}
.st-play svg{width:14px;height:14px;fill:currentColor}.st-play .pa{display:none}.st.playing .st-play .pl{display:none}.st.playing .st-play .pa{display:block}
.st-time{font:500 11px/1 var(--mono);font-variant-numeric:tabular-nums;color:var(--fg)}
.st-tl-name{color:var(--fg-3);font-size:11px}
.st-mini{margin-left:auto;height:26px;padding:0 10px;border-radius:var(--r-sm);border:1px solid var(--line-2);background:var(--surface);color:var(--fg);font-size:11px;font-weight:500;transition:background-color var(--t-fast),border-color var(--t-fast)}
.st-mini:hover{background:var(--surface-3);border-color:var(--line-3)}
.st-lanes{position:relative;display:grid;grid-template-columns:1fr;gap:4px;padding-top:16px}
.st-ruler{position:absolute;left:96px;right:0;top:0;padding-left:12px;display:flex;justify-content:space-between;font:400 9px/1 var(--mono);color:var(--fg-4)}
.st-lane{display:grid;grid-template-columns:86px 1fr;gap:10px;align-items:center;font-size:10.5px;color:var(--fg-3)}
.st-lane span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-lane-track{position:relative;height:16px;border-radius:2px;background:repeating-linear-gradient(90deg,transparent 0 calc(25% - 1px),var(--line) calc(25% - 1px) 25%)}
.st-clip{position:absolute;top:2px;bottom:2px;left:var(--l);width:var(--w);border-radius:2px;background:var(--surface-3);border:1px solid var(--line-2);transition:background-color var(--t-med),border-color var(--t-med)}
.st-clip b{position:absolute;top:50%;width:6px;height:6px;margin-top:-3px;background:var(--fg-2);transform:rotate(45deg);border-radius:1px}
.st-clip b:first-child{left:-3px}.st-clip b:last-child{right:-3px}
.st-lane[data-lane="headline"] .st-clip{--l:0%;--w:30%}.st-lane[data-lane="actions"] .st-clip{--l:14%;--w:30%}.st-lane[data-lane="card-1"] .st-clip{--l:30%;--w:30%}.st-lane[data-lane="card-2"] .st-clip{--l:38%;--w:30%}.st-lane[data-lane="card-3"] .st-clip{--l:46%;--w:30%}
.st-lane.on .st-clip{background:var(--fg);border-color:var(--fg)}.st-lane.on .st-clip b{background:var(--bg)}
.st-lane.on span{color:var(--fg)}
.st-head{position:absolute;top:0;bottom:0;left:calc(96px + var(--p,0) * (100% - 96px));width:1px;background:var(--fg);pointer-events:none}
.st-head::before{content:"";position:absolute;top:0;left:-4px;width:9px;height:9px;background:var(--fg);clip-path:polygon(0 0,100% 0,50% 100%)}
.st-scrub{position:absolute;left:96px;right:0;top:0;bottom:0;width:calc(100% - 96px);height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none}
.st-scrub:focus-visible{opacity:.15;outline:none}
/* inspector */
.st-insp-tabs{display:flex;gap:2px;padding:2px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg-2)}
.st-insp-tabs button{flex:1;height:26px;border-radius:var(--r-sm);color:var(--fg-2);font-size:11px;transition:background-color var(--t-fast),color var(--t-fast)}
.st-insp-tabs button[aria-selected="true"]{background:var(--solid-3);color:var(--fg);box-shadow:0 0 0 1px var(--line-2)}
.st-insp-sel{display:flex;flex-direction:column;gap:4px;padding:10px;border-radius:var(--r-sm);background:var(--surface);border:1px solid var(--line)}
.st-insp-sel b{font-weight:600;font-size:12.5px}.st-insp-sel code{font:400 10px/1 var(--mono);color:var(--fg-3)}
.st-panel{display:flex;flex-direction:column;gap:12px}
.st-ctl{display:grid;grid-template-columns:62px 1fr auto;align-items:center;gap:10px;color:var(--fg-2);font-size:11px}
.st-ctl>b{font:500 10.5px/1 var(--mono);color:var(--fg);min-width:44px;text-align:right}
.st-ctl input[type="range"]{-webkit-appearance:none;appearance:none;width:100%;height:18px;margin:0;background:transparent;cursor:pointer}
.st-ctl input[type="range"]::-webkit-slider-runnable-track{height:3px;border-radius:3px;background:var(--line-3)}
.st-ctl input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:12px;height:12px;margin-top:-4.5px;border-radius:50%;background:var(--fg);border:2px solid var(--solid);box-shadow:0 0 0 1px var(--line-3)}
.st-ctl input[type="range"]::-moz-range-track{height:3px;border-radius:3px;background:var(--line-3)}
.st-ctl input[type="range"]::-moz-range-thumb{width:10px;height:10px;border-radius:50%;background:var(--fg);border:2px solid var(--solid)}
.st-swatches{display:flex;gap:6px}
.st-swatches button{width:18px;height:18px;border-radius:4px;border:1px solid var(--line-3);transition:box-shadow var(--t-fast)}
.st-swatches button[data-studio-accent="graphite"]{background:#ededed}.st-swatches button[data-studio-accent="azure"]{background:#5b8cff}.st-swatches button[data-studio-accent="sage"]{background:#8fd3ab}.st-swatches button[data-studio-accent="ember"]{background:#ff9a6b}
[data-theme="light"] .st-swatches button[data-studio-accent="graphite"]{background:#111}
.st-swatches button[aria-checked="true"]{box-shadow:0 0 0 2px var(--solid),0 0 0 3.5px var(--fg)}
.st-switch{position:relative;width:30px;height:17px;border-radius:17px;background:var(--surface-3);transition:background-color var(--t-med)}
.st-switch::after{content:"";position:absolute;left:2px;top:2px;width:13px;height:13px;border-radius:50%;background:var(--fg-3);transition:transform var(--t-med) var(--ease-out),background-color var(--t-med)}
.st-switch[aria-checked="true"]{background:var(--fg)}.st-switch[aria-checked="true"]::after{transform:translateX(13px);background:var(--bg)}
.st-seg{display:inline-flex;padding:2px;gap:2px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg-2);grid-column:2 / -1;justify-self:start}
.st-seg button{height:22px;padding:0 9px;border-radius:3px;color:var(--fg-2);font-size:10.5px}
.st-seg button[aria-checked="true"]{background:var(--solid-3);color:var(--fg);box-shadow:0 0 0 1px var(--line-2)}
.st-motion{display:flex;flex-direction:column;gap:6px;padding:10px;border-radius:var(--r-sm);background:var(--surface);border:1px solid var(--line)}
.st-kv{display:flex;justify-content:space-between;gap:10px;font-size:11px;color:var(--fg-3);padding:4px 0;border-top:1px solid var(--line)}
.st-kv:first-of-type{border-top:0}.st-kv b{color:var(--fg);font-weight:500}
.st-computed{display:flex;flex-direction:column;gap:0;padding:0 2px}
.st-computed .st-kv{font-size:10.5px}
.st-css{margin-top:auto;display:flex;flex-direction:column;gap:6px}
.st-css pre{margin:0;padding:10px;border-radius:var(--r-sm);background:var(--bg-2);border:1px solid var(--line);font:400 10.5px/1.5 var(--mono);color:var(--fg-2);white-space:pre;overflow:auto;max-height:120px}
.st-caption{margin:0;padding:10px 14px;border-top:1px solid var(--line);font-size:11px;color:var(--fg-3);line-height:1.5}
.st-toast{position:absolute;left:50%;bottom:58px;transform:translate(-50%,6px);padding:8px 12px;border-radius:var(--r-sm);background:var(--inv);color:var(--on-inv);font-size:11px;font-weight:500;box-shadow:var(--shadow-2);opacity:0;transition:opacity var(--t-med),transform var(--t-med) var(--ease-out);pointer-events:none}
.st-toast.on{opacity:1;transform:translate(-50%,0)}
.st-toast[hidden]{display:block}
/* responsive */
@container (max-width: 900px){.st-body{grid-template-columns:150px minmax(0,1fr)}.st-inspector{grid-column:1 / -1;border-left:0;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:12px 20px}.st-insp-tabs{grid-column:1 / -1}.st-css{grid-column:1 / -1}.st-layer code{display:none}.st-devices{display:none}}
@container (max-width: 560px){.st-tl-name{display:none}.st-body{grid-template-columns:1fr}.st-layers{display:none}.st-inspector{grid-template-columns:1fr}.st-bar{flex-wrap:wrap;height:auto;padding:8px 10px;gap:8px}.st-modes{margin-left:0}.st-live{display:none}.st-prj-grid{grid-template-columns:1fr}.st-lane{grid-template-columns:60px 1fr}.st-ruler{left:70px}.st-head{left:calc(70px + var(--p,0) * (100% - 70px))}.st-scrub{left:70px;width:calc(100% - 70px)}}
@media (prefers-reduced-motion:reduce){.st *,.st *::before,.st *::after{transition-duration:0ms!important;animation:none!important}}
.studio-workflow{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.studio-first{padding-top:0}