:root {
      --panel: var(--paper, #ffffff);
      --sign-blue: var(--blue, #35507a);
      --sign-blue-dark: var(--blue-dark, #263c5e);
      --solver-ink: var(--ink, #1a1a1a);
      --platform: var(--paper, #ffffff);
      --board: var(--paper, #ffffff);
      --grid-line: #c8c8c8;
      --shaded: #333333;
      --line-def: var(--blue, #35507a);
      /* definite / solved segments */
      --line-unk: #a8760a;
      --line-maybe: var(--line-strong, #b8b8b8);
      /* possible segments */
      --tint-used: #e8edf4;
      /* used in every solution */
      --amber: #8a5a00;
      --ok-green: #3a6a4a;
      --c-cross: #8c3a3a;
      --c-branch: #96690f;
      --c-straight: #35507a;
      --c-turn: #3a6a4a;
      --c-empty: #707070;
      --band: 30px;
      --hair: 1px solid var(--line, #dcdcdc);
  }

  * {
      box-sizing: border-box;
  }

  html,
  body {
      margin: 0;
  }

  body {
      background: var(--platform);
      color: var(--solver-ink);
      font-family: var(--serif, Georgia, "Times New Roman", "Source Serif Pro", serif);
      font-size: 16px;
      line-height: 1.55;
      padding-bottom: 80px;
  }

  /* ---- header: a quiet titled rule ---- */
  header {
      max-width: 1560px;
      margin: 0 auto;
      padding: 26px 22px 10px;
      display: flex;
      align-items: baseline;
      gap: 14px;
      border-bottom: var(--hair);
  }

  header h1 {
      margin: 0;
      font-size: 26px;
      font-weight: 600;
      letter-spacing: 0.4px;
      font-variant: small-caps;
  }

  main {
      max-width: 1560px;
      margin: 0 auto;
      padding: 14px 22px;
  }

  /* ---- toolbar ---- */
  .toolbar {
      padding: 10px 0 14px;
      border-bottom: var(--hair);
      margin-bottom: 18px;
      display: flex;
      flex-wrap: wrap;
      gap: 12px 16px;
      align-items: center;
      font-size: 14px;
  }

  .toolbar label {
      color: #444;
  }

  .toolbar .sep {
      width: 1px;
      align-self: stretch;
      background: #ddd;
  }

  input[type=number] {
      width: 54px;
      padding: 3px 5px;
      font-size: 14px;
      border: 1px solid #bbb;
      padding: 3px 6px;
      font-family: inherit;
      background: #fff;
      color: var(--solver-ink);
  }

  button {
      font-family: inherit;
      font-size: 13.5px;
      padding: 5px 12px;
      cursor: pointer;
      border: 1px solid #999;
      background: #fff;
      color: var(--solver-ink);
      font-variant: small-caps;
      letter-spacing: 0.4px;
  }

  button:hover:not(:disabled) {
      background: #f2f2f2;
  }

  button.primary {
      border-color: var(--solver-ink);
      font-weight: 600;
  }

  button.primary:hover:not(:disabled) {
      background: #eee;
  }

  button.danger {
      color: #7a2626;
      border-color: #b09090;
  }

  button:disabled {
      opacity: 0.45;
      cursor: default;
  }

  button:focus-visible {
      outline: 2px solid var(--sign-blue);
      outline-offset: 1px;
  }

  /* ---- board layout ---- */
  .board-row {
      display: grid;
      grid-template-columns: minmax(360px, 860px) minmax(320px, 1fr);
      gap: 28px;
      align-items: start;
  }

  .board-col {
      min-width: 0;
  }

  .board-col .board-wrap {
      overflow-x: auto;
  }

  @media (max-width: 1000px) {
      .board-row {
          grid-template-columns: 1fr;
      }
  }

  .board-wrap {
      padding: 0;
  }

  .board-grid {
      display: grid;
      grid-template-columns: auto auto;
      grid-template-rows: auto auto;
      gap: 8px;
      width: max-content;
  }

  .corner-key {
      align-self: end;
      justify-self: end;
      display: grid;
      grid-template-columns: repeat(5, var(--band));
      grid-template-rows: repeat(5, var(--band));
  }

  .corner-key span {
      width: calc(var(--band) - 5px);
      height: calc(var(--band) - 5px);
      margin: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      font-weight: 700;
      color: #fff;
      font-family: "Menlo", "Consolas", monospace;
  }

  .corner-key span.blank {
      background: transparent;
  }

  .key-cross {
      background: var(--c-cross);
  }

  .key-branch {
      background: var(--c-branch);
  }

  .key-straight {
      background: var(--c-straight);
  }

  .key-turn {
      background: var(--c-turn);
  }

  .key-empty {
      background: var(--c-empty);
  }

  #colClues {
      display: grid;
      gap: 0;
  }

  #rowClues {
      display: grid;
      gap: 0;
      justify-self: end;
  }

  input.clue {
      width: calc(100% - 4px);
      height: calc(100% - 4px);
      margin: 2px;
      border: 1px solid #e0e0e0;
      padding: 0;
      text-align: center;
      font-size: 13.5px;
      font-weight: 700;
      font-family: "Menlo", "Consolas", monospace;
      background: #fbfbfb;
      color: var(--solver-ink);
      min-width: 0;
  }

  input.clue:hover {
      border-color: #999;
  }

  input.clue.s0 {
      background: #f7efef;
  }

  input.clue.s1 {
      background: #f7f2e8;
  }

  input.clue.s2 {
      background: #eef1f6;
  }

  input.clue.s3 {
      background: #edf2ee;
  }

  input.clue.s4 {
      background: #f1f1f1;
  }

  #boardSvg {
      border: 1.5px solid var(--solver-ink);
      background: var(--board);
      display: block;
  }

  #boardSvg rect.cell {
      cursor: pointer;
  }

  @media (prefers-reduced-motion: no-preference) {
      #linesLayer line {
          transition: opacity 0.15s ease;
      }
  }

  /* ---- status & legend ---- */
  .board-col .status {
      margin-top: 16px;
  }

  .board-col .legend {
      margin-top: 10px;
  }

  .status {
      background: #f7f7f7;
      color: var(--solver-ink);
      border: var(--hair);
      border-left: 3px solid #888;
      padding: 10px 14px;
      font-size: 13.5px;
      line-height: 1.6;
      font-family: "Menlo", "Consolas", monospace;
      min-height: 45px;
  }

  .status b {
      color: #000;
  }

  .status .bad {
      color: #8c2f2f;
      font-weight: 700;
  }

  .status .warn {
      color: var(--amber);
      font-weight: 700;
  }

  .status .good {
      color: var(--ok-green);
      font-weight: 700;
  }

  .status ol {
      margin: 6px 0 2px;
      padding-left: 22px;
  }

  .status li {
      margin: 2px 0;
  }

  .legend {
      font-size: 13px;
      color: #555;
      display: flex;
      gap: 18px;
      flex-wrap: wrap;
      align-items: center;
  }

  .legend .sw {
      display: inline-block;
      vertical-align: -3px;
      margin-right: 6px;
  }

  /* ---- help / strategies ---- */
  details.help {
      margin-top: 16px;
      background: #fff;
      border: var(--hair);
      padding: 10px 16px;
      font-size: 14px;
      line-height: 1.55;
  }

  details.help summary {
      cursor: pointer;
      font-weight: 600;
      font-variant: small-caps;
      letter-spacing: 0.4px;
  }

  details.help code {
      background: #f2f2f2;
      padding: 1px 5px;
      font-size: 0.92em;
  }

  .strategies-side {
      min-width: 0;
  }

  .strategies-side details.strategies {
      margin-top: 0;
      max-height: calc(100vh - 90px);
      overflow-y: auto;
      position: sticky;
      top: 10px;
  }

  .strategies ol {
      margin: 10px 0 2px;
      padding-left: 20px;
      columns: 2;
      column-gap: 28px;
  }

  @media (max-width: 1250px) {
      .strategies ol {
          columns: 1;
      }
  }

  .strategies li {
      margin: 0 0 9px;
      font-size: 13px;
      line-height: 1.5;
      break-inside: avoid;
      padding: 2px 4px;
  }

  .strategies li b {
      font-size: 13.5px;
  }

  .strategies li .cnt {
      color: var(--sign-blue);
      font-weight: 700;
      margin-left: 5px;
      font-family: "Menlo", monospace;
      font-size: 12px;
  }

  .strategies li .sdesc {
      color: #444;
  }

  .strategies li.active {
      background: #f4f0e2;
      outline: 1px solid #c9b97a;
  }

  .stratNote {
      font-size: 13px;
      color: #555;
      margin: 4px 0 0;
  }

  #cancelBtn {
      display: none;
      background: #fff;
      border-color: var(--amber);
      color: var(--amber);
      font-weight: 600;
  }
/* ---- tabs ---- */
.tabs { margin-left: auto; display: flex; gap: 6px; }
.tabs .tab { border: none; border-bottom: 2px solid transparent; background: none; font-size: 15px; padding: 4px 10px; }
.tabs .tab.active { border-bottom-color: var(--solver-ink); font-weight: 700; }
.tabs .tab:hover:not(.active) { background: #f2f2f2; }

/* ---- japanese sums ---- */
.sums-grid { border-collapse: collapse;   table-layout: fixed;
}
.sums-grid td { padding: 0; }
.sums-cell {
  width: 52px; height: 52px; min-width: 52px; max-width: 52px;
  border: 1px solid var(--grid-line);
  text-align: center; vertical-align: middle; background: var(--board);
  overflow: hidden; padding: 0; box-sizing: border-box;
}
.sums-cell.hl { background: #f4f0e2; outline: 2px solid #c9b97a; outline-offset: -2px; }
.sums-digit { font-size: 26px; font-weight: 700; font-family: "Menlo", "Consolas", monospace; }
.sums-blank { font-size: 20px; color: #999; }
.sums-cands {
  font-size: 10px; color: #777; letter-spacing: 0; line-height: 1.2;
  font-family: "Menlo", monospace; word-break: break-all;
  display: block; max-width: 50px; max-height: 50px; overflow: hidden;
  padding: 1px; margin: 0 auto; box-sizing: border-box;
}
.sums-clue-col input, .sums-clue-row input {
  border: 1px solid #e0e0e0; background: #fbfbfb; font-family: "Menlo", monospace;
  font-size: 12px; font-weight: 700; color: var(--solver-ink); text-align: center; padding: 3px 2px;
}
.sums-clue-col input { width: 50px; margin: 0 1px 4px; }
.sums-clue-row input { width: 84px; margin-right: 4px; text-align: right; }
.sums-corner { border: none; }
.sums-grid tr:first-child td, .sums-clue-row { border: none; background: none; }

/* per-slot clue boxes */
.sums-slots { display: flex; gap: 2px; justify-content: flex-end; margin-right: 4px; }
.sums-slots.v { flex-direction: column; align-items: center; margin: 0 1px 4px; }
.sums-slots input {
  width: 26px; height: 20px; border: 1px solid #e0e0e0; background: #fbfbfb;
  font-family: "Menlo", monospace; font-size: 11.5px; font-weight: 700;
  color: var(--solver-ink); text-align: center; padding: 1px;
}
.sums-slots input:focus { border-color: #999; outline: none; }

/* shaded blank cells + crypto letter table */
.sums-cell.shaded { background: var(--shaded); }
.crypto-table { border-collapse: collapse; margin-top: 12px; font-family: "Menlo", monospace; }
.crypto-table th { font-size: 11px; color: #888; font-weight: 400; padding: 2px 5px; }
.crypto-table td { border: 1px solid var(--grid-line); padding: 3px 7px; font-size: 13px; text-align: center; }
.crypto-letter { font-weight: 700; background: #f5f5f5; }
.crypto-digit.off { color: #ccc; background: #fafafa; }
.crypto-digit.solo { font-weight: 700; background: #edf2ee; }
.sums-cell.used { background: var(--tint-used); }

/* resolved crypto letters in clue slots */
.sums-slots input.resolved { color: #8c2f2f; font-weight: 700; border-color: #d8b0b0; }

/* pencilmark-style crypto boxes (LMG-flavoured) */
.crypto-boxes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.crypto-box { border: 1px solid var(--grid-line); width: 74px; text-align: center; }
.crypto-box-letter {
  font-family: "Menlo", monospace; font-weight: 700; font-size: 14px;
  border-bottom: 1px solid var(--grid-line); background: #f5f5f5; padding: 1px 0;
}
.crypto-box-solved { font-family: "Menlo", monospace; font-size: 26px; font-weight: 700; color: #8c2f2f; padding: 6px 0; }
.crypto-box-marks {
  display: grid; grid-template-columns: repeat(5, 1fr); padding: 4px 3px;
  column-gap: 3px; justify-items: center;
  font-family: "Menlo", monospace; font-size: 11px; color: #555; line-height: 1.6;
}
/* two-digit values (alien digits, bases) get wider cells so they never touch */
.crypto-box-marks.wide { grid-template-columns: repeat(4, 1fr); column-gap: 4px; font-size: 10.5px; }
.crypto-box-marks span.off { visibility: hidden; }
.crypto-box-many {
  font-family: "Menlo", monospace; font-size: 10.5px; color: #999;
  padding: 12px 0 11px; font-style: italic;
}
/* long clue tokens (alien numerals like 11.3) shrink to fit their box */
.sums-slots input.fit4 { font-size: 9.5px; letter-spacing: -0.4px; padding: 1px 0; }
.sums-slots input.fit6 { font-size: 7.5px; letter-spacing: -0.5px; padding: 2px 0; }
.sums-slots input.fit8 { font-size: 6px; letter-spacing: -0.5px; padding: 3px 0; }

/* variant sections in the strategies panel */
#sumsStrats { counter-reset: strat; list-style: none; padding-left: 30px; }
#sumsStrats > li { position: relative; }
#sumsStrats > li:not(.variant-bar) { counter-increment: strat; }
#sumsStrats > li:not(.variant-bar)::before {
  content: counter(strat) "."; position: absolute; left: -26px; color: #999;
  font-size: 13px;
}
html.dark #sumsStrats > li:not(.variant-bar)::before { color: #8a8a90; }
.strategies li.variant-bar {
  list-style: none; margin: 12px 0 4px -18px; padding-top: 8px;
  border-top: 1px solid var(--grid-line); font-variant: small-caps;
  letter-spacing: 1px; font-weight: 700; font-size: 13px;
}
.strategies li.variant-bar .voff { font-variant: normal; letter-spacing: 0; font-weight: 400; color: #999; font-size: 12px; }
.strategies li.vdim { opacity: 0.45; }
label.chk { display: inline-flex; align-items: center; gap: 5px; }
.variant-group { display: inline-flex; gap: 10px; flex-wrap: wrap; padding: 2px 8px; border-left: 1px solid var(--grid-line); }
.variant-group .chk { font-size: 13px; }

/* ---------------- dim (dark) mode ---------------- */
html.dark {
  --panel: #313136;
  --solver-ink: #cfccc4;
  --platform: #2b2b2f;
  --board: #313136;
  --grid-line: #55555b;
  --shaded: #17171a;
  --tint-used: #3a4150;
  --line-maybe: #66666c;
}
html.dark body { background: #26262a; color: #cfccc4; }
html.dark header, html.dark main { background: #26262a; }
html.dark h1, html.dark h2, html.dark h3 { color: #ddd9d0; }
html.dark input, html.dark button, html.dark select {
  background: #313136; color: #cfccc4; border-color: #55555b;
}
html.dark .tab { color: #a8a4a0; }
html.dark .tab.active { color: #ddd9d0; border-color: #ddd9d0; }
html.dark .sums-cands { color: #96939c; }
html.dark .sums-blank { color: #7a7a80; }
html.dark .strategies li.variant-bar .voff { color: #7a7a80; }
html.dark #sumsStatus, html.dark #status { background: #2d2d32; border-color: #55555b; }
html.dark .legend, html.dark .sdesc { color: #9c9894; }
html.dark a { color: #93aacd; }
/* the formerly-glaring light elements, dimmed to sit in the theme */
html.dark .sums-slots input { background: #37373c; border-color: #4c4c52; color: #cfccc4; }
html.dark .sums-slots input:focus { border-color: #8a8a90; }
html.dark .sums-slots input.resolved { color: #d89090; border-color: #7a4848; }
html.dark .sums-cell.hl { background: #4a4433; outline-color: #8a7c4a; }
html.dark .crypto-box-letter { background: #3a3a40; }
html.dark .crypto-box-many { color: #77777d; }
html.dark .crypto-letter { background: #3a3a40; }
html.dark .crypto-digit.off { color: #5c5c62; background: #2c2c30; }
html.dark .crypto-digit.solo { background: #37453a; }
html.dark .crypto-table th { color: #8a8a90; }
html.dark .status .bad { color: #e08a8a; }
html.dark .status .warn { color: #d0aa60; }

/* dim theme: U-Bahn tab */
html.dark input[type="number"], html.dark input[type="text"] { background: #313136; border-color: #55555b; }
html.dark button { background: #313136; border-color: #55555b; }
html.dark button:hover:not(:disabled) { background: #3a3a40; }
html.dark button.primary { border-color: #b8b4ac; }
html.dark button.primary:hover:not(:disabled) { background: #3a3a40; }
html.dark button.danger { color: #d89090; border-color: #7a4848; }
html.dark input.clue { background: #313136; color: #cfccc4; border-color: #4c4c52; }
html.dark input.clue.s0 { background: #3c3134; }
html.dark input.clue.s1 { background: #3b362d; }
html.dark input.clue.s2 { background: #2f353e; }
html.dark input.clue.s3 { background: #303a32; }
html.dark input.clue.s4 { background: #36363a; }
html.dark .status { background: #2d2d32; border-left-color: #6a6a70; color: #cfccc4; }
html.dark details.help { background: #2b2b2f; border-color: #45454b; }
html.dark details.help code { background: #37373c; }
html.dark .strategies li .sdesc { color: #9c9894; }
html.dark .strategies li.active { background: #4a4433; outline-color: #8a7c4a; }
html.dark #cancelBtn { background: #313136; }
html.dark .tabs .tab:hover:not(.active) { background: #2f2f34; }
html.dark .legend, html.dark .legend * { color: #a8a4a0; }
html.dark label { color: #b8b4ac; }
html.dark .toolbar label { color: #b8b4ac; }
html.dark .toolbar .sep { border-color: #45454b; }
html.dark svg text { fill: #cfccc4; }

/* ---------------- bespoke checkboxes ---------------- */
label.chk input[type="checkbox"], .variant-group input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 15px; height: 15px; margin: 0 2px 0 0;
  border: 1px solid var(--grid-line); border-radius: 2px;
  background: var(--board); cursor: pointer; position: relative;
  vertical-align: -2px; transition: border-color 0.12s;
}
label.chk input[type="checkbox"]:hover, .variant-group input[type="checkbox"]:hover {
  border-color: var(--sign-blue);
}
label.chk input[type="checkbox"]:checked, .variant-group input[type="checkbox"]:checked {
  background: var(--sign-blue); border-color: var(--sign-blue);
}
label.chk input[type="checkbox"]:checked::after, .variant-group input[type="checkbox"]:checked::after {
  content: ""; position: absolute; left: 4px; top: 1px;
  width: 4px; height: 8px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(42deg);
}
html.dark label.chk input[type="checkbox"]:checked,
html.dark .variant-group input[type="checkbox"]:checked { background: #6a86b8; border-color: #6a86b8; }
label.chk { cursor: pointer; user-select: none; }

/* sums legend: match the U-Bahn help presentation */
#app-sums .legend {
  margin-top: 16px; background: #fff; border: var(--hair); padding: 10px 16px;
  line-height: 1.55; font-size: 14.5px;
}
#app-sums .legend code { background: #f2f2f2; padding: 1px 5px; font-size: 0.92em; }
html.dark #app-sums .legend { background: #2b2b2f; border-color: #45454b; color: #cfccc4; }
html.dark #app-sums .legend code { background: #37373c; }
#a38Canvas{position:relative}#a38Svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:2}.a38-grid{display:grid;width:max-content;border:2px solid var(--grid-line);position:absolute;inset:0}.a38-cell{box-sizing:border-box;width:52px;height:52px;border:1px solid var(--grid-line);display:flex;align-items:center;justify-content:center;background:var(--panel);font-size:21px;font-weight:700;cursor:pointer;position:relative}.a38-cell:hover{background:var(--tint-used)}.a38-cell.station{background:#aeb4bd;color:#222}.a38-cell.start:before{content:'';position:absolute;width:23px;height:23px;background:#111;border-radius:50%;z-index:3}.a38-cell.clue{background:#f5efe1}.a38-clue-entry{display:flex;align-items:center;justify-content:center;align-content:center;flex-wrap:wrap;width:42px;min-height:36px;padding:2px;box-sizing:border-box;text-align:center;line-height:1.05;word-spacing:3px;font:700 15px/1.1 Georgia,serif;color:var(--text);outline:none;cursor:text;position:relative;z-index:4;white-space:pre-wrap}.a38-clue-entry:empty:before{content:'·';color:#aaa}.a38-clue-entry:focus{box-shadow:inset 0 -2px var(--sign-blue)}.a38-cell.forced{background:color-mix(in srgb,#0f4da8 13%,var(--panel))}.a38-route-edge,.a38-forced-edge,.a38-line-edge{stroke:#0f4da8;stroke-width:7;stroke-linecap:round;fill:none}.a38-forced-edge{stroke:#2474d0;stroke-width:6}.a38-line-edge{stroke:#0f4da8;stroke-width:6}.a38-off-edge{stroke:#9aa1aa;stroke-width:2.2;stroke-linecap:round}#a38Arrow path{fill:#0f4da8}.a38-tools{display:inline-flex;border:1px solid var(--border);border-radius:7px;overflow:hidden}.a38-tools button{border:0;border-radius:0;border-right:1px solid var(--border)}.a38-tools button:last-child{border-right:0}.a38-tools button.active{background:var(--sign-blue);color:#fff}.a38-tools i,.a38-pass-demo{display:inline-block;width:14px;height:14px;background:#aeb4bd;border:1px solid #7e858e;vertical-align:-2px}.a38-start-demo{display:inline-block;width:13px;height:13px;background:#111;border-radius:50%;font-size:0}.a38-clue-demo{display:inline-flex;width:22px;height:22px;background:#f5efe1;border:1px solid #b9aa8a;align-items:center;justify-content:center;color:#222}.a38-arrow-demo{font-size:25px;color:#0f4da8}html.dark .a38-cell.clue{background:#4a4335}
.a38-permit-mark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;min-width:23px;height:23px;padding:0 4px;box-sizing:border-box;border:2px solid #111;border-radius:12px;background:var(--panel);display:flex;align-items:center;justify-content:center;color:#111;font:700 11px/1 Menlo,monospace;white-space:nowrap}.a38-no-permit-mark{position:absolute;right:4px;top:2px;z-index:5;color:#89919a;font:700 14px/1 sans-serif}
.a38-ordinal-cands{position:absolute;left:3px;bottom:2px;z-index:4;color:#9aa1aa;font:600 8.5px/1.1 Menlo,monospace;letter-spacing:.4px;max-width:46px;overflow:hidden;white-space:nowrap}
html.dark .a38-ordinal-cands{color:#77777d}.a38-permit-demo{display:inline-block;width:18px;height:18px;box-sizing:border-box;border:2px solid #111;border-radius:50%;background:var(--panel);vertical-align:-4px}.a38-chevron{stroke:#111;stroke-width:2.1;fill:none;stroke-linecap:round;stroke-linejoin:round}.a38-chevron-demo{display:inline-block;color:#111;font:700 24px/1 sans-serif;vertical-align:-3px}.a38-tools{align-items:stretch;vertical-align:middle}.a38-tools button{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:34px;white-space:nowrap}.a38-tools i{flex:0 0 auto;vertical-align:0}.a38-route-edge,.a38-forced-edge,.a38-line-edge{stroke:#0f4da8}html.dark .a38-permit-mark,html.dark .a38-permit-demo{border-color:#eee}html.dark .a38-permit-mark{color:#eee}
.a38-cell.station.forced{background:color-mix(in srgb,#0f4da8 20%,#aeb4bd)}
.a38-clue-layout{position:absolute;inset:0;pointer-events:none;font:700 15px/1 Georgia,serif;color:var(--text);z-index:4}
.a38-clue-layout span{position:absolute;transform:translate(-50%,-50%)}
.a38-clue-resolved{color:#b3261e}
html.dark .a38-clue-resolved{color:#ff8a80}
.a38-cell.clue .a38-clue-entry.fancy{color:transparent;caret-color:var(--text)}
.a38-cell.clue .a38-clue-entry.fancy:focus{color:var(--text)}
.a38-cell.clue:focus-within .a38-clue-layout{display:none}
.a38-clue-entry.fancy:empty:before{content:''}
.a38-permit-disc{fill:var(--panel);stroke:#111;stroke-width:2.4}
.a38-permit-num{fill:#111;font:700 12px Menlo,monospace;text-anchor:middle}
html.dark .a38-permit-disc{stroke:#eee}html.dark .a38-permit-num{fill:#eee}
/* 3. legend entries align their demos and text on one line */
#app-a38 .legend span{display:inline-flex;align-items:center;gap:6px;line-height:1}
#app-a38 .legend .a38-pass-demo,#app-a38 .legend .a38-permit-demo,#app-a38 .legend .a38-chevron-demo,#app-a38 .legend .a38-arrow-demo,#app-a38 .legend .a38-start-demo{vertical-align:0}
#app-a38 .legend .a38-arrow-demo{font-size:20px;line-height:14px}
#app-a38 .legend .a38-chevron-demo{font-size:19px;line-height:14px}

/* ---- Cave ---- */
.cave-grid{display:grid;width:max-content;border:2px solid var(--grid-line);background:var(--grid-line)}
.cave-cell{width:52px;height:52px;border:1px solid var(--grid-line);background:var(--board);position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box}
.cave-cell.black{background:var(--shaded)}
.cave-cell.white,.cave-cell.solved-white{background:#dce9dc}
.cave-cell.clue{background:#f7f3e9}
.cave-cell.clue.white,.cave-cell.clue.solved-white{background:#dce9dc}
.cave-cell.clue.black{background:#b9bec4}
.cave-clue-entry{width:100%;min-height:38px;display:flex;align-items:center;justify-content:center;position:relative;z-index:2;outline:none;color:var(--solver-ink);caret-color:var(--solver-ink);font:700 21px/1 Georgia,serif;text-align:center;cursor:text}
.cave-clue-entry:empty::before{content:''}
.cave-clue-entry:focus{box-shadow:inset 0 -2px var(--sign-blue)}
.cave-cell.clue.black .cave-clue-entry{color:var(--solver-ink)}
.cave-demo{display:inline-flex;width:18px;height:18px;align-items:center;justify-content:center;box-sizing:border-box;vertical-align:-4px;border:1px solid var(--grid-line);font:700 10px/1 Menlo,monospace}
.cave-demo-black{background:var(--shaded)}
.cave-demo-white{background:#dce9dc}
.cave-demo-unknown{color:#999;background:var(--board)}
#app-cave .legend span{display:inline-flex;align-items:center;gap:6px}
html.dark .cave-cell.white,html.dark .cave-cell.solved-white{background:#34483a}
html.dark .cave-cell.clue{background:#474237}
html.dark .cave-cell.clue.white,html.dark .cave-cell.clue.solved-white{background:#34483a}
html.dark .cave-cell.clue.black{background:#555b62}
.cave-small-variants{padding:2px 10px}
.cave-twilight-toggle{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 9px;border:1px solid var(--grid-line);background:color-mix(in srgb,var(--sign-blue) 7%,var(--board));font-variant:small-caps;font-weight:700;letter-spacing:.7px;cursor:pointer;user-select:none}
.cave-twilight-toggle input{appearance:none;-webkit-appearance:none;width:22px;height:22px;margin:0;border:1px solid var(--sign-blue);background:var(--board);position:relative;cursor:pointer}
.cave-twilight-toggle input:checked{background:var(--sign-blue)}
.cave-twilight-toggle input:checked::after{content:'';position:absolute;left:6px;top:2px;width:6px;height:12px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(42deg)}
.cave-twilight-toggle:has(input:checked){border-color:var(--sign-blue);background:color-mix(in srgb,var(--sign-blue) 14%,var(--board))}
html.dark .cave-twilight-toggle{background:color-mix(in srgb,#6a86b8 10%,var(--board))}
html.dark .cave-twilight-toggle input:checked{background:#6a86b8;border-color:#6a86b8}
#caveStrats{counter-reset:strat;list-style:none;padding-left:30px}
#caveStrats>li{position:relative}
#caveStrats>li:not(.variant-bar){counter-increment:strat}
#caveStrats>li:not(.variant-bar)::before{content:counter(strat) '.';position:absolute;left:-26px;color:#999;font-size:13px}
html.dark #caveStrats>li:not(.variant-bar)::before{color:#8a8a90}