* { box-sizing: border-box; }
:root { font-family: system-ui, sans-serif; color: #e4f8f5; background: #182e40; }
body { margin: 0; height: 100dvh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; }
header { display: flex; justify-content: space-between; align-items: center; padding: max(12px, env(safe-area-inset-top)) 20px 10px; }
.back { color:inherit; min-width:44px; min-height:44px; display:grid; place-items:center; text-decoration:none; }
[data-production] header { gap:8px; padding-inline:12px; }
[data-production] header div { flex:1; }
small { color: #9fbebf; font-size: 10px; letter-spacing: .18em; }
h1 { font-size: clamp(18px, 5vw, 25px); font-weight: 600; margin: 3px 0; }
output { font-size: 23px; font-variant-numeric: tabular-nums; }
#stage { position: relative; min-height: 0; touch-action: none; outline-offset: -3px; }
canvas { display: block; width: 100%; height: 100%; touch-action: none; }
footer { padding: 8px 16px max(12px, env(safe-area-inset-bottom)); background: #203b49; }
footer p { margin: 0 0 8px; font-size: 13px; min-height: 18px; }
footer div { display: flex; align-items: center; gap: 8px; }
footer span { flex: 1; font-size: 11px; color: #afc9c7; }
button { min-height: 44px; padding: 8px 14px; border: 1px solid #91b6b4; border-radius: 7px; color: inherit; background: #345463; font: inherit; font-size: 13px; cursor: pointer; }
button:focus-visible, a:focus-visible, #stage:focus-visible { outline: 2px solid #ffe3a2; }
#veil { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; background: #182e40dd; z-index: 1; }
#veil[hidden] { display: none; }
@media (max-height: 450px) { header { padding: 4px 16px; } h1 { font-size: 17px; } small { display: none; } footer { padding: 4px 12px; } footer p { margin-bottom: 2px; } }

[data-production] #chapter { position:absolute; top:8px; left:12px; font-size:12px; pointer-events:none; }
#loading { position:absolute; inset:20% 0 auto; text-align:center; }
[data-production] .controls { flex-wrap:wrap; gap:6px; }
[data-production] button { min-width:44px; }
#save-status { display:block; font-size:10px; padding-top:4px; }
dialog { color:#e4f8f5; background:#203b49; border:1px solid #91b6b4; border-radius:16px; width:min(90vw,420px); max-height:90dvh; padding:20px; }
dialog::backdrop { background:#102332bb; } dialog h2 { margin:0 0 12px; font-size:22px; } dialog p { font-size:14px; } dialog button { margin:3px; }
@media(max-height:450px) { [data-production] { grid-template-columns:1fr 220px; grid-template-rows:52px minmax(0,1fr); } [data-production] header { grid-column:1/-1; } [data-production] footer { grid-column:2; grid-row:2; } [data-production] #stage { grid-column:1; grid-row:2; } }