/* Approved landing design. Assets are served from this origin under the site's CSP. */
html { color-scheme:dark; background:var(--cp-bg); }
body { margin:0; }
#cp-one { --cp-violet:#b6a6dc; --cp-blue:#91b8da; --cp-amber:#d8b77d; color-scheme:dark; background:var(--cp-bg); color:var(--cp-text); font:400 15px/1.6 'DM Sans',-apple-system,BlinkMacSystemFont,sans-serif; text-align:left; width:100%; isolation:isolate; container-type:inline-size; overflow:clip; }
body[data-page="landing"] #cp-one > .cp-header { transition:background-color 180ms ease; }
body[data-page="landing"] #cp-one > .cp-header.is-scrolled { background:rgb(16 18 19 / .86); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
body[data-page="landing"] #cp-one .cp-header-row { height:76px; }
@media (max-width:960px) { body[data-page="landing"] #cp-one .cp-header-row { height:64px; } }
@media (prefers-reduced-motion:reduce) { body[data-page="landing"] #cp-one > .cp-header { transition:none; } }
#cp-one * { box-sizing:border-box; }
#cp-one h1,#cp-one h2,#cp-one h3,#cp-one p,#cp-one ul,#cp-one pre { margin:0; }
#cp-one h1,#cp-one h2,#cp-one h3 { color:var(--cp-text); font-family:inherit; text-wrap:balance; }
#cp-one h1 { font-size:clamp(36px,5.55cqw,66px); line-height:1.09; font-weight:550; letter-spacing:-.052em; }
#cp-one h2 { font-size:clamp(27px,3.3cqw,38px); line-height:1.14; font-weight:500; letter-spacing:-.045em; }
#cp-one h3 { font-size:22px; line-height:1.25; font-weight:500; letter-spacing:-.025em; }
:where(#cp-one) button,:where(#cp-one) a,:where(#cp-one) input { -webkit-tap-highlight-color:transparent; }
:where(#cp-one) button,:where(#cp-one) input { font:inherit; }
:where(#cp-one) button { appearance:none; }
:where(#cp-one) button,:where(#cp-one) a { touch-action:manipulation; }
#cp-one :is(button,a,summary,input):focus { outline:none; }
.cp-keyboard-nav #cp-one :is(button,a,summary,input):focus-visible { outline:2px solid var(--cp-mint); outline-offset:5px; }
:where(#cp-one) a { text-decoration:none; color:inherit; }
:where(#cp-one) button { color:inherit; }
#cp-one [hidden] { display:none!important; }
#cp-one .cp-shell { width:min(1140px,calc(100% - 80px)); margin-inline:auto; }
#cp-one .cp-mono { font-family:'JetBrains Mono',ui-monospace,monospace; }
#cp-one .cp-muted { color:var(--cp-muted); }
#cp-one .cp-mint { color:var(--cp-mint); }
#cp-one .cp-eyebrow { font-size:11px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--cp-mint); margin-bottom:17px; }
#cp-one .cp-hero { text-align:center; padding-top:61px; position:relative; }
#cp-one .cp-hero .cp-eyebrow { display:flex; gap:9px; justify-content:center; align-items:center; color:#91bba6; font-size:13px; margin-bottom:23px; }
#cp-one .cp-status-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:#83b89d; box-shadow:0 0 0 4px #83b89d0c; flex:none; }
#cp-one .cp-hero h1 span { display:block; color:var(--cp-mint); }
#cp-one .cp-hero-sub { margin:24px auto 0; max-width:570px; color:#c5d2c9; font-size:16px; line-height:1.8; text-wrap:pretty; }
#cp-one .cp-hero-sub strong { font-weight:500; color:#c5d2c9; }
#cp-one .cp-hero-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin-top:26px; }
#cp-one .cp-hero-notes { margin:17px 0 37px; display:flex; justify-content:center; flex-wrap:wrap; gap:20px; font-size:11px; color:#8a9d90; }
#cp-one .cp-hero-notes span { display:flex; align-items:center; gap:6px; }
#cp-one .cp-hero-notes svg { width:13px; height:13px; color:var(--cp-mint); }
#cp-one .cp-story { text-align:left; position:relative; border-radius:16px; padding:16px; background:linear-gradient(150deg,#1e2223,#181b1c 52%,#1c2022); box-shadow:0 18px 70px #0003,inset 0 1px 0 #99b9a61a; }
#cp-one .cp-story-top { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:0 4px 14px; }
#cp-one .cp-story-top>span { font-size:11px; color:#a3bbae; display:flex; gap:8px; align-items:center; }
#cp-one .cp-play { background:transparent; border:0; display:flex; align-items:center; justify-content:center; gap:6px; min-height:32px; color:#9caea2; font-size:11px; padding:4px 8px; border-radius:5px; }
#cp-one .cp-play:hover { background:#2a3830; }
#cp-one .cp-play svg { width:12px; height:12px; }
#cp-one .cp-story-grid { display:grid; grid-template-columns:1.03fr .36fr 1fr; gap:0; align-items:stretch; }
#cp-one .cp-window { background:#131617; border-radius:10px; overflow:hidden; min-width:0; box-shadow:0 8px 25px #0002,inset 0 0 0 1px #879d8e12; }
#cp-one .cp-window-head { min-height:39px; display:flex; align-items:center; gap:9px; padding:0 14px; color:#8fa397; font-size:10px; background:#242829; }
#cp-one .cp-dots { display:flex; gap:4px; }
#cp-one .cp-dots i { width:5px; height:5px; background:#68766d; border-radius:50%; }
#cp-one .cp-window-head>span:last-child { margin-left:auto; }
#cp-one .cp-editor-body { padding:18px 19px 17px; min-height:213px; position:relative; }
#cp-one .cp-task-label { font-size:10px; letter-spacing:.08em; color:var(--cp-amber); margin-bottom:8px; text-transform:uppercase; }
#cp-one .cp-editor-body h3 { font-size:15px; font-weight:500; letter-spacing:-.015em; }
#cp-one .cp-editor-body p { font-size:11px; color:#9bac9f; margin-top:6px; }
#cp-one .cp-code { white-space:pre-wrap; overflow-wrap:anywhere; font:400 11px/1.9 'JetBrains Mono',monospace; color:#b8c9bd; }
#cp-one .cp-editor-body pre { margin-top:14px; padding-top:13px; border-top:1px solid #92ab9a12; }
#cp-one .cp-code .cp-kw { color:#b2a1d4; }
#cp-one .cp-code .cp-fn { color:#93b7d4; }
#cp-one .cp-code .cp-comment { color:#7e9385; }
#cp-one .cp-scan { position:absolute; inset:0 0 auto; height:1px; background:linear-gradient(90deg,transparent,#80bba060,transparent); box-shadow:0 0 22px 3px #78b29719; animation:cp-scan 4.8s linear infinite; pointer-events:none; }
#cp-one .cp-bridge { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:12px; padding:12px 5px; position:relative; color:#8eb89f; }
#cp-one .cp-bridge:before { content:''; position:absolute; left:0; right:0; height:1px; top:50%; background:#476e55; opacity:.4; }
#cp-one .cp-bridge:after { content:''; position:absolute; left:0; top:calc(50% - 2px); width:5px; height:5px; border-radius:50%; background:#9acdB0; animation:cp-travel 2.4s ease-in-out infinite; }
#cp-one .cp-memory-core { width:42px; height:42px; display:grid; place-items:center; background:#21352a; color:#9ec5ac; z-index:1; border-radius:13px; box-shadow:0 0 28px #56896918; }
#cp-one .cp-memory-core svg { width:19px; height:19px; }
#cp-one .cp-bridge small { position:absolute; top:calc(50% + 31px); font-size:9px; text-align:center; letter-spacing:.04em; }
#cp-one .cp-answer-body { padding:17px 18px; min-height:213px; }
#cp-one .cp-memory-title { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px; font-size:11px; color:#9dbcA8; }
#cp-one .cp-memory-title b { color:#83b79a; font-size:10px; font-weight:400; }
#cp-one .cp-memory-items { display:flex; flex-wrap:wrap; gap:6px; }
#cp-one .cp-memory-item { display:inline-flex; align-items:center; gap:6px; padding:5px 8px; border-radius:5px; color:#a8c9b5; background:#203327; font-size:10px; transition:background 220ms; }
#cp-one .cp-memory-item:nth-child(2) { background:#252d33; color:#a4bad0; }
#cp-one .cp-answer-note { padding-top:17px; margin-top:17px; border-top:1px solid #a0b6a314; }
#cp-one .cp-answer-note h3 { font-size:15px; margin-bottom:7px; }
#cp-one .cp-answer-note p { font-size:11px; color:#9fb3a5; line-height:1.7; }
#cp-one .cp-remembered { display:flex; gap:6px; align-items:center; color:#91bba2; font-size:10px; margin-top:12px; }
#cp-one .cp-remembered svg { width:12px; height:12px; }
#cp-one .cp-stage-controls { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:12px; }
#cp-one .cp-stage { text-align:left; border:0; border-radius:7px; padding:10px 12px; background:transparent; min-height:56px; position:relative; color:#8ea395; transition:background 130ms; }
#cp-one .cp-stage:hover { background:#26372c; }
#cp-one .cp-stage[aria-pressed=true] { background:#273b2f; color:#bfd6c7; }
#cp-one .cp-stage .cp-step-num { color:#75a28a; margin-right:7px; font:10px 'JetBrains Mono',monospace; }
#cp-one .cp-stage b { font-weight:500; font-size:12px; }
#cp-one .cp-stage small { display:block; font-size:11px; color:#91a596; padding-left:24px; margin-top:2px; }
#cp-one .cp-demo-caption { font-size:11px; color:#8c9d92; margin:15px 0 0; text-align:center; min-height:18px; }
#cp-one .cp-companies { padding:72px 0 32px; text-align:center; }
#cp-one .cp-marquee { overflow:hidden; margin:0 auto; max-width:1624px; mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent); }
#cp-one .cp-belt { display:flex; width:max-content; animation:cp-belt 50s linear infinite; }
#cp-one .cp-belt-group { display:flex; flex:none; align-items:center; gap:59px; padding-right:59px; }
#cp-one .cp-company { display:flex; flex:none; align-items:center; justify-content:center; height:36px; --wordmark-scale:1; }
/* Each mark's height comes from src/wordmarks.py (per data-logo), scaled by --wordmark-scale. */
#cp-one .cp-company img { display:block; width:auto; height:24px; max-width:none; object-fit:contain; filter:brightness(0) invert(1); opacity:.78; }
#cp-one .cp-section { padding-block:66px; }
#cp-one .cp-section-intro { display:flex; gap:50px; align-items:end; justify-content:space-between; margin-bottom:32px; }
#cp-one .cp-section-intro p:not(.cp-eyebrow) { max-width:335px; color:var(--cp-muted); font-size:15px; }
#cp-one .cp-keyboard { display:flex; gap:11px; align-items:center; justify-content:center; padding:31px 0 26px; perspective:600px; }
#cp-one .cp-keycap { min-width:72px; height:70px; display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; background:linear-gradient(145deg,#514b3b,#38352c); color:#d6c8a6; border:1px solid #77705b40; border-radius:15px; box-shadow:0 7px 0 #191b17,0 12px 18px #0003,inset 0 1px 1px #e2d1a81a; padding:9px 11px 8px; transform:rotateX(10deg); transition:transform 160ms,box-shadow 160ms,background 160ms; }
#cp-one .cp-keycap em { font-style:normal; font-size:28px; line-height:1; }
#cp-one .cp-keycap small { font-size:10px; line-height:1; opacity:.8; }
#cp-one .cp-keycap.cp-depressed { transform:translateY(5px) rotateX(10deg); box-shadow:0 2px 0 #191b17,0 3px 10px #0002; background:linear-gradient(145deg,#716143,#49402f); color:#e0c388; }
#cp-one .cp-custom { position:relative; isolation:isolate; padding-block:112px 96px; }
#cp-one .cp-custom::before { content:""; position:absolute; inset:0 -10vw; z-index:-1; pointer-events:none; background:radial-gradient(ellipse 46% 58% at 18% 50%,#d8b77d10,transparent 72%); }
#cp-one .cp-custom h2,#cp-one .cp-pricing h2 { font-size:clamp(30px,3.8cqw,44px); line-height:1.08; letter-spacing:-.05em; }
#cp-one .cp-custom-grid { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.2fr); gap:54px; align-items:center; }
#cp-one .cp-custom .cp-eyebrow { color:var(--cp-amber); }
#cp-one .cp-soon { font-size:9px; letter-spacing:.02em; text-transform:none; padding:3px 6px; border-radius:4px; background:#343022; color:#c3ad7f; margin-left:8px; white-space:nowrap; }
#cp-one .cp-custom h2 span { color:var(--cp-amber); }
#cp-one .cp-custom-copy>p:not(.cp-eyebrow) { font-size:16px; line-height:1.65; color:#b0b7be; margin:20px 0 24px; text-wrap:pretty; }
#cp-one .cp-code-window { background:#1d2021; border-radius:14px; overflow:hidden; box-shadow:0 24px 50px #00000040,inset 0 0 0 1px #ffffff10,inset 0 1px 0 #ffffff14; }
#cp-one .cp-code-window .cp-window-head { background:transparent; color:#929b96; min-height:43px; padding-inline:23px; justify-content:space-between; }
#cp-one .cp-language-tabs { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(48px,1fr); overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; background:#181a1b; border-bottom:1px solid #303333; }
#cp-one .cp-language-tabs::-webkit-scrollbar { display:none; }
#cp-one .cp-language-tab { display:grid; place-items:center; min-width:0; height:61px; padding:15px 10px; border:0; border-right:1px solid #2a2d2e; background:transparent; transition:background 130ms; }
#cp-one .cp-language-tab:last-child { border-right:0; }
#cp-one .cp-language-tab svg { display:block; width:27px; height:27px; filter:grayscale(1) contrast(.75) brightness(1.15); transition:filter 140ms; }
#cp-one .cp-language-tab[aria-selected=true] { background:#2a2d2e; }
#cp-one .cp-language-tab[aria-selected=true] svg { filter:none; }
#cp-one .cp-language-tab[data-language=rust] svg { filter:invert(.66); }
#cp-one .cp-language-tab[data-language=rust][aria-selected=true] svg { filter:invert(.88); }
.cp-keyboard-nav #cp-one .cp-language-tab:focus-visible { outline-offset:-4px; border-radius:3px; }
.cp-keyboard-nav #cp-one #cp-custom-panel:focus-visible { outline:2px solid var(--cp-mint); outline-offset:-4px; }
@media (hover:hover) and (pointer:fine) {
#cp-one .cp-language-tab:hover { background:#252829; }
#cp-one .cp-language-tab[aria-selected=true]:hover { background:#2d3031; }
}
#cp-one .cp-code-window pre { padding:10px 23px 24px; font-size:12px; min-height:335px; color:#b1bebb; }
#cp-one .cp-code-window .cp-kw { color:#b5a3c5; }
#cp-one .cp-code-footer { display:flex; justify-content:space-between; gap:10px; padding:12px 23px; border-top:1px solid #303333; color:#929b96; font-size:10px; background:#181a1b; }
#cp-one .cp-pricing { position:relative; isolation:isolate; padding-block:96px; }
#cp-one .cp-pricing::before { content:""; position:absolute; inset:0 -10vw; z-index:-1; pointer-events:none; background:radial-gradient(ellipse 50% 40% at 50% 8%,#93cbb40f,transparent 72%); }
#cp-one .cp-pricing-head { text-align:center; margin-bottom:40px; }
#cp-one .cp-pricing-head p:last-child { font-size:17px; color:#b3bac0; margin-top:16px; }
#cp-one .cp-pricing-note { margin-top:20px; text-align:center; font-size:10px; color:#839588; }
/* Rounded FAQ cards with a violet glow on expansion. Native details keep
   disclosure and keyboard behavior available without JavaScript. */
#cp-one .cp-faq { background:#101213; padding:104px 0 112px; }
#cp-one .cp-faq-head { text-align:center; margin:0 auto 56px; }
#cp-one .cp-faq h2 { font-size:clamp(32px,4cqw,46px); line-height:1.08; letter-spacing:-.05em; }
#cp-one .cp-faq h2 span { color:#c6adff; }
#cp-one .cp-faq .cp-eyebrow { color:#b4a8e8; }
#cp-one .cp-faq-list { display:grid; gap:12px; max-width:860px; margin:0 auto; }
/* A numbered rundown inside an FAQ answer: violet numbers in rings, violet headings. */
#cp-one .cp-faq-points { display:grid; gap:14px; margin:0; padding:0 0 4px; list-style:none; }
#cp-one .cp-faq-points li { display:grid; grid-template-columns:26px minmax(0,1fr); gap:12px; align-items:start; }
#cp-one .cp-faq-points b { display:grid; place-items:center; width:26px; height:26px; margin-top:1px; border:1px solid #b8a4ff; border-radius:50%; background:#b8a4ff1f; color:#d2c6ff; font-size:12px; font-weight:700; line-height:1; }
#cp-one .cp-faq-points strong { display:block; margin:0 0 3px; color:#c9b8ff; font-size:15px; font-weight:600; line-height:1.4; }
#cp-one .cp-faq-points p { margin:0; padding:0; }
#cp-one .cp-faq-row { border:1px solid #2b2b33; border-radius:24px; background:#151619; transition:border-color 220ms ease,box-shadow 220ms ease,background-color var(--cp-dur-fast) ease; }
#cp-one .cp-faq-row[open] { border-color:#7a66b8; background:radial-gradient(ellipse at 50% 0,rgba(117,87,224,.12),transparent 72%),#0b0c0e; box-shadow:0 0 24px rgba(117,87,224,.07),inset 0 1px 0 rgba(184,165,255,.06); }
#cp-one .cp-faq-row summary { display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:80px; padding:22px 28px; border-radius:inherit; list-style:none; cursor:pointer; font-size:17px; line-height:1.45; font-weight:550; color:#ecebef; transition:background-color var(--cp-dur-fast) ease; }
#cp-one .cp-faq-row summary::-webkit-details-marker { display:none; }
#cp-one .cp-faq-toggle { display:grid; place-items:center; flex:none; width:34px; height:34px; border:1px solid #202026; border-radius:50%; color:#d9d7e0; font-size:24px; font-weight:400; line-height:1; transition:box-shadow 220ms ease,border-color 220ms ease; }
#cp-one .cp-faq-toggle:before { content:'+'; }
#cp-one .cp-faq-row[open] .cp-faq-toggle { color:#fff; border-color:#9a86e6; background:linear-gradient(160deg,#c6adff,#7257d6); box-shadow:0 0 20px rgba(150,120,240,.45); }
#cp-one .cp-faq-row[open] .cp-faq-toggle:before { content:'−'; }
#cp-one .cp-faq-row summary:focus-visible { outline:2px solid #b7a6ff; outline-offset:4px; }
#cp-one .cp-faq-row p { padding:0 86px 26px 28px; color:#bebbc9; font-size:16px; line-height:1.75; }
#cp-one .cp-faq-row p strong { color:#eceaf3; font-weight:600; }
#cp-one .cp-faq-row p a { color:#c7baff; text-decoration:underline; text-underline-offset:3px; }
@media (hover:hover) and (pointer:fine) {
#cp-one .cp-faq-row:not([open]):hover { border-color:#615378; background:#1a1b1f; }
}
@supports (interpolate-size:allow-keywords) and (content-visibility:hidden) {
#cp-one .cp-faq-row { interpolate-size:allow-keywords; }
#cp-one .cp-faq-row::details-content { block-size:0; opacity:0; overflow:clip; transition:block-size 260ms ease,opacity 220ms ease,content-visibility 260ms allow-discrete; }
#cp-one .cp-faq-row[open]::details-content { block-size:auto; opacity:1; }
}
@media (prefers-reduced-motion:reduce) {
#cp-one .cp-faq-row,#cp-one .cp-faq-toggle,#cp-one .cp-faq-row::details-content { transition:none; }
}
#cp-one .cp-toast { margin:14px auto 0; max-width:540px; padding:12px 16px; background:#26312b; color:#bdcec2; border-radius:8px; font-size:12px; text-align:left; }
#cp-one.cp-motion-paused .cp-scan,#cp-one.cp-motion-paused .cp-bridge:after,#cp-one.cp-motion-paused .cp-belt { animation-play-state:paused!important; }
@keyframes cp-scan { 0% {transform:translateY(10px);opacity:0} 12%{opacity:1} 80%{opacity:1} 100% {transform:translateY(204px);opacity:0} }
@keyframes cp-travel { 0%{left:0;opacity:0} 15%{opacity:1} 90%{opacity:1} 100%{left:100%;opacity:0} }
@keyframes cp-belt { to { transform:translateX(-50%); } }
@keyframes cp-content-in { from{opacity:.4;transform:translateY(4px)} to{opacity:1;transform:translateY(0)} }
#cp-one .cp-updated { animation:cp-content-in 250ms ease-out; }
@container (max-width:900px) {
#cp-one .cp-shell { width:calc(100% - 48px); }
#cp-one .cp-hero { padding-top:49px; }
#cp-one .cp-custom-grid { gap:30px; }

}
@container (max-width:650px) {
#cp-one .cp-shell { width:calc(100% - 36px); }
#cp-one .cp-hero { padding-top:31px; }
#cp-one .cp-hero h1 { font-size:clamp(34px,7.5cqw,48px);line-height:1.14;letter-spacing:-.045em; }
#cp-one .cp-hero h1 span { margin-top:5px; }
#cp-one .cp-hero .cp-eyebrow { font-size:11px;letter-spacing:.11em;margin-bottom:22px; }
#cp-one .cp-hero-sub { font-size:14px;line-height:1.75;margin-top:20px;max-width:440px; }
#cp-one .cp-hero-actions { margin-top:22px;gap:8px; }
#cp-one .cp-hero-actions .cp-button { font-size:12px;padding:11px 14px; }
#cp-one .cp-hero-notes { gap:10px;font-size:11px; margin:17px 0 28px; }
#cp-one .cp-hero-notes svg { width:11px;height:11px; }
#cp-one .cp-story { padding:12px; }
#cp-one .cp-story-top { padding:0 1px 9px; }
#cp-one .cp-story-top>span { font-size:11px; }
#cp-one .cp-play { min-height:38px;font-size:10px; }
#cp-one .cp-story-grid { grid-template-columns:1fr; }
#cp-one .cp-editor-body { min-height:183px;padding:16px; }
#cp-one .cp-editor-body pre { margin-top:10px;padding-top:10px; }
#cp-one .cp-bridge { height:47px;flex-direction:row;gap:9px; }
#cp-one .cp-bridge:before { top:0;bottom:0;height:auto;width:1px;left:50%;right:auto; }
#cp-one .cp-bridge:after { display:none; }
#cp-one .cp-memory-core { width:29px;height:29px;border-radius:8px; }
#cp-one .cp-memory-core svg { width:14px;height:14px; }
#cp-one .cp-bridge small { position:static;background:#1b2021;z-index:1;padding:3px 5px;font-size:10px; }
#cp-one .cp-answer-body { min-height:180px;padding:16px; }
#cp-one .cp-answer-note { margin-top:12px;padding-top:12px; }
#cp-one .cp-stage-controls { gap:4px; }
#cp-one .cp-stage { padding:9px 7px;min-height:51px;text-align:center; }
#cp-one .cp-stage small { padding:0;font-size:11px; }
#cp-one .cp-stage .cp-step-num { font-size:9px;margin-right:4px; }
#cp-one .cp-stage b { font-size:11px; }
#cp-one .cp-demo-caption { font-size:11px;padding:0 10px; }
#cp-one .cp-companies { padding:44px 0 24px; }
#cp-one .cp-company { --wordmark-scale:.92; }
#cp-one .cp-belt-group { gap:35px;padding-right:35px; }
#cp-one .cp-section { padding-block:42px; }
#cp-one .cp-section-intro { flex-direction:column;align-items:start;gap:15px;margin-bottom:25px; }
#cp-one .cp-section-intro p:not(.cp-eyebrow) { max-width:420px;font-size:13px; }
#cp-one .cp-keyboard { padding-top:27px;padding-bottom:25px; }
#cp-one .cp-custom { padding-block:64px 48px; }
#cp-one .cp-custom-grid { grid-template-columns:1fr;gap:26px; }
#cp-one .cp-custom-copy>p:not(.cp-eyebrow) { margin-bottom:19px; }
#cp-one .cp-code-window pre { font-size:11px;padding:8px 18px 23px;min-height:318px; }
#cp-one .cp-code-window .cp-window-head { padding-inline:18px; }
#cp-one .cp-language-tab { height:56px; }
#cp-one .cp-pricing { padding-block:56px; }
#cp-one .cp-pricing-head { text-align:left; }
#cp-one .cp-pricing-note { text-align:left;font-size:11px; }
#cp-one .cp-faq { padding-block:64px 72px; }
#cp-one .cp-faq-head { margin-bottom:26px; }
#cp-one .cp-faq-row { border-radius:20px; }
#cp-one .cp-faq-row summary { min-height:76px; padding:20px; gap:16px; font-size:16px; }
#cp-one .cp-faq-toggle { width:30px; height:30px; font-size:22px; }
#cp-one .cp-faq-row p { padding:0 20px 22px; font-size:15px; }
}
@container (max-width:355px) {
#cp-one .cp-shell { width:calc(100% - 28px); }
#cp-one .cp-hero h1 { font-size:32px; }
#cp-one .cp-hero-actions { flex-direction:column; }
#cp-one .cp-hero-notes { gap:8px; }
#cp-one .cp-hero-notes span:last-child { display:none; }
#cp-one .cp-story-top>span { max-width:155px; }
#cp-one .cp-stage b { font-size:11px; }
#cp-one .cp-stage small { font-size:11px; }
}
@media (prefers-reduced-motion:reduce) {
#cp-one *,#cp-one *:before,#cp-one *:after { animation:none!important;transition:none!important;scroll-behavior:auto!important; }
#cp-one .cp-scan { display:none; }
}
/* Continuous editor recording: all movement follows the same 35-second clock. */
#cp-one .cp-film { text-align:left; margin-top:6px; --film-row:22px; --film-zoom:1; --film-scroll:0px; --film-pulse:0; }
#cp-one .cp-film-eyeline { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0 3px 14px; font-size:11px; color:#969e9a; }
#cp-one .cp-film-eyeline>span { display:flex; align-items:center; gap:8px; }
#cp-one .cp-film-eyeline .cp-status-dot { width:5px;height:5px; }
#cp-one .cp-film-eyeline small { font-size:10px; color:#707a75; }
#cp-one .cp-film-grid { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:15px; align-items:stretch; }
#cp-one .cp-film-screen { position:relative;isolation:isolate;min-width:0;padding:36px 9% 57px 13px;border:5px solid #111615;border-radius:15px;background:#152520;box-shadow:0 15px 38px #0005,inset 0 0 0 1px #7eaa9433;overflow:hidden; }
#cp-one .cp-film-wallpaper { position:absolute;inset:0;width:100%;height:100%;z-index:-1; }
#cp-one .cp-film-menubar { position:absolute;inset:0 0 auto;display:flex;align-items:center;gap:14px;height:24px;padding:0 13px;background:#b1d0bf13;box-shadow:0 1px #d3ebde10;color:#c1d3c8;font-size:8px; }
#cp-one .cp-film-menubar svg { width:11px;height:13px; }
#cp-one .cp-film-menu-status { margin-left:auto;letter-spacing:3px; }
#cp-one .cp-film-interview { position:relative;overflow:hidden;border-radius:8px;background:#141719;box-shadow:0 10px 25px #0006,0 0 0 1px #a0bbaa20; }
#cp-one .cp-film-dock { position:absolute;bottom:9px;left:50%;transform:translateX(-50%);display:flex;gap:7px;padding:6px;border:1px solid #bad7c42b;border-radius:12px;background:#15251fcc;box-shadow:0 5px 14px #0003; }
#cp-one .cp-film-dock svg { width:30px;height:30px;filter:drop-shadow(0 2px 2px #0003); }
#cp-one .cp-film-titlebar { display:flex; align-items:center; gap:12px; height:38px; padding:0 16px; background:#1b1e1f; box-shadow:inset 0 -1px 0 #292e2e; color:#a8aeab; font-size:11px; }
#cp-one .cp-film-titlebar .cp-dots i { width:6px;height:6px; }
#cp-one .cp-film-titlebar .cp-dots i:nth-child(1) { background:#76605c; }
#cp-one .cp-film-titlebar .cp-dots i:nth-child(2) { background:#766d54; }
#cp-one .cp-film-titlebar .cp-dots i:nth-child(3) { background:#526f60; }
#cp-one .cp-film-titlebar>span:last-child { margin-left:auto; font-size:9px; letter-spacing:.07em; color:#7d8d83; }
#cp-one .cp-film-stealth { margin-left:auto;display:flex;align-items:center;gap:13px;font-size:9px;letter-spacing:.07em;color:#b4dfbf;white-space:nowrap; }
#cp-one .cp-film-stealth svg { width:13px;height:15px; }
#cp-one .cp-film-mic { display:grid;place-items:center;flex:none;width:24px;height:24px;padding:0;border:0;border-radius:6px;background:#202326;color:#afb5bc;transition:background 140ms,color 140ms; }
#cp-one .cp-film-mic[aria-pressed=true] { background:#303438;color:#eef0f2; }
#cp-one .cp-film-main { display:grid; grid-template-columns:minmax(132px,.65fr) minmax(0,1.75fr); min-height:372px; }
#cp-one .cp-film-prompt { padding:22px 16px; background:#151818; border-right:1px solid #2a3030; }
#cp-one .cp-film-prompt-label { display:flex; align-items:center; gap:6px; color:#8fa697; font-size:9px; letter-spacing:.09em; margin-bottom:16px; }
#cp-one .cp-film-prompt-label svg { width:12px;height:12px; }
#cp-one .cp-film-prompt h3 { font-size:17px;line-height:1.35;letter-spacing:-.025em; margin-bottom:13px; }
#cp-one .cp-film-prompt p { font-size:11px;line-height:1.8;color:#989f9b; }
#cp-one .cp-film-prompt strong { color:#b3bcb6; font-weight:500; }
#cp-one .cp-film-prompt ul { list-style:none;padding:0;margin:20px 0;display:grid;gap:9px;font-size:10px;color:#88968e; }
#cp-one .cp-film-prompt li { display:flex;gap:7px;align-items:baseline; }
#cp-one .cp-film-prompt li:before { content:'·';color:#92b6a2; }
#cp-one .cp-film-example { padding:11px 0 0;border-top:1px solid #28312b;font-size:10px;color:#acbfb0;line-height:1.9; }
#cp-one .cp-film-example small { display:block;font-family:'DM Sans',sans-serif;font-size:9px;color:#717f77;margin-bottom:5px; }
#cp-one .cp-film-editor { min-width:0;position:relative; background:#141719; }
#cp-one .cp-film-tabs { display:flex;align-items:center;height:36px;background:#181c1e;gap:0;box-shadow:inset 0 -1px 0 #2b3133; }
#cp-one .cp-film-tab { display:flex;align-items:center;gap:7px;min-height:36px;min-width:0;padding:8px 13px;border:0;background:transparent;color:#75818a;font:10px 'JetBrains Mono',monospace;white-space:nowrap;position:relative; }
#cp-one .cp-film-tab::after { content:'';height:1px;position:absolute;bottom:0;left:0;right:0;background:transparent; }
#cp-one .cp-film-tab[data-active=true] { color:#b5c5bb;background:#141719; }
#cp-one .cp-film-tab[data-active=true]::after { background:#85b6a0; }
#cp-one .cp-film-tab .cp-file-letter { color:#8eacd0; font-size:9px; }
#cp-one .cp-film-tab:nth-child(2) .cp-file-letter { color:#bcad83; }
#cp-one .cp-film-tab[data-film-file=tests] .cp-file-letter { color:#8db39a; }
#cp-one .cp-film-zoom-label { margin-left:auto;padding:0 9px;font:9px 'JetBrains Mono',monospace;color:#637b70; }
#cp-one .cp-film-code-viewport { height:calc(var(--film-row) * 14 + 20px);overflow:hidden;position:relative; }
#cp-one .cp-film-code-plane { transform:scale(var(--film-zoom));transform-origin:0 65%;will-change:transform; padding:10px 0; }
#cp-one .cp-film-code-lines { transform:translateY(calc(-1 * var(--film-scroll)));will-change:transform; }
#cp-one .cp-film-line { display:flex;align-items:center;height:var(--film-row);position:relative;font:400 11px/var(--film-row) 'JetBrains Mono',ui-monospace,monospace;white-space:pre; }
#cp-one .cp-film-line.cp-line-active { background:#8bab9510; }
#cp-one .cp-film-line.cp-line-active::before { content:'';width:2px;position:absolute;left:0;top:0;bottom:0;background:#8db49d9c; }
#cp-one .cp-film-code-lines .cp-film-line[data-line="9"] { background:rgb(137 189 156 / calc(var(--line-flash,0)*.24));box-shadow:inset 0 0 0 1px rgb(137 189 156 / calc(var(--line-flash,0)*.65)); }
#cp-one .cp-film-ln { width:36px; flex:none;text-align:right;padding-right:13px;color:#505e63;font-size:10px;user-select:none; }
#cp-one .cp-line-active .cp-film-ln { color:#a2c5ae; }
#cp-one .cp-film-code-text { color:#b1bebb;min-width:0; }
#cp-one .cp-film-code-text .fkw { color:#b5a3c5; }
#cp-one .cp-film-code-text .ffn { color:#93b5cf; }
#cp-one .cp-film-code-text .fstr { color:#b7b98f; }
#cp-one .cp-film-code-text .fnum { color:#c3a982; }
#cp-one .cp-film-code-text .fcomment { color:#596f65; }
#cp-one .cp-film-caret { display:inline-block;height:13px;width:1.5px;background:#b1d2bc;vertical-align:-2px;margin-left:1px; }
#cp-one .cp-film-scrollbar { position:absolute;top:10px;bottom:10px;right:5px;width:3px;background:#505c6012;border-radius:3px; }
#cp-one .cp-film-scrollbar span { display:block;width:3px;height:42%;background:#6a7a725e;border-radius:3px;transform:translateY(var(--film-thumb,0px)); }
#cp-one .cp-film-statusbar { display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:27px;padding:0 12px;background:#1a2020;color:#74897b;font:9px 'JetBrains Mono',monospace; }
#cp-one .cp-film-statusbar>span:last-child { color:#82938a; }
#cp-one .cp-film-pointer { position:absolute;z-index:4;left:0;top:0;width:22px;height:28px;pointer-events:none;will-change:transform;opacity:var(--film-pointer-opacity,1);filter:drop-shadow(1px 3px 3px #0009); }
#cp-one .cp-film-pointer svg { width:17px;height:21px;stroke:#d4ded7;fill:#17231b;stroke-width:1.7; }
#cp-one .cp-film-pointer small { position:absolute;left:17px;top:19px;color:#acd2b9;background:#294237;box-shadow:0 2px 5px #0002;border-radius:4px;padding:1px 5px;font:8px/1.5 'DM Sans',sans-serif; }
#cp-one .cp-film-click { position:absolute;left:-7px;top:-7px;width:25px;height:25px;border:1px solid #b5d5c29c;border-radius:50%;opacity:var(--film-click,0);transform:scale(var(--film-click-scale,1)); }
#cp-one .cp-film-context { display:flex;flex-direction:column;background:#151b18;border-radius:12px;min-width:0;overflow:hidden;box-shadow:inset 0 0 0 1px #3b464138,0 12px 32px #0002; }
#cp-one .cp-film-context-title { min-height:49px;display:flex;gap:9px;align-items:center;padding:0 19px;font-size:11px;font-weight:500;letter-spacing:.095em;color:#b2c5b7; }
#cp-one .cp-film-context-title svg { width:14px;height:14px;color:#90bca1; }
#cp-one .cp-film-live { margin-left:auto;font-size:8px;font-weight:400;letter-spacing:.04em;color:#93af9c;display:inline-flex;align-items:center;gap:5px; }
#cp-one .cp-film-session-time { color:#b2cbb9;font:10px 'JetBrains Mono',monospace;letter-spacing:0;font-variant-numeric:tabular-nums;white-space:nowrap; }
#cp-one .cp-film-live::before { content:'';width:4px;height:4px;border-radius:50%;background:#8db39a;opacity:var(--live-on,1); }
#cp-one .cp-film-context-body { padding:0 13px 13px;display:flex;flex-direction:column;gap:10px;flex:1; }
#cp-one .cp-film-file { padding:14px 14px 11px;border-radius:7px;background:color-mix(in srgb,#3d7356 calc(var(--file-flash,0)*33%),#202827);box-shadow:inset 0 0 0 1px rgb(137 189 156 / calc(var(--file-flash,0)*.38));min-height:103px; }
#cp-one .cp-film-file-top { display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px;font:11px 'JetBrains Mono',monospace;color:#bdcfc3; }
#cp-one .cp-film-file-top .cp-film-update-badge { opacity:var(--file-flash,0);font:8px 'DM Sans',sans-serif;letter-spacing:.06em;color:#b9dfc7; }
#cp-one .cp-film-range { display:flex;align-items:baseline;justify-content:space-between;gap:8px; }
#cp-one .cp-film-range strong { color:#bccfc2; font:400 21px/1.3 'JetBrains Mono',monospace;letter-spacing:-.8px; }
#cp-one .cp-film-range small { font-size:9px;color:#88a793; }
#cp-one .cp-film-file-detail { display:flex;align-items:center;gap:5px;margin-top:8px;font-size:10px;line-height:1.5;color:#8ea899; }
#cp-one .cp-film-file-detail svg { width:10px;height:10px; }
#cp-one .cp-film-file.cp-film-testfile { opacity:var(--test-opacity,0);transform:translateY(var(--test-y,9px)); }
#cp-one .cp-film-context-empty { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:20px;text-align:center;font-size:11px;line-height:1.8;color:#61776b;opacity:var(--empty-opacity,1); }
#cp-one .cp-film-file-slot { position:relative;min-height:103px; }
#cp-one .cp-film-receipt { padding:9px 2px 0;margin-top:auto;min-height:72px; }
#cp-one .cp-film-receipt-label { display:flex;gap:7px;align-items:center;font-size:9px;color:#718d7b;letter-spacing:.06em;margin-bottom:7px; }
#cp-one .cp-film-receipt-label i { width:4px;height:4px;border-radius:50%;background:#6e9e80; }
#cp-one .cp-film-receipt p { font:10px/1.8 'JetBrains Mono',monospace;color:#9eb5a6;overflow-wrap:anywhere; }
#cp-one .cp-film-receipt p span { color:#708c7c; }
#cp-one .cp-film-context-foot { display:flex;justify-content:space-between;gap:8px;padding:11px 17px;background:#121715;font-size:10px;color:#809989; }
#cp-one .cp-film-context-foot span:last-child { color:#96b09f; }
#cp-one .cp-film-player { display:flex;align-items:center;gap:12px;margin-top:13px;min-height:42px;color:#8f9c94; }
#cp-one .cp-film-control { border:0;border-radius:5px;min-height:36px;min-width:31px;padding:5px 8px;display:inline-flex;gap:7px;align-items:center;justify-content:center;background:transparent;color:#9eadA3;font-size:11px; }
#cp-one .cp-film-control:hover { background:#252d28;color:#c3d3c9; }
#cp-one .cp-film-control svg { width:13px;height:13px; }
#cp-one .cp-film-time { font:10px 'JetBrains Mono',monospace;color:#73867b;min-width:65px;white-space:nowrap; }
#cp-one .cp-film-player input { min-width:50px;flex:1;appearance:none;-webkit-appearance:none;height:34px;padding:0;border:0;border-radius:0;background:transparent;outline-offset:2px; }
#cp-one .cp-film-player input::-webkit-slider-runnable-track { height:3px;border-radius:3px;background:linear-gradient(to right,#709d84 var(--film-progress,0%),#303b34 var(--film-progress,0%)); }
#cp-one .cp-film-player input::-webkit-slider-thumb { appearance:none;-webkit-appearance:none;width:8px;height:8px;border-radius:50%;background:#a2bdaa;margin-top:-2.5px; }
#cp-one .cp-film-player input::-moz-range-track { height:3px;border-radius:3px;background:#303b34; }
#cp-one .cp-film-player input::-moz-range-progress { height:3px;border-radius:3px;background:#709d84; }
#cp-one .cp-film-player input::-moz-range-thumb { width:8px;height:8px;border:0;border-radius:50%;background:#a2bdaa; }
#cp-one .cp-film-scene-label { font-size:10px;min-width:142px;text-align:right;color:#819689; }
#cp-one .cp-film-caption { text-align:center;font-size:14px;color:#919e96;margin-top:6px;min-height:20px; }
#cp-one .cp-film-demo-label { font-size:10px;color:#69786f; }
@container (max-width:1000px) {
#cp-one .cp-film-main { grid-template-columns:minmax(120px,.56fr) minmax(0,1.7fr); }
#cp-one .cp-film-prompt { padding:20px 12px; }
#cp-one .cp-film-tab { padding-inline:10px; }
#cp-one .cp-film-context-title { padding-inline:14px;font-size:10px; }
#cp-one .cp-film-file { padding-inline:11px; }
#cp-one .cp-film-live { font-size:8px; }
#cp-one .cp-film-ln { width:32px;padding-right:10px; }
}
@container (max-width:850px) {
#cp-one .cp-film-grid { gap:12px;grid-template-columns:minmax(0,1.95fr) minmax(0,1fr); }
#cp-one .cp-film-main { grid-template-columns:1fr; }
#cp-one .cp-film-prompt { padding:14px 15px;border-right:0;border-bottom:1px solid #29302f;display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:center; }
#cp-one .cp-film-prompt-label { margin:0;grid-column:1;font-size:8px; }
#cp-one .cp-film-prompt h3 { font-size:14px;margin:4px 0 0;grid-column:1;white-space:nowrap; }
#cp-one .cp-film-prompt p { grid-row:1 / span 2;grid-column:2;font-size:11px;line-height:1.65; }
#cp-one .cp-film-prompt ul,#cp-one .cp-film-example { display:none; }
#cp-one .cp-film-context-title { font-size:10px;letter-spacing:.05em;gap:6px; }
#cp-one .cp-film-live { display:inline-flex;font-size:7px;gap:3px; }
#cp-one .cp-film-context-title { flex-wrap:wrap;gap:6px;padding-block:10px; }
#cp-one .cp-film-context-body { padding-inline:10px;gap:15px;padding-top:6px; }
#cp-one .cp-film-file { min-height:115px;padding:17px 12px 13px; }
#cp-one .cp-film-range { flex-wrap:wrap;gap:5px; }
#cp-one .cp-film-range strong { font-size:22px; }
#cp-one .cp-film-range small { font-size:10px; }
#cp-one .cp-film-file-top { font-size:11px; }
#cp-one .cp-film-file-detail { font-size:10px; }
#cp-one .cp-film-file-slot { min-height:115px; }
#cp-one .cp-film-receipt { padding-top:10px; }
#cp-one .cp-film-context-foot { flex-direction:column;gap:2px;padding:12px 15px; }
}
@container (max-width:650px) {
#cp-one .cp-film { --film-row:20px; }
#cp-one .cp-film-grid { grid-template-columns:1fr;gap:12px; }
#cp-one .cp-film-eyeline { margin:0 0 11px;font-size:10px; }
#cp-one .cp-film-eyeline small { font-size:9px; }
#cp-one .cp-film-titlebar { height:36px;padding-inline:13px;font-size:10px; }
#cp-one .cp-film-main { min-height:0; }
#cp-one .cp-film-prompt { padding:13px 14px;column-gap:15px; }
#cp-one .cp-film-prompt p { font-size:11px; }
#cp-one .cp-film-prompt h3 { font-size:14px; }
#cp-one .cp-film-tabs,#cp-one .cp-film-tab { min-height:39px;height:39px; }
#cp-one .cp-film-tab { font-size:11px;padding:9px 14px; }
#cp-one .cp-film-code-viewport { height:calc(var(--film-row)*14 + 20px); }
#cp-one .cp-film-line { font-size:11px; }
#cp-one .cp-film-ln { font-size:10px;width:35px;padding-right:12px; }
#cp-one .cp-film-context-title { min-height:42px;font-size:11px;padding-inline:16px;letter-spacing:.06em; }
#cp-one .cp-film-live { display:inline-flex;font-size:9px; }
#cp-one .cp-film-context-body { display:grid;grid-template-columns:1fr 1fr;padding:0 11px 11px;gap:10px; }
#cp-one .cp-film-file,#cp-one .cp-film-file-slot { min-height:110px; }
#cp-one .cp-film-file { padding:12px; }
#cp-one .cp-film-file-top { font-size:11px;margin-bottom:10px; }
#cp-one .cp-film-file-top .cp-film-update-badge { font-size:7px; }
#cp-one .cp-film-file-detail { font-size:10px; }
#cp-one .cp-film-range strong { font-size:22px; }
#cp-one .cp-film-range small { font-size:10px; }
#cp-one .cp-film-context-empty { padding:13px;font-size:11px; }
#cp-one .cp-film-receipt { grid-column:1/-1;min-height:0;padding:4px 4px 0; }
#cp-one .cp-film-receipt-label { font-size:9px;margin-bottom:4px; }
#cp-one .cp-film-receipt p { font-size:11px; }
#cp-one .cp-film-context-foot { flex-direction:row;font-size:10px;padding:11px 15px; }
#cp-one .cp-film-player { gap:5px;flex-wrap:wrap;margin-top:10px; }
#cp-one .cp-film-control { min-height:44px;min-width:34px;padding:7px; }
#cp-one .cp-film-control #cp-motion-text { display:none; }
#cp-one .cp-film-time { min-width:64px;font-size:10px; }
#cp-one .cp-film-player input { min-height:44px; }
#cp-one .cp-film-scene-label { flex-basis:100%;text-align:center;font-size:11px;min-height:18px; }
#cp-one .cp-film-caption { font-size:13px;line-height:1.75;margin-top:7px; }
}
@container (max-width:355px) {
#cp-one .cp-film-prompt { grid-template-columns:1fr;gap:6px; }
#cp-one .cp-film-prompt-label { display:none; }
#cp-one .cp-film-prompt h3 { margin:0; }
#cp-one .cp-film-prompt p { grid-column:1;grid-row:auto; }
#cp-one .cp-film-context-title { font-size:10px;padding-inline:13px; }
#cp-one .cp-film-context-body { gap:7px;padding-inline:9px; }
#cp-one .cp-film-file { padding:11px 9px; }
#cp-one .cp-film-file-top .cp-film-update-badge { display:none; }
#cp-one .cp-film-line { font-size:11px; }
#cp-one .cp-film-zoom-label { font-size:8px; }
}
@media (prefers-reduced-motion:reduce) {
#cp-one .cp-film-code-plane { transform:none!important; }
#cp-one .cp-film-pointer { display:none; }
}
#cp-one .cursor-interaction { cursor:pointer; }
#cp-one svg { width:16px; height:16px; flex-shrink:0; vertical-align:middle; }
#cp-one .cp-mini-keyword { color:#b3a0ce; }
#cp-one [data-price] { font-weight:inherit; }
#cp-one .cp-film-caret.cp-caret-dim { opacity:.55; }
#cp-one .cp-sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }

/* Keep logo and close controls clear of landscape display cutouts. */

/* Compact file rows follow the three-file story; the translucent app keeps
   its header pinned while the solution scrolls into implementation. */
#cp-one .cp-film-tabs { overflow:hidden; }
#cp-one .cp-film-tab { gap:5px;padding-inline:9px; }
#cp-one .cp-film-context-body { display:flex;gap:8px; }
#cp-one .cp-film-record { position:relative;display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;column-gap:8px;row-gap:6px;padding:10px;border-radius:7px;background:color-mix(in srgb,#3d7356 calc(var(--file-flash,0)*33%),#141617);box-shadow:inset 0 0 0 1px rgb(137 189 156 / calc(var(--file-flash,0)*.38));transition:opacity 220ms; }
#cp-one .cp-film-record.cp-record-pending { opacity:.36; }
#cp-one .cp-film-record-icon { display:grid;place-items:center;width:28px;height:30px;border-radius:5px;background:#2b3a32;color:#95ad9e;font:10px 'JetBrains Mono',monospace; }
#cp-one .cp-film-record-name { min-width:0; }
#cp-one .cp-film-record-name b { display:block;font-size:11px;font-weight:500;color:#bdcfc3; }
#cp-one .cp-film-record-name small { display:block;font:8px/1.6 'JetBrains Mono',monospace;color:#6f887a; }
#cp-one .cp-film-record-range { display:flex;align-items:center;gap:6px; }
#cp-one .cp-film-record-range strong { font:400 14px 'JetBrains Mono',monospace;white-space:nowrap;color:#bcd4c4; }
#cp-one .cp-film-record-range small { max-width:25px;font-size:6px;line-height:1.3;letter-spacing:.12em;color:#80988a; }
#cp-one .cp-film-segments { grid-column:2/-1;display:flex;gap:2px;height:4px; }
#cp-one .cp-film-segments i { flex:1;background:#394440;min-width:0;border-radius:1px;transition:background 180ms; }
#cp-one .cp-film-segments i.cp-line-read { background:#789f88; }
#cp-one .cp-film-segments i.cp-protected { background:#8f667024; }
#cp-one .cp-film-segments i.cp-protected.cp-line-read { background:#b0828c80; }
#cp-one .cp-film-segments i.cp-edited-segment { background:color-mix(in srgb,#d0f4dd calc(var(--line-flash,0)*100%),#789f88);box-shadow:0 0 7px rgb(137 189 156 / var(--line-flash,0));transition:none; }
#cp-one .cp-film-record-detail { grid-column:2/-1;color:#8aa392;font-size:9px;line-height:1.4;min-height:13px; }
#cp-one .cp-film-legend { display:flex;gap:15px;padding:2px 3px;color:#80988a;font-size:9px; }
#cp-one .cp-film-legend span { display:flex;align-items:center;gap:5px; }
#cp-one .cp-film-legend i { width:8px;height:3px;background:#789f88;border-radius:1px; }
#cp-one .cp-film-legend span:last-child i { background:#b0828c80; }
#cp-one .cp-film-receipt { min-height:66px;padding-top:6px; }
#cp-one .cp-film-line.cp-source-protected .cp-film-ln { color:#90727c; }
#cp-one .cp-film-app { position:absolute;inset:65px 18px 54px 34%;z-index:2;overflow:hidden;border-radius:9px;background:rgb(17 21 21 / .86);box-shadow:0 18px 40px #0007,inset 0 0 0 1px #c3dcc322;opacity:var(--app-in,0);transform:translate( calc(12px * (1 - var(--app-in,0))),calc(12px * (1 - var(--app-in,0)))) scale(calc(.97 + .03 * var(--app-in,0)));transform-origin:right top; }
#cp-one .cp-film-app-head { position:relative;z-index:2;display:flex;align-items:center;gap:7px;padding:12px 16px;height:48px; }
#cp-one .cp-film-app-brand { color:#c7ddd0;font-size:13px;font-weight:400;letter-spacing:-.7px; }
#cp-one .cp-film-app-brand .cp-brand-logo { width:auto;height:24px; }
#cp-one .cp-film-mode-badge { flex:none;display:flex;align-items:center;gap:6px;padding:3px 7px;border-radius:20px;background:#243e32;color:#a2ceb4;font-size:8px;line-height:1.4;white-space:nowrap; }
#cp-one .cp-film-app-viewport { position:absolute;inset:48px 12px 12px;overflow:hidden;scroll-behavior:auto; }
#cp-one .cp-film-bug { display:flex;align-items:center;gap:6px;font-size:10px;color:#d1b27a; }
#cp-one .cp-film-bug svg { width:13px;height:13px; }
#cp-one .cp-film-solve-summary { display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px; }
#cp-one .cp-film-solve-summary>div { padding:10px;border-radius:8px;background:rgb(17 21 21 / .4);box-shadow:inset 0 0 0 1px #58675c33; }
#cp-one .cp-film-solve-summary small { display:block;font-size:9px;color:#82978b;letter-spacing:.1em; }
#cp-one .cp-film-guarantees h3 { margin:6px 0 5px;font-size:14px;font-weight:400;letter-spacing:-.02em; }
#cp-one .cp-film-guarantees p { font-size:11px;color:#929f99;line-height:1.65; }
#cp-one .cp-film-guarantees ul { list-style:none;margin:12px 0 0;padding:0;display:grid;gap:6px;font-size:10px;color:#a2b5a9; }
#cp-one .cp-film-guarantees li:before { content:'✓';color:#6b9b81;margin-right:6px; }
#cp-one .cp-film-approach>div { display:flex;align-items:start;gap:8px;margin-top:13px; }
#cp-one .cp-film-approach b,#cp-one .cp-film-popover b { display:grid;place-items:center;flex:none;width:18px;height:18px;border-radius:4px;background:#c6a36b;color:#25261e;font:500 11px 'JetBrains Mono',monospace; }
#cp-one .cp-film-approach span { font-size:11px;color:#c2b18f;line-height:1.6; }
#cp-one .cp-film-approach span small { font-size:10px;letter-spacing:0;color:#8f9b95;margin-top:3px; }
#cp-one .cp-film-implementation { position:relative;background:rgb(17 21 21 / .4);border-radius:8px;box-shadow:inset 0 0 0 1px #58675c33; }
#cp-one .cp-film-complexity { position:relative;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-block:12px; }
#cp-one .cp-film-metric,#cp-one .cp-film-test-cases { padding:12px;border-radius:8px;background:rgb(17 21 21 / .4);box-shadow:inset 0 0 0 1px #58675c33; }
#cp-one .cp-film-metric-time { position:relative; }
#cp-one .cp-film-metric-time:after { content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px #a2c2d5;opacity:var(--time-highlight,0);pointer-events:none; }
#cp-one .cp-film-metric>small,#cp-one .cp-film-section-title,#cp-one .cp-film-test-case>small { display:block;font-size:9px;letter-spacing:.1em;color:#aeb4ba; }
#cp-one .cp-film-metric h3 { margin:7px 0;font:400 16px 'JetBrains Mono',monospace;color:#e0e4e1; }
#cp-one .cp-film-metric p { font-size:11px;line-height:1.6;color:#ccd0d5; }
#cp-one .cp-film-metric>span { display:block;margin-top:8px;font-size:9px;color:#aeb4ba; }
#cp-one .cp-film-test-cases { position:relative;min-height:100%; }
#cp-one .cp-film-section-title { margin-bottom:10px; }
#cp-one .cp-film-test-case { padding:5px 0;margin-top:12px; }
#cp-one .cp-film-test-case h3 { font-size:12px;font-weight:500;line-height:1.4;margin:5px 0;color:#e0e2e5; }
#cp-one .cp-film-test-case p { font-size:10px;line-height:1.5;color:#c4c9ce; }
#cp-one .cp-film-test-case code { display:block;margin-top:6px;color:#d2d6db;font:9px/1.6 'JetBrains Mono',monospace;overflow-wrap:anywhere; }
#cp-one .cp-film-test-result { display:flex;align-items:center;gap:9px;margin-top:7px; }
#cp-one .cp-film-test-result span { font-size:7px;letter-spacing:.08em;color:#aeb4ba; }
#cp-one .cp-film-test-result b { font:10px 'JetBrains Mono',monospace;color:#d7dbdf; }
#cp-one .cp-film-impl-head { display:flex;justify-content:space-between;align-items:center;gap:10px;padding:0 10px;height:28px;border-radius:8px 8px 0 0;background:#202526;font-size:9px;color:#acb7b0; }
#cp-one .cp-film-impl-head>span:first-child { display:flex;align-items:center;gap:7px;letter-spacing:.04em;font-weight:500; }
#cp-one .cp-film-impl-head svg { width:13px;height:13px;color:#73aa90; }
#cp-one .cp-film-impl-head>span:last-child { color:#79877f;font-size:9px; }
#cp-one .cp-film-impl-tabs { display:flex;align-items:center;gap:3px;padding:4px 8px;border-bottom:1px solid #2a3530; }
#cp-one .cp-film-impl-tabs [data-impl-file] { border:0;border-radius:4px;padding:6px 8px;background:transparent;color:#758b7e;font:10px 'JetBrains Mono',monospace; }
#cp-one .cp-film-impl-tabs [data-impl-file][data-active=true] { background:#2b3830;color:#b8c9bf; }
#cp-one .cp-film-impl-tabs>#cp-film-change-label { margin-left:auto;color:#a58e63;font-size:8px;letter-spacing:.05em; }
#cp-one .cp-film-impl-code { padding:10px 8px; }
#cp-one .cp-film-impl-code .cp-film-line { font-size:10.5px;height:auto;min-height:20px;align-items:start;line-height:20px; }
#cp-one .cp-film-impl-code .cp-film-ln { width:29px;padding-right:10px; }
#cp-one .cp-film-impl-code .cp-film-code-text { white-space:pre-wrap;overflow-wrap:anywhere; }
#cp-one .cp-film-patch { position:relative;padding:28px 4px 6px 0;margin:5px 0;border-radius:5px; }
#cp-one .cp-patch-fix { background:#99804a13;box-shadow:inset 2px 0 #b8a0638c,inset 0 0 0 1px #b8a06330; }
#cp-one .cp-patch-add { background:#50916d16;box-shadow:inset 2px 0 #73b58d8c,inset 0 0 0 1px #73b58d38; }
#cp-one .cp-film-patch-label { position:absolute;top:8px;left:29px;font:8px 'JetBrains Mono',monospace;letter-spacing:.08em;color:#c5aa76; }
#cp-one .cp-patch-add .cp-film-patch-label { color:#83b69a; }
#cp-one .cp-film-deleted { opacity:.45;text-decoration:line-through;text-decoration-color:#c7a477; }
#cp-one .cp-film-patch-badges { position:absolute;top:4px;right:7px;display:flex;gap:4px; }
#cp-one .cp-film-patch-badges button[hidden] { display:none; }
#cp-one .cp-film-patch-badges button { display:grid;place-items:center;width:20px;height:20px;padding:0;border:1px solid #72ac8970;border-radius:4px;background:#263e30;color:#97c5a8;font:10px 'JetBrains Mono',monospace;transition:background 120ms,box-shadow 120ms; }
#cp-one .cp-film-patch-badges button[aria-expanded=true] { background:#7aad8e;color:#17271c;box-shadow:0 0 14px #6cad8130; }
#cp-one .cp-film-popover { position:absolute;bottom:calc(100% + 8px);right:0;width:min(300px,100%);z-index:3;padding:13px 15px;border:1px solid #6e9b7d7a;border-radius:7px;background:linear-gradient(130deg,#263a30,#1c2925);box-shadow:0 12px 27px #0005;opacity:var(--popover-in,0);transform:translateY(calc(9px * (1 - var(--popover-in,0)))) scale(calc(.97 + .03 * var(--popover-in,0)));transform-origin:bottom right;pointer-events:none; }
#cp-one .cp-film-popover>div { display:flex;align-items:center;gap:8px; }
#cp-one .cp-film-popover b { background:#76b08a; }
#cp-one .cp-film-popover strong { color:#9ccaaa;font-size:10px;font-weight:500;letter-spacing:.03em; }
#cp-one .cp-film-popover p { margin:8px 0 5px;font-size:11px;line-height:1.7;color:#afbeb5; }
#cp-one .cp-film-popover pre { margin:8px 0;padding:8px;border-radius:4px;background:transparent;white-space:pre-wrap;overflow-wrap:anywhere;font:9px/1.6 'JetBrains Mono',monospace;color:#b7d3bf; }
#cp-one .cp-film-popover small { display:block;color:#87a08f;font-size:10px;line-height:1.6; }
#cp-one .cp-film-popover [hidden] { display:none; }
#cp-one #cp-film-popover-priority { margin-top:8px; }
#cp-one .cp-patch-add .cp-film-popover { background:#191c1f;border-color:#34393c; }
#cp-one .cp-patch-add .cp-film-popover pre,#cp-one .cp-patch-add .cp-film-popover p { color:#cbd0d4; }
#cp-one .cp-patch-add .cp-film-popover small { color:#adb5ba; }
#cp-one .cp-film-voice { position:absolute;z-index:3;right:12px;top:54px;width:min(280px,48%);display:grid;gap:12px;padding:20px 10px 10px;border:0;border-radius:12px;background:rgb(20 22 25 / .88);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);opacity:var(--voice-in,0);visibility:hidden;transform:translateY(calc(-8px * (1 - var(--voice-in,0)))) scale(calc(.97 + .03 * var(--voice-in,0)));transform-origin:right top;pointer-events:none; }
#cp-one .cp-film-voice[aria-hidden=false] { visibility:visible; }
#cp-one .cp-film-voice p { margin:0;font-size:10.5px;line-height:1.5;color:#dedce3; }
#cp-one .cp-film-voice-command { position:relative;justify-self:start;max-width:92%;padding:13px 11px 9px;border:0;border-radius:16px;background:#272630;box-shadow:0 8px 24px #0005; }
#cp-one .cp-film-voice-command>span { position:absolute;top:-10px;left:13px;display:flex;align-items:center;gap:5px;padding:2px 8px;border:0;border-radius:20px;background:#302539;color:#c9b2e4;font-size:8px;line-height:1.5;font-weight:500; }
#cp-one .cp-film-voice-command svg { width:11px;height:11px; }
#cp-one .cp-film-voice-response { justify-self:end;max-width:88%;padding:9px 11px;border:0;border-radius:16px;background:#1b1f23;box-shadow:0 8px 24px #0005;opacity:var(--voice-response-in,0);transform:translateY(calc(6px * (1 - var(--voice-response-in,0)))); }
#cp-one .cp-film-voice-response p { color:#d9dddf; }
#cp-one .cp-film-approach .cp-film-step-two { background:#76b08a;color:#17271c; }
#cp-one .cp-film-step-two+span { color:#9ccaaa; }
#cp-one .cp-patch-fix .cp-film-patch-badges button { border-color:#b8a0638c;background:#3c3423;color:#d3b77f; }
#cp-one .cp-patch-fix .cp-film-patch-badges button[aria-expanded=true] { background:#c6a36b;color:#25261e;box-shadow:0 0 14px #c6a36b30; }
#cp-one .cp-patch-fix .cp-film-popover { border-color:#b8a0638c;background:linear-gradient(130deg,#393323,#28261f); }
#cp-one .cp-patch-fix .cp-film-popover b { background:#c6a36b;color:#25261e; }
#cp-one .cp-patch-fix .cp-film-popover strong { color:#d3b77f; }
#cp-one .cp-patch-fix .cp-film-popover small { color:#b7a68b; }
#cp-one .cp-film-shortcut { position:absolute;z-index:4;top:50%;left:50%;display:grid;grid-template-columns:28px 28px;justify-content:center;justify-items:center;gap:9px 6px;padding:12px 18px;min-width:116px;max-width:calc(100% - 32px);border-radius:10px;background:rgb(18 20 23 / .96);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 8px 24px #0004,inset 0 0 0 1px #ffffff06;opacity:var(--shortcut-in,0);transform:translate(-50%,calc(-50% + 8px * (1 - var(--shortcut-in,0))));pointer-events:none; }
#cp-one .cp-film-shortcut kbd { display:grid;place-items:center;width:28px;height:29px;border-radius:5px;background:linear-gradient(140deg,#55585a99,#393c3f99);box-shadow:0 3px 0 #17191c80,inset 0 1px 0 #d0d4d60a;color:#d0d3d5;font:16px 'DM Sans',sans-serif; }
#cp-one .cp-film-shortcut>span { grid-column:1/-1;font-size:10px;color:#bfc3c6;white-space:nowrap;text-align:center; }
@container (max-width:1000px) {
#cp-one .cp-film-tab .cp-file-letter { display:none; }
#cp-one .cp-film-zoom-label { display:none; }
#cp-one .cp-film-record { column-gap:6px;padding:9px 8px;grid-template-columns:23px minmax(0,1fr) auto; }
#cp-one .cp-film-record-icon { width:23px;height:27px;font-size:8px; }
#cp-one .cp-film-record-range { flex-direction:column;gap:1px;align-items:end; }
#cp-one .cp-film-record-range small { max-width:none;font-size:6px; }
#cp-one .cp-film-record-range strong { font-size:12px; }
}
@container (max-width:650px) {
#cp-one .cp-film-tab { flex:1;justify-content:center;padding-inline:6px;font-size:10px; }
#cp-one .cp-film-record { grid-template-columns:28px minmax(0,1fr) auto;padding:9px 11px;column-gap:10px; }
#cp-one .cp-film-record-icon { width:28px;height:28px; }
#cp-one .cp-film-record-range { flex-direction:row;align-items:center;gap:7px; }
#cp-one .cp-film-record-range small { max-width:25px;font-size:6px; }
#cp-one .cp-film-record-range strong { font-size:14px; }
#cp-one .cp-film-record-name b { font-size:11px; }
#cp-one .cp-film-context-body { gap:6px; }
#cp-one .cp-film-record-detail { font-size:10px; }
#cp-one .cp-film-record-name small { font-size:9px; }
#cp-one .cp-film-screen { padding:33px 6% 54px 8px;border-width:4px; }
#cp-one .cp-film-app { top:64px;left:22%;right:11px;bottom:52px; }
#cp-one .cp-film-app-brand { font-size:12px; }
#cp-one .cp-film-stealth { font-size:8px; }
#cp-one .cp-film-bug { font-size:8px;gap:4px; }
#cp-one .cp-film-app-head { padding-inline:10px;gap:5px; }
#cp-one .cp-film-mode-badge { font-size:7px;padding-inline:5px;gap:5px; }
#cp-one .cp-film-app-viewport { inset:48px 8px 10px; }
#cp-one .cp-film-solve-summary { grid-template-columns:1fr;gap:8px; }
#cp-one .cp-film-guarantees h3 { font-size:13px;margin-block:5px; }
#cp-one .cp-film-guarantees ul { display:flex;flex-wrap:wrap;gap:5px 12px;margin-top:7px; }
#cp-one .cp-film-approach { padding-left:0;border-left:0;display:grid;grid-template-columns:1fr 1fr;gap:0 12px; }
#cp-one .cp-film-approach>small { grid-column:1/-1; }
#cp-one .cp-film-approach>div { gap:6px;margin-top:8px; }
#cp-one .cp-film-impl-code { padding:8px 4px;transform:none; }
#cp-one .cp-film-impl-tabs>#cp-film-change-label { font-size:7px;letter-spacing:0; }
#cp-one .cp-film-impl-tabs [data-impl-file] { padding:5px 6px; }
#cp-one .cp-film-impl-code .cp-film-ln { width:25px;padding-right:8px; }
#cp-one .cp-film-popover { padding:11px 12px; }
#cp-one .cp-film-popover pre { font-size:8.5px;padding:4px 0; }
#cp-one .cp-film-complexity { gap:8px; }
#cp-one .cp-film-metric,#cp-one .cp-film-test-cases { padding:10px; }
#cp-one .cp-film-voice { right:8px;width:48%; }
#cp-one .cp-film-voice p { font-size:10px; }
#cp-one .cp-film-patch-badges button { width:23px;height:23px; }
#cp-one .cp-film-patch { padding-top:37px; }
#cp-one .cp-film-patch-label { top:12px;left:25px;font-size:7px; }
}
@container (max-width:355px) {
#cp-one .cp-film-ln { width:25px;padding-right:8px; }
#cp-one .cp-film-app-head { flex-wrap:wrap;height:65px;padding-block:8px; }
#cp-one .cp-film-stealth { flex-basis:100%;justify-content:flex-end; }
#cp-one .cp-film-app-viewport { top:65px; }
#cp-one .cp-film-voice { top:71px; }
#cp-one .cp-film-impl-tabs>#cp-film-change-label { display:none; }
#cp-one .cp-film-solve-summary { gap:11px; }
#cp-one .cp-film-approach span { font-size:10px; }
#cp-one .cp-film-popover { width:100%; }
}
@media (prefers-reduced-motion:reduce) {
#cp-one .cp-film-app,#cp-one .cp-film-popover,#cp-one .cp-film-voice,#cp-one .cp-film-voice-response { transform:none; }
#cp-one .cp-film-shortcut { transform:translate(-50%,-50%); }
#cp-one .cp-film-record,#cp-one .cp-film-segments i { transition:none; }
}
@media (pointer:coarse) {
#cp-one .cp-film-patch-badges button { width:44px;height:44px; }
#cp-one .cp-film-patch { padding-top:52px; }
}

#cp-one .cp-code-window .cp-fn { color:#93b5cf; }
#cp-one .cp-code-window .cp-str { color:#b7b98f; }
#cp-one .cp-code-window .cp-num { color:#c3a982; }
#cp-one .cp-code-window .cp-comment { color:#596f65; }

/* Website question bank and bounded member previews. */
#cp-one.cp-question-preview { --cp-bg:#101213; --cp-mint:#85bdaf; }
#cp-one .cp-questions { width:min(1140px,calc(100% - 40px)); padding-block:36px clamp(64px,8vw,96px); }
@media (max-width:600px) { #cp-one .cp-questions { padding-top:24px; } }
#cp-one .cp-q-back { display:inline-flex; align-items:center; min-height:44px; color:#a2a6a4; font-size:14px; }
#cp-one .cp-q-back:hover { color:#b5d8ce; }
#cp-one .cp-q-companies { padding:28px 0 38px; margin-bottom:32px; border-bottom:1px solid #313637; }
#cp-one .cp-q-companies .cp-eyebrow { font-size:10px; text-align:center; color:#8c9491; }
#cp-one .cp-q-company-belt { display:flex; align-items:center; justify-content:space-between; gap:30px; overflow:auto; padding:10px 5px; scrollbar-width:thin; }
#cp-one .cp-q-company-belt>* { flex:none; font-size:20px; font-weight:550; letter-spacing:-.6px; color:#969e9b; }
#cp-one .cp-q-company-belt a { color:#bdd8cb; border-bottom:2px solid #558b7b; padding:5px 0; }
#cp-one .cp-q-company { display:flex; gap:18px; align-items:center; }
#cp-one .cp-q-logo { display:grid; place-items:center; flex:none; width:64px; height:64px; border:1px solid #313637; border-radius:13px; background:#232627; color:#9bcaba; font-size:39px; font-weight:650; }
#cp-one .cp-q-head .cp-eyebrow { margin-bottom:6px; font:500 12px/1.5 'JetBrains Mono',monospace; letter-spacing:.12em; }
#cp-one .cp-q-head h1 { font-size:40px; letter-spacing:-1.4px; }
#cp-one .cp-q-head>p { margin:22px 0 19px; color:#a2a6a4; font-size:16px; }
#cp-one .cp-q-tags { display:flex; flex-wrap:wrap; gap:9px; }
#cp-one .cp-q-badge { display:inline-flex; align-items:center; gap:5px; padding:3px 8px; background:#232627; color:#b1b8b5; border-radius:999px; font-size:11px; line-height:1.5; font-weight:450; letter-spacing:0; }
#cp-one .cp-q-badge svg { width:14px; height:14px; flex:none; }
#cp-one .cp-q-coding { color:#9bcdb8; background:#1e372e; }
#cp-one .cp-q-design { color:#a4bfd9; background:#202e3a; }
#cp-one .cp-q-high { color:var(--cp-text); background:#332934; }
#cp-one .cp-q-low, #cp-one .cp-q-single { color:var(--cp-text); }
#cp-one .cp-q-medium { color:var(--cp-text); background:#212e39; }
#cp-one .cp-q-badge:is(.cp-q-stage,.cp-q-role) { border:1px solid; font-family:'JetBrains Mono',ui-monospace,monospace; }
#cp-one .cp-q-badge.cp-q-stage { border-color:#3d496b; background:#1c202b; color:#82a1f1; }
#cp-one .cp-q-badge.cp-q-role { border-color:#454547; background:#1c1c1f; color:#b69bf1; }
#cp-one .cp-q-count { color:#b8bebb; background:#2a2d2e; }
#cp-one .cp-q-upgrade { display:flex; align-items:center; justify-content:space-between; gap:28px; margin:32px 0; padding:25px 28px; background:#1b1e1f; border:1px solid #313637; border-radius:14px; }
#cp-one .cp-q-upgrade h2 { font-size:18px; letter-spacing:-.3px; line-height:1.5; }
#cp-one .cp-q-upgrade p { color:#a2a6a4; margin-top:4px; }
#cp-one .cp-q-plans { flex:none; background:linear-gradient(180deg,#356c5f,#29584d); border-color:#4a7b6e; color:#deebe5; }
#cp-one .cp-q-plans:hover { background:#376c5f; }
#cp-one .cp-q-list-heading { display:flex; justify-content:space-between; gap:16px; color:#8e9693; font-size:13px; margin-top:38px; }
#cp-one .cp-q-row { padding:28px 0; border-bottom:1px solid #313637; }
#cp-one .cp-q-row-top { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 12px; }
#cp-one .cp-q-row-top .cp-q-tags { flex-wrap:wrap; gap:8px; }
#cp-one .cp-q-asked { flex:none; color:#8e9693; font-size:13px; white-space:nowrap; }
#cp-one .cp-q-asked time { margin-left:4px; color:#f6c97f; }
#cp-one .cp-q-title { display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin:17px 0 7px; font-size:22px; letter-spacing:-.4px; }
#cp-one .cp-q-blur { filter:blur(5px); user-select:none; color:#b6bdb9; }
#cp-one [data-question-content] { -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
#cp-one [data-question-content] img { -webkit-user-drag:none; pointer-events:none; }
#cp-one .cp-q-row>p { color:#8e9693; font-size:13px; }
#cp-one .cp-q-row-bottom { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:12px; }
#cp-one .cp-q-row-bottom .cp-button { min-height:32px; font-size:12px; padding:7px 11px; gap:6px; background:#232627; border-color:#313637; box-shadow:none; }
#cp-one .cp-q-row-bottom .cp-button:disabled { opacity:.55; cursor:default; }
#cp-one .cp-q-locked .cp-q-row:last-child { mask-image:linear-gradient(#000 0%,#0009 42%,transparent 100%); border-bottom:0; }
#cp-one .cp-q-locked .cp-q-row:last-child .cp-q-row-bottom .cp-button { visibility:hidden; }
#cp-one .cp-q-end { position:relative; text-align:center; margin-top:-12px; }
#cp-one .cp-q-end p { color:#a2a6a4; margin-bottom:18px; }
#cp-one .cp-site-footer .cp-footer-columns nav>span { color:var(--cp-muted); font-size:14px; min-height:28px; }
@container (max-width:650px) {
#cp-one .cp-questions { padding-bottom:64px; }
#cp-one .cp-q-companies { padding-block:20px; margin-bottom:26px; }
#cp-one .cp-q-company-belt { justify-content:flex-start; gap:26px; }
#cp-one .cp-q-head h1 { font-size:34px; }
#cp-one .cp-q-head>p { font-size:15px; }
#cp-one .cp-q-upgrade { align-items:flex-start; flex-direction:column; padding:22px; gap:18px; }
#cp-one .cp-q-upgrade .cp-button { width:100%; }
#cp-one .cp-q-list-heading { flex-direction:column; gap:5px; }
#cp-one .cp-q-row-bottom { flex-wrap:wrap; }
#cp-one .cp-q-title { gap:12px; font-size:19px; }
#cp-one .cp-q-badge { font-size:11px; }
#cp-one .cp-site-footer .cp-footer-columns nav>span { min-height:44px; display:flex; align-items:center; }
}

#cp-one .cp-q-intro { position:relative; isolation:isolate; display:flex; align-items:center; min-height:260px; padding:22px 36px; margin:0 0 30px; overflow:hidden; border:1px solid #a16bea69; border-radius:20px; background:#251d37; box-shadow:inset 0 1px 0 #d2adff16; }
#cp-one .cp-q-hero-art { position:absolute; z-index:-2; inset:0 0 0 auto; width:86%; height:100%; object-fit:cover; object-position:right center; mask-image:linear-gradient(90deg,transparent,#000 24%); }
#cp-one .cp-q-intro::after { content:''; position:absolute; z-index:-1; inset:0; background:linear-gradient(90deg,#21192bea 0%,#231a32c9 35%,#251c3440 64%,transparent 78%); pointer-events:none; }
#cp-one .cp-q-intro-copy { width:64%; min-width:0; }
#cp-one .cp-q-intro .cp-eyebrow { margin-bottom:12px; color:#d4a3f8; font-size:12px; letter-spacing:.06em; }
#cp-one .cp-q-intro h1 { color:#f5effb; font-size:clamp(27px,3.4cqw,40px); font-weight:650; letter-spacing:-.035em; line-height:1.18; text-wrap:initial; }
#cp-one .cp-q-intro h1 span { display:block; margin-top:3px; color:#d4a8f5; }
#cp-one .cp-q-intro-description { margin-top:12px; color:#d0bee4; font-size:clamp(14px,1.45cqw,16px); line-height:1.55; max-width:560px; text-wrap:pretty; }
#cp-one .cp-q-intro-public { min-height:400px; padding-block:34px; text-align:left; }
#cp-one .cp-q-intro-public .cp-q-intro-copy { width:62%; }
#cp-one .cp-q-intro-public .cp-q-intro-description { max-width:600px; line-height:1.65; }
#cp-one .cp-q-intro-public .cp-q-intro-description p + p { margin-top:16px; }
#cp-one .cp-q-intro-public .cp-q-hero-art { width:58%; }
#cp-one .cp-q-intro-public::after { background:linear-gradient(90deg,#251d37 0%,#251d37 38%,#251d37e6 51%,#251d3733 65%,transparent 76%); }
#cp-one .cp-q-total { display:inline-block; max-width:100%; margin:12px 0 0; padding:6px 19px; border:1px solid #ac70e5; border-radius:999px; background:#251d374d; color:#e8dff4; font-size:clamp(14px,1.55cqw,18px); line-height:1.45; }
#cp-one .cp-q-total strong { color:#d7a8ff; font-weight:650; }
#cp-one .cp-q-development { margin:-14px 0 24px; color:var(--cp-muted); font-size:12px; }
@container (max-width:900px) {
#cp-one .cp-q-intro { min-height:238px; padding:22px 26px; }
#cp-one .cp-q-intro-copy { width:68%; }
#cp-one .cp-q-intro h1 { font-size:clamp(24px,3.6cqw,32px); }
}
@container (max-width:700px) {
#cp-one .cp-q-intro { align-items:flex-start; min-height:0; padding:22px 24px 110px; border-radius:17px; margin-bottom:25px; }
#cp-one .cp-q-intro-copy { width:100%; }
#cp-one .cp-q-intro .cp-eyebrow { margin-bottom:10px; font-size:11px; }
#cp-one .cp-q-intro h1 { font-size:clamp(24px,4.8cqw,31px); }
#cp-one .cp-q-intro-description { margin-top:12px; max-width:410px; font-size:14px; }
#cp-one .cp-q-total { margin-top:12px; padding:6px 13px; font-size:14px; }
#cp-one .cp-q-hero-art { inset:auto 0 0; width:100%; height:168px; object-fit:cover; object-position:right center; mask-image:none; }
#cp-one .cp-q-intro::after { background:linear-gradient(180deg,#251d37 0%,#251d37 42%,#251d37db 56%,#251d3733 76%,transparent 100%); }
#cp-one .cp-q-intro-public { min-height:0; padding:24px 24px 190px; }
#cp-one .cp-q-intro-public .cp-q-intro-copy { width:100%; }
#cp-one .cp-q-intro-public .cp-q-intro-description { max-width:none; }
#cp-one .cp-q-intro-public .cp-q-hero-art { width:100%; height:210px; }
#cp-one .cp-q-intro-public::after { background:linear-gradient(180deg,#251d37 0%,#251d37 calc(100% - 210px),transparent calc(100% - 95px)); }
}
#cp-one .cp-q-discovery { padding:24px 0 28px; margin-bottom:30px; }
#cp-one .cp-q-browse-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
#cp-one .cp-q-browse-head h2 { font:600 17px/1.3 'DM Sans',sans-serif; letter-spacing:-.01em; }
#cp-one .cp-q-browse-head>span { color:#aeb8bd; font-size:12px; }
#cp-one .cp-q-search { display:grid; grid-template-columns:minmax(0,1fr) 170px; gap:10px; margin:14px 0; }
#cp-one .cp-q-filters label { display:block; color:var(--cp-muted); font-size:13px; }
#cp-one .cp-q-filters input, #cp-one .cp-q-filters select { min-width:0; width:100%; min-height:44px; padding:10px 12px; border:0; border-radius:8px; background:#1b201e; color:#e0e9e4; font:inherit; }
#cp-one .cp-q-search-field { position:relative; display:block; flex:1; min-width:0; }
#cp-one .cp-q-search-field input { width:100%; min-width:0; min-height:40px; margin:0; padding:0 40px 0 42px; appearance:none; border:0; border-radius:8px; background:#1b1e1f; box-shadow:inset 0 0 0 1px #303635; color:#edf0ef; font:400 13px/1.3 'DM Sans',sans-serif; }
#cp-one .cp-q-search-field input::placeholder { color:#96a8b1; font-weight:400; }
body #cp-one .cp-q-search-field input:focus { outline:0; box-shadow:inset 0 0 0 1px #3f7a62; background:#191c1d; }
#cp-one .cp-q-search-field input:focus::placeholder { color:transparent; }
#cp-one .cp-q-search-icon { position:absolute; left:12px; top:50%; transform:translateY(-50%); width:20px; height:20px; color:#96a8b1; pointer-events:none; }
#cp-one .cp-q-search-field input::-webkit-search-cancel-button { appearance:none; }
#cp-one .cp-q-clear { position:absolute; inset:0 0 0 auto; display:grid; place-items:center; width:44px; padding:0; border:0; border-radius:0 8px 8px 0; background:transparent; color:var(--cp-muted); cursor:pointer; }
#cp-one .cp-q-clear svg { width:16px; height:16px; }
#cp-one .cp-q-clear:hover { color:var(--cp-mint); }
#cp-one .cp-q-results { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:14px; }
#cp-one .cp-q-result { display:flex; align-items:center; gap:12px; border:1px solid #222225; border-radius:12px; padding:15px 16px; background:#191c1d; text-align:left; }
#cp-one .cp-q-result:hover { background:#242a27; }
#cp-one .cp-q-company-copy { flex:1; min-width:0; }
#cp-one .cp-q-result strong { display:flex; align-items:center; justify-content:space-between; gap:6px; color:#edf0ef; font:500 14px/1.4 'DM Sans',sans-serif; }
#cp-one .cp-q-company-name { display:inline-flex; align-items:center; gap:7px; flex-wrap:wrap; min-width:0; }
#cp-one .cp-q-result strong > svg { flex:none; width:15px; height:15px; color:#8b959a; }
#cp-one .cp-q-result:hover strong > svg { color:#edf0ef; }
#cp-one .cp-q-result small { display:block; margin-top:3px; color:#aeb8bd; font:400 12px/1.5 'DM Sans',sans-serif; }
#cp-one .cp-q-company-meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:3px; }
#cp-one .cp-q-company-meta small { margin:0; }
#cp-one .cp-q-hot { display:inline-flex; align-items:center; gap:3px; padding:1px 6px; border-radius:999px; background:#3b2821; color:#ffba88; font:500 10px/1.5 'DM Sans',sans-serif; white-space:nowrap; }
#cp-one .cp-q-hot svg { flex:none; width:12px; height:12px; }
#cp-one .cp-q-result .cp-q-logo { width:39px; height:39px; border:0; border-radius:10px; background:#272d2b; color:#c1d7ca; font:500 22px 'DM Sans',sans-serif; }
#cp-one .cp-q-logo img { object-fit:contain; width:75%; height:75%; }
#cp-one .cp-q-result .cp-q-logo img { width:28px; height:28px; }
#cp-one .cp-q-head h2 { font-size:32px; line-height:1.2; letter-spacing:-1px; }
#cp-one .cp-q-head>.cp-q-tags { margin-top:18px; }
#cp-one .cp-q-filters { display:flex; align-items:end; flex-wrap:wrap; gap:12px; margin-top:24px; }
#cp-one .cp-q-filters .cp-q-query { flex-basis:100%; min-width:0; }
#cp-one .cp-q-filters input, #cp-one .cp-q-filters select { display:block; margin-top:6px; }
#cp-one .cp-q-pagination { display:flex; justify-content:center; align-items:center; gap:20px; margin-top:28px; }
#cp-one .cp-q-company-pages { gap:10px; margin-top:20px; color:#aeb8bd; font:400 12px/1.4 'DM Sans',sans-serif; }
#cp-one .cp-q-pagebtn { display:inline-flex; align-items:center; justify-content:center; flex:none; width:30px; height:30px; padding:0; border:0; border-radius:7px; background:#202425; color:#b9c2c1; cursor:pointer; transition:background .12s,color .12s; }
#cp-one .cp-q-pagebtn:hover:not(:disabled) { background:#2c3132; color:#e6eae8; }
#cp-one .cp-q-pagebtn:disabled { background:#171a1b; color:#4f5659; opacity:1; cursor:default; }
#cp-one .cp-q-pagebtn svg { width:12px; height:12px; fill:currentColor; stroke:none; }
#cp-one .cp-q-prompt { margin-top:28px; }
#cp-one .cp-q-prompt img { display:block; width:100%; height:auto; border-radius:12px; }
#cp-one .cp-q-end h2 { font-size:24px; margin-bottom:12px; }
#cp-one .cp-q-list { margin-bottom:24px; }
@media(max-width:600px) { #cp-one .cp-q-row-top .cp-q-tags { flex-wrap:wrap; } #cp-one .cp-q-search { max-width:none; } }

#cp-one .cp-q-checks { border:0; padding:0; margin:0; }
#cp-one .cp-q-checks legend { color:var(--cp-muted); font-size:12px; margin-bottom:7px; }
#cp-one .cp-q-checks>div { display:flex; flex-wrap:wrap; gap:7px; }
#cp-one .cp-q-checks .cp-q-chip { position:relative; display:inline-flex; align-items:center; gap:5px; padding:5px 9px; border-radius:999px; background:#232627; color:#737b77; font-size:11px; cursor:pointer; }
#cp-one .cp-q-chip svg { width:14px; height:14px; }
#cp-one .cp-q-chip input { position:absolute; width:1px; height:1px; min-height:0; margin:0; padding:0; overflow:hidden; clip-path:inset(50%); }
#cp-one .cp-q-chip:has(input:focus-visible) { outline:2px solid var(--cp-mint); outline-offset:3px; }
#cp-one .cp-q-chip:has(input:checked) { color:var(--cp-text); background:#303633; }
#cp-one .cp-q-chip.cp-q-coding:has(input:checked) { color:#9bcdb8; background:#1e372e; }
#cp-one .cp-q-chip.cp-q-system_design:has(input:checked) { color:#a4bfd9; background:#202e3a; }
#cp-one .cp-q-chip.cp-q-high:has(input:checked) { background:#332934; }
#cp-one .cp-q-chip.cp-q-medium:has(input:checked) { background:#212e39; }
#cp-one .cp-q-chip.cp-q-low:has(input:checked) { background:#28332c; }

/* Company filters: search and sort on top, then the chip groups (a left rail on a wide page). */
#cp-one .cp-q-filters { display:block; margin:14px 0 18px; }
#cp-one .cp-q-tools { display:grid; grid-template-columns:minmax(0,1fr) 180px; gap:10px; align-items:end; margin:14px 0; }
#cp-one .cp-q-rail { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 18px; margin:14px 0 18px; }
#cp-one .cp-q-filters .cp-q-query { display:block; }
#cp-one .cp-q-filters .cp-q-field { display:flex; flex-direction:column; gap:7px; font-size:12px; }
#cp-one .cp-q-tools input { min-height:40px; margin:0; border-radius:7px; background:#222627; font-size:13px; }
#cp-one .cp-q-tools .cp-q-search-icon { top:10px; transform:none; }
#cp-one .cp-q-checks { min-width:0; }
#cp-one .cp-q-checks .cp-q-chip { min-height:28px; padding:4px 9px; font:400 11px/1.3 'DM Sans',sans-serif; box-sizing:border-box; user-select:none; }
#cp-one .cp-q-chip:hover { filter:brightness(1.15); }
#cp-one .cp-q-chip:has(input:disabled) { cursor:default; opacity:.45; }
#cp-one .cp-q-picker { position:relative; min-width:0; width:100%; }
#cp-one .cp-q-picker > button { display:flex; align-items:center; width:100%; margin:0; padding:0 13px; gap:10px; min-height:40px; border:0; border-radius:7px; background:#222627; color:var(--cp-text); text-align:left; font:400 13px/1.3 'DM Sans',sans-serif; cursor:pointer; }
#cp-one .cp-q-picker > button span { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#cp-one .cp-q-picker > button svg { width:12px; height:12px; margin-left:auto; stroke:var(--cp-muted); fill:none; stroke-width:1.7; }
#cp-one .cp-q-picker > button:hover,#cp-one .cp-q-picker > button[aria-expanded="true"] { background:#292e2f; }
#cp-one .cp-q-picker-menu { position:absolute; top:calc(100% + 5px); left:0; z-index:10; min-width:100%; max-height:260px; overflow:auto; padding:0; border:0; border-radius:8px; background:#222627; box-shadow:0 18px 50px #000a; color:var(--cp-text); font:400 13px/1.4 'DM Sans',sans-serif; }
#cp-one .cp-q-picker-menu button { display:block; width:100%; padding:9px 15px; border:0; border-radius:0; background:transparent; color:inherit; text-align:left; font:inherit; cursor:pointer; white-space:nowrap; }
#cp-one .cp-q-picker-menu button:hover,#cp-one .cp-q-picker-menu button:focus-visible { background:#292e2f; outline:0; }
#cp-one .cp-q-picker-menu button[aria-selected="true"] { color:#9bcdb8; background:#1e372e; }
#cp-one .cp-q-search select, #cp-one .cp-q-search .cp-q-picker>button { min-width:0; width:100%; min-height:40px; padding:0 13px; border:0; border-radius:8px; background:#242727; box-shadow:inset 0 0 0 1px #303635; color:#c3cbcc; font:400 13px/1.3 'DM Sans',sans-serif; }
#cp-one .cp-q-search .cp-q-picker>button:hover, #cp-one .cp-q-search .cp-q-picker>button[aria-expanded="true"] { background:#303635; }
#cp-one .cp-q-search .cp-q-picker-menu { padding:4px 0; background:#242727; }
#cp-one .cp-q-search .cp-q-picker-menu button { padding:8px 12px; }
#cp-one .cp-q-search .cp-q-picker-menu button[aria-selected="true"] { color:#9bcdb8; background:transparent; }
@container (max-width:800px) { #cp-one .cp-q-results { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@container (max-width:480px) { #cp-one .cp-q-search { grid-template-columns:1fr; } #cp-one .cp-q-results { grid-template-columns:1fr; } }
#cp-one .cp-q-filters [hidden] { display:none!important; }
@media(max-width:560px) { #cp-one .cp-q-tools,#cp-one .cp-q-rail { grid-template-columns:1fr; } }
#cp-one .cp-q-checks:has([data-filter-all]:checked) .cp-q-coding:not(:has(input:disabled)) {background:#244537;color:#aee8c6;}
#cp-one .cp-q-checks:has([data-filter-all]:checked) .cp-q-system_design:not(:has(input:disabled)) {background:#203b4e;color:#9ed4f3;}
/* Round and role chips are bordered tag pills: lit when chosen or while All is on, muted otherwise. */
#cp-one .cp-q-checks .cp-q-chip:is(.cp-q-round,.cp-q-role) { border:1px solid #303032; background:#1c1c1f; color:#737b77; font:400 11px/1.3 'JetBrains Mono',ui-monospace,monospace; }
#cp-one .cp-q-chip.cp-q-round:has(input:checked),#cp-one .cp-q-checks:has([data-filter-all]:checked) .cp-q-round { border-color:#3d496b; background:#1c202b; color:#82a1f1; }
#cp-one .cp-q-chip.cp-q-role:has(input:checked),#cp-one .cp-q-checks:has([data-filter-all]:checked) .cp-q-role { border-color:#454547; background:#1c1c1f; color:#b69bf1; }
@container (min-width:900px) {
#cp-one .cp-q-browse { display:grid; grid-template-columns:212px minmax(0,1fr); }
#cp-one .cp-q-browse .cp-q-filters { display:contents; }
#cp-one .cp-q-browse .cp-q-tools { grid-column:1 / -1; margin:14px 0 26px; }
#cp-one .cp-q-rail { grid-template-columns:minmax(0,1fr); align-content:start; gap:22px; margin:0; padding:0 24px 24px 0; border-right:1px solid #313637; }
#cp-one .cp-q-main { min-width:0; padding-left:28px; }
#cp-one .cp-q-main .cp-q-list-heading { margin-top:0; }
}

/* Polish pass (2026-11): motion foundation, scroll reveals, opening choreography, surfaces. */
#cp-one { --cp-ease-out:cubic-bezier(.16,1,.3,1); --cp-ease-io:cubic-bezier(.77,0,.175,1); --cp-dur-fast:160ms; --cp-dur:240ms; position:relative; }
#cp-one ::selection { background:#93cbb45c; color:#f4f8f6; }
html:has(body[data-page="landing"]) { scrollbar-color:#3b4346 #101213; }
/* Buttons answer the press. */
#cp-one .cp-button { transition:transform var(--cp-dur-fast) var(--cp-ease-out),background-color var(--cp-dur-fast) ease,border-color var(--cp-dur-fast) ease,box-shadow var(--cp-dur) ease,filter var(--cp-dur-fast) ease; }
#cp-one .cp-button:active { transform:scale(.97); }
@media (hover:hover) and (pointer:fine) {
#cp-one .cp-button.cp-primary:hover { box-shadow:inset 0 1px 0 #c0e5cf2e,0 8px 22px -8px #3a9a72a8,0 2px 4px #0003; }
}
/* Scroll reveal: hidden only after landing.js has armed the observer (root.cp-reveal); a keyframe with a
   backwards fill holds the start state through its delay and leaves the element's own styles untouched after. */
@keyframes cp-reveal { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:none; } }
#cp-one.cp-reveal [data-reveal]:not(.is-in) { opacity:0; }
#cp-one.cp-reveal [data-reveal].is-in { animation:cp-reveal .9s var(--cp-ease-out) backwards; animation-delay:calc(var(--reveal-delay,0) * 1ms); }
/* Opening choreography: the first screen assembles top to bottom. Pure CSS, so it also plays without script. */
@keyframes cp-enter-rise { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
@keyframes cp-enter-focus { from { opacity:0; filter:blur(7px); } to { opacity:1; filter:blur(0); } }
#cp-one .cp-open :is(.cp-open-kicker,h1,.cp-open-support,.cp-open-cta,.cp-open-film) { animation:cp-enter-rise .9s var(--cp-ease-out) backwards; }
#cp-one .cp-open h1 { animation-delay:.08s; }
#cp-one .cp-open .cp-open-support { animation-delay:.16s; }
#cp-one .cp-open .cp-open-cta { animation-delay:.24s; }
#cp-one .cp-open .cp-open-film { animation-delay:.38s; }
/* Wired diagram parts reveal by focus, not travel, so the wires measured at load stay true. */
#cp-one.cp-reveal [data-reveal-focus]:not(.is-in) { opacity:0; }
#cp-one.cp-reveal [data-reveal-focus].is-in { animation:cp-enter-focus .9s var(--cp-ease-out) backwards; animation-delay:calc(var(--reveal-delay,0) * 1ms); animation-play-state:running!important; }
#cp-one .cp-companies { animation:cp-enter-rise .9s var(--cp-ease-out) .5s backwards; }
@media (prefers-reduced-motion:reduce) {
#cp-one.cp-reveal [data-reveal]:not(.is-in),#cp-one.cp-reveal [data-reveal-focus]:not(.is-in) { opacity:1; }
}
@media print { #cp-one.cp-reveal [data-reveal]:not(.is-in),#cp-one.cp-reveal [data-reveal-focus]:not(.is-in) { opacity:1; } }

/* The opening: the claim, then the film in a window. */
#cp-one .cp-open { position:relative; isolation:isolate; text-align:center; padding:24px 0 16px; }
/* Small, staggered pools of light stay inside the opening; no broad color wash. */
#cp-one .cp-open-spots { position:absolute; z-index:-2; inset:0 0 auto; height:440px; pointer-events:none; }
#cp-one .cp-open-spots i { position:absolute; width:100px; height:100px; border-radius:50%; background:radial-gradient(circle,#759feb30,transparent 70%); opacity:.5; animation:cp-spot-glow 13s ease-in-out infinite; }
#cp-one .cp-open-spots i:nth-child(1) { left:3%; top:50px; animation-delay:-3s; }
#cp-one .cp-open-spots i:nth-child(2) { right:9%; top:14px; width:76px; height:76px; background:radial-gradient(circle,#da9bd12b,transparent 70%); animation-duration:17s; animation-delay:-11s; }
#cp-one .cp-open-spots i:nth-child(3) { left:17%; top:270px; width:84px; height:84px; animation-duration:19s; animation-delay:-7s; }
#cp-one .cp-open-spots i:nth-child(4) { right:1%; top:225px; background:radial-gradient(circle,#c09ae930,transparent 70%); animation-duration:15s; animation-delay:-1s; }
#cp-one .cp-open-spots i:nth-child(5) { left:45%; top:5px; width:64px; height:64px; animation-duration:21s; animation-delay:-15s; }
@keyframes cp-spot-glow { 0%,100% { opacity:.08; } 40% { opacity:.8; } 70% { opacity:.2; } }
#cp-one.cp-motion-paused .cp-open-spots i { animation-play-state:paused; }
@media (prefers-reduced-motion:reduce) { #cp-one .cp-open-spots i { animation:none; opacity:.35; } }
#cp-one .cp-open-code { position:absolute; z-index:-1; top:64px; left:50%; width:100cqw; height:0; transform:translateX(-50%); pointer-events:none; }
#cp-one .cp-open-kicker { display:inline-flex; align-items:center; gap:8px; max-width:100%; margin:0 auto 24px; padding:6px 11px; border:1px solid #305e54; border-radius:6px; background:#1a3530; box-shadow:inset 0 1px 0 #91f7d51a; color:#c4ecdd; font:550 11.5px/1.5 'DM Sans',sans-serif; letter-spacing:.1em; text-transform:uppercase; }
#cp-one .cp-open-kicker-phone { display:none; }
#cp-one .cp-open-kicker i { flex:none; width:7px; height:7px; border-radius:50%; background:#5fd49a; box-shadow:0 0 0 2px #5fd49a2e,0 0 9px #5fd49a99; }
#cp-one .cp-open h1 { color:#edf0ef; font-size:clamp(34px,4.1cqw,60px); line-height:1.09; letter-spacing:-.053em; font-weight:550; margin:0 auto; text-wrap:wrap; }
#cp-one .cp-open h1 span { display:block; background:linear-gradient(92deg,#a3ccff,#c6adff 52%,#ffb0cf); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 0 6px #bca8ee24) drop-shadow(0 0 16px #bca8ee12); }
#cp-one .cp-open-details { display:flex; flex-direction:column; align-items:center; gap:26px; margin:20px auto 0; text-align:center; }
#cp-one .cp-open-support { align-self:center; max-width:740px; margin:0; color:#b0b7be; font-size:15px; font-weight:400; line-height:1.55; text-align:center; }
#cp-one .cp-open-support-line { display:block; white-space:nowrap; }
#cp-one .cp-open .cp-open-cta { flex:none; align-self:center; justify-items:center; gap:17px; padding:0; }
#cp-one .cp-open .cp-flow-cta-buttons { justify-content:center; }
#cp-one .cp-open .cp-flow-cta-buttons .cp-button { min-height:44px; padding:10px 16px; font-size:13px; }
#cp-one .cp-open-assurance-short { display:none; }
#cp-one .cp-open-film { position:relative; isolation:isolate; margin:44px 0 0; border-radius:14px; box-shadow:none; }
/* A fixed baseline joins every demo tab; the selected underline sits over it. */
#cp-one .cp-open-modes { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); width:100%; margin:0; border:0; border-radius:14px 14px 0 0; background:#1a1f20; box-shadow:inset 0 -2px 0 #50565d; }
#cp-one .cp-open-modes button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-width:0; min-height:51px; padding:10px clamp(6px,1cqw,14px); margin:0; border:0; border-right:1px solid #ffffff04; border-bottom:2px solid transparent; background:none; color:#a8b0b5; font:500 clamp(11px,1cqw,13px)/20px 'DM Sans',sans-serif; letter-spacing:.02em; white-space:nowrap; cursor:pointer; transition:color 150ms,border-color 150ms,background-color 150ms; }
#cp-one .cp-open-modes button:first-child { border-top-left-radius:13px; }
#cp-one .cp-open-modes button:last-child { border-right:0; border-top-right-radius:13px; }
#cp-one .cp-open-modes button:hover { color:#edf1ee; background-color:#ffffff05; }
#cp-one .cp-open-modes button[aria-pressed="true"] { border-bottom-color:#b9b2ef; background:linear-gradient(#b2aaf00b,#b2aaf013); color:#ecebff; }
#cp-one .cp-open-modes svg { flex:none; width:18px; height:18px; }
#cp-one .cp-open-modes button[aria-pressed="true"] svg { color:#b6b3ff; }
#cp-one .cp-open-modes button:focus-visible { outline:2px solid #b6b3ff; outline-offset:3px; border-radius:3px; }
/* The recording fills the screen directly below the category tabs. */
#cp-one .cp-open-screen { position:relative; isolation:isolate; overflow:hidden; -webkit-user-select:none; user-select:none; border:0; border-radius:0 0 14px 14px; background:#141416; box-shadow:none; }
#cp-one .cp-open-wallpaper { position:absolute; z-index:-1; inset:-8px; width:calc(100% + 16px); height:calc(100% + 16px); max-width:none; object-fit:cover; object-position:center 44%; filter:blur(1.5px) brightness(.76); pointer-events:none; }
#cp-one .cp-open-screen[data-demo="coding"] .cp-open-wallpaper { filter:blur(1.5px) brightness(.96); }
#cp-one .cp-open-video { display:block; width:100%; height:auto; aspect-ratio:1920 / 1200; background:transparent; -webkit-user-select:none; user-select:none; }
#cp-one .cp-open-video::selection, #cp-one .cp-open-screen ::selection { background:transparent; }
/* The Dock sits over the wallpaper the recording leaves free along the bottom. */
#cp-one .cp-open-dock { position:absolute; left:50%; bottom:1.1%; display:flex; gap:.5cqw; padding:.36cqw .5cqw; transform:translateX(-50%); border:1px solid #ffffff26; border-radius:.9cqw; background:#1b1d3ab0; -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:0 8px 24px #00000059; }
#cp-one .cp-open-dock svg { width:1.75cqw; height:1.75cqw; filter:drop-shadow(0 2px 2px #0004); }
/* A click anywhere on the screen pauses the replay. The button covers the screen (so Space and Enter work too) and
   a bare, faded light-gray play triangle scales in over the film, presses under the pointer, and pulses away as the
   film resumes. The triangle is drawn to its tight viewBox, so the glyph box is the triangle's height. */
#cp-one .cp-open-pause { position:absolute; inset:0; z-index:1; display:grid; place-items:center; width:100%; height:100%; padding:0; margin:0; border:0; border-radius:inherit; background:transparent; color:#fff; cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation; -webkit-user-select:none; user-select:none; }
#cp-one .cp-open-pause:focus-visible { outline:2px solid #b6b3ff; outline-offset:-4px; }
/* iOS Safari draws its own start button over a video it refused to autoplay (Low Power or Low Data Mode); the
   covering button plays on tap, so only our triangle shows. */
#cp-one .cp-open-video::-webkit-media-controls-start-playback-button { display:none !important; -webkit-appearance:none; }
#cp-one .cp-open-video::-webkit-media-controls { display:none !important; }
#cp-one .cp-open-glyph { --cp-glyph:.6; display:grid; place-items:center; width:clamp(56px,7.4cqw,100px); aspect-ratio:1; color:#d8dbe0; opacity:0; transform:scale(.82); pointer-events:none; will-change:transform,opacity; }
#cp-one .cp-open-glyph svg { width:100%; height:100%; filter:drop-shadow(0 2px 6px #00000040); }
#cp-one .cp-open-pause[data-state="paused"] .cp-open-glyph { opacity:var(--cp-glyph); transform:scale(1); transition:opacity 220ms cubic-bezier(.23,1,.32,1),transform 220ms cubic-bezier(.23,1,.32,1); }
#cp-one .cp-open-pause[data-state="paused"]:hover .cp-open-glyph { --cp-glyph:.74; }
#cp-one .cp-open-pause[data-state="paused"]:active .cp-open-glyph { transform:scale(.94); transition-duration:110ms; }
#cp-one .cp-open-pause[data-state="resuming"] .cp-open-glyph { animation:cp-open-glyph-out 340ms cubic-bezier(.23,1,.32,1) forwards; }
@keyframes cp-open-glyph-out { from { opacity:var(--cp-glyph); transform:scale(1); } to { opacity:0; transform:scale(1.24); } }
@media (prefers-reduced-motion:reduce) {
#cp-one .cp-open-pause[data-state="paused"] .cp-open-glyph { transition:none; }
#cp-one .cp-open-pause[data-state="resuming"] .cp-open-glyph { animation:none; }
}
@container (max-width:650px) {
#cp-one .cp-open { padding:14px 0 8px; text-align:center; }
#cp-one .cp-open-code { display:none; }
#cp-one .cp-open-kicker { display:flex; justify-content:center; width:fit-content; margin:0 auto 20px; font-size:10.5px; letter-spacing:.08em; }
#cp-one .cp-open-kicker-default { display:none; }
#cp-one .cp-open-kicker-phone { display:inline; }
#cp-one .cp-open h1 { font-size:clamp(27px,7.1cqw,36px); line-height:1.13; margin:0; }
#cp-one .cp-open-details { align-items:center; gap:20px; margin-top:16px; text-align:center; }
#cp-one .cp-open-support { align-self:center; max-width:100%; font-size:clamp(8px,2.85cqw,13px); line-height:1.5; text-align:center; }
#cp-one .cp-open .cp-open-cta { align-self:center; justify-items:center; width:100%; }
#cp-one .cp-open .cp-flow-cta-buttons { justify-content:center; }
#cp-one .cp-open .cp-flow-cta-buttons .cp-button { padding-inline:12px; }
#cp-one .cp-open .cp-flow-assurances { flex-wrap:nowrap; gap:clamp(6px,2cqw,12px); }
#cp-one .cp-open .cp-flow-assurances li { gap:4px; font-size:clamp(10.5px,2.9cqw,12px); }
#cp-one .cp-open .cp-flow-assurances svg { width:14px; height:14px; }
#cp-one .cp-open-assurance-full { display:none; }
#cp-one .cp-open-assurance-short { display:inline; }
#cp-one .cp-open-film { margin-top:36px; }
#cp-one .cp-open-modes button { gap:4px; padding:9px 3px; font-size:clamp(9px,2.5cqw,12px); line-height:16px; letter-spacing:0; }
#cp-one .cp-open-modes svg { width:clamp(11px,3cqw,15px); height:clamp(11px,3cqw,15px); }
}
@container (max-width:550px) {
#cp-one .cp-open-modes button { flex-direction:column; gap:4px; padding:6px 2px; font-size:clamp(10px,2.65cqw,12px); white-space:nowrap; }
#cp-one .cp-open-modes button span { display:none; }
#cp-one .cp-open-modes button::after { content:attr(data-short); }
#cp-one .cp-open-modes svg { width:16px; height:16px; }
}
@container (max-width:360px) {
#cp-one .cp-open .cp-flow-cta-buttons { gap:8px; }
#cp-one .cp-open .cp-flow-cta-buttons .cp-button { padding-inline:8px; }
#cp-one .cp-open-modes button { gap:3px; padding-inline:0; letter-spacing:-.015em; }
}
@media (max-width:480px) and (orientation:portrait) {
#cp-one .cp-open-video { aspect-ratio:4 / 5; min-height:380px; object-fit:contain; object-position:center top; }
#cp-one .cp-open-dock { bottom:10px; gap:5px; padding:4px 6px; border-radius:10px; }
#cp-one .cp-open-dock svg { width:19px; height:19px; }
}

/* Restored full-width desktop privacy illustration. */
#cp-one .privacy-demo { padding:55px 0 72px; text-align: center; scroll-margin-top: 120px; }
#cp-one .privacy-demo .cp-eyebrow { color: #a69ade; }
#cp-one .privacy-demo h2 { max-width:none; }
#cp-one .privacy-demo .section-lede { margin:18px auto 0; max-width:640px; font-size:15px; color:var(--cp-muted); }
#cp-one .veil-stage { --veil-position: 72%; position: relative; max-width: 900px; margin: 48px auto 0; border: 2px solid #66696d; border-radius: 12px; box-shadow: 0 26px 90px #0007, 0 0 100px #9895ba0b; overflow: hidden; isolation: isolate; }
#cp-one .veil-desktop { position: relative; aspect-ratio: 1.6; overflow: hidden; text-align: left; font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif; container-type: inline-size; background: radial-gradient(ellipse at 90% 115%, #64bc60 0%, transparent 54%), radial-gradient(ellipse at 4% 85%, #225629 0%, transparent 45%), linear-gradient(28deg, #173849 13%, #3558a3 14%, #46447c 43%, #706aa2 44%, #477fc4 70%, #5e94cb); }
#cp-one .veil-menubar { height: 4.5%; padding: 0 1.5%; display: flex; align-items: center; justify-content: space-between; background: #17243f35; color: #fff; font-size: 1cqw; }
#cp-one .veil-menubar > span { display: flex; align-items: center; gap: 1.1cqw; }
#cp-one .veil-menubar .icon { width: 1.2cqw; height: 1.2cqw; }
#cp-one .veil-editor { position: absolute; left: 3%; top: 19%; width: 79%; height: 76%; background: #1d2024; border: 1px solid #7776; border-radius: 7px; overflow: hidden; box-shadow: 0 10px 25px #0008; }
#cp-one .veil-titlebar { display: flex; align-items: center; justify-content: space-between; height: 3cqw; padding: 0 1.2cqw; background: #292c30; color: #a9acb2; font-size: 1cqw; }
#cp-one .veil-lights { display: flex; gap: .45cqw; }
#cp-one .veil-lights i { width: .75cqw; height: .75cqw; border-radius: 50%; background: #ff625a; }
#cp-one .veil-lights i:nth-child(2) { background: #ffbd44; }
#cp-one .veil-lights i:nth-child(3) { background: #00c84e; }
#cp-one .veil-editor-body { display: flex; height: calc(100% - 5cqw); }
#cp-one .veil-editor-body aside { width: 23%; flex-shrink: 0; padding: 1.5cqw; background: #202327; color: #a6abb3; font-size: 1.1cqw; }
#cp-one .veil-editor-body aside > * { display: block; margin-bottom: 1.2cqw; }
#cp-one .veil-editor-body aside small { font-size: .85cqw; letter-spacing: .1em; }
#cp-one .veil-editor-body aside b { font-size: .95cqw; }
#cp-one .veil-editor-body aside span { padding-left: 1cqw; }
#cp-one .veil-editor-body aside span:first-of-type { color: #a8ddc5; }
#cp-one .veil-source { min-width: 0; flex: 1; overflow: hidden; }
#cp-one .veil-file { width: 15cqw; padding: .8cqw 1.2cqw; border-top: 1px solid #8ad7b1; font-size: 1.1cqw; color: #cdd1d7; }
#cp-one .veil-file span { float: right; }
#cp-one .veil-source .code { padding: 1cqw; font-size: 1.12cqw; line-height: 1.75; }
#cp-one .veil-source .code-line { gap: 1cqw; }
#cp-one .veil-source .ln { width: 2cqw; min-width: 2cqw; }
#cp-one .veil-statusbar { height: 2cqw; padding: 0 1cqw; display: flex; align-items: center; justify-content: space-between; font-size: .85cqw; background: #2c343d; color: #bec5cf; }
#cp-one .veil-app, #cp-one .veil-cover { position: absolute; left: 46%; top: 30%; width: 50%; height: 60%; border: 2px solid #a5acb8; border-radius: 9px; overflow: hidden; box-shadow: 0 12px 30px #0007; }
#cp-one .veil-app { background: #131819; color: #e8ecea; }
#cp-one .veil-app .veil-titlebar { background: #24292b; }
#cp-one .veil-app .veil-titlebar b { color: #a8dfc5; font-family: monospace; font-weight: 500; font-size: 1.25cqw; }
#cp-one .veil-app-nav { display: flex; gap: 2.8cqw; padding: 1.1cqw 2cqw; border-bottom: 1px solid #ffffff15; font-size: 1.1cqw; color: #939e9b; }
#cp-one .veil-app-nav b { color: #a6e3c8; font-weight: 500; }
#cp-one .veil-app-content { padding: 1.4cqw 2.4cqw; font-size: 1.2cqw; line-height: 1.4; }
#cp-one .veil-session { font-size: .85cqw; letter-spacing: .12em; color: #95bbaa; }
#cp-one .veil-app-content h3 { font-size: 2.2cqw; font-weight: 500; line-height: 1.2; letter-spacing: -.035em; margin: 1.1cqw 0; }
#cp-one .veil-app-content p { font-size: 1.2cqw; line-height: 1.6; color: #a7b3b0; margin: 0; max-width: 35cqw; }
#cp-one .veil-answer { margin-top: 1.4cqw; padding: 1.2cqw; border-left: 2px solid #80caa8; background: #a8d6bd08; }
#cp-one .veil-answer small { display: block; font-size: .8cqw; color: #82948c; margin-bottom: .6cqw; letter-spacing: .12em; }
#cp-one .veil-answer code { display: block; font-size: 1.1cqw; line-height: 1.65; color: #b0d3c5; }
#cp-one .veil-complexity { display: flex; gap: 3cqw; margin-top: .8cqw; font-size: 1cqw; color: #8b9791; }
#cp-one .veil-complexity b { margin-left: .6cqw; color: #b1cbbd; }
#cp-one .veil-covered { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--veil-position)) 0 0); }
#cp-one .veil-cover { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1cqw; color: #e0e3e7; background: linear-gradient(115deg, #7a7d83, #535c68); }
#cp-one .veil-cover-mark { font-size: 3cqw; line-height: 1; }
#cp-one .veil-cover strong { font-size: 1.25cqw; font-weight: 500; }
#cp-one .veil-cover > span:last-child { font-size: 1cqw; color: #c5c9d1; }
#cp-one .veil-divider { position: absolute; top: 0; bottom: 0; left: var(--veil-position); width: 1px; background: #ffffff80; box-shadow: 0 0 20px #0003; }
#cp-one .veil-divider span { position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%); display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #cdd5da80; border-radius: 50%; background: #252c32c9; color: #fff; font-size: 13px; }
#cp-one .veil-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
#cp-one .veil-stage:focus-within { outline: 3px solid #a4e6c5; outline-offset: 6px; }
#cp-one .veil-captions { display: flex; justify-content: space-between; max-width: 900px; margin: 18px auto 0; color: #b2b7bb; font-size: 12px; }
#cp-one .veil-captions i { display: inline-block; width: 6px; height: 6px; margin: 0 7px; border-radius: 50%; background: #a29cbe; vertical-align: middle; }
#cp-one .veil-captions > span:last-child i { background: #92dcb6; }
#cp-one .veil-footnote { margin: 10px auto 0; max-width: 580px; color: #7b8587; font-size: 11px; line-height: 1.6; }
@media (max-width: 600px) { #cp-one .veil-stage { margin-top: 30px; border-radius: 7px; } }
@container (max-width:780px) {
  #cp-one .veil-divider span { width:64px; height:64px; border-width:2px; font-size:24px; background:#252c32ed; box-shadow:0 4px 18px #0008; }
  #cp-one .veil-range { appearance:none; -webkit-appearance:none; }
  #cp-one .veil-range::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:64px; height:64px; }
  #cp-one .veil-range::-moz-range-thumb { width:64px; height:64px; border:0; }
}
#cp-one .veil-source .code { margin:0; list-style:none; color:#dbe4de; font-family:'JetBrains Mono',monospace; }
#cp-one .veil-source .code-line { display:flex; }
#cp-one .veil-source .code-line code { flex:1; min-width:0; overflow:hidden; white-space:pre; text-overflow:ellipsis; font:inherit; }
#cp-one .veil-source .ln { flex:none; text-align:right; color:#6b7873; }
#cp-one .veil-source .k { color:#9aa6f5; }
#cp-one .veil-source .f { color:#7ab0ff; }
#cp-one .veil-source .t { color:var(--cp-mint); }
#cp-one .veil-source .n,#cp-one .veil-source .s { color:#f0b35a; }
#cp-one .veil-source .c { color:#6b7873; font-style:italic; }
#cp-one .veil-menubar svg { width:1.2cqw; height:1.2cqw; }

/* Comparison intro and shared story layout. */
#cp-one .cp-comparison { padding-block:64px 40px; }
#cp-one .cp-compare-intro { max-width:920px; margin-bottom:40px; }
#cp-one .cp-compare-intro .cp-eyebrow { color:#a4adba; }
#cp-one .cp-compare-intro h2 { font-size:clamp(30px,3.8cqw,44px); line-height:1.08; letter-spacing:-.055em; }
#cp-one .cp-compare-intro h2 span { color:#60d2ab; }
#cp-one .cp-compare-intro>p:last-of-type { margin-top:24px; max-width:610px; color:#b3bac0; font-size:17px; line-height:1.65; text-wrap:pretty; }
#cp-one .cp-compare-learn { display:inline-flex; align-items:center; gap:8px; margin-top:16px; color:#60d2ab; font-size:14px; line-height:1.5; text-decoration:underline; text-underline-offset:4px; }
#cp-one .cp-compare-learn { transition:color var(--cp-dur-fast) ease,gap var(--cp-dur-fast) ease; }
#cp-one .cp-compare-learn:hover { color:#a4e9cc; gap:11px; }
#cp-one .cp-compare-learn:focus-visible { outline:2px solid #60d2ab; outline-offset:5px; border-radius:2px; }
#cp-one .cp-compare-learn svg { flex:none; width:15px; height:15px; margin-top:1px; fill:none; stroke:currentColor; stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round; }
#cp-one .cp-compare-feature { --story-accent:#94bbeb; --story-tint:#94bbeb12; position:relative; isolation:isolate; display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr); gap:clamp(32px,5.5cqw,68px); align-items:center; padding-block:96px; background:linear-gradient(90deg,transparent,#919db52e 14%,#919db52e 86%,transparent) bottom / 100% 1px no-repeat; scroll-margin-top:90px; }
/* A faint field of each story's own hue behind it, so consecutive sections change ground rather than repeat. */
#cp-one .cp-compare-feature::before { content:""; position:absolute; inset:0 -10vw; z-index:-1; pointer-events:none; background:radial-gradient(ellipse 52% 60% at 74% 48%,color-mix(in srgb,var(--story-accent) 7%,transparent),transparent 72%); }
#cp-one .cp-compare-amber { --story-accent:#e6be7c; --story-tint:#e6be7c12; }
#cp-one .cp-compare-violet { --story-accent:#bfa6ee; --story-tint:#bfa6ee12; }
#cp-one .cp-compare-mint { --story-accent:#8fcebc; --story-tint:#8fcebc12; }
#cp-one .cp-compare-copy { min-width:0; }
#cp-one .cp-compare-kicker { display:inline-flex; align-items:center; gap:10px; width:fit-content; max-width:100%; margin-bottom:22px; padding:6px 13px; color:var(--story-accent); border:1px solid var(--story-accent); border-radius:999px; font:500 13px/1.5 'JetBrains Mono',monospace; letter-spacing:.07em; text-transform:uppercase; }
#cp-one .cp-compare-kicker>span { flex-shrink:0; color:inherit; }
#cp-one .cp-compare-copy h3 { font-size:clamp(28px,3.2cqw,38px); line-height:1.1; letter-spacing:-.048em; text-wrap:pretty; }
#cp-one .cp-compare-copy h3 em { color:var(--story-accent); font-style:normal; }
#cp-one .cp-compare-copy>p:not(.cp-compare-kicker) { margin-top:20px; color:#b0b7be; font-size:16px; line-height:1.7; text-wrap:pretty; }
#cp-one .cp-compare-copy>p.cp-compare-promise { color:#e4e8ee; font-size:17px; line-height:1.5; margin-top:22px; font-weight:500; }
#cp-one .cp-compare-copy>p.cp-compare-payoff { margin-top:24px; padding-left:16px; border-left:2px solid var(--story-accent); color:var(--story-accent); font-size:15px; line-height:1.6; }
#cp-one .cp-compare-copy strong { font-weight:500; color:#d9dfe8; }
#cp-one .cp-compare-model-link { display:inline-flex; align-items:center; gap:12px; min-height:44px; margin-top:17px; color:var(--story-accent); font-size:13px; }
#cp-one .cp-compare-model-link:hover { color:#fff; }
#cp-one .cp-compare-media { margin:0; min-width:0; }
#cp-one .cp-compare-scene { overflow:hidden; border:1px solid #919db52c; border-radius:15px; background:#181b21; box-shadow:0 20px 55px #0003; }
#cp-one .cp-compare-media>img,#cp-one .cp-compare-media>video { display:block; width:100%; height:auto; border-radius:15px; }
#cp-one .cp-compare-media figcaption { margin-top:14px; color:#939da9; font-size:12px; line-height:1.6; text-align:left; }
#cp-one .cp-visual-label { display:flex; flex-wrap:wrap; align-items:center; gap:7px 13px; color:var(--story-accent); font-size:11px; font-weight:600; line-height:1.6; }
#cp-one .cp-visual-label>span { color:#909cac; font-size:9px; font-weight:400; }
#cp-one .cp-visual-problem { color:#b3a3a1; }
#cp-one .cp-scene-question { padding:22px 25px; background:#20242c; border-bottom:1px solid #919db522; }
#cp-one .cp-scene-question>span { display:block; color:#9da7b7; font-size:10px; margin-bottom:7px; }
#cp-one .cp-scene-question>strong { color:#e6eaf1; font-size:20px; font-weight:500; letter-spacing:-.025em; line-height:1.35; }
#cp-one .cp-context-contrast { display:grid; grid-template-columns:.94fr 1.1fr; }
#cp-one .cp-fragment-view { min-width:0; padding:23px 17px 22px 22px; background:#17191e; }
#cp-one .cp-fragment-window { margin-top:22px; padding:12px 0; border-block:1px solid #777b873f; }
#cp-one .cp-file-label { display:flex; flex-wrap:wrap; gap:4px 8px; padding-bottom:13px; color:#a6afbd; font-size:10px; }
#cp-one .cp-file-label>span { color:#767e8e; }
#cp-one .cp-fragment-window pre { color:#a8abb4; font:9px/2 'JetBrains Mono',monospace; white-space:pre-wrap; overflow-wrap:anywhere; }
#cp-one .cp-crop-line { margin-top:17px; padding-top:9px; border-top:1px dashed #7b7f8b; text-align:center; color:#9499a5; font-size:9px; }
#cp-one .cp-missing-evidence { display:flex; gap:8px; margin-top:25px; color:#be9690; }
#cp-one .cp-missing-evidence>span { font-size:24px; line-height:1; }
#cp-one .cp-missing-evidence p { font-size:10px; line-height:1.8; }
#cp-one .cp-missing-evidence strong { font-weight:500; }
#cp-one .cp-retained-view { min-width:0; padding:23px 20px; border-left:1px solid #919db523; background:linear-gradient(145deg,var(--story-tint),transparent); }
#cp-one .cp-evidence-stack { margin-top:16px; }
#cp-one .cp-evidence-stack>div { position:relative; display:flex; gap:13px; padding:0 0 21px; }
#cp-one .cp-evidence-stack>div:last-child { padding-bottom:0; }
#cp-one .cp-evidence-stack>div:not(:last-child):before { content:""; position:absolute; left:3px; top:11px; bottom:0; border-left:1px solid #6787af66; }
#cp-one .cp-evidence-stack>div>b { flex:none; width:7px; height:7px; border:1px solid var(--story-accent); border-radius:50%; background:#23354a; margin-top:5px; }
#cp-one .cp-evidence-stack>div>div { min-width:0; }
#cp-one .cp-evidence-stack strong { display:block; font-size:12px; font-weight:500; color:#dbe7f6; }
#cp-one .cp-evidence-stack span { display:block; color:#9daec4; font-size:9px; margin-top:1px; }
#cp-one .cp-evidence-stack code { display:block; margin-top:7px; color:#b7cce9; font:9px/1.65 'JetBrains Mono',monospace; overflow-wrap:anywhere; }
#cp-one .cp-context-conclusion { display:flex; gap:16px; padding:22px 26px; background:var(--story-tint); border-top:1px solid #94bbeb36; }
#cp-one .cp-context-conclusion>span { color:var(--story-accent); font-size:29px; line-height:1.3; }
#cp-one .cp-context-conclusion small { display:block; color:#a0b4cc; font-size:10px; }
#cp-one .cp-context-conclusion strong { display:block; color:#c8dffd; font-size:22px; line-height:1.4; font-weight:500; letter-spacing:-.03em; margin:3px 0; }
#cp-one .cp-context-conclusion p { font-size:11px; color:#a5b4c7; }
#cp-one .cp-manual-loop { padding:22px 25px; background:#17191e; border-bottom:1px solid #919db522; }
#cp-one .cp-manual-actions { display:flex; align-items:center; gap:7px; margin-top:17px; }
#cp-one .cp-manual-actions>span { padding:7px 9px; border:1px solid #76758040; color:#b5afb5; border-radius:5px; font-size:10px; white-space:nowrap; }
#cp-one .cp-manual-actions>b { color:#727681; font-size:12px; font-weight:400; }
#cp-one .cp-manual-loop>p:last-child { margin-top:15px; color:#a19392; font-size:11px; }
#cp-one .cp-manual-loop>p:last-child>span { float:right; font-size:20px; line-height:1; }
#cp-one .cp-auto-flow { padding:23px 25px 0; background:linear-gradient(145deg,var(--story-tint),transparent 60%); }
#cp-one .cp-context-inputs { display:grid; grid-template-columns:repeat(3,1fr); margin-top:27px; gap:12px; }
#cp-one .cp-context-inputs>div { display:grid; justify-items:center; gap:9px; padding:14px 5px; border:1px solid #e6be7c26; border-radius:8px; }
#cp-one .cp-context-inputs>div>span { height:23px; color:var(--story-accent); font:20px/23px 'JetBrains Mono',monospace; }
#cp-one .cp-context-inputs strong { color:#d9c8af; font-size:10px; font-weight:500; }
#cp-one .cp-collection-lines { display:flex; justify-content:center; height:28px; width:68%; margin:auto; border:1px solid #b697674f; border-top:0; border-radius:0 0 8px 8px; position:relative; }
#cp-one .cp-collection-lines:after { content:""; position:absolute; bottom:-12px; height:12px; left:50%; border-left:1px solid #b697674f; }
#cp-one .cp-collection-lines>i { border-left:1px solid #b697674f; }
#cp-one .cp-context-collected { display:flex; align-items:center; justify-content:center; gap:8px; width:max-content; max-width:100%; margin:11px auto 0; padding:8px 13px; border:1px solid #e6be7c3b; border-radius:6px; color:#d9c3a2; font-size:11px; background:#2b2824; }
#cp-one .cp-context-collected>span { width:5px; height:5px; background:var(--story-accent); border-radius:50%; }
#cp-one .cp-solve-moment { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:28px 0; }
#cp-one .cp-solve-moment small { color:#a69c8b; font-size:10px; }
#cp-one .cp-solve-moment strong { display:block; margin-top:7px; color:#f0dec1; font-size:25px; line-height:1.2; font-weight:500; letter-spacing:-.03em; }
#cp-one .cp-solve-keys { display:flex; gap:9px; }
#cp-one .cp-solve-keys kbd { display:grid; place-items:center; width:70px; height:70px; border:1px solid #e6be7c52; border-bottom:5px solid #40392e; background:linear-gradient(#37322b,#242322); color:#ead2ac; border-radius:11px; font:32px/1 -apple-system,BlinkMacSystemFont,sans-serif; box-shadow:0 8px 20px #0003; }
#cp-one .cp-next-turn { display:grid; gap:4px; padding:17px 0 20px; border-top:1px solid #e6be7c24; font-size:11px; }
#cp-one .cp-next-turn>span { color:#a99d8c; }
#cp-one .cp-next-turn strong { color:#d9c6a8; font-weight:500; }
#cp-one .cp-compare-violet { display:block; }
#cp-one .cp-compare-violet .cp-compare-copy { display:grid; grid-template-columns:.85fr 1.3fr; gap:68px; align-items:start; margin-bottom:36px; }
#cp-one .cp-product-copy-title .cp-compare-promise { margin-top:22px; color:#e0e4eb; font-size:16px; line-height:1.5; font-weight:500; }
#cp-one .cp-product-copy-body>p { color:var(--cp-muted); font-size:15px; line-height:1.8; }
#cp-one .cp-product-copy-body>p+p { margin-top:18px; }
#cp-one .cp-product-copy-body .cp-compare-payoff { padding-left:14px; border-left:2px solid var(--story-accent); color:var(--story-accent); font-size:14px; line-height:1.65; }
#cp-one .cp-product-comparison { background:transparent; border:0; border-radius:0; box-shadow:none; }
#cp-one .cp-product-comparison>.cp-scene-question { padding:0 0 22px; border:0; background:transparent; }
#cp-one .cp-answer-contrast { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.6fr); gap:18px; align-items:stretch; }
#cp-one .cp-chat-example { background:#171a1f; border:1px solid #30363e; border-radius:12px; padding:22px 22px 72px; position:relative; min-width:0; }
#cp-one .cp-chat-scroll { height:440px; margin-top:21px; overflow:hidden; position:relative; color:#aeb8c5; font-size:13px; line-height:1.8; }
#cp-one .cp-chat-scroll:after { content:""; position:absolute; inset:72% 0 0; background:linear-gradient(transparent,#171a1f 95%); }
#cp-one .cp-chat-avatar { font-size:17px; display:block; margin-bottom:12px; color:#c3c4cb; }
#cp-one .cp-chat-scroll p { margin-bottom:14px; }
#cp-one .cp-chat-scroll code { display:block; color:#c3c5cd; font:11px/1.9 'JetBrains Mono',monospace; margin:14px 0; padding:12px; border-radius:6px; background:#111419; overflow-wrap:anywhere; }
#cp-one .cp-chat-hunt { position:absolute; inset:auto 18px 22px 22px; color:#acb7c6; font-size:12px; line-height:1.65; }
#cp-one .cp-product-example { min-width:0; overflow:hidden; border:1px solid #35443f; border-radius:12px; background:#141819; }
#cp-one .cp-product-heading { display:flex; justify-content:space-between; align-items:center; padding:17px 21px; border-bottom:1px solid #8fcebc24; }
#cp-one .cp-product-heading .cp-visual-label { color:#9dd1b4; font-size:13px; }
#cp-one .cp-product-heading>span { color:#9bab9f; font-size:10px; }
#cp-one .cp-product-image-link { display:block; cursor:zoom-in; }
#cp-one .cp-product-image-link img { display:block; width:100%; height:auto; }
#cp-one .cp-product-caption { display:grid; gap:7px; padding:20px 23px; border-top:1px solid #8fcebc24; }
#cp-one .cp-product-caption>strong { color:#d4e6dc; font-size:18px; line-height:1.4; font-weight:500; }
#cp-one .cp-product-caption>span { color:#a6b8ad; font-size:12px; }
#cp-one .cp-product-caption>a { display:inline-flex; align-items:center; gap:8px; justify-self:start; min-height:36px; color:#a4d3b9; font-size:11px; }
#cp-one .cp-product-image-link:focus-visible,#cp-one .cp-product-caption>a:focus-visible { outline:2px solid #a4d3b9; outline-offset:-3px; }
#cp-one .cp-product-caption>a:hover { color:#e0ffec; }
#cp-one .cp-bare-answer { padding:23px 25px; background:#17191e; border-bottom:1px solid #919db523; }
#cp-one .cp-bare-answer>strong { display:block; margin-top:12px; font-size:17px; font-weight:400; color:#b7b0b2; line-height:1.45; }
#cp-one .cp-bare-answer>p:last-child { color:#9b8d90; margin-top:9px; font-size:11px; }
#cp-one .cp-reason-content { padding:23px 25px; background:linear-gradient(145deg,var(--story-tint),transparent 70%); }
#cp-one .cp-reason-content h4 { margin:17px 0; color:#d5e9e3; font-size:24px; font-weight:500; line-height:1.2; letter-spacing:-.035em; }
#cp-one .cp-tradeoff-table>div { display:grid; grid-template-columns:1.3fr 1fr .85fr; gap:8px; align-items:center; padding:12px 11px; border-bottom:1px solid #8fcebc21; color:#afbbb8; font:10px/1.5 'JetBrains Mono',monospace; }
#cp-one .cp-tradeoff-table .cp-tradeoff-head { color:#91a39d; font:9px/1.5 'DM Sans',sans-serif; padding-top:3px; }
#cp-one .cp-tradeoff-table strong { font:500 11px/1.5 'DM Sans',sans-serif; }
#cp-one .cp-tradeoff-table .cp-tradeoff-selected { border:1px solid #8fcebc55; border-radius:5px; background:#8fcebc0a; color:#c1e7d9; }
#cp-one .cp-tradeoff-selected strong>span { display:block; color:#91bfae; font-size:8px; font-weight:400; }
#cp-one .cp-reason-why { margin-top:17px; font-size:12px; color:#c3ded4; }
#cp-one .cp-reason-code { margin-top:13px; padding:15px; background:#10191a; border:1px solid #8fcebc25; border-radius:7px; white-space:pre-wrap; overflow-wrap:anywhere; }
#cp-one .cp-reason-code code { color:#bcdad1; font:10px/1.9 'JetBrains Mono',monospace; }
#cp-one .cp-reason-checks { display:grid; gap:4px; margin-top:13px; color:#9eb8ae; font-size:10px; }
#cp-one .cp-model-receipt { display:grid; grid-template-columns:1fr auto; gap:5px 15px; padding:18px 25px; border-top:1px solid #8fcebc30; background:#8fcebc08; }
#cp-one .cp-model-receipt>span { color:#a2beb2; font-size:10px; }
#cp-one .cp-model-receipt>strong { grid-column:2; grid-row:1 / span 2; align-self:center; color:#c0e8d9; font-size:14px; font-weight:500; overflow-wrap:anywhere; }
#cp-one .cp-model-receipt>small { color:#829e92; font-size:9px; }
#cp-one .cp-compare-note { color:#838e9d; font-size:10px; line-height:1.6; }
@media (max-width:1000px) {
  #cp-one .cp-compare-feature { grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:30px; }
  #cp-one .cp-manual-actions { flex-wrap:wrap; gap:5px; }
  #cp-one .cp-solve-keys kbd { width:54px; height:59px; }
  #cp-one .cp-solve-moment strong { font-size:22px; }
  #cp-one .cp-context-contrast { grid-template-columns:1fr; }
  #cp-one .cp-fragment-view { padding:18px 22px; }
  #cp-one .cp-fragment-window { margin-top:12px; }
  #cp-one .cp-missing-evidence { margin-top:14px; }
  #cp-one .cp-retained-view { border-left:0; border-top:1px solid #919db523; }
  #cp-one .cp-evidence-stack { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
  #cp-one .cp-evidence-stack>div { padding:0; gap:0; }
  #cp-one .cp-evidence-stack>div>b,#cp-one .cp-evidence-stack>div:before { display:none; }
  #cp-one .cp-answer-contrast { grid-template-columns:minmax(0,1fr) minmax(0,1.5fr); }
  #cp-one .cp-compare-violet .cp-compare-copy { gap:30px; }
  #cp-one .cp-chat-example { padding-left:15px; padding-right:12px; }
}
@media (max-width:780px) {
  #cp-one .cp-compare-violet .cp-compare-copy { grid-template-columns:1fr; gap:23px; }
  #cp-one .cp-answer-contrast { grid-template-columns:1fr; }
  #cp-one .cp-chat-example { padding:21px 22px 52px; }
  #cp-one .cp-chat-scroll { height:148px; }
  #cp-one .cp-product-example { border-left:0; border-top:1px solid #8fcebc35; }
  #cp-one .cp-product-caption { padding:18px 20px; }
  #cp-one .cp-product-caption>strong { font-size:17px; }
  #cp-one .cp-comparison { padding-top:28px; }
  #cp-one .cp-compare-intro>p:last-of-type { font-size:16px; }
  #cp-one .cp-compare-feature { grid-template-columns:1fr; gap:30px; padding-block:48px; }
  #cp-one .cp-compare-copy h3 { font-size:32px; }
  #cp-one .cp-compare-copy>p:not(.cp-compare-kicker) { max-width:620px; }
  #cp-one .cp-context-contrast { grid-template-columns:.94fr 1.1fr; }
  #cp-one .cp-retained-view { border-top:0; border-left:1px solid #919db523; }
  #cp-one .cp-evidence-stack { display:block; }
  #cp-one .cp-evidence-stack>div { padding-bottom:21px; gap:13px; }
  #cp-one .cp-evidence-stack>div>b,#cp-one .cp-evidence-stack>div:before { display:block; }
}
@media (max-width:480px) {
  #cp-one .cp-compare-intro h2 { font-size:32px; }
  #cp-one .cp-compare-copy h3 { font-size:30px; }
  #cp-one .cp-compare-kicker { font-size:12px; }
  #cp-one .cp-scene-question { padding:20px; }
  #cp-one .cp-scene-question>strong { font-size:19px; }
  #cp-one .cp-context-contrast { grid-template-columns:1fr; }
  #cp-one .cp-retained-view { border-top:1px solid #919db523; border-left:0; }
  #cp-one .cp-fragment-window pre { font-size:10px; }
  #cp-one .cp-evidence-stack strong { font-size:13px; }
  #cp-one .cp-evidence-stack code { font-size:10px; }
  #cp-one .cp-context-conclusion { padding:20px; gap:12px; }
  #cp-one .cp-context-conclusion strong { font-size:22px; }
  #cp-one .cp-manual-loop,#cp-one .cp-auto-flow { padding-inline:18px; }
  #cp-one .cp-context-inputs { gap:7px; }
  #cp-one .cp-context-inputs strong { font-size:9px; }
  #cp-one .cp-solve-moment { gap:10px; }
  #cp-one .cp-solve-keys { gap:6px; }
  #cp-one .cp-solve-keys kbd { width:48px; height:54px; font-size:26px; }
  #cp-one .cp-solve-moment strong { font-size:23px; }
  #cp-one .cp-answer-contrast { grid-template-columns:1fr; }
  #cp-one .cp-chat-example { padding:19px 20px 45px; }
  #cp-one .cp-chat-scroll { height:142px; font-size:10px; }
  #cp-one .cp-chat-hunt { left:20px; bottom:17px; }
  #cp-one .cp-bare-answer,#cp-one .cp-reason-content,#cp-one .cp-model-receipt { padding-inline:20px; }
  #cp-one .cp-tradeoff-table>div { padding-inline:7px; gap:5px; font-size:9px; }
  #cp-one .cp-reason-code { padding:12px; }
  #cp-one .cp-reason-code code { font-size:9px; }
  #cp-one .cp-model-receipt { grid-template-columns:1fr; }
  #cp-one .cp-model-receipt>strong { grid-column:auto; grid-row:auto; }
}

/* Polish pass (2026-11): consecutive stories alternate side and ground, so the run of sections stops reading
   as one flat slab. Even stories sit on a full-width lifted band; the review story puts its window first. */
#cp-one .cp-compare-feature:nth-of-type(even) { background:none; }
#cp-one .cp-compare-feature:nth-of-type(even)::before { inset:0 calc(50% - 50vw); background:linear-gradient(180deg,#15181c,#131619 55%,#101213),radial-gradient(ellipse 50% 70% at 26% 50%,color-mix(in srgb,var(--story-accent) 9%,transparent),transparent 72%); }
#cp-one .cp-compare-scene { border-radius:18px; box-shadow:0 32px 70px #00000073,inset 0 1px 0 #ffffff14; }
#cp-one .cp-compare-feature:nth-of-type(even) .cp-compare-scene { box-shadow:0 32px 70px #00000080,inset 0 1px 0 #ffffff1a; }
@container (min-width:651px) {
 #cp-one .cp-story-review { grid-template-columns:minmax(0,1.3fr) minmax(0,.85fr); }
 #cp-one .cp-story-review .cp-compare-copy { order:2; }
}

/* Text question detail (input schema 2): the archive viewer's sections, read on a phone. */
#cp-one .cp-q-head .cp-q-facts { margin:14px 0 12px; color:var(--cp-muted); font:400 13px/1.6 'JetBrains Mono',ui-monospace,monospace; }
#cp-one .cp-q-head .cp-q-facts time { color:var(--cp-amber); }
#cp-one .cp-q-head .cp-q-tags + .cp-q-tags { margin-top:8px; }
#cp-one .cp-q-detail { margin-top:30px; max-width:860px; }
#cp-one .cp-q-section { margin-top:30px; }
#cp-one .cp-q-section>h2 { display:flex; align-items:center; gap:12px; margin-bottom:22px; color:var(--cp-muted); font:600 11px/1.5 'JetBrains Mono',ui-monospace,monospace; letter-spacing:.14em; text-transform:uppercase; }
#cp-one .cp-q-section>h2:after { content:''; flex:1; height:1px; background:#2a2d2f; }
#cp-one .cp-q-text,#cp-one .cp-q-code { margin:0; padding:16px 18px; background:var(--cp-panel); border:1px solid #2a2d2f; border-radius:10px; color:var(--cp-text); font:400 14px/1.7 'JetBrains Mono',ui-monospace,monospace; }
#cp-one .cp-q-text { white-space:pre-wrap; overflow-wrap:anywhere; }
#cp-one .cp-q-code { white-space:pre; overflow-x:auto; tab-size:4; }
#cp-one .cp-q-example { background:var(--cp-panel); border:1px solid #2a2d2f; border-radius:10px; overflow:hidden; }
#cp-one .cp-q-example + .cp-q-example { margin-top:12px; }
#cp-one .cp-q-example h3 { padding:10px 18px; border-bottom:1px solid #2a2d2f; background:var(--cp-raised); color:var(--cp-violet); font:600 12px/1.5 'JetBrains Mono',ui-monospace,monospace; letter-spacing:.06em; text-transform:uppercase; }
#cp-one .cp-q-example .cp-q-text { border:0; border-radius:0; }
#cp-one .cp-q-bullets { margin:0; padding:0; list-style:none; }
#cp-one .cp-q-bullets li { position:relative; padding-left:18px; color:var(--cp-text); font-size:15px; line-height:1.7; white-space:pre-wrap; overflow-wrap:anywhere; }
#cp-one .cp-q-bullets li + li { margin-top:10px; }
#cp-one .cp-q-bullets li:before { content:'·'; position:absolute; left:4px; color:var(--cp-muted); }
@media(max-width:600px) {
  #cp-one .cp-q-text,#cp-one .cp-q-code { padding:14px; font-size:13px; }
  #cp-one .cp-q-example h3 { padding:10px 14px; }
}

/* Section F: current host with Fable 4 sources, memory and model badges. */
#cp-one .cp-flow { position:relative; isolation:isolate; display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,1.1fr); grid-template-rows:auto 1fr; grid-template-areas:"head graph" "result graph"; gap:32px 56px; padding:96px 0 48px; scroll-margin-top:90px; }
#cp-one .cp-flow:before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background-image:radial-gradient(#ffffff17 1px,transparent 1.3px); background-size:24px 24px; -webkit-mask-image:radial-gradient(ellipse at 70% 30%,#000 10%,transparent 72%); mask-image:radial-gradient(ellipse at 70% 30%,#000 10%,transparent 72%); }
#cp-one .cp-flow:after { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:repeating-radial-gradient(circle at 73% 66%,transparent 0 71px,#ffffff12 71px 72px); -webkit-mask-image:radial-gradient(circle at 73% 66%,#000 6%,transparent 64%); mask-image:radial-gradient(circle at 73% 66%,#000 6%,transparent 64%); }
#cp-one .cp-flow-sky { --a:#8fc0f5; --a2:#1f4f80; }
#cp-one .cp-flow-violet { --a:#b9a2f7; --a2:#43318f; }
#cp-one .cp-flow-rose { --a:#f2a0bf; --a2:#70305a; }
#cp-one .cp-flow-mint { --a:#8fd6c0; --a2:#1f5a50; }
#cp-one .cp-flow-orchid { --a:#e2a8f0; --a2:#5f3478; }

/* Header */
#cp-one .cp-flow-head { grid-area:head; min-width:0; min-height:0; padding-top:104px; }
#cp-one .cp-flow-kicker { display:inline-flex; align-items:center; gap:6px; width:fit-content; max-width:100%; box-sizing:border-box; margin-bottom:20px; padding:4px 9px; border:1px solid #305e54; border-radius:6px; background:#1a3b36; color:#b8f4df; box-shadow:inset 0 1px 0 #91f7d51a; font:600 11px/16px 'DM Sans',sans-serif; letter-spacing:.05em; text-transform:uppercase; }
#cp-one .cp-flow-kicker-mark { display:inline-flex; flex:none; gap:4px; }
#cp-one .cp-flow-kicker-mark i { width:7px; height:7px; border-radius:50%; background:#8fc0f5; box-shadow:0 0 9px #8fc0f5b3; }
#cp-one .cp-flow-kicker-mark i:nth-child(2) { background:#b9a2f7; box-shadow:0 0 9px #b9a2f7b3; }
#cp-one .cp-flow-kicker-mark i:nth-child(3) { background:#f2a0bf; box-shadow:0 0 9px #f2a0bfb3; }
#cp-one .cp-flow-head h2 { font-size:clamp(27px,2.9cqw,34px); line-height:1.1; letter-spacing:-.048em; }
#cp-one .cp-flow-head h2 span { background:linear-gradient(92deg,#a3ccff,#c6adff 52%,#ffb0cf); -webkit-background-clip:text; background-clip:text; color:transparent; }
#cp-one .cp-flow-support { margin-top:24px; padding-left:16px; border-left:2px solid #b9a2f7; color:#ecebf4; font-size:16px; line-height:1.6; max-width:34em; text-wrap:balance; }

/* The graph */
#cp-one .cp-flow-graph { grid-area:graph; position:relative; min-width:0; }
#cp-one .cp-flow-graph>div { position:relative; z-index:1; }
#cp-one .cp-flow-wires { position:absolute; inset:0; z-index:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
#cp-one .cp-flow-wires path { fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
#cp-one .cp-flow-wire { stroke:#ffffff38; }
#cp-one .cp-flow-wire-a { stroke:#86b9ff99; }
#cp-one .cp-flow-wire-b { stroke:#b8a4ff99; }
#cp-one .cp-flow-wire-c { stroke:#ff9fc399; }
#cp-one .cp-flow-wire-trunk,#cp-one .cp-flow-wire-model { stroke:#ffffff66; }
#cp-one .cp-flow-wire-pick { stroke:#ffffff33; }
#cp-one .cp-flow-wires path.cp-flow-wire-lit { stroke:var(--flow-hue); stroke-width:2; opacity:0; transition:opacity .35s; }
#cp-one .cp-flow-wires path.cp-flow-wire-glow { stroke:var(--flow-hue); stroke-width:7; opacity:0; transition:opacity .35s; }
#cp-one .cp-flow-wires path.cp-flow-wire-lit.is-lit { opacity:1; }
#cp-one .cp-flow-wires path.cp-flow-wire-glow.is-lit { opacity:.22; }
#cp-one .cp-flow-wires path.cp-flow-arrow { stroke:#ffffffb3; }
#cp-one .cp-flow-wires path.cp-flow-motion { stroke:none; }
#cp-one .cp-flow-dot { position:absolute; left:0; top:0; z-index:2; width:8px; height:8px; margin:-4px 0 0 -4px; border-radius:50%; background:var(--dot); box-shadow:0 0 0 3px color-mix(in srgb,var(--dot) 28%,transparent),0 0 14px 3px var(--dot); opacity:0; pointer-events:none; will-change:transform,opacity; }
#cp-one .cp-flow-dot-a { --dot:#a9cdff; }
#cp-one .cp-flow-dot-b { --dot:#cdbdff; }
#cp-one .cp-flow-dot-c { --dot:#ffb9d4; }

#cp-one .cp-flow-collect { height:40px; }
#cp-one .cp-flow-tap { display:inline-flex; justify-self:center; align-self:start; align-items:center; justify-content:center; gap:6px; width:fit-content; max-width:100%; box-sizing:border-box; margin-top:9px; padding:4px 9px; border:1px solid color-mix(in srgb,var(--a) 38%,#101213); border-radius:6px; background:color-mix(in srgb,var(--a) 16%,#101213); box-shadow:inset 0 1px 0 color-mix(in srgb,var(--a) 10%,transparent); color:var(--a); font:600 10.5px/15px "DM Sans",sans-serif; text-align:left; }
#cp-one .cp-flow-tap span { white-space:nowrap; text-wrap:nowrap; }
#cp-one .cp-flow-tap svg { flex:none; width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
#cp-one .cp-flow-gap-fan { height:20px; }
/* Stage 4: the fan-out into glowing containers */
#cp-one .cp-flow-fan { height:26px; }
#cp-one .cp-flow-picks { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px 46px; }
#cp-one .cp-flow-pick { --hue:#86b9ff; position:relative; display:flex; align-items:center; gap:13px; min-height:76px; padding:11px 14px 12px; overflow:hidden; border:1px solid color-mix(in srgb,var(--hue) 46%,transparent); border-radius:16px; background:linear-gradient(140deg,color-mix(in srgb,var(--hue) 17%,#141834),#11132a 72%); box-shadow:inset 0 1px 0 #ffffff29,0 0 18px color-mix(in srgb,var(--hue) 14%,transparent); text-align:left; cursor:pointer; transition:transform .25s var(--cp-ease-out),box-shadow .35s,border-color .35s,background-color .35s; }
#cp-one .cp-flow-pick-multifile { --hue:#74e0cf; }
#cp-one .cp-flow-pick-review { --hue:#ff9fc3; }
#cp-one .cp-flow-pick-design { --hue:#b8a4ff; }
#cp-one .cp-flow-pick-voice { --hue:#e7a0f6; grid-column:1 / -1; }
#cp-one .cp-flow-pick:hover { transform:translateY(-2px); box-shadow:inset 0 1px 0 #ffffff3d,0 0 28px color-mix(in srgb,var(--hue) 30%,transparent); }
#cp-one .cp-flow-pick:active { transform:scale(.985); transition-duration:.12s; }
#cp-one .cp-flow-pick:focus-visible { outline:2px solid #fff; outline-offset:3px; }
#cp-one .cp-flow-pick:before { content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(140deg,color-mix(in srgb,var(--hue) 52%,transparent),color-mix(in srgb,var(--hue) 12%,transparent) 78%); opacity:.85; }
#cp-one .cp-flow-pick[aria-pressed="true"] { border-color:var(--hue); box-shadow:inset 0 1px 0 #ffffff59,0 0 0 1px var(--hue),0 0 34px color-mix(in srgb,var(--hue) 42%,transparent); }
#cp-one .cp-flow-pick:after { content:""; position:absolute; inset:auto 0 0; height:3px; background:#fff; opacity:0; transform:scaleX(var(--flow-progress,0)); transform-origin:left; }
#cp-one .cp-flow[data-flow-auto="on"] .cp-flow-pick[aria-pressed="true"]:after { opacity:.85; }
#cp-one .cp-flow-pick>span { position:relative; }
#cp-one .cp-flow-pick-text { display:grid; gap:2px; min-width:0; }
#cp-one .cp-flow-pick-text strong { color:#fff; font-size:15px; font-weight:600; line-height:1.25; letter-spacing:-.015em; }
#cp-one .cp-flow-pick-text small { color:#d3d9ec; font-size:12px; line-height:1.4; }
#cp-one .cp-flow-pick-line { display:block; }
#cp-one .cp-flow-pick-num { display:inline-grid; place-items:center; width:15px; height:15px; margin:0 5px 0 0; border-radius:50%; background:var(--hue); color:#0f1230; font:700 9.5px/1 'DM Sans',sans-serif; vertical-align:-2px; }
#cp-one .cp-flow-pick[aria-pressed="true"] .cp-flow-pick-text small { color:#f1f3fb; }
/* Each container's small graphic */
#cp-one .cp-flow-art { flex:none; width:66px; height:52px; border:1px solid #ffffff24; border-radius:11px; background:#0b0c20a6; box-shadow:inset 0 1px 0 #ffffff1a; }
#cp-one .cp-flow-pick-icon { --icon-scale:.8; flex:none; width:calc(66px * var(--icon-scale)); height:calc(52px * var(--icon-scale)); }
#cp-one .cp-flow-pick-icon .cp-flow-art { position:absolute; inset:0 auto auto 0; transform:scale(var(--icon-scale)); transform-origin:top left; }
#cp-one .cp-flow-art i,#cp-one .cp-flow-art b { position:absolute; font-style:normal; }
#cp-one .cp-flow-art-parts i { display:grid; place-items:center; height:15px; border-radius:4px; color:#0f1230; font:700 9px/1 'JetBrains Mono',monospace; }
#cp-one .cp-flow-art-parts i:nth-child(1) { left:8px; bottom:7px; width:38px; background:var(--hue); }
#cp-one .cp-flow-art-parts i:nth-child(2) { left:20px; bottom:24px; width:38px; background:#fff; }
#cp-one .cp-flow-art-parts i:nth-child(3) { left:32px; top:4px; width:26px; height:5px; border:1px dashed #ffffff8c; background:none; color:transparent; }
#cp-one .cp-flow-art-files { overflow:hidden; }
#cp-one .cp-flow-art-files i { top:12px; width:19px; height:27px; border-radius:3px 7px 3px 3px; background:linear-gradient(180deg,var(--hue),color-mix(in srgb,var(--hue) 45%,#11132a)); opacity:.55; }
#cp-one .cp-flow-art-files i:nth-child(1) { left:8px; opacity:1; }
#cp-one .cp-flow-art-files i:nth-child(2) { left:31px; }
#cp-one .cp-flow-art-files i:nth-child(3) { left:54px; }
#cp-one .cp-flow-art-files i:nth-child(4) { left:77px; }
#cp-one .cp-flow-art-files b { left:4px; top:7px; width:27px; height:37px; border:1.5px dashed #fff; border-radius:5px; }
#cp-one .cp-flow-art-review i { left:9px; width:40px; height:5px; border-radius:3px; background:#ffffff40; }
#cp-one .cp-flow-art-review i:nth-child(1) { top:9px; width:30px; }
#cp-one .cp-flow-art-review i:nth-child(2) { top:18px; background:var(--hue); }
#cp-one .cp-flow-art-review i:nth-child(3) { top:27px; width:34px; }
#cp-one .cp-flow-art-review i:nth-child(4) { top:36px; width:24px; }
#cp-one .cp-flow-art-review b { right:5px; top:11px; display:grid; place-items:center; width:17px; height:17px; border-radius:6px; background:#fff; color:#3a1730; font:700 9.5px/1 'JetBrains Mono',monospace; box-shadow:0 0 10px var(--hue); }
#cp-one .cp-flow-art-design i { width:19px; height:12px; border:1.5px solid var(--hue); border-radius:4px; background:color-mix(in srgb,var(--hue) 22%,transparent); }
#cp-one .cp-flow-art-design i:nth-child(1) { left:23px; top:6px; }
#cp-one .cp-flow-art-design i:nth-child(2) { left:6px; bottom:6px; }
#cp-one .cp-flow-art-design i:nth-child(3) { right:6px; bottom:6px; }
#cp-one .cp-flow-art-design i:nth-child(4) { left:15px; top:23px; width:36px; height:11px; border:1.5px solid #ffffffa6; border-bottom:0; border-radius:5px 5px 0 0; background:none; }
#cp-one .cp-flow-art-design:after { content:""; position:absolute; left:32px; top:18px; height:5px; border-left:1.5px solid #ffffffa6; }

/* The solution for the selected container */
#cp-one .cp-flow-result { grid-area:result; align-self:start; min-width:0; }
#cp-one .cp-flow-deck-title { position:relative; z-index:6; display:grid; justify-content:start; margin:0 0 14px calc(var(--fan-x, -15px) * -2 - 8px); }
#cp-one .cp-flow-deck-badge { --hue:#86b9ff; grid-area:1 / 1; display:inline-flex; align-items:center; margin:0; padding:7px 16px 8px; border:1px solid color-mix(in srgb,var(--hue) 52%,#ffffff66); border-radius:999px; background:linear-gradient(180deg,color-mix(in srgb,var(--hue) 34%,#4a4262),color-mix(in srgb,var(--hue) 26%,#3a3350)); box-shadow:inset 0 1px 0 #ffffff33,0 10px 24px -12px #000c; color:#fff; font-size:14px; font-weight:600; line-height:1.3; letter-spacing:-.012em; white-space:nowrap; opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .3s,transform .45s var(--cp-ease-out),visibility 0s .3s; }
#cp-one .cp-flow-deck-badge.is-active { opacity:1; visibility:visible; transform:none; transition-delay:.14s,.14s,0s; }
#cp-one .cp-flow-deck-badge[data-flow-title="multifile"] { --hue:#74e0cf; }
#cp-one .cp-flow-deck-badge[data-flow-title="review"] { --hue:#ff9fc3; }
#cp-one .cp-flow-deck-badge[data-flow-title="design"] { --hue:#b8a4ff; }
#cp-one .cp-flow-deck-badge[data-flow-title="voice"] { --hue:#e7a0f6; }
/* The answer deck: five cards, the chosen one in front, the next two stepping out behind it toward the bottom-left as
   flat slabs (a dark one, then a lighter one in the card's hue), the way the owner's reference stacks a window. The
   title rides in a pill badge above the deck's left corner, and the deck is inset by the fan so all three cards sit
   inside the column. The depth
   attribute is the whole state: a pick lifts the front card away (is-leaving) and the deck steps forward, so rapid
   picks retarget mid-move. */
#cp-one .cp-flow-deck { --fan-x:-15px; --fan-y:10px; position:relative; display:grid; height:520px; margin:0 0 calc(var(--fan-y) * 2) calc(var(--fan-x) * -2 - 8px); }
#cp-one .cp-flow-panel { --hue:#86b9ff; --dx:0px; --dy:0px; --o:1; --z:5; --veil:0; --deal:280ms; position:relative; grid-area:1 / 1; z-index:var(--z); display:grid; grid-template-rows:minmax(0,1fr); min-width:0; min-height:0; overflow:hidden; border:1px solid #5c5c70; border-radius:14px; background:linear-gradient(180deg,#15151c,#0e0e13 30%); box-shadow:inset 0 1px 0 #ffffff1f,-12px 14px 26px -4px #000d,-4px 5px 10px #000b,0 24px 48px -18px #000c; opacity:var(--o); transform:translate3d(var(--dx),var(--dy),0); transition:transform .7s var(--cp-ease-out),opacity .45s ease,border-color .5s ease; }
#cp-one .cp-flow-panel[data-flow-panel="multifile"] { --hue:#74e0cf; }
#cp-one .cp-flow-panel[data-flow-panel="review"] { --hue:#ff9fc3; }
#cp-one .cp-flow-panel[data-flow-panel="design"] { --hue:#b8a4ff; }
#cp-one .cp-flow-panel[data-flow-panel="voice"] { --hue:#e7a0f6; }
#cp-one .cp-flow-panel[data-depth="1"] { --dx:var(--fan-x); --dy:var(--fan-y); --z:4; --veil:1; --deal:140ms; border-color:#4b4b5e; }
#cp-one .cp-flow-panel[data-depth="2"] { --dx:calc(var(--fan-x) * 2); --dy:calc(var(--fan-y) * 2); --z:3; --veil:1; --deal:0ms; border-color:color-mix(in srgb,var(--hue) 46%,#8b84a8); }
#cp-one .cp-flow-panel[data-depth="3"] { --dx:calc(var(--fan-x) * 3); --dy:calc(var(--fan-y) * 3); --o:0; --z:2; --veil:1; --deal:0ms; }
#cp-one .cp-flow-panel[data-depth="4"] { --dx:calc(var(--fan-x) * 4); --dy:calc(var(--fan-y) * 4); --o:0; --z:1; --veil:1; --deal:0ms; }
/* The card just chosen away lifts off the top of the deck and fades, quicker than the next one settles. */
#cp-one .cp-flow-panel.is-leaving { --dx:28px; --dy:-26px; --o:0; --z:6; --veil:0; transition:transform .55s var(--cp-ease-out),opacity .32s ease; }
#cp-one .cp-flow-panel:after { content:""; position:absolute; z-index:4; inset:0; background:linear-gradient(180deg,color-mix(in srgb,var(--hue) 20%,#282934),color-mix(in srgb,var(--hue) 14%,#1c1d26)); box-shadow:inset 0 1px 0 #ffffff2e; opacity:var(--veil); transition:opacity .5s ease; pointer-events:none; }
#cp-one .cp-flow-panel[data-depth="2"]:after { background:linear-gradient(180deg,color-mix(in srgb,var(--hue) 44%,#5e5280),color-mix(in srgb,var(--hue) 34%,#463c62)); box-shadow:inset 0 1px 0 #ffffff4a; }
#cp-one .cp-flow-card-body { position:relative; z-index:2; display:grid; grid-auto-rows:max-content; align-content:start; gap:12px; min-height:0; overflow:hidden; padding:14px 14px 0; -webkit-mask-image:linear-gradient(#000 76%,transparent); mask-image:linear-gradient(#000 76%,transparent); }
#cp-one .cp-flow-card-body img { display:block; width:100%; height:auto; border:0; border-radius:6px; filter:brightness(1.12); }
/* Lead the multi-file preview with the root-cause step. */
#cp-one #cp-flow-panel-multifile .cp-flow-card-body img:nth-child(2) { order:-1; }
/* The cycle's progress runs along the front card's foot: a lit line with a bright head. */
#cp-one .cp-flow-card-line { position:absolute; z-index:5; inset:auto 16px 12px; height:2px; border-radius:1px; background:color-mix(in srgb,var(--hue) 22%,transparent); container-type:inline-size; opacity:0; transition:opacity .3s; }
#cp-one .cp-flow[data-flow-auto="on"] .cp-flow-panel[data-depth="0"] .cp-flow-card-line { opacity:1; }
#cp-one .cp-flow-card-line:before { content:""; position:absolute; inset:0; border-radius:inherit; background:var(--hue); transform:scaleX(var(--flow-progress,0)); transform-origin:left; }
#cp-one .cp-flow-card-line:after { content:""; position:absolute; left:-4px; top:-3px; width:8px; height:8px; border-radius:50%; background:#fff; box-shadow:0 0 0 2px color-mix(in srgb,var(--hue) 55%,transparent),0 0 12px 3px var(--hue); transform:translateX(calc(var(--flow-progress,0) * 100cqw)); }
/* Built answer cards: the multi-file debugging view and the live discussion view, drawn in markup so every line can point. */
#cp-one .cp-flow-card-body.cp-flow-mf,#cp-one .cp-flow-card-body.cp-flow-dx { gap:10px; padding:14px 16px 16px; -webkit-mask-image:none; mask-image:none; color:#e8e8ef; font-size:12.5px; line-height:1.5; }
#cp-one .cp-flow-mf-head,#cp-one .cp-flow-dx-head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 0 10px; border-bottom:1px solid #ffffff14; font:500 10.5px/1.5 'JetBrains Mono',monospace; letter-spacing:.06em; text-transform:uppercase; color:#a9a9bb; }
#cp-one .cp-flow-mf-count b { color:#fff; }
#cp-one .cp-flow-mf-state { display:inline-flex; align-items:center; gap:6px; color:#8be3a8; }
#cp-one .cp-flow-mf-state i,#cp-one .cp-flow-dx-live i { width:6px; height:6px; border-radius:50%; background:currentColor; box-shadow:0 0 8px currentColor; }
#cp-one .cp-flow.is-running .cp-flow-mf-state i,#cp-one .cp-flow.is-running .cp-flow-dx-live i { animation:cp-flow-beat 1.5s ease-in-out infinite; }
#cp-one .cp-flow-mf-files { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; margin:0; padding:0; list-style:none; }
#cp-one .cp-flow-mf-files li { display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-areas:"dot name" "dot line"; column-gap:7px; align-items:center; padding:7px 9px 8px; border:1px solid #ffffff14; border-radius:9px; background:#ffffff08; font:500 11px/1.3 'JetBrains Mono',monospace; }
#cp-one .cp-flow-mf-files li i { grid-area:dot; width:7px; height:7px; border-radius:50%; background:#ff9fc3; box-shadow:0 0 8px #ff9fc399; }
#cp-one .cp-flow-mf-files li.is-fixed i { background:#8be3a8; box-shadow:0 0 8px #8be3a899; }
#cp-one .cp-flow-mf-files li span { grid-area:name; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#fff; }
#cp-one .cp-flow-mf-files li small { grid-area:line; color:#8f8e9e; font-size:9.5px; }
#cp-one .cp-flow-mf-files li.is-open { border-color:#ff9fc333; }
#cp-one .cp-flow-mf-block { position:relative; padding:9px 12px 10px 14px; border-radius:10px; background:#ffffff07; }
#cp-one .cp-flow-mf-block:before { content:""; position:absolute; left:0; top:9px; bottom:9px; width:3px; border-radius:0 3px 3px 0; background:var(--rail); box-shadow:0 0 10px var(--rail); }
#cp-one .cp-flow-mf-cause { --rail:#ff9fc3; }
#cp-one .cp-flow-mf-fix { --rail:#8be3a8; }
#cp-one .cp-flow-mf-next { --rail:#b8a4ff; }
#cp-one .cp-flow-mf-block p { margin:0; }
#cp-one .cp-flow-mf-label { display:flex; align-items:center; gap:7px; margin:0 0 4px!important; color:var(--rail); font:600 10px/1.5 'JetBrains Mono',monospace; letter-spacing:.08em; text-transform:uppercase; }
#cp-one .cp-flow-mf-label i { width:5px; height:5px; border-radius:50%; background:var(--rail); }
#cp-one .cp-flow-mf-diff { display:grid; gap:2px; font:11px/1.6 'JetBrains Mono',monospace; }
#cp-one .cp-flow-mf-diff span { display:flex; align-items:center; gap:8px; padding:2px 8px 2px 4px; border-radius:5px; white-space:pre; overflow:hidden; }
#cp-one .cp-flow-mf-diff span i { width:18px; color:#8f8e9e; font-size:9.5px; font-style:normal; text-align:right; }
#cp-one .cp-flow-mf-diff span b { width:9px; font-weight:600; }
#cp-one .cp-flow-mf-diff .is-del { background:#ff9fc314; color:#f1c0d4; }
#cp-one .cp-flow-mf-diff .is-del b { color:#ff9fc3; }
#cp-one .cp-flow-mf-diff .is-add { background:#8be3a814; color:#fff; }
#cp-one .cp-flow-mf-diff .is-add b { color:#8be3a8; }
#cp-one .cp-flow-mf mark,#cp-one .cp-flow-dx mark { background:none; color:#fff; font:500 .95em/1 'JetBrains Mono',monospace; text-decoration:underline; text-decoration-color:var(--rail,#e7a0f6); text-decoration-thickness:1.5px; text-underline-offset:3px; }
#cp-one .cp-flow-card-body.cp-flow-pr { gap:10px; padding:14px 16px 16px; -webkit-mask-image:none; mask-image:none; color:#e8e8ef; font-size:12.5px; line-height:1.5; }
#cp-one .cp-flow-pr-head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 0 10px; border-bottom:1px solid #ffffff14; font:500 10.5px/1.5 'JetBrains Mono',monospace; letter-spacing:.06em; text-transform:uppercase; color:#a9a9bb; }
#cp-one .cp-flow-pr-count b { color:#fff; }
#cp-one .cp-flow-pr-scale { display:inline-flex; align-items:center; gap:5px; }
#cp-one .cp-flow-pr-scale i { width:7px; height:7px; margin-left:6px; border-radius:50%; background:var(--p); box-shadow:0 0 8px var(--p); }
#cp-one .cp-flow-pr .is-blocker { --p:#ff9fc3; }
#cp-one .cp-flow-pr .is-high { --p:#efc07a; }
#cp-one .cp-flow-pr .is-low { --p:#9fb9e8; }
#cp-one .cp-flow-pr-list { display:grid; gap:8px; margin:0; padding:0; list-style:none; }
#cp-one .cp-flow-pr-list li { position:relative; display:grid; grid-template-columns:auto minmax(0,1fr); gap:4px 10px; align-items:center; padding:9px 12px 10px 14px; border-radius:10px; background:#ffffff07; }
#cp-one .cp-flow-pr-list li:before { content:""; position:absolute; left:0; top:9px; bottom:9px; width:3px; border-radius:0 3px 3px 0; background:var(--p); box-shadow:0 0 10px var(--p); }
#cp-one .cp-flow-pr-badge { justify-self:start; padding:1px 8px 2px; border-radius:6px; background:color-mix(in srgb,var(--p) 22%,transparent); color:var(--p); font:600 9.5px/1.5 'JetBrains Mono',monospace; letter-spacing:.08em; text-transform:uppercase; }
#cp-one .cp-flow-pr-file { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#8f8e9e; font:500 10.5px/1.5 'JetBrains Mono',monospace; }
#cp-one .cp-flow-pr-list li p { grid-column:1 / -1; margin:0; color:#eeeef4; }
#cp-one .cp-flow-pr mark { background:none; color:#fff; font:500 .95em/1 'JetBrains Mono',monospace; text-decoration:underline; text-decoration-color:var(--p); text-decoration-thickness:1.5px; text-underline-offset:3px; }
#cp-one .cp-flow-dx-live { display:inline-flex; align-items:center; gap:7px; color:#e7a0f6; }
#cp-one .cp-flow-dx-mode { display:inline-flex; align-items:center; gap:7px; color:#8be3a8; }
#cp-one .cp-flow-dx-mode i { width:6px; height:6px; border-radius:50%; background:currentColor; box-shadow:0 0 8px currentColor; }
#cp-one .cp-flow.is-running .cp-flow-dx-mode i { animation:cp-flow-beat 1.5s ease-in-out infinite; }
#cp-one .cp-flow-dx-thread { position:relative; display:grid; gap:9px; padding-left:18px; }
#cp-one .cp-flow-dx-turn { position:relative; display:grid; gap:9px; }
#cp-one .cp-flow-dx-turn .cp-flow-dx-ask:after { content:""; position:absolute; left:-14px; top:16px; bottom:-22px; width:2px; border-radius:1px; background:linear-gradient(#e7a0f6,#74e0cf); opacity:.6; }
#cp-one .cp-flow-dx-ask { position:relative; display:grid; gap:3px; margin:0; }
#cp-one .cp-flow-dx-ask:before,#cp-one .cp-flow-dx-say:before { content:""; position:absolute; left:-17px; top:9px; width:8px; height:8px; border-radius:50%; background:var(--rail,#e7a0f6); box-shadow:0 0 0 3px #0e0e13,0 0 10px var(--rail,#e7a0f6); }
#cp-one .cp-flow-dx-turn .cp-flow-dx-say:before { left:-15px; top:11px; width:4px; height:4px; box-shadow:0 0 0 2px #0e0e13; }
#cp-one .cp-flow-dx-aside:before { display:none; }
#cp-one .cp-flow-dx-aside .cp-flow-dx-text { color:#b4b5c2; }
#cp-one .cp-flow-dx-who { color:#e7a0f6; font:600 10px/1.5 'JetBrains Mono',monospace; letter-spacing:.08em; text-transform:uppercase; }
#cp-one .cp-flow-dx-bubble { justify-self:start; max-width:92%; padding:7px 11px 8px; border-radius:12px 12px 12px 3px; background:#e7a0f61f; border:1px solid #e7a0f63d; color:#fbeaff; font-size:12.5px; line-height:1.45; }
#cp-one .cp-flow-dx-say { position:relative; padding:9px 12px 10px 14px; border-radius:10px; background:#ffffff07; }
#cp-one .cp-flow-dx-say:after { content:""; position:absolute; left:0; top:9px; bottom:9px; width:3px; border-radius:0 3px 3px 0; background:var(--rail); box-shadow:0 0 10px var(--rail); }
#cp-one .cp-flow-dx-mint { --rail:#74e0cf; }
#cp-one .cp-flow-dx-blue { --rail:#4f8fd6; }
#cp-one .cp-flow-dx-blue .cp-flow-dx-label { color:#9cc2ec; }
#cp-one .cp-flow-dx-pen { display:grid; place-items:center; width:18px; height:18px; margin:-2px 0; border:1.5px solid #4f8fd6; border-radius:50%; background:#202328; }
#cp-one .cp-flow-dx-pen svg { width:9px; height:9px; fill:none; stroke:#fff; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
#cp-one .cp-flow-dx-say p { margin:0; }
#cp-one .cp-flow-dx-label { display:flex; align-items:center; gap:7px; margin:0 0 4px!important; color:var(--rail); font:600 10px/1.5 'JetBrains Mono',monospace; letter-spacing:.08em; text-transform:uppercase; }
#cp-one .cp-flow-dx-label i { width:5px; height:5px; border-radius:50%; background:var(--rail); }
#cp-one .cp-flow-dx-text { color:#f1f1f6; font-size:13px; line-height:1.5; }
#cp-one .cp-flow-dx-why { margin-top:5px!important; color:#a9a9bb; font-size:11px; line-height:1.4; }
#cp-one .cp-flow-dx-ask.is-next,#cp-one .cp-flow-dx-say.is-next { opacity:.62; }
/* Entering the section: the deck deals in from behind and below, back card first, front card last; the wires draw
   themselves from the sources down to the memory, the models and the picks. Both run only once the section reveals. */
@keyframes cp-flow-deal-in { from { opacity:0; transform:translate3d(calc(var(--dx) - 24px),calc(var(--dy) + 56px),0) scale(.96); } }
#cp-one.cp-reveal .cp-flow-result[data-reveal].is-in { animation:none; }
#cp-one.cp-reveal .cp-flow-result.is-in .cp-flow-panel { animation:cp-flow-deal-in 1s var(--cp-ease-out) backwards; animation-delay:calc(var(--reveal-delay,0) * 1ms + var(--deal)); animation-play-state:running!important; }
@keyframes cp-flow-draw { from { stroke-dashoffset:1; } }
#cp-one.cp-reveal .cp-flow-wires[data-reveal-focus].is-in { animation:none; }
#cp-one.cp-reveal .cp-flow-wires.is-in path:is(.cp-flow-wire,.cp-flow-arrow,.cp-flow-wire-lit,.cp-flow-wire-glow) { stroke-dasharray:1; animation:cp-flow-draw 1.1s var(--cp-ease-out) backwards; animation-play-state:running!important; }
#cp-one.cp-reveal .cp-flow-wires.is-in path.cp-flow-wire-trunk { animation-duration:.5s; animation-delay:.55s; }
#cp-one.cp-reveal .cp-flow-wires.is-in path.cp-flow-arrow-memory { animation-duration:.3s; animation-delay:.9s; }
#cp-one.cp-reveal .cp-flow-wires.is-in path.cp-flow-wire-model { animation-duration:.6s; animation-delay:1s; }
#cp-one.cp-reveal .cp-flow-wires.is-in path.cp-flow-arrow-models { animation-duration:.3s; animation-delay:1.45s; }
#cp-one.cp-reveal .cp-flow-wires.is-in path:is(.cp-flow-wire-pick,.cp-flow-wire-lit,.cp-flow-wire-glow) { animation-duration:.9s; animation-delay:1.55s; }

@container (max-width:1000px) {
  #cp-one .cp-flow { grid-template-columns:minmax(0,700px); grid-template-rows:auto; grid-template-areas:"head" "graph" "result"; justify-content:center; gap:36px; padding:64px 0 40px; }
  #cp-one .cp-flow:before { -webkit-mask-image:radial-gradient(ellipse at 30% 30%,#000 10%,transparent 72%); mask-image:radial-gradient(ellipse at 30% 30%,#000 10%,transparent 72%); }
  #cp-one .cp-flow:after { background:repeating-radial-gradient(circle at 27% 68%,transparent 0 71px,#ffffff12 71px 72px); -webkit-mask-image:radial-gradient(circle at 27% 68%,#000 6%,transparent 64%); mask-image:radial-gradient(circle at 27% 68%,#000 6%,transparent 64%); }
  #cp-one .cp-flow-head { min-height:0; padding-top:0; }
  #cp-one .cp-flow-head h2 { font-size:33px; }

  #cp-one .cp-flow-result { contain:none; justify-self:center; width:100%; margin-top:0; }
}
@container (max-width:650px) {
  #cp-one .cp-flow-head h2 { font-size:29px; }
  #cp-one .cp-flow-kicker { text-wrap:balance; }
  #cp-one .cp-flow-kicker-mark { display:none; }
  #cp-one .cp-flow-tap { gap:5px; padding-inline:6px; }

}
@container (max-width:480px) {
  #cp-one .cp-flow-head h2 { font-size:24.500px; }
}

/* Shared flow colors and motion preferences. */
#cp-one .cp-flow { --flow-hue:#86b9ff; }
#cp-one .cp-flow-a { --c:#7db4ff; }
#cp-one .cp-flow-b { --c:#b59cff; }
#cp-one .cp-flow-c { --c:#ff9fc6; }
#cp-one .cp-flow-pick { min-width:0; font:inherit; }
#cp-one .cp-flow:not(.is-running) *,#cp-one .cp-flow:not(.is-running) *:before,#cp-one .cp-flow:not(.is-running) *:after { animation-play-state:paused; }
@media (prefers-reduced-motion:reduce) {
 #cp-one .cp-flow *,#cp-one .cp-flow *:before,#cp-one .cp-flow *:after { transition:none!important; animation:none!important; }
}
@container (max-width:1000px) {
 #cp-one .cp-flow-deck { --fan-x:-12px; --fan-y:8px; height:clamp(380px,104cqw,560px); }
}
@container (max-width:650px) {
 #cp-one .cp-flow-picks { gap:11px 14px; }
 #cp-one .cp-flow-pick { gap:8px; padding:10px 9px; }
 #cp-one .cp-flow-pick-icon { --icon-scale:.65; }
 #cp-one .cp-flow-pick-voice { flex-direction:row; align-items:center; gap:12px; padding:11px 11px 13px; }
 #cp-one .cp-flow-pick-text strong { font-size:13.5px; }
 #cp-one .cp-flow-pick-text small { font-size:11px; }
 #cp-one .cp-flow-deck { --fan-x:-10px; --fan-y:7px; }
 #cp-one .cp-flow-deck-badge { padding:6px 13px 7px; font-size:13px; }
}
@container (max-width:480px) {
 #cp-one .cp-flow-pick:not(.cp-flow-pick-voice) { gap:7px; }
 #cp-one .cp-flow-pick-icon { --icon-scale:.55; }
 #cp-one .cp-flow-pick:not(.cp-flow-pick-voice) .cp-flow-pick-text strong { font-size:12px; }
 #cp-one .cp-flow-pick:not(.cp-flow-pick-voice) .cp-flow-pick-text small { font-size:10.5px; }
}
#cp-one .cp-flow-art-voice { display:flex; align-items:center; gap:3px; padding-left:3px; }
#cp-one .cp-flow-art-voice i { flex:none; width:3px; height:12px; border-radius:2px; background:var(--hue); }
#cp-one .cp-flow-art-voice i:nth-child(2) { height:26px; }
#cp-one .cp-flow-art-voice i:nth-child(3) { height:17px; }
#cp-one .cp-flow-art-voice i:nth-child(4) { height:32px; }
#cp-one .cp-flow-art-voice i:nth-child(5) { height:14px; }
@keyframes cp-flow-live { 50% { opacity:.35; } }

/* Requested v1.2 adjustments remain inside section F. */
#cp-one .cp-flow { --fa:#86b9ff; --fb:#b8a4ff; --fc:#ff9fc3; }
#cp-one .cp-flow-tap { margin-top:0; }
#cp-one .cp-flow-tap:before { content:""; position:absolute; left:50%; bottom:100%; height:9px; border-left:1.5px solid var(--a); opacity:.6; }
#cp-one .cp-flow-tap { position:relative; }
#cp-one .cp-flow-pick-voice { width:min(100%,360px); justify-self:center; }
#cp-one .cp-flow-pick-voice .cp-flow-pick-text strong { white-space:nowrap; }
#cp-one .cp-flow-art-voice { justify-content:center; gap:3px; padding:0; }
#cp-one .cp-flow-art-voice i { position:static; }
#cp-one .cp-flow-cta { grid-area:cta; display:grid; align-self:start; justify-items:start; gap:17px; padding:28px 0 0; }
#cp-one .cp-flow-cta-buttons { display:flex; flex-wrap:wrap; justify-content:flex-start; gap:10px; }
#cp-one .cp-flow-cta-buttons .cp-button { font-size:14px; padding:13px 17px; white-space:nowrap; }
#cp-one .cp-flow-assurances { display:flex; flex-wrap:wrap; justify-content:center; gap:9px 18px; list-style:none; margin:0; padding:0; }
#cp-one .cp-flow-assurances li { display:flex; align-items:center; gap:7px; color:#bcc9c4; font-size:13px; line-height:1.4; white-space:nowrap; }
#cp-one .cp-flow-assurances svg { flex:none; width:18px; height:18px; overflow:visible; color:#3ecf8e; }
#cp-one .cp-flow.is-still *,#cp-one .cp-flow.is-still *:before,#cp-one .cp-flow.is-still *:after { transition:none!important; animation:none!important; }
@container (max-width:1000px) {
 #cp-one .cp-flow-cta { padding:0; }
}
@container (max-width:650px) {
 #cp-one .cp-flow-tap { gap:3px; padding:3px 4px; font-size:clamp(7px,2.15cqw,10px); line-height:14px; }
 #cp-one .cp-flow-tap svg { width:clamp(9px,2.5cqw,12px); height:clamp(9px,2.5cqw,12px); }
 #cp-one .cp-flow-pick-voice { width:100%; flex-direction:row; align-items:center; gap:12px; }
 #cp-one .cp-flow-cta-buttons .cp-button { font-size:13px; padding:12px 14px; }
 #cp-one .cp-flow-assurances { gap:9px 13px; }
 #cp-one .cp-flow-assurances li { font-size:11.5px; gap:5px; }
}

@container (min-width:1001px) {
}

/* Stage 1: the three sources, a live visual over the icon box from the original graph */
#cp-one .cp-flow-sources { position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:0; padding:0; list-style:none; }
#cp-one .cp-flow-source { display:grid; grid-template-rows:auto 1fr; gap:8px; min-width:0; }
#cp-one .cp-flow-live { position:relative; height:172px; overflow:hidden; border:1px solid color-mix(in srgb,var(--c) 40%,transparent); border-radius:13px; background:radial-gradient(ellipse at 92% 122%,color-mix(in srgb,var(--c) 34%,transparent),transparent 62%),linear-gradient(155deg,color-mix(in srgb,var(--c) 22%,#151a2e),#10131f 68%); box-shadow:0 16px 34px #0000005c,0 0 22px color-mix(in srgb,var(--c) 8%,transparent),inset 0 1px 0 #ffffff26; }
/* 1a: the prompt, as a coding platform shows it */
#cp-one .cp-flow-prompt-bar { display:flex; align-items:center; justify-content:space-between; gap:6px; padding:9px 11px 0; color:#a9bcdc; font:500 10px/1.5 'JetBrains Mono',monospace; letter-spacing:.08em; text-transform:uppercase; }
#cp-one .cp-flow-prompt-bar b { padding:0 7px; border-radius:99px; background:color-mix(in srgb,var(--c) 26%,transparent); color:#dcebff; font-weight:500; white-space:nowrap; }
#cp-one .cp-flow-prompt-bar b i { font-style:normal; }
#cp-one .cp-flow-prompt-card { position:absolute; inset:32px 11px 8px; transition:transform .6s cubic-bezier(.2,.7,.2,1),opacity .4s; }
#cp-one .cp-flow-prompt-card strong { display:block; color:#f4f7fe; font-size:15px; font-weight:600; line-height:1.25; letter-spacing:-.02em; }
#cp-one .cp-flow-prompt-card p { margin-top:5px; color:#c8d3e8; font-size:11.5px; line-height:1.4; }
#cp-one .cp-flow-prompt-card ul { display:grid; gap:2px; margin-top:8px; padding:0; list-style:none; color:#a4b6d4; font-size:10.5px; line-height:1.4; }
#cp-one .cp-flow-prompt-card li { display:flex; align-items:baseline; gap:6px; }
#cp-one .cp-flow-prompt-card li:before { content:""; flex:none; width:4px; height:4px; border-radius:50%; background:var(--c); transform:translateY(-2px); }
#cp-one .cp-flow-prompt-card[data-flow-card="2"] { opacity:0; transform:translateY(56%); }
#cp-one .cp-flow-prompt.is-part2 .cp-flow-prompt-card[data-flow-card="1"] { opacity:0; transform:translateY(-56%); }
#cp-one .cp-flow-prompt.is-part2 .cp-flow-prompt-card[data-flow-card="2"] { opacity:1; transform:none; }
/* 1b: a Python file scrolled and edited, with a shadow at the top that fades the code out */
#cp-one .cp-flow-code-tabs { position:absolute; z-index:1; inset:0 0 auto; display:flex; align-items:flex-end; gap:2px; height:30px; padding:6px 8px 0; background:linear-gradient(180deg,color-mix(in srgb,var(--c) 14%,#45445a),color-mix(in srgb,var(--c) 10%,#3a3a4e)); box-shadow:inset 0 1px 0 #ffffff2e,0 2px 8px #00000066; font:500 10px/1.5 'JetBrains Mono',monospace; }
#cp-one .cp-flow-code-tabs span { padding:3px 9px 4px; border-radius:6px 6px 0 0; color:#d9d6e6; transition:color .3s,background .3s; }
#cp-one .cp-flow-code-tabs span.is-on { background:linear-gradient(180deg,color-mix(in srgb,var(--c) 30%,#2a2a3c),color-mix(in srgb,var(--c) 18%,#1f1f2c)); color:#fff; font-weight:600; box-shadow:inset 0 1px 0 color-mix(in srgb,var(--c) 45%,#ffffff40),inset 0 -2px 0 var(--c); }
#cp-one .cp-flow-code-view { position:absolute; inset:30px 0 0; overflow:hidden; background:#1c1d26; transition:opacity .3s; }
#cp-one .cp-flow-code-view:after { content:""; position:absolute; z-index:2; inset:auto 0 0; height:8px; background:linear-gradient(transparent,#1c1d26); pointer-events:none; }
#cp-one .cp-flow-code-view.is-out { opacity:0; }
#cp-one .cp-flow-code-file { position:absolute; inset:0 0 auto; margin:0; padding:5px 0 0; list-style:none; color:#f3f2f7; font:10.5px/19px 'JetBrains Mono',monospace; opacity:0; transition:opacity .3s; will-change:transform; }
#cp-one .cp-flow-code-file.is-on { opacity:1; }
#cp-one .cp-flow-code-file li { display:flex; height:19px; white-space:pre; }
#cp-one .cp-flow-code-file li>i { flex:none; width:30px; padding-right:10px; color:#8f8e9e; font-size:10px; font-style:normal; text-align:right; }
#cp-one .cp-flow-code-file code { font:inherit; }
#cp-one .cp-flow-code-file .k { color:#cfa8ff; }
#cp-one .cp-flow-code-file .f { color:#fff; font-weight:600; }
#cp-one .cp-flow-code-file .s { color:#ffb3d1; }
#cp-one .cp-flow-code-file .n { color:#8be3a8; }
#cp-one .cp-flow-code-file .c { color:#a3a2b0; font-style:italic; }
#cp-one .cp-flow-code-file li.is-typing,#cp-one .cp-flow-code-file li.is-edited { background:#ffffff1f; box-shadow:inset 3px 0 0 var(--c); color:#fff; }
#cp-one .cp-flow-code-file li.is-typing>i,#cp-one .cp-flow-code-file li.is-edited>i { color:#e2e1ea; }
#cp-one .cp-flow-code-file li.is-typing code:after { content:""; display:inline-block; width:1.5px; height:12px; margin-left:1px; background:#fff; vertical-align:-2px; animation:cp-flow-caret .8s steps(2,jump-none) infinite; }
@keyframes cp-flow-caret { from { opacity:1; } to { opacity:0; } }
/* 1c: a short spoken history; the interviewer's lines are speech bubbles */
#cp-one .cp-flow-talk:before { content:""; position:absolute; z-index:2; inset:0 0 auto; height:26px; background:linear-gradient(#1c1a30,transparent); pointer-events:none; }
#cp-one .cp-flow-talk-track { position:absolute; inset:0 9px auto; display:grid; gap:7px; padding-top:9px; transition:transform .55s cubic-bezier(.2,.7,.2,1); }
#cp-one .cp-flow-say { display:flex; align-items:flex-end; gap:6px; margin:0; }
#cp-one .cp-flow-say-who { position:relative; flex:none; display:grid; place-items:center; width:21px; height:21px; border-radius:50%; background:linear-gradient(140deg,#fff,var(--c) 42%,#8a4f86); color:#2a1524; box-shadow:0 0 0 2px color-mix(in srgb,var(--c) 26%,transparent); }
#cp-one .cp-flow-say-who svg { width:12px; height:12px; }
#cp-one .cp-flow-say-bubble { position:relative; display:flex; align-items:center; gap:7px; padding:6px 10px 7px 8px; border-radius:12px 12px 12px 3px; background:linear-gradient(118deg,color-mix(in srgb,var(--c) 48%,#1d1830),color-mix(in srgb,var(--c) 15%,#1b1a2d) 85%); color:#fff4f9; font-size:11px; font-weight:500; line-height:1.3; box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 55%,transparent),inset 0 1px 0 1px #ffffff30,0 6px 14px #00000066; }
#cp-one .cp-flow-wave { flex:none; display:flex; align-items:center; gap:1.5px; height:13px; }
#cp-one .cp-flow-wave i { width:2px; height:100%; border-radius:1px; background:var(--c); transform:scaleY(.4); }
#cp-one .cp-flow-wave i:nth-child(2) { transform:scaleY(.9); }
#cp-one .cp-flow-wave i:nth-child(3) { transform:scaleY(.6); }
#cp-one .cp-flow-say.is-speaking .cp-flow-wave i { animation:cp-flow-wave .45s ease-in-out infinite alternate; }
#cp-one .cp-flow-say.is-speaking .cp-flow-wave i:nth-child(2) { animation-delay:-.3s; }
#cp-one .cp-flow-say.is-speaking .cp-flow-wave i:nth-child(3) { animation-delay:-.15s; }
#cp-one .cp-flow-say.is-speaking .cp-flow-wave i:nth-child(4) { animation-delay:-.38s; }
@keyframes cp-flow-wave { from { transform:scaleY(.25); } to { transform:scaleY(1); } }
#cp-one .cp-flow-reply { justify-self:end; display:flex; align-items:center; gap:5px; max-width:90%; margin:0; padding:5px 10px 6px 8px; border-radius:12px 12px 3px 12px; background:#ffffff17; color:#dcd9ea; font-size:10.5px; line-height:1.3; box-shadow:inset 0 0 0 1px #ffffff24; }
#cp-one .cp-flow-reply svg { width:10px; height:10px; color:#b9b1d4; }
#cp-one .cp-flow-talk:after { content:""; position:absolute; z-index:2; inset:auto 0 0; height:44px; background:linear-gradient(transparent,#19152bf5 58%); pointer-events:none; }
#cp-one .cp-flow-listen { position:absolute; z-index:3; inset:auto 10px 6px; display:flex; align-items:center; gap:6px; margin:0; color:#e8bcd0; font:500 9px/1.5 'JetBrains Mono',monospace; letter-spacing:.08em; text-transform:uppercase; }
#cp-one .cp-flow-listen svg { width:11px; height:11px; color:var(--c); }
#cp-one .cp-flow-level { display:flex; align-items:center; gap:2px; height:12px; margin-right:2px; }
#cp-one .cp-flow-level i { width:2px; height:100%; border-radius:1px; background:var(--c); transform:scaleY(.3); }
#cp-one .cp-flow-level i:nth-child(3n+1) { transform:scaleY(.55); }
#cp-one .cp-flow-level i:nth-child(4n+2) { transform:scaleY(.8); }
#cp-one .cp-flow.is-running .cp-flow-level i { animation:cp-flow-wave .6s ease-in-out infinite alternate; }
#cp-one .cp-flow.is-running .cp-flow-level i:nth-child(2n) { animation-duration:.42s; animation-delay:-.2s; }
#cp-one .cp-flow.is-running .cp-flow-level i:nth-child(3n) { animation-duration:.5s; animation-delay:-.35s; }
#cp-one .cp-flow.is-live [data-flow-say] { opacity:0; transform:translateY(9px) scale(.95); transform-origin:0 100%; transition:opacity .35s,transform .45s cubic-bezier(.2,1.3,.4,1); }
#cp-one .cp-flow.is-live [data-flow-say].is-on { opacity:1; transform:none; }


/* Stage 2: the memory. Prompt, then files with their line data, then voice notes */
#cp-one .cp-flow-memory { position:relative; z-index:1; border:1px solid #7b75a6; border-radius:17px; background:radial-gradient(ellipse at 94% 120%,#7a438a5c,transparent 58%),radial-gradient(ellipse at 0% 0%,#3a55a44a,transparent 56%),linear-gradient(160deg,#37345c,#2b2844 60%,#2f2948); box-shadow:0 30px 60px -14px #000c,0 10px 24px -10px #0009,0 0 0 1px #00000066,inset 0 1px 0 #ffffff38,inset 0 -1px 0 #0000004d; }
#cp-one .cp-flow-memory-glow { position:absolute; inset:-1px; border-radius:inherit; opacity:0; box-shadow:0 0 0 1.5px #dccfff,0 0 40px 5px #a98bffb8,inset 0 0 34px #a98bff47; pointer-events:none; }
#cp-one .cp-flow-memory-head { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px; padding:14px 16px 13px 17px; border-radius:16px 16px 0 0; background:linear-gradient(180deg,#4a4769,#3d3a5a); box-shadow:inset 0 1px 0 #ffffff33,0 1px 0 #0000004d; }
#cp-one .cp-flow-memory-head>svg { width:24px; height:24px; color:#e9e6f6; }
#cp-one .cp-flow-memory-head strong { display:block; color:#ffffff; font-size:16.5px; font-weight:600; line-height:1.25; letter-spacing:-.025em; }
#cp-one .cp-flow-memory-head p span { display:block; margin-top:2px; color:#c4c6d4; font-size:12px; line-height:1.4; }
@keyframes cp-flow-beat { 50% { opacity:.35; transform:scale(.75); } }
#cp-one .cp-flow-memory-head em { display:inline-flex; align-items:center; gap:6px; padding:2px 10px 3px 8px; border:1px solid #7ee2a8b3; border-radius:99px; background:#7ee2a814; color:#e3f8ec; font:500 9.5px/1.5 'JetBrains Mono',monospace; font-style:normal; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; }
#cp-one .cp-flow-memory-head em:before { content:""; width:6px; height:6px; border-radius:50%; background:#8cf0bb; box-shadow:0 0 8px #8cf0bb99; }
#cp-one .cp-flow.is-running .cp-flow-memory-head em:before { animation:cp-flow-beat 1.5s ease-in-out infinite; }
#cp-one .cp-flow-memory-body { transition:opacity .36s; }
#cp-one .cp-flow-memory.is-wiping .cp-flow-memory-body { opacity:0; }
#cp-one .cp-flow-memory.is-wiping .cp-flow-memory-body * { transition:none; }
#cp-one .cp-flow-area { position:relative; display:grid; grid-template-columns:82px minmax(0,1fr); gap:10px; align-items:start; padding:11px 16px 12px 19px; border-top:1px solid #ffffff12; }
#cp-one .cp-flow-area:before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,color-mix(in srgb,var(--c) 30%,transparent),transparent 72%); opacity:calc(.2 + var(--flash,0) * .8); pointer-events:none; }
#cp-one .cp-flow-area:after { content:""; position:absolute; left:0; top:9px; bottom:9px; width:3px; border-radius:0 3px 3px 0; background:var(--c); box-shadow:0 0 10px var(--c); }
#cp-one .cp-flow-area h3 { position:relative; padding-top:4px; color:color-mix(in srgb,var(--c) 72%,#fff); font:500 10.5px/1.5 'JetBrains Mono',monospace; letter-spacing:.09em; text-transform:uppercase; }
#cp-one .cp-flow-chips { position:relative; display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; list-style:none; }
#cp-one .cp-flow-chips li { display:flex; align-items:center; gap:7px; padding:3px 11px 4px 4px; border-radius:99px; background:#ffffff14; box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 42%,transparent); color:#e9effc; font-size:12px; line-height:1.4; white-space:nowrap; transition:opacity .35s,transform .45s cubic-bezier(.2,1.4,.4,1); }
#cp-one .cp-flow-chips b { padding:1px 7px; border-radius:99px; background:var(--c); color:#0f1a30; font-size:9.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; }
#cp-one .cp-flow-files { position:relative; display:grid; grid-template-columns:minmax(0,1fr); gap:10px; margin:0; padding:0; list-style:none; }
#cp-one .cp-flow-files li { display:grid; grid-template-columns:24px minmax(0,1fr) auto; grid-template-areas:"ext name range" "ext bar range"; gap:5px 10px; align-items:center; transition:opacity .35s,transform .45s cubic-bezier(.2,1.2,.4,1); }
#cp-one .cp-flow-ext { grid-area:ext; display:grid; place-items:center; width:24px; height:24px; border-radius:6px; background:color-mix(in srgb,var(--c) 26%,transparent); color:var(--c); font:600 8.5px/1 'JetBrains Mono',monospace; text-transform:uppercase; }
#cp-one .cp-flow-files li>p:first-of-type { grid-area:name; display:flex; align-items:center; gap:8px; min-width:0; }
#cp-one .cp-flow-files strong { color:#f3f0ff; font:500 12px/1.3 'JetBrains Mono',monospace; }
#cp-one .cp-flow-files em { padding:0 7px 1px; border-radius:99px; background:color-mix(in srgb,var(--c) 48%,transparent); color:#fff; font-size:9.5px; font-style:normal; line-height:1.5; white-space:nowrap; transition:opacity .3s,transform .4s cubic-bezier(.2,1.5,.4,1); }
#cp-one .cp-flow-range { grid-area:range; min-width:58px; text-align:right; }
#cp-one .cp-flow-range b { display:block; color:#f6f3ff; font-size:17px; font-weight:500; line-height:1.1; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
#cp-one .cp-flow-range small { display:block; margin-top:1px; color:#a8a0cc; font-size:8.5px; letter-spacing:.07em; text-transform:uppercase; }
#cp-one .cp-flow-bar { grid-area:bar; position:relative; height:5px; }
#cp-one .cp-flow-bar>span { position:absolute; inset:0; overflow:hidden; border-radius:2px; background:#ffffff1c; -webkit-mask:repeating-linear-gradient(90deg,#000 0 9px,transparent 9px 12px); mask:repeating-linear-gradient(90deg,#000 0 9px,transparent 9px 12px); }
#cp-one .cp-flow-bar i { position:absolute; inset:0; background:linear-gradient(90deg,var(--c),color-mix(in srgb,var(--c) 50%,#fff)); transform-origin:0 50%; }
#cp-one .cp-flow-bar u { position:absolute; top:-3px; width:3px; height:11px; margin-left:-1.5px; border-radius:2px; background:#fff; box-shadow:0 0 9px 1px #fff; transition:opacity .3s,transform .4s cubic-bezier(.2,1.6,.4,1); }
#cp-one .cp-flow:not(.is-live) .cp-flow-bar u { display:none; }
#cp-one .cp-flow-notes { position:relative; display:grid; grid-template-columns:minmax(0,1fr); gap:5px; margin:0; padding:1px 0 0; list-style:none; }
#cp-one .cp-flow-notes li { display:flex; align-items:baseline; gap:8px; color:#f6e6ee; font-size:12px; line-height:1.4; transition:opacity .35s,transform .45s cubic-bezier(.2,1.3,.4,1); }
#cp-one .cp-flow-notes li:before { content:""; flex:none; width:5px; height:5px; border-radius:50%; background:var(--c); transform:translateY(-1px); }
#cp-one .cp-flow-notes b { flex:none; padding:0 7px 1px; border-radius:99px; background:color-mix(in srgb,var(--c) 36%,transparent); color:#ffd8e7; font-size:9px; font-weight:600; letter-spacing:.05em; line-height:1.6; text-transform:uppercase; }
#cp-one .cp-flow.is-live .cp-flow-chips li:not(.is-on),#cp-one .cp-flow.is-live .cp-flow-notes li:not(.is-on) { opacity:0; transform:translateY(7px) scale(.94); }
#cp-one .cp-flow.is-live .cp-flow-files li:not(.is-on) { opacity:0; transform:translateY(9px); }
#cp-one .cp-flow.is-live .cp-flow-files em:not(.is-on),#cp-one .cp-flow.is-live .cp-flow-bar u:not(.is-on) { opacity:0; transform:scale(.5); }
#cp-one .cp-flow-files .cp-flow-wait,#cp-one .cp-flow-notes .cp-flow-wait { display:none; }
#cp-one .cp-flow.is-live .cp-flow-files .cp-flow-wait,#cp-one .cp-flow.is-live .cp-flow-notes .cp-flow-wait { display:flex; align-items:center; gap:8px; align-self:center; color:#9d95c4; font-size:11px; font-style:italic; line-height:1.4; opacity:0; transform:none; }
#cp-one .cp-flow.is-live .cp-flow-wait.is-on { opacity:1; }
#cp-one .cp-flow-notes .cp-flow-wait:before { background:transparent; box-shadow:inset 0 0 0 1px var(--c); }
#cp-one .cp-flow-files .cp-flow-wait { grid-area:2 / 1; min-height:34px; padding-left:34px; border-radius:8px; background:repeating-linear-gradient(90deg,#ffffff24 0 6px,transparent 6px 11px) 0 100% / 100% 1px no-repeat; }
#cp-one .cp-flow-files li[data-flow-row="b"] { grid-area:2 / 1; }
#cp-one .cp-flow-notes .cp-flow-wait { grid-area:1 / 1; }
#cp-one .cp-flow-notes li[data-flow-note="1"] { grid-area:1 / 1; }
#cp-one .cp-flow-memory-foot { display:flex; flex-wrap:wrap; justify-content:space-between; gap:2px 14px; padding:9px 16px 11px 19px; border-top:1px solid #ffffff12; color:#b9b4cc; font:10.5px/1.5 'JetBrains Mono',monospace; }
#cp-one .cp-flow-memory-foot span:first-child { color:#e6e3f3; }

#cp-one .cp-flow-models { position:relative; z-index:1; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:7px 10px; width:max-content; max-width:100%; margin:28px auto 0; padding:10px 14px 10px 16px; border:1px solid #3b3e3d; border-radius:16px; background:linear-gradient(145deg,#202221,#191b1a); box-shadow:inset 0 1px 0 #ffffff05,0 2px 3px #0002; }
#cp-one .cp-flow-models-glow { position:absolute; inset:0; border-radius:inherit; opacity:0; box-shadow:0 0 24px #c3c9d51a; pointer-events:none; }
#cp-one .cp-flow-models-label { margin-right:4px; color:#a7abb3; font:500 9.5px/1.4 'JetBrains Mono',monospace; letter-spacing:.09em; text-transform:uppercase; }
#cp-one .cp-flow-model { display:flex; align-items:center; gap:8px; padding:4px 10px; border-radius:8px; background:#ffffff05; color:#eceef1; font-size:13px; font-weight:600; letter-spacing:-.01em; white-space:nowrap; }
#cp-one .cp-flow-model img { display:block; flex:none; width:22px; height:21px; object-fit:contain; }
#cp-one .cp-flow-model-a img { width:25px; }

#cp-one .cp-flow-talk-view { position:absolute; inset:30px 0 0; overflow:hidden; }
#cp-one .cp-flow-listen { inset:7px 10px auto; }
#cp-one .cp-flow-talk:before { height:31px; background:linear-gradient(#292039,#211b30); }
#cp-one .cp-flow-talk:after { height:12px; background:linear-gradient(transparent,#19152bf5); }
@container (max-width:650px) {
 #cp-one .cp-flow-sources { gap:7px; }
 #cp-one .cp-flow-live { height:170px; border-radius:12px; }
  #cp-one .cp-flow-prompt-bar { padding:8px 8px 0; font-size:8px; letter-spacing:.04em; }
  #cp-one .cp-flow-prompt-bar b { padding:0 5px; }
  #cp-one .cp-flow-prompt-card { inset:28px 8px 6px; }
  #cp-one .cp-flow-prompt-card strong { font-size:12px; }
  #cp-one .cp-flow-prompt-card p { font-size:9.5px; line-height:1.35; }
  #cp-one .cp-flow-prompt-card ul { margin-top:5px; font-size:9px; }
  #cp-one .cp-flow-prompt-card li:nth-child(2) { display:none; }
  #cp-one .cp-flow-code-tabs { height:27px; padding:5px 5px 0; font-size:9px; }
  #cp-one .cp-flow-code-tabs span { padding:2px 6px 3px; }
  #cp-one .cp-flow-code-view { top:27px; }
  #cp-one .cp-flow-code-file { font-size:9.5px; line-height:17px; }
  #cp-one .cp-flow-code-file li { height:17px; }
  #cp-one .cp-flow-code-file li>i { width:22px; padding-right:6px; font-size:9px; }
  #cp-one .cp-flow-talk-track { inset-inline:6px; gap:6px; }
  #cp-one .cp-flow-say { gap:4px; }
  #cp-one .cp-flow-say-who { width:16px; height:16px; }
  #cp-one .cp-flow-say-who svg { width:10px; height:10px; }
  #cp-one .cp-flow-say-bubble { gap:5px; padding:5px 7px 6px 6px; font-size:9.5px; line-height:1.25; }
  #cp-one .cp-flow-wave { height:11px; }
  #cp-one .cp-flow-say .cp-flow-wave { display:none; }
  #cp-one .cp-flow-say-bubble { padding-left:8px; }
  #cp-one .cp-flow-reply { padding:4px 7px 5px 6px; font-size:9px; }
  #cp-one .cp-flow-reply svg { display:none; }
  #cp-one .cp-flow-memory-head { gap:10px; padding:12px 12px 11px 13px; }
  #cp-one .cp-flow-memory-head>svg { width:21px; height:21px; }
  #cp-one .cp-flow-memory-head strong { font-size:14.5px; }
  #cp-one .cp-flow-memory-head p span { font-size:10.5px; }
  #cp-one .cp-flow-memory-head em { padding-inline:7px; font-size:8.5px; }
  #cp-one .cp-flow-area { grid-template-columns:minmax(0,1fr); gap:6px; padding:9px 12px 11px 15px; }
  #cp-one .cp-flow-area h3 { padding-top:0; }
  #cp-one .cp-flow-chips li { font-size:10.5px; padding-right:9px; }
  #cp-one .cp-flow-notes li { font-size:11px; }
  #cp-one .cp-flow-memory-foot { padding:8px 12px 10px 15px; font-size:9.5px; }
  #cp-one .cp-flow-models { gap:6px 7px; padding:9px 10px; }
  #cp-one .cp-flow-models-label { width:100%; margin:0; text-align:center; }
  #cp-one .cp-flow-model { padding:3px 10px 4px 4px; font-size:12px; }
  #cp-one .cp-flow-model img { width:21px; height:19px; }
 #cp-one .cp-flow-code-tabs { gap:0; padding-inline:2px; font-size:7px; }
 #cp-one .cp-flow-code-tabs span { padding-inline:3px; }
 #cp-one .cp-flow-listen { inset:7px 5px auto; gap:4px; font-size:7px; letter-spacing:0; }
 #cp-one .cp-flow-listen svg { display:none; }
 #cp-one .cp-flow-level { gap:1px; margin-right:0; }
 #cp-one .cp-flow-level i { width:1px; }
 #cp-one .cp-flow-chips { display:grid; }
 #cp-one .cp-flow-chips li { white-space:normal; }
 #cp-one .cp-flow-files li>p:first-of-type { flex-wrap:wrap; gap:2px 8px; }
}

/* comparison-table: selected Fable 3, revision 3. Scoped to this section. */
#cp-one :where(.cp-story-table) .cp-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@keyframes cp-say-wave { 50% { transform:scaleY(.5); } }
#cp-one .cp-only:where(.cp-story-table) { margin:40px 0 34px; }
#cp-one :where(.cp-story-table) .cp-only-table { width:100%; table-layout:fixed; border-collapse:separate; border-spacing:0; border:1px solid #ffffff21; border-radius:18px; background:radial-gradient(ellipse at 100% 106%,#1c1a23 0%,transparent 40%),radial-gradient(ellipse at 0% -12%,#171d2b 0%,transparent 48%),linear-gradient(150deg,#161a23,#13151b 60%); box-shadow:0 20px 55px #0004,inset 0 1px 0 #ffffff24; }
#cp-one :where(.cp-story-table) .cp-only-col-us { width:16%; }
#cp-one :where(.cp-story-table) .cp-only-col-them { width:12.4%; }
#cp-one :where(.cp-story-table) .cp-only-table :is(th,td) { padding:0; }
#cp-one :where(.cp-story-table) .cp-only-table thead th { padding:19px 8px 17px; color:#8c96a5; font-size:11px; font-weight:400; line-height:1.4; text-align:center; vertical-align:middle; }
#cp-one :where(.cp-story-table) .cp-only-table thead th:first-child { padding-left:24px; color:#a4aebb; font:500 12px/1.5 'JetBrains Mono',monospace; letter-spacing:.07em; text-transform:uppercase; text-align:left; }
#cp-one :where(.cp-story-table) .cp-only-wordmark { display:block; width:min(112px,82%); height:auto; margin:0 auto; }
#cp-one :where(.cp-story-table) .cp-only-sprite { display:none; width:24px; height:24px; margin:0 auto; }
#cp-one :where(.cp-story-table) .cp-only-rival { display:inline-flex; flex-direction:row; align-items:center; gap:6px; color:#cfd5de; font-size:12px; font-weight:500; letter-spacing:-.01em; white-space:nowrap; }
#cp-one :where(.cp-story-table) .cp-only-rival-logo { width:24px; height:24px; object-fit:contain; border-radius:5px; }
#cp-one :where(.cp-story-table) .cp-only-table tbody :is(th,td) { border-top:1px solid #ffffff14; }
#cp-one :where(.cp-story-table) .cp-only-table tbody th { font-weight:400; text-align:left; }
#cp-one :where(.cp-story-table) .cp-only-table tbody th .cp-only-feature { position:relative; display:flex; align-items:center; gap:15px; min-height:64px; padding:10px 18px 11px 24px; color:#dfe4ea; }
#cp-one :where(.cp-story-table) .cp-only-table tbody th .cp-only-feature>span:first-child { position:relative; z-index:1; display:grid; place-items:center; flex:none; width:27px; height:27px; border:1px solid var(--row-accent); border-radius:50%; background:#181c26; color:var(--row-accent); font:500 12px/1 'JetBrains Mono',monospace; }
#cp-one :where(.cp-story-table) .cp-only-table tbody th .cp-only-feature>span.cp-only-cont { border:0; background:transparent; }
#cp-one :where(.cp-story-table) .cp-only-cont:after { content:""; width:7px; height:7px; border:1px solid var(--row-accent); border-radius:50%; background:#181c26; }
#cp-one :where(.cp-story-table) .cp-only-lead th .cp-only-feature:after,#cp-one :where(.cp-story-table) :is(.cp-only-follow,.cp-only-sub) th .cp-only-feature:before { content:""; position:absolute; left:37px; border-left:1px solid color-mix(in srgb,var(--row-accent) 50%,transparent); }
#cp-one :where(.cp-story-table) .cp-only-lead th .cp-only-feature:after { top:50%; bottom:-1px; }
#cp-one :where(.cp-story-table) :is(.cp-only-follow,.cp-only-sub) th .cp-only-feature:before { top:-1px; bottom:50%; }
#cp-one :where(.cp-story-table) .cp-only-text { display:grid; gap:1px; min-width:0; }
#cp-one :where(.cp-story-table) .cp-only-text strong { color:inherit; font-size:16px; font-weight:400; line-height:1.35; letter-spacing:-.01em; }
#cp-one :where(.cp-story-table) .cp-only-text small { color:#98a2b1; font-size:12.5px; line-height:1.45; text-wrap:balance; }
#cp-one :where(.cp-story-table) .cp-only-table tbody tr:is(:hover,:focus-within) th .cp-only-feature { color:#fff; }
#cp-one :where(.cp-story-table) .cp-only-table tbody tr:is(:hover,:focus-within) :is(th,td):not(.cp-only-us) { background:#ffffff08; }
#cp-one :where(.cp-story-table) .cp-only-sky { --row-accent:#94bbeb; }
#cp-one :where(.cp-story-table) .cp-only-amber { --row-accent:#e6be7c; }
#cp-one :where(.cp-story-table) .cp-only-violet { --row-accent:#bfa6ee; }
#cp-one :where(.cp-story-table) .cp-only-mint { --row-accent:#8fcebc; }
#cp-one :where(.cp-story-table) .cp-only-rose { --row-accent:#e9a3b0; }
#cp-one :where(.cp-story-table) .cp-only-table td { text-align:center; vertical-align:middle; }
#cp-one :where(.cp-story-table) .cp-only-table .cp-only-us { background:linear-gradient(180deg,#93cbb41c,#93cbb410); border-inline:1px solid #93cbb44d; }
#cp-one :where(.cp-story-table) .cp-only-table thead .cp-only-us { border-radius:1px; box-shadow:inset 0 2px 0 #93cbb4; background:linear-gradient(180deg,#214238,#172b24); }
#cp-one :where(.cp-story-table) .cp-only-yes { display:inline-grid; place-items:center; width:27px; height:27px; border-radius:50%; background:var(--cp-mint); color:#0f1a16; box-shadow:0 0 0 5px #93cbb41a; vertical-align:middle; }
#cp-one :where(.cp-story-table) .cp-only-yes svg { width:14px; height:14px; }
#cp-one :where(.cp-story-table) .cp-only-ok { display:inline-grid; place-items:center; color:#a9c7bb; vertical-align:middle; }
#cp-one :where(.cp-story-table) .cp-only-ok svg { width:18px; height:18px; }
#cp-one :where(.cp-story-table) .cp-only-no { display:inline-grid; place-items:center; color:#c58d88; vertical-align:middle; }
#cp-one :where(.cp-story-table) .cp-only-no svg { width:17px; height:17px; }
#cp-one :where(.cp-story-table) .cp-only-na { display:inline-block; color:#858e9c; font-size:18px; line-height:1; vertical-align:middle; }
#cp-one :where(.cp-story-table) .cp-only-table tbody tr.cp-only-sub :is(th,td) { border-top-color:#ffffff0d; background:#00000024; }
#cp-one :where(.cp-story-table) .cp-only-table tbody tr.cp-only-sub .cp-only-us { background:linear-gradient(#00000024,#00000024),linear-gradient(180deg,#93cbb41c,#93cbb410); }
#cp-one :where(.cp-story-table) .cp-only-table tbody tr.cp-only-sub th .cp-only-feature { min-height:35px; padding-block:5px; color:#bcc4cf; }
#cp-one :where(.cp-story-table) .cp-only-sub .cp-only-cont:after { width:5px; height:5px; background:var(--row-accent); }
#cp-one :where(.cp-story-table) .cp-only-sub .cp-only-text { display:block; font-size:13.5px; line-height:1.4; }
#cp-one :where(.cp-story-table) .cp-only-sub .cp-only-text small { margin-left:8px; }
#cp-one :where(.cp-story-table) .cp-only-sub .cp-only-yes { width:17px; height:17px; background:transparent; border:1px solid #93cbb499; color:var(--cp-mint); box-shadow:none; }
#cp-one :where(.cp-story-table) .cp-only-sub .cp-only-yes svg { width:9px; height:9px; }
#cp-one :where(.cp-story-table) .cp-only-sub .cp-only-no svg { width:12px; height:12px; opacity:.75; }
#cp-one :where(.cp-story-table) .cp-only-table tbody tr.cp-only-stealth th .cp-only-feature { min-height:44px; padding-block:7px; color:#d9dee6; }
#cp-one :where(.cp-story-table) .cp-only-stealth .cp-only-text { font-size:15px; }
#cp-one :where(.cp-story-table) .cp-only-table tbody th .cp-only-feature>span.cp-only-ico { color:var(--row-accent); }
#cp-one :where(.cp-story-table) .cp-only-ico:after { display:none; }
#cp-one :where(.cp-story-table) .cp-only-ico svg { width:18px; height:18px; }
#cp-one :where(.cp-story-table) .cp-only-stealth.cp-only-lead th .cp-only-feature:after { top:calc(50% + 13px); }
#cp-one :where(.cp-story-table) .cp-only-stealth th .cp-only-feature:before { bottom:calc(50% + 13px); }
#cp-one :where(.cp-story-table) .cp-only-stealth .cp-only-yes { width:22px; height:22px; border:0; background:var(--cp-mint); color:#0f1a16; box-shadow:0 0 0 4px #93cbb41a; }
#cp-one :where(.cp-story-table) .cp-only-stealth .cp-only-yes svg { width:12px; height:12px; }
#cp-one :where(.cp-story-table) .cp-only-stealth .cp-only-no svg { width:15px; height:15px; opacity:1; }
#cp-one :where(.cp-story-table) .cp-only-stealth .cp-only-ok svg { width:16px; height:16px; }
#cp-one .cp-only:where(.cp-story-table) .cp-compare-note { margin-top:13px; font-size:11px; }
@container (max-width:780px) {
#cp-one :where(.cp-story-table) .cp-only-text strong { font-size:15px; }
#cp-one :where(.cp-story-table) .cp-only-rival { font-size:11px; }
}
@container (max-width:650px) {
#cp-one .cp-only:where(.cp-story-table) { margin-top:32px; }
#cp-one :where(.cp-story-table) .cp-only-wordmark { display:none; }
#cp-one :where(.cp-story-table) .cp-only-sprite { display:block; }
#cp-one :where(.cp-story-table) .cp-only-col-us { width:44px; }
#cp-one :where(.cp-story-table) .cp-only-col-them { width:38px; }
#cp-one :where(.cp-story-table) .cp-only-table thead th { padding:12px 0 11px; vertical-align:bottom; }
#cp-one :where(.cp-story-table) .cp-only-table thead th:first-child { padding-left:14px; font-size:10px; vertical-align:middle; }
#cp-one :where(.cp-story-table) .cp-only-rival-name { writing-mode:vertical-rl; transform:rotate(180deg); font-size:12px; }
#cp-one :where(.cp-story-table) .cp-only-table tbody th .cp-only-feature { gap:10px; min-height:58px; padding:9px 6px 10px 14px; }
#cp-one :where(.cp-story-table) .cp-only-table tbody th .cp-only-feature>span:first-child { width:23px; height:23px; font-size:11px; }
#cp-one :where(.cp-story-table) .cp-only-lead th .cp-only-feature:after,#cp-one :where(.cp-story-table) :is(.cp-only-follow,.cp-only-sub) th .cp-only-feature:before { left:25px; }
#cp-one :where(.cp-story-table) .cp-only-text strong { font-size:13.5px; }
#cp-one :where(.cp-story-table) .cp-only-text small { font-size:11.5px; text-wrap:pretty; }
#cp-one :where(.cp-story-table) .cp-only-sub .cp-only-text { font-size:12.5px; }
#cp-one :where(.cp-story-table) .cp-only-stealth .cp-only-text { font-size:13px; }
#cp-one :where(.cp-story-table) .cp-only-sub .cp-only-text small { display:none; }
#cp-one :where(.cp-story-table) .cp-only-yes { width:24px; height:24px; }
#cp-one :where(.cp-story-table) .cp-only-stealth .cp-only-yes { width:20px; height:20px; }
#cp-one :where(.cp-story-table) .cp-only-ico svg { width:16px; height:16px; }
#cp-one :where(.cp-story-table) .cp-only-stealth.cp-only-lead th .cp-only-feature:after { top:calc(50% + 11px); }
#cp-one :where(.cp-story-table) .cp-only-stealth th .cp-only-feature:before { bottom:calc(50% + 11px); }
}

/* Owner note: compact portrait labels, with the detailed desktop copy retained. */
#cp-one .cp-story-table .cp-table-heading-phone { display:none; }
@container (max-width:650px) {
  #cp-one .cp-story-table .cp-only-text small,#cp-one .cp-story-table .cp-table-heading-wide { display:none; }
  #cp-one .cp-story-table .cp-table-heading-phone { display:inline; }
}

@container (max-width:1000px) {
 #cp-one :where(.cp-story-table) .cp-only-rival { flex-direction:column; gap:7px; }
}

#cp-one :where(.cp-story-table) .cp-only-partial { color:#e6be7c; font-size:19px; line-height:1; }
#cp-one :where(.cp-story-table) .cp-compare-sources { margin-top:14px; color:#a4adba; font-size:12px; line-height:1.6; }
#cp-one :where(.cp-story-table) .cp-compare-sources summary { width:fit-content; cursor:pointer; }
#cp-one :where(.cp-story-table) .cp-compare-sources p { margin-top:10px; }
#cp-one :where(.cp-story-table) .cp-compare-sources ul { margin:10px 0 0; padding-left:18px; }
#cp-one :where(.cp-story-table) .cp-compare-sources li + li { margin-top:6px; }
#cp-one :where(.cp-story-table) .cp-compare-sources a { color:#a9c7bb; text-decoration:underline; text-underline-offset:3px; }

#cp-one :where(.cp-story-table) .cp-only-table tfoot :is(th,td) { padding:22px 4px; border-top:1px solid #ffffff21; color:#dfe4ea; font-size:14px; font-weight:500; }
#cp-one :where(.cp-story-table) .cp-only-table tfoot th { padding-left:24px; text-align:left; }
#cp-one :where(.cp-story-table) .cp-only-prices small { margin-left:6px; color:#98a2b1; font-size:11px; font-weight:400; }
#cp-one :where(.cp-story-table) .cp-only-prices span { font-size:11px; font-weight:400; color:#98a2b1; }
#cp-one :where(.cp-story-table) .cp-only-prices a { color:var(--cp-mint); text-decoration:underline; text-underline-offset:3px; }
@container (max-width:650px) {
 #cp-one :where(.cp-story-table) .cp-only-table tfoot :is(th,td) { padding:16px 1px; font-size:10px; }
 #cp-one :where(.cp-story-table) .cp-only-table tfoot th { padding-left:14px; font-size:12px; }
 #cp-one :where(.cp-story-table) .cp-only-prices span { display:block; font-size:9px; }
}

/* Evolving interview: explicit competitor and HeapSeek lanes, scoped to this story. */
#cp-one .cp-compare-wide:where(.cp-story-parts) { display:block; }
#cp-one .cp-compare-wide:where(.cp-story-parts)>.cp-compare-copy { display:grid; grid-template-columns:.85fr 1.3fr; gap:68px; align-items:start; margin-bottom:36px; }
#cp-one .cp-compare-wide:where(.cp-story-parts) .cp-product-copy-body { padding-top:51px; }
#cp-one .cp-story-parts .cp-parts { padding:28px; border:1px solid #ffffff1c; border-radius:22px; background:linear-gradient(135deg,#1a2028,#12171d 65%); box-shadow:0 20px 55px #0003; }
#cp-one .cp-story-parts .cp-parts-scenario { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:22px; }
#cp-one .cp-story-parts .cp-parts-scenario div>span { display:block; margin-bottom:5px; color:#99a7b8; font-size:12px; }
#cp-one .cp-story-parts .cp-parts-scenario strong { display:block; color:#edf2f7; font-size:23px; font-weight:550; letter-spacing:-.035em; line-height:1.25; }
#cp-one .cp-story-parts .cp-parts-hint { color:#99a7b8; font-size:12px; }
#cp-one .cp-story-parts .cp-parts-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-bottom:24px; }
#cp-one .cp-story-parts .cp-parts-head { display:grid; align-content:start; gap:6px; min-width:0; padding:15px 17px; border:1px solid #ffffff1c; border-radius:11px; background:#ffffff03; color:inherit; font:inherit; text-align:left; cursor:pointer; transition:background .18s,border-color .18s; }
#cp-one .cp-story-parts .cp-parts-head small { color:#9baaba; font:11px/1.5 'JetBrains Mono',monospace; }
#cp-one .cp-story-parts .cp-parts-head strong { color:#d2dce6; font-size:16px; font-weight:550; line-height:1.3; }
#cp-one .cp-story-parts .cp-parts-head>span { color:#97a4b3; font-size:12px; line-height:1.45; }
#cp-one .cp-story-parts .cp-parts-head:hover { background:#ffffff09; border-color:#9db8da66; }
#cp-one .cp-story-parts .cp-parts-head[aria-pressed="true"] { background:#8db9ef14; border-color:#8db9ef80; box-shadow:inset 0 2px #a4c9f3; }
#cp-one .cp-story-parts .cp-parts-head[aria-pressed="true"] strong { color:#edf5ff; }
#cp-one .cp-story-parts .cp-parts-head:focus-visible { outline:2px solid #a4c9f3; outline-offset:3px; }
#cp-one .cp-story-parts .cp-parts-matchup { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
#cp-one .cp-story-parts .cp-parts-side { --lane:#d5b997; display:flex; flex-direction:column; min-width:0; border:1px solid #bda58a3d; border-top:3px solid #bda58a8c; border-radius:13px; background:#211e1c66; }
#cp-one .cp-story-parts .cp-parts-us { --lane:#9be2c6; border-color:#8bd7b959; border-top-color:#8bd7b9; background:linear-gradient(145deg,#1c352f,#162622); }
#cp-one .cp-story-parts .cp-parts-brand { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:20px 20px 17px; border-bottom:1px solid #ffffff12; }
#cp-one .cp-story-parts .cp-parts-brand h4 { margin:0; color:var(--lane); font-size:22px; font-weight:650; letter-spacing:-.035em; line-height:1.2; }
#cp-one .cp-story-parts .cp-parts-brand p { margin-top:5px; color:#a9b2bb; font-size:12px; line-height:1.4; }
#cp-one .cp-story-parts .cp-parts-badge { padding:5px 8px; border:1px solid color-mix(in srgb,var(--lane) 25%,transparent); border-radius:5px; background:color-mix(in srgb,var(--lane) 7%,transparent); color:var(--lane); font-size:10px; font-weight:550; white-space:nowrap; }
#cp-one .cp-story-parts .cp-parts-context { padding:17px 20px 18px; }
#cp-one .cp-story-parts .cp-parts-caption { margin-bottom:10px; color:#a5afba; font-size:10px; letter-spacing:.09em; text-transform:uppercase; }
#cp-one .cp-story-parts .cp-parts-filelist { display:grid; gap:7px; }
#cp-one .cp-story-parts .cp-parts-filelist>span { display:flex; align-items:baseline; justify-content:space-between; gap:12px; min-width:0; padding:9px 10px; border:1px solid #ffffff13; border-radius:6px; background:#00000020; color:#e0e7ed; font:11.5px/1.5 'JetBrains Mono',monospace; }
#cp-one .cp-story-parts .cp-parts-filelist b { color:var(--lane); font:400 12px/1.5 'DM Sans',sans-serif; text-align:right; }
#cp-one .cp-story-parts .cp-parts-filelist .is-missing { border-style:dashed; color:#92969e; background:transparent; }
#cp-one .cp-story-parts .cp-parts-filelist .is-missing b { color:#a49d96; }
#cp-one .cp-story-parts .cp-parts-answer { flex:1; margin:0 20px 20px; padding-top:17px; border-top:1px solid #ffffff1c; }
#cp-one .cp-story-parts .cp-parts-answer small { display:block; margin-bottom:7px; color:var(--lane); font-size:11px; line-height:1.5; }
#cp-one .cp-story-parts .cp-parts-answer strong { display:block; max-width:24em; color:#e7ebef; font-size:20px; font-weight:550; letter-spacing:-.025em; line-height:1.3; }
#cp-one .cp-story-parts .cp-parts-us .cp-parts-answer strong { color:#d6f5e8; }
#cp-one .cp-story-parts .cp-parts-answer p { margin-top:9px; color:#b3bdc8; font-size:13px; line-height:1.6; }
#cp-one .cp-story-parts .cp-parts-takeaway { display:flex; align-items:center; justify-content:center; gap:10px; margin-top:21px; color:#a8b6c6; font-size:13px; line-height:1.5; text-align:center; }
#cp-one .cp-story-parts .cp-parts-takeaway>span { color:#9be2c6; font-size:20px; }
#cp-one .cp-story-parts .cp-parts:not([data-parts-at="1"]) [data-parts-show="1"],#cp-one .cp-story-parts .cp-parts:not([data-parts-at="2"]) [data-parts-show="2"],#cp-one .cp-story-parts .cp-parts:not([data-parts-at="3"]) [data-parts-show="3"] { display:none; }
@container (max-width:1000px) {
 #cp-one .cp-compare-wide:where(.cp-story-parts)>.cp-compare-copy { gap:30px; }
 #cp-one .cp-story-parts .cp-parts-brand { flex-wrap:wrap; }
}
@container (max-width:780px) {
 #cp-one .cp-compare-wide:where(.cp-story-parts)>.cp-compare-copy { grid-template-columns:1fr; gap:19px; margin-bottom:30px; }
 #cp-one .cp-compare-wide:where(.cp-story-parts) .cp-product-copy-body { padding-top:0; }
 #cp-one .cp-story-parts .cp-parts { padding:18px; }
 #cp-one .cp-story-parts .cp-parts-scenario { display:block; }
 #cp-one .cp-story-parts .cp-parts-hint { display:block; margin-top:8px; }
 #cp-one .cp-story-parts .cp-parts-matchup { grid-template-columns:1fr; gap:14px; }
 #cp-one .cp-story-parts .cp-parts-brand { flex-wrap:nowrap; }
 #cp-one .cp-story-parts .cp-parts-head { padding:12px 10px; }
 #cp-one .cp-story-parts .cp-parts-head>span { display:none; }
 #cp-one .cp-story-parts .cp-parts-head small { font-size:10px; }
 #cp-one .cp-story-parts .cp-parts-head strong { font-size:14px; }
}
@container (max-width:480px) {
 #cp-one .cp-story-parts .cp-parts { padding:13px; border-radius:16px; }
 #cp-one .cp-story-parts .cp-parts-scenario strong { font-size:20px; }
 #cp-one .cp-story-parts .cp-parts-steps { gap:6px; margin-bottom:16px; }
 #cp-one .cp-story-parts .cp-parts-head { padding:10px 8px; }
 #cp-one .cp-story-parts .cp-parts-head small { font-size:9px; overflow-wrap:anywhere; }
 #cp-one .cp-story-parts .cp-parts-head strong { font-size:13px; }
 #cp-one .cp-story-parts .cp-parts-brand { padding:16px 14px 14px; gap:8px; }
 #cp-one .cp-story-parts .cp-parts-brand h4 { font-size:20px; }
 #cp-one .cp-story-parts .cp-parts-badge { font-size:9px; padding:4px 6px; }
 #cp-one .cp-story-parts .cp-parts-context { padding:14px; }
 #cp-one .cp-story-parts .cp-parts-filelist>span { padding:8px; font-size:10px; gap:6px; }
 #cp-one .cp-story-parts .cp-parts-filelist b { font-size:11px; }
 #cp-one .cp-story-parts .cp-parts-answer { margin:0 14px 16px; padding-top:14px; }
 #cp-one .cp-story-parts .cp-parts-answer strong { font-size:19px; }
 #cp-one .cp-story-parts .cp-parts-takeaway { font-size:12px; text-align:left; }
}
@media (prefers-reduced-motion:reduce) {
 #cp-one .cp-story-parts .cp-parts-head { transition:none; }
}

/* Clarity comparison: product structure and portrait drag reveal. */
@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url("/_assets/fonts/Inter-Regular.ttf") format("truetype"); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:400; font-display:swap; src:url("/_assets/fonts/Poppins-Regular.ttf") format("truetype"); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:700; font-display:swap; src:url("/_assets/fonts/Poppins-Bold.ttf") format("truetype"); }
#cp-one :where(.cp-story-clarity) .cp-compare-scene { box-shadow:0 20px 55px #0003,inset 0 1px 0 #ffffff1f; }
#cp-one :where(.cp-story-clarity) .cp-compare-scene.cp-product-comparison { overflow:visible; box-shadow:none; }
#cp-one .cp-compare-violet:where(.cp-story-clarity) .cp-product-copy-body { padding-top:51px; }
#cp-one :where(.cp-story-clarity) :is(.cp-clarity,.cp-clarity-labels) { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
#cp-one :where(.cp-story-clarity) .cp-clarity { --clarity-position:50%; position:relative; align-items:start; min-height:620px; }
#cp-one :where(.cp-story-clarity) :is(.cp-clarity-divider,.cp-clarity-range,.cp-clarity-hint) { display:none; }
#cp-one :where(.cp-story-clarity) .cp-wall,#cp-one :where(.cp-story-clarity) .cp-rv { display:flex; flex-direction:column; min-width:0; }
#cp-one :where(.cp-story-clarity) .cp-clarity-label { margin:0 0 15px 2px; font-size:20px; font-weight:600; letter-spacing:-.025em; line-height:1.3; }
#cp-one :where(.cp-story-clarity) .cp-clarity-them { color:#ecb4c4; }
#cp-one :where(.cp-story-clarity) .cp-clarity-us { display:flex; align-items:center; justify-content:flex-start; }
#cp-one :where(.cp-story-clarity) .cp-clarity-logo { display:block; width:auto; height:22px; max-width:100%; object-fit:contain; object-position:left center; }
#cp-one :where(.cp-story-clarity) .cp-wall-desk { position:relative; flex:1 1 0; min-height:540px; overflow:hidden; border:1px solid #ecb4c42e; border-radius:14px; background:linear-gradient(118deg,#ffffff12 0%,#ffffff04 16%,transparent 32%),radial-gradient(ellipse at 10% 112%,#6b3552 0%,transparent 58%),linear-gradient(150deg,#3a3050,#181722 62%); box-shadow:0 20px 55px #0003,inset 0 1px 0 #ffffff1f; }
#cp-one :where(.cp-story-clarity) .cp-wall-window { position:absolute; inset:54px 32px 0 60px; display:flex; flex-direction:column; overflow:hidden; border:1px solid #ffffff2b; border-bottom:0; border-radius:12px 12px 0 0; background:#1f222bd9; backdrop-filter:blur(1.5px); -webkit-backdrop-filter:blur(1.5px); box-shadow:0 18px 40px #00000073; }
#cp-one :where(.cp-story-clarity) .cp-wall-bar { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start; gap:7px 10px; padding:7px 10px; border-bottom:1px solid #ffffff17; color:#9aa2ad; font-size:10.5px; white-space:nowrap; }
#cp-one :where(.cp-story-clarity) .cp-wall-bar>span { display:inline-flex; align-items:center; gap:3px; }
#cp-one :where(.cp-story-clarity) .cp-wall-bar kbd { display:inline-grid; place-items:center; min-width:16px; height:16px; padding:0 3px; border-radius:4px; background:#ffffff17; color:#c5ccd5; font:10px/1 -apple-system,BlinkMacSystemFont,sans-serif; }
#cp-one :where(.cp-story-clarity) .cp-wall-bar kbd+kbd { margin-right:3px; }
#cp-one :where(.cp-story-clarity) .cp-wall-reply { position:relative; flex:1 1 0; min-height:0; overflow:hidden; padding:14px 22px 0 16px; color:#b9c1cc; font-size:12.5px; line-height:1.62; }
#cp-one :where(.cp-story-clarity) .cp-wall-reply:before { content:""; position:absolute; right:6px; top:12px; width:4px; height:26%; border-radius:3px; background:#ffffff26; }
#cp-one :where(.cp-story-clarity) .cp-wall-reply:after { content:""; position:absolute; inset:auto 0 0; height:54px; background:linear-gradient(transparent,#1f222bf2); }
#cp-one :where(.cp-story-clarity) .cp-wall-reply p { margin:0 0 10px; }
#cp-one :where(.cp-story-clarity) .cp-wall-bot { margin-right:7px; color:#c3c4cb; font-weight:400; }
#cp-one :where(.cp-story-clarity) .cp-wall-reply pre { margin:0 0 10px; padding:10px 12px; border-radius:7px; background:#0f1215d9; color:#b7bcc6; font:11px/1.62 'JetBrains Mono',monospace; white-space:pre; overflow:hidden; }
#cp-one :where(.cp-story-clarity) .cp-wall-ask { margin:0 12px 12px; padding:9px 13px; border:1px solid #ffffff1c; border-radius:9px; background:#14171bd9; color:#7f8793; font-size:12px; }
/* Match the coding document's 2000px canvas ratios; the small-size floor keeps the illustration legible. */
#cp-one :where(.cp-story-clarity) .cp-rv { position:relative; display:flex; min-height:600px; max-height:640px; padding:14px; border-radius:14px; overflow:hidden; background:linear-gradient(118deg,#ffffff14 0%,#ffffff05 14%,transparent 28%),radial-gradient(ellipse at 88% 112%,#4b3a5c 0%,transparent 56%),linear-gradient(140deg,#1f4f47,#131a22 62%); }
#cp-one :where(.cp-story-clarity) .cp-rv-view { --rv-u:clamp(.36px,.1cqw,.46px); position:relative; z-index:1; container-type:inline-size; flex:none; align-self:flex-start; min-width:0; display:flex; flex-direction:column; width:78%; margin:40px 0 0 auto; border:1px solid #ffffff26; border-radius:10px; background:#101213; opacity:.9; box-shadow:0 20px 55px #0003,inset 0 1px 0 #ffffff14; }
#cp-one :where(.cp-story-clarity) .cp-rv-document { display:grid; align-content:start; gap:calc(28 * var(--rv-u)); padding:calc(44 * var(--rv-u)); font-family:'Inter',sans-serif; }
#cp-one :where(.cp-story-clarity) .cp-rv-overlay-header { display:flex; align-items:center; justify-content:space-between; gap:calc(20 * var(--rv-u)); min-height:calc(90 * var(--rv-u)); padding:calc(12 * var(--rv-u)) calc(24 * var(--rv-u)); border-bottom:1px solid #ffffff14; color:#adb7b3; }
#cp-one :where(.cp-story-clarity) .cp-rv-overlay-header>span { display:flex; align-items:center; gap:calc(16 * var(--rv-u)); }
#cp-one :where(.cp-story-clarity) .cp-rv-overlay-header svg { flex:none; width:calc(32 * var(--rv-u)); height:calc(32 * var(--rv-u)); fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
#cp-one :where(.cp-story-clarity) .cp-rv-overlay-header kbd { font:calc(22 * var(--rv-u))/1.2 'DM Sans',sans-serif; white-space:nowrap; }
#cp-one :where(.cp-story-clarity) :is(.cp-rv-overlay-chip,.cp-rv-overlay-notes,.cp-rv-type) { display:inline-flex; align-items:center; gap:calc(10 * var(--rv-u)); height:calc(54 * var(--rv-u)); padding:0 calc(12 * var(--rv-u)); border:1px solid #414545; border-radius:calc(12 * var(--rv-u)); background:linear-gradient(#303434,#262929); color:#d3d9d6; font:calc(22 * var(--rv-u))/1.2 'DM Sans',sans-serif; }
#cp-one :where(.cp-story-clarity) .cp-rv-type { border-color:#51836755; background:#25392e; color:#8ac6a1; }
#cp-one :where(.cp-story-clarity) .cp-rv-clock { color:#89948e; font:calc(23 * var(--rv-u))/1 'JetBrains Mono',monospace; }
#cp-one :where(.cp-story-clarity) .cp-rv-overlay-end { display:inline-flex; align-items:center; gap:calc(10 * var(--rv-u)); padding:calc(12 * var(--rv-u)); border-radius:calc(10 * var(--rv-u)); background:#272727; color:#f7b0cd; font-size:calc(23 * var(--rv-u)); }
#cp-one :where(.cp-story-clarity) .cp-rv-title strong { display:block; color:#d5d5da; font-size:calc(27 * var(--rv-u)); line-height:1.25; font-weight:600; letter-spacing:-.02em; }
#cp-one :where(.cp-story-clarity) .cp-rv-title>span { display:block; margin-top:calc(4 * var(--rv-u)); color:#8c8f93; font-size:calc(24 * var(--rv-u)); line-height:1.4; }
#cp-one :where(.cp-story-clarity) .cp-rv-panel { min-width:0; overflow:hidden; border:1px solid #252729; border-radius:calc(16 * var(--rv-u)); background:#121212; }
#cp-one :where(.cp-story-clarity) .cp-rv-head { display:flex; align-items:center; gap:calc(18 * var(--rv-u)); min-height:calc(66 * var(--rv-u)); padding:calc(12 * var(--rv-u)) calc(24 * var(--rv-u)); border-bottom:1px solid #252729; background:#111314; }
#cp-one :where(.cp-story-clarity) .cp-rv-head>svg { width:calc(27 * var(--rv-u)); height:calc(27 * var(--rv-u)); fill:none; stroke:#5f9e74; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
#cp-one :where(.cp-story-clarity) .cp-rv-head>b { color:#c9cfd8; font:700 calc(23 * var(--rv-u))/1.3 'Poppins',sans-serif; text-transform:uppercase; }
#cp-one :where(.cp-story-clarity) .cp-rv-head>span { margin-left:auto; padding:calc(3 * var(--rv-u)) calc(14 * var(--rv-u)); border:1px solid #464646; border-radius:999px; background:#262626; color:#b0b6c0; font-size:calc(20 * var(--rv-u)); line-height:1.4; }
#cp-one :where(.cp-story-clarity) .cp-rv-approach { background:linear-gradient(180deg,#131415,#0f1011); }
#cp-one :where(.cp-story-clarity) .cp-rv-approach-body { display:grid; grid-template-columns:45fr 55fr; gap:calc(48 * var(--rv-u)); padding:calc(24 * var(--rv-u)); }
#cp-one :where(.cp-story-clarity) .cp-rv-insight>p { margin:0; color:#cfd2d6; font-size:calc(26 * var(--rv-u)); line-height:1.5; }
#cp-one :where(.cp-story-clarity) .cp-rv-why { display:grid; gap:calc(12 * var(--rv-u)); margin:calc(24 * var(--rv-u)) 0 0; padding:calc(24 * var(--rv-u)) 0 0; border-top:1px solid #3a3f44; list-style:none; }
#cp-one :where(.cp-story-clarity) .cp-rv-why li { display:flex; align-items:start; gap:calc(16 * var(--rv-u)); color:#bfc3c7; font-size:calc(26 * var(--rv-u)); line-height:1.5; }
#cp-one :where(.cp-story-clarity) .cp-rv-why svg { flex:none; width:calc(27 * var(--rv-u)); height:calc(27 * var(--rv-u)); margin-top:calc(6 * var(--rv-u)); fill:none; stroke:#5f9e74; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
#cp-one :where(.cp-story-clarity) .cp-rv-steps { display:grid; gap:calc(20 * var(--rv-u)); margin:0; padding:0 0 0 calc(24 * var(--rv-u)); border-left:1px solid #3a3f44; list-style:none; }
#cp-one :where(.cp-story-clarity) .cp-rv-steps li { display:grid; grid-template-columns:calc(32 * var(--rv-u)) minmax(0,1fr); align-items:start; gap:calc(12 * var(--rv-u)); padding-top:calc(20 * var(--rv-u)); border-top:1px solid #3a3f44; }
#cp-one :where(.cp-story-clarity) .cp-rv-steps li:first-child { padding-top:0; border:0; }
#cp-one :where(.cp-story-clarity) .cp-rv-steps li>span { display:grid; place-items:center; width:calc(32 * var(--rv-u)); height:calc(32 * var(--rv-u)); border-radius:calc(9 * var(--rv-u)); background:#e0b677; color:#131415; font-size:calc(25 * var(--rv-u)); font-weight:700; line-height:1; }
#cp-one :where(.cp-story-clarity) .cp-rv-steps strong { display:block; color:#e0b677; font:400 calc(22 * var(--rv-u))/1.5 'Poppins',sans-serif; letter-spacing:.1em; text-transform:uppercase; }
#cp-one :where(.cp-story-clarity) .cp-rv-steps p { margin-top:calc(4 * var(--rv-u)); color:#bfc3c7; font:calc(24 * var(--rv-u))/1.5 'JetBrains Mono',monospace; }
#cp-one :where(.cp-story-clarity) .cp-rv-code { position:relative; margin:0; padding:calc(24 * var(--rv-u)) calc(24 * var(--rv-u)) calc(24 * var(--rv-u)) 0; list-style:none; }
#cp-one :where(.cp-story-clarity) .cp-rv-code>li { position:relative; display:grid; grid-template-columns:calc(64 * var(--rv-u)) minmax(0,1fr); min-height:calc(39 * var(--rv-u)); margin-left:0; color:#bdbfbf; font:calc(25.5 * var(--rv-u))/calc(39 * var(--rv-u)) 'JetBrains Mono',monospace; }
#cp-one :where(.cp-story-clarity) .cp-rv-code>li>i { padding-right:calc(16 * var(--rv-u)); border-right:1px solid #2c303a; color:#858b94; font-size:calc(20 * var(--rv-u)); font-style:normal; text-align:right; }
#cp-one :where(.cp-story-clarity) .cp-rv-code>li>code { min-width:0; padding-left:calc(24 * var(--rv-u)); overflow:hidden; font:inherit; white-space:pre; }
#cp-one :where(.cp-story-clarity) .cp-rv-code .k { color:#b68ac6; }
#cp-one :where(.cp-story-clarity) .cp-rv-code :is(.f,.c) { color:#c8c58a; }
#cp-one :where(.cp-story-clarity) .cp-rv-code .m { color:#cba86e; }
#cp-one :where(.cp-story-clarity) .cp-rv-code .b { color:#7fa4c9; }
#cp-one :where(.cp-story-clarity) .cp-rv-code .s { color:#91ac89; }
#cp-one :where(.cp-story-clarity) .cp-rv-hit>code { margin-left:calc(8 * var(--rv-u)); padding-left:calc(16 * var(--rv-u)); border-left:calc(10 * var(--rv-u)) solid #3f744e; border-right:1px solid #3f744e66; background:#3f744e1f; }
#cp-one :where(.cp-story-clarity) .cp-rv-top>code { border-top:1px solid #3f744e66; border-radius:3px 3px 0 0; }
#cp-one :where(.cp-story-clarity) .cp-rv-end>code { border-bottom:1px solid #3f744e66; border-radius:0 0 3px 3px; }
#cp-one :where(.cp-story-clarity) .cp-rv-complexity { display:grid; grid-template-columns:1fr 1fr; gap:calc(32 * var(--rv-u)); padding:calc(24 * var(--rv-u)); background:#101213; }
#cp-one :where(.cp-story-clarity) .cp-rv-complexity h5 { margin:0; color:#c9cfd8; font:700 calc(27 * var(--rv-u))/1.4 'Poppins',sans-serif; text-transform:uppercase; }
#cp-one :where(.cp-story-clarity) .cp-rv-complexity strong { display:block; margin-top:calc(14 * var(--rv-u)); color:#d5d5da; font-size:calc(30 * var(--rv-u)); line-height:1.4; }
#cp-one :where(.cp-story-clarity) .cp-rv-complexity p { margin-top:calc(10 * var(--rv-u)); color:#a8aeb4; font-size:calc(26 * var(--rv-u)); line-height:1.45; }
#cp-one :where(.cp-story-clarity) .cp-rv-steps .cp-rv-active>span { background:#8bcea3; }
#cp-one :where(.cp-story-clarity) .cp-rv-steps .cp-rv-active strong { color:#8bcea3; }
#cp-one :where(.cp-story-clarity) .cp-rv-code .cp-rv-step-detail { min-height:0; }
#cp-one :where(.cp-story-clarity) .cp-rv-step-detail>div { margin-left:calc(8 * var(--rv-u)); padding:calc(18 * var(--rv-u)) calc(16 * var(--rv-u)); border:1px solid #3f744e66; border-left:calc(10 * var(--rv-u)) solid #3f744e; border-bottom:0; border-radius:4px 4px 0 0; background:#3f744e1f; }
#cp-one :where(.cp-story-clarity) .cp-rv-step-detail b { display:flex; align-items:center; gap:calc(12 * var(--rv-u)); color:#8bcea3; font:500 calc(22 * var(--rv-u))/1.4 'Poppins',sans-serif; text-transform:uppercase; letter-spacing:.04em; }
#cp-one :where(.cp-story-clarity) .cp-rv-step-detail b>span { flex:none; display:grid; place-items:center; width:calc(32 * var(--rv-u)); height:calc(32 * var(--rv-u)); border-radius:calc(8 * var(--rv-u)); background:#8bcea3; color:#131415; font:600 calc(25 * var(--rv-u))/1 'Inter',sans-serif; }
#cp-one :where(.cp-story-clarity) .cp-rv-step-detail p { margin-top:calc(10 * var(--rv-u)); color:#bfc3c7; font:calc(26 * var(--rv-u))/1.45 'Inter',sans-serif; }
#cp-one :where(.cp-story-clarity) .cp-rv-step-detail+.cp-rv-top>code { border-top:0; border-radius:0; }
#cp-one :where(.cp-story-clarity) .cp-rv-tests>p { margin:0; padding:calc(20 * var(--rv-u)) calc(24 * var(--rv-u)); color:#a8aeb4; font:calc(24 * var(--rv-u))/1.5 'Inter',sans-serif; }
#cp-one :where(.cp-story-clarity) .cp-rv-tests table { width:100%; border-collapse:collapse; text-align:left; font:calc(24 * var(--rv-u))/1.4 'Inter',sans-serif; }
#cp-one :where(.cp-story-clarity) .cp-rv-tests :is(th,td) { padding:calc(14 * var(--rv-u)) calc(24 * var(--rv-u)); border-top:1px solid #252729; }
#cp-one :where(.cp-story-clarity) .cp-rv-tests th { color:#929ba2; font-weight:500; }
#cp-one :where(.cp-story-clarity) .cp-rv-tests code { color:#a5dcc6; font:inherit; }
#cp-one :where(.cp-story-clarity) .cp-rv-tests td span { margin-left:calc(24 * var(--rv-u)); color:#929ba2; }
/* Both panels share one height; the HeapSeek window is read at a legible zoom, so its foot runs past the
   panel's edge the way the chat panel's reply does. */
@container (min-width:781px) {
#cp-one :where(.cp-story-clarity) .cp-clarity { height:600px; min-height:0; align-items:stretch; }
#cp-one :where(.cp-story-clarity) :is(.cp-wall-desk,.cp-rv) { height:100%; min-height:0; }
#cp-one :where(.cp-story-clarity) .cp-rv-view { --rv-u:clamp(.4px,.11cqw,.46px); min-height:0; }
}
@container (max-width:780px) {
#cp-one .cp-compare-violet:where(.cp-story-clarity) .cp-product-copy-body { padding-top:0; }
#cp-one :where(.cp-story-clarity) .cp-clarity-labels { grid-template-columns:1fr 1fr; gap:16px; }
#cp-one :where(.cp-story-clarity) .cp-clarity-labels .cp-clarity-us { text-align:left; }
#cp-one :where(.cp-story-clarity) .cp-clarity { grid-template-columns:minmax(0,1fr); align-items:stretch; gap:0; isolation:isolate; border-radius:14px; }
#cp-one :where(.cp-story-clarity) :is(.cp-wall,.cp-rv) { grid-area:1 / 1; }
#cp-one :where(.cp-story-clarity) .cp-wall { clip-path:inset(0 calc(100% - var(--clarity-position)) 0 0); }
#cp-one :where(.cp-story-clarity) .cp-rv { clip-path:inset(0 0 0 var(--clarity-position)); padding-inline:0; }
#cp-one :where(.cp-story-clarity) .cp-wall-window { right:16.5%; }
#cp-one :where(.cp-story-clarity) .cp-rv-view { width:83.5%; margin:40px 0 0 16.5%; }
#cp-one :where(.cp-story-clarity) .cp-wall-desk { height:100%; min-height:0; }
#cp-one :where(.cp-story-clarity) .cp-clarity-divider { display:block; position:absolute; z-index:2; inset:0 auto 0 var(--clarity-position); width:2px; background:#edf3eecc; box-shadow:0 0 18px #0006; pointer-events:none; }
#cp-one :where(.cp-story-clarity) .cp-clarity-divider>span { position:absolute; top:50%; left:1px; transform:translate(-50%,-50%); display:grid; place-items:center; width:64px; height:64px; border:2px solid #d1e5da99; border-radius:50%; background:#26332ff5; color:#fff; box-shadow:0 4px 18px #0008; font-size:24px; }
#cp-one :where(.cp-story-clarity) .cp-clarity-range { display:block; position:absolute; z-index:3; inset:0; width:100%; height:100%; padding:0; margin:0; opacity:0; cursor:ew-resize; touch-action:pan-y; appearance:none; -webkit-appearance:none; }
#cp-one :where(.cp-story-clarity) .cp-clarity-range::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:64px; height:64px; }
#cp-one :where(.cp-story-clarity) .cp-clarity-range::-moz-range-thumb { width:64px; height:64px; border:0; }
#cp-one :where(.cp-story-clarity) .cp-clarity:focus-within { outline:2px solid #a5dcc6; outline-offset:5px; }
#cp-one :where(.cp-story-clarity) .cp-clarity-hint { display:block; margin-top:15px; text-align:center; color:#a2abb8; font-size:12px; }
}
@container (max-width:650px) {
#cp-one :where(.cp-story-clarity) .cp-clarity-label { margin-bottom:12px; font-size:16px; }
#cp-one :where(.cp-story-clarity) .cp-clarity-logo { height:21px; }
#cp-one :where(.cp-story-clarity) .cp-wall-window { inset:40px 16.5% 0 30px; }
#cp-one :where(.cp-story-clarity) .cp-wall-bar { font-size:10px; }
}
/* The approach's alternative and edge-case rows wear the solution view's violet and amber. */
#cp-one :where(.cp-story-clarity) .cp-rv-why-alt svg { stroke:#c9b8ff; }
#cp-one :where(.cp-story-clarity) .cp-rv-why-alt span { color:#d7cdff; }
#cp-one :where(.cp-story-clarity) .cp-rv-why-edge svg { stroke:#e6b566; }
#cp-one :where(.cp-story-clarity) .cp-rv-why-edge span { color:#eed3a5; }

/* review: selected Fable 4, revision 3. Scoped to this section. */
#cp-one .cp-m4-rose:where(.cp-story-review) { --story-accent:#e7a5b9; --story-tint:#e7a5b912; --m4-from:#472a52; --m4-to:#19131e; --m4-glow:#86405a; }
#cp-one :where(.cp-story-review) .cp-m4-gloss { border:1px solid color-mix(in srgb,var(--story-accent) 24%,#ffffff14); background:radial-gradient(ellipse at 85% 110%,var(--m4-glow) 0%,transparent 55%),linear-gradient(140deg,var(--m4-from),var(--m4-to) 60%); box-shadow:0 24px 60px #00000059,inset 0 1px 0 #ffffff2e,inset 0 0 0 1px #ffffff08; }
#cp-one :where(.cp-story-review) .cp-compare-copy kbd { display:inline-grid; place-items:center; min-width:22px; height:22px; margin:0 1px; padding:0 5px; border:1px solid color-mix(in srgb,var(--story-accent) 38%,transparent); border-bottom-width:2px; border-radius:5px; background:#1b2428; color:var(--story-accent); font:13px/1 -apple-system,BlinkMacSystemFont,sans-serif; vertical-align:1px; }
#cp-one :where(.cp-story-review) .cp-visual-label.cp-visual-problem { color:var(--m4-miss); }
#cp-one :where(.cp-story-review) .cp-m4-say { display:flex; align-items:flex-end; gap:13px; min-width:0; }
#cp-one :where(.cp-story-review) .cp-m4-say-row { padding:24px 24px 4px; }
#cp-one :where(.cp-story-review) .cp-m4-say-who { position:relative; flex:none; display:grid; place-items:center; width:42px; height:42px; margin-bottom:2px; border-radius:50%; background:linear-gradient(140deg,#fff 0%,var(--story-accent) 38%,color-mix(in srgb,var(--story-accent) 45%,#4b3a5c)); color:#151a24; box-shadow:0 0 0 3px color-mix(in srgb,var(--story-accent) 24%,transparent),0 8px 20px #0007; }
#cp-one :where(.cp-story-review) .cp-m4-say-who svg { width:22px; height:22px; }
#cp-one :where(.cp-story-review) .cp-m4-say-who:after { content:""; position:absolute; inset:-3px; border:1px solid color-mix(in srgb,var(--story-accent) 70%,transparent); border-radius:50%; animation:cp-m4-ring 2.4s ease-out infinite; }
@keyframes cp-m4-ring { from { transform:scale(1); opacity:.9; } to { transform:scale(1.42); opacity:0; } }
#cp-one :where(.cp-story-review) .cp-m4-say-bubble { position:relative; display:flex; align-items:center; gap:14px; min-width:0; margin:0; padding:14px 22px 15px 17px; border-radius:22px 22px 22px 6px; background:linear-gradient(115deg,color-mix(in srgb,var(--story-accent) 40%,#1a2034) 0%,color-mix(in srgb,var(--m4-glow) 78%,#191c29) 88%); color:#f4f6fb; font-size:20px; font-weight:500; line-height:1.3; letter-spacing:-.025em; box-shadow:0 14px 34px #0000005c,inset 0 0 0 1px color-mix(in srgb,var(--story-accent) 46%,transparent),inset 0 1px 0 1px #ffffff30; }
#cp-one :where(.cp-story-review) .cp-m4-say-bubble:before { content:""; position:absolute; left:-9px; bottom:0; width:16px; height:15px; background:color-mix(in srgb,var(--story-accent) 46%,#1c2233); clip-path:polygon(100% 0,100% 100%,0 100%,62% 70%); }
#cp-one :where(.cp-story-review) .cp-m4-say-wave { flex:none; display:flex; align-items:center; gap:3px; height:22px; }
#cp-one :where(.cp-story-review) .cp-m4-say-wave i { width:3px; height:100%; border-radius:2px; background:var(--story-accent); transform-origin:center; animation:cp-m4-wave 1.1s ease-in-out infinite alternate; }
#cp-one :where(.cp-story-review) .cp-m4-say-wave i:nth-child(1) { animation-delay:-.9s; }
#cp-one :where(.cp-story-review) .cp-m4-say-wave i:nth-child(2) { animation-delay:-.3s; }
#cp-one :where(.cp-story-review) .cp-m4-say-wave i:nth-child(3) { animation-delay:-.6s; }
#cp-one :where(.cp-story-review) .cp-m4-say-wave i:nth-child(4) { animation-delay:-.1s; }
#cp-one :where(.cp-story-review) .cp-m4-say-wave i:nth-child(5) { animation-delay:-.75s; }
@keyframes cp-m4-wave { from { transform:scaleY(.22); } to { transform:scaleY(1); } }
@media (prefers-reduced-motion:reduce) {
#cp-one :where(.cp-story-review) .cp-m4-say-who:after,#cp-one :where(.cp-story-review) .cp-m4-say-wave i { animation:none; }
#cp-one :where(.cp-story-review) .cp-m4-say-wave i:nth-child(odd) { transform:scaleY(.45); }
}
#cp-one :where(.cp-story-review) .cp-m4-findings { display:grid; margin:24px 0 0; padding:0; list-style:none; border-top:1px solid #919db52c; }
#cp-one :where(.cp-story-review) .cp-m4-findings button { display:grid; grid-template-columns:20px auto minmax(0,1fr) auto; align-items:center; gap:12px; width:100%; min-height:44px; padding:8px 8px 8px 4px; border:0; border-bottom:1px solid #919db52c; background:transparent; color:#d9dfe8; font:inherit; font-size:14.5px; text-align:left; transition:background 130ms; }
#cp-one :where(.cp-story-review) .cp-m4-pri { display:inline-grid; place-items:center; min-width:62px; box-sizing:border-box; padding:3px 7px; border-radius:5px; font:600 9.5px/1.3 'DM Sans',sans-serif; font-style:normal; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; }
#cp-one :where(.cp-story-review) .cp-m4-pri.is-blocker { background:#f0a39b; color:#2a1517; }
#cp-one :where(.cp-story-review) .cp-m4-pri.is-high { background:#e6be7c; color:#2a2113; }
#cp-one :where(.cp-story-review) .cp-m4-pri.is-low { background:#98a2b02e; color:#b4bcc8; }
#cp-one :where(.cp-story-review) .cp-m4-findings button>b,#cp-one :where(.cp-story-review) .cp-m4-note>b { display:grid; place-items:center; width:20px; height:20px; border-radius:5px; font:600 11px/1 'JetBrains Mono',monospace; }
#cp-one :where(.cp-story-review) .cp-m4-findings button>b { background:color-mix(in srgb,var(--story-accent) 17%,transparent); color:var(--story-accent); }
#cp-one :where(.cp-story-review) .cp-m4-findings button>small { color:#8c96a5; font:10.5px/1.5 'JetBrains Mono',monospace; }
#cp-one :where(.cp-story-review) .cp-m4-findings button:hover,#cp-one :where(.cp-story-review) .cp-m4-findings button[aria-pressed="true"] { background:linear-gradient(90deg,color-mix(in srgb,var(--story-accent) 16%,transparent),transparent); }
#cp-one :where(.cp-story-review) .cp-m4-findings button[aria-pressed="true"]>b { background:var(--story-accent); color:#22161b; }
#cp-one :where(.cp-story-review) .cp-m4-findings button:focus-visible,#cp-one :where(.cp-story-review) .cp-m4-tabs button:focus-visible { outline:2px solid var(--story-accent); outline-offset:-2px; }
#cp-one :where(.cp-story-review) .cp-m4-review-body { padding:19px 24px 24px; }
#cp-one :where(.cp-story-review) .cp-m4-review-bar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 12px; }
#cp-one :where(.cp-story-review) .cp-m4-review-bar>span { color:#d6bfc9; font-size:11.5px; }
#cp-one :where(.cp-story-review) .cp-m4-tabs { display:none; }
#cp-one :where(.cp-story-review) .is-enhanced .cp-m4-tabs { display:flex; gap:3px; margin-top:14px; overflow-x:auto; scrollbar-width:none; }
#cp-one :where(.cp-story-review) .cp-m4-tabs button { flex:none; display:flex; align-items:center; gap:7px; min-height:36px; padding:6px 11px; border:1px solid transparent; border-bottom:0; border-radius:8px 8px 0 0; background:transparent; color:#b5a9bb; font:11px/1.5 'JetBrains Mono',monospace; }
#cp-one :where(.cp-story-review) .cp-m4-tabs button[aria-selected="true"] { border-color:#ffffff24; background:#110d17e0; color:#f0eaf2; }
#cp-one :where(.cp-story-review) .cp-m4-tabs button i { font-style:normal; color:#8b7f94; }
#cp-one :where(.cp-story-review) .cp-m4-tabs button>b { display:grid; place-items:center; min-width:17px; height:17px; padding:0 4px; border-radius:9px; background:color-mix(in srgb,var(--story-accent) 20%,transparent); color:var(--story-accent); font-size:9.5px; font-weight:600; }
#cp-one :where(.cp-story-review) .cp-m4-diff { margin-top:12px; padding:9px 0 11px; border:1px solid #ffffff24; border-radius:9px; background:#110d17e0; box-shadow:0 16px 36px #0006; }
#cp-one :where(.cp-story-review) .is-enhanced .cp-m4-diff { margin-top:0; border-radius:0 9px 9px 9px; }
#cp-one :where(.cp-story-review) .cp-m4-diff-name { padding:2px 14px 8px; color:#e6eaf1; font:11px/1.5 'JetBrains Mono',monospace; }
#cp-one :where(.cp-story-review) .is-enhanced .cp-m4-diff-name { display:none; }
#cp-one :where(.cp-story-review) .cp-m4-diff ol { margin:0; padding:0; list-style:none; }
#cp-one :where(.cp-story-review) .cp-m4-diff li { display:grid; grid-template-columns:36px minmax(0,1fr); align-items:baseline; padding-right:12px; color:#b4b3c4; font:10.5px/2 'JetBrains Mono',monospace; }
#cp-one :where(.cp-story-review) .cp-m4-diff li>i { padding-right:11px; color:#6c6577; font-size:9.5px; font-style:normal; text-align:right; user-select:none; }
#cp-one :where(.cp-story-review) .cp-m4-diff li>code { font:inherit; white-space:pre-wrap; overflow-wrap:anywhere; }
#cp-one :where(.cp-story-review) .cp-m4-diff li>code:before { content:"  "; }
#cp-one :where(.cp-story-review) .cp-m4-diff li.is-add { background:#8fcebc14; color:#cfe6dc; }
#cp-one :where(.cp-story-review) .cp-m4-diff li.is-add>code:before { content:"+ "; color:#8fcebc; }
#cp-one :where(.cp-story-review) .cp-m4-diff li.is-del { background:#d9a9b417; color:#bda5ae; }
#cp-one :where(.cp-story-review) .cp-m4-diff li.is-del>code:before { content:"− "; color:var(--m4-miss); }
#cp-one :where(.cp-story-review) .cp-m4-diff li.cp-m4-note { grid-template-columns:20px minmax(0,1fr); gap:10px; align-items:start; margin:6px 12px 8px 36px; padding:9px 12px 10px 10px; border:1px solid color-mix(in srgb,var(--story-accent) 38%,transparent); border-radius:8px; background:linear-gradient(120deg,#3a2233,#241826); color:#e6d6de; font:12.5px/1.5 'DM Sans',sans-serif; transition:box-shadow 160ms,background 160ms; }
#cp-one :where(.cp-story-review) .cp-m4-note>b { background:var(--story-accent); color:#22161b; }
#cp-one :where(.cp-story-review) .cp-m4-note strong { margin-right:7px; color:var(--story-accent); font-size:10px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; }
#cp-one :where(.cp-story-review) .cp-m4-note .cp-m4-pri { margin:0 8px 0 0; vertical-align:1px; }
#cp-one :where(.cp-story-review) .cp-m4-note.is-active { background:linear-gradient(120deg,#4b2a41,#2c1b2e); box-shadow:0 0 0 2px color-mix(in srgb,var(--story-accent) 55%,transparent); }
@container (max-width:650px) {
#cp-one :where(.cp-story-review) .cp-m4-say { gap:10px; }
#cp-one :where(.cp-story-review) .cp-m4-say-row { padding:18px 16px 2px; }
#cp-one :where(.cp-story-review) .cp-m4-say-who { width:36px; height:36px; }
#cp-one :where(.cp-story-review) .cp-m4-say-who svg { width:19px; height:19px; }
#cp-one :where(.cp-story-review) .cp-m4-say-bubble { gap:10px; padding:12px 16px 13px 13px; font-size:17px; }
#cp-one :where(.cp-story-review) .cp-m4-say-wave { gap:2px; height:18px; }
#cp-one :where(.cp-story-review) .cp-m4-say-wave i:nth-child(n+4) { display:none; }
}
@container (max-width:480px) {
#cp-one :where(.cp-story-review) .cp-m4-review-body { padding-inline:16px; }
#cp-one :where(.cp-story-review) .cp-m4-diff li { grid-template-columns:26px minmax(0,1fr); padding-right:8px; font-size:9.5px; }
#cp-one :where(.cp-story-review) .cp-m4-diff li>i { padding-right:7px; }
#cp-one :where(.cp-story-review) .cp-m4-diff li.cp-m4-note { margin:6px 8px 8px 12px; font-size:12px; }
#cp-one :where(.cp-story-review) .cp-m4-findings button { gap:9px; }
#cp-one :where(.cp-story-review) .cp-m4-pri { min-width:56px; padding:3px 6px; font-size:9px; }
#cp-one :where(.cp-story-review) .cp-m4-tabs button { padding-inline:8px; font-size:10px; gap:5px; }
#cp-one :where(.cp-story-review) .cp-m4-tabs button i { display:none; }
}

/* stealth: selected Fable 3, revision 3. Scoped to this section. */
#cp-one :where(.cp-story-stealth) .cp-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
#cp-one .cp-compare-rose:where(.cp-story-stealth) { --story-accent:#e9a3b0; --story-tint:#e9a3b012; }
#cp-one .cp-compare-feature.cp-story-stealth::before { background:#101213; }
#cp-one :is(.cp-compare-parts,.cp-compare-stack):where(.cp-story-stealth) { display:block; }
#cp-one .cp-compare-stack:where(.cp-story-stealth)>.cp-compare-copy { display:block; margin-bottom:36px; }
#cp-one .cp-compare-stealth:where(.cp-story-stealth) .veil-stage { max-width:none; margin:0; border:0; border-radius:16px; box-shadow:none; }
#cp-one .cp-story-stealth .veil-divider { width:2px; background:#15171bee; }
#cp-one .cp-story-stealth .veil-divider span { width:clamp(34px,4.2cqw,48px); height:clamp(34px,4.2cqw,48px); border:0; background:#111315; box-shadow:0 0 0 5px #303337b3,0 5px 16px #0006; }
#cp-one .cp-story-stealth .veil-divider svg { width:22px; height:22px; }
#cp-one .cp-story-stealth .veil-drag-hint { position:absolute; top:calc(50% + 38px); left:clamp(66px,var(--veil-position),calc(100% - 66px)); transform:translateX(-50%); padding:6px 10px; border-radius:7px; background:#151719; color:#edf0ef; font:500 11px/1.4 'DM Sans',sans-serif; white-space:nowrap; pointer-events:none; }
#cp-one .cp-story-stealth .veil-stage:focus-within { outline:none; }
#cp-one .cp-story-stealth .veil-stage:has(.veil-range:focus-visible) { outline:2px solid #9da6af; outline-offset:4px; }
#cp-one .cp-compare-stealth:where(.cp-story-stealth) .veil-desktop { background:radial-gradient(ellipse at 50% -14%,#8a6aa6 0%,#5d4674 26%,transparent 60%),radial-gradient(ellipse at 86% 112%,#4b3a5c 0%,transparent 55%),radial-gradient(ellipse at 0% 108%,#2a4a72 0%,transparent 48%),linear-gradient(140deg,#2a3650,#171d2b 60%); }
#cp-one .cp-compare-stealth:where(.cp-story-stealth) .veil-desktop:before { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,#ffffff14,transparent 26%),linear-gradient(118deg,transparent 40%,#ffffff0a 49%,transparent 58%); }
#cp-one .cp-compare-stealth:where(.cp-story-stealth) .veil-menubar { position:relative; background:#0b0e1466; }
#cp-one .cp-compare-stealth:where(.cp-story-stealth) .veil-editor { top:12%; height:80%; width:76%; border-color:#ffffff24; box-shadow:0 1.4cqw 3.4cqw #0009; }
#cp-one :where(.cp-story-stealth) .veil-brief { display:grid; grid-template-columns:44% minmax(0,1fr); height:calc(100% - 5cqw); }
#cp-one :where(.cp-story-stealth) .veil-prompt { padding:1.8cqw; border-right:1px solid #ffffff14; background:#1b1e23; }
#cp-one :where(.cp-story-stealth) .veil-prompt-label { margin:0 0 .7cqw; color:#a6b9d6; font-size:.85cqw; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
#cp-one :where(.cp-story-stealth) .veil-prompt h4 { margin:0 0 .8cqw; color:#e1e5ec; font-size:1.9cqw; font-weight:600; line-height:1.2; }
#cp-one :where(.cp-story-stealth) .veil-prompt-intro { color:#b5becb; font-size:1.15cqw; line-height:1.5; }
#cp-one :where(.cp-story-stealth) .veil-prompt section { margin-top:1.2cqw; padding-top:1.1cqw; border-top:1px solid #ffffff12; }
#cp-one :where(.cp-story-stealth) .veil-prompt h5 { margin:0 0 .35cqw; color:#d6dce5; font-size:1.1cqw; font-weight:600; }
#cp-one :where(.cp-story-stealth) .veil-prompt section p { margin:0; color:#9faab9; font-size:1.1cqw; line-height:1.45; }
#cp-one :where(.cp-story-stealth) .veil-canvas { padding:2cqw; color:#b1bac8; background:radial-gradient(#ffffff13 .08cqw,transparent .09cqw) 0 0 / 1.4cqw 1.4cqw,#171b21; }
#cp-one :where(.cp-story-stealth) .veil-canvas>p { font-size:1.25cqw; font-weight:500; }
#cp-one :where(.cp-story-stealth) .veil-canvas>span { display:block; margin-top:.4cqw; color:#717e90; font-size:.95cqw; }
#cp-one :where(.cp-story-stealth) .veil-canvas-nodes { display:grid; justify-items:start; gap:.6cqw; margin-top:4cqw; }
#cp-one :where(.cp-story-stealth) .veil-canvas-nodes i { width:16cqw; padding:1.1cqw; border:1px solid #697b9c55; border-radius:.6cqw; background:#202834; color:#9fadc2; font-size:1.1cqw; font-style:normal; text-align:center; }
#cp-one :where(.cp-story-stealth) .veil-canvas-nodes b { color:#6f819d; font-size:1.8cqw; font-weight:400; }
#cp-one :where(.cp-story-stealth) .veil-shown { position:absolute; inset:0; clip-path:inset(0 0 0 var(--veil-position)); }
#cp-one :where(.cp-story-stealth) .veil-live-header { flex:none; display:flex; align-items:center; justify-content:space-between; gap:.8cqw; height:3.2cqw; padding:0 1cqw; border-bottom:1px solid #ffffff14; color:#adb7b3; }
#cp-one :where(.cp-story-stealth) .veil-live-header>span { display:flex; align-items:center; gap:.6cqw; }
#cp-one :where(.cp-story-stealth) .veil-live-header svg { flex:none; width:1.3cqw; height:1.3cqw; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
#cp-one :where(.cp-story-stealth) .veil-live-header kbd { font: .75cqw/1.2 'DM Sans',sans-serif; white-space:nowrap; }
#cp-one :where(.cp-story-stealth) :is(.veil-live-chip,.veil-live-type) { display:inline-flex; align-items:center; gap:.45cqw; height:2.2cqw; padding:0 .55cqw; border:1px solid #414545; border-radius:.5cqw; background:linear-gradient(#303434,#262929); color:#d3d9d6; }
#cp-one :where(.cp-story-stealth) .veil-live-type { color:#a9ceff; background:#23374b; border-color:#52769c55; }
#cp-one :where(.cp-story-stealth) .veil-live-solve { color:#d9eadf; font-size:.9cqw; font-weight:600; }
#cp-one :where(.cp-story-stealth) .veil-live-center { color:#89948e; font:.85cqw/1 'JetBrains Mono',monospace; }
#cp-one :where(.cp-story-stealth) .veil-live-end { display:inline-flex; align-items:center; gap:.4cqw; padding:.5cqw; border-radius:.4cqw; background:#272727; color:#f7b0cd; font:.85cqw/1 'DM Sans',sans-serif; }
#cp-one :where(.cp-story-stealth) .veil-app-design { display:flex; flex-direction:column; flex:1; min-height:0; overflow:hidden; padding-bottom:.8cqw; }
#cp-one :where(.cp-story-stealth) .veil-app-name { flex:none; margin:0; padding:1cqw 1.2cqw; color:#e5eae7; font-size:1.35cqw; font-weight:600; line-height:1.3; letter-spacing:-.02em; }
#cp-one :where(.cp-story-stealth) .veil-app-tradeoff { flex:none; height:11.5cqw; margin:0 .9cqw .65cqw; padding:.55cqw .85cqw; overflow:hidden; border:1px solid #ffffff17; border-radius:.7cqw; background:#171a1c; color:#a7aeae; }
#cp-one :where(.cp-story-stealth) .veil-app-tradeoff>p { margin:0 0 .55cqw; color:#e5eae7; font:600 1.05cqw/1.4 'DM Sans',sans-serif; letter-spacing:.07em; text-transform:uppercase; }
#cp-one :where(.cp-story-stealth) .veil-tradeoff-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65cqw; }
#cp-one :where(.cp-story-stealth) .veil-tradeoff-option { display:flex; flex-direction:column; min-width:0; height:8.6cqw; padding:.65cqw; border:1px solid #4a5565; border-top:2px solid #4a5565; border-radius:.65cqw; background:linear-gradient(#11151a,#121415); }
#cp-one :where(.cp-story-stealth) .veil-tradeoff-chosen { border:.75px solid #72b57b; }
#cp-one :where(.cp-story-stealth) .veil-tradeoff-title { display:flex; align-items:center; gap:.45cqw; min-width:0; margin-bottom:.45cqw; color:#e3e7e5; font-size:.92cqw; line-height:1.2; white-space:nowrap; }
#cp-one :where(.cp-story-stealth) .veil-tradeoff-title b { flex:none; display:grid; place-items:center; width:1.5cqw; height:1.5cqw; border-radius:50%; background:#4c6b9c; color:#fff; font-size:.9cqw; }
#cp-one :where(.cp-story-stealth) .veil-tradeoff-chosen .veil-tradeoff-title b { background:#5b9e62; }
#cp-one :where(.cp-story-stealth) .veil-tradeoff-title strong { min-width:0; overflow:hidden; text-overflow:ellipsis; font-weight:600; }
#cp-one :where(.cp-story-stealth) .veil-tradeoff-option>span { display:block; overflow:hidden; text-overflow:ellipsis; color:#8acb91; font: .83cqw/1.45 'JetBrains Mono',monospace; white-space:nowrap; }
#cp-one :where(.cp-story-stealth) .veil-tradeoff-option>.veil-tradeoff-con { color:#e78c78; }
#cp-one :where(.cp-story-stealth) .veil-tradeoff-option small { display:block; margin-top:auto; padding:.2cqw .35cqw; border:1px solid #8a939c; border-radius:.3cqw; color:#cbd1d5; font-size:.77cqw; line-height:1.2; text-align:center; white-space:nowrap; }
#cp-one :where(.cp-story-stealth) .veil-tradeoff-chosen small { border:.75px solid #75b378; background:#75b37820; color:#c9e8ce; }
#cp-one :where(.cp-story-stealth) .veil-app-section { flex:none; margin:0 .9cqw; padding:.6cqw 1cqw .55cqw; border:1px solid #ffffff17; border-bottom:0; border-radius:.7cqw .7cqw 0 0; color:#e5eae7; font-size:1.05cqw; line-height:1.4; letter-spacing:.07em; text-transform:uppercase; }
#cp-one :where(.cp-story-stealth) .veil-app-design img { display:block; flex:1; min-height:0; width:calc(100% - 1.8cqw); height:0; margin:0 .9cqw; object-fit:cover; object-position:top; }
#cp-one :where(.cp-story-stealth) .veil-discussion { position:absolute; top:4.8cqw; right:1.1cqw; width:22cqw; padding:.9cqw; border:1px solid #323945; border-radius:1cqw; background:rgb(15 18 22 / .9); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); box-shadow:0 1.2cqw 3cqw #0009; font-family:'DM Sans',sans-serif; }
#cp-one :where(.cp-story-stealth) .veil-disc-head { display:flex; align-items:center; justify-content:space-between; gap:.6cqw; margin-bottom:.7cqw; color:#c9cfd8; }
#cp-one :where(.cp-story-stealth) .veil-disc-head strong { font-size:.95cqw; font-weight:500; letter-spacing:.02em; }
#cp-one :where(.cp-story-stealth) .veil-disc-head>span { padding:.3cqw .55cqw; border:1px solid #343b46; border-radius:.4cqw; font-size:.8cqw; }
#cp-one :where(.cp-story-stealth) .veil-disc-head kbd { margin-left:.4cqw; font:inherit; }
#cp-one :where(.cp-story-stealth) .veil-disc-transcript-title,#cp-one :where(.cp-story-stealth) .veil-disc-suggestions { display:flex; align-items:center; justify-content:space-between; color:#969ba2; font-size:.77cqw; font-weight:500; line-height:1.3; text-transform:uppercase; }
#cp-one :where(.cp-story-stealth) .veil-disc-transcript-title span { display:inline-flex; align-items:center; gap:.3cqw; color:#93b9a6; font-size:.75cqw; text-transform:none; }
#cp-one :where(.cp-story-stealth) .veil-disc-transcript-title i { width:.45cqw; height:.45cqw; border-radius:50%; background:#72c79c; }
#cp-one :where(.cp-story-stealth) .veil-disc-transcript { margin:.45cqw 0 1.1cqw; padding:.35cqw .65cqw; border:1px solid #29313b; border-radius:.5cqw; background:#0b1016; }
#cp-one :where(.cp-story-stealth) .veil-disc-transcript p { margin:.25cqw 0; padding:.15cqw 0 .15cqw .55cqw; border-left:.22cqw solid #46df83; color:#aab3bf; font: .77cqw/1.35 'JetBrains Mono',monospace; }
#cp-one :where(.cp-story-stealth) .veil-disc-transcript p+p { border-left-color:#9aa1ab; color:#8b949e; }
#cp-one :where(.cp-story-stealth) .veil-disc-card { margin-top:.65cqw; border:1px solid #29313b; border-radius:.75cqw; background:#12161c; overflow:hidden; }
#cp-one :where(.cp-story-stealth) .veil-disc-q { padding:.6cqw .75cqw; color:#b2bac1; font-size:.88cqw; line-height:1.4; }
#cp-one :where(.cp-story-stealth) .veil-disc-a { padding:.6cqw .75cqw .4cqw; border-top:1px solid #252d37; background:#090c10; color:#f0f5f2; font-size:.92cqw; font-weight:600; line-height:1.4; }
#cp-one :where(.cp-story-stealth) .veil-disc-meta { padding:0 .75cqw .5cqw; background:#090c10; color:#89939f; font-size:.75cqw; line-height:1.3; }
#cp-one :where(.cp-story-stealth) .veil-disc-ignored .veil-disc-a { color:#818b97; font-weight:400; }
#cp-one .cp-compare-stealth:where(.cp-story-stealth) .veil-app,#cp-one :where(.cp-story-stealth) .veil-ghost { position:absolute; left:48cqw; top:4.2cqw; width:49.2cqw; height:57cqw; border-radius:1cqw; }
#cp-one .cp-compare-stealth:where(.cp-story-stealth) .veil-app { display:flex; flex-direction:column; overflow:hidden; border:1px solid #292d32; background:rgb(16 18 19 / .96); opacity:.9; box-shadow:0 1.6cqw 4cqw #000b; color:#e8ecea; }
#cp-one :where(.cp-story-stealth) .veil-ghost { display:flex; align-items:flex-start; gap:.7cqw; padding:15cqw 0 0 1.5cqw; border:1px dashed #e9a3b099; }
#cp-one :where(.cp-story-stealth) .veil-ghost span { flex:none; width:2.1cqw; height:2.1cqw; border:.2cqw solid #e9a3b0c7; border-radius:50%; background:linear-gradient(135deg,transparent 46%,#e9a3b0c7 46% 54%,transparent 54%); }
#cp-one :where(.cp-story-stealth) .veil-ghost strong { padding:.2cqw 1.1cqw .3cqw; border-radius:2cqw; background:#1b1424e6; color:#f6d9df; font-size:1.2cqw; font-weight:500; line-height:1.5; white-space:nowrap; }
#cp-one .cp-compare-stealth:where(.cp-story-stealth) .veil-captions { max-width:none; margin-top:16px; font-size:13px; }
#cp-one .cp-compare-stealth:where(.cp-story-stealth) .veil-captions small { font-size:inherit; color:#8f96a0; }
#cp-one .cp-compare-stealth:where(.cp-story-stealth) .veil-captions>span:first-child i { background:#e9a3b0; }
#cp-one :where(.cp-story-stealth) .cp-works { margin-top:74px; padding:10px 0 4px; background:none; text-align:center; }
#cp-one :where(.cp-story-stealth) .cp-works h4 { max-width:780px; margin:0 auto; color:var(--cp-text); font-size:clamp(25px,2.9cqw,34px); font-weight:600; line-height:1.14; letter-spacing:-.045em; text-wrap:balance; }
#cp-one :where(.cp-story-stealth) .cp-works-icons { display:flex; flex-wrap:wrap; justify-content:center; gap:30px 0; margin-top:38px; }
#cp-one :where(.cp-story-stealth) .cp-works-group { padding:0 46px; }
#cp-one :where(.cp-story-stealth) .cp-works-group+.cp-works-group { border-left:1px solid #ffffff24; }
#cp-one :where(.cp-story-stealth) .cp-works-group>p { margin-bottom:18px; color:#b4adc2; font:500 11px/1.5 'JetBrains Mono',monospace; letter-spacing:.1em; text-transform:uppercase; }
#cp-one :where(.cp-story-stealth) .cp-works-group ul { display:flex; align-items:flex-start; justify-content:center; gap:22px; margin:0; padding:0; list-style:none; }
#cp-one :where(.cp-story-stealth) .cp-works-group li { display:grid; align-content:start; justify-items:center; gap:11px; width:104px; white-space:nowrap; color:#cfd4dd; font-size:12.5px; line-height:1.3; }
#cp-one :where(.cp-story-stealth) .cp-works-group img { display:block; width:76px; height:76px; filter:drop-shadow(0 12px 18px #00000080); }
#cp-one :where(.cp-story-stealth) .cp-works-text { max-width:740px; margin:34px auto 0; color:var(--cp-muted); font-size:16px; line-height:1.75; text-wrap:pretty; }
#cp-one :where(.cp-story-stealth) .cp-works .cp-stealth-link { margin-top:14px; font-size:14px; }
#cp-one :where(.cp-story-stealth) .cp-stealth-proof { margin-top:40px; text-align:left; }
#cp-one :where(.cp-story-stealth) .cp-stealth-built { margin-top:36px; }
#cp-one :where(.cp-story-stealth) .cp-stealth-how { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:48px; margin:0; padding:0; list-style:none; }
#cp-one :where(.cp-story-stealth) .cp-stealth-how li { display:flex; gap:15px; padding:12px 0 13px; border-top:1px solid #ffffff14; }
#cp-one :where(.cp-story-stealth) .cp-stealth-how li>span { flex:none; display:grid; place-items:center; width:36px; height:36px; border:1px solid #e9a3b040; border-radius:11px; background:linear-gradient(140deg,#e9a3b038,#4b3a5c80); box-shadow:inset 0 1px 0 #ffffff26; color:#f6d3da; }
#cp-one :where(.cp-story-stealth) .cp-stealth-how svg { width:18px; height:18px; }
#cp-one :where(.cp-story-stealth) .cp-stealth-how strong { display:block; color:#e6eaf1; font-size:15px; font-weight:500; line-height:1.4; }
#cp-one :where(.cp-story-stealth) .cp-stealth-how p { margin-top:1px; color:var(--cp-muted); font-size:13px; line-height:1.55; }
#cp-one :where(.cp-story-stealth) .cp-stealth-link { display:inline-flex; align-items:center; gap:10px; min-height:34px; margin-top:8px; color:var(--story-accent); font-size:13px; }
#cp-one :where(.cp-story-stealth) .cp-stealth-link:hover { color:#fff; }
#cp-one :where(.cp-story-stealth) .cp-stealth-link:focus-visible { outline:2px solid var(--story-accent); outline-offset:5px; }
#cp-one .cp-compare-stealth:where(.cp-story-stealth) figcaption { margin-top:26px; }
@container (max-width:1000px) {
#cp-one .cp-compare-stack:where(.cp-story-stealth)>.cp-compare-copy { gap:30px; }
#cp-one :where(.cp-story-stealth) .cp-works-group { padding:0 26px; }
#cp-one :where(.cp-story-stealth) .cp-works-group ul { gap:16px; }
}
@container (max-width:780px) {
#cp-one .cp-compare-stack:where(.cp-story-stealth)>.cp-compare-copy { grid-template-columns:1fr; gap:21px; margin-bottom:28px; }
#cp-one :where(.cp-story-stealth) .cp-stealth-how { grid-template-columns:1fr; }
#cp-one :where(.cp-story-stealth) .cp-works { margin-top:56px; }
#cp-one :where(.cp-story-stealth) .cp-works-group+.cp-works-group { border-left:0; }
}
@container (max-width:650px) {
#cp-one .cp-compare-stealth:where(.cp-story-stealth) .veil-stage { border-radius:9px; }
#cp-one .cp-compare-stealth:where(.cp-story-stealth) .veil-captions { font-size:12px; }
#cp-one .cp-compare-stealth:where(.cp-story-stealth) .veil-captions small { display:none; }
#cp-one :where(.cp-story-stealth) .cp-works-icons { gap:26px 0; margin-top:28px; }
#cp-one :where(.cp-story-stealth) .cp-works-group { padding:0; width:100%; }
#cp-one :where(.cp-story-stealth) .cp-works-group ul { gap:8px; }
#cp-one :where(.cp-story-stealth) .cp-works-group li { width:78px; font-size:11px; white-space:normal; }
#cp-one :where(.cp-story-stealth) .cp-works-group img { width:58px; height:58px; }
#cp-one :where(.cp-story-stealth) .cp-works-text { margin-top:28px; font-size:15px; }
}
@container (max-width:480px) {
#cp-one .cp-compare-stack:where(.cp-story-stealth) h3 { font-size:27px; }
}
@media (max-width:600px) {
#cp-one .cp-compare-stealth:where(.cp-story-stealth) .veil-desktop { aspect-ratio:1.3; }
#cp-one .cp-compare-stealth:where(.cp-story-stealth) .veil-editor { top:9%; height:82%; width:76%; }
#cp-one .cp-compare-stealth:where(.cp-story-stealth) .veil-app,#cp-one :where(.cp-story-stealth) .veil-ghost { left:39cqw; top:5.4cqw; width:58.2cqw; height:65cqw; }
#cp-one :where(.cp-story-stealth) .veil-app-name { font-size:1.7cqw; }
#cp-one :where(.cp-story-stealth) .veil-discussion { top:6cqw; width:26cqw; }
#cp-one :where(.cp-story-stealth) .veil-disc-q { font-size:1.08cqw; }
#cp-one :where(.cp-story-stealth) .veil-disc-a { font-size:1.12cqw; }
#cp-one :where(.cp-story-stealth) .veil-disc-head strong { font-size:1.2cqw; }
#cp-one :where(.cp-story-stealth) .veil-disc-head>span,#cp-one :where(.cp-story-stealth) .veil-disc-meta { font-size:.95cqw; }
#cp-one :where(.cp-story-stealth) .veil-brief { grid-template-columns:38% minmax(0,1fr); }
#cp-one :where(.cp-story-stealth) .veil-prompt h4 { font-size:2.2cqw; }
#cp-one :where(.cp-story-stealth) .veil-prompt-intro,#cp-one :where(.cp-story-stealth) .veil-prompt section p { font-size:1.4cqw; }
#cp-one :where(.cp-story-stealth) .veil-prompt h5 { font-size:1.45cqw; }
#cp-one :where(.cp-story-stealth) .veil-app-section { font-size:1.25cqw; }
#cp-one :where(.cp-story-stealth) .veil-ghost { gap:.8cqw; padding:20cqw 0 0 1.4cqw; }
#cp-one :where(.cp-story-stealth) .veil-ghost strong { padding-inline:1cqw; font-size:1.75cqw; }
#cp-one :where(.cp-story-stealth) .veil-ghost span { width:2.9cqw; height:2.9cqw; }
}

/* Platform icons sit beside published browser-test evidence and an illustrative shortcut. */
#cp-one .cp-story-stealth .cp-stealth-evidence { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); align-items:start; gap:48px; margin-top:0; }
#cp-one .cp-story-stealth .cp-stealth-receipt { position:relative; padding:24px; border:1px solid #e9a3b036; border-radius:18px; background:linear-gradient(145deg,#29212b,#1b1921); box-shadow:inset 0 1px 0 #ffffff08; }
#cp-one .cp-story-stealth .cp-stealth-test-label { margin-bottom:8px; color:var(--story-accent); font:500 10px/1.5 'JetBrains Mono',monospace; letter-spacing:.07em; text-transform:uppercase; }
#cp-one .cp-story-stealth .cp-stealth-receipt h4 { max-width:calc(100% - 118px); margin:0; color:#f0e5ea; font-size:23px; line-height:1.15; letter-spacing:-.035em; }
#cp-one .cp-story-stealth .cp-stealth-native { margin-top:12px; color:#c8bccb; font-size:12.5px; line-height:1.55; }
#cp-one .cp-story-stealth .cp-stealth-results { display:grid; grid-template-columns:minmax(0,1fr); gap:18px; margin-top:18px; padding-top:18px; border-top:1px solid #e9a3b026; }
#cp-one .cp-story-stealth .cp-stealth-receipt .cp-keyboard { position:absolute; top:24px; right:24px; justify-content:flex-start; gap:8px; padding:0 0 5px; }
#cp-one .cp-story-stealth .cp-stealth-receipt .cp-keycap { min-width:46px; height:48px; padding:6px 7px; border-radius:10px; background:linear-gradient(145deg,#554050,#352b38); color:#efcedc; border-color:#e9a3b02e; box-shadow:0 6px 0 #17131c,0 10px 15px #0003,inset 0 1px 1px #f6d3da1a; }
#cp-one .cp-story-stealth .cp-stealth-receipt .cp-keycap em { font-size:22px; }
#cp-one .cp-story-stealth .cp-stealth-receipt .cp-keycap small { font-size:7.5px; }
#cp-one .cp-story-stealth .cp-stealth-receipt .cp-keycap.cp-depressed { background:linear-gradient(145deg,#735066,#493246); box-shadow:0 2px 0 #17131c,0 3px 10px #0002; }
#cp-one .cp-story-stealth .cp-stealth-receipt dl { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:0; }
#cp-one .cp-story-stealth .cp-stealth-receipt dl>div { min-width:0; padding:12px; border:1px solid #e9a3b02b; border-radius:11px; background:#ffffff08; }
#cp-one .cp-story-stealth .cp-stealth-receipt dt { color:#fbe3e8; font-size:25px; font-weight:500; line-height:1.05; letter-spacing:-.03em; white-space:nowrap; }
#cp-one .cp-story-stealth .cp-stealth-receipt dd { margin:6px 0 0; color:#d6cbd5; font-size:11.5px; line-height:1.4; overflow-wrap:normal; }
#cp-one .cp-story-stealth .cp-stealth-receipt-footer { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 16px; margin-top:18px; }
#cp-one .cp-story-stealth .cp-stealth-receipt-footer .cp-stealth-link { margin:0; font-size:12px; }
#cp-one .cp-story-stealth .cp-stealth-receipt time { color:#a49aa9; font-size:10.5px; }
#cp-one .cp-story-stealth .cp-stealth-evidence .cp-works { margin-top:0; }
#cp-one .cp-story-stealth .cp-works h4 { font-size:28px; }
#cp-one .cp-story-stealth .cp-works-icons { display:grid; grid-template-columns:minmax(0,1fr); justify-content:stretch; gap:22px; width:100%; max-width:640px; margin:26px auto 0; }
#cp-one .cp-story-stealth .cp-works-group { padding:0; border:0; }
#cp-one .cp-story-stealth .cp-works-group>p { margin-bottom:12px; }
#cp-one .cp-story-stealth .cp-works-group ul { display:grid; grid-template-columns:repeat(4,minmax(0,100px)); justify-content:center; gap:clamp(14px,1.8cqw,24px); width:100%; }
#cp-one .cp-story-stealth .cp-works-group li { width:auto; min-width:0; gap:8px; font-size:11px; }
#cp-one .cp-story-stealth .cp-works-group img { width:44px; height:44px; }
#cp-one .cp-story-stealth .cp-works-text { margin-top:24px; font-size:14px; text-align:left; }
@container (max-width:780px) {
  #cp-one .cp-story-stealth .cp-stealth-evidence { grid-template-columns:1fr; gap:32px; }
}
@container (max-width:480px) {
  #cp-one .cp-story-stealth .cp-stealth-receipt { padding:18px; }
  #cp-one .cp-story-stealth .cp-stealth-receipt .cp-keyboard { top:18px; right:18px; }
  #cp-one .cp-story-stealth .cp-stealth-receipt dl>div { padding:10px; }
  #cp-one .cp-story-stealth .cp-stealth-receipt dt { font-size:23px; }
  #cp-one .cp-story-stealth .cp-stealth-receipt dd { font-size:11px; }
  #cp-one .cp-story-stealth .cp-works h4 { font-size:25px; }
  #cp-one .cp-story-stealth .cp-works-group ul { gap:10px; }
  #cp-one .cp-story-stealth .cp-works-group li { width:auto; font-size:10px; }
  #cp-one .cp-story-stealth .cp-works-group img { width:38px; height:38px; }
}

/* The badge names the side the slider is showing: the shared screen when the handle sits right, your own screen when it sits left. */
#cp-one .cp-story-stealth .veil-badge { position:absolute; z-index:6; top:5.4cqw; padding:.5cqw 1cqw .55cqw; border:1px solid; border-radius:99px; font:600 1.05cqw/1.3 'DM Sans',sans-serif; letter-spacing:.02em; white-space:nowrap; opacity:0; transform:translateY(-4px); transition:opacity .25s ease,transform .35s var(--cp-ease-out); pointer-events:none; }
#cp-one .cp-story-stealth .veil-badge-share { right:1.6cqw; border-color:#e9a3b0a6; background:#3a1f2ae6; color:#ffd3dc; }
#cp-one .cp-story-stealth .veil-badge-you { left:1.6cqw; border-color:#8fd6c0a6; background:#17352de6; color:#c9f3e3; }
#cp-one .cp-story-stealth .veil-stage.is-right .veil-badge-share,#cp-one .cp-story-stealth .veil-stage.is-left .veil-badge-you { opacity:1; transform:none; }

#cp-one .cp-company[data-logo="google"] img{height:calc(23.0px * var(--wordmark-scale,1));}
#cp-one .cp-company[data-logo="amazon"] img{height:calc(23.0px * var(--wordmark-scale,1));}
#cp-one .cp-company[data-logo="microsoft"] img{height:calc(24.4px * var(--wordmark-scale,1));}
#cp-one .cp-company[data-logo="airbnb"] img{height:calc(30.3px * var(--wordmark-scale,1));}
#cp-one .cp-company[data-logo="meta"] img{height:calc(17.5px * var(--wordmark-scale,1));}
#cp-one .cp-company[data-logo="netflix"] img{height:calc(20.3px * var(--wordmark-scale,1));}
#cp-one .cp-company[data-logo="stripe"] img{height:calc(25.1px * var(--wordmark-scale,1));}
#cp-one .cp-company[data-logo="anthropic"] img{height:calc(16.8px * var(--wordmark-scale,1));}
#cp-one .cp-company[data-logo="openai"] img{height:calc(21.5px * var(--wordmark-scale,1));}
#cp-one .cp-company[data-logo="nvidia"] img{height:calc(25.1px * var(--wordmark-scale,1));}
#cp-one .cp-company[data-logo="citadel"] img{height:calc(17.5px * var(--wordmark-scale,1));}
#cp-one .cp-company[data-logo="perplexity"] img{height:calc(28.9px * var(--wordmark-scale,1));}