.tool-hero{background:var(--ink);color:var(--paper);padding:72px 0 36px}
.tool-hero .eyebrow{display:inline-flex;padding:6px 14px;border:1px solid rgba(250,250,250,0.2);border-radius:999px;font-family:var(--font-mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:rgba(250,250,250,.65);margin-bottom:20px}
.tool-hero h1{font-family:var(--font-display);font-style:italic;font-size:72px;line-height:.96;letter-spacing:-.025em;margin:0 0 16px}
.tool-hero h1 .accent{color:var(--accent)}
.tool-hero p{font-family:var(--font-sans);font-size:18px;line-height:1.5;color:rgba(250,250,250,.78);max-width:660px;margin:0}
.tool-wrap{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:48px 0 24px}
.tool-card{border:1px solid var(--line);border-radius:18px;background:var(--paper);padding:28px}
.tool-card.out{background:var(--ink);color:var(--paper)}
.tool-f{margin-bottom:18px}
.tool-f label{display:block;font-family:var(--font-sans);font-size:13px;font-weight:600;letter-spacing:-.01em;margin-bottom:7px}
.tool-ig{display:flex;align-items:center;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.tool-ig .pre,.tool-ig .suf{padding:0 12px;font-family:var(--font-mono);font-size:14px;color:var(--mute);background:var(--warm);align-self:stretch;display:flex;align-items:center}
.tool-ig input{flex:1;border:none;outline:none;padding:12px 12px;font-family:var(--font-sans);font-size:16px;color:var(--ink);width:100%}
.to-row{display:flex;justify-content:space-between;align-items:baseline;padding:14px 0;border-bottom:1px solid rgba(250,250,250,.12)}
.to-row:last-child{border-bottom:none}
.to-k{font-family:var(--font-sans);font-size:14px;color:rgba(250,250,250,.7)}
.to-v{font-family:var(--font-display);font-style:italic;font-size:34px;letter-spacing:-.02em;color:var(--paper)}
.to-v.accent{color:var(--accent)}
.tool-card.out h3{font-family:var(--font-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:rgba(250,250,250,.55);margin:0 0 14px}
.tool-cross{padding:24px 0 64px}
.tool-cross .b{border:1px solid var(--line);border-radius:16px;padding:24px 28px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;background:var(--paper-warm)}
.tool-cross .b p{margin:0;font-family:var(--font-sans);font-size:16px;color:var(--ink)}
.tool-cross .b strong{font-weight:700}
.tool-other{padding:8px 0 72px}
.tool-other h2{font-family:var(--font-sans);font-size:22px;font-weight:700;letter-spacing:-.02em;margin:0 0 18px}
.tool-other .g{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tool-other a{display:block;padding:14px 16px;border:1px solid var(--line);border-radius:10px;text-decoration:none;color:var(--ink);font-family:var(--font-sans);font-size:14px;font-weight:500;transition:border-color 120ms,transform 120ms}
.tool-other a:hover{border-color:var(--accent);transform:translateX(2px)}
.tool-idx{padding:40px 0 72px}
.tool-cat{font-family:var(--font-mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);margin:36px 0 14px}
.tool-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.tool-tile{display:flex;flex-direction:column;gap:6px;padding:20px 22px;border:1px solid var(--line);border-radius:14px;text-decoration:none;color:var(--ink);background:var(--paper);transition:border-color 150ms,transform 150ms}
.tool-tile:hover{border-color:var(--accent);transform:translateY(-2px)}
.tool-tile .t{font-family:var(--font-sans);font-size:18px;font-weight:700;letter-spacing:-.02em}
.tool-tile .d{font-family:var(--font-sans);font-size:13px;color:var(--mute);line-height:1.45}
.to-code{font-family:var(--font-mono);font-size:13px;line-height:1.6;color:var(--paper);white-space:pre-wrap;word-break:break-word;margin:6px 0 0}
.to-copy{margin-top:14px;font-family:var(--font-sans);font-weight:600;font-size:13px;padding:9px 16px;border-radius:999px;border:1px solid var(--accent);background:var(--accent);color:#fff;cursor:pointer}
.tool-card.out textarea,.tool-card textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:12px;font-family:var(--font-mono);font-size:14px;resize:vertical;box-sizing:border-box}
.tool-f select{width:100%;padding:12px;border:1px solid var(--line);border-radius:10px;font-family:var(--font-sans);font-size:16px;background:#fff}
@media(max-width:820px){.tool-wrap{grid-template-columns:1fr}.tool-hero h1{font-size:48px}.tool-other .g,.tool-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.tool-other .g,.tool-grid{grid-template-columns:1fr}}

/* responsive-fixes: grid items must shrink (min-width:auto footgun); cap result media/code */
.tool-card{min-width:0;}
.tool-card img,.tool-card pre,.tool-card canvas,.tool-card svg,.tool-card table{max-width:100%;}
.tool-card pre,.to-code{overflow-x:auto;}

/* responsive-fixes: long result values wrap instead of overflowing the row */
.to-row{flex-wrap:wrap;gap:2px 12px;}
.to-k,.to-v{min-width:0;overflow-wrap:break-word;word-break:break-word;}
@media(max-width:520px){.to-v{font-size:24px;}}