.page-hero { position: relative; min-height: 64vh; display:flex; align-items:flex-end; padding: 150px 0 74px; overflow:hidden; color:#fff; background:
  radial-gradient(circle at 82% 24%, rgba(255,166,112,.9) 0 5%, rgba(255,95,114,.46) 13%, rgba(139,103,255,.18) 30%, transparent 40%),
  linear-gradient(145deg,#07101d,#17254c 45%,#4d2d72 76%,#a44477);
}
.page-hero::before { content:""; position:absolute; inset:auto -12% -44% 26%; height:70%; border:1px solid rgba(255,255,255,.1); border-radius:50%; transform:rotate(-8deg); box-shadow:0 0 0 80px rgba(255,255,255,.02),0 0 0 160px rgba(255,255,255,.018); }
.page-hero .lead { color:#bac4d4; margin-top:24px; }
.page-main { background:var(--paper); color:var(--text-dark); min-height:50vh; }
.breadcrumb { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:22px; color:rgba(255,255,255,.65); font-size:13px; }
.breadcrumb a:hover { color:#fff; }
.content-grid { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:72px; }
.article { max-width:900px; }
.article h2 { margin:64px 0 18px; font-size:clamp(2rem,4vw,3.6rem); letter-spacing:-.05em; }
.article h3 { margin:42px 0 14px; font-size:1.5rem; letter-spacing:-.03em; }
.article p, .article li { color:#4f5968; line-height:1.85; }
.article code { background:#ece7de; border-radius:7px; padding:2px 6px; font-family:ui-monospace,monospace; }
.article pre { padding:20px; overflow:auto; border-radius:18px; background:#0a1424; color:#d6e2f0; }
.article blockquote { margin:32px 0; padding:18px 22px; border-left:4px solid var(--sunset-coral); background:#fff; color:#354054; }
.toc { position:sticky; top:110px; height:fit-content; padding:20px; border-left:1px solid var(--line-light); }
.toc strong { display:block; margin-bottom:14px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; }
.toc a { display:block; padding:7px 0; color:#697383; font-size:14px; }
.toc a:hover { color:#111827; }

.tools-index { padding:80px 0 140px; }
.filter-bar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; margin-bottom:38px; }
.tool-search { min-width:min(100%,420px); flex:1; border:1px solid var(--line-light); border-radius:999px; background:#fff; padding:14px 18px; outline:0; }
.tool-search:focus { border-color:var(--signal-violet); box-shadow:0 0 0 4px rgba(139,103,255,.12); }
.filters { display:flex; flex-wrap:wrap; gap:8px; }
.filter { border:1px solid var(--line-light); border-radius:999px; background:transparent; padding:10px 14px; cursor:pointer; font-weight:700; color:#4f5968; }
.filter.is-active { background:#111827; color:#fff; }
.tool-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.tool-tile { min-height:260px; padding:24px; border:1px solid var(--line-light); border-radius:24px; background:#fff; display:flex; flex-direction:column; transition:transform .25s var(--ease-spring), box-shadow .25s ease; }
.tool-tile:hover { transform:translateY(-6px); box-shadow:var(--shadow-soft); }
.tool-tile .tool-icon { width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(145deg,#ffe2d3,#eadcff);color:#362f63;font-weight:900; }
.tool-tile h2 { margin:34px 0 10px; font-size:1.55rem; letter-spacing:-.035em; }
.tool-tile p { color:#687181; line-height:1.65; }
.tool-tile footer { margin-top:auto; display:flex; justify-content:space-between; color:#7a8290; font-size:13px; }

.status-board { display:grid; gap:12px; }
.status-row { display:grid; grid-template-columns:1.4fr .8fr auto; gap:18px; align-items:center; padding:18px 20px; border:1px solid var(--line-light); border-radius:16px; background:#fff; }
.status-value { color:#596273; font-family:ui-monospace,monospace; font-size:13px; word-break:break-all; }
.status-badge { justify-self:end; padding:7px 10px; border-radius:999px; background:#e5f8ef; color:#14744e; font-size:12px; font-weight:800; }
.status-badge.bad { background:#ffe8e9;color:#a93642; }

.info-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.info-card { padding:26px; border:1px solid var(--line-light); border-radius:24px; background:#fff; }
.info-card h2 { margin:18px 0 12px; font-size:1.7rem; letter-spacing:-.04em; }
.info-card p { color:#687181; line-height:1.7; }

.timeline { position:relative; display:grid; gap:24px; }
.timeline::before { content:""; position:absolute; left:18px; top:12px; bottom:12px; width:1px; background:var(--line-light); }
.timeline-item { position:relative; display:grid; grid-template-columns:38px 1fr; gap:18px; }
.timeline-dot { width:14px;height:14px;margin:8px 0 0 11px;border-radius:50%;background:linear-gradient(145deg,var(--sunset-coral),var(--signal-violet));box-shadow:0 0 0 7px #f7f3ec;z-index:1; }
.timeline-card { padding:24px;border:1px solid var(--line-light);border-radius:20px;background:#fff; }
.timeline-card h2 { margin:0 0 8px; }
.timeline-card p { color:#687181;line-height:1.7; }

@media (max-width:1000px){.tool-grid,.info-cards{grid-template-columns:1fr 1fr}.content-grid{grid-template-columns:1fr}.toc{position:static;border-left:0;border-top:1px solid var(--line-light)}}
@media (max-width:680px){.tool-grid,.info-cards{grid-template-columns:1fr}.status-row{grid-template-columns:1fr}.status-badge{justify-self:start}.page-hero{min-height:560px}}