:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #0b1020; color: #f4f7ff; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: radial-gradient(circle at 90% 0%, #25386d 0, transparent 32rem), #0b1020; }
.shell { max-width: 900px; margin: 0 auto; padding: 64px 24px; }
header { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; margin-bottom: 48px; }
.eyebrow, .label { color: #9cb2ff; font-size: .72rem; font-weight: 750; letter-spacing: .13em; margin: 0 0 10px; }
h1 { font-size: clamp(2rem, 6vw, 3.7rem); letter-spacing: -.06em; line-height: 1; margin: 0; }
.subhead { color: #b8c2df; margin: 12px 0 0; font-size: 1.1rem; }
.connection { border: 1px solid #435a99; border-radius: 99px; color: #dce5ff; font-size: .84rem; padding: 8px 12px; white-space: nowrap; }
.connection.live { border-color: #397e68; color: #a6ead2; }.connection.error { border-color: #98525c; color: #ffc1c9; }
.hero, .card { border: 1px solid #2d3a5f; border-radius: 20px; background: rgba(17, 26, 50, .84); box-shadow: 0 16px 50px rgba(0,0,0,.2); }
.hero { padding: clamp(28px, 5vw, 52px); margin-bottom: 22px; }
h2 { font-size: clamp(1.6rem, 4vw, 2.6rem); letter-spacing: -.045em; line-height: 1.1; margin: 0 0 16px; }
.hero p:not(.label) { color: #c7d0e9; font-size: 1.08rem; line-height: 1.6; margin: 0; }
.grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 22px; }.card { padding: 28px; }
.tasks { margin: 0; padding: 0; list-style: none; }.tasks li { border-top: 1px solid #2d3a5f; color: #dce5ff; line-height: 1.45; padding: 14px 0; }.tasks li:first-child { border-top: 0; padding-top: 0; }
.metadata #updated { font-size: 1.25rem; font-weight: 650; margin: 0 0 16px; }.hint { color: #9eaccd; font-size: .9rem; line-height: 1.5; margin: 0; }
@media (max-width: 650px) { .shell { padding: 32px 18px; } header { display: block; margin-bottom: 32px; }.connection { display: inline-block; margin-top: 20px; }.grid { grid-template-columns: 1fr; } }