:root {
  --bg: #fff8e1;
  --panel: #ffffff;
  --ink: #111111;
  --muted: #5b5548;
  --line: #111111;
  --yellow: #f5ff3d;
  --pink: #ff4fa3;
  --purple: #6b2cff;
  --cyan: #2de2e6;
  --on-accent: #ffffff;
  --hit: #f5ff3d;
  --hit-ink: #111;
  --shadow: #111111;
  /* tier ramp: one hue, light to dark, always shown with its label */
  --t0: #ffd6ea; --t1: #ffa8d0; --t2: #ff6fb3; --t3: #e01e84; --t4: #8a0050;
  --t-ink0: #111; --t-ink1: #111; --t-ink2: #111; --t-ink3: #fff; --t-ink4: #fff;
  --grid: #e9e1c9;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e0d12; --panel: #1a1822; --ink: #f6f2ff; --muted: #b3abc6; --line: #f6f2ff;
    --yellow: #e6f53a; --pink: #ff5cad; --purple: #9b73ff; --cyan: #34e4e8; --on-accent: #0e0d12;
    --hit: #5d6300; --hit-ink: #fbffc9; --shadow: #ff5cad;
    --t0: #4a1530; --t1: #7a1d4d; --t2: #b52a72; --t3: #ff5cad; --t4: #ffb3d6;
    --t-ink0: #fff; --t-ink1: #fff; --t-ink2: #fff; --t-ink3: #111; --t-ink4: #111;
    --grid: #2b2836;
  }
}
:root[data-theme="dark"] {
  --bg: #0e0d12; --panel: #1a1822; --ink: #f6f2ff; --muted: #b3abc6; --line: #f6f2ff;
  --yellow: #e6f53a; --pink: #ff5cad; --purple: #9b73ff; --cyan: #34e4e8; --on-accent: #0e0d12;
  --hit: #5d6300; --hit-ink: #fbffc9; --shadow: #ff5cad;
  --t0: #4a1530; --t1: #7a1d4d; --t2: #b52a72; --t3: #ff5cad; --t4: #ffb3d6;
  --t-ink0: #fff; --t-ink1: #fff; --t-ink2: #fff; --t-ink3: #111; --t-ink4: #111;
  --grid: #2b2836;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.5 Inter, system-ui, sans-serif;
  background-image: radial-gradient(var(--grid) 1.2px, transparent 1.2px);
  background-size: 22px 22px;
  overflow-x: hidden;
}
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 16px; }
button, input, textarea { font: inherit; color: inherit; }
button {
  font-weight: 800; font-size: 14px; border: 2.5px solid var(--line); background: var(--panel);
  border-radius: 10px; padding: 8px 14px; cursor: pointer; box-shadow: 3px 3px 0 var(--shadow);
  transition: transform .08s, box-shadow .08s;
}
button:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--shadow); }
button:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--shadow); }
button.primary { background: var(--purple); color: var(--on-accent); }
button:focus-visible, input:focus-visible, textarea:focus-visible, .row:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
.note { color: var(--muted); font-size: 14px; margin: 0 0 14px; }

