@import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400;500;600;700&family=Silkscreen:wght@400;700&family=VT323&display=swap');

:root{
  --ink:#141414;
  --paper:#fbfbf7;
  --muted:#7a7a72;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Pixelify Sans', sans-serif;
  font-size:20px;
  line-height:1.72;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
  background-image:radial-gradient(rgba(20,20,20,.05) .5px, transparent .6px);
  background-size:5px 5px;opacity:.6;
}

a{color:var(--ink)}
.silk{font-family:'Silkscreen',monospace}
.mono{font-family:'VT323',monospace}

/* ---- top tabs (the only chrome) ---- */
.tabs{
  position:sticky;top:0;z-index:50;background:var(--paper);
  border-bottom:2px solid var(--ink);
}
.tabs .in{max-width:760px;margin:0 auto;padding:0 24px;height:52px;display:flex;align-items:center;gap:0}
.tabs a{
  font-family:'Silkscreen',monospace;font-size:12px;text-decoration:none;
  padding:8px 16px;border:2px solid transparent;border-bottom:0;letter-spacing:.5px;opacity:.55;
  align-self:flex-end;margin-bottom:-2px;
}
.tabs a:hover{opacity:.9}
.tabs a.on{opacity:1;border-color:var(--ink);background:var(--paper)}
.tabs .sp{flex:1}

/* ---- the paper column ---- */
.paper{max-width:680px;margin:0 auto;padding:60px 24px 90px}

.doc-head{text-align:center;margin-bottom:14px}
.doc-head .eyebrow{font-family:'Silkscreen',monospace;font-size:11px;color:var(--muted);letter-spacing:2px;margin-bottom:22px}
.doc-head h1{font-family:'Silkscreen',monospace;font-size:52px;line-height:.98;letter-spacing:-1px;margin:0}
.doc-head .tagline{font-style:italic;color:var(--muted);font-size:20px;margin-top:16px}
.doc-head .ticker{display:inline-block;margin-top:18px;font-family:'Silkscreen',monospace;font-size:14px;background:var(--ink);color:var(--paper);padding:6px 14px;letter-spacing:1px}

hr.rule{border:0;border-top:2px solid var(--ink);margin:34px 0}
hr.dash{border:0;border-top:2px dashed var(--ink);margin:0 auto;width:60px}

/* abstract */
.abstract{
  border-left:4px solid var(--ink);
  padding:6px 0 6px 22px;margin:34px 0;
  font-size:20px;color:#333;
}

/* sections */
.paper h2{
  font-family:'Silkscreen',monospace;font-size:17px;letter-spacing:.5px;
  margin:46px 0 14px;line-height:1.4;
}
.paper h2 .no{color:var(--muted);margin-right:10px}
.paper p{margin:0 0 20px}
.paper p b{border-bottom:2px solid var(--ink);padding-bottom:1px}
.paper .lead::first-letter{
  font-family:'Silkscreen',monospace;font-size:46px;float:left;line-height:.8;
  margin:6px 10px 0 0;
}

.closing{text-align:center;margin:52px 0 0}
.closing .big{font-size:26px;font-weight:600;line-height:1.35;font-style:italic;max-width:560px;margin:0 auto}
.closing .sig{font-family:'Silkscreen',monospace;font-size:13px;margin-top:26px;letter-spacing:1px}

