:root {
  --ink: #1d2a38;
  --ink-soft: #55616d;
  --line: #8e959d;
  --line-dark: #6c747e;
  --line-soft: #c3c9d0;
  --focus: #3b8ee6;
  --hazard-yellow: #ffcc00;
  --hazard-black: #17181a;
  --reply-bg: linear-gradient(180deg, #f6f8fb 0%, #e9eef4 100%);
  --name: #1d6b3a;
  --subject: #1a3d7c;
  --green: #4f7a12;
  --ui: "Lucida Grande", "Lucida Sans Unicode", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; font-weight: 400 !important; }
.recess { box-sizing: border-box; background: linear-gradient(#e8edf1, #fff 20%); border: 1px solid #8897a5; border-radius: 4px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.2), inset 0 -1px 0 #fff; color: #28333f; }

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  color: var(--ink); font: 13px/1.45 var(--ui);
  background-color: #eceef1;
  background-color: #f1f3f5;
  background-image: repeating-linear-gradient(180deg, #fafbfc 0 2px, #e9ecef 2px 4px);
}
a { color: #1d5fb4; }
a:hover { color: #0b3f86; }
code { font: 12px Menlo, Consolas, monospace; background: #eef1f4; border: 1px solid var(--line-soft); border-radius: 3px; padding: 0 3px; }
.muted { color: var(--ink-soft); }

:focus-visible, .recess:focus-visible {
  outline: 1px solid var(--focus); outline-offset: 1px; box-shadow: 0 0 0 3px rgba(59,142,230,.28);
}
.skip { position: absolute; left: 8px; top: -40px; z-index: 10; padding: 6px 10px; background: #fff; border: 1px solid var(--line); border-radius: 4px; }
.skip:focus { top: 8px; }

.vp-header {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  min-height: 52px; padding: 6px 12px 6px 14px;
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.08) 0 1px, rgba(0,0,0,.03) 1px 2px),
    linear-gradient(180deg, #eef0f3 0%, #d3d8dd 48%, #c6ccd3 52%, #d8dce1 100%);
  border-bottom: 1px solid var(--line-dark);
  box-shadow: inset 0 1px 0 #fff, 0 1px 3px rgba(20,32,48,.22);
}
.vp-wordmark { font: 15px/1 var(--ui); letter-spacing: .2px; color: #2b3540; text-decoration: none; text-shadow: 0 1px 0 rgba(255,255,255,.85); }
.vp-wordmark:hover { color: #0b3f86; }
.vp-header-right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.seg-group {
  display: inline-flex; list-style: none; margin: 0; padding: 0;
  border: 1px solid var(--line-dark); border-radius: 999px; overflow: hidden;
  box-shadow: 0 1px 0 rgba(255,255,255,.8), 0 1px 2px rgba(20,32,48,.2);
}
.seg-group li + li .seg { border-left: 1px solid #959ca5; }
.seg {
  --g1:#c8e4ff; --g2:#85bdf8; --g3:#4187dd; --g4:#2769be; --g5:#4a94e7; --g6:#9bcdfa; --gs:rgba(12,33,76,.6);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; height: 26px; padding: 0 15px;
  color: #26313c; text-decoration: none; font: 12px/1 var(--ui);
  text-shadow: 0 1px 0 rgba(255,255,255,.75);
  background: linear-gradient(180deg, #ffffff 0%, #eff2f5 44%, #d9dee3 50%, #e6e9ed 84%, #f7f8fa 100%);
  box-shadow: inset 0 1px 0 #fff;
}
.seg::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 3px; right: 3px; top: 1px; height: 46%; border-radius: 8px 8px 4px 4px;
  background: linear-gradient(rgba(255,255,255,.95), rgba(255,255,255,.12));
}
.seg:hover { color: #0f1a24; background: linear-gradient(180deg, #fff 0%, #f6f8fa 44%, #e3e7eb 50%, #eef0f3 84%, #fff 100%); }
.seg-blue   { --g1:#c8e4ff; --g2:#85bdf8; --g3:#4187dd; --g4:#2769be; --g5:#4a94e7; --g6:#9bcdfa; --gs:rgba(12,33,76,.6); }
.seg-green  { --g1:#d4f7c4; --g2:#8fdc6c; --g3:#4bb529; --g4:#33961a; --g5:#56c032; --g6:#a9ea8c; --gs:rgba(16,60,8,.6); }
.seg-red    { --g1:#ffd0cc; --g2:#f7837a; --g3:#e0392d; --g4:#c0231a; --g5:#e44d40; --g6:#ffa79f; --gs:rgba(90,10,6,.6); }
.seg-violet { --g1:#e6d6ff; --g2:#b38ef3; --g3:#7f4fd8; --g4:#6533bd; --g5:#8b5ee0; --g6:#c9adf7; --gs:rgba(40,12,80,.6); }
.seg-amber  { --g1:#fff1b8; --g2:#ffd34a; --g3:#f0a800; --g4:#d58a00; --g5:#f2b31a; --g6:#ffe08a; --gs:rgba(90,50,0,.55); }
.seg:active, .seg-on, .seg-on:hover {
  color: #fff; text-shadow: 0 -1px 0 var(--gs);
  background: linear-gradient(180deg, var(--g1) 0%, var(--g2) 39%, var(--g3) 48%, var(--g4) 54%, var(--g5) 84%, var(--g6) 100%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.8), inset 0 -2px 5px rgba(255,255,255,.35);
}
.seg:active { background: linear-gradient(180deg, var(--g4) 0%, var(--g3) 48%, var(--g4) 50%, var(--g5) 100%); box-shadow: inset 0 2px 4px rgba(0,0,0,.35); }
.seg:active::before { opacity: .3; }
.seg:focus-visible { outline-offset: -2px; box-shadow: none; }

.user-area { display: flex; align-items: center; gap: 8px; }
.pfp-frame {
  display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(160deg, #ffffff 0%, #cfd4da 45%, #9aa2ab 100%);
  border: 1px solid #6c747e; box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(20,32,48,.35);
}
.pfp-well { position: relative; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; border: 1px solid #5d656e; box-shadow: 0 1px 0 rgba(255,255,255,.9); }
.pfp-well img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pfp-well::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; box-shadow: inset 0 2px 3px rgba(0,0,0,.45), inset 0 -1px 1px rgba(255,255,255,.4); }
.user-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.user-name { color: #1f2a35; text-shadow: 0 1px 0 rgba(255,255,255,.8); display: inline-flex; align-items: center; gap: 5px; font-size: 13px; }
.user-links { display: flex; gap: 10px; margin: 0; font-size: 11px; }
.user-links a, .linkish { color: #2a5a96; text-decoration: none; }
.user-links a:hover, .linkish:hover { text-decoration: underline; }
.linkish { all: unset; cursor: pointer; color: #2a5a96; font: 11px var(--ui); }
.linkish:focus-visible { outline: 1px solid var(--focus); outline-offset: 1px; }
.role-tag {
  font: 10px/12px var(--ui); padding: 0 5px; border-radius: 999px; height: 14px; letter-spacing: .3px;
  color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.35); border: 1px solid #8e1422;
  background: linear-gradient(180deg, #f6828a 0%, #d3202f 50%, #b5111f 51%, #e04452 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}
.role-mod, .role-janitor { border-color: #6533bd; background: linear-gradient(180deg, #c9adf7 0%, #7f4fd8 50%, #6533bd 51%, #8b5ee0 100%); }

.pagebar {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  padding: 7px 14px 8px;
  background: linear-gradient(180deg, #fbfcfd, #e9ecf0);
  border-bottom: 1px solid var(--line);
  box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba(255,255,255,.7);
}
.pagebar-title { margin: 0; font: 18px/1.2 var(--ui); color: #22303e; text-shadow: 0 1px 0 #fff; order: -1; }
.crumbs { font-size: 11px; color: var(--ink-soft); display: flex; gap: 6px; flex-wrap: wrap; }
.crumbs a { color: var(--ink-soft); text-decoration: none; }
.crumbs a:hover { color: #0b3f86; text-decoration: underline; }
.crumb-sep { color: #a3aab2; }

.vp-main { flex: 1; width: 100%; padding: 0 0 28px; }
.section { padding: 16px 14px; }
.section-title { margin: 0 0 10px; font: 15px/1.3 var(--ui); color: #22303e; text-shadow: 0 1px 0 #fff; }
.count { font-size: 11px; color: var(--ink-soft); }
.empty { color: var(--ink-soft); margin: 6px 0; }
.message { max-width: 640px; }

.hazard {
  position: relative; height: 20px;
  background: repeating-linear-gradient(-45deg, var(--hazard-yellow) 0 14px, var(--hazard-black) 14px 28px);
  border-top: 1px solid #000; border-bottom: 1px solid #000;
  box-shadow: inset 0 -2px 3px rgba(0,0,0,.3);
}
.hazard::before { content: ""; position: absolute; inset: 1px 0 auto; height: 45%; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,.06)); }

.welcome { padding: 38px 16px 40px; text-align: center; background: rgba(255,255,255,.72); }
.welcome-title { margin: 0 0 16px; font: 32px/1.15 var(--ui); letter-spacing: -.3px; color: #17375f; text-shadow: 0 1px 0 #fff; }
.welcome-title.small { font-size: 24px; margin-bottom: 8px; }
.wip-text { margin: 0; font-size: 16px; color: #d4a000; }


.mini {
  font: 11px/1 var(--ui); color: #1f2a36; cursor: pointer;
  height: 20px; padding: 0 9px; border-radius: 999px;
  border: 1px solid #7d858e; text-shadow: 0 1px 0 rgba(255,255,255,.8);
  background: linear-gradient(180deg, #fff 0%, #eef1f4 45%, #d8dde2 52%, #eceff2 100%);
  box-shadow: inset 0 1px 0 #fff, 0 1px 1px rgba(0,0,0,.12);
}
.mini:hover { border-color: #5d8fc9; }
.mini:active { background: linear-gradient(180deg, #c3cad2, #d6dbe0); box-shadow: inset 0 1px 3px rgba(0,0,0,.3); }
.mini-red { color: #fff; border-color: #8e1422; text-shadow: 0 -1px 0 rgba(80,0,10,.5); background: linear-gradient(180deg, #f6a0a6 0%, #e0394a 48%, #c0202f 52%, #e2505d 100%); }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 3px; background: #fff; }
.data-table { width: 100%; border-collapse: collapse; background: #fff; font-size: 12px; }
.board-table { border: 1px solid var(--line); }
.data-table th {
  text-align: left; font: 11px var(--ui); color: #3a4552; padding: 4px 8px; white-space: nowrap;
  background: linear-gradient(180deg, #fafbfc, #e3e7eb); border-bottom: 1px solid var(--line);
}
.data-table td { padding: 5px 8px; border-top: 1px solid #e4e8ec; vertical-align: top; }
.data-table tr:nth-child(even) td { background: #f5f8fb; }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table .excerpt, .data-table .ua { color: var(--ink-soft); max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-link { font-size: 14px; text-decoration: none; }
.board-title { color: var(--ink-soft); font-size: 11px; margin-left: 4px; }
.ev { font: 11px Menlo, Consolas, monospace; color: #3a4552; }
.ip-filter { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.ip-filter input { height: 22px; padding: 2px 6px; width: 180px; }
.clear { font-size: 11px; margin-left: 6px; }

.board-banner {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 18px 14px 14px; text-align: center; background: rgba(255,255,255,.72);
  border-bottom: 1px solid var(--line-soft);
}
.board-banner-name { font: 30px/1.1 var(--ui); color: #8e1422; text-shadow: 0 1px 0 #fff; }
.board-banner-title { font-size: 14px; color: #22303e; }
.board-banner-desc { font-size: 12px; color: var(--ink-soft); }

.post-form {
  margin: 14px auto; max-width: 560px; padding: 12px 14px 12px;
  background: linear-gradient(180deg, #ffffff, #f1f4f7);
  border: 1px solid var(--line); border-radius: 4px;
  box-shadow: inset 0 1px 0 #fff, 0 1px 3px rgba(25,38,56,.15);
}
.post-form-title { margin: 0 0 10px; font: 13px var(--ui); color: #3a4552; }
.field { display: grid; gap: 4px; margin-bottom: 10px; }
.field label { color: #3a4552; font-size: 12px; }
.opt { color: #8a939c; font-size: 11px; }
.field input.recess, .field textarea { width: 100%; padding: 4px 7px; font: 13px var(--ui); border-radius: 3px; }
.field input.recess { height: 26px; }
.field textarea { resize: vertical; min-height: 90px; line-height: 1.4; }
.field input[type=file] { font: 12px var(--ui); }
.counter { justify-self: end; font-size: 11px; color: var(--ink-soft); min-height: 1em; }
.post-form-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.post-as { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--ink-soft); }
.post-as label { display: inline-flex; align-items: center; gap: 4px; }

.emoji-picker { margin: -4px 0 10px; font-size: 12px; }
.emoji-picker summary { cursor: pointer; color: #2a5a96; width: max-content; }
.emoji-grid {
  display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; padding: 6px;
  background: linear-gradient(#e8edf1, #fff 30%); border: 1px solid var(--line); border-radius: 3px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.18);
}
.emoji-btn { all: unset; cursor: pointer; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 4px; border: 1px solid transparent; }
.emoji-btn:hover { border-color: #9cbde3; background: linear-gradient(#f4f9ff, #dceafa); }
.emoji-btn:focus-visible { outline: 1px solid var(--focus); }
.emoji-btn img { width: 28px; height: 28px; object-fit: contain; }
.emoji-help { margin: 4px 0 0; color: var(--ink-soft); font-size: 11px; }

.threads { padding: 0 14px; }
.thread { padding: 12px 0; border-bottom: 1px solid var(--line-soft); display: flow-root; }
.thread-full { padding: 8px 14px 12px; border-bottom: 0; }
.thread-nav { display: flex; justify-content: space-between; gap: 10px; margin: 0; padding: 8px 14px; font-size: 12px; color: var(--ink-soft); border-bottom: 1px solid var(--line-soft); }
.omitted { margin: 4px 0 6px; color: var(--ink-soft); font-size: 12px; }

.post { margin: 0 0 6px; }
.post.op, .post.reply {
  display: table; max-width: 100%; padding: 5px 10px 6px;
  background: var(--reply-bg); border: 1px solid #c4ccd5; border-radius: 3px;
  box-shadow: inset 0 1px 0 #fff;
}
.post.op { margin-bottom: 6px; }
.post.reply { margin-left: 18px; }
.post.reply::before { content: ">>"; position: absolute; margin-left: -28px; color: #aab3bd; font-size: 11px; }
.post:target { border-color: #e3b200; background: linear-gradient(180deg, #fffbea, #fff1c2); }
.is-deleted { opacity: .55; }
.post-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; font-size: 12px; }
.subject { color: var(--subject); font-size: 13px; }
.name { color: var(--name); }
.capcode { color: #c0202f; font-size: 11px; }
.capcode-mod, .capcode-janitor { color: #6533bd; }
.post-head time { color: #4a5663; }
.no-wrap { white-space: nowrap; }
.no { color: #4a5663; text-decoration: none; }
.no:hover { color: #c0202f; }
.flag { font-size: 10px; padding: 0 5px; border: 1px solid #b9c1ca; border-radius: 999px; background: linear-gradient(#fff, #e6eaee); color: #3a4552; }
.reply-link { font-size: 12px; }
.deleted-tag { color: #c0202f; font-size: 11px; }
.post-tools { display: inline-flex; gap: 6px; margin-left: 2px; }
.tools { position: relative; font-size: 11px; }
.tools > summary { cursor: pointer; color: #8a939c; list-style: none; }
.tools > summary::-webkit-details-marker { display: none; }
.tools > summary:hover { color: #2a5a96; }
.tools[open] > summary { color: #2a5a96; }
.tools-body {
  position: absolute; z-index: 4; top: 18px; left: 0; min-width: 240px;
  display: grid; gap: 6px; padding: 8px;
  background: #fff; border: 1px solid var(--line); border-radius: 4px;
  box-shadow: 0 6px 16px rgba(25,38,56,.25);
}
.tools-body form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.tools-body select, .tools-body input.recess { font: 11px var(--ui); height: 20px; }
.tools-body input.recess { padding: 1px 5px; flex: 1; min-width: 120px; }
.staff-line { margin: 0; color: var(--ink-soft); }

.file { margin: 2px 0 4px; }
.post.op .file { float: left; margin: 2px 16px 6px 0; }
.post.reply .file { float: left; margin: 2px 12px 4px 0; }
.file-info { font-size: 11px; color: var(--ink-soft); margin-bottom: 3px; max-width: 320px; overflow-wrap: anywhere; }
.thumb { display: block; width: auto; height: auto; max-width: 250px; max-height: 250px; border: 1px solid #c4ccd5; background: #fff; }
.post.reply .thumb { max-width: 150px; max-height: 150px; }
.thumb.expanded { max-width: min(100%, 1200px); max-height: none; }
.post-body { margin: 6px 0 2px 0; overflow-wrap: anywhere; line-height: 1.5; }
.post.reply .post-body { margin-left: 0; }
.greentext { color: var(--green); }
.quotelink { color: #b8202f; text-decoration: underline; text-decoration-thickness: 1px; }
.emoji { width: 32px; height: 32px; object-fit: contain; vertical-align: middle; margin: -6px 1px -4px; }

.pager { display: flex; align-items: center; gap: 4px; padding: 10px 14px; flex-wrap: wrap; }
.pager-top { border-bottom: 1px solid var(--line-soft); }
.page.step { padding: 0 10px; }
.page.off { color: #a3aab2; background: #f2f4f6; border-color: var(--line-soft); }
.page.gap { border: 0; background: none; min-width: 14px; }
.page-of { margin-left: 8px; font-size: 11px; color: var(--ink-soft); }
.page { min-width: 26px; height: 22px; padding: 0 7px; display: inline-grid; place-items: center; border: 1px solid var(--line); border-radius: 3px; background: linear-gradient(#fff, #e9ecf0); text-decoration: none; font-size: 12px; color: #26313c; }
.page.cur { color: #fff; border-color: #1f5b9d; background: linear-gradient(180deg, #85bdf8, #2769be 52%, #4a94e7); }

.auth { max-width: 420px; }
.auth-form { padding: 4px 0; }
.field-hint { margin: -6px 0 10px; font-size: 11px; color: var(--ink-soft); }
.form-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.form-hint { font-size: 11px; color: var(--ink-soft); }
.form-alert, .form-notice { margin: 0 0 12px; padding: 7px 10px; border-radius: 3px; box-shadow: inset 0 1px 0 #fff; }
.form-alert { color: #6b0f0f; background: linear-gradient(#fff1f0, #ffe3e1); border: 1px solid #d79b97; }
.form-notice { color: #1f3e1a; background: linear-gradient(#f2fbef, #e2f3dc); border: 1px solid #9ec393; margin: 12px 14px; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.strength { display: flex; align-items: center; gap: 10px; margin: -4px 0 12px; }
.strength[hidden] { display: none; }
.strength-track { flex: 1; height: 12px; border-radius: 999px; overflow: hidden; background: linear-gradient(#d9dde2, #f4f5f7); border: 1px solid #8a929b; box-shadow: inset 0 1px 2px rgba(0,0,0,.3), 0 1px 0 rgba(255,255,255,.9); }
.strength-pole {
  --c1: #d3202f; --c2: #ff9aa1;
  position: relative; height: 100%; width: 4%; border-radius: 999px; border-right: 1px solid rgba(0,0,0,.25);
  background: repeating-linear-gradient(-45deg, var(--c1) 0 5px, var(--c2) 5px 10px); background-size: 14.14px 14.14px;
  animation: barber .9s linear infinite; transition: width .25s ease;
}
.strength-pole::before { content: ""; position: absolute; inset: 0 0 50% 0; border-radius: 999px 999px 0 0; background: linear-gradient(rgba(255,255,255,.75), rgba(255,255,255,.15)); }
.strength-pole::after { content: ""; position: absolute; inset: 70% 0 0 0; background: linear-gradient(transparent, rgba(255,255,255,.25)); }
@keyframes barber { to { background-position: 14.14px 0; } }
.strength-label { min-width: 84px; text-align: right; color: var(--ink-soft); font-size: 12px; }
.strength[data-score="0"] .strength-pole { width: 8%;  --c1: #b5111f; --c2: #f7838b; }
.strength[data-score="1"] .strength-pole { width: 28%; --c1: #d84a12; --c2: #ffab7a; }
.strength[data-score="2"] .strength-pole { width: 52%; --c1: #e0a400; --c2: #ffe27a; }
.strength[data-score="3"] .strength-pole { width: 76%; --c1: #4bb529; --c2: #b5ee98; }
.strength[data-score="4"] .strength-pole { width: 100%; --c1: #1f8f4a; --c2: #8fe0ad; }

.vp-footer {
  display: flex; justify-content: center; gap: 12px; padding: 5px 16px; font-size: 11px;
  color: #4d5763; text-shadow: 0 1px 0 #fff;
  background: linear-gradient(180deg, #e4e7eb, #cfd4da); border-top: 1px solid var(--line); box-shadow: inset 0 1px 0 #fff;
}

@media (max-width: 640px) {
  .vp-header { justify-content: center; }
  .vp-wordmark { width: 100%; text-align: center; }
  .vp-header-right { justify-content: center; }
  .seg { padding: 0 11px; }
  .welcome-title { font-size: 26px; }
  .post.reply { margin-left: 0; display: block; }
  .post.reply::before { display: none; }
  .post.op .file, .post.reply .file { float: none; }
  .post-form { margin: 12px; }
  .tools-body { left: auto; right: 0; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
@media (forced-colors: active) { .hazard { forced-color-adjust: none; } .seg-on { outline: 1px solid Highlight; } }

.flag-icon { width: 16px; height: 12px; vertical-align: -1px; border: 1px solid rgba(0,0,0,.18); border-radius: 1px; box-shadow: 0 1px 0 rgba(255,255,255,.6); }
.user-name a { color: inherit; text-decoration: none; }
.user-name a:hover { color: #0b3f86; text-decoration: underline; }
.post-as .name { margin-right: 2px; }
.post-as { align-items: center; }
.login-prompt { text-align: center; }
.login-prompt p { margin: 4px 0 10px; color: var(--ink-soft); }
.login-prompt .btn, .login-prompt .text-btn { margin: 0 6px; }
.board-banner-desc .emoji, .board-table .emoji { width: 22px; height: 22px; margin: -5px 1px -4px; }

.account { max-width: 560px; }
.account-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.pfp-frame.big { width: 68px; height: 68px; }
.pfp-frame.big .pfp-well { width: 64px; height: 64px; }
.account-name { margin: 0 0 2px; font: 20px var(--ui); color: #22303e; }
.account-head .muted { margin: 0; font-size: 12px; }
.kv { border: 1px solid var(--line); }
.kv th { width: 160px; border-bottom: 1px solid #e4e8ec; }
.account-note { margin-top: 10px; }

.fold { margin: 2px 0 4px 18px; }
.fold > summary {
  list-style: none; cursor: pointer; width: max-content;
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 12px;
  font-size: 11px; color: #1f2a36; border-radius: 999px; border: 1px solid #7d858e;
  text-shadow: 0 1px 0 rgba(255,255,255,.8);
  background: linear-gradient(180deg, #fff 0%, #eef1f4 45%, #d8dde2 52%, #eceff2 100%);
  box-shadow: inset 0 1px 0 #fff, 0 1px 1px rgba(0,0,0,.12);
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::before { content: "▸"; color: #5d6670; }
.fold[open] > summary::before { content: "▾"; }
.fold > summary:hover { border-color: #5d8fc9; }
.fold .fold-close, .fold[open] .fold-open { display: none; }
.fold[open] .fold-close { display: inline; }
.fold-body { margin: 6px 0 0 -18px; }

.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.set-group { margin: 0; padding: 8px 12px 10px; border: 1px solid var(--line); border-radius: 4px; background: linear-gradient(#fff, #f4f6f8); }
.set-group legend { padding: 0 4px; font-size: 12px; color: #3a4552; }
.set { display: flex; gap: 8px; padding: 5px 0; font-size: 12px; border-top: 1px solid #edf0f3; }
.set:first-of-type { border-top: 0; }
.set-bool { align-items: flex-start; }
.set-bool input { margin-top: 2px; }
.set-num { align-items: center; justify-content: space-between; }
.set-num input { width: 80px; height: 22px; padding: 2px 6px; font: 12px var(--ui); }
.set-num select { max-width: 150px; font: 12px var(--ui); }
.set > span { display: flex; flex-direction: column; }
.set-help { color: var(--ink-soft); font-size: 11px; }
.settings-actions { margin: 12px 0 0; }
.inline-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; font-size: 12px; }
.inline-form label { display: inline-flex; align-items: center; gap: 3px; }
.inline-form select { font: 11px var(--ui); }
.row-off td { color: #9aa2ab; }

.deck {
  position: relative; max-width: 460px; margin: 6px 0 8px; padding: 11px 13px 9px;
  border: 1px solid #6a7179; border-radius: 6px; color: #2b3540;
  background:
    linear-gradient(180deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.44) 55%, rgba(255,255,255,.52) 100%),
    url("/img/deck/metal.png") 0 0 / 128px 128px repeat;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(0,0,0,.12), 0 1px 3px rgba(25,38,56,.28);
}
.screw { position: absolute; width: 7px; height: 7px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fbfbfb, #b9bfc6 55%, #7b828a);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.28), 0 1px 0 rgba(255,255,255,.8); }
.screw::after { content: ""; position: absolute; left: 1px; right: 1px; top: 3px; height: 1px; background: rgba(40,45,52,.55); transform: rotate(-35deg); }
.screw.s1 { left: 4px; top: 4px; } .screw.s2 { right: 4px; top: 4px; } .screw.s3 { left: 4px; bottom: 4px; } .screw.s4 { right: 4px; bottom: 4px; }
.screw.s2::after { transform: rotate(20deg); } .screw.s3::after { transform: rotate(70deg); } .screw.s4::after { transform: rotate(-10deg); }

.deck-top { display: grid; grid-template-columns: 76px minmax(0, 1fr) 62px; gap: 10px; align-items: center; }

.deck-art { width: 76px; height: 76px; border-radius: 3px; overflow: hidden; display: grid; place-items: center;
  background: #1c2026; border: 1px solid #4d545b; box-shadow: inset 0 2px 4px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.75); }
.deck-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.deck-art span { color: #8fa3b8; font-size: 26px; }

.deck-lcd {
  min-width: 0; padding: 4px 8px; height: 76px; display: flex; flex-direction: column; justify-content: space-between;
  border: 6px solid transparent; border-image: url("/img/deck/lcd.png") 6 fill / 6px stretch;
  color: #d6e9ff; font: 11px/1.3 "Lucida Console", Monaco, Consolas, monospace; letter-spacing: .4px;
}
.lcd-line { display: flex; justify-content: space-between; gap: 8px; white-space: nowrap; }
.lcd-head { font-size: 12px; }
.lcd-state { color: #ffffff; }
.lcd-clock { color: #ffffff; font-variant-numeric: tabular-nums; }
.lcd-marquee { overflow: hidden; display: block; font-size: 12px; color: #e6f1ff; }
.lcd-title { display: inline-block; }
.lcd-marquee.is-scrolling .lcd-title { animation: lcd-scroll 10s linear infinite alternate; }
@keyframes lcd-scroll { 0%, 18% { transform: translateX(0); } 82%, 100% { transform: translateX(var(--over, 0)); } }
.lcd-foot { font-size: 10px; color: #8fb3e0; }

.deck-vol { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.knob-ring { position: relative; width: 60px; height: 60px; margin-bottom: -60px; pointer-events: none; }
.knob-ring i { position: absolute; left: 29.5px; top: 30px; width: 1px; height: 4px; background: #4a525b; transform-origin: 0 0; }
.knob-ring i:nth-child(1)  { transform: rotate(-135deg) translateY(-30px); }
.knob-ring i:nth-child(2)  { transform: rotate(-108deg) translateY(-30px); }
.knob-ring i:nth-child(3)  { transform: rotate(-81deg)  translateY(-30px); }
.knob-ring i:nth-child(4)  { transform: rotate(-54deg)  translateY(-30px); }
.knob-ring i:nth-child(5)  { transform: rotate(-27deg)  translateY(-30px); }
.knob-ring i:nth-child(6)  { transform: rotate(0deg)    translateY(-30px); height: 5px; }
.knob-ring i:nth-child(7)  { transform: rotate(27deg)   translateY(-30px); }
.knob-ring i:nth-child(8)  { transform: rotate(54deg)   translateY(-30px); }
.knob-ring i:nth-child(9)  { transform: rotate(81deg)   translateY(-30px); }
.knob-ring i:nth-child(10) { transform: rotate(108deg)  translateY(-30px); }
.knob-ring i:nth-child(11) { transform: rotate(135deg)  translateY(-30px); }
.knob { position: relative; width: 45px; height: 44px; margin: 8px 0 0; border-radius: 50%; cursor: ns-resize; touch-action: none; user-select: none; }
.knob img { display: block; width: 45px; height: 44px; pointer-events: none; }
.knob-mark { position: absolute; inset: 0; transform: rotate(var(--turn, 81deg)); pointer-events: none; }
.knob-mark::after { content: ""; position: absolute; left: 50%; top: 5px; width: 2px; height: 8px; margin-left: -1px; border-radius: 1px;
  background: #3a4048; box-shadow: 0 1px 0 rgba(255,255,255,.7); }
.knob:focus-visible { outline: 1px solid var(--focus); outline-offset: 3px; box-shadow: none; }
.knob.is-grabbed { cursor: grabbing; }
.vol-leds { display: flex; gap: 2px; padding: 2px 3px; border-radius: 2px; background: #2a2f35; box-shadow: inset 0 1px 2px rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.7); }
.vol-leds i { width: 4px; height: 6px; border-radius: 1px; background: #24412a; }
.vol-leds i:nth-child(n+6) { background: #4a3d16; }
.vol-leds i:nth-child(8) { background: #4a1d19; }
.vol-leds i.on { background: linear-gradient(#b7f59a, #4cc23a); }
.vol-leds i:nth-child(n+6).on { background: linear-gradient(#ffe48a, #e0a400); }
.vol-leds i:nth-child(8).on { background: linear-gradient(#ffb0a6, #d8362a); }

.deck-video { margin-top: 9px; aspect-ratio: 16 / 9; min-height: 200px; border-radius: 3px; overflow: hidden;
  background: #000; border: 1px solid #3b4148; box-shadow: inset 0 2px 4px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.75); }
.deck-video[hidden] { display: none; }
.deck-video iframe, .deck-video-host { display: block; width: 100%; height: 100%; border: 0; }

.deck-seek { margin: 9px 0 4px; }
.fader { position: relative; height: 23px; cursor: pointer; touch-action: none;
  border-style: solid; border-width: 0 11px; border-image: url("/img/deck/slot.png") 0 11 fill / 0 11px stretch; }
.fader-fill { position: absolute; left: 0; top: 10px; height: 3px; width: 0; border-radius: 1px; background: linear-gradient(#9cc6ef, #4f8fd2); pointer-events: none; }
.fader-cap { position: absolute; left: 0; top: 3px; width: 18px; height: 17px; margin-left: -9px; cursor: grab; pointer-events: none; }
.fader.is-grabbed .fader-cap { top: 4px; }
.fader:focus-visible { outline: 1px solid var(--focus); outline-offset: 2px; box-shadow: none; }

.deck-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.deck-keys { display: inline-flex; gap: 3px; padding: 3px; border-radius: 4px; background: rgba(40,46,54,.16);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.7); }
.tkey { all: unset; box-sizing: border-box; cursor: pointer; width: 30px; height: 23px; display: block; border-radius: 3px; }
.tkey img { display: block; width: 30px; height: 23px; transition: transform 50ms linear, filter 50ms linear; }
.tkey:hover img { filter: brightness(1.07); }
.tkey:active img, .tkey.is-down img { transform: translateY(1px); filter: brightness(.8) contrast(1.08); }
.tkey.is-down { box-shadow: inset 0 1px 0 rgba(0,0,0,.25); }
.tkey:focus-visible { outline: 1px solid var(--focus); outline-offset: 1px; }
.deck-open { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; font-size: 11px; color: #2b3540; text-decoration: none;
  border: 1px solid #8e959d; border-radius: 999px; background: linear-gradient(#fff, #e3e7eb); box-shadow: inset 0 1px 0 #fff; }
.deck-open:hover { border-color: #5d8fc9; color: #0b3f86; }
.deck-open img { display: block; }
.deck-off .deck-keys, .deck-off .fader { opacity: .5; pointer-events: none; }

@media (max-width: 420px) {
  .deck-top { grid-template-columns: 60px minmax(0, 1fr); }
  .deck-art { width: 60px; height: 60px; }
  .deck-vol { grid-column: 1 / -1; flex-direction: row; justify-content: center; gap: 10px; }
  .deck-video { min-height: 0; }
}

.brand-logos { display: inline-flex; gap: 3px; margin-right: 5px; vertical-align: -2px; }
.brand-logos img { display: block; }

.prose { max-width: 680px; line-height: 1.6; font-size: 13px; }
.prose .lede { font-size: 14px; color: #22303e; margin-top: 0; }
.prose h3, .prose .subhead { font: 14px/1.3 var(--ui); color: #22303e; margin: 0 0 2px; }
.prose .subhead { margin-top: 20px; }
.prose p { margin: 0 0 10px; }
.rules-list { margin: 0 0 16px; padding: 0; list-style: none; counter-reset: rule; }
.rules-list li { counter-increment: rule; position: relative; padding: 10px 12px 2px 34px; margin-bottom: 6px;
  background: var(--reply-bg); border: 1px solid #c4ccd5; border-radius: 3px; box-shadow: inset 0 1px 0 #fff; }
.rules-list li::before { content: counter(rule) "."; position: absolute; left: 12px; top: 10px; font-size: 14px; color: #55616d; }
.faq-item { border-bottom: 1px solid var(--line-soft); }
.faq-item > summary { cursor: pointer; padding: 9px 0; font-size: 13px; color: #1d5fb4; list-style: none; display: flex; gap: 8px; }
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::before { content: "▸"; color: #8a939c; width: 10px; }
.faq-item[open] > summary::before { content: "▾"; }
.faq-item > summary:hover { color: #0b3f86; }
.faq-item p { margin: 0 0 12px 18px; color: #2b3540; }
.faq-more { margin-top: 14px; }

a.name { text-decoration: none; }
a.name:hover { text-decoration: underline; }
.ms-profile { display: grid; grid-template-columns: minmax(0, 390px) minmax(0, 1fr); gap: 18px; max-width: 980px; padding: 16px 14px; align-items: start; }
.ms-left, .ms-right { display: grid; gap: 14px; min-width: 0; }
.ms-card { padding: 12px; background: #fff; border: 1px solid var(--line); border-radius: 4px; box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(25,38,56,.12); }
.ms-name { margin: 0 0 10px; font: 22px/1.1 var(--ui); color: #17375f; display: flex; align-items: center; gap: 8px; overflow-wrap: anywhere; }
.ms-card-row { display: flex; gap: 12px; align-items: flex-start; }
.ms-pic { flex: none; width: 150px; height: 150px; padding: 1px; border-radius: 3px;
  background: linear-gradient(160deg, #ffffff 0%, #d4d9df 50%, #a3abb4 100%); border: 1px solid #6c747e; box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(20,32,48,.3); }
.ms-pic img { display: block; width: 100%; height: 100%; object-fit: cover; border: 1px solid #5d656e; background: #e9ecef; }
.ms-pic.small { width: 90px; height: 90px; }
.ms-facts { min-width: 0; font-size: 12px; color: #2b3540; overflow-wrap: anywhere; }
.ms-facts p { margin: 0 0 5px; }
.ms-mood .emoji { width: 22px; height: 22px; margin: -5px 0 -4px; }
.ms-label { color: var(--ink-soft); }
.ms-actions { margin: 12px 0 0; }

.ms-box { border: 1px solid; border-radius: 3px; overflow: hidden; background: #fff; }
.ms-head { margin: 0; padding: 4px 9px; font: 12px/1.4 var(--ui); }
.ms-body { padding: 9px 10px; font-size: 12px; overflow-wrap: anywhere; }
.ms-blue { border-color: #7f9cc2; }
.ms-blue .ms-head { color: #fff; text-shadow: 0 -1px 0 rgba(20,50,90,.4); border-bottom: 1px solid #5f7fa8;
  background: linear-gradient(180deg, #a9c3e6 0%, #7c9fd0 50%, #6b8fc4 51%, #86a8d6 100%); }
.ms-orange { border-color: #e2a66b; }
.ms-orange .ms-head { color: #8a3d00; text-shadow: 0 1px 0 rgba(255,255,255,.6); border-bottom: 1px solid #e2a66b;
  background: linear-gradient(180deg, #fff1e0 0%, #ffd8ae 50%, #ffcc99 51%, #ffe0bd 100%); }
.ms-blue .deck { margin: 0; max-width: none; }
.ms-details { width: 100%; border-collapse: collapse; }
.ms-details th { width: 90px; padding: 4px 6px; text-align: left; font: 12px var(--ui); color: #4a6a94; background: #eef3fa; border-bottom: 1px solid #fff; }
.ms-details td { padding: 4px 8px; border-bottom: 1px solid #eef1f4; }
.ms-sub { margin: 0 0 4px; font: 12px var(--ui); color: #c25a00; }
.ms-bio { line-height: 1.55; font-size: 13px; }
.ms-posts { list-style: none; margin: 0; padding: 0; }
.ms-posts li { display: grid; grid-template-columns: auto 1fr; gap: 0 10px; padding: 6px 0; border-bottom: 1px solid #f1ece6; }
.ms-posts li:last-child { border-bottom: 0; }
.ms-post-when { color: var(--ink-soft); font-size: 11px; justify-self: end; }
.ms-post-text { grid-column: 1 / -1; color: #3a4552; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ms-edit { max-width: 620px; }
.ms-edit-form { margin: 0; max-width: none; }
.ms-edit-pic { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 6px; }
.ms-edit-pic .field { flex: 1; }
.ms-check { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ink-soft); }

@media (max-width: 760px) {
  .ms-profile { grid-template-columns: minmax(0, 1fr); }
  .ms-card-row { flex-direction: column; align-items: center; text-align: center; }
}

.ms-blue .ms-body:has(.deck) { padding: 8px; }
.ms-blue .deck { padding: 10px 11px 8px; }
.ms-blue .deck-top { grid-template-columns: 58px minmax(0, 1fr) 58px; gap: 8px; }
.ms-blue .deck-art { width: 58px; height: 58px; }
.ms-blue .deck-lcd { height: 66px; padding: 2px 6px; font-size: 10px; }
.ms-blue .lcd-head, .ms-blue .lcd-marquee { font-size: 11px; }
.ms-blue .lcd-foot { font-size: 9px; }

.status-page { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 28px 16px 8px; }
.status-page p { margin: 0 0 14px; }
.status-msg { font-size: 15px; color: #22303e; max-width: 520px; overflow-wrap: anywhere; }
.status-page .cat-btn { width: 240px; margin-bottom: 14px; }

.perch-section { padding-top: 34px; }
.perch { position: relative; }
.perch .cat-btn { position: absolute; right: 26px; bottom: 100%; margin-bottom: -1px; width: 70px; z-index: 2; --hop: -34px; --hop2: -10px; }
.cat-btn { all: unset; display: block; box-sizing: border-box; cursor: pointer; transform-origin: 50% 100%; -webkit-tap-highlight-color: transparent; }
.cat-btn img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.cat-btn:focus-visible { outline: 1px solid var(--focus); outline-offset: 3px; }
.cat-btn.is-bouncing { animation: cat-bounce .75s ease-out; }
@keyframes cat-bounce {
  0%   { transform: translateY(0) scale(1, 1); }
  12%  { transform: translateY(0) scale(1.1, .86); }
  38%  { transform: translateY(var(--hop, -58px)) scale(.96, 1.05); animation-timing-function: ease-in; }
  62%  { transform: translateY(0) scale(1.08, .9); animation-timing-function: ease-out; }
  78%  { transform: translateY(var(--hop2, -16px)) scale(.99, 1.02); animation-timing-function: ease-in; }
  92%  { transform: translateY(0) scale(1.03, .97); }
  100% { transform: translateY(0) scale(1, 1); }
}

.btn { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 24px; padding: 3px 14px;
  font: 12px var(--ui); color: #1f2a36; text-decoration: none; cursor: pointer; border: 1px solid #7d858e; border-radius: 3px;
  background: linear-gradient(#fff, #e4e8ec); box-shadow: inset 0 1px 0 #fff; }
.btn:hover { border-color: #5d8fc9; color: #1f2a36; }
.btn:active { background: linear-gradient(#d3d8de, #e4e8ec); box-shadow: inset 0 1px 2px rgba(0,0,0,.25); }

.board-card { margin-bottom: 6px; background: #fff; border: 1px solid var(--line); border-radius: 3px; }
.board-card > summary { display: flex; align-items: baseline; gap: 8px; padding: 6px 10px; cursor: pointer; }
.board-card .count { margin-left: auto; }
.board-new > summary { color: #1d5fb4; }
.board-edit { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px 12px; padding: 8px 10px 10px; border-top: 1px solid var(--line-soft); }
.board-edit label { display: grid; gap: 3px; font-size: 12px; color: #3a4552; align-content: start; }
.board-edit input.recess { width: 100%; height: 24px; padding: 2px 6px; font: 12px var(--ui); }
.board-wide { grid-column: 1 / -1; }
.board-checks { display: flex; gap: 16px; flex-wrap: wrap; }
.board-edit .board-check { display: inline-flex; align-items: center; gap: 4px; }
.board-actions { margin: 0; }

.post { position: relative; }
.post.is-featured { margin-bottom: 32px; max-width: calc(100% - 26px); padding-right: 46px; }
.award { position: absolute; right: -22px; bottom: -28px; width: 62px; height: auto; z-index: 3; pointer-events: none; }

.text-btn { appearance: none; background: none; border: 0; padding: 0; cursor: pointer; font: 13px var(--ui); color: #2a8a16; text-decoration: underline; }
.text-btn:hover { color: #1c6a0d; }
.text-btn:disabled { color: var(--ink-soft); cursor: default; }

.spoiler { background: #1f2329; color: transparent; border-radius: 2px; padding: 0 2px; cursor: pointer; }
.spoiler * { visibility: hidden; }
.spoiler:hover, .spoiler:focus, .spoiler.shown { background: transparent; color: inherit; }
.spoiler:hover *, .spoiler:focus *, .spoiler.shown * { visibility: visible; }
.spoiler-check { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-soft); margin-top: 4px; }
.thumb-link { position: relative; display: inline-block; }
.thumb.spoiler-img { filter: blur(16px) saturate(.6); }
.thumb-link:has(.spoiler-img)::after { content: "spoiler"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 12px; letter-spacing: 1px; text-shadow: 0 1px 2px #000; }

.board-banner.has-image { padding-top: 12px; }
.board-banner-img { display: block; width: min(100%, 900px); height: auto; aspect-ratio: 3 / 1; margin: 0 auto 8px; border: 1px solid var(--line); border-radius: 3px; object-fit: cover; }

.featured-lede { margin: 0; padding: 12px 14px 0; color: var(--ink-soft); }
.featured-where { margin: 0 0 6px; font-size: 12px; }
.seg-pink { --g1:#ffd6ea; --g2:#f7a1c9; --g3:#e0559a; --g4:#c13a80; --g5:#e2669f; --g6:#ffbfdc; --gs:rgba(90,10,50,.55); }

.theme-switch { appearance: none; position: relative; width: 34px; height: 18px; padding: 0; cursor: pointer; border-radius: 999px;
  border: 1px solid #6c747e; background: linear-gradient(#c9ced4, #eef0f3); box-shadow: inset 0 1px 2px rgba(0,0,0,.3); }
.theme-knob { position: absolute; top: 1px; left: 1px; width: 14px; height: 14px; border-radius: 50%; border: 1px solid #7d858e;
  background: linear-gradient(#fff, #d8dde2); box-shadow: 0 1px 1px rgba(0,0,0,.25); transition: left .15s ease; }
.theme-switch[aria-checked="true"] { background: linear-gradient(#3b4148, #555c64); border-color: #111; }
.theme-switch[aria-checked="true"] .theme-knob { left: 17px; }
.theme-switch:focus-visible { outline: 1px solid var(--focus); outline-offset: 2px; }

[data-theme="dark"] { color-scheme: dark; --ink: #d6dde5; --ink-soft: #9aa6b2; --line: #3a4048; --line-dark: #111; --line-soft: #30353b;
  --reply-bg: linear-gradient(180deg, #272b31 0%, #22262b 100%); --name: #6fd08f; --subject: #9cc0ff; --green: #8fc35a; }
[data-theme="dark"] body { color: var(--ink); background-color: #1b1e22; background-image: repeating-linear-gradient(180deg, #202327 0 2px, #1a1d21 2px 4px); }
[data-theme="dark"] a { color: #7fb2ee; }
[data-theme="dark"] a:hover { color: #a9cdf6; }
[data-theme="dark"] .vp-header { background: repeating-linear-gradient(180deg, rgba(255,255,255,.03) 0 1px, rgba(0,0,0,.05) 1px 2px), linear-gradient(180deg, #4a4f56 0%, #33373d 48%, #2b2f34 52%, #373b41 100%);
  border-bottom-color: #0d0f11; box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 1px 3px rgba(0,0,0,.5); }
[data-theme="dark"] .vp-wordmark, [data-theme="dark"] .user-name { color: #e3e8ee; text-shadow: 0 -1px 0 #000; }
[data-theme="dark"] .user-links a, [data-theme="dark"] .linkish { color: #8fb8e8; }
[data-theme="dark"] .seg-group { border-color: #0d0f11; }
[data-theme="dark"] .seg-group li + li .seg { border-left-color: #22252a; }
[data-theme="dark"] .seg { color: #e3e8ee; text-shadow: 0 -1px 0 rgba(0,0,0,.6); background: linear-gradient(180deg, #5a6068 0%, #3d4249 50%, #33373d 51%, #40454c 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.16); }
[data-theme="dark"] .seg::before { opacity: .22; }
[data-theme="dark"] .seg:hover { background: linear-gradient(180deg, #666c75 0%, #474c54 50%, #3c4047 51%, #4a4f57 100%); }
[data-theme="dark"] .seg:active, [data-theme="dark"] .seg-on, [data-theme="dark"] .seg-on:hover { color: #fff;
  background: linear-gradient(180deg, var(--g1) 0%, var(--g2) 39%, var(--g3) 48%, var(--g4) 54%, var(--g5) 84%, var(--g6) 100%); }
[data-theme="dark"] .theme-switch { border-color: #0d0f11; }
[data-theme="dark"] .pagebar { background: linear-gradient(180deg, #2d3136, #25282c); border-bottom-color: #0d0f11; box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
[data-theme="dark"] .pagebar-title, [data-theme="dark"] .section-title, [data-theme="dark"] .welcome-title, [data-theme="dark"] .ms-name, [data-theme="dark"] .account-name { color: #e3e8ee; text-shadow: none; }
[data-theme="dark"] .crumbs, [data-theme="dark"] .crumbs a { color: #9aa6b2; }
[data-theme="dark"] .welcome, [data-theme="dark"] .board-banner { background: rgba(28,31,35,.85); border-color: var(--line-soft); }
[data-theme="dark"] .board-banner-title { color: #d6dde5; }
[data-theme="dark"] .board-banner-name { color: #ff8b8b; text-shadow: none; }
[data-theme="dark"] .table-wrap, [data-theme="dark"] .data-table, [data-theme="dark"] .board-table, [data-theme="dark"] .board-card, [data-theme="dark"] .ms-card, [data-theme="dark"] .ms-box, [data-theme="dark"] .set-group { background: #23272c; border-color: var(--line); }
[data-theme="dark"] .data-table th { color: #c5ced8; background: linear-gradient(#30353b, #272b30); border-bottom-color: #111; }
[data-theme="dark"] .data-table td { border-top-color: #30353b; }
[data-theme="dark"] .data-table tr:nth-child(even) td { background: #262a2f; }
[data-theme="dark"] .post.op, [data-theme="dark"] .post.reply, [data-theme="dark"] .rules-list li { border-color: var(--line); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
[data-theme="dark"] .post:target { border-color: #8a7322; background: linear-gradient(180deg, #3a3420, #2f2a18); }
[data-theme="dark"] .post-head time, [data-theme="dark"] .no { color: #9aa6b2; }
[data-theme="dark"] .quotelink { color: #ff8a8a; }
[data-theme="dark"] .flag { background: #33373d; color: #c5ced8; border-color: #4a5058; }
[data-theme="dark"] .thumb { border-color: var(--line); background: #111; }
[data-theme="dark"] .post-form, [data-theme="dark"] .login-prompt { background: linear-gradient(180deg, #2a2e34, #24282d); border-color: var(--line); box-shadow: none; }
[data-theme="dark"] .post-form-title, [data-theme="dark"] .field label, [data-theme="dark"] .ms-facts, [data-theme="dark"] .prose, [data-theme="dark"] .prose .lede, [data-theme="dark"] .prose h3, [data-theme="dark"] .status-msg, [data-theme="dark"] .ms-post-text, [data-theme="dark"] .faq-item p { color: #d6dde5; }
[data-theme="dark"] .recess { color: #e3e8ee; background: linear-gradient(#16191c, #1d2024 20%); border-color: #4a525b; box-shadow: inset 0 2px 4px rgba(0,0,0,.5), inset 0 -1px 0 rgba(255,255,255,.05); }
[data-theme="dark"] .btn, [data-theme="dark"] .mini, [data-theme="dark"] .fold > summary, [data-theme="dark"] .page, [data-theme="dark"] .deck-open { color: #e3e8ee; text-shadow: none; border-color: #15181b; background: linear-gradient(#4a4f56, #363a40); box-shadow: inset 0 1px 0 rgba(255,255,255,.14); }
[data-theme="dark"] .page.off { color: #6c757e; background: #26292d; }
[data-theme="dark"] .page.cur { color: #fff; border-color: #1f5b9d; background: linear-gradient(180deg, #85bdf8, #2769be 52%, #4a94e7); }
[data-theme="dark"] .text-btn { color: #6fd08f; }
[data-theme="dark"] .emoji-grid, [data-theme="dark"] .tools-body { background: #1f2327; border-color: #4a525b; }
[data-theme="dark"] .emoji-btn:hover { background: #2c3a4a; border-color: #3d5878; }
[data-theme="dark"] .form-alert { color: #ffc9c4; background: #3a1f1f; border-color: #7a3a35; box-shadow: none; }
[data-theme="dark"] .form-notice { color: #c9efc0; background: #1f3320; border-color: #3c6b37; box-shadow: none; }
[data-theme="dark"] .vp-footer { color: #9aa6b2; text-shadow: none; background: linear-gradient(180deg, #2b2f34, #222529); border-top-color: #0d0f11; box-shadow: none; }
[data-theme="dark"] .ms-details th { color: #9cc0ff; background: #2a3442; border-bottom-color: #23272c; }
[data-theme="dark"] .ms-details td, [data-theme="dark"] .ms-posts li, [data-theme="dark"] .faq-item, [data-theme="dark"] .set { border-color: #30353b; }
[data-theme="dark"] .faq-item > summary { color: #8fb8e8; }
[data-theme="dark"] .strength-track { background: linear-gradient(#16191c, #23272c); border-color: #4a525b; }
[data-theme="dark"] .spoiler { background: #000; }
[data-theme="dark"] .skip { background: #23272c; }

.pw-form { margin: 16px 0 0; max-width: 420px; }