:root { color-scheme: dark; font-family: system-ui, sans-serif; background: #050505; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #050505; }
body { display: grid; place-items: center; }
.app-shell { width: 100%; height: 100%; display: grid; grid-template-rows: auto minmax(0,1fr) auto; place-items: center; padding: max(4px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)); gap: 4px; }
.toolbar { min-height: 30px; max-width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 5px 8px; color: #ddd; font-size: 13px; }
.toolbar label { white-space: nowrap; }
.toolbar select, .toolbar button { font: inherit; border: 1px solid #74333a; border-radius: 5px; background: #21080c; color: #f6e9ea; padding: 4px 8px; min-height: 29px; }
.toolbar button { cursor: pointer; }
.toolbar button[aria-pressed="true"] { background: #6a1722; border-color: #c78087; }
.stage { min-height: 0; min-width: 0; width: 100%; height: 100%; display: grid; place-items: center; }
canvas { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; aspect-ratio: 4 / 3; touch-action: manipulation; image-rendering: auto; box-shadow: 0 0 0 1px #2f2f2f; }
.status { min-height: 18px; max-width: 100%; padding: 0 4px; font-size: 12px; color: #aaa; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
dialog { width: min(92vw, 560px); max-height: 86vh; overflow: auto; border: 1px solid #74333a; border-radius: 8px; background: #160609; color: #f6e9ea; padding: 24px; }
dialog::backdrop { background: rgb(0 0 0 / 70%); }
dialog h1 { margin-top: 0; }
dialog p { line-height: 1.45; }
dialog .help-note { padding: 10px 12px; border-left: 3px solid #d7a530; background: #25170a; }
dialog button { border: 1px solid #c78087; background: #3d0b11; color: white; padding: 10px 16px; border-radius: 6px; cursor: pointer; }
@media (max-width: 560px) {
  .app-shell { gap: 2px; padding-top: max(2px, env(safe-area-inset-top)); }
  .toolbar { font-size: 12px; gap: 3px 5px; }
  .toolbar label { display: none; }
  .toolbar select, .toolbar button { min-height: 27px; padding: 3px 6px; }
  .status { font-size: 11px; }
}