@font-face { font-family: "ON"; src: url("Onest[wght].ttf") format("truetype"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "FX"; src: url("FiraSansExtraCondensed-Black.ttf") format("truetype"); font-weight: 900; font-display: swap; }
:root { --ink: #0e2638; --ink2: #16364d; --sun: #ffc531; --soft: #a9c6d3; }
* { margin: 0; padding: 0; box-sizing: border-box; }
html { background: var(--ink); }
body { font-family: "ON", system-ui, sans-serif; color: #fff; line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: var(--sun); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; border-radius: 4px; }
.in { max-width: 680px; margin: 0 auto; padding: 0 22px; }
header.top { padding: 22px 0; }
header.top .in { display: flex; justify-content: space-between; align-items: baseline; }
.logo { font-family: "FX"; font-size: 30px; color: #fff; text-decoration: none; }
header.top nav a { margin-left: 20px; font-weight: 600; font-size: 15px; }
h1 { font-family: "FX"; font-size: clamp(54px, 15vw, 116px); line-height: 0.9; margin: 34px 0 20px; }
h2 { font-family: "FX"; font-size: clamp(34px, 8vw, 46px); line-height: 1; margin: 52px 0 16px; }
p { font-size: 18px; color: #dbe8ee; margin-bottom: 16px; }
.lead { font-size: 21px; color: #fff; }
.posts { list-style: none; margin-top: 8px; }
.posts a { display: block; padding: 20px 0; border-top: 1px solid #23445a; text-decoration: none; color: #fff; }
.posts li:last-child a { border-bottom: 1px solid #23445a; }
.posts b { display: block; font-family: "FX"; font-size: clamp(30px, 7vw, 40px); line-height: 1.02; }
.posts span { display: block; margin-top: 6px; font-size: 15px; color: var(--soft); }
.posts a:hover b { color: var(--sun); }
.links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.links a { height: 44px; padding: 0 20px; border-radius: 22px; background: var(--ink2); color: #fff; font-weight: 600; font-size: 15px; line-height: 44px; text-decoration: none; }
.links a:hover { background: var(--sun); color: var(--ink); }
ol.steps { margin: 6px 0 20px 24px; }
ol.steps li { font-size: 18px; color: #fff; margin-bottom: 12px; padding-left: 4px; }
ol.steps li::marker { color: var(--sun); font-weight: 800; }
ol.steps b { font-family: "FX"; font-size: 24px; margin-right: 6px; }
.demo { position: relative; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 14px; background: #061520; display: block; margin: 26px 0 8px; }
.note { font-size: 14px; color: var(--soft); }
.prompt { position: relative; background: #0b1a26; border: 1px solid #23445a; border-radius: 14px; padding: 18px 18px 68px; font-size: 15.5px; line-height: 1.55; color: #e6f0f4; white-space: pre-wrap; margin-top: 10px; }
.prompt button { position: absolute; left: 18px; bottom: 16px; height: 40px; padding: 0 22px; border: 0; border-radius: 20px; background: var(--sun); color: var(--ink); font: 700 15px "ON", sans-serif; cursor: pointer; }
footer { margin-top: 64px; padding: 26px 0 60px; border-top: 1px solid #23445a; font-size: 14px; color: var(--soft); }