.status-page { min-height: 100vh; background: radial-gradient(circle at 80% 12%, rgba(255,102,213,.14), transparent 32%), #100714; }.status-page .site-header { position: fixed; background: rgba(14,8,18,.9); backdrop-filter: blur(14px); }.status-page .nav-current { color: var(--paper); }.status-page .nav-current::after { transform: scaleX(1); }.status-main { width: min(1120px, calc(100% - 80px)); padding: 164px 0 110px; margin: 0 auto; }.status-intro { position: relative; padding: 0 0 70px; overflow: hidden; }.status-intro::after { position: absolute; top: -160px; right: 0; width: 430px; height: 430px; border: 1px solid rgba(255,102,213,.24); border-radius: 50%; content: ""; box-shadow: 0 0 80px rgba(255,102,213,.14), inset 0 0 90px rgba(255,102,213,.1); }.status-intro h1 { margin: 0; color: var(--paper); font-size: clamp(3.5rem, 6vw, 6.4rem); font-weight: 600; line-height: .85; }.status-intro h1 em { color: var(--ice); font-style: normal; }.status-intro > p:not(.eyebrow) { max-width: 460px; margin: 28px 0 24px; color: #c4b2c5; font-size: 14px; line-height: 1.75; }.status-updated { display: inline-flex; gap: 8px; align-items: center; color: var(--mint); font: 10px var(--mono); letter-spacing: .07em; }.status-updated i { width: 7px; height: 7px; border-radius: 50%; background: #78f7c0; box-shadow: 0 0 0 5px rgba(120,247,192,.11); }.status-board { border: 1px solid var(--line); background: rgba(255,255,255,.018); }.status-board-head, .status-row { display: grid; grid-template-columns: 2.1fr 1fr 1.3fr 1fr; gap: 20px; align-items: center; padding: 0 23px; }.status-board-head { height: 48px; border-bottom: 1px solid var(--line); color: #9b849d; font: 9px var(--mono); letter-spacing: .1em; }.status-row { min-height: 98px; transition: background .22s; }.status-row:hover { background: rgba(255,102,213,.06); }.status-product { display: grid; grid-template-columns: 37px 1fr; column-gap: 12px; align-items: center; }.status-product b { display: grid; width: 37px; height: 37px; grid-row: span 2; border: 1px solid rgba(255,102,213,.55); place-items: center; color: var(--mint); font: 600 10px var(--mono); }.status-product strong { color: var(--paper); font: 500 18px var(--display); letter-spacing: -.05em; }.status-product small { margin-top: 2px; color: #a890ab; font: 9px var(--mono); }.status-platform, .status-time { color: #c5b5c7; font: 10px var(--mono); }.status-time { display: flex; gap: 14px; align-items: center; }.status-time i { color: var(--mint); font-size: 16px; font-style: normal; }.status-pill { display: inline-flex; gap: 7px; align-items: center; padding: 8px 10px; font: 600 9px var(--mono); letter-spacing: .05em; }.status-pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }.status-undetected { color: #78f7c0; border: 1px solid rgba(120,247,192,.32); background: rgba(120,247,192,.11); }.status-key { display: flex; gap: 18px; align-items: center; padding-top: 24px; color: #a992ab; font: 10px var(--mono); }.status-key p { margin: 0 7px 0 0; color: var(--paper); font: 500 9px var(--mono); letter-spacing: .1em; }.status-key span { display: flex; gap: 6px; align-items: center; }.status-key > span > i { width: 6px; height: 6px; border-radius: 50%; }.status-updating { background: #ffca76; }.status-detected { background: #ff6b7e; }
@media (max-width: 700px) { .status-main { width: calc(100% - 32px); padding-top: 124px; }.status-intro { padding-bottom: 50px; }.status-intro::after { right: -260px; }.status-board { overflow-x: auto; }.status-board-head, .status-row { min-width: 680px; }.status-key { flex-wrap: wrap; gap: 12px; } }