styles.css

:root{--ink:#11120f;--paper:#f5f4ef;--muted:#696a65;--line:rgba(17,18,15,.14)}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,Arial,sans-serif;-webkit-font-smoothing:antialiased}button,textarea{font:inherit}button{cursor:pointer}header,footer{width:min(1220px,calc(100% - 40px));margin:auto;height:76px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:10px;font-weight:800;text-decoration:none;color:inherit}.brand i{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--paper);font-style:normal}.actions,.row,.facts,.metrics{display:flex;gap:10px;align-items:center}.network,.eyebrow,.kind,.section-head span{font:700 11px ui-monospace,monospace;text-transform:uppercase;letter-spacing:.08em}.network{padding:9px 12px;border:1px solid var(--line);border-radius:99px}.button{border:1px solid var(--ink);border-radius:99px;background:var(--ink);color:white;min-height:42px;padding:0 17px;font-weight:700}.button:hover{transform:translateY(-2px);box-shadow:0 7px 0 rgba(17,18,15,.1)}.button.secondary{background:transparent;color:var(--ink)}main{width:min(1220px,calc(100% - 40px));margin:auto}.hero{min-height:570px;display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center;border-bottom:1px solid var(--line)}.eyebrow{display:inline-block;border:1px solid var(--line);border-radius:99px;padding:8px 11px}.hero h1{font-size:clamp(64px,9vw,128px);line-height:.83;letter-spacing:-.075em;margin:28px 0;max-width:900px}.hero p{font-size:20px;line-height:1.55;color:var(--muted);max-width:680px}.facts{margin-top:40px;gap:35px;color:var(--muted);font:11px ui-monospace,monospace;text-transform:uppercase}.facts b{display:block;font:700 23px Arial;color:var(--ink);margin-bottom:5px}.orb{width:min(34vw,390px);aspect-ratio:1;border:1px solid var(--ink);border-radius:50%;position:relative;justify-self:end;background:var(--accent);transition:border-radius .35s,transform .35s}.orb:hover{border-radius:38% 62% 55% 45%;transform:rotate(8deg)}.orb i{position:absolute;inset:16%;border:1px solid var(--ink);border-radius:50%}.orb i:nth-child(2){inset:32%}.orb i:nth-child(3){inset:48%;background:var(--ink)}.workspace{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:80px 0;border-bottom:1px solid var(--line)}.composer,.preview{border:1px solid var(--line);border-radius:28px;padding:30px;background:rgba(255,255,255,.36)}.section-head{display:flex;justify-content:space-between;align-items:start;margin-bottom:25px}.section-head h2{font-size:31px;letter-spacing:-.045em;margin:7px 0}.kind{background:var(--accent);padding:7px 9px;border-radius:99px}label{display:block;margin-bottom:8px;font:700 11px ui-monospace,monospace;text-transform:uppercase}textarea{width:100%;border:1px solid var(--line);border-radius:15px;background:white;padding:15px;resize:vertical;line-height:1.5;margin-bottom:14px}pre{min-height:250px;max-height:400px;overflow:auto;border-radius:15px;background:var(--ink);color:#efeee8;padding:18px;font:12px/1.6 ui-monospace,monospace;white-space:pre-wrap;overflow-wrap:anywhere}.meter{height:7px;background:rgba(17,18,15,.09);border-radius:9px;overflow:hidden}.meter i{display:block;height:100%;background:var(--accent);border-right:1px solid var(--ink);transition:width .3s}.meter i.over{background:#ff7878}.metrics{justify-content:space-between;margin:18px 0;color:var(--muted);font-size:11px}.metrics b{display:block;color:var(--ink);font-size:19px}.notice{color:var(--muted);font-size:12px;line-height:1.5}.why{padding:120px 0;max-width:900px}.why h2{font-size:clamp(46px,7vw,84px);line-height:.95;letter-spacing:-.06em}.why p{color:var(--muted);font-size:18px;line-height:1.6;max-width:650px}footer{border:0;border-top:1px solid var(--line);font-size:13px}footer a{color:inherit}@media(max-width:800px){header{height:auto;padding:14px 0}.network{display:none}.hero,.workspace{grid-template-columns:1fr}.hero{padding:75px 0}.hero h1{font-size:62px}.orb{display:none}.facts{flex-wrap:wrap}.metrics{align-items:start}.workspace{padding:45px 0}.composer,.preview{padding:22px}}