.tool-page{min-height:calc(100dvh - 155px);padding-block:63px 100px}.breadcrumbs{display:flex;gap:10px;align-items:center;margin-bottom:30px;color:var(--muted);font-size:12px;font-weight:700}.breadcrumbs a:hover{color:var(--purple)}.tool-heading{display:flex;align-items:center;gap:19px;margin-bottom:17px}.tool-heading-icon{display:grid;place-items:center;width:67px;height:67px;border-radius:20px;font-size:29px;color:#302b4c;background:#dfff84}.tool-page h1{font-size:clamp(43px,5vw,65px);line-height:1.1;margin:0}.tool-subtitle{max-width:750px;color:var(--muted);line-height:1.72;font-size:16px;margin-bottom:31px}.workspace{background:var(--white);border:1px solid var(--line);border-radius:24px;padding:26px;box-shadow:var(--shadow)}.workspace-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px}.workspace-head h2{font-size:19px;letter-spacing:-.025em;margin:0}.tool-action-row{display:flex;gap:9px;flex-wrap:wrap;align-items:center}.tool-btn{border:1px solid var(--line);background:var(--bg);color:var(--ink);padding:11px 15px;border-radius:11px;font-weight:800;font-size:12px;transition:transform .2s,border-color .2s}.tool-btn:hover{transform:translateY(-2px);border-color:var(--purple)}.tool-btn.primary{background:var(--purple);border-color:var(--purple);color:#fff}.tool-btn.is-selected{background:var(--ink);color:var(--bg);border-color:var(--ink)}.tool-input{display:block;width:100%;padding:19px;border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:15px;resize:vertical;min-height:250px;line-height:1.7;font-size:14px}.tool-input.code{font:13px/1.65 ui-monospace,SFMono-Regular,Consolas,Monaco,monospace;tab-size:2}.tool-input::placeholder{color:var(--muted);opacity:.75}.workspace-split{display:grid;grid-template-columns:1fr 1fr;gap:20px}.tool-output{white-space:pre-wrap;word-break:break-word}.tool-status{min-height:24px;font-size:13px;font-weight:700;color:var(--muted);margin-top:13px}.tool-status.error{color:#d65b61}.tool-status.success{color:#308f5a}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-bottom:18px}.stat{padding:21px;border:1px solid var(--line);border-radius:17px;background:var(--bg)}.stat strong{display:block;font:700 34px/1.25 'Space Grotesk',sans-serif;letter-spacing:-.05em;overflow-wrap:anywhere}.stat span{display:block;font-size:12px;font-weight:700;color:var(--muted);margin-top:5px}.tool-explainer{margin-top:35px;max-width:750px}.tool-explainer h2{font-size:25px;margin-bottom:13px}.tool-explainer p{color:var(--muted);font-size:14px;line-height:1.8}.tool-explainer a{color:var(--purple);text-decoration:underline}.stack{display:grid;gap:19px}.case-buttons{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:17px}.palette-controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-bottom:24px}.palette-swatches{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.swatch{min-width:0;border:1px solid var(--line);border-radius:15px;overflow:hidden;background:var(--bg)}.swatch-color{height:238px;width:100%;display:flex;justify-content:end;align-items:start;padding:11px;border:none;cursor:pointer}.swatch-lock{border-radius:9px;background:#ffffffcc;border:0;color:#302848;padding:9px;font-size:16px}.swatch-info{display:flex;align-items:center;justify-content:space-between;gap:4px;padding:12px}.swatch-hex{background:none;border:0;color:var(--ink);font:700 12px 'Space Grotesk';letter-spacing:.01em;padding:0}.swatch-copy{background:none;border:0;color:var(--muted);font-size:17px}.color-tip{color:var(--muted);font-size:13px;line-height:1.6}.text-page{max-width:850px}.text-page .workspace{padding:34px}.text-page h1{margin-bottom:20px}.text-page p{line-height:1.8;color:var(--muted)}.text-page h2{margin-top:36px;font-size:25px}.text-page h3{font-size:20px;margin-top:28px}.text-page a:not(.button):not(.brand){color:var(--purple);text-decoration:underline;text-underline-offset:4px}
@media(max-width:740px){.tool-page{padding-block:38px 65px}.workspace{padding:18px}.workspace-split{grid-template-columns:1fr}.workspace-head{align-items:start;flex-direction:column}.stats{grid-template-columns:repeat(2,1fr)}.palette-swatches{grid-template-columns:repeat(5,minmax(115px,1fr));overflow-x:auto;padding-bottom:8px}.swatch-color{height:190px}.text-page .workspace{padding:21px}.tool-heading-icon{width:53px;height:53px;font-size:24px}.tool-heading{gap:12px}}