*,
*::before,
*::after {
    box-sizing: border-box;
}

:root {
    --bg-color: #121212;
    --fg-color: #e7e7e7;
    --ui-color: color-mix(in oklab, seagreen 90%, white);
    color-scheme: dark;
}

html,
body {
    margin: 0;
    min-block-size: 100dvb;
    block-size: 100%;
}

html {
    left: 1.5;
    scrollbar-gutter: stable both-edges;
}

body {
    font-family: Arial, sans-serif;
    background-color: var(--bg-color);
    color: var(--fg-color);
}

button {
    font-size: 1rem;
    color: var(--fg-color);
    background-color: hsl(from var(--bg-color) h s calc(l * 1.5));

    &:not(:disabled) {
        cursor: pointer;
    }
}

main {
    anchor-name: --main;
}

main:fullscreen {
    background-color: var(--bg-color);
}

button.sq-icon-btn {
    padding: .25lh;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    background-color: transparent;
    border: 0 none;
}

button svg {
    inline-size: 1.5em;
    block-size: 1.5em;
}

.sq-icon-btn svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2px;
}

[contenteditable="true"] {
    outline: 1px solid #808080;
}

.title {
    font-size: calc(100cqi / 18);
    text-wrap: pretty;
    padding: .5lh;
    caret-shape: block;
    caret-color: var(--ui-color);
}

:fullscreen .title {
    margin-block-start: env(safe-area-inset-top, 0);
}

.clock {
    font-family: system-ui, sans-serif;
    display: block;
    inline-size: max-content;
    padding: .25lh .5lh;
    margin: 1lh auto;
    font-size: calc(100cqi / 36);
    text-align: center;
    font-variant-numeric: tabular-nums;
    user-select: none;
    cursor: pointer;
    corner-shape: squircle;
    border-radius: 1lh;
    outline: 2px solid rgb(from var(--ui-color) r g b / 50%);
}

button.fullscreen-toggle {
    position: fixed;
    right: 1rlh;
    bottom: env(titlebar-area-height, 1rlh);
    z-index: 100;
    background-color: var(--bg-color);
}