:root {
    --ink:#17131b;
    --panel:#d3cfcc;
    --panel-hi:#f0ece8;
    --grass:#5fa832;
    --cyan:#8be8e1;
    --gold:#ffd94a;
    --px:"Press Start 2P",ui-monospace,Consolas,monospace;
  }
  * { box-sizing:border-box; }
  html { min-height:100%; background:#67b5e9; }
  body {
    min-height:100vh;
    margin:0;
    color:var(--ink);
    font-family:var(--px);
    background:linear-gradient(#67b5e9 0 42%,#5fa832 42% 47%,#714829 47%);
  }
  body::after {
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    opacity:.055;
    background:repeating-linear-gradient(180deg,#000 0 1px,transparent 1px 3px);
  }
  a { color:#245e9c; }
  a:focus-visible { outline:3px solid var(--gold); outline-offset:3px; }
  .shell { position:relative; z-index:1; width:min(900px,calc(100% - 24px)); margin:0 auto; padding:18px 0 60px; }
  .topbar,.paper {
    border:3px solid #000;
    box-shadow:7px 7px 0 rgba(0,0,0,.38);
  }
  .topbar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:11px 13px;
    background:rgba(23,19,27,.96);
    color:#fff;
  }
  .brand { color:#fff; font-size:.72rem; line-height:1.6; text-decoration:none; text-shadow:3px 3px 0 #000; }
  .back {
    padding:9px 11px;
    border:3px solid #000;
    background:var(--grass);
    color:#fff;
    font-size:.38rem;
    line-height:1.5;
    text-decoration:none;
    box-shadow:inset 2px 2px 0 rgba(255,255,255,.3),inset -2px -2px 0 rgba(0,0,0,.3);
  }
  .paper { margin-top:16px; background:var(--panel); }
  .paper header { padding:22px; border-bottom:3px solid #000; background:#292332; color:#fff; }
  h1 { margin:0; font-size:clamp(.9rem,3vw,1.35rem); line-height:1.7; }
  .updated { margin:8px 0 0; color:var(--cyan); font-size:.34rem; line-height:1.7; }
  .content { padding:clamp(18px,4vw,34px); }
  h2 { margin:30px 0 10px; color:#4a3f61; font-size:.55rem; line-height:1.7; }
  h2:first-child { margin-top:0; }
  p,li { font-family:ui-monospace,Consolas,monospace; font-size:.97rem; line-height:1.75; }
  ul { padding-left:1.35rem; }
  .note { padding:14px; border:3px solid #000; background:var(--panel-hi); }
  footer { margin-top:20px; color:#fff; font-size:.32rem; line-height:1.8; text-align:center; text-shadow:2px 2px 0 #000; }
  footer a { color:#fff; }
  @media (max-width:560px) {
    .topbar { align-items:flex-start; }
    .brand { font-size:.52rem; }
    .back { padding:7px; font-size:.3rem; }
  }