:root{color-scheme:light dark;font:16px/1.8 system-ui,sans-serif;background:#f7f9fc;color:#14213a}*{box-sizing:border-box}body{margin:0}main{max-width:760px;margin:auto;padding:24px}h1{font-size:clamp(1.5rem,5vw,2.2rem);line-height:1.5;text-wrap:balance}h2{font-size:1.15rem}p{overflow-wrap:anywhere}label{display:block;margin:14px 0}input{display:block;width:100%;padding:10px;font:inherit;background:#fff;color:#14213a;border:1px solid #64748b;border-radius:6px}input:disabled{color:#526173;background:#e0e6ed}button{font:inherit;padding:10px 16px;background:#1d4ed8;color:white;border:2px solid #1d4ed8;border-radius:6px;cursor:pointer;display:inline-flex;gap:8px;align-items:center}button:hover{background:#173eae}.actions{display:flex;gap:12px;flex-wrap:wrap}button img{background:white;border-radius:4px}pre{white-space:pre-wrap;overflow-wrap:anywhere;padding:16px;background:#e8eef7;color:#14213a;font:14px/1.8 ui-monospace,monospace}details{padding:12px;border:1px solid #718096;margin:16px 0}summary{cursor:pointer;padding:8px;font-weight:650}section{padding:18px;border:1px solid #718096}.element{margin:20px auto}:focus-visible{outline:3px solid #b45309;outline-offset:4px}@media(prefers-color-scheme:dark){:root{background:#111b2b;color:#eef4ff}input{background:#1d2b40;color:#eef4ff}input:disabled{background:#344155;color:#d3dcea}pre{background:#223149;color:#eef4ff}:focus-visible{outline-color:#fbbf24}}