:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif; background: #101417; color: #eef2f0; font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 75% -10%, #243d37 0, transparent 36rem), #101417; }
.shell { width: min(100% - 40px, 960px); margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; }
.topbar { display: flex; justify-content: space-between; align-items: center; padding: 28px 0; border-bottom: 1px solid #28312f; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; }.brand-mark { color: #b7f36b; font-size: 20px; }.connection { color: #8d9894; font-size: 11px; }.connection.online { color: #b7f36b; }
.hero, .practice-card, .result-card, .summary, .error { margin: 11vh auto 0; width: min(100%, 720px); }.eyebrow { color: #b7f36b; font-size: 11px; letter-spacing: .16em; font-weight: 800; }
h1 { font-size: clamp(36px, 7vw, 70px); line-height: .98; letter-spacing: -.06em; margin: 22px 0; max-width: 680px; }.hero p, .summary p, .error p { color: #aab5b0; font-size: 17px; line-height: 1.6; max-width: 590px; }
.start-row { display: flex; gap: 12px; align-items: end; margin-top: 40px; }.start-row label { display: flex; flex-direction: column; gap: 8px; color: #8d9894; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; }input { border: 1px solid #39433f; background: #181e1d; color: #fff; padding: 14px 16px; border-radius: 8px; font-size: 15px; outline: none; }input:focus { border-color: #b7f36b; }
button { border: 0; border-radius: 7px; padding: 14px 18px; cursor: pointer; font: inherit; font-weight: 750; }button:disabled { opacity: .4; cursor: not-allowed; }.primary { background: #b7f36b; color: #182018; }.primary:hover:not(:disabled) { background: #d2ff99; }.secondary { background: #2a3531; color: #fff; }.trust { margin-top: 54px; color: #6f7b76; font-size: 12px; }.trust span { color: #b7f36b; }
.practice-card, .result-card { background: #171e1d; border: 1px solid #2b3632; border-radius: 12px; padding: clamp(22px, 5vw, 48px); }.progress-line { display: flex; justify-content: space-between; color: #9da8a3; font-size: 11px; font-weight: 800; letter-spacing: .12em; }.status-pill { border: 1px solid #596b5e; border-radius: 99px; padding: 4px 8px; color: #b7f36b; }.progress { height: 4px; background: #2b3632; margin: 18px 0 30px; }.progress i { display: block; height: 100%; background: #b7f36b; transition: width .2s; }.source { color: #7e8a84; font-size: 12px; margin-bottom: 30px; }.practice-card h2, .result-card h2, .summary h1, .error h2 { font-size: clamp(25px, 4vw, 38px); line-height: 1.15; letter-spacing: -.03em; }.context, .explanation { color: #aab5b0; line-height: 1.6; }.context-module, .map-module { margin: 22px 0 28px; padding: 18px; border: 1px solid #35413c; border-radius: 10px; background: #121918; }.module-label { color: #b7f36b; font-size: 10px; font-weight: 800; letter-spacing: .14em; margin-bottom: 10px; }.context-module h3 { margin: 0 0 10px; font-size: 21px; }.context-module p { margin: 0; max-height: 290px; overflow-y: auto; color: #c4cec8; line-height: 1.55; white-space: normal; }.map-module img { display: block; width: 100%; height: auto; border: 1px solid #46534b; border-radius: 6px; background: #fff; }.options { display: grid; gap: 10px; margin: 30px 0; }.option { display: flex; align-items: center; gap: 13px; padding: 16px; border: 1px solid #35413c; border-radius: 8px; cursor: pointer; color: #dfe6e2; }.option:hover, .option.chosen { border-color: #b7f36b; background: #202b23; }.option input { position: absolute; opacity: 0; }.option-key { border: 1px solid #637169; border-radius: 5px; min-width: 28px; height: 28px; display: grid; place-items: center; color: #b7f36b; font-size: 12px; }.result-card { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: start; }.result-card button { grid-column: 2; justify-self: start; }.result-icon { font-size: 34px; color: #b7f36b; }.retry .result-icon { color: #ffd166; }.summary-meta { color: #6f7b76; font-size: 12px; margin: 26px 0; }.loading { margin: 20vh auto; text-align: center; color: #aab5b0; }.spinner { display: inline-block; width: 18px; height: 18px; border: 2px solid #35413c; border-top-color: #b7f36b; border-radius: 50%; animation: spin .8s linear infinite; vertical-align: middle; margin-right: 9px; }@keyframes spin { to { transform: rotate(360deg); } }footer { margin-top: auto; padding: 30px 0; color: #5e6a65; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 620px) { .shell { width: min(100% - 28px, 960px); }.start-row { flex-direction: column; align-items: stretch; }.start-row button { margin-top: 4px; }.hero { margin-top: 8vh; }.result-card { grid-template-columns: 1fr; }.result-card button { grid-column: 1; } }