/* Lensio's ink-on-paper language, carried over to the web: graphite accent,
   warm paper canvas, flat surfaces, one hairline. */
:root{
  --canvas:#F5F4F1;
  --surface:#FFFFFF;
  --accent:#1D2129;
  --accent-soft:#444D5C;
  --text:#161616;
  --muted:#6F6F6F;
  --faint:#9C9C9C;
  --hairline:#E0DFDB;
}
@media (prefers-color-scheme: dark){
  :root{
    --canvas:#0E0E0E;
    --surface:#1C1C1C;
    --accent:#F1F1F1;
    --accent-soft:#C9CCD2;
    --text:#F5F5F5;
    --muted:#A1A1A1;
    --faint:#7A7A7A;
    --hairline:#333333;
  }
}
*{box-sizing:border-box}
body{
  margin:0;
  background:var(--canvas);
  color:var(--text);
  line-height:1.62;
  font-family:"Nunito Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-text-size-adjust:100%;
}
.wrap{max-width:720px;margin:0 auto;padding:40px 20px 72px}
header{text-align:center;margin-bottom:24px}
.mark{
  width:72px;height:72px;border-radius:50%;
  background:color-mix(in srgb, var(--accent) 8%, transparent);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 14px;font-size:32px;
}
h1{font-size:26px;line-height:1.25;margin:0 0 6px;font-weight:800;letter-spacing:-0.01em}
.sub{color:var(--muted);font-size:15px;margin:0}
.updated{color:var(--faint);font-size:13px;text-align:center;margin:0 0 22px}
.card{
  background:var(--surface);
  border:1px solid var(--hairline);
  border-radius:20px;
  padding:26px 26px 10px;
}
h2{font-size:17px;margin:28px 0 8px;font-weight:700;color:var(--accent-soft)}
h2:first-of-type{margin-top:2px}
p,li{font-size:15px}
ul{padding-left:20px;margin:8px 0}
li{margin-bottom:6px}
a{color:var(--accent-soft)}
strong{font-weight:700}
.nav{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.nav a{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--surface);border:1px solid var(--hairline);border-radius:18px;
  padding:16px 18px;text-decoration:none;color:var(--text);font-weight:600;
}
.nav a span{color:var(--faint);font-weight:400;font-size:13px}
footer{text-align:center;margin-top:26px;font-size:13px;color:var(--faint)}
footer a{color:var(--accent-soft);text-decoration:none}
