.input-tool{padding:25px;color:var(--ink);min-width:0}.input-tool__header{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.input-tool .tool-stage{padding:20px;border:1px solid var(--line);background:#f0f3e9}.input-tool .tool-controls{padding:0 0 17px;margin:0;gap:9px}.input-tool .button-secondary{appearance:none;border:1px solid #cbd3c4;background:white;color:var(--ink);border-radius:6px;min-height:44px;padding:10px 17px;font-size:13px;line-height:1.4;transition:background .15s}.input-tool .button-secondary:hover:not(:disabled){background:#e9efdf}.input-tool .measurement-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-top:18px}.input-tool .measurement__label{display:block;font-size:11px;color:var(--muted);margin-bottom:8px}.input-tool .measurement strong{font-size:16px;line-height:1.5;overflow-wrap:anywhere}.input-tool .help-note{font-size:12px;margin:17px 0 0}.input-tool .status{font-size:12px;line-height:1.6;margin:17px 0 0;border-top:1px solid var(--line);padding:14px 0 0}.input-tool .keyboard-pad{padding:18px 15px;background:#e8eddf;border:1px solid #d8dfcd;border-radius:6px;cursor:text;overflow-x:auto;max-width:100%}.input-tool .keyboard-grid{display:grid;gap:5px;width:100%;min-width:560px;max-width:870px;margin:auto}.input-tool .key-row{display:flex;gap:5px}.input-tool .key{display:grid;flex:1;min-width:27px;height:40px;place-items:center;border:1px solid #bfc9b4;border-bottom:3px solid #bbc6af;border-radius:5px;background:#fafbf5;color:#50614b;font-size:11px;line-height:1;font-weight:500;transition:background .12s,transform .12s;user-select:none}.input-tool .key--wide{flex:1.5}.input-tool .key[data-code=Space]{flex:6}.input-tool .key.is-tested{background:#d4e3b5;border-color:#aabd87}.input-tool .key.is-pressed{background:#567441;color:white;border-color:#3d5b2d;transform:translateY(2px)}.input-tool .keyboard-pad__prompt{font-size:11px;line-height:1.6;color:var(--muted);margin:19px 0 0}.input-tool .mouse-pad{position:relative;display:grid;min-height:260px;overflow:hidden;place-content:center;border:1px dashed #aebba0;border-radius:5px;background-color:#f5f7ef;background-image:radial-gradient(#cbd4bf 1px,transparent 1px);background-size:18px 18px;cursor:crosshair;text-align:center;user-select:none}.input-tool .mouse-pad p{z-index:1;margin:0;color:#67765d;font-size:14px}.input-tool .mouse-pad__coordinates{z-index:1;margin-top:7px;color:#7a876e;font:12px monospace}.input-tool .mouse-pad__cross{position:absolute;inset:50% auto auto 50%;width:30px;border-top:1px solid #a6b397;transform:translate(-50%,-40px)}.input-tool .mouse-pad__cross:after{position:absolute;top:-15px;left:15px;height:30px;border-left:1px solid #a6b397;content:''}.input-tool .mouse-pad__dot{position:absolute;top:-5px;left:-5px;width:10px;height:10px;border:2px solid #49633b;border-radius:50%;background:#e7efb5;opacity:0;pointer-events:none}.input-tool .mouse-pad__dot.is-visible{opacity:1}.input-tool .screen-stage{padding:0;overflow:hidden}.input-tool .screen-pattern{display:grid;min-height:300px;place-items:end start;padding:20px;background:white;color:var(--ink)}.input-tool .screen-pattern span{background:#f6f7f1;color:var(--ink);padding:5px 9px;border:1px solid #d1d7c9;border-radius:3px;font:11px monospace}.input-tool .screen-controls{padding:17px;background:#f0f3e9;display:flex;gap:8px;flex-wrap:wrap}.input-tool .screen-stage:fullscreen{border:0;border-radius:0;padding:0;background:black;width:100vw;height:100vh;position:relative}.input-tool .screen-stage:fullscreen .screen-pattern{position:absolute;inset:0;padding:18px;min-height:100%;width:100%;height:100%}.input-tool .screen-stage:fullscreen .screen-pattern span{align-self:start}.input-tool .screen-stage:fullscreen .screen-controls{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);z-index:2;border:1px solid #cbd3c4;background:#f7f8f3;box-shadow:0 2px 16px #0002;border-radius:8px;justify-content:center;padding:10px;max-width:calc(100% - 24px);width:max-content}.input-tool .observation-field{border:1px solid var(--line);padding:12px 17px 17px;margin:21px 0 0;border-radius:5px;display:flex;flex-wrap:wrap;gap:10px 24px}.input-tool .observation-field legend{padding:0 6px;font-size:12px;color:var(--muted)}.input-tool .observation-field label{display:inline-flex;align-items:center;gap:7px;font-size:12px}.input-tool .observation-field input{accent-color:var(--ink)}

.input-tool{padding:var(--space-lg);color:var(--color-ink)}.input-tool .tool-stage{padding:var(--space-lg);border-color:var(--color-rule);background:var(--color-paper-2)}.input-tool .button-secondary{border-color:var(--color-rule);background:var(--color-paper);color:var(--color-ink);border-radius:var(--radius-sm);transition:background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}.input-tool .button-secondary:hover:not(:disabled){background:var(--color-paper-2);border-color:var(--color-accent)}.input-tool .measurement__label,.input-tool .keyboard-pad__prompt,.input-tool .mouse-pad p{color:var(--color-muted)}.input-tool .status{border-color:var(--color-rule)}.input-tool .keyboard-pad{background:var(--color-paper-3);border-color:var(--color-rule);border-radius:var(--radius-sm)}.input-tool .key{border-color:var(--color-rule);border-bottom-color:var(--color-rule);border-radius:var(--radius-sm);background:var(--color-paper);color:var(--color-ink);font-family:var(--font-mono)}.input-tool .key.is-tested{background:var(--color-paper-2);border-color:var(--color-neutral)}.input-tool .key.is-pressed{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-accent-ink)}.input-tool .mouse-pad{border-color:var(--color-rule);background-color:var(--color-paper);background-image:none}.input-tool .mouse-pad__coordinates{color:var(--color-muted);font-family:var(--font-mono)}.input-tool .mouse-pad__cross,.input-tool .mouse-pad__cross:after{border-color:var(--color-rule)}.input-tool .mouse-pad__dot{border-color:var(--color-accent);background:var(--color-paper)}.input-tool .screen-pattern{background:var(--color-paper);color:var(--color-ink)}.input-tool .screen-pattern span{background:var(--color-paper-2);color:var(--color-ink);border-color:var(--color-rule);font-family:var(--font-mono)}.input-tool .screen-controls{background:var(--color-paper-2)}.input-tool .observation-field{border-color:var(--color-rule);border-radius:var(--radius-sm)}.input-tool .observation-field legend{color:var(--color-muted)}.input-tool .observation-field input{accent-color:var(--color-accent)}
@media(max-width:650px){.input-tool{padding:15px}.input-tool .tool-stage{padding:12px}.input-tool .screen-stage{padding:0}.input-tool .tool-controls{gap:8px;padding-bottom:13px}.input-tool .button-secondary{font-size:12px;padding:9px 12px}.input-tool .keyboard-pad{padding:13px 10px}.input-tool .keyboard-grid{min-width:550px}.input-tool .key{height:35px}.input-tool .measurement-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.input-tool .measurement strong{font-size:13px}.input-tool .measurement{padding:12px}.input-tool .mouse-pad{min-height:210px}.input-tool .screen-pattern{min-height:220px}.input-tool .screen-controls{padding:13px}.input-tool .screen-stage:fullscreen .screen-controls{bottom:12px;gap:6px}.input-tool .screen-stage:fullscreen .button,.input-tool .screen-stage:fullscreen .button-secondary{font-size:11px;padding:8px 10px;min-height:36px}}

/* User-selected clean mode: square edges across all interactive surfaces. */
*,*::before,*::after{border-radius:0!important}