:root{color-scheme:dark;font-family:system-ui,-apple-system,sans-serif;background:#101714;color:#e5eee8}*{box-sizing:border-box}body{margin:0}main{max-width:620px;margin:auto;padding:48px 24px}h1{font-size:clamp(36px,8vw,54px);line-height:1.1;letter-spacing:-2px;margin:16px 0 24px}h2{font-size:20px}.eyebrow{color:#9dddb7;font-size:11px;letter-spacing:2px}p{line-height:1.6;color:#b8c9bd}section{border:1px solid #34443a;border-radius:18px;padding:24px;margin:24px 0;background:#17221b}label{display:block;margin:18px 0 8px}input,select{width:100%;padding:14px;border:1px solid #667c6d;background:#101714;color:#e5eee8;border-radius:8px;font:inherit}button{padding:13px 18px;margin:14px 8px 0 0;border:1px solid transparent;border-radius:8px;background:#a7e7bb;color:#102416;font:inherit;cursor:pointer}.secondary{background:transparent;border-color:#667c6d;color:#d1e1d6}.danger{background:transparent;color:#f0b5ae;border-color:#9a615b}button:disabled{opacity:.5;cursor:wait}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #a7e7bb;outline-offset:3px}.hint,footer{font-size:13px}hr{border:0;border-top:1px solid #34443a;margin-top:24px}#notice{min-height:24px;color:#a7e7bb}footer{margin-top:40px;color:#b8c9bd}[hidden]{display:none!important}

textarea { display:block; width:100%; box-sizing:border-box; padding:12px; border-radius:8px; font:inherit; resize:vertical; }
#test-result { white-space:pre-wrap; overflow-wrap:anywhere; }