/* Shared tool-page frame. Card internals remain owned by cards/<slug>.html.
   One versioned stylesheet instead of the same inline CSS on 1,391 pages. */
/* tp- chrome: the page is one tool, full-size. The card styles itself; this
   is only the frame — nav, search, crumbs, previous/next, related, footer. */
:root{--tp-accent:var(--accent,#2dd4ff);--tp-gold:#ffd700;--tp-text:#e6faff;--tp-muted:rgba(230,250,255,.72);--tp-line:rgba(255,255,255,.14);--tp-surface:#141e28}
*{box-sizing:border-box}
html{color-scheme:dark;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;padding:0;background-color:#0a0f14;background:linear-gradient(135deg,var(--mp-bg1,#0a0f14),var(--mp-bg2,#141e28)) fixed;color:var(--tp-text);font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
::selection{background:rgba(45,212,255,.3);color:#fff}
:focus-visible{outline:2px solid var(--tp-accent);outline-offset:2px;border-radius:4px}
a{color:inherit}
.tp-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.tp-skip{position:absolute;top:0;left:0;z-index:2000;padding:10px 16px;font-size:.9rem;font-weight:700;color:#04141c;background:var(--tp-accent);border-radius:0 0 10px 0;text-decoration:none;transform:translateY(-130%);transition:transform .14s ease}
.tp-skip:focus-visible{transform:translateY(0);outline:2px solid #fff;outline-offset:2px}
.tp-nav{position:sticky;top:0;z-index:100;background:rgba(10,15,20,.95);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--tp-line)}
.tp-nav-in{max-width:1100px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:12px}
.tp-brand{display:flex;align-items:center;gap:9px;text-decoration:none;font-weight:800;font-size:.9rem;color:var(--tp-text);min-width:0}
.tp-brand:hover{color:var(--tp-accent)}
.tp-mark{display:block;flex:none}
.tp-search{flex:1;min-width:0}
.tp-search input{width:100%;min-height:40px;padding:9px 14px;font:inherit;font-size:.88rem;color:var(--tp-text);background:rgba(255,255,255,.05);border:1px solid var(--tp-line);border-radius:10px;outline:none}
.tp-search input::placeholder{color:var(--tp-muted)}
.tp-search input:focus-visible{outline:2px solid var(--tp-accent);outline-offset:1px}
.tp-nav-acts{display:flex;gap:8px;margin-left:auto}
.tp-link{display:inline-flex;align-items:center;min-height:40px;padding:8px 12px;border-radius:10px;border:1px solid var(--tp-line);background:rgba(255,255,255,.04);color:var(--tp-text);font-size:.82rem;font-weight:600;text-decoration:none;white-space:nowrap}
.tp-link:hover{border-color:var(--tp-accent);color:var(--tp-accent)}
@media (max-width:760px){
  .tp-nav-in{flex-wrap:wrap;gap:8px;padding:8px 12px}
  .tp-search{order:3;flex-basis:100%}
  .tp-brand span{font-size:.8rem}
  .tp-link{min-height:36px;padding:6px 10px;font-size:.78rem}
}
.tp-main{flex:1;width:100%;max-width:960px;margin:0 auto;padding:24px 16px 40px;scroll-margin-top:84px}
.tp-crumbs{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:.8rem;color:var(--tp-muted);margin-bottom:18px}
.tp-crumbs a{color:var(--tp-muted);text-decoration:none}
.tp-crumbs a:hover{color:var(--tp-accent)}
.tp-crumbs [aria-current="page"]{color:var(--tp-text);font-weight:600}
.tp-sep{opacity:.5}
.tp-tool{background:var(--tp-surface);border:1px solid var(--tp-line);border-radius:14px;padding:28px;box-shadow:0 12px 32px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.035);margin-bottom:28px;min-width:0}
.tp-tool>*{min-width:0;max-width:100%}
.tp-pn{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 32px}
/* A phone is not a narrow desktop: the frame's three stacked insets (body,
   .tp-main, .tp-tool) left a ~224 px column for the card on a 360 px screen.
   The card owns its own breathing room; the frame steps back. */
@media (max-width:600px){
  .tp-pn{grid-template-columns:1fr}
  .tp-main{padding:14px 10px 28px}
  .tp-tool{padding:16px 14px;border-radius:12px}
  .tp-crumbs{margin-bottom:12px}
}
.tp-pn-a{display:flex;flex-direction:column;gap:3px;padding:12px 14px;background:rgba(255,255,255,.03);border:1px solid var(--tp-line);border-radius:12px;text-decoration:none;min-width:0;transition:border-color .15s,transform .15s,background .15s}
.tp-pn-a:focus-visible,.tp-pn-a:hover{border-color:var(--tp-accent);background:rgba(45,212,255,.05);transform:translateY(-1px);text-decoration:none}
.tp-pn-a.tp-pn-r{text-align:right;align-items:flex-end}
.tp-pn-k{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tp-accent)}
.tp-pn-t{font-size:.9rem;font-weight:600;color:var(--tp-text);line-height:1.3;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}
/* Both sit far below the fold on every viewport that matters, so their style
   and layout wait until the visitor approaches — contain-intrinsic-size keeps
   the scrollbar honest meanwhile (the `auto` prefix remembers the real height
   once rendered, exactly as explore.css does for rows). */
.tp-rel{border-top:1px solid var(--tp-line);padding-top:24px;content-visibility:auto;contain-intrinsic-size:auto 340px}
.tp-rel h2{font-size:1.05rem;font-weight:800;color:#fff;margin:0 0 12px}
.tp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.tp-gwrap{display:flex;min-width:0}
.tp-g{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0;padding:12px 14px;background:rgba(255,255,255,.03);border:1px solid var(--tp-line);border-radius:10px;text-decoration:none;transition:border-color .15s,transform .15s,background .15s}
.tp-g:focus-visible,.tp-g:hover{border-color:var(--tp-accent);background:rgba(45,212,255,.05);transform:translateY(-1px);text-decoration:none}
.tp-g .xp-title{font-size:.85rem;font-weight:700;color:var(--tp-text);line-height:1.3}
.tp-gd{font-size:.74rem;color:var(--tp-muted);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tp-gwrap .xp-actions{margin-left:6px;align-self:center}
.tp-more{margin:14px 0 0;font-size:.88rem}
.tp-more a{color:var(--tp-accent);text-decoration:none;font-weight:600}
.tp-more a:hover{text-decoration:underline}
.tp-foot{border-top:1px solid var(--tp-line);margin-top:auto;padding:22px 16px 30px;text-align:center;font-size:.82rem;color:var(--tp-muted);content-visibility:auto;contain-intrinsic-size:auto 130px}
.tp-foot-links{margin:0 0 8px;line-height:2.1}
.tp-foot-links a{color:var(--tp-text);text-decoration:none;margin:0 6px}
.tp-foot-links a:hover{color:var(--tp-accent)}
.tp-foot-note{margin:0;font-size:.78rem}

/* The caveat has its own visual hierarchy, not an unstyled sentence that
   runs into the tool title. Keep its full, factual text visible at all sizes. */
.tp-tool > .risk-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 24px;
  padding: 12px 14px;
  font-size: .85rem;
  line-height: 1.65;
  color: var(--tp-muted);
  background: color-mix(in srgb, var(--tp-accent) 4%, transparent);
  border: 1px solid var(--tp-line);
  border-left: 3px solid var(--tp-accent);
  border-radius: 8px;
}
.tp-tool > .risk-notice .risk-notice-icon { flex: none; }
.tp-tool > .risk-notice .risk-notice-text { min-width: 0; }
.tp-search input { transition: border-color .15s ease, background-color .15s ease; }
.tp-brand, .tp-link { touch-action: manipulation; }
.tp-pn-k { font: 600 .7rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .07em; }
.tp-crumbs { line-height: 1.8; }
.tp-crumbs a { text-underline-offset: 3px; }
.tp-crumbs a:hover { text-decoration: underline; }
.tp-rel h2 { letter-spacing: -.02em; }
.tp-gd { line-height: 1.6; }
@media (max-width: 760px) {
  .tp-search input { font-size: 16px; min-height: 44px; }
  .tp-link { min-height: 44px; }
  .tp-brand { min-width: 44px; min-height: 44px; }
  .tp-main { scroll-margin-top: 120px; }
}
@media (max-width: 600px) {
  .tp-brand span { display: none; }
  .tp-nav-in { gap: 6px 10px; }
  .tp-tool > .risk-notice { padding: 10px 12px; margin-bottom: 20px; }
}
@media (pointer: coarse), (prefers-reduced-transparency: reduce) {
  .tp-nav { -webkit-backdrop-filter: none; backdrop-filter: none; background: #0a0f14; }
}
@media (hover: none) {
  .tp-pn-a:hover, .tp-g:hover { transform: none; }
}
@media (prefers-contrast: more) {
  :root { --tp-muted: #d3e3eb; --tp-line: rgba(255,255,255,.4); }
}
@media (forced-colors: active) {
  .tp-nav, .tp-tool, .tp-g, .tp-pn-a, .tp-tool > .risk-notice { background: Canvas; color: CanvasText; border-color: CanvasText; box-shadow: none; }
  .tp-skip { background: Highlight; color: HighlightText; }
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}