:root{
  --bg:#0b0c0f;
  --fg:#e6e6e6;
  --muted:#9aa0a6;
  --link:#c9c9c9;
  --border:#1a1d24;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font:14px/1.8 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
  letter-spacing:.02em;
}
a{color:var(--link); text-decoration:none; border-bottom:1px dotted transparent}
a:hover{border-bottom-color:var(--link)}
.container{
  max-width:740px;
  margin:0 auto;
  padding:36px 18px 80px;
}
header{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  margin-bottom:26px;
  padding-bottom:14px;
  border-bottom:1px solid var(--border);
}
.brand{
  font-size:14px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.18em;
}
.nav a{margin-left:14px; color:var(--muted)}
h1{
  font-size:18px;
  margin:0 0 10px;
  font-weight:600;
}
.meta{color:var(--muted); font-size:12px; margin-bottom:18px}
article{
  white-space:pre-wrap;
}
hr{
  border:0;
  border-top:1px solid var(--border);
  margin:26px 0;
}
.list{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:18px;
}
.item{
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:10px;
  background:rgba(255,255,255,.02);
}
.item .t{display:block; font-weight:600}
.item .d{color:var(--muted); font-size:12px}
.footer{
  margin-top:36px;
  color:var(--muted);
  font-size:12px;
}
/* the six "click spots" are visually invisible */
.e{
  position:fixed;
  width:18px; height:18px;
  opacity:0.001;
  pointer-events:auto;
}
/* subtle "grain" */
body:before{
  content:"";
  position:fixed; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 0);
  background-size:3px 3px;
  opacity:.06;
  pointer-events:none;
  mix-blend-mode:overlay;
}