:root{--kb-case:linear-gradient(180deg, #eef0f5, #dce0e9);--kb-ring:#0b0d1412;--kb-drop:0 50px 90px -50px #1e185a73;--cap-a:#fff;--cap-b:#e7eaf1;--cap-edge:#bfc5d1;--cap-ink:#394052;--cap-hi:#fffffff2;--cap-drop:#1e223c29;--t-a:96%;--t-b:87%;--t-c:.085;--t-l:42%;--t-lc:.2;--t-g:.5;--t-r:.65;--t-tg:0;--d-a:90%;--d-b:81%;--d-c:.12;--d-ink:#10131c}.dark{--kb-case:linear-gradient(180deg, #1b1e26, #0c0e13);--kb-ring:#ffffff12;--kb-drop:0 60px 100px -50px #000000e6;--cap-a:#2b2f3a;--cap-b:#1a1d25;--cap-edge:#050608;--cap-ink:#aeb6c6;--cap-hi:#ffffff1a;--cap-drop:#00000080;--t-a:31%;--t-b:22%;--t-c:.05;--t-l:88%;--t-lc:.15;--t-g:.75;--t-r:.5;--t-tg:.85;--d-a:56%;--d-b:42%;--d-c:.16;--d-ink:#fff}.kb-wrap{container-type:inline-size}.kbh{width:100%;aspect-ratio:var(--cols) / var(--rows);--u:calc(100cqw / var(--cols));--kgap:.045;position:relative}.kk{left:calc(var(--x) * var(--u));top:calc(var(--y) * var(--u));width:calc(var(--w) * var(--u));height:calc(var(--h) * var(--u));padding:calc(var(--u) * var(--kgap));--hue:calc(195 + var(--hx) * 90);position:absolute}.kk-cap{width:100%;height:100%;padding:calc(var(--u) * .12) calc(var(--u) * .14);border-radius:calc(var(--u) * .12);background:linear-gradient(180deg, var(--cap-a), var(--cap-b));box-shadow:inset 0 1px 0 var(--cap-hi), 0 calc(var(--u) * .07) 0 var(--cap-edge), 0 calc(var(--u) * .1) calc(var(--u) * .16) var(--cap-drop);justify-content:flex-start;align-items:flex-start;transition:transform 70ms ease-out,box-shadow .18s;display:flex;position:relative}.kk-cap:before{content:"";inset:calc(var(--u) * .05) calc(var(--u) * .07) calc(var(--u) * .11);border-radius:calc(var(--u) * .09);pointer-events:none;background:linear-gradient(#ffffff0f,#fff0 70%);position:absolute;box-shadow:inset 0 1px 1px #00000012}.kk.iso .kk-cap{clip-path:polygon(0 0,100% 0,100% 100%,17.9% 100%,17.9% 47.4%,0 47.4%)}.kk-l{color:var(--cap-ink);font:600 calc(var(--u) * .23) / 1 var(--font-sans);white-space:nowrap;pointer-events:none;transition:color .18s,text-shadow .18s;position:relative}.kk.s .kk-l{font-size:calc(var(--u) * .145);letter-spacing:.01em}.kk.fn .kk-l{font-size:calc(var(--u) * .18)}.mk{pointer-events:none;display:none;position:absolute}.kk.is-tested .kk-cap{background:linear-gradient(180deg, oklch(var(--t-a) var(--t-c) var(--hue)), oklch(var(--t-b) var(--t-c) var(--hue)));box-shadow:inset 0 1px 0 var(--cap-hi), inset 0 0 0 1px oklch(72% .17 var(--hue) / var(--t-r)), 0 calc(var(--u) * .07) 0 var(--cap-edge), 0 0 calc(var(--u) * .55) calc(var(--u) * -.04) oklch(70% .2 var(--hue) / var(--t-g))}.kk.is-tested .kk-l{color:oklch(var(--t-l) var(--t-lc) var(--hue));text-shadow:0 0 calc(var(--u) * .2) oklch(72% .2 var(--hue) / var(--t-tg))}.kk.is-tested .mk{top:calc(var(--u) * .15);right:calc(var(--u) * .15);width:calc(var(--u) * .1);height:calc(var(--u) * .1);background:oklch(68% .2 var(--hue));box-shadow:0 0 calc(var(--u) * .16) oklch(72% .22 var(--hue));border-radius:50%;font-size:0;display:block}.kk.is-down .mk{transform:translateY(calc(var(--u) * .05))}.kk.is-down .kk-cap{transform:translateY(calc(var(--u) * .05));background:linear-gradient(180deg, oklch(var(--d-a) var(--d-c) var(--hue)), oklch(var(--d-b) var(--d-c) var(--hue)));box-shadow:inset 0 1px 0 var(--cap-hi), 0 calc(var(--u) * .02) 0 var(--cap-edge), 0 0 calc(var(--u) * .9) calc(var(--u) * .04) oklch(70% .22 var(--hue) / .8)}.kk.is-down .kk-l{color:var(--d-ink);text-shadow:none}.kk.is-flagged .kk-cap{box-shadow:inset 0 0 0 calc(var(--u) * .05) var(--g-amber), 0 calc(var(--u) * .07) 0 var(--cap-edge), 0 0 calc(var(--u) * .6) 0 color-mix(in srgb, var(--g-amber) 50%, transparent)}.kk.is-flagged .kk-l{color:var(--g-warn);text-shadow:none}.kk.is-flagged .mk{top:calc(var(--u) * .1);right:calc(var(--u) * .1);width:calc(var(--u) * .26);height:calc(var(--u) * .26);background:var(--g-amber);box-shadow:0 0 calc(var(--u) * .16) color-mix(in srgb, var(--g-amber) 60%, transparent);color:var(--g-amber-ink);font:700 calc(var(--u) * .18) / 1 var(--font-sans);border-radius:50%;place-items:center;display:grid}.kk.nt .kk-cap{box-shadow:none;outline:1px dashed var(--g-rule-2);outline-offset:-1px;background:0 0}.kk.nt .kk-cap:before{display:none}.kk.nt .kk-l{color:var(--g-ink-3)}.kk.is-target .kk-cap{outline:calc(var(--u) * .045) dashed var(--g-accent);outline-offset:calc(var(--u) * .02)}.kk.is-snap .kk-cap{outline:calc(var(--u) * .05) solid oklch(68% .19 var(--hue));outline-offset:calc(var(--u) * -.01)}.kb-case[data-role=area]{cursor:pointer}.kb-case[data-role=area]:focus{outline:none}.kb-case[data-role=area]:focus-visible,.kb-case[data-role=area].border-brand-500{outline:2px solid var(--g-accent);outline-offset:6px}@media (width<=720px){.kb-case[data-role=area]{overflow-x:auto}.kb-case[data-role=area] .kb-wrap{min-width:640px}}.kb-stage{isolation:isolate;position:relative}.kb-stage:before{content:"";z-index:-1;pointer-events:none;opacity:var(--uglow,.5);background:radial-gradient(closest-side, color-mix(in srgb, var(--g-cyan) 50%, transparent), transparent) 0 50% / 46% 100% no-repeat, radial-gradient(closest-side, color-mix(in srgb, var(--g-blue) 50%, transparent), transparent) 50% 50% / 46% 100% no-repeat, radial-gradient(closest-side, color-mix(in srgb, var(--g-violet) 55%, transparent), transparent) 100% 50% / 46% 100% no-repeat;transition:opacity .6s;position:absolute;inset:30% 1% -14%}.kb-case{border:1px solid var(--kb-ring);border-top-color:var(--cap-hi);background:var(--kb-case);box-shadow:var(--kb-drop);border-radius:clamp(12px,1.8vw,26px);padding:clamp(7px,1.5vw,20px);position:relative}@media (prefers-reduced-motion:reduce){.kk-cap{animation:none!important}}