.tool-page{display:grid;gap:clamp(2rem,4vw,3rem);max-width:1120px;margin:0 auto;padding:clamp(2.5rem,6vw,4.5rem) clamp(1.25rem,4vw,2.5rem) 6rem}.tool-head{display:grid;gap:var(--echo-space-5)}.tool-eyebrow,.tool-label{margin:0;font-family:var(--echo-font-machine);font-size:var(--echo-text-3xs);font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--echo-text-dim)}.tool-title{margin:0;font-family:var(--site-font-display),var(--echo-font-sans);font-size:clamp(2rem,5vw,2.6rem);font-weight:800;line-height:1.02;letter-spacing:-.03em;color:var(--echo-text)}.tool-lede{margin:0;max-width:60ch;font-size:var(--echo-text-lg);line-height:1.6;color:var(--echo-text-dim)}.tool-lede code{font-family:var(--echo-font-mono);font-size:.9em;color:var(--echo-text)}.tool-status{min-height:1.2em;margin:0;font-family:var(--echo-font-machine);font-size:var(--echo-text-2xs);color:var(--echo-text-dim)}.tool-value{font-family:var(--echo-font-mono);font-size:var(--echo-text-xs);font-feature-settings:"tnum";font-variant-numeric:tabular-nums;text-align:right;color:var(--echo-text);white-space:nowrap;flex-shrink:0}.tool-swatch{position:relative;flex:none;width:var(--echo-control-default);height:var(--echo-control-default);border-radius:var(--echo-radius-md);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -2px 3px rgba(0,0,0,.3),0 2px 0 var(--echo-cap-shadow),0 5px 10px rgba(0,0,0,.35);cursor:pointer}.tool-swatch input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.tool-swatch:has(input:focus-visible){outline:2px solid var(--echo-accent-ink,var(--echo-accent-glow));outline-offset:3px}.tool-presets{display:flex;flex-wrap:wrap;gap:var(--echo-space-6)}.tool-preset{display:grid;justify-items:center;gap:var(--echo-space-3);padding:0;border:0;background:none;color:var(--echo-text-dim);font-family:var(--echo-font-machine);font-size:var(--echo-text-3xs);letter-spacing:.14em;text-transform:uppercase;cursor:pointer}.tool-preset__chip{width:36px;height:36px;border-radius:var(--echo-radius-md);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -2px 3px rgba(0,0,0,.3),0 2px 0 var(--echo-cap-shadow);transition:transform var(--echo-duration-press) var(--echo-ease-tick)}.tool-preset:active .tool-preset__chip{transform:translateY(2px)}.tool-preset[aria-pressed=true]{color:var(--echo-text)}.tool-preset[aria-pressed=true] .tool-preset__chip{outline:2px solid var(--echo-text);outline-offset:3px}.tool-preset:focus-visible{outline:none}.tool-preset:focus-visible .tool-preset__chip{outline:2px solid var(--echo-accent-ink,var(--echo-accent-glow));outline-offset:3px}@media (prefers-reduced-motion:reduce){.tool-preset__chip{transition:none}.tool-preset:active .tool-preset__chip{transform:none}}