:root {
  /* Calm palette (Kiran 2026-10-11: "too bright for the eyes"). Muted warm paper in the kiranvk.me family, no pure white;
     a dark theme follows the site's theme preference (kvkme.prefs) or the device setting. */
  --ink: #2b2620; --muted: #6f655a; --rule: #d3c8b4; --paper: #e9e2d3; --paper2: #e1d8c6; --card: #f1ebdf; --field: #f6f1e7;
  --lex: #2f6b66; --lex-bg: #dde7e1; --yacc: #6a4c86; --yacc-bg: #e6dfe6; --ok: #3d6b45; --ok-bg: #dfe6d6;
  --err: #a2402c; --err-bg: #f0dcd2; --warn: #8a6418; --warn-bg: #efe3c6; --ai: #8f5420; --ai-bg: #efe2cf;
  --accent: #a8532a; --accent-bg: #ead9c6; --head: #ddd4c2; --head-ink: #2b2620; --head-mut: #8b7f6f; --sel: #3a332b; --sel-ink: #efe7d8; --code-bg: #2f2a24; --code-ink: #e8dfcf;
  --q-bg: #e3e0e8; --q-line: #7a6f9a; --q-ink: #554a7a; --focus: #a8532a; --stroke: #2b2620;
  --mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace; --sans: 'IBM Plex Sans', system-ui, sans-serif;
  --serif: 'Instrument Serif', Georgia, serif;
  color-scheme: light;
}
html[data-theme="dark"] {
  --ink: #ddd3c2; --muted: #a2968a; --rule: #3e362d; --paper: #1b1714; --paper2: #241f1a; --card: #211c17; --field: #19150f;
  --lex: #7fb5ad; --lex-bg: #1f2b28; --yacc: #b39ad0; --yacc-bg: #29222f; --ok: #8fbf8a; --ok-bg: #1f2a1e;
  --err: #e0917a; --err-bg: #34211b; --warn: #d9b46a; --warn-bg: #30281a; --ai: #e0a36c; --ai-bg: #2e231a;
  --accent: #e0905e; --accent-bg: #33241a; --head: #14110e; --head-ink: #e6dccb; --head-mut: #9a8d7b; --sel: #e6dccb; --sel-ink: #1b1714; --code-bg: #120f0c; --code-ink: #ddd3c2;
  --q-bg: #24222c; --q-line: #8d82b0; --q-ink: #c3b8e6; --focus: #e0905e; --stroke: #e6dccb;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 15px/1.5 var(--sans); }
code, .mono { font-family: var(--mono); }
code { background: var(--paper2); padding: 0 4px; border-radius: 4px; font-size: 0.92em; }
.hidden { display: none !important; }
.note { color: var(--muted); font-size: 13.5px; }
.row { display: flex; align-items: center; }
.row.between { justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.row.gap { gap: 8px; }
.wrapit { flex-wrap: wrap; margin-top: 10px; }
h2 { font-size: 16px; margin: 0 0 8px; }
.lbl { display: block; font-weight: 600; font-size: 13px; margin: 12px 0 4px; }

.top { border-bottom: 1px solid var(--rule); position: sticky; top: 0; z-index: 20; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 18px; background: var(--head); color: var(--head-ink); }
.brand { display: flex; align-items: center; gap: 10px; }
.brand small { display: block; color: var(--head-mut); font-size: 12px; }
.logo { font-family: var(--mono); font-weight: 600; background: linear-gradient(90deg, var(--lex), var(--yacc)); border-radius: 8px; padding: 4px 8px; }
.top-act { display: flex; gap: 6px; }
.top .btn.ghost { color: var(--head-ink); border-color: var(--head-mut); background: transparent; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #6b7280; margin-right: 4px; }
.dot.on { background: #34d399; }

.wrap { max-width: 1280px; margin: 0 auto; padding: 16px; }
.card { background: var(--card); border: 1px solid var(--rule); border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; }
.grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 14px; align-items: start; }
.side { position: sticky; top: 64px; }
@media (max-width: 980px) { .grid { grid-template-columns: 1fr; } .side { position: static; } }

textarea, input, select { width: 100%; font: inherit; border: 1px solid var(--rule); border-radius: 8px; padding: 8px 10px; background: var(--field); color: var(--ink); }
textarea.mono, input.mono { font-family: var(--mono); font-size: 14px; }
textarea:focus, input:focus, select:focus { outline: 2px solid color-mix(in srgb, var(--focus) 45%, transparent); border-color: var(--focus); }
select { width: auto; max-width: 360px; }

.btn { font: inherit; font-size: 14px; border: 1px solid var(--rule); background: var(--card); color: var(--ink); border-radius: 8px; padding: 7px 12px; cursor: pointer; }
.btn:hover { background: var(--paper2); }
.btn.primary { background: var(--accent); color: var(--field); border-color: var(--accent); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.small { padding: 4px 9px; font-size: 13px; }
.btn.ghost { background: transparent; }
.btn:disabled { opacity: 0.5; cursor: default; }
.chip { font-family: var(--mono); font-size: 12.5px; border: 1px dashed var(--lex); color: var(--lex); background: var(--lex-bg); border-radius: 999px; padding: 3px 10px; cursor: pointer; }
.seg { display: inline-flex; border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; }
.seg button { font: inherit; font-size: 13px; border: 0; background: var(--card); color: var(--ink); padding: 6px 12px; cursor: pointer; }
.seg button.on { background: var(--sel); color: var(--sel-ink); }

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.steps button { font: inherit; text-align: left; border: 1px solid var(--rule); background: var(--card); color: var(--ink); border-radius: 10px; padding: 8px 12px; cursor: pointer; }
.steps button b { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--paper2); margin-right: 6px; font-size: 13px; }
.steps button small { display: block; color: var(--muted); font-size: 12px; }
.steps button.on { border-color: var(--accent); box-shadow: inset 0 -3px 0 var(--accent); }
.steps button[data-s="tok"].on { box-shadow: inset 0 -3px 0 var(--lex); }
.steps button[data-s="gram"].on { box-shadow: inset 0 -3px 0 var(--yacc); }
.steps .badge { float: right; font-size: 13px; }
.badge.ok { color: var(--ok); } .badge.err { color: var(--err); } .badge.warn { color: var(--warn); }
@media (max-width: 640px) { .steps { grid-template-columns: repeat(2, 1fr); } }
body.mode-lex .steps button[data-s="gram"], body.mode-lex .yo { display: none; }
body:not(.mode-lex) .lexonly { display: none; }

#step-tok h2 { color: var(--lex); } #step-gram h2 { color: var(--yacc); }
.rules-head, .rule { display: grid; grid-template-columns: 30px minmax(0, 1fr) minmax(0, 1.3fr) 120px; gap: 6px; align-items: center; }
.rules-head { font-size: 12px; color: var(--muted); font-weight: 600; margin: 8px 0 4px; }
.rule { padding: 4px; border-radius: 8px; border: 1px solid transparent; margin-bottom: 4px; }
.rule .n { font-family: var(--mono); color: var(--muted); text-align: center; }
.rule input { padding: 6px 8px; }
.rule.err { border-color: var(--err); background: var(--err-bg); }
.rule.warn { border-color: var(--warn); background: var(--warn-bg); }
.rule .tools { display: flex; gap: 1px; }
.rule .tools button { border: 0; background: transparent; cursor: pointer; font-size: 15px; padding: 3px 5px; border-radius: 6px; color: var(--muted); }
.rule .tools button:hover { background: var(--paper2); color: var(--ink); }
.rule .tools button.ink { color: var(--accent); }
.rule .ret { grid-column: 2 / 4; font-size: 12px; color: var(--muted); padding-left: 2px; }
.rule .ret b { font-family: var(--mono); color: var(--yacc); }
.defs-wrap summary { cursor: pointer; font-size: 13px; color: var(--muted); }
#defs .rule { grid-template-columns: 30px 140px minmax(0, 1fr) 60px; }
.probe { margin-top: 12px; border-top: 1px dashed var(--rule); padding-top: 4px; }
.stream { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; min-height: 10px; }
.tk { font-family: var(--mono); font-size: 12.5px; border-radius: 6px; padding: 2px 7px; border: 1px solid var(--rule); background: var(--card); }
.tk.tok { border-color: var(--yacc); background: var(--yacc-bg); color: var(--yacc); }
.tk.tok i { font-style: normal; color: var(--muted); }
.tk.skip { color: var(--muted); border-style: dashed; }
.tk.echo { border-color: var(--warn); background: var(--warn-bg); color: var(--warn); }
.tk.end { border-color: var(--ink); }

.gram-edit { display: grid; grid-template-columns: 34px 1fr; border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; }
.gram-edit textarea { border: 0; border-radius: 0; line-height: 22px; padding-top: 8px; resize: vertical; min-height: 200px; white-space: pre; overflow-x: auto; }
.gutter { background: var(--paper2); font-family: var(--mono); font-size: 12px; color: var(--muted); text-align: right; padding: 8px 6px 0 0; overflow: hidden; }
.gutter span { display: block; height: 22px; line-height: 22px; }
.gutter span.err { color: var(--field); background: var(--err); border-radius: 0 4px 4px 0; }

.test { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px; margin-bottom: 10px; align-items: start; }
.test textarea { min-height: 40px; }
.res { grid-column: 1 / 4; font-size: 13.5px; border-radius: 8px; padding: 8px 10px; }
.res.acc { background: var(--ok-bg); } .res.rej { background: var(--err-bg); } .res.neutral { background: var(--paper2); }
.res pre { margin: 4px 0 0; font-family: var(--mono); font-size: 13px; white-space: pre-wrap; }
.derv { margin-top: 6px; font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
.derv summary { cursor: pointer; }
.expect { font-size: 12.5px; margin-top: 4px; }
.expect.ok { color: var(--ok); } .expect.bad { color: var(--err); }

#asm-files .file, #ref .file { margin-top: 10px; }
.fh { display: flex; justify-content: space-between; align-items: center; background: var(--head); color: var(--head-ink); padding: 6px 10px; border-radius: 8px 8px 0 0; font-family: var(--mono); font-size: 13px; }
.fh .btn { color: var(--head-ink); border-color: var(--head-mut); background: transparent; padding: 2px 8px; font-size: 12px; }
#ref .fh { background: var(--yacc); }
.file pre, .cmds pre { margin: 0; background: var(--code-bg); color: var(--code-ink); padding: 10px 12px; border-radius: 0 0 8px 8px; overflow: auto; font-size: 13px; line-height: 1.5; max-height: 460px; }
.cmds { margin: 12px 0; } .cmds pre { border-radius: 8px; }

.checker ul { list-style: none; margin: 0; padding: 0; max-height: 46vh; overflow: auto; }
.checker li { font-size: 13.5px; border-left: 3px solid var(--rule); padding: 6px 8px; margin-bottom: 6px; background: var(--paper2); border-radius: 0 8px 8px 0; }
.checker li.err { border-color: var(--err); background: var(--err-bg); }
.checker li.warn { border-color: var(--warn); background: var(--warn-bg); }
.checker li.ok { border-color: var(--ok); background: var(--ok-bg); }
.checker li .src { font-size: 11px; font-weight: 700; letter-spacing: 0.5px; color: var(--muted); display: block; }
.checker li .why { margin-top: 4px; font-size: 12px; }
.pill { font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: var(--paper2); }
.pill.ok { background: var(--ok-bg); color: var(--ok); } .pill.err { background: var(--err-bg); color: var(--err); } .pill.warn { background: var(--warn-bg); color: var(--warn); }
.tutor .ask { margin-top: 8px; }
#tutor-out { max-height: 40vh; overflow: auto; }
#tutor-out .msg { margin-top: 10px; font-size: 14px; background: var(--ai-bg); border-left: 3px solid var(--ai); padding: 8px 10px; border-radius: 0 8px 8px 0; white-space: pre-wrap; }
#tutor-out .msg .src { display: block; font-size: 11px; font-weight: 700; color: var(--ai); letter-spacing: 0.5px; }
#tutor-out .msg.local { background: var(--paper2); border-color: var(--muted); } #tutor-out .msg.local .src { color: var(--muted); }
#tutor-out .msg.q { background: var(--q-bg); border-color: var(--q-line); } #tutor-out .msg.q .src { color: var(--q-ink); }
#tutor-out .msg code { background: var(--field); }
.spin { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--rule); border-top-color: var(--ai); border-radius: 50%; animation: sp 0.8s linear infinite; vertical-align: -2px; }
@keyframes sp { to { transform: rotate(360deg); } }

.modal { position: fixed; inset: 0; background: rgba(15, 18, 24, 0.55); display: grid; place-items: center; z-index: 50; padding: 16px; }
.modal .box { background: var(--card); color: var(--ink); border-radius: 14px; padding: 18px; max-width: 520px; width: 100%; }
.modal h3 { margin: 0 0 6px; }
.modal input { margin: 10px 0; }

/* handwriting pad (Logic Lab ink.js, code mode) */
/* The dock is a FIXED bottom sheet of constant height: nothing that changes while writing (readings, chips, the checker
   above) may move the canvas under the finger (Kiran 2026-10-11: the pad jumped up after each stroke). */
#ink-dock { border-color: var(--accent); position: fixed; left: 8px; right: 8px; bottom: 8px; z-index: 40; margin: 0 auto; max-width: 980px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.18); overscroll-behavior: contain; touch-action: manipulation; }
body.inking { padding-bottom: 420px; }
#ink-dock .ink-chips { height: 88px; overflow-y: auto; overflow-x: hidden; align-content: flex-start; margin: 6px 0 4px; overscroll-behavior: contain; }
#ink-dock .ink-sugg { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; scrollbar-width: thin; }
#ink-dock .ink-read { flex: 0 0 auto; }
#ink-dock .ink-consent { height: 2.8em; overflow: hidden; }
.inkpad { margin: 6px 0 4px; }
.ink-wrap { position: relative; border: 1px solid var(--rule); border-radius: 10px; background: var(--field); overflow: hidden; }
.ink-cv { display: block; width: 100%; height: 170px; touch-action: none; cursor: crosshair; }
.ink-hint { position: absolute; inset: auto 12px 10px 12px; font-size: 13px; color: var(--muted); pointer-events: none; }
.ink-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0 4px; min-height: 8px; }
.ink-chip { min-width: 30px; height: 34px; padding: 0 6px; border: 1px solid var(--rule); background: var(--paper2); color: var(--ink); border-radius: 7px; font-family: var(--mono); font-size: 17px; cursor: pointer; }
.ink-chip.on { border-color: var(--accent); background: var(--accent-bg); }
.ink-alts { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 13px; color: var(--muted); margin-top: 4px; }
.ink-alt { min-width: 32px; height: 32px; border: 1px solid var(--accent); background: var(--card); color: var(--ink); border-radius: 7px; font-family: var(--mono); font-size: 17px; cursor: pointer; }
.ink-alt.more { border-color: var(--rule); }
.ink-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ink-bar .btn { padding: 6px 10px; font-size: 13px; }
.ink-st { font-size: 12px; }
.ink-sugg { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-bottom: 4px; }
.ink-read { min-height: 34px; padding: 2px 10px; border: 1px solid var(--rule); background: var(--card); color: var(--ink); border-radius: 8px; font-family: var(--mono); font-size: 16px; cursor: pointer; }
.ink-read.on { border-color: var(--sel); background: var(--sel); color: var(--sel-ink); }
.ink-consent { margin-top: 6px; line-height: 1.4; font-size: 12px; color: var(--muted); }
.ink-consent a { color: inherit; }

body.big { font-size: 17px; } body.big .rule input, body.big textarea.mono, body.big input.mono { font-size: 17px; }
@media print { .top, .side, .steps, .btn, #ink-dock { display: none !important; } .step { display: block !important; } }

.no-ink .rule .tools button.ink, .no-ink #ink-gram { display: none !important; }

/* site look: serif headings like kiranvk.me, theme toggle in the header */
h2, .brand b { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; }
h2 { font-size: 21px; }
.brand b { font-size: 20px; }
.logo { color: var(--head-ink); }
#btn-theme { min-width: 38px; }
.chip { color: var(--lex); }
@media (max-width: 640px) { select { max-width: 100%; width: 100%; } .top-act .btn { padding: 6px 9px; white-space: nowrap; } .brand small { display: none; } }