* { 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: 1500px; 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); }
.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:repeat(var(--device-columns), minmax(0, min(var(--device-width, 360px), 100%)));
  justify-content:center; gap:18px; align-items:start;
}
.device-column { 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 (max-width: 900px) {
  .workspace { --device-columns:1; }
  .device-column { justify-self:center; }
  .panel { width:100%; }
}
@media (max-width: 650px) {
  .app { padding:12px; }
  header { align-items:start; flex-wrap:wrap; gap:10px; }
  header > div:first-child { flex-basis:100%; }
  .header-meta { flex-direction:row; align-items:center; align-self:auto; }
  .toolbar { flex-wrap:wrap; overflow:visible; }
  .toolbar select { flex:1 0 100%; width:100%; }
  .display-bezel { width:100%; }
  canvas { max-width:100%; }
}