:root { color-scheme: dark; font: 13px ui-monospace, monospace; color: #cdd6f4; background: #11111b; }
* { box-sizing: border-box; }
body { margin: 0; padding: clamp(6px,2vw,24px); background: radial-gradient(120% 90% at 50% 0%,#181825,#11111b 70%); min-height:100dvh; }
main { max-width: 1120px; margin: auto; border:1px solid #45475a; background:#1e1e2e; box-shadow:0 22px 60px -28px #000; }
.topbar { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 12px; padding:10px 14px; background:#11111b; border-bottom:1px solid #45475a; color:#89dceb; }
.topbar a { font-size:12px; }
.vm-layout { display:grid; grid-template-columns:minmax(0,800px) minmax(210px,1fr); }
.vm-main { min-width:0; padding:12px; }
.stats { min-width:0; padding:12px; border-left:1px solid #45475a; background:#181825; font-size:12px; }
.stats h2 { margin:0 0 12px; font-size:12px; color:#cba6f7; font-weight:normal; }
.stats h2:not(:first-child) { margin-top:24px; }
.stats dl { display:grid; grid-template-columns:1fr; gap:4px; margin:0; }
.stats dt,.dim { color:#a6adc8; }
.stats dd { min-width:0; margin:0 0 8px; color:#a6e3a1; overflow-wrap:anywhere; }
.stats pre { white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.6; color:#89dceb; }
.stats p { font-size:11px; line-height:1.6; }
button, input { font: inherit; color: inherit; background: #313244; border: 1px solid #585b70; border-radius: 3px; padding: 5px 9px; min-height: 30px; }
button, summary { cursor: pointer; }
button:disabled { opacity: .5; }
a { color: #89dceb; }
button:focus-visible, input:focus-visible, summary:focus-visible, #display:focus-visible { outline: 2px solid #89dceb; }
button[aria-pressed=true] { border-color: #89dceb; }
.controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; padding:8px 0; border-bottom:1px solid #45475a; }
#status, small { color: #a6adc8; }
#status { margin-left: auto; }
#display-shell { background: #000; overflow: auto; }
#display-shell, #display-shell * { cursor: default !important; }
#display-shell.mouse-captured, #display-shell.mouse-captured * { cursor: none !important; }
#display { width: max-content; outline-offset: -2px; }
#screen-container { line-height: normal; }
#screen-container > div { white-space: pre; font: 14px monospace; }
canvas { display: block; image-rendering: pixelated; }
#display-shell:fullscreen { width: 100vw; height: 100vh; display: grid; place-items: center; overflow: hidden; }
summary { padding: 6px 0; color: #a6adc8; }
#trackpad { touch-action: none; user-select: none; border: 1px dashed #585b70; padding: 28px; text-align: center; margin: 8px 0; }
form { display: flex; gap: 8px; margin: 8px 0; }
input { min-width: 0; flex: 1; }
small { display: block; margin-top: 8px; }
#error { color: #f38ba8; }
[hidden] { display: none !important; }
#boot-details pre { margin: 6px 0; max-height: 180px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: 12px ui-monospace, monospace; color: #a6adc8; }
@media (pointer: coarse) { button, input { min-height: 44px; } }
@media(max-width:900px) {
  .vm-layout { grid-template-columns:minmax(0,1fr); }
  .stats { border-left:0; border-top:1px solid #45475a; }
  .stats dl { grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); gap:8px; }
  .stats dd { margin:0; }
}
@media(max-width:600px) {
  body { padding:6px; }
  .topbar, .vm-main, .stats { padding:10px; }
  .controls button, input, summary { min-height:44px; }
  .controls > a { display:flex; align-items:center; min-height:44px; }
  #status { flex-basis:100%; margin-left:0; }
  #touch-details .controls button { flex:1 0 64px; }
  #keys { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
  #trackpad { padding:32px 12px; }
  small, #error, #guest-link { overflow-wrap:anywhere; line-height:1.6; }
}