.ks-exposure{aspect-ratio:1;position:relative}.ks-frame{aspect-ratio:4/5;border-radius:1.4rem;width:64%;position:absolute;overflow:hidden;box-shadow:0 24px 50px #2423202e}.ks-frame-a{color:var(--color-charcoal);background:radial-gradient(circle at 30% 30%, #fcfbf8b3, transparent 32%), radial-gradient(circle at 70% 62%, #fcfbf859, transparent 22%), linear-gradient(160deg, #e5dfd5, var(--color-sand) 45%, #aaa094);top:20%;left:0}.ks-frame-b{color:var(--color-soft-white);opacity:.86;background:radial-gradient(circle at 62% 30%, #d98b748c, transparent 34%), radial-gradient(circle at 30% 75%, #ffffff1f, transparent 26%), linear-gradient(135deg, #424a4c, #2c302f 55%, var(--color-camera-ground));top:0;right:0}.ks-tag{position:absolute;top:1rem;left:1.1rem}.ks-frame-b .ks-tag{left:auto;right:1.1rem}.ks-roles{font-size:.6rem;line-height:1rem;position:absolute;bottom:.9rem;left:1.1rem;right:1.1rem}.ks-roles-reel{display:none}.ks-overlap{z-index:2;width:28%;height:60%;color:var(--color-soft-white);background:radial-gradient(#fcfbf829,#0000 70%);justify-content:center;align-items:flex-end;padding-bottom:1.4rem;display:flex;position:absolute;top:20%;left:36%}.ks-overlap-label{text-shadow:0 1px 6px #00000073;letter-spacing:.14em}.ks-corners{position:absolute;inset:.55rem}.ks-corners span{border:0 solid #fcfbf8e6;width:.9rem;height:.9rem;position:absolute}.ks-corners span:first-child{border-top-width:2px;border-left-width:2px;top:0;left:0}.ks-corners span:nth-child(2){border-top-width:2px;border-right-width:2px;top:0;right:0}.ks-corners span:nth-child(3){border-bottom-width:2px;border-left-width:2px;bottom:0;left:0}.ks-corners span:nth-child(4){border-bottom-width:2px;border-right-width:2px;bottom:0;right:0}.ks-flash{z-index:3;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 50%, var(--color-soft-white), #fcfbf800 55%);position:absolute;inset:-10%}[data-phase=waiting] .ks-frame-a{opacity:0;transform:translate(-24%)rotate(-6deg)}[data-phase=waiting] .ks-frame-b{opacity:0;transform:translate(24%)rotate(6deg)}[data-phase=seen] .ks-frame{transition:opacity .8s ease .2s, transform 1.5s var(--ease-expo) .2s}[data-phase=seen] .ks-frame-b{transition-delay:.32s}[data-phase=waiting] .ks-overlap{opacity:0}[data-phase=seen] .ks-overlap{transition:opacity .5s 1.05s}[data-phase=waiting] .ks-corners{inset:-.9rem}[data-phase=seen] .ks-corners{transition:inset .9s var(--ease-expo) 1.05s}[data-phase=seen] .ks-corners span{animation:.7s step-end 1.55s both ks-af}[data-phase=seen] .ks-flash{animation:1s ease-out 1.7s both ks-flash}[data-phase=waiting] :is(.ks-tag,.ks-roles,.ks-overlap-label){opacity:0}[data-phase=seen] :is(.ks-tag,.ks-roles,.ks-overlap-label){transition:opacity .7s 1.9s}@keyframes ks-af{0%,to{border-color:#fcfbf8e6}15%,55%{border-color:var(--color-terracotta-light)}35%{border-color:#fcfbf8e6}}@keyframes ks-flash{0%{opacity:0}10%{opacity:.8}to{opacity:0}}@media (prefers-reduced-motion:no-preference){.ks-roles-static{display:none}.ks-roles-reel{height:1rem;display:block;overflow:hidden}.ks-roles-reel>span{animation:ks-reel 10s var(--ease-expo) infinite;display:block}[data-phase=seen] .ks-frame-a{animation:7s ease-in-out 2.6s infinite alternate both ks-drift-a}[data-phase=seen] .ks-frame-b{animation:7s ease-in-out 2.6s infinite alternate both ks-drift-b}}@keyframes ks-reel{0%,18%{transform:translateY(0)}25%,43%{transform:translateY(-100%)}50%,68%{transform:translateY(-200%)}75%,93%{transform:translateY(-300%)}to{transform:translateY(-400%)}}@keyframes ks-drift-a{0%{translate:0}to{translate:-.45rem .3rem}}@keyframes ks-drift-b{0%{translate:0}to{translate:.45rem -.3rem}}.ks-pills{border:1px solid var(--border-strong);background:var(--surface);border-radius:1.25rem;grid-template-columns:repeat(2,minmax(0,1fr));padding:.25rem;display:grid;position:relative}@media (min-width:40rem){.ks-pills{grid-template-columns:repeat(4,minmax(0,1fr))}}.ks-indicator{background:var(--primary);width:calc(50% - .25rem);height:calc(50% - .25rem);translate:calc(var(--c2,0) * 100%) calc(var(--r2,0) * 100%);transition:translate .65s var(--ease-expo);border-radius:1rem;position:absolute;top:.25rem;left:.25rem}@media (min-width:40rem){.ks-indicator{width:calc(25% - .125rem);height:calc(100% - .5rem);translate:calc(var(--i,0) * 100%) 0}}.ks-pill{z-index:1;text-align:center;cursor:pointer;border-radius:1rem;justify-content:center;align-items:center;gap:.5rem;min-height:3.25rem;padding:.5rem .75rem;font-size:.875rem;font-weight:700;line-height:1.15rem;transition:color .35s;display:flex;position:relative}.ks-pill[data-on]{color:var(--primary-foreground)}.ks-pill:not([data-on]):hover{color:var(--accent-text)}.ks-pill:has(:focus-visible){outline:2px solid var(--color-terracotta);outline-offset:2px}.ks-phone{background:var(--color-camera-ground);color:var(--foreground);border-radius:1.75rem;overflow:hidden;box-shadow:0 30px 60px #24232038}.ks-phone-head{border-bottom:1px solid var(--border);background:var(--surface);align-items:center;gap:.75rem;padding:1rem 1.25rem;display:flex}.ks-avatar{background:var(--accent-hover);width:2.25rem;height:2.25rem;color:var(--accent-foreground);border-radius:9999px;flex-shrink:0;place-items:center;font-weight:700;display:grid}.ks-chat{background-image:radial-gradient(#f7f3ec0f 1px,#0000 1px);background-size:1rem 1rem;flex-direction:column;justify-content:flex-end;min-height:23rem;padding:1.5rem 1rem;display:flex}@media (min-width:40rem){.ks-chat{padding-inline:1.25rem}}.ks-thread{justify-content:flex-end;display:flex;position:relative}.ks-bubble{background:var(--primary);max-width:94%;color:var(--primary-foreground);transform-origin:100% 100%;border-radius:1.1rem 1.1rem .3rem;padding:.9rem 1rem 1.7rem;font-size:.875rem;line-height:1.4rem;position:relative}.ks-bubble-meta{font-family:var(--font-mono);opacity:.55;font-size:.65rem;position:absolute;bottom:.45rem;right:.85rem}.ks-blank{opacity:.35;border-bottom:1px dashed;width:4.5rem;display:inline-block}.ks-typing{background:var(--surface);opacity:0;border-radius:1.1rem 1.1rem .3rem;gap:.3rem;padding:.85rem 1rem;display:flex;position:absolute;bottom:0;right:0}.ks-typing span{background:var(--muted);border-radius:9999px;width:.4rem;height:.4rem}[data-phase=waiting] .ks-bubble{opacity:0}[data-phase=seen] .ks-typing{animation:.95s .25s both ks-typing}[data-phase=seen] .ks-bubble{animation:ks-bubble .85s var(--ease-expo) 1.05s backwards}@keyframes ks-typing{0%{opacity:0;transform:translateY(.4rem)}20%,78%{opacity:1;transform:none}to{opacity:0;transform:none}}@keyframes ks-bubble{0%{opacity:0;transform:translateY(.75rem)scale(.94)}}.ks-send{position:relative;overflow:hidden}.ks-send:after{content:"";transition:translate .9s var(--ease-expo);pointer-events:none;background:linear-gradient(105deg,#0000 35%,#fcfbf838 50%,#0000 65%);position:absolute;inset:0;translate:-110%}.ks-send:hover:after{translate:110%}.ks-send-arrow{transition:translate .3s var(--ease-expo)}.ks-send:hover .ks-send-arrow{translate:.25rem}@media (prefers-reduced-motion:no-preference){[data-phase=seen] .ks-typing span{animation:.9s ease-in-out infinite ks-dot}[data-phase=seen] .ks-typing span:nth-child(2){animation-delay:.15s}[data-phase=seen] .ks-typing span:nth-child(3){animation-delay:.3s}.ks-swap>p{animation:ks-in .7s var(--ease-expo) backwards}.ks-swap .ks-idea{animation:ks-in .7s var(--ease-expo) calc(.1s + var(--i,0) * 70ms) backwards}}@keyframes ks-dot{0%,to{opacity:.35;translate:0}40%{opacity:1;translate:0 -.2rem}}@keyframes ks-in{0%{opacity:0;filter:blur(3px);transform:translateY(.6rem)}}.ks-step{padding-left:2rem;position:relative}.ks-step-dot{border:2px solid var(--accent);background:var(--background);border-radius:9999px;width:.7rem;height:.7rem;position:absolute;top:.3rem;left:0}.ks-step:first-child .ks-step-dot{background:var(--accent)}.ks-leader{background:var(--border-strong);transform-origin:top;width:1px;position:absolute;top:.65rem;bottom:0;left:.34rem}@media (min-width:48rem){.ks-step{padding-top:2.25rem;padding-left:0}.ks-step-dot{top:.3rem}.ks-leader{transform-origin:0;width:auto;height:1px;inset:.64rem 0 auto .65rem}}[data-phase=waiting] .ks-leader{transform:scaleY(0)}@media (min-width:48rem){[data-phase=waiting] .ks-leader{transform:scaleX(0)}}[data-phase=seen] .ks-leader{transition:transform 1.8s var(--ease-expo) .3s}[data-phase=waiting] .ks-step-dot{scale:0}[data-phase=seen] .ks-step-dot{transition:scale .6s var(--ease-expo) calc(.45s + var(--i,0) * .25s)}[data-phase=waiting] .ks-step>:not(.ks-step-dot){opacity:0;transform:translateY(1rem)}[data-phase=seen] .ks-step>:not(.ks-step-dot){transition:opacity .7s ease calc(.55s + var(--i,0) * .25s), transform 1s var(--ease-expo) calc(.55s + var(--i,0) * .25s)}@media (prefers-reduced-motion:no-preference){[data-phase=seen] .ks-step:first-child .ks-step-dot:after{content:"";border-radius:inherit;border:1px solid var(--accent);animation:2.4s ease-out 1.4s infinite ks-ripple;position:absolute;inset:-2px}}@keyframes ks-ripple{0%{opacity:.8;scale:1}to{opacity:0;scale:3}}.ks-band{border-radius:2rem;overflow:hidden}@media (prefers-reduced-motion:no-preference){[data-phase=seen] .ks-perf{animation:2.4s linear infinite ks-roll}[data-phase=seen] .ks-perf-rev{animation-direction:reverse}}@keyframes ks-roll{0%{background-position-x:.4rem}to{background-position-x:1.8rem}}