:root{--bg:#0b0b0b;--fg:#f2f2f2;--muted:#b7b7b7;--accent:#20B2C7;--maxw:780px;}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial}
.wrap{max-width:var(--maxw);margin:0 auto;padding:20px}
header h1{margin:28px 0 4px;font-weight:750;letter-spacing:.2px}
.subtitle{color:var(--muted);margin:0 0 16px}
.prose h2{margin:28px 0 10px}
.prose h3{margin:24px 0 8px}
.prose p, .prose li{color:#e6e6e6}
.prose a{color:var(--accent);text-decoration:none}
.prose a:hover{text-decoration:underline}
.embed{margin:16px 0}
.embed iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:12px}
.button{display:inline-block;background:var(--accent);color:#001015;padding:10px 14px;border-radius:10px;font-weight:700}
#calc{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));align-items:end;margin:12px 0}
#calc label{display:flex;flex-direction:column;gap:6px}
#calc input{padding:10px;border-radius:10px;border:1px solid #2a2a2a;background:#111;color:var(--fg)}
#calc button{padding:10px 14px;border-radius:10px;border:0;background:#2a2a2a;color:#fff;cursor:pointer}
#calc button:hover{background:#3a3a3a}
#calc output{grid-column:1/-1;padding:8px 0;color:var(--muted)}
.foot{opacity:.7}
@media (prefers-color-scheme:light){
  :root{--bg:#ffffff;--fg:#161616;--muted:#5f5f5f}
  body{background:var(--bg);color:var(--fg)}
  .prose p,.prose li{color:#2a2a2a}
}