.demo { position: relative; width: 100%; height: 100%; overflow: hidden; background: #fff; --s: 1; }
.demo__canvas { position: absolute; left: 0; top: 0; transform: scale(var(--s)); transform-origin: 0 0; display: flex; font-family: var(--font); font-size: 12px; line-height: 1.55; color: #1f2937; letter-spacing: 0; text-align: left; }
.demo__canvas p, .demo__canvas ul, .demo__canvas ol { margin: 0; }
.demo__canvas img { max-width: none; }
.demo.is-fading .demo__canvas { opacity: .35; transition: opacity .45s ease; }
@keyframes dIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes dSpin { to { transform: rotate(360deg); } }
@keyframes dBlink { 50% { opacity: 0; } }
@keyframes dWipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes dPop { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.06); opacity: 1; } 100% { transform: scale(1); } }
.demo.is-playing [data-show]:not(.is-on) { display: none; }
.demo.is-playing [data-show].is-on { animation: dIn .35s ease both; }

.ds-msg { padding: 10px 12px; border-radius: 12px; font-size: 12.5px; line-height: 1.65; }
.ds-msg--user { align-self: flex-end; max-width: 82%; background: #EEF2FF; color: #0F172A; border-bottom-right-radius: 3px; }
.ds-msg--ai { background: #fff; border: 1px solid #E5E7EB; }
.ds-ai { display: flex; gap: 8px; align-items: flex-start; }
.ds-ai__icon { width: 28px; height: 28px; flex: none; margin-top: 2px; border-radius: 50%; }
.ds-tools { flex: 1; list-style: none; padding: 6px 4px; background: #E8E6FE; border-radius: 10px; }
.ds-tools li { position: relative; padding: 4px 10px 4px 28px; font-size: 12px; color: #374151; }
.ds-tools li::before { content: ""; position: absolute; left: 9px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; }
.ds-tools li.is-done::before { background: #22C55E; }
.ds-tools li.is-done::after { content: ""; position: absolute; left: 13px; top: 50%; width: 3px; height: 6px; margin-top: -4.5px; border: solid #fff; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.ds-tools li.is-run::before { border: 2px solid #D4D1FF; border-top-color: #4262FF; animation: dSpin .8s linear infinite; }
.demo.is-playing .ds-tools li:not(.is-run):not(.is-done) { display: none; }
.ds-cite { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 4px; background: rgba(66,98,255,.1); color: #4262FF; font-size: 10.5px; font-weight: 700; line-height: 1.7; vertical-align: 1px; }
.ds-cite.is-hl { background: #4262FF; color: #fff; }
.ds-spin { display: block; width: 14px; height: 14px; flex: none; border-radius: 50%; border: 2px solid #C7DDF5; border-top-color: #4262FF; animation: dSpin .8s linear infinite; }
.ds-composer { padding: 10px 14px 14px; border-top: 1px solid #EEF0F4; background: #fff; }
.ds-composer__db { display: flex; align-items: center; gap: 6px; margin-bottom: 8px !important; color: #4262FF; font-size: 11.5px; font-weight: 700; }
.ds-composer__db i, .dk-db i { width: 10px; height: 10px; border: 1.5px solid currentColor; border-radius: 2px; }
.ds-composer__input { position: relative; min-height: 40px; padding: 10px 12px; border: 1px solid #D1D5DB; border-radius: 10px; font-size: 12.5px; color: #111827; }
.ds-composer__ph { position: absolute; left: 12px; top: 10px; color: #9CA3AF; }
.ds-caret { display: none; width: 1.5px; height: 14px; margin-left: 1px; background: #4262FF; vertical-align: -2px; animation: dBlink 1s step-end infinite; }
.is-typing .ds-caret { display: inline-block; }
.is-typing .ds-composer__ph { display: none; }

.demo--sheet .demo__canvas { width: 1280px; height: 800px; }
.ds-side { width: 150px; flex: none; background: #131730; color: #fff; padding: 20px 0 0; }
.ds-side__logo { display: block; width: 92px; height: auto; margin: 0 auto 30px; }
.ds-nav { list-style: none; padding: 0 10px; }
.ds-nav li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; font-size: 12px; color: rgba(255,255,255,.85); }
.ds-nav li.is-cur { background: #333E76; color: #fff; font-weight: 700; }
.ds-nav i { width: 12px; height: 12px; border: 1.5px solid #51E7F2; border-radius: 3px; flex: none; }
.ds-main { position: relative; flex: 1; min-width: 0; background: #F7F8FB; padding: 14px 16px 0; }
.ds-crumb { font-size: 15px; font-weight: 700; color: #111827; margin-bottom: 10px !important; }
.ds-crumb span { color: #4262FF; font-weight: 500; }
.ds-ribbon { background: #fff; border: 1px solid #E5E7EB; border-radius: 6px 6px 0 0; }
.ds-ribbon__tabs { display: flex; gap: 2px; padding: 4px 8px 0; font-size: 11.5px; border-bottom: 1px solid #E5E7EB; }
.ds-ribbon__tabs span { padding: 4px 12px; color: #374151; }
.ds-ribbon__tabs span.is-cur { border: 1px solid #E5E7EB; border-bottom-color: #fff; margin-bottom: -1px; background: #fff; border-radius: 4px 4px 0 0; color: #111827; font-weight: 700; }
.ds-ribbon__tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 10px; }
.ds-ribbon__tools span { display: inline-flex; align-items: center; height: 26px; padding: 0 9px; border: 1px solid #E5E7EB; border-radius: 4px; font-size: 11px; color: #374151; background: #FAFBFC; }
.ds-ribbon__tools .t-font i { font-style: normal; margin-left: 10px; padding-left: 8px; border-left: 1px solid #E5E7EB; }
.ds-ribbon__tools .t-b { font-weight: 800; } .ds-ribbon__tools .t-i { font-style: italic; } .ds-ribbon__tools .t-u { text-decoration: underline; }
.ds-fx { display: flex; align-items: center; height: 30px; background: #fff; border: 1px solid #E5E7EB; border-top: 0; font-size: 11.5px; }
.ds-fx__ref { width: 64px; padding: 0 10px; border-right: 1px solid #E5E7EB; color: #111827; }
.ds-fx__fx { padding: 0 10px; color: #9CA3AF; font-style: italic; border-right: 1px solid #E5E7EB; }
.ds-fx__val { padding: 0 10px; color: #111827; white-space: nowrap; overflow: hidden; }
.ds-grid { width: 100%; table-layout: fixed; border-collapse: collapse; background: #fff; font-size: 11px; }
.ds-grid th, .ds-grid td { border: 1px solid #E5E7EB; padding: 3px 6px; height: 24px; vertical-align: middle; overflow: hidden; }
.ds-grid thead th, .ds-grid tbody th { background: #F3F4F6; color: #6B7280; font-weight: 500; text-align: center; font-size: 10.5px; }
.ds-grid .num { text-align: right; }
.ds-grid .r-title td { font-size: 16px; font-weight: 800; height: 32px; }
.ds-grid .r-head td { background: #EEF2FF; font-weight: 700; color: #0F172A; height: 34px; }
.ds-grid .r-ex td { color: #6B7280; height: 36px; }
.ds-grid tbody tr:not(.r-title):not(.r-head):not(.r-ex):not(.r-sep) td[data-ai] { height: 42px; }
.ds-grid td[data-ai] { background: #FFF3E6; color: #0F172A; transition: background .4s ease; }
.ds-grid td[data-ai].is-blank { background: #fff; }
.ds-grid td[data-ai].is-fill { animation: dCell .5s ease; }
@keyframes dCell { from { background: #FFD9AE; } to { background: #FFF3E6; } }
.ds-grid td.is-sel, .ds-grid td.is-edited { position: relative; background: #fff; outline: 2px solid #4262FF; outline-offset: -2px; font-weight: 700; }
.ds-badge { position: absolute; left: 16px; bottom: 18px; display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: 100vh; background: #FFF3E6; border: 1px solid #F6C08A; color: #9A4A00; font-size: 11.5px; font-weight: 700; }
.ds-badge b { font-family: var(--font-num); font-size: 13px; }
.ds-edit-tag { position: absolute; left: 640px; top: 334px; padding: 5px 11px; border-radius: 6px; background: #4262FF; color: #fff; font-size: 11.5px; font-weight: 700; white-space: nowrap; box-shadow: 0 6px 16px rgba(15,23,42,.25); }
.ds-edit-tag::before { content: ""; position: absolute; left: -5px; top: 50%; margin-top: -5px; border: 5px solid transparent; border-left: 0; border-right-color: #4262FF; }
.demo.is-playing .ds-edit-tag.is-on { animation: dPop .4s ease both; }
.ds-chat { width: 370px; flex: none; display: flex; flex-direction: column; background: #fff; border-left: 1px solid #E5E7EB; }
.ds-chat__tabs { display: flex; gap: 4px; padding: 10px 12px; border-bottom: 1px solid #EEF0F4; font-size: 12px; }
.ds-chat__tabs span { padding: 5px 12px; border-radius: 8px; color: #6B7280; }
.ds-chat__tabs span.is-cur { background: #E8E5FF; color: #5B5BD6; font-weight: 700; }
.ds-chat__log { flex: 1; display: flex; flex-direction: column; gap: 14px; padding: 16px; overflow: hidden; }
.ds-run { display: none; align-items: center; gap: 10px; margin-left: 36px; padding: 10px 12px; border: 1px solid #C7DDF5; border-radius: 10px; background: #EEF7FC; }
.demo.is-playing .ds-run.is-on { display: flex; }
.ds-run b { display: block; font-size: 12px; color: #1D4ED8; }
.ds-run span { font-size: 11px; color: #4B5563; }
.ds-run em { font-style: normal; font-family: var(--font-num); font-size: 13px; color: #1D4ED8; margin-left: 2px; }

.mv__steps { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin: 1.6rem 0 0; padding: 0; counter-reset: st; }
.mv__steps li { counter-increment: st; display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .85rem .35rem .45rem; border-radius: 100vh; border: 1px solid rgba(255,255,255,.22); color: rgba(255,255,255,.7); font-size: .8125rem; font-weight: 700; transition: background .3s ease, color .3s ease, border-color .3s ease; }
.mv__steps li::before { content: "0" counter(st); display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: rgba(255,255,255,.12); font-family: var(--font-num); font-size: .75rem; }
.mv__steps li.is-on { background: #fff; border-color: #fff; color: var(--primary); }
.mv__steps li.is-on::before { background: var(--cta); color: #fff; }

.live { overflow-x: clip; }
.demo-frame { position: relative; margin-top: 2.5rem; border: 1px solid var(--tint-line); border-radius: var(--radius); overflow: hidden; box-shadow: 0 24px 48px rgba(15,23,42,.12); background: #fff; }
.demo--know { aspect-ratio: 1100 / 600; height: auto; }
.demo--know .demo__canvas { width: 1100px; height: 600px; }
.dk-chat { width: 640px; flex: none; display: flex; flex-direction: column; border-right: 1px solid #E5E7EB; }
.dk-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid #EEF0F4; font-size: 14px; }
.dk-db { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 100vh; background: #EEF2FF; color: #4262FF; font-size: 11.5px; font-weight: 700; }
.dk-log { flex: 1; display: flex; flex-direction: column; gap: 14px; padding: 18px 20px; overflow: hidden; }
.dk-answer { margin-left: 36px; padding: 12px 14px; border: 1px solid #E5E7EB; border-radius: 12px; font-size: 13px; line-height: 1.8; }
.dk-answer p + p { margin-top: 4px !important; }
.demo.is-playing .dk-answer [data-line]:not(.is-on) { display: none; }
.demo.is-playing .dk-answer [data-line].is-on { animation: dWipe var(--d, .7s) linear both; }
.demo.is-playing .dk-answer .ds-cite:not(.is-on) { opacity: 0; }
.demo.is-playing .dk-answer .ds-cite.is-on { animation: dPop .35s ease both; }
.dk-src { flex: 1; padding: 16px 20px; background: #F6F7FB; }
.dk-src__title { font-size: 12px; font-weight: 700; color: #6B7280; margin-bottom: 10px !important; }
.dk-card { margin-bottom: 10px; padding: 11px 14px; border: 1px solid #E5E7EB; border-radius: 10px; background: #fff; transition: opacity .45s ease, transform .45s ease, border-color .3s ease, box-shadow .3s ease; }
.dk-card__no { display: inline-block; padding: 0 6px; border-radius: 4px; background: rgba(66,98,255,.1); color: #4262FF; font-size: 10.5px; font-weight: 700; }
.dk-card__name { margin-top: 4px !important; font-size: 12.5px; font-weight: 700; color: #0F172A; }
.dk-card__meta { font-size: 11px; color: #6B7280; }
.dk-card__quote { margin-top: 6px !important; padding-top: 6px; border-top: 1px solid #EEF0F4; font-size: 12px; color: #374151; }
.dk-card mark { background: #DDF6FA; color: inherit; padding: 0 1px; }
.demo.is-playing .dk-card:not(.is-on) { opacity: 0; transform: translateX(18px); }
.dk-card.is-hl { border-color: #4262FF; box-shadow: 0 8px 20px rgba(15,23,42,.12); }
.dk-card.is-hl .dk-card__no { background: #4262FF; color: #fff; }

.demo--know.is-compact { aspect-ratio: 560 / 960; }
.demo--know.is-compact .demo__canvas { width: 560px; height: 960px; flex-direction: column; }
.demo--know.is-compact .dk-chat { width: 560px; height: 480px; border-right: 0; border-bottom: 1px solid #E5E7EB; }
.demo--know.is-compact .dk-src { padding: 14px 16px; }
.demo--know.is-compact .dk-card { margin-bottom: 8px; padding: 9px 12px; }

.live__points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 2rem; }
.live__points li { display: flex; flex-direction: column; gap: .3rem; font-size: .9375rem; line-height: 1.75; color: var(--text-sub); }
.live__points b { color: var(--primary); font-size: 1.0625rem; }
.demo-note { margin-top: 1.25rem; font-size: .8125rem; color: var(--muted); text-align: center; }
.mv .demo-note { color: rgba(255,255,255,.6); }
@media (max-width: 900px) { .live__points { grid-template-columns: 1fr; gap: 1rem; } }

.kflow--tasks .kflow__list { grid-template-columns: repeat(3, 1fr); }
.kflow--tasks .kflow__list li + li::before { content: none; }
@media (max-width: 900px) { .kflow--tasks .kflow__list { grid-template-columns: 1fr 1fr; gap: .75rem; } }
@media (max-width: 640px) { .kflow--tasks .kflow__list { grid-template-columns: 1fr; } }

.strength { margin-top: 3.5rem; }
.strength + .strength { margin-top: 5rem; }
.strength .feature__label { font-family: var(--font); font-weight: 700; letter-spacing: .1em; color: var(--primary); }

.files { position: relative; display: grid; gap: .9rem; max-width: 30rem; margin-inline: auto; }
.file { display: grid; grid-template-columns: 3.25rem 1fr; grid-template-rows: auto auto; column-gap: 1rem; align-items: center; padding: 1.1rem 1.25rem; background: #fff; border: 1px solid var(--line); border-radius: .75rem; box-shadow: 0 12px 28px rgba(15,23,42,.1); }
.file i { grid-row: 1 / span 2; display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: .6rem; color: #fff; font-style: normal; font-family: var(--font-num); font-size: .8125rem; letter-spacing: .05em; }
.file--x i { background: #1D6F42; } .file--p i { background: #C4472B; } .file--w i { background: #2B5797; }
.file b { font-size: .9375rem; color: var(--text); overflow-wrap: anywhere; }
.file span { font-size: .8125rem; color: var(--text-sub); }
.file:nth-child(2) { margin-left: 1.5rem; } .file:nth-child(3) { margin-left: 3rem; }
.tabpanel.is-active .file { animation: fileIn .6s cubic-bezier(.2,.7,.2,1) both; }
.tabpanel.is-active .file:nth-child(2) { animation-delay: .12s; } .tabpanel.is-active .file:nth-child(3) { animation-delay: .24s; }
@keyframes fileIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) { .file:nth-child(2), .file:nth-child(3) { margin-left: 0; } }

.reveal { transform: translateY(1.75rem); filter: blur(4px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1), filter .8s ease; }
.reveal.is-in { filter: none; }
.reveal [data-stagger] > *, [data-stagger].reveal > * { opacity: 0; transform: translateY(.9rem); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) * 70ms + 150ms); }
.reveal.is-in [data-stagger] > *, [data-stagger].reveal.is-in > * { opacity: 1; transform: none; }
.tabpanel.is-active .feature { animation: tabIn .5s cubic-bezier(.2,.7,.2,1) both; }
@keyframes tabIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-in { filter: none; }
  .reveal [data-stagger] > *, [data-stagger].reveal > * { opacity: 1; transform: none; transition: none; }
  .tabpanel.is-active .feature, .tabpanel.is-active .file { animation: none; }
  .mv__steps li { transition: none; }
}