/* 手感 — a sequence, drawn.
   Hits are lit, misses are dark, and the only other colour on the page marks
   the one comparison that matters: what you saw against what a memoryless
   sequence would have given you. */
:root {
  --bg: #101014;
  --panel: #181820;
  --sunk: #131319;
  --line: #282833;
  --ink: #e9e9f0;
  --dim: #9c9cae;
  --faint: #6a6a7c;
  --hit: #e0b64f;
  --miss: #34343f;
  --obs: #7bb5e8;
  --null: #9a8ad4;
  --hot: #e0705e;
  --cold: #5aa8c4;
  --ok: #6fbf9a;
  --radius: 14px;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
b { font-weight: 600; }
code { font-family: var(--mono); font-size: 12.5px; background: var(--sunk);
  border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; color: var(--dim); }

.topbar { display: flex; align-items: center; gap: 10px;
  padding: max(10px, env(safe-area-inset-top)) 12px 10px;
  border-bottom: 1px solid var(--line); background: #15151d; }
.mark { width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid;
  place-items: center; font-weight: 700; color: #15151d;
  background: linear-gradient(140deg, #f0d88a, var(--hit)); }
.titles { min-width: 0; }
.titles h1 { margin: 0; font-size: 17px; letter-spacing: .06em; }
.titles p { margin: 0; font-size: 11px; color: var(--faint); }

main { padding: 14px 12px 24px; max-width: 820px; margin: 0 auto; }
textarea, button, input { font: inherit; font-family: inherit; }

.panel { background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px; margin-bottom: 14px; }
.panel h2 { margin: 0 0 6px; font-size: 15px; }
.panel.quiet { background: none; }
.panel.intro { background: none; border-style: dashed; }
.panel.bad { border-color: #46302c; background: #1e1614; }
.sub { color: var(--dim); font-size: 13.5px; margin: 0 0 8px; }
.sub:last-child { margin-bottom: 0; }
.tiny { color: var(--faint); font-size: 12px; line-height: 1.6; margin: 10px 0 0; }

/* ---- input ---- */
.egs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
@media (max-width: 400px) { .egs { grid-template-columns: 1fr; } }
.eg { text-align: left; padding: 10px 12px; background: var(--sunk); color: var(--ink);
  border: 1px solid var(--line); border-radius: 11px; cursor: pointer; }
.eg b { display: block; font-size: 14px; }
.eg span { display: block; font-size: 11.5px; color: var(--faint); margin-top: 2px; }
.eg.on { border-color: var(--hit); }

.lbl { display: block; font-size: 12.5px; color: var(--faint); margin-bottom: 6px;
  line-height: 1.9; }
textarea { width: 100%; padding: 12px; background: var(--sunk); color: var(--ink);
  border: 1px solid var(--line); border-radius: 11px; font-family: var(--mono);
  font-size: 14px; line-height: 1.8; resize: vertical; word-break: break-all; }
textarea:focus-visible { outline: 2px solid var(--hit); outline-offset: 1px; }

.chars { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; font-size: 12.5px;
  color: var(--dim); font-family: var(--mono); }

/* ---- the sequence ---- */
/* Wraps, because a hundred attempts will not fit on a phone in one line, and
   the run gaps survive the wrap since they are margins rather than separators. */
.strip { display: flex; flex-wrap: wrap; gap: 3px; align-content: flex-start; }
.strip > i { width: 14px; height: 22px; border-radius: 3px; background: var(--miss); }
.strip > i.hit { background: var(--hit); }
/* The gap that makes a run read as a run. */
.strip > i.gap { margin-left: 9px; }

/* ---- the verdict ---- */
.verdict { background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px; margin-bottom: 14px; }
.verdict > b { display: block; font-size: 17px; }
.verdict.hot { border-color: #46302c; background: #1e1614; }
.verdict.hot > b { color: var(--hot); }
.verdict.cold { border-color: #24404a; background: #131b1f; }
.verdict.cold > b { color: var(--cold); }
.verdict.ok { border-color: #2a4437; background: #141e19; }
.verdict.ok > b { color: var(--ok); }
.verdict .say { margin: 12px 0 0; font-size: 13.5px; color: var(--dim); }
.verdict .chance { margin: 10px 0 0; font-size: 12.5px; color: var(--faint); }
.verdict .chance b { color: var(--ink); font-family: var(--mono); }

.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.st { background: var(--sunk); border: 1px solid var(--line); border-radius: 11px;
  padding: 10px 6px; text-align: center; }
.st .k { display: block; font-size: 10.5px; color: var(--faint); }
.st .v { display: block; font-family: var(--mono); font-size: 24px; line-height: 1.15;
  font-variant-numeric: tabular-nums; }
.st .u { display: block; font-size: 10.5px; color: var(--faint); }

/* ---- the three bars ---- */
.bars { display: grid; gap: 8px; margin-top: 12px; }
.brow { display: grid; grid-template-columns: 7.4em 1fr 3.6em; gap: 8px;
  align-items: center; }
.brow .k { font-size: 12px; color: var(--dim); }
.brow .t { height: 18px; background: var(--sunk); border-radius: 5px; overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--line); }
.brow .t > i { display: block; height: 100%; border-radius: 4px; }
.brow .t > i.obs { background: var(--obs); }
.brow .t > i.null { background: var(--null); }
.brow .t > i.rate { background: var(--miss); }
.brow .v { text-align: right; font-family: var(--mono); font-size: 12.5px;
  font-variant-numeric: tabular-nums; }
.brow .v.obs { color: var(--obs); }
.brow .v.null { color: var(--null); }
.brow .v.rate { color: var(--faint); }
.brow .n { grid-column: 2 / -1; font-size: 11px; color: var(--faint);
  font-family: var(--mono); margin-top: -4px; }

.ruler { display: flex; justify-content: space-between; margin: 4px 0 0 calc(7.4em + 8px);
  padding-right: calc(3.6em + 8px); font-size: 10.5px; color: var(--faint);
  font-family: var(--mono); }

.call { margin-top: 12px; padding: 12px; border-radius: 11px; background: var(--sunk);
  border: 1px solid var(--line); font-size: 13px; color: var(--dim); }
/* An explicit class, not `.call > b`. The paragraph inside this box also
   contains <b> for inline emphasis, and a child selector catches those too —
   which turned a count of four opportunities into a 22px headline number
   sitting above its own sentence. */
.call > .head { display: block; font-family: var(--mono); font-size: 22px;
  color: var(--ink); margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.call.up { border-color: #2a4437; }
.call.up > .head { color: var(--ok); }
.call.down { border-color: #46302c; }
.call.down > .head { color: var(--hot); }
.call.thin { border-color: #453a1f; }
.call.thin > .head { color: var(--hit); font-family: inherit; font-size: 14px; }

/* ---- the streak table ---- */
.knob { padding: 8px 0 0; }
.knob label { display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; font-size: 13px; color: var(--dim); }
.knob label b { font-family: var(--mono); color: var(--hit); font-size: 15px;
  font-variant-numeric: tabular-nums; }
input[type="range"] { width: 100%; -webkit-appearance: none; appearance: none;
  background: transparent; height: 32px; }
input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 999px;
  background: linear-gradient(90deg, var(--line), var(--hit)); }
input[type="range"]::-moz-range-track { height: 6px; border-radius: 999px;
  background: linear-gradient(90deg, var(--line), var(--hit)); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px;
  height: 26px; border-radius: 50%; background: var(--ink); border: none; margin-top: -10px; }
input[type="range"]::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%;
  background: var(--ink); border: none; }

.tbl { display: grid; gap: 5px; margin-top: 10px; }
.trow { display: grid; grid-template-columns: 4.6em 1fr 3.4em; gap: 8px; align-items: center; }
.trow .k { font-size: 12px; color: var(--dim); font-variant-numeric: tabular-nums; }
.trow .t { height: 14px; background: var(--sunk); border-radius: 4px; overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--line); }
.trow .t > i { display: block; height: 100%; background: var(--hit); opacity: .55;
  border-radius: 3px; }
.trow .v { text-align: right; font-family: var(--mono); font-size: 12px;
  color: var(--dim); font-variant-numeric: tabular-nums; }
/* Below 5% is where a streak finally becomes unusual, so that is where the
   colour changes — the threshold is in the picture rather than in a caption. */
.trow.rare .t > i { background: var(--hot); opacity: 1; }
.trow.rare .v { color: var(--hot); }
.trow.rare .k { color: var(--ink); }

.foot { text-align: center; padding: 6px 12px max(18px, env(safe-area-inset-bottom));
  color: var(--faint); font-size: 11px; }