:root { color-scheme: light dark; font: 17px system-ui; }
  * { box-sizing: border-box; }
  html { height: 100%; overflow: hidden; }
  body {
    padding: 0;
    position: fixed;
    top: var(--viewport-top, 0px);
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 100%;
    max-width: 42rem;
    height: 100vh;
    height: var(--viewport-height, 100dvh);
    display: grid;
    grid-template-rows: minmax(0, 1fr) var(--console-height, 20%);
    overflow: hidden;
  }
  #controls, #log { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  #controls {
    scroll-padding-block: 20px;
    padding: max(20px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right))
      20px max(24px, env(safe-area-inset-left));
  }
  h1 { margin-top: 0; font-size: 1.6rem; }
  button, input, a { font: inherit; padding: 12px; margin: 6px 0; }
  button { display: block; min-height: 44px; max-width: 100%; }
  input { width: 100%; }
  #console {
    position: relative;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    border-top: 1px solid GrayText;
    padding-bottom: env(safe-area-inset-bottom);
  }
  #console-divider {
    position: absolute;
    z-index: 1;
    top: -12px;
    left: 0;
    right: 0;
    height: 24px;
    cursor: row-resize;
    touch-action: none;
    user-select: none;
  }
  #console-divider::after {
    content: "";
    position: absolute;
    top: 9px;
    left: calc(50% - 24px);
    width: 48px;
    height: 5px;
    border-radius: 3px;
    background: GrayText;
  }
  #console-divider:focus-visible { outline: 2px solid Highlight; outline-offset: -2px; }
  #console h2 {
    margin: 0;
    padding: 12px max(24px, env(safe-area-inset-right)) 8px max(24px, env(safe-area-inset-left));
    font-size: .85rem;
  }
  #log {
    margin: 0;
    padding: 0 max(24px, env(safe-area-inset-right)) 16px max(24px, env(safe-area-inset-left));
    font: 14px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }

#log, input { direction: ltr; text-align: left; }
nav a { display: inline-block; padding: 4px; font-size: .85rem; }

/* Keep the independent controls and console scroll regions below the switcher. */
body {
  padding-top: 0;
  top: calc(var(--viewport-top, 0px) + 68px + env(safe-area-inset-top));
  height: calc(var(--viewport-height, 100dvh) - 68px - env(safe-area-inset-top));
}
#controls { padding-top: 12px; }