/* v2 article page. Page type is Little Plains (JJannon, Sohne from the
   system). Everything drawn inside a figure that stands for Sonata uses
   Sonata's own faces and values from its kit. No warm grounds on the page:
   white, neutral gray and hairlines only. */

@font-face{font-family:'Jjannon Display';src:url('assets/fonts/JJannon-Display-Light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Jjannon Display';src:url('assets/fonts/JJannon-Display-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Jjannon Display';src:url('assets/fonts/JJannon-Display-Light-Italic.woff2') format('woff2');font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:'Jjannon Display';src:url('assets/fonts/JJannon-Display-Extrabold.woff') format('woff');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'EB Garamond';src:url('assets/fonts/eb-garamond-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'EB Garamond';src:url('assets/fonts/eb-garamond-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'EB Garamond';src:url('assets/fonts/eb-garamond-medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Funnel Sans';src:url('assets/fonts/funnel-sans-light.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Funnel Sans';src:url('assets/fonts/funnel-sans-regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Funnel Sans';src:url('assets/fonts/funnel-sans-medium.woff2') format('woff2');font-weight:500;font-display:swap}
/* Sohne Buch, the LP sans cut the site's brand-system diagram and the clip ship. */
@font-face{font-family:'Sohne';src:url('assets/fonts/soehne-buch.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('assets/fonts/jetbrains-mono-regular.woff2') format('woff2');font-weight:400;font-display:swap}

:root{
  --ink:#002142;
  --lp-blue:#0398FA;
  --lp-ease:cubic-bezier(.67,0,.67,1);
  --ink-2:rgba(0,33,66,.62);
  --ink-3:rgba(0,33,66,.38);
  --line:#e5e5e5;
  /* The figure UI kit shadow, from the clip. */
  --shadow:0 24px 60px rgba(0,33,66,.06),0 2px 6px rgba(0,33,66,.03);
  --line-2:#efefef;
  --soft:#f6f6f6;
  --ground:#fff;
  --accent:#0398fa;
  --serif:'Jjannon Display',Georgia,serif;
  --ui:'Sohne','Söhne',-apple-system,'Helvetica Neue','Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --ease-lift:cubic-bezier(.16,1,.3,1);
  --ease-fade:cubic-bezier(.5,0,.5,1);
  --sn-black:#2B2B2B;
  --sn-display:'EB Garamond',Georgia,serif;
  --sn-sans:'Funnel Sans',-apple-system,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
/* Lenis sets the scroll each frame, so a native smooth scroll would drag behind it. */
html.lenis{scroll-behavior:auto}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--serif);font-weight:300;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
/* LP selection: lp-website-vibe globals.css ::selection */
::selection{background:var(--lp-blue);color:#fff}
a{color:inherit}
button{font:inherit;color:inherit}
main{padding:0 16px}
/* The text column: the capability page's --case-study-text-width, 8 of 12
   columns on the site's 1180px grid. It is fluid, so it is 714.67px at full
   width. Values from lp-website-vibe design-tokens.css and globals.css. */
:root{--grid-frame:1180px;--grid-gutter:clamp(16px,4vw,48px);--grid-gap:24px;
  --grid-usable:calc(min(var(--grid-frame),100vw) - 2 * var(--grid-gutter));
  --grid-col:calc((var(--grid-usable) - 11 * var(--grid-gap)) / 12);
  --text-width:min(calc(8 * var(--grid-col) + 7 * var(--grid-gap)),calc(100vw - 48px))}
@media (max-width:800px){:root{--text-width:calc(100vw - 32px)}}
@media (max-width:640px){:root{--grid-gutter:24px;--grid-gap:16px}}


/* ---------------------------------------------------------------- hero */
.hero{padding:40px 0 0}
/* LP logo: the site nav logo, lp-website-vibe InsetSiteChrome + .site-brand-logo */
.lp-logo{display:block;width:clamp(115px,9.3vw,153px);margin:0 auto}
.lp-logo img{display:block;width:100%;height:auto}
@media (max-width:800px){.lp-logo{width:clamp(103px,25vw,153px)}}
/* Title: the capability page hero title, 54px Light, heading size under 800px */
.hero-text{max-width:var(--text-width);margin:clamp(72px,12vh,120px) auto 0}
.hero h1{font-weight:300;font-size:54px;line-height:1.25;margin:0;text-wrap:balance;text-align:center}
@media (max-width:800px){.hero h1{font-size:30px}}
@media (max-width:640px){.hero h1{font-size:28px}}
.hero-fig{margin-top:clamp(48px,8vh,80px);margin-bottom:0}

/* the picture: the green in Sonata's color guideline, and a screen the guideline never drew.
   The screen is the kit's own components, in preview/index.html?c=Settings. */
/* A window onto the guideline page, 12px around the mint row: x 267 to 791, y 2256 to 2464.
   The card shadow fills 8px under the row, so a 12px inset reads even on all four sides.
   It sits concentric with the swatch cards: they round 24px on top and 12px below, so the
   window rounds 36px and 24px at the page's size, scaled with it. */
/* The guesses land one by one. Then the answer lands and the guesses step back. */
/* Each screen renders at 440 x 530, scales to its column, and crops under Save. */
/* After the answer lands, the green goes looking. Mint 500 lights in the guideline, then each
   guess lifts in turn with a ring on where it put the green, and the answer's bullet pings. */
/* The answer's bullet sends out soft rings, two at a time, half a beat apart. They run
   while hidden and fade in with the step, so the ping never starts or stops on a cut. */
@keyframes pic-ping{0%{transform:scale(1);opacity:.85}100%{transform:scale(4.4);opacity:0}}

/* ---------------------------------------------------------------- draft slots */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fig{position:relative}
.draft-chip{position:absolute;top:-28px;right:2px;font-family:var(--ui);font-size:10.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);border:1px dashed #cfcfcf;border-radius:999px;padding:2px 9px}
.draft{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;border:1px dashed #cfcfcf;border-radius:16px;background:var(--soft);font-family:var(--ui);font-size:14px;color:var(--ink-2)}
.draft-wide{aspect-ratio:16/8}
.draft-tag{font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);border:1px solid #cfcfcf;border-radius:999px;padding:3px 10px;background:#fff}

/* ---------------------------------------------------------------- prose */
/* Body: the capability page's .home-workspace-case-block in lp-website-vibe */
.prose{max-width:var(--text-width);margin:0 auto;font-synthesis:none}
.prose p{font-size:21.6px;font-weight:400;line-height:1.65;margin:0 0 32px;text-wrap:pretty}
@media (max-width:800px){.prose p{font-size:18px}}
.prose strong{font-weight:600}
.prose a{text-decoration:underline;text-decoration-color:currentColor;text-underline-offset:.15em;text-decoration-thickness:from-font;transition:text-decoration-color 180ms var(--lp-ease)}
@media (hover:hover) and (pointer:fine){.prose a:hover:not(:focus-visible){text-decoration-color:transparent}}
.prose code{font-family:ui-monospace,Menlo,monospace;font-size:.78em;background:var(--soft);border-radius:4px;padding:.1em .35em}
.prose h2{font-weight:400;font-size:32px;line-height:1.25;margin:clamp(88px,12vh,128px) 0 28px;scroll-margin-top:40px}
.hero + .prose{margin-top:clamp(48px,8vh,88px)}
.contact a{font-size:28px;text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px;transition:border-color .4s}
.contact a:hover{border-color:var(--ink);transition-duration:.2s}
.prose:last-of-type{padding-bottom:160px}
/* the closing figure: the kit in use, a phone-shaped clip that ends the page */
.prose:has(+ .fig-end){padding-bottom:0}
.fig.fig-end{max-width:560px;margin-bottom:160px}
.haven-clip{display:block;width:100%;height:auto;aspect-ratio:1140/1504}
/* the clip carries a 10% white margin, so the caption stays inside the card's width */
.fig-end .caption{max-width:80%}

/* ---------------------------------------------------------------- figures */
.fig{margin:clamp(56px,9vh,96px) auto;max-width:1040px}
.fig.wide{max-width:1040px}
.caption{font-family:var(--ui);font-size:13.5px;line-height:1.55;color:var(--ink-2);max-width:var(--text-width);margin:16px auto 0;text-align:center;text-wrap:balance}
.fit{position:relative;width:100%}
.fit > *{transform-origin:0 0}

/* ---------------------------------------------------------------- fig 1: the system (Figma 41:2) */
.sys{position:relative;width:964px;height:543px;background:#fff;border:1px solid #e5e5e5;border-radius:16px;overflow:hidden;font-family:var(--sn-sans);color:#2b2b2b}
.sys-flow{position:absolute;inset:0;width:964px;height:543px;overflow:visible;pointer-events:none}
.sys-ing,.sys-app{position:absolute;background:#fff;border:1px solid #e5e5e5;border-radius:8px;padding:9px 14px;display:flex;align-items:center;transition:border-color .6s var(--ease-fade)}
.sys-ing p,.sys-app p{margin:0;font-size:16.39px;line-height:1.2;white-space:nowrap}
.sys-ing{left:97px;width:121px}
.sys-ing.hit,.sys-app.hit{border-color:var(--hit,var(--accent));transition-duration:.15s}
.sys-core{position:absolute;left:369.66px;top:180.11px;width:222.684px;height:152.836px}
.sys-folder{position:absolute;left:-.5px;top:-.5px;width:223.684px;height:153.836px}
.sys-core-content{position:absolute;left:0;top:16px;width:222.684px;height:136.836px;display:flex;gap:18px;align-items:center;justify-content:center}
.sys-core-content img{width:28.7px;height:38.56px;display:block}
.sys-core-name{font-size:21.21px;letter-spacing:-.5302px;white-space:nowrap}
.sys-core-name p{margin:0;line-height:1.1}
.sys-app{left:746px;width:121px}
/* phones: the diagram runs top to bottom. v2.js places the boxes and the hub. */
.sys.tall .sys-ing,.sys.tall .sys-app{width:auto;height:25px;padding:0 8px;border-radius:6px}
.sys.tall .sys-ing p,.sys.tall .sys-app p{font-size:11px}
.sys.tall .sys-core{transform:scale(.4828);transform-origin:0 0}

/* ---------------------------------------------------------------- fig 2: the kit, as its files */
.kit{display:grid;grid-template-columns:208px 1fr;border-radius:16px;overflow:hidden;height:640px;background:#fff;box-shadow:var(--shadow)}
.kit-tree,.kit-view,.k-code-pane{scrollbar-width:none}
.kit-tree::-webkit-scrollbar,.kit-view::-webkit-scrollbar,.k-code-pane::-webkit-scrollbar{display:none}
.kit-tree{background:#fafafa;border-right:1px solid var(--line);overflow:auto;padding:14px 8px 24px;font-family:var(--ui);font-size:13px;line-height:1.3}
.t-group{margin:0 0 14px}
.t-head{display:block;padding:6px 10px 4px;font-size:10.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.kit-tree .t-file{display:block;width:100%;text-align:left;border:0;background:transparent;padding:4px 10px;border-radius:6px;cursor:pointer;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--mono);font-size:12px}
.kit-tree .t-file:hover{background:#f0f0f0;color:var(--ink)}
.kit-tree .t-file[aria-current="true"]{background:#ececec;color:var(--ink)}
.kit-desk{display:flex;flex-direction:column;min-width:0;min-height:0}
.kit-tab{display:flex;align-items:baseline;gap:12px;flex:none;height:40px;padding:0 18px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:12px;line-height:40px;color:var(--ink)}
.kit-path{color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kit-view{flex:1;min-height:0;overflow:auto;transition:opacity .2s var(--ease-fade)}
.kit-view.swap{opacity:0}
.kit-view.split{display:grid;grid-template-columns:1fr 1fr;overflow:hidden}
.k-live{position:relative;border-right:1px solid var(--line);background:#fff}
.k-live iframe{display:block;width:100%;height:100%;border:0}
.k-live-tag{position:absolute;left:14px;top:12px;z-index:1;font-family:var(--ui);font-size:10.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.kit-view.split .k-code-pane{overflow:auto}
.k-src{padding:14px 0 18px;font-family:var(--mono);font-size:12px;line-height:20px;color:#2b2b2b;background:#fff}
.k-l{display:grid;grid-template-columns:44px 1fr}
.k-n{text-align:right;padding-right:14px;color:#b5b5b5;user-select:none}
.k-x{white-space:pre-wrap;overflow-wrap:anywhere;padding-right:18px}
.k-x i{font-style:normal}
.k-h{color:#0a3069;font-weight:600}
.k-q{color:#6e5a2c}
.k-t{color:#555}
.k-m,.k-v{color:#8250df}
.k-code{color:#0a3069}
.k-c{color:#8a8a8a}
.k-k{color:#cf222e}
.k-s{color:#0a3069}
.k-j{color:#116329}
.k-x b{font-weight:600}
.k-more{margin:0;padding:0 18px 22px 58px;font-family:var(--ui);font-size:12px;color:#999}

/* ---------------------------------------------------------------- site capture */
.browser{border-radius:16px;overflow:hidden;background:#fff;box-shadow:var(--shadow)}
.browser-bar{display:flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-bottom:1px solid var(--line-2);background:#fafafa}
.browser-bar i{width:9px;height:9px;border-radius:50%;background:#e2e2e2}
.browser-bar span{margin-left:12px;font-family:var(--ui);font-size:12px;color:var(--ink-3)}
.browser img{display:block;width:100%;height:auto}

/* ---------------------------------------------------------------- fig 3: GitHub history */
.gh{--gh-fg:var(--ink);--gh-muted:var(--ink-2);--gh-border:var(--line);--gh-soft:#fafafa;box-shadow:var(--shadow);font-family:var(--ui);color:var(--gh-fg);font-size:14px;line-height:1.5;border:1px solid var(--line);border-radius:16px;background:#fff;padding:24px 28px 28px}
.gh svg{width:16px;height:16px;fill:currentColor;flex:none}
.gh-repo{display:flex;align-items:center;gap:8px;font-size:16px;color:var(--gh-muted)}
.gh-repo span:nth-child(2){color:#0969da}
.gh-repo b{color:#0969da;font-weight:600}
.gh-slash{color:var(--gh-muted)}
.gh-private{font-size:12px;font-weight:500;border:1px solid var(--gh-border);border-radius:999px;padding:0 7px;line-height:18px;color:var(--gh-muted);margin-left:4px}
.gh-title-row{display:flex;align-items:center;justify-content:space-between;margin:18px 0 16px;padding-bottom:12px;border-bottom:1px solid var(--gh-border)}
.gh-title-row h3{font-size:24px;font-weight:400;margin:0}
.gh-branch{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;border:1px solid var(--gh-border);border-radius:6px;padding:4px 12px;background:var(--gh-soft)}
.gh-group{margin:0 0 18px}
.gh-date{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--gh-muted);margin:0 0 8px}
.gh-date svg{color:var(--gh-muted)}
.gh-box{border:1px solid var(--gh-border);border-radius:6px;overflow:hidden}
.gh-commit{border-top:1px solid var(--gh-border)}
.gh-commit:first-child{border-top:0}
.gh-row{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;width:100%;text-align:left;border:0;background:#fff;padding:10px 16px;cursor:pointer;transition:background .2s}
.gh-row:hover{background:var(--gh-soft)}
.gh-commit.found .gh-row{background:#f1f6fb}
.gh-msg{font-weight:600;font-size:15px;color:var(--gh-fg);display:inline-block}
.gh-by{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12px;color:var(--gh-muted);margin-top:4px}
.gh-by b{color:var(--gh-fg);font-weight:600}
.gh-av{width:18px;height:18px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font:500 7.5px/1 'Funnel Sans',sans-serif;letter-spacing:.03em;color:#fff;flex:none}
.gh-av svg{display:block;margin:0 auto}
.gh-av.bot{background:#fff;border:1px solid var(--gh-border);color:var(--gh-muted)}
.gh-file{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:var(--gh-muted)}
.gh-week{display:none}
.gh-wk{display:none}
.gh-diff{border-top:1px solid var(--gh-border);background:#fff}
.gh-diff[hidden]{display:none}
.gh-diff-head{display:flex;align-items:center;gap:10px;padding:8px 16px;background:var(--gh-soft);border-bottom:1px solid var(--gh-border);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}
.gh-diff-head em{font-style:normal;color:#1a7f37;font-weight:600}
.gh-line{display:grid;grid-template-columns:48px 20px 1fr;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;line-height:22px;background:#dafbe1}
.gh-line .n{text-align:right;padding-right:10px;color:#59636e;background:#ccffd8}
.gh-line .s{text-align:center;color:#1a7f37}
.gh-line .t{white-space:pre-wrap;padding-right:16px}
.chat{margin:28px auto 0;max-width:640px;border-radius:16px;background:#fff;box-shadow:var(--shadow);font-family:var(--ui);font-size:14px;line-height:1.5;color:var(--ink);overflow:hidden}
.chat-head{display:flex;align-items:center;gap:8px;padding:11px 16px;border-bottom:1px solid var(--line);font-weight:600;font-size:13px}
.chat-dot{width:8px;height:8px;border-radius:50%;background:#1FBF8C}
.chat-sub{margin-left:auto;font-weight:400;font-size:12px;color:#8a8a8a}
.chat-log{padding:16px;display:flex;flex-direction:column;justify-content:flex-end;gap:12px;height:360px;overflow:hidden;transition:opacity .5s var(--ease-fade)}
.chat-log.clear{opacity:0}
.msg{max-width:88%;opacity:0;transform:translateY(4px);animation:msg .4s var(--ease-lift) forwards}
@keyframes msg{to{opacity:1;transform:none}}
.msg p{margin:0}
.msg .who{display:block;font-size:11px;color:#8a8a8a;margin-bottom:3px}
.msg.bot{align-self:flex-start}
.msg.bot p{background:#f3f3f3;border-radius:14px 14px 14px 4px;padding:9px 13px}
.msg.me{align-self:flex-end}
.msg.me p{background:#1f1f1f;color:#fff;border-radius:14px 14px 4px 14px;padding:9px 13px}
.msg .tool{display:block;font-size:12px;color:#8a8a8a;margin:0 0 6px}
.msg .tool::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:#1FBF8C;margin-right:7px;vertical-align:1px}
.msg code{font-family:ui-monospace,Menlo,monospace;font-size:12px;background:#fff;border:1px solid #e5e5e5;border-radius:4px;padding:0 4px}
.typing{display:inline-flex;gap:4px;background:#f3f3f3;border-radius:14px;padding:12px 14px}
.typing i{width:5px;height:5px;border-radius:50%;background:#aaa;animation:blink 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes blink{0%,100%{opacity:.3}50%{opacity:1}}
.chat-input{display:flex;align-items:center;gap:8px;padding:10px 12px 10px 16px;border-top:1px solid var(--line)}
.chat-q{flex:1;min-height:21px;font-size:14px}
.chat-q:empty::before{content:attr(data-ph);color:#9a9a9a}
.chat-send{width:30px;height:30px;border-radius:50%;background:#1f1f1f;display:grid;place-items:center;flex:none}
.chat-send svg{width:15px;height:15px;fill:none;stroke:#fff;stroke-width:2}

/* ---------------------------------------------------------------- fig 4: Claude and Codex, as apps */
.agents{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.app{position:relative;border-radius:16px;overflow:hidden;height:660px;display:flex;flex-direction:column;box-shadow:var(--shadow);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;font-size:12.5px;line-height:1.45;color:#1f1f1f}
.on-phone{display:none}
.app-name{position:absolute;bottom:-26px;left:2px;font-family:var(--ui);font-size:12px;color:var(--ink-3)}
.app{overflow:visible}
.app > .app-bar,.app > .app-cols{overflow:hidden}
.app-bar{display:flex;align-items:center;gap:10px;height:38px;padding:0 12px;flex:none;border-radius:16px 16px 0 0}
.aw-dots{display:flex;gap:6px}
.aw-dots i{width:10px;height:10px;border-radius:50%;background:#ff5f57}
.aw-dots i:nth-child(2){background:#febc2e}.aw-dots i:nth-child(3){background:#28c840}
.ico{color:#999;font-size:12px}
.ico.side{width:13px;height:10px;border:1.3px solid #aaa;border-radius:2px;position:relative}
.ico.side::after{content:'';position:absolute;left:3px;top:0;bottom:0;border-left:1.3px solid #aaa}
.app-mode{margin-left:auto;display:flex;gap:2px;background:#ececec;border-radius:7px;padding:2px}
.app-mode i{width:22px;height:16px;border-radius:5px}
.app-mode i.on{background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.1)}
.app-cols{flex:1;display:grid;grid-template-columns:142px 1fr;min-height:0;border-radius:0 0 16px 16px}
.app-side{display:flex;flex-direction:column;gap:1px;padding:4px 8px;font-size:12px;overflow:hidden}
.side-item{padding:5px 8px;border-radius:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-item.b{font-weight:500}
.side-item.cur{background:rgba(0,0,0,.06)}
.side-item.mute{color:#8a8a8a}
.side-item.sub{padding-left:18px}
.side-h{padding:14px 8px 4px;font-size:11px;color:#8a8a8a}
.side-brand{padding:4px 8px 10px;font-size:14px;font-weight:600;white-space:nowrap}
.side-brand em{font-style:normal;color:#7b61ff}
.app-main{display:flex;flex-direction:column;min-width:0;background:#fff}
.thread{flex:1;min-height:0;padding:18px 18px 8px;display:flex;flex-direction:column;gap:10px;overflow:hidden}
.t-step{opacity:0;transform:translateY(4px);transition:opacity .4s var(--ease-fade),transform .5s var(--ease-lift)}
.t-step.on{opacity:1;transform:none}
.t-user{align-self:flex-end;max-width:86%;border-radius:14px;padding:8px 12px}
.t-meta{font-size:11.5px;color:#8a8a8a}
.t-meta b{font-weight:500;color:#555}
.t-files{display:flex;flex-wrap:wrap;gap:4px}
.t-files span{font-family:ui-monospace,Menlo,monospace;font-size:10.5px;border:1px solid #e6e6e6;border-radius:5px;padding:1px 6px;color:#555;background:#fafafa}
.t-say{max-width:95%}
.t-change{display:flex;align-items:center;gap:8px;border:1px solid #e6e6e6;border-radius:9px;padding:7px 10px;font-size:12px}
.t-change em{font-style:normal;color:#1a7f37}
.t-change span:last-child{margin-left:auto;color:#8a8a8a}
.composer{padding:0 14px 14px;flex:none}
.c-box{border:1px solid #e3e3e3;border-radius:14px;padding:9px 12px 8px;color:#9a9a9a;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.c-row{display:flex;align-items:center;gap:10px;margin-top:8px;font-size:11.5px;color:#777}
.c-model{margin-left:auto;display:inline-flex;align-items:center;gap:4px}
.chev{width:8px;height:5px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;flex:none}
.side-brand .chev{margin-left:2px;vertical-align:middle;position:relative;top:-1px}
.c-send{width:22px;height:22px;border-radius:50%;background:#d9d9d9}
.c-chips{display:flex;gap:6px;margin-bottom:6px}
.c-chips span{font-size:11px;border:1px solid #e3e3e3;border-radius:7px;padding:2px 8px;color:#555;background:#fff}
.c-proj{font-size:11.5px;color:#777;background:#f6f6f6;border:1px solid #ececec;border-bottom:0;border-radius:12px 12px 0 0;padding:6px 12px;margin:0 6px}
/* Claude desktop: warm neutral chrome */
.claude-app .app-bar,.claude-app .app-side{background:#f5f4ef}
.claude-app .app-main{background:#faf9f5}
.claude-app .t-user{background:#efece3}
.claude-app .c-send{background:#d97757}
/* Codex in ChatGPT: cool neutral chrome */
.codex-app .app-bar,.codex-app .app-side{background:#f3f3f5}
.codex-app .t-user{background:#f1f1f3}
.codex-app .c-send{background:#9a9a9a}

.mini-site{position:relative;height:210px;flex:none;border-radius:8px;overflow:hidden;background:#FDFBF2;box-shadow:0 0 0 1px rgba(0,0,0,.06);font-family:var(--sn-sans);color:#2b2b2b}
.ms-eyebrow{position:relative;font-family:var(--mono);font-size:8px;letter-spacing:.05em;text-transform:uppercase;opacity:.7}
.ms-head{position:relative;margin:0;font-family:var(--sn-display);font-weight:400;font-size:24px;line-height:1.02;letter-spacing:-.02em}
.ms-sub{position:relative;margin:0;font-size:9.5px;line-height:1.35;max-width:26ch;opacity:.8}
.ms-btn{position:relative;display:inline-grid;place-items:center;height:26px;padding:0 14px;border-radius:999px;background:linear-gradient(to bottom,#171717,#2F2F2F);color:#fff;font-size:10px;box-shadow:inset 0 -2px 6px rgba(255,255,255,.25)}
.ms-btn.out{background:none;box-shadow:none;border:.5px solid #595959;color:#2b2b2b}
/* Claude: a copy band on the field state, copy pinned left */
.ms-band{padding:22px 20px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:9px}
.ms-band .ms-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.6);transform-origin:70% 40%}
.ms-band .ms-head{max-width:11ch}
/* Codex: white ground, the flower as an object in its own column */
.ms-split{display:grid;grid-template-columns:1.1fr .9fr;background:#fff}
.ms-col{padding:18px 16px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:9px}
.ms-split .ms-head{font-size:22px;max-width:10ch}
.ms-card{display:grid;gap:2px;border-radius:10px;padding:8px 10px;width:100%;box-shadow:2px 2px 30px rgba(0,0,0,.06),0 0 0 .5px #EDEDED;font-size:9.5px}
.ms-card b{font-family:var(--sn-display);font-weight:400;font-size:13px}
.ms-card span{color:#8a8a8a;font-size:8.5px}
.ms-img{position:relative;overflow:hidden;background:#FDFBF2}
.ms-img img{position:absolute;left:50%;bottom:-6%;height:118%;transform:translateX(-50%)}

/* ---------------------------------------------------------------- draft: the zip */
.finder{border-radius:16px;overflow:hidden;background:#fff;box-shadow:var(--shadow);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;font-size:12.5px;color:#1f1f1f}
.finder-bar{display:flex;align-items:center;gap:12px;height:38px;padding:0 12px;background:#fafafa;border-bottom:1px solid var(--line)}
.finder-title{font-weight:600;font-size:12.5px}
.finder-body{display:grid;grid-template-columns:200px 1fr;min-height:340px}
.zip-icon{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border-right:1px solid #eee;padding:24px;text-align:center}
.zip-icon svg{width:64px;height:80px}
.zip-icon b{font-weight:500;font-size:12.5px}
.zip-icon span{font-size:11px;color:#8a8a8a}
.finder-list{list-style:none;margin:0;padding:10px 0}
.finder-list li{display:flex;align-items:center;gap:8px;padding:5px 16px;opacity:0;transition:opacity .35s var(--ease-fade)}
.finder-list li.on{opacity:1}
.finder-list li:nth-child(even){background:#f7f7f9}
.finder-list li::before{content:'';width:13px;height:11px;border-radius:2px;background:#7fb2f0;flex:none}
.finder-list li.file::before{width:10px;height:13px;background:#fff;border:1px solid #c8c8c8;border-radius:1px}
.finder-list li .sub{margin-left:auto;color:#8a8a8a;font-size:11.5px}
.finder-list li.d1{padding-left:36px}

/* ---------------------------------------------------------------- draft: one decision, every reader */
.follow{border-radius:16px;background:#fff;box-shadow:var(--shadow);padding:26px}
/* The source: a window onto the kit's art-direction.md. The rule arrives as an added line. */
.follow{position:relative}
.f-source{position:relative;z-index:1;max-width:640px;margin:0 auto 44px;border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden}
.f-src-bar{height:36px;display:flex;align-items:center;padding:0 14px;border-bottom:1px solid var(--line);font:400 12px/1 var(--mono);color:var(--ink-2)}
.f-src-body{padding:10px 0 12px;font:400 12px/20px var(--mono);color:var(--ink-2)}
.f-src-line{margin:0;padding:0 14px 0 30px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* The added line opens from nothing, types in, and wraps so the whole rule shows. */
.f-src-add{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease-lift)}
.f-src-add > div{min-height:0;overflow:hidden}
.f-src-add .f-src-line{position:relative;white-space:normal;padding-top:2px;padding-bottom:2px;background:#e6f6ee;color:var(--ink)}
.f-src-add .f-src-line::before{content:"+";position:absolute;left:14px;color:#1a7f5a}
.follow.adding .f-src-add{grid-template-rows:1fr}
.f-caret{display:inline-block;width:1.5px;height:14px;margin-left:1px;vertical-align:-2px;background:var(--ink);opacity:0}
.follow.f-typing .f-caret{opacity:1;animation:f-blink 1s steps(1) infinite}
@keyframes f-blink{50%{opacity:0}}
/* The clip's diagram: 1px lines from the file to each reader, and a mint pulse that runs down them. */
.f-wires{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.f-wires .f-line{fill:none;stroke:var(--line);stroke-width:1}
.f-wires .f-pulse{fill:none;stroke:#1FBF8C;stroke-width:2.2;stroke-linecap:round}
/* The reader's outline beats in mint as the pulse lands. */
.f-flower > .f-beat{position:absolute;inset:0;z-index:2;border-radius:inherit;box-shadow:inset 0 0 0 2px #1FBF8C;opacity:0;pointer-events:none}
.f-cursor{position:absolute;left:0;top:0;z-index:3;width:24px;height:24px;pointer-events:none;opacity:0}
.f-cursor svg{display:block;filter:drop-shadow(0 1px 1.5px rgba(0,20,40,.28))}
.f-readers{display:grid;grid-template-columns:1.3fr 1.2fr .8fr;gap:18px;align-items:end}
.f-tag{display:block;font-family:var(--ui);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
.f-tag{transition:color .5s var(--ease-fade)}
.f-reader.post .f-tag{color:var(--ink)}
.f-head{margin:0;font-family:var(--sn-display);font-weight:400;letter-spacing:-.02em;color:#2b2b2b;line-height:1.02}
/* Before the decision, copy sits on a full flower. After it, each reader resolves the
   flower to the state the rule asks for: field behind copy, blurred on a slide. */
.f-flower{position:relative;overflow:hidden;background:#FDFBF2}
.f-flower > img.f-full,.f-flower > img.f-soft{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 30%;pointer-events:none}
/* A soft edge sweeps across each reader, left to right, from the pre flower to the post one.
   Halfway through, the reader is half each. The rewind sweeps it back. */
.f-flower > img.f-soft{-webkit-mask-image:linear-gradient(90deg,#000 40%,transparent 60%);mask-image:linear-gradient(90deg,#000 40%,transparent 60%);-webkit-mask-size:250% 100%;mask-size:250% 100%;-webkit-mask-position:100% 0;mask-position:100% 0;transition:-webkit-mask-position 1.4s var(--ease-fade),mask-position 1.4s var(--ease-fade)}
.f-reader.post .f-flower > img.f-soft{-webkit-mask-position:0 0;mask-position:0 0}
.f-flower > :not(img),.f-flower > img.f-logo{position:relative}
.f-flower > .f-page{position:absolute}
.f-eye{position:relative;font-family:var(--mono);font-size:8px;letter-spacing:.05em;text-transform:uppercase;color:#2b2b2b;opacity:.7}
.f-btn{position:relative;display:inline-grid;place-items:center;height:26px;padding:0 14px;border-radius:999px;background:linear-gradient(to bottom,#171717,#2F2F2F);color:#fff;font-family:var(--sn-sans);font-size:10px}
.f-btn.wide{width:100%}
.f-site{height:240px;border-radius:8px;padding:24px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.f-copy{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.f-site .f-head{position:relative;font-size:32px;max-width:11ch}
.f-deck{aspect-ratio:16/10;border-radius:8px;box-shadow:0 0 0 1px rgba(0,0,0,.08);padding:18px;display:flex;flex-direction:column;justify-content:space-between}
.f-logo{height:9px;width:auto;align-self:flex-start}
.f-deck .f-head{font-size:24px;max-width:10ch}
.f-page{position:absolute;right:14px;bottom:10px;font-family:var(--mono);font-size:8px;opacity:.5}
/* The product reader is as wide as its phone, centered in its column, so its tag sits on the
   phone's left edge. The phone's outer ring is a 7px shadow, so the tag steps out 7px to meet it. */
.f-reader:has(.f-phone){justify-self:center}
.f-reader:has(.f-phone) .f-tag{margin-left:-7px}
.f-phone{width:170px;margin:0 auto;border-radius:24px;box-shadow:0 0 0 1px rgba(0,0,0,.1),0 0 0 6px #fff,0 0 0 7px rgba(0,0,0,.08);padding:24px 14px 14px;display:grid;gap:10px}
.f-phone .f-head{font-size:22px}
.f-card{background:rgba(255,255,255,.8);border-radius:10px;padding:10px;box-shadow:2px 2px 30px rgba(0,0,0,.06),0 0 0 .5px #EDEDED;font-family:var(--sn-sans);font-size:11px;display:grid;gap:7px}
.f-bar{height:4px;border-radius:4px;background:#EDEDED}
.f-bar i{display:block;width:45%;height:100%;border-radius:4px;background:#1FBF8C}

/* ---------------------------------------------------------------- narrow */
@media (max-width:900px){
  .kit{grid-template-columns:1fr;height:auto}
  .kit-tree{max-height:200px;border-right:0;border-bottom:1px solid var(--line)}
  .kit-desk{height:560px}
  .kit-view.split{grid-template-columns:1fr;grid-template-rows:240px 1fr}
  .k-live{border-right:0;border-bottom:1px solid var(--line)}
  .agents{grid-template-columns:1fr;gap:44px}
  .on-wide{display:none}.on-phone{display:inline}
  .app-cols{grid-template-columns:1fr}
  .app-side{display:none}
  /* stacked, each app is as tall as its thread */
  .app{height:auto}
  .thread{flex:none}
  .follow .f-readers{grid-template-columns:1fr}
  .gh{padding:18px 14px}
  .gh-row{grid-template-columns:1fr}
}
.mvk{position:relative;width:1040px;box-sizing:border-box;padding:30px 44px 34px;border-radius:16px;background:#fff;box-shadow:var(--shadow);display:grid;gap:26px}
.mvk-prompt{justify-self:center;margin:0;padding:12px 18px;border-radius:16px;background:#f3f8fc;font:400 15px/1.3 var(--ui);color:var(--ink)}
.mvk-row{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:44px}
/* The guided demo's thinking state (SonataGuidedDemoV1.module.css .thinking): a shimmer across muted text, 1.8s a pass. It shows between the prompt and the screens. */
.mvk-thinking{position:absolute;left:50%;top:38%;transform:translateX(-50%);font:400 15px/1.5 var(--ui);color:rgba(0,33,66,.62);background:linear-gradient(110deg,rgba(0,33,66,.62) 30%,var(--ink) 45%,rgba(0,33,66,.62) 60%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:mvk-shimmer 1.8s linear infinite;opacity:0;pointer-events:none;transition:opacity .3s var(--ease-fade)}
@keyframes mvk-shimmer{from{background-position:180% 0}to{background-position:-80% 0}}
.mvk.think .mvk-thinking{opacity:1}
.mvk.in .mvk-thinking{opacity:0}
.fig.paused .mvk-thinking{animation-play-state:paused}
.mvk-side{display:grid;gap:12px;align-content:start;opacity:0;transform:translateY(8px);transition:opacity .7s var(--ease-fade),transform .9s var(--ease-lift)}
.mvk-side + .mvk-side{transition-delay:.25s}
.mvk.in .mvk-side{opacity:1;transform:none}
.mvk-label{font-family:var(--ui);font-size:10.5px;line-height:1;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.mvk-screen{position:relative;aspect-ratio:440/500;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff}
.mvk-screen iframe{position:absolute;left:0;top:0;width:440px;height:500px;border:0;transform-origin:0 0;pointer-events:none}
.mvk-rules{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
/* Each rule sits under a hairline. The rule on show fills its line in ink over the 2.2s it holds. */
.mvk-rules li{position:relative;display:grid;gap:4px;align-content:start;padding-top:14px;font:400 13px/1.45 var(--ui);color:var(--ink-2);transition:color .4s var(--ease-fade)}
.mvk-rules li::before,.mvk-rules li::after{content:'';position:absolute;left:0;top:0;width:100%;height:2px;border-radius:1px;background:var(--line)}
.mvk-rules li::after{background:var(--ink);transform:scaleX(0);transform-origin:left}
.mvk-rules li.on::after{animation:mvk-fill 2.2s linear forwards}
.fig.paused .mvk-rules li.on::after{animation-play-state:paused}
@keyframes mvk-fill{to{transform:scaleX(1)}}
.mvk-rules li.on{color:var(--ink)}
.mvk-rules code{font:400 11.5px/18px 'JetBrains Mono',ui-monospace,monospace;color:inherit}
.mvk-rules q{quotes:"\201C" "\201D"}

/* ---------------------------------------------------------------- phones */
@media (max-width:700px){
  /* mid vs. kit: the screens stack, the rules run as a list */
  #fig-picture .fit{height:auto !important}
  #fig-picture .fit > .mvk{transform:none !important;width:auto;padding:20px 16px 22px;gap:20px}
  .mvk-row{grid-template-columns:1fr;gap:24px}
  .mvk-rules{grid-template-columns:1fr;gap:12px}
  .mvk-prompt{font-size:14px;text-align:center}
  .draft-chip{top:-24px}
  /* the zip: the archive sits on a row above its contents */
  .finder-body{grid-template-columns:1fr;min-height:0}
  .zip-icon{flex-direction:row;justify-content:flex-start;gap:12px;padding:14px 16px;border-right:0;border-bottom:1px solid #eee;text-align:left}
  .zip-icon svg{width:32px;height:40px}
  .zip-icon span{margin-left:auto}
  .finder-list li{min-width:0}
  /* the kit: files run in one row that scrolls sideways, so the page scroll never gets caught */
  .kit-tree{display:flex;align-items:center;gap:4px;max-height:none;overflow-x:auto;overflow-y:hidden;padding:8px 10px;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .t-group{display:flex;align-items:center;flex:none;margin:0 10px 0 0}
  .t-head{padding:0 6px 0 4px;white-space:nowrap}
  .kit-tree .t-file{width:auto;flex:none;padding:6px 10px}
  .kit-desk{height:520px}
  .kit-view.split{grid-template-rows:260px 1fr}
  .kit-tab{padding:0 14px}
  /* the history: one list, each change as message, who and when, and file */
  .gh-title-row,.gh-date,.gh-ago,.gh-av.bot{display:none}
  .gh-week{display:inline}
  .gh-head{margin-bottom:14px}
  .gh-list{border:1px solid var(--gh-border);border-radius:8px;overflow:hidden}
  .gh-group{margin:0}
  .gh-group + .gh-group{border-top:1px solid var(--gh-border)}
  .gh-box{border:0;border-radius:0;overflow:visible}
  .gh-row{position:relative;padding:11px 12px}
  .gh-by{margin-top:6px}
  .gh-by .gh-file{flex-basis:100%;margin-top:2px;line-height:26px}
  .chat-head{white-space:nowrap}
  .chat-log{height:340px;padding:14px}
  .gh-row{gap:8px;padding:10px 12px}
  .gh-title-row h3{font-size:21px}
  /* one specimen: only the open change keeps its anatomy, the rest are message and week */
  .gh{border:0;border-radius:0;padding:0;box-shadow:none}
  /* the author span carries an inline display, so this one needs !important */
  .gh-commit:not(.spec) .gh-by > :not(.gh-wk){display:none !important}
  .gh-commit:not(.spec) .gh-wk{display:inline}
  .gh-commit:not(.spec) .gh-by{margin-top:2px;font-size:13px}
  /* Codex repeats the Claude request and reads, so on phones it shows only what it changed and made */
  .codex-app .t-user,.codex-app .t-meta,.codex-app .t-read,.codex-app .t-say,.codex-app .composer{display:none}
  .codex-app .thread{padding-bottom:14px}
  .thread{padding:16px 14px 12px}
  .composer{padding:0 12px 12px}
  /* one decision, every reader */
  .follow{border:0;border-radius:0;padding:0;box-shadow:none}
  .f-source{margin-bottom:28px}
  .f-src-line{padding-left:26px}
  .f-src-add .f-src-line::before{left:12px}
  .f-site{height:210px;padding:20px}
  .f-site .f-head{font-size:28px}
  .f-deck .f-head{font-size:22px}
}

/* The pointer tooltip, ported from littleplains.com: SystemCopyAction in
   lp-website-vibe/components/system/. Tokens: --color-accent #0398fa, white
   text, --radius-md 12px, --shadow-static-raised, 14px Sohne, 260ms. */
.lp-tip{position:fixed;top:0;left:0;z-index:1000;padding:10px 12px;border-radius:12px;color:#fff;background:#0398fa;box-shadow:0 2px 8px rgba(0,33,66,.07),0 8px 28px rgba(0,33,66,.1);font-family:var(--ui);font-size:14px;font-weight:400;line-height:1.35;white-space:nowrap;opacity:0;transform:translate3d(var(--tx,0),var(--ty,0),0) scale(.91);transform-origin:top left;pointer-events:none;will-change:transform,opacity;transition:opacity 260ms cubic-bezier(.22,1,.36,1)}
.lp-tip.on{opacity:1;transform:translate3d(var(--tx,0),var(--ty,0),0) scale(1);transition:opacity 260ms cubic-bezier(.22,1,.36,1),transform 260ms cubic-bezier(0,0,0,1)}
@media (prefers-reduced-motion:reduce){.lp-tip,.lp-tip.on{transition:none}}
/* ---------------------------------------------------------------- share links
   Every section and figure has a link. A figure's link sits at the end of its
   caption. A section's link shows beside its heading on hover. */
.fig{scroll-margin-top:56px}
.gh-commit{scroll-margin-top:24px}
.share{display:inline-flex;align-items:center;gap:5px;margin-left:8px;padding:0;border:0;background:none;font-family:var(--ui);font-size:12px;font-weight:400;letter-spacing:0;line-height:1;color:var(--ink-3);white-space:nowrap;cursor:pointer;transition:color .3s var(--ease-fade)}
.share svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.share:hover,.share:focus-visible,.share.done{color:var(--ink);transition-duration:.15s}
/* Page chrome meets 4.5:1, as littleplains.com does. Muted ink stays for text inside figures. */
.caption .share:not(:hover):not(:focus-visible):not(.done){color:var(--ink-2)}
/* Middle-aligned, so the icon and label center on the x-height of the caption line they sit on. */
.caption .share{vertical-align:middle;padding:10px;margin:-10px -10px -10px -2px}
.prose h2 .share{margin-left:14px;vertical-align:middle;opacity:0;transition:opacity .3s var(--ease-fade),color .3s var(--ease-fade)}
.prose h2 .share svg{width:18px;height:18px}
.prose h2:hover .share,.prose h2 .share:focus-visible,.prose h2 .share.done{opacity:1}
@media (hover:none){.prose h2 .share{opacity:.6}}
.kit-tab .share{margin-left:auto;align-self:center}
.gh-diff-head .share{margin-left:auto;color:var(--gh-muted)}
.gh-diff-head .share:hover,.gh-diff-head .share.done{color:var(--gh-fg)}

/* ---------------------------------------------------------------- entrances */
/* The editorial reveal from littleplains.com: 500ms in and out on --lp-ease. */
[data-reveal]{opacity:0;transition:opacity .5s var(--lp-ease);will-change:opacity;transition-delay:0s}
html.reveal-wait :is(.hero,main .prose > *,main .fig:not(.hero-fig)):not(.in-view){opacity:0}
[data-reveal].in-view{opacity:1;transition-delay:calc(var(--reveal-index,0) * 24ms + var(--reveal-media-offset,0ms))}

@media (max-width:900px){.prose h2{font-size:30px}}
@media (max-width:640px){.prose h2{font-size:28px}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1;transition:none}
  .t-step,.msg{transform:none}
}

/* ---------------------------------------------------------------- LP cursor and scroll bar */
/* The cursor: lp-website-vibe components/CustomCursor.tsx */
html.custom-cursor,html.custom-cursor *{cursor:none!important}
.cursor-dot{position:fixed;top:0;left:0;pointer-events:none;z-index:99999;will-change:transform;opacity:0;transition:opacity 180ms var(--lp-ease)}
.cursor-dot.on{opacity:1}
.cursor-dot img{display:block;filter:drop-shadow(0 1.125px 1.125px rgba(12,19,26,.22)) drop-shadow(0 2px 5px rgba(12,19,26,.1))}
/* The scroll bar: the capability page's .case-study-inspection-scrollbar */
html.custom-scrollbar{scrollbar-width:none}
html.custom-scrollbar::-webkit-scrollbar{display:none}
.lp-scroll{position:fixed;top:50%;right:56px;width:12px;height:144px;transform:translate(50%,-50%);z-index:20;display:flex;justify-content:center;opacity:0;transition:opacity 400ms var(--lp-ease)}
.lp-scroll.on{opacity:1}
.lp-scroll::before{content:'';position:absolute;top:0;bottom:0;width:2px;border-radius:1px;background:rgba(0,33,66,.06)}
.lp-scroll i{position:absolute;top:0;left:50%;width:2px;margin-left:-1px;border-radius:1px;background:var(--lp-blue);will-change:transform;pointer-events:none}
@media (max-width:800px),(hover:none),(pointer:coarse){.lp-scroll{display:none}}

/* ---------------------------------------------------------------- figures from figures/ */
/* Each one runs in an iframe at its own size, scaled to the column. Under 720px
   the iframe takes the figure's phone size, so the figure shows its phone layout. */
.embed{position:relative;width:100%;overflow:hidden}
.embed iframe{position:absolute;left:0;top:0;border:0;display:block;transform-origin:0 0;background:#fff}

/* ---------------------------------------------------------------- cutting room floor */
.floor{margin-top:clamp(96px,14vh,160px);padding-top:8px;border-top:1px dashed #cfcfcf}
.floor .prose h2{margin-top:48px}
.floor-note{font-family:var(--ui);font-size:15px !important;color:var(--ink-2)}

/* ---------------------------------------------------------------- the guided demo's cue */
/* The figure kit's agent cursor, which shows the reader where to click once. */
#fig-demo{position:relative}
.demo-ghost{position:absolute;left:0;top:0;z-index:5;width:24px;height:24px;pointer-events:none;opacity:0;will-change:transform}
.demo-ghost svg{display:block;filter:drop-shadow(0 1px 1.5px rgba(0,20,40,.28));transform-origin:3px 3px;transition:transform .11s ease}
.demo-ghost.is-pressing svg{transform:scale(.86)}
.demo-ring{position:absolute;left:0;top:0;z-index:5;width:0;height:0;pointer-events:none}
/* Each tap sends out a soft ring that eases out long after the press, so the three taps
   overlap into one flowing radar, like the picture figure's ping. */
.demo-ring::after{content:"";position:absolute;left:-14px;top:-14px;width:28px;height:28px;border-radius:50%;border:1.5px solid #f0b429;background:rgba(240,180,41,.12);animation:demo-ring 1.1s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes demo-ring{from{opacity:.85;scale:.4}to{opacity:0;scale:2.2}}
/* Permit boundary handoff to the page. v2.js removes the demo's blanket
   Lenis opt-out; allowNestedScroll preserves native scrolling inside a
   populated thread and lets Lenis own page scrolling at either edge. */
#fig-demo [data-lenis-prevent],
#fig-demo [data-article-scroll-thread]{overscroll-behavior:auto}
/* The prompt under the ghost takes the demo's own hover color. */
[data-sonata-guided-demo] [role="group"] button.is-ghost-hover{color:var(--color-accent)}

/* ---------------------------------------------------------------- pause */
/* A paused figure fades and loses most of its color. It shows no control. */
.fig[data-pausable] > :not(.caption){-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.fig.paused > :not(.caption){filter:saturate(.35);opacity:.72}
.fig[data-pausable]:focus{outline:none}
.fig[data-pausable]:focus-visible > :not(.caption){outline:2px solid var(--accent);outline-offset:6px;border-radius:16px}

/* ---------------------------------------------------------------- the site figure: one decision, two forms */
/* The chrome is the figure UI kit. The site pane uses the Sonata kit site's own
   type and swatch values (site/styles.css and tokens.css in sonata-atomic-kit). */
.twin{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-radius:16px;box-shadow:var(--shadow);background:#fff;overflow:hidden}
.twin-pane{min-width:0;padding:28px 32px 32px}
.twin-files{background:#fafafa;border-left:1px solid var(--line)}
.twin-label{margin:0 0 26px;font:400 10.5px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.ts-eyebrow{margin:0 0 4px;font:400 11px/14px 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:#B8B8B8}
.ts-h{margin:0 0 14px;font:400 clamp(28px,3.2vw,40px)/1.05 'EB Garamond',Georgia,serif;letter-spacing:-.02em;color:#2B2B2B}
.ts-lead{margin:0 0 26px;max-width:58ch;font:400 clamp(16px,1.4vw,20px)/1.5 'Funnel Sans',system-ui,sans-serif;color:#3D3D3D}
.ts-swatches{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.ts-sw{display:block;min-width:0;padding:0;border:0;background:none;text-align:left;font:400 12px/16px 'Funnel Sans',system-ui,sans-serif;color:#2B2B2B;cursor:pointer}
.ts-sw i{display:block;height:132px;border-radius:10px;transition:transform .2s cubic-bezier(.2,0,0,1),box-shadow .2s cubic-bezier(.2,0,0,1)}
.ts-sw i.pale{box-shadow:inset 0 0 0 .5px #E6E6E6}
.ts-sw b{display:block;padding:12px 2px 0;font-weight:400;overflow-wrap:anywhere}
.ts-sw small{display:block;margin-top:3px;padding:0 2px;font:400 10px/14px 'JetBrains Mono',monospace;letter-spacing:.05em;text-transform:uppercase;color:#B8B8B8}
.ts-sw.lit i{transform:translateY(-3px);box-shadow:0 0 20px 0 #0000000D,inset 0 0 0 .5px #E6E6E6}
.ts-sw:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:10px}
.tf-name{margin:0 0 8px;font:400 12px/1 'JetBrains Mono',monospace;color:var(--ink)}
.tf-code{margin:0 0 24px;font:400 12px/1.75 'JetBrains Mono',monospace;color:var(--ink-2);white-space:pre}
.tf-code .tf-l{display:block;margin:0 -8px;padding:0 8px;border-radius:5px;transition:background .2s,color .2s}
.tf-code .tf-more{color:var(--ink-3)}
.tf-md{display:grid;gap:2px;font:400 12px/1.6 'JetBrains Mono',monospace;color:var(--ink-2)}
.tf-h{margin-bottom:6px;color:var(--ink)}
.tf-row{display:grid;grid-template-columns:19ch minmax(0,1fr);gap:12px;margin:0 -8px;padding:3px 8px;border-radius:5px;transition:background .2s,color .2s}
.tf-row code{font:inherit}
.twin [data-c].lit:not(.ts-sw){background:#f1f6fb;color:var(--ink)}
@media (max-width:700px){
  .twin{grid-template-columns:minmax(0,1fr)}
  .twin-pane{padding:20px 18px 22px}
  .twin-files{border-left:0;border-top:1px solid var(--line)}
  .twin-label{margin-bottom:18px}
  .ts-swatches{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .ts-sw i{height:84px}
  .tf-code{font-size:11px}
  .tf-row{grid-template-columns:minmax(0,1fr);gap:0}
}

/* ---------------------------------------------------------------- the routing figure */
.route{position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.15fr) minmax(0,1fr);border-radius:16px;box-shadow:var(--shadow);background:#fff;overflow:hidden}
.route-pane{min-width:0;padding:28px 28px 32px}
/* What it makes: one composition per task, built from the files it lit.
   Every line of copy is Sonata's, from voice-and-tone.md and concepts.md. */
.route-out{border-left:1px solid var(--line);display:grid;gap:14px;align-content:start}
.ro-stage{position:relative;aspect-ratio:16/11;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.ro-stage::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,#f6f6f6 0 1px,transparent 1px 9px);opacity:1;transition:opacity .4s var(--ease-fade)}
.ro-stage.has::before{opacity:0}
.ro-comp{position:absolute;inset:0;opacity:0;transform:scale(.97);transition:opacity .5s var(--ease-fade),transform .7s var(--ease-lift);pointer-events:none}
.ro-comp.on{opacity:1;transform:none}
.ro-copy{display:grid;align-content:center;gap:10px;padding:22px 24px;background:#fff}
.ro-eyebrow{font:500 9.5px/1 var(--sn-sans);letter-spacing:.12em;text-transform:uppercase;color:#2B2B2B}
.ro-copy .ro-h{font:400 26px/1.05 var(--sn-display);letter-spacing:-.02em;color:#2B2B2B}
.ro-b{font:400 12.5px/1.45 var(--sn-sans);color:#2B2B2B}
.ro-layout iframe{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none}
.ro-flower img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ro-flower .ro-h{position:absolute;left:20px;bottom:18px;right:40%;font:500 22px/1.05 var(--sn-display);letter-spacing:-.02em;color:#2B2B2B}
.ro-logo{display:grid;place-items:center;background:#FFF8E7}
.ro-logo img{width:46%}
.ro-fly{position:absolute;z-index:3;pointer-events:none;padding:5px 8px;border-radius:8px;background:#fff;box-shadow:inset 0 0 0 1px #cfe0f2,0 4px 14px rgba(0,33,66,.08);font:400 12.5px/1.3 'JetBrains Mono',monospace;color:var(--ink);white-space:nowrap}
.route-tree{background:#fafafa;border-left:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 24px;align-content:start}
.rr-h{margin:0 0 10px;font:400 22px/1.2 var(--ui);color:var(--ink)}
.rr-first{margin:0 0 20px;font:400 14px/1.55 var(--ui);color:var(--ink-2)}
.rr-first code{font:400 12.5px 'JetBrains Mono',monospace;color:var(--ink)}
.rr-tasks{display:grid;gap:8px}
/* The task buttons take the guided demo's prompt buttons: SonataGuidedDemoV1.module.css .suggestions button. */
.rt-task{display:block;width:100%;padding:12px 18px;border:1px solid #e8f0f6;border-radius:999px;background:#fff;text-align:left;font:400 14px/1.3 var(--ui);color:var(--ink-2);cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.rt-task.lit{background:#fbfdff;border-color:#e8f0f6;color:#0398fa}
.rt-task:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.rt-group{display:grid;gap:1px;margin-bottom:18px}
.rt-head{padding:4px 8px 6px;font:400 10.5px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.rt-file{padding:5px 8px;border-radius:8px;font:400 12.5px/1.3 'JetBrains Mono',monospace;color:var(--ink-3);transition:background .2s,color .2s}
.rt-file.lit{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px #cfe0f2}
@media (max-width:700px){
  .route{grid-template-columns:minmax(0,1fr)}
  .route-out{border-left:0;border-top:1px solid var(--line)}
  .route-pane{padding:20px 18px 22px}
  .route-tree{border-left:0;border-top:1px solid var(--line);grid-template-columns:minmax(0,1fr)}
  .rr-tasks{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .rt-task{font-size:13px;padding:10px 12px}
}


/* Content Studio on a phone. Its stage is a size container with no definite
   size in the stacked layout, so the Sections frame resolved to 0 wide and the
   preview was blank. The article gives the frame the stage's full width. The
   component in lp-website-vibe is unchanged. */
@media (max-width:700px){
  .content-studio .ContentStudioSectionsV1_stage{container-type:inline-size;grid-template-columns:minmax(0,1fr);min-height:0;padding:10px 14px}
  .content-studio .ContentStudioSectionsV1_frame{width:100%;max-width:none}
}

/* Content Studio wears the figure UI kit: the kit outline, 16px corners and
   the kit shadow. Its own footer hint, view count and "Interactive excerpt"
   label go, so the article caption is the one caption. Alex said "feel free to
   simplify down" on 2026-09-29. */
.content-studio .ContentStudioV1_window{border-radius:16px;box-shadow:var(--shadow)}
.content-studio .ContentStudioV1_footer,.content-studio .ContentStudioV1_windowHeader > span{display:none}