@font-face {
    font-family: "Onest";
    font-display: swap;
    font-style: normal;
    font-weight: 100 900;
    src: url("../fonts/onest-cyrillic-variable.woff2") format("woff2");
    unicode-range: U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

@font-face {
    font-family: "Onest";
    font-display: swap;
    font-style: normal;
    font-weight: 100 900;
    src: url("../fonts/onest-latin-variable.woff2") format("woff2");
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
    color-scheme: dark;
    --canvas-tone: #0c0d10;
    --layer-low: #121419;
    --layer-high: #181b21;
    --input-bed: #0f1115;
    --copy-bright: #f7f7f5;
    --copy-soft: #c4c7cc;
    --copy-dim: #858a94;
    --flare: #ff7c1d;
    --sun: #f4b942;
    --alert: #ff6b62;
    --healthy: #53d598;
    --edge-soft: #2a2e36;
    --edge-hot: #4a505b;
    --flare-rgb: 255, 124, 29;
    --sun-rgb: 244, 185, 66;
    --ui-face: "Onest", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --mono-face: "SFMono-Regular", Consolas, "Liberation Mono", "Courier New", monospace;
    --control-round: 0.75rem;
    --card-round: 1.125rem;
    --floating-shadow: 0 1.375rem 3.375rem rgba(0, 0, 0, 0.34);
}

html:lang(zh-Hans) {
    --ui-face: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

html:lang(ja) {
    --ui-face: "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", system-ui, sans-serif;
}

html:lang(hi) {
    --ui-face: "Noto Sans Devanagari", "Kohinoor Devanagari", "Mangal", system-ui, sans-serif;
}

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

html {
    min-block-size: 100%;
    scroll-behavior: smooth;
    background-color: var(--canvas-tone);
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)' opacity='.1'/%3E%3C/svg%3E"),
        linear-gradient(to bottom, rgba(var(--sun-rgb), 0.035), transparent 30rem),
        linear-gradient(#11110f 0%, #0c0d10 44%, #08090b 100%);
    background-attachment: fixed;
    background-blend-mode: soft-light, normal, normal;
    background-position: 0 0, top center, center;
    background-repeat: repeat, no-repeat, no-repeat;
    background-size: 10rem 10rem, cover, cover;
}

body {
    min-block-size: 100vh;
    margin: 0;
    color: var(--copy-bright);
    background: transparent;
    font: 450 1rem/1.5 var(--ui-face);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

body::before,
body::after { display: none; }

a { color: var(--flare); }
button,
input,
select,
textarea { font: inherit; }
button { cursor: pointer; }
img,
svg { max-inline-size: 100%; }

::selection {
    color: #1b0c04;
    background-color: var(--sun);
}

::-webkit-scrollbar-track { background-color: #17110d; }
::-webkit-scrollbar-thumb {
    border-color: #17110d;
    background-color: #73513c;
}

.viewport-rail,
.content-rail {
    inline-size: min(calc(100% - 1.25rem), 67.625rem);
    margin-inline: auto;
}

.scene {
    min-block-size: calc(100vh - 10.75rem);
    padding-block: 0.875rem 1.75rem;
}

@supports (height: 100svh) {
    .scene { min-block-size: calc(100svh - 10.75rem); }
}

.a11y-clip {
    position: absolute !important;
    inline-size: 0.0625rem !important;
    block-size: 0.0625rem !important;
    margin: -0.0625rem !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
}

.response-note {
    margin: 0 0 0.75rem;
    padding: 0.75rem 0.875rem;
    color: var(--copy-bright);
    border: 0.0625rem solid var(--edge-soft);
    border-radius: 1rem;
    background-color: var(--layer-low);
    font-weight: 800;
    line-height: 1.45;
}

.response-note--fault {
    color: var(--alert);
    border-color: rgba(221, 79, 74, 0.33);
    background-color: rgba(221, 79, 74, 0.075);
    box-shadow: none;
}

@media (min-width: 48.125rem) {
    .viewport-rail,
    .content-rail { inline-size: min(calc(100% - 2.125rem), 67.625rem); }
    .scene { padding-block: clamp(1.125rem, 3.9vw, 3.0625rem); }
}