.kd-stage{--kd-cycle:9s;background:radial-gradient(90% 70% at 50% 0%, #fff, transparent 75%), color-mix(in srgb, var(--surface) 70%, var(--paper));box-shadow:0 30px 60px -40px rgb(var(--shadow-rgb) / .35);border:1px solid #00000012;border-radius:24px;padding:40px 28px 28px}@media (min-width:640px){.kd-stage{padding:56px 56px 32px}}.kd-deck{box-shadow:inset 0 1px 0 #ffffffb3, inset 0 -1px 0 #0000000f, 0 24px 50px -28px rgb(var(--shadow-rgb) / .45);background:linear-gradient(#e9e6e1,#d9d5ce);border-radius:22px;justify-self:center;padding:18px}.kd-key{width:64px;height:64px;color:var(--ink);box-shadow:0 4px 0 #c9c4bb, 0 6px 10px -4px rgb(var(--shadow-rgb) / .35), inset 0 1px 0 #fff;animation-duration:var(--kd-cycle);background:linear-gradient(#fff,#f6f4f0);border-radius:12px;flex-direction:column;justify-content:center;align-items:center;animation-timing-function:ease-out;animation-iteration-count:infinite;display:flex;position:relative}.kd-key-wide{justify-content:space-between;align-items:flex-start;width:104px;padding:9px 12px}.kd-symbol{font-size:24px;font-weight:500;line-height:1}.kd-key-wide .kd-symbol{font-size:18px}.kd-label{color:var(--ink-soft);font-size:11px}@keyframes kd-mod{0%,4%,29%,37%,62%,70%,95%,to{color:var(--ink);box-shadow:0 4px 0 #c9c4bb, 0 6px 10px -4px rgb(var(--shadow-rgb) / .35), inset 0 1px 0 #fff;transform:translateY(0)}7%,26%,40%,59%,73%,92%{color:var(--accent);box-shadow:0 1px 0 #c9c4bb, 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent), inset 0 1px 0 #fff;transform:translateY(3px)}}@keyframes kd-k2{0%,9%,27%,to{color:var(--ink);box-shadow:0 4px 0 #c9c4bb, 0 6px 10px -4px rgb(var(--shadow-rgb) / .35), inset 0 1px 0 #fff;transform:translateY(0)}11%,24%{color:var(--accent);box-shadow:0 1px 0 #c9c4bb, 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent), inset 0 1px 0 #fff;transform:translateY(3px)}}@keyframes kd-k1{0%,42%,60%,to{color:var(--ink);box-shadow:0 4px 0 #c9c4bb, 0 6px 10px -4px rgb(var(--shadow-rgb) / .35), inset 0 1px 0 #fff;transform:translateY(0)}44%,57%{color:var(--accent);box-shadow:0 1px 0 #c9c4bb, 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent), inset 0 1px 0 #fff;transform:translateY(3px)}}@keyframes kd-k3{0%,75%,93%,to{color:var(--ink);box-shadow:0 4px 0 #c9c4bb, 0 6px 10px -4px rgb(var(--shadow-rgb) / .35), inset 0 1px 0 #fff;transform:translateY(0)}77%,90%{color:var(--accent);box-shadow:0 1px 0 #c9c4bb, 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent), inset 0 1px 0 #fff;transform:translateY(3px)}}.kd-mod{animation-name:kd-mod}.kd-k1{animation-name:kd-k1}.kd-k2{animation-name:kd-k2}.kd-k3{animation-name:kd-k3}.kd-screen{aspect-ratio:16/10;width:100%;box-shadow:0 28px 60px -30px rgb(var(--shadow-rgb) / .6);background:linear-gradient(140deg,#ffc3a3 0%,#ff9a7a 45%,#e8695a 100%);border:6px solid #1f1d1b;border-radius:14px;position:relative;overflow:hidden}.kd-menubar{color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff38;justify-content:space-between;align-items:center;height:16px;padding:0 9px;font-size:8.5px;display:flex}.kd-window{background:#fffcf8;border-radius:8px;width:62%;height:58%;padding:9px 11px;position:absolute;top:22%;left:16%;box-shadow:0 14px 30px -12px #78281480}.kd-lines,.kd-ocr{flex-direction:column;gap:9px;margin-top:14px;display:flex}.kd-lines>span,.kd-ocr>span{background:#1c1a171f;border-radius:999px;height:6px;display:block}.kd-window .kd-ocr{margin-top:21px;position:absolute;inset:9px 11px auto}.kd-ocr>span{background:color-mix(in srgb, var(--accent) 30%, transparent);outline:1px solid color-mix(in srgb, var(--accent) 55%, transparent);height:10px;margin:-2px 0}.kd-scene{opacity:0;pointer-events:none;animation:var(--kd-cycle) infinite;position:absolute;inset:0}.kd-window .kd-scene{position:absolute}@keyframes kd-scene-a{0%,8%{opacity:0}11%,30%{opacity:1}33%,to{opacity:0}}@keyframes kd-scene-b{0%,41%{opacity:0}44%,63%{opacity:1}66%,to{opacity:0}}@keyframes kd-scene-c{0%,74%{opacity:0}77%,96%{opacity:1}99%,to{opacity:0}}.kd-scene-a{animation-name:kd-scene-a}.kd-scene-b{animation-name:kd-scene-b}.kd-scene-c{animation-name:kd-scene-c}.kd-screen>.kd-scene-a{background:#0000002e}.kd-marquee{animation:kd-marquee var(--kd-cycle) infinite cubic-bezier(.22, 1, .36, 1);background:#ffffff24;border:1.5px dashed #fff;position:absolute;top:30%;left:24%;box-shadow:0 0 0 1px #00000014}@keyframes kd-marquee{0%,11%{width:0;height:0}24%,to{width:44%;height:40%}}.kd-window-hit{background:#0a84ff2e;border-radius:8px;width:62%;height:58%;position:absolute;top:22%;left:16%;box-shadow:0 0 0 2px #0a84ff}.kd-pill,.kd-toast{color:#fff;white-space:nowrap;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#1c1a17db;border-radius:999px;padding:4px 9px;font-size:9.5px;font-weight:500;position:absolute}.kd-pill{top:56%;left:52%}.kd-toast{bottom:8%;left:50%;transform:translate(-50%)}.kd-captions{text-align:center;margin-top:32px;font-size:15px;display:grid}.kd-caption{opacity:0;animation:var(--kd-cycle) infinite;grid-area:1/1}.kd-caption.kd-scene-a{animation-name:kd-scene-a}.kd-caption.kd-scene-b{animation-name:kd-scene-b}.kd-caption.kd-scene-c{animation-name:kd-scene-c}@media (prefers-reduced-motion:reduce){.kd-key,.kd-scene,.kd-marquee,.kd-caption{animation:none}.kd-scene-a,.kd-caption.kd-scene-a{opacity:1}.kd-marquee{width:44%;height:40%}}
