@layer landing{.landing [hidden]{display:none}.landing-hero{padding-block-start:2rem}.meet-clio{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:center;gap:0 1.5rem;padding-block:clamp(3rem,6vw,6rem) 4rem}.hero-copy{display:contents}.hero-copy h1{grid-area:1 / 1 / 2 / 10;position:relative;z-index:4;font-size:clamp(3.5rem,6.4vw,6.5rem);pointer-events:none}.hero-copy .lede{grid-area:2 / 1 / 3 / 7;position:relative;z-index:4}.hero-try{max-inline-size:36rem;margin-block-start:2.5rem}.hero-copy .hero-try{grid-area:3 / 1 / 4 / 7;position:relative;z-index:4}.hero-copy h1 em{color:var(--accent)}.hero-copy .lede{font-family:var(--font-display);font-size:clamp(1.5rem,2.5vw,2rem);line-height:1.3;margin-block:2rem 1rem}.hero-copy>p:not(.lede){max-inline-size:45ch;color:var(--ink-soft)}.hero-copy .actions{margin-block-start:2rem}.hero-copy .hero-footnote{font-size:0.75rem;color:var(--muted);margin-block-start:1.5rem}.installer{margin-block-start:2rem;max-inline-size:42rem;border:1px solid var(--line-control);border-radius:var(--radius);background:var(--paper-raised)}.installer>:is(.installer-method,.installer-next){padding:1rem 1.25rem}.installer:not([data-tabs-ready]) .installer-method + .installer-method{border-block-start:1px solid var(--line)}.installer-shells:not([data-tabs-ready]) .installer-shell + .installer-shell{margin-block-start:1.25rem}:is(.installer-note,.installer-next) code{white-space:nowrap}.installer .tab-label{margin-block-end:0.75rem;font:500 0.8rem / 1.4 var(--font-mono);color:var(--ink)}.installer>.tab-list{padding-inline:1.25rem}.installer-shells>.tab-list{gap:0 1.25rem;margin-block:-0.25rem 1rem}.installer-shells>.tab-list button{min-block-size:2.5rem;font-size:0.72rem}.installer-command{display:flex;align-items:center;gap:1rem;padding:0.4rem 0.4rem 0.4rem 1rem;border:1px solid var(--code-border);border-radius:var(--radius-sm);background:var(--code);color:var(--code-ink)}.installer-command code{flex:1;min-inline-size:0;padding-block:0.35rem;background:transparent;color:inherit;font:0.85rem / 1.5 var(--font-mono);white-space:pre-wrap;overflow-wrap:anywhere}.installer-prompt{margin-inline-end:0.75ch;color:var(--code-muted);user-select:none}.copy-icon-button{display:inline-grid;place-items:center;align-self:start;inline-size:2.25rem;block-size:2.25rem;min-inline-size:0;min-block-size:0;padding:0;border:1px solid var(--code);background:transparent;border-radius:var(--radius-sm);color:var(--code-muted);transition:color var(--motion-fast) var(--motion-ease),border-color var(--motion-fast) var(--motion-ease)}.copy-icon-button svg{grid-area:1 / 1;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}.copy-icon-button .copied-icon,.copy-icon-button[data-copy-state="success"] .copy-icon{visibility:hidden}.copy-icon-button[data-copy-state="success"] .copied-icon{visibility:visible}.copy-icon-button:is(:hover,:focus-visible),.copy-icon-button[data-copy-state="success"]{color:var(--clio-teal);border-color:var(--code-border)}@media (pointer:coarse){.copy-icon-button{inline-size:2.75rem;block-size:2.75rem}}.copy-icon-button[data-copy-state="error"]{color:var(--secondary);border-color:var(--secondary)}.installer-note,.installer-next{margin-block-start:0.75rem;color:var(--muted);font-size:0.8rem}.installer-status{margin-block-end:0.75rem;padding-inline-start:0.75rem;border-inline-start:2px solid var(--secondary);color:var(--ink-soft);font-size:0.8rem}.installer-next{display:flex;flex-wrap:wrap;align-items:baseline;gap:0.25rem 1rem;margin:0;border-block-start:1px solid var(--line)}.installer-next .text-link{font-size:0.8rem}.hero-try .eyebrow{margin-block-end:0.75rem}.hero-try-links{display:flex;flex-wrap:wrap;gap:0.5rem 2rem;margin-block-start:1.25rem}.hero-paths .eyebrow{flex-basis:100%;margin:0}.install-steps .installer{margin-block:0.75rem 1rem}.chapter-visual{display:flex;flex-direction:column;align-items:center;min-inline-size:0}.scene-slot{position:relative;aspect-ratio:4 / 3;inline-size:100%}@media (max-width:1000px),(max-height:650px){.chapter-visual{margin-block-end:1.5rem}}.hero-portrait{grid-area:1 / 7 / 4 / -1;min-inline-size:0;align-self:stretch;display:flex;flex-direction:column;justify-content:center}.hero-portrait .scene-slot{inline-size:112%;margin-inline-start:-6%}.clio-scene{position:relative;display:grid;place-items:center;aspect-ratio:4 / 3;background:var(--paper);overflow:clip;isolation:isolate}.clio-scene .scene-mark{inline-size:43%;block-size:65%;object-fit:contain}.clio-scene video{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:contain;opacity:0;transition:opacity var(--motion-base) var(--motion-ease)}.scene-poster{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:contain;transition:opacity var(--motion-base) var(--motion-ease)}.clio-scene[data-frame] video{opacity:1}.clio-scene[data-frame] .scene-poster{opacity:0}.clio-scene[data-matte="light"] video{mix-blend-mode:darken}.clio-scene[data-matte="dark"] video{mix-blend-mode:screen}.hero-portrait .clio-scene{aspect-ratio:4 / 3}.hero-portrait :is(video,.scene-poster){transform:none}.portrait-caption{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0.25rem 1rem;min-block-size:3.5rem;text-align:center}.portrait-caption .eyebrow{font-size:0.6rem}.motion-toggle{border:0;border-block-end:1px solid var(--line-control);background:transparent;color:var(--muted);font:0.65rem / 1.4 var(--font-mono);min-block-size:2.75rem;padding:0.5rem 0.25rem}.motion-toggle:is(:hover,:focus-visible){color:var(--accent);border-color:var(--accent)}.hero-bottom{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding-block:1.5rem;border-block-start:1px solid var(--line)}.hero-bottom .text-link{font-size:0.8rem}.hero-facts{display:flex;flex-wrap:wrap;gap:1.5rem;color:var(--muted);font:0.65rem / 1.5 var(--font-mono)}.hero-facts small{color:var(--secondary);font:inherit}.story{border-block-start:1px solid var(--line)}.story-content,.chapter-body{min-inline-size:0}.story-toolbar{display:flex;align-items:center;justify-content:start;gap:1rem;padding-block:1rem}.companion-layer{position:fixed;inset:0;pointer-events:none;z-index:3;overflow:clip;mix-blend-mode:screen}html[data-theme="light"] .companion-layer{mix-blend-mode:darken}.companion-stage{position:absolute;inset:0 auto auto 0;inline-size:720px;aspect-ratio:4 / 3;transform-origin:top left;opacity:0;pointer-events:none;transition:opacity var(--motion-base) var(--motion-ease)}.companion-stage[data-visible]{opacity:var(--companion-visibility,1)}.companion-stage>.clio-scene{position:absolute;inset:0;inline-size:100%;block-size:100%;background:transparent;isolation:auto}.companion-stage .clio-scene video{mix-blend-mode:normal}.companion-stage:has([data-active]) .rail-rest{opacity:0}.companion-stage .scene-mark{inline-size:31%;block-size:48%}.landing[data-companion-enabled] .scene-slot>.clio-scene{visibility:hidden}.chapter-nav{display:flex;flex-wrap:wrap;gap:0.1rem 1rem;margin:0}.chapter-nav a{display:inline-flex;align-items:center;min-block-size:2.75rem;color:var(--muted);font-size:0.75rem;text-decoration:none}.chapter-nav a:is([aria-current],:hover,:focus-visible){color:var(--accent)}.story-chapter,.story-chapter.start-section,.story-chapter.faq{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:clamp(3rem,6vw,6rem);padding-block:clamp(6rem,10vw,9rem)}.story-chapter>.chapter-body{grid-column:1;grid-row:1}.story-chapter>.chapter-visual{grid-column:2;grid-row:1}.story-chapter:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,1.65fr)}.story-chapter:nth-child(even)>.chapter-body{grid-column:2}.story-chapter:nth-child(even)>.chapter-visual{grid-column:1}.story-chapter:first-child{border-block-start:0}.story-chapter h2{font-size:clamp(2.5rem,3.8vw,3.7rem)}.story-chapter h2 em{color:var(--ink-soft)}.scene-slot>.clio-scene{position:absolute;inset:0;inline-size:100%;block-size:100%}.chapter-visual .scene-slot{position:sticky;inset-block-start:calc(var(--header) + 3rem);max-inline-size:320px}.chapter-visual .scene-mark{inline-size:31%;block-size:48%}.chapter-motion{min-block-size:2.75rem;margin-block-end:1rem;text-align:end}.helper-briefs>p{padding-block:0.65rem}.install-steps p + p{margin-block-start:0.75rem}.finale-heading p:not(.eyebrow){color:var(--ink-soft)}.story-chapter .section-heading>p:not(.eyebrow){max-inline-size:54ch}.story-chapter .prompt-example{display:block;margin-block-start:3rem;padding-block-start:1.5rem}.story-chapter .prompt-example>p{margin-block:1.25rem;font-size:clamp(1.5rem,2.2vw,2rem)}.working-notes{margin-block:2.5rem}.working-notes>div{display:grid;grid-template-columns:1fr 2fr;gap:2rem;padding-block:1rem;border-block-start:1px solid var(--line);font-size:0.9rem}.working-notes dt{font-weight:500}.working-notes dd{color:var(--muted)}.helper-briefs{margin-block:2.5rem 1.5rem;padding-block-start:0.75rem;border-block-start:1px solid var(--line)}.helper-briefs .step-number{margin-inline-end:1rem}.chapter-note{color:var(--muted);max-inline-size:58ch;font-size:0.9rem;margin-block:1.5rem}.result-capture{margin-block:2.5rem 1.5rem;box-shadow:none;animation:none}.story-chapter .interface-grid{grid-template-columns:1fr;gap:2.5rem;margin-block-start:2.5rem}.story-chapter .interface-item figure>a{aspect-ratio:auto;padding:0.75rem}.story-chapter .interface-item>p{min-block-size:0}.story-chapter .model-routes{margin-block-start:2.5rem}.story-chapter .model-routes dt{font-family:var(--font-display);font-size:1.65rem}.story-chapter .feature-list a{grid-template-columns:1.25rem 1fr 1rem;gap:0.6rem 1rem}.story-chapter .feature-list p{grid-column:2}.story-chapter .feature-list a>span:last-child{grid-column:3;grid-row:1}.story-chapter .install-steps,.story-chapter .faq-items{margin-block-start:2.5rem}.landing .project-section{grid-template-columns:0.75fr 1.65fr;gap:clamp(3rem,7vw,7rem)}.landing .project-mark img{inline-size:min(65%,200px)}.story-finale{text-align:center;padding-block:5rem 4rem}.finale-heading h2{font-size:clamp(3rem,5.5vw,5rem);margin-block:1.5rem}.story-finale .clio-scene{max-inline-size:1000px;aspect-ratio:16 / 9;margin-inline:auto}.finale-actions{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:1rem 2rem;min-block-size:3rem}@media (max-width:1000px),(max-height:650px){.story-content{max-inline-size:760px;margin-inline:auto}.story-chapter,.story-chapter.start-section,.story-chapter.faq{display:block;padding-block:1.5rem 3rem}.chapter-visual .scene-slot{position:relative;inset-block-start:auto;max-inline-size:none;block-size:180px;aspect-ratio:auto}.chapter-visual .scene-slot>.clio-scene{inline-size:min(100%,232px);inset-inline-start:50%;transform:translateX(-50%)}.chapter-motion{align-self:end;padding-block-start:0}.story-chapter h2{font-size:clamp(2.5rem,5.5vw,4rem)}}@media (max-width:850px){.meet-clio{gap:0 1rem;padding-block:3rem}.hero-copy h1{grid-column:1 / -1;font-size:clamp(3.25rem,7.8vw,5rem)}.hero-portrait{grid-area:2 / 7 / 4 / -1}.portrait-caption .eyebrow{display:none}.hero-bottom{align-items:start}.hero-facts{flex-direction:column;gap:0.5rem}}@media (max-width:600px){.landing-hero{padding-block-start:1.5rem}.landing-hero .hero-topline .eyebrow{font-size:0.6rem}.meet-clio{display:grid;grid-template-columns:minmax(0,1fr);padding-block:0 2rem;gap:0}.hero-copy h1{grid-area:2 / 1;font-size:clamp(2.8rem,9.6vw,4rem)}.hero-copy .lede{grid-area:3 / 1}.hero-copy .hero-try{grid-area:4 / 1}.hero-copy .lede{margin-block-start:1.5rem;font-size:1.6rem}.hero-copy>p:not(.lede){font-size:0.95rem}.desktop-break{display:none}.hero-copy .actions{gap:1rem;margin-block-start:1.5rem}.hero-portrait{grid-area:1 / 1;display:block;position:relative;padding-block-end:1rem}.hero-portrait .scene-slot{inline-size:min(100%,360px);margin-inline:auto}.hero-portrait .clio-scene{max-inline-size:none}.portrait-caption{position:absolute;inset-block-end:0;inset-inline-end:0;justify-content:end;min-block-size:2.75rem}.hero-bottom{flex-direction:column;gap:1.25rem}.hero-facts{flex-direction:row;gap:0.5rem 1.25rem;font-size:0.6rem}.working-notes>div{grid-template-columns:1fr;gap:0.4rem}.landing .project-section{grid-template-columns:1fr;gap:2rem}.landing .project-mark{justify-items:start}.landing .project-mark img{inline-size:100px}.story-finale{padding-block:3.5rem}.finale-actions{min-block-size:7rem}}.motion-toggle:disabled{cursor:default;color:var(--muted);border-color:var(--line)}.landing[data-motion-paused] [data-reveal]{opacity:1;translate:none;transition:none}.landing[data-motion-paused] .hero-stage{animation:none}.landing[data-motion-paused] .companion-stage>.clio-scene{transition:none}@media (prefers-reduced-motion:reduce){.clio-scene video{display:none;transition:none}.clio-scene[data-frame] .scene-poster{opacity:1}.companion-stage,.companion-stage>.clio-scene,.scene-poster{transition:none}}}