/* Use the available window height rather than a fixed fraction of the viewport. */
body { height: 100vh; height: 100dvh; min-height: 0; }
.titlebar { flex: none; height: auto; min-height: 40px; padding: 5px 12px; }
.titlebar-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.titlebar .header-note { flex: none; white-space: nowrap; }
.titlebar-open { flex: none; margin: 0 0 0 8px; padding: 5px 10px; font-size: 12px; border-color: #b7c9d3; background: #f8fcff; }
main { display: flex; flex-direction: column; flex: 1; min-height: 0; margin: 0 auto; overflow: auto; }
.welcome { width: 100%; flex: none; }
#workspace { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.lesson, .playback-bar, #study { flex: none; }
#workspace .editor { flex: 1; height: auto; min-height: 160px; }
#workspace .editor > aside { min-height: 0; }
#stepChanges { flex: none; max-height: 32vh; overflow: auto; }
#notice { flex: none; }
#notice:empty { display: none; }
.credit { flex: none; padding: 4px 14px 6px; }
@media (max-width: 760px) {
  .titlebar-open { margin-left: auto; }
}