:root{color-scheme:light;--ink:#142d34;--muted:#52656a;--accent:#006b60;--line:#ccd9d7;--paper:#f5f6ef}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.65 system-ui,sans-serif}header,main,footer{max-width:1120px;margin:auto;padding:24px}header{display:flex;justify-content:space-between;gap:24px;border-bottom:1px solid var(--line)}a{color:var(--accent);text-underline-offset:4px}nav{display:flex;gap:24px;flex-wrap:wrap}.brand{font-weight:800;letter-spacing:-.5px;text-decoration:none}h1{font-size:clamp(2.5rem,6vw,4.8rem);line-height:1.06;letter-spacing:-.045em;margin:20px 0}h2{line-height:1.2;letter-spacing:-.025em;font-size:1.8rem}h3{line-height:1.3}.eyebrow{text-transform:uppercase;font-size:.75rem;letter-spacing:.14em;font-weight:800;color:var(--accent)}.hero{max-width:860px;padding:35px 0}.intro{font-size:1.2rem;max-width:690px}.layout{display:grid;grid-template-columns:1.5fr 1fr;gap:36px;align-items:start}form,.panel{background:white;border:1px solid var(--line);padding:28px;border-radius:10px}label{display:block;font-weight:650;margin-top:20px}input,select{display:block;width:100%;padding:12px;border:1px solid #809794;border-radius:5px;font:inherit;color:var(--ink);background:white;margin-top:6px}button{font:inherit;cursor:pointer;border:0;border-radius:5px;padding:12px 18px;color:white;background:var(--accent);font-weight:650;margin-top:22px}button.secondary{background:transparent;color:var(--accent);border:1px solid var(--line)}small,.muted{color:var(--muted)}.note{border-left:3px solid #c99035;padding-left:16px}.section{margin:60px 0;max-width:900px}table{border-collapse:collapse;width:100%}th,td{border-bottom:1px solid var(--line);text-align:left;padding:12px}#result{margin-top:28px;border:2px solid var(--accent)}pre{font:14px/1.6 ui-monospace,monospace;white-space:pre-wrap;overflow-wrap:anywhere;background:#f0f5f3;padding:18px}li{margin-bottom:12px}details{border-top:1px solid var(--line);padding:18px 0}summary{cursor:pointer;font-weight:700}footer{border-top:1px solid var(--line);font-size:.85rem}:focus-visible{outline:3px solid #ce8b13;outline-offset:4px}@media(max-width:760px){.layout{grid-template-columns:1fr}header{flex-direction:column}form,.panel{padding:20px}.hero{padding-top:20px}main{padding:18px}nav{gap:16px}}@media print{form,button,header nav{display:none}body{background:white}.layout{display:block}}