@import url('./fonts.css');
:root { color-scheme:dark; --txt:#f4f8ff; --dim:#a6bdd7; --accent:#45c7ff; --line:rgba(111,168,215,.22); font-family:'Titillium Web','Segoe UI',Arial,sans-serif; background:#070d17; color:var(--txt); }
* { box-sizing:border-box; }
body { margin:0; line-height:1.65; }
.wrap { width:min(850px,100%); margin:auto; padding:28px 24px 64px; }
header, footer { border-bottom:1px solid var(--line); padding:12px 0 20px; }
nav { display:flex; flex-wrap:wrap; gap:12px 24px; align-items:center; }
a { color:var(--accent); text-underline-offset:4px; }
a:hover { color:#b2eeff; }
a:focus-visible,button:focus-visible { outline:3px solid var(--accent); outline-offset:5px; }
.brand { font-size:28px; font-weight:900; letter-spacing:1px; margin-right:auto; }
main { padding:22px 0; }
h1 { font-size:clamp(30px,6vw,44px); line-height:1.15; margin-bottom:12px; }
h2 { font-size:24px; line-height:1.3; margin-top:32px; }
p,li { font-size:18px; }
.meta,small { color:var(--dim); }
.draft { border:1px solid #c9a24a; border-left:4px solid #c9a24a; padding:12px 18px; background:#2b2517; }
code { overflow-wrap:anywhere; font-size:.85em; }
button { font:700 17px 'Titillium Web',sans-serif; padding:12px 18px; color:var(--txt); border:1px solid #e98c8c; border-radius:6px; background:#49242b; cursor:pointer; }
button:disabled { opacity:.65; cursor:default; }
#clear-status { min-height:2em; }
footer { border-top:1px solid var(--line); border-bottom:0; }
@media(max-width:480px) { .wrap { padding:16px 18px 40px; } nav { gap:12px 18px; } .brand { flex-basis:100%; } }
@media print { :root { color-scheme:light; background:white; color:black; } nav,button { display:none; } a { color:inherit; } }