.ai-section .section-intro{align-items:center;margin-bottom:32px}
.ai-section .section-intro h2{font-size:43px}
.ai-demo{--ai-ink:var(--ito-fg-on-ink-strong);--ai-body:var(--ito-fg-on-ink);--ai-label:var(--ito-label-on-ink);--ai-accent:var(--ito-accent-on-ink);--ai-rule:color-mix(in srgb,var(--ai-body) 17%,transparent);--ai-ground:var(--ito-rail-ground);--ai-question-ground:color-mix(in srgb,var(--ai-accent) 40%,var(--ai-ground));margin:0;position:relative;isolation:isolate;border:1px solid var(--ai-rule);border-radius:22px;background:var(--ai-ground);color:var(--ai-ink);overflow:hidden;color-scheme:dark;box-shadow:0 26px 64px -48px color-mix(in srgb,var(--ai-accent) 60%,transparent)}
[data-theme=light] .ai-demo{--ai-ink:var(--site-ink);--ai-body:var(--site-muted);--ai-label:var(--ito-label);--ai-accent:var(--site-accent);--ai-rule:var(--site-rule);--ai-ground:var(--site-surface);--ai-question-ground:color-mix(in srgb,var(--ai-accent) 8%,var(--site-bg));color-scheme:light}
.ai-demo::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 20% 0%,color-mix(in srgb,var(--ai-accent) 6%,transparent),transparent 55%)}
.ai-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 30px;border-bottom:1px solid var(--ai-rule)}
.ai-identity{display:flex;align-items:center;gap:13px;min-width:0}
.ai-identity canvas{width:32px;height:32px;flex:none}
.ai-identity strong{display:block;font-size:14px;font-weight:700;line-height:1.3}
.ai-status{font-size:12px;color:var(--ai-label);margin-top:3px;line-height:1.4}
.ai-sample{border:1px solid var(--ai-rule);border-radius:6px;padding:5px 10px;font-size:11px;color:var(--ai-body);white-space:nowrap}
.ai-thread{padding:25px 30px 20px}
.ai-question-seat{display:flex;justify-content:flex-end;min-height:45px;margin-bottom:22px}
.ai-question{max-width:78%;align-self:start;background:var(--ai-question-ground);color:var(--ai-ink);border:1px solid color-mix(in srgb,var(--ai-accent) 38%,transparent);border-radius:17px 17px 5px 17px;padding:10px 15px;font-size:13px;line-height:1.5}
.ai-demo[data-phase=typing] .ai-question{visibility:hidden}
.ai-stage{display:grid;min-height:236px;align-items:start}
.ai-answer,.ai-working{grid-area:1/1;min-width:0}
.ai-answer{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:50px;align-items:start}
.ai-demo:not([data-phase=answer]) .ai-answer{visibility:hidden;pointer-events:none}
.ai-demo[data-phase=answer] .ai-working{visibility:hidden;pointer-events:none}
.ai-answer-label{font-size:12px;color:var(--ai-label)}
.ai-answer-value{font-family:var(--font-body);font-size:clamp(35px,4.5vw,54px);font-weight:400;line-height:1.18;letter-spacing:-.04em;font-variant-numeric:tabular-nums;margin-top:8px}
.ai-answer-note{font-size:14px;line-height:1.75;color:var(--ai-body);max-width:430px;margin-top:9px}
.ai-sources{display:flex;flex-wrap:wrap;list-style:none;gap:6px;padding:0;margin:17px 0 0}
.ai-sources li{padding:5px 9px;border-radius:5px;background:color-mix(in srgb,var(--ai-body) 7%,transparent);font-size:10px;color:var(--ai-body);line-height:1.3}
.ai-breakdown{margin:0;min-width:0}
.ai-breakdown>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 16px;padding:13px 0;border-top:1px solid var(--ai-rule);align-items:center}
.ai-breakdown dt{font-size:12px;line-height:1.5;color:var(--ai-body)}
.ai-breakdown dd{font:12px var(--font-mono);font-variant-numeric:tabular-nums;margin:0;text-align:right;white-space:nowrap}
.ai-breakdown .ai-share{grid-column:1/-1;block-size:4px;background:color-mix(in srgb,var(--ai-body) 10%,transparent);border-radius:3px;overflow:hidden}
.ai-share span{display:block;height:100%;width:var(--share);background:var(--ai-accent);border-radius:3px}
.ai-working{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:50px;align-items:center;padding-top:15px;min-height:220px}
.ai-working-main{display:flex;align-items:center;gap:20px}
.ai-working-main canvas{width:64px;height:64px;flex:none}
.ai-working-main strong{font-size:19px;font-weight:500;line-height:1.4;display:block;letter-spacing:-.02em}
.ai-working-main p{font-size:12px;line-height:1.7;color:var(--ai-label);margin-top:8px;max-width:300px}
.ai-steps{list-style:none;display:grid;gap:0;margin:0;padding:0;counter-reset:ai-step}
.ai-steps li{display:flex;align-items:center;gap:11px;min-height:49px;padding:10px 0;border-top:1px solid var(--ai-rule);font-size:12px;color:var(--ai-label)}
.ai-steps li::before{counter-increment:ai-step;content:'0' counter(ai-step);font:10px var(--font-mono);color:var(--ai-label)}
.ai-steps li[data-current=true],.ai-steps li[data-current=true]::before{color:var(--ai-accent)}
.ai-demo[data-phase=answer] .ai-answer-summary,.ai-demo[data-phase=answer] .ai-breakdown{animation:ai-reveal .5s ease both}
.ai-demo[data-phase=answer] .ai-breakdown{animation-delay:.12s}
.ai-demo[data-phase=answer] .ai-share span{animation:ai-bar-in .7s ease both .2s}
.ai-followup{margin-top:20px}
.ai-followup-toggle{min-height:44px;padding:10px 14px;border:1px solid var(--ai-rule);border-radius:10px;background:color-mix(in srgb,var(--ai-accent) 8%,var(--ai-ground));color:var(--ai-ink);font-size:13px;text-align:left}
.ai-followup-toggle:hover{border-color:var(--ai-accent)}
.ai-receipt-form{margin-top:14px;padding:20px;border:1px solid var(--ai-rule);border-radius:12px;background:color-mix(in srgb,var(--ai-body) 3%,var(--ai-ground))}
.ai-receipt-context{font-size:13px;line-height:1.6;color:var(--ai-ink)}
.ai-receipt-context p+p{color:var(--ai-body);font-size:12px;margin-top:3px}
.ai-receipt-entry{display:flex;align-items:flex-end;gap:12px;margin-top:18px}
.ai-receipt-entry>div{flex:1;min-width:0}
.ai-receipt-entry label{display:block;font-size:12px;color:var(--ai-body);margin-bottom:8px}
.ai-receipt-entry input{display:block;width:100%;min-height:46px;border:1px solid var(--ai-rule);border-radius:8px;padding:10px 12px;background:var(--ai-ground);color:var(--ai-ink);font:14px var(--font-mono);font-variant-numeric:tabular-nums}
.ai-receipt-entry input::placeholder{font:13px var(--font-body);color:var(--ai-label)}
.ai-receipt-entry input:focus-visible{outline:2px solid var(--ai-accent);outline-offset:3px}
.ai-receipt-entry input[aria-invalid=true]{border-style:dashed}
.ai-receipt-apply{min-height:46px;padding:10px 18px;border:1px solid var(--ai-accent);border-radius:8px;background:var(--ai-accent);color:var(--ai-ground);font-size:13px;font-weight:500;white-space:nowrap}
.ai-receipt-scope,.ai-receipt-error{font-size:12px;line-height:1.6;margin-top:10px;color:var(--ai-body)}
.ai-receipt-error:empty{display:none}
.ai-receipt-error{color:var(--ai-ink);font-weight:500}
@media(max-width:720px){.ai-receipt-form{padding:16px}.ai-receipt-entry{display:grid;grid-template-columns:minmax(0,1fr)}.ai-receipt-apply{width:100%}}
.ai-questions{display:flex;flex-wrap:wrap;gap:8px;padding:0 30px 14px}
.ai-questions button{position:relative;overflow:hidden;background:color-mix(in srgb,var(--ai-body) 5%,transparent);border:1px solid var(--ai-rule);border-radius:10px;padding:10px 13px;min-height:44px;text-align:left;font-size:12px;line-height:1.4;color:var(--ai-body)}
.ai-questions button[aria-pressed=true]{color:var(--ai-ink);border-color:color-mix(in srgb,var(--ai-accent) 58%,transparent);background:color-mix(in srgb,var(--ai-accent) 12%,transparent)}
.ai-questions button:hover{border-color:var(--ai-accent)}
.ai-questions button::after{content:'';height:2px;position:absolute;left:0;bottom:0;width:0;background:var(--ai-accent)}
.ai-demo[data-auto=true][data-phase=answer] .ai-questions button[aria-pressed=true]::after{width:calc(var(--read-progress,0)*100%)}
.ai-composer{display:flex;align-items:center;gap:14px;min-height:58px;margin:0 30px 14px;padding:9px 12px 9px 17px;border:1px solid var(--ai-rule);border-radius:14px;background:color-mix(in srgb,var(--ai-body) 6%,transparent);position:relative;overflow:hidden}
.ai-demo[data-phase=typing] .ai-composer{border-color:color-mix(in srgb,var(--ai-accent) 60%,transparent);box-shadow:inset 0 -9px 26px -22px var(--ai-accent)}
.ai-composer-text{flex:1;min-width:0;line-height:1.65;font-size:13px;color:var(--ai-label)}
.ai-demo[data-phase=typing] .ai-composer-text{color:var(--ai-ink)}
.ai-caret{display:inline-block;vertical-align:-.15em;margin-left:2px;width:1px;height:1em;background:var(--ai-accent);animation:ai-caret 1s steps(2,end) infinite}
.ai-demo:not([data-phase=typing]) .ai-caret{display:none}
.ai-replay{background:color-mix(in srgb,var(--ai-body) 7%,transparent);color:var(--ai-body);border:1px solid var(--ai-rule);padding:9px 12px;min-height:40px;border-radius:8px;font-size:12px;flex:none}
.ai-replay:hover{border-color:var(--ai-accent);color:var(--ai-ink)}
.ai-bottom{display:flex;align-items:center;justify-content:flex-end;gap:14px;padding:0 30px 18px;color:var(--ai-label);font-size:10px}
.ai-playback{background:none;border:0;padding:10px 0;color:var(--ai-body);font-size:11px;min-height:40px}
.ai-playback:hover{color:var(--ai-ink)}
.ai-demo button:focus-visible{outline:2px solid var(--ai-accent);outline-offset:3px}
.ai-motion-note{display:none}
.ai-live{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ai-demo[data-running=false] *{animation-play-state:paused!important}
.ai-demo[data-instant=true] .ai-answer-summary,.ai-demo[data-instant=true] .ai-breakdown,.ai-demo[data-instant=true] .ai-share span{animation:none}
@media(max-width:720px){.ai-status{min-height:2.8em}}
@keyframes ai-reveal{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@keyframes ai-bar-in{from{width:0}to{width:var(--share)}}
@keyframes ai-caret{to{opacity:0}}
@media(max-width:1000px){.ai-answer,.ai-working{gap:30px}.ai-questions button{font-size:11px}.ai-answer-value{font-size:44px}.ai-thread{padding-inline:26px}.ai-top{padding-inline:26px}.ai-composer{margin-inline:26px}.ai-questions,.ai-bottom{padding-inline:26px}}
@media(max-width:720px){.ai-section .section-intro h2{font-size:38px}.ai-top{padding:18px}.ai-status{font-size:11px}.ai-sample{font-size:10px;padding:5px 7px}.ai-thread{padding:22px 18px 18px}.ai-question-seat{min-height:61px;margin-bottom:22px}.ai-question{max-width:95%;font-size:12px}.ai-stage{min-height:378px}.ai-answer,.ai-working{grid-template-columns:1fr;gap:22px}.ai-answer-value{font-size:43px}.ai-answer-note{font-size:13px}.ai-sources{margin-top:12px;gap:5px}.ai-sources li{font-size:9px;padding:5px 7px}.ai-breakdown>div{padding-block:11px}.ai-breakdown dt{font-size:11px}.ai-breakdown dd{font-size:11px}.ai-working{min-height:350px;align-content:start;gap:28px;padding-top:20px}.ai-working-main{gap:16px}.ai-working-main strong{font-size:18px}.ai-working-main p{font-size:12px}.ai-questions{padding:0 18px 14px;gap:7px}.ai-questions button{font-size:11px;min-height:44px;padding:10px 12px}.ai-composer{margin-inline:18px;min-height:62px;padding-left:13px;gap:8px}.ai-composer-text{font-size:12px}.ai-replay{font-size:11px;padding:9px;min-height:44px}.ai-bottom{padding:0 18px 15px;gap:12px;align-items:center;font-size:9px}.ai-bottom>span{max-width:175px;line-height:1.7}.ai-playback{font-size:10px;white-space:nowrap;min-height:44px}}
@media(prefers-reduced-motion:reduce){.ai-demo *, .ai-demo *::after{animation:none!important;transition:none!important}.ai-demo .ai-playback,.ai-demo .ai-replay,.ai-caret{display:none}.ai-demo .ai-motion-note{display:inline}.ai-questions button::after{display:none}.ai-demo:not([data-phase=answer]) .ai-answer{visibility:visible}.ai-working{display:none}}