/* tool.css — shared tool-page styles extracted from per-page <style> blocks.
   Pages set --accent/--accent-dim to their area colour; any page-local rule
   loaded after this sheet overrides it, so page-specific variants still win. */

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
svg{ user-select:none; }
body{ margin:0; background: radial-gradient(1200px 600px at 78% -10%, var(--bg-rad-1) 0%, transparent 55%), radial-gradient(900px 500px at 0% 0%, var(--bg-rad-2) 0%, transparent 50%), var(--ink); color:var(--text); font-family:'Inter',system-ui,sans-serif; line-height:1.5; -webkit-font-smoothing:antialiased; }
.wrap{ max-width:1180px; margin:0 auto; padding:26px 20px 64px; }
nav.crumb{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding-bottom:13px; margin-bottom:7px; font-family:'IBM Plex Mono',monospace; font-size:11.5px; }
nav.crumb a{ color:var(--muted); text-decoration:none; }
nav.crumb a:hover{ color:var(--text); }
nav.crumb .sep{ color:var(--muted-2); }
nav.crumb .here{ color:var(--accent); font-weight:600; letter-spacing:.03em; }
.refbar{ display:flex; align-items:center; gap:9px; padding:9px 13px; margin:28px 0 18px; background:linear-gradient(90deg,var(--banner-a),var(--banner-b)); border:1px solid var(--line-soft); border-radius:10px; font-size:11.5px; color:var(--muted-2); }
.refbar b{ color:var(--muted); font-weight:600; }
.refbar svg{ width:14px; height:14px; flex:none; color:var(--amber); }
header.mast{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; padding-bottom:18px; border-bottom:1px solid var(--line-soft); margin-bottom:20px; }
.brand{ display:flex; align-items:center; gap:13px; }
.glyph{ width:42px; height:42px; flex:none; }
.mast h1{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:clamp(22px,3vw,30px); letter-spacing:-.02em; margin:0; line-height:1; }
.mast .sub{ font-size:12.5px; color:var(--muted); margin-top:5px; }
.mast .kicker{ font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); font-weight:600; font-family:'IBM Plex Mono',monospace; }
.mast .right{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--muted-2); text-align:right; }
.mast .right b{ color:var(--text); font-weight:600; }
.panel{ background:linear-gradient(180deg,var(--panel),var(--ink-2)); border:1px solid var(--line); border-radius:16px; padding:18px; }
.panel .head .dot{ width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 10px var(--accent); }
.panel .head h2{ font-family:'Space Grotesk',sans-serif; font-size:15px; font-weight:600; margin:0; }
.panel .head .tag{ margin-left:auto; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); font-family:'IBM Plex Mono',monospace; }
.field:last-child{ margin-bottom:0; }
.field > label{ display:block; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted-2); font-weight:600; margin-bottom:7px; }
.hero-head{ display:flex; align-items:center; gap:10px; margin-bottom:8px; flex-wrap:wrap; }
.hero{ background:linear-gradient(180deg,var(--panel-2),var(--ink-2)); border:1px solid var(--line); border-radius:16px; padding:16px; }
.hero-head h2{ font-family:'Space Grotesk',sans-serif; font-size:15px; font-weight:600; margin:0; }
.hero-head .meta{ margin-left:auto; font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--muted-2); }
.ro{ background:linear-gradient(180deg,var(--panel),var(--ink-2)); border:1px solid var(--line); border-radius:12px; padding:13px 14px; position:relative; overflow:hidden; }
.ro.sm{ padding:11px 12px; }
.ro .k{ font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2); font-weight:600; }
.ro.sm .k{ font-size:9px; }
.readouts{ margin-top:16px; }
.ro-label{ font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2); font-weight:600; margin:2px 0 9px; }
.ro.cy:before{ background:var(--cyan); box-shadow:0 0 12px var(--cyan); }
.ro.gr:before{ background:var(--green); box-shadow:0 0 12px var(--green); }
.ro .alt{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--muted-2); margin-top:6px; }
.ro.sm .alt{ font-size:9.5px; margin-top:4px; }
.ro.cy .v{ color:var(--cyan); }
.ro.gr .v{ color:var(--green); }
section.block{ margin-top:26px; }
.rhead{ display:flex; align-items:baseline; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.rhead .ey{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); font-weight:600; font-family:'IBM Plex Mono',monospace; }
.rhead h2{ font-family:'Space Grotesk',sans-serif; font-size:19px; font-weight:600; margin:0; letter-spacing:-.01em; }
.gloss{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.gcard{ background:linear-gradient(180deg,var(--panel),var(--ink-2)); border:1px solid var(--line); border-radius:13px; padding:15px 17px; }
.gcard h3{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:14px; margin:0 0 6px; }
.gcard p{ font-size:12.5px; color:var(--muted); line-height:1.6; margin:0; }
.gcard b{ color:var(--text); font-weight:600; }
footer{ margin-top:34px; padding-top:18px; border-top:1px solid var(--line-soft); font-size:11.5px; color:var(--muted-2); line-height:1.6; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }