:root { --bg:#0a0f15; --panel:#131a24; --line:#293546; --muted:#a9b5c3; --text:#f4f7fb; --accent:#ff8a36; --accent-2:#40ddc4; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:90px; }
body { margin:0; color:var(--text); background:radial-gradient(ellipse at 80% 0, #18302f 0, transparent 45%),var(--bg); font-family:'Plus Jakarta Sans',sans-serif; }
a { color:var(--accent-2); text-underline-offset:4px; }
button,select { font:inherit; }
button,a,select { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:2px solid var(--accent-2); outline-offset:5px; }
.wrap { width:min(1200px,92vw); margin:auto; }
header { border-bottom:1px solid var(--line); background:#0a0f15ed; }
.nav { display:flex; gap:24px; align-items:center; padding:16px 0; }
.brand { display:flex; align-items:center; gap:10px; color:var(--text); font-family:Oxanium,sans-serif; font-size:16px; text-decoration:none; text-transform:uppercase; letter-spacing:1px; }
.nav-center { margin-left:auto; display:flex; gap:20px; align-items:center; }
.nav-dropdown { position:relative; }
.nav-dropdown-btn { background:var(--panel); color:var(--text); border:1px solid var(--line); padding:10px 14px; border-radius:6px; cursor:pointer; }
.nav-dropdown-btn svg { margin-left:6px; }
.nav-dropdown-menu { display:none; position:absolute; right:0; top:calc(100% + 8px); width:540px; padding:20px; background:var(--panel); border:1px solid var(--line); border-radius:10px; z-index:20; box-shadow:0 14px 40px #0008; }
.nav-dropdown.open .nav-dropdown-menu { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.nav-menu-col h3 { font-size:12px; text-transform:uppercase; color:var(--muted); }
.nav-menu-links,.footer-links { display:grid; gap:3px; }
.nav-menu-links a { display:flex; gap:8px; text-decoration:none; font-size:13px; color:var(--text); padding:9px 4px; }
.nav-menu-links a:hover,.nav-menu-links .current { color:var(--accent); }
.nav-anchors { display:flex; gap:18px; }
.nav-anchors a { text-decoration:none; font-size:13px; color:var(--muted); }
.nav-cta { display:none; }
.breadcrumb { width:min(1200px,92vw); margin:20px auto; font-size:12px; color:var(--muted); }
.breadcrumb ol { display:flex; flex-wrap:wrap; gap:12px; padding:0; list-style:none; }
.breadcrumb li+li::before { content:'/'; margin-right:12px; color:var(--muted); }
.breadcrumb a { text-decoration:none; }
.kt-hero { display:grid; grid-template-columns:1fr 250px; gap:48px; padding:24px 0 30px; align-items:end; }
.eyebrow { color:var(--accent); font:13px 'Share Tech Mono',monospace; text-transform:uppercase; letter-spacing:2px; margin:0 0 15px; }
h1 { font:700 clamp(2.5rem,5vw,4.5rem)/1.04 Oxanium,sans-serif; letter-spacing:-1.5px; margin:0 0 16px; text-transform:uppercase; }
.kt-intro { max-width:740px; font-size:16px; line-height:1.7; color:var(--muted); margin:0; }
.kt-stamp { border-left:2px solid var(--accent); padding-left:20px; color:var(--muted); font-size:12px; line-height:1.8; }
.kt-stamp strong { display:block; color:var(--text); font:14px 'Share Tech Mono',monospace; }
.kt-toolbar { display:flex; flex-wrap:wrap; gap:12px 20px; align-items:end; padding:18px 0; }
.kt-toolbar label { display:grid; gap:7px; color:var(--muted); font-size:12px; }
.kt-toolbar select { min-height:44px; padding:9px 28px 9px 12px; background:var(--panel); color:var(--text); border:1px solid var(--line); border-radius:5px; }
.kt-actions { display:flex; flex-wrap:wrap; gap:8px; margin-left:auto; }
.btn { min-height:44px; display:inline-flex; justify-content:center; align-items:center; padding:11px 18px; border:1px solid var(--line); border-radius:5px; background:transparent; color:var(--text); text-decoration:none; cursor:pointer; font-weight:600; font-size:13px; }
.btn.primary { background:var(--accent); color:#171008; border-color:var(--accent); }
.btn:hover { border-color:var(--accent-2); }
.btn:disabled { opacity:.5; cursor:default; }
.kt-zone { background:linear-gradient(145deg,#18222d,#0f1720); border:1px solid #3b4d5d; border-radius:12px; padding:22px; cursor:pointer; }
.kt-zone.is-testing { border-color:var(--accent-2); box-shadow:0 0 0 1px #40ddc422; }
.kt-zone-head { display:flex; justify-content:space-between; gap:16px; align-items:center; margin-bottom:20px; }
.kt-status { margin:0; font:13px 'Share Tech Mono',monospace; color:var(--accent-2); }
.kt-legend { display:flex; flex-wrap:wrap; gap:16px; color:var(--muted); font-size:11px; }
.kt-legend span { display:inline-flex; align-items:center; gap:6px; }
.kt-legend i { width:8px; height:8px; background:#253447; border:1px solid #657487; border-radius:2px; }
.kt-legend .seen { background:#22473f; border-color:var(--accent-2); }
.kt-legend .down { background:var(--accent); border-color:var(--accent); }
.kt-scroll { overflow-x:auto; padding:3px 3px 12px; }
.kt-board { display:flex; gap:14px; min-width:850px; user-select:none; }
.kt-main { flex:15; min-width:0; display:grid; grid-template-rows:repeat(6,42px); gap:7px; }
.kt-nav { flex:3; min-width:0; display:grid; grid-template-rows:repeat(6,42px); gap:7px; }
.kt-row { display:flex; gap:5px; }
.kt-main .kt-row:first-child { gap:10px; margin-bottom:3px; }
.kt-numpad { flex:4; min-width:0; display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(5,42px); gap:7px 5px; margin-top:49px; }
.kt-key,.kt-spacer { flex-basis:0; min-width:0; flex-shrink:1; }
.kt-key { border:1px solid #3c4b60; border-bottom:3px solid #344255; border-radius:5px; background:#1a2635; display:flex; justify-content:center; align-items:center; color:#c3cedb; font:12px 'Share Tech Mono',monospace; padding:0 2px; }
.kt-key.tested { border-color:#397969; background:#173c35; color:#8be8d2; }
.kt-key.pressed { border-color:var(--accent); background:var(--accent); color:#201208; transform:translateY(2px); }
.kt-tkl { max-width:960px; }
.kt-help { font-size:12px; color:var(--muted); line-height:1.7; margin:14px 0 0; }
.kt-metrics { display:grid; grid-template-columns:2fr repeat(3,1fr); border:1px solid var(--line); border-radius:10px; margin-top:18px; overflow:hidden; background:#101923; }
.kt-metric { padding:20px; border-right:1px solid var(--line); }
.kt-metric:last-child { border:0; }
.kt-metric p { margin:0 0 8px; color:var(--muted); font-size:11px; letter-spacing:1px; text-transform:uppercase; }
.kt-metric strong { font:36px 'Share Tech Mono',monospace; color:var(--text); }
.kt-metric small { font:14px 'Share Tech Mono',monospace; color:var(--muted); }
progress { display:block; width:100%; height:6px; margin-top:14px; border:0; accent-color:var(--accent-2); }
progress::-webkit-progress-bar { background:#293546; }
progress::-webkit-progress-value { background:var(--accent-2); }
.kt-details { display:grid; grid-template-columns:1.6fr 1fr; gap:18px; margin-top:18px; }
.kt-panel { border:1px solid var(--line); border-radius:10px; background:#101923; padding:24px; min-width:0; }
.kt-panel h2,.kt-panel h3 { margin:0 0 14px; font:600 18px Oxanium,sans-serif; }
.kt-panel p { color:var(--muted); font-size:13px; line-height:1.7; }
.kt-held { font:16px/1.8 'Share Tech Mono',monospace; color:var(--accent-2) !important; overflow-wrap:anywhere; min-height:30px; }
.kt-last { display:flex; justify-content:space-between; gap:20px; margin-top:22px; border-top:1px solid var(--line); padding-top:18px; }
.kt-last strong { font:20px 'Share Tech Mono',monospace; overflow-wrap:anywhere; }
.kt-last small { display:block; color:var(--muted); margin:7px 0; font-size:11px; }
.kt-history { font:12px/1.7 'Share Tech Mono',monospace; color:var(--muted); list-style:none; padding:0; margin:0; }
.kt-history:empty::after { content:'Key down and key up events will appear here.'; }
.kt-history li { padding:4px 0; border-bottom:1px solid #263140; }
.kt-unseen { padding:18px 0; color:var(--muted); font-size:13px; }
.kt-unseen summary { cursor:pointer; padding:8px 0; }
.kt-unseen p { font:12px/1.9 'Share Tech Mono',monospace; overflow-wrap:anywhere; }
.content-section { padding:48px 0 15px; max-width:900px; }
.content-section h2 { font:600 clamp(24px,3vw,32px) Oxanium,sans-serif; margin:0 0 20px; }
.content-section h3 { font:600 18px Oxanium,sans-serif; margin:24px 0 10px; }
.content-section p,.content-section li { color:var(--muted); font-size:14px; line-height:1.85; }
.content-section li { margin-bottom:9px; }
.kt-links { display:flex; flex-wrap:wrap; gap:10px; }
.kt-faq { border-top:1px solid var(--line); padding:18px 0; }
.kt-faq summary { cursor:pointer; font-size:15px; line-height:1.6; }
.kt-faq p { margin-bottom:0; }
footer { margin-top:60px; padding:40px 0; border-top:1px solid var(--line); color:var(--muted); }
.footer-grid { display:flex; flex-wrap:wrap; gap:36px 60px; }
.footer-brand { max-width:240px; font-size:13px; line-height:1.8; }
.footer-brand strong,.footer-col-title { color:var(--text); font:14px Oxanium,sans-serif; }
.footer-links { margin-top:12px; }
.footer-links a { padding:9px 0; color:var(--muted); font-size:12px; text-decoration:none; min-height:36px; }
.footer-bottom { margin-top:30px; font-size:11px; }
@media(max-width:900px) { .kt-hero { grid-template-columns:1fr; gap:20px; } .kt-stamp { display:none; } .nav-anchors { display:none; } .kt-actions { margin-left:0; } .kt-zone-head { align-items:start; flex-direction:column; } }
@media(max-width:600px) { .brand span { font-size:11px; letter-spacing:0; } .nav { gap:12px; } .nav-dropdown-menu { width:290px; } .nav-dropdown.open .nav-dropdown-menu { grid-template-columns:1fr; max-height:70vh; overflow:auto; } .kt-zone { padding:14px; } .kt-metrics { grid-template-columns:1fr 1fr; } .kt-metric { border-bottom:1px solid var(--line); padding:16px; } .kt-metric strong { font-size:30px; } .kt-details { grid-template-columns:1fr; } .kt-toolbar label { flex:1; } .kt-toolbar select { width:100%; } .kt-actions { width:100%; } h1 { letter-spacing:-1px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }