/* Keyboard Tools 1.0.9 — light, realistic keyboard styling.
   Keys are positioned by the JS layout engine in percentages of the board, and
   every size below is derived from --u (one key unit) so all layouts scale
   together without drifting out of alignment. */

.kt-app {
    --kt-page: #f4f5f7;
    --kt-panel: #ffffff;
    --kt-line: #dfe2e8;
    --kt-text: #1f242b;
    --kt-muted: #667085;
    --kt-accent: #3ecf9a;
    --kt-accent-ink: #06291d;
    --kt-accent-edge: #22a877;

    /* keycap palette */
    --kt-cap-light-top: #fbfbfc;
    --kt-cap-light-bot: #eceef2;
    --kt-cap-mod-top: #d7dbe2;
    --kt-cap-mod-bot: #c3c8d1;
    --kt-cap-edge: #a9afba;
    --kt-cap-ink: #2a3039;

    box-sizing: border-box;
    width: 100%;
    max-width: 1400px;
    margin: 30px auto;
    padding: 24px;
    border: 1px solid var(--kt-line);
    border-radius: 20px;
    background: var(--kt-page);
    color: var(--kt-text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    line-height: 1.4;
    box-shadow: 0 8px 28px rgba(31, 36, 43, .07);
}
.kt-app *, .kt-app *::before, .kt-app *::after { box-sizing: border-box; }

/* ---------- toolbar ---------- */
.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-app .kt-control-group label {
    margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--kt-muted);
}
.kt-app select.kt-select {
    -webkit-appearance: none; appearance: none;
    height: 44px; min-width: 180px; margin: 0; padding: 0 38px 0 14px;
    border: 1px solid #cdd2da; border-radius: 10px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center !important;
    color: var(--kt-text) !important;
    font: 600 14px/1 inherit; font-family: inherit; box-shadow: none; cursor: pointer;
}
.kt-app select.kt-select:focus { outline: 2px solid var(--kt-accent); outline-offset: 2px; }

/* Reset button: always the same green, whatever the theme does on hover/focus/active */
.kt-app button.kt-reset,
.kt-app button.kt-reset:hover,
.kt-app button.kt-reset:focus,
.kt-app button.kt-reset:focus-visible,
.kt-app button.kt-reset:active {
    -webkit-appearance: none; appearance: none;
    height: 44px; margin: 0 0 0 auto; padding: 0 22px;
    border: 1px solid var(--kt-accent-edge) !important; border-radius: 10px;
    background: var(--kt-accent) !important; color: var(--kt-accent-ink) !important;
    font: 700 14px/1 inherit; font-family: inherit; letter-spacing: 0; text-transform: none; text-shadow: none;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .45) inset; outline: none; cursor: pointer;
    transition: filter .12s ease;
}
.kt-app button.kt-reset:hover { filter: brightness(.96); }
.kt-app button.kt-reset:focus-visible { box-shadow: 0 0 0 3px rgba(62, 207, 154, .35) !important; }

/* ---------- status cards ---------- */
.kt-status { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 20px; }
.kt-status-card { min-width: 0; padding: 12px 15px; border: 1px solid var(--kt-line); border-radius: 12px; background: var(--kt-panel); }
.kt-status-label { display: block; margin-bottom: 4px; color: var(--kt-muted); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.kt-status-card strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 700; color: var(--kt-text); }

/* ---------- keyboard case ---------- */
.kt-keyboard-wrap {
    width: 100%; overflow-x: auto; overflow-y: hidden;
    padding: clamp(10px, 1.6vw, 22px);
    border: 1px solid #aeb4bf; border-radius: 18px;
    background: linear-gradient(160deg, #e9ecf1 0%, #d3d8e0 100%);
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, .85),
        inset 0 -3px 0 rgba(0, 0, 0, .06),
        0 14px 30px rgba(31, 36, 43, .16),
        0 2px 0 #9ea5b1;
}
.kt-keyboard {
    position: relative; width: 100%;
    container-type: inline-size;       /* lets keys size themselves in cqw */
}

/* ---------- keys ---------- */
.kt-app button.kt-key {
    --u: calc(100cqw / var(--kt-w));   /* one keyboard unit, in px */
    position: absolute; display: block;
    margin: 0; padding: calc(var(--u) * .05);
    min-width: 0; min-height: 0;
    border: 0; border-radius: 0; background: none; box-shadow: none;
    color: var(--kt-cap-ink); text-transform: none; letter-spacing: 0; text-shadow: none;
    font-family: inherit; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none; appearance: none;
}
.kt-app button.kt-key:hover, .kt-app button.kt-key:focus, .kt-app button.kt-key:active {
    background: none !important; box-shadow: none !important; color: var(--kt-cap-ink); outline: none;
}
.kt-app button.kt-key:focus-visible .kt-cap { outline: 2px solid var(--kt-accent); outline-offset: 1px; }

