:root {
    color-scheme: light;
    --green-dark: #096432;
    --green: #178342;
    --lime: #73bd16;
    --ink: #26332b;
    --muted: #536057;
    --card: rgba(255, 255, 255, 0.96);
}

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
    margin: 0;
}

body {
    color: var(--ink);
    background:
        radial-gradient(circle at 50% 100%, rgba(115, 189, 22, 0.13), transparent 38rem),
        linear-gradient(135deg, #ffffff 0%, #fbfdf9 50%, #f2f8ed 100%);
    font-family: Arial, Helvetica, sans-serif;
}

body::before,
body::after {
    position: fixed;
    z-index: -1;
    width: 48rem;
    height: 20rem;
    content: "";
    border: 1px solid rgba(62, 145, 50, 0.08);
    border-radius: 50%;
    transform: rotate(16deg);
}

body::before {
    right: -18rem;
    bottom: -9rem;
}

body::after {
    bottom: -12rem;
    left: -20rem;
    transform: rotate(-16deg);
}

.page-shell {
    display: grid;
    min-height: 100vh;
    min-height: 100svh;
    place-items: center;
    padding: 32px 18px;
}

.notice-card {
    width: min(100%, 720px);
    padding: 38px 56px 42px;
    text-align: center;
    background: var(--card);
    border: 1px solid rgba(9, 100, 50, 0.12);
    border-radius: 16px;
    box-shadow: 0 18px 55px rgba(32, 82, 45, 0.16);
}

.brand-logo {
    display: block;
    width: 142px;
    height: 142px;
    margin: 0 auto 12px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(9, 100, 50, 0.14);
}

.maintenance-icon {
    width: 104px;
    margin: 0 auto 8px;
}

.maintenance-icon svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.gear {
    fill: #24874a;
    stroke: #126b39;
    stroke-linejoin: round;
    stroke-width: 2;
}

.gear-center {
    fill: #dff0c6;
}

.wrench {
    fill: none;
    stroke: #9ace3c;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 6;
}

.orbit,
.orbit-arrow {
    fill: none;
    stroke: #9ace3c;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 3;
}

h1 {
    margin: 6px 0 12px;
    color: var(--green-dark);
    font-size: clamp(1.65rem, 4vw, 2.15rem);
    line-height: 1.18;
}

.status {
    margin: 0 0 22px;
    color: var(--lime);
    font-size: clamp(1.05rem, 2.6vw, 1.28rem);
    font-weight: 700;
    line-height: 1.35;
}

.message {
    max-width: 590px;
    margin: 0 auto;
    font-size: 1.05rem;
    line-height: 1.62;
}

.message p {
    margin: 0 0 14px;
}

.message strong {
    color: var(--green-dark);
}

.closing {
    margin: 22px 0 0;
    color: var(--muted);
    font-size: 1rem;
}

@media (max-width: 620px) {
    .page-shell {
        padding: 18px 12px;
    }

    .notice-card {
        padding: 28px 22px 32px;
        border-radius: 14px;
    }

    .brand-logo {
        width: 116px;
        height: 116px;
    }

    .maintenance-icon {
        width: 88px;
    }

    .message {
        font-size: 1rem;
        line-height: 1.55;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .notice-card {
        animation: appear 500ms ease-out both;
    }

    @keyframes appear {
        from {
            opacity: 0;
            transform: translateY(12px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}