:root {
    --px: min(1px, calc((100vh - 40px) / 656), calc((100vw - 40px) / 336));
    --px: min(1px, calc((100dvh - 40px) / 656), calc((100vw - 40px) / 336));

    --screen-w: calc(320 * var(--px));
    --screen-h: calc(640 * var(--px));
    --bezel: calc(8 * var(--px));
    --radius-device: calc(38 * var(--px));

    --void: #000000;
    --shell-dark: #14141a;
    --shell-mid: #23232c;
    --shell-light: #3a3a46;

    --screen: #08080c;
    --text: #f3f3f7;

    --glitch-r: 255 0 68;
    --glitch-b: 0 232 255;
    --glitch-g: 205 255 92;

    --glitch-burst: 340ms;

    --intro-warn-w: min(34rem, calc(100vw - 40px));
    --intro-warn-pad: clamp(1.25rem, 4vw, 2rem);
    --intro-warn-radius: 6px;
}

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html {
    background: var(--void);

    color-scheme: dark;
}

body {
    margin: 0;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--void);
    color: var(--text);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    overflow: hidden;
    user-select: none;
}

span {
    display: block;
}

[hidden] {
    display: none !important;
}