/* Katalog-Clip: In Claude wird eine App angefordert, die es schon gibt. Claude findet sie im
   Katalog, der Zugriff wird angefragt und freigegeben. Reines CSS, 14 Sekunden, läuft in
   Schleife. Er startet, sobald er im Bild ist, und beginnt beim Zurückscrollen von vorn.
   Innen ist alles in em gesetzt, deshalb gibt es keine eigene Handy-Fassung. Bei reduzierter
   Bewegung zeigt er nur das Schlussbild. Orange gehört zu Claude. */
.ka { --dur: 14s; --h: 23.4em; }
.ka { --or: #d97757; --or-ink: #c15f3c; --c-bg: #faf9f5; --c-fg: #1f1e1d; --c-mut: #73726c; --c-line: #e6e2d8; --c-bub: #efece3; --c-bar: #f2efe7; --ok: #0f6a47; --ok-soft: #dcf2e8; --wait: #9a6a10; --wait-soft: #fbefd6; --navy: #1b2858; --win: 0 .05em .1em rgba(15, 27, 77, .08), 0 .4em 1.1em rgba(15, 27, 77, .1); container-type: inline-size; margin: 0; width: 100%; max-width: 30rem; min-width: 0; transition: opacity .35s ease-out; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ka { --c-bg: #262624; --c-fg: #faf9f5; --c-mut: #a8a69e; --c-line: #3e3d39; --c-bub: #3a3935; --c-bar: #1e1d1b; --ok: #6fd3a8; --ok-soft: rgba(111, 211, 168, .16); --wait: #f0c674; --wait-soft: rgba(240, 198, 116, .16); --navy: #2f4296; }
}
:root[data-theme="dark"] .ka { --c-bg: #262624; --c-fg: #faf9f5; --c-mut: #a8a69e; --c-line: #3e3d39; --c-bub: #3a3935; --c-bar: #1e1d1b; --ok: #6fd3a8; --ok-soft: rgba(111, 211, 168, .16); --wait: #f0c674; --wait-soft: rgba(240, 198, 116, .16); --navy: #2f4296; }
.ka.reveal { opacity: 0; }
.ka.reveal.in { opacity: 1; }
.ka.reveal:not(.in) * { animation: none !important; }
.ka .ka-stage { position: relative; height: var(--h); font-size: 4cqw; overflow: hidden; background: var(--panel); border: .05em solid var(--line); border-radius: .8em; box-shadow: 0 1px 2px rgba(15, 27, 77, .06), 0 10px 28px rgba(15, 27, 77, .08); font-family: var(--text); color: var(--fg); line-height: 1.3; }
.ka .ka-body { position: absolute; inset: 0; }
.ka .ka-body, .ka .ka-body * { animation-duration: var(--dur); animation-iteration-count: infinite; animation-timing-function: linear; }
.ka .ka-body { animation-name: ka-loop; }
.ka .stk { display: grid; }
.ka .stk > * { grid-area: 1 / 1; }
.ka .zp { justify-self: end; display: inline-flex; align-items: center; padding: .12em .6em; border-radius: 1em; font-style: normal; font-size: .7em; font-weight: 600; white-space: nowrap; }
.ka .zp--wait { background: var(--wait-soft); color: var(--wait); }
.ka .zp--ok { background: var(--ok-soft); color: var(--ok); }
.ka .zp--mut { background: var(--accent-soft); color: var(--muted); }
.ka .kbtn { justify-self: end; display: inline-grid; place-items: center; padding: .34em .85em; border-radius: .4em; background: #2747a8; color: #fff; font-style: normal; font-size: .74em; font-weight: 600; white-space: nowrap; }
.ka .kbtn--2 { background: var(--bg); color: var(--fg); box-shadow: inset 0 0 0 .07em var(--line); }
.ka .tile { display: grid; place-items: center; flex: none; width: 1.8em; height: 1.8em; border-radius: .45em; background: var(--accent-soft); color: var(--accent); }
.ka .tile svg { width: 1.1em; height: 1.1em; }
.ka .dots { display: flex; gap: .24em; }
.ka .d { width: .46em; height: .46em; border-radius: 50%; background: var(--line); }
.ka .approw { display: flex; align-items: center; gap: .6em; min-width: 0; }
.ka .apn { flex: 1; min-width: 0; display: grid; }
.ka .apn b { font-size: .86em; font-weight: 600; }
.ka .apn small { font-size: .7em; color: var(--muted); white-space: nowrap; }
.ka .cw { position: absolute; inset: 1em; display: grid; grid-template-rows: 1.9em minmax(0, 1fr); border-radius: .7em; overflow: hidden; background: var(--c-bg); color: var(--c-fg); box-shadow: var(--win); outline: .05em solid var(--c-line); }
.ka .cbar { display: flex; align-items: center; gap: .55em; padding-inline: .7em; background: var(--c-bar); border-bottom: .05em solid var(--c-line); }
.ka .cbar .d { background: var(--c-line); }
.ka .cbrand { display: flex; align-items: center; gap: .32em; font-size: .78em; font-weight: 600; }
.ka .spark { display: block; width: 1.15em; height: 1.15em; color: var(--or); }
.ka .cmain { display: flex; flex-direction: column; gap: .5em; min-height: 0; padding: .8em; }
.ka .msgs { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .55em; font-size: .84em; line-height: 1.32; }
.ka .you { align-self: flex-end; padding: .36em .7em; border-radius: .75em; background: var(--c-bub); }
.ka .ai { margin: 0; font-family: Georgia, "Times New Roman", serif; }
.ka .work { display: flex; align-items: center; gap: .4em; color: var(--or-ink); font-weight: 500; }
.ka .fnd { display: grid; gap: .6em; padding: .7em; border-radius: .7em; background: var(--bg); color: var(--fg); box-shadow: var(--win); outline: .05em solid var(--line); }
.ka .fnd .apn b { font-size: 1em; }
.ka .fnd .apn small { font-size: .84em; }
.ka .fnd .zp { font-size: .84em; }
.ka .fnd .kbtn { font-size: .88em; }
.ka .cmp { flex: none; display: flex; align-items: center; gap: .5em; height: 2.3em; padding: 0 .4em 0 .8em; border: .06em solid var(--c-line); border-radius: .8em; }
.ka .ctext { flex: 1; min-width: 0; font-size: .8em; white-space: nowrap; }
.ka .cph { color: var(--c-mut); }
.ka .cty { display: inline-block; }
.ka .csend { display: grid; place-items: center; flex: none; width: 1.45em; height: 1.45em; border-radius: .45em; background: var(--or); color: #fff; }
.ka .csend svg { width: .85em; height: .85em; }
.ka .k-ph { animation-name: ka-k-ph; animation-timing-function: step-end; }
.ka .k-c1 { opacity: 0; animation-name: ka-k-c1; animation-timing-function: step-end; }
.ka .k-ty { animation-name: ka-k-ty; animation-timing-function: steps(var(--c), end); }
.ka .k-b1 { animation-name: ka-k-b1; animation-timing-function: cubic-bezier(.2,.7,.2,1); }
.ka .k-w { opacity: 0; animation-name: ka-k-w; animation-timing-function: cubic-bezier(.2,.7,.2,1); }
.ka .k-sp { animation-name: ka-k-sp; animation-timing-function: linear; }
.ka .k-a1 { animation-name: ka-k-a1; animation-timing-function: cubic-bezier(.2,.7,.2,1); }
.ka .k-card { animation-name: ka-k-card; animation-timing-function: cubic-bezier(.2,.7,.2,1); }
.ka .k-s1 { opacity: 0; animation-name: ka-k-s1; animation-timing-function: step-end; }
.ka .k-s2 { opacity: 0; animation-name: ka-k-s2; animation-timing-function: step-end; }
.ka .k-s3 { animation-name: ka-k-s3; animation-timing-function: step-end; }
.ka .k-bt2 { opacity: 0; animation-name: ka-k-bt2; animation-timing-function: step-end; }
.ka .k-bt3 { animation-name: ka-k-bt3; animation-timing-function: step-end; }
.ka .k-btn { animation-name: ka-k-btn; animation-timing-function: ease-out; }
.ka .k-bt1 { animation-name: ka-k-btn, ka-k-bt1; animation-timing-function: ease-out, step-end; }
.ka .k-a2 { animation-name: ka-k-a2; animation-timing-function: cubic-bezier(.2,.7,.2,1); }
@media (prefers-reduced-motion: reduce) {
  .ka .ka-body, .ka .ka-body * { animation: none !important; }
}
@keyframes ka-loop { 0% { opacity: 0; } 2.857%, 96.429% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ka-k-ph { 0% { opacity: 0; } 0% { opacity: 1; } 5.714% { opacity: 0; } 20.714% { opacity: 1; } 100% { opacity: 1; } }
@keyframes ka-k-c1 { 0% { opacity: 0; } 5.714% { opacity: 1; } 20.714% { opacity: 0; } 100% { opacity: 0; } }
@keyframes ka-k-ty { 0% { clip-path: inset(0 100% 0 0); } 6.071% { clip-path: inset(0 100% 0 0); } 18.571% { clip-path: inset(0); } 100% { clip-path: inset(0); } }
@keyframes ka-k-b1 { 0% { opacity: 0; transform: translateY(0.3em); } 20.714% { opacity: 0; transform: translateY(0.3em); } 22.857% { opacity: 1; transform: none; } 100% { opacity: 1; transform: none; } }
@keyframes ka-k-w { 0% { opacity: 0; transform: translateY(0.15em); } 22.143% { opacity: 0; transform: translateY(0.15em); } 24.286% { opacity: 1; transform: none; } 29.286% { opacity: 1; transform: none; } 30.714% { opacity: 0; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes ka-k-sp { 0% { transform: rotate(0deg); } 22.143% { transform: rotate(0deg); } 30.714% { transform: rotate(179deg); } 100% { transform: rotate(179deg); } }
@keyframes ka-k-a1 { 0% { opacity: 0; transform: translateY(0.3em); } 30.714% { opacity: 0; transform: translateY(0.3em); } 32.857% { opacity: 1; transform: none; } 100% { opacity: 1; transform: none; } }
@keyframes ka-k-card { 0% { opacity: 0; transform: translateY(0.5em); } 33.571% { opacity: 0; transform: translateY(0.5em); } 36.429% { opacity: 1; transform: none; } 100% { opacity: 1; transform: none; } }
@keyframes ka-k-s1 { 0% { opacity: 0; } 0% { opacity: 1; } 47.857% { opacity: 0; } 100% { opacity: 0; } }
@keyframes ka-k-s2 { 0% { opacity: 0; } 47.857% { opacity: 1; } 63.571% { opacity: 0; } 100% { opacity: 0; } }
@keyframes ka-k-s3 { 0% { opacity: 0; } 63.571% { opacity: 1; } 100% { opacity: 1; } }
@keyframes ka-k-bt1 { 0% { opacity: 0; } 0% { opacity: 1; } 47.857% { opacity: 0; } 100% { opacity: 0; } }
@keyframes ka-k-bt2 { 0% { opacity: 0; } 47.857% { opacity: 1; } 63.571% { opacity: 0; } 100% { opacity: 0; } }
@keyframes ka-k-bt3 { 0% { opacity: 0; } 63.571% { opacity: 1; } 100% { opacity: 1; } }
@keyframes ka-k-btn { 0% { transform: none; box-shadow: 0 0 0 0 rgba(39,71,168,.5); } 45.714% { transform: none; box-shadow: 0 0 0 0 rgba(39,71,168,.5); } 46.429% { transform: scale(.93); box-shadow: 0 0 0 0 rgba(39,71,168,.5); } 47.429% { transform: none; box-shadow: 0 0 0 .24em rgba(39,71,168,.3); } 50% { transform: none; box-shadow: 0 0 0 .55em rgba(39,71,168,0); } 100% { transform: none; box-shadow: 0 0 0 .55em rgba(39,71,168,0); } }
@keyframes ka-k-a2 { 0% { opacity: 0; transform: translateY(0.3em); } 65.714% { opacity: 0; transform: translateY(0.3em); } 67.857% { opacity: 1; transform: none; } 100% { opacity: 1; transform: none; } }