/* Native, self-contained demo. No global selectors, external assets or app-form styles. */
.kd-demo{--kd-ink:#edf1fa;--kd-muted:#bbc8db;--kd-line:#3a4963;--kd-panel:#142136;--kd-accent:#c9f697;color:var(--kd-ink);background:linear-gradient(150deg,#16243a,#0d1627);border:1px solid var(--kd-line);border-radius:18px;padding:18px;min-width:0;font:400 .9375rem/1.6 Inter,system-ui,sans-serif;overflow-wrap:anywhere;isolation:isolate}
.kd-demo *{box-sizing:border-box}
.kd-demo [hidden]{display:none!important}
.kd-demo button,.kd-demo select,.kd-demo input{font:inherit}
.kd-demo button{border:1px solid #51627e;border-radius:7px;padding:7px 11px;background:#21314b;color:#edf1fa;cursor:pointer;line-height:1.4;font-size:.875rem;min-height:36px;transition:background .15s,border-color .15s}
.kd-demo button:hover{border-color:#c4a9f4;background:#2a3d5b}
.kd-demo button:disabled{opacity:.55;cursor:not-allowed}
.kd-demo :is(button,input,select,summary,a):focus-visible{outline:2px solid #c6aff5;outline-offset:3px}
.kd-demo .kd-heading{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.kd-demo .kd-heading>span:first-child{display:flex;align-items:center;gap:8px;flex:1}
.kd-demo .kd-heading svg{width:23px;height:23px;fill:none;stroke:#ccb3f8;stroke-width:1.4;flex:none}
.kd-demo .kd-heading strong{font-weight:600;font-size:1rem}
.kd-demo .kd-badge{font-size:.75rem;border:1px solid #52627d;border-radius:99px;padding:2px 8px;color:#d3def0;white-space:nowrap}
.kd-demo p{margin:12px 0;color:var(--kd-muted);font-size:.875rem;line-height:1.65}
.kd-demo .kd-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;counter-reset:kd-step;list-style:none;padding:0;margin:16px 0 10px}
.kd-demo .kd-steps li{font-size:.75rem;color:#c1cee2;line-height:1.5;padding:8px;border:1px solid #354661;border-radius:8px;background:#16233a}
.kd-demo .kd-steps li::before{counter-increment:kd-step;content:counter(kd-step,decimal-leading-zero);display:block;color:#c7acf7;font:500 .75rem ui-monospace,monospace;margin-bottom:3px}
.kd-demo .kd-disclaimer{font-size:.8125rem;color:#c2ccde}
.kd-demo .kd-laptop{max-width:912px;width:100%;padding:18px 16px 0;margin:0 auto}
.kd-demo .kd-lid{background:linear-gradient(#1b2740,#121b30);border-radius:16px 16px 0 0;padding:12px 12px 0;max-width:780px;margin:0 auto;border:1px solid #ffffff29;border-bottom:0}
.kd-demo .kd-screen{position:relative;height:570px;border-radius:7px 7px 0 0;overflow:hidden;background:radial-gradient(80% 70% at 75% 0%,#27418f,transparent 70%),linear-gradient(160deg,#0f2150,#07111f 70%);color:#10182a}
.kd-demo .kd-menubar{position:absolute;inset:0 0 auto;height:25px;background:#ffffff1f;backdrop-filter:blur(8px);color:#fff;font-size:.75rem;display:flex;align-items:center;padding:0 12px;gap:14px;z-index:6;white-space:nowrap}
.kd-demo .kd-system{margin-inline-start:auto;opacity:.9;display:flex;gap:14px;align-items:center}
.kd-demo .kd-system>span{display:inline-flex;gap:5px;align-items:center}
.kd-demo .kd-network>span[data-demo-wifi],.kd-demo .kd-network>span[data-demo-disconnected]{display:inline-flex;align-items:center}
.kd-demo .kd-network[data-state=offline]{color:#ff9d8c}
.kd-demo .kd-battery .kd-fa-bolt{color:#7dffa8}
.kd-demo .kd-fa{display:inline-block;height:.95em;width:1em;fill:currentColor;stroke:none;flex:none;vertical-align:-.125em;overflow:visible}
.kd-demo .kd-fa-wifi,.kd-demo .kd-fa-link-slash{width:1.25em}.kd-demo .kd-fa-keyboard,.kd-demo .kd-fa-battery-full{width:1.125em}.kd-demo .kd-fa-bolt{width:.875em}
.kd-demo .kd-base{position:relative;height:14px;background:linear-gradient(#c9cedf,#8d95b0);border-radius:0 0 20px 20px;max-width:880px;margin:0 auto 14px}
.kd-demo .kd-led{position:absolute;right:14%;top:3px;width:34px;height:4px;border-radius:2px;background:#3ddc97;box-shadow:0 0 8px #3ddc97}
.kd-demo .kd-window{position:absolute;background:#fff;border-radius:11px;box-shadow:0 18px 50px #0008;overflow:hidden;font-size:.8125rem;border:0;color:#10182a}
.kd-demo [data-demo-view=activation]{left:50%;top:50%;transform:translate(-50%,-52%);width:min(370px,92%)}
.kd-demo [data-demo-view=app]{left:50%;top:32px;transform:translateX(-50%);width:min(340px,94%)}
.kd-demo .kd-result-window{left:4%;top:34px;width:92%;height:420px;z-index:5}
.kd-demo .kd-titlebar{background:#eceff8;padding:8px 11px;font-size:.75rem;font-weight:650;display:flex;align-items:center;gap:6px;color:#10182a}
.kd-demo .kd-dots{display:inline-flex;gap:6px;margin-inline-end:6px;flex:none}
.kd-demo .kd-dots i{width:10px;height:10px;border-radius:50%;background:#ff6b5e}
.kd-demo .kd-dots i:nth-child(2){background:#ffc244}.kd-demo .kd-dots i:nth-child(3){background:#3bd16f}
.kd-demo .kd-titlebar button{margin-inline-start:auto;font-size:.75rem;min-height:28px;padding:3px 7px}
.kd-demo .kd-window-body{padding:14px;color:#10182a}
.kd-demo .kd-window-body p{color:#4c5670;font-size:.8125rem;margin:0 0 10px}
.kd-demo .kd-window-body label{display:block;font-size:.75rem;font-weight:650;color:#4c5670;margin:9px 0 4px}
.kd-demo .kd-window-body input{display:block;width:100%;min-width:0;padding:8px 10px;border:1px solid #b7beda;border-radius:8px;background:#fff;color:#10182a;font-size:1rem;line-height:1.5;margin-top:4px;box-shadow:none}
.kd-demo .kd-window-body button{color:#fff;background:#2f5bdc;border-color:#2f5bdc;display:inline-flex;align-items:center;justify-content:center;gap:7px}
.kd-demo .kd-window-body button:hover{background:#254ebf}
.kd-demo .kd-activation-message{min-height:34px;margin:8px 0 2px;font-size:.78125rem;line-height:1.55}
.kd-demo .kd-activation-message[data-state=error]{color:#c2432e}
.kd-demo .kd-activation-actions{display:flex;gap:6px;justify-content:flex-end;margin-top:8px}
.kd-demo .kd-primary{padding:8px 16px;font-size:.84375rem;font-weight:650;min-height:36px;border-radius:10px}
.kd-demo [data-demo-view=app] .kd-window-body{padding:9px 11px}
.kd-demo .kd-app-tools{display:flex;gap:6px;align-items:center;margin-bottom:8px}
.kd-demo .kd-app-tools select{padding:5px 6px;border:1px solid #b7beda;border-radius:7px;background:#fff;color:#10182a;font-size:.75rem;min-width:0;max-width:100%}
.kd-demo .kd-app-tools button{padding:5px 11px;font-size:.78125rem;border-radius:8px;min-height:30px}
.kd-demo .kd-app-tools [data-demo-action=response],.kd-demo .kd-export button{color:#2f5bdc;background:transparent;border-color:#2f5bdc}
.kd-demo .kd-tool-spacer{flex:1}
.kd-demo .kd-grid{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));width:min(229px,100%);aspect-ratio:1;margin:0 auto;border:2px solid #000;border-radius:3px;overflow:hidden}
.kd-demo .kd-cell{display:flex;align-items:center;justify-content:center;font:600 .8125rem/1 system-ui,sans-serif;min-width:0;border:1px solid #7b8194;background:#fff;color:#10182a}
.kd-demo .kd-cell:nth-child(3n):not(:nth-child(9n)){border-inline-end:2px solid #000}
.kd-demo .kd-cell:nth-child(n+19):nth-child(-n+27),.kd-demo .kd-cell:nth-child(n+46):nth-child(-n+54){border-bottom:2px solid #000}
.kd-demo .kd-app-status{font-size:.71875rem;color:#17875a;margin-top:8px;text-align:center;font-weight:700}
.kd-demo .kd-app-status[data-state=locked]{color:#c2432e}
.kd-demo .kd-export{display:flex;gap:8px;align-items:center;justify-content:center;margin-top:8px;flex-wrap:wrap}
.kd-demo .kd-export button{padding:5px 11px;font-size:.78125rem;min-height:30px;border-radius:8px}
.kd-demo .kd-export small{font-size:.71875rem;color:#4c5670}
.kd-demo .kd-console{position:absolute;inset:auto 0 0;height:80px;background:#050d19;color:#b9d2ff;font:.75rem/1.55 ui-monospace,monospace;padding:8px 12px;overflow:auto;z-index:7;overflow-wrap:anywhere}
.kd-demo .kd-feedback{font-size:.875rem;line-height:1.65;border-inline-start:3px solid #bfa2ef;background:#bfa2ef0b;padding:10px 12px;margin:14px 0;color:#e1d5f8;min-height:65px}
.kd-demo .kd-feedback[data-state=ok]{border-color:#b4e894;color:#d5f0c0;background:#a5dc8b0b}
.kd-demo .kd-feedback[data-state=error]{border-color:#ffb0b9;color:#ffd0d6;background:#ffb0b90b}
.kd-demo .kd-controls{display:grid;gap:10px}
.kd-demo .kd-scenarios{min-width:0;margin:0 0 5px;padding:0;border:0}
.kd-demo .kd-scenarios legend{float:none;width:auto;font-size:.9375rem;font-weight:600;margin:0 0 10px;color:#e4eaf5;padding:0}
.kd-demo .kd-scenario-buttons{display:flex;flex-wrap:wrap;gap:9px}
.kd-demo .kd-scenario-buttons button{border-radius:99px;padding:9px 14px;background:transparent;border-color:#64718b;color:#dce5f5;text-align:start}
.kd-demo .kd-scenario-buttons button[aria-pressed=true]{background:#c9f697;border-color:#c9f697;color:#17231c;font-weight:650;box-shadow:0 0 0 2px #c9f69716}
.kd-demo .kd-scenario-buttons button[aria-pressed=false]:hover{border-color:#bba2ec;background:#bba2ec10}
.kd-demo .kd-control-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.kd-demo .kd-control-row>span{font:.8125rem ui-monospace,monospace;color:#c7d3e8}
.kd-demo summary{cursor:pointer;font-weight:550;font-size:.875rem;color:#d5c1f5;padding:8px 0}
.kd-demo .kd-more[open] summary{margin-bottom:5px}
.kd-demo .kd-policy{font-size:.8125rem}
.kd-demo .kd-code{border-top:1px solid #3b4860;margin-top:14px;padding-top:5px}
.kd-demo pre{max-width:100%;overflow:auto;border:1px solid #34425c;border-radius:8px;background:#070f1d;color:#dfe8fa;font:.8125rem/1.7 ui-monospace,monospace;padding:12px;margin:9px 0;white-space:pre;overflow-wrap:normal}
.kd-demo .kd-result-window pre{max-height:250px;font-size:.75rem}
.kd-demo code{font-family:ui-monospace,monospace;font-size:.875em;color:inherit;background:transparent}
.kd-demo pre code{font-size:inherit;white-space:inherit}
.kd-demo .code-token-keyword{color:#d6b3ff}.kd-demo .code-token-string{color:#a8d99c}.kd-demo .code-token-comment{color:#a5b1c5;font-style:italic}.kd-demo .code-token-number{color:#f6c177}.kd-demo .code-token-type{color:#8bd7d0}.kd-demo .code-token-function{color:#ffdfa1}.kd-demo .code-token-variable{color:#9ecbff}.kd-demo .code-token-operator{color:#e8b2ce}
.kd-demo .kd-code-tools,.kd-demo .kd-install{display:flex;align-items:center;gap:8px;justify-content:space-between;min-width:0;font-size:.8125rem}
.kd-demo .kd-install{flex-wrap:wrap;padding:10px 0}
.kd-demo .kd-install code{overflow-wrap:anywhere;font-size:.8125rem;flex:1;min-width:0}
.kd-demo .kd-links{display:flex;gap:16px;flex-wrap:wrap;border-top:1px solid #39475e;margin-top:14px;padding-top:13px;font-size:.875rem}
.kd-demo .kd-links a{display:inline-flex;align-items:center;gap:8px;color:#dac4ff;text-decoration:none}
.kd-demo .kd-links .sdk-publisher-icon{width:21px;height:21px}
.kd-demo .kd-links svg{width:21px;height:21px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round}
.kd-demo .kd-links a:hover{color:#c9f697;text-decoration:none}
.landing-page .license-playground{background:#f3f5f7}
.landing-page .license-playground .kd-demo{width:100%;max-width:none;margin:30px 0 0;padding:clamp(16px,2.5vw,30px)}
.kd-demo .kd-feedback,.kd-demo .kd-controls,.kd-demo .kd-policy{width:100%}
@media(prefers-reduced-motion:reduce){.kd-demo button{transition:none}}
/* On phones, let a larger activation window grow the display instead of clipping it. */
@media(max-width:680px){.kd-demo .kd-laptop{padding-inline:0}.kd-demo .kd-lid{padding:12px 7px 0}.kd-demo .kd-menubar{padding-inline:8px;gap:9px;min-height:25px;height:auto;flex-wrap:wrap}.kd-demo .kd-system{gap:9px}.kd-demo .kd-screen{height:570px}}
@media(max-width:480px){.kd-demo{padding:13px;border-radius:13px}.kd-demo .kd-heading strong{font-size:.9375rem}.kd-demo .kd-steps{grid-template-columns:repeat(2,minmax(0,1fr))}.kd-demo .kd-menubar{padding-block:5px;row-gap:5px}.kd-demo .kd-system{width:100%;margin:0;justify-content:space-between;gap:5px;font-size:.6875rem}.kd-demo .kd-screen{height:auto;min-height:600px;padding:70px 5px 95px}.kd-demo .kd-window{position:relative;left:auto;top:auto;transform:none;margin:0 auto}.kd-demo .kd-app-tools{gap:5px;flex-wrap:wrap}.kd-demo .kd-app-tools button{font-size:.71875rem;padding:5px 7px}.kd-demo .kd-control-row button{flex:1 1 auto}.kd-demo .kd-window-body{padding:12px}.kd-demo .kd-result-window{max-height:420px}}