:root {
  color-scheme: light;
  --ink-950: #101418;
  --ink-900: #151a20;
  --ink-800: #202832;
  --ink-700: #33404d;
  --ink-200: #d7dee7;
  --ink-100: #eef3f7;
  --brand-600: #0f766e;
  --brand-700: #115e59;
  --slate-50: #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --white: #ffffff;
  --shadow: 0 18px 50px rgba(16, 20, 24, 0.08);
}

.dark {
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.wu-body,
.wu-body {
  margin: 0;
  min-height: 100vh;
  background: var(--slate-50);
  color: var(--ink-950);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  antialiased: true;
  -webkit-font-smoothing: antialiased;
}
.dark body.wu-body,
html.dark .wu-body { background: var(--ink-950); color: var(--ink-100); }
::selection { background: #99f6e4; color: var(--ink-950); }
textarea, input, select, button { font: inherit; }

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.wu-wrap { width: min(80rem, calc(100% - 2rem)); margin: 0 auto; }
.wu-tool-page, .wu-article { width: min(72rem, calc(100% - 2rem)); margin: 0 auto; padding: 2rem 0 3rem; }
.wu-article { width: min(56rem, calc(100% - 2rem)); }
.wu-narrow { max-width: 48rem; }
.wu-page { padding: 2.5rem 0 3rem; }
.wu-section { padding: 3rem 0; }
.wu-hero { padding: 3rem 0 2rem; }
.wu-hero-copy { max-width: 48rem; }
.wu-hero-search { max-width: 42rem; margin-top: 2rem; }
.wu-section-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }

h1 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.15; letter-spacing: 0; margin: 0; color: var(--ink-950); }
.dark h1, .dark h2, .dark h3 { color: #fff; }
h2 { font-size: 1.5rem; margin: 0; color: var(--ink-950); }
h3 { font-size: 1rem; margin: 0; }
.wu-lede, .wu-intro, .wu-hero p { color: var(--slate-600); line-height: 1.75; }
.dark .wu-lede, .dark .wu-intro, .dark .wu-hero p, .dark .wu-card p { color: var(--slate-300); }
.wu-intro { margin-top: 1rem; font-size: 1rem; }
.wu-hero p { margin-top: 1.25rem; font-size: 1.125rem; }

.wu-band { border-block: 1px solid var(--slate-200); background: #fff; padding: 3rem 0; }
.dark .wu-band { background: var(--ink-900); border-color: var(--ink-800); }

.wu-trust { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 1.5rem 0 0; padding: 0; list-style: none; color: var(--slate-500); font-size: 0.875rem; }
.wu-trust li { display: flex; align-items: center; gap: 0.4rem; }
.wu-trust li::before { content: "✓"; color: #22c55e; font-weight: 700; }

.wu-header { position: sticky; top: 0; z-index: 40; border-bottom: 1px solid var(--slate-200); background: rgba(255,255,255,.95); backdrop-filter: blur(12px); }
.dark .wu-header { background: rgba(16,20,24,.95); border-color: var(--ink-800); }
.wu-header-inner { width: min(80rem, calc(100% - 2rem)); margin: 0 auto; padding: 0.75rem 0; display: grid; gap: 0.75rem; }
.wu-header-top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.wu-brand { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; color: var(--ink-950); }
.dark .wu-brand { color: #fff; }
.wu-brand img { border-radius: 0.5rem; }
.wu-search-desktop { display: none; flex: 1; min-width: 16rem; max-width: 28rem; }
.wu-header-actions { display: flex; align-items: center; gap: 0.5rem; }
.wu-nav-link, .wu-theme-toggle { border-radius: 0.375rem; padding: 0.5rem 0.75rem; font-size: 0.875rem; font-weight: 600; color: var(--slate-700); background: transparent; border: 0; cursor: pointer; }
.wu-theme-toggle { border: 1px solid var(--slate-200); background: #fff; }
.dark .wu-nav-link, .dark .wu-theme-toggle { color: var(--slate-200); }
.dark .wu-theme-toggle { background: var(--ink-900); border-color: var(--ink-700); }
.wu-nav-link:hover, .wu-theme-toggle:hover { color: var(--brand-700); }
.wu-cat-nav { display: flex; gap: 0.5rem; overflow-x: auto; padding-bottom: 0.25rem; }
.wu-cat-nav a { flex-shrink: 0; border-radius: 0.375rem; padding: 0.5rem 0.75rem; font-size: 0.875rem; font-weight: 500; color: var(--slate-600); }
.dark .wu-cat-nav a { color: var(--slate-300); }
.wu-cat-nav a:hover { background: var(--slate-100); color: var(--brand-700); }
.dark .wu-cat-nav a:hover { background: var(--ink-800); color: #5eead4; }

.wu-search-box { position: relative; width: 100%; }
.wu-search-input { width: 100%; border: 1px solid var(--slate-200); border-radius: 0.5rem; background: #fff; color: var(--ink-950); outline: none; }
.wu-search-box.is-compact .wu-search-input { padding: 0.5rem 0.75rem; font-size: 0.875rem; }
.wu-search-box:not(.is-compact) .wu-search-input { padding: 1rem; font-size: 1rem; }
.dark .wu-search-input { background: var(--ink-900); border-color: var(--ink-700); color: #fff; }
.wu-search-input:focus { border-color: var(--brand-600); box-shadow: 0 0 0 4px #ccfbf1; }
.dark .wu-search-input:focus { box-shadow: 0 0 0 4px #042f2e; }
.wu-search-results { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; margin-top: 0.5rem; overflow: hidden; border: 1px solid var(--slate-200); border-radius: 0.5rem; background: #fff; box-shadow: var(--shadow); }
.dark .wu-search-results { background: var(--ink-900); border-color: var(--ink-700); }
.wu-search-results a { display: block; padding: 0.75rem 1rem; border-bottom: 1px solid var(--slate-100); }
.dark .wu-search-results a { border-color: var(--ink-800); }
.wu-search-results a:last-child { border-bottom: 0; }
.wu-search-results a:hover { background: var(--slate-50); }
.dark .wu-search-results a:hover { background: var(--ink-800); }
.wu-search-results strong { display: block; font-size: 0.875rem; }
.wu-search-results span { display: block; margin-top: 0.25rem; font-size: 0.75rem; color: var(--slate-500); line-height: 1.4; }

.wu-grid-4, .wu-grid-3, .wu-grid-2 { display: grid; gap: 1rem; margin-top: 1.25rem; }
.wu-grid-2 { grid-template-columns: 1fr; }
.wu-grid-3 { grid-template-columns: 1fr; }
.wu-grid-4 { grid-template-columns: 1fr; }
.wu-card, .wu-blog-card, .wu-aside-card, .wu-shell, .wu-steps li, .wu-feature-grid li, .wu-stack li, .wu-faq details {
  display: block;
  border: 1px solid var(--slate-200);
  background: #fff;
  border-radius: 0.5rem;
  padding: 1.25rem;
  box-shadow: 0 1px 2px rgba(16,20,24,.04);
  color: inherit;
}
.wu-card { height: 100%; transition: transform .15s, box-shadow .15s, border-color .15s; }
.wu-card:hover { transform: translateY(-2px); border-color: var(--brand-600); box-shadow: var(--shadow); }
.dark .wu-card, .dark .wu-blog-card, .dark .wu-aside-card, .dark .wu-shell, .dark .wu-steps li, .dark .wu-feature-grid li, .dark .wu-stack li, .dark .wu-faq details {
  background: var(--ink-900); border-color: var(--ink-800);
}
.wu-card h3, .wu-blog-card h3 { font-size: 0.95rem; color: var(--ink-950); }
.wu-card:hover h3 { color: var(--brand-700); }
.dark .wu-card:hover h3 { color: #5eead4; }
.wu-card p, .wu-blog-card p { margin: 0.75rem 0 0; font-size: 0.875rem; line-height: 1.6; color: var(--slate-600); }
.wu-category-card { display: flex; justify-content: space-between; gap: 1rem; align-items: start; }
.wu-count { flex-shrink: 0; border-radius: 999px; background: #f0fdfa; color: var(--brand-700); font-size: 0.75rem; font-weight: 600; padding: 0.25rem 0.75rem; }
.dark .wu-count { background: #042f2e; color: #99f6e4; }

.wu-btn, .wu-btn-outline, .wu-copy, .wu-download {
  display: inline-flex; align-items: center; gap: 0.5rem;
  border-radius: 0.375rem; padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 600; cursor: pointer; border: 0;
}
.wu-btn, .wu-copy, .wu-download { background: var(--brand-600); color: #fff; }
.wu-btn:hover, .wu-copy:hover, .wu-download:hover { background: var(--brand-700); }
.wu-btn-outline, .wu-clear {
  border: 1px solid var(--slate-200); background: #fff; color: var(--slate-700);
  border-radius: 0.375rem; padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 600; cursor: pointer;
}
.dark .wu-btn-outline, .dark .wu-clear { background: var(--ink-900); border-color: var(--ink-700); color: var(--slate-200); }
.wu-btn-outline:hover, .wu-clear:hover { border-color: var(--brand-600); color: var(--brand-700); }
button:disabled { opacity: 0.5; cursor: not-allowed; }
.wu-text-link { color: var(--brand-700); font-size: 0.875rem; font-weight: 600; white-space: nowrap; }
.dark .wu-text-link { color: #5eead4; }
.wu-meta { font-size: 0.75rem; color: var(--slate-500); margin: 0; }
.wu-why { margin-top: 1.5rem; }
.wu-why h3 { font-size: 1rem; }
.wu-why p { margin-top: 0.5rem; font-size: 0.875rem; color: var(--slate-600); line-height: 1.6; }
.dark .wu-why p { color: var(--slate-300); }

.wu-footer { border-top: 1px solid var(--slate-200); background: #fff; }
.dark .wu-footer { background: var(--ink-950); border-color: var(--ink-800); }
.wu-footer-inner { width: min(80rem, calc(100% - 2rem)); margin: 0 auto; padding: 3rem 0; }
.wu-footer-grid { display: grid; gap: 2.5rem; }
.wu-footer h2 { font-size: 0.875rem; }
.wu-footer-copy { max-width: 20rem; margin: 0.75rem 0 0; font-size: 0.875rem; line-height: 1.6; color: var(--slate-600); }
.wu-footer-note, .wu-footer-bottom p { font-size: 0.75rem; color: var(--slate-500); }
.wu-footer-links { display: grid; gap: 0.5rem; margin-top: 1rem; }
.wu-footer-links a { font-size: 0.875rem; color: var(--slate-600); }
.dark .wu-footer-copy, .dark .wu-footer-links a, .dark .wu-promise { color: var(--slate-300); }
.wu-footer-links a:hover { color: var(--brand-700); }
.wu-footer-label { margin-top: 0.5rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate-400); }
.wu-promise { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 0.5rem; font-size: 0.875rem; color: var(--slate-600); }
.wu-footer-bottom { margin-top: 2.5rem; border-top: 1px solid var(--slate-200); padding-top: 1.5rem; }
.dark .wu-footer-bottom { border-color: var(--ink-800); }

.wu-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--slate-500); margin-bottom: 1.5rem; }
.wu-crumbs a:hover { color: var(--brand-700); }
.wu-tool-root { margin-top: 1.5rem; }
.wu-tool-body { margin-top: 2.5rem; display: grid; gap: 2.5rem; }
.wu-tool-content { display: grid; gap: 2.5rem; }
.wu-tool-content h2 { font-size: 1.5rem; margin-bottom: 1rem; }
.wu-steps, .wu-stack, .wu-feature-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; }
.wu-steps span { margin-right: 0.5rem; font-weight: 600; color: var(--brand-700); }
.wu-feature-grid li, .wu-stack li, .wu-steps li { font-size: 0.875rem; line-height: 1.6; color: var(--slate-700); }
.dark .wu-feature-grid li, .dark .wu-stack li, .dark .wu-steps li { color: var(--slate-300); }
.wu-faq { display: grid; gap: 0.75rem; }
.wu-faq summary { cursor: pointer; font-size: 0.875rem; font-weight: 600; }
.wu-faq p { margin: 0.75rem 0 0; font-size: 0.875rem; line-height: 1.6; color: var(--slate-600); }
.wu-aside-card h2 { font-size: 0.875rem; }
.wu-aside-card p { margin: 0.5rem 0 1rem; font-size: 0.875rem; color: var(--slate-600); }
.wu-aside-card .wu-btn { color: #fff; }

.wu-shell { padding: 1.25rem; }
.wu-field { display: grid; gap: 0.5rem; }
.wu-field span { font-size: 0.875rem; font-weight: 600; color: var(--ink-950); }
.dark .wu-field span { color: #fff; }
.wu-input, .wu-textarea, .wu-select {
  width: 100%; border: 1px solid var(--slate-200); border-radius: 0.5rem;
  background: var(--slate-50); color: var(--ink-950); padding: 0.75rem 1rem; outline: none;
}
.wu-textarea { min-height: 16rem; resize: vertical; line-height: 1.6; }
.dark .wu-input, .dark .wu-textarea, .dark .wu-select { background: var(--ink-950); border-color: var(--ink-700); color: #fff; }
.wu-input:focus, .wu-textarea:focus, .wu-select:focus { border-color: var(--brand-600); box-shadow: 0 0 0 4px #ccfbf1; }
.wu-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1rem; }
.wu-error { margin-top: 0.75rem; border-radius: 0.375rem; background: #fef2f2; color: #b91c1c; padding: 0.5rem 0.75rem; font-size: 0.875rem; }
.wu-stats { display: grid; gap: 0.75rem; margin-top: 1rem; }
.wu-stat { border: 1px solid var(--slate-200); background: var(--slate-50); border-radius: 0.5rem; padding: 0.75rem; }
.dark .wu-stat { background: var(--ink-950); border-color: var(--ink-700); }
.wu-stat small { display: block; font-size: 0.7rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--slate-500); }
.wu-stat b { display: block; margin-top: 0.25rem; font-size: 1.125rem; }
.wu-helper { margin: 0 0 1rem; font-size: 0.875rem; color: var(--slate-500); }
.wu-picked { border: 1px solid var(--slate-200); background: var(--slate-50); border-radius: 0.5rem; padding: 1.25rem; }
.dark .wu-picked { background: var(--ink-950); border-color: var(--ink-700); }
.wu-picked p { margin: 1rem 0 0; font-size: 1.875rem; font-weight: 700; color: var(--brand-700); word-break: break-word; }
.wu-suffix { display: flex; border: 1px solid var(--slate-200); border-radius: 0.5rem; background: var(--slate-50); }
.dark .wu-suffix { background: var(--ink-950); border-color: var(--ink-700); }
.wu-suffix input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 0.75rem 1rem; outline: none; }
.wu-suffix em { display: flex; align-items: center; padding: 0 0.75rem; font-style: normal; font-size: 0.875rem; color: var(--slate-500); }

.wu-blog-card { display: flex; flex-direction: column; border-radius: 1rem; }
.wu-blog-card h3 { margin-top: 0.75rem; font-size: 1.25rem; }
.wu-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.wu-tags span { background: var(--slate-100); color: var(--slate-600); border-radius: 0.375rem; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; }
.dark .wu-tags span { background: var(--ink-800); color: var(--slate-400); }
.wu-crosslink { margin-top: 3rem; border-top: 1px solid var(--slate-200); padding-top: 2rem; }
.dark .wu-crosslink { border-color: var(--ink-800); }
.wu-cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.25rem; }
.wu-prose { color: var(--slate-700); line-height: 1.75; }
.dark .wu-prose { color: var(--slate-300); }
.wu-prose a { color: var(--brand-600); text-decoration: underline; font-weight: 500; }
.wu-h2 { font-size: 1.5rem; font-weight: 700; margin: 2.5rem 0 1rem; color: var(--ink-950); }
.wu-h3 { font-size: 1.25rem; font-weight: 700; margin: 2rem 0 0.75rem; color: var(--ink-950); }
.dark .wu-h2, .dark .wu-h3 { color: #fff; }
.wu-prose code { background: var(--slate-100); padding: 0.1rem 0.4rem; border-radius: 0.25rem; font-size: 0.875rem; }
.dark .wu-prose code { background: var(--ink-800); }
.wu-ol-item { list-style: decimal; margin-left: 1rem; }
.wu-ul-item { list-style: disc; margin-left: 1rem; }
.wu-article-main { background: #fff; }
.dark .wu-article-main { background: var(--ink-950); }
.wu-not-found { text-align: center; padding: 5rem 0; }
.wu-not-found .wu-btn { margin-top: 1.5rem; color: #fff; }

.wu-cols-2, .wu-cols-3, .wu-gen-grid, .wu-calc-grid { display: grid; gap: 1rem; }
.wu-mb { margin-bottom: 1rem; }

@media (min-width: 640px) {
  .wu-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .wu-grid-2 { grid-template-columns: repeat(2, 1fr); }
  .wu-stats { grid-template-columns: repeat(2, 1fr); }
  .wu-feature-grid { grid-template-columns: repeat(2, 1fr); }
  .wu-footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
}
@media (min-width: 768px) {
  .wu-search-desktop { display: block; }
  .wu-search-mobile { display: none; }
  .wu-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .wu-grid-4 { grid-template-columns: repeat(4, 1fr); }
  .wu-grid-3 { grid-template-columns: repeat(3, 1fr); }
  .wu-tool-body { grid-template-columns: 1fr 300px; }
  .wu-cols-2 { grid-template-columns: 1fr 1fr; }
  .wu-cols-3 { grid-template-columns: 1fr 1fr 1fr; }
  .wu-gen-grid { grid-template-columns: 0.8fr 1.2fr; }
  .wu-calc-grid { grid-template-columns: 1fr 1.1fr; }
  .wu-stats { grid-template-columns: repeat(4, 1fr); }
  .wu-aside-card { position: sticky; top: 9rem; }
}