:root{
  --bg:#0f1422; --fg:#e9eef7; --muted:#a6b0bf;
  --surface:#131a2c; --surface-2:#0f1422; --border:#2b3853;
  --brand:#58b0ff; --accent:#9ccf3a; --focus:#93c5fd;
  --radius:14px; --shadow:0 1px 2px rgba(0,0,0,.25), 0 10px 34px rgba(0,0,0,.30);
  --maxw:1024px; --sans:system-ui,-apple-system,'Segoe UI',Inter,Roboto,'Helvetica Neue',Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: light){
  :root{ --bg:#f7f9fc; --fg:#0b1220; --muted:#4b5563; --surface:#ffffff; --surface-2:#eef2f8; --border:#d7dce6; --brand:#145fdb; --accent:#5aa832; --focus:#1d4ed8; --shadow:0 1px 2px rgba(0,0,0,.06), 0 12px 36px rgba(17,24,39,.08); }
}
*,*::before,*::after{ box-sizing:border-box }
html{ scroll-behavior:smooth }
body{ margin:0; font-family:var(--sans); line-height:1.6; color:var(--fg); background:linear-gradient(180deg,var(--surface-2),var(--bg)); }
a{ color:var(--brand) }
a:focus,button:focus,[tabindex]:focus{ outline:3px solid var(--focus); outline-offset:2px }
img{ max-width:100%; height:auto }
code{ font-family:var(--mono) }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:1rem }
.skip{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden }
.skip:focus{ position:fixed; z-index:9999; left:1rem; top:1rem; background:#000; color:#fff; padding:.5rem .75rem; border-radius:.5rem }
header.site{ background:linear-gradient(135deg,#101833 0%,#0c1327 100%); border-bottom:3px solid var(--brand) }
.mast{ display:grid; grid-template-columns:64px 1fr auto; gap:.8rem; align-items:center; padding:.8rem 0 }
.crest{ width:64px; height:64px; border-radius:12px; display:grid; place-items:center; background:#0c1327; border:2px solid rgba(255,255,255,.12); box-shadow:inset 0 0 0 2px rgba(255,255,255,.08) }
.mast h1{ margin:0; font-size:clamp(1.05rem,2.2vw,1.3rem); font-weight:800; letter-spacing:.2px }
.mast p{ margin:.15rem 0 0; color:var(--muted) }
.controls{ display:flex; gap:.5rem; align-items:center; flex-wrap:wrap }
.btn{ appearance:none; border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.08); color:#fff; padding:.45rem .7rem; border-radius:.6rem; cursor:pointer; font-size:.95rem }
.btn:hover{ background:rgba(255,255,255,.14) }
.band{ height:8px; background:repeating-linear-gradient(90deg, rgba(255,255,255,.12) 0 16px, transparent 16px 32px); opacity:.7 }
nav.breadcrumb{ font-size:.95rem; padding:.5rem 0 }
nav.breadcrumb ol{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.5rem }
nav.breadcrumb li::after{ content:'/'; margin:0 .35rem; color:var(--muted) }
nav.breadcrumb li:last-child::after{ content:'' }
main.grid{ display:grid; grid-template-columns:320px 1fr; gap:1rem }
@media (max-width:900px){ main.grid{ grid-template-columns:1fr } }
.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); overflow:clip }
.card h2{ margin:0; padding:.9rem 1rem; font-size:1.1rem; border-bottom:1px solid var(--border); background:linear-gradient(180deg, color-mix(in oklab, var(--surface) 85%, #ffffff 15%), transparent) }
.card .body{ padding:1rem }
.tag{ display:inline-flex; align-items:center; gap:.4rem; padding:.2rem .55rem; border-radius:999px; border:1px solid var(--border); background:color-mix(in oklab, var(--surface) 75%, transparent); font-size:.85rem; color:#cbd5e1 }
.id-head{ display:grid; grid-template-columns:88px 1fr; gap:.8rem; align-items:center; padding:1rem; border-bottom:1px solid var(--border) }
.avatar{ width:88px; aspect-ratio:1; border-radius:12px; background:#1d2a45; display:grid; place-items:center; color:#fff; font-weight:800 }
dl.meta{ margin:0; display:grid; grid-template-columns:max-content 1fr; gap:.45rem .85rem; padding:.85rem 1rem 1rem }
dl.meta dt{ color:var(--muted) }
.note{ background:color-mix(in oklab,var(--surface) 70%, #1f2937 30%); border:1px dashed var(--border); padding:.85rem 1rem; border-radius:10px }
footer.footer{ border-top:1px solid var(--border); margin-top:1rem }
.footer-row{ display:flex; gap:1rem; align-items:center; justify-content:space-between; flex-wrap:wrap }
.footer-right{ display:flex; align-items:center; gap:.6rem }
.footer-right img{ width:28px; height:auto }
@media print{
  .controls, nav.breadcrumb, .band{ display:none !important }
  body{ background:#fff; color:#000 }
  .wrap{ max-width:100%; padding:0 }
  .card{ box-shadow:none; border-color:#000 }
  a::after{ content:' (' attr(href) ')'; font-size:.85em }
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  *{ animation:none !important; transition:none !important }
}
.prose p { margin: .5rem 0; }
.prose h1,.prose h2,.prose h3 { margin: 1rem 0 .5rem; line-height: 1.25; }
.prose ul, .prose ol { padding-left: 1.1rem; margin: .5rem 0; }
.prose li { margin: .25rem 0; }
.prose a { text-decoration: underline; }
.update-item :where(p, ul, ol){ margin:.5rem 0; }
.update-item :where(h1,h2,h3){ margin:1rem 0 .5rem; line-height:1.25; }
.update-item ul, .update-item ol { padding-left:1.1rem; }
.update-item a { text-decoration: underline; }
.flag {
  width: 40px;          /* scales down */
  height: 20px;         /* always half the width */
  border: 1px solid var(--border);
  border-radius: 2px;
  background: linear-gradient(
    to right,
    #169b62 0% 33.33%,   /* green */
    #ffffff 33.33% 66.66%, /* white */
    #ff883e 66.66% 100%  /* orange */
  );
}
.nowrap { white-space: nowrap; word-break: keep-all; }
.tag.callsign { display: inline-flex; align-items: center; gap: .4rem; }