.hidden {
    display: none !important;
}

body {
    background-color: oklch(0.2 0.015 100)
}


/* 
html {
    --border-radius: 10px;
    --border-width: 4px;
    --border-width-double: 2px;
    --chroma-high: 0;
    --chroma-mid: 0;
    --chroma-low: 0;
    --lightness-high: 0.75;
    --lightness-mid: 0.50;
    --lightness-low: 0.25;
    --neon: 0;
}






.main-view {
    display: grid;
    flex: 1 1 0;
    width: 100%;
}
.main-view > .header,
.main-view > .tab {
    display: flex;
}
.main-view > .header > *,
.main-view > .tab > * {
    border-right: var(--border-width) solid oklch(var(--lightness-high) var(--chroma-high) var(--neon));
}
.main-view > .header > *:last-child,
.main-view > .tab > *:last-child {
    border-right: none;
}
.main-view > .header > button {
    font-size: 20px;
    text-align: center;
}
.main-view > .tab > button {
    font-size: 12px;
    text-align: center;
}
.main-view > .header > span {
    background-color: oklch(var(--lightness-high) var(--chroma-high) var(--neon));
    color: black;
    flex: 1 1 auto;
    font-size: 20px;
    padding: 8px;
    text-align: center;
}
.main-view > .editor {
    display: flex;
    flex-direction: column;
}
.main-view > .main {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
@media (orientation: portrait) {
    .main-view {
        grid-template-rows: 42px auto 1fr auto;
    }
    .main-view > .header {
        border-bottom: var(--border-width) solid oklch(var(--lightness-high) var(--chroma-high) var(--neon));
        grid-row-start: 1;
    }
    .main-view > .main {
        display: none;
    }
    .main-view > .editor {
        grid-row-start: 2;
        grid-row-end: span 2;
    }
    .main-view > .tab {
        border-top: var(--border-width) solid oklch(var(--lightness-high) var(--chroma-high) var(--neon));
        grid-row-start: 4;
    }
    .main-view.has-main-content:not(.virtual-keyboard.editor-focus) > .main {
        border-bottom: var(--border-width) solid oklch(var(--lightness-high) var(--chroma-high) var(--neon));
        display: flex;
        grid-row-start: 2;
        min-height: 100vw;
    }
    .main-view.has-main-content:not(.virtual-keyboard.editor-focus) > .editor {
        grid-row-start: 3;
        grid-row-end: span 1;
    }
    .main-view.has-main-content.virtual-keyboard.main-focus > .main {
        grid-row-end: span 2;
    }
    .main-view.has-main-content.virtual-keyboard.main-focus > .editor {
        display: none;
    }
}
@media (orientation: landscape) {
    .main-view {
        grid-template-columns: 500px 1fr;
        grid-template-rows: 42px min-content 1fr;
    }
    .main-view > .header {
        border-bottom: var(--border-width) solid oklch(var(--lightness-high) var(--chroma-high) var(--neon));
        grid-column-start: 1;
        grid-row-start: 1;
    }
    .main-view > .tab {
        border-bottom: var(--border-width) solid oklch(var(--lightness-high) var(--chroma-high) var(--neon));
        grid-column-start: 1;
        grid-row-start: 2;
    }
    .main-view > .editor {
        grid-column-start: 1;
        grid-row-start: 3;
    }
    .main-view > .main {
        border-left: var(--border-width) solid oklch(var(--lightness-high) var(--chroma-high) var(--neon));
        grid-column-start: 2;
        grid-row-start: 1;
        grid-row-end: span 3;
    }
}
















.popup {
    background-color: black;
    border: var(--border-width) solid oklch(var(--lightness-high) var(--chroma-high) var(--neon));
    border-radius: var(--border-radius);
    display: flex;
    flex-direction: column;
}
.popup > span {
    color: oklch(var(--lightness-high) var(--chroma-high) var(--neon));
    padding: 10px;
}
.popup > button,
.popup > input,
.popup > div > button,
.popup > div > input {
    background-color: oklch(var(--lightness-low) var(--chroma-low) var(--neon));
    color: oklch(var(--lightness-high) var(--chroma-high) var(--neon));
    padding: 10px;
}
.popup > button:hover,
.popup > button.hover,
.popup > input:hover,
.popup > input.hover,
.popup > div > button:hover,
.popup > div > button.hover,
.popup > div > input:hover,
.popup > div > input.hover {
    background-color: oklch(var(--lightness-mid) var(--chroma-mid) var(--neon));
    color: black;
}
.popup > button.active,
.popup > input.active,
.popup > div > button.active,
.popup > div > input.active {
    background-color: oklch(var(--lightness-high) var(--chroma-high) var(--neon));
    color: black;
}
.popup > * {
    border-bottom: var(--border-width) solid oklch(var(--lightness-high) var(--chroma-high) var(--neon));
}
.popup > *:last-child {
    border-bottom: none;
}
.popup > div {
    display: flex;
}
.popup > div > * {
    border-right: var(--border-width) solid oklch(var(--lightness-high) var(--chroma-high) var(--neon));
}
.popup > div > *:last-child {
    border-right: none;
} */