:root { color-scheme: dark light; --bg: #10161c; --fg: #e8eef2; --accent: #5fb3ff; --muted: #9fb0bd; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--fg); font: 18px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
#start { max-width: 46rem; margin: 0 auto; padding: 1rem 1.25rem 3rem; }
h1 { font-size: 2rem; margin: .5rem 0; }
h2 { font-size: 1.4rem; }
a { color: var(--accent); }
.tabs { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
button, select, input, textarea { font: inherit; }
button { background: #21303c; color: var(--fg); border: 2px solid #3c5568; border-radius: .4rem; padding: .45rem .9rem; cursor: pointer; }
button[aria-current="true"] { border-color: var(--accent); }
button:hover { border-color: var(--accent); }
input[type=text], input:not([type]), input[type=password], input[type=email], select, textarea {
  background: #0b1014; color: var(--fg); border: 2px solid #3c5568; border-radius: .3rem; padding: .35rem .5rem; width: min(100%, 26rem);
}
input[type=range] { width: min(100%, 20rem); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
fieldset { border: 1px solid #3c5568; border-radius: .3rem; margin: 0 0 1rem; }
#status { color: var(--muted); min-height: 1.5em; }
#alert { color: #ffb4a8; min-height: 1.5em; font-weight: 600; }
.panel { border-top: 1px solid #2a3a46; margin-top: .5rem; }
#gamewrap { padding: 1rem; }
#game { min-height: 60vh; border: 2px solid #2a3a46; border-radius: .5rem; padding: 1rem; }
#game:focus { border-color: var(--accent); outline: none; }
#view { margin: 0; white-space: pre-wrap; font: 18px/1.4 ui-monospace, Menlo, Consolas, monospace; color: var(--fg); }
#ibox, #tscreen, #recordings { margin-top: 1rem; padding: 1rem; border: 2px solid var(--accent); border-radius: .5rem; }
#ibox label { display: block; margin-bottom: .4rem; font-weight: 600; }
#ibox input, #ibox textarea { width: 100%; }
#tscreen textarea { width: 100%; }
#ibox-hint { color: var(--muted); font-size: .9rem; margin: .4rem 0 0; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }
@media (prefers-color-scheme: light) {
  :root { --bg: #f6f8fa; --fg: #111; --accent: #0057b8; --muted: #445; }
  button { background: #e7eef5; border-color: #8aa0b4; }
  input[type=text], input:not([type]), input[type=password], input[type=email], select, textarea { background: #fff; border-color: #8aa0b4; }
}
#touchsurface { position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 20; touch-action: none; background: transparent;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
body.lf-touch-pad #touchsurface { bottom: 46vh; }
#touchpad { position: fixed; left: 0; right: 0; bottom: 0; height: 46vh; z-index: 21; display: grid; grid-template-columns: repeat(4, 1fr);
  gap: .25rem; padding: .25rem; background: var(--bg); border-top: 2px solid #3c5568; touch-action: manipulation; overflow: auto; }
#touchpad button { font-size: .95rem; line-height: 1.15; padding: .15rem; min-height: 44px; -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
#touchpad button[aria-disabled="true"] { opacity: .5; }
body.lf-touch #ibox, body.lf-touch #tscreen { position: fixed; left: .5rem; right: .5rem; top: .5rem; z-index: 30; background: var(--bg);
  max-height: 92vh; overflow: auto; }
#ibox-touch button { min-height: 44px; min-width: 6rem; }
#touchhelp { max-width: 46rem; margin: 0 auto; padding: 0 1.25rem 3rem; }