:root {
--bg: #f2f4f7;
--bg-strong: #e8edf4;
--surface: rgba(255, 255, 255, 0.74);
--surface-strong: rgba(255, 255, 255, 0.92);
--surface-soft: rgba(255, 255, 255, 0.58);
--text: #111318;
--muted: #667085;
--muted-strong: #475467;
--line: rgba(15, 23, 42, 0.08);
--accent: #0a84ff;
--accent-strong: #0066cc;
--accent-soft: rgba(10, 132, 255, 0.10);
--success-soft: rgba(52, 199, 89, 0.12);
--danger: #ff453a;
--danger-soft: rgba(255, 69, 58, 0.10);
--shadow-lg: 0 30px 80px rgba(15, 23, 42, 0.12);
--shadow-md: 0 18px 40px rgba(15, 23, 42, 0.08);
--radius-xl: 32px;
--radius-lg: 24px;
--radius-md: 18px;
--radius-sm: 14px;
--nav-offset: 122px;
}
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
background-color: var(--bg-strong);
}
body {
margin: 0;
min-height: 100vh;
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
color: var(--text);
background:
radial-gradient(circle at 0% 0%, rgba(10, 132, 255, 0.16), transparent 28%),
radial-gradient(circle at 100% 20%, rgba(52, 199, 89, 0.10), transparent 22%),
linear-gradient(180deg, #fbfcfe 0%, var(--bg) 48%, var(--bg-strong) 100%);
padding: 24px;
overscroll-behavior-y: none;
}
a {
color: inherit;
text-decoration: none;
}
button,
input,
textarea,
select {
font: inherit;
}
.app-shell {
max-width: 1440px;
margin: 0 auto;
display: block;
}
.glass-panel {
background: var(--surface);
border: 1px solid rgba(255, 255, 255, 0.58);
box-shadow: var(--shadow-lg);
backdrop-filter: blur(30px);
-webkit-backdrop-filter: blur(30px);
}
.main {
display: grid;
gap: 22px;
padding-top: 14px;
}
.page-section {
display: none;
gap: 22px;
scroll-margin-top: calc(var(--nav-offset) + 16px);
}
.page-section.active {
display: grid;
}
.brand-wordmark {
position: relative;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 5px 10px 5px 0;
color: var(--text);
white-space: nowrap;
}
.brand-orbit-trail {
position: absolute;
left: 1px;
top: 50%;
width: 178px;
height: 42px;
pointer-events: none;
opacity: 0;
transform: translateY(-50%);
background:
radial-gradient(circle at 96% 72%, rgba(10, 132, 255, 0.42) 0 2px, transparent 2.4px),
radial-gradient(circle at 84% 28%, rgba(16, 185, 129, 0.38) 0 2px, transparent 2.4px),
radial-gradient(circle at 70% 62%, rgba(10, 132, 255, 0.34) 0 2px, transparent 2.4px),
radial-gradient(circle at 55% 36%, rgba(16, 185, 129, 0.34) 0 2px, transparent 2.4px),
radial-gradient(circle at 39% 58%, rgba(10, 132, 255, 0.30) 0 1.8px, transparent 2.2px),
radial-gradient(circle at 22% 42%, rgba(16, 185, 129, 0.30) 0 1.8px, transparent 2.2px);
filter: blur(0.1px);
animation: brandTrailSweep 2.35s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both;
}
.brand-pulse-dot {
position: relative;
width: 8px;
height: 8px;
border-radius: 999px;
flex: 0 0 auto;
display: grid;
place-items: center;
overflow: hidden;
background:
radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.92), transparent 0 18%, rgba(255, 255, 255, 0) 24%),
linear-gradient(145deg, #10b981, #0a84ff);
box-shadow: 0 0 14px rgba(16, 185, 129, 0.42);
animation: brandIntroOrbit 2.25s cubic-bezier(0.22, 1, 0.36, 1) 0.05s both;
transition: width 0.34s cubic-bezier(0.22, 1, 0.36, 1), height 0.34s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.34s ease, transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}
.brand-pulse-dot::after {
content: "";
width: 9px;
height: 9px;
border: 1.8px solid rgba(255, 255, 255, 0.9);
border-left-color: transparent;
border-radius: 999px;
opacity: 0;
transform: scale(0.45) rotate(-18deg);
transition: opacity 0.22s ease, transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}
.brand-wordmark:hover .brand-pulse-dot,
.brand-wordmark:focus-visible .brand-pulse-dot {
width: 26px;
height: 26px;
transform: translateY(-1px);
box-shadow: 0 10px 24px rgba(10, 132, 255, 0.22), 0 0 0 6px rgba(16, 185, 129, 0.10);
}
.brand-wordmark:hover .brand-pulse-dot::after,
.brand-wordmark:focus-visible .brand-pulse-dot::after {
opacity: 1;
transform: scale(1) rotate(-18deg);
}
.brand-wordmark-text {
display: inline-flex;
align-items: baseline;
gap: 6px;
}
.brand-wordmark-auc {
font-size: 24px;
line-height: 1;
font-weight: 900;
letter-spacing: -0.045em;
color: #075985;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
}
.brand-wordmark-companion {
display: inline-flex;
align-items: center;
color: #334155;
font-size: 24px;
line-height: 1;
font-weight: 560;
letter-spacing: 0;
}
.placeholder-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
.placeholder-card {
padding: 24px;
border-radius: 28px;
background: var(--surface-strong);
border: 1px solid rgba(255, 255, 255, 0.68);
box-shadow: var(--shadow-md);
}
.placeholder-card h3 {
margin: 12px 0 8px;
font-size: 24px;
letter-spacing: -0.05em;
}
.placeholder-card p {
margin: 0;
color: var(--muted);
line-height: 1.55;
font-size: 14px;
}
.single-placeholder {
max-width: 920px;
}
.single-placeholder[data-page="grades-saved"] {
width: 100%;
max-width: none;
}
.single-placeholder .placeholder-card {
min-height: 320px;
display: grid;
align-content: start;
}
.icon-button {
width: 42px;
height: 42px;
border-radius: 999px;
border: 1px solid rgba(15, 23, 42, 0.08);
background: rgba(255,255,255,0.78);
color: var(--muted-strong);
font-size: 18px;
font-weight: 700;
box-shadow: none;
}
.field-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.field-stack {
display: grid;
gap: 8px;
}
.field-note {
color: var(--muted);
font-size: 12px;
line-height: 1.45;
}
.toggle-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 14px 16px;
border-radius: 18px;
background: rgba(248, 250, 252, 0.9);
border: 1px solid rgba(15, 23, 42, 0.06);
}
.switch-control {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 54px;
height: 32px;
flex: 0 0 auto;
}
.switch {
position: relative;
width: 54px;
height: 32px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.12);
transition: background 0.22s ease;
pointer-events: none;
}
.switch::after {
content: "";
position: absolute;
top: 4px;
left: 4px;
width: 24px;
height: 24px;
border-radius: 50%;
background: white;
box-shadow: 0 6px 14px rgba(15, 23, 42, 0.16);
transition: transform 0.22s ease;
}
.switch-input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
cursor: pointer;
z-index: 2;
}
.switch-input:checked + .switch {
background: rgba(10, 132, 255, 0.46);
}
.switch-input:checked + .switch::after {
transform: translateX(22px);
}
@keyframes brandPulse {
0%, 100% {
opacity: 0.72;
transform: scale(0.92);
}
50% {
opacity: 1;
transform: scale(1);
}
}
@keyframes brandIntroOrbit {
0% {
transform: translate(172px, 18px) scale(1.18);
box-shadow: 0 12px 26px rgba(10, 132, 255, 0.26), 0 0 0 7px rgba(16, 185, 129, 0.10);
}
18% {
transform: translate(138px, -13px) scale(1.08);
}
38% {
transform: translate(104px, 15px) scale(1.16);
}
58% {
transform: translate(66px, -9px) scale(1.05);
}
78% {
transform: translate(28px, 8px) scale(1.1);
}
100% {
transform: translate(0, 0) scale(1);
}
}
@keyframes brandTrailSweep {
0% {
opacity: 0;
clip-path: inset(0 0 0 100%);
}
12% {
opacity: 1;
clip-path: inset(0 0 0 76%);
}
36% {
opacity: 1;
clip-path: inset(0 0 0 48%);
}
68% {
opacity: 0.92;
clip-path: inset(0 0 0 18%);
}
86% {
opacity: 0.72;
clip-path: inset(0 0 0 0);
}
100% {
opacity: 0;
clip-path: inset(0 0 0 0);
}
}
.topbar {
padding: 18px 22px;
border-radius: 28px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.topbar-copy h2 {
margin: 0;
font-size: 15px;
font-weight: 700;
letter-spacing: -0.02em;
}
.topbar-copy p {
margin: 4px 0 0;
font-size: 13px;
color: var(--muted);
}
.topbar-actions {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.7);
border: 1px solid var(--line);
color: var(--muted-strong);
font-size: 13px;
font-weight: 600;
}
.hero {
position: relative;
overflow: hidden;
padding: 38px;
border-radius: 36px;
}
.hero::after {
content: "";
position: absolute;
inset: auto -60px -90px auto;
width: 300px;
height: 300px;
border-radius: 999px;
background: radial-gradient(circle, rgba(10,132,255,0.20), transparent 62%);
pointer-events: none;
}
.hero-grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.95fr);
gap: 22px;
align-items: stretch;
}
.hero-copy h3 {
margin: 14px 0 0;
font-size: clamp(40px, 6vw, 68px);
line-height: 0.95;
letter-spacing: -0.07em;
}
.hero-copy p {
max-width: 700px;
margin: 20px 0 0;
color: var(--muted-strong);
font-size: 18px;
line-height: 1.5;
}
.hero-actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-top: 26px;
}
.button,
button {
border: none;
cursor: pointer;
transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.button {
padding: 14px 18px;
border-radius: 999px;
font-size: 14px;
font-weight: 700;
}
.button.primary,
button {
background: linear-gradient(180deg, #1491ff, #0077ed);
color: white;
box-shadow: 0 16px 30px rgba(10, 132, 255, 0.22);
}
.button.secondary {
background: rgba(255,255,255,0.76);
color: var(--text);
border: 1px solid var(--line);
}
@media (hover: hover) and (pointer: fine) {
.button:hover,
button:hover {
transform: translateY(-1px);
}
}
.hero-card {
padding: 22px;
border-radius: 28px;
background: linear-gradient(180deg, rgba(255,255,255,0.88), rgba(255,255,255,0.62));
border: 1px solid rgba(255, 255, 255, 0.62);
display: grid;
gap: 14px;
align-content: start;
}
.metric-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
}
.metric-row strong {
display: block;
font-size: 15px;
letter-spacing: -0.02em;
}
.metric-row span {
display: block;
color: var(--muted);
font-size: 13px;
margin-top: 4px;
}
.metric-value {
font-size: 26px;
font-weight: 800;
letter-spacing: -0.05em;
}
.progress {
height: 10px;
border-radius: 999px;
background: rgba(17, 19, 24, 0.08);
overflow: hidden;
}
.progress > div {
width: 68%;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, #0a84ff, #67c1ff);
}
.meta-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
.mini-card,
.tool-card,
.feature-card {
padding: 24px;
border-radius: 28px;
background: var(--surface-strong);
border: 1px solid rgba(255, 255, 255, 0.68);
box-shadow: var(--shadow-md);
}
.mini-card h4,
.feature-card h4,
.tool-card h4 {
margin: 14px 0 8px;
font-size: 20px;
letter-spacing: -0.04em;
}
.mini-card p,
.feature-card p,
.tool-card p {
margin: 0;
color: var(--muted);
line-height: 1.55;
font-size: 14px;
}
.mini-icon {
width: 42px;
height: 42px;
border-radius: 14px;
display: grid;
place-items: center;
background: var(--accent-soft);
color: var(--accent-strong);
font-weight: 800;
}
.workspace-grid {
display: grid;
grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.82fr);
gap: 22px;
align-items: start;
}.tool-stack {
display: grid;
gap: 22px;
}
.tool-card {
border-radius: 32px;
}
.card-header {
margin-bottom: 18px;
}
.section-heading {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 18px;
margin-bottom: 18px;
}
.section-heading h3,
.card-title {
margin: 8px 0 0;
font-size: 28px;
font-weight: 780;
letter-spacing: -0.05em;
}
.card-subtitle {
color: var(--muted);
margin: 8px 0 0;
font-size: 15px;
line-height: 1.5;
}
.feature-tag {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
border-radius: 999px;
background: var(--success-soft);
color: #15703d;
font-size: 12px;
font-weight: 700;
}
textarea,
input,
select {
width: 100%;
background: rgba(255,255,255,0.86);
border: 1px solid var(--line);
color: var(--text);
padding: 15px 16px;
border-radius: 18px;
outline: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
textarea {
min-height: 182px;
resize: vertical;
line-height: 1.5;
}
textarea:focus,
input:focus,
select:focus {
border-color: rgba(10, 132, 255, 0.45);
box-shadow: 0 0 0 4px rgba(10, 132, 255, 0.12);
}
.tool-card button {
width: 100%;
padding: 15px 18px;
border-radius: 999px;
font-size: 15px;
font-weight: 700;
}
.button-row {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-top: 18px;
}
.button-row button,
.button-row .button {
width: auto;
min-width: 180px;
}
.button.ghost {
background: rgba(255, 255, 255, 0.72);
color: var(--muted-strong);
border: 1px solid var(--line);
}
.field-stack {
display: grid;
gap: 8px;
}
.field-stack[hidden] {
display: none;
}
.field-note {
color: var(--muted);
font-size: 12px;
line-height: 1.4;
}
.module-meta {
margin-top: 14px;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.meta-pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.72);
border: 1px solid rgba(15, 23, 42, 0.06);
color: var(--muted-strong);
font-size: 13px;
font-weight: 600;
}
.status {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 14px;
border-radius: 999px;
background: rgba(17, 19, 24, 0.05);
color: var(--muted-strong);
font-size: 14px;
font-weight: 600;
}
.empty-state {
padding: 18px;
border-radius: 20px;
background: rgba(248, 250, 252, 0.9);
border: 1px dashed rgba(15, 23, 42, 0.10);
color: var(--muted);
font-size: 14px;
line-height: 1.5;
}
.secondary-button {
background: rgba(255, 255, 255, 0.78);
color: var(--text);
border: 1px solid var(--line);
box-shadow: none;
}
.ghost-danger {
background: var(--danger-soft);
color: var(--danger);
border: 1px solid rgba(255, 69, 58, 0.14);
box-shadow: none;
}
.aside-stack {
display: grid;
gap: 22px;
}
.feature-list {
display: grid;
gap: 14px;
margin-top: 18px;
}
.feature-item {
padding: 16px 18px;
border-radius: 20px;
background: rgba(248, 250, 252, 0.88);
border: 1px solid rgba(15, 23, 42, 0.06);
}
.feature-item strong {
display: block;
margin-bottom: 5px;
font-size: 15px;
letter-spacing: -0.02em;
}
.feature-item span {
display: block;
color: var(--muted);
font-size: 13px;
line-height: 1.5;
}
.roadmap {
display: grid;
gap: 12px;
margin-top: 18px;
}
.roadmap-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 15px 16px;
border-radius: 18px;
background: rgba(255,255,255,0.74);
border: 1px solid rgba(15, 23, 42, 0.06);
}
.roadmap-item strong {
font-size: 14px;
letter-spacing: -0.02em;
}
.roadmap-item span {
font-size: 12px;
font-weight: 700;
padding: 7px 10px;
border-radius: 999px;
background: rgba(17, 19, 24, 0.05);
color: var(--muted-strong);
}
.footer-links {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
flex-wrap: wrap;
}
.footer-links a {
color: var(--muted-strong);
font-weight: 800;
text-decoration: underline;
text-decoration-color: rgba(71, 84, 103, 0.28);
text-underline-offset: 4px;
}
.footer-biorender-credit {
color: var(--muted);
font-size: 12px;
}
.footer-biorender-credit a {
color: inherit;
font-weight: 700;
text-decoration: underline;
text-decoration-color: rgba(71, 84, 103, 0.28);
text-underline-offset: 3px;
}
@media (max-width: 1180px) {
.workspace-grid,
.hero-grid,
.placeholder-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 820px) {
body {
padding: 16px;
}
.hero,
.tool-card,
.mini-card,
.feature-card,
.topbar {
border-radius: 26px;
}
.meta-grid {
grid-template-columns: 1fr;
}
.section-heading {
flex-direction: column;
}
.topbar {
flex-direction: column;
align-items: flex-start;
}
.field-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 700px) {
:root {
--nav-offset: 80px;
}
.hero-copy h3 {
font-size: clamp(34px, 12vw, 54px);
}
.hero-copy p {
font-size: 16px;
}
.main {
padding-top: 18px;
}
}
html {
-webkit-tap-highlight-color: transparent;
}
:where(a[href], button, [role="button"], summary, label, select) {
touch-action: manipulation;
}
@media (pointer: coarse) {
:where(html:not([data-exam-format])) :where(button, [role="button"], .button, summary) {
transition: scale 120ms cubic-bezier(0.23, 1, 0.32, 1);
}
:where(html:not([data-exam-format])) :where(button, [role="button"], .button, summary):where(:active:not(:disabled):not([aria-disabled="true"])) {
scale: 0.97;
}
}
@media (hover: none) and (pointer: coarse) and (max-width: 932px) {
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="hidden"]):not(.ss-input):not(.professor-search-input):not(.pp-fa-input):not(#arenaQuestionCountInput),
select,
textarea {
font-size: 16px !important;
}
}
@media (pointer: coarse) {
:is(.arena-progress-chip, #arenaResetButton, .live-trigger, .live-coach-x, .dh-link, .dh-text-btn,
.phxfp__reset, .rpc-dot, .gam__btn, .mk-linkbtn, .lp-link, .footer-links a,
.mk-drop > summary) {
position: relative;
}
:is(.arena-progress-chip, #arenaResetButton, .live-trigger, .phxfp__reset)::after,
:is(.gam__btn, .mk-linkbtn)::after,
:is(.dh-link, .dh-text-btn, .lp-link)::after,
.footer-links a::after,
.rpc-dot::after,
.live-coach-x::after,
.mk-drop > summary::before {
content: "";
position: absolute;
}
:is(.arena-progress-chip, #arenaResetButton, .live-trigger, .phxfp__reset)::after { inset: -7px -2px; }
:is(.gam__btn, .mk-linkbtn)::after { inset: -6px 0; }
:is(.dh-link, .dh-text-btn, .lp-link)::after { inset: -13px -4px; }
.footer-links a::after { inset: -10px -4px; }
.rpc-dot::after { inset: -17px -3px; }
.live-coach-x::after { inset: -10px; }
.mk-drop > summary::before { inset: -8px -2px; z-index: 1; }
}
@media (max-width: 720px) {
:is(.dh-countdown-label, .dh-step1-label, .dh-node-here, .arena-quote-label, .arena-progress-eyebrow,
.modules-status, .ekg-launch-new, .exam-tracker-sample-badge, .gp-field__tag, .tpager-dir,
.atl-figure__expand, .hy-callout__badge, .toxmap-tox__tag, .rpc-gram, .rpc-tag, .rpc-imgcap,
.atl-figure__src, .pneu-org-k, .phxfp__group-label, .phxfp__tile-sub, .gam__meterNote, .gam__foot,
.rb-launch-new, .arena-module-card > span, .arena-progress-ring-center > span, .live-coach-main > b,
.data-privacy-note > span) {
font-size: 12px !important;
}
}