@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("../fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("../fonts/inter-latin-600-normal.woff2") format("woff2"); }
* { box-sizing: border-box; }
body { margin: 0; background: #121519; color: #d9dee4; font: 15px/1.65 "Inter", system-ui, sans-serif; }
a { color: #6cc0ff; }
:focus-visible { outline: 2px solid #3fa9f5; outline-offset: 2px; }
.demobar { background: #f5c542; color: #1d1a10; padding: 6px 16px; font-size: 13px; text-align: center; }
.demobar a { color: #1d1a10; font-weight: 600; margin-left: 10px; }
header { display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-bottom: 1px solid #2c323a; background: #171b20; flex-wrap: wrap; }
header .brand { display: flex; align-items: center; gap: 8px; font-weight: 600; color: #fff; text-decoration: none; }
header .brand b { color: #3fa9f5; }
header nav { margin-left: auto; display: flex; gap: 16px; font-size: 14px; }
main { max-width: 780px; margin: 0 auto; padding: 36px 20px 50px; }
h1 { font-size: 28px; margin: 0 0 18px; color: #fff; }
h2 { font-size: 18px; margin: 30px 0 8px; color: #fff; }
.note { background: #1d2b38; border: 1px solid #2d4a63; border-radius: 10px; padding: 14px 16px; color: #d6e9f8; }
footer { border-top: 1px solid #2c323a; padding: 18px 20px; font-size: 13px; color: #8b95a1; text-align: center; }
footer a { color: #8b95a1; }