:root {
  --bg: #0b0c10;
  --panel: #14161c;
  --ink: #e9ebf2;
  --dim: #8b90a0;
  --line: #262a34;
  --shell: #2b2e35;
  --shell-hi: #3a3e47;
  --shell-lo: #1d1f24;
  --key: #1a1c21;
  --key-hi: #2a2d34;
  --key-ink: #f1f2f6;
  --fn: #ff8b3d;
  --accent: #b6ff3c;
  --accent-ink: #0b0c10;
  --danger: #ff5a6a;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  background: radial-gradient(1200px 600px at 50% -10%, #1b1f2a 0%, var(--bg) 60%) fixed, var(--bg);
  color: var(--ink);
  font: 15px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  min-height: 100vh;
  -webkit-tap-highlight-color: transparent;
}
a { color: var(--accent); }
kbd {
  font: 12px ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: 1px 6px; border-radius: 5px; border: 1px solid var(--line); background: var(--panel);
}
code { font: 13px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--accent); }
.dim { color: var(--dim); }

.bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; max-width: 1180px; margin: 0 auto;
}
.brand { font-weight: 600; letter-spacing: .2px; display: flex; align-items: center; gap: 10px; }
.brand b { color: var(--accent); font-weight: 700; }
.mark {
  width: 22px; height: 22px; border-radius: 6px;
  background: conic-gradient(from 90deg, #ff5fa2, #b6ff3c, #3cf0ff, #ffd23c, #ff5fa2);
  box-shadow: inset 0 0 0 4px var(--bg);
}
nav { display: flex; gap: 6px; flex-wrap: wrap; }
button {
  font: inherit; color: var(--ink); background: var(--panel); border: 1px solid var(--line);
  border-radius: 9px; padding: 6px 12px; cursor: pointer;
}
button:hover { border-color: #3a4050; }

main {
  max-width: 1180px; margin: 0 auto; padding: 4px 16px 32px;
  display: grid; grid-template-columns: minmax(0, 780px) minmax(220px, 1fr); gap: 28px; align-items: start;
}
@media (max-width: 900px) { main { grid-template-columns: minmax(0, 1fr); } }

/* the device */
.device { width: 100%; }
.shell {
  background: linear-gradient(180deg, var(--shell-hi), var(--shell) 18%, var(--shell-lo));
  border-radius: clamp(14px, 3vw, 26px);
  padding: clamp(10px, 2.4vw, 22px);
  box-shadow: 0 30px 60px -20px #000c, inset 0 1px 0 #ffffff14, inset 0 -2px 0 #0006;
}
.top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(8px, 2vw, 18px); align-items: stretch; }
.bezel {
  position: relative; background: #050506; border-radius: clamp(8px, 1.6vw, 14px);
  padding: clamp(8px, 2vw, 18px); box-shadow: inset 0 0 0 1px #000, inset 0 2px 8px #000;
}
#screen {
  display: block; width: 100%; height: auto; aspect-ratio: 240 / 135;
  image-rendering: pixelated; image-rendering: crisp-edges; background: #000; border-radius: 2px;
}
.side { display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 4px 0; }
.reset {
  writing-mode: vertical-rl; text-orientation: mixed; letter-spacing: 2px; font-size: 11px; font-weight: 700;
  background: #c8372d; color: #fff; border: 0; border-radius: 8px; padding: 12px 6px;
  box-shadow: inset 0 -3px 0 #0005, 0 2px 0 #0007;
}
.reset:active { transform: translateY(1px); box-shadow: inset 0 -1px 0 #0005; }
.leds { display: flex; flex-direction: column; gap: 8px; }
.led { width: 8px; height: 8px; border-radius: 50%; background: #333; box-shadow: inset 0 0 0 1px #0008; }
.led.on { background: #3cf0ff; box-shadow: 0 0 8px #3cf0ff; }
.led.busy { background: #ffd23c; box-shadow: 0 0 8px #ffd23c; }

.power, .crash {
  position: absolute; inset: clamp(8px, 2vw, 18px); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 12px;
  background: #050506e8; border-radius: 2px;
}
.power p, .crash p { margin: 0; color: var(--dim); font-size: 13px; }
.crash p b { color: var(--danger); }
#on:disabled { opacity: .55; cursor: progress; }
#on {
  background: var(--accent); color: var(--accent-ink); border: 0; font-weight: 700;
  font-size: 16px; padding: 10px 22px; border-radius: 12px;
}

.keyboard {
  display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: clamp(3px, .8vw, 7px);
  margin-top: clamp(10px, 2.4vw, 20px); user-select: none; -webkit-user-select: none; touch-action: none;
}
.key {
  position: relative; aspect-ratio: 1 / .92; border-radius: clamp(4px, 1vw, 8px);
  background: linear-gradient(180deg, var(--key-hi), var(--key));
  box-shadow: inset 0 1px 0 #ffffff12, 0 2px 0 #000a; color: var(--key-ink);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  font: 600 clamp(9px, 1.9vw, 15px) / 1 ui-sans-serif, system-ui, sans-serif;
  padding: 0; border: 0; touch-action: none;
}
.key small {
  position: absolute; font-size: clamp(6px, 1.05vw, 9px); font-weight: 600; line-height: 1;
  color: #9aa0b0; top: clamp(2px, .5vw, 5px);
}
.key .shifted { left: clamp(3px, .6vw, 6px); }
.key .layer { right: clamp(3px, .6vw, 6px); color: var(--fn); }
.key.word { font-size: clamp(7px, 1.3vw, 11px); letter-spacing: .3px; text-transform: lowercase; }
.key.fnkey { color: var(--fn); }
.key.mod { background: linear-gradient(180deg, #30333b, #202227); }
.key.down, .key.latched { background: linear-gradient(180deg, #4b505b, #33363e); transform: translateY(1px); box-shadow: inset 0 1px 0 #ffffff1a; }
.key.latched { outline: 2px solid var(--fn); outline-offset: -2px; }

.status {
  display: flex; justify-content: space-between; gap: 12px; padding: 10px 6px 0;
  font: 13px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink);
}

.notes { color: #c9ccd6; font-size: 14px; }
.notes p { margin: 0 0 12px; }

dialog {
  background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 14px;
  padding: 18px 20px; max-width: min(640px, calc(100vw - 32px)); width: 100%;
}
dialog::backdrop { background: #000a; }
dialog h2 { margin: 0 0 10px; font-size: 18px; }
dialog table { border-collapse: collapse; width: 100%; margin: 6px 0 12px; }
dialog td, dialog th { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
dialog th { color: var(--dim); font-weight: 500; }
dialog form { margin-top: 12px; text-align: right; }
.files { max-height: 260px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; margin: 10px 0; }
.files div { display: grid; grid-template-columns: 1fr auto auto auto; gap: 8px; align-items: center; padding: 6px 10px; border-bottom: 1px solid var(--line); font: 13px ui-monospace, Menlo, monospace; }
.files div:last-child { border-bottom: 0; }
.files .dir { color: var(--dim); }
.files button { padding: 2px 8px; font-size: 12px; }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 10px 0; }
.row input { font: 13px ui-monospace, Menlo, monospace; background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: 7px; padding: 4px 8px; width: 140px; }
.danger button { border-color: #5a2a30; color: #ffb3bb; }

@media (max-width: 600px) {
  .bar { padding: 10px 12px; }
  nav button { padding: 5px 9px; font-size: 13px; }
  .brand { font-size: 14px; }
  main { padding: 2px 8px 24px; gap: 18px; }
  .key .shifted { display: none; }
  .status { font-size: 12px; }
  .notes { font-size: 13px; }
}