:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #0b1020; color: #f5f7fb; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at top right, #253467 0, #0b1020 42rem); }
a { color: inherit; text-decoration: none; }
.shell { width: min(1120px, calc(100% - 32px)); margin: 0 auto; padding: 72px 0; }
.hero { max-width: 780px; }
.eyebrow, .tag { color: #9eb3ff; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
h1 { max-width: 760px; margin: 14px 0; font-size: clamp(42px, 7vw, 78px); line-height: .98; letter-spacing: -.06em; }
h2 { letter-spacing: -.03em; }
.lede { color: #b9c2d9; font-size: 20px; line-height: 1.6; max-width: 680px; }
.scene-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.scene-card, .account-card, .tool-card, .side-card { border: 1px solid #2a3556; border-radius: 22px; background: rgba(17, 25, 48, .82); box-shadow: 0 20px 60px rgba(0,0,0,.18); }
.scene-card { display: block; min-height: 220px; padding: 24px; transition: transform .2s, border-color .2s; }
.scene-card:hover { transform: translateY(-4px); border-color: #8ca2ff; }
.scene-card h3 { font-size: 24px; margin: 22px 0 10px; }
.scene-card p, .hint { color: #9da9c5; line-height: 1.6; }
.link { display: inline-block; margin-top: 20px; color: #b6c4ff; font-weight: 700; }
.account-card { margin: 44px 0 72px; padding: 24px; }
.account-card strong { font-size: 20px; }
.auth-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; }
form { display: grid; gap: 12px; }
input, textarea, select { width: 100%; border: 1px solid #344268; border-radius: 12px; background: #0d152b; color: #fff; padding: 13px 14px; font: inherit; }
textarea { min-height: 150px; resize: vertical; }
button { cursor: pointer; border: 0; border-radius: 12px; background: var(--brand, #8da2ff); color: #0b1020; padding: 13px 16px; font-weight: 800; font: inherit; }
button:hover { filter: brightness(1.12); }
.tool-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; }
.tool-card, .side-card { padding: 24px; margin-top: 28px; }
.tool-card label { display: grid; gap: 8px; color: #cbd3e7; font-weight: 700; }
.back { color: #aab8ef; font-weight: 700; }
.result { margin-top: 18px; white-space: pre-wrap; overflow: auto; padding: 20px; border: 1px solid #354570; border-radius: 16px; background: #070c18; color: #dfe6ff; line-height: 1.6; }
.form-status { min-height: 22px; color: #aebce9; }
.side-card ol { display: grid; gap: 18px; padding-left: 0; list-style: none; }
.side-card li { display: flex; gap: 12px; align-items: center; color: #c9d1e5; }
.side-card li span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #26365d; color: #b8c5ff; font-size: 12px; font-weight: 800; }
footer { width: min(1120px, calc(100% - 32px)); margin: 0 auto; padding: 0 0 32px; color: #71809e; font-size: 13px; }
@media (max-width: 760px) { .scene-grid, .auth-grid, .tool-layout { grid-template-columns: 1fr; } .shell { padding: 40px 0; } h1 { font-size: 48px; } }