*{ box-sizing:border-box; }
body{ margin:0; min-height:100vh; background: radial-gradient(1300px 650px at 80% -12%, var(--bg-rad-area, var(--bg-rad-1)) 0%, transparent 55%), radial-gradient(950px 520px at -5% 8%, var(--bg-rad-2) 0%, transparent 50%), var(--ink); color:var(--text); font-family:'Inter',system-ui,sans-serif; line-height:1.55; -webkit-font-smoothing:antialiased; }
.wrap{ max-width:980px; margin:0 auto; padding:30px 22px 70px; }
nav.crumb{ display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; padding-bottom:14px; margin-bottom:8px; 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:var(--sp-3); 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:var(--r-card); font-size:11.5px; color:var(--muted-2); }
.refbar svg{ width:14px; height:14px; flex:none; color:var(--amber); }
.refbar b{ color:var(--muted); font-weight:600; }
.hero{ display:flex; align-items:center; gap:var(--sp-5); flex-wrap:wrap; margin-bottom:10px; }
.markwrap svg{ width:52px; height:52px; display:block; }
h1{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:clamp(28px,4.6vw,40px); letter-spacing:-.02em; margin:0; line-height:1.04; }
.tag{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); font-weight:600; font-family:'IBM Plex Mono',monospace; margin-bottom:7px; }
.lede{ font-size:15px; color:var(--muted); max-width:560px; margin:16px 0 0; }
.lede b{ color:var(--text); font-weight:600; }
.lede a{ color:var(--accent); text-decoration:none; border-bottom:1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.lede a:hover{ border-bottom-color:var(--accent); }
.divider{ height:1px; background:linear-gradient(90deg,var(--line-soft),transparent 75%); margin:34px 0 28px; }
.tools{ display:grid; grid-template-columns:1fr; gap:var(--sp-4); }
.tool{ position:relative; display:flex; align-items:center; gap:var(--sp-5); text-decoration:none; color:inherit; background:linear-gradient(180deg,var(--panel),var(--ink-2)); border:1px solid var(--line); border-radius:var(--r-panel); padding:20px 22px; overflow:hidden; transition:transform var(--t-2) var(--ease-out), border-color var(--t-2) var(--ease-out), box-shadow var(--t-2) var(--ease-out); }
.tool:before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent); opacity:.9; box-shadow:0 0 14px var(--accent); }
.tool:hover{ transform:translateY(-3px); border-color:color-mix(in srgb,var(--accent) 60%,var(--line)); box-shadow:var(--shadow-card); }
.tool .icon{ width:46px; height:46px; flex:none; }
.tool .body{ flex:1; min-width:0; }
.tool h2{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:18px; margin:0 0 4px; letter-spacing:-.005em; }
.tool p{ font-size:13px; color:var(--muted); margin:0; max-width:56ch; }
.tool .eq{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--muted-2); margin-top:7px; }
.tool .go{ flex:none; display:flex; align-items:center; gap:var(--sp-2); color:var(--accent); font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:600; }
.tool .go svg{ width:13px; height:13px; transition:transform var(--t-2) var(--ease-out); }
.tool:hover .go svg{ transform:translateX(3px); }
@media (max-width:760px){ .tool{ flex-wrap:wrap; } .tool .go{ width:100%; justify-content:flex-end; } }
footer{ margin-top:48px; padding-top:18px; border-top:1px solid var(--line-soft); font-size:11.5px; color:var(--muted-2); display:flex; gap:var(--sp-4); flex-wrap:wrap; align-items:center; }
footer a{ color:var(--muted); text-decoration:none; }
footer a:hover{ color:var(--text); }
footer .fill{ flex:1; }
footer.hubfoot{ gap:var(--sp-2); }
footer.hubfoot .hf-label{ font-family:'IBM Plex Mono',monospace; font-size:10px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2); margin-right:var(--sp-1); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; } }

@media (pointer:coarse){
  .hubfoot a{ display:inline-block; padding:4px 0; }
}