:root{color-scheme:light;--ink:#142e2a;--muted:#49645e;--paper:#f4f5ef;--accent:#175b4d;--soft:#e1eee5;--line:#bccbc2}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,sans-serif;line-height:1.6}a{color:var(--accent);text-underline-offset:4px}.skip{position:absolute;left:1rem;top:-4rem}.skip:focus{top:1rem;background:white;padding:.6rem}header,main,footer{max-width:1120px;margin:auto;padding:24px}header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.brand{font-weight:800;letter-spacing:-.04em;font-size:1.5rem;text-decoration:none}.badge,.eyebrow{font-size:.75rem;text-transform:uppercase;letter-spacing:.13em;font-weight:700}.badge{background:var(--soft);padding:.4rem .7rem;border-radius:20px}.hero{padding:56px 0 32px;max-width:850px}h1{font-size:clamp(2.5rem,6vw,4.6rem);line-height:1.05;letter-spacing:-.06em;margin:18px 0}h2{font-size:1.35rem;letter-spacing:-.03em}p{max-width:74ch}.lede{font-size:1.15rem;color:var(--muted);max-width:650px}.workspace{display:grid;grid-template-columns:1.05fr 1fr;gap:20px}.panel{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px;min-width:0}.panel h2{margin-top:0}.number{font-size:.75rem;color:var(--muted);display:block;text-transform:uppercase;letter-spacing:.1em}label{display:block;font-size:.9rem;font-weight:600;margin:16px 0 7px}input,textarea,select,button{font:inherit}input,textarea,select{width:100%;background:#fff;color:var(--ink);border:1px solid #91a79c;border-radius:7px;padding:10px}textarea{resize:vertical;min-height:210px;font-family:ui-monospace,monospace;font-size:.85rem}input[type=file]{font-size:.85rem}button{cursor:pointer;border:1px solid var(--accent);border-radius:7px;background:var(--accent);color:#fff;padding:10px 16px;font-weight:600}.secondary{background:transparent;color:var(--accent)}button:disabled{opacity:.5;cursor:default}.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}.hint{font-size:.82rem;color:var(--muted)}.status{padding:16px 20px;border-left:3px solid var(--accent);background:var(--soft);margin:22px 0;min-height:58px}.results{overflow:auto;max-height:560px}table{width:100%;border-collapse:collapse;font-size:.88rem}caption{text-align:left;font-weight:700;margin-bottom:15px}th,td{text-align:left;padding:10px;border-bottom:1px solid var(--line);white-space:pre-wrap;overflow-wrap:anywhere;min-width:80px}thead{background:var(--soft)}.explain{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;padding:40px 0}.explain p{font-size:.9rem;color:var(--muted)}footer{border-top:1px solid var(--line);font-size:.8rem;color:var(--muted)}:focus-visible{outline:3px solid #dc7000;outline-offset:3px}code,.output{font-family:ui-monospace,monospace}.output{font-size:clamp(1.3rem,3vw,2rem);overflow-wrap:anywhere;white-space:pre-wrap;padding:24px;background:var(--soft);border-radius:10px}.roundtrip{overflow-wrap:anywhere}.row{display:grid;grid-template-columns:1fr 1fr;gap:15px}[hidden]{display:none!important}@media(max-width:740px){header,main,footer{padding:20px}.hero{padding:32px 0 20px}.workspace,.explain{grid-template-columns:1fr}.panel{padding:20px}.badge{font-size:.65rem}.row{grid-template-columns:1fr}h1{font-size:2.6rem}.explain{gap:10px}button{min-height:44px}}
