.kvl {
  --k-panel: #ffffff; --k-ink: #1c1c21; --k-ink-2: #4a4a55; --k-on-ink: #ffffff; --k-bar: rgba(255, 255, 255, .75);
  --k-hair: #e6e6ed; --k-hair-2: #d8d8e0; --k-accent: #6d58ce; --k-raised: #f1f1f4; --k-sunk: #ececf1; --k-media: #e4e4ea;
  --k-frame-sh: 0 36px 70px -34px rgba(28, 28, 33, .55), 0 2px 0 rgba(28, 28, 33, .04);
  --k-pill-sh: 0 22px 44px -20px rgba(28, 28, 33, .42), 0 1px 0 rgba(28, 28, 33, .04);
  --k-sans: var(--sans, 'DM Sans', -apple-system, system-ui, sans-serif);
  --k-serif: var(--serif, 'Fraunces', Georgia, serif);
  --k-mono: var(--mono, 'JetBrains Mono', ui-monospace, Menlo, monospace);
  --k-ease: cubic-bezier(.2, .8, .2, 1); --sp-push: cubic-bezier(.2, .8, .2, 1);
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center;
  font-family: var(--k-sans); color: var(--k-ink); -webkit-font-smoothing: antialiased;
}
:root[data-theme="dark"] .kvl {
  --k-panel: #1b1b1d; --k-ink: #f2f2f3; --k-ink-2: #c2c2c8; --k-on-ink: #141417; --k-bar: rgba(20, 20, 23, .6);
  --k-hair: rgba(255, 255, 255, .09); --k-hair-2: rgba(255, 255, 255, .16); --k-accent: #a99af2; --k-raised: #2a2a2e; --k-sunk: #242427; --k-media: #1a1a1c;
  --k-frame-sh: 0 0 0 1px rgba(255, 255, 255, .07), 0 40px 80px -36px rgba(0, 0, 0, .9);
  --k-pill-sh: 0 0 0 1px rgba(255, 255, 255, .04), 0 22px 44px -20px rgba(0, 0, 0, .8);
}
.kvl *, .kvl *::before, .kvl *::after { box-sizing: border-box; }
.kvl button { font: inherit; color: inherit; border: 0; background: none; padding: 0; margin: 0; cursor: pointer; }
.kvl p { margin: 0; }
.kvl svg { display: block; }

