:root {
  --surface: color-mix(in srgb, var(--fg) 4%, var(--bg));
  --border: color-mix(in srgb, var(--fg) 22%, var(--bg));
  --muted: color-mix(in srgb, var(--fg) 65%, var(--bg));
  --button-height: 112px;
  --dock-bottom: max(12px, env(safe-area-inset-bottom));
  --dock-height: calc(48px + var(--button-height) + var(--dock-bottom));
  --bit-0: #1677ad;
  --bit-1: #c43f64;
}
.dark-mode { --bit-0: #64b5e4; --bit-1: #f27799; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body { height: 100vh; height: 100dvh; display: grid; grid-template-rows: auto auto minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); background: var(--bg); color: var(--fg); font: 14px/1.4 var(--font-ui); padding: env(safe-area-inset-top) env(safe-area-inset-right) var(--dock-height) env(safe-area-inset-left); }
h1, h2, h3, p, ul { margin: 0; }
button, select, input { font: inherit; color: var(--fg); background: var(--bg); border: 1px solid var(--border); border-radius: 5px; }
select { width: auto; }
button, select { min-height: 40px; padding: 6px 10px; cursor: pointer; }
button { touch-action: manipulation; }
button:hover { background: var(--surface); }
button:disabled { opacity: .45; cursor: default; }
button:focus-visible, select:focus-visible, input:focus-visible, a:focus-visible { outline: 2px solid var(--bit-0); outline-offset: 2px; }
input[type="checkbox"] { appearance: auto; -webkit-appearance: checkbox; width: 18px; height: 18px; }
[hidden] { display: none !important; }
.hud-header { flex: none; padding: 8px 16px; border-bottom: 1px solid var(--border); }
.title-row, .toolbar, .hint-heading, .edit-controls, .dialog-heading { display: flex; align-items: center; gap: 8px; }
.title-row h1 { font-size: 15px; font-weight: 600; flex: 1; }
.site-link { font-size: 13px; color: var(--muted); margin-right: 8px; }
.title-row > button { border-color: transparent; }
.toolbar { margin-top: 6px; }
#inputMode { max-width: 55%; min-width: 0; }
.capture { display: flex; align-items: center; gap: 6px; font-size: 12px; }
#runCodeBtn { margin-left: auto; white-space: nowrap; }
.editor-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.editor-viewport { flex: 1; min-height: 0; display: flex; overflow: auto; overscroll-behavior: contain; padding: 14px 0; font: 14px/1.7 var(--font-ui); }
.line-numbers { width: 44px; padding-right: 12px; flex: none; text-align: right; color: var(--muted); user-select: none; }
.editor-content { flex: 1; min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; padding-right: 14px; outline: none; }
.editor-caret { display: inline-block; background: var(--fg); color: var(--bg); width: .6em; }
.editor-selection { background: color-mix(in srgb, var(--bit-0) 30%, var(--bg)); }
.status-bar { flex: none; display: flex; height: 26px; padding: 3px 16px; gap: 8px; color: var(--muted); font-size: 11px; }
#statusLine { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; flex: 1; }
.badge:not(.active) { display: none; }
.hint-panel { flex: none; border-bottom: 1px solid var(--border); padding: 8px 16px; }
.hint-heading { justify-content: space-between; height: 28px; }
.shift-register { display: flex; flex: 1; min-width: 0; align-items: center; gap: 8px; }
#bitSlots { display: flex; min-width: 0; overflow: hidden; font-variant-numeric: tabular-nums; gap: 2px; }
.bit-slot { flex: none; width: 14px; text-align: center; font-size: 14px; }
.bit-slot.empty, #bitCounter { color: var(--muted); }
#bitCounter { flex: none; font-size: 11px; white-space: nowrap; }
.tree-hints { padding: 0; list-style: none; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); height: 64px; gap: 4px; }
.path-hint { min-width: 0; border-top: 2px solid var(--bit-0); background: var(--surface); padding: 6px 8px; display: flex; flex-direction: column; justify-content: center; gap: 4px; overflow: hidden; }
.path-hint[data-first="1"] { border-color: var(--bit-1); }
.path-hint code { background: none; padding: 0; border: 0; font: 13px/1.25 var(--font-ui); overflow-wrap: anywhere; }
.path-hint code b { color: var(--bit-0); font-size: 17px; }
.path-hint[data-first="1"] code b { color: var(--bit-1); }
.path-hint .ending { font-size: 12px; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.path-hint.commits .ending { font-weight: 700; }
.input-dock { position: fixed; z-index: 10; bottom: 0; left: 0; right: 0; height: var(--dock-height); padding: 0 max(16px, env(safe-area-inset-right)) var(--dock-bottom) max(16px, env(safe-area-inset-left)); background: var(--bg); border-top: 1px solid var(--border); }
.edit-controls { height: 48px; }
.edit-controls button { font-size: 12px; white-space: nowrap; }
#lastAction { margin-left: auto; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bit-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bit-buttons button { height: var(--button-height); border: 2px solid var(--bit-0); color: var(--bit-0); background: color-mix(in srgb, var(--bit-0) 9%, var(--bg)); display: flex; align-items: center; justify-content: center; gap: 16px; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.bit-buttons button[data-bit="1"] { border-color: var(--bit-1); color: var(--bit-1); background: color-mix(in srgb, var(--bit-1) 9%, var(--bg)); }
.bit-buttons .digit { font-size: 56px; line-height: 1; }
.bit-buttons button:active { background: color-mix(in srgb, currentColor 22%, var(--bg)); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
dialog { margin: auto; padding: 20px; width: min(640px, calc(100% - 24px)); max-height: calc(100dvh - 32px); overflow: auto; overscroll-behavior: contain; background: var(--bg); color: var(--fg); border: 1px solid var(--border); border-radius: 8px; }
dialog::backdrop { background: #0008; }
.dialog-heading { justify-content: space-between; margin-bottom: 18px; }
dialog h2 { font-size: 18px; }
dialog h3 { font-size: 14px; }
dialog p, dialog details { margin-top: 16px; }
dialog p { line-height: 1.6; }
dialog summary { cursor: pointer; padding: 8px 0; }
dialog code { overflow-wrap: anywhere; }
.key-settings { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.key-settings h3, .key-settings p { width: 100%; }
.key-settings input { width: 50px; padding: 10px; text-align: center; font-size: 16px; }
.key-list { display: grid; grid-template-columns: auto 1fr; gap: 8px; }
.candidate-preview-wrap { display: grid; gap: 8px; }
.cand-chip { overflow-wrap: anywhere; }
@media (max-width: 600px) {
  :root { --button-height: clamp(112px, 20svh, 180px); --dock-bottom: max(10px, env(safe-area-inset-bottom)); }
  .hud-header { padding: 4px 10px; }
  .title-row { gap: 2px; }
  .title-row h1 { font-size: 12px; }
  .site-link { font-size: 12px; margin-right: 6px; }
  .title-row > button { font-size: 11px; padding: 5px; }
  .toolbar { margin-top: 0; }
  #inputMode { font-size: 12px; }
  #runCodeBtn { font-size: 12px; }
  .hint-panel { padding: 4px 10px; }
  .tree-hints { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: 1fr 1fr; height: 120px; }
  .path-hint { padding: 3px 5px; gap: 2px; }
  .path-hint .ending { font-size: 11px; line-height: 1.15; }
  .path-hint code b { font-size: 15px; }
  #bitCounter { font-size: 10px; }
  .bit-slot { width: 11px; font-size: 12px; }
  .input-dock { padding-left: max(10px, env(safe-area-inset-left)); padding-right: max(10px, env(safe-area-inset-right)); }
  .bit-buttons { gap: 10px; }
  #lastAction { display: none; }
}
@media (max-height: 600px) and (max-width: 600px) {
  .tree-hints { height: 108px; }
  .hint-heading { height: 24px; }
  .editor-viewport { padding-top: 8px; padding-bottom: 8px; }
}
@media (max-height: 500px) and (min-width: 601px) {
  :root { --button-height: 72px; }
  .hud-header { display: flex; align-items: center; gap: 12px; padding-top: 2px; padding-bottom: 2px; }
  .title-row { flex: 1; }
  .title-row h1 { display: none; }
  .toolbar { margin: 0; }
  #inputMode { max-width: none; }
  .hint-heading { height: 24px; }
}

#vocabularyBtn, #challengesBtn { min-height: 24px; padding: 2px 6px; font-size: 12px; flex: none; }
.vocabulary-search { display: block; margin-top: 16px; font-size: 12px; }
.vocabulary-search input { display: block; width: 100%; padding: 10px; font-size: 16px; }
.vocabulary-list { max-height: 42dvh; overflow: auto; overscroll-behavior: contain; margin-top: 8px; }
.vocabulary-list table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 12px; }
.vocabulary-list th, .vocabulary-list td { text-align: left; vertical-align: top; padding: 8px 4px; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
.vocabulary-list th { position: sticky; top: 0; background: var(--bg); }
.vocabulary-list th:last-child { width: 43%; }
.vocabulary-list small { display: block; color: var(--muted); font-size: 11px; margin-top: 4px; }
#vocabularyCount { font-size: 12px; color: var(--muted); }

.challenge-list { list-style: none; padding: 0; margin-top: 16px; max-height: 46dvh; overflow: auto; }
.challenge-list li { border-bottom: 1px solid var(--border); }
.challenge-list a { display: block; padding: 12px 4px; color: var(--fg); }

.code-area { flex: 1; min-height: 0; min-width: 0; display: flex; flex-direction: column; }
.editor-pane.workspace-open { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 40%); }
.workspace-pane { min-height: 0; overflow: auto; border-left: 1px solid var(--border); padding: 12px; font-size: 12px; }
.workspace-heading, .workspace-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; }
.workspace-heading strong { flex: 1; }
.workspace-pane button, .workspace-pane select { font-size: 12px; }
.workspace-pane pre, #effortOutput { white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.5 var(--font-ui); margin: 10px 0; }
.workspace-pane p { margin: 10px 0; }
.workspace-pane h3 { margin-top: 14px; font-size: 12px; }
.workspace-pane label { display: block; margin: 10px 0; }
.workspace-pane textarea, .workspace-pane input { display: block; width: 100%; margin-top: 4px; padding: 8px; font: 14px/1.4 var(--font-ui); color: var(--fg); background: var(--bg); border: 1px solid var(--border); }
.workspace-pane textarea { min-height: 80px; resize: vertical; }
.challenge-list li { display: flex; align-items: center; gap: 8px; }
.challenge-list a { flex: 1; }
@media (max-width: 700px) {
  .editor-pane.workspace-open { display: flex; }
  .workspace-pane { position: fixed; z-index: 12; inset: 0; background: var(--bg); border: 0; padding: max(12px, env(safe-area-inset-top)) 12px max(20px, env(safe-area-inset-bottom)); }
  #workspaceBtn { font-size: 10px; padding: 4px; }
}
@media (max-width: 400px) {
  .title-row h1 { display: none; }
  .title-row .site-link { margin-right: auto; }
}

.vocabulary-list th:first-child { width: 3.5em; }
.vocabulary-list th:last-child { width: 8.5em; }