@font-face {
    font-family: GlassTTY;
    src: url('/static/vendor/Glass_TTY_VT220.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
    font-display: block;
}
:root { --page-background: #000000; --frame-border: #444444; color-scheme: dark; font-family: system-ui, sans-serif; background: var(--page-background); color: #dddddd; }
@font-face {
    font-family: Bedstead;
    src: url('/static/vendor/bedstead.otf') format('opentype');
    font-style: normal;
    font-weight: normal;
    font-display: block;
}
:root[data-style="original"] { --page-background: #101611; --frame-border: #354d34; color: #c0e3bf; }
@font-face {
    font-family: BBCBitmap;
    src: url('/static/vendor/web_master_512-2y.woff') format('woff');
    font-style: normal;
    font-weight: normal;
    font-display: block;
}
:root[data-style="original"] header p { color: #91a28f; }
@font-face {
    font-family: VT52;
    src: url('/static/vendor/vt52.otf') format('opentype');
    font-style: normal;
    font-weight: normal;
    font-display: block;
}
@font-face {
    font-family: IBMMDA;
    src: url('/static/vendor/web_ibm_mda.woff') format('woff');
    font-style: normal;
    font-weight: normal;
    font-display: block;
}
@font-face {
    font-family: IBMCGA;
    src: url('/static/vendor/web_ibm_cga-2y.woff') format('woff');
    font-style: normal;
    font-weight: normal;
    font-display: block;
}
:root[data-style="mda"] { --frame-border: #315831; color: #80ff80; }
:root[data-style="mda"] header p { color: #80b080; }
:root[data-style="mda"] button { background: #142814; color: #80ff80; border-color: #568856; }
:root[data-style="mda"] dialog { background: #000000; color: #80ff80; border-color: #568856; }
:root[data-style="cga"] { color: #aaaaaa; }
:root[data-style="original"] button { background: #28432b; color: #e0efdd; border-color: #71926d; }
:root[data-style="original"] dialog { background: #101611; color: #c0e3bf; border-color: #71926d; }
body { max-width: 900px; margin: 0 auto 2rem; padding: 0 1rem; }
header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; position: sticky; top: 0; z-index: 30; background: var(--page-background); padding: 1rem 0; }
header > div { min-width: 0; }
h1 { font-size: 1.5rem; margin: 0 0 .25rem; }
header p { margin-bottom: 0; }
header p { color: #aaaaaa; font-size: .85rem; }
button { background: #262626; color: #eeeeee; border: 1px solid #777777; border-radius: .3rem; padding: .6rem 1rem; cursor: pointer; }
button:disabled { opacity: .5; cursor: default; }
main { border: 1px solid var(--frame-border); padding: 1rem; margin: 1.5rem 0; overflow-x: auto; }
#settings-shortcut {
    display: inline-flex; align-items: center; gap: .35rem;
    align-self: flex-start; flex-shrink: 0;
    padding: .2rem .4rem; border: 1px solid var(--frame-border); border-radius: .2rem;
    background: transparent; color: inherit; font: inherit; font-size: .85rem; line-height: 1.2;
}
#settings-shortcut:focus-visible { outline: 1px solid currentColor; outline-offset: 2px; }
dialog { max-width: 30rem; background: #111111; color: #dddddd; border: 1px solid #777777; padding: 1.5rem; }
dialog::backdrop { background: #0009; }
/* Native caret browsing and xterm's DOM cursor are separate from cursorBlink. */
dialog { caret-color: transparent; }
body:has(dialog[open]) #terminal .xterm-cursor { visibility: hidden; }
dialog p { line-height: 1.5; }
#controls-title { margin-top: 0; }
.settings-actions { display: flex; justify-content: space-between; gap: 1rem; }
select { display: block; width: 100%; margin-top: .5rem; padding: .5rem; font: inherit; }

/* Chat keeps the chosen terminal width and uses document scrolling. */
[hidden] { display: none !important; }
.chat-toggle { display: flex; align-items: center; gap: .5rem; margin: 1rem 0; }
.chat-toggle input { accent-color: currentColor; }
/* Reserve the docked row inside the same frame, not as a separate page spacer. */
.chat-mode body { margin-bottom: .25rem; }
.chat-mode main { --chat-dock-padding: 6px; padding-bottom: calc(var(--chat-line-height, 20px) + 2 * var(--chat-dock-padding) + 2px); margin-bottom: .25rem; }
#chat-panel { position: relative; width: calc(var(--chat-columns) * 1ch); margin-inline: auto; line-height: 1.25; }
#chat-output > div { white-space: pre; min-height: 1.25em; }
.chat-command-form {
    position: absolute; top: var(--input-top); left: var(--input-left); right: 0;
    display: flex; align-items: center; margin: 0; font: inherit;
    background: var(--chat-background); color: inherit;
}
.chat-command-line { display: flex; align-items: center; min-width: 0; width: 100%; }
#chat-prompt { display: none; flex: none; white-space: pre; }
#chat-command {
    box-sizing: border-box; min-width: 0; width: 100%; flex: 1;
    padding: 0; border: 0; height: 1.25em; font: inherit; line-height: inherit;
    color: inherit; background: transparent; caret-color: var(--chat-caret);
}
#chat-command:focus { outline: none; }
.chat-command-form.docked {
    position: fixed; top: auto; bottom: var(--dock-bottom); left: var(--dock-left); right: auto;
    box-sizing: border-box; width: var(--dock-width); padding: var(--chat-dock-padding) 1rem;
    z-index: 20; border: 1px solid var(--frame-border);
}
.docked .chat-command-line { flex: 0 1 auto; width: calc(var(--chat-columns) * 1ch); margin-inline: auto; }
.docked #chat-prompt { display: block; }