.ob-root {
position: fixed;
inset: 0;
z-index: 2300;
display: flex;
padding: 24px 16px;
overflow-y: auto;
background: radial-gradient(120% 90% at 50% 18%, #ffffff 0%, var(--bg) 52%, var(--bg-strong) 100%);
animation: ob-in 360ms ease both;
}
@keyframes ob-in { from { opacity: 0; } to { opacity: 1; } }
.ob-root.is-leaving {
animation: ob-out 380ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
pointer-events: none;
}
@keyframes ob-out { to { opacity: 0; transform: scale(1.03); filter: blur(6px); } }
.ob-orb {
position: fixed;
width: 56vmax;
height: 56vmax;
border-radius: 50%;
filter: blur(60px);
opacity: 0.55;
pointer-events: none;
}
.ob-orb-a {
left: -18vmax;
top: -22vmax;
background: radial-gradient(circle, rgba(16, 185, 129, 0.30), transparent 65%);
animation: ob-drift 14s ease-in-out infinite alternate;
}
.ob-orb-b {
right: -20vmax;
bottom: -24vmax;
background: radial-gradient(circle, rgba(10, 132, 255, 0.30), transparent 65%);
animation: ob-drift 16s ease-in-out infinite alternate-reverse;
}
@keyframes ob-drift { to { transform: translate(6vmax, 4vmax) scale(1.08); } }
.ob-welcome,
.ob-picker {
margin: auto;
}
.ob-welcome {
position: relative;
display: grid;
justify-items: center;
gap: 6px;
text-align: center;
transition: opacity 420ms ease, transform 520ms cubic-bezier(0.22, 0.68, 0.36, 1);
}
.ob-mark-wrap {
width: min(150px, 36vw);
margin-bottom: 14px;
}
.ob-mark {
display: block;
width: 100%;
height: auto;
overflow: visible;
}
.ob-mark .ob-disc,
.ob-mark .ob-halo,
.ob-mark .ob-dot,
.ob-mark .ob-pulse {
transform-box: fill-box;
transform-origin: center;
}
.ob-mark .ob-disc { opacity: 0; }
.ob-mark .ob-halo { opacity: 0; }
.ob-mark .ob-ring { stroke-dasharray: 115.6 115.6; stroke-dashoffset: 115.6; }
.ob-mark .ob-dot { opacity: 0; }
.ob-mark .ob-pulse { opacity: 0; }
.ob-root.is-playing .ob-disc { animation: ob-spin 1000ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.ob-root.is-playing .ob-halo { animation: ob-halo 900ms ease 120ms both; }
.ob-root.is-playing .ob-ring { animation: ob-ring 520ms cubic-bezier(0.65, 0, 0.35, 1) 430ms both; }
.ob-root.is-playing .ob-dot { animation: ob-dot 340ms cubic-bezier(0.3, 1.6, 0.5, 1) 900ms both; }
.ob-root.is-playing .ob-pulse { animation: ob-pulse 800ms cubic-bezier(0.2, 0.7, 0.3, 1) 1080ms both; }
@keyframes ob-spin {
0% { opacity: 0; transform: rotate(-300deg) scale(0.5); }
20% { opacity: 1; }
100% { opacity: 1; transform: rotate(0deg) scale(1); }
}
@keyframes ob-halo { from { opacity: 0; transform: scale(0.7); } to { opacity: 1; transform: scale(1); } }
@keyframes ob-ring { from { stroke-dashoffset: 115.6; } to { stroke-dashoffset: 43; } }
@keyframes ob-dot {
0% { opacity: 0; transform: scale(0.6); }
100% { opacity: 1; transform: scale(1); }
}
@keyframes ob-pulse {
0% { opacity: 0.7; transform: scale(1); }
100% { opacity: 0; transform: scale(1.7); }
}
.ob-welcome-title {
margin: 0;
color: var(--text);
font-size: clamp(28px, 4.6vw, 44px);
font-weight: 850;
line-height: 1.08;
letter-spacing: -0.035em;
opacity: 0;
}
.ob-welcome-sub {
margin: 4px 0 0;
color: var(--text);
font-size: clamp(16px, 2vw, 19px);
font-weight: 600;
opacity: 0;
}
.ob-root.is-playing .ob-welcome-title { animation: ob-rise 520ms cubic-bezier(0.22, 0.68, 0.36, 1) 1120ms both; }
.ob-root.is-playing .ob-welcome-sub { animation: ob-rise 520ms cubic-bezier(0.22, 0.68, 0.36, 1) 1260ms both; }
@keyframes ob-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.ob-picker {
position: absolute;
width: min(880px, calc(100% - 32px));
display: grid;
justify-items: center;
text-align: center;
opacity: 0;
visibility: hidden;
transform: translateY(16px);
transition: opacity 420ms ease 120ms, transform 520ms cubic-bezier(0.22, 0.68, 0.36, 1) 120ms, visibility 0s linear 540ms;
}
.ob-root.is-picking .ob-welcome {
position: fixed;
inset: 0;
width: fit-content;
height: fit-content;
opacity: 0;
transform: translateY(-24px) scale(0.94);
pointer-events: none;
}
.ob-root.is-picking .ob-picker {
position: relative;
opacity: 1;
visibility: visible;
transform: none;
transition-delay: 120ms, 120ms, 0s;
}
.ob-eyebrow {
margin: 0;
color: #047857;
font-size: 12px;
font-weight: 850;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.ob-picker-title {
margin: 8px 0 0;
color: var(--text);
font-size: clamp(28px, 4.2vw, 42px);
font-weight: 850;
line-height: 1.1;
letter-spacing: -0.035em;
}
.ob-picker-sub {
max-width: 52ch;
margin: 10px 0 0;
color: var(--text);
font-size: 16px;
font-weight: 500;
line-height: 1.5;
}
.ob-cards {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 14px;
width: 100%;
margin-top: 26px;
}
.ob-card { grid-column: span 2; }
.ob-card {
--ob-c1: #0a84ff;
--ob-c2: #4fb3ff;
--ob-tint: rgba(10, 132, 255, 0.08);
position: relative;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
grid-template-rows: auto 1fr;
align-items: start;
gap: 14px;
min-height: 148px;
padding: 20px 20px 18px;
border: 1px solid rgba(15, 23, 42, 0.08);
border-radius: 22px;
background: linear-gradient(180deg, #ffffff, #fbfdff);
box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08), 0 1px 0 rgba(255, 255, 255, 0.9) inset;
color: var(--text);
font: inherit;
text-align: left;
cursor: pointer;
opacity: 0;
transform: translateY(12px);
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.ob-root.is-picking .ob-card {
animation: ob-rise 460ms cubic-bezier(0.22, 0.68, 0.36, 1) both;
animation-delay: calc(220ms + var(--ob-i, 0) * 60ms);
}
.ob-card:focus-visible {
transform: translateY(-3px);
border-color: color-mix(in srgb, var(--ob-c1) 40%, transparent);
background: linear-gradient(180deg, #ffffff, var(--ob-tint));
box-shadow: 0 22px 44px rgba(15, 23, 42, 0.12);
outline: none;
}
@media (hover: hover) and (pointer: fine) {
.ob-card:hover {
transform: translateY(-3px);
border-color: color-mix(in srgb, var(--ob-c1) 40%, transparent);
background: linear-gradient(180deg, #ffffff, var(--ob-tint));
box-shadow: 0 22px 44px rgba(15, 23, 42, 0.12);
outline: none;
}
}
.ob-card:focus-visible {
box-shadow: 0 0 0 4px color-mix(in srgb, var(--ob-c1) 30%, transparent), 0 22px 44px rgba(15, 23, 42, 0.12);
}
.ob-card-icon {
display: grid;
place-items: center;
width: 46px;
height: 46px;
grid-row: span 2;
border-radius: 14px;
background: linear-gradient(135deg, var(--ob-c1), var(--ob-c2));
color: #fff;
box-shadow: 0 10px 20px color-mix(in srgb, var(--ob-c1) 32%, transparent);
}
.ob-card-icon svg {
width: 24px;
height: 24px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.ob-card-copy {
display: grid;
gap: 6px;
padding-right: 18px;
}
.ob-card-copy strong {
color: var(--text);
font-size: 18px;
font-weight: 850;
line-height: 1.2;
letter-spacing: -0.02em;
}
.ob-card-copy span {
color: var(--text);
font-size: 14px;
line-height: 1.45;
}
.ob-card-go {
position: absolute;
right: 18px;
top: 18px;
color: var(--ob-c1);
font-size: 18px;
font-weight: 800;
transition: transform 0.2s ease;
}
.ob-card:hover .ob-card-go,
.ob-card:focus-visible .ob-card-go {
transform: translateX(3px);
}
.ob-tone-blue { --ob-c1: #0a84ff; --ob-c2: #5ab4ff; --ob-tint: rgba(10, 132, 255, 0.07); }
.ob-tone-teal { --ob-c1: #0d9488; --ob-c2: #2dd4bf; --ob-tint: rgba(13, 148, 136, 0.07); }
.ob-tone-sky { --ob-c1: #0369a1; --ob-c2: #38bdf8; --ob-tint: rgba(3, 105, 161, 0.07); }
.ob-tone-amber { --ob-c1: #ea8a00; --ob-c2: #fbbf24; --ob-tint: rgba(234, 138, 0, 0.08); }
.ob-tone-green { --ob-c1: #16a34a; --ob-c2: #4ade80; --ob-tint: rgba(22, 163, 74, 0.07); }
.ob-tone-rose { --ob-c1: #e11d48; --ob-c2: #fb7185; --ob-tint: rgba(225, 29, 72, 0.06); }
.ob-skip {
margin-top: 22px;
padding: 10px 18px;
border: 0;
border-radius: 999px;
background: transparent;
box-shadow: none;
color: var(--text);
font: inherit;
font-size: 14.5px;
font-weight: 750;
text-decoration: underline;
text-decoration-color: rgba(17, 19, 24, 0.3);
text-underline-offset: 4px;
cursor: pointer;
}
.ob-skip:focus-visible {
background: transparent;
transform: none;
text-decoration-color: currentColor;
}
@media (hover: hover) and (pointer: fine) {
.ob-skip:hover {
background: transparent;
transform: none;
text-decoration-color: currentColor;
}
}
.ob-skip:focus-visible {
outline: 2px solid rgba(10, 132, 255, 0.45);
outline-offset: 2px;
}
.ob-card-badge {
justify-self: start;
padding: 3px 9px;
border-radius: 999px;
background: rgba(13, 148, 136, 0.12);
color: #0f766e;
font-size: 12px;
font-style: normal;
font-weight: 850;
letter-spacing: 0.02em;
}
.ob-card.is-featured {
border: 1.5px solid color-mix(in srgb, var(--ob-c1) 55%, transparent);
background:
radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--ob-c2) 24%, transparent), transparent 60%),
linear-gradient(180deg, #ffffff, var(--ob-tint));
box-shadow: 0 22px 46px color-mix(in srgb, var(--ob-c1) 22%, transparent), 0 1px 0 rgba(255, 255, 255, 0.9) inset;
}
.ob-card.is-featured .ob-card-copy strong { font-size: 19px; }
.ob-card-cta {
justify-self: start;
margin-top: 8px;
padding: 9px 16px;
border-radius: 999px;
background: linear-gradient(135deg, var(--ob-c1), var(--ob-c2));
color: #fff !important;
font-size: 14px !important;
font-weight: 850;
box-shadow: 0 10px 20px color-mix(in srgb, var(--ob-c1) 30%, transparent);
}
.ob-card-badge { color: var(--ob-c1); background: var(--ob-tint); }
.ob-card.is-building {
border: 1px dashed rgba(217, 119, 6, 0.5);
background:
repeating-linear-gradient(-45deg, rgba(245, 158, 11, 0.05) 0 12px, transparent 12px 24px),
#fffdf8;
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}
.ob-card.is-building .ob-card-icon {
filter: saturate(0.35);
opacity: 0.75;
}
.ob-card.is-building .ob-card-copy > span { color: #78350f; font-weight: 600; }
.ob-card-badge.is-building {
display: inline-flex;
align-items: center;
gap: 6px;
background: #fef3c7;
color: #92400e;
}
.ob-card-badge.is-building svg { width: 18px; height: 18px; flex-shrink: 0; }
.ob-coach-glow {
border-radius: 14px;
outline: 3px solid rgba(16, 185, 129, 0.7) !important;
outline-offset: 6px;
animation: ob-coach-pulse 1.6s ease-in-out 3;
}
@keyframes ob-coach-pulse {
50% { outline-color: rgba(16, 185, 129, 0.25); outline-offset: 10px; }
}
html[data-exam-format][data-nbme-open] .ob-coach { bottom: 78px; }
.ob-coach {
position: fixed;
left: 50%;
bottom: 22px;
z-index: 2400;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 14px;
width: min(640px, calc(100% - 24px));
padding: 16px 16px 16px 18px;
border-radius: 22px;
background: #ffffff;
border: 1px solid rgba(15, 23, 42, 0.10);
box-shadow: 0 24px 60px rgba(15, 23, 42, 0.24);
transform: translateX(-50%);
animation: ob-coach-in 360ms cubic-bezier(0.22, 0.68, 0.36, 1) both;
}
.ob-coach.is-leaving { animation: ob-out 220ms ease forwards; }
@keyframes ob-coach-in { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translate(-50%, 0); } }
.ob-coach-icon {
display: grid;
place-items: center;
width: 46px;
height: 46px;
border-radius: 14px;
background: linear-gradient(135deg, #10b981, #0a84ff);
color: #fff;
}
.ob-coach-icon.is-rose { background: linear-gradient(135deg, #e11d48, #fb7185); }
.ob-coach-icon svg {
width: 24px;
height: 24px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.ob-coach-step {
margin: 0;
color: #047857;
font-size: 11px;
font-weight: 850;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.ob-coach h3 {
margin: 2px 0 0;
color: var(--text);
font-size: 17px;
font-weight: 850;
letter-spacing: -0.02em;
}
.ob-coach-copy p:not(.ob-coach-step) {
margin: 4px 0 0;
color: var(--text);
font-size: 14px;
line-height: 1.45;
}
.ob-coach .ob-after-btn { min-height: 42px; padding: 0 18px; }
@media (max-width: 560px) {
.ob-coach { grid-template-columns: auto minmax(0, 1fr); }
.ob-coach .ob-after-btn { grid-column: 1 / -1; }
}
.ob-root.is-soon .ob-picker { display: none; }
.ob-soon {
display: grid;
justify-items: center;
width: min(640px, 100%);
margin: auto;
text-align: center;
animation: ob-rise 420ms cubic-bezier(0.22, 0.68, 0.36, 1) both;
}
.ob-soon-icon {
display: grid;
place-items: center;
width: 64px;
height: 64px;
margin-bottom: 14px;
border-radius: 20px;
background: linear-gradient(135deg, #f59e0b, #fbbf24);
color: #fff;
box-shadow: 0 16px 30px rgba(234, 138, 0, 0.28);
}
.ob-soon-icon svg {
width: 30px;
height: 30px;
fill: none;
stroke: currentColor;
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
}
.ob-eyebrow-amber { color: #b45309; }
.ob-soon .ob-picker-sub strong { color: #0f766e; }
.ob-after-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin-top: 22px;
}
.ob-after-btn {
min-height: 48px;
padding: 0 22px;
border: 1px solid rgba(15, 23, 42, 0.12);
border-radius: 999px;
background: #fff;
color: var(--text);
box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
font: inherit;
font-size: 15px;
font-weight: 800;
cursor: pointer;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.ob-after-btn:focus-visible {
transform: translateY(-1px);
box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
outline: none;
}
@media (hover: hover) and (pointer: fine) {
.ob-after-btn:hover {
transform: translateY(-1px);
box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
outline: none;
}
}
.ob-after-btn.is-primary {
border: 0;
background: linear-gradient(135deg, #10b981 0%, #0a84ff 75%);
color: #fff;
box-shadow: 0 14px 28px rgba(10, 132, 255, 0.28);
}
.ob-after-btn.is-primary::after { content: " →"; }
.ob-after {
position: fixed;
inset: 0;
z-index: 2300;
display: flex;
padding: 16px;
background: rgba(15, 23, 42, 0.30);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
animation: ob-in 240ms ease both;
}
.ob-after.is-leaving { animation: ob-out 260ms ease forwards; }
.ob-after-card {
display: grid;
justify-items: center;
width: min(520px, 100%);
margin: auto;
padding: 30px 28px 20px;
border-radius: 28px;
background: linear-gradient(180deg, #ffffff, #f7fbff);
border: 1px solid rgba(15, 23, 42, 0.08);
box-shadow: 0 40px 100px rgba(15, 23, 42, 0.26);
text-align: center;
animation: ob-rise 420ms cubic-bezier(0.22, 0.68, 0.36, 1) both;
}
.ob-after-title {
margin: 6px 0 0;
color: var(--text);
font-size: clamp(24px, 3.4vw, 30px);
font-weight: 850;
letter-spacing: -0.03em;
}
.ob-after-sub {
max-width: 42ch;
margin: 10px 0 0;
color: var(--text);
font-size: 15px;
line-height: 1.5;
}
.ob-after-card .ob-skip { margin-top: 12px; }
@media (max-width: 860px) {
.ob-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ob-card { grid-column: auto; }
}
@media (max-width: 560px) {
.ob-cards { grid-template-columns: 1fr; gap: 10px; margin-top: 20px; }
.ob-card { min-height: 0; padding: 16px; }
.ob-card-icon { width: 40px; height: 40px; border-radius: 12px; }
.ob-card-copy strong { font-size: 16.5px; }
.ob-picker-sub { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
.ob-root, .ob-root *, .ob-root *::before { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; }
.ob-orb { display: none; }
}
.ob-picker { width: min(980px, calc(100% - 32px)); }
.ob-picker-title:focus { outline: none; }
.ob-cards { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.ob-card {
grid-column: span 3;
min-height: 0;
gap: 12px;
padding: 16px 16px 14px;
}
.ob-card .ob-card-icon {
width: 40px;
height: 40px;
border-radius: 12px;
grid-row: span 2;
}
.ob-card .ob-card-icon svg { width: 21px; height: 21px; }
.ob-card .ob-card-copy {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 5px;
grid-row: span 2;
min-height: 100%;
padding-right: 14px;
}
.ob-card .ob-card-copy strong { font-size: 16px; }
.ob-card .ob-card-copy > span { font-size: 13.5px; }
.ob-card .ob-card-go { top: 14px; right: 14px; font-size: 16px; }
.ob-card.is-hero {
grid-column: span 6;
gap: 16px;
padding: 22px 22px 20px;
}
.ob-card.is-hero .ob-card-icon { width: 52px; height: 52px; border-radius: 16px; }
.ob-card.is-hero .ob-card-icon svg { width: 26px; height: 26px; }
.ob-card.is-hero .ob-card-copy { gap: 7px; padding-right: 0; }
.ob-card.is-hero .ob-card-copy strong { font-size: 21px; }
.ob-card.is-hero .ob-card-copy > span { font-size: 15px; }
.ob-card .ob-card-cta {
margin-top: auto;
padding: 10px 18px;
white-space: nowrap;
}
.ob-card.is-hero .ob-card-copy > span:not(.ob-card-cta) { margin-bottom: 10px; }
@media (max-width: 860px) {
.ob-cards { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.ob-card { grid-column: span 6; }
.ob-card.is-hero { grid-column: span 6; }
}
@media (max-width: 620px) {
.ob-card,
.ob-card.is-hero { grid-column: 1 / -1; }
.ob-card.is-hero { gap: 12px; padding: 16px; }
.ob-card.is-hero .ob-card-icon { width: 42px; height: 42px; border-radius: 13px; }
.ob-card.is-hero .ob-card-copy strong { font-size: 19px; }
.ob-card .ob-card-cta { max-width: 100%; white-space: normal; }
}
.ob-wb { padding: clamp(20px, 6vh, 64px) 16px 40px; }
.ob-wb-shell {
position: relative;
width: min(1000px, 100%);
margin: auto;
display: grid;
justify-items: center;
text-align: center;
}
.ob-wb-head {
display: grid;
justify-items: center;
}
.ob-wb-mark {
width: clamp(52px, 7vw, 64px);
margin-bottom: 14px;
}
.ob-wb-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0;
padding: 6px 13px 6px 10px;
border-radius: 999px;
background: rgba(16, 185, 129, 0.11);
color: #047857;
font-size: 12px;
font-weight: 850;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.ob-wb-eyebrow i {
width: 8px;
height: 8px;
border-radius: 50%;
background: #10b981;
animation: ob-wb-ping 2.2s ease-out 1.4s infinite;
}
@keyframes ob-wb-ping {
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); }
}
.ob-wb-title {
margin: 16px 0 0;
color: var(--text);
font-size: clamp(32px, 5.4vw, 56px);
font-weight: 850;
line-height: 1.05;
letter-spacing: -0.04em;
}
.ob-wb-title:focus { outline: none; }
.ob-wb-name {
padding-bottom: 0.06em;
background: linear-gradient(115deg, #10b981 0%, #0a84ff 72%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.ob-wb-lede {
max-width: 54ch;
margin: 16px 0 0;
color: var(--text);
font-size: clamp(16px, 1.9vw, 19px);
font-weight: 500;
line-height: 1.55;
}
.ob-wb-lede strong { font-weight: 800; }
.ob-wb-proof {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px 10px;
margin: 20px 0 0;
padding: 0;
list-style: none;
}
.ob-wb-proof li {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px 8px 10px;
border: 1px solid rgba(15, 23, 42, 0.07);
border-radius: 999px;
background: rgba(255, 255, 255, 0.82);
box-shadow: 0 6px 16px rgba(15, 23, 42, 0.05);
color: var(--text);
font-size: 13.5px;
font-weight: 600;
}
.ob-wb-proof b { font-weight: 850; font-variant-numeric: tabular-nums; }
.ob-wb.is-picking .ob-wb-proof { display: none; }
.ob-wb-proof svg {
width: 18px;
height: 18px;
flex-shrink: 0;
fill: none;
stroke: #0d9488;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.ob-wb-stage {
width: 100%;
margin-top: clamp(28px, 4.5vh, 44px);
}
.ob-wb-step {
--wb-base: 600ms;
display: grid;
justify-items: center;
}
.ob-wb.is-stepped .ob-wb-step { --wb-base: 40ms; }
.ob-wb-steprow {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 10px 14px;
margin-bottom: 14px;
}
.ob-wb-progress { display: inline-flex; gap: 5px; }
.ob-wb-progress i {
width: 30px;
height: 5px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.12);
}
.ob-wb-progress i.is-on { background: linear-gradient(90deg, #10b981, #0a84ff); }
.ob-wb-steptext {
color: #047857;
font-size: 12px;
font-weight: 850;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.ob-wb-step-title {
margin: 0;
color: var(--text);
font-size: clamp(24px, 3.2vw, 32px);
font-weight: 850;
line-height: 1.12;
letter-spacing: -0.03em;
}
.ob-wb-step-title:focus { outline: none; }
.ob-wb-step-sub {
max-width: 52ch;
margin: 8px 0 0;
color: var(--text);
font-size: 15.5px;
line-height: 1.5;
}
.ob-wb-themed {
--mh-a: #64748b;
--mh-b: #1e293b;
--mh-deep: #334155;
--mh-wash: rgba(100, 116, 139, 0.12);
}
.ob-wb-modchip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 4px 4px 4px 12px;
border: 1px solid rgba(15, 23, 42, 0.10);
border-radius: 999px;
background: #ffffff;
box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
color: var(--text);
font-size: 13.5px;
font-weight: 800;
}
.ob-wb-modchip > i {
width: 10px;
height: 10px;
border-radius: 50%;
background: linear-gradient(135deg, var(--mh-a), var(--mh-b));
}
.ob-wb-change {
margin: 0;
padding: 6px 11px;
border: 0;
border-radius: 999px;
background: rgba(15, 23, 42, 0.06);
box-shadow: none;
color: var(--text);
font: inherit;
font-size: 12.5px;
font-weight: 750;
cursor: pointer;
}
.ob-wb-change:focus-visible {
background: rgba(10, 132, 255, 0.12);
color: #0a5bd6;
outline: none;
}
@media (hover: hover) and (pointer: fine) {
.ob-wb-change:hover {
background: rgba(10, 132, 255, 0.12);
color: #0a5bd6;
outline: none;
}
}
.ob-wb-tiles {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
width: 100%;
margin-top: 24px;
}
.ob-wb-tile {
position: relative;
display: grid;
grid-template-columns: 64px minmax(0, 1fr);
align-items: center;
gap: 14px;
min-height: 96px;
padding: 14px 48px 14px 14px;
border: 1px solid rgba(15, 23, 42, 0.08);
border-radius: 20px;
background: linear-gradient(180deg, #ffffff, #fbfdff);
box-shadow: 0 12px 28px rgba(15, 23, 42, 0.07), 0 1px 0 rgba(255, 255, 255, 0.9) inset;
color: var(--text);
font: inherit;
text-align: left;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease, opacity 0.3s ease;
animation: ob-wb-rise 460ms cubic-bezier(0.22, 0.68, 0.36, 1) backwards;
animation-delay: calc(var(--wb-base) + 160ms + var(--ob-i, 0) * 45ms);
}
.ob-wb-tile:focus-visible {
transform: translateY(-3px);
border-color: color-mix(in srgb, var(--mh-a) 45%, transparent);
background: linear-gradient(180deg, #ffffff, var(--mh-wash));
box-shadow: 0 20px 40px rgba(15, 23, 42, 0.11);
outline: none;
}
@media (hover: hover) and (pointer: fine) {
.ob-wb-tile:hover {
transform: translateY(-3px);
border-color: color-mix(in srgb, var(--mh-a) 45%, transparent);
background: linear-gradient(180deg, #ffffff, var(--mh-wash));
box-shadow: 0 20px 40px rgba(15, 23, 42, 0.11);
outline: none;
}
}
.ob-wb-tile:focus-visible {
box-shadow: 0 0 0 4px color-mix(in srgb, var(--mh-a) 30%, transparent), 0 20px 40px rgba(15, 23, 42, 0.11);
}
.ob-wb-art {
display: block;
width: 64px;
height: 64px;
overflow: hidden;
border-radius: 16px;
background: radial-gradient(80% 80% at 50% 42%, var(--mh-wash), transparent 78%), #ffffff;
box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.05);
}
.ob-wb-art svg {
transform: scale(1.16);
filter: saturate(1.35) contrast(1.08);
}
.ob-wb-tile-copy {
display: grid;
gap: 1px;
min-width: 0;
}
.ob-wb-tile-copy small {
color: var(--mh-deep);
font-size: 11px;
font-weight: 850;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.ob-wb-tile-copy strong {
color: var(--text);
font-size: 21px;
font-weight: 850;
line-height: 1.15;
letter-spacing: -0.02em;
}
.ob-wb-tile-copy > span {
color: #475569;
font-size: 13px;
line-height: 1.35;
}
.ob-wb-tile-check {
position: absolute;
top: 50%;
right: 14px;
display: grid;
place-items: center;
width: 26px;
height: 26px;
margin-top: -13px;
border: 1.5px solid rgba(15, 23, 42, 0.14);
border-radius: 50%;
color: transparent;
transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.ob-wb-tile-check svg {
width: 15px;
height: 15px;
fill: none;
stroke: currentColor;
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
}
@media (hover: hover) and (pointer: fine) {
.ob-wb-tile:hover .ob-wb-tile-check { border-color: var(--mh-a); }
}
.ob-wb-tile.is-current { border: 1.5px solid color-mix(in srgb, var(--mh-a) 55%, transparent); }
.ob-wb-tile.is-current .ob-wb-tile-check,
.ob-wb-tile.is-picked .ob-wb-tile-check {
border-color: transparent;
background: linear-gradient(135deg, var(--mh-a), var(--mh-b));
color: #ffffff;
}
.ob-wb-tile.is-picked {
transform: scale(1.03);
border-color: var(--mh-a);
background: linear-gradient(180deg, #ffffff, var(--mh-wash));
box-shadow: 0 0 0 4px color-mix(in srgb, var(--mh-a) 24%, transparent), 0 24px 48px rgba(15, 23, 42, 0.14);
}
.ob-wb-tile.is-picked .ob-wb-tile-check { animation: ob-wb-pop 380ms cubic-bezier(0.3, 1.6, 0.5, 1) both; }
.ob-wb-tiles.has-pick .ob-wb-tile:not(.is-picked) { opacity: 0.35; transform: scale(0.98); }
.ob-wb.is-saving .ob-wb-tile { pointer-events: none; }
@keyframes ob-wb-pop { from { transform: scale(0.3); } to { transform: scale(1); } }
@keyframes ob-wb-rise { from { opacity: 0; transform: translateY(12px); } }
.ob-wb-eyebrow,
.ob-wb-title,
.ob-wb-lede,
.ob-wb-proof,
.ob-wb-steprow,
.ob-wb-step-title,
.ob-wb-step-sub,
.ob-wb-step > .ob-skip {
animation: ob-wb-rise 520ms cubic-bezier(0.22, 0.68, 0.36, 1) backwards;
}
.ob-wb-eyebrow { animation-delay: 140ms; }
.ob-wb-title { animation-delay: 240ms; }
.ob-wb-lede { animation-delay: 380ms; }
.ob-wb-proof { animation-delay: 500ms; }
.ob-wb-steprow { animation-delay: var(--wb-base); }
.ob-wb-step-title { animation-delay: calc(var(--wb-base) + 50ms); }
.ob-wb-step-sub { animation-delay: calc(var(--wb-base) + 100ms); }
.ob-wb-step > .ob-skip { animation-delay: calc(var(--wb-base) + 700ms); }
.ob-wb.is-picking .ob-card {
opacity: 1;
transform: none;
animation-fill-mode: backwards;
animation-delay: calc(var(--wb-base) + 180ms + var(--ob-i, 0) * 60ms);
}
.ob-wb.is-picking .ob-card:focus-visible { transform: translateY(-3px); }
@media (hover: hover) and (pointer: fine) {
.ob-wb.is-picking .ob-card:hover { transform: translateY(-3px); }
}
.ob-wb .ob-card.is-featured .ob-card-cta {
position: relative;
overflow: hidden;
isolation: isolate;
}
.ob-wb .ob-card.is-featured .ob-card-cta::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(105deg, transparent 25%, rgba(255, 255, 255, 0.6) 50%, transparent 75%);
transform: translateX(-130%);
animation: ob-wb-sheen 1100ms cubic-bezier(0.4, 0, 0.2, 1) 2 backwards;
animation-delay: calc(var(--wb-base) + 1100ms);
}
@keyframes ob-wb-sheen {
from { transform: translateX(-130%); }
to { transform: translateX(130%); }
}
.ob-wb.is-soon .ob-wb-stage { display: none; }
.ob-wb .ob-soon { margin-top: clamp(28px, 4.5vh, 44px); }
@media (min-width: 861px) and (max-height: 900px) {
.ob-wb { padding-top: clamp(16px, 3vh, 28px); }
.ob-wb-mark { width: 48px; margin-bottom: 10px; }
.ob-wb-title { margin-top: 12px; font-size: clamp(32px, 4.4vw, 48px); }
.ob-wb-lede { margin-top: 10px; font-size: 17px; }
.ob-wb-proof { margin-top: 14px; }
.ob-wb-stage { margin-top: 24px; }
.ob-wb-steprow { margin-bottom: 10px; }
.ob-wb-tiles { gap: 10px; margin-top: 18px; }
.ob-wb-tile { min-height: 82px; padding-top: 11px; padding-bottom: 11px; }
.ob-wb-art { width: 58px; height: 58px; }
.ob-wb-tile { grid-template-columns: 58px minmax(0, 1fr); }
}
@media (max-width: 860px) {
.ob-wb-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ob-wb-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
.ob-wb { padding-top: 20px; }
.ob-wb-mark { margin-bottom: 10px; }
.ob-wb-title { margin-top: 12px; }
.ob-wb-lede { margin-top: 12px; }
.ob-wb-proof li { font-size: 12.5px; padding: 7px 12px 7px 9px; }
.ob-wb-tiles { grid-template-columns: 1fr; gap: 8px; margin-top: 18px; }
.ob-wb-tile {
grid-template-columns: 44px minmax(0, 1fr);
gap: 10px;
min-height: 0;
padding: 10px 34px 10px 10px;
border-radius: 16px;
}
.ob-wb-art { width: 44px; height: 44px; border-radius: 12px; }
.ob-wb-tile-copy small { font-size: 10px; }
.ob-wb-tile-copy strong { font-size: 17px; }
.ob-wb-tile-copy > span { font-size: 12px; }
.ob-wb-tile-check { right: 10px; width: 20px; height: 20px; margin-top: -10px; }
.ob-wb-tile-check svg { width: 12px; height: 12px; }
}
.ob-sims {
width: 100%;
margin-top: 34px;
}
.ob-sims-head {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
}
.ob-sims-head::before,
.ob-sims-head::after {
content: "";
flex: 1 1 0;
height: 1px;
background: rgba(15, 23, 42, 0.10);
}
.ob-sims-new {
flex: 0 0 auto;
padding: 4px 10px;
border-radius: 999px;
background: rgba(16, 185, 129, 0.12);
color: #047857;
font-size: 11.5px;
font-weight: 850;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.ob-sims-title {
flex: 0 1 auto;
margin: 0;
color: var(--text);
font-size: 20px;
font-weight: 850;
line-height: 1.2;
letter-spacing: -0.02em;
}
.ob-sims-row {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
margin-top: 18px;
}
.ob-sim {
--ob-sim-ink: #0a84ff;
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas: "art art" "copy go";
align-items: start;
gap: 12px 10px;
padding: 8px 8px 16px;
border: 1px solid rgba(15, 23, 42, 0.08);
border-radius: 22px;
background: #ffffff;
box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
color: var(--text);
font: inherit;
text-align: left;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.ob-sim:focus-visible {
transform: translateY(-3px);
border-color: color-mix(in srgb, var(--ob-sim-ink) 38%, transparent);
box-shadow: 0 22px 44px rgba(15, 23, 42, 0.12);
outline: none;
}
@media (hover: hover) and (pointer: fine) {
.ob-sim:hover {
transform: translateY(-3px);
border-color: color-mix(in srgb, var(--ob-sim-ink) 38%, transparent);
box-shadow: 0 22px 44px rgba(15, 23, 42, 0.12);
outline: none;
}
}
.ob-sim:focus-visible {
box-shadow: 0 0 0 4px color-mix(in srgb, var(--ob-sim-ink) 26%, transparent), 0 22px 44px rgba(15, 23, 42, 0.12);
}
.ob-sim--ekg { --ob-sim-ink: #e11d48; }
.ob-sim--vascular { --ob-sim-ink: #dc2626; }
.ob-sim--kidney { --ob-sim-ink: #0a84ff; }
.ob-sim-art {
grid-area: art;
display: block;
height: 96px;
overflow: hidden;
border: 1px solid rgba(15, 23, 42, 0.06);
border-radius: 15px;
}
.ob-sim-art svg {
display: block;
width: 100%;
height: 100%;
}
.ob-sim-copy {
grid-area: copy;
display: grid;
gap: 3px;
min-width: 0;
padding-left: 8px;
}
.ob-sim-copy strong {
color: var(--text);
font-size: 17px;
font-weight: 850;
line-height: 1.2;
letter-spacing: -0.02em;
}
.ob-sim-copy > span {
color: var(--text);
font-size: 13.5px;
line-height: 1.4;
}
.ob-sim-go {
grid-area: go;
padding: 2px 8px 0 0;
color: #0071e3;
font-size: 13.5px;
font-weight: 800;
white-space: nowrap;
transition: transform 0.2s ease;
}
.ob-sim:hover .ob-sim-go,
.ob-sim:focus-visible .ob-sim-go { transform: translateX(3px); }
.ob-sim--ekg .ob-sim-art {
background-color: #fff6f5;
background-image:
linear-gradient(rgba(244, 63, 94, 0.22) 1px, transparent 1px),
linear-gradient(90deg, rgba(244, 63, 94, 0.22) 1px, transparent 1px),
linear-gradient(rgba(244, 63, 94, 0.09) 1px, transparent 1px),
linear-gradient(90deg, rgba(244, 63, 94, 0.09) 1px, transparent 1px);
background-size: 30px 30px, 30px 30px, 6px 6px, 6px 6px;
background-position: -1px -1px;
}
.ob-sim-ghost,
.ob-sim-trace {
fill: none;
stroke: #1f2937;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.ob-sim-ghost { opacity: 0.13; }
.ob-sim-trace {
stroke-dasharray: 100;
stroke-dashoffset: 100;
animation: ob-sim-sweep 3.4s linear infinite;
}
@keyframes ob-sim-sweep {
0% { stroke-dashoffset: 100; opacity: 1; }
78% { stroke-dashoffset: 0; opacity: 1; }
94%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
.ob-sim--vascular .ob-sim-art { background: radial-gradient(90% 130% at 50% 0%, #ffffff, #f2f5fa); }
.ob-sim-artery,
.ob-sim-vein,
.ob-sim-pulse {
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
.ob-sim-vein { stroke: #3b82f6; stroke-width: 3; opacity: 0.42; }
.ob-sim-artery { stroke: #dc2626; stroke-width: 3.4; }
.ob-sim-pulse {
stroke: #ffffff;
stroke-width: 1.6;
opacity: 0.95;
stroke-dasharray: 12 400;
stroke-dashoffset: 12;
animation: ob-sim-pulse 2.4s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes ob-sim-pulse { to { stroke-dashoffset: -140; } }
.ob-sim--kidney .ob-sim-art { background: radial-gradient(90% 130% at 40% 0%, #ffffff, #edf4ff); }
.ob-sim-kidney { fill: #fecdd3; stroke: #e11d48; stroke-width: 2.2; stroke-linejoin: round; }
.ob-sim-calyx { fill: none; stroke: #fb7185; stroke-width: 1.8; stroke-linecap: round; }
.ob-sim-ureter { fill: none; stroke: #fde68a; stroke-width: 6; stroke-linecap: round; }
.ob-sim-urine {
fill: none;
stroke: #d97706;
stroke-width: 3.4;
stroke-linecap: round;
stroke-dasharray: 0.1 10;
animation: ob-sim-flow 1.3s linear infinite;
}
@keyframes ob-sim-flow { to { stroke-dashoffset: -20.2; } }
.ob-sim-bars rect {
transform-box: fill-box;
transform-origin: 50% 100%;
animation: ob-sim-bar 2.4s ease-in-out infinite alternate;
}
.ob-sim-bars rect:nth-child(1) { fill: #0a84ff; }
.ob-sim-bars rect:nth-child(2) { fill: #38bdf8; animation-delay: -0.8s; }
.ob-sim-bars rect:nth-child(3) { fill: #10b981; animation-delay: -1.6s; }
@keyframes ob-sim-bar {
from { transform: scaleY(0.35); }
to { transform: scaleY(1); }
}
.ob-sim-axis { stroke: rgba(15, 23, 42, 0.18); stroke-width: 1.5; }
.ob-root.is-picking .ob-sims { animation: ob-rise 460ms cubic-bezier(0.22, 0.68, 0.36, 1) 640ms both; }
.ob-wb.is-picking .ob-sims {
animation: ob-wb-rise 520ms cubic-bezier(0.22, 0.68, 0.36, 1) backwards;
animation-delay: calc(var(--wb-base) + 520ms);
}
@media (max-width: 620px) {
.ob-sims { margin-top: 26px; }
.ob-sims-head { flex-wrap: wrap; gap: 8px; }
.ob-sims-head::before,
.ob-sims-head::after { display: none; }
.ob-sims-title { flex-basis: 100%; font-size: 18px; text-align: center; }
.ob-sims-row { grid-template-columns: 1fr; gap: 10px; margin-top: 14px; }
.ob-sim {
grid-template-columns: 112px minmax(0, 1fr);
grid-template-areas: "art copy" "art go";
align-items: center;
gap: 4px 12px;
padding: 8px 12px 8px 8px;
border-radius: 18px;
}
.ob-sim-art { height: 76px; border-radius: 12px; }
.ob-sim-copy { padding-left: 0; }
.ob-sim-copy strong { font-size: 16px; }
.ob-sim-copy > span { font-size: 12.5px; }
.ob-sim-go { padding: 0; font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
.ob-sim-art * { animation: none !important; }
.ob-sim-trace { stroke-dashoffset: 0; }
.ob-sim-pulse,
.ob-sim-urine { display: none; }
}
.ob-card-actions {
grid-column: 1 / -1;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-top: 2px;
}
.ob-card-actions button { white-space: nowrap; }
.ob-card-actions .ob-card-cta {
margin-top: 0;
border: 0;
font-family: inherit;
line-height: 1.2;
cursor: pointer;
}
.ob-card-build {
padding: 8px 15px;
border: 1px solid color-mix(in srgb, var(--ob-c1) 38%, transparent);
border-radius: 999px;
background: #fff;
box-shadow: none;
color: var(--ob-c1);
font: inherit;
font-size: 14px;
font-weight: 800;
line-height: 1.2;
cursor: pointer;
}
.ob-card-actions .ob-card-cta:focus-visible {
transform: none;
filter: brightness(1.05);
}
@media (hover: hover) and (pointer: fine) {
.ob-card-actions .ob-card-cta:hover {
transform: none;
filter: brightness(1.05);
}
}
.ob-card-build:focus-visible {
background: var(--ob-tint);
border-color: var(--ob-c1);
box-shadow: none;
transform: none;
}
@media (hover: hover) and (pointer: fine) {
.ob-card-build:hover {
background: var(--ob-tint);
border-color: var(--ob-c1);
box-shadow: none;
transform: none;
}
}
.ob-card-actions button:focus-visible {
outline: 2px solid color-mix(in srgb, var(--ob-c1) 55%, transparent);
outline-offset: 2px;
}
.ob-cards > .ob-card:not(.is-hero):last-child:nth-child(3) { grid-column: 1 / -1; }