:root {
    color-scheme: dark;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: #0a0907;
    color: #f4e8c6;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: #0a0907; }
.app { display: grid; grid-template-rows: 48px minmax(0, 1fr); width: 100%; height: 100%; }
.toolbar { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px max(8px, env(safe-area-inset-right)) 6px max(8px, env(safe-area-inset-left)); border-bottom: 1px solid #574728; background: #17140e; }
.brand { min-width: 0; margin-right: auto; }
.brand strong { display: block; overflow: hidden; color: #f7d477; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.brand span { display: block; overflow: hidden; color: #bcb39e; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.tool { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid #6d5a31; border-radius: 4px; background: #242018; color: #f4e8c6; font: 700 18px/1 system-ui, sans-serif; cursor: pointer; }
.tool:hover, .tool:focus-visible { border-color: #e0b64b; background: #312a1d; outline: none; }
.stage { position: relative; display: grid; place-items: center; min-height: 0; background: #000; }
canvas { display: block; max-width: 100%; max-height: 100%; image-rendering: pixelated; outline: none; touch-action: none; }
.loading { position: absolute; inset: 0; display: grid; place-content: center; gap: 14px; padding: 24px; background: #0a0907; text-align: center; transition: opacity 180ms ease; }
.loading[hidden] { display: none; }
.loading strong { color: #f7d477; font-size: 18px; }
.loading p { max-width: 520px; margin: 0; color: #c7bfae; font-size: 13px; }
progress { width: min(420px, 78vw); height: 10px; accent-color: #d6a735; }
.error { color: #ff9b8e !important; }

@media (max-height: 520px), (max-width: 560px) {
    .app { grid-template-rows: 42px minmax(0, 1fr); }
    .toolbar { padding-top: 3px; padding-bottom: 3px; }
    .brand span { display: none; }
    .tool { width: 34px; height: 34px; }
}

@media (display-mode: fullscreen) {
    .app { grid-template-rows: minmax(0, 1fr); }
    .toolbar { display: none; }
}