/* Shared interface and device styles; intentionally independent of legacy overrides. */
:root { color-scheme:dark; --bg:#101314; --surface:#191d1f; --inset:#121617; --raised:#23292b; --line:#343c3e; --ink:#edf2ef; --muted:#a5b1ac; --accent:#b8ed85; --green:#213b2c; --amber:#f0cb88; --radius:16px; }
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:100px; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.6 'Segoe UI',Arial,sans-serif; -webkit-font-smoothing:antialiased; }
button,input,select,textarea { font:inherit; }
button,summary,select { cursor:pointer; }
button:disabled { cursor:wait; opacity:.55; }
a { color:inherit; text-decoration:none; }
p { margin:0 0 16px; }
h1,h2,h3 { line-height:1.2; font-weight:600; }
h1 { font-size:clamp(30px,3vw,42px); letter-spacing:-1.7px; margin:8px 0 12px; }
h2 { font-size:23px; letter-spacing:-.6px; margin:0 0 18px; }
h3 { font-size:21px; letter-spacing:-.4px; }
:focus-visible { outline:2px solid var(--accent); outline-offset:5px; }
[hidden] { display:none !important; }
.container { width:min(1280px,calc(100% - 64px)); margin-inline:auto; }
.icon { width:22px; height:22px; flex:none; vertical-align:middle; }
.seo-header { position:sticky; top:0; z-index:100; background:#101314f5; border-bottom:1px solid var(--line); backdrop-filter:blur(16px); }
.site-nav { display:flex; align-items:center; gap:24px; min-height:80px; }
.site-brand { display:inline-flex; align-items:center; gap:10px; font-size:22px; font-weight:650; letter-spacing:-.8px; white-space:nowrap; }
.brand-mark { display:grid; place-items:center; width:38px; height:38px; background:var(--accent); color:#18231b; border-radius:10px; }
.brand-word { display:flex; flex-direction:column; gap:3px; font-size:19px; line-height:1.05; letter-spacing:-.5px; }
.site-brand .brand-word span { color:var(--accent); font-size:10px; letter-spacing:3.5px; text-transform:uppercase; }
.site-brand { flex-shrink:0; }
.primary-nav { display:flex; gap:4px; margin-left:auto; }
.primary-nav a { font-size:14px; padding:9px 11px; color:var(--muted); border-radius:8px; white-space:nowrap; }
.primary-nav a:hover,.test-menu-panel a:hover { color:var(--ink); background:var(--raised); }
.primary-nav a[aria-current=page],.test-menu-panel a[aria-current=page] { color:var(--accent); background:var(--green); }
.test-menu { position:relative; flex:none; }
.test-menu>summary { display:flex; align-items:center; gap:16px; padding:10px 16px; font-size:14px; background:var(--raised); border:1px solid var(--line); border-radius:9px; list-style:none; }
.test-menu>summary::-webkit-details-marker { display:none; }
.test-menu[open]>summary { border-color:var(--accent); }
.test-menu-panel { position:absolute; right:0; top:calc(100% + 15px); width:850px; padding:28px; border:1px solid var(--line); border-radius:16px; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; background:#1b2021; box-shadow:0 25px 70px #0008; }
.menu-group { display:flex; flex-direction:column; gap:6px; }
.menu-group-label { color:var(--muted); font-size:12px; letter-spacing:1px; text-transform:uppercase; margin-bottom:8px; }
.test-menu-panel a { font-size:14px; line-height:1.4; padding:9px 6px; border-radius:6px; }
.skip-link { position:fixed; top:-100px; left:20px; z-index:200; background:var(--accent); color:#101810; padding:12px; border-radius:8px; }
.skip-link:focus { top:12px; }
.page-intro { padding-block:26px 24px; }
.breadcrumb { display:flex; gap:12px; font-size:13px; color:var(--muted); margin-bottom:20px; }
.breadcrumb a:hover { color:var(--accent); }
.breadcrumb [aria-current] { color:var(--ink); }
.eyebrow { color:var(--accent); font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:2px; margin:0 0 8px; }
.intro-copy { color:var(--muted); max-width:850px; line-height:1.7; }
.intro-heading { display:flex; align-items:center; justify-content:space-between; gap:24px; }
.intro-heading h1 { margin-top:0; }
.tool-context { display:flex; align-items:center; gap:9px; color:var(--muted); font-size:13px; white-space:nowrap; }
.tool-context .icon { width:17px; height:17px; }
.page-jump { display:inline-flex; gap:7px; color:var(--muted); font-size:14px; margin-top:10px; }
.page-jump:hover { color:var(--accent); }
.home-intro { padding-block:65px 45px; border-bottom:1px solid var(--line); margin-bottom:38px; }
.home-intro h1 { max-width:850px; font-size:clamp(42px,5vw,70px); line-height:1.05; letter-spacing:-3px; margin:20px 0; }
.home-intro h1 em { color:var(--accent); font-style:normal; }
.home-intro .intro-copy { max-width:650px; font-size:18px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.primary-action,.secondary-action { display:inline-flex; align-items:center; gap:20px; border-radius:9px; padding:12px 20px; font-size:14px; font-weight:600; }
.primary-action { background:var(--accent); color:#142016; }.secondary-action { border:1px solid var(--line); background:var(--surface); }
.primary-action:hover { background:#cdf4a9; }.secondary-action:hover { border-color:var(--muted); }
.trust-note { display:flex; flex-wrap:wrap; gap:24px; font-size:13px; color:var(--muted); margin-top:28px; }
.trust-note span { display:flex; align-items:center; gap:8px; }.trust-note .icon { width:16px; height:16px; color:var(--accent); }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:22px; }
.section-heading h2 { margin:0; font-size:28px; }.section-heading>p { color:var(--muted); font-size:14px; margin:0; }
.test-directory { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.directory-card { display:flex; flex-direction:column; padding:26px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); transition:transform .18s,border-color .18s; }
.directory-card:hover { transform:translateY(-3px); border-color:var(--accent); }
.card-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.card-icon { display:grid; place-items:center; width:46px; height:46px; border-radius:12px; color:var(--accent); background:var(--green); }
.directory-card:nth-child(3n+2) .card-icon { color:#9ccfff; background:#243444; }.directory-card:nth-child(3n) .card-icon { color:#d4b6f5; background:#362a44; }
.card-category { color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:1px; }
.directory-card h3 { margin:0 0 10px; }.directory-card p { color:var(--muted); font-size:14px; line-height:1.65; margin-bottom:25px; }
.card-action { display:flex; justify-content:space-between; font-size:14px; color:var(--accent); margin-top:auto; padding-top:18px; border-top:1px solid var(--line); }
.tester-section,.mouse-test-section { padding-bottom:30px; }.standalone-test { max-width:1060px; margin-bottom:30px; }
.tester-card,.mouse-test-card,.tool-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:26px; box-shadow:0 12px 35px #0002; }
.tester-header,.mouse-test-header,.tool-card-header { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:18px; }
.tester-header h2,.mouse-test-header h2,.tool-card-header h2 { font-size:20px; margin:0; }
.tester-label,.mouse-test-label,.tool-label { display:block; color:var(--muted); font-size:12px; letter-spacing:1.3px; margin-bottom:6px; }
.tool-description { color:var(--muted); font-size:16px; margin:12px 0 18px; }.tool-description.centered { text-align:center; }
button:not(.pixel-color),.tool-button,.webcam-action-button { min-height:40px; padding:9px 16px; color:var(--ink); background:var(--raised); border:1px solid var(--line); border-radius:8px; font-size:14px; font-weight:500; transition:background .15s,border-color .15s; }
button:not(.pixel-color):hover { border-color:var(--muted); background:#2c3435; }
#toggleMicrophone,#toggleWebcam,#startRefreshTest { background:var(--accent); color:#132216; border-color:var(--accent); }
.metric-row,.stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:18px 0; }
.metric-box,.stat,.mouse-stat,.touchpad-stat { border:1px solid var(--line); border-radius:10px; background:var(--inset); padding:16px 18px; min-width:0; }
.metric-box span,.stat span,.mouse-stat span,.touchpad-stat span { display:block; color:var(--muted); font-size:13px; margin-bottom:6px; }
.metric-box strong,.stat strong,.mouse-stat strong,.touchpad-stat strong { display:block; color:var(--ink); font-family:Consolas,'SFMono-Regular',monospace; font-size:25px; font-weight:500; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.stats { grid-template-columns:1fr 1fr .7fr; }.stats .stat:last-child strong { color:var(--accent); }
.keyboard-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding-block:4px 16px; }
.keyboard-live-status,.keyboard-lock-status { display:flex; align-items:center; gap:16px; }.keyboard-lock-status { margin-left:auto; }
.live-status-item { display:flex; gap:8px; align-items:center; font-size:13px; color:var(--muted); }.live-status-item strong { color:var(--ink); font-family:Consolas,monospace; font-weight:500; }
.lock-dot,.legend-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:#58635e; }
.lock-on .lock-dot { background:var(--accent); box-shadow:0 0 10px #b8ed8540; }.lock-on { color:var(--accent); }
.platform-switch { display:flex; gap:3px; padding:3px; background:var(--inset); border:1px solid var(--line); border-radius:9px; margin-left:auto; }
.platform-switch .platform-button { min-height:32px; border:0; padding:6px 13px; background:transparent; color:var(--muted); }
.platform-switch .platform-button.active { background:var(--raised); color:var(--ink); box-shadow:0 2px 3px #0003; }
.keyboard { padding:18px; border:1px solid #424c49; border-radius:12px; background:#111515; overflow-x:auto; outline-offset:3px; }
.keyboard:focus { border-color:#719255; }
.keyboard-shell { display:grid; grid-template-columns:minmax(580px,1fr) 145px 182px; gap:20px; min-width:960px; }
.key-row { display:flex; gap:5px; margin-bottom:5px; }.key-row:last-child { margin-bottom:0; }
.key { display:flex; align-items:center; justify-content:center; flex:1 1 0; min-width:0; height:42px; padding:3px; color:#d5ddd8; font:12px/1.1 Consolas,'SFMono-Regular',monospace; border:1px solid #3c4642; border-bottom:3px solid #080c0a; border-radius:5px; background:linear-gradient(#2b3330,#242b28); user-select:none; transition:background .08s,color .08s; }
.key-spacer { flex:1 1 0; }
.key.w14 { flex-grow:1.4; }.key.w15 { flex-grow:1.5; }.key.w18 { flex-grow:1.8; }.key.w2,.key.double { flex-grow:2; }.key.w22 { flex-grow:2.2; }.key.w23 { flex-grow:2.3; }.key.w27 { flex-grow:2.7; }.key.space { flex-grow:6; }
.keyboard-main>.key-row:first-child { margin-bottom:15px; }.keyboard-nav,.keyboard-numpad { padding-top:57px; }.keyboard-nav .key-row:nth-last-child(2) { margin-top:10px; }
.key.tested { background:#28452e; color:#b6e397; border-color:#4b6c3f; border-bottom-color:#182c1d; }.key.active { background:var(--accent); color:#162510; border-color:#d2f7b0; box-shadow:0 0 16px #b8ed852a; transform:translateY(1px); }
.windows-keyboard .keyboard-nav { padding-top:0; }.windows-keyboard .keyboard-nav .key-row:first-child { margin-bottom:15px; }
.keyboard-numpad { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:repeat(5,42px); gap:5px; align-content:start; }
.keyboard-numpad .key-row { display:contents; }.keyboard-numpad .key-spacer { display:none; }.keyboard-numpad .key { height:auto; }
.keyboard-numpad [data-code=NumpadAdd] { grid-column:4; grid-row:2 / span 2; }.keyboard-numpad [data-code=NumpadEnter] { grid-column:4; grid-row:4 / span 2; }.keyboard-numpad [data-code=Numpad0] { grid-column:1 / span 2; }
.keyboard-legend { display:flex; align-items:center; gap:20px; color:var(--muted); font-size:13px; padding-top:15px; flex-wrap:wrap; }.keyboard-legend>span { display:flex; align-items:center; gap:7px; }
.legend-dot.tested { background:#568e40; }.legend-dot.pressed { background:var(--accent); }.keyboard-legend .keyboard-focus-label { margin-left:auto; color:var(--accent); }
.keyboard-help { display:flex; gap:12px; align-items:start; padding:15px 18px; margin-top:18px; border:1px solid #4a4531; border-radius:10px; background:#26261d; color:#d9d5be; font-size:14px; }.keyboard-help p { margin:0; }.keyboard-help strong { color:#f0e1ba; }
kbd { display:inline-block; background:#35372c; border:1px solid #5a5d47; border-bottom-width:2px; border-radius:4px; padding:0 5px; font:13px/1.6 Consolas,monospace; }
.test-guide { display:grid; grid-template-columns:1fr 1fr; gap:24px; padding:8px 0 36px; }.test-guide>div { padding:28px; border:1px solid var(--line); border-radius:var(--radius); background:#161a1b; }
.test-guide h2 { font-size:20px; }.test-guide p,.test-guide li,.reading-section p { color:var(--muted); font-size:16px; line-height:1.8; }
.test-guide ol { padding:0; list-style:none; counter-reset:step; margin:0; }.test-guide li { position:relative; padding-left:40px; margin:16px 0; counter-increment:step; }
.test-guide li::before { content:counter(step,decimal-leading-zero); position:absolute; left:0; top:1px; color:var(--accent); font:14px/1.8 Consolas,monospace; }
.faq-section { padding-bottom:38px; }.faq-section>h2 { font-size:25px; }.faq-item { border-bottom:1px solid var(--line); }
.faq-item summary { padding:18px 30px 18px 0; font-size:16px; list-style:none; position:relative; }.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:'+'; position:absolute; right:8px; color:var(--accent); font-size:22px; line-height:1; }.faq-item[open] summary::after { content:'−'; }.faq-item p { color:var(--muted); max-width:980px; padding-bottom:12px; }
.related-section { padding-bottom:55px; }.related-section h2 { font-size:20px; }.related-links { display:flex; gap:12px; flex-wrap:wrap; }
.related-link { display:flex; align-items:center; gap:10px; padding:12px 18px; background:var(--surface); border:1px solid var(--line); border-radius:9px; font-size:14px; }.related-link:hover { border-color:var(--accent); }.related-link::after { content:'↗'; color:var(--accent); }
.reading-section { padding-block:42px 55px; max-width:950px; }.reading-section h2:not(:first-child) { margin-top:32px; }.reading-section a { text-decoration:underline; color:var(--accent); }
.site-footer { border-top:1px solid var(--line); padding:36px 0 22px; background:#0d1011; }.footer-content { display:grid; grid-template-columns:1fr 1.2fr; gap:60px; }
.footer-content p { color:var(--muted); font-size:14px; margin:16px 0 10px; }.footer-content>div>a:last-child { color:var(--muted); font-size:14px; }
.footer-content nav { display:grid; grid-template-columns:repeat(3,1fr); gap:10px 20px; align-content:start; font-size:14px; color:var(--muted); }.footer-content nav a:hover { color:var(--accent); }
.footer-bottom { display:flex; justify-content:space-between; gap:20px; border-top:1px solid #252b2d; padding-top:20px; margin-top:30px; font-size:12px; color:#88958e; }
.noscript-note { padding:18px; background:#392e1e; border:1px solid #80663f; border-radius:10px; margin-bottom:20px; }
.page-keyboard-test .page-intro { padding-block:16px 18px; }.page-keyboard-test .breadcrumb { margin-bottom:10px; }.page-keyboard-test h1 { font-size:32px; margin-bottom:8px; }.page-keyboard-test .intro-copy { font-size:14px; max-width:1080px; }.page-keyboard-test .page-jump { margin-top:6px; }
.page-keyboard-test .tester-header { margin-bottom:10px; }.page-keyboard-test .stats { margin:12px 0; }.page-keyboard-test .stat { padding:10px 16px; }.page-keyboard-test .stat strong { font-size:22px; }
@media(min-width:1450px) { .key { height:46px; }.keyboard-nav,.keyboard-numpad { padding-top:61px; }.keyboard-numpad { grid-template-rows:repeat(5,46px); } }
@media(max-width:1150px) { .primary-nav a:nth-last-child(-n+2) { display:none; }.site-nav { gap:14px; }.container { width:calc(100% - 40px); }.keyboard-shell { gap:12px; min-width:820px; grid-template-columns:minmax(500px,1fr) 125px 155px; }.keyboard-lock-status { margin-left:0; } }
@media(max-width:900px) { .primary-nav a { display:none; }.primary-nav a:first-child { display:block; }.test-menu-panel { width:min(780px,calc(100vw - 40px)); grid-template-columns:repeat(3,1fr); }.test-directory { grid-template-columns:repeat(2,1fr); }.tool-context { display:none; }.test-guide { gap:16px; }.test-guide>div { padding:20px; }.footer-content { gap:25px; } }
@media(max-width:620px) { .container { width:calc(100% - 28px); }.site-nav { min-height:68px; gap:10px; }.site-brand { font-size:18px; }.brand-mark { width:30px; height:30px; }.test-menu>summary { padding:8px 10px; }.test-menu-panel { width:calc(100vw - 28px); grid-template-columns:repeat(2,1fr); padding:20px; }.primary-nav { display:none; }.test-menu { margin-left:auto; }.test-directory,.test-guide,.footer-content { grid-template-columns:1fr; }.tester-card,.tool-card,.mouse-test-card { padding:16px; }.section-heading { display:block; }.section-heading>p { margin-top:12px; }.stats,.metric-row { gap:6px; }.metric-box,.stat { padding:12px 10px; }.metric-box strong,.stat strong { font-size:19px; }.home-intro { padding-block:38px; }.home-intro h1 { letter-spacing:-2px; }.platform-switch { margin-left:0; }.footer-content nav { grid-template-columns:repeat(2,1fr); }.footer-bottom { flex-direction:column; gap:4px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none !important; transition:none !important; } }