* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #181818; color: #fff; font-family: Arial, sans-serif; }
a { color: inherit; }
.skip { position: absolute; top: -100px; left: 12px; z-index: 2; background: white; color: #181818; padding: 12px; }
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid #ffb2ca; outline-offset: 4px; }
.layout { min-height: 100vh; display: grid; grid-template-columns: 250px 1fr; }
.sidebar { padding: 36px 24px; border-right: 1px solid #404040; display: flex; flex-direction: column; }
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; font-weight: bold; font-size: 18px; }
.brand img { width: 112px; height: auto; }
nav { display: grid; gap: 6px; margin-top: 82px; }
.nav-label, .eyebrow, .topline, .section-heading > span { font-size: 11px; font-weight: bold; letter-spacing: .12em; color: #b6beca; }
.nav-label { padding: 0 12px 12px; }
nav a { padding: 12px; text-decoration: none; border-radius: 8px; color: #d6dae0; }
nav a:hover, .nav-current { background: #303030; color: white; }
.nav-current { border-left: 3px solid #f2004b; }
.sidebar-note { margin-top: auto; font-size: 13px; color: #b6beca; }
main { padding: 38px clamp(24px, 6vw, 96px); max-width: 1440px; width: 100%; }
.topline { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.environment, .badge { border: 1px solid #62666d; border-radius: 999px; padding: 8px 12px; font-size: 11px; letter-spacing: .04em; color: #e0e2e6; white-space: nowrap; }
.intro { margin: 100px 0 54px; }
.eyebrow { color: #ff92b3; margin: 0 0 18px; }
h1 { font-size: clamp(42px, 6vw, 76px); max-width: 800px; margin: 0; }
.lead { max-width: 570px; font-size: 18px; color: #c5cbd3; }
.notice { display: flex; gap: 16px; padding: 22px; background: #242424; border: 1px solid #555; border-radius: 14px; }
.notice h2 { font: bold 16px Arial, sans-serif; margin: 0; }
.notice p, .module p { margin: 8px 0 0; color: #c5cbd3; }
.status-dot { width: 10px; height: 10px; flex: none; background: #f5a623; border-radius: 50%; margin-top: 4px; }
#modules { margin-top: 72px; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 16px; border-bottom: 1px solid #444; padding-bottom: 18px; }
.section-heading h2 { font-size: 38px; margin: 0; }
.section-heading .eyebrow { margin-bottom: 8px; }
.module { margin-top: 20px; background: #242424; border: 1px solid #444; border-radius: 14px; padding: 24px; display: grid; grid-template-columns: 48px 1fr auto; gap: 16px; align-items: center; }
.module-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 10px; background: #f2004b; font-weight: bold; font-size: 24px; }
.module h3 { margin: 0; font: bold 18px Arial, sans-serif; }
.module-detail { grid-column: 2 / -1; }
footer { margin-top: 100px; padding-top: 22px; border-top: 1px solid #444; color: #b6beca; font-size: 13px; }
footer span { color: #ff92b3; padding: 0 7px; }
@media (max-width: 700px) { .layout { display: block; } .sidebar { padding: 18px 20px; border-right: 0; border-bottom: 1px solid #444; } nav { display: flex; margin-top: 22px; } .nav-label, .sidebar-note { display: none; } main { padding: 28px 20px; } .intro { margin: 70px 0 36px; } .section-heading > span { display: none; } .module { grid-template-columns: 48px 1fr; } .badge { grid-column: 2; justify-self: start; } .module-detail { grid-column: 1 / -1; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }