:root{--bg:#0F1A1A;--ink:#E8F1EF;--sub:#B6D6D1;--brand:#9EE5D9;--accent:#5FD3C1;--max:760px}
body{
  background:var(--bg);color:var(--ink);font-family:"Noto Sans JP",system-ui;line-height:1.9;
  max-width:var(--max);margin:6vh auto;padding:24px;
  background-image: radial-gradient(transparent 92%, rgba(158,229,217,.06) 94%),
                    radial-gradient(transparent 92%, rgba(95,211,193,.05) 94%);
  background-size:28px 28px,44px 44px;background-position:0 0,10px 10px;
}
h1{letter-spacing:.02em;font-weight:700}
hr{border:none;border-top:1px solid rgba(158,229,217,.25);margin:20px 0}
a{color:var(--brand);text-decoration:none;border-bottom:1px solid var(--brand)}
a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.hint{background:rgba(158,229,217,.08);border-left:3px solid var(--brand);padding:10px 12px;color:var(--sub)}
.hint a{color:var(--brand);font-weight:600}
.hidden-ribbon{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;gap:16px;padding:6px 10px;
  background:linear-gradient(90deg, rgba(95,211,193,.16), rgba(15,26,26,0.4));border-bottom:1px solid rgba(158,229,217,.25);
  font-size:.85rem;color:var(--sub);backdrop-filter:blur(2px)}
.hidden-ribbon .level{color:var(--brand);font-weight:600}
.disclaimer{margin-top:24px;color:var(--sub);font-size:.9rem}
.hidden-tag{position:fixed;right:12px;bottom:8px;color:var(--sub);opacity:.6;font-size:.8rem}
@media (max-width:600px){
body{font-size:1.25rem;line-height:1.8;padding:20px 16px;margin:4vh auto}
h1{font-size:2rem;line-height:1.4}
h2{font-size:1.65rem}
p{font-size:1.25rem;line-height:1.8}
.hidden-ribbon{font-size:1.1rem;padding:8px 12px}
.disclaimer{font-size:1.25rem}
.hidden-tag{font-size:1rem}
.hint{font-size:1.25rem;padding:12px 14px}
}