@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700&display=swap');

:root{--ink:#11140f;--paper:#f4f2e9;--panel:#fbfaf4;--lime:#c9ff57;--green:#244c35;--muted:#676a62;--line:#d7d5ca;--red:#cc4a36;--amber:#a76513;--shadow:0 28px 80px rgba(33,38,26,.12)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Manrope,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,select,textarea{font:inherit}
.skip-link{position:fixed;left:16px;top:-60px;background:var(--lime);padding:12px 18px;z-index:99}.skip-link:focus{top:16px}
.site-header{height:76px;display:flex;align-items:center;justify-content:space-between;max-width:1240px;margin:auto;padding:0 28px;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:12px;font-weight:700;letter-spacing:-.03em}
.brand-mark{width:28px;height:28px;display:flex;gap:2px;align-items:flex-end;transform:rotate(-8deg)}
.brand-mark i{display:block;width:8px;background:var(--ink);border-radius:1px}.brand-mark i:nth-child(1){height:16px}.brand-mark i:nth-child(2){height:25px}.brand-mark i:nth-child(3){height:20px}
nav{display:flex;align-items:center;gap:28px;font-size:14px;font-weight:600}nav a:hover{opacity:.6}.nav-github{border-left:1px solid var(--line);padding-left:28px}
main{overflow:hidden}.hero{max-width:1240px;margin:0 auto;padding:112px 28px 82px;position:relative}.hero:after{content:"";position:absolute;width:420px;height:420px;right:-100px;top:35px;border-radius:50%;background:repeating-radial-gradient(circle,var(--line) 0 1px,transparent 1px 18px);opacity:.55}
.eyebrow,.section-kicker{font:500 11px DM Mono,monospace;letter-spacing:.13em;text-transform:uppercase}.eyebrow{display:flex;align-items:center;gap:9px;margin-bottom:25px}.eyebrow span{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(36,76,53,.12)}
h1{font-size:clamp(58px,8.5vw,118px);line-height:.89;letter-spacing:-.075em;margin:0;max-width:980px;position:relative;z-index:1}h1 em{font-family:Georgia,serif;font-weight:400;color:var(--green)}
.hero-copy{font-size:19px;line-height:1.65;max-width:670px;color:var(--muted);margin:40px 0}
.hero-proof{display:flex;gap:0;border-top:1px solid var(--line);max-width:720px}.hero-proof div{padding:24px 58px 0 0;margin-right:58px;border-right:1px solid var(--line);display:flex;flex-direction:column}.hero-proof div:last-child{border:0}.hero-proof strong{font:500 22px DM Mono}.hero-proof span{font-size:12px;color:var(--muted);margin-top:5px;white-space:nowrap}
.tool-shell{background:var(--ink);color:#f4f2e9;max-width:1240px;margin:0 auto 130px;padding:36px;border-radius:4px;box-shadow:var(--shadow)}
.tool-topbar{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:34px}.tool-topbar h2{font-size:30px;letter-spacing:-.04em;margin:10px 0 0}.tool-shell .section-kicker{color:#a7aa9f}.privacy-pill{font:500 11px DM Mono;border:1px solid #3a3e36;border-radius:40px;padding:9px 13px;display:flex;align-items:center;gap:8px;color:#b8bbb2}.privacy-pill span{width:6px;height:6px;border-radius:50%;background:var(--lime)}
.format-row{display:grid;grid-template-columns:1fr 54px 1fr;gap:12px;align-items:end;margin-bottom:14px}.format-row label>span{display:block;color:#92968b;font:500 10px DM Mono;text-transform:uppercase;letter-spacing:.1em;margin:0 0 8px 2px}.format-row select{width:100%;appearance:none;background:#20231e;color:#f4f2e9;border:1px solid #3b3f37;border-radius:3px;padding:15px 42px 15px 15px;background-image:linear-gradient(45deg,transparent 50%,#aeb2a7 50%),linear-gradient(135deg,#aeb2a7 50%,transparent 50%);background-position:calc(100% - 18px) 21px,calc(100% - 13px) 21px;background-size:5px 5px;background-repeat:no-repeat}.swap-button{width:42px;height:42px;margin:0 auto 3px;background:transparent;border:1px solid #41453d;color:#c7cbc0;border-radius:50%;cursor:pointer}.swap-button:hover{background:var(--lime);color:var(--ink)}.swap-button svg{width:20px;fill:none;stroke:currentColor;stroke-width:1.6}
.editor-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.editor-panel{border:1px solid #3a3e36;background:#181b17;border-radius:3px;min-width:0}.editor-header,.editor-status{height:46px;display:flex;align-items:center;justify-content:space-between;padding:0 15px;border-bottom:1px solid #30342d;font:11px DM Mono;color:#b7baaf}.editor-status{border:0;border-top:1px solid #30342d;height:38px;justify-content:flex-start;gap:8px;color:#898d83}.text-button,.copy-button{border:0;background:transparent;color:#a5a99e;font:11px DM Mono;cursor:pointer}.text-button:hover{color:var(--lime)}.copy-button{display:flex;align-items:center;gap:6px}.copy-button svg{width:15px;fill:none;stroke:currentColor;stroke-width:1.6}.editor-wrap{height:340px;display:flex;overflow:hidden}.line-numbers{width:44px;flex:0 0 44px;padding:16px 10px;text-align:right;white-space:pre;overflow:hidden;background:#151714;color:#565a52;font:12px/1.65 DM Mono;user-select:none}.editor-wrap textarea{resize:none;width:100%;height:100%;border:0;outline:0;background:transparent;color:#e9eadf;padding:16px;font:12px/1.65 DM Mono;tab-size:2}.editor-wrap textarea::placeholder{color:#5f625b}.output-panel textarea{color:#d8f5a2}.status-dot{width:7px;height:7px;border-radius:50%;display:inline-block}.status-dot.neutral{background:#666b60}.status-dot.ok{background:var(--lime)}.status-dot.error{background:#ff6a53}.status-dot.warn{background:#ffbd5b}
.tool-footer{display:flex;align-items:center;justify-content:space-between;margin-top:20px}.primary-button{background:var(--lime);color:var(--ink);border:0;border-radius:2px;padding:15px 20px;font-weight:700;display:flex;align-items:center;gap:50px;cursor:pointer}.primary-button:hover{filter:brightness(.9)}.primary-button b{font-size:20px}.tool-footer p{font:10px DM Mono;color:#777c71}.tool-footer kbd{border:1px solid #484c43;border-radius:3px;padding:3px;margin:2px}
.checks-section,.workflow-section,.guides-section,.faq-section{max-width:1240px;margin:0 auto;padding:0 28px 130px}.section-intro{max-width:690px;margin-bottom:52px}.section-intro h2{font-size:clamp(38px,5vw,64px);letter-spacing:-.055em;line-height:1.02;margin:17px 0}.section-intro p{color:var(--muted);font-size:17px;line-height:1.65}
.check-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}.check-grid article{padding:28px;min-height:260px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column}.check-icon{font:500 19px DM Mono;color:var(--green)}.check-grid h3{margin:48px 0 9px;font-size:18px}.check-grid p{font-size:13px;line-height:1.6;color:var(--muted);margin:0}.check-grid small{margin-top:auto;font:10px DM Mono;text-transform:uppercase;color:#8b8e86}.check-grid article.pass{background:#edf7dc}.check-grid article.warn{background:#fff2d8}.check-grid article.fail{background:#fee9e4}.diagnostics{margin-top:18px;border:1px solid var(--line);background:var(--panel);padding:18px}.diagnostic{font:12px/1.5 DM Mono;padding:9px;border-bottom:1px solid var(--line)}.diagnostic:last-child{border:0}.diagnostic strong{margin-right:8px}.diagnostic.error strong{color:var(--red)}.diagnostic.warning strong{color:var(--amber)}
.workflow-section{display:grid;grid-template-columns:1fr 1fr;gap:100px}.steps{list-style:none;padding:0;margin:0}.steps li{display:flex;gap:22px;padding:25px 0;border-top:1px solid var(--line)}.steps li>span{flex:0 0 32px;height:32px;background:var(--green);color:white;border-radius:50%;display:grid;place-items:center;font:11px DM Mono}.steps h3{margin:2px 0 7px;font-size:17px}.steps p{margin:0;color:var(--muted);font-size:14px;line-height:1.55}
.guide-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.guide-grid a{background:var(--panel);border:1px solid var(--line);padding:27px;min-height:170px;display:flex;flex-direction:column;transition:.2s}.guide-grid a:hover{background:var(--lime);transform:translateY(-3px)}.guide-grid span{font:10px DM Mono;text-transform:uppercase;color:var(--muted)}.guide-grid strong{font-size:24px;letter-spacing:-.03em;margin-top:9px}.guide-grid b{margin-top:auto;font:11px DM Mono}
.faq-list{border-top:1px solid var(--ink)}details{border-bottom:1px solid var(--line)}summary{list-style:none;cursor:pointer;padding:24px 0;font-weight:600;display:flex;justify-content:space-between}summary::-webkit-details-marker{display:none}summary span{font:20px DM Mono}details[open] summary span{transform:rotate(45deg)}details p{max-width:760px;color:var(--muted);line-height:1.7;margin:0 0 28px}
footer{max-width:1240px;margin:0 auto;padding:35px 28px 55px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--muted)}footer .brand{color:var(--ink);font-size:14px}footer .brand-mark{transform:scale(.7)}footer div{display:flex;gap:20px}
.toast{position:fixed;left:50%;bottom:25px;transform:translate(-50%,30px);background:var(--ink);color:white;padding:12px 18px;border-radius:3px;font:12px DM Mono;opacity:0;pointer-events:none;transition:.2s;z-index:20}.toast.show{opacity:1;transform:translate(-50%,0)}
.content-page main{max-width:900px;margin:0 auto;padding:90px 28px 120px}.content-page h1{font-size:clamp(48px,8vw,88px)}.content-page .lead{font-size:20px;color:var(--muted);line-height:1.7;margin:35px 0 60px}.article-card{background:var(--panel);border:1px solid var(--line);padding:clamp(24px,6vw,62px)}.article-card h2{font-size:32px;letter-spacing:-.04em;margin:45px 0 15px}.article-card h2:first-child{margin-top:0}.article-card p,.article-card li{line-height:1.75;color:#4f534b}.article-card pre{background:var(--ink);color:#dbf3ac;padding:22px;overflow:auto;font:12px/1.65 DM Mono}.article-card .cta{display:inline-flex;background:var(--lime);padding:14px 18px;margin-top:25px;font-weight:700}
@media(max-width:800px){nav a:not(.nav-github){display:none}.hero{padding-top:75px}.hero:after{display:none}.hero-proof{overflow:auto}.hero-proof div{padding-right:30px;margin-right:30px}.tool-shell{margin-left:12px;margin-right:12px;padding:20px}.tool-topbar{gap:15px}.privacy-pill{display:none}.format-row{grid-template-columns:1fr 42px 1fr}.editor-grid{grid-template-columns:1fr}.editor-wrap{height:270px}.check-grid{grid-template-columns:1fr 1fr}.workflow-section{grid-template-columns:1fr;gap:20px}.guide-grid{grid-template-columns:1fr}footer{flex-direction:column;gap:25px}.site-header{padding:0 18px}}
@media(max-width:480px){h1{font-size:54px}.hero{padding-left:20px;padding-right:20px}.tool-shell{padding:14px}.format-row{grid-template-columns:1fr}.swap-button{transform:rotate(90deg)}.editor-wrap{height:250px}.check-grid{grid-template-columns:1fr}.tool-footer p{display:none}.primary-button{width:100%;justify-content:space-between}.checks-section,.workflow-section,.guides-section,.faq-section{padding-left:20px;padding-right:20px}.section-intro h2{font-size:40px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}