* { box-sizing: border-box; }
:root {
  color-scheme: dark;
  --bg: #0d080f;
  --panel: #1a101e;
  --panel2: #25162b;
  --border: #49304f;
  --text: #e7bee7;
  --muted: #b39aba;
  --accent: #ff00ff;
  --danger: #ff6b6b;
  --header-width: 100%;
  --device-width: 360px;
  --device-height: auto;
}
body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(circle at top, #321539, var(--bg) 55%);
  color: var(--text);
  font: 14px/1.4 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.app { max-width: 2400px; margin: 0 auto; padding: 24px; }
header {
  display:flex; justify-content:space-between; align-items:end; gap:20px;
  width:var(--header-width, 100%); max-width:100%; margin:0 auto 18px;
}
header > div:first-child { flex:1; min-width:0; }
h1 { margin:0; font-size:24px; }
header p { margin:5px 0 0; color:var(--muted); }
header p a { color:inherit; }
.header-meta { display:flex; flex-direction:column; align-items:flex-end; align-self:flex-start; gap:8px; flex-shrink:0; }
.header-meta p { margin:0; }
.badge { flex-shrink:0; white-space:nowrap; border:1px solid var(--border); background:var(--panel); padding:7px 10px; border-radius:8px; color:var(--muted); }
.resolution { display:flex; align-items:center; gap:6px; flex-shrink:0; color:var(--muted); }
.resolution select, .resolution input {
  background:var(--panel); color:var(--text); border:1px solid var(--border);
  border-radius:8px; padding:7px 10px; font:inherit;
}
.resolution input { width:72px; }
.toolbar {
  display:flex; align-items:center; flex-wrap:nowrap; gap:4px; margin-bottom:8px;
  max-width:100%; overflow-x:auto; scrollbar-width:thin;
}
.toolbar input, .toolbar select {
  background:var(--panel); border:1px solid var(--border);
  border-radius:6px; color:var(--text); height:30px; padding:4px 6px; font:inherit; font-size:12px;
}
.toolbar select { flex:0 0 116px; min-width:0; width:116px; }
.toolbar input[type="url"] { flex:1 0 150px; min-width:150px; }
.toolbar :focus-visible, .panel-actions button:focus-visible {
  outline:2px solid var(--accent); outline-offset:-2px;
}
button {
  border:1px solid var(--border); background:var(--panel2); color:var(--text);
  border-radius:8px; padding:9px 13px; cursor:pointer; font:inherit;
}
.toolbar button, .panel-actions button {
  display:flex; align-items:center; justify-content:center;
  flex:0 0 30px; width:30px; height:30px; padding:0; border-radius:6px;
}
.toolbar svg, .panel-actions svg {
  width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}
button:hover { border-color:var(--accent); }
button:active { transform:translateY(1px); }
.danger { color:#ff9a9a; }
.workspace {
  --device-columns:2;
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  justify-content:center; gap:18px; align-items:start;
}
.device-column { justify-self:center; display:flex; flex-direction:column; align-items:center; min-width:0; max-width:100%; }
.device {
  width:100%; background:#2a1b30; border:2px solid #4e3157; border-radius:20px;
  padding:10px 8px 8px; box-shadow:0 20px 60px #0008, inset 0 1px #ffffff0c;
}
.display-bezel {
  width:max-content; max-width:100%; margin:0 auto; background:#0d080f;
  border-radius:8px; padding:6px; overflow:auto;
  box-shadow:inset 0 0 0 1px #000, 0 3px 8px #0008;
}
canvas {
  display:block; width:320px; height:170px; image-rendering:pixelated; background:#000;
}
.device-bottom { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; margin-top:10px; gap:10px; }
.side-label { color:var(--muted); font-size:9px; letter-spacing:1px; font-weight:700; }
.encoder { display:flex; align-items:center; gap:6px; }
.encoder button { width:36px; height:36px; border-radius:50%; padding:0; }
.encoder button:nth-child(2) { width:44px; height:44px; border-radius:50%; font-size:18px; background:var(--accent); }
.esc { min-width:44px; padding:8px 10px; }
kbd { color:var(--muted); font-size:11px; }
.panel {
  display:flex; flex-direction:column; width:100%; height:var(--device-height);
  min-width:0; background:var(--panel); border:1px solid var(--border);
  border-radius:12px; overflow:hidden;
}
.panel-title { display:flex; flex-shrink:0; justify-content:space-between; align-items:center; padding:12px 14px; border-bottom:1px solid var(--border); font-weight:700; }
.panel-actions { display:flex; align-items:center; flex-shrink:0; gap:8px; }
.status { padding:3px 8px; border-radius:20px; font-size:11px; background:var(--panel2); color:var(--muted); }
.status.running { color:var(--text); background:#491537; }
.status.error { color:#ffb0b0; background:#3a1919; }
.status.done { color:var(--text); background:#341943; }
#log {
  flex:1; margin:0; padding:13px; min-height:0; overflow:auto;
  color:#d2b9d7; white-space:pre-wrap; word-break:break-word;
  font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;
}
details { border-top:1px solid var(--border); padding:12px 14px; color:var(--muted); }
.panel details { flex-shrink:0; max-height:45%; overflow:auto; }
summary { color:var(--text); cursor:pointer; }
code { color:var(--text); }
details a { color:var(--text); }
.features-table { width:100%; border-collapse:collapse; margin-top:10px; font-size:12px; }
.features-table th, .features-table td {
  padding:6px 8px; text-align:left; vertical-align:top; border-bottom:1px solid var(--border);
}
.features-table th { color:var(--text); }
@media (min-width: 901px) {
  /* Side by side: let the console/storage panel extend down the page past the device. */
  .panel { height:max(var(--device-height), calc(100vh - 170px)); }
}
@media (max-width: 900px) {
  .workspace { --device-columns:1; grid-template-columns:minmax(0, min(var(--device-width, 360px), 100%)); }
  header { align-items:start; flex-wrap:wrap; gap:10px; }
  header > div:first-child { flex-basis:100%; }
  /* Stack the credit line and selects full width instead of letting them run off to the right. */
  .header-meta { flex-direction:column; align-items:stretch; align-self:auto; width:100%; }
  .resolution { flex-wrap:wrap; flex-shrink:1; width:100%; }
  .resolution select { flex:1 1 140px; min-width:0; max-width:100%; }
  .resolution input { flex:1 1 72px; min-width:0; }
  #customResolution { display:flex; align-items:center; gap:6px; flex:1 1 100%; }
  #customResolution[hidden] { display:none; }
  .device-column { justify-self:center; }
  .panel { width:100%; }
}
@media (max-width: 650px) {
  .app { padding:12px; }
  .toolbar { flex-wrap:wrap; overflow:visible; }
  .toolbar select { flex:1 0 100%; width:100%; }
  .display-bezel { width:100%; }
  canvas { max-width:100%; }
}
.panel #storagePanel { max-height:65%; }
.storage-actions { display:flex; flex-wrap:wrap; gap:6px; margin:10px 0; }
.text-button { padding:4px 10px; font-size:12px; border-radius:6px; }
.storage-actions select, .storage-editor input, .storage-editor textarea {
  background:var(--panel2); color:var(--text); border:1px solid var(--border);
  border-radius:6px; padding:4px 6px; font:inherit; font-size:12px;
}
.storage-editor { display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }
.storage-editor textarea { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; resize:vertical; }
.storage-tree, .storage-tree ul { list-style:none; margin:0; padding:0; }
.storage-tree ul { margin-left:14px; padding-left:8px; border-left:1px solid var(--border); }
.tree-row { display:flex; align-items:center; gap:6px; padding:3px 0; min-width:0; }
.tree-name { flex:1; min-width:0; word-break:break-all; color:var(--text); }
.tree-toggle { flex:0 1 auto; max-width:100%; text-align:left; border:0; background:none; padding:2px 4px; color:var(--text); cursor:pointer; font:inherit; }
.tree-toggle:hover { border:0; text-decoration:underline; }
.tree-size { flex:1 0 auto; color:var(--muted); font-size:11px; }
.tree-name + .tree-size { flex:0 0 auto; }
.tree-row .text-button { flex:0 0 auto; padding:2px 6px; font-size:11px; }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.storage-editor[hidden] { display:none; }
.panel #editorPanel { max-height:60%; }
.script-editor {
  width:100%; min-height:160px; resize:vertical; tab-size:2; white-space:pre;
  background:var(--panel2); color:var(--text); border:1px solid var(--border); border-radius:6px; padding:8px;
  font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;
}
.editor-hint { align-self:center; font-size:11px; color:var(--muted); }
.panel-toggle {
  border:0; background:none; padding:0; color:inherit; font:inherit; font-weight:700; cursor:pointer; text-align:left;
}
.panel-toggle:hover { border:0; text-decoration:underline; }
.panel.console-collapsed { height:auto; }
.panel.console-collapsed #log { display:none; }
.panel.console-collapsed .panel-title { border-bottom:0; }