:root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #143631; background: #f5f8f6; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: radial-gradient(circle at 80% 0%, #e1f3eb 0, transparent 29rem), #f5f8f6; }
:focus-visible { outline: 3px solid #0c7a63; outline-offset: 3px; }
.shell { width: min(100% - 3rem, 70rem); margin: 0 auto; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 5; padding: .7rem 1rem; border-radius: .4rem; background: #fff; color: #143631; box-shadow: 0 2px 10px #00251d33; }
.skip-link:focus { top: 1rem; }
.site-header { border-bottom: 1px solid #d9e4df; background: #fffdfbdb; }
.header-inner, .footer-inner { min-height: 4.75rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: inline-flex; align-items: center; gap: .65rem; color: inherit; text-decoration: none; }
.brand-mark { display: block; width: 2rem; height: 2rem; object-fit: contain; }
.brand strong, .brand small { display: block; line-height: 1.12; }.brand small, .header-note, .section-hint, .freshness, .footer-inner { color: #53706a; font-size: .875rem; }.header-note { margin: 0; }
main { padding: clamp(2.5rem, 7vw, 5.25rem) 0; }.hero { max-width: 48rem; }.eyebrow { margin: 0 0 .6rem; color: #08745e; font-size: .76rem; font-weight: 750; letter-spacing: .11em; text-transform: uppercase; }
h1, h2, p { margin-top: 0; }h1 { max-width: 18ch; margin-bottom: 1.25rem; color: #102f2a; font-size: clamp(2.25rem, 6vw, 4.25rem); letter-spacing: -.0625em; line-height: .98; }h2 { margin-bottom: .25rem; font-size: clamp(1.25rem, 3vw, 1.6rem); letter-spacing: -.03em; }
.overall-status { display: inline-flex; align-items: center; gap: .75rem; padding: .9rem 1.1rem; border: 1px solid #c9d8d2; border-radius: .5rem; background: #fff; color: #183f38; font-weight: 700; }.status-dot { width: .75rem; height: .75rem; border-radius: 50%; background: #6c7d78; box-shadow: 0 0 0 4px #6c7d7820; }.status-operational .status-dot { background: #168762; box-shadow: 0 0 0 4px #16876220; }.status-degraded_performance .status-dot, .status-maintenance .status-dot { background: #c77c09; box-shadow: 0 0 0 4px #c77c0920; }.status-partial_outage .status-dot, .status-major_outage .status-dot { background: #bc3b42; box-shadow: 0 0 0 4px #bc3b4220; }.freshness { margin: 1rem 0 0; line-height: 1.5; }
.section { margin-top: clamp(2.75rem, 6vw, 4.5rem); }.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1rem; }.section-hint { max-width: 26rem; margin: 0; text-align: right; line-height: 1.45; }
.component-list, .notice-list { padding: 0; margin: 0; list-style: none; }.component-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }.component-card, .notice, .empty-state { padding: 1.15rem; border: 1px solid #d4e0db; border-radius: .55rem; background: #fff; }.component-card { min-height: 8rem; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 1.25rem; }.component-name { font-weight: 700; line-height: 1.3; }.component-summary { margin: .4rem 0 0; color: #53706a; font-size: .9rem; line-height: 1.45; }.state-label, .notice-meta { font-size: .8rem; font-weight: 700; color: #4d6761; }.state-label { display: inline-flex; align-items: center; gap: .4rem; }.state-label::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: #6c7d78; }.state-operational::before { background: #168762; }.state-degraded_performance::before, .state-maintenance::before { background: #c77c09; }.state-partial_outage::before, .state-major_outage::before { background: #bc3b42; }
.split-section { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }.notice-panel { padding: clamp(1.25rem, 3vw, 1.75rem); border-radius: .7rem; background: #eaf2ee; }.notice { display: grid; gap: .5rem; margin-top: .75rem; }.notice:first-child { margin-top: 0; }.notice h3 { margin: 0; font-size: 1rem; line-height: 1.4; }.notice p { margin: 0; color: #53706a; font-size: .9rem; line-height: 1.45; }.empty-state { color: #49665f; line-height: 1.45; }.history-list { display: grid; gap: .75rem; }.history-list .notice { margin: 0; }.is-loading { color: #5e766f; }.site-footer { border-top: 1px solid #d9e4df; background: #fffdfb; }.noscript { padding: 1rem; margin: 0; background: #fff6de; color: #5b4300; text-align: center; }
@media (max-width: 720px) { .shell { width: min(100% - 2rem, 70rem); }.header-note { display: none; }.section-heading { display: block; }.section-hint { margin-top: .6rem; text-align: left; }.component-list, .split-section { grid-template-columns: 1fr; }.footer-inner { min-height: auto; padding: 1.25rem 0; align-items: flex-start; flex-direction: column; }.component-card { min-height: 6.5rem; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }