: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; }
.topnav { display: flex; align-items: center; gap: 18px; }.topnav .link-button { margin: 0; text-transform: none; letter-spacing: 0; }.achievements-nav { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid #596e50; border-radius: 9px; color: #c9ff8e; font-size: 16px; font-weight: 800; background: rgba(183,243,107,.06); }.achievements-nav:hover { border-color: #b7f36b; background: rgba(183,243,107,.14); }.achievements-nav-icon { display: inline-grid; place-items: center; font-size: 23px; line-height: 1; filter: saturate(1.2); }.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; }.user-indicator { width: 34px; height: 34px; padding: 7px; border: 1px solid #53615a; border-radius: 50%; background: #1b2521; color: #b7f36b; display: grid; place-items: center; }.user-indicator:hover { border-color: #b7f36b; }.user-indicator svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.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; }
.link-button { display: block; margin-top: 34px; padding: 0; background: transparent; color: #b7f36b; font-size: 13px; }.link-button:hover { color: #e1ffbb; }
.period-selector { min-width: min(100%, 390px); padding: 18px 22px; border: 1px solid #526b58; border-radius: 12px; background: linear-gradient(135deg, #1c3024, #15231c); box-shadow: inset 0 0 0 1px rgba(183,243,107,.06); }.period-selector span { display: block; margin-bottom: 8px; color: #91b49a; font-size: 10px; font-weight: 800; letter-spacing: .16em; }.period-selector strong { display: block; color: #d8ffad; font-size: clamp(22px, 3vw, 32px); line-height: 1.08; letter-spacing: -.03em; }
.achievements-page { margin: 7vh auto 5vh; width: min(100%, 900px); }.page-heading { display: flex; justify-content: space-between; gap: 30px; align-items: end; margin-bottom: 30px; }.page-heading h1 { margin: 16px 0 12px; }.page-heading p { max-width: 650px; color: #aab5b0; line-height: 1.55; font-size: 16px; }
.achievement-legend { display: flex; gap: 10px 18px; flex-wrap: wrap; align-items: center; color: #87928c; font-size: 12px; border-top: 1px solid #28312f; border-bottom: 1px solid #28312f; padding: 16px 0; margin-bottom: 20px; }.legend-trophy, .legend-gold { color: #68736d; font-size: 17px; }.legend-gold { color: #e6b75c; }
.achievement-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }.achievement-card { display: grid; grid-template-columns: 112px 1fr; gap: 18px; align-items: center; min-height: 176px; padding: 18px; border: 1px solid #2b3632; border-radius: 12px; background: linear-gradient(135deg, #171e1d, #121817); }.achievement-card.has-progress { border-color: #527d5b; background: linear-gradient(135deg, #18261f, #141b18); }.achievement-card.is-complete { border-color: #846a32; background: linear-gradient(135deg, #211f18, #171814); }
.period-grid { display: grid; gap: 16px; }.period-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .9fr); gap: 20px; padding: 20px; border: 1px solid #2b3632; border-radius: 14px; background: linear-gradient(135deg, #171e1d, #121817); }.period-card.has-progress { border-color: #527d5b; background: linear-gradient(135deg, #18261f, #141b18); }.period-card.is-complete { border-color: #846a32; background: linear-gradient(135deg, #211f18, #171814); }.period-main { display: grid; grid-template-columns: 112px 1fr; gap: 18px; align-items: center; }.module-diamonds { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }.module-diamond { display: grid; grid-template-columns: 24px 1fr; gap: 8px; align-items: center; padding: 9px 10px; border: 1px solid #2b3632; border-radius: 9px; background: #111716; }.module-diamond.has-progress { border-color: #446b4c; }.module-diamond.is-complete { border-color: #80662f; }.diamond-mark { color: #68736d; font-size: 17px; }.module-diamond.has-progress .diamond-mark { color: #83d88e; }.module-diamond.is-complete .diamond-mark { color: #f0c868; }.module-diamond b { display: block; color: #dbe5df; font-size: 12px; line-height: 1.25; }.module-diamond small { display: block; margin-top: 3px; color: #89958e; font-size: 10px; }.module-diamond i { display: block; height: 3px; margin-top: 6px; overflow: hidden; border-radius: 99px; background: #2d3833; }.module-diamond em { display: block; height: 100%; border-radius: inherit; background: #737e77; }.module-diamond.has-progress em { background: #77d985; }.module-diamond.is-complete em { background: #e2b85d; }
.trophy { position: relative; width: 100px; height: 122px; display: grid; place-items: center; }.trophy svg { width: 100px; height: 100px; overflow: visible; }.trophy-base { fill: #59645e; }.trophy-fill { fill: #dcae4e; }.has-progress .trophy-base { fill: #3d6949; }.has-progress .trophy-fill { fill: #8ee890; }.trophy-complete .trophy-base { fill: #a67a2e; }.trophy-complete .trophy-fill { fill: #ffd978; }.laurel { fill: none; stroke: #f2ce76; stroke-width: 3; stroke-linecap: round; }.trophy span { position: absolute; bottom: 0; color: #aeb9b3; font-size: 12px; font-weight: 800; }.has-progress .trophy span { color: #9de6a2; }.trophy-complete span { color: #f2ce76; }
.achievement-kicker { color: #7f8a84; font-size: 9px; font-weight: 800; letter-spacing: .12em; }.has-progress .achievement-kicker { color: #9de6a2; }.is-complete .achievement-kicker { color: #e5bd68; }.achievement-copy h2 { margin: 8px 0; font-size: 18px; line-height: 1.18; letter-spacing: -.02em; }.achievement-copy p { margin: 0 0 12px; color: #87938d; font-size: 12px; line-height: 1.45; }.mastery-bar { height: 5px; overflow: hidden; border-radius: 99px; background: #2d3833; }.mastery-bar i { display: block; height: 100%; border-radius: inherit; background: #737e77; transition: width .3s; }.has-progress .mastery-bar i { background: #77d985; }.is-complete .mastery-bar i { background: #e2b85d; }.mastery-caption { display: block; margin-top: 7px; color: #9aa59f; font-size: 11px; }.has-progress .mastery-caption { color: #a7e8ab; }
.period-metrics { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0 14px; }.period-metrics span { display: inline-flex; gap: 5px; align-items: baseline; padding: 5px 8px; border: 1px solid #35413c; border-radius: 6px; color: #8f9b94; font-size: 10px; }.period-metrics b { color: #dce7df; font-size: 12px; }.has-progress .period-metrics span { border-color: #45664c; }.has-progress .period-metrics b { color: #b7f36b; }.is-complete .period-metrics span { border-color: #80662f; }.is-complete .period-metrics b { color: #ffd978; }
.metric-help { color: #84928a !important; font-size: 13px !important; }
@media (max-width: 720px) { .page-heading { align-items: start; flex-direction: column; }.achievement-grid { grid-template-columns: 1fr; }.period-card { grid-template-columns: 1fr; }.period-main { grid-template-columns: 100px 1fr; } }
.account-panel { margin: 30px 0; padding: 20px; border: 1px solid #2b3632; border-radius: 12px; background: #171e1d; }.account-panel h2 { margin: 0 0 8px; font-size: 22px; }.account-panel p { margin: 0 0 16px; color: #aab5b0; font-size: 14px; }.account-panel form { display: grid; gap: 10px; }.account-actions, .round-actions { display: flex; gap: 10px; flex-wrap: wrap; }.round-infographic { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: center; margin: 28px 0; }.score-ring { --score: 0%; width: 132px; height: 132px; border-radius: 50%; display: grid; place-content: center; text-align: center; background: radial-gradient(circle, #171e1d 57%, transparent 58%), conic-gradient(#b7f36b var(--score), #35413c 0); animation: score-in .7s ease-out both; }.score-ring strong { font-size: 25px; }.score-ring span, .metric span { display: block; color: #89958e; font-size: 11px; }.metric { padding: 16px 10px; border: 1px solid #35413c; border-radius: 9px; text-align: center; animation: metric-in .5s ease-out both; }.metric b { display: block; color: #b7f36b; font-size: 22px; }.metric.wrong b { color: #ffd166; }@keyframes score-in { from { transform: scale(.8); opacity: .3; } to { transform: scale(1); opacity: 1; } }@keyframes metric-in { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }.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; }.round-infographic { grid-template-columns: repeat(2, minmax(0, 1fr)); }.score-ring { width: 116px; height: 116px; } }
.teacher-bot { display: inline-flex; flex: 0 0 auto; width: 23px; height: 23px; margin-right: 8px; vertical-align: -6px; color: #b7f36b; }
.teacher-bot svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.explanation { display: block; color: #dbe6df !important; }
.explanation .teacher-bot { margin-top: 2px; }
.tutor-comment { display: flex; align-items: flex-start; gap: 2px; margin-top: 10px; color: #dbe6df; line-height: 1.6; }
.tutor-comment .teacher-bot { margin-top: 2px; }
.tutor-correction { display: grid; gap: 10px; margin-top: 12px; padding: 14px 16px; border-left: 3px solid #ffd166; color: #f1dfad; line-height: 1.65; background: rgba(255,209,102,.055); }.correction-label { display: inline-block; margin-right: 4px; font-weight: 900; letter-spacing: .02em; }.question-label { color: #8fd7ff; }.selected-answer-label { color: #ffd166; }.answer-label { color: #b7f36b; }
.tutor-memory-standalone { display: flex; gap: 8px; margin: 12px 0 0 24px; padding: 10px 12px; border-left: 3px solid #b7f36b; color: #dff6b6; line-height: 1.55; background: rgba(183,243,107,.06); }.tutor-memory-standalone .memory-label { flex: 0 0 auto; color: #b7f36b; font-weight: 900; }.tutor-detail-loading { margin: 14px 0 0 24px; color: #c6d2ca; }
.result-media { margin: 16px 0 4px; max-width: 720px; }.result-media img { display: block; width: 100%; max-height: 420px; object-fit: contain; border: 1px solid rgba(183,243,107,.24); border-radius: 12px; background: rgba(0,0,0,.18); }
.tutor-more { margin-top: 14px; padding: 9px 13px; font-size: 13px; }
.tutor-detailed { gap: 4px; }
.tutor-detailed p { margin: 10px 0 0; color: #c6d2ca; line-height: 1.65; }
.tutor-detailed .tutor-memory { margin-top: 16px; padding: 13px 15px; border: 1px solid #687d4b; border-left: 4px solid #b7f36b; border-radius: 9px; background: linear-gradient(135deg, #263323, #1b261f); color: #efffdc; box-shadow: 0 8px 24px rgba(0,0,0,.16); }
.memory-label { display: block; margin-bottom: 5px; color: #b7f36b; font-size: 10px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }