:root {
    --bg: #0b0c0a;
    --fg: #b7c4a8;
    --dim: #5d6655;
    --hi: #e4ecd8;
    --err: #d98a7a;
    --line: #1c1f19;
    --font: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    height: 100%;
    background: var(--bg);
    color: var(--fg);
    font: 15px/1.45 var(--font);
}

body { overflow: hidden; }

#term {
    height: 100%;
    overflow-y: auto;
    padding: 16px 16px 40vh;
    cursor: text;
    scrollbar-width: thin;
    scrollbar-color: var(--line) transparent;
}

#out {
    margin: 0;
    font: inherit;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

#out .err { color: var(--err); }
#out .dim { color: var(--dim); }
#out .hi { color: var(--hi); }

#inrow {
    display: flex;
    align-items: baseline;
}

#prompt {
    white-space: pre;
    color: var(--dim);
}

#line {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    padding: 0;
    background: transparent;
    color: var(--hi);
    font: inherit;
    caret-color: var(--fg);
}

/* The program's screen: its pixels, and one strip it can never draw over. */
#screen {
    position: fixed;
    inset: 0;
    background: #000;
    display: flex;
    flex-direction: column;
}

#screen[hidden], #editor[hidden] { display: none; }

#fb, #gl {
    flex: 1;
    min-height: 0;
    width: 100%;
    object-fit: contain;
    image-rendering: pixelated;
    cursor: crosshair;
    touch-action: none;
}

#strip {
    flex: none;
    padding: 5px 16px;
    font-size: 12px;
    color: var(--dim);
    background: var(--bg);
    border-top: 1px solid var(--line);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#editor {
    position: fixed;
    inset: 0;
    background: var(--bg);
    display: flex;
    flex-direction: column;
}

#edbar {
    flex: none;
    display: flex;
    gap: 16px;
    padding: 6px 16px;
    font-size: 13px;
    color: var(--dim);
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
    overflow: hidden;
    align-items: center;
}

#edpath { color: var(--hi); }
#edmsg { flex: 1; overflow: hidden; text-overflow: ellipsis; }
#edmsg.err { color: var(--err); }
#edpos { color: var(--fg); }

#edguide-toggle, #edguide-close {
    border: 1px solid var(--line);
    background: transparent;
    color: var(--fg);
    font: inherit;
    cursor: pointer;
}

#edguide-toggle { padding: 1px 7px; }
#edguide-toggle:hover, #edguide-toggle[aria-expanded="true"] { color: var(--hi); border-color: var(--dim); }

#edbody { flex: 1; min-height: 0; display: flex; }
#edcode { position: relative; flex: 1; min-width: 0; overflow: hidden; }

#edtext, #edhighlight {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    border: 0;
    padding: 12px 16px;
    font: 14px/1.5 var(--font);
    tab-size: 4;
    white-space: pre;
}

#edhighlight {
    overflow: hidden;
    pointer-events: none;
    color: var(--fg);
}

#edtext {
    outline: 0;
    resize: none;
    background: transparent;
    color: transparent;
    -webkit-text-fill-color: transparent;
    caret-color: var(--hi);
    overflow: auto;
}

#edtext::selection { background: #34422d; }
#edtext[readonly] { caret-color: transparent; }

.tok-comment { color: var(--dim); font-style: italic; }
.tok-string { color: #d7c986; }
.tok-number { color: #d99a72; }
.tok-keyword { color: #d58db2; }
.tok-type { color: #86b9d7; }
.tok-builtin { color: #9fc987; }
.tok-package { color: #c7a9e8; }

#edguide {
    flex: 0 0 340px;
    overflow: auto;
    padding: 14px 16px 32px;
    border-left: 1px solid var(--line);
    background: #0e100d;
    font-size: 13px;
}

#edguide header { display: flex; align-items: center; justify-content: space-between; color: var(--hi); }
#edguide-close { padding: 0 7px; font-size: 18px; }
#edguide h2 { margin: 20px 0 6px; color: var(--hi); font-size: 13px; font-weight: normal; text-transform: uppercase; letter-spacing: .08em; }
#edguide p { margin: 10px 0; }
#edguide pre { padding: 10px; overflow: auto; color: var(--hi); background: var(--bg); border: 1px solid var(--line); }
#edguide code { color: var(--hi); font: inherit; }
#edguide dl { display: grid; grid-template-columns: minmax(78px, auto) 1fr; gap: 7px 12px; margin: 0; }
#edguide dt, #edguide dd { margin: 0; }
#edguide dt { color: var(--hi); }
#edguide-note { color: var(--dim); }

@media (max-width: 600px) {
    html, body { font-size: 13px; }
    #term { padding: 12px 16px 40vh; }
    #edhelp { display: none; }
    #edpos { display: none; }
    #edguide { position: absolute; inset: 36px 0 0; z-index: 2; border-left: 0; }
}