/* ticker */
.ticker { background: var(--ink); color: var(--bg); overflow: hidden; border-bottom: 3px solid var(--line); white-space: nowrap; }
.ticker-track { display: inline-block; padding: 9px 0; animation: tick 120s linear infinite; font-weight: 700; font-size: 14px; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-track span { margin-right: 48px; }
.ticker-track b { color: var(--yellow); margin-right: 8px; font-family: "JetBrains Mono", monospace; }
@keyframes tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* hero */
.hero { position: relative; padding-top: 36px; padding-bottom: 8px; }
.theme { position: absolute; right: 16px; top: 20px; }
.hero-grid { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; }
.sticker {
  display: inline-block; background: var(--yellow); color: #111; font-weight: 800; font-size: 13px; letter-spacing: .06em;
  border: 2.5px solid var(--line); padding: 4px 10px; transform: rotate(-3deg); box-shadow: 3px 3px 0 var(--shadow); margin-bottom: 10px;
}
h1 { margin: 0; font-family: "Archivo Black", sans-serif; line-height: .82; letter-spacing: -.03em; font-size: clamp(72px, 16vw, 190px); }
h1 span { display: block; }
h1 .l1 { color: var(--ink); }
h1 .l2 { color: var(--pink); -webkit-text-stroke: 3px var(--line); text-shadow: 7px 7px 0 var(--purple); }
.lede { font-size: clamp(17px, 2.2vw, 22px); font-weight: 500; max-width: 34ch; margin: 18px 0 4px; }
.fine { font-size: 12px; color: var(--muted); margin: 0; }
.cup { width: clamp(120px, 22vw, 240px); height: auto; animation: bob 4s ease-in-out infinite; }
.tw { transform-box: fill-box; transform-origin: center; animation: twinkle 1.8s ease-in-out infinite; }
.t2 { animation-delay: .5s; } .t3 { animation-delay: 1s; }
@keyframes twinkle { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(.55) rotate(45deg); } }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-8px) rotate(2deg); } }
@media (prefers-reduced-motion: reduce) { .ticker-track, .cup, .tw { animation: none; } html { scroll-behavior: auto; } }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 28px; }
.stat { background: var(--panel); border: 3px solid var(--line); border-radius: 14px; padding: 14px 16px; box-shadow: 5px 5px 0 var(--shadow); }
.stat:nth-child(1) { background: var(--yellow); color: #111; }
.stat:nth-child(3) { background: var(--cyan); color: #111; }
.stat b { display: block; font-family: "Archivo Black", sans-serif; font-size: clamp(26px, 4vw, 42px); line-height: 1.05; }
.stat span { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
@media (max-width: 760px) { .stats { grid-template-columns: 1fr 1fr; } .hero-grid { grid-template-columns: 1fr; } .cup { position: absolute; right: 12px; top: 70px; width: 96px; opacity: .9; } }

/* sections */
main section { margin-top: 44px; }
.sec { font-family: "Archivo Black", sans-serif; font-size: clamp(24px, 3.4vw, 34px); margin: 0 0 14px; line-height: 1.1; display: flex; align-items: center; gap: 12px; }
.sec span { font-family: "JetBrains Mono", monospace; font-size: 14px; background: var(--ink); color: var(--bg); padding: 3px 8px; border-radius: 6px; }
.box { background: var(--panel); border: 3px solid var(--line); border-radius: 18px; padding: 22px; box-shadow: 7px 7px 0 var(--shadow); min-width: 0; }
.box-head { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: space-between; }
.box-head .sec { margin: 0; }
input[type=search], input[type=text], textarea {
  border: 2.5px solid var(--line); border-radius: 10px; padding: 9px 12px; background: var(--bg); font-size: 16px; min-width: 0;
}
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 44px; }
.two > section { margin-top: 0; }
@media (max-width: 860px) { .two { grid-template-columns: 1fr; } }
.mini { font-family: "Archivo Black", sans-serif; font-size: 17px; margin: 22px 0 6px; }

/* podium */
.podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 18px; align-items: end; }
.pod {
  position: relative; border: 3px solid var(--line); border-radius: 18px; padding: 18px; cursor: pointer; text-align: left;
  box-shadow: 7px 7px 0 var(--shadow); background: var(--panel); color: var(--ink); font-weight: 400; min-width: 0;
}
.pod:hover { transform: translate(-2px, -2px) rotate(-.5deg); box-shadow: 9px 9px 0 var(--shadow); }
.pod.p1 { background: var(--pink); color: #111; padding-top: 34px; padding-bottom: 34px; }
.pod.p2 { background: var(--yellow); color: #111; }
.pod.p3 { background: var(--cyan); color: #111; }
.pod .medal { position: absolute; top: -18px; left: 16px; font-size: 34px; }
.pod .score { font-family: "Archivo Black", sans-serif; font-size: clamp(54px, 8vw, 96px); line-height: .9; display: block; margin-top: 8px; }
.pod .dom { font-family: "Archivo Black", sans-serif; font-size: clamp(18px, 2.4vw, 26px); overflow-wrap: anywhere; display: block; }
.pod .why { font-size: 13px; font-weight: 600; display: block; margin-top: 8px; }
.pod .tierlabel { display: inline-block; margin-top: 8px; background: #111; color: #fff; font-size: 12px; font-weight: 800; padding: 2px 8px; border-radius: 6px; }
@media (max-width: 760px) { .podium { grid-template-columns: 1fr; } .pod.p1 { order: -1; } }

/* board */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 10px; }
.chips button { padding: 5px 12px; font-size: 13px; box-shadow: 2px 2px 0 var(--shadow); }
.chips button.on, .sortbar button.on { background: var(--ink); color: var(--bg); }
.sortbar { font-size: 13px; font-weight: 700; color: var(--muted); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.sortbar button { padding: 3px 10px; font-size: 12px; box-shadow: 2px 2px 0 var(--shadow); }
.board { list-style: none; margin: 0; padding: 0; }
.row {
  display: grid; grid-template-columns: 42px minmax(140px, 220px) 1fr 70px; gap: 12px; align-items: center;
  padding: 9px 6px; border-bottom: 2px dashed var(--grid); cursor: pointer; border-radius: 8px;
}
.row:hover { background: color-mix(in srgb, var(--yellow) 35%, transparent); }
.row .rk { font-family: "JetBrains Mono", monospace; font-weight: 700; color: var(--muted); text-align: right; }
.row .who { min-width: 0; }
.row .who b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .who small { color: var(--muted); font-size: 12px; }
.row .track { position: relative; height: 26px; background: var(--grid); border-radius: 4px; overflow: hidden; }
.row .fill { position: absolute; inset: 0 auto 0 0; border-radius: 0 4px 4px 0; display: flex; align-items: center; padding-left: 8px; font-size: 11px; font-weight: 800; white-space: nowrap; transition: width .6s cubic-bezier(.2, .9, .3, 1.2); }
.row .val { font-family: "Archivo Black", sans-serif; font-size: 22px; text-align: right; }
@media (max-width: 640px) { .row { grid-template-columns: 30px 1fr 54px; } .row .track { grid-column: 2 / 4; grid-row: 2; height: 18px; } .row .rk { grid-row: span 2; } }
.tier-0 { background: var(--t0); color: var(--t-ink0); } .tier-1 { background: var(--t1); color: var(--t-ink1); }
.tier-2 { background: var(--t2); color: var(--t-ink2); } .tier-3 { background: var(--t3); color: var(--t-ink3); }
.tier-4 { background: var(--t4); color: var(--t-ink4); }
.pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; border: 2px solid var(--line); }

/* horizontal bars */
.hbars { display: grid; gap: 7px; }
.hb { display: grid; grid-template-columns: minmax(110px, 38%) 1fr 48px; gap: 10px; align-items: center; font-size: 14px; }
.hb .lab { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.hb .tr { height: 18px; position: relative; }
.hb .br { height: 100%; background: var(--purple); border-radius: 0 4px 4px 0; transition: width .6s; min-width: 2px; }
.hb .n { font-family: "JetBrains Mono", monospace; text-align: right; font-size: 13px; }
.hbars.small .hb { font-size: 13px; }
.hbars.small .br { background: var(--pink); }
#cats .br { background: var(--t3); }
.heroes { margin: 0; padding-left: 22px; }
.heroes li { padding: 4px 0; font-weight: 700; cursor: pointer; }
.heroes li span { color: var(--muted); font-weight: 400; font-size: 13px; }

/* awards */
.awards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.award { background: var(--panel); border: 3px solid var(--line); border-radius: 16px; padding: 16px; box-shadow: 5px 5px 0 var(--shadow); cursor: pointer; text-align: left; font-weight: 400; min-width: 0; }
.award:nth-child(4n+1) { transform: rotate(-1deg); } .award:nth-child(4n+3) { transform: rotate(1deg); }
.award .trophy { font-size: 30px; line-height: 1; }
.award h3 { font-family: "Archivo Black", sans-serif; font-size: 18px; margin: 8px 0 4px; line-height: 1.15; }
.award .who { font-weight: 800; color: var(--purple); overflow-wrap: anywhere; }
.award .how { font-size: 13px; color: var(--muted); }

/* quotes */
.quotes { columns: 3 280px; column-gap: 16px; }
.qcard { break-inside: avoid; margin: 0 0 16px; background: var(--panel); border: 3px solid var(--line); border-radius: 16px; padding: 16px; box-shadow: 5px 5px 0 var(--shadow); }
.qcard:nth-child(3n+2) { background: var(--yellow); color: #111; }
.qcard:nth-child(5n+4) { background: var(--cyan); color: #111; }
.qcard p { margin: 0 0 10px; font-size: 17px; line-height: 1.4; font-weight: 500; overflow-wrap: anywhere; }
.qcard p::before { content: "“"; font-family: "Archivo Black", sans-serif; font-size: 36px; line-height: 0; vertical-align: -12px; margin-right: 2px; color: var(--pink); }
.qcard cite { font-style: normal; font-weight: 800; font-size: 13px; }
mark { background: var(--hit); color: var(--hit-ink); border-radius: 3px; padding: 0 2px; box-shadow: 0 0 0 1px currentColor; }
.qcard:nth-child(3n+2) mark { background: var(--pink); color: #111; }

/* bingo */
.bingo { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.bingo button {
  aspect-ratio: 1; padding: 4px; font-size: clamp(9px, 1.3vw, 12px); line-height: 1.15; font-weight: 700; border-radius: 8px;
  box-shadow: 2px 2px 0 var(--shadow); overflow: hidden; overflow-wrap: anywhere; hyphens: auto;
}
.bingo button.on { background: var(--pink); color: #111; transform: rotate(-2deg); }
.bingo button.free { background: var(--yellow); color: #111; }
.bingo button.win { background: var(--purple); color: #fff; }
.bingo-foot { display: flex; gap: 12px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.bingo-foot .note { margin: 0; font-weight: 700; }

/* paste */
textarea { width: 100%; min-height: 150px; resize: vertical; line-height: 1.5; }
.paste-row { display: flex; gap: 12px; align-items: center; justify-content: space-between; margin-top: 10px; flex-wrap: wrap; }
.paste-score { display: flex; align-items: baseline; gap: 10px; }
.paste-score b { font-family: "Archivo Black", sans-serif; font-size: 40px; line-height: 1; }
.paste-score span { font-weight: 700; color: var(--muted); font-size: 14px; }
.preview { border: 2.5px dashed var(--line); border-radius: 10px; padding: 12px; font-size: 15px; white-space: pre-wrap; overflow-wrap: anywhere; min-height: 48px; margin-top: 12px; }
.preview:empty::before { content: "Highlighted slop appears here."; color: var(--muted); }

/* nominate */
.suggest form { display: flex; gap: 10px; flex-wrap: wrap; }
.suggest input { flex: 1 1 240px; }
.suggest .note { margin: 10px 0 0; font-family: "JetBrains Mono", monospace; font-size: 13px; overflow-wrap: anywhere; }
.bad { color: var(--pink); font-weight: 700; }
.how-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.how-grid p { margin: 6px 0 0; font-size: 14px; color: var(--muted); }
.how-grid .big { font-family: "Archivo Black", sans-serif; font-size: 20px; }
@media (max-width: 860px) { .how-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .how-grid { grid-template-columns: 1fr; } }

footer.wrap { color: var(--muted); font-size: 13px; padding-top: 40px; padding-bottom: 60px; }

/* detail dialog */
dialog { border: 3px solid var(--line); border-radius: 20px; padding: 0; background: var(--panel); color: var(--ink); box-shadow: 10px 10px 0 var(--shadow); width: min(920px, calc(100vw - 24px)); max-height: calc(100vh - 32px); }
dialog::backdrop { background: color-mix(in srgb, var(--purple) 55%, transparent); backdrop-filter: blur(2px); }
.dlg { padding: 24px; position: relative; }
.close { position: absolute; right: 16px; top: 16px; padding: 4px 11px; }
.dlg-head { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; padding-right: 40px; }
.dlg-head h2 { font-family: "Archivo Black", sans-serif; font-size: clamp(26px, 4vw, 40px); margin: 2px 0 6px; overflow-wrap: anywhere; line-height: 1.05; }
.dlg-head .note { margin: 8px 0 0; }
.cat-tag { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--purple); }
.gauge svg { width: 150px; height: 96px; display: block; }
.stack { display: flex; height: 30px; border: 2.5px solid var(--line); border-radius: 8px; overflow: hidden; margin: 20px 0 6px; gap: 2px; background: var(--panel); }
.stack div { display: flex; align-items: center; padding: 0 8px; font-size: 12px; font-weight: 800; white-space: nowrap; overflow: hidden; color: #111; }
.quote { font-size: 20px; line-height: 1.4; border-left: 6px solid var(--pink); padding: 6px 0 6px 16px; margin: 18px 0; font-weight: 500; overflow-wrap: anywhere; }
.dlg-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; }
@media (max-width: 720px) { .dlg-grid { grid-template-columns: 1fr; } }
ul.plain { list-style: none; padding: 0; margin: 0; }
ul.plain li { padding: 5px 0; border-bottom: 2px dashed var(--grid); font-size: 14px; display: flex; justify-content: space-between; gap: 10px; }
ul.plain li > span:first-child { overflow-wrap: anywhere; min-width: 0; }
ul.plain a { color: inherit; }
.muted { color: var(--muted); font-size: 13px; }
.num { font-family: "JetBrains Mono", monospace; white-space: nowrap; }

.tooltip { position: fixed; z-index: 50; pointer-events: none; background: var(--ink); color: var(--bg); font-size: 13px; font-weight: 600; padding: 6px 10px; border-radius: 8px; max-width: 260px; box-shadow: 3px 3px 0 var(--pink); }
#confetti { position: fixed; inset: 0; pointer-events: none; z-index: 60; width: 100vw; height: 100vh; }

.steps { list-style: none; counter-reset: step; padding: 0; margin: 8px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.steps li { counter-increment: step; border: 3px solid var(--ink); background: var(--panel); box-shadow: 4px 4px 0 var(--shadow); padding: 12px 14px 14px; font-size: 14px; color: var(--muted); }
.steps li::before { content: counter(step); display: inline-grid; place-items: center; width: 26px; height: 26px; margin-right: 8px; background: var(--yellow); color: #111; border: 2px solid var(--ink); font-family: "Archivo Black", sans-serif; font-size: 13px; }
.steps b { color: var(--ink); font-family: "Archivo Black", sans-serif; font-weight: 400; }
.termlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin-top: 10px; }
.tgroup { border: 3px solid var(--ink); background: var(--panel); }
.tgroup h4 { margin: 0; padding: 8px 12px; background: var(--ink); color: var(--bg); font-family: "Archivo Black", sans-serif; font-weight: 400; font-size: 14px; }
.tgroup ul { list-style: none; margin: 0; padding: 6px 12px 10px; }
.tgroup li { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; font-size: 13px; border-bottom: 1px dashed var(--muted); }
.tgroup li b { font-family: "JetBrains Mono", monospace; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }
.pager { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.pager button { display: grid; justify-items: center; min-width: 64px; padding: 6px 12px; font-family: "Archivo Black", sans-serif; font-size: 18px; box-shadow: 3px 3px 0 var(--shadow); }
.pager button small { font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--muted); }
.pager button.on { background: var(--yellow); color: #111; }
.pager button.on small { color: #111; }
/* buzzword radar */
.radar { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 12px 0; }
.blip { position: relative; border: 3px solid var(--ink); background: var(--panel); box-shadow: 4px 4px 0 var(--shadow); padding: 10px 12px; }
.blip b { display: block; font-size: 16px; }
.blip span { font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--muted); }
.blip.learned { background: var(--cyan); color: #111; }
.blip.learned span { color: #111; }
.blip.learned::after { content: "LEARNED"; position: absolute; top: -10px; right: 8px; background: var(--ink); color: var(--bg); font: 11px "Archivo Black", sans-serif; padding: 1px 6px; }
.tag-new { position: absolute; top: -10px; left: 8px; background: var(--pink); color: #111; border: 2px solid var(--ink); font: normal 11px "Archivo Black", sans-serif; padding: 0 6px; }

/* SlopBot */
.bot-launch { position: fixed; right: 18px; bottom: 18px; z-index: 40; background: var(--purple); color: #fff; font-family: "Archivo Black", sans-serif; font-size: 16px; padding: 12px 18px; border-radius: 999px; box-shadow: 5px 5px 0 var(--shadow); }
.bot { position: fixed; right: 18px; bottom: 80px; z-index: 41; width: min(360px, calc(100vw - 32px)); background: var(--panel); border: 3px solid var(--line); border-radius: 18px; box-shadow: 7px 7px 0 var(--shadow); display: flex; flex-direction: column; overflow: hidden; }
.bot[hidden] { display: none; }
.bot header { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--purple); color: #fff; }
.bot header div { flex: 1; display: grid; }
.bot header small { font-size: 11px; opacity: .85; }
.bot header button { background: transparent; color: #fff; border: 0; box-shadow: none; font-size: 18px; padding: 2px 6px; }
.bot-dot { width: 10px; height: 10px; border-radius: 50%; background: #3ddc84; border: 2px solid #111; }
.bot-log { height: min(420px, 60vh); overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.msg { max-width: 88%; padding: 8px 12px; border: 2px solid var(--ink); border-radius: 14px; font-size: 14px; }
.msg p { margin: 0 0 6px; } .msg p:last-child { margin-bottom: 0; }
.msg ul, .msg ol { margin: 4px 0 6px; padding-left: 20px; }
.msg.them { align-self: flex-start; background: var(--bg); border-bottom-left-radius: 2px; }
.msg.me { align-self: flex-end; background: var(--yellow); color: #111; border-bottom-right-radius: 2px; }
.msg.sys { font-size: 12px; color: var(--muted); border-style: dashed; }
.think { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.think summary { cursor: pointer; font-style: italic; }
.think ol { margin: 4px 0 0; padding-left: 18px; }
.md-row { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--muted); padding: 2px 0; }
.md-row:first-of-type { font-weight: 700; }
.cite { color: var(--purple); font-weight: 700; }
.sources { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.sources span { font-size: 11px; border: 1.5px solid var(--ink); border-radius: 999px; padding: 1px 8px; background: var(--panel); }
.acts { display: flex; align-items: center; gap: 2px; margin-top: 6px; }
.acts button { background: transparent; border: 0; box-shadow: none; padding: 2px 6px; font-size: 13px; color: var(--muted); }
.acts small { margin-left: auto; font-family: "JetBrains Mono", monospace; font-size: 10px; color: var(--muted); }
.caret { display: inline-block; width: 7px; height: 14px; margin-left: 2px; background: var(--purple); vertical-align: -2px; animation: blink .8s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.msg.chips-follow { border: 0; padding: 0; background: none; }
.chips-follow { display: flex; flex-wrap: wrap; gap: 6px; align-self: flex-start; }
.chips-follow button { font-size: 12px; padding: 4px 10px; border-radius: 999px; box-shadow: 2px 2px 0 var(--shadow); }
.bot form { display: flex; gap: 8px; padding: 10px; border-top: 3px solid var(--line); }
.bot form input { flex: 1; min-width: 0; }
@media (prefers-reduced-motion: no-preference) { .bot:not([hidden]) { animation: pop .18s ease-out; } }
@keyframes pop { from { transform: translateY(12px) scale(.96); opacity: 0; } }

/* the little agent patrolling the header */
.patrol { position: relative; height: 128px; margin-top: 4px; border-bottom: 3px dashed var(--muted); }
.walker { position: absolute; bottom: -2px; left: 0; width: 72px; animation: patrol 26s linear infinite alternate; pointer-events: auto; cursor: pointer; }
.bot-body { animation: face 52s steps(1) infinite; transform-origin: center; }
.bot-body svg { display: block; animation: bob .5s ease-in-out infinite alternate; }
.leg, .arm { transform-box: fill-box; transform-origin: top center; }
.leg.l, .arm.r { animation: swing .5s ease-in-out infinite alternate; }
.leg.r, .arm.l { animation: swing .5s ease-in-out infinite alternate-reverse; }
.led { animation: led 1.2s steps(1) infinite; }
.eyes { transform-box: fill-box; transform-origin: center; animation: blinkeye 4s infinite; }
.walker.jump .bot-body svg { animation: hop .5s ease-out; }
.say { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 6px; white-space: nowrap; background: var(--panel); border: 2px solid var(--ink); border-radius: 12px; padding: 4px 10px; font-size: 12px; font-weight: 700; box-shadow: 3px 3px 0 var(--shadow); opacity: 0; transition: opacity .2s; }
.say.on { opacity: 1; }
.say::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -6px; border: 6px solid transparent; border-top-color: var(--ink); }
@keyframes patrol { from { left: 0; } to { left: calc(100% - 72px); } }
@keyframes face { 0% { transform: scaleX(1); } 50% { transform: scaleX(-1); } }
@keyframes bob { to { transform: translateY(-3px); } }
@keyframes swing { from { transform: rotate(-18deg); } to { transform: rotate(18deg); } }
@keyframes led { 50% { fill: var(--purple); } }
@keyframes blinkeye { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes hop { 40% { transform: translateY(-26px) rotate(-8deg); } }
@media (prefers-reduced-motion: reduce) {
  .walker { animation: none; left: auto; right: 0; }
  .bot-body, .bot-body svg, .leg, .arm, .led, .eyes { animation: none !important; }
}

/* links under the headline */
.hero-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.pill-link { display: inline-block; padding: 6px 14px; border: 3px solid var(--ink); border-radius: 999px; background: var(--panel); color: var(--ink); font-weight: 800; font-size: 14px; text-decoration: none; box-shadow: 3px 3px 0 var(--shadow); }
.pill-link:hover { background: var(--yellow); color: #111; }

/* bookmarklet */
.bm-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 6px 0 10px; }
.bm { display: inline-block; padding: 8px 14px; background: var(--pink); color: #111; border: 3px solid var(--ink); border-radius: 10px; font-family: "Archivo Black", sans-serif; text-decoration: none; box-shadow: 3px 3px 0 var(--shadow); cursor: grab; }
.bm-row .note { flex: 1; min-width: 200px; margin: 0; }

/* share row in the company popup */
.share { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 14px 0 4px; }
.share .note { margin: 0; }
.share a, .share button { padding: 5px 12px; font-size: 13px; font-weight: 800; border: 2px solid var(--ink); border-radius: 999px; background: var(--panel); color: var(--ink); text-decoration: none; box-shadow: 2px 2px 0 var(--shadow); }

/* board tabs: global vs FinSlop */
.league-tabs { display: flex; gap: 10px; margin: 14px 0 4px; flex-wrap: wrap; }
.league-tabs button { font-family: "Archivo Black", sans-serif; font-size: 17px; padding: 10px 18px; border: 3px solid var(--ink); border-radius: 12px; background: var(--panel); color: var(--ink); box-shadow: 4px 4px 0 var(--shadow); cursor: pointer; }
.league-tabs button.on { background: var(--ink); color: var(--bg); }
.league-tabs button[data-league="fi"].on { background: #1d5bd8; color: #fff; }

/* refused wall */
.refused { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.refused li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 12px; border: 3px solid var(--ink); background: var(--bg); transform: rotate(-.4deg); }
.refused li:nth-child(even) { transform: rotate(.5deg); }
.badge { font-family: "JetBrains Mono", monospace; font-size: 11px; font-weight: 700; padding: 2px 8px; border: 2px solid var(--ink); border-radius: 999px; white-space: nowrap; color: #111; }
.badge.f { background: var(--pink); } .badge.r { background: var(--yellow); } .badge.u { background: var(--cyan); }

/* weekly report page */
.report { padding-top: 28px; padding-bottom: 60px; }
.report a { color: var(--ink); }
.rep-h1 { font-family: "Archivo Black", sans-serif; font-size: clamp(40px, 8vw, 84px); line-height: .95; margin: 14px 0 8px; }
.rep-h1 span { color: var(--pink); -webkit-text-stroke: 2px var(--ink); }
.report .box { margin-top: 22px; }
.rep-list { margin: 8px 0 0; padding-left: 22px; }
.rep-list li { padding: 5px 0; }
.rep-list .up { color: #0a8a3a; } .rep-list .down { color: #c2185b; }
.rep-quote { margin-top: 24px; }
.rep-quote b { display: block; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
.rep-quote cite { display: block; margin-top: 8px; font-style: normal; font-weight: 700; }
.rep-chip { display: inline-block; margin: 3px 4px 3px 0; padding: 4px 10px; border: 2px solid var(--ink); border-radius: 999px; background: var(--yellow); color: #111; font-weight: 700; }
.rep-chip small { font-weight: 400; }
.rep-copy { white-space: pre-wrap; font-family: "JetBrains Mono", monospace; font-size: 13px; background: var(--bg); border: 2px dashed var(--ink); padding: 12px; margin: 8px 0 0; }
.md-code { margin: 6px 0; padding: 8px 10px; background: #111; color: #3ddc84; border-radius: 8px; font: 12px/1.45 "JetBrains Mono", monospace; white-space: pre-wrap; overflow-wrap: anywhere; }

/* score breakdown in the company popup */
.breakdown { margin: 12px 0; border: 3px solid var(--ink); border-radius: 12px; padding: 8px 14px; background: var(--bg); }
.breakdown summary { cursor: pointer; font-weight: 800; }
.math { margin: 10px 0; padding-left: 20px; font-size: 14px; }
.math li { padding: 3px 0; }
.math .note { display: block; font-size: 12px; }
.pages-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 6px; }
.pages-table th { text-align: left; font-size: 11px; text-transform: uppercase; color: var(--muted); border-bottom: 2px solid var(--ink); padding: 4px 6px; }
.pages-table td { padding: 5px 6px; border-bottom: 1px dashed var(--muted); vertical-align: top; overflow-wrap: anywhere; }
.pages-table td:nth-child(2), .pages-table td:nth-child(3) { white-space: nowrap; text-align: right; }
@media (max-width: 640px) { .pages-table th:nth-child(4), .pages-table td:nth-child(4) { display: none; } }

.li-meter { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.li-meter li { font-size: 12px; padding: 3px 10px; border: 2px solid var(--ink); border-radius: 999px; background: #0a66c2; color: #fff; font-weight: 700; }
.li-meter li.li-head { background: var(--ink); color: var(--bg); }

.ticker .daily { background: var(--pink); color: #111; padding: 0 14px; border-left: 3px solid #111; border-right: 3px solid #111; }
.ticker .daily i { font-style: normal; font-weight: 800; margin-right: 10px; background: #111; color: var(--yellow); padding: 1px 8px; border-radius: 6px; }
.ticker .daily b { color: #111 !important; }
.ticker .daily em { font-style: normal; font-weight: 800; margin-left: 8px; }

/* time machine */
.tm-legend { display: flex; gap: 8px; align-items: center; font-size: 13px; font-weight: 700; margin: 6px 0 10px; }
.tm-legend .sw { width: 14px; height: 14px; border: 2px solid var(--ink); display: inline-block; }
.sw.then, .tm-bars .then { background: var(--cyan); }
.sw.now, .tm-bars .now { background: var(--pink); }
.tm-list { list-style: none; margin: 0; padding: 0; }
.tm-list li { display: grid; grid-template-columns: minmax(0, 170px) 1fr 52px; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px dashed var(--muted); cursor: pointer; }
.tm-list li b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-list small { grid-column: 2 / 4; color: var(--muted); font-size: 12px; }
.tm-bars { display: grid; gap: 3px; }
.tm-bars span { display: block; min-width: 26px; height: 15px; border: 2px solid var(--ink); font: 700 10px/11px "JetBrains Mono", monospace; padding-left: 4px; color: #111; box-sizing: border-box; }
.tm-delta { font-family: "Archivo Black", sans-serif; text-align: right; }
.tm-delta.up { color: #c2185b; } .tm-delta.down { color: #0a8a3a; }
.then-box { margin: 12px 0; padding: 10px 14px; border: 3px dashed var(--ink); border-radius: 12px; background: var(--bg); }
.then-box p { margin: 4px 0; }
@media (max-width: 520px) { .tm-list li { grid-template-columns: minmax(0, 110px) 1fr 44px; } }

.dispute { margin: 10px 0; font-size: 14px; }
.dispute summary { cursor: pointer; color: var(--muted); font-weight: 700; }
.dispute form { display: grid; gap: 8px; margin-top: 8px; }
.dispute textarea { min-height: 70px; }

/* the legal page */
.legal { max-width: 860px; }
.legal .rep-h1 { font-size: clamp(28px, 5vw, 46px); }
.legal .tldr { border-color: #0a8a3a; }
.legal .tldr ul { padding-left: 20px; line-height: 1.6; }
.legal .toc ol { columns: 2; column-gap: 28px; font-size: 14px; }
@media (max-width: 640px) { .legal .toc ol { columns: 1; } }
.legal-page { position: relative; margin: 28px 0; padding: 26px 30px 40px; background: var(--panel); border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--shadow); font-family: Georgia, "Times New Roman", serif; font-size: 15px; line-height: 1.65; text-align: justify; hyphens: auto; }
.legal-page::after { content: attr(data-page); position: absolute; bottom: 10px; right: 16px; font: 11px "JetBrains Mono", monospace; color: var(--muted); }
.legal-page h2 { font-family: "Archivo Black", sans-serif; font-size: 20px; text-align: left; }
.legal-page dt { font-weight: 700; margin-top: 8px; }
.legal-page dd { margin-left: 22px; }
.legal-page code { font-size: 13px; }

/* Magic Slop Quadrant */
.mq-filter { display: flex; gap: 8px; margin: 8px 0 12px; }
.mq-filter button { font-weight: 800; padding: 5px 14px; border-radius: 999px; }
.mq-filter button.on { background: var(--ink); color: var(--bg); }
.mq-chart svg { width: 100%; height: auto; display: block; }
.mq-chart .q { opacity: .55; }
.q-walk { fill: #b8f2c9; } .q-talk { fill: #ffc4de; } .q-quiet { fill: #c9e7ff; } .q-analog { fill: #ece6d6; }
.mq-chart .q-label { font: 15px "Archivo Black", sans-serif; fill: var(--ink); opacity: .75; }
.mq-chart .grid { stroke: var(--muted); stroke-width: 1; opacity: .25; }
.mq-chart .split { stroke: var(--ink); stroke-width: 2; stroke-dasharray: 6 5; }
.mq-chart .tick { font: 11px "JetBrains Mono", monospace; fill: var(--muted); }
.mq-chart .axis { font: 700 13px Inter, sans-serif; fill: var(--ink); }
.mq-chart .dot { cursor: pointer; }
.mq-chart .dot circle:not(.hit) { fill: var(--ink); stroke: var(--panel); stroke-width: 2; }
.mq-chart .dot.fi circle:not(.hit) { stroke: #1d5bd8; stroke-width: 3; }
.mq-chart .dot .hit { fill: transparent; }
.mq-chart .dot:hover circle:not(.hit), .mq-chart .dot:focus circle:not(.hit) { fill: var(--pink); }
.mq-chart .dot-label { font: 700 12px Inter, sans-serif; fill: var(--ink); paint-order: stroke; stroke: var(--panel); stroke-width: 3px; }
.mq-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 10px; font-size: 13px; }
.mq-legend .sw { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--ink); vertical-align: -2px; margin-right: 6px; }
.mq-legend .sw.ring { border-radius: 50%; border: 3px solid #1d5bd8; background: var(--ink); }
.mq-legend .sw.q-walk { background: #b8f2c9; } .mq-legend .sw.q-talk { background: #ffc4de; } .mq-legend .sw.q-quiet { background: #c9e7ff; } .mq-legend .sw.q-analog { background: #ece6d6; }
.mq-legend small { color: var(--muted); }
.subst { margin: 10px 0; padding: 8px 12px; border-left: 6px solid #1d5bd8; background: var(--bg); font-size: 14px; }

/* Slopify ⇄ De-slop */
.tr-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: stretch; margin-top: 12px; }
.tr-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tr-col label { font-family: "Archivo Black", sans-serif; font-size: 16px; }
.tr-col textarea { min-height: 220px; flex: 1; }
.tr-meta { display: flex; gap: 10px; align-items: center; font-size: 12px; color: var(--muted); }
.tr-meta span { flex: 1; }
.tr-meta a { color: var(--ink); font-weight: 700; }
.tr-mid { display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.tr-mid button { white-space: nowrap; }
.tr-level { font-size: 12px; font-weight: 700; display: grid; gap: 4px; }
@media (max-width: 760px) { .tr-grid { grid-template-columns: 1fr; } .tr-mid { flex-direction: row; flex-wrap: wrap; justify-content: center; } }

/* private stats page */
.admin-stats .stats { margin-top: 18px; }
.vbars { width: 100%; height: auto; display: block; }
.vbars .bar { fill: var(--pink); stroke: var(--ink); stroke-width: 1.5; }
.vbars g:hover .bar { fill: var(--purple); }
.vbars .grid { stroke: var(--muted); opacity: .3; }
.vbars .tick { font: 11px "JetBrains Mono", monospace; fill: var(--muted); }
.admin-stats > .note:last-child { margin-top: 24px; }