:root{
  --bg:#0c0c0d; --ink:#c9c4bb; --dim:#6c6862; --line:#26241f;
  --accent:#7a1f1f; --paper:#e8e3d6; --paperink:#2b2620;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:"Yu Gothic","Hiragino Kaku Gothic ProN",sans-serif;
  line-height:1.85; font-size:16px; -webkit-font-smoothing:antialiased;
}
a{color:inherit}
.wrap{max-width:760px;margin:0 auto;padding:34px 18px 150px}

/* top chrome */
header.chrome{position:sticky;top:0;z-index:40;
  background:linear-gradient(#0c0c0dee,#0c0c0dcc);backdrop-filter:blur(3px);
  border-bottom:1px solid var(--line);}
.chrome-inner{max-width:760px;margin:0 auto;padding:10px 18px;
  display:flex;align-items:center;gap:14px;font-size:13px;color:var(--dim)}
.chrome-inner .title{color:var(--ink);letter-spacing:.3em;font-weight:400;text-decoration:none}
.phasetag{font-size:11px;color:var(--dim);border:1px solid var(--line);padding:2px 7px;border-radius:2px}
.nav{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.nav a{background:none;border:1px solid var(--line);color:var(--dim);
  font-size:12px;padding:4px 9px;border-radius:2px;text-decoration:none}
.nav a:hover{color:var(--ink);border-color:var(--dim)}

h1.vt{font-weight:400;font-size:22px;letter-spacing:.12em;margin:.2em 0 .1em}
.sub{color:var(--dim);font-size:13px;margin-bottom:26px}
.lead{color:var(--ink)}
.cap{font-size:12px;color:#6b6459}
hr.r{border:none;border-top:1px solid var(--line);margin:26px 0}
.backrow{color:var(--dim);font-size:13px;margin-bottom:4px;text-decoration:none;display:inline-block}
.backrow:hover{color:var(--ink)}

/* keyword search */
.gate{margin-top:34px;border-top:1px solid var(--line);padding-top:22px}
.gate label{display:block;color:var(--dim);font-size:13px;margin-bottom:8px}
.gaterow{display:flex;gap:8px}
.gate input{flex:1;background:#141312;border:1px solid var(--line);color:var(--ink);
  font:inherit;padding:10px 12px;border-radius:2px}
.gate input:focus{outline:none;border-color:var(--accent)}
.gate button{background:var(--accent);border:none;color:#eee;font:inherit;
  padding:0 18px;border-radius:2px;cursor:pointer;white-space:nowrap}
.gate .msg{margin-top:12px;font-size:13px;min-height:1.4em;color:var(--dim)}
.gate .msg.err{color:#a5726c}
.hint{margin-top:10px;font-size:12px;color:var(--dim)}
.hint code{background:#1a1917;padding:1px 6px;border-radius:2px;color:var(--ink)}

/* CTA + link list */
.cta{display:inline-block;margin-top:20px;border:1px solid var(--dim);
  padding:10px 20px;border-radius:2px;cursor:pointer;color:var(--ink);text-decoration:none}
.cta:hover{background:#161513}
.linklist{border:1px solid var(--line);border-radius:3px;overflow:hidden;margin-top:8px}
.linkrow{display:flex;align-items:baseline;gap:12px;padding:14px 16px;
  border-bottom:1px solid var(--line);cursor:pointer;text-decoration:none;color:inherit}
.linkrow:last-child{border-bottom:none}
.linkrow:hover{background:#141312}
.linkrow.visited{opacity:.55}
.lr-check{color:var(--dim);font-size:13px;width:1em;flex:none}
.linkrow.visited .lr-check{color:var(--accent)}
.lr-label{color:var(--ink);flex:none;min-width:min(48%,240px)}
.lr-teaser{color:var(--dim);font-size:13px}
@media(max-width:560px){.linkrow{flex-wrap:wrap;gap:4px 12px}.lr-teaser{width:100%;padding-left:calc(1em + 12px)}}

/* board / mail */
.post{border-bottom:1px solid var(--line);padding:14px 0}
.post .meta{font-size:12px;color:var(--dim);margin-bottom:6px}
.post .meta .no{color:var(--accent)}
.mail{border:1px solid var(--line);border-radius:3px;overflow:hidden;margin:14px 0}
.mail .mh{background:#141312;padding:10px 14px;border-bottom:1px solid var(--line);font-size:13px;color:var(--dim)}
.mail .mh b{color:var(--ink);font-weight:400}
.mail .mb{padding:16px;white-space:pre-wrap}
.sig{color:var(--dim);margin-top:14px}

/* skins */
.skin{border-radius:3px;padding:20px;margin:6px 0}
.skin-bbs{background:#0a0a0a;color:#9a9;font-family:monospace;font-size:14px;border:1px solid #1a1a1a}
.skin-bbs .r{color:#c76}
.skin-horror{background:#120608;color:#c98;border:1px solid #3a1015}
.skin-horror h2{color:#e46;text-shadow:0 0 6px #a02}
.skin-kyukei{background:#080a0b;color:#8a9a8c;border:1px solid #1c2620;font-family:"MS PGothic",monospace}
.skin-kyukei h2{color:#c0cabf;font-weight:400}
.skin-local{background:#f4f1e8;color:#33302a;border:1px solid #ccc4b0;font-family:"Yu Mincho",serif}
.skin-shu{background:#0b0b0d;color:#b8b2a8;border:1px solid #222;font-family:"Yu Mincho",serif}
.skin-shu h2{color:#cfc7ba;font-weight:400}
.skin-shu .foot{color:#55504a;font-size:12px;margin-top:20px;border-top:1px solid #222;padding-top:10px}

/* paper / vertical / tables */
.paper{background:var(--paper);color:var(--paperink);border-radius:2px;padding:22px 24px;margin:6px 0;
  font-family:"Yu Mincho",serif;box-shadow:0 2px 20px #0008}
.paper h2{font-weight:600}
.vert{background:#efe9db;color:#221e18;border-radius:2px;padding:26px;margin:6px 0;
  font-family:"Yu Mincho",serif;writing-mode:vertical-rl;text-orientation:upright;max-height:60vh;overflow-x:auto}
.vert h2{font-weight:600;margin:0 0 0 14px}
table.doc{width:100%;border-collapse:collapse;font-family:"Yu Mincho",serif;background:var(--paper);color:var(--paperink)}
table.doc th,table.doc td{border:1px solid #b7ae98;padding:6px 10px;font-weight:400}
table.doc th{background:#ddd4c0}

/* note */
.note-box{border:1px solid var(--line);border-radius:3px;padding:16px;margin:20px 0;background:#0f0e0d}
.note-box.done{border-color:var(--accent)}
.note-item{padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}
.note-item:last-child{border:none}
.note-item .n{color:var(--accent);margin-right:8px}
.note-item.filled{color:var(--ink)}
.note-item.empty{color:var(--dim)}

/* eye flash */
.eye-flash{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;
  pointer-events:none;opacity:0}
.eye-flash.show{animation:eyef 1.1s ease}
@keyframes eyef{0%{opacity:0}20%{opacity:.95}55%{opacity:.95}100%{opacity:0}}
.eye-flash img{width:min(70vw,360px);height:auto}

/* choices */
.choices{display:flex;flex-direction:column;gap:12px;margin-top:26px}
.choices a{background:#141312;border:1px solid var(--line);color:var(--ink);
  padding:16px;border-radius:3px;text-decoration:none}
.choices a:hover{border-color:var(--dim)}
input.name{background:#141312;border:1px solid var(--line);color:var(--ink);
  font:inherit;padding:10px 12px;border-radius:2px;width:100%;max-width:280px}
.disclaim{font-size:11px;color:var(--dim);margin-top:6px}

footer.foot{max-width:760px;margin:40px auto 0;padding:20px 18px;border-top:1px solid var(--line);
  color:var(--dim);font-size:12px}
.watching{position:fixed;bottom:44px;right:12px;font-size:11px;color:#2a2824;z-index:30}

/* reach bar + panel */
.reachbar{position:fixed;left:0;right:0;bottom:0;z-index:45;
  background:linear-gradient(#0c0c0dcc,#0c0c0dee);backdrop-filter:blur(3px);
  border-top:1px solid var(--line);text-align:center}
.reachbar .cnt{display:inline-block;padding:8px 16px;font-size:12px;color:var(--dim);
  cursor:pointer;letter-spacing:.15em}
.reachbar .cnt:hover{color:var(--ink)}
.reachbar .cnt b{color:var(--accent);font-weight:400}
.reachpanel{position:fixed;inset:0;z-index:60;background:#0a0a0bf2;display:none;overflow-y:auto;padding:40px 18px 80px}
.reachpanel.open{display:block}
.reachpanel .rp-inner{max-width:760px;margin:0 auto}
.reachpanel h2{font-weight:400;letter-spacing:.1em;font-size:18px;margin:0 0 4px}
.reachpanel .rp-sub{color:var(--dim);font-size:13px;margin-bottom:20px}
.reachpanel .rp-close{position:fixed;top:16px;right:18px;color:var(--dim);font-size:24px;cursor:pointer;z-index:61}
.reachpanel .rp-close:hover{color:var(--ink)}
.rp-group{margin-bottom:22px}
.rp-group .rp-gt{color:var(--accent);font-size:12px;letter-spacing:.1em;margin-bottom:6px;
  border-bottom:1px solid var(--line);padding-bottom:4px}
.rp-item{display:flex;gap:10px;padding:9px 6px;cursor:pointer;text-decoration:none;color:inherit}
.rp-item:hover{background:#141312}
.rp-item .rp-id{color:var(--dim);font-size:12px;width:2.6em;flex:none}
.rp-item .rp-name{color:var(--ink);font-size:14px}
.rp-empty{color:var(--dim);font-size:13px}

/* ---- X (post + DM) UI ---- */
.x-note{color:var(--dim);font-size:12px;margin-bottom:16px;font-style:italic}
.x-post{border:1px solid var(--line);border-radius:14px;padding:16px;margin:10px 0;background:#0e0e10}
.x-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.x-avatar{width:42px;height:42px;border-radius:50%;background:#1a1a1d;flex:none;
  display:flex;align-items:center;justify-content:center;color:#4a4a4e;font-size:18px}
.x-name{font-weight:700;color:var(--ink);font-size:15px;line-height:1.2}
.x-handle{color:var(--dim);font-size:13px}
.x-body{font-size:15px;line-height:1.7;white-space:pre-wrap}
.x-meta{color:var(--dim);font-size:12px;margin-top:10px}
.x-stats{display:flex;gap:20px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line);
  color:var(--dim);font-size:12px}
.x-reply{border-bottom:1px solid var(--line);padding:12px 0 12px 20px;margin-left:8px}
.x-reply .x-rname{color:var(--dim);font-size:13px;margin-bottom:3px}
.x-reply .x-rname b{color:#8a8a8e}
.x-reply .x-rbody{font-size:14px;color:var(--ink)}
.x-replies-label{color:var(--dim);font-size:12px;margin:18px 0 4px}

/* DM */
.dm-head{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);margin-bottom:16px}
.dm-thread{display:flex;flex-direction:column;gap:10px}
.dm-bubble{max-width:80%;padding:11px 14px;border-radius:16px;font-size:15px;line-height:1.7;white-space:pre-wrap}
.dm-in{align-self:flex-start;background:#1a1a1d;color:var(--ink);border-bottom-left-radius:4px}
.dm-out{align-self:flex-end;background:#2a3a55;color:#e8eef7;border-bottom-right-radius:4px}
.dm-time{font-size:11px;color:var(--dim);margin-top:2px}