.kt-cap {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 100%; height: 100%; overflow: hidden;
    border-radius: calc(var(--u) * .13);
    border: 1px solid var(--kt-cap-edge);
    background: linear-gradient(180deg, var(--kt-cap-light-top), var(--kt-cap-light-bot));
    box-shadow:
        inset 0 calc(var(--u) * .035) 0 rgba(255, 255, 255, .95),
        0 calc(var(--u) * .06) 0 #98a0ad,
        0 calc(var(--u) * .09) calc(var(--u) * .08) rgba(31, 36, 43, .22);
    transition: transform .06s ease, background .06s ease, box-shadow .06s ease;
}
/* the slightly dished keycap top */
.kt-cap::after {
    content: ""; position: absolute; inset: 9% 10% 14%; pointer-events: none;
    border-radius: calc(var(--u) * .1);
    background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(0, 0, 0, .025));
}
.kt-mod .kt-cap { background: linear-gradient(180deg, var(--kt-cap-mod-top), var(--kt-cap-mod-bot)); }
.kt-mod .kt-cap::after { background: linear-gradient(180deg, rgba(255, 255, 255, .35), rgba(0, 0, 0, .03)); }
.kt-app button.kt-key:hover .kt-cap { filter: brightness(1.03); }

/* legends */
.kt-cap span { position: relative; z-index: 1; display: block; text-align: center; font-weight: 600; line-height: 1.05; white-space: nowrap; }
.kt-lbl { font-size: max(8px, calc(var(--u) * .27)); }
.kt-lbl.kt-big { font-size: max(10px, calc(var(--u) * .38)); font-weight: 650; }
.kt-top { font-size: max(8px, calc(var(--u) * .27)); opacity: .85; }
.kt-bot { font-size: max(8px, calc(var(--u) * .3)); margin-top: calc(var(--u) * .03); }

/* tested = soft green, pressed = strong green and pushed down */
.kt-key.is-tested .kt-cap { background: linear-gradient(180deg, #e3f7ee, #c9eedd); border-color: #8fd1b4; }
.kt-key.is-pressed .kt-cap {
    transform: translateY(calc(var(--u) * .05));
    background: linear-gradient(180deg, #5fe0b2, var(--kt-accent)) !important;
    border-color: var(--kt-accent-edge);
    color: var(--kt-accent-ink);
    box-shadow:
        inset 0 calc(var(--u) * .03) 0 rgba(255, 255, 255, .5),
        0 calc(var(--u) * .02) 0 #1d8f65,
        0 0 calc(var(--u) * .25) rgba(62, 207, 154, .55);
}
.kt-key.is-pressed .kt-cap span { color: var(--kt-accent-ink); }

/* ISO / JIS L-shaped Enter: two fused parts that share one id */
.kt-enter-top { padding-bottom: 0 !important; }
.kt-enter-bottom { padding-top: 0 !important; }
.kt-enter-top .kt-cap { border-bottom-right-radius: 0; border-bottom: 0; box-shadow: inset 0 calc(var(--u) * .035) 0 rgba(255,255,255,.95); }
.kt-enter-bottom .kt-cap { border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
.kt-enter-top .kt-cap, .kt-enter-bottom .kt-cap { background: var(--kt-cap-mod-top); }
.kt-enter-top .kt-cap::after, .kt-enter-bottom .kt-cap::after { display: none; }
.kt-enter-top.kt-mod .kt-cap, .kt-enter-bottom.kt-mod .kt-cap { background: var(--kt-cap-mod-top); }
.kt-enter-bottom .kt-lbl { visibility: hidden; }
.kt-key.is-tested.kt-enter-top .kt-cap, .kt-key.is-tested.kt-enter-bottom .kt-cap { background: #d6f1e5; }
.kt-key.is-pressed.kt-enter-top .kt-cap, .kt-key.is-pressed.kt-enter-bottom .kt-cap { background: var(--kt-accent) !important; }

.kt-note { margin: 12px 2px 0; color: var(--kt-muted); font-size: 12px; line-height: 1.55; }

/* ---------- responsive ---------- */
@media (max-width: 900px) { .kt-status { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
    .kt-app { padding: 14px; border-radius: 16px; }
    .kt-status { grid-template-columns: 1fr 1fr; }
    .kt-app button.kt-reset { margin-left: 0; width: 100%; }
    .kt-app select.kt-select { min-width: 0; width: 100%; }
    .kt-control-group { flex: 1 1 140px; }
}
@media (prefers-reduced-motion: reduce) { .kt-cap { transition: none; } }