.tool-page{max-width:1240px;margin:auto;padding:24px 32px 64px}.tool-breadcrumb{display:flex;gap:12px;color:var(--ink-2);font-size:13px;flex-wrap:wrap;margin-bottom:40px}.tool-heading{max-width:850px;margin-bottom:32px}.tool-heading h1{max-width:24ch;margin-bottom:16px}.tool-heading>p{font-size:20px;color:var(--ink-2);max-width:52ch}.tool-workbench{display:grid;grid-template-columns:minmax(280px,360px) minmax(0,1fr);border-block:1px solid var(--line-strong);background:var(--surface);min-height:450px}.tool-controls{padding:24px;border-right:1px solid var(--line);min-width:0}.tool-controls h2{font-size:22px}.tool-controls label:not(:first-child){margin-top:16px}.tool-controls .actions{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0}.tool-controls .actions button{white-space:normal}.tool-controls input[type=color]{height:64px}.tool-controls textarea{resize:vertical}.tool-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}.tool-pair label{margin-top:0!important}.tool-preview{margin:0;display:flex;flex-direction:column;justify-content:center;min-width:0;background-color:var(--fabric-1);padding:32px}.preview-scroll{max-height:620px;overflow:auto;display:grid;place-items:start center;padding:16px;min-width:0}.tool-preview canvas{max-width:100%;height:auto;image-rendering:pixelated;border:1px solid var(--line-strong)}.tool-preview figcaption{font:13px/1.6 Geist Mono,monospace;color:var(--ink-2);padding-top:20px;max-width:60ch}.tool-status{font-size:13px;color:var(--ink-2);margin-top:16px}.tool-error{color:var(--danger);border-left:3px solid var(--danger);padding-left:12px;font-size:14px}.tool-results{padding:24px;min-width:0;max-height:720px;overflow:auto}.dmc-results{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px}.dmc-swatch{display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line);padding:16px 0}.dmc-swatch .swatch{width:48px;height:64px;flex:none;border:1px solid var(--line-strong)}.dmc-swatch strong{font-family:Geist Mono,monospace}.dmc-swatch p{font-size:13px;margin:0}.dmc-swatch small{font-family:Geist Mono,monospace;color:var(--ink-2)}.calc-result{border-bottom:1px solid var(--line);padding:24px 0}.calc-result:first-child{padding-top:0}.calc-result dt{font-size:14px;color:var(--ink-2)}.calc-result dd{font:33px/1.4 Departure Mono,monospace;margin:12px 0 0}.calc-result .explain{font:14px/1.6 Geist,sans-serif;color:var(--ink-2)}.font-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-block:48px}.font-gallery article{min-width:0;border-bottom:1px solid var(--line-strong);padding-bottom:24px}.font-gallery h2{font:18px Geist,sans-serif;margin-bottom:16px}.font-gallery canvas{width:100%;height:auto;image-rendering:pixelated;background:var(--fabric-1)}.font-gallery p{margin-top:12px}.tool-explanation{margin:64px 0;display:grid;grid-template-columns:1fr 1fr;gap:64px}.tool-explanation>div{max-width:54ch}.tool-explanation ol{margin:0;padding-left:24px}.tool-explanation li{padding-left:12px;margin-bottom:24px}.tool-explanation h3{margin:0 0 8px}.tool-explanation p{color:var(--ink-2)}.related-tools{border-top:2px dashed var(--line-strong);padding-top:32px}.related-tools nav{display:grid;grid-template-columns:repeat(3,1fr);gap:0 24px}.related-tools a{padding:16px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:8px;font-size:14px}@media(max-width:900px){.tool-page{padding-inline:24px}.tool-workbench{grid-template-columns:minmax(240px,320px) minmax(0,1fr)}.dmc-results{grid-template-columns:1fr}.font-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.tool-explanation{gap:32px}.related-tools nav{grid-template-columns:repeat(2,1fr)}}@media(max-width:640px){.tool-page{padding:20px 16px 48px}.tool-breadcrumb{margin-bottom:28px}.tool-heading h1{font-size:33px}.tool-heading>p{font-size:18px}.tool-workbench{grid-template-columns:1fr}.tool-controls{border-right:0;border-bottom:1px solid var(--line);padding:20px}.tool-preview{padding:20px 12px}.preview-scroll{max-height:420px;padding:8px}.tool-results{max-height:540px;padding:20px}.tool-explanation{grid-template-columns:1fr;margin-block:40px}.tool-explanation h2,.related-tools h2{font-size:22px}.font-gallery{grid-template-columns:1fr;gap:24px}.related-tools nav{grid-template-columns:1fr}.dmc-results{grid-template-columns:1fr}.calc-result dd{font-size:22px}}