:root{
  --bg: #30363d;
  --surface: #24292f;
  --text: #e6edf3;
  --muted: #9aa4b2;
  --primary: #a5d6ff;
  --primary-10: rgba(165,214,255,.12);
  --accent: #ffcc8a;
  --border: #3a4149;
  --focus: #7fb5ff;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

@media (prefers-reduced-motion: no-preference){
  :root{ scroll-behavior: smooth; }
}

html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.wrap{max-width: 1000px; margin: 0 auto; padding: 32px 16px;}

header{
  position: sticky; top:0; z-index:20;
  backdrop-filter: blur(6px);
  background: color-mix(in oklab, var(--surface) 85%, #000 15% / 85%);
  border-bottom: 1px solid var(--border);
}
header .bar{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0;}
.brand{font-weight:800; letter-spacing:.5px; font-size: clamp(18px, 3vw, 22px); color: var(--text)}
.tag{color: var(--muted); font-weight:500}

nav .menus{display:flex; gap:10px; flex-wrap:wrap}
details{
  position:relative; display:inline-block;
  border:1px solid var(--border); border-radius:10px; background: var(--surface);
  padding:6px 10px;
}
details > summary{list-style:none; cursor:pointer; outline:none; color: var(--text)}
details[open] > summary{border-bottom:1px dashed var(--border)}
details ul{
  position:absolute; left:0; top: calc(100% + 2px);
  margin:0; padding:4px; list-style:none;
  background: var(--surface);
  border:1px solid var(--border); border-radius:10px;
  box-shadow: 0 10px 24px rgba(0,0,0,.45);
  width: max-content;
  min-width: 180px;
  z-index: 50;
}
details ul li{margin:0; padding:0}
details ul li a{display:block; padding:6px 10px; text-decoration:none; white-space: nowrap;}
details ul li a:hover{background: color-mix(in oklab, var(--primary) 12%, transparent); border-radius:8px; text-decoration:none}

a{color: var(--primary); text-decoration: none}
a:hover{text-decoration: underline}
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible{
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 6px;
}

.paper{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px;
}

.infobox{
  float:right; width:min(280px, 40%); margin: 0 0 16px 24px;
  background: color-mix(in oklab, var(--surface) 85%, #000 15%);
  border:1px solid var(--border); border-radius:12px; padding:12px 14px;
  font-size: 14px; color: var(--text);
}
.infobox h3{margin:.2rem 0 .4rem 0; font-size:16px; color: var(--accent)}
.infobox table{width:100%; border-collapse: collapse}
.infobox td{padding:6px 8px; border-bottom:1px dashed var(--border)}
.infobox td:first-child{color: var(--muted); white-space: nowrap; padding-right:12px;}

h1{margin: 0 0 8px 0; font-size: clamp(26px, 4vw, 34px)}
h2{margin-top: 26px; font-size: 20px; border-bottom: 1px solid var(--border); padding-bottom:6px; color: var(--accent)}
p{line-height:1.7}
ul{line-height:1.7}

.badge{display:inline-block; padding:2px 8px; border-radius:999px; background: var(--primary-10); color: var(--primary); border:1px solid color-mix(in oklab, var(--primary) 35%, #000 65%)}

footer{border-top:1px solid var(--border); color: var(--muted); font-size:14px; padding:18px 0; margin-top:32px}

@media (prefers-reduced-motion: reduce){
  *{animation: none !important; transition: none !important}
}

@media (max-width: 780px){
  .infobox{float:none; width:100%; margin: 0 0 16px 0}
}