:root{
  --bg:#f6f8fb;
  --surface:#ffffff;
  --surface-2:#eef3f7;
  --surface-3:#e7edf4;
  --text:#0f172a;
  --muted:#526071;
  --line:#d8e1ea;
  --accent:#0f766e;
  --accent-strong:#115e59;
  --accent-soft:#e6fffb;
  --button-bg:#0f172a;
  --button-text:#f8fafc;
  --success:#166534;
  --warn:#b45309;
  --shadow:0 16px 36px rgba(15,23,42,.07);
  --radius:28px;
  --radius-md:20px;
  --radius-sm:16px;
  --max:1120px;
}
html[data-theme="dark"]{
  --bg:#0b1220;
  --surface:#111827;
  --surface-2:#172033;
  --surface-3:#1f2a3d;
  --text:#f8fafc;
  --muted:#bfd0e0;
  --line:#2a3647;
  --accent:#5eead4;
  --accent-strong:#99f6e4;
  --accent-soft:rgba(94,234,212,.12);
  --button-bg:#5eead4;
  --button-text:#062b28;
  --success:#86efac;
  --warn:#fcd34d;
  --shadow:0 22px 48px rgba(2,6,23,.34);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at top left, rgba(15,118,110,.07), transparent 30%),
    radial-gradient(circle at bottom right, rgba(15,23,42,.05), transparent 26%),
    var(--bg);
  line-height:1.62;
  text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
