:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,sans-serif;color:#e4edf4;background:#070d14}*{box-sizing:border-box}body{margin:0}main{max-width:1440px;margin:auto;padding:32px 48px}nav{display:flex;justify-content:space-between;gap:20px;font:11px ui-monospace,monospace;letter-spacing:2px;color:#90a4b7}nav strong{color:#87e0cd}header{padding:84px 0 56px;max-width:900px}.eyebrow{color:#88dcc9;font:11px ui-monospace,monospace;letter-spacing:2px}h1{font-size:clamp(52px,7vw,100px);line-height:1.02;letter-spacing:-5px;margin:24px 0}h1 em{font-style:normal;color:#92e5d1}.intro{font-size:20px;line-height:1.6;color:#a2b3c5;max-width:640px}.pills{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.pills span{border:1px solid #2a3c4b;padding:8px 12px;border-radius:30px;font-size:12px;color:#a6bacd}.workbench{border:1px solid #2b4254;border-radius:18px;overflow:hidden;background:#0a1420}.controls{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:18px;border-bottom:1px solid #23374a}button,select{font:12px ui-monospace,monospace;background:#122333;color:#b8cddd;border:1px solid #324759;border-radius:7px;padding:10px 13px;cursor:pointer}button:hover,button.selected{color:#b6ffe9;border-color:#7ce1c2;background:#153c39}#styles{display:flex;gap:6px}iframe{width:100%;height:620px;border:0;background:#09131f}.note{padding:0 20px 10px;color:#8098ac;font:11px ui-monospace,monospace}.details{display:grid;grid-template-columns:1fr 1fr;gap:64px;padding:64px 0;color:#a0b3c5;line-height:1.7}h2{color:#e6eef6;font-size:34px;letter-spacing:-1px}a{color:#90e1cc;margin-right:16px}pre{white-space:pre-wrap;word-break:break-word;font:12px/1.6 ui-monospace,monospace;color:#b2d7ed;max-height:350px;overflow:auto}.code{background:#0e1b29;border:1px solid #293d50;border-radius:12px;padding:22px}.code>div{color:#8ce2cc;font:12px ui-monospace,monospace}footer{border-top:1px solid #233544;padding:26px 0;color:#708798;font-size:12px}@media(max-width:700px){main{padding:24px 18px}header{padding:54px 0 36px}h1{letter-spacing:-2px}.details{grid-template-columns:1fr;gap:24px}.controls{padding:12px}iframe{height:440px}.intro{font-size:17px}#styles{order:3;width:100%}}