.device-test{font:inherit;color:var(--text)}.device-screen{gap:14px;min-width:0;display:grid}.device-screen>p{margin:0}.device-actions{flex-wrap:wrap;align-items:end;gap:10px;display:flex}.device-field{gap:4px;min-width:0;font-weight:700;display:grid}.device-field select{max-width:100%;min-height:44px}.device-range input[type=range]{min-height:44px;inline-size:min(260px,100%);accent-color:var(--accent)}.device-colour input[type=color]{border:1px solid var(--line-strong,var(--line));background:var(--panel);cursor:pointer;border-radius:8px;block-size:44px;inline-size:64px;padding:2px}.device-check{cursor:pointer;align-items:center;gap:8px;min-height:44px;display:inline-flex}.device-check input{block-size:20px;inline-size:20px;accent-color:var(--accent)}.device-status{min-height:1.5em;margin:0;font-weight:700}.device-status-error{color:var(--danger)}.device-status-error:not(:empty):before,.device-status-warning:not(:empty):before{content:"⚠ "}.device-privacy{border-block-start:1px solid var(--line);color:var(--muted);margin:4px 0 0;padding-block-start:10px;font-size:.92em}.device-small{color:var(--muted);margin:0;font-size:.92em}.device-warning{border:1px solid var(--line-strong,var(--line));border-inline-start:4px solid var(--danger);background:var(--panel-muted,var(--panel));border-radius:8px;margin:0;padding:10px 12px}.device-number{font-variant-numeric:tabular-nums}.device-big{margin:0;font-size:clamp(2rem,6vw,3rem);font-weight:800;line-height:1.1}.device-result{outline:none;gap:8px;display:grid}.device-result:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:8px}.device-facts{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px;margin:0;display:grid}.device-facts>div{border:1px solid var(--line);background:var(--panel);overflow-wrap:anywhere;border-radius:8px;min-width:0;padding:10px 12px}.device-facts dt{color:var(--muted);font-size:.88em}.device-facts dd{margin:2px 0 0;font-weight:700}.device-visually-hidden{clip-path:inset(50%);white-space:nowrap;block-size:1px;inline-size:1px;overflow:hidden;position:absolute!important}.device-meter-row{grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;display:grid}.device-meter{border:1px solid var(--line-strong,var(--line));background:var(--panel-muted,var(--panel));border-radius:999px;block-size:18px;position:relative;overflow:hidden}.device-meter-fill{background:var(--accent);block-size:100%;transition:inline-size 60ms linear}.device-meter-peak{background:var(--text);inline-size:3px;margin-inline-start:-1px;position:absolute;inset-block:0}.device-hint{border:1px solid var(--line);background:var(--panel);border-radius:8px;margin:0;padding:8px 12px}.device-hint-clipping,.device-hint-silent{border-color:var(--danger)}.device-hint-good{border-color:var(--success)}.device-sample{justify-items:start;gap:8px;display:grid}.device-sample audio{max-inline-size:100%}.device-video-frame{border:1px solid var(--line);background:#000;border-radius:10px;overflow:hidden}.device-video{object-fit:contain;max-block-size:70vh;inline-size:100%;display:block}.device-video.is-mirrored{transform:scaleX(-1)}.device-keyboard{border:1px solid var(--line);background:var(--panel-muted,var(--panel));border-radius:10px;flex-wrap:wrap;gap:14px;padding:12px;display:flex;overflow-x:auto}.device-keyboard.is-capturing{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}.device-kb-block{align-content:start;gap:4px;display:grid}.device-kb-main{flex:560px;min-inline-size:560px}.device-kb-side{flex:none;gap:14px;display:flex}.device-kb-nav .device-kb-row:nth-child(4){justify-content:center}.device-kb-row{gap:4px;display:flex}.device-key{border:1px solid var(--line-strong,var(--line));background:var(--panel);min-block-size:34px;min-inline-size:30px;color:var(--text);white-space:nowrap;user-select:none;border-radius:6px;flex:1 1 0;place-items:center;padding:0 4px;font-size:.78em;font-weight:700;display:grid;position:relative}.device-key.is-tested{border-color:var(--accent);border-width:2px}.device-key.is-held{background:var(--accent);color:var(--accent-contrast,#fff);border-color:var(--text);border-width:2px}.device-key-mark{font-size:.8em;line-height:1.2;position:absolute;inset-block-start:0;inset-inline-end:3px}.device-chip{border:1px solid var(--line);background:var(--panel);border-radius:6px;margin:2px 4px;padding:2px 8px;display:inline-block}.device-mouse-area{border:2px dashed var(--accent);background:var(--panel);cursor:crosshair;user-select:none;overscroll-behavior:contain;border-radius:12px;gap:10px;min-block-size:220px;padding:16px;display:grid}.device-mouse-buttons{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:0;padding:0;list-style:none;display:grid}.device-mouse-buttons li{border:1px solid var(--line);background:var(--panel-muted,var(--panel));border-radius:8px;gap:2px;padding:10px;display:grid}.device-mouse-buttons li.is-tested{border-color:var(--accent)}.device-mouse-buttons li.is-down{background:var(--accent);color:var(--accent-contrast,#fff);border-color:var(--text)}.device-mouse-wheel{margin:0}.device-swatches{flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none;display:flex}.device-swatches button{gap:8px}.device-swatch{border:1px solid var(--line-strong,var(--line));border-radius:4px;block-size:20px;inline-size:20px;display:inline-block}.device-pixel-overlay{z-index:2000;cursor:pointer;color:#111;outline:none;position:fixed;inset:0}.device-pixel-overlay.is-dark{color:#fff}.device-pixel-controls{background:var(--panel);max-inline-size:640px;color:var(--text);cursor:default;border-radius:10px;gap:8px;margin-inline:auto;padding:14px;display:grid;position:absolute;inset-block-start:max(12px, env(safe-area-inset-top));inset-inline:12px;box-shadow:0 6px 24px #0006}.device-pixel-controls p{margin:0}@media (prefers-reduced-motion:reduce){.device-meter-fill{transition:none}}.device-key{text-overflow:clip;overflow:hidden}.device-touch-only{justify-items:start;gap:.75rem;padding:1rem 0;display:grid}.device-warning{color:var(--muted,var(--text));opacity:.85;background:0 0;border:0;padding:0;font-size:.875em}.device-subtitle{margin:18px 0 6px;font-size:1rem}
