@font-face { font-family: "e-Ukraine"; src: url("/_noleron_errors/fonts/e-Ukraine-Light.otf") format("opentype"); font-weight: 300; font-display: swap; }
@font-face { font-family: "e-Ukraine"; src: url("/_noleron_errors/fonts/e-Ukraine-Regular.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "e-Ukraine"; src: url("/_noleron_errors/fonts/e-Ukraine-Medium.otf") format("opentype"); font-weight: 500 800; font-display: swap; }

:root {
    --bg: #181b23;
    --fg: #f1f2f2;
    --surface: #20242e;
    --border: #353b47;
    --muted: #9a9faa;
    --pattern: rgba(241, 242, 242, .025);
    color-scheme: dark;
    font-family: "e-Ukraine", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
.lang-uk { display: none; }
html[lang="uk"] .lang-en { display: none; }
html[lang="uk"] .lang-uk { display: inline; }
html { min-width: 320px; min-height: 100%; }

body {
    position: relative;
    isolation: isolate;
    min-height: 100dvh;
    margin: 0;
    padding: 30px 24px;
    overflow: hidden;
    display: grid;
    place-items: center;
    color: var(--fg);
    background: var(--bg);
    font-weight: 300;
    line-height: 1.55;
}

body::before {
    content: "project noleron   project noleron   project noleron   project noleron   project noleron   project noleron\A project noleron   project noleron   project noleron   project noleron   project noleron   project noleron\A project noleron   project noleron   project noleron   project noleron   project noleron   project noleron\A project noleron   project noleron   project noleron   project noleron   project noleron   project noleron\A project noleron   project noleron   project noleron   project noleron   project noleron   project noleron\A project noleron   project noleron   project noleron   project noleron   project noleron   project noleron\A project noleron   project noleron   project noleron   project noleron   project noleron   project noleron\A project noleron   project noleron   project noleron   project noleron   project noleron   project noleron\A project noleron   project noleron   project noleron   project noleron   project noleron   project noleron\A project noleron   project noleron   project noleron   project noleron   project noleron   project noleron\A project noleron   project noleron   project noleron   project noleron   project noleron   project noleron\A project noleron   project noleron   project noleron   project noleron   project noleron   project noleron";
    position: fixed;
    z-index: -1;
    inset: -20vh -20vw;
    overflow: hidden;
    color: var(--pattern);
    font-size: clamp(3.2rem, 7vw, 7rem);
    font-weight: 500;
    line-height: 1.55;
    letter-spacing: -.05em;
    white-space: pre;
    transform: rotate(4deg) scale(1.08);
    pointer-events: none;
    user-select: none;
}

main { width: min(680px, 100%); }
.brand { margin: 0 0 26px; display: flex; align-items: center; gap: 17px; color: var(--fg); text-decoration: none; }
.brand svg {
    width: 76px;
    height: 76px;
    flex: 0 0 76px;
    display: block;
    background: url("/_noleron_errors/images/main_logo_noleron_dark.svg") center / contain no-repeat;
}
.brand svg path { display: none; }
.brand-copy { display: flex; flex-direction: column; }
.brand-name { font-size: 1.7rem; font-weight: 500; line-height: 1.05; letter-spacing: -.025em; }
.brand-tagline { margin-top: 7px; max-width: 340px; color: var(--muted); font-size: .74rem; }
.error-card { padding: clamp(26px, 6vw, 50px); border: 1px solid var(--border); border-radius: 14px; background: color-mix(in srgb, var(--surface) 94%, transparent); }
.error-code { margin: 0 0 8px; color: var(--muted); font-size: clamp(3.8rem, 14vw, 7.2rem); font-weight: 500; line-height: .9; letter-spacing: -.07em; }
h1 { margin: 0; font-size: clamp(1.65rem, 5vw, 2.4rem); font-weight: 500; line-height: 1.12; letter-spacing: -.035em; }
p { margin: 16px 0 0; color: var(--muted); }
.actions { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--border); display: flex; }
.action { min-height: 46px; padding: .72rem 1.15rem; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: var(--bg); background: var(--fg); font-size: .82rem; font-weight: 500; text-decoration: none; transition: opacity .16s ease, transform .16s ease; }
.action:hover { opacity: .84; transform: translateY(-1px); }
.action:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }

@media (prefers-color-scheme: light) {
    :root { --bg: #f1f2f2; --fg: #231f20; --surface: #fff; --border: #d1d2d4; --muted: #66676c; --pattern: rgba(35, 31, 32, .035); color-scheme: light; }
    .brand svg { background-image: url("/_noleron_errors/images/main_logo_noleron_light.svg"); }
}

@media (max-width: 560px) {
    body { padding: 22px 16px; overflow-y: auto; }
    .brand { margin-bottom: 18px; gap: 13px; }
    .brand svg { width: 60px; height: 60px; flex-basis: 60px; }
    .brand-name { font-size: 1.4rem; }
    .brand-tagline { font-size: .67rem; }
    .error-card { padding: 26px 22px; }
    .action { width: 100%; }
}

@media (prefers-reduced-motion: reduce) { * { transition-duration: .01ms !important; } }