a{color:var(--text);text-decoration:none}
a:hover{text-decoration:none}
button,input,textarea{font:inherit}
button{-webkit-appearance:none;appearance:none}
.container{width:min(calc(100% - 32px),var(--max));margin:0 auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-999px;top:auto}
.skip-link:focus{left:14px;top:14px;z-index:120;background:var(--surface);padding:12px 14px;border-radius:12px;border:1px solid var(--line)}
.site-header{
  position:sticky;
  top:0;
  z-index:80;
  background:rgba(246,248,251,.86);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(216,225,234,.82);
}
html[data-theme="dark"] .site-header{background:rgba(11,18,32,.84);border-bottom-color:rgba(42,54,71,.92)}
.header-row{min-height:70px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:12px;color:var(--text);font-weight:800;letter-spacing:-.035em}
.brand:hover{opacity:.95}
.brand img{width:40px;height:40px;flex:0 0 auto}
.brand .label{display:flex;flex-direction:column;line-height:1.02}
.brand .label small{margin-top:4px;color:var(--muted);font-size:.82rem;font-weight:650;letter-spacing:0}
.nav-wrap{display:flex;align-items:center;gap:10px}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-links a{
  color:var(--muted);
  padding:10px 12px;
  border-radius:999px;
  font-size:.94rem;
  font-weight:700;
}
.nav-links a:hover,.nav-links a[aria-current="page"]{background:var(--surface);color:var(--text)}
.icon-btn,.menu-btn{
  min-height:46px;min-width:46px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--surface);
  color:var(--text);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:none;
}
.icon-btn:hover,.menu-btn:hover{border-color:var(--accent)}
.menu-btn{display:none;padding:0 16px;font-weight:800}
.mobile-panel{display:none;padding:10px 0 16px}
.mobile-panel.open{display:block}
.mobile-panel nav{
  display:grid;gap:8px;
  padding:10px;
  border-radius:20px;
  border:1px solid var(--line);
  background:var(--surface);
  box-shadow:var(--shadow);
}
.mobile-panel a{
  padding:13px 14px;
  border-radius:14px;
  color:var(--text);
  font-weight:700;
}
.mobile-panel a:hover,.mobile-panel a[aria-current="page"]{background:var(--surface-2)}
.hero{padding:28px 0 18px}
.hero-minimal{max-width:760px;margin:0 auto 18px;text-align:left}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 12px;border-radius:999px;
  background:var(--surface);
  border:1px solid var(--line);
  color:var(--muted);font-size:.9rem;font-weight:800;
}
.hero-minimal h1{margin:14px 0 10px;font-size:clamp(2.1rem,4.6vw,4.1rem);line-height:1;letter-spacing:-.06em}
.hero-minimal p{margin:0;color:var(--muted);font-size:1.05rem;max-width:58ch}
.inline-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.inline-links a{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--text);font-weight:800;font-size:.94rem;
  padding:10px 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);
}
.inline-links a:hover{border-color:var(--accent);color:var(--accent-strong)}
.tool-shell{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.tool-top{
  padding:18px 18px 12px;
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px
}
.tool-top h2,.tool-top h1{margin:0;font-size:1.18rem;letter-spacing:-.03em;line-height:1.08}
.tool-top p{margin:6px 0 0;color:var(--muted);font-size:.96rem;max-width:58ch}
.compact-badge{
  display:inline-flex;align-items:center;
  white-space:nowrap;
  padding:9px 12px;border-radius:999px;
  background:var(--accent-soft);
  color:var(--accent-strong);font-weight:800;font-size:.84rem;
  border:1px solid color-mix(in srgb, var(--accent) 16%, var(--line));
}
.panel-pad{padding:18px}
textarea{
  width:100%;
  min-height:320px;
  border:1px solid var(--line);
  border-radius:22px;
  padding:18px;
  resize:vertical;
  background:var(--surface-2);
  color:var(--text);
  line-height:1.65;
}
textarea::placeholder{color:color-mix(in srgb, var(--muted) 78%, transparent)}
textarea:focus,button:focus-visible,a:focus-visible,summary:focus-visible{
  outline:3px solid color-mix(in srgb, var(--accent) 42%, transparent);
  outline-offset:2px;
}
.toolbar{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.toolbar.primary-actions button:first-child{flex:1 1 240px}
button,.button{
  min-height:48px;
  border:1px solid transparent;
  border-radius:16px;
  padding:13px 16px;
  font-weight:800;
  letter-spacing:-.01em;
  cursor:pointer;
  transition:transform .06s ease,opacity .12s ease,border-color .12s ease,background .12s ease,color .12s ease,box-shadow .12s ease;
}
button:hover,.button:hover{transform:translateY(-1px)}
button:active,.button:active{transform:translateY(0)}
button:disabled{opacity:.58;cursor:not-allowed}
button.solid,.button.solid,
button:not(.secondary):not(.soft):not(.ghost){
  background:var(--button-bg);
  color:var(--button-text);
  box-shadow:0 10px 20px rgba(15,23,42,.10);
}
button.secondary,.button.secondary{
  background:var(--surface);
  color:var(--text);
  border-color:var(--line);
}
button.soft,.button.soft{
  background:var(--surface-2);
  color:var(--text);
  border-color:var(--line);
}
button.ghost,.button.ghost{
  background:transparent;
  color:var(--muted);
  border-color:var(--line);
}
button.secondary:hover,.button.secondary:hover,
button.soft:hover,.button.soft:hover,
button.ghost:hover,.button.ghost:hover{border-color:var(--accent)}
html[data-theme="dark"] button.secondary,
html[data-theme="dark"] .button.secondary{
  background:#151d2a;
  color:#f8fafc;
  border-color:#314055;
}
html[data-theme="dark"] button.soft,
html[data-theme="dark"] .button.soft{
  background:#111b24;
  color:#eef7f7;
  border-color:#314055;
}
html[data-theme="dark"] button.ghost,
html[data-theme="dark"] .button.ghost{
  background:transparent;
  color:#d1dae6;
  border-color:#314055;
}
.stats{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin-top:14px;
}
.stat{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:18px;
  padding:13px 14px;
}
.stat strong{display:block;font-size:1.05rem;letter-spacing:-.02em}
.stat span{display:block;font-size:.87rem;color:var(--muted)}
.notice{
  margin-top:14px;
  padding:12px 14px;
  border-radius:14px;
  background:var(--surface-2);
  border:1px solid var(--line);
  color:var(--muted);
  font-size:.95rem;
}
.notice.warn{color:var(--warn)}
.notice.ok{color:var(--success)}
.section{padding:22px 0}
.compact-section{padding:10px 0 20px}
.section h2,.section h3{margin:0 0 12px;letter-spacing:-.04em;line-height:1.06}
.section h2{font-size:clamp(1.4rem,3vw,2rem)}
.section .lead{margin:0 0 16px;color:var(--muted);max-width:68ch}
.grid-2,.grid-3{display:grid;gap:16px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:24px;
  padding:20px;
  box-shadow:var(--shadow);
}
.card h3,.card h2{margin:0 0 8px;font-size:1.06rem;letter-spacing:-.02em}
.card p{margin:0;color:var(--muted)}
.link-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.mini-link{
  display:flex;justify-content:space-between;gap:12px;align-items:flex-start;
  padding:16px 17px;border-radius:20px;border:1px solid var(--line);background:var(--surface);
}
.mini-link strong{display:block;letter-spacing:-.02em;line-height:1.15}
.mini-link span{display:block;margin-top:6px;color:var(--muted);font-size:.93rem;line-height:1.5}
.mini-link em{font-style:normal;color:var(--muted);margin-top:2px}
.mini-link:hover{border-color:var(--accent)}
.breadcrumbs{margin:0 0 18px;color:var(--muted);font-size:.93rem}
.breadcrumbs a{color:var(--muted)}
.page-intro{padding:24px 0 12px}
.page-intro .summary{max-width:760px}
.page-intro h1{margin:10px 0 10px;font-size:clamp(2rem,4vw,3.2rem);line-height:1.03;letter-spacing:-.05em}
.page-intro p{margin:0;color:var(--muted);font-size:1.02rem;max-width:64ch}
.related-inline{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.related-inline a{
  padding:9px 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--text);font-size:.92rem;font-weight:800;
}
.related-inline a:hover{border-color:var(--accent);color:var(--accent-strong)}
.content{max-width:820px}
.content h1{margin:0 0 12px;font-size:clamp(2rem,4vw,3.1rem);line-height:1.03;letter-spacing:-.05em}
.content h2{margin:32px 0 12px;font-size:1.55rem;letter-spacing:-.03em}
.content p,.content li{color:var(--muted)}
.content ul{padding-left:20px}
.content strong{color:var(--text)}
.content .example{
  padding:16px 18px;border-radius:18px;background:var(--surface);border:1px solid var(--line);margin:18px 0;
}
.faq-list{display:grid;gap:12px}
details{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:18px;
  padding:16px 18px;
}
summary{cursor:pointer;font-weight:800;list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";float:right;color:var(--muted)}
details[open] summary::after{content:"–"}
.muted{color:var(--muted)}
footer{
  margin-top:34px;
  padding:30px 0 44px;
  border-top:1px solid var(--line);
}
.footer-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:20px}
.footer-links{display:grid;gap:9px}
.footer-links a{color:var(--muted)}
.footer-links a:hover{color:var(--text)}
.hr-lite{height:1px;background:var(--line);margin:18px 0 0;border:0}
.mobile-only{display:none}
@media (max-width:960px){
  .grid-3,.grid-2,.footer-grid,.link-list{grid-template-columns:1fr}
  .hero{padding-top:20px}
}
@media (max-width:760px){
  .container{width:min(calc(100% - 20px),var(--max))}
  .nav-links{display:none}
  .menu-btn{display:inline-flex}
  .brand .label small{display:none}
  .header-row{min-height:64px}
  .tool-shell{border-radius:24px}
  .tool-top{padding:16px 16px 10px;flex-direction:column;align-items:flex-start}
  .panel-pad{padding:16px}
  textarea{min-height:240px;padding:16px;border-radius:20px}
  .toolbar{gap:10px}
  .toolbar.primary-actions button{flex:1 1 calc(50% - 10px)}
  .toolbar.primary-actions button:first-child{flex:1 1 100%}
  .toolbar.secondary-actions button{flex:1 1 calc(50% - 10px)}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-minimal p{font-size:1rem}
  .section{padding:18px 0}
  .page-intro{padding-top:18px}
  button,.button{min-height:50px;padding:14px 15px}
  .mini-link{padding:15px 16px}
}
@media (max-width:520px){
  .hero-minimal h1{font-size:clamp(1.85rem,10vw,2.4rem)}
  .hero-minimal{margin-bottom:14px}
  .toolbar.primary-actions button,
  .toolbar.primary-actions .button{flex:1 1 calc(50% - 10px)}
  .toolbar.primary-actions button:first-child{flex:1 1 100%}
  .toolbar.secondary-actions button,
  .toolbar.secondary-actions .button{flex:1 1 calc(50% - 10px)}
  .stats{grid-template-columns:1fr 1fr}
  .hero .inline-links{display:none}
}
@media (max-width:380px){
  .toolbar.secondary-actions button,
  .toolbar.secondary-actions .button,
  .toolbar.primary-actions button:not(:first-child),
  .toolbar.primary-actions .button:not(:first-child){flex:1 1 100%}
  .brand .label{font-size:.98rem}
}