.kvl .ss { display: grid; justify-items: center; gap: 46px; padding-bottom: 8px; }
.kvl .ss-frame { --r: 26px; position: relative; width: min(268px, 68vw); aspect-ratio: 9 / 16; touch-action: pan-y; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.kvl .ss-media { position: absolute; inset: 0; border-radius: var(--r); overflow: hidden; background: var(--k-media); transform-origin: 50% 50%; box-shadow: var(--k-frame-sh); isolation: isolate; transition: transform .18s var(--sp-push); }
.kvl .ss-frame:active .ss-media { transform: scale(.985); }
.kvl .ss-slide { position: absolute; inset: 0; }
.kvl .ss-slide img, .kvl .ss-slide video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; }
.kvl .ss-slide video { inset: 1px; width: calc(100% - 2px); height: calc(100% - 2px); }
.kvl .ss-media::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 18%; z-index: 3; background: linear-gradient(to bottom, rgba(0, 0, 0, .34), rgba(0, 0, 0, 0)); pointer-events: none; }
.kvl .ss-scrim { position: absolute; left: 0; right: 0; bottom: 0; height: 50%; z-index: 3; background: linear-gradient(to top, rgba(0, 0, 0, .7) 0, rgba(0, 0, 0, .34) 46%, rgba(0, 0, 0, 0)); pointer-events: none; }
.kvl .ss-dim { position: absolute; inset: 0; z-index: 3; background: rgba(14, 14, 18, .46); opacity: 0; transition: opacity .3s var(--k-ease); pointer-events: none; }
.kvl .ss-ui { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.kvl .ss-meta { position: absolute; left: 13px; right: 13px; bottom: 42px; display: grid; gap: 3px; color: #fff; transition: opacity .2s; }
.kvl .ss-frame[data-phase="char"] .ss-meta { opacity: 0; }
.kvl .ss-show { font-family: var(--k-serif); font-weight: 600; font-size: 20px; letter-spacing: -.012em; line-height: 1.04; text-wrap: balance; text-shadow: 0 1px 12px rgba(0, 0, 0, .25); }
.kvl .ss-ep { font-size: 11px; line-height: 1.3; opacity: .88; }
.kvl .ss-btns { position: absolute; right: 10px; top: 24px; display: flex; gap: 6px; pointer-events: auto; }
.kvl .ss-btn { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(20, 20, 24, .5); color: #fff; transition: transform .09s var(--k-ease); }
.kvl .ss-btn:active { transform: scale(.94); }
.kvl .ss-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.kvl .ss-card { position: absolute; z-index: 5; left: 10px; top: 16px; display: flex; align-items: center; gap: 8px; max-width: calc(100% - 100px); padding: 5px 12px 5px 5px; border-radius: 999px; background: var(--k-panel); color: var(--k-ink); box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .55); text-align: left; transform-origin: 0 50%; pointer-events: none; }
.kvl .ss-card-tx { display: grid; min-width: 0; line-height: 1.12; }
.kvl .ss-card-k { font-family: var(--k-mono); font-size: 8.5px; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; color: var(--k-accent); }
.kvl .ss-card-face { width: 38px; height: 38px; flex: none; border-radius: 50%; object-fit: cover; background: var(--k-sunk); }
.kvl .ss-card-n { font-family: var(--k-serif); font-weight: 600; font-size: 15px; letter-spacing: -.01em; }
.kvl .ss-card-l { font-size: 10px; color: var(--k-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.kvl .ss-picks { display: flex; flex-wrap: nowrap; justify-content: safe center; gap: 5px; max-width: 100%; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.kvl .ss-picks::-webkit-scrollbar { display: none; }
@media (max-width: 360px) { .kvl .ss-pk img { display: none; } .kvl .ss-pk { padding: 3px 12px; } }
.kvl .ss-pk { --p: 0; position: relative; flex: none; display: inline-flex; align-items: center; gap: 5px; min-height: 40px; padding: 3px 10px 3px 3px; border-radius: 999px; border: 1px solid var(--k-hair-2); background: var(--k-panel); color: var(--k-ink); font: 600 12.5px/1 var(--k-sans); cursor: pointer; overflow: hidden; isolation: isolate; transition: border-color .15s, transform .09s var(--k-ease); -webkit-tap-highlight-color: transparent; }
.kvl .ss-pk img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; background: var(--k-sunk); }
.kvl .ss-pk::before { content: ''; position: absolute; left: 14px; right: 14px; bottom: 5px; height: 2px; border-radius: 2px; background: var(--k-bar); transform: scaleX(var(--p)); transform-origin: 0 50%; opacity: 0; }
.kvl .ss-pk.on { border-color: var(--k-ink); color: var(--k-on-ink); background: var(--k-ink); }
.kvl .ss-pk.on::before { opacity: 1; }
@media (hover: hover) { .kvl .ss-pk:hover { border-color: var(--k-ink); } }
.kvl .ss-pk:active { transform: scale(.96); }
.kvl .ss-pk:focus-visible { outline: 2px solid var(--k-ink); outline-offset: 2px; }

.kvl .ss-nav { position: absolute; z-index: 7; top: 50%; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%; display: grid; place-items: center; background: rgba(20, 20, 24, .4); color: #fff; opacity: .9; transition: opacity .15s, transform .09s var(--k-ease); }
.kvl .ss-nav.prev { left: 7px; }
.kvl .ss-nav.next { right: 7px; }
.kvl .ss-nav:active { transform: scale(.92); }
.kvl .ss-nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.kvl .hp, .kvl .hp-probe { position: absolute; z-index: 6; left: -22px; right: -22px; bottom: -26px; }
/* A hidden copy of the pill that hero.js measures every prompt in, so the real one reserves the tallest, up to three lines. */
.kvl .hp-probe { z-index: -1; visibility: hidden; pointer-events: none; }
.kvl .hp-card { display: flex; align-items: center; gap: 8px; padding: 7px 7px 7px 8px; border-radius: 22px; background: var(--k-panel); color: var(--k-ink); border: 1px solid var(--k-hair); box-shadow: var(--k-pill-sh); transition: border-color .2s; }
.kvl .hp-faces { display: inline-flex; flex: none; }
.kvl .hp-src { display: none; flex: none; align-items: center; gap: 4px; max-width: 42%; padding: 4px 8px 4px 6px; border-radius: 999px; background: var(--k-raised); font-size: 10.5px; font-weight: 600; color: var(--k-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kvl .ss-frame[data-phase="char"] .hp-src { display: inline-flex; }
.kvl .ss-frame[data-phase="char"] .hp-faces { display: none; }
.kvl .hp-face { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; background: var(--k-sunk); box-shadow: 0 0 0 1.5px var(--k-raised); }
.kvl .hp-face + .hp-face { margin-left: -6px; }
.kvl .hp-t { flex: 1; min-width: 0; min-height: calc(2 * 1.3em); max-height: calc(3 * 1.3em); display: flex; flex-direction: column; justify-content: center; padding: 0 2px; font-size: var(--hp-font, 12.5px); line-height: 1.3; color: var(--k-ink); text-wrap: balance; }
.kvl .hp-line { display: block; max-height: calc(3 * 1.3em); overflow: hidden; }
/* Natural probe height must reveal overflow; the live pill never exceeds three lines. */
.kvl .hp-probe .hp-t { min-height: 0; max-height: none; }
.kvl .hp-probe .hp-line { max-height: none; overflow: visible; }
.kvl .hp-line.is-faded { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 1.3em), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 1.3em), transparent); }
.kvl .hp-caret { display: inline-block; width: 2px; height: .9em; margin-left: 1px; vertical-align: -.1em; background: var(--k-accent); opacity: 0; visibility: hidden; }
.kvl .hp-send { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--k-ink); color: var(--k-on-ink); }

@media (min-width: 900px) {
  .kvl .ss { gap: 54px; padding-bottom: 12px; }
  .kvl .ss-frame { --r: 34px; width: auto; height: min(600px, calc(var(--kv-h, 750px) - 150px)); }
  .kvl .ss-show { font-size: 28px; }
  .kvl .ss-ep { font-size: 12.5px; }
  .kvl .ss-meta { left: 20px; right: 20px; bottom: 58px; gap: 4px; }
  .kvl .ss-btns { right: 14px; top: 28px; }
  .kvl .ss-btn { width: 34px; height: 34px; }
  .kvl .hp, .kvl .hp-probe { left: -64px; right: -64px; bottom: -30px; }
  .kvl .hp-card { gap: 12px; padding: 10px 10px 10px 12px; border-radius: 26px; }
  .kvl .hp-src { font-size: 12.5px; padding: 5px 10px 5px 8px; }
  .kvl .ss-card { left: 16px; top: 32px; gap: 10px; padding: 6px 16px 6px 6px; }
  .kvl .ss-card-face { width: 48px; height: 48px; }
  .kvl .ss-card-k { font-size: 9.5px; }
  .kvl .ss-card-n { font-size: 19px; }
  .kvl .ss-card-l { font-size: 11.5px; }
  .kvl .ss-pk { min-height: 44px; gap: 7px; font-size: 14.5px; padding: 4px 14px 4px 4px; }
  .kvl .ss-picks { gap: 6px; }
  .kvl .ss-pk img { width: 34px; height: 34px; }
  .kvl .ss-nav { width: 38px; height: 38px; margin-top: -19px; opacity: .55; }
  @media (hover: hover) { .kvl .ss-frame:hover .ss-nav { opacity: 1; } }
  .kvl .ss-nav.prev { left: 12px; }
  .kvl .ss-nav.next { right: 12px; }
  .kvl .hp-face { width: 26px; height: 26px; }
  .kvl .hp-face + .hp-face { margin-left: -7px; }
  .kvl .hp-t { font-size: var(--hp-font, 16px); }
  .kvl .hp-send { width: 34px; height: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .kvl .ss-dim, .kvl .ss-meta { transition: none; }
}

.kvl .ss-slide video { opacity: 0; transition: opacity .28s var(--k-ease); }
.kvl .ss-slide video.on { opacity: 1; }

.kvl .ss-card, .kvl .hp, .kvl .hp * { cursor: default; }
.kvl .hp-send { background: var(--k-hair-2); color: var(--k-ink-2); }

.kvl .ss-nav { width: 40px; height: 40px; margin-top: -20px; background: rgba(14, 14, 18, .62); opacity: 1; box-shadow: 0 0 0 1px rgba(255, 255, 255, .18), 0 6px 16px -6px rgba(0, 0, 0, .5); }
@media (hover: hover) { .kvl .ss-nav:hover { background: rgba(14, 14, 18, .8); } }
@media (min-width: 900px) { .kvl .ss-nav { width: 42px; height: 42px; margin-top: -21px; opacity: .9; } .kvl .ss-frame:hover .ss-nav { opacity: 1; } }

.kvl .ss-bigplay { position: absolute; z-index: 7; left: 50%; top: 44%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; display: grid; place-items: center; background: rgba(14, 14, 18, .6); color: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25), 0 10px 24px -8px rgba(0, 0, 0, .6); }
.kvl .ss-bigplay svg { width: 22px; height: 22px; margin-left: 3px; }
.kvl .ss-bigplay[hidden] { display: none; }

@media (max-width: 899px) {
  .kvl .ss-frame { width: min(268px, 68vw, calc(58svh * 9 / 16)); }
  .kvl .ss-pk { min-height: 44px; }
}

.kvl .ss-card-k { font-size: 11px; letter-spacing: .06em; }
.kvl .ss-card-l { font-size: 11px; }
.kvl .hp-src { font-size: 11px; }

.kvl .ss-btn { position: relative; }
.kvl .ss-btn::after { content: ''; position: absolute; inset: -7px; border-radius: 50%; }

@media (max-width: 420px) {
  .kvl .ss-picks { gap: 4px; }
  .kvl .ss-pk { gap: 4px; padding: 3px 9px 3px 3px; font-size: 12px; }
  .kvl .ss-pk img { width: 24px; height: 24px; }
}

.kvl { --press-rel: linear(0, 0.0892 7.1%, 0.2680 14.3%, 0.4562 21.4%, 0.6189 28.6%, 0.7458 35.7%, 0.8380 42.9%, 0.9015 50.0%, 0.9432 57.1%, 0.9694 64.3%, 0.9850 71.4%, 0.9938 78.6%, 0.9984 85.7%, 1.0006 92.9%, 1 100%); }
.kvl .ss-pk, .kvl .ss-nav, .kvl .ss-btn, .kvl .ss-bigplay { touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: transform 180ms var(--press-rel), opacity 180ms var(--press-rel), background-color .15s, border-color .15s; }
.kvl .ss-pk:active, .kvl .ss-btn:active, .kvl .ss-bigplay:active { transform: scale(.97); opacity: .8; transition: none; }
.kvl .ss-nav:active { transform: scale(.97); opacity: .8; transition: none; }
.kvl .ss-frame { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.kvl .ss-frame:active .ss-media { transform: none; }
.kvl .ss-media img, .kvl .ss-media video { -webkit-touch-callout: none; -webkit-user-drag: none; pointer-events: none; }
@media (hover: none) { .kvl .ss-nav { display: none; } }

.kvl .ss-dots { position: absolute; z-index: 5; left: 50%; top: calc(100% + 34px); transform: translateX(-50%); display: flex; gap: 6px; pointer-events: none; }
.kvl .ss-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--k-hair-2); }
.kvl .ss-dot-on { position: absolute; left: 0; top: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--k-ink); }
@media (min-width: 900px) { .kvl .ss-dots { top: calc(100% + 40px); } }

.kvl .ss-card { max-width: calc(100% - 60px); }
.kvl .ss-card-l { overflow: visible; text-overflow: clip; }
@media (max-width: 899px) {
  .kvl .ss-card-k, .kvl .ss-card .l-from { display: none; }
}

.kvl .ss-dots { display: none; }
@media (max-width: 640px) { .kvl .ss-ep, .kvl .hp-src { font-size: 12px; } }

:root[data-theme="dark"]:not([data-dark="v1"]) .kvl { --k-panel: #1e1f23; --k-raised: #26272c; --k-sunk: #232428; --k-media: #1b1c20; --k-hair: rgba(255, 255, 255, .1); --k-hair-2: rgba(255, 255, 255, .18); --k-ink-2: #c6c6cc;
  --k-frame-sh: 0 0 0 1px rgba(255, 255, 255, .08), 0 34px 80px -34px rgba(0, 0, 0, .85); --k-pill-sh: 0 0 0 1px rgba(255, 255, 255, .06), 0 22px 44px -20px rgba(0, 0, 0, .75); }