:root{color-scheme:dark;font-family:Inter,system-ui,sans-serif;background:#0b1118;color:#ecf4fb}*{box-sizing:border-box}body{margin:0}header,main,footer{max-width:1150px;margin:auto;padding:28px}header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #263443}.brand{font-weight:800;letter-spacing:.12em;text-decoration:none}.brand span{color:#7f91a4;font-size:.75em}nav{display:flex;gap:24px}a{color:#7ce2d2}a:hover{color:white}.hero{padding:55px 0 36px;max-width:850px}.eyebrow,.tag{font-family:monospace;letter-spacing:.12em;color:#8be6d5;font-size:12px}h1{font-size:clamp(42px,7vw,78px);line-height:1.04;letter-spacing:-.05em;margin:24px 0}h1 span{color:#85e4d3}.lead{font-size:20px;line-height:1.6;color:#bfcede;max-width:730px}.boundary{font-size:14px;line-height:1.6;color:#8c9daf;max-width:760px}.grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.card{border:1px solid #29394a;border-radius:18px;padding:28px;background:linear-gradient(145deg,#14212f,#101923)}h2{font-size:25px;letter-spacing:-.02em;margin:16px 0}p{line-height:1.65;color:#acbdce}label{display:block;margin:22px 0 8px;font-size:14px}input{width:100%;padding:13px;border:1px solid #43576c;border-radius:8px;background:#09131d;color:white;font:inherit}button{cursor:pointer;background:#8be6d5;color:#081b19;border:0;border-radius:8px;padding:13px 18px;font:600 14px system-ui;margin:15px 8px 0 0}button:disabled{opacity:.5;cursor:wait}.secondary{background:#233649;color:#d9e8f7}button:hover{filter:brightness(1.12)}pre{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.6;font-size:13px;background:#0a131c;border-radius:8px;padding:16px;min-height:60px;color:#cce8e5}.number{font-size:74px;font-family:monospace;color:#8be6d5;padding:24px 0 10px}.links{display:grid;gap:10px;margin:22px 0}.links a{display:flex;justify-content:space-between;text-decoration:none;border:1px solid #385063;border-radius:8px;padding:13px}.links span{font-size:12px;color:#90a9bb}.notes{margin:35px 0;padding:10px 0;max-width:820px}#shareResult{font-size:13px;color:#8be6d5}footer{color:#8294a6;font-size:12px;border-top:1px solid #263443;padding-bottom:40px}:focus-visible{outline:3px solid #fff;outline-offset:3px}@media(max-width:700px){header,main,footer{padding:20px}.grid{grid-template-columns:1fr}.hero{padding-top:30px}.card{padding:22px}.brand span{display:none}nav{gap:14px}}