:root {
  color-scheme: light;
  --ink: #172b3b;
  --ink-soft: #42586a;
  --muted: #687d8c;
  --paper: #f5f8fa;
  --surface: #ffffff;
  --surface-blue: #eef7fa;
  --line: #d9e4e9;
  --line-strong: #b9cbd4;
  --blue: #145f8b;
  --blue-deep: #104866;
  --cyan: #087f91;
  --cyan-pale: #ddf2f3;
  --success: #176b54;
  --danger: #a23b3b;
  --shadow: 0 12px 34px rgba(26, 60, 78, .08);
  --radius: 14px;
  --radius-small: 9px;
  --content: 1160px;
  --reading: 760px;
  --sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  min-width: 320px;
  min-height: 100dvh;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font: inherit; }
button, a, summary { -webkit-tap-highlight-color: transparent; }
a { color: var(--blue); text-underline-offset: .2em; }
a:hover { color: var(--cyan); }
img, svg { max-width: 100%; }
:focus-visible { outline: 3px solid #36aaba; outline-offset: 3px; }
::selection { background: #c9e9ed; color: var(--ink); }

.skip-link {
  position: absolute; z-index: 20; top: 8px; left: 8px;
  padding: 10px 14px; transform: translateY(-150%);
  border-radius: 7px; background: var(--ink); color: white;
}
.skip-link:focus { transform: translateY(0); }
.container { width: min(var(--content), calc(100% - 48px)); margin-inline: auto; }
.reading-width { width: min(var(--reading), calc(100% - 48px)); margin-inline: auto; }
.site-header {
  position: relative; z-index: 5;
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  min-height: 76px; display: flex; align-items: center; gap: 32px;
}
.brand {
  display: inline-flex; align-items: center; gap: 11px;
  flex: 0 0 auto; color: var(--ink); text-decoration: none;
  font-size: 18px; font-weight: 750; letter-spacing: -.045em;
}
.brand-mark {
  width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 10px; background: var(--blue-deep); color: #d8f4f5;
}
.brand-mark svg { width: 21px; height: 21px; }
.desktop-nav { display: flex; align-items: center; gap: 25px; margin-left: auto; }
.desktop-nav > a, .nav-tools summary {
  min-height: 44px; display: inline-flex; align-items: center;
  color: var(--ink-soft); text-decoration: none; font-size: 14px; font-weight: 620;
  cursor: pointer;
}
.desktop-nav > a:hover, .nav-tools summary:hover { color: var(--blue); }
.nav-tools { position: relative; }
.nav-tools summary { list-style: none; gap: 6px; }
.nav-tools summary::-webkit-details-marker { display: none; }
.chevron { width: 12px; height: 12px; transition: transform .18s ease; }
.nav-tools[open] .chevron { transform: rotate(180deg); }
.tools-menu {
  position: absolute; top: calc(100% + 2px); left: -16px; z-index: 10;
  width: 210px; padding: 8px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--surface); box-shadow: var(--shadow);
}
.tools-menu a {
  display: block; padding: 9px 10px; border-radius: 7px;
  color: var(--ink-soft); text-decoration: none; font-size: 14px;
}
.tools-menu a:hover { background: var(--surface-blue); color: var(--blue); }
.header-search { width: 204px; position: relative; }
.header-search input {
  width: 100%; height: 42px; padding: 0 38px 0 13px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--paper);
  color: var(--ink); font-size: 13px;
}
.header-search input::placeholder { color: #758894; }
.header-search button {
  position: absolute; top: 3px; right: 3px; width: 36px; height: 36px;
  display: grid; place-items: center; border: 0; border-radius: 6px;
  background: transparent; color: var(--muted); cursor: pointer;
}
.header-search button:hover { background: var(--cyan-pale); color: var(--blue-deep); }
.header-search svg { width: 17px; height: 17px; }
.mobile-menu { display: none; }

.site-main { min-height: 58vh; }
.eyebrow {
  margin: 0 0 14px; color: var(--cyan); font-size: 12px;
  font-weight: 750; letter-spacing: .12em; text-transform: uppercase;
}
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { color: var(--ink); line-height: 1.14; letter-spacing: -.04em; }
h1 { font-size: clamp(2.35rem, 5.3vw, 4.3rem); }
h2 { font-size: clamp(1.65rem, 3.1vw, 2.45rem); }
h3 { font-size: 1.2rem; }
.lede { max-width: 690px; color: var(--ink-soft); font-size: clamp(1.06rem, 1.7vw, 1.23rem); }
.section { padding-block: 76px; }
.section-heading {
  display: flex; align-items: end; justify-content: space-between; gap: 24px;
  margin-bottom: 26px;
}
.section-heading h2 { margin-bottom: 0; }
.section-heading p { max-width: 510px; margin: 0; color: var(--muted); }
.text-link { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; }
.text-link svg { width: 15px; height: 15px; }
.button {
  min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 0 18px; border: 1px solid transparent; border-radius: 8px;
  background: var(--blue); color: #fff; text-decoration: none; font-weight: 700;
  cursor: pointer; transition: background .15s ease, transform .15s ease;
}
.button:hover { background: var(--blue-deep); color: white; transform: translateY(-1px); }
.button-secondary { border-color: var(--line-strong); background: var(--surface); color: var(--ink); }
.button-secondary:hover { border-color: var(--blue); background: var(--surface-blue); color: var(--blue-deep); }
.button-small { min-height: 38px; padding-inline: 12px; font-size: 13px; }
.button svg { width: 17px; height: 17px; }

.hero {
  position: relative; overflow: hidden; padding: 82px 0 76px;
  background: #edf5f7; border-bottom: 1px solid var(--line);
}
.hero::after {
  content: ""; position: absolute; top: -138px; right: max(-90px, calc((100vw - 1430px)/2));
  width: 420px; height: 420px; border: 1px solid rgba(8,127,145,.14);
  border-radius: 50%; box-shadow: 0 0 0 36px rgba(8,127,145,.035), 0 0 0 82px rgba(8,127,145,.025);
  pointer-events: none;
}
.hero-inner { position: relative; z-index: 1; }
.hero-copy { max-width: 780px; }
.hero h1 { max-width: 760px; margin-bottom: 20px; }
.hero .lede { max-width: 650px; margin-bottom: 27px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 11px; }
.privacy-note { display: flex; align-items: center; gap: 8px; margin-top: 22px; color: var(--muted); font-size: 13px; }
.privacy-note svg { width: 17px; height: 17px; color: var(--cyan); flex: none; }
.hero-search { display: flex; width: min(560px, 100%); gap: 8px; margin-top: 27px; }
.hero-search input {
  flex: 1; min-width: 0; height: 50px; padding: 0 15px;
  border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); color: var(--ink);
}
.hero-search .button { min-height: 50px; }
.categories-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.category-card {
  min-height: 139px; display: flex; flex-direction: column; justify-content: space-between;
  padding: 20px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--ink); text-decoration: none;
  transition: border-color .15s ease, transform .15s ease;
}
.category-card:hover { border-color: #8dbbc6; color: var(--ink); transform: translateY(-2px); }
.category-card strong { font-size: 16px; }
.category-card span { color: var(--muted); font-size: 13px; }
.category-code { color: var(--cyan); font: 700 12px var(--mono); letter-spacing: .07em; }
.tool-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tool-card {
  min-width: 0; display: flex; flex-direction: column; min-height: 180px;
  padding: 21px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: inherit; text-decoration: none;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.tool-card:hover { border-color: #9bbec9; box-shadow: var(--shadow); color: inherit; transform: translateY(-2px); }
.tool-card-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.tool-card h3 { margin: 15px 0 8px; font-size: 18px; }
.tool-card p { margin: 0; color: var(--muted); font-size: 14px; }
.tool-group, .tool-arrow { color: var(--cyan); font-size: 11px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.tool-arrow { font-size: 18px; }
.privacy-band {
  padding-block: 52px; border-block: 1px solid var(--line);
  background: #eaf4f6;
}
.privacy-band-inner { display: grid; grid-template-columns: 1fr 1.1fr; align-items: center; gap: 52px; }
.privacy-band h2 { max-width: 480px; margin: 0; }
.privacy-band p { margin: 0; color: var(--ink-soft); }
.empty-state {
  padding: 34px; border: 1px dashed var(--line-strong); border-radius: var(--radius);
  background: rgba(255,255,255,.55); color: var(--ink-soft);
}
.empty-state p:last-child { margin-bottom: 0; }

.page-intro { padding: 57px 0 36px; }
.page-intro h1 { margin-bottom: 12px; font-size: clamp(2.2rem, 4vw, 3.35rem); }
.page-intro .lede { margin-bottom: 0; }
.directory-search { display: flex; gap: 8px; max-width: 620px; margin-top: 25px; }
.directory-search input {
  flex: 1; min-width: 0; height: 48px; padding: 0 14px;
  border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface);
}
.directory-tools { padding: 18px 0 76px; }
.directory-group { margin-top: 34px; }
.directory-group:first-child { margin-top: 0; }
.directory-group h2 { margin-bottom: 16px; font-size: 20px; }
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 27px 0 22px; color: var(--muted); font-size: 13px; }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--blue); text-decoration: underline; }
.breadcrumb-separator { color: #9aabb3; }

.tool-detail { padding-bottom: 78px; }
.tool-title-row { margin-bottom: 29px; }
.tool-title-row h1 { margin-bottom: 10px; font-size: clamp(2rem, 4vw, 3.2rem); }
.tool-title-row .lede { margin: 0; font-size: 1.05rem; }
.workspace {
  overflow: hidden; border: 1px solid var(--line-strong); border-radius: 15px;
  background: var(--surface); box-shadow: 0 8px 25px rgba(28,66,84,.06);
}
.workspace-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 15px 18px; border-bottom: 1px solid var(--line); background: #f8fbfc;
}
.workspace-label { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 750; }
.workspace-dot { width: 9px; height: 9px; border-radius: 50%; background: #1a9b91; box-shadow: 0 0 0 4px #e0f3f0; }
.workspace-meta { color: var(--muted); font: 11px var(--mono); }
.workspace-grid { display: grid; grid-template-columns: 1fr 1fr; }
.workspace-pane { min-width: 0; padding: 20px; }
.workspace-pane + .workspace-pane { border-left: 1px solid var(--line); }
.pane-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 11px; }
.pane-head label, .pane-title { color: var(--ink-soft); font-size: 12px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.workspace textarea {
  display: block; width: 100%; min-height: 270px; resize: vertical;
  padding: 15px; border: 1px solid var(--line); border-radius: 8px;
  background: #fbfdfe; color: var(--ink); font: 13px/1.65 var(--mono);
}
.workspace textarea:focus { border-color: #6ba9b8; }
.workspace textarea[readonly] { background: #f4f8f9; }
.workspace-controls {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px; padding: 15px 18px; border-top: 1px solid var(--line); background: #f8fbfc;
}
.workspace-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.workspace-status { min-height: 1.4em; margin: 0; color: var(--muted); font-size: 13px; }
.workspace-status[data-state="error"] { color: var(--danger); }
.workspace-status[data-state="success"] { color: var(--success); }
.workspace-note { margin: 15px 0 0; color: var(--muted); font-size: 13px; }
.content-section { padding-top: 49px; }
.content-section h2 { margin-bottom: 16px; font-size: 24px; }
.content-copy { color: var(--ink-soft); white-space: pre-wrap; overflow-wrap: anywhere; }
.content-copy p:last-child { margin-bottom: 0; }

.article-head { padding: 58px 0 35px; border-bottom: 1px solid var(--line); }
.article-head h1 { max-width: 850px; margin: 0 0 15px; font-size: clamp(2.2rem, 4vw, 3.7rem); }
.article-head .lede { margin: 0; }
.article-meta { margin-top: 18px; color: var(--muted); font-size: 13px; }
.article-body { padding-block: 43px 76px; color: var(--ink-soft); white-space: pre-wrap; overflow-wrap: anywhere; }
.article-body:empty { display: none; }
.post-list { display: grid; gap: 12px; }
.post-link {
  display: block; padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: inherit; text-decoration: none;
}
.post-link:hover { border-color: #9bbec9; color: inherit; }
.post-link h2 { margin: 0 0 8px; font-size: 20px; }
.post-link p { margin: 0; color: var(--muted); }

.static-page { padding: 57px 0 80px; }
.static-page h1 { margin-bottom: 18px; font-size: clamp(2.25rem, 4vw, 3.4rem); }
.static-content { color: var(--ink-soft); white-space: pre-wrap; overflow-wrap: anywhere; }
.static-content:empty { display: none; }
.contact-layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(220px, .7fr); gap: 45px; align-items: start; }
.contact-form { padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.field { margin-bottom: 17px; }
.field label { display: block; margin-bottom: 6px; color: var(--ink-soft); font-size: 13px; font-weight: 700; }
.field input, .field textarea {
  width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid var(--line-strong);
  border-radius: 7px; background: #fbfdfe; color: var(--ink);
}
.field textarea { min-height: 155px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #82929b; }
.form-alert { margin-bottom: 18px; padding: 12px 14px; border-radius: 7px; }
.form-alert-error { border: 1px solid #e7c4c4; background: #fff6f5; color: #8b3333; }
.form-alert-success { border: 1px solid #b9ddd0; background: #f0faf6; color: #176b54; }
.contact-aside { padding-top: 8px; color: var(--muted); font-size: 14px; }
.contact-aside h2 { font-size: 18px; }

.site-footer { border-top: 1px solid var(--line); background: #edf3f5; }
.footer-main { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 35px; padding-block: 45px 37px; }
.footer-brand .brand { margin-bottom: 14px; }
.footer-brand p { max-width: 300px; margin: 0; color: var(--muted); font-size: 13px; }
.footer-column h2 { margin: 3px 0 13px; font-size: 12px; letter-spacing: .09em; text-transform: uppercase; }
.footer-column ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.footer-column a { color: var(--ink-soft); font-size: 13px; text-decoration: none; }
.footer-column a:hover { color: var(--blue); text-decoration: underline; }
.footer-bottom {
  display: flex; justify-content: space-between; gap: 15px; padding-block: 16px;
  border-top: 1px solid var(--line); color: var(--muted); font-size: 12px;
}
.footer-bottom p { margin: 0; }
.not-found { padding: 90px 0 110px; text-align: center; }
.not-found-code { margin: 0 0 8px; color: var(--cyan); font: 750 13px var(--mono); letter-spacing: .14em; }
.not-found h1 { margin-bottom: 14px; font-size: clamp(2.3rem, 5vw, 3.8rem); }
.not-found p:not(.not-found-code) { max-width: 540px; margin: 0 auto 25px; color: var(--muted); }

@media (max-width: 960px) {
  .header-inner { gap: 20px; }
  .desktop-nav { gap: 16px; }
  .header-search { width: 170px; }
  .footer-main { grid-template-columns: 1.3fr 1fr 1fr; }
  .footer-column:last-child { grid-column: 2 / 4; }
}
@media (max-width: 760px) {
  .container, .reading-width { width: min(100% - 36px, var(--content)); }
  .header-inner { min-height: 65px; justify-content: space-between; }
  .desktop-nav, .header-search { display: none; }
  .mobile-menu { display: block; position: relative; }
  .mobile-menu summary {
    display: grid; width: 44px; height: 44px; place-items: center;
    list-style: none; border: 1px solid var(--line); border-radius: 8px;
    color: var(--ink); cursor: pointer;
  }
  .mobile-menu summary::-webkit-details-marker { display: none; }
  .mobile-menu summary svg { width: 21px; height: 21px; }
  .mobile-panel {
    position: absolute; top: calc(100% + 9px); right: 0; z-index: 10;
    width: min(340px, calc(100vw - 36px)); padding: 12px;
    border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow);
  }
  .mobile-panel > a, .mobile-tools summary {
    min-height: 44px; display: flex; align-items: center; padding: 0 10px;
    border-radius: 7px; color: var(--ink-soft); text-decoration: none; font-size: 14px; font-weight: 650;
  }
  .mobile-panel > a:hover, .mobile-tools summary:hover { background: var(--surface-blue); color: var(--blue); }
  .mobile-tools summary { cursor: pointer; list-style: none; }
  .mobile-tools summary::-webkit-details-marker { display: none; }
  .mobile-tool-links { padding: 0 0 5px 13px; }
  .mobile-tool-links a { min-height: 39px; display: flex; align-items: center; padding: 0 10px; color: var(--muted); text-decoration: none; font-size: 13px; }
  .mobile-search { display: flex; gap: 6px; padding: 8px 0 2px; }
  .mobile-search input { width: 100%; min-width: 0; height: 42px; padding: 0 10px; border: 1px solid var(--line); border-radius: 7px; }
  .mobile-search button { width: 44px; flex: none; border: 0; border-radius: 7px; background: var(--blue); color: white; }
  .hero { padding: 61px 0 58px; }
  .hero::after { top: -125px; right: -230px; width: 360px; height: 360px; }
  .section { padding-block: 55px; }
  .section-heading { align-items: start; flex-direction: column; gap: 12px; }
  .categories-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .category-card { min-height: 125px; padding: 16px; }
  .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .privacy-band-inner { grid-template-columns: 1fr; gap: 17px; }
  .workspace-grid { grid-template-columns: 1fr; }
  .workspace-pane + .workspace-pane { border-top: 1px solid var(--line); border-left: 0; }
  .workspace textarea { min-height: 205px; }
  .contact-layout { grid-template-columns: 1fr; gap: 25px; }
  .footer-main { grid-template-columns: 1fr 1fr; gap: 27px 22px; }
  .footer-column:last-child { grid-column: auto; }
}
@media (max-width: 480px) {
  .container, .reading-width { width: calc(100% - 30px); }
  .brand { font-size: 17px; }
  .hero { padding: 52px 0; }
  .hero h1 { font-size: clamp(2.15rem, 11vw, 3rem); }
  .hero-search { flex-direction: column; }
  .hero-search .button { width: 100%; }
  .categories-grid { gap: 9px; }
  .category-card { min-height: 118px; padding: 14px; }
  .tool-grid { grid-template-columns: 1fr; }
  .tool-card { min-height: 145px; padding: 18px; }
  .page-intro { padding-top: 42px; }
  .directory-search { flex-direction: column; }
  .directory-search .button { width: 100%; }
  .workspace-head, .workspace-controls { align-items: flex-start; flex-direction: column; }
  .workspace-pane { padding: 15px; }
  .workspace-actions { width: 100%; }
  .workspace-actions .button { flex: 1; }
  .contact-form { padding: 18px; }
  .footer-main { grid-template-columns: 1fr; }
  .footer-column:last-child { grid-column: auto; }
  .footer-bottom { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}
.brand-logo{width:32px;height:32px;object-fit:contain}
[hidden]{display:none!important}
label.skip-link{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;padding:0;margin:-1px;border:0}
.workspace-options{display:flex;flex-wrap:wrap;gap:16px;padding:20px 24px;background:#f3f7fa;border-bottom:1px solid #dce4ec}
.tool-option{display:flex;flex-direction:column;gap:7px;flex:1 1 180px;font-size:13px;font-weight:600;color:#334a61}
.tool-option input,.tool-option select,.tool-option textarea{width:100%;font:inherit;color:#182b40;border:1px solid #ccd7e2;background:white;border-radius:5px;padding:10px;min-height:42px}
.tool-option textarea{font-family:ui-monospace,monospace;min-height:150px;resize:vertical}
.tool-option-wide,.tool-option-note{flex-basis:100%}
.tool-option-note{font-size:12px;color:#536b80;margin:0;line-height:1.6}
.workspace-single{grid-template-columns:1fr}
.workspace-pane[hidden],.tool-option[hidden],.tool-highlight[hidden]{display:none}
.tool-highlight{padding:20px 24px;border-top:1px solid #dce4ec;white-space:pre-wrap;overflow-wrap:anywhere;font:13px/1.8 ui-monospace,monospace}
.diff-added{background:#e3f4e9;color:#175937}.diff-removed{background:#ffebe8;color:#913424}
.tool-highlight mark{background:#b9e9f8;color:#102f45;padding:1px 0}
.tool-status.is-error{color:#a52d26}
.faq-item{padding:16px 0;border-bottom:1px solid #dce4ec}.faq-item summary{font-weight:600;cursor:pointer}.faq-item p{color:#52667b}
.example-code{padding:20px;background:#f1f5f8;border:1px solid #dce4ec;white-space:pre-wrap;overflow-wrap:anywhere;border-radius:6px;font-size:13px}
.article-image{display:block;width:100%;height:auto;margin-top:24px;border-radius:8px}
.article-body pre,.static-content pre,.content-copy pre{overflow:auto;padding:18px;background:#eef3f7;white-space:pre-wrap}
.article-body img,.static-content img,.content-copy img{max-width:100%;height:auto}
.article-body h2,.static-content h2,.content-copy h2{margin-top:32px}
.pagination{display:flex;justify-content:center;align-items:center;gap:20px;margin-top:32px}
@media(max-width:600px){.workspace-options{padding:16px}.tool-option{flex-basis:100%}}