.offline{--o-bg:#f6f8fc;--o-surface:#fff;--o-line:#dde3ee;--o-fg:#0f172a;--o-muted:#52607a;--o-subtle:#8090a8;--o-accent:#2563eb;--o-accent-soft:#2563eb1f;--o-ok:#10b981;--o-bad:#f43f5e;--o-warn:#f59e0b;--o-term:#0b1222;--o-term-fg:#c7d2fe;background:radial-gradient(60rem 30rem at 50% -10%, var(--o-accent-soft), transparent 70%), var(--o-bg);min-height:100%;color:var(--o-fg);text-align:center;-webkit-font-smoothing:antialiased;flex-direction:column;justify-content:center;align-items:center;gap:28px;padding:32px 16px;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;display:flex;position:relative;overflow:hidden}@media (prefers-color-scheme:dark){.offline:not(.offline--light){--o-bg:#070d1c;--o-surface:#0e1629;--o-line:#1e2a44;--o-fg:#e6ecf7;--o-muted:#9aa8c2;--o-subtle:#6b7a96;--o-accent-soft:#2563eb38}}.offline--dark{--o-bg:#070d1c;--o-surface:#0e1629;--o-line:#1e2a44;--o-fg:#e6ecf7;--o-muted:#9aa8c2;--o-subtle:#6b7a96;--o-accent-soft:#2563eb38}.offline__grid{background-image:linear-gradient(var(--o-line) 1px, transparent 1px), linear-gradient(90deg, var(--o-line) 1px, transparent 1px);opacity:.35;pointer-events:none;background-size:40px 40px;animation:18s linear infinite offline-grid;position:absolute;inset:-40px;-webkit-mask-image:radial-gradient(closest-side at 50% 45%,#000 0%,#0000 85%);mask-image:radial-gradient(closest-side at 50% 45%,#000 0%,#0000 85%)}@keyframes offline-grid{to{transform:translate(40px,40px)}}.offline>:not(.offline__grid){position:relative}.offline__scene{width:min(520px,100%);height:auto;overflow:visible}.o-stroke{stroke:var(--o-subtle)}.o-fill-surface{fill:var(--o-surface)}.o-fill-line{fill:var(--o-line)}.o-fill-accent{fill:var(--o-accent)}.o-code{fill:var(--o-accent);opacity:.85;transform-box:fill-box;transform-origin:0;animation:3.2s ease-in-out infinite offline-type}.o-code:nth-of-type(2){fill:var(--o-subtle);animation-delay:.4s}.o-code:nth-of-type(3){animation-delay:.8s}.o-code:nth-of-type(4){fill:var(--o-subtle);animation-delay:1.2s}@keyframes offline-type{0%{transform:scaleX(.1)}40%,80%{transform:scaleX(1)}to{transform:scaleX(.1)}}.o-wave{fill:none;stroke:var(--o-subtle);stroke-width:3px;stroke-linecap:round;opacity:.25;animation:2.4s ease-in-out infinite offline-wave}.o-wave--2{animation-delay:.25s}.o-wave--3{animation-delay:.5s}@keyframes offline-wave{0%,to{opacity:.15}30%{opacity:.9;stroke:var(--o-accent)}60%{opacity:.15}}.o-slash{stroke:var(--o-bad);stroke-width:3.5px;stroke-linecap:round;animation:2.4s step-end infinite offline-blink}@keyframes offline-blink{0%,55%{opacity:1}56%,70%{opacity:.2}71%,to{opacity:1}}.o-cable{fill:none;stroke:var(--o-line);stroke-width:5px;stroke-linecap:round}.o-cable-flow{fill:none;stroke:var(--o-accent);stroke-width:5px;stroke-linecap:round;stroke-dasharray:6 18;opacity:.55;animation:1.1s linear infinite offline-flow}@keyframes offline-flow{to{stroke-dashoffset:-24px}}.o-packet{fill:var(--o-accent);animation:2.6s cubic-bezier(.45,.05,.55,.95) infinite offline-packet}.o-packet--2{animation-delay:.85s}.o-packet--3{animation-delay:1.7s}@keyframes offline-packet{0%{opacity:0;transform:translate(0)}10%{opacity:1}70%{opacity:1;fill:var(--o-accent);transform:translate(78px)}85%{opacity:.8;fill:var(--o-bad);transform:translate(86px)}to{opacity:0;fill:var(--o-bad);transform:translate(86px)translateY(18px)}}.o-plug{transform-box:fill-box;transform-origin:0;animation:2.8s ease-in-out infinite offline-swing}@keyframes offline-swing{0%,to{transform:rotate(-6deg)translate(-2px)}50%{transform:rotate(5deg)translate(3px)}}.o-spark{stroke:var(--o-warn);stroke-width:2.5px;stroke-linecap:round;opacity:0;animation:1.6s ease-out infinite offline-spark}.o-spark--2{animation-delay:.2s}.o-spark--3{animation-delay:.45s}@keyframes offline-spark{0%,60%{opacity:0}65%{opacity:1}80%{opacity:.2}85%{opacity:1}to{opacity:0}}.o-radar{fill:none;stroke:var(--o-accent);stroke-width:1.5px;opacity:0;transform-box:fill-box;transform-origin:50%;animation:3s ease-out infinite offline-radar}.o-radar--2{animation-delay:1s}.o-radar--3{animation-delay:2s}@keyframes offline-radar{0%{opacity:.7;transform:scale(.2)}to{opacity:0;transform:scale(1.6)}}.o-led{fill:var(--o-ok);animation:1.4s steps(2,end) infinite offline-led}.o-led--b{animation-duration:.9s}.o-led--c{animation-duration:1.9s}.o-led--down{fill:var(--o-bad);animation:1.2s ease-in-out infinite offline-pulse}@keyframes offline-led{50%{opacity:.25}}@keyframes offline-pulse{50%{opacity:.3}}.o-cloud{fill:var(--o-surface);stroke:var(--o-subtle);stroke-width:2.5px;animation:5s ease-in-out infinite offline-float}@keyframes offline-float{50%{transform:translateY(-5px)}}.offline__status{border:1px solid var(--o-line);background:var(--o-surface);letter-spacing:.02em;color:var(--o-muted);border-radius:999px;align-items:center;gap:8px;padding:6px 12px;font-size:12px;font-weight:600;display:inline-flex}.offline__dot{background:var(--o-warn);border-radius:50%;width:8px;height:8px;position:relative}.offline__dot:after{content:"";border:2px solid var(--o-warn);border-radius:50%;animation:1.6s ease-out infinite offline-ping;position:absolute;inset:-4px}@keyframes offline-ping{0%{opacity:1;transform:scale(.5)}to{opacity:0;transform:scale(1.6)}}.offline--back .offline__dot,.offline--back .offline__dot:after{background:var(--o-ok);border-color:var(--o-ok)}.offline__title{letter-spacing:-.02em;margin:14px 0 0;font-size:clamp(26px,5vw,34px);font-weight:800;line-height:1.15}.offline__text{max-width:30rem;color:var(--o-muted);margin:10px auto 0;font-size:15px;line-height:1.6}.offline__term{border:1px solid var(--o-line);background:var(--o-term);text-align:left;border-radius:12px;width:min(460px,100%);overflow:hidden;box-shadow:0 20px 50px -20px #02081773}.offline__term-bar{border-bottom:1px solid #ffffff0f;gap:6px;padding:10px 12px;display:flex}.offline__term-bar span{background:#334155;border-radius:50%;width:10px;height:10px}.offline__term-bar span:first-child{background:#f43f5e}.offline__term-bar span:nth-child(2){background:#f59e0b}.offline__term-bar span:nth-child(3){background:#10b981}.offline__term-body{color:var(--o-term-fg);padding:12px 14px 14px;font-family:JetBrains Mono,ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;line-height:1.75}.offline__line{white-space:nowrap;width:0;animation:1s steps(34,end) forwards offline-typeline;display:block;overflow:hidden}.offline__line:first-child{animation-delay:.2s}.offline__line:nth-child(2){color:#fda4af;animation-delay:1.3s}.offline__line:nth-child(3){color:#fda4af;animation-delay:2.3s}.offline__line:nth-child(4){color:#fcd34d;animation-delay:3.3s}@keyframes offline-typeline{to{width:100%}}.offline__prompt{color:#34d399}.offline__cursor{vertical-align:-2px;background:var(--o-term-fg);width:8px;height:1em;margin-left:2px;animation:1s step-end infinite offline-cursor;display:inline-block}@keyframes offline-cursor{50%{opacity:0}}.offline__actions{flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;display:flex}.offline__btn{background:var(--o-accent);font:inherit;color:#fff;cursor:pointer;border:0;border-radius:10px;align-items:center;gap:8px;padding:11px 20px;font-size:14px;font-weight:600;transition:transform .15s,background .15s;display:inline-flex;box-shadow:0 8px 20px -8px #2563ebb3}.offline__btn:hover{background:#1d4ed8}.offline__btn:active{transform:translateY(1px)}.offline__btn:focus-visible{outline:3px solid var(--o-accent-soft);outline-offset:2px}.offline__btn svg{transition:transform .6s}.offline__btn[data-busy=true] svg{animation:.8s linear infinite offline-spin}@keyframes offline-spin{to{transform:rotate(360deg)}}.offline--shake .offline__btn{animation:.4s offline-shake}@keyframes offline-shake{25%{transform:translate(-5px)}75%{transform:translate(5px)}}.offline__hint{color:var(--o-subtle);font-size:12px}.offline__brand{color:var(--o-muted);align-items:center;gap:8px;font-size:13px;font-weight:700;display:inline-flex}.offline__brand img{width:20px;height:20px}@media (max-width:480px){.offline{gap:22px;padding:24px 16px}.offline__term-body{font-size:11.5px}}@media (prefers-reduced-motion:reduce){.offline *,.offline :before,.offline :after{transition:none!important;animation:none!important}.offline__line{width:100%}}
