:root{--bg:#f4f6f8;--panel:#fff;--ink:#1b2530;--mut:#5d6b7a;--line:#d9dfe5;--ac:#1d6b57;--on:#fff;--err:#b3382c}
@media(prefers-color-scheme:dark){:root{--bg:#17202b;--panel:#1e2937;--ink:#e4e9ef;--mut:#93a1b1;--line:#2e3b4b;--ac:#6fd0b0;--on:#10261f;--err:#f08a8a}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:inherit;text-decoration:none}
.top{max-width:62rem;margin:0 auto;padding:1.5rem 1.25rem 0}
.mark{font-weight:700;letter-spacing:-.01em}
.mark span{color:var(--mut);font-weight:500}
.shell{max-width:62rem;margin:0 auto;padding:2rem 1.25rem 3rem;display:grid;grid-template-columns:10rem 1fr;gap:2.5rem}
nav{display:flex;flex-direction:column;gap:.15rem;align-self:start}
nav a{padding:.35rem .75rem;border-left:2px solid var(--line);color:var(--mut)}
nav a:hover{color:var(--ink)}
nav a[aria-current=page]{border-color:var(--ac);color:var(--ink);font-weight:600}
h1{font-size:1.75rem;line-height:1.2;letter-spacing:-.02em;margin:0 0 .35rem}
.lead{margin:0 0 1.5rem;color:var(--mut);max-width:34rem}
.modes{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1rem}
button{font:inherit;color:var(--ink);background:transparent;border:1px solid var(--line);border-radius:4px;padding:.4rem .9rem;cursor:pointer}
button:hover{border-color:var(--ac)}
button[aria-pressed=true]{background:var(--ac);border-color:var(--ac);color:var(--on)}
.io{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.io.one{grid-template-columns:1fr}
label{display:block;font-size:.875rem;color:var(--mut);margin-bottom:.3rem}
textarea{width:100%;height:16rem;resize:vertical;padding:.7rem .8rem;border:1px solid var(--line);border-radius:4px;background:var(--panel);color:var(--ink);font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
textarea[readonly]{background:transparent}
textarea[data-err]{color:var(--err)}
.act{margin-top:.75rem}
:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
footer{max-width:62rem;margin:0 auto;padding:0 1.25rem 2rem;color:var(--mut);font-size:.875rem}
footer a{text-decoration:underline;text-underline-offset:.2em}
@media(max-width:44rem){.shell{grid-template-columns:1fr;gap:1.25rem}nav{flex-direction:row;overflow-x:auto}nav a{border-left:0;border-bottom:2px solid var(--line);white-space:nowrap}nav a[aria-current=page]{border-bottom-color:var(--ac)}.io{grid-template-columns:1fr}textarea{height:11rem}}
.about{max-width:40rem;margin:2rem 0 0;color:var(--mut)}
.tools{list-style:none;margin:0;padding:0;max-width:40rem}
.tools li{display:grid;grid-template-columns:7rem 1fr;gap:1rem;padding:.8rem 0;border-top:1px solid var(--line)}
.tools li:last-child{border-bottom:1px solid var(--line)}
.tools a{font-weight:600}
.tools a:hover{color:var(--ac)}
.tools span{color:var(--mut)}
@media(max-width:44rem){.tools li{grid-template-columns:1fr;gap:.1rem}}