:root { --bg:#1b1033; --fg:#f3eefc; --acc:#b57bff; --line:#3a2766; color-scheme: dark; }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; background: var(--bg); color: var(--fg); font: 16px system-ui, sans-serif; }
[hidden] { display: none !important; }
#login { display: grid; place-content: center; gap: 1rem; height: 100%; text-align: center; padding: 16px; }
button { background: var(--line); color: var(--fg); border: 0; border-radius: 8px; padding: .6rem .9rem; font: inherit; }
button.on, #go { background: var(--acc); color: #1b1033; font-weight: 600; }
#studio { display: grid; grid-template-rows: auto 1fr auto; height: 100dvh; padding-bottom: env(safe-area-inset-bottom); }
#tabs { display: flex; gap: 6px; padding: 6px 16px; align-items: center; border-bottom: 1px solid var(--line); }
#tabs #app { margin-left: auto; font-size: 13px; opacity: .7; }
#panes { display: grid; grid-template-columns: 1fr 1fr; min-height: 0; }
#preview { width: 100%; height: 100%; border: 0; background: #fff; }
#term { min-height: 0; padding: 4px; }
#keys { display: flex; gap: 4px; overflow-x: auto; padding: 6px 8px; border-top: 1px solid var(--line); }
#keys button { padding: .45rem .7rem; flex: none; }
#keys button.on { background: var(--acc); color: #1b1033; }
@media (min-width: 900px) { #tabs button[data-pane], #keys { display: none; } }
@media (max-width: 899px) {
  #panes { grid-template-columns: 1fr; }
  #studio[data-pane="preview"] #term, #studio[data-pane="term"] #preview { display: none; }
}