:root{color-scheme:light;--accent:#255f69;--bg:#eef3f3;--ink:#183339;--muted:#58717a;--line:#d7dcd9;--paper:#fff}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}button,input,textarea{font:inherit}button{cursor:pointer}
.site{max-width:1200px;margin:auto;padding:0 38px}
.skip{position:absolute;left:-9999px;top:10px;padding:10px;background:#fff;z-index:100}.skip:focus{left:10px}
.topbar{min-height:85px;display:flex;align-items:center;justify-content:space-between;gap:26px;border-bottom:1px solid var(--line)}
.brand{font-weight:800;font-size:24px;letter-spacing:-.07em;text-decoration:none;white-space:nowrap}
.brand i{font-style:normal;color:var(--accent)}
.nav{display:flex;gap:29px;align-items:center;font-size:14px;font-weight:650}
.nav a{text-decoration:none;color:var(--muted);white-space:nowrap}.nav a:hover,.nav a[aria-current=page]{color:var(--ink)}.nav a[aria-current=page]{box-shadow:0 2px var(--accent)}
.hero{padding:82px 0 78px;display:grid;grid-template-columns:1.08fr .92fr;gap:7%;align-items:center}
.eyebrow{display:block;margin-bottom:20px;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
h1{font-size:clamp(46px,6.2vw,82px);line-height:1.05;letter-spacing:-.067em;font-weight:750;margin:0 0 24px}
h2{font-size:clamp(29px,3.5vw,44px);line-height:1.14;letter-spacing:-.048em;margin:0 0 18px}
h3{font-size:21px;line-height:1.27;letter-spacing:-.025em;margin:0 0 11px}
p{line-height:1.66;margin:0 0 18px}.hero p,.intro p{font-size:18px;color:var(--muted);max-width:620px}
.actions{display:flex;gap:11px;flex-wrap:wrap;margin-top:30px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 18px;border:1px solid var(--accent);border-radius:9px;background:var(--accent);color:#fff;font-size:14px;font-weight:700;text-decoration:none}
.btn.alt{background:transparent;border-color:#bfcac5;color:var(--ink)}.btn:hover{filter:brightness(.95)}
.sample{background:var(--ink);color:#fff;border-radius:20px;padding:28px;min-height:390px;box-shadow:0 22px 50px rgba(31,42,38,.08)}
.sample-top{display:flex;align-items:center;justify-content:space-between;padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.2);font-size:12px;color:#c5d2cd}
.sample-dots{display:flex;gap:6px}.sample-dots i{width:8px;height:8px;border-radius:50%;background:#8da89e}
.sample pre{white-space:pre-wrap;word-break:break-word;line-height:1.7;font-size:15px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;margin:25px 0;color:#e1eee9}
.sample-foot{margin-top:25px;padding-top:17px;border-top:1px solid rgba(255,255,255,.2);font-size:13px;color:#c5d2cd}
.section{padding:67px 0;border-top:1px solid var(--line)}
.section-head{display:flex;justify-content:space-between;gap:32px;align-items:end;margin-bottom:27px}.section-head p{max-width:400px;color:var(--muted)}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:27px;text-decoration:none;display:flex;flex-direction:column;min-height:218px;transition:border-color .15s,transform .15s}
.card:hover{border-color:var(--accent);transform:translateY(-2px)}.card small{color:var(--accent);font-weight:800;letter-spacing:.1em;margin-bottom:27px}.card p{font-size:14px;color:var(--muted);margin:0}.card span{color:var(--accent);font-size:14px;font-weight:700;margin-top:auto;padding-top:20px}
.links{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.links a{background:#fff;border:1px solid var(--line);border-radius:11px;padding:22px;text-decoration:none}.links a:hover{border-color:var(--accent)}.links strong{display:block;font-size:19px;margin-bottom:7px}.links span{display:block;font-size:14px;line-height:1.5;color:var(--muted)}
.band{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;background:var(--ink);color:#fff;border-radius:18px;padding:36px}.band p{color:#d0dcd6;margin:0}.band .btn{background:#fff;border-color:#fff;color:var(--ink)}
.intro{max-width:790px;padding:64px 0 43px}.intro h1{font-size:clamp(42px,5.6vw,68px)}.crumbs{font-size:13px;color:var(--muted);margin-bottom:25px}.crumbs a{text-decoration:none}.crumbs a:hover{text-decoration:underline}
.tool-layout{display:grid;grid-template-columns:1fr .85fr;gap:17px;padding-bottom:65px}.panel{background:#fff;border:1px solid var(--line);border-radius:15px;padding:28px}.panel.dark{background:var(--ink);color:#fff;border-color:var(--ink)}
label{display:block;font-size:14px;font-weight:700;margin-bottom:10px}
textarea,input[type=text]{width:100%;border:1px solid #bbc9c2;border-radius:9px;background:#fff;color:#172f29;padding:13px;font-size:15px}
textarea{min-height:270px;resize:vertical;line-height:1.5}.shortarea{min-height:175px}
textarea:focus-visible,input:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.feedback{min-height:24px;margin:14px 0 0;font-size:14px;color:var(--muted)}.feedback.error{color:#b23e39}
.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.stat{padding:18px;border-radius:10px;background:#f0f5f2}.stat strong{display:block;font-size:32px;letter-spacing:-.05em}.stat span{color:var(--muted);font-size:13px}
.panel pre{white-space:pre-wrap;word-break:break-word;font:14px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;margin:0}
.output{min-height:110px;padding:17px;background:#f0f4f2;border-radius:9px;overflow:auto;word-break:break-word}
.table-scroll{overflow:auto;max-height:520px}.data-table{border-collapse:collapse;width:100%;font-size:14px}.data-table th,.data-table td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;min-width:90px}.data-table th{background:#e8f0eb;position:sticky;top:0}
.prose{max-width:780px;padding-bottom:78px}.prose h2{font-size:31px;margin:48px 0 15px}.prose h3{margin:28px 0 12px}.prose p,.prose li{font-size:17px;line-height:1.72;color:#405c53}.prose ul,.prose ol{padding-left:23px}.prose li{margin:9px 0}
.prose aside{background:#fff;border-left:4px solid var(--accent);padding:22px 25px;margin:30px 0}.prose aside p{margin:0}
.inline-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;background:#e5ebe7;border-radius:4px;padding:2px 5px}
.format-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:0 0 55px}.format-facts div{border-top:2px solid var(--accent);padding-top:16px}.format-facts strong{display:block;margin-bottom:8px}.format-facts span{font-size:14px;color:var(--muted);line-height:1.5}
.related{padding:35px 0 70px;border-top:1px solid var(--line)}
.footer{display:flex;justify-content:space-between;gap:25px;border-top:1px solid var(--line);padding:30px 0 37px;color:var(--muted);font-size:13px}.footer-links{display:flex;gap:17px;flex-wrap:wrap}.footer a{text-decoration:none}.footer a:hover{text-decoration:underline}
@media(max-width:850px){.site{padding:0 22px}.topbar{align-items:flex-start;flex-direction:column;justify-content:center;padding:20px 0;gap:16px}.nav{max-width:100%;overflow:auto;padding-bottom:5px}.hero{grid-template-columns:1fr;gap:31px;padding:60px 0}.sample{min-height:0}.tool-layout{grid-template-columns:1fr}.section-head{display:block}.links{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.site{padding:0 18px}.nav{gap:19px;font-size:13px}.hero h1{font-size:48px}.hero p,.intro p{font-size:16px}.intro{padding:47px 0 30px}.cards,.links,.format-facts{grid-template-columns:1fr}.card{min-height:175px}.band{grid-template-columns:1fr}.panel{padding:22px}.footer{flex-direction:column}.sample pre{font-size:13px}.stat strong{font-size:27px}}