.dh {
gap: 20px;
}
.dh-eyebrow {
margin: 0;
color: var(--accent-strong);
font-size: 12px;
font-weight: 850;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.dh-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 46px;
padding: 0 20px;
border: 1px solid rgba(15, 23, 42, 0.12);
border-radius: 999px;
background: #ffffff;
color: var(--text);
box-shadow: none;
font-size: 14.5px;
font-weight: 800;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.dh-btn:focus-visible {
transform: translateY(-1px);
box-shadow: 0 12px 24px rgba(15, 23, 42, 0.10);
}
@media (hover: hover) and (pointer: fine) {
.dh-btn:hover {
transform: translateY(-1px);
box-shadow: 0 12px 24px rgba(15, 23, 42, 0.10);
}
}
.dh-btn.is-primary {
border: 0;
background: linear-gradient(135deg, #10b981 0%, #0a84ff 75%);
color: #ffffff;
box-shadow: 0 14px 28px rgba(10, 132, 255, 0.28);
}
.dh-btn.is-primary::after { content: " →"; white-space: pre; }
.dh-link {
margin-top: auto;
color: var(--accent-strong);
font-size: 14px;
font-weight: 800;
text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
.dh-link:hover { text-decoration: underline; text-underline-offset: 3px; }
}
.dh-hero {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr);
gap: 24px;
padding: 30px;
border-radius: 32px;
background:
radial-gradient(90% 130% at 0% 0%, rgba(16, 185, 129, 0.16), transparent 55%),
radial-gradient(80% 130% at 100% 0%, rgba(10, 132, 255, 0.20), transparent 60%),
linear-gradient(180deg, #fbfdff, #f1f7ff);
border: 1px solid rgba(10, 132, 255, 0.12);
box-shadow: 0 24px 50px rgba(15, 23, 42, 0.08);
}
.dh-hero-main {
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
}
.dh-hero-date {
margin: 0;
color: #0f766e;
font-size: 13px;
font-weight: 850;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.dh-greeting[hidden] { display: none; }
.dh-greeting h1 {
margin: 6px 0 0;
color: var(--text);
font-size: clamp(32px, 4.4vw, 52px);
font-weight: 850;
line-height: 1.02;
letter-spacing: -0.045em;
}
.dh-greeting-meta {
margin: 8px 0 0;
color: var(--text);
font-size: 16px;
font-weight: 600;
}
.dh-hero-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 22px;
}
.dh-quick {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 18px;
}
.dh-quick a {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 5px 13px 5px 5px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(15, 23, 42, 0.07);
color: var(--text);
font-size: 13.5px;
font-weight: 750;
text-decoration: none;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
@media (hover: hover) and (pointer: fine) {
.dh-quick a:hover {
transform: translateY(-1px);
box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
}
}
.dh-quick-icon,
.dh-today-icon {
display: grid;
place-items: center;
flex-shrink: 0;
color: #ffffff;
}
.dh-quick-icon {
width: 28px;
height: 28px;
border-radius: 9px;
}
.dh-quick-icon svg,
.dh-today-icon svg {
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.dh-quick-icon svg { width: 16px; height: 16px; }
.dh-quick-icon.is-amber,
.dh-today-icon.is-amber { background: linear-gradient(135deg, #ea8a00, #fbbf24); }
.dh-quick-icon.is-violet,
.dh-today-icon.is-violet { background: linear-gradient(135deg, #4f46e5, #818cf8); }
.dh-quick-icon.is-green,
.dh-today-icon.is-green { background: linear-gradient(135deg, #16a34a, #4ade80); }
.dh-quick-icon.is-rose,
.dh-today-icon.is-rose { background: linear-gradient(135deg, #e11d48, #fb7185); }
.dh-quick-icon.is-blue,
.dh-today-icon.is-blue { background: linear-gradient(135deg, #0a84ff, #5ab4ff); }
.dh-countdown {
display: flex;
flex-direction: column;
gap: 6px;
padding: 22px 22px 18px;
border-radius: 24px;
background: #ffffff;
border: 1px solid rgba(15, 23, 42, 0.08);
box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
}
.dh-countdown-label {
color: var(--accent-strong);
font-size: 11.5px;
font-weight: 850;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.dh-countdown-num {
display: flex;
align-items: baseline;
gap: 8px;
}
.dh-countdown-num[hidden] { display: none; }
.dh-countdown-num strong {
font-size: 64px;
font-weight: 850;
line-height: 0.95;
letter-spacing: -0.05em;
font-variant-numeric: tabular-nums;
background: linear-gradient(135deg, #0a84ff, #10b981);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.dh-countdown-num span {
color: #344054;
font-size: 18px;
font-weight: 800;
}
.dh-countdown.is-soon .dh-countdown-label { color: #c2410c; }
.dh-countdown.is-soon .dh-countdown-num strong { background-image: linear-gradient(135deg, #f97316, #e11d48); }
.dh-countdown h3 {
margin: 4px 0 0;
color: var(--text);
font-size: 20px;
font-weight: 850;
line-height: 1.2;
letter-spacing: -0.02em;
}
.dh-countdown p {
margin: 0;
color: var(--text);
font-size: 14.5px;
font-weight: 600;
}
.dh-countdown-note {
align-self: flex-start;
margin-top: 4px;
padding: 4px 10px;
border-radius: 999px;
background: rgba(245, 158, 11, 0.12);
color: #92400e;
font-size: 12.5px;
font-weight: 750;
}
.dh-countdown-note:empty,
.dh-countdown.is-empty .dh-countdown-note { display: none; }
.dh-countdown .dh-link { margin-top: 10px; }
.dh-setup {
padding: 24px 26px;
border-radius: 28px;
background: #ffffff;
border: 1px solid rgba(10, 132, 255, 0.14);
box-shadow: 0 18px 38px rgba(15, 23, 42, 0.06);
}
.dh-setup[hidden] { display: none; }
.dh-setup-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 16px;
}
.dh-setup h2 {
margin: 4px 0 0;
color: var(--text);
font-size: 24px;
font-weight: 850;
letter-spacing: -0.03em;
}
.dh-setup-count {
display: flex;
align-items: baseline;
gap: 6px;
white-space: nowrap;
}
.dh-setup-count strong {
font-size: 34px;
font-weight: 850;
letter-spacing: -0.04em;
background: linear-gradient(135deg, #10b981, #0a84ff);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.dh-setup-count span {
color: #344054;
font-size: 14px;
font-weight: 700;
}
.dh-setup-bar {
height: 8px;
margin: 14px 0 4px;
border-radius: 999px;
background: rgba(10, 132, 255, 0.10);
overflow: hidden;
}
.dh-setup-bar span {
display: block;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, #10b981, #0a84ff);
transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.dh-setup-steps {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
margin: 14px 0 0;
padding: 0;
list-style: none;
}
.dh-step {
display: grid;
grid-template-rows: auto 1fr auto;
gap: 10px;
padding: 16px;
border-radius: 20px;
background: #f7faff;
border: 1px solid rgba(15, 23, 42, 0.06);
}
.dh-step.is-next {
background: #ffffff;
border-color: rgba(10, 132, 255, 0.35);
box-shadow: 0 14px 28px rgba(10, 132, 255, 0.14);
}
.dh-step.is-done {
background: rgba(16, 185, 129, 0.06);
border-color: rgba(16, 185, 129, 0.22);
}
.dh-step-mark {
display: grid;
place-items: center;
width: 32px;
height: 32px;
border-radius: 50%;
background: #e8eef7;
color: #344054;
font-size: 14px;
font-weight: 850;
}
.dh-step.is-next .dh-step-mark { background: linear-gradient(135deg, #10b981, #0a84ff); color: #ffffff; }
.dh-step.is-done .dh-step-mark { background: #10b981; color: #ffffff; }
.dh-step-copy strong {
display: block;
color: var(--text);
font-size: 15.5px;
font-weight: 800;
line-height: 1.25;
}
.dh-step-copy span {
display: block;
margin-top: 4px;
color: var(--text);
font-size: 13.5px;
line-height: 1.4;
}
.dh-step.is-done .dh-step-copy span { color: #047857; font-weight: 750; }
.dh-step .dh-btn {
justify-self: start;
min-height: 40px;
padding: 0 16px;
font-size: 13.5px;
}
.dh-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
gap: 18px;
align-items: stretch;
container-type: inline-size;
}
@container (min-width: 618px) and (max-width: 935.98px) {
.dh-row:not(:has(> [hidden])) > :nth-child(3):last-child { grid-column: 1 / -1; }
}
.dh-row > [hidden] { display: none; }
.dh-row:not(:has(> :not([hidden]))) { display: none; }
.dh-card {
display: flex;
flex-direction: column;
gap: 14px;
min-width: 0;
padding: 22px;
border-radius: 28px;
background: #ffffff;
border: 1px solid rgba(15, 23, 42, 0.07);
box-shadow: 0 18px 38px rgba(15, 23, 42, 0.06);
}
.dh-card-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.dh-card h3 {
margin: 4px 0 0;
color: var(--text);
font-size: 21px;
font-weight: 850;
line-height: 1.15;
letter-spacing: -0.03em;
}
.dh-card-meta {
margin: 4px 0 0;
color: var(--text);
font-size: 14px;
font-weight: 600;
}
.dh-pill {
padding: 6px 12px;
border-radius: 999px;
background: rgba(10, 132, 255, 0.10);
color: var(--accent-strong);
font-size: 12.5px;
font-weight: 800;
white-space: nowrap;
}
.dh-today-list {
display: grid;
gap: 10px;
}
.dh-today-item {
display: grid;
grid-template-columns: 42px minmax(0, 1fr);
align-items: start;
gap: 12px;
padding: 14px;
border-radius: 18px;
background: #f7faff;
border: 1px solid rgba(15, 23, 42, 0.05);
}
.dh-today-icon {
width: 42px;
height: 42px;
border-radius: 13px;
}
.dh-today-icon svg { width: 22px; height: 22px; }
.dh-mini {
display: block;
color: #475467;
font-size: 11px;
font-weight: 850;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.dh-today-item strong {
display: block;
margin-top: 3px;
color: var(--text);
font-size: 16px;
font-weight: 800;
line-height: 1.3;
}
.dh-today-item small {
display: block;
margin-top: 3px;
color: var(--text);
font-size: 13.5px;
font-weight: 500;
line-height: 1.4;
}
.dh-ring {
--p: 0;
position: relative;
display: grid;
place-items: center;
flex-shrink: 0;
width: 66px;
height: 66px;
border-radius: 50%;
background: conic-gradient(#10b981 0%, #0a84ff calc(var(--p) * 1%), rgba(10, 132, 255, 0.12) 0);
}
.dh-ring::before {
content: "";
position: absolute;
inset: 7px;
border-radius: 50%;
background: #ffffff;
}
.dh-ring strong {
position: relative;
color: var(--text);
font-size: 15px;
font-weight: 850;
}
.dh-next-list {
display: grid;
gap: 8px;
}
.dh-next-list span {
display: flex;
align-items: center;
gap: 10px;
padding: 11px 14px;
border-radius: 14px;
background: rgba(10, 132, 255, 0.05);
border: 1px solid rgba(10, 132, 255, 0.10);
color: var(--text);
font-size: 14px;
font-weight: 650;
line-height: 1.35;
}
.dh-next-list span::before {
content: "";
flex-shrink: 0;
width: 16px;
height: 16px;
border-radius: 5px;
border: 2px solid rgba(10, 132, 255, 0.45);
}
.dh-next-bar { display: none; }
.dh-row .qstats-card {
max-width: none;
border-radius: 28px;
}
.dh-row:not(:has(.dh-card:not([hidden]))) .qstats-card { max-width: 640px; }
.dh-daily {
background:
radial-gradient(120% 90% at 100% 0%, rgba(16, 185, 129, 0.12), transparent 55%),
#ffffff;
border-color: rgba(16, 185, 129, 0.22);
}
.dh-daily-streak { background: rgba(234, 88, 12, 0.10); color: #c2410c; }
.dh-daily-dots {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 4px 0 0;
padding: 0;
list-style: none;
}
.dh-daily-dot {
display: grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: 50%;
background: #f3f6fa;
border: 2px dashed rgba(15, 23, 42, 0.16);
color: #475467;
font-size: 15px;
font-weight: 850;
}
.dh-daily-dot.is-checked {
border: 0;
background: linear-gradient(135deg, #10b981, #34d399);
color: #ffffff;
box-shadow: 0 8px 18px rgba(16, 185, 129, 0.30);
}
.dh-daily-note {
margin: 0;
color: var(--text);
font-size: 14px;
line-height: 1.45;
}
.dh-daily-dot.is-missed {
border: 0;
background: linear-gradient(135deg, #fb7185, #f43f5e);
color: #ffffff;
box-shadow: 0 8px 18px rgba(244, 63, 94, 0.24);
}
.dh-daily.is-done .dh-card-head h3 { color: #047857; }
.dh-daily-week {
display: flex;
align-items: center;
gap: 14px;
margin-top: auto;
padding-top: 6px;
}
.dh-daily-week ol {
display: flex;
gap: 6px;
margin: 0;
padding: 0;
list-style: none;
}
.dh-daily-day {
display: grid;
justify-items: center;
gap: 4px;
}
.dh-daily-day span {
color: #667085;
font-size: 11px;
font-weight: 800;
}
.dh-daily-day b {
display: grid;
place-items: center;
width: 26px;
height: 26px;
border-radius: 8px;
background: #eef2f6;
color: #ffffff;
font-size: 12px;
font-weight: 900;
}
.dh-daily-day.is-done b {
background: linear-gradient(135deg, #f97316, #f59e0b);
box-shadow: 0 6px 14px rgba(249, 115, 22, 0.28);
}
.dh-daily-day.is-today span { color: var(--text); }
.dh-daily-day.is-today b { outline: 2px solid rgba(16, 185, 129, 0.55); outline-offset: 2px; }
.dh-daily-day.is-future b { background: transparent; border: 1px dashed rgba(15, 23, 42, 0.16); }
.dh-daily-foot {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 10px 16px;
}
.dh-daily .dh-daily-goal { margin-left: 0; font-size: 13.5px; }
.dh-arena {
position: relative;
overflow: hidden;
isolation: isolate;
gap: 4px;
color: var(--text);
text-decoration: none;
background:
radial-gradient(90% 80% at 100% 0%, rgba(10, 132, 255, 0.16), transparent 60%),
radial-gradient(70% 60% at 0% 100%, rgba(124, 58, 237, 0.08), transparent 60%),
linear-gradient(180deg, #ffffff, #f4f8ff);
border-color: rgba(10, 132, 255, 0.16);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.dh-arena > * { position: relative; z-index: 1; }
@media (hover: hover) and (pointer: fine) {
.dh-arena:hover {
transform: translateY(-2px);
box-shadow: 0 24px 46px rgba(10, 132, 255, 0.16);
}
}
.dh-arena .dh-arena-orb {
position: absolute;
z-index: 0;
top: -40px;
right: -40px;
width: 160px;
height: 160px;
border-radius: 50%;
background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.95), rgba(10, 132, 255, 0.22) 55%, transparent 72%);
pointer-events: none;
animation: dh-float 9s ease-in-out infinite;
}
.dh-arena .dh-arena-orb.is-small {
top: auto;
right: auto;
bottom: -70px;
left: -60px;
width: 150px;
height: 150px;
background: radial-gradient(circle at 60% 40%, rgba(255, 255, 255, 0.9), rgba(124, 58, 237, 0.14) 55%, transparent 72%);
animation-duration: 12s;
animation-direction: reverse;
}
@keyframes dh-float {
50% { transform: translate(-10px, 12px); }
}
.dh-arena-eyebrow {
display: flex;
align-items: center;
gap: 8px;
}
.dh-arena-live {
width: 8px;
height: 8px;
border-radius: 50%;
background: #10b981;
animation: dh-live 2.2s ease-out infinite;
}
@keyframes dh-live {
0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); }
70%, 100% { box-shadow: 0 0 0 9px rgba(16, 185, 129, 0); }
}
.dh-arena-count {
margin-top: 8px;
font-size: clamp(48px, 5vw, 64px);
font-weight: 850;
line-height: 1;
letter-spacing: -0.05em;
font-variant-numeric: tabular-nums;
background: linear-gradient(135deg, #111318 0%, #1d4fd7 60%, #10b981 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.dh-arena-title {
color: var(--text);
font-size: 18px;
font-weight: 850;
letter-spacing: -0.02em;
}
.dh-arena-bar {
display: flex;
gap: 3px;
height: 12px;
margin-top: 14px;
border-radius: 999px;
overflow: hidden;
background: rgba(15, 23, 42, 0.06);
}
.dh-arena-bar i {
flex: 0 0 var(--w);
height: 100%;
transform-origin: left center;
animation: dh-grow 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.dh-arena-bar i:nth-child(2) { animation-delay: 0.12s; }
.dh-arena-bar i:nth-child(3) { animation-delay: 0.24s; }
@keyframes dh-grow {
from { transform: scaleX(0); }
}
.dh-arena-bar .is-prof,
.dh-arena-key .is-prof { background: linear-gradient(135deg, #7c3aed, #a78bfa); }
.dh-arena-bar .is-practice,
.dh-arena-key .is-practice { background: linear-gradient(135deg, #0d9488, #2dd4bf); }
.dh-arena-bar .is-nbme,
.dh-arena-key .is-nbme { background: linear-gradient(135deg, #1d4ed8, #60a5fa); }
.dh-arena-legend {
display: grid;
gap: 8px;
margin: 12px 0 12px;
}
.dh-arena-key {
display: grid;
grid-template-columns: 10px minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
color: var(--text);
font-size: 14px;
font-weight: 650;
}
.dh-arena-key i {
width: 10px;
height: 10px;
border-radius: 3px;
}
.dh-arena-key b {
font-weight: 850;
font-variant-numeric: tabular-nums;
}
.dh-arena-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 14px;
}
.dh-arena-chips[hidden] { display: none; }
.dh-arena-chip {
padding: 6px 12px;
border-radius: 999px;
background: rgba(10, 132, 255, 0.09);
color: #0b4fb3;
font-size: 13px;
font-weight: 700;
}
.dh-arena-chip b { font-weight: 850; }
.dh-arena-chip.is-unseen { background: rgba(16, 185, 129, 0.11); color: #047857; }
.dh-arena-go {
display: inline-flex;
align-items: center;
gap: 6px;
align-self: flex-start;
margin-top: auto;
padding: 10px 18px;
border-radius: 999px;
background: #111318;
color: #ffffff;
font-size: 14px;
font-weight: 800;
}
.dh-arena-go span { transition: transform 0.18s ease; }
.dh-arena:hover .dh-arena-go span { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
.dh-arena .dh-arena-orb,
.dh-arena-live,
.dh-arena-bar i { animation: none; }
}
.dh-journey {
--mh-a: #0a84ff;
--mh-b: #10b981;
--mh-deep: #0a5bd6;
--mh-wash: rgba(10, 132, 255, 0.10);
position: relative;
z-index: 1;
isolation: isolate;
padding: 28px 30px 26px;
border-radius: 32px;
background:
radial-gradient(46% 95% at 84% 26%, var(--mh-wash), transparent 72%),
radial-gradient(60% 120% at 0% 100%, rgba(16, 185, 129, 0.08), transparent 60%),
linear-gradient(180deg, #ffffff, #f7f9fc);
border: 1px solid rgba(15, 23, 42, 0.07);
box-shadow: 0 24px 50px rgba(15, 23, 42, 0.07);
}
.dh-journey > :not(.dh-journey-art) {
position: relative;
z-index: 1;
}
.dh-journey-art {
position: absolute;
z-index: 0;
top: 0;
right: 2%;
width: min(36%, 420px);
height: 300px;
pointer-events: none;
-webkit-mask-image: radial-gradient(70% 66% at 56% 44%, #000 46%, transparent 100%);
mask-image: radial-gradient(70% 66% at 56% 44%, #000 46%, transparent 100%);
}
.dh-journey-art:empty { display: none; }
.dh-journey-head {
max-width: min(700px, 62%);
}
.dh-journey .dh-journey-eyebrow { color: var(--mh-deep); }
.dh-journey h2 {
margin: 6px 0 0;
color: var(--text);
font-size: clamp(26px, 3vw, 34px);
font-weight: 850;
line-height: 1.12;
letter-spacing: -0.035em;
text-wrap: balance;
}
.dh-journey h2::after {
content: "";
display: block;
width: 72px;
height: 4px;
margin-top: 12px;
border-radius: 999px;
background: linear-gradient(90deg, var(--mh-a), var(--mh-b));
}
.dh-journey-status {
margin: 12px 0 0;
color: var(--text);
font-size: 14.5px;
font-weight: 600;
}
.dh-journey-status strong { font-weight: 850; }
.dh-text-btn {
margin-left: 4px;
padding: 0;
border: 0;
background: none;
box-shadow: none;
color: var(--accent-strong);
font: inherit;
font-weight: 800;
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
.dh-text-btn:hover { background: none; box-shadow: none; transform: none; }
}
.dh-step1 {
display: inline-flex;
flex-wrap: wrap;
align-items: baseline;
column-gap: 10px;
row-gap: 2px;
margin-top: 14px;
padding: 10px 16px;
border-radius: 16px;
background: rgba(255, 255, 255, 0.78);
border: 1px solid rgba(15, 23, 42, 0.08);
box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
}
.dh-step1-label {
color: var(--mh-deep);
font-size: 11.5px;
font-weight: 850;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.dh-step1 strong {
color: var(--text);
font-size: 18px;
font-weight: 850;
letter-spacing: -0.02em;
}
.dh-step1 small {
flex-basis: 100%;
color: var(--text);
font-size: 12.5px;
}
.dh-path-wrap {
position: relative;
margin-top: 26px;
padding-top: 30px;
}
.dh-path-track {
position: absolute;
top: calc(30px + 22px - 3px);
left: 5%;
width: 90%;
height: 6px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.08);
}
.dh-path-fill {
width: 0;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, #10b981, var(--mh-a) 80%, var(--mh-b));
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.14);
transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.dh-path {
position: relative;
display: grid;
grid-template-columns: repeat(10, minmax(0, 1fr));
}
.dh-node {
--mh-a: #0a84ff;
--mh-b: #10b981;
--mh-deep: #0a5bd6;
--mh-wash: rgba(10, 132, 255, 0.12);
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
min-width: 0;
padding: 0;
border: 0;
background: none;
box-shadow: none;
color: var(--text);
cursor: pointer;
}
.dh-node:focus-visible { background: none; box-shadow: none; outline: none; }
@media (hover: hover) and (pointer: fine) {
.dh-node:hover { background: none; box-shadow: none; outline: none; }
}
.dh-node-dot {
position: relative;
z-index: 1;
display: grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: 50%;
background: #ffffff;
border: 2px solid rgba(15, 23, 42, 0.14);
border-color: color-mix(in srgb, var(--mh-a) 38%, #ffffff);
color: var(--mh-deep);
font-size: 15px;
font-weight: 850;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.dh-node:hover .dh-node-dot,
.dh-node:focus-visible .dh-node-dot { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(15, 23, 42, 0.12); }
.dh-node.is-completed .dh-node-dot {
border: 0;
background: linear-gradient(135deg, var(--mh-a), var(--mh-b));
color: #ffffff;
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.16);
}
.dh-node.is-current .dh-node-dot {
width: 56px;
height: 56px;
margin-top: -6px;
border: 0;
background: linear-gradient(135deg, var(--mh-a), var(--mh-b));
color: #ffffff;
font-size: 18px;
box-shadow: 0 0 0 8px var(--mh-wash), 0 12px 26px rgba(15, 23, 42, 0.22);
animation: dh-here 2.6s ease-in-out infinite;
}
@keyframes dh-here {
50% { box-shadow: 0 0 0 14px transparent, 0 12px 26px rgba(15, 23, 42, 0.22); }
}
.dh-node-label {
color: #344054;
font-size: 13px;
font-weight: 800;
white-space: nowrap;
}
.dh-node.is-current .dh-node-label { color: var(--mh-deep); font-size: 14px; }
.dh-node.is-future .dh-node-label { color: #667085; }
.dh-node-here {
position: absolute;
top: -30px;
padding: 3px 9px;
border-radius: 999px;
background: #111318;
color: #ffffff;
font-size: 11px;
font-weight: 800;
white-space: nowrap;
}
.dh-node-here::after {
content: "";
position: absolute;
left: 50%;
bottom: -4px;
width: 8px;
height: 8px;
background: #111318;
transform: translateX(-50%) rotate(45deg);
}
.dh-node.is-pair-start::before {
content: "";
position: absolute;
z-index: 0;
top: -12px;
left: calc(50% - 36px);
width: calc(100% + 72px);
height: 68px;
border-radius: 999px;
background: linear-gradient(90deg, rgba(13, 148, 136, 0.16), rgba(101, 163, 13, 0.16));
border: 1px solid rgba(13, 148, 136, 0.18);
}
.dh-node-here.is-pair {
left: 100%;
transform: translateX(-50%);
}
.dh-node-tip {
position: absolute;
top: calc(100% + 8px);
left: 50%;
z-index: 5;
display: grid;
gap: 2px;
padding: 8px 12px;
border-radius: 12px;
background: #111318;
color: #ffffff;
font-size: 12px;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transform: translateX(-50%) translateY(-4px);
transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
pointer-events: none;
}
.dh-node:first-child .dh-node-tip,
.dh-node:nth-child(2) .dh-node-tip { left: 0; transform: translateY(-4px); }
.dh-node:last-child .dh-node-tip,
.dh-node:nth-last-child(2) .dh-node-tip { left: auto; right: 0; transform: translateY(-4px); }
.dh-node:first-child:hover .dh-node-tip,
.dh-node:first-child:focus-visible .dh-node-tip,
.dh-node:nth-child(2):hover .dh-node-tip,
.dh-node:nth-child(2):focus-visible .dh-node-tip,
.dh-node:last-child:hover .dh-node-tip,
.dh-node:last-child:focus-visible .dh-node-tip,
.dh-node:nth-last-child(2):hover .dh-node-tip,
.dh-node:nth-last-child(2):focus-visible .dh-node-tip { transform: translateY(0); }
.dh-node-tip strong { font-size: 13px; }
.dh-node-tip span { color: rgba(255, 255, 255, 0.8); }
.dh-node:hover .dh-node-tip,
.dh-node:focus-visible .dh-node-tip {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
transition-delay: 0.25s, 0.25s, 0s;
}
.dh-semesters {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
margin-top: 14px;
}
.dh-semesters span {
margin: 0 8px;
padding-top: 7px;
border-top: 2px solid rgba(15, 23, 42, 0.08);
color: #667085;
font-size: 11.5px;
font-weight: 800;
letter-spacing: 0.08em;
text-align: center;
text-transform: uppercase;
}
@media (max-width: 1100px) {
.dh-hero { grid-template-columns: minmax(0, 1.35fr) minmax(250px, 1fr); gap: 20px; padding: 26px; }
.dh-countdown-num strong { font-size: 56px; }
.dh-journey-head { max-width: 68%; }
.dh-setup-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
.dh-hero { grid-template-columns: 1fr; }
.dh-countdown {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
grid-template-areas:
"label label"
"num title"
"num meta"
"num note"
"num link";
column-gap: 18px;
row-gap: 2px;
align-items: start;
padding: 18px 20px;
}
.dh-countdown.is-empty { grid-template-columns: minmax(0, 1fr); column-gap: 0; grid-template-areas: "label" "title" "meta" "note" "link"; }
.dh-countdown-label { grid-area: label; margin-bottom: 6px; }
.dh-countdown-num {
grid-area: num;
align-self: center;
flex-direction: column;
align-items: center;
gap: 2px;
padding-right: 18px;
border-right: 1px solid rgba(15, 23, 42, 0.08);
}
.dh-countdown-num strong { font-size: 48px; }
.dh-countdown-num span { font-size: 14px; }
.dh-countdown h3 { grid-area: title; margin: 0; }
.dh-countdown p { grid-area: meta; }
.dh-countdown-note { grid-area: note; justify-self: start; }
.dh-countdown .dh-link { grid-area: link; margin-top: 6px; }
}
@media (max-width: 760px) {
.dh-step1 { width: 100%; }
.dh-journey-head { max-width: none; }
.dh-journey-art { right: 0; width: 64%; opacity: 0.28; }
.dh-daily-dot { width: 38px; height: 38px; }
.dh-hero,
.dh-journey { padding: 22px 18px; border-radius: 26px; }
.dh-setup { padding: 20px 18px; }
.dh-setup-steps { grid-template-columns: 1fr; }
.dh-row { grid-template-columns: 1fr; }
.dh-path-track,
.dh-semesters { display: none; }
.dh-path { grid-template-columns: repeat(5, minmax(0, 1fr)); row-gap: 18px; }
.dh-node-tip { width: max-content; max-width: min(260px, calc((100vw - 70px) * 0.8)); white-space: normal; }
.dh-node:nth-child(5n + 1) .dh-node-tip,
.dh-node:nth-child(5n + 2) .dh-node-tip { left: 0; right: auto; transform: translateY(-4px); }
.dh-node:nth-child(5n + 4) .dh-node-tip,
.dh-node:nth-child(5n) .dh-node-tip { left: auto; right: 0; transform: translateY(-4px); }
.dh-node:nth-child(5n + 1):hover .dh-node-tip,
.dh-node:nth-child(5n + 1):focus-visible .dh-node-tip,
.dh-node:nth-child(5n + 2):hover .dh-node-tip,
.dh-node:nth-child(5n + 2):focus-visible .dh-node-tip,
.dh-node:nth-child(5n + 4):hover .dh-node-tip,
.dh-node:nth-child(5n + 4):focus-visible .dh-node-tip,
.dh-node:nth-child(5n):hover .dh-node-tip,
.dh-node:nth-child(5n):focus-visible .dh-node-tip { transform: translateY(0); }
.dh-path-wrap { padding-top: 26px; }
.dh-here-more { display: none; }
.dh-countdown-num strong { font-size: 52px; }
}
@media (max-width: 420px) {
.dh-node-dot { width: 38px; height: 38px; font-size: 13px; }
.dh-node.is-current .dh-node-dot { width: 46px; height: 46px; margin-top: -4px; }
.dh-node-label { font-size: 12px; }
}
.qstats-card {
position: relative;
flex: 1 1 340px;
max-width: 560px;
border-radius: 34px;
padding: 24px 26px 22px;
color: #16233c;
background:
radial-gradient(circle at top left, rgba(56, 189, 248, 0.16), transparent 42%),
radial-gradient(circle at bottom right, rgba(52, 211, 153, 0.14), transparent 45%),
linear-gradient(180deg, rgba(255,255,255,0.98), rgba(241,246,255,0.94));
border: 1px solid rgba(10, 132, 255, 0.12);
box-shadow:
0 22px 42px rgba(15, 23, 42, 0.08),
inset 0 1px 0 rgba(255,255,255,0.9);
overflow: hidden;
}
.qstats-card[hidden] { display: none; }
.qstats-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; position: relative; }
.qstats-eyebrow {
display: inline-block;
padding: 6px 12px;
border-radius: 999px;
background: linear-gradient(90deg, rgba(37,99,235,0.10), rgba(16,185,129,0.10));
border: 1px solid rgba(37,99,235,0.18);
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #1d4fd7;
}
.qstats-scope { font-size: 0.78rem; font-weight: 700; color: #7a8699; }
.qstats-hero { display: flex; align-items: center; gap: 18px; margin-bottom: 16px; position: relative; }
.qstats-ring-wrap { position: relative; width: 92px; height: 92px; flex: 0 0 auto; filter: drop-shadow(0 6px 14px rgba(37, 99, 235, 0.22)); }
.qstats-ring { width: 92px; height: 92px; transform: rotate(-90deg); }
.qstats-ring circle { fill: none; stroke-width: 8; }
.qstats-ring-track { stroke: rgba(37, 99, 235, 0.10); }
.qstats-ring-fill { stroke: url(#qstatsRingGrad); stroke-linecap: round; transition: stroke-dashoffset 900ms cubic-bezier(0.22,1,0.36,1); }
.qstats-ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05; }
.qstats-ring-center strong { font-size: 1.3rem; color: #16233c; font-variant-numeric: tabular-nums; }
.qstats-ring-center span { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #7a8699; }
.qstats-hero-text strong {
display: block;
font-size: 2.35rem;
font-weight: 800;
line-height: 1;
letter-spacing: -0.03em;
font-variant-numeric: tabular-nums;
background: linear-gradient(90deg, #1d4fd7 0%, #2563eb 45%, #10b981 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.qstats-hero-text span { display: block; font-size: 0.85rem; font-weight: 600; color: #33415c; margin-top: 4px; }
.qstats-hero-text em {
display: inline-block;
font-style: normal;
font-size: 0.75rem;
font-weight: 800;
margin-top: 6px;
padding: 3px 10px;
border-radius: 999px;
background: rgba(16, 185, 129, 0.12);
border: 1px solid rgba(16, 185, 129, 0.35);
color: #0f7a5a;
}
.qstats-subjects { display: flex; flex-direction: column; gap: 8px; position: relative; }
.qstats-subject {
display: grid;
grid-template-columns: minmax(70px, 40%) 1fr 42px 28px;
align-items: center;
gap: 9px;
font-size: 0.8rem;
}
.qstats-subject-name { font-weight: 700; color: #33415c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qstats-subject-track { height: 7px; border-radius: 999px; background: rgba(37, 99, 235, 0.10); overflow: hidden; display: block; }
.qstats-subject-fill {
display: block;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, #2563eb, #38bdf8);
box-shadow: 0 2px 8px rgba(37, 99, 235, 0.30);
transition: width 700ms cubic-bezier(0.22,1,0.36,1);
}
.qstats-subject.is-strong .qstats-subject-fill { background: linear-gradient(90deg, #10b981, #34d399); box-shadow: 0 2px 8px rgba(16,185,129,0.30); }
.qstats-subject.is-weak   .qstats-subject-fill { background: linear-gradient(90deg, #f97316, #fbbf24); box-shadow: 0 2px 8px rgba(249,115,22,0.30); }
.qstats-subject-pct { font-weight: 800; color: #16233c; text-align: right; font-variant-numeric: tabular-nums; }
.qstats-subject-n { color: #8a96ab; font-size: 0.72rem; text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
.qstats-card { max-width: none; }
}
.dh-arena-chip.is-sample { background: rgba(13, 148, 136, 0.12); color: #0f766e; }
.dh-arena-chip.is-unlock { background: rgba(15, 23, 42, 0.06); color: var(--text); }