:root{
  --bg:#0b1220;
  --panel:#0f1a2e;
  --text:#e8eefc;
  --muted:#a9b7d6;
  --brand:#9fd3ff;
  --link:#9fd3ff;
  --border:rgba(255,255,255,.10);
  --shadow:0 10px 25px rgba(0,0,0,.35);
  --radius:14px;
  --max:1100px;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:radial-gradient(1200px 600px at 10% -10%, rgba(159,211,255,.20), transparent 60%),
radial-gradient(900px 500px at 90% 0%, rgba(155,255,210,.12), transparent 55%),
var(--bg); color:var(--text); font-family:var(--font); line-height:1.55}
a{color:var(--link); text-decoration:none}
a:hover{text-decoration:underline}
.container{width:min(var(--max), calc(100% - 2rem)); margin:0 auto}
.skip-link{position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden}
.skip-link:focus{left:1rem; top:1rem; width:auto; height:auto; padding:.6rem .9rem; background:var(--panel); border:1px solid var(--border); border-radius:10px; z-index:1000}
.site-header{position:sticky; top:0; backdrop-filter: blur(10px); background: rgba(11,18,32,.72); border-bottom:1px solid var(--border); z-index:50}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:.9rem 0; gap:1rem}
.brand{display:flex; align-items:center; gap:.65rem; font-weight:750}
.brand-mark{width:12px; height:12px; border-radius:4px; background:linear-gradient(135deg, rgba(159,211,255,1), rgba(155,255,210,1))}
.nav{display:flex; align-items:center; gap:1rem; flex-wrap:wrap; justify-content:flex-end}
.nav a{padding:.45rem .65rem; border-radius:10px}
.nav a.cta{background:rgba(159,211,255,.15); border:1px solid rgba(159,211,255,.25)}
.hero{padding:2.2rem 0 1.2rem}
.grid{display:grid; grid-template-columns: 1.2fr .8fr; gap:1.2rem}
@media (max-width:900px){.grid{grid-template-columns:1fr}.nav{gap:.4rem}}
.card{background:rgba(15,26,46,.75); border:1px solid var(--border); border-radius:var(--radius); padding:1.1rem; box-shadow:var(--shadow)}
h1,h2,h3{line-height:1.18}
h1{font-size:2.1rem; margin:.1rem 0 .6rem}
h2{font-size:1.35rem; margin:1.4rem 0 .6rem}
h3{font-size:1.08rem; margin:1.1rem 0 .4rem}
p{margin:.35rem 0 .9rem}
.muted{color:var(--muted)}
.kicker{display:inline-flex; gap:.5rem; align-items:center; font-size:.9rem; color:var(--muted)}
.badge{display:inline-block; font-size:.78rem; color:var(--text); padding:.15rem .55rem; border-radius:999px; border:1px solid rgba(159,211,255,.28); background:rgba(159,211,255,.10)}
.list{display:grid; gap:.7rem}
.list a.card{display:block}
.meta{display:flex; gap:.8rem; flex-wrap:wrap; font-size:.9rem; color:var(--muted)}
hr{border:0; border-top:1px solid var(--border); margin:1rem 0}
table{width:100%; border-collapse:collapse; overflow:hidden; border-radius:12px; border:1px solid var(--border)}
th,td{padding:.65rem .7rem; border-bottom:1px solid var(--border); vertical-align:top}
th{text-align:left; color:var(--muted); font-weight:650}
tr:last-child td{border-bottom:0}
.site-footer{border-top:1px solid var(--border); margin-top:2rem; padding:1.6rem 0 1.2rem; background:rgba(11,18,32,.65)}
.footer-inner{display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap}
.footer-links{display:flex; gap:1rem; flex-wrap:wrap}
.fineprint{padding-top:.8rem}
code, pre{background:rgba(255,255,255,.06); border:1px solid var(--border); border-radius:12px}
pre{padding:.9rem; overflow:auto}
input, textarea, button{font-family:inherit}
.form{display:grid; gap:.8rem}
.field{display:grid; gap:.35rem}
input, textarea{background:rgba(255,255,255,.06); color:var(--text); border:1px solid var(--border); border-radius:12px; padding:.65rem .75rem}
button{cursor:pointer; border:1px solid rgba(159,211,255,.25); background:rgba(159,211,255,.14); color:var(--text); padding:.65rem .85rem; border-radius:12px; font-weight:650}
button:hover{filter:brightness(1.08)}

.notice{border:1px solid rgba(0,0,0,.12);background:rgba(0,0,0,.03);padding:12px 14px;border-radius:14px;margin:14px 0;}
.notice strong{font-weight:700;}