:root {
    --kt-bg:#f3f1ed;
    --kt-panel:#ffffff;
    --kt-key:#e7e3da;
    --kt-key-border:#b9b4aa;
    --kt-text:#20252c;
    --kt-muted:#667085;
    --kt-accent:#62d7a4;
    --kt-gap:6px;
    --kt-row:50px;
}

.kt-app {
    box-sizing:border-box;
    width:100%;
    max-width:1400px;
    margin:30px auto;
    padding:24px;
    border-radius:22px;
    background:var(--kt-bg);
    color:var(--kt-text);
    border:1px solid #ddd9d1;
    box-shadow:0 8px 28px rgba(32,37,44,.08);
    font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}
.kt-app *{box-sizing:border-box}
.kt-toolbar{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.kt-control-group{display:flex;flex-direction:column;gap:7px}
.kt-control-group label{font-size:11px;font-weight:800;letter-spacing:.05em;color:#596273;text-transform:uppercase}
.kt-select,.kt-reset{height:44px;border:1px solid #c8c3bb;border-radius:10px;font:inherit}
.kt-select{min-width:170px;padding:0 36px 0 13px;background:#fff;color:var(--kt-text);}
.kt-reset{margin-left:auto;padding:0 18px;background:var(--kt-accent);border-color:var(--kt-accent);color:#07120d;font-weight:800;cursor:pointer}
.kt-status{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:20px}
.kt-status-card{padding:13px 15px;border:1px solid #d4d0c8;border-radius:13px;background:#fff;min-width:0}
.kt-status-label{display:block;margin-bottom:5px;color:#697386;font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.kt-status-card strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px}
.kt-keyboard-wrap{width:100%;overflow:visible;padding:18px;border:1px solid #c5c0b7;border-radius:18px;background:linear-gradient(145deg,#e7e4dd,#d2cec5);box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 10px 24px rgba(0,0,0,.12)}
.kt-keyboard{width:100%;display:block}
.kt-function-grid,
.kt-body-grid{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));gap:var(--kt-gap)}
.kt-function-grid{margin-bottom:14px}
.kt-body-grid{align-items:start}
.kt-main{grid-column:1 / span 15;min-width:0}
.kt-nav{grid-column:17 / span 3;min-width:0}
.kt-body-grid>div:last-child{grid-column:21 / span 4;min-width:0}

.kt-grid-row{display:grid;grid-template-columns:repeat(15,minmax(0,1fr));gap:var(--kt-gap);height:var(--kt-row);margin-bottom:var(--kt-gap)}
.kt-grid-row .kt-key{min-width:0;grid-column:span var(--kt-span)}
.kt-function-grid{grid-template-columns:repeat(24,minmax(0,1fr));}
.kt-function-grid .kt-key{min-width:0;height:38px}

.kt-nav-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--kt-gap);height:var(--kt-row);margin-bottom:var(--kt-gap)}
.kt-nav-row .kt-key,.kt-spacer{min-width:0}
.kt-spacer{display:block}

.kt-numpad-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--kt-gap)}
.kt-numpad-body{grid-template-rows:repeat(4,var(--kt-row));}
.kt-numpad-grid .kt-key{min-width:0}
.kt-key{
    width:100%;height:100%;padding:4px 5px;
    border:1px solid var(--kt-key-border);
    border-bottom-width:3px;border-radius:8px;
    background:linear-gradient(180deg,#f5f2eb,#d9d5cc);
    color:var(--kt-text);
    font:700 11px/1.1 ui-sans-serif,system-ui,sans-serif;
    display:flex;align-items:center;justify-content:center;text-align:center;
    cursor:pointer;user-select:none;
    transition:transform .07s ease,background .07s ease,border-color .07s ease,box-shadow .07s ease;
}
.kt-key:hover{border-color:#8e897f;background:linear-gradient(180deg,#faf7f0,#e2ded5)}
.kt-key:focus-visible{outline:2px solid var(--kt-accent);outline-offset:2px}.kt-reset:hover{filter:brightness(.97)}.kt-reset:focus,.kt-reset:active{background:var(--kt-accent)!important;border-color:var(--kt-accent)!important;color:#07120d!important;box-shadow:none!important;outline:none!important}.kt-reset:active{transform:none}.kt-select{appearance:none;-webkit-appearance:none;background-color:var(--kt-panel)!important;color:var(--kt-text)!important}.kt-select:focus{outline:2px solid var(--kt-accent);outline-offset:2px}
.kt-key.is-pressed{transform:translateY(2px);border-color:var(--kt-accent);background:var(--kt-accent);color:#07120d;box-shadow:0 0 0 2px rgba(98,215,164,.12),0 4px 15px rgba(98,215,164,.16)}
.kt-note{margin:9px 1px 0;color:#667085;font-size:11px;line-height:1.5}

.kt-layout-60 .kt-main{grid-column:1 / span 15}
.kt-layout-65 .kt-main{grid-column:1 / span 15}
.kt-layout-75 .kt-main{grid-column:1 / span 15}
.kt-layout-tkl .kt-main{grid-column:1 / span 15}

@media (max-width:1100px){
    .kt-keyboard-wrap{overflow-x:auto}
    .kt-keyboard{min-width:1050px}
}
@media (max-width:760px){
    .kt-app{padding:15px}
    .kt-status{grid-template-columns:1fr 1fr}
    .kt-reset{margin-left:0;width:100%}
}
@media (prefers-reduced-motion:reduce){.kt-key{transition:none}}


/* 96% compact keyboard: a single 24-unit physical coordinate system. */
.kt-layout-96{width:100%;}
.kt-96-grid{width:100%;}
.kt-96-function-grid{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));gap:var(--kt-gap);margin-bottom:var(--kt-gap);}
.kt-96-function-grid .kt-key{height:38px;min-width:0;}
.kt-96-body{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));gap:var(--kt-gap);align-items:start;}
.kt-96-main{grid-column:1 / span 15;min-width:0;}
.kt-96-main .kt-grid-row{grid-template-columns:repeat(15,minmax(0,1fr));}
.kt-96-nav{grid-column:17 / span 3;min-width:0;display:grid;grid-template-rows:repeat(5,var(--kt-row));gap:var(--kt-gap);}
.kt-96-nav-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--kt-gap);min-width:0;}
.kt-96-nav-row .kt-key{min-width:0;}
.kt-96-num{grid-column:21 / span 4;min-width:0;}
.kt-96-num-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(4,var(--kt-row));gap:var(--kt-gap);}
.kt-96-num-grid .kt-key{min-width:0;}

.kt-keyboard-wrap{border-color:#bdb7ad;background:linear-gradient(145deg,#f3f0e9,#d9d4cb);}
.kt-key{box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 2px 0 rgba(80,75,67,.22),0 3px 8px rgba(0,0,0,.10);}
.kt-key.is-pressed{background:var(--kt-accent);color:#07120d;border-color:#3da77f;box-shadow:0 0 0 2px rgba(98,215,164,.16),0 3px 8px rgba(0,0,0,.15);}