:root{
    --c1: #0cbafc; /* cyan */
    --c2: #fe0034; /* red */
    --bg-dark: #0b0b0b;
    --card-bg: rgba(255,255,255,0.04);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0;
    font-family: 'Montserrat', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    color:#ffffff;
    background: radial-gradient( circle at 10% 10%, rgba(12,186,252,0.12), transparent 8%),
                radial-gradient( circle at 90% 80%, rgba(254,0,52,0.08), transparent 10%),
                linear-gradient(135deg, rgba(12,186,252,0.15) 0%, rgba(254,0,52,0.12) 50%, rgba(12,186,252,0.06) 100%),
                var(--bg-dark);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:32px;
}

.card{
    width:100%;
    max-width:980px;
    background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
    border: 1px solid rgba(255,255,255,0.04);
    padding:40px;
    border-radius:18px;
    box-shadow: 0 10px 40px rgba(2,6,23,0.6);
    display:grid;
    grid-template-columns: 1fr 380px;
    gap:36px;
    align-items:center;
}

@media (max-width:900px){
    .card{grid-template-columns:1fr; padding:28px;}
}

.left{
    padding-right:8px;
}

.eyebrow{
    display:inline-block;
    font-weight:700;
    font-size:13px;
    letter-spacing:0.06em;
    text-transform:uppercase;
    background: linear-gradient(90deg, var(--c1), var(--c2));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

h1{
    margin:6px 0 12px 0;
    font-size:58px;
    line-height:1;
    letter-spacing:-1px;
    background: linear-gradient(90deg, var(--c2), var(--c1));
    -webkit-background-clip:text;
    color:transparent;
    text-shadow: 0 6px 30px rgba(12,186,252,0.06);
}

p.lead{
    margin:0 0 18px 0;
    color:rgba(255,255,255,0.85);
    font-size:16px;
    max-width:62ch;
}

.actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-top:8px;
}

.btn{
    text-decoration:none;
    padding:12px 18px;
    border-radius:10px;
    font-weight:600;
    display:inline-flex;
    align-items:center;
    gap:10px;
    box-shadow: 0 6px 18px rgba(2,6,23,0.5);
}

.btn-primary{
    background: linear-gradient(90deg, var(--c1), var(--c2));
    color:#0b0b0b;
    border: none;
}

.btn-ghost{
    background: transparent;
    color: rgba(255,255,255,0.9);
    border: 1px solid rgba(255,255,255,0.06);
    backdrop-filter: blur(6px);
}

/* Right panel: graphic */
.right{
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    min-height:180px;
}

.orb{
    width:220px;
    height:220px;
    border-radius:50%;
    background: conic-gradient(from 180deg at 50% 50%, var(--c1), var(--c2), var(--c1));
    filter: blur(18px) saturate(1.1);
    transform: rotate(8deg) translateZ(0);
    box-shadow: 0 24px 60px rgba(12,186,252,0.12), inset 0 -6px 30px rgba(0,0,0,0.25);
}

.orb-stroke{
    position:absolute;
    width:260px;
    height:260px;
    border-radius:50%;
    border: 1px solid rgba(255,255,255,0.04);
    display:inline-block;
    transform: rotate(-10deg);
}

.code{
    margin-top:18px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace;
    font-size:13px;
    color: rgba(255,255,255,0.65);
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));
    padding:10px 12px;
    border-radius:8px;
    display:inline-block;
}

footer{
    margin-top:18px;
    display:flex;
    gap:12px;
    align-items:center;
    justify-content:space-between;
    color:rgba(255,255,255,0.55);
    font-size:13px;
    width:100%;
}

.small{
    color:rgba(255,255,255,0.45);
    font-size:13px;
}

/* subtle float animation for orb */
@keyframes floaty {
    0% { transform: translateY(0) rotate(-8deg); }
    50% { transform: translateY(-10px) rotate(-6deg); }
    100% { transform: translateY(0) rotate(-8deg); }
}
.orb, .orb-stroke { animation: floaty 6s ease-in-out infinite; }

/* Default Error Layout Styles */
.wrap {
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(10px);
    padding: 3rem 2.5rem;
    width: 90%;
    max-width: 700px;
    border-radius: 1rem;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.15);
    box-shadow: 0 15px 45px rgba(0,0,0,0.25);
}

.wrap h1 {
    font-size: 6rem;
    font-weight: 700;
    margin-bottom: 1rem;
    background: linear-gradient(90deg, #ffffff, #e0e0e0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -2px;
}

.wrap p {
    font-size: 1.2rem;
    margin-top: 1rem;
    color: var(--text-light);
    line-height: 1.6;
}

.wrap a {
    display: inline-block;
    margin-top: 2rem;
    padding: 0.8rem 1.6rem;
    background: #fff;
    color: #333;
    font-weight: 600;
    border-radius: 0.5rem;
    text-decoration: none;
    transition: 0.2s;
}

.wrap a:hover {
    background: #f0f0f0;
}