.tools-page{padding:56px 0 72px}.tools-heading{margin-bottom:48px}.tools-heading h1{max-width:100%;color:var(--editorial-heading);letter-spacing:-.055em;margin:0;font-size:clamp(36px,4vw,62px);line-height:1.07}.tools-heading>p:last-child{color:var(--navy-soft);margin:28px 0 0;font-size:19px;line-height:1.6}.tools-heading .eyebrow{color:var(--sky-strong)}.keyboard-workspace{grid-template-columns:minmax(0,2.25fr) minmax(290px,1fr);align-items:stretch;gap:20px;scroll-margin-top:120px;display:grid}.keyboard-canvas{--plot-height:340px;color:#f8f4ed;background:#071f31;border:1px solid #294153;border-radius:4px;min-width:0;padding:24px}.comparison-topbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:18px;display:flex}.comparison-modes{flex-wrap:wrap;gap:6px;display:flex}.keyboard-canvas button,.keyboard-canvas select{color:#f8f4ed;min-height:44px;font:inherit;background:#0a2940;border:1px solid #61778a;border-radius:4px;font-size:14px}.keyboard-canvas button{cursor:pointer;padding:10px 15px}.keyboard-canvas button:disabled{opacity:.45;cursor:default}.comparison-modes button[aria-pressed=true]{background:#3c2c25;border-color:#ff9b61;box-shadow:inset 0 -3px #ff9b61}.layout-legend{flex-wrap:wrap;gap:18px;font-size:14px;display:flex}.layout-legend span{align-items:center;gap:8px;display:flex}.layout-legend span:before{content:"";border-top:3px solid #ff9b61;width:24px;display:block}.layout-legend .layout-b:before{border-color:#64d0fa;border-top-style:dashed}.keyboard-viewport{scrollbar-color:#8ba7bd #071f31;border-block:1px solid #294153;max-height:570px;margin:24px 0 16px;padding:16px 4px;overflow:auto}.keyboard-plot{min-width:0;max-width:none;max-height:none;margin-inline:auto;display:block}.keyboard-plot rect{fill:#0000;vector-effect:non-scaling-stroke;stroke-width:1.8px}.layout-keys-a rect{stroke:#ff9b61}.layout-keys-b rect{stroke:#64d0fa;stroke-dasharray:5 3}.canvas-caption{margin:0 0 20px;font-size:16px;line-height:1.5}.comparison-controls{flex-wrap:wrap;align-items:flex-end;gap:12px;display:flex}.comparison-controls label{color:#c2d0dc;flex:170px;gap:7px;min-width:0;font-size:13px;display:grid}.comparison-controls select{text-overflow:ellipsis;width:100%;max-width:100%;padding:10px}.comparison-controls .swap-layouts{padding-inline:10px;font-size:12px}.comparison-zoom{align-items:center;gap:8px;display:flex}.comparison-zoom output{text-align:center;min-width:42px;font-size:14px}.alignment-note{color:#b6c8d8;margin:16px 0 0;font-size:13px;line-height:1.6}.comparison-explainer{border:1px solid var(--light-line);background:var(--warm-panel);border-radius:4px;min-width:0;padding:24px}.comparison-explainer>h2{color:var(--editorial-heading);letter-spacing:-.04em;margin:0;font-size:32px}.comparison-explainer>p{color:var(--navy-soft);font-size:16px;line-height:1.6}.comparison-explainer section{border-top:1px solid var(--light-line);align-items:flex-start;gap:16px;padding:18px 0;display:flex}.explanation-number{background:var(--navy);height:34px;color:var(--warm);border-radius:50%;flex:0 0 34px;place-items:center;font-size:13px;font-weight:800;display:grid}.comparison-explainer h3{margin:3px 0 10px;font-size:18px}.comparison-explainer section p{color:var(--navy-soft);margin:8px 0;font-size:14px;line-height:1.65}.comparison-explainer .case-note{border-top:1px solid var(--light-line);padding-top:20px;font-size:14px}.comparison-summary{color:var(--navy-soft);font-size:14px;line-height:1.6}.layout-sources{border-top:1px solid var(--light-line);color:var(--navy-soft);padding:12px 0;font-size:14px;line-height:1.7}.layout-sources summary{cursor:pointer;min-height:44px;color:var(--navy);padding-block:10px;font-weight:700}.layout-sources a{text-underline-offset:3px;text-decoration:underline}.layout-sources small{overflow-wrap:anywhere;display:block}.tools-directory{border-top:1px solid var(--light-line);grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:32px;padding-top:28px;display:grid}.tools-directory h2{letter-spacing:-.035em;margin:0;font-size:25px}.tools-directory h3{margin:0 0 10px;font-size:16px}.tools-directory p{color:var(--navy-soft);font-size:14px;line-height:1.6}.tools-directory article{border-left:1px solid var(--light-line);padding-left:24px}.tool-status{color:var(--navy-soft);background:var(--warm-raised);border-radius:3px;margin-bottom:10px;padding:5px 9px;font-size:12px;display:inline-block}.tool-current a{text-underline-offset:4px;min-height:44px;padding-block:12px;font-size:14px;font-weight:700;text-decoration:underline;display:inline-block}@media (max-width:1100px){.keyboard-workspace{grid-template-columns:minmax(0,1fr)}.comparison-explainer{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:24px;display:grid}.comparison-explainer>h2,.comparison-explainer>p{grid-column:1/-1}.comparison-explainer section{gap:10px}.tools-directory{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:600px){.tools-page{padding-top:28px}.tools-heading{margin-bottom:30px}.tools-heading>p:last-child{font-size:16px}.keyboard-canvas{--plot-height:280px;padding:16px}.keyboard-viewport{max-height:420px;padding-inline:0}.comparison-controls{grid-template-columns:minmax(0,1fr) minmax(0,1fr);display:grid}.comparison-controls label,.comparison-controls .swap-layouts{grid-column:1/-1}.comparison-explainer{padding:20px;display:block}.comparison-explainer>h2{font-size:30px}.tools-directory{grid-template-columns:minmax(0,1fr);gap:20px}.tools-directory article{border-left:0;border-top:1px solid var(--light-line);padding:20px 0 0}}.comparison-actions{flex-wrap:wrap;justify-content:flex-end;gap:10px;margin:-24px 0 18px;display:flex}.comparison-actions button,.expanded-toolbar button{border:1px solid var(--light-line);min-height:44px;color:var(--navy);background:var(--warm-panel);font:inherit;cursor:pointer;border-radius:4px;padding:10px 16px;font-size:14px;font-weight:700}.comparison-expanded{z-index:1000;overscroll-behavior:contain;padding:max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));background:var(--warm);align-content:start;position:fixed;inset:0;overflow:auto}.comparison-expanded::backdrop{background:var(--warm)}.expanded-toolbar{color:var(--navy);grid-column:1/-1;justify-content:space-between;align-items:center;gap:16px;display:flex}.print-layout-details{display:none}@media (max-width:600px){.comparison-actions{margin-top:0}.comparison-expanded{padding:12px}}@page{size:landscape;margin:12mm}@media print{html,body,#storefront-shell,#main-content,.tools-page{color:#000!important;background:#fff!important;min-height:0!important;margin:0!important;padding:0!important}.site-header,.site-footer,.skip-link,.comparison-actions,.comparison-controls,.comparison-modes,.expanded-toolbar,.comparison-explainer,.tools-directory,.layout-sources,.comparison-summary,.tools-heading .eyebrow,.tools-heading>p:last-child{display:none!important}.tools-heading{margin:0 0 5mm}.tools-heading h1{color:#000;font-size:22pt}.tools-heading .scribble-title:after{display:none}.keyboard-workspace,.comparison-expanded{width:100%;padding:0;display:block;position:static;overflow:visible}.keyboard-canvas{color:#000;break-inside:avoid;background:#fff;border:1px solid #777;padding:5mm}.layout-legend{color:#000}.layout-legend span:before,.layout-legend .layout-b:before{border-color:#000}.keyboard-viewport{border:0;max-height:none;margin:3mm 0;padding:0;overflow:visible}.keyboard-plot{width:100%!important;height:115mm!important}.layout-keys-a rect{stroke:#111}.layout-keys-b rect{stroke:#555}.canvas-caption{margin:0;font-size:10pt}.alignment-note,.print-layout-details{color:#000;margin:2mm 0 0;font-size:9pt}.print-layout-details{display:block}}