/* Страница ошибки: одна и та же на отдельных файлах /errors/*.html и внутри сайта */
.oterr { --ec: 251,191,36; position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0; max-width: 640px; margin: 0 auto; padding: 28px 16px 48px; color: #e5e7eb; font-family: 'Onest', system-ui, sans-serif; }
.oterr-art { position: relative; width: 112px; height: 112px; margin-bottom: 10px; animation: oterrFloat 3.2s ease-in-out infinite; filter: drop-shadow(0 18px 22px rgba(var(--ec), .28)); }
.oterr-art svg { display: block; width: 100%; height: 100%; shape-rendering: crispEdges; }
.oterr-art::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: -20px; height: 10px; border-radius: 50%; background: rgba(0,0,0,.65); filter: blur(5px); animation: oterrShade 3.2s ease-in-out infinite; }
.oterr-code { margin: 6px 0 2px; font: 900 clamp(84px, 24vw, 148px)/1 'Unbounded', 'Onest', system-ui, sans-serif; letter-spacing: -.04em; background: linear-gradient(180deg, #fff 18%, rgb(var(--ec)) 92%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 8px 30px rgba(var(--ec), .32)); }
.oterr-title { margin: 8px 0 8px; color: #fff; font: 800 clamp(20px, 5vw, 28px)/1.2 'Unbounded', 'Onest', system-ui, sans-serif; letter-spacing: -.01em; }
.oterr-text { max-width: 460px; margin: 0; color: #94a3b8; font-size: 15px; line-height: 1.55; font-weight: 500; }
.oterr-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 24px; }
.oterr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 20px; border-radius: 14px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: #fff; font: 800 14px/1 'Onest', system-ui, sans-serif; text-decoration: none; cursor: pointer; transition: transform .15s, background .15s; }
.oterr-btn:hover { background: rgba(255,255,255,.13); transform: translateY(-1px); } .oterr-btn:active { transform: scale(.97); }
.oterr-btn.pri { background: #fff; border-color: #fff; color: #000; } .oterr-btn.pri:hover { background: #e2e8f0; }
.oterr-btn:focus-visible { outline: 2px solid rgb(var(--ec)); outline-offset: 2px; }
.oterr-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 12px; margin-top: 22px; color: #64748b; font-size: 12.5px; font-weight: 600; }
.oterr-ref { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); color: #94a3b8; font: 700 12px/1 ui-monospace, Menlo, Consolas, monospace; cursor: pointer; }
.oterr-ref:hover { color: #fff; border-color: rgba(255,255,255,.2); }
.oterr-timer { font-variant-numeric: tabular-nums; }
@keyframes oterrFloat { 50% { transform: translateY(-9px); } }
@keyframes oterrShade { 50% { opacity: .55; transform: scaleX(.86); } }
@media (prefers-reduced-motion: reduce) { .oterr-art, .oterr-art::after { animation: none; } .oterr-btn { transition: none; } }
@media (max-width: 479px) { .oterr-acts { width: 100%; } .oterr-btn { flex: 1 1 100%; } }
/* Отдельная страница, без остального сайта */
body.oterr-page { margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: radial-gradient(ellipse 70% 45% at 50% 0, rgba(var(--ec, 251,191,36), .12), transparent 70%), #070708; }
.oterr-top { display: flex; align-items: center; justify-content: center; padding: 22px 16px 0; color: #fff; font: 900 18px/1 'Unbounded', 'Onest', system-ui, sans-serif; letter-spacing: .1em; text-decoration: none; }
.oterr-main { flex: 1; display: flex; align-items: center; justify-content: center; }
.oterr-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 0 16px 24px; }
.oterr-list a { padding: 7px 11px; border-radius: 10px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); color: #94a3b8; font: 700 12px/1 ui-monospace, Menlo, Consolas, monospace; text-decoration: none; } .oterr-list a.on, .oterr-list a:hover { color: #000; background: #fff; }