:root { color-scheme: light; --ink: #0b1a33; --muted: #77869a; --blue: #006acd; --border: #e5ebf3; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; color: var(--ink); background: #f4f7fc; font-family: system-ui,-apple-system,'Segoe UI',sans-serif; }
button { font: inherit; cursor: pointer; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 3px solid #8ec7ff; outline-offset: 4px; }
[hidden] { display: none !important; }
.keyboard-header { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 16px; min-height: 66px; padding: 10px 28px; background: #fff; border-bottom: 1px solid var(--border); }
.keyboard-plan { justify-self: start; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 8px; color: #16803d; background: #eaf8ef; font-size: .8rem; }
.keyboard-plan strong { font-style: italic; }
.keyboard-header h1 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 1.325rem; }
.keyboard-header h1 i { color: var(--blue); font-size: 1.7rem; }
.keyboard-open { justify-self: end; gap: 6px; color: #69798d; font-size: .9rem; text-decoration: none; }
.keyboard-main { display: flex; flex-direction: column; gap: 22px; width: 100%; max-width: 1328px; margin: 0 auto; padding: 30px 24px 20px; }
.keyboard-card, .detail-card { min-width: 0; padding: 24px; border: 1px solid var(--border); border-radius: 22px; background: #fff; box-shadow: 0 12px 40px #123d6b08; }
.test-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.eyebrow { display: block; margin-bottom: 8px; color: #8098ae; font-size: 11px; letter-spacing: .5px; }
h2 { margin: 0; font-size: 19px; }
.test-heading p { margin: 9px 0 0; color: var(--muted); font-size: 12px; }
.test-actions { display: flex; flex-shrink: 0; gap: 10px; }
.button { min-height: 40px; padding: 10px 16px; border: 0; border-radius: 9px; font-size: 13px; font-weight: 600; }
.primary { background: var(--blue); color: #fff; }
.primary:hover { background: #0059b3; }
.secondary { background: #edf3fa; color: #506d8e; }
.test-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)) 1.5fr; gap: 20px; margin-top: 24px; padding: 18px 22px; border: 1px solid #e8eef6; border-radius: 12px; background: #f8faff; }
.test-summary > div > span { color: #7c8ca2; font-size: 11px; }
.test-summary strong { display: block; margin-top: 7px; font-size: 25px; font-variant-numeric: tabular-nums; }
.test-summary strong b { font-weight: 700; }
.test-summary small { color: #95a4b7; font-size: 13px; font-weight: 400; }
.coverage-stat { align-self: center; }
.coverage-stat b { float: right; color: var(--blue); }
.coverage-track { height: 6px; margin-top: 12px; overflow: hidden; border-radius: 5px; background: #e1eaf5; }
.coverage-track span { display: block; width: 0; height: 100%; background: #428bd1; }
.test-status { display: flex; align-items: center; gap: 8px; min-height: 45px; color: #7a8da2; font-size: 11px; line-height: 1.6; }
.status-dot { flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; background: #a7b5c7; }
.status-dot.active { background: #219775; box-shadow: 0 0 0 3px #21977514; }
.test-area { border: 1px solid #e3eaf3; border-radius: 14px; background: #f0f4f9; }
.test-area.testing { border-color: #b0cdec; }
.keyboard-scroll { overflow-x: auto; padding: 20px; scrollbar-width: thin; scrollbar-color: #bccddd #f0f4f9; }
.keyboard-layout { display: grid; grid-template-columns: minmax(0,15fr) minmax(0,3.15fr) minmax(0,4.2fr); gap: 20px 18px; min-width: 990px; user-select: none; -webkit-user-select: none; }
.function-main { display: flex; gap: 7px; }
.function-main .key { flex: 1; min-width: 0; }
.function-main .key.group-start { margin-left: 14px; }
.function-extra { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
.numpad-heading { align-self: center; color: #98a7ba; font-size: 11px; text-align: center; }
.main-keys { display: grid; gap: 7px; }
.key-row { display: flex; gap: 7px; }
.key { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 43px; padding: 4px 2px; overflow: hidden; border: 1px solid #d4deea; border-bottom: 3px solid #cbd6e4; border-radius: 6px; background: #fff; color: #526781; font-size: 11px; line-height: 1.1; text-align: center; transition: background .08s,border-color .08s; }
.key-row .key { flex-basis: 0; min-width: 0; }
.key small { font-size: 9px; color: #9cabbc; }
.key.tested { color: #297a5d; border-color: #b7dcca; background: #e8f6ee; }
.key.pressed { color: #fff; border-color: #247ac7; border-bottom-color: #1860a3; background: #428ed1; box-shadow: inset 0 2px 4px #0e4a842b; }
.key.pressed small { color: #d5e9fc; }
.navigation-keys { display: flex; flex-direction: column; justify-content: space-between; }
.navigation-grid, .arrow-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
.arrow-grid [data-code="ArrowUp"] { grid-column: 2; }
.arrow-grid [data-code="ArrowLeft"] { grid-column: 1; grid-row: 2; }
.arrow-grid [data-code="ArrowDown"] { grid-column: 2; grid-row: 2; }
.arrow-grid [data-code="ArrowRight"] { grid-column: 3; grid-row: 2; }
.numpad-keys { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); grid-template-rows: repeat(5,43px); gap: 7px; }
.keyboard-caption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; margin-top: 16px; }
.key-legend, .lock-indicators { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; color: #8294a8; font-size: 10px; }
.key-legend span { display: inline-flex; align-items: center; gap: 6px; }
.key-legend i { width: 10px; height: 10px; border: 1px solid #ccd8e5; border-radius: 3px; background: #fff; }
.key-legend i.tested { background: #c9ead7; border-color: #a9d4ba; }
.key-legend i.pressed { background: #428ed1; border-color: #247ac7; }
.lock-indicators b { margin-left: 5px; color: #9baabc; font-weight: 500; }
.lock-indicators .on b { color: #24836a; }
.mobile-note { display: none; margin: 14px 0 0; color: #8195ad; font-size: 11px; }
.detail-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr) minmax(0,1fr); gap: 20px; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.detail-card h2 { font-size: 16px; }
.event-tag { padding: 4px 8px; border-radius: 5px; color: #557fa8; background: #eef5fc; font-size: 10px; }
.last-key { display: grid; place-items: center; height: 72px; margin: 18px 0; padding: 10px; border: 1px solid #e4ecf6; border-radius: 10px; color: #366b9c; background: #f6f9fd; font-size: 30px; font-weight: 700; overflow-wrap: anywhere; }
.event-details { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0; }
.event-details dt { color: #8a9ab0; font-size: 10px; }
.event-details dd { margin: 5px 0 0; color: #425e7e; font-size: 12px; overflow-wrap: anywhere; }
.modifier-state { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.modifier-state span { padding: 5px 9px; border: 1px solid #e2eaf4; border-radius: 5px; color: #94a4b8; font-size: 10px; }
.modifier-state .active { color: #006acd; border-color: #b3d1f0; background: #edf6ff; }
.extra-keys h3 { margin: 18px 0 7px; color: #69819b; font-size: 11px; font-weight: 500; }
.extra-keys p { margin: 0; color: #9aa8b9; font-size: 10px; line-height: 1.7; }
#extraKeys { display: flex; flex-wrap: wrap; gap: 5px; }
#extraKeys .key { min-height: 27px; padding: 5px 8px; font-size: 10px; }
.muted { color: #93a3b7; font-size: 10px; }
.history-heading { display: flex; justify-content: space-between; margin-top: 22px; padding-bottom: 10px; border-bottom: 1px solid #e8eef6; color: #98a7b9; font-size: 10px; }
.history-scroll { height: 306px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #c7d7e7 #f5f8fc; overscroll-behavior: contain; }
.empty-state { margin: 35px 12px; color: #9aa9bc; font-size: 11px; text-align: center; line-height: 1.9; }
#keyHistory { margin: 0; padding: 0; list-style: none; }
.history-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 2px; border-bottom: 1px solid #eef2f7; }
.history-row strong { display: block; color: #4e6887; font-size: 12px; font-weight: 500; }
.history-row small { display: block; margin-top: 4px; color: #99a9bb; font-size: 9px; }
.history-row > div:last-child { flex-shrink: 0; text-align: right; }
.history-row .down { color: #307ab8; }
.history-row .up { color: #379375; }
.instructions ol { margin: 22px 0 0; padding: 0; list-style: none; }
.instructions li { display: flex; gap: 12px; margin-bottom: 19px; }
.instructions li > b { display: grid; place-items: center; flex: 0 0 26px; height: 26px; border-radius: 7px; background: #eef4fa; color: #7c9cba; font-size: 10px; font-weight: 500; }
.instructions strong { font-size: 12px; font-weight: 600; }
.instructions p { margin: 6px 0 0; color: #879bb1; font-size: 11px; line-height: 1.8; }
.instructions .test-tip { padding: 12px; border-radius: 8px; background: #f3f7fc; color: #6f89a4; }
kbd { font: inherit; font-weight: 600; }
.keyboard-tips { padding: 16px 12px 0; border-top: 1px solid #e2eaf4; color: #8295ac; font-size: 11px; line-height: 1.9; }
.keyboard-tips p { margin: 0 0 4px; }
@media (max-width: 1050px) { .detail-layout { grid-template-columns: 1fr 1fr; } .instructions { grid-column: 1 / -1; } .mobile-note { display: block; } .coverage-stat { grid-column: 1 / -1; } .test-summary { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; } }
@media (max-width: 650px) { .keyboard-header { padding: 10px 16px; grid-template-columns: 1fr auto; gap: 10px; } .keyboard-header h1 { grid-column: 1 / -1; grid-row: 1; justify-self: center; font-size: 1.175rem; } .keyboard-plan { grid-row: 2; } .keyboard-open { grid-row: 2; grid-column: 2; font-size: .8rem; } .keyboard-header .tool-header-brand { grid-column: 2; grid-row: 2; } .keyboard-main { padding: 20px 12px; gap: 16px; } .keyboard-card, .detail-card { padding: 18px; border-radius: 18px; } .test-heading { align-items: flex-start; flex-direction: column; } .test-heading h2 { font-size: 17px; } .test-actions { width: 100%; } .test-actions .button { flex: 1; } .test-summary { padding: 14px; gap: 12px 8px; } .test-summary strong { font-size: 22px; } .test-summary > div > span { font-size: 9px; } .detail-layout { grid-template-columns: 1fr; gap: 16px; } .keyboard-scroll { padding: 12px; } .key-legend, .lock-indicators { gap: 12px; } }
@media (prefers-reduced-motion: reduce) { .key { transition: none; } }