/* ---- pixel tweet figure ---- */
.tweet{display:block;text-decoration:none;color:var(--ink);border:2px solid var(--ink);background:var(--paper);padding:24px;margin:30px auto;transition:background .1s;box-shadow:5px 5px 0 var(--ink)}
.tweet:hover{background:#fff}
.tweet .top{display:flex;align-items:center;gap:13px}
.tweet .pfp{width:54px;height:54px;border:2px solid var(--ink);border-radius:50%;object-fit:cover;flex:0 0 auto;display:block}
.tweet .who{line-height:1.25;flex:1}
.tweet .who .nm{font-family:'Silkscreen',monospace;font-size:14px;display:flex;align-items:center;gap:6px}
.tweet .who .hd{font-family:'VT323',monospace;font-size:18px;color:var(--muted)}
.tweet .vf{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;background:var(--ink);color:var(--paper);font-size:10px;border-radius:2px}
.tweet .sub{font-family:'Silkscreen',monospace;font-size:10px;border:2px solid var(--ink);padding:6px 12px;background:var(--ink);color:var(--paper)}
.tweet .body{font-size:22px;line-height:1.5;margin:18px 0 14px;font-style:normal}
.tweet .body mark{background:var(--ink);color:var(--paper);padding:0 6px;font-weight:600}
.tweet .foot{font-family:'VT323',monospace;font-size:17px;color:var(--muted);border-top:2px dashed var(--ink);padding-top:12px}
.tweet .foot b{color:var(--ink)}
.figcap{text-align:center;font-family:'Silkscreen',monospace;font-size:10px;color:var(--muted);margin:-14px 0 30px}

/* ---- footer ---- */
.foot{border-top:2px solid var(--ink);margin-top:56px;padding-top:26px;text-align:center}
.foot .ca{font-family:'VT323',monospace;font-size:18px;color:var(--muted);word-break:break-all;margin-bottom:14px;cursor:pointer}
.foot .ca:hover b{background:var(--ink);color:var(--paper)}
.foot .ca b{color:var(--ink)}
.foot .links{display:flex;gap:16px;justify-content:center;font-family:'Silkscreen',monospace;font-size:11px;flex-wrap:wrap}
.foot .links a{opacity:.7;text-decoration:none}
.foot .links a:hover{opacity:1;text-decoration:underline}
.foot .fine{color:var(--muted);font-size:13px;margin-top:20px;line-height:1.6}

@media(max-width:680px){
  .doc-head h1{font-size:34px}
  .tweet .body{font-size:19px}
  .paper{padding:40px 20px 70px}
}

/* ---- confession board (board.html) ---- */
.board-intro{max-width:600px;margin:0 auto 30px;text-align:center}
.form-wrap{border:2px solid var(--ink);background:var(--paper);padding:20px;margin:0 auto 34px;max-width:600px}
label{font-family:'Silkscreen',monospace;font-size:10px;display:block;margin-bottom:6px;color:var(--muted)}
textarea,input[type=text]{width:100%;font-family:'Pixelify Sans',sans-serif;font-size:18px;border:2px solid var(--ink);padding:11px;background:var(--paper);resize:vertical;color:var(--ink)}
textarea:focus,input:focus{outline:none;background:#fff}
input#name{max-width:260px}
.count{font-family:'Silkscreen',monospace;font-size:9px;color:var(--muted);margin-top:6px}
.form-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px;align-items:end}
.note{font-size:14px;color:var(--muted);margin-top:12px}
.btn{display:inline-block;cursor:pointer;font-family:'Silkscreen',monospace;font-size:13px;text-decoration:none;color:var(--paper);background:var(--ink);border:2px solid var(--ink);padding:12px 20px}
.btn:hover{background:var(--paper);color:var(--ink)}
.board-grid{columns:2 300px;column-gap:16px;max-width:760px;margin:0 auto}
@media(max-width:680px){.board-grid{columns:1}}
.confession{break-inside:avoid;margin:0 0 16px;border:2px solid var(--ink);background:var(--paper);padding:15px}
.confession .c-head{display:flex;align-items:center;gap:9px;margin-bottom:11px;padding-bottom:10px;border-bottom:2px dashed var(--ink)}
.confession .c-pfp-wrap{flex:0 0 auto;display:block;line-height:0}
.confession .c-pfp{width:34px;height:34px;border:2px solid var(--ink);border-radius:50%;object-fit:cover;background:#e8e8e2;flex:0 0 auto;display:block}
.confession .c-who{line-height:1.15;min-width:0}
.confession .c-handle{font-family:'Silkscreen',monospace;font-size:11px;text-decoration:none;color:var(--ink);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
a.c-handle:hover{text-decoration:underline}
.confession .c-time{margin-left:auto;font-family:'Silkscreen',monospace;font-size:9px;color:var(--muted);flex:0 0 auto}
.confession .txt{font-size:18px;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere}

.banner{max-width:600px;margin:0 auto 22px;border:2px solid var(--ink);background:#fff4c2;padding:12px 14px;font-size:14px}
.banner b{font-family:'Silkscreen',monospace;font-size:11px}
.status{text-align:center;font-family:'Silkscreen',monospace;font-size:10px;color:var(--muted);margin:0 0 20px;min-height:14px}
.input-at{display:flex;align-items:stretch}
.input-at .at{border:2px solid var(--ink);border-right:0;display:flex;align-items:center;padding:0 12px;font-family:'Silkscreen',monospace;font-size:14px;background:var(--ink);color:var(--paper)}
.input-at input{border-left:0}