[data-study-theme="night"] {
--study-wash: linear-gradient(180deg, #0b1220 0%, #121b2d 55%, #16203a 100%);
--study-a: 99, 179, 255;
--study-b: 139, 92, 246;
}
[data-study-theme="deepsea"] {
--study-wash:
radial-gradient(circle at 16% -10%, rgba(125, 211, 252, 0.22), transparent 42%),
radial-gradient(circle at 80% -4%, rgba(94, 234, 212, 0.14), transparent 46%),
linear-gradient(180deg, #04283f 0%, #06405f 55%, #085273 100%);
--study-a: 94, 234, 212;
--study-b: 125, 211, 252;
}
:root[data-study-panel="night"] {
--env-card: rgba(23, 32, 51, 0.94);
--env-card-soft: rgba(30, 41, 63, 0.72);
--env-inset: rgba(9, 14, 26, 0.55);
--env-border: rgba(148, 163, 184, 0.16);
--env-border-strong: rgba(148, 163, 184, 0.3);
--env-text: #cbd5e1;
--env-text-strong: #f1f5f9;
--env-muted: #8fa0b8;
--env-accent: #63b3ff;
--env-shadow: 0 18px 42px rgba(0, 0, 0, 0.45);
--env-good-bg: rgba(34, 197, 94, 0.16);
--env-good-border: rgba(34, 197, 94, 0.32);
--env-good-text: #6ee7a0;
--env-bad-bg: rgba(239, 68, 68, 0.16);
--env-bad-border: rgba(239, 68, 68, 0.34);
--env-bad-text: #fda4af;
}
:root[data-study-panel="deepsea"] {
--env-card: rgba(6, 41, 62, 0.9);
--env-card-soft: rgba(9, 52, 76, 0.72);
--env-inset: rgba(3, 22, 34, 0.5);
--env-border: rgba(125, 211, 252, 0.18);
--env-border-strong: rgba(125, 211, 252, 0.34);
--env-text: #cfe8f5;
--env-text-strong: #f0fafd;
--env-muted: #8fb8cd;
--env-accent: #5eead4;
--env-shadow: 0 18px 42px rgba(1, 16, 26, 0.5);
--env-good-bg: rgba(52, 211, 153, 0.16);
--env-good-border: rgba(52, 211, 153, 0.34);
--env-good-text: #7df0c0;
--env-bad-bg: rgba(251, 113, 133, 0.16);
--env-bad-border: rgba(251, 113, 133, 0.36);
--env-bad-text: #fda4af;
}
html[data-study-panel="sky"] .arena-sidebar,
html[data-study-panel="sky"] .arena-question-panel,
html[data-study-panel="sky"] .arena-summary-card {
background: linear-gradient(180deg, rgba(242, 248, 255, 0.96), rgba(224, 238, 254, 0.92));
border-color: rgba(10, 132, 255, 0.14);
}
html[data-study-panel="mint"] .arena-sidebar,
html[data-study-panel="mint"] .arena-question-panel,
html[data-study-panel="mint"] .arena-summary-card {
background: linear-gradient(180deg, rgba(240, 253, 246, 0.96), rgba(216, 243, 228, 0.92));
border-color: rgba(16, 185, 129, 0.16);
}
html[data-study-panel="cream"] .arena-sidebar,
html[data-study-panel="cream"] .arena-question-panel,
html[data-study-panel="cream"] .arena-summary-card {
background: linear-gradient(180deg, rgba(255, 251, 240, 0.97), rgba(252, 240, 212, 0.92));
border-color: rgba(217, 164, 65, 0.18);
}
html[data-study-panel="rose"] .arena-sidebar,
html[data-study-panel="rose"] .arena-question-panel,
html[data-study-panel="rose"] .arena-summary-card {
background: linear-gradient(180deg, rgba(255, 245, 247, 0.97), rgba(252, 226, 235, 0.92));
border-color: rgba(244, 114, 182, 0.16);
}
html[data-study-panel="lilac"] .arena-sidebar,
html[data-study-panel="lilac"] .arena-question-panel,
html[data-study-panel="lilac"] .arena-summary-card {
background: linear-gradient(180deg, rgba(250, 247, 255, 0.97), rgba(233, 224, 251, 0.92));
border-color: rgba(139, 92, 246, 0.15);
}
html[data-study-panel="slate"] .arena-sidebar,
html[data-study-panel="slate"] .arena-question-panel,
html[data-study-panel="slate"] .arena-summary-card {
background: linear-gradient(180deg, rgba(246, 248, 250, 0.97), rgba(226, 232, 240, 0.94));
border-color: rgba(71, 85, 105, 0.16);
}
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .assessment-session-page {
color: var(--env-text);
}
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .assessment-session-topbar {
background: var(--env-card);
border: 1px solid var(--env-border);
box-shadow: var(--env-shadow);
}
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .assessment-session-topbar h3,
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-topbar-copy h3 {
color: var(--env-text-strong);
}
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) #assessmentSessionSubtitle,
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-topbar-domain {
color: var(--env-muted);
}
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .assessment-session-topbar .brand-wordmark-auc {
color: #7cc0ff;
}
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .assessment-session-topbar .brand-wordmark-companion {
color: var(--env-text);
}
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-topbar-pill {
background: var(--env-card-soft);
border-color: var(--env-border);
color: var(--env-text);
}
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-theme-menu {
background: var(--env-card);
border-color: var(--env-border-strong);
box-shadow: var(--env-shadow);
}
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-theme-heading {
color: var(--env-muted);
}
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-theme-swatch,
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-theme-effect {
background: var(--env-card-soft);
border-color: var(--env-border);
color: var(--env-text);
}
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-theme-swatch.is-active,
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-theme-effect.is-active {
border-color: var(--env-accent);
color: var(--env-text-strong);
}
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-sidebar,
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-question-panel,
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-summary-card {
background: var(--env-card);
border-color: var(--env-border);
box-shadow: var(--env-shadow);
}
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .section-label {
color: var(--env-accent);
}
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-sidebar h4,
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-panel-head h4,
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-summary-card h4 {
color: var(--env-text-strong);
}
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-sidebar-copy {
color: var(--env-muted);
}
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-nav-button {
background: var(--env-card-soft);
border-color: var(--env-border);
color: var(--env-text);
}
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-nav-button.is-current {
background: var(--env-inset);
border-color: var(--env-accent);
color: var(--env-text-strong);
box-shadow: none;
}
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-nav-button.is-correct {
background: var(--env-good-bg);
border-color: var(--env-good-border);
color: var(--env-good-text);
}
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-nav-button.is-wrong {
background: var(--env-bad-bg);
border-color: var(--env-bad-border);
color: var(--env-bad-text);
}
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-sidebar-stat {
background: var(--env-card-soft);
border-color: var(--env-border);
}
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-sidebar-stat strong {
color: var(--env-text-strong);
}
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-sidebar-stat span {
color: var(--env-muted);
}
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-sidebar-stat.arena-streak-stat {
background: linear-gradient(180deg, rgba(245, 158, 11, 0.16), rgba(245, 158, 11, 0.08));
border-color: rgba(245, 158, 11, 0.4);
}
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-streak-stat strong {
color: #fbbf24;
}
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) #assessment-session-page .hoad-assessment-question {
color: var(--env-text-strong);
}
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) #assessment-session-page .hoad-highlight--yellow { background: rgba(250, 204, 21, 0.32); }
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) #assessment-session-page .hoad-highlight--green  { background: rgba(74, 222, 128, 0.28); }
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) #assessment-session-page .hoad-highlight--blue   { background: rgba(96, 165, 250, 0.3); }
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) #assessment-session-page .hoad-assessment-choice {
background: var(--env-card-soft);
border-color: var(--env-border);
color: var(--env-text);
}
@media (hover: hover) and (pointer: fine) {
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) #assessment-session-page .hoad-assessment-choice:hover:not(:disabled) {
border-color: var(--env-border-strong);
background: var(--env-inset);
}
}
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) #assessment-session-page .hoad-assessment-choice.is-selected {
border-color: var(--env-accent);
background: var(--env-inset);
color: var(--env-text-strong);
}
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) #assessment-session-page .hoad-assessment-choice.is-correct {
background: var(--env-good-bg);
border-color: var(--env-good-border);
color: var(--env-good-text);
}
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) #assessment-session-page .hoad-assessment-choice.is-wrong {
background: var(--env-bad-bg);
border-color: var(--env-bad-border);
color: var(--env-bad-text);
}
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) #assessment-session-page .hoad-choice-strike {
background: var(--env-card-soft);
border-color: var(--env-border);
color: var(--env-muted);
}
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) #assessment-session-page .hoad-option-table-head {
color: var(--env-muted);
}
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) #assessment-session-page .choice-explanation {
background: var(--env-inset);
border-color: var(--env-border);
color: var(--env-text);
}
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) #assessment-session-page .choice-teaching-point {
background: rgba(99, 179, 255, 0.12);
border-color: rgba(99, 179, 255, 0.28);
color: var(--env-text-strong);
}
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) #assessment-session-page .choice-source-note {
color: var(--env-muted);
}
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-feedback-status {
background: var(--env-card-soft);
border-color: var(--env-border);
color: var(--env-text);
}
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-feedback-status.is-correct {
background: var(--env-good-bg);
border-color: var(--env-good-border);
color: var(--env-good-text);
}
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-feedback-status.is-wrong {
background: var(--env-bad-bg);
border-color: var(--env-bad-border);
color: var(--env-bad-text);
}
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .hoad-text-size,
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .hoad-question-reset {
background: var(--env-card-soft);
border-color: var(--env-border);
color: var(--env-text);
}
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) #assessment-session-page .hoad-assessment-empty {
background: var(--env-card-soft);
border-color: var(--env-border);
color: var(--env-muted);
}
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) #assessment-session-page .hoad-match-legend,
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) #assessment-session-page .hoad-match-row {
background: var(--env-card-soft);
border-color: var(--env-border);
color: var(--env-text);
}
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-summary-ring-track {
stroke: rgba(255, 255, 255, 0.12);
}
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-summary-score {
color: var(--env-muted);
}
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-summary-explainer {
color: var(--env-text);
}
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-summary-stat {
background: var(--env-card-soft);
border-color: var(--env-border);
}
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-summary-stat strong {
color: var(--env-text-strong);
}
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-summary-stat span {
color: var(--env-muted);
}
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-summary-stat[data-tone="good"] {
background: var(--env-good-bg);
border-color: var(--env-good-border);
}
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-summary-stat[data-tone="good"] strong {
color: var(--env-good-text);
}
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-summary-stat[data-tone="bad"] {
background: var(--env-bad-bg);
border-color: var(--env-bad-border);
}
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-summary-stat[data-tone="bad"] strong {
color: var(--env-bad-text);
}
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-summary-breakdown {
background: var(--env-inset);
border-color: var(--env-border);
}
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-summary-breakdown-head,
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-summary-review-heading {
color: var(--env-muted);
}
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-summary-breakdown-label {
color: var(--env-text);
}
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-summary-breakdown-bar {
background: rgba(255, 255, 255, 0.1);
}
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-summary-missed-item {
background: var(--env-card-soft);
border-color: var(--env-border);
}
@media (hover: hover) and (pointer: fine) {
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-summary-missed-item:hover {
background: var(--env-inset);
border-color: var(--env-border-strong);
}
}
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-summary-missed-copy strong {
color: var(--env-text-strong);
}
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-summary-missed-copy span {
color: var(--env-muted);
}
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-summary-missed-go {
color: var(--env-accent);
}
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-summary-clean {
background: var(--env-good-bg);
border-color: var(--env-good-border);
}
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-summary-clean strong,
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-summary-clean span:not(.arena-summary-clean-mark) {
color: var(--env-good-text);
}
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) #assessment-session-page .arena-summary-actions [data-hoad-close-summary] {
background: var(--env-card-soft);
border-color: var(--env-border-strong);
color: var(--env-text);
}
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .hoad-question-flag {
background: var(--env-card-soft);
border-color: var(--env-border);
color: var(--env-muted);
}
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .hoad-question-flag.is-flagged {
background: rgba(245, 158, 11, 0.18);
border-color: rgba(245, 158, 11, 0.45);
color: #fbbf24;
}
@media (hover: hover) and (pointer: fine) {
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .hoad-question-flag:hover {
background: rgba(245, 158, 11, 0.18);
border-color: rgba(245, 158, 11, 0.45);
color: #fbbf24;
}
}
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-nav-button.is-answered:not(.is-current) {
background: rgba(99, 179, 255, 0.14);
border-color: rgba(99, 179, 255, 0.35);
color: var(--env-text-strong);
}
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-summary-flagged {
background: rgba(245, 158, 11, 0.14);
border-color: rgba(245, 158, 11, 0.4);
}
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-summary-flagged-label {
color: #fbbf24;
}
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-summary-flag-chip {
background: var(--env-card-soft);
border-color: rgba(245, 158, 11, 0.45);
color: #fbbf24;
}