:root { --bg:#0b1f2a; --panel:#122c3a; --line:#2a4a5a; --fg:#e8f1f5; --accent:#4d96ff; --ok:#6bcb77; --err:#ff6b6b; }
* { box-sizing:border-box }
html, body { height:100%; margin:0 }
body { display:flex; flex-direction:column; background:var(--bg); color:var(--fg); font:14px/1.5 system-ui, sans-serif }
.bar { display:flex; align-items:center; gap:.6rem; padding:.5rem .8rem; background:var(--panel); border-bottom:1px solid var(--line) }
.title { font-weight:700; margin-right:.6rem }
button { background:var(--accent); color:#fff; border:0; border-radius:6px; padding:.35rem .8rem; font-weight:600; cursor:pointer }
button:disabled { opacity:.5; cursor:default }
.status { margin-left:auto; opacity:.7; font-size:.85em }
.split { flex:1; min-height:0; display:grid; grid-template-columns:1fr 1fr; gap:.6rem; padding:.6rem }
.editor, .stage { min-height:0; display:flex; flex-direction:column; gap:.6rem }
/* Monaco fills this box; automaticLayout follows its size. */
#code { flex:1; min-height:0; width:100%; border:1px solid var(--line); border-radius:6px; overflow:hidden }
/* Skulpt stacks two canvases (drawing, sprite) with a negative margin, so this
   box must stay a plain block and the canvases must not be scaled by CSS. */
#turtle-canvas { flex:1; min-height:0; background:#fff; border-radius:6px; overflow:hidden; display:block }
#output { margin:0; height:7rem; overflow:auto; background:#0f2531; border:1px solid var(--line); border-radius:6px; padding:.5rem .7rem; font:13px/1.4 ui-monospace, monospace; white-space:pre-wrap }
#output.error { border-color:var(--err); color:var(--err) }
/* Narrow (the platform's side pane): one column, editor above the drawing, and
   the drawing box gets a fixed height so the canvas has a size before the first run. */
@media (max-width:700px) {
  .split { grid-template-columns:1fr; grid-template-rows:auto 1fr; overflow:auto }
  #code { height:12rem; flex:none }
  #turtle-canvas { flex:none; height:320px }
  #output { height:5rem }
}