:root { color-scheme: light dark; font: 16px/1.5 system-ui, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100dvh; background: Canvas; color: CanvasText; }
.panel { width: min(28rem, calc(100% - 2rem)); margin: 12vh auto; padding: 2rem; border: 1px solid color-mix(in srgb, CanvasText 18%, transparent); border-radius: 1rem; }
h1 { margin-top: 0; font-size: 1.5rem; }
form { display: grid; gap: .75rem; margin-top: 1rem; }
input, button { min-height: 2.8rem; padding: .65rem .8rem; border: 1px solid color-mix(in srgb, CanvasText 28%, transparent); border-radius: .6rem; font: inherit; }
button { cursor: pointer; font-weight: 650; }
button:disabled { cursor: wait; opacity: .65; }
#status { min-height: 1.5em; }
.toolbar { position: fixed; z-index: 2; inset: 0 0 auto; height: 3.5rem; display: flex; align-items: center; justify-content: space-between; padding: 0 1rem; background: Canvas; border-bottom: 1px solid color-mix(in srgb, CanvasText 18%, transparent); }
.toolbar button { min-height: 2.2rem; }
iframe { position: fixed; inset: 3.5rem 0 0; width: 100%; height: calc(100dvh - 3.5rem); border: 0; background: Canvas; }
.message { margin: 5rem 1rem 1rem; text-align: center; }