.di-demo{--out: cubic-bezier(.23, 1, .32, 1);--io: cubic-bezier(.77, 0, .175, 1);--loop: 8s;--shadow-float: 0 1px 2px rgba(23, 23, 46, .04), 0 12px 32px -8px rgba(23, 23, 46, .1), 0 32px 64px -24px rgba(0, 144, 200, .22);display:grid;gap:1rem;text-align:left}@media (min-width: 1024px){.di-demo{grid-template-columns:minmax(0,1fr) minmax(0,21rem);gap:1.25rem;align-items:stretch}}.di-card{position:relative;min-width:0;border:1px solid var(--line);border-radius:1.25rem;background:#fff;box-shadow:var(--shadow-float)}.di-lanes{display:grid;gap:1.25rem;padding:1.25rem}@media (min-width: 640px){.di-lanes{padding:1.75rem;gap:1.75rem}}.di-lane{display:grid;gap:.875rem;padding:1rem;border-radius:1rem;background:var(--ground)}.di-lane.is-direct{background:linear-gradient(160deg,#e8f8fe,#f4f8fb 70%);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--odeo) 25%,white)}.di-lane-head{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-size:.8125rem;font-weight:600;color:var(--ink)}.di-lane-note{font-size:.75rem;font-weight:500;color:var(--ink-3)}.di-sync{margin-left:auto;padding:.125rem .5rem;border-radius:999px;background:#e3f8f1;color:#137a60;font-size:.6875rem;font-weight:600}.di-track{position:relative;display:flex;align-items:flex-start;justify-content:space-between;min-height:3rem}.di-track:before{content:"";position:absolute;left:1rem;right:1rem;top:calc(1.125rem - 1px);border-top:2px dashed #c9d1de}.is-direct .di-track:before{border-top:2px solid color-mix(in srgb,var(--odeo) 45%,white)}.di-station{position:relative;z-index:1;display:grid;justify-items:center;gap:.25rem;min-width:0;font-size:.6875rem;font-weight:600;color:var(--ink-2);text-align:center}.di-station-ico{display:grid;place-items:center;width:2.25rem;height:2.25rem;border-radius:.75rem;background:#fff;box-shadow:inset 0 0 0 1px var(--line),0 1px 2px #17172e0f;color:var(--ink-3)}.di-station-ico iconify-icon,.di-station-ico img{display:block}.is-direct .di-station.is-core .di-station-ico{background:#fff;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--odeo) 45%,white),0 0 0 4px color-mix(in srgb,var(--odeo) 14%,transparent)}.di-station-label{max-width:5.5rem;line-height:1.2}@media (max-width: 479px){.di-station-label{max-width:4rem;font-size:.625rem}}.di-runner{position:absolute;inset:0 1rem;z-index:0;pointer-events:none}.di-runner i{position:absolute;top:calc(1.125rem - 6px);left:-6px;width:12px;height:12px;border-radius:999px;background:#9aa5b8;box-shadow:0 0 0 4px #9aa5b840}.is-direct .di-runner i{background:#fff;box-shadow:0 0 0 4px color-mix(in srgb,var(--sky) 45%,transparent),0 0 14px #0ea6e0e6}.di-runner{transform:translate(100%)}.di-chat{display:flex;flex-direction:column;overflow:hidden}.di-head{display:flex;align-items:center;gap:.625rem;padding:.875rem 1rem;border-bottom:1px solid var(--line)}.di-logo{flex:none;display:grid;place-items:center;width:2rem;height:2rem;border-radius:.625rem;background:#e2f5fc}.di-badge{margin-left:auto;padding:.1875rem .5rem;border-radius:999px;background:var(--ground);box-shadow:inset 0 0 0 1px var(--line);font-size:.6875rem;font-weight:600;color:var(--ink-2)}.di-msgs{display:flex;flex:1 1 auto;flex-direction:column;justify-content:flex-end;gap:.5rem;min-height:19rem;padding:1rem}.di-msg{max-width:90%;margin:0;padding:.5rem .75rem;border-radius:1rem;font-size:.8125rem;line-height:1.45}.di-msg.is-visitor{align-self:flex-end;border-bottom-right-radius:.375rem;background:var(--ink);color:#fff}.di-answer{display:grid;gap:.5rem}.di-answer>p{align-self:flex-start;border-bottom-left-radius:.375rem;background:var(--ground);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink)}.di-tag{justify-self:start;padding:.125rem .5rem;border-radius:999px;background:#e2f5fc;color:var(--odeo-ink);font-size:.6875rem;font-weight:600}.di-item{display:grid;grid-template-columns:3.25rem minmax(0,1fr);gap:.625rem;align-items:center;padding:.5rem;border:1px solid var(--line);border-radius:.875rem;background:#fff}.di-thumb{height:2.5rem;border-radius:.5rem;background:linear-gradient(135deg,#cfeefb,#e5e0ff);display:grid;place-items:center;color:var(--odeo-ink)}.di-item-title{display:block;font-size:.8125rem;font-weight:600;color:var(--ink)}.di-item-meta{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.6875rem;color:var(--ink-3)}.di-item-price{display:block;font-size:.75rem;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}.di-action{justify-self:start;display:inline-flex;align-items:center;gap:.375rem;padding:.3125rem .75rem;border-radius:999px;background:var(--ink);color:#fff;font-size:.75rem;font-weight:600}.di-action svg{width:.8125rem;height:.8125rem}@keyframes di-run-mw{0%{transform:translate(0);opacity:0}4%{opacity:1}18%{transform:translate(25%)}26%{transform:translate(25%)}40%{transform:translate(50%)}48%{transform:translate(50%)}62%{transform:translate(75%)}70%{transform:translate(75%)}86%{transform:translate(100%);opacity:1}94%,to{transform:translate(100%);opacity:0}}@keyframes di-run-direct{0%{transform:translate(0);opacity:0}4%{opacity:1}14%{transform:translate(50%)}18%{transform:translate(50%)}30%{transform:translate(100%);opacity:1}38%,to{transform:translate(100%);opacity:0}}@keyframes di-answer{0%,30%{opacity:0;transform:translateY(8px);filter:blur(4px)}36%,92%{opacity:1;transform:none;filter:blur(0)}to{opacity:0;transform:translateY(-4px);filter:blur(2px)}}@media (prefers-reduced-motion: no-preference){.di-lane:not(.is-direct) .di-runner{animation:di-run-mw var(--loop) var(--io) infinite}.di-lane.is-direct .di-runner{animation:di-run-direct var(--loop) var(--io) infinite}.di-answer{animation:di-answer var(--loop) var(--out) infinite}[data-sol-state=idle] :is(.di-runner,.di-answer){animation-play-state:paused}}