@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400..800&family=Instrument+Serif:ital@0;1&display=swap");
:root {
  color-scheme: light;
  --bg: #f7f7f2;
  --surface: #ffffff;
  --surface-secondary: #eff1ec;
  --text: #17202a;
  --text-muted: #6b7280;
  --primary: #16324f;
  --primary-hover: #214665;
  --accent-emerald: #2f7d6d;
  --accent-soft: #ddede8;
  --border: #dfe3de;
  --success: #3f7d60;
  --success-soft: #e2eee8;
  --warning: #a66f25;
  --warning-soft: #f5ead8;
  --error: #b85450;
  --error-soft: #f5e2e0;
  --on-primary: #ffffff;
  --on-accent: #ffffff;
  --overlay: rgba(13, 17, 23, .58);
  --shadow-color: rgba(23, 32, 42, .14);
  --primary-rgb: 22, 50, 79;
  --accent-rgb: 47, 125, 109;
  --error-rgb: 184, 84, 80;

  /* Aliases keep the existing page-level CSS structure intact. */
  --night: var(--bg);
  --paper: var(--bg);
  --panel: var(--surface);
  --panel-2: var(--surface-secondary);
  --surface-2: var(--surface-secondary);
  --surface-raised: var(--surface-secondary);
  --ink: var(--text);
  --muted: var(--text-muted);
  --line: var(--border);
  --mint: var(--primary);
  --mint-dark: var(--primary-hover);
  --blue: var(--primary);
  --blue-dark: var(--primary-hover);
  --blue-soft: var(--surface-secondary);
  --green: var(--success);
  --green-soft: var(--success-soft);
  --red: var(--error);
  --red-soft: var(--error-soft);
  --amber: var(--warning);
  --danger: var(--error);
  --accent: var(--primary);
  --accent-ink: var(--on-primary);
  --shadow: 0 24px 60px var(--shadow-color);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d1117;
  --surface: #151b23;
  --surface-secondary: #1c242e;
  --text: #f1f3f5;
  --text-muted: #9ca6b2;
  --primary: #86a9c5;
  --primary-hover: #a1bed3;
  --accent-emerald: #5fb49c;
  --accent-soft: #173d35;
  --border: #29323d;
  --success: #69b58e;
  --success-soft: #173d35;
  --warning: #d3a354;
  --warning-soft: #3a2c18;
  --error: #d36b66;
  --error-soft: #3d2022;
  --on-primary: #0d1117;
  --on-accent: #0d1117;
  --overlay: rgba(3, 7, 12, .74);
  --shadow-color: rgba(0, 0, 0, .38);
  --primary-rgb: 134, 169, 197;
  --accent-rgb: 95, 180, 156;
  --error-rgb: 211, 107, 102;
}

html { background: var(--bg); color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }
body { background-color: var(--bg) !important; color: var(--text); }
::selection { background: var(--accent-soft); color: var(--text); }

.theme-transition *, .theme-transition *::before, .theme-transition *::after {
  transition-property: background-color, border-color, color, fill, stroke, box-shadow !important;
  transition-duration: 180ms !important;
  transition-timing-function: ease !important;
}

.theme-toggle {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--primary);
  box-shadow: none;
  cursor: pointer;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
  transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}
.theme-toggle:hover { border-color: var(--primary); background: var(--surface-secondary); transform: translateY(-1px); }
.theme-toggle:focus-visible { outline: 3px solid rgba(var(--primary-rgb), .24); outline-offset: 3px; }
.theme-icon { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.theme-icon-moon { display: none; }
[data-theme="dark"] .theme-icon-sun { display: none; }
[data-theme="dark"] .theme-icon-moon { display: block; }

input, textarea, select { border-color: var(--border) !important; background-color: var(--surface) !important; color: var(--text) !important; }
input::placeholder, textarea::placeholder { color: var(--text-muted); opacity: .78; }
input:focus, textarea:focus, select:focus { border-color: var(--primary) !important; box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .12) !important; }
button:disabled, input:disabled, textarea:disabled, select:disabled { opacity: .55; }

.home-brand, .choice-brand, .brand em, .legal-brand { color: var(--primary); }
.home-mark, .choice-brand > span, .account-mark, .brand-mark, .legal-mark,
.exam-brand > span, .mock-access-loader, .product-auth-loader::before, .home-auth-loader::before {
  background: var(--accent-emerald) !important;
  color: var(--on-accent) !important;
  box-shadow: none !important;
}
.product-auth-loader span, .home-auth-loader span { color: var(--on-accent); }
.product-auth-loader i, .home-auth-loader i { border-color: rgba(var(--accent-rgb), .22); border-top-color: var(--accent-emerald); }

.home-nav, .choice-nav, .account-nav, .pricing-nav, .legal-nav, .product-nav, .topbar, .exam-bar { border-color: var(--border) !important; }
.topbar, .product-nav, .exam-bar { background: color-mix(in srgb, var(--bg) 92%, transparent) !important; }
.writing-subnav, .toefl-modebar { background: color-mix(in srgb, var(--bg) 88%, transparent) !important; border-color: var(--border) !important; }
.home-profile, .profile-button, .product-account-button, .exam-switcher-button,
.home-profile-menu, .profile-menu, .product-account-menu, .exam-switcher-menu, .choice-guide-panel {
  border-color: var(--border) !important;
  background: var(--surface) !important;
  color: var(--text) !important;
  box-shadow: 0 18px 54px var(--shadow-color) !important;
}
.home-profile, .profile-button, .product-account-button, .exam-switcher-button { box-shadow: none !important; }
.home-profile-menu button:hover, .profile-menu button:hover, .product-account-menu button:hover,
.product-account-menu .account-menu-link:hover, .exam-switcher-menu button:hover, .exam-switcher-menu button.selected {
  background: var(--surface-secondary) !important;
  color: var(--primary) !important;
}
.account-nav > .nav-return, .pricing-nav > .nav-return, .legal-nav > nav, .home-nav > .back-home { margin-left: auto; }
.account-nav > .theme-toggle, .pricing-nav > .theme-toggle, .legal-nav > .theme-toggle, .home-nav > .theme-toggle { margin-left: 12px; }

.home-cta, .button.primary, .btn.primary, .plan-action, .mock-test-status, .tour-next, .entry-modal-actions .primary {
  border-color: var(--primary) !important;
  background: var(--primary) !important;
  color: var(--on-primary) !important;
  box-shadow: none !important;
}
.home-cta *, .button.primary *, .btn.primary * { color: var(--on-primary) !important; }
.home-cta:hover, .button.primary:hover, .btn.primary:hover, .plan-action:hover,
.mock-test-row:hover .mock-test-status, .mock-test-row:focus-visible .mock-test-status,
.tour-next:hover, .tour-next:focus-visible {
  border-color: var(--primary-hover) !important;
  background: var(--primary-hover) !important;
  color: var(--on-primary) !important;
}
.button.secondary, .btn.subtle, .nav-account, .auth-button, .guide-link { border-color: var(--border); background-color: transparent; color: var(--text-muted); }
.button.secondary:hover, .btn.subtle:hover, .nav-account:hover, .auth-button:hover, .guide-link:hover { color: var(--text); background-color: var(--surface-secondary); }
.nav-account.signup, .nav-account.pro, .choice-pro-link, .product-pro-action, .pro-nav-action {
  border-color: rgba(var(--primary-rgb), .38) !important;
  background: rgba(var(--primary-rgb), .08) !important;
  color: var(--primary) !important;
}
.nav-account.pro:hover, .choice-pro-link:hover, .product-pro-action:hover, .pro-nav-action:hover { background: var(--primary) !important; color: var(--on-primary) !important; }

/* Homepage and exam choice */
.home-hero {
  background: radial-gradient(circle at 75% 48%, rgba(var(--accent-rgb), .08), transparent 28%), linear-gradient(rgba(var(--primary-rgb), .035) 1px, transparent 1px), var(--bg) !important;
  border-color: var(--border) !important;
}
.exam-choice, .practice-preview { background: var(--surface-secondary) !important; border-color: var(--border) !important; }
.placeholder-page, .home-final-cta { background: radial-gradient(circle at 70% 40%, rgba(var(--accent-rgb), .08), transparent 28%), var(--bg) !important; }
.hero-intro, .preview-passage p, .preview-email-points, .feedback-example-suggestion p { color: var(--text-muted) !important; }
.orbit-ring { border-color: rgba(var(--primary-rgb), .22) !important; }
.ring-two { border-color: var(--border) !important; }
.orbit-core { border-color: rgba(var(--primary-rgb), .42) !important; background: var(--surface) !important; box-shadow: 0 0 70px rgba(var(--accent-rgb), .08) !important; }
.orbit-core:hover, .orbit-core:focus-visible { background: var(--surface-secondary) !important; box-shadow: 0 0 70px rgba(var(--accent-rgb), .12) !important; }
.skill-word { background: var(--bg) !important; color: var(--text) !important; }
.skill-word:hover, .skill-word:focus-visible { border-color: var(--primary) !important; background: var(--surface) !important; color: var(--primary) !important; }
.orbit-signal { background: var(--accent-emerald) !important; box-shadow: 0 0 14px 3px rgba(var(--accent-rgb), .2) !important; }
.hero-index, .coming-index { color: rgba(var(--primary-rgb), .055) !important; }
.exam-front, .exam-face, .preview-passage, .preview-listen, .preview-speak-plan,
.preview-task textarea, .preview-listen button, .preview-record, .feedback-example-report { background: var(--surface) !important; color: var(--text) !important; border-color: var(--border) !important; }
.exam-back { background: var(--accent-soft) !important; color: var(--text) !important; box-shadow: 0 24px 60px var(--shadow-color) !important; }
.exam-back .exam-copy > span, .exam-back .exam-description, .exam-back .exam-status { color: var(--text-muted) !important; }
.exam-back .exam-number, .exam-back .exam-index, .exam-go, .click-go { color: var(--accent-emerald) !important; }
.preview-options button { border-color: var(--border) !important; color: var(--text) !important; }
.preview-options button:hover, .preview-options button.selected { border-color: var(--primary) !important; background: rgba(var(--primary-rgb), .07) !important; }
.preview-feedback { color: var(--error) !important; }
.preview-record i { background: var(--error) !important; box-shadow: 0 0 0 5px rgba(var(--error-rgb), .1) !important; }
.home-modal-layer { background: var(--overlay) !important; }
.home-modal { border-color: var(--border) !important; background: var(--surface) !important; color: var(--text) !important; box-shadow: 0 30px 90px var(--shadow-color) !important; }
.choice-page { background: radial-gradient(circle at 82% 18%, rgba(var(--accent-rgb), .08), transparent 31%), linear-gradient(rgba(var(--primary-rgb), .035) 1px, transparent 1px), var(--bg) !important; }
.exam-card.unavailable .exam-front { border-color: var(--border) !important; background: var(--surface-secondary) !important; }
.exam-card.unavailable .exam-name, .exam-card.unavailable .exam-description, .exam-card.unavailable .exam-meta, .exam-card.unavailable .exam-arrow { color: var(--text-muted) !important; }
.choice-footer, .home-footer, .home-footer nav a { color: var(--text-muted) !important; border-color: var(--border) !important; }

/* Account, dashboard, settings, and pricing */
.auth-context p, .step-copy, .field-note, .form-status, .profile-heading p,
.workspace-heading p, .pricing-heading p, .pricing-note, .promo-placeholder-note { color: var(--text-muted) !important; }
.trust-list li, .field label, .resume-copy > p, .resume-progress > div { color: var(--text) !important; border-color: var(--border) !important; }
.auth-panel, .settings-form, .password-panel, .promo-form, .dashboard-panel,
.next-action, .resume-card, .exam-switcher-menu { color: var(--text); }
.guest-divider span { background: var(--bg) !important; }
.button.guest, .text-link, .profile-eyebrow, .auth-context small, .pricing-heading > span { color: var(--primary) !important; }
.button.guest { border-color: rgba(var(--primary-rgb), .38) !important; }
.button.guest:hover, .profile-nav button.active, .product-nav-links button.active { background: rgba(var(--primary-rgb), .07) !important; border-color: var(--primary) !important; color: var(--text) !important; }
.form-status.error { color: var(--error) !important; }
.form-status.success { color: var(--success) !important; }
.product-body { background: radial-gradient(circle at 72% -15%, rgba(var(--accent-rgb), .06), transparent 30rem), var(--bg) !important; }
.resume-panel, .resume-card, .settings-account-summary, .dashboard-summary, .plan-card, .device-check {
  border-color: var(--border) !important;
  background: var(--surface) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}
.resume-track { background: var(--surface-secondary) !important; }
.resume-track span, .progress-track span { background: var(--accent-emerald) !important; }
.empty-mark { background: var(--accent-soft) !important; color: var(--accent-emerald) !important; }
.dashboard-section-row:hover, .activity-row:hover, .task-performance-row:hover, .mock-history-row:hover, .mock-hub-row:hover { background: var(--surface-secondary) !important; }
.mock-history-row.status-in-progress, .task-performance-row.needs-attention, .mock-hub-row.status-in-progress { border-left-color: var(--warning) !important; }
.task-performance-row.needs-attention { background: var(--warning-soft) !important; }
.task-performance-row > b em { color: var(--warning) !important; }
.skill-reading, .skill-listening, .skill-speaking, .skill-writing { box-shadow: inset 0 2px var(--primary) !important; }
.plan-card.recommended { border-color: var(--accent-emerald) !important; box-shadow: 0 0 0 1px var(--accent-emerald) !important; }
.plan-top strong { background: var(--accent-emerald) !important; color: var(--on-accent) !important; }
.recommended .plan-action { background: var(--primary) !important; }
.pro-includes li, .current-access { color: var(--text) !important; }
.pro-includes li::before { background: var(--accent-emerald) !important; }

/* Legal pages */
.legal-content p, .legal-content ul { color: var(--text) !important; }
.legal-content section, .legal-footer { border-color: var(--border) !important; }
.legal-note { border-color: rgba(var(--accent-rgb), .28) !important; background: var(--accent-soft) !important; }
.legal-eyebrow, .legal-nav nav a[aria-current="page"], .legal-nav nav a:hover { color: var(--primary) !important; }

/* TOEFL practice workspace */
body:has(.topbar) { background: radial-gradient(circle at 12% -10%, rgba(var(--accent-rgb), .07), transparent 34%), linear-gradient(rgba(var(--primary-rgb), .028) 1px, transparent 1px), var(--bg) !important; }
.section-tabs, .timer, .compose-panel, .question-panel, .question-surface, .reading-document,
.audio-gate, .audio-stage, .ursula-player, .choice-option, .composer-zone, .word-bank,
.word-tile, .discussion-compose, .feedback-columns > div, .feedback-score-head > div,
.feedback-priorities section, .rubric-chip, .model-answer, .speaking-stage {
  border-color: var(--border) !important;
  background: var(--surface) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}
.section-tabs, .word-bank, .feedback-columns > div, .feedback-score-head > div, .feedback-priorities section, .rubric-chip { background: var(--surface-secondary) !important; }
.task-help { border-color: var(--border) !important; background: var(--surface) !important; color: var(--primary) !important; box-shadow: 0 10px 28px var(--shadow-color) !important; }
.section-tab.active { background: var(--primary) !important; color: var(--on-primary) !important; box-shadow: none !important; }
.section-tab.active .tab-count { background: rgba(255,255,255,.16) !important; color: inherit !important; }
[data-theme="dark"] .section-tab.active .tab-count { background: rgba(13,17,23,.16) !important; }
.reading-document-head, .reading-document-body .subject-line, .choice-option.selected,
.line-slot:hover, .line-slot.drag-over, .option-word:hover, .evaluation-progress {
  background: rgba(var(--primary-rgb), .06) !important;
  border-color: var(--primary) !important;
}
.reading-document-body, .reading-document-body .chat-line, .listening-transcript,
.prompt-column > p, .task-list li, .post p, .feedback-breakdown dt, .feedback-highlights > div,
.model-answer p, textarea[readonly], .cloze-reconstructed { color: var(--text) !important; }
.reading-document-body .chat-line, .response-box, textarea[readonly] { background: var(--surface-secondary) !important; border-color: var(--border) !important; }
.cloze-char { border-color: var(--text-muted) !important; color: var(--text) !important; }
.cloze-char:focus { border-color: var(--primary) !important; background: rgba(var(--primary-rgb), .08) !important; }
.word-tile.correct, .cloze-char.correct, .line-slot.correct { border-color: var(--success) !important; background: var(--success-soft) !important; color: var(--success) !important; }
.word-tile.incorrect, .cloze-char.incorrect, .line-slot.incorrect { border-color: var(--error) !important; background: var(--error-soft) !important; color: var(--error) !important; }
.cloze-char.unanswered, .cloze-reviewed-word.unanswered { border-color: var(--warning) !important; background: var(--warning-soft) !important; color: var(--warning) !important; }
.cloze-correct-ending, .cloze-feedback-list li.correct > span:first-child, .cloze-feedback-list b { color: var(--success) !important; }
.cloze-feedback-list li > span:first-child { color: var(--error) !important; }
.cloze-feedback-list li.unanswered > span:first-child { color: var(--warning) !important; }
.player-toggle { border-color: var(--primary) !important; background: var(--surface-secondary) !important; color: var(--primary) !important; }
.player-track, .speaking-mic-signal i { background: var(--border) !important; }
.player-track span, .speaking-mic-signal span, .mic-meter span { background: var(--accent-emerald) !important; }
.timer.urgent, .speaking-countdown.urgent, .exam-clock.urgent strong { color: var(--error) !important; border-color: var(--error) !important; }
.mic-icon.error, .speaking-total small, .speaking-result-detail.error summary strong { color: var(--error) !important; border-color: var(--error) !important; background: var(--error-soft) !important; }
.speaking-stepper span { border-color: var(--border) !important; background: var(--bg) !important; color: var(--text-muted) !important; }
.speaking-stepper .active span { border-color: var(--primary) !important; color: var(--primary) !important; box-shadow: 0 0 0 5px rgba(var(--primary-rgb), .08) !important; }
.speaking-stepper .done span { border-color: var(--accent-emerald) !important; background: var(--accent-emerald) !important; color: var(--on-accent) !important; }
.evaluation-progress { background: linear-gradient(120deg, rgba(var(--primary-rgb), .07), transparent 58%) !important; }
.evaluation-progress::after { background: linear-gradient(90deg, transparent, rgba(var(--primary-rgb), .07), transparent) !important; }
.evaluation-mark, .processing-evaluator { border-color: rgba(var(--primary-rgb), .28) !important; background: var(--primary) !important; color: var(--on-primary) !important; box-shadow: none !important; }
.evaluation-mark i { background: var(--on-primary) !important; }
.evaluation-rubric span { border-color: var(--border) !important; color: var(--text-muted) !important; }
.score-dial { background: conic-gradient(var(--primary) calc(var(--score) * 20%), var(--border) 0) !important; }
.score-dial::after { background: var(--bg) !important; }
.mock-test-type, .mock-test-row.is-complete .mock-progress-note, .mode-count { color: var(--accent-emerald) !important; }
.mode-count { border-color: rgba(var(--accent-rgb), .34) !important; background: var(--accent-soft) !important; }
.mock-test-row.is-unfinished .mock-progress-note { color: var(--warning) !important; }
.mock-test-row.is-complete .mock-test-status { border-color: var(--success) !important; background: var(--success) !important; color: #fff !important; }
.toast { background: var(--text) !important; color: var(--bg) !important; }
.modal-layer { background: var(--overlay) !important; }
.modal { border-color: var(--border) !important; background: var(--surface) !important; color: var(--text) !important; box-shadow: 0 28px 85px var(--shadow-color) !important; }

/* Standalone mock test */
body:has(.exam-bar) { background: radial-gradient(circle at 82% 8%, rgba(var(--accent-rgb), .055), transparent 28rem), var(--bg) !important; }
.stimulus, .audio-stage, .sentence-slots, .writing-prompt, .modal,
.processing-evaluator, .device-check { background-color: var(--surface) !important; border-color: var(--border) !important; }
.stimulus pre, .stimulus p, .option, .word-passage, .context-strip, .writing-prompt ul, .processing-criteria { color: var(--text) !important; }
.option, .sentence-token, .choice-chip, .response-box { border-color: var(--border) !important; background: var(--surface-secondary) !important; color: var(--text) !important; }
.option.selected { border-color: var(--primary) !important; background: rgba(var(--primary-rgb), .07) !important; }
.option.selected span { border-color: var(--primary) !important; background: var(--primary) !important; color: var(--on-primary) !important; }
.device-status.ready i { background: var(--accent-emerald) !important; box-shadow: 0 0 0 5px rgba(var(--accent-rgb), .12) !important; }
.progress-track span { background: var(--accent-emerald) !important; }

/* Tours and guest-entry overlays */
.tour-spotlight { border-color: var(--accent-emerald) !important; box-shadow: 0 0 0 9999px var(--overlay), 0 0 0 6px rgba(var(--accent-rgb), .12) !important; }
.tour-popover, .entry-modal { border-color: var(--border) !important; background: var(--surface) !important; color: var(--text) !important; box-shadow: 0 25px 80px var(--shadow-color) !important; }
.tour-kicker, .entry-modal small { color: var(--accent-emerald) !important; }
.tour-popover h2, .entry-modal h2 { color: var(--text) !important; }
.tour-popover p, .entry-modal p { color: var(--text-muted) !important; }
.tour-actions button, .entry-modal-actions button { border-color: var(--border) !important; color: var(--text) !important; }
.tour-actions button:hover, .tour-actions button:focus-visible { border-color: var(--primary) !important; color: var(--primary) !important; }

.exam-bar__inner { position: relative; }
.exam-bar__inner > .theme-toggle { position: absolute; left: 132px; top: 50%; transform: translateY(-50%); }
.exam-bar__inner > .theme-toggle:hover { transform: translateY(calc(-50% - 1px)); }

@media (max-width: 760px) {
  .theme-toggle { width: 34px; height: 34px; }
  .account-nav > .theme-toggle, .pricing-nav > .theme-toggle, .legal-nav > .theme-toggle, .home-nav > .theme-toggle { margin-left: 8px; }
}
@media (max-width: 520px) {
  .exam-bar__inner > .theme-toggle { left: 112px; }
  .product-nav-actions .theme-toggle { width: 32px; height: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .theme-transition *, .theme-transition *::before, .theme-transition *::after, .theme-toggle { transition: none !important; }
}

/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-pan-x:initial;--tw-pan-y:initial;--tw-pinch-zoom:initial;--tw-space-y-reverse:0;--tw-space-x-reverse:0;--tw-divide-x-reverse:0;--tw-border-style:solid;--tw-divide-y-reverse:0;--tw-font-weight:initial;--tw-tracking:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-animation-delay:0s;--tw-animation-direction:normal;--tw-animation-duration:initial;--tw-animation-fill-mode:none;--tw-animation-iteration-count:1;--tw-enter-blur:0;--tw-enter-opacity:1;--tw-enter-rotate:0;--tw-enter-scale:1;--tw-enter-translate-x:0;--tw-enter-translate-y:0;--tw-exit-blur:0;--tw-exit-opacity:1;--tw-exit-rotate:0;--tw-exit-scale:1;--tw-exit-translate-x:0;--tw-exit-translate-y:0}}}:root,:host{--color-white:#fff;--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--font-weight-medium:500;--tracking-widest:.1em;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1)}.\@container{container-type:inline-size}.pointer-events-none{pointer-events:none}.collapse{visibility:collapse}.invisible{visibility:hidden}.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.not-sr-only{clip-path:none;white-space:normal;width:auto;height:auto;margin:0;padding:0;position:static;overflow:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.left-2{left:calc(var(--spacing) * 2)}.isolate{isolation:isolate}.isolation-auto{isolation:auto}.z-50{z-index:50}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.-mx-1{margin-inline:calc(var(--spacing) * -1)}.my-1{margin-block:var(--spacing)}.ml-auto{margin-left:auto}.block{display:block}.contents{display:contents}.flex{display:flex}.flow-root{display:flow-root}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.inline-grid{display:inline-grid}.inline-table{display:inline-table}.list-item{display:list-item}.table{display:table}.table-caption{display:table-caption}.table-cell{display:table-cell}.table-column{display:table-column}.table-column-group{display:table-column-group}.table-footer-group{display:table-footer-group}.table-header-group{display:table-header-group}.table-row{display:table-row}.table-row-group{display:table-row-group}.size-2{width:calc(var(--spacing) * 2);height:calc(var(--spacing) * 2)}.size-3\.5{width:calc(var(--spacing) * 3.5);height:calc(var(--spacing) * 3.5)}.size-4{width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4)}.size-6{width:calc(var(--spacing) * 6);height:calc(var(--spacing) * 6)}.size-8{width:calc(var(--spacing) * 8);height:calc(var(--spacing) * 8)}.size-9{width:calc(var(--spacing) * 9);height:calc(var(--spacing) * 9)}.size-10{width:calc(var(--spacing) * 10);height:calc(var(--spacing) * 10)}.h-6{height:calc(var(--spacing) * 6)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-10{height:calc(var(--spacing) * 10)}.h-px{height:1px}.max-h-\(--radix-dropdown-menu-content-available-height\){max-height:var(--radix-dropdown-menu-content-available-height)}.w-fit{width:fit-content}.min-w-\[8rem\]{min-width:8rem}.flex-1{flex:1}.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.grow{flex-grow:1}.border-collapse{border-collapse:collapse}.origin-\(--radix-dropdown-menu-content-transform-origin\){transform-origin:var(--radix-dropdown-menu-content-transform-origin)}.translate-y-0\.5{--tw-translate-y:calc(var(--spacing) * .5);translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-none{translate:none}.scale-3d{scale:var(--tw-scale-x) var(--tw-scale-y) var(--tw-scale-z)}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.cursor-default{cursor:default}.touch-pinch-zoom{--tw-pinch-zoom:pinch-zoom;touch-action:var(--tw-pan-x,) var(--tw-pan-y,) var(--tw-pinch-zoom,)}.resize{resize:both}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-1{gap:var(--spacing)}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-4{gap:calc(var(--spacing) * 4)}:where(.space-y-reverse>:not(:last-child)){--tw-space-y-reverse:1}:where(.space-x-reverse>:not(:last-child)){--tw-space-x-reverse:1}:where(.divide-x>:not(:last-child)){--tw-divide-x-reverse:0;border-inline-style:var(--tw-border-style);border-inline-start-width:calc(1px * var(--tw-divide-x-reverse));border-inline-end-width:calc(1px * calc(1 - var(--tw-divide-x-reverse)))}:where(.divide-y>:not(:last-child)){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px * var(--tw-divide-y-reverse));border-bottom-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)))}:where(.divide-y-reverse>:not(:last-child)){--tw-divide-y-reverse:1}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-hidden{overflow:hidden}.overflow-x-hidden{overflow-x:hidden}.overflow-y-auto{overflow-y:auto}.rounded-full{border-radius:3.40282e38px}.rounded-md{border-radius:6px}.rounded-sm{border-radius:4px}.rounded-s{border-start-start-radius:.25rem;border-end-start-radius:.25rem}.rounded-ss{border-start-start-radius:.25rem}.rounded-e{border-start-end-radius:.25rem;border-end-end-radius:.25rem}.rounded-se{border-start-end-radius:.25rem}.rounded-ee{border-end-end-radius:.25rem}.rounded-es{border-end-start-radius:.25rem}.rounded-t{border-top-left-radius:.25rem;border-top-right-radius:.25rem}.rounded-l{border-top-left-radius:.25rem;border-bottom-left-radius:.25rem}.rounded-tl{border-top-left-radius:.25rem}.rounded-r{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}.rounded-tr{border-top-right-radius:.25rem}.rounded-b{border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem}.rounded-br{border-bottom-right-radius:.25rem}.rounded-bl{border-bottom-left-radius:.25rem}.border{border-style:var(--tw-border-style);border-width:1px}.border-x{border-inline-style:var(--tw-border-style);border-inline-width:1px}.border-y{border-block-style:var(--tw-border-style);border-block-width:1px}.border-s{border-inline-start-style:var(--tw-border-style);border-inline-start-width:1px}.border-e{border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px}.border-bs{border-block-start-style:var(--tw-border-style);border-block-start-width:1px}.border-be{border-block-end-style:var(--tw-border-style);border-block-end-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.border-border{border-color:var(--border)}.border-transparent{border-color:#0000}.bg-background{background-color:var(--bg)}.bg-border{background-color:var(--border)}.bg-destructive{background-color:var(--error)}.bg-popover{background-color:var(--surface)}.bg-primary{background-color:var(--primary)}.bg-secondary{background-color:var(--surface-secondary)}.bg-repeat{background-repeat:repeat}.mask-no-clip{-webkit-mask-clip:no-clip;mask-clip:no-clip}.mask-repeat{-webkit-mask-repeat:repeat;mask-repeat:repeat}.fill-current{fill:currentColor}.p-1{padding:var(--spacing)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-0\.5{padding-block:calc(var(--spacing) * .5)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-4{padding-block:calc(var(--spacing) * 4)}.pt-0{padding-top:0}.pr-2{padding-right:calc(var(--spacing) * 2)}.pb-4{padding-bottom:calc(var(--spacing) * 4)}.pl-8{padding-left:calc(var(--spacing) * 8)}.text-left{text-align:left}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.tracking-widest{--tw-tracking:var(--tracking-widest);letter-spacing:var(--tracking-widest)}.text-wrap{text-wrap:wrap}.text-clip{text-overflow:clip}.text-ellipsis{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.text-foreground{color:var(--text)}.text-muted-foreground{color:var(--text-muted)}.text-popover-foreground{color:var(--text)}.text-primary{color:var(--primary)}.text-primary-foreground{color:var(--on-primary)}.text-secondary-foreground{color:var(--text)}.text-white{color:var(--color-white)}.capitalize{text-transform:capitalize}.lowercase{text-transform:lowercase}.normal-case{text-transform:none}.uppercase{text-transform:uppercase}.italic{font-style:italic}.not-italic{font-style:normal}.diagonal-fractions{--tw-numeric-fraction:diagonal-fractions;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.lining-nums{--tw-numeric-figure:lining-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.oldstyle-nums{--tw-numeric-figure:oldstyle-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.ordinal{--tw-ordinal:ordinal;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.proportional-nums{--tw-numeric-spacing:proportional-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.slashed-zero{--tw-slashed-zero:slashed-zero;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.stacked-fractions{--tw-numeric-fraction:stacked-fractions;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.normal-nums{font-variant-numeric:normal}.line-through{text-decoration-line:line-through}.no-underline{text-decoration-line:none}.overline{text-decoration-line:overline}.underline{text-decoration-line:underline}.underline-offset-4{text-underline-offset:4px}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.subpixel-antialiased{-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a), 0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-xs{--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.inset-ring{--tw-inset-ring-shadow:inset 0 0 0 1px var(--tw-inset-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.outline-hidden{--tw-outline-style:none;outline-style:none}@media (forced-colors:active){.outline-hidden{outline-offset:2px;outline:2px solid #0000}}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.drop-shadow{--tw-drop-shadow-size:drop-shadow(0 1px 2px var(--tw-drop-shadow-color,#0000001a)) drop-shadow(0 1px 1px var(--tw-drop-shadow-color,#0000000f));--tw-drop-shadow:drop-shadow(0 1px 2px #0000001a) drop-shadow(0 1px 1px #0000000f);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.filter\!{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)!important}.backdrop-blur{--tw-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.backdrop-grayscale{--tw-backdrop-grayscale:grayscale(100%);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.backdrop-invert{--tw-backdrop-invert:invert(100%);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.backdrop-sepia{--tw-backdrop-sepia:sepia(100%);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\[color\,box-shadow\]{transition-property:color,box-shadow;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-200{--tw-duration:.2s;transition-duration:.2s}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}:where(.divide-x-reverse>:not(:last-child)){--tw-divide-x-reverse:1}.paused{animation-play-state:paused}.ring-inset{--tw-ring-inset:inset}.zoom-in{--tw-enter-scale:0}.zoom-out{--tw-exit-scale:0}.last\:border-b-0:last-child{border-bottom-style:var(--tw-border-style);border-bottom-width:0}@media (hover:hover){.hover\:bg-accent:hover{background-color:var(--surface-secondary)}.hover\:bg-destructive\/90:hover{background-color:var(--error)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-destructive\/90:hover{background-color:color-mix(in oklab, var(--error) 90%, transparent)}}.hover\:bg-primary\/90:hover{background-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-primary\/90:hover{background-color:color-mix(in oklab, var(--primary) 90%, transparent)}}.hover\:bg-secondary\/80:hover{background-color:var(--surface-secondary)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-secondary\/80:hover{background-color:color-mix(in oklab, var(--surface-secondary) 80%, transparent)}}.hover\:text-accent-foreground:hover{color:var(--text)}.hover\:underline:hover{text-decoration-line:underline}}.focus\:bg-accent:focus{background-color:var(--surface-secondary)}.focus\:text-accent-foreground:focus{color:var(--text)}.focus-visible\:border-ring:focus-visible{border-color:var(--text-muted)}.focus-visible\:ring-\[3px\]:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus-visible\:ring-destructive\/20:focus-visible{--tw-ring-color:var(--error)}@supports (color:color-mix(in lab, red, red)){.focus-visible\:ring-destructive\/20:focus-visible{--tw-ring-color:color-mix(in oklab, var(--error) 20%, transparent)}}.focus-visible\:ring-ring\/50:focus-visible{--tw-ring-color:var(--text-muted)}@supports (color:color-mix(in lab, red, red)){.focus-visible\:ring-ring\/50:focus-visible{--tw-ring-color:color-mix(in oklab, var(--text-muted) 50%, transparent)}}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:opacity-50:disabled{opacity:.5}.has-\[\>svg\]\:px-1\.5:has(>svg){padding-inline:calc(var(--spacing) * 1.5)}.has-\[\>svg\]\:px-2\.5:has(>svg){padding-inline:calc(var(--spacing) * 2.5)}.has-\[\>svg\]\:px-3:has(>svg){padding-inline:calc(var(--spacing) * 3)}.has-\[\>svg\]\:px-4:has(>svg){padding-inline:calc(var(--spacing) * 4)}.aria-invalid\:border-destructive[aria-invalid=true]{border-color:var(--error)}.aria-invalid\:ring-destructive\/20[aria-invalid=true]{--tw-ring-color:var(--error)}@supports (color:color-mix(in lab, red, red)){.aria-invalid\:ring-destructive\/20[aria-invalid=true]{--tw-ring-color:color-mix(in oklab, var(--error) 20%, transparent)}}.data-\[disabled\]\:pointer-events-none[data-disabled]{pointer-events:none}.data-\[disabled\]\:opacity-50[data-disabled]{opacity:.5}.data-\[inset\]\:pl-8[data-inset]{padding-left:calc(var(--spacing) * 8)}.data-\[orientation\=horizontal\]\:h-px[data-orientation=horizontal]{height:1px}.data-\[orientation\=horizontal\]\:w-full[data-orientation=horizontal]{width:100%}.data-\[orientation\=vertical\]\:h-full[data-orientation=vertical]{height:100%}.data-\[orientation\=vertical\]\:w-px[data-orientation=vertical]{width:1px}.data-\[side\=bottom\]\:slide-in-from-top-2[data-side=bottom]{--tw-enter-translate-y:calc(2*var(--spacing)*-1)}.data-\[side\=left\]\:slide-in-from-right-2[data-side=left]{--tw-enter-translate-x:calc(2*var(--spacing))}.data-\[side\=right\]\:slide-in-from-left-2[data-side=right]{--tw-enter-translate-x:calc(2*var(--spacing)*-1)}.data-\[side\=top\]\:slide-in-from-bottom-2[data-side=top]{--tw-enter-translate-y:calc(2*var(--spacing))}.data-\[state\=closed\]\:animate-accordion-up[data-state=closed]{animation:accordion-up var(--tw-animation-duration,var(--tw-duration,.2s))var(--tw-ease,ease-out)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)}.data-\[state\=closed\]\:animate-out[data-state=closed]{animation:exit var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)}.data-\[state\=closed\]\:fade-out-0[data-state=closed]{--tw-exit-opacity:0}.data-\[state\=closed\]\:zoom-out-95[data-state=closed]{--tw-exit-scale:.95}.data-\[state\=open\]\:animate-accordion-down[data-state=open]{animation:accordion-down var(--tw-animation-duration,var(--tw-duration,.2s))var(--tw-ease,ease-out)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)}.data-\[state\=open\]\:animate-in[data-state=open]{animation:enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)}.data-\[state\=open\]\:bg-accent[data-state=open]{background-color:var(--surface-secondary)}.data-\[state\=open\]\:text-accent-foreground[data-state=open]{color:var(--text)}.data-\[state\=open\]\:fade-in-0[data-state=open]{--tw-enter-opacity:0}.data-\[state\=open\]\:zoom-in-95[data-state=open]{--tw-enter-scale:.95}.data-\[variant\=destructive\]\:text-destructive[data-variant=destructive]{color:var(--error)}.data-\[variant\=destructive\]\:focus\:bg-destructive\/10[data-variant=destructive]:focus{background-color:var(--error)}@supports (color:color-mix(in lab, red, red)){.data-\[variant\=destructive\]\:focus\:bg-destructive\/10[data-variant=destructive]:focus{background-color:color-mix(in oklab, var(--error) 10%, transparent)}}.data-\[variant\=destructive\]\:focus\:text-destructive[data-variant=destructive]:focus{color:var(--error)}.dark\:border-input:is([data-theme=dark] *){border-color:var(--border)}.dark\:bg-destructive\/60:is([data-theme=dark] *){background-color:var(--error)}@supports (color:color-mix(in lab, red, red)){.dark\:bg-destructive\/60:is([data-theme=dark] *){background-color:color-mix(in oklab, var(--error) 60%, transparent)}}.dark\:bg-input\/30:is([data-theme=dark] *){background-color:var(--border)}@supports (color:color-mix(in lab, red, red)){.dark\:bg-input\/30:is([data-theme=dark] *){background-color:color-mix(in oklab, var(--border) 30%, transparent)}}@media (hover:hover){.dark\:hover\:bg-accent\/50:is([data-theme=dark] *):hover{background-color:var(--surface-secondary)}@supports (color:color-mix(in lab, red, red)){.dark\:hover\:bg-accent\/50:is([data-theme=dark] *):hover{background-color:color-mix(in oklab, var(--surface-secondary) 50%, transparent)}}.dark\:hover\:bg-input\/50:is([data-theme=dark] *):hover{background-color:var(--border)}@supports (color:color-mix(in lab, red, red)){.dark\:hover\:bg-input\/50:is([data-theme=dark] *):hover{background-color:color-mix(in oklab, var(--border) 50%, transparent)}}}.dark\:focus-visible\:ring-destructive\/40:is([data-theme=dark] *):focus-visible{--tw-ring-color:var(--error)}@supports (color:color-mix(in lab, red, red)){.dark\:focus-visible\:ring-destructive\/40:is([data-theme=dark] *):focus-visible{--tw-ring-color:color-mix(in oklab, var(--error) 40%, transparent)}}.dark\:aria-invalid\:ring-destructive\/40:is([data-theme=dark] *)[aria-invalid=true]{--tw-ring-color:var(--error)}@supports (color:color-mix(in lab, red, red)){.dark\:aria-invalid\:ring-destructive\/40:is([data-theme=dark] *)[aria-invalid=true]{--tw-ring-color:color-mix(in oklab, var(--error) 40%, transparent)}}.dark\:data-\[variant\=destructive\]\:focus\:bg-destructive\/20:is([data-theme=dark] *)[data-variant=destructive]:focus{background-color:var(--error)}@supports (color:color-mix(in lab, red, red)){.dark\:data-\[variant\=destructive\]\:focus\:bg-destructive\/20:is([data-theme=dark] *)[data-variant=destructive]:focus{background-color:color-mix(in oklab, var(--error) 20%, transparent)}}.\[\&_svg\]\:pointer-events-none svg{pointer-events:none}.\[\&_svg\]\:shrink-0 svg{flex-shrink:0}.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-3 svg:not([class*=size-]){width:calc(var(--spacing) * 3);height:calc(var(--spacing) * 3)}.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*=size-]){width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4)}.\[\&_svg\:not\(\[class\*\=\'text-\'\]\)\]\:text-muted-foreground svg:not([class*=text-]){color:var(--text-muted)}:is(.data-\[variant\=destructive\]\:\*\:\[svg\]\:text-destructive\![data-variant=destructive]>*):is(svg){color:var(--error)!important}.\[\&\>svg\]\:pointer-events-none>svg{pointer-events:none}.\[\&\>svg\]\:size-3>svg{width:calc(var(--spacing) * 3);height:calc(var(--spacing) * 3)}.\[\&\[data-state\=open\]\>svg\]\:rotate-180[data-state=open]>svg{rotate:180deg}@media (hover:hover){a.\[a\&\]\:hover\:bg-accent:hover{background-color:var(--surface-secondary)}a.\[a\&\]\:hover\:bg-destructive\/90:hover{background-color:var(--error)}@supports (color:color-mix(in lab, red, red)){a.\[a\&\]\:hover\:bg-destructive\/90:hover{background-color:color-mix(in oklab, var(--error) 90%, transparent)}}a.\[a\&\]\:hover\:bg-primary\/90:hover{background-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){a.\[a\&\]\:hover\:bg-primary\/90:hover{background-color:color-mix(in oklab, var(--primary) 90%, transparent)}}a.\[a\&\]\:hover\:bg-secondary\/90:hover{background-color:var(--surface-secondary)}@supports (color:color-mix(in lab, red, red)){a.\[a\&\]\:hover\:bg-secondary\/90:hover{background-color:color-mix(in oklab, var(--surface-secondary) 90%, transparent)}}a.\[a\&\]\:hover\:text-accent-foreground:hover{color:var(--text)}a.\[a\&\]\:hover\:underline:hover{text-decoration-line:underline}}@property --tw-animation-delay{syntax:"*";inherits:false;initial-value:0s}@property --tw-animation-direction{syntax:"*";inherits:false;initial-value:normal}@property --tw-animation-duration{syntax:"*";inherits:false}@property --tw-animation-fill-mode{syntax:"*";inherits:false;initial-value:none}@property --tw-animation-iteration-count{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-blur{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-opacity{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-rotate{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-scale{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-blur{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-opacity{syntax:"*";inherits:false;initial-value:1}@property --tw-exit-rotate{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-scale{syntax:"*";inherits:false;initial-value:1}@property --tw-exit-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-pan-x{syntax:"*";inherits:false}@property --tw-pan-y{syntax:"*";inherits:false}@property --tw-pinch-zoom{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-space-x-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-divide-x-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-divide-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@keyframes enter{0%{opacity:var(--tw-enter-opacity,1);transform:translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0)scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1))rotate(var(--tw-enter-rotate,0));filter:blur(var(--tw-enter-blur,0))}}@keyframes exit{to{opacity:var(--tw-exit-opacity,1);transform:translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0)scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1))rotate(var(--tw-exit-rotate,0));filter:blur(var(--tw-exit-blur,0))}}@keyframes accordion-down{0%{height:0}to{height:var(--radix-accordion-content-height,var(--bits-accordion-content-height,var(--reka-accordion-content-height,var(--kb-accordion-content-height,var(--ngp-accordion-content-height,auto)))))}}@keyframes accordion-up{0%{height:var(--radix-accordion-content-height,var(--bits-accordion-content-height,var(--reka-accordion-content-height,var(--kb-accordion-content-height,var(--ngp-accordion-content-height,auto)))))}to{height:0}}
/* Ursula 2 — shared shadcn tokens and page foundations. */
:root,:root[data-theme="light"] {
--bg:#fafaf9;--surface:#fff;--surface-secondary:#f2f2f0;--text:#20201e;--text-muted:#70706a;
--primary:#252623;--primary-hover:#40423c;--on-primary:#fff;--on-accent:#fff;--border:#d5d7d2;
--accent-emerald:#487359;--accent-soft:#eaf0e9;--success:#386c49;--success-soft:#e9f2e9;--warning:#8c642c;--warning-soft:#fcf4e6;--error:#b64040;--error-soft:#faeaea;
--shadow-color:rgba(25,25,20,.08);--primary-rgb:37,38,35;--accent-rgb:72,115,89;--ursula-blue:#156ed8;--ursula-purple:#812ec4;
--sans:"Inter","Segoe UI",Arial,sans-serif;--display:var(--sans);--body:var(--sans);--radius:8px;--shadow:0 8px 24px var(--shadow-color);
}
:root[data-theme="dark"] {
--bg:#181918;--surface:#20211f;--surface-secondary:#292b27;--text:#efefeb;--text-muted:#a5a69f;
--primary:#efefeb;--primary-hover:#d8dbd1;--on-primary:#20211f;--on-accent:#17201a;--border:#383b34;
--accent-emerald:#a8c9a2;--accent-soft:#283a2a;--success:#a8c9a2;--success-soft:#283a2a;--warning:#e2ba7b;--warning-soft:#3a3020;--error:#f19494;--error-soft:#3e2626;
--shadow-color:rgba(0,0,0,.22);--primary-rgb:239,239,235;--accent-rgb:168,201,162;--ursula-blue:#62afff;--ursula-purple:#c58cff;
}
html body {background:var(--bg)!important;font-family:var(--sans);font-size:14px;line-height:1.55;letter-spacing:-.012em;-webkit-font-smoothing:antialiased}
html body :is(h1,h2,h3,h4,h5,h6){font-family:var(--sans);font-weight:600;letter-spacing:-.04em;line-height:1.18}
html body h1{font-size:clamp(30px,3.3vw,44px)}html body h2{font-size:26px}html body h3{font-size:18px}
html body :is(button,input,select,textarea){font-family:var(--sans)}
html body :is(a,button,input,textarea,select):focus-visible{outline:2px solid var(--text-muted);outline-offset:3px}
html body :is(button,a){touch-action:manipulation}html body button:disabled{cursor:not-allowed;opacity:.5}
html body :is(.hero-eyebrow,.profile-eyebrow,.eyebrow,.legal-eyebrow,.choice-intro>p,.auth-context small,.pricing-heading>span){font:500 12px/1.5 var(--sans);letter-spacing:.02em;text-transform:none;color:var(--text-muted)!important}
html body :is(.home-nav,.account-nav,.choice-nav,.pricing-nav,.legal-nav){position:relative;inset:auto;width:100%;max-width:none;min-height:72px;height:auto;margin:0;padding:16px max(28px,calc((100vw - 1240px)/2));border-bottom:1px solid var(--border);background:var(--bg)!important;gap:24px}
html body .home-nav{display:flex}html body .home-links{margin-left:48px;gap:28px}html body .home-account{margin-left:auto;gap:10px}
html body :is(.home-brand,.account-brand,.choice-brand,.legal-brand,.brand,.exam-brand){width:200px;height:67px;padding:0;display:inline-flex;align-items:center;overflow:visible;border:0;border-radius:0;background:transparent!important;color:var(--text)!important;font:650 22px/1 var(--sans);letter-spacing:-.06em;white-space:nowrap;box-shadow:none}
html body :is(.home-mark,.account-mark,.choice-brand>span:not(.ursula-responsive-logo),.legal-mark,.brand-mark,.exam-brand>span:not(.ursula-responsive-logo)){width:31px;height:31px;border-radius:7px!important;display:inline-grid;place-items:center;background:var(--primary)!important;color:var(--on-primary)!important;font:600 19px/1 Georgia,serif;box-shadow:none!important}
html body .ursula-responsive-logo{position:relative;display:block;width:100%;height:100%;overflow:hidden;border-radius:0!important;background:transparent!important;color:transparent!important;box-shadow:none!important}
/* The choice-page legacy mark selector also targets its injected logo wrapper.
   Reassert the full wordmark box so it cannot collapse into a 31px badge. */
html body .choice-brand>span.ursula-responsive-logo{display:block!important;width:100%!important;height:100%!important;border:0!important;border-radius:0!important;background:transparent!important;color:transparent!important;box-shadow:none!important}
html body .ursula-brand-logo{position:absolute;left:50%;top:50%;display:block;width:128%;height:128%;max-width:none;transform:translate(-50%,-50%);object-fit:contain;object-position:center;filter:none}
html body .ursula-brand-logo-dark{display:none}
:root[data-theme="dark"] body .ursula-brand-logo-light{display:none}
:root[data-theme="dark"] body .ursula-brand-logo-dark{display:block}
html body .ursula-logo-mark{display:grid!important;place-items:center!important;flex:0 0 72px!important;width:72px!important;height:48px!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;color:transparent!important;box-shadow:none!important;overflow:hidden}
html body .ursula-mark-image{display:block;width:100%;height:100%;max-width:100%;object-fit:cover;object-position:center 75%;transform:none;filter:none}
html body .ursula-word-loader{position:relative!important;display:grid!important;place-items:center!important;width:min(100%,230px)!important;min-width:0!important;max-width:230px!important;height:68px!important;min-height:68px!important;margin-inline:auto!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;color:var(--text)!important;box-sizing:border-box!important;box-shadow:none!important;isolation:isolate;overflow:visible!important;animation:none!important}
html body .ursula-word-loader::before,html body .ursula-word-loader::after{content:none!important;display:none!important}
html body .ursula-word-loader>i{display:none!important}
html body .ursula-loading-word{position:relative;display:inline-flex;align-items:center;gap:.12em;padding:8px 4px 14px;font:650 26px/1 var(--sans);letter-spacing:.14em;filter:drop-shadow(0 5px 12px rgba(75,95,255,.18))}
html body .ursula-loading-word::after{content:"";position:absolute;left:5%;right:5%;bottom:3px;height:2px;border-radius:999px;background:linear-gradient(90deg,transparent,var(--ursula-blue),var(--ursula-purple),transparent);background-size:200% 100%;animation:ursula-loading-scan 1.35s ease-in-out infinite}
html body .ursula-loading-letter{display:inline-block;color:var(--text);animation:ursula-loading-letter 1.35s cubic-bezier(.4,0,.2,1) infinite;animation-delay:calc(var(--letter-index)*80ms)}
html body .ursula-loading-letter:nth-child(-n+3){color:var(--ursula-blue)}
html body .ursula-loading-letter:nth-child(n+4){color:var(--ursula-purple)}
html body :is(.home-auth-loader,.product-auth-loader).ursula-word-loader{position:fixed!important;inset:0!important;z-index:9999!important;width:auto!important;max-width:none!important;height:auto!important;min-height:100dvh!important;margin:0!important;background:var(--night)!important;overflow:hidden!important}
html body .processing-evaluator.ursula-word-loader{margin:0 auto 24px!important}
@keyframes ursula-loading-letter{0%,65%,100%{opacity:.35;transform:translateY(0)}28%{opacity:1;transform:translateY(-5px)}44%{opacity:.85;transform:translateY(1px)}}
@keyframes ursula-loading-scan{0%,100%{opacity:.25;background-position:100% 0;transform:scaleX(.68)}50%{opacity:1;background-position:0 0;transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){html body .ursula-loading-letter{animation:none;opacity:1}html body .ursula-loading-word::after{animation:none;opacity:.75}}
html body .brand em{font-style:normal}
html body :is(.theme-toggle,.profile-button,.home-profile){width:34px;height:34px;min-height:34px;border-radius:6px;border:1px solid var(--border);box-shadow:none;transform:none}
html body :is(.home-links a,.nav-account,.auth-button,.nav-return,.choice-nav-actions a,.guide-link){font-size:13px;font-weight:500}
html body .product-nav-speak{display:inline-flex;align-items:center;gap:7px;color:var(--text);font-size:13px;font-weight:600;text-decoration:none}html body .product-nav-speak span{padding:2px 5px;border-radius:99px;background:var(--accent-soft);color:var(--accent-emerald);font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
html body :is(.home-cta,.button,.btn,.plan-action,.nav-account.signup,.auth-button.signup){display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:40px;padding:9px 17px;border-radius:6px;font:500 13px/1.4 var(--sans);text-decoration:none;box-shadow:0 1px 2px rgba(0,0,0,.04)!important;transition:background .15s,border-color .15s}
html body :is(.home-cta,.button.primary,.btn.primary,.plan-action,.nav-account.signup,.auth-button.signup){background:var(--primary)!important;color:var(--on-primary)!important;border:1px solid var(--primary)!important}
html body :is(.home-cta,.button,.btn,.plan-action,.nav-account.signup,.auth-button.signup):hover{transform:none;filter:brightness(.94)}
html body :is(.button.secondary,.button.guest,.btn.secondary){background:var(--surface)!important;border:1px solid var(--border)!important;color:var(--text)!important}
html body :is(.product-pro-action,.choice-pro-link,.pro-nav-action,.nav-account.pro){border:1px solid var(--border)!important;background:var(--surface)!important;color:var(--text)!important;border-radius:6px;min-height:34px;font-size:12px;font-weight:500;box-shadow:none}
html body :is(.field input,.field select,.auth-form input,.settings-form input){height:40px;min-height:40px;border:1px solid var(--border);border-radius:6px;padding:8px 11px;box-shadow:0 1px 2px rgba(0,0,0,.025)}
html body .field label{font-size:13px;font-weight:500}
html body :is(.modal,.home-modal,.tour-popover,.entry-modal,.product-account-menu,.exam-switcher-menu,.profile-menu,.home-profile-menu){border-radius:8px;box-shadow:0 12px 36px var(--shadow-color)!important}
html body :is(.cursor-glow,.orbit-ring,.orbit-signal,.hero-index,.coming-index){display:none!important}
html body.choice-page,html body:has(.topbar){background:radial-gradient(circle at 18% -10%,rgba(var(--primary-rgb),.08),transparent 35%),var(--bg)!important;background-size:auto!important}
/* Home */
html body .home-hero{position:relative;isolation:isolate;display:flex;align-items:center;width:100%;max-width:none;margin:0;min-height:min(680px,calc(100svh - 72px));padding:90px max(28px,calc((100vw - 1240px)/2));overflow:hidden;background:#20281f!important}
html body .home-hero::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--hero-photo) center 48%/cover no-repeat}
html body .home-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(15,25,19,.92) 0%,rgba(15,25,19,.75) 39%,rgba(15,25,19,.13) 100%)}
html body .hero-copy{max-width:580px;padding:0;animation:lx-enter .6s ease both}
html body .hero-copy .hero-eyebrow{color:#d5ddd1!important;font-size:13px;margin:0 0 30px}
html body .hero-copy h1{max-width:570px;color:#fff!important;font-size:clamp(42px,4.6vw,66px);line-height:1.04;letter-spacing:-.05em;margin:0 0 24px}
html body .hero-intro{max-width:440px;margin:0;color:#d6ddd3!important;font-size:16px;line-height:1.65}
html body .hero-actions{margin-top:32px;gap:24px}
html body .hero-actions .home-cta{background:#f5f5ed!important;color:#242a22!important;border-color:#f5f5ed!important;min-height:44px;padding-inline:20px}
html body .hero-actions>a:not(.home-cta){color:#f5f5ed!important;font-size:13px}
html body .practice-orbit{position:absolute;bottom:25px;right:max(28px,calc((100vw - 1240px)/2));top:auto;left:auto;display:flex;gap:20px;width:auto;height:auto;transform:none!important}
html body .orbit-core{display:none}
html body .skill-word{position:static;transform:none!important;padding:0;font:400 12px var(--sans);color:#eef1e9!important;background:transparent!important;border:0;border-radius:0}
html body .practice-preview{display:grid;grid-template-columns:.7fr 1.3fr;gap:48px;width:min(1240px,calc(100% - 56px));padding:90px 0;margin:0 auto}
html body .preview-heading{display:block;padding:0}
html body .preview-heading>p{font-size:12px;margin:0 0 16px;color:var(--text-muted)!important}
html body .preview-heading h2{font-size:36px;line-height:1.15;margin:0 0 20px}
html body .preview-heading>span{display:block;max-width:310px;font-size:14px;line-height:1.7}
html body .preview-workbench{margin:0;border:1px solid var(--border);border-radius:8px;background:var(--surface)!important;box-shadow:0 4px 20px var(--shadow-color)}
html body .preview-tabs{padding:8px;border-bottom:1px solid var(--border);background:var(--surface-secondary)!important;gap:3px}
html body .preview-tab{padding:9px 12px;font-size:12px;border:0;border-radius:5px}
html body .preview-tab.active{background:var(--surface)!important;color:var(--text)!important;box-shadow:0 1px 3px var(--shadow-color)}
html body .preview-stage{padding:28px;min-height:340px}html body .preview-stage h3{font-size:21px}
html body .preview-footer{padding:16px 24px;font-size:11px}
html body .feedback-example{grid-column:1/-1;margin-top:8px;border:0;border-top:1px solid var(--border);border-radius:0;background:none!important;padding:48px 0 0;gap:64px}
html body .feedback-example h3{font-size:28px;max-width:350px}
html body .feedback-example-report{border:1px solid var(--border);border-radius:8px;box-shadow:none!important;background:var(--surface)!important}
html body .approach{width:min(1240px,calc(100% - 56px));margin:0 auto;padding:60px 0 90px;border-top:1px solid var(--border);display:grid;grid-template-columns:.7fr 1.3fr;gap:48px}
html body .section-lead h2{font-size:34px}
html body .approach-line{padding:24px 0;grid-template-columns:28px 1fr;gap:12px 18px}
html body .approach-line h3{font-size:18px}
html body .approach-line p{grid-column:2;font-size:14px;margin:0;max-width:500px}
html body .home-final-cta{padding:64px 28px;min-height:0;border-block:1px solid var(--border);background:var(--surface-secondary)!important}
html body .home-final-cta h2{font-size:36px;line-height:1.15;margin:12px 0 25px}
html body .home-footer{width:min(1240px,calc(100% - 56px));padding:32px 0;min-height:0;gap:26px}
html body .lx-faq{max-width:760px;margin:0 auto;padding:80px 28px}
html body .lx-faq h2{font-size:28px;margin:0 0 24px}

html body .practice-orbit{height:auto!important;min-height:0!important;aspect-ratio:auto!important;align-items:center}
html body .home-cta .cta-label{color:inherit!important}

/* Selection */
html body .choice-main{max-width:900px;min-height:calc(100svh - 150px);display:block;padding:70px 0 90px}
html body .choice-intro{max-width:620px;margin-bottom:34px}
html body .choice-intro h1{font-size:40px;max-width:600px;line-height:1.15}
html body .choice-account-note{display:block;max-width:570px;margin-top:20px;padding:0;border:0}
html body .choice-account-note>span{display:none}
html body .choice-deck{grid-template-columns:1fr 1fr;gap:20px;perspective:none}
html body .exam-card{min-height:250px}
html body .exam-card-inner{min-height:250px;transform:none!important;transition:none}
html body .exam-front{display:flex;flex-direction:column;gap:18px;padding:28px;border-radius:8px;background:var(--surface)!important;position:relative;min-height:250px;opacity:1!important}
html body .exam-back{display:none!important}
html body .exam-card:not(.unavailable):hover .exam-front{border-color:var(--text-muted)!important;box-shadow:0 3px 12px var(--shadow-color)}
html body .exam-index{font:500 12px var(--sans);color:var(--text-muted)!important}
html body .exam-name{align-self:auto;font:600 34px/1.2 var(--sans);letter-spacing:-.04em}
html body .exam-description{font-size:14px}
html body .exam-meta{align-self:flex-start;font-size:11px;text-transform:none;letter-spacing:0;background:var(--surface-secondary);border:1px solid var(--border);padding:2px 7px;border-radius:4px;margin-top:auto}
html body .exam-arrow{position:absolute;right:25px;top:25px;font-size:20px}
html body .exam-card.unavailable{opacity:.65}
html body .choice-footer{max-width:900px}
/* Authentication */
html body.auth-page-grid{position:relative;isolation:isolate;overflow-x:hidden}
html body.auth-page-grid :is(.account-nav,.auth-shell,.account-footer,#authModal){position:relative;z-index:1}
html body .auth-grid-trail{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background-image:linear-gradient(to right,var(--auth-grid-line) 1px,transparent 1px),linear-gradient(to bottom,var(--auth-grid-line) 1px,transparent 1px);background-size:var(--auth-grid-size) var(--auth-grid-size);--auth-grid-line:rgba(108,113,110,.14)}
:root[data-theme="light"] body .auth-grid-trail{--auth-grid-line:rgba(66,70,68,.12)}
html body .auth-grid-trace{position:absolute;width:var(--auth-grid-size);height:var(--auth-grid-size);border:1px solid rgba(150,154,151,.08);background:rgba(126,131,128,.24);animation:auth-grid-trace 2.8s cubic-bezier(.16,.75,.26,1) forwards;will-change:opacity,background-color}
:root[data-theme="light"] body .auth-grid-trace{border-color:rgba(65,69,67,.08);background:rgba(80,85,82,.16)}
@keyframes auth-grid-trace{0%{opacity:1}22%{opacity:.8}100%{opacity:0}}
html body .auth-shell{width:min(460px,calc(100% - 40px));max-width:460px;display:flex;flex-direction:column;gap:24px;padding:50px 0 70px;margin:auto}
html body .auth-context{width:100%}
html body .auth-context h1{font-size:30px;margin:9px 0 12px;line-height:1.15}
html body .auth-context p{font-size:14px;line-height:1.6;margin:0;max-width:none}
html body .auth-context .trust-list{display:none}
html body .auth-panel{max-width:none;padding:26px;border:1px solid var(--border);border-radius:8px;background:var(--surface)}
html body .auth-mode-tabs{padding:4px;border:0;border-radius:6px;background:var(--surface-secondary);gap:3px;margin-bottom:26px}
html body .auth-mode-tabs a{flex:1;text-align:center;padding:7px;font-size:13px;font-weight:500;border-radius:4px}
html body .auth-mode-tabs a.active{background:var(--surface);box-shadow:0 1px 3px var(--shadow-color)}
html body .auth-mode-tabs a::after{display:none}
html body .auth-step h2{font-size:21px;margin-bottom:9px}
html body .step-copy{font-size:13px;margin-bottom:22px}
html body .auth-form{gap:15px}
html body .guest-divider span{background:var(--surface)}
html body .account-footer{max-width:1240px}
html body .field-note{font-size:11px}
@media(prefers-reduced-motion:reduce){html body .auth-grid-trace{display:none}}
/* Workspace */
@media(min-width:1001px){
html body .product-nav{position:fixed;left:0;top:0;bottom:0;width:230px;border-right:1px solid var(--border);border-bottom:0;background:var(--surface)!important}
html body .product-nav-inner{display:flex;flex-direction:column;align-items:stretch;height:100%;padding:30px 18px;gap:38px}
html body .product-nav-inner>.account-brand{width:194px;height:65px;padding:0}
html body .product-nav-links{display:flex;flex-direction:column;align-self:auto;align-items:stretch;gap:4px}
html body .product-nav-links::before{content:"WORKSPACE";font-size:10px;letter-spacing:.09em;font-weight:500;color:var(--text-muted);padding:0 12px 10px}
html body .product-nav-links [data-app-tab]{width:100%;height:40px;text-align:left;display:flex;align-items:center;gap:12px;padding:0 12px;border:0;border-radius:6px;background:transparent;color:var(--text-muted);font-size:13px;font-weight:500;line-height:1.2;text-decoration:none;white-space:nowrap}
html body .product-nav-links [data-app-tab]::after{display:none}
html body .product-nav-links [data-app-tab].active{background:var(--surface-secondary)!important;color:var(--text)!important}
html body .product-nav-links .product-nav-speak>span{margin-left:auto}
html body .product-nav-actions{margin-top:auto;display:flex;flex-wrap:wrap;gap:10px}
html body .product-account{width:100%;order:5}
html body .product-account-button{width:100%;padding:9px;text-align:left}
html body .product-account-menu{left:0;top:auto;bottom:calc(100% + 10px)}
html body .exam-switcher{width:100%;order:-1}
html body .exam-switcher-button{width:100%;justify-content:space-between}
html body .exam-switcher-menu{top:auto;bottom:calc(100% + 10px);left:0;width:100%}
html body .product-shell{margin:0 0 0 230px;width:calc(100% - 230px);max-width:none;padding:46px clamp(28px,4.5vw,76px) 80px}
html body .product-shell>.app-view{max-width:1220px;margin-inline:auto}
html body.product-body>.account-footer{margin-left:230px;padding-inline:60px}
}
html body :is(.dashboard-heading,.workspace-heading){margin-bottom:28px}
html body :is(.dashboard-heading h1,.workspace-heading h1){font-size:30px;line-height:1.2;margin:6px 0 0}
html body .resume-panel{min-height:0;padding:28px;border:1px solid var(--border)!important;border-radius:8px;background:var(--surface)!important;box-shadow:none!important;gap:30px;align-items:center}
html body .resume-copy h2{font-size:25px;margin:10px 0}
html body .resume-copy>p{font-size:13px;color:var(--text-muted)!important}
html body .resume-panel .button{flex-shrink:0}
html body .skills-overview{margin-top:38px}
html body .dashboard-section-heading{padding:0 0 20px}
html body .dashboard-section-heading h2{font-size:20px;margin:5px 0 0}
html body .skill-grid{gap:0;border-block:1px solid var(--border);border-radius:0;background:var(--surface)}
html body .skill-card{padding:22px;border:0;border-right:1px solid var(--border);border-radius:0;background:transparent!important;box-shadow:none}
html body .skill-card:last-child{border-right:0}
html body .skill-index{font-size:11px;color:var(--text-muted)!important}
html body .skill-card h3{font-size:17px}
html body .skill-card a{font-size:12px}
html body .dashboard-pair{gap:36px;margin-top:36px}
html body .dashboard-plain{padding:24px 0;border:0;border-block:1px solid var(--border);border-radius:0;background:transparent!important}
html body .dashboard-plain h2{font-size:20px}
html body .dashboard-plain p{font-size:13px}
html body :is(.practice-group,.history-skill){border-radius:0;background:transparent!important;box-shadow:none}
html body .practice-group{padding:24px 0;border:0;border-bottom:1px solid var(--border)}
html body .practice-group h2{font-size:21px}
html body :is(.practice-task,.mock-hub-row,.activity-row,.task-performance-row){border-radius:0;transition:background .15s}
html body :is(.practice-task,.mock-hub-row,.activity-row):hover{background:var(--surface-secondary)!important;transform:none}
html body .mock-hub-row{padding:22px 16px;background:transparent!important;box-shadow:none}
html body .mock-number{font-size:22px}
html body .settings-view{max-width:760px!important;margin-left:0!important}
html body .settings-account-summary{padding-block:12px 24px}
html body .settings-form{gap:18px}
html body .settings-form>.button{justify-self:start}
html body .product-empty{border-style:dashed;border-radius:6px;padding:28px}
html body .product-empty h2{font-size:18px}
/* Practice and mock tests */
html body .topbar{background:var(--surface)!important;backdrop-filter:none}
html body .topbar-inner{min-height:68px;grid-template-columns:200px minmax(340px,1fr) auto;gap:22px;max-width:1400px}
html body .header-status{display:none}
html body .exam-tabs{justify-content:flex-start;gap:8px}
html body .exam-tab{font:500 13px var(--sans);padding:10px 14px;border-radius:6px;min-height:36px}
html body .exam-tab.active{background:var(--surface-secondary)!important;color:var(--text)!important;border-color:transparent!important}
html body .exam-tab::after{display:none}
html body .toefl-modebar{background:var(--surface)!important;border-top:1px solid var(--border)}
html body .toefl-modebar-inner{max-width:1240px;min-height:48px}
html body .toefl-modebar button{font-size:12px;font-weight:500;border-radius:5px}
html body .writing-subnav{background:var(--bg)!important;border-bottom:1px solid var(--border)}
html body .writing-subnav-inner{max-width:1240px;padding-block:12px}
html body .section-tabs{gap:4px;padding:4px;border:0;border-radius:6px;background:var(--surface-secondary)!important}
html body .section-tab{min-height:36px;border-radius:4px;font-size:12px;font-weight:500}
html body .section-tab.active{background:var(--surface)!important;color:var(--text)!important;box-shadow:0 1px 3px var(--shadow-color)!important}
html body .section-tab.active .tab-count{background:var(--surface-secondary)!important}
html body .app-main{max-width:1180px;padding-top:32px}
html body .workspace-head h1{font-size:30px}
html body .question-surface{border-radius:8px;border:1px solid var(--border);background:var(--surface)!important;box-shadow:none!important}
html body :is(.reading-document,.reading-questions,.email-prompt,.discussion-prompt,.question-card,.speaking-stage,.stimulus,.audio-stage,.write-surface){border-radius:8px;box-shadow:none!important}
html body :is(.question-surface h2,.question-title,.reading-question h3){font-size:21px}
html body :is(.word-bank,.feedback-columns>div,.feedback-score-head>div,.model-answer,.response-box){border-radius:6px;box-shadow:none}
html body :is(.word-tile,.line-slot,.option-word,.option,.preview-option){border-radius:5px;box-shadow:none!important;font-size:14px}
html body :is(.option,.preview-option){background:var(--surface)!important}
html body :is(.option.selected,.preview-option.selected){background:var(--surface-secondary)!important;border-color:var(--primary)!important}
html body .task-help{border-radius:6px;box-shadow:none!important;width:30px;height:30px}
html body .timer{border-radius:5px;font-size:16px;font-variant-numeric:tabular-nums}
html body .progress-line{height:2px;background:var(--border);border-radius:0}
html body .question-controls{padding-top:22px;gap:14px}
html body .site-footer{font-size:11px;border-top:1px solid var(--border);padding-block:22px;max-width:1180px}
html body :is(.mock-test-main,.mock-root){max-width:1180px;padding-top:44px}
html body .mock-test-head{margin-bottom:32px}
html body :is(.mock-test-head h1,.intro h1,.task-head h1,.results-heading h1){font-size:34px}
html body .mock-test-row{border-radius:0;border:0;border-bottom:1px solid var(--border);background:transparent!important;box-shadow:none!important}
html body .exam-bar{background:var(--surface)!important;backdrop-filter:none}
html body .exam-bar__inner{grid-template-columns:200px minmax(0,1fr) 150px 34px;min-height:68px}
html body .exam-bar__inner>.exam-brand{grid-column:1}
html body .exam-bar__inner>.exam-progress{grid-column:2}
html body .exam-bar__inner>.exam-clock{grid-column:3}
html body .exam-bar__inner>.theme-toggle{position:static;grid-column:4;justify-self:end;left:auto;right:auto;top:auto;transform:none!important}
html body .exam-bar__inner>.theme-toggle:hover{transform:none!important}
html body .exam-clock strong{font-family:var(--sans);font-size:22px;font-variant-numeric:tabular-nums}
html body :is(.overview-grid,.section-summary-grid){gap:0;border-block:1px solid var(--border)}
html body :is(.overview-card,.section-summary){border:0;border-right:1px solid var(--border);border-radius:0;background:transparent!important}
html body .device-check{border-radius:8px}
html body .audio-orbit{border-radius:8px;width:64px;height:64px}
html body .audio-orbit::before{width:24px;height:24px}
html body .response-panel h2{font-size:21px}
html body :is(.evaluation-progress,.evaluation-progress::after){background:var(--surface-secondary)!important}
/* Plans and documents */
html body .pricing-shell{max-width:1120px;padding:64px 28px 80px}
html body .pricing-heading{max-width:660px;margin:0 0 40px;text-align:left}
html body .pricing-heading h1{font-size:40px;line-height:1.15;margin:14px 0 18px}
html body .pricing-heading p{font-size:15px;max-width:590px}
html body .current-access{justify-content:flex-start;margin-top:20px;background:none!important;border:0;padding:0;font-size:12px}
html body .plan-grid{gap:18px}
html body .plan-card{padding:27px;border:1px solid var(--border);border-radius:8px;background:var(--surface)!important;box-shadow:none!important}
html body .plan-card.recommended{border-color:var(--text-muted)!important;background:var(--surface)!important}
html body .plan-card h2{font-size:23px}
html body .plan-top>strong{border-radius:4px;background:var(--surface-secondary)!important;color:var(--text)!important;font-size:10px}
html body .plan-price{font-size:42px}
html body .pro-includes{margin-top:55px;padding-top:35px;gap:60px;border-top:1px solid var(--border)}
html body .pro-includes h2{font-size:26px}
html body .pro-includes li{font-size:13px}
html body .pricing-note{font-size:12px;color:var(--text-muted);max-width:760px;line-height:1.65}
html body .legal-main{max-width:1060px;padding:64px 0 80px}
html body .legal-heading{padding-bottom:32px;gap:40px}
html body .legal-heading h1{font-size:40px}
html body .legal-content{max-width:760px;margin-left:auto;padding-top:22px}
html body .legal-content h2{font-size:20px}
html body .legal-content :is(p,li){font-size:14px;line-height:1.85}
html body .legal-content section{padding-block:25px}
html body .legal-note{border-radius:6px;border-color:var(--border)!important;background:var(--surface-secondary)!important}
html body .legal-footer{max-width:1060px}
html body .coming-soon{max-width:680px;min-height:calc(100svh - 80px);padding:120px 28px;margin:0 auto}
html body .coming-soon h1{font-size:44px;line-height:1.1;max-width:560px}
html body .coming-soon>p:not(.hero-eyebrow){font-size:16px;line-height:1.65}
/* shadcn component islands */
.lx-ui{font-family:var(--sans);color:var(--text);font-size:14px;line-height:1.5;letter-spacing:-.01em}
.lx-ui *,.lx-ui *::before,.lx-ui *::after{box-sizing:border-box;border-style:solid;border-width:0;border-color:var(--border)}
.lx-ui :is(button,a){font-family:inherit;cursor:pointer;text-decoration:none}
.lx-ui button{margin:0}.lx-ui svg{width:16px;height:16px;flex-shrink:0}
.lx-ui [data-slot="button"]{font-weight:500;font-size:13px;letter-spacing:0;line-height:1;white-space:nowrap}
.lx-ui [data-slot="dropdown-menu-content"]{border:1px solid var(--border);z-index:100;background:var(--surface);min-width:220px;padding:5px;border-radius:7px;box-shadow:0 10px 30px var(--shadow-color)}
.lx-ui [data-slot="dropdown-menu-item"]{padding:9px 10px;border-radius:4px;font-size:13px;gap:10px;cursor:pointer}
.lx-ui [data-slot="dropdown-menu-item"]:focus{background:var(--surface-secondary);outline:0}
.lx-ui [data-slot="dropdown-menu-label"]{font-size:11px;padding:8px 10px;color:var(--text-muted)}
.lx-ui [data-slot="dropdown-menu-separator"]{height:1px;margin:5px -5px;background:var(--border)}
.lx-ui [data-slot="accordion-item"]{border-bottom:1px solid var(--border)}
.lx-ui [data-slot="accordion-trigger"]{width:100%;padding:20px 0;background:transparent;color:var(--text);font-size:14px;font-weight:500;display:flex;justify-content:space-between;align-items:center;text-align:left}
.lx-ui [data-slot="accordion-content"]{font-size:14px;color:var(--text-muted)}
.lx-ui [data-slot="accordion-content"] p{margin:0 0 18px;line-height:1.7}
.lx-ui [data-slot="badge"]{border:1px solid var(--border);border-radius:4px;padding:2px 7px;font-size:11px}
html body .lx-tools{display:flex;align-items:center}
html body .lx-tools [data-slot="button"]{background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:8px;min-height:34px;height:34px}
html body .exam-bar .lx-tools{display:none}
html body .lx-sidebar-icon{width:16px;height:16px;flex-shrink:0;stroke-width:1.7}
html body .lx-skip{position:fixed;z-index:10001;top:-100px;left:18px;background:var(--primary);color:var(--on-primary);padding:10px 16px;border-radius:6px}
html body .lx-skip:focus{top:12px}
@keyframes lx-enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

@media(max-width:1000px){
html body .home-links{margin-left:12px;gap:16px}html body .home-account{gap:6px}html body .home-nav{gap:14px}html body .home-account .nav-account.pro{display:none}
html body .product-nav{background:var(--surface)!important}html body .product-nav-inner{padding:14px 20px;gap:18px}html body .product-nav-links [data-app-tab]{font-size:12px;padding:12px 8px}
html body .product-nav-links svg{display:none}html body .product-nav-actions{gap:7px}html body .product-nav-actions .exam-switcher-button>span:first-child{display:none}
html body .account-button-copy{display:none}html body .topbar-inner{display:flex;flex-wrap:wrap;gap:12px;padding-block:13px}html body .topbar-inner .brand{margin-right:auto}
html body .exam-tabs{order:5;width:100%;justify-content:stretch}html body .exam-tab{flex:1;text-align:center}html body .practice-preview{gap:30px}
}
@media(max-width:780px){
html body .exam-bar__inner{grid-template-columns:minmax(0,1fr) auto auto;gap:14px}html body .exam-bar__inner>.exam-brand{grid-column:1}html body .exam-bar__inner>.exam-clock{grid-column:2}html body .exam-bar__inner>.theme-toggle{grid-row:1;grid-column:3}html body .exam-progress{grid-row:2;grid-column:1/-1}
}
@media(max-width:760px){
html body :is(.home-nav,.account-nav,.choice-nav,.pricing-nav,.legal-nav){padding:16px 20px;min-height:68px;gap:12px;flex-wrap:wrap}
html body :is(.home-brand,.account-brand,.choice-brand,.legal-brand,.brand,.exam-brand){width:150px;height:50px}
html body .home-links{display:none}html body .home-account{gap:8px}html body .home-account .nav-account{padding:7px 10px}html body .home-account .home-profile-wrap{display:none}
html body .home-hero{min-height:580px;padding:70px 24px 100px}html body .home-hero::before{background-position:62% center}html body .home-hero::after{background:rgba(15,25,19,.76)}
html body .hero-copy h1{font-size:44px;max-width:420px}html body .hero-intro{font-size:15px;max-width:380px}html body .practice-orbit{left:24px;right:auto;gap:20px}
html body .practice-preview{width:calc(100% - 40px);display:block;padding:50px 0}html body .preview-heading{margin-bottom:28px}html body .preview-heading h2{font-size:29px}
html body .preview-heading>span{max-width:none}html body .preview-stage{padding:20px}html body .preview-tabs{gap:2px}html body .preview-tab{padding:9px 7px;font-size:11px}
html body .feedback-example{display:block;margin-top:40px;padding-top:32px}html body .feedback-example-intro{margin-bottom:24px}html body .feedback-example-report{width:100%}
html body .approach{display:block;width:calc(100% - 40px);padding:40px 0}html body .approach-lines{margin-top:30px}html body .section-lead h2{font-size:29px}
html body .home-final-cta h2{font-size:30px}html body .home-footer{width:calc(100% - 40px);display:flex;flex-wrap:wrap;gap:22px}html body .home-footer p{display:none}
html body .lx-faq{padding:50px 20px}html body .choice-main{width:calc(100% - 40px);padding:44px 0 60px}html body .choice-intro h1{font-size:32px}
html body .choice-deck{grid-template-columns:1fr}html body .exam-card,html body .exam-card-inner,html body .exam-front{min-height:230px}
html body .auth-shell{padding:36px 0 50px}html body .auth-panel{padding:22px}
html body .product-nav-inner{display:flex;flex-wrap:wrap;gap:14px;padding:14px 18px}html body .product-nav-inner>.account-brand{width:150px;height:50px;margin-right:auto}
html body .mobile-nav-toggle{display:block}html body .product-nav-actions{order:3;margin-left:auto}html body .product-nav-links{order:4;width:100%;overflow:auto}
html body .product-nav-links [data-app-tab]{height:40px}html body .product-shell{padding:30px 20px 60px}html body .dashboard-heading{display:block}
html body .dashboard-heading>p{text-align:left;margin-top:10px}html body .resume-panel{display:block;padding:24px}html body .resume-panel .button{margin-top:20px}
html body .skill-grid{grid-template-columns:1fr 1fr}html body .skill-card{padding:20px;border-bottom:1px solid var(--border)}html body .skill-card:nth-child(2){border-right:0}
html body .dashboard-pair{display:block}html body .dashboard-plain+ .dashboard-plain{margin-top:25px}
html body .dashboard-section-heading{align-items:flex-start;gap:12px}html body .dashboard-section-heading h2{font-size:19px}html body .product-pro-action{display:none}
html body .topbar-inner{width:calc(100% - 32px)}html body .auth-actions{gap:6px}html body .auth-actions .pro-nav-action{display:none}
html body .exam-tab{font-size:12px;padding:9px}html body .writing-subnav-inner{width:calc(100% - 24px)}html body .section-tab{padding:8px 6px;font-size:11px}
html body .section-tab .tab-count{display:none}html body .app-main{width:calc(100% - 28px);padding-top:24px}html body .question-controls{flex-wrap:wrap}
html body .question-controls .btn{padding:9px 12px}html body .mock-root{padding:28px 18px 60px}html body .task-head h1{font-size:28px}
html body .pricing-shell{padding:40px 20px 60px}html body .pricing-heading h1{font-size:33px}html body .plan-grid{grid-template-columns:1fr}
html body .pro-includes{display:block}html body .pro-includes ul{margin-top:26px}
html body .legal-main{padding:40px 0 60px}html body .legal-heading{display:block}html body .legal-heading>p{margin-top:20px}
html body .legal-heading h1{font-size:34px}html body .legal-nav nav{max-width:none;margin-left:auto}
html body .coming-soon{padding-top:75px}html body .coming-soon h1{font-size:36px}
}
@media(max-width:420px){
html body :is(.home-brand,.account-brand,.choice-brand,.legal-brand,.brand,.exam-brand),html body .product-nav-inner>.account-brand{width:126px;height:42px}
}
.lx-menu{border:1px solid var(--border)!important;z-index:100;background:var(--surface)!important;min-width:220px;padding:5px;border-radius:7px;box-shadow:0 10px 30px var(--shadow-color)}
html body .lx-crumb{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-muted);margin-bottom:22px}
html body .lx-crumb a{color:inherit;text-decoration:none}
html body .lx-crumb svg{width:12px;height:12px}
html body .lx-inline-badge{display:inline-block}
html body .lx-inline-badge [data-slot="badge"]{color:var(--text-muted);background:var(--surface-secondary)}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}html body *,html body *::before,html body *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

@media(max-width:760px){html body .writing-subnav-inner{overflow:hidden;padding-block:8px}html body .section-tabs{display:flex!important;grid-template-columns:none!important;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;gap:3px;padding:4px}html body .section-tabs::-webkit-scrollbar{display:none}html body .section-tab{flex:0 0 auto;min-height:34px;padding:7px 10px}}

/* Feedback pass: visual-only refinement — neutral canvas, one indigo accent, no decorative depth. */
:root,:root[data-theme="light"]{
  --bg:#f8f8f6;--surface:#ffffff;--surface-secondary:#f0f0ed;--text:#111214;--text-muted:#6b6f76;
  --primary:#4f46e5;--primary-hover:#4338ca;--on-primary:#ffffff;--on-accent:#ffffff;--border:#d3d5da;
  --accent-emerald:#4f46e5;--accent-soft:#eeedff;--success:#287a4b;--success-soft:#e8f4ec;
  --warning:#9a641c;--warning-soft:#fbf1de;--error:#b93b45;--error-soft:#fae9eb;
  --shadow-color:rgba(17,18,20,.09);--primary-rgb:79,70,229;--accent-rgb:79,70,229;
  --radius:16px;--shadow:none;
}
:root[data-theme="dark"]{
  --bg:#0e1013;--surface:#16191e;--surface-secondary:#1d2127;--text:#f5f6f8;--text-muted:#9aa0aa;
  --primary:#818cf8;--primary-hover:#a5b4fc;--on-primary:#0e1013;--on-accent:#0e1013;--border:#2a2f37;
  --accent-emerald:#818cf8;--accent-soft:#242746;--success:#65b985;--success-soft:#173324;
  --warning:#e0ad62;--warning-soft:#392d1c;--error:#ef858d;--error-soft:#3c2227;
  --shadow-color:rgba(0,0,0,.3);--primary-rgb:129,140,248;--accent-rgb:129,140,248;
}
html body{font-size:16px;line-height:1.65;letter-spacing:-.008em}
html body :is(h1,h2,h3,h4,h5,h6){letter-spacing:-.035em}
html body :is(.hero-eyebrow,.profile-eyebrow,.eyebrow,.legal-eyebrow,.choice-intro>p,.auth-context small,.pricing-heading>span,.feedback-example-intro>p){
  color:var(--primary)!important;font-size:12px;font-weight:650;letter-spacing:.06em;text-transform:uppercase
}
html body :is(a,button,input,textarea,select):focus-visible{outline-color:var(--primary)}
html body :is(.home-mark,.account-mark,.choice-brand>span:not(.ursula-responsive-logo),.legal-mark,.brand-mark,.exam-brand>span:not(.ursula-responsive-logo)){background:var(--primary)!important;color:var(--on-primary)!important;border-radius:10px!important}
html body :is(.theme-toggle,.profile-button,.home-profile,.lx-tools [data-slot="button"]){border-radius:10px}
html body :is(.home-cta,.button,.btn,.plan-action,.nav-account.signup,.auth-button.signup){
  min-height:44px;border-radius:12px;font-size:14px;font-weight:600;box-shadow:none!important;
  transition:transform 160ms ease,background-color 160ms ease,border-color 160ms ease,color 160ms ease
}
html body :is(.home-cta,.button.primary,.btn.primary,.plan-action,.nav-account.signup,.auth-button.signup){
  background:var(--primary)!important;border-color:var(--primary)!important;color:var(--on-primary)!important
}
html body :is(.home-cta,.button,.btn,.plan-action,.nav-account.signup,.auth-button.signup):hover{transform:translateY(-2px);filter:none;box-shadow:none!important}
html body :is(.home-cta,.button,.btn,.plan-action):active{transform:translateY(0)}
html body :is(.home-cta,.button,.btn,.inline-action) [aria-hidden="true"]{display:inline-block;transition:transform 160ms ease}
html body :is(.home-cta,.button,.btn,.inline-action):hover [aria-hidden="true"]{transform:translateX(3px)}
html body :is(.button.secondary,.button.guest,.btn.secondary){border-color:var(--border)!important}
html body :is(.product-pro-action,.choice-pro-link,.pro-nav-action,.nav-account.pro){border-radius:11px;box-shadow:none!important}
html body :is(.field input,.field select,.auth-form input,.settings-form input,textarea){border-radius:12px!important;box-shadow:none!important}
html body :is(.field input,.field select,.auth-form input,.settings-form input){min-height:44px;height:44px}
html body :is(.field input,.field select,.auth-form input,.settings-form input,textarea):focus{
  border-color:var(--primary)!important;box-shadow:0 0 0 3px rgba(var(--primary-rgb),.12)!important
}
/* Keep depth only where an element floats above the page. */
html body :is(.modal,.home-modal,.tour-popover,.entry-modal,.product-account-menu,.exam-switcher-menu,.profile-menu,.home-profile-menu,.lx-menu){
  border-radius:16px;box-shadow:0 18px 48px var(--shadow-color)!important
}
html body :is(
.preview-workbench,.feedback-example-report,.exam-front,.auth-panel,.resume-panel,.skill-card,.dashboard-plain,
.question-surface,.reading-document,.reading-question,.cloze-sheet,.audio-gate,.ursula-player,.listening-question,
.listening-results,.compose-panel,.discussion-compose,.feedback-columns>div,.feedback-score-head,.feedback-priorities,
.feedback-highlights,.model-answer,.speaking-stage,.mock-test-row,.plan-card,.device-check,.evaluation-progress,
.overview-metrics,.dashboard-next-grid,.history-upgrade,.practice-group,.mock-hub-row
){box-shadow:none!important}
/* Marketing sections: stronger scale and readable line lengths. */
html body .home-hero::after{background:linear-gradient(90deg,rgba(9,11,14,.93) 0%,rgba(9,11,14,.72) 43%,rgba(9,11,14,.16) 100%)}
html body .hero-copy h1{font-size:clamp(56px,5vw,64px);letter-spacing:-.04em}
html body .hero-intro{max-width:560px;font-size:18px;line-height:1.65}
html body .hero-actions .home-cta{background:var(--primary)!important;border-color:var(--primary)!important;color:var(--on-primary)!important}
html body .practice-preview{grid-template-columns:minmax(320px,.82fr) minmax(0,1.18fr);gap:clamp(52px,6vw,88px);padding-block:112px}
html body .preview-heading h2{font-size:clamp(40px,4vw,48px);line-height:1.08}
html body .preview-heading>span{max-width:470px;font-size:17px;line-height:1.72}
html body .preview-workbench{overflow:hidden;border-radius:18px;box-shadow:none!important}
html body .preview-tabs{padding:9px}
html body .preview-tab{border-radius:10px;min-height:44px}
html body .preview-tab.active{box-shadow:none!important;border:1px solid var(--border)}
html body .preview-stage{min-height:460px}
html body .preview-task h3{font-size:clamp(24px,2.5vw,32px)}
html body .preview-task>p,.preview-passage p,.preview-email-points{font-size:16px;line-height:1.7}
html body .feedback-example{grid-template-columns:minmax(330px,.82fr) minmax(0,1.18fr);gap:clamp(56px,7vw,104px);align-items:start;padding-top:72px;margin-top:28px}
html body .feedback-example-intro h3{max-width:520px;font-size:clamp(38px,4vw,46px);line-height:1.08}
html body .feedback-example-intro>span{max-width:520px;font-size:17px;line-height:1.72}
html body .feedback-example-report{border-radius:18px}
html body .feedback-example-report header{padding:28px 30px}
html body .feedback-example-report header>span{color:var(--text)!important;font-size:13px;letter-spacing:0;text-transform:none}
html body .feedback-example-report header small{font-size:12px}
html body .feedback-example-report header strong{color:var(--primary);font-size:44px;line-height:1}
html body .feedback-example-report dl{gap:0}
html body .feedback-example-report dl>div{padding:24px 26px;border-right:0;border-top:1px solid var(--border)}
html body .feedback-example-report dt{font-size:12px}
html body .feedback-example-report dd{position:relative;margin-top:9px;padding-bottom:15px;color:var(--text);font-size:15px;font-weight:650}
html body .feedback-example-report dd::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:99px;background:linear-gradient(90deg,var(--primary) 86%,var(--surface-secondary) 86%)}
html body .feedback-example-report dl>div:nth-child(2) dd::after{background:linear-gradient(90deg,var(--warning) 58%,var(--surface-secondary) 58%)}
html body .feedback-example-report dl>div:nth-child(3) dd::after{background:linear-gradient(90deg,var(--primary) 76%,var(--surface-secondary) 76%)}
html body .feedback-example-report dd.feedback-developing{color:var(--warning)}
html body .feedback-example-suggestion{margin:12px;padding:22px 24px;border:0;border-radius:14px;background:var(--accent-soft)}
html body .feedback-example-suggestion span{color:var(--primary);font-size:11px}
html body .feedback-example-suggestion p{max-width:none;color:var(--text)!important;font-size:16px;line-height:1.65}
html body .approach{grid-template-columns:minmax(320px,.82fr) minmax(0,1.18fr);gap:clamp(52px,6vw,88px);padding-block:96px}
html body .section-lead h2{font-size:clamp(40px,4vw,48px);line-height:1.08}
html body .approach-line{padding:30px 0}
html body .approach-line h3{font-size:22px}
html body .approach-line p{max-width:680px;font-size:17px;line-height:1.7}
html body .home-final-cta{padding-block:96px}
html body .home-final-cta h2{font-size:clamp(40px,4vw,48px)}
html body .lx-faq{max-width:860px;padding-block:96px}
html body .lx-faq h2{font-size:40px}
html body .lx-ui [data-slot="accordion-trigger"]{font-size:16px;padding-block:24px}
/* Exam selection remains two options, with clear availability priority. */
html body .choice-main{max-width:1080px;padding-block:84px}
html body .choice-intro{max-width:720px;margin-bottom:46px}
html body .choice-intro h1{font-size:clamp(42px,4.5vw,54px)}
html body .choice-account-note{max-width:680px}
html body .choice-account-note p{font-size:17px;line-height:1.7}
html body .choice-deck{gap:24px}
html body .exam-card,html body .exam-card-inner,html body .exam-front{min-height:300px}
html body .exam-front{padding:32px;border-radius:18px;transition:transform 160ms ease,border-color 160ms ease,background-color 160ms ease}
html body .exam-card[data-exam="toefl"] .exam-front{border-left:4px solid var(--primary);background:var(--surface)!important}
html body .exam-card:not(.unavailable):hover .exam-front{transform:translateY(-2px);border-color:rgba(var(--primary-rgb),.45)!important;box-shadow:none}
html body .exam-name{font-size:42px}
html body .exam-description{max-width:440px;font-size:17px;line-height:1.65}
html body .exam-meta{border-radius:8px;color:var(--primary)!important}
html body .exam-arrow{color:var(--primary);transition:transform 160ms ease}
html body .exam-card:not(.unavailable):hover .exam-arrow{transform:translate(3px,-3px)}
html body .exam-card.unavailable{opacity:1}
html body .exam-card.unavailable .exam-front{border-color:var(--border)!important;background:var(--surface-secondary)!important}
html body .exam-card.unavailable :is(.exam-name,.exam-description,.exam-arrow){color:var(--text-muted)!important}
/* Forms and account pages: wider reading measure without changing their structure. */
html body .auth-shell{width:min(560px,calc(100% - 48px));max-width:560px;padding-block:72px;gap:32px}
html body .auth-context h1{font-size:42px}
html body .auth-context p{font-size:17px;line-height:1.7}
html body .auth-panel{padding:32px;border-radius:18px}
html body .auth-step h2{font-size:26px}
html body .step-copy{font-size:15px;line-height:1.65}
html body .settings-view{max-width:840px!important}

/* Feedback pass: workspace scale, readable columns, and responsive cleanup. */

/* Dashboard and account workspace */
html body.product-body{background:var(--bg)!important}
html body .product-nav{box-shadow:none!important}
html body .product-nav-links [data-app-tab]{border-radius:10px;transition:background-color 160ms ease,color 160ms ease}
html body .product-nav-links [data-app-tab].active{background:var(--accent-soft)!important;color:var(--primary)!important}
html body .product-shell>.app-view{max-width:1180px}
html body :is(.dashboard-heading,.workspace-heading){margin-bottom:34px}
html body :is(.dashboard-heading h1,.workspace-heading h1){font-size:clamp(34px,3.3vw,42px);line-height:1.08}
html body :is(.dashboard-heading>p,.workspace-heading>p){max-width:700px;font-size:16px;line-height:1.7}
html body .resume-panel{padding:32px;border-radius:16px;background:var(--surface)!important;gap:40px}
html body .resume-copy{max-width:720px}
html body .resume-copy h2{font-size:28px;line-height:1.18}
html body .resume-copy>p{max-width:640px;font-size:15px;line-height:1.65}
html body .skills-overview{margin-top:52px}
html body .dashboard-section-heading{padding-bottom:22px}
html body .dashboard-section-heading h2{font-size:24px}
html body .skill-grid{background:transparent!important}
html body .skill-card{padding:26px 24px}
html body .skill-card h3{font-size:19px}
html body .skill-card p{font-size:14px;line-height:1.65}
html body .dashboard-pair{gap:48px;margin-top:48px}
html body .dashboard-plain{padding:30px 0}
html body .dashboard-plain h2{font-size:23px}
html body .dashboard-plain p{font-size:15px;line-height:1.65}
html body :is(.practice-task,.mock-hub-row,.activity-row,.task-performance-row){transition:background-color 160ms ease,border-color 160ms ease}
html body :is(.practice-task,.mock-hub-row,.activity-row):hover{background:var(--surface-secondary)!important}
html body :is(.overview-metrics,.dashboard-next-grid){border-radius:16px}
html body .settings-view{max-width:840px!important}

/* Practice workspaces */
html body .app-main{max-width:1260px;padding-top:44px}
html body .workspace-head{margin-bottom:34px}
html body .workspace-head h1{font-size:clamp(34px,3.3vw,42px);line-height:1.1}
html body .workspace-head p{max-width:760px;font-size:16px;line-height:1.7}
html body .question-surface{border-radius:18px}
html body :is(.reading-document,.reading-questions,.email-prompt,.discussion-prompt,.question-card,.speaking-stage,.stimulus,.audio-stage,.write-surface){border-radius:16px}
html body :is(.question-surface h2,.question-title,.reading-question h3){font-size:24px;line-height:1.25}
html body .writing-layout{grid-template-columns:minmax(380px,.9fr) minmax(540px,1.1fr);gap:clamp(40px,5vw,72px)}
html body .discussion-layout{grid-template-columns:minmax(400px,.94fr) minmax(520px,1.06fr);gap:clamp(40px,5vw,68px)}
html body .reading-layout{grid-template-columns:minmax(520px,1.08fr) minmax(400px,.92fr);gap:clamp(36px,4vw,58px)}
html body .write-surface{max-width:1120px;margin-inline:auto}
html body :is(.compose-panel,.discussion-compose){border-radius:16px}
html body .writing-area{min-height:440px;padding:28px 30px 64px;font-size:17px;line-height:1.75}
html body :is(.prompt-column>p,.task-list li,.post p,.reading-document p){font-size:16px;line-height:1.75}
html body .reading-document{font-size:18px;line-height:1.8}
html body :is(.word-tile,.line-slot,.option-word,.option,.preview-option){border-radius:10px}
html body :is(.option.selected,.preview-option.selected){background:var(--accent-soft)!important;color:var(--text)!important}
html body :is(.audio-gate,.ursula-player,.listening-question,.listening-results,.device-check){border-radius:16px}
html body .audio-orbit{border-radius:14px}
html body .section-tabs{border-radius:10px}
html body .section-tab{border-radius:8px}
html body .section-tab.active{box-shadow:none!important;color:var(--primary)!important}

/* Scored feedback: one clear score, compact detail, one highlighted next step. */
html body .evaluation-progress{padding:22px;border:1px solid var(--border)!important;border-radius:16px;background:var(--surface-secondary)!important}
html body .evaluation-progress::after{display:none!important}
html body .evaluation-mark:not(.ursula-word-loader){border-radius:14px;background:var(--primary)!important;color:var(--on-primary)!important;box-shadow:none!important}
html body .evaluation-progress:has(>.evaluation-mark.ursula-word-loader){grid-template-columns:minmax(0,1fr)!important;gap:10px!important;align-items:start!important;min-height:0;overflow:hidden}
html body .evaluation-progress>.evaluation-mark.ursula-word-loader{grid-column:1;grid-row:1;justify-self:center;width:min(100%,230px)!important;margin:0 auto!important}
html body .evaluation-progress:has(>.evaluation-mark.ursula-word-loader)>.evaluation-copy{grid-column:1;grid-row:2;min-width:0;text-align:center}
html body .evaluation-progress:has(>.evaluation-mark.ursula-word-loader) .evaluation-rubric{justify-content:center}
html body .feedback-score-head{border:0;border-radius:16px;background:var(--surface-secondary)!important;overflow:hidden}
html body .feedback-score-head>div{padding:26px;background:transparent!important;border-color:var(--border)!important}
html body .feedback-score-head span{color:var(--text-muted)!important;font-size:11px}
html body .feedback-score-head strong{margin-top:9px;color:var(--primary)!important;font-size:42px;line-height:1}
html body .feedback-score-head small{font-size:12px}
html body .feedback-breakdown{margin-top:24px}
html body .feedback-breakdown>div{padding:15px 2px}
html body .feedback-breakdown dt{color:var(--text)!important;font-size:15px}
html body .feedback-breakdown dd{color:var(--text);font-size:15px}
html body .feedback-columns{gap:28px;margin-top:26px}
html body .feedback-columns>div{padding:20px 0;border:0;border-top:1px solid var(--border);border-radius:0;background:transparent!important}
html body .feedback-columns ul{font-size:15px;line-height:1.7}
html body .feedback-priorities{gap:18px;margin-top:28px;border:0;border-radius:0;overflow:visible}
html body .feedback-priorities section{padding:22px 0;border:0!important;border-top:1px solid var(--border)!important;background:transparent!important}
html body .feedback-priorities section:last-child{padding:22px;border:0!important;border-radius:14px;background:var(--accent-soft)!important}
html body .feedback-priorities section>span{color:var(--primary)!important}
html body .feedback-priorities :is(p,ul){font-size:15px;line-height:1.7}
html body .feedback-highlights{border-radius:14px}
html body .feedback-highlights summary{padding:18px 20px}
html body .feedback-highlights>div{padding:20px;font-size:15px;line-height:1.7}
html body .rubric-chip{border-radius:8px;background:var(--accent-soft)!important;color:var(--primary)!important}
html body .model-answer{border-radius:14px;background:var(--surface-secondary)!important}
html body .score-dial{box-shadow:none!important}
html body .score-dial::after{background:var(--surface)!important}

/* Pricing and legal pages */
html body .pricing-shell{max-width:1180px;padding:84px 28px 96px}
html body .pricing-heading{max-width:720px;margin-bottom:52px}
html body .pricing-heading h1{font-size:clamp(42px,4.5vw,52px);line-height:1.08}
html body .pricing-heading p{max-width:650px;font-size:17px;line-height:1.7}
html body .plan-grid{gap:22px}
html body .plan-card{padding:30px;border-radius:16px}
html body .plan-card.recommended{position:relative;border-color:var(--primary)!important}
html body .plan-card.recommended::before{content:"";position:absolute;left:20px;right:20px;top:-1px;height:3px;border-radius:0 0 99px 99px;background:var(--primary)}
html body .plan-card h2{font-size:26px}
html body .plan-top>strong{border-radius:7px;background:var(--accent-soft)!important;color:var(--primary)!important}
html body .plan-price{font-size:46px}
html body .plan-card :is(p,li){font-size:15px;line-height:1.65}
html body .pro-includes{margin-top:68px;padding-top:42px}
html body .pro-includes h2{font-size:30px}
html body .pro-includes li{font-size:15px;line-height:1.65}
html body .pricing-note{font-size:13px}
html body .legal-main{max-width:1100px;padding:84px 0 96px}
html body .legal-heading{padding-bottom:44px;gap:56px}
html body .legal-heading h1{font-size:clamp(42px,4.5vw,52px);line-height:1.08}
html body .legal-heading>p{max-width:480px;font-size:16px;line-height:1.7}
html body .legal-content{max-width:820px;margin-left:0;padding-top:30px}
html body .legal-content h2{font-size:24px}
html body .legal-content :is(p,li){font-size:16px;line-height:1.8}
html body .legal-content section{padding-block:30px}
html body .legal-note{border-radius:14px}

@media(max-width:1100px){
  html body :is(.writing-layout,.discussion-layout,.reading-layout,.build-layout){grid-template-columns:minmax(0,1fr)!important;gap:38px}
  html body .reading-question{position:static}
  html body :is(.writing-layout .compose-panel,.discussion-compose){order:2}
  html body .prompt-column{max-width:820px}
  html body .reading-document{max-width:none}
}

@media(max-width:980px){
  html body :is(.practice-preview,.feedback-example,.approach){grid-template-columns:minmax(0,1fr);gap:44px}
  html body :is(.preview-heading,.feedback-example-intro,.section-lead){max-width:720px}
  html body .practice-preview{padding-block:84px}
  html body .feedback-example{padding-top:56px}
  html body .approach{padding-block:80px}
  html body .plan-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  html body .plan-card:last-child{grid-column:1/-1}
}

@media(max-width:760px){
  html body{font-size:15.5px}
  html body .hero-copy h1{font-size:clamp(42px,11vw,48px)}
  html body .hero-intro{font-size:16px}
  html body :is(.preview-heading h2,.feedback-example-intro h3,.section-lead h2,.home-final-cta h2,.lx-faq h2){font-size:clamp(34px,9vw,39px)}
  html body :is(.preview-heading>span,.feedback-example-intro>span,.approach-line p){font-size:16px}
  html body :is(.practice-preview,.approach,.lx-faq,.home-final-cta){padding-block:64px}
  html body .feedback-example{gap:36px;padding-top:44px}
  html body .preview-stage{min-height:410px}
  html body .feedback-example-report header{padding:24px}
  html body .feedback-example-report header strong{font-size:40px}
  html body .choice-main{padding-block:56px}
  html body .choice-intro h1{font-size:38px}
  html body .choice-deck{grid-template-columns:1fr}
  html body .exam-card,html body .exam-card-inner,html body .exam-front{min-height:240px}
  html body .exam-name{font-size:36px}
  html body .auth-shell{width:min(100% - 32px,560px);padding-block:48px}
  html body .auth-context h1{font-size:36px}
  html body .auth-panel{padding:24px}
  html body .app-main{padding-top:28px}
  html body .workspace-head h1{font-size:34px}
  html body .question-surface{border-radius:16px}
  html body .writing-area{min-height:360px;padding:22px 20px 58px;font-size:16px}
  html body :is(.prompt-column>p,.task-list li,.post p,.reading-document p){font-size:15.5px}
  html body .reading-document{font-size:16px}
  html body .feedback-score-head strong{font-size:38px}
  html body .feedback-priorities{grid-template-columns:1fr}
  html body .pricing-shell{padding:56px 20px 72px}
  html body .pricing-heading{margin-bottom:38px}
  html body .pricing-heading h1{font-size:38px}
  html body .pricing-heading p{font-size:16px}
  html body .plan-grid{grid-template-columns:1fr}
  html body .plan-card:last-child{grid-column:auto}
  html body .pro-includes{margin-top:48px;padding-top:34px}
  html body .legal-main{padding:56px 0 72px}
  html body .legal-heading h1{font-size:38px}
  html body .legal-content{width:100%;max-width:none}
  html body .legal-content :is(p,li){font-size:15.5px}
}

@media(max-width:520px){
  html body .practice-preview{gap:32px}
  html body .preview-workbench{border-radius:14px}
  html body .feedback-example-report dl{grid-template-columns:1fr}
  html body .feedback-example-report dl>div{padding:20px 22px}
  html body .feedback-example-suggestion{margin:10px;padding:20px}
  html body .exam-front{padding:26px}
  html body .resume-panel{padding:24px}
  html body .skill-grid{grid-template-columns:1fr}
  html body .skill-card{border-right:0;border-bottom:1px solid var(--border)}
  html body .skill-card:last-child{border-bottom:0}
  html body .feedback-columns{grid-template-columns:1fr;gap:8px}
  html body .feedback-score-head{grid-template-columns:1fr}
  html body .feedback-score-head>div+div{border-left:0;border-top:1px solid var(--border)}
  html body .evaluation-progress{grid-template-columns:52px minmax(0,1fr);gap:15px;padding:18px}
  html body .legal-content h2{font-size:22px}
}
/* Final cleanup from browser QA. */
html body .lx-tools [data-slot="button"]{box-shadow:none!important}
@media(max-width:1100px){
  html body .legal-heading{display:block}
  html body .legal-heading>p{max-width:680px;margin-top:22px}
}
html body .lx-tools [data-slot="dropdown-menu-trigger"]{border-radius:10px;box-shadow:none!important}
/* TOEFL task instruction and transition clarity */
html body .discussion-instructions{margin-bottom:20px;padding:20px 22px;border:1px solid var(--border);border-radius:12px;background:var(--surface-secondary)}
html body .discussion-instructions p{margin:0 0 10px;color:var(--text)}
html body .discussion-instructions p:last-child{margin-bottom:0}
html body .discussion-instructions ul{margin:8px 0 12px;padding-left:22px;color:var(--text)}
html body .speaking-next-step{margin:28px 0;padding:24px 0;border-block:1px solid var(--border)}
html body .speaking-next-step h3{margin:0 0 8px}
html body .speaking-next-step p:last-child{max-width:720px;margin-bottom:0;color:var(--text-muted)}

/* Full-width demos and comfortable practice surfaces. */
html body .practice-preview{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:40px;width:100%;max-width:none;margin:0;padding:90px 0;background:var(--surface-secondary)!important}
html body .practice-preview>:is(.preview-heading,.preview-workbench,.feedback-example){width:min(1240px,calc(100% - 56px))}
html body .preview-heading{max-width:none;margin:0;padding:0}
html body .preview-heading h2{max-width:none}
html body .preview-heading>span{max-width:900px}
html body .preview-workbench{margin:0}
html body .preview-tabs{padding:9px}
html body .preview-tab{min-height:44px;border-radius:10px}
html body .preview-stage{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:0;min-height:440px}
html body :is(.preview-passage,.preview-listen,.preview-speak-plan,.preview-task){min-width:0;min-height:0;padding:clamp(28px,3.2vw,48px)}
html body :is(.preview-passage,.preview-listen,.preview-speak-plan){border-right:1px solid var(--border);border-bottom:0}
html body .preview-passage p{max-width:none;font-size:18px;line-height:1.75}
html body :is(.preview-options,.preview-task textarea,.preview-response-row){max-width:none}
html body .preview-task h3{line-height:1.25}
html body .preview-footer{padding:20px 32px;gap:20px;flex-wrap:wrap}
html body .feedback-example{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;margin-top:32px;padding-top:64px}
html body .feedback-example-intro{max-width:none;margin:0;padding:0}
html body .feedback-example-intro h3{max-width:960px}
html body .feedback-example-intro>span{max-width:760px}
html body .feedback-example-report{width:100%;min-width:0}
html body .feedback-example-report dl{grid-template-columns:repeat(3,minmax(0,1fr))}
html body .feedback-example-report dl>div{padding:28px 32px}
html body .feedback-example-suggestion{margin:0 24px 24px;padding:24px 28px}
html body .feedback-example-suggestion p{max-width:820px}

/* One shared gutter keeps tasks away from the surface edge. */
html body .question-surface{--task-padding:clamp(24px,3vw,40px);padding:var(--task-padding)}
html body :is(.writing-layout,.discussion-layout,.reading-layout){grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:clamp(28px,3vw,44px)}
html body :is(.prompt-column,.compose-panel,.discussion-compose,.reading-document,.reading-question){min-width:0}
html body .prompt-column{padding:8px 4px}
html body .prompt-column>h2{margin-bottom:24px;line-height:1.4}
html body .task-list{padding-left:24px}
html body .task-list li+li{margin-top:14px}
html body :is(.compose-head,.compose-footer){padding:20px 24px}
html body :is(.post,.question-card,.response-box,.model-answer,.device-check){padding:24px}
html body .reading-document-head{padding:24px 28px}
html body .reading-document-body{padding:28px}
html body :is(.word-bank,.option-bank){padding:22px 24px}
html body .exam-sheet{padding:8px 0 16px}
html body .speaker-row{gap:20px;margin-block:26px}
html body .speaker-copy{color:var(--text)!important;line-height:1.6}
html body :is(.fixed-fragment,.option-word,.sentence-pattern,.speaking-intro-copy>p:not(.eyebrow),.speaking-summary>p,.speaking-detail-body dd,.speaking-detail-body p,.speaking-stage>p){color:var(--text)!important}
html body :is(.exam-instruction,.source-note,.option-empty,.speaking-rules,.microphone-check p,.speaking-stage-note){color:var(--text-muted)!important}
html body .speaking-intro{grid-template-columns:minmax(0,1fr) minmax(240px,.45fr);gap:48px}
html body .speaking-stage{padding:40px 32px}
html body .speaking-result-detail summary{padding:22px 16px}
html body .speaking-detail-body{padding:0 16px 24px}

/* Dashboard spacing and a hover that does not shift the row. */
html body .dashboard-plain{padding:30px 24px}
html body :is(.practice-task,.activity-row,.dashboard-section-row,.task-performance-row,.mock-history-row){padding:22px 20px}
html body :is(.activity-row,.dashboard-section-row,.task-performance-row,.mock-history-row){transition:background-color 280ms ease,border-color 280ms ease}
html body :is(.activity-row,.dashboard-section-row,.task-performance-row,.mock-history-row):hover{padding:22px 20px}
html body .activity-row>span{transition:transform 280ms cubic-bezier(.2,.75,.25,1)}
html body .activity-row:is(:hover,:focus-visible)>span:first-child{transform:translateX(4px)}
html body .activity-row:focus-visible{background:var(--surface-secondary)!important}

@media(max-width:1100px){
  html body :is(.writing-layout,.discussion-layout,.reading-layout){grid-template-columns:minmax(0,1fr)!important;gap:32px}
}
@media(max-width:760px){
  html body .practice-preview{width:100%;gap:28px;padding:50px 0}
  html body .practice-preview>:is(.preview-heading,.preview-workbench,.feedback-example){width:calc(100% - 40px)}
  html body .preview-tab{min-height:44px}
  html body .preview-stage{grid-template-columns:minmax(0,1fr);min-height:0}
  html body :is(.preview-passage,.preview-listen,.preview-speak-plan,.preview-task){padding:28px 22px;min-height:0}
  html body .preview-passage{border-right:0;border-bottom:1px solid var(--border)}
  html body .preview-passage p{font-size:16px}
  html body .preview-footer{padding:20px 24px}
  html body .feedback-example{padding-top:40px}
  html body .feedback-example-report dl{grid-template-columns:1fr}
  html body .feedback-example-report dl>div{padding:22px 20px}
  html body .feedback-example-suggestion{margin:0 16px 16px;padding:22px 20px}
  html body .question-surface{--task-padding:22px}
  html body .speaking-intro{grid-template-columns:minmax(0,1fr);gap:28px;padding:0}
  html body .microphone-check{padding:24px 0 0}
  html body .speaking-stage{padding:28px 20px}
  html body .dashboard-plain{padding:24px 18px}
  html body .speaker-row{gap:12px}
  html body .reading-document-body,html body .reading-document-head{padding:22px}
  html body .preview-response-row{flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){
  html body .activity-row>span{transition:none;transform:none!important}
  html body :is(.activity-row,.dashboard-section-row,.task-performance-row,.mock-history-row){transition:none}
}

/* Ursula system v3
   One design language for the landing page and the app.
   Concatenated LAST into theme.css, so it retunes the shared tokens every page already uses
   (--bg, --surface, --text, --primary ...) and then restyles the shared components on top of them.
   Landing-only scenes live in static/landing-motion.css. */

/* ───────────── 1. Tokens ───────────── */
:root,
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f3ef;
  --surface: #ffffff;
  --surface-secondary: #ebe9e3;
  --text: #15131e;
  --text-muted: #625d70;
  --primary: #6047ef;
  --primary-hover: #4f38dc;
  --on-primary: #ffffff;
  --on-accent: #ffffff;
  --border: rgba(21, 19, 30, .13);
  --accent-emerald: #2f7d6d;
  --accent-soft: #e0efe9;
  --success: #2f7d6d;
  --success-soft: #e2efe9;
  --warning: #9a6519;
  --warning-soft: #f7ecd6;
  --error: #b3423f;
  --error-soft: #f7e3e1;
  --shadow-color: rgba(31, 25, 58, .12);
  --primary-rgb: 96, 71, 239;
  --accent-rgb: 47, 125, 109;

  --u-accent-soft: #ece9ff;
  --u-accent-text: #5238d8;
  --u-accent-lit: #8e80ff;
  --u-hover: rgba(21, 19, 30, .06);
  --u-login-bg: #e6e1ff;
  --u-login-bg-hover: #d9d2ff;
  /* Get started free: a vivid mint, the only fully saturated fill in the bar, so it is the first thing the eye lands on. */
  --u-cta-bg: linear-gradient(135deg, #62f5c0 0%, #1fd68f 100%);
  --u-cta-bg-hover: linear-gradient(135deg, #86fad0 0%, #3be6a3 100%);
  --u-cta-ink: #04261a;
  --u-cta-ring: rgba(2, 100, 66, .62);
  --u-cta-glow: 0 8px 22px -6px rgba(18, 196, 132, .7);
  --u-cta-glow-hover: 0 14px 32px -6px rgba(18, 196, 132, .85);
  --u-login-ink: #3b27bd;
  --u-login-line: #8a79f5;
  --u-night: #101017;
  --u-night-2: #1a1826;
  --u-pro: #f7e08a;
  --u-pro-ink: #2a2110;
  --u-glow: rgba(96, 71, 239, .13);
  --u-glow-2: rgba(60, 111, 245, .08);
  --u-nav-bg: rgba(248, 247, 252, .82);
  --u-nav-ink: #24202f;
  --u-nav-line: rgba(21, 19, 30, .10);
  --u-shadow-float: 0 12px 40px rgba(29, 24, 48, .10);
  --u-shadow-card: 0 1px 2px rgba(21, 19, 30, .04), 0 24px 60px -24px rgba(31, 25, 58, .18);
  --u-r-sm: 10px;
  --u-r: 12px;
  --u-r-lg: 20px;
  --u-r-xl: 28px;
  --u-ease: cubic-bezier(.2, .7, .2, 1);

  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: var(--sans);
  --body: var(--sans);
  --serif: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #101017;
  --surface: #181722;
  --surface-secondary: #211f2d;
  --text: #f4f0ff;
  --text-muted: #a8a2b9;
  --primary: #9a8cff;
  --primary-hover: #b3a8ff;
  --on-primary: #15131e;
  --on-accent: #15131e;
  --border: rgba(244, 240, 255, .13);
  --accent-emerald: #7fd1b6;
  --accent-soft: rgba(127, 209, 182, .14);
  --success: #7fd1b6;
  --success-soft: rgba(127, 209, 182, .14);
  --warning: #e6c07a;
  --warning-soft: rgba(230, 192, 122, .14);
  --error: #f0908c;
  --error-soft: rgba(240, 144, 140, .14);
  --shadow-color: rgba(0, 0, 0, .4);
  --primary-rgb: 154, 140, 255;
  --accent-rgb: 127, 209, 182;

  --u-accent-soft: rgba(154, 140, 255, .16);
  --u-accent-text: #b6abff;
  --u-hover: rgba(244, 240, 255, .08);
  --u-login-bg: rgba(154, 140, 255, .20);
  --u-login-bg-hover: rgba(154, 140, 255, .32);
  --u-cta-ring: rgba(190, 255, 232, .55);
  --u-cta-glow: 0 8px 26px -4px rgba(52, 238, 168, .55);
  --u-cta-glow-hover: 0 14px 36px -4px rgba(52, 238, 168, .75);
  --u-login-ink: #ece8ff;
  --u-login-line: rgba(178, 166, 255, .62);
  --u-glow: rgba(154, 140, 255, .16);
  --u-glow-2: rgba(60, 111, 245, .12);
  --u-nav-bg: rgba(20, 19, 27, .80);
  --u-nav-ink: #f4f0ff;
  --u-nav-line: rgba(244, 240, 255, .12);
  --u-shadow-float: 0 12px 40px rgba(0, 0, 0, .35);
  --u-shadow-card: 0 1px 2px rgba(0, 0, 0, .3), 0 24px 60px -24px rgba(0, 0, 0, .6);
}

/* ───────────── 2. Type + page ───────────── */
html body { font-family: var(--sans); color: var(--text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
html body.pricing-body { font-family: var(--sans) !important; }
html body :is(h1, h2, h3) { font-family: var(--sans) !important; letter-spacing: -.045em; }
html body :is(h1, h2, h3) em,
html body .u-serif {
  font-family: var(--serif) !important;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.015em;
  font-size: 1.09em;
  color: var(--u-accent-text);
}
html body :is(.auth-context h1, .choice-intro h1, .pricing-heading h1, .legal-heading h1) { text-wrap: balance; }
html body :is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 8px;
}
html body:is(.u-auth, .choice-page, .pricing-body, .u-legal, .u-workspace) {
  background:
    radial-gradient(60vw 38vw at 92% -10%, var(--u-glow), transparent 62%),
    radial-gradient(42vw 32vw at -8% 8%, var(--u-glow-2), transparent 60%),
    var(--bg) !important;
  background-attachment: fixed !important;
  color: var(--text);
  min-height: 100svh;
}
::selection { background: rgba(var(--primary-rgb), .22); }

/* small uppercase label with a hairline, shared by every page */
html body :is(.auth-context small, .choice-intro > p, .pricing-heading > span, .legal-eyebrow, .pro-includes span) {
  display: inline-flex !important;
  align-items: center;
  gap: 12px;
  margin: 0 0 22px !important;
  font: 750 11px/1 var(--sans) !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: var(--u-accent-text) !important;
}
html body :is(.auth-context small, .choice-intro > p, .pricing-heading > span, .legal-eyebrow)::before {
  content: ""; width: 26px; height: 1px; background: currentColor; opacity: .7;
}

/* ───────────── 3. Navigation pill (every page except the landing, which is fixed) ───────────── */
html body :is(.account-nav, .choice-nav, .pricing-nav, .legal-nav) {
  position: sticky !important;
  top: 16px !important;
  z-index: 120 !important;
  display: flex !important;
  align-items: center;
  gap: 6px !important;
  width: min(1180px, calc(100% - 32px)) !important;
  max-width: none !important;
  min-height: 64px !important;
  height: auto !important;
  margin: 16px auto 0 !important;
  padding: 8px 10px 8px 18px !important;
  border: 1px solid var(--u-nav-line) !important;
  border-radius: 18px !important;
  background: var(--u-nav-bg) !important;
  color: var(--u-nav-ink) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: var(--u-shadow-float) !important;
}
html body :is(.account-brand, .choice-brand, .legal-brand) { width: 148px !important; height: 48px !important; margin-right: auto; flex: 0 0 auto; }
html body :is(.choice-nav-actions) { display: flex; align-items: center; gap: 6px; margin-left: auto; }
html body :is(.nav-return, .choice-nav-actions a, .guide-link, .legal-nav nav a, .choice-nav-actions .guide-link) {
  display: inline-flex; align-items: center;
  min-height: 40px; padding: 0 13px;
  border-radius: var(--u-r); border: 0;
  background: transparent; color: var(--u-nav-ink) !important;
  font: 600 13px/1 var(--sans) !important; letter-spacing: -.005em;
  text-decoration: none; opacity: .86; cursor: pointer;
  transition: background-color .18s, opacity .18s;
}
html body :is(.nav-return, .choice-nav-actions a, .guide-link, .legal-nav nav a):hover { background: var(--u-hover); opacity: 1; }
html body .legal-nav nav { display: flex; gap: 2px; margin-left: auto; }
html body .legal-nav nav a[aria-current="page"] { background: var(--u-hover); opacity: 1; }
/* Pro is the one warm accent in the whole product */
html body :is(.choice-nav-actions .choice-pro-link, .nav-account.pro, .product-pro-action, .pro-nav-action) {
  background: var(--u-pro) !important; color: var(--u-pro-ink) !important;
  border: 0 !important; box-shadow: none !important; opacity: 1 !important;
  font-weight: 700 !important;
}
html body :is(.choice-nav-actions .choice-pro-link, .nav-account.pro):hover { filter: brightness(.96); transform: none; }
/* Log in is a filled, outlined secondary button: it reads as a button next to purple Sign up and amber Go Pro,
   never as loose text. The landing bar has its own copy of this rule in landing-motion.css. */
html body.choice-page .choice-nav-actions #choiceLogin {
  background: var(--u-login-bg) !important; color: var(--u-login-ink) !important;
  border: 1.5px solid var(--u-login-line) !important; box-shadow: none !important;
  opacity: 1 !important; font-weight: 700 !important;
}
html body.choice-page .choice-nav-actions #choiceLogin:hover { background: var(--u-login-bg-hover) !important; }
html body :is(.theme-toggle, .lx-tools button, .profile-button, .home-profile) {
  width: 42px; height: 42px; min-height: 42px; padding: 0;
  display: inline-grid; place-items: center;
  border: 1px solid var(--u-nav-line) !important; border-radius: var(--u-r) !important;
  background: transparent !important; color: var(--u-nav-ink) !important;
  box-shadow: none !important; transition: background-color .18s;
}
html body :is(.theme-toggle, .lx-tools button, .profile-button, .home-profile):hover { background: var(--u-hover) !important; }
html body .theme-toggle svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
html body .lx-tools { display: inline-flex; align-items: center; }
html body .choice-guide-panel { border-radius: var(--u-r-lg); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--u-shadow-card); }
html body .choice-guide-panel strong { color: var(--text); }
html body .choice-guide-panel span { color: var(--text-muted); }

/* Logo: gradient mark + wordmark, swapped light/dark. Same box on every page. */
html body :is(.account-brand, .choice-brand, .legal-brand) .ursula-responsive-logo { display: block !important; width: 100%; height: 100%; } /* auth.css hides the last span on phones; the logo wrapper is that span */
html body :is(.account-brand, .choice-brand, .legal-brand, .home-brand) .ursula-brand-logo { filter: none !important; }

/* ───────────── 4. Buttons + forms ───────────── */
html body :is(.button, .btn, .plan-action, .nav-account.signup) {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px;
  border-radius: var(--u-r); font: 650 14px/1 var(--sans); letter-spacing: -.01em;
  text-decoration: none; cursor: pointer;
  transition: transform .2s var(--u-ease), box-shadow .2s var(--u-ease), background-color .2s, border-color .2s;
}
html body :is(.button.primary, .btn.primary, .plan-action, .nav-account.signup) {
  background: var(--primary) !important; color: var(--on-primary) !important;
  border: 1px solid var(--primary) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 10px 26px -10px rgba(var(--primary-rgb), .7) !important;
}
html body :is(.button.primary, .btn.primary, .plan-action, .nav-account.signup):hover {
  background: var(--primary-hover) !important; border-color: var(--primary-hover) !important;
  transform: translateY(-2px); filter: none;
}
html body :is(.button.primary, .btn.primary, .plan-action):active { transform: translateY(0); }
html body :is(.button.secondary, .button.guest, .btn.secondary) {
  background: transparent !important; color: var(--text) !important;
  border: 1px solid var(--border) !important; box-shadow: none !important;
}
html body :is(.button.secondary, .button.guest, .btn.secondary):hover { background: var(--u-hover) !important; border-color: rgba(var(--primary-rgb), .5) !important; transform: none; }
html body .button.guest { color: var(--u-accent-text) !important; }
html body .button:disabled { opacity: .55; cursor: wait; transform: none; }

html body :is(.field input, .field select, .field textarea, .auth-form input, .settings-form input) {
  width: 100%; height: 50px; min-height: 50px; padding: 0 15px;
  border: 1px solid var(--border); border-radius: var(--u-r);
  background: var(--surface); color: var(--text);
  font: 500 15px/1.2 var(--sans); letter-spacing: -.01em;
  box-shadow: none;
  transition: border-color .18s, box-shadow .18s, background-color .18s;
}
html body :is(.field input, .field select, .field textarea, .auth-form input):hover { border-color: rgba(var(--primary-rgb), .4); }
html body :is(.field input, .field select, .field textarea, .auth-form input):focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(var(--primary-rgb), .16);
}
html body :is(.field input, .auth-form input)::placeholder { color: var(--text-muted); opacity: .65; }
html body .field { display: grid; gap: 8px; }
html body .field label { font: 650 13px/1.2 var(--sans); color: var(--text); letter-spacing: -.005em; }
html body .field-note { font-size: 12px; color: var(--text-muted); }
html body .otp-input { height: 60px; text-align: center; font: 650 26px/1 var(--sans); letter-spacing: .5em; }
html body .form-status { min-height: 20px; margin: 0; font-size: 13px; color: var(--text-muted); }
html body .text-link { color: var(--u-accent-text); font-weight: 600; text-underline-offset: 3px; }

/* ───────────── 5. Auth + account recovery (split screen) ───────────── */
html body.u-auth .auth-shell {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 0; width: 100%; max-width: none; min-height: 100svh;
  margin: -80px 0 0; padding: 0;
  align-items: stretch;
  /* keeps the dark half unbroken if the form column is taller than the viewport */
  background: linear-gradient(90deg, var(--u-night) 51.2%, transparent 51.2%);
}
html body.u-auth .auth-grid-trail { opacity: .4; }
html body.u-auth .auth-context {
  position: sticky !important; top: 0; align-self: start; height: 100svh; min-height: 620px;
  isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  padding: 148px clamp(32px, 6vw, 104px) 88px;
  color: #f4f0ff;
  background:
    radial-gradient(90% 70% at 100% 0%, rgba(96, 71, 239, .55), transparent 62%),
    linear-gradient(180deg, rgba(16, 16, 23, .5) 0%, rgba(16, 16, 23, .9) 45%, rgba(16, 16, 23, .96) 100%),
    var(--hero-photo, none) center / cover no-repeat,
    var(--u-night);
}
html body.u-auth .auth-context::after {
  content: ""; position: absolute; z-index: -1; inset: auto -20% -30% auto; width: 70%; aspect-ratio: 1;
  border-radius: 50%; background: radial-gradient(circle, rgba(60, 111, 245, .28), transparent 66%); filter: blur(10px);
}
html body.u-auth .auth-context small { color: #b6abff !important; }
html body.u-auth .auth-context h1 {
  max-width: 11em; margin: 0; color: #f7f4ff;
  font-size: clamp(42px, 4.8vw, 74px); font-weight: 600; line-height: .98; letter-spacing: -.055em;
}
html body.u-auth .auth-context h1 em { color: #cfc5ff; }
html body.u-auth .auth-context p { text-wrap: pretty; max-width: 30em; margin: 26px 0 0; color: rgba(244, 240, 255, .84) !important; font-size: 17px; line-height: 1.65; }
html body.u-auth .auth-context .trust-list { display: block !important; margin: 40px 0 0; padding: 0; list-style: none; max-width: 30em; }
html body.u-auth .auth-context .trust-list[hidden] { display: none !important; }
html body.u-auth .trust-list li {
  padding: 16px 0; border-top: 1px solid rgba(244, 240, 255, .14) !important;
  color: rgba(244, 240, 255, .86) !important; font-size: 15px; font-weight: 500; line-height: 1.5; letter-spacing: -.005em;
}
html body.u-auth .trust-list li:last-child { border-bottom: 1px solid rgba(244, 240, 255, .14); }
html body.u-auth .trust-list li::before { content: none !important; }
html body.u-auth .auth-panel {
  align-self: center; justify-self: center; width: min(480px, calc(100% - 48px)); max-width: none;
  margin: 116px 0 56px; padding: 34px;
  border: 1px solid var(--border); border-radius: 26px;
  background: var(--surface); box-shadow: var(--u-shadow-card);
}
html body.u-auth .auth-mode-tabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin: 0 0 30px;
  border: 0; border-radius: 14px; background: var(--surface-secondary);
}
html body.u-auth .auth-mode-tabs a {
  display: grid; place-items: center; min-height: 40px; padding: 0;
  border-radius: 10px; color: var(--text-muted); font: 650 14px/1 var(--sans); text-decoration: none;
  transition: background-color .2s, color .2s, box-shadow .2s;
}
html body.u-auth .auth-mode-tabs a::after { content: none !important; }
html body.u-auth .auth-mode-tabs a.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(21, 19, 30, .08), 0 4px 12px rgba(21, 19, 30, .06); }
html body.u-auth .auth-step h2 { margin: 0 0 8px; font-size: 26px; font-weight: 650; letter-spacing: -.04em; }
html body.u-auth .step-copy { margin: 0 0 24px; color: var(--text-muted); font-size: 14px; line-height: 1.6; }
html body.u-auth .auth-form { display: grid; gap: 18px; }
html body.u-auth .auth-form .button { width: 100%; }
html body.u-auth .form-row { display: flex; justify-content: flex-end; margin-top: -6px; }
html body.u-auth .form-row:has(> a[hidden]):has(> span:only-child) { display: none; }
html body.u-auth .form-status:empty { display: none; }
html body.u-auth .guest-divider { display: flex; align-items: center; gap: 14px; height: auto; color: var(--text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
html body.u-auth .guest-divider::before { position: static; flex: 1; height: 1px; border: 0; background: var(--border); content: ""; }
html body.u-auth .guest-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
html body.u-auth .guest-divider span { padding: 0; background: transparent !important; }
html body.u-auth .guest-note { margin: -6px 0 0; text-align: center; font-size: 12px; color: var(--text-muted); }
html body.u-auth .account-footer { position: relative; max-width: none; padding: 0 clamp(20px, 4vw, 48px) 30px; background: transparent; }

/* ───────────── 6. Exam choice ───────────── */
html body.choice-page .choice-main {
  display: block; width: min(1180px, calc(100% - 32px)); min-height: 0;
  margin: 0 auto; padding: clamp(56px, 10vh, 120px) 0 clamp(48px, 8vh, 96px);
}
html body.choice-page .choice-intro { max-width: 820px; margin: 0 0 clamp(36px, 6vh, 64px); animation: none; }
html body.choice-page .choice-intro h1 {
  max-width: 12em; margin: 0; font-size: clamp(42px, 6vw, 88px); font-weight: 600; line-height: .96; letter-spacing: -.058em; color: var(--text);
}
html body.choice-page .choice-account-note {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 14px;
  max-width: 560px; margin: 30px 0 0; padding: 0; border: 0;
}
html body.choice-page .choice-account-note span {
  padding: 5px 10px; border-radius: 99px; background: var(--u-accent-soft);
  color: var(--u-accent-text); font: 700 11px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase;
}
html body.choice-page .choice-account-note p { margin: 0; color: var(--text-muted); font-size: 15px; line-height: 1.6; }
html body.choice-page .choice-deck { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; animation: none; perspective: 1600px; }
html body.choice-page .exam-card { min-height: 320px; perspective: 1600px; border-radius: var(--u-r-xl); }
html body.choice-page .exam-card.unavailable { opacity: 1; }
html body.choice-page .exam-face {
  display: grid !important;
  grid-template-columns: 1fr auto !important; grid-template-rows: auto 1fr auto auto !important;
  grid-template-areas: "idx arrow" "name name" "desc desc" "meta meta";
  gap: 0 20px !important; align-items: start !important;
  min-height: 320px; padding: 30px !important;
  border: 1px solid var(--border) !important; border-radius: var(--u-r-xl) !important;
  box-shadow: var(--u-shadow-card);
}
html body.choice-page .exam-card:not(.unavailable) .exam-front {
  background:
    radial-gradient(110% 90% at 100% 0%, rgba(96, 71, 239, .5), transparent 60%),
    linear-gradient(165deg, var(--u-night-2), var(--u-night)) !important;
  border: 1px solid rgba(154, 140, 255, .28) !important;
  color: #f4f0ff !important;
}
html body.choice-page .exam-card:not(.unavailable) .exam-front .exam-name { color: #f4f0ff !important; }
html body.choice-page .exam-card:not(.unavailable) .exam-front .lx-inline-badge > * { background: rgba(244, 240, 255, .12) !important; color: #f4f0ff !important; border-color: rgba(244, 240, 255, .18) !important; }
html body.choice-page .exam-card:not(.unavailable):hover .exam-front { transform: none; border-color: rgba(154, 140, 255, .6) !important; box-shadow: 0 30px 80px -30px rgba(96, 71, 239, .6); }
html body.choice-page .exam-back {
  background: linear-gradient(135deg, #6047ef, #9c55e7) !important;
  border-color: transparent !important; color: #fff !important;
}
html body.choice-page .exam-card.unavailable .exam-front {
  background: var(--surface-secondary) !important; border: 1px dashed rgba(21, 19, 30, .22) !important; box-shadow: none;
  color: var(--text-muted);
}
html body.choice-page .exam-index { grid-area: idx; font: 750 11px/1 var(--sans); letter-spacing: .16em; color: #cfc5ff; }
html body.choice-page .exam-back .exam-index { color: rgba(255, 255, 255, .8); }
html body.choice-page .exam-card.unavailable .exam-index { color: var(--text-muted); }
html body.choice-page .exam-name {
  grid-area: name; align-self: end; margin: 0 0 14px;
  font-size: clamp(48px, 6vw, 84px); font-weight: 600; line-height: .92; letter-spacing: -.06em; color: inherit;
}
html body.choice-page .exam-name small { font-size: .3em; font-weight: 600; letter-spacing: .04em; opacity: .7; margin-left: .35em; }
html body.choice-page .exam-description { grid-area: desc; margin: 0 0 18px; max-width: 26em; font-size: 16px; line-height: 1.55; color: rgba(244, 240, 255, .74); }
html body.choice-page .exam-back .exam-description { color: rgba(255, 255, 255, .86); }
html body.choice-page .exam-card.unavailable .exam-description, html body.choice-page .exam-card.unavailable .exam-name { color: var(--text-muted) !important; }
html body.choice-page .exam-meta, html body.choice-page .click-go, html body.choice-page .lx-inline-badge { grid-area: meta; justify-self: start; align-self: end; }
html body.choice-page .click-go { font: 700 13px/1 var(--sans); letter-spacing: .02em; }
html body.choice-page .exam-arrow {
  position: static !important; inset: auto !important; margin: 0 !important; grid-area: arrow; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(244, 240, 255, .28); font-size: 20px; color: #f4f0ff !important;
  transition: background-color .25s, color .25s, transform .25s var(--u-ease);
}
html body.choice-page .exam-card:not(.unavailable):hover .exam-arrow { background: #f4f0ff; color: var(--u-night) !important; transform: translate(3px, -3px); }
html body.choice-page .exam-card.unavailable .exam-arrow { border-color: var(--border); color: var(--text-muted) !important; }
html body.choice-page .choice-footer {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 24px 0 40px; border-top: 1px solid var(--border);
  color: var(--text-muted); font-size: 13px;
}
html body.choice-page .choice-footer a { color: var(--text-muted); text-underline-offset: 3px; }
html body.choice-page .choice-footer a:hover { color: var(--text); }

/* ───────────── 7. Pricing ───────────── */
html body.pricing-body .pricing-shell { width: min(1180px, calc(100% - 32px)); max-width: none; margin: 0 auto; padding: clamp(52px, 9vh, 104px) 0 80px; }
html body.pricing-body .pricing-heading { max-width: 780px; }
html body.pricing-body .pricing-heading h1 { max-width: 12em; margin: 0; font-size: clamp(42px, 5.8vw, 82px); font-weight: 600; line-height: .98; letter-spacing: -.058em; }
html body.pricing-body .pricing-heading > p { max-width: 34em; margin: 26px 0 0; color: var(--text-muted); font-size: 18px; line-height: 1.65; }
html body.pricing-body .current-access {
  display: inline-flex; align-items: center; min-height: 40px; margin-top: 28px; padding: 0 16px;
  border: 1px solid var(--border); border-radius: 99px; background: var(--surface); color: var(--text); font: 600 13px/1 var(--sans);
}
html body.pricing-body .plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 52px; align-items: stretch; }
html body.pricing-body .plan-card {
  position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 0;
  padding: 30px; border: 1px solid var(--border); border-radius: var(--u-r-xl);
  background: var(--surface) !important; color: var(--text); box-shadow: var(--u-shadow-card) !important;
  transition: transform .3s var(--u-ease), box-shadow .3s var(--u-ease);
}
html body.pricing-body .plan-card:hover { transform: translateY(-4px); }
html body.pricing-body .plan-card.recommended {
  border-color: rgba(154, 140, 255, .4) !important; color: #f4f0ff !important;
  background:
    radial-gradient(120% 70% at 100% 0%, rgba(96, 71, 239, .5), transparent 62%),
    linear-gradient(165deg, var(--u-night-2), var(--u-night)) !important;
  box-shadow: 0 36px 90px -34px rgba(96, 71, 239, .7) !important;
}
html body.pricing-body .plan-card.recommended::before { content: none; }
html body.pricing-body .plan-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 30px; margin-bottom: 18px; }
html body.pricing-body .plan-top span { font: 750 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); }
html body.pricing-body .plan-card.recommended .plan-top span { color: #b6abff !important; }
html body.pricing-body .plan-top strong {
  padding: 6px 10px; border-radius: 99px; background: var(--u-accent-soft); color: var(--u-accent-text);
  font: 750 10px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase;
}
html body.pricing-body .plan-card.recommended .plan-top strong { background: var(--u-pro); color: var(--u-pro-ink); }
html body.pricing-body .plan-price-stack { display: grid; gap: 4px; }
html body.pricing-body .plan-reference-price { height: auto !important; margin: 0 !important; color: var(--text-muted) !important; font-size: 14px !important; }
html body.pricing-body .plan-price-stack { min-height: 0 !important; padding-top: 0 !important; }
html body.pricing-body .plan-card.recommended .plan-reference-price { color: rgba(244, 240, 255, .55) !important; }
html body.pricing-body .plan-price { margin: 0 !important; font-size: 58px !important; font-weight: 600; line-height: 1; letter-spacing: -.06em; color: inherit !important; font-variant-numeric: tabular-nums; line-height: 1 !important; }
html body.pricing-body .plan-price small { font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--text-muted); }
html body.pricing-body .plan-card.recommended .plan-price small { color: rgba(244, 240, 255, .6) !important; }
html body.pricing-body .plan-rate { margin: 0; color: var(--text-muted); font-size: 14px; }
html body.pricing-body .plan-card.recommended .plan-rate { color: rgba(244, 240, 255, .7) !important; }
html body.pricing-body .plan-saving {
  justify-self: start; margin: 8px 0 0; padding: 6px 10px; border: 0; border-radius: 99px;
  background: var(--success-soft); color: var(--success); font: 750 12px/1 var(--sans);
}
html body.pricing-body .plan-comparison { margin: 18px 0 26px; color: var(--text-muted); font-size: 15px; line-height: 1.5; }
html body.pricing-body .plan-card.recommended .plan-comparison { color: rgba(244, 240, 255, .8) !important; }
html body.pricing-body .plan-action { width: 100%; margin-top: auto; }
html body.pricing-body .plan-card.recommended .plan-action {
  background: var(--u-accent-lit) !important; border-color: var(--u-accent-lit) !important; color: #15131e !important;
}
html body.pricing-body .plan-card.recommended .plan-action:hover { background: #a89dff !important; }
html body.pricing-body .plan-card:not(.recommended) .plan-action {
  background: transparent !important; color: var(--text) !important; border-color: var(--border) !important; box-shadow: none !important;
}
html body.pricing-body .plan-card:not(.recommended) .plan-action:hover { background: var(--primary) !important; color: var(--on-primary) !important; border-color: var(--primary) !important; }
html body.pricing-body .pro-includes {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 40px clamp(32px, 6vw, 96px);
  margin-top: 88px; padding-top: 44px; border-top: 1px solid var(--border);
}
html body.pricing-body .pro-includes h2 { margin: 0; font-size: clamp(30px, 3.4vw, 46px); font-weight: 600; line-height: 1.05; letter-spacing: -.05em; }
html body.pricing-body .pro-includes ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 32px; margin: 0; padding: 0; list-style: none; }
html body.pricing-body .pro-includes li { position: relative; padding-left: 34px; color: var(--text); font-size: 15px; font-weight: 500; line-height: 1.45; }
html body.pricing-body .pro-includes li::before {
  content: ""; position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%;
  background: var(--u-accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236047ef' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 12px no-repeat !important;
}
html body.pricing-body .pricing-note { max-width: 44em; margin: 48px 0 0; color: var(--text-muted); font-size: 13px; line-height: 1.65; }
html body.pricing-body .pricing-status:empty { display: none; }

/* ───────────── 8. Legal pages ───────────── */
html body.u-legal .legal-main { width: min(820px, calc(100% - 32px)); max-width: none; margin: 0 auto; padding: clamp(48px, 8vh, 96px) 0 96px; }
html body.u-legal .lx-crumb { display: flex; align-items: center; gap: 6px; margin: 0 0 28px; font-size: 13px; color: var(--text-muted); }
html body.u-legal .lx-crumb a { color: var(--text-muted); text-underline-offset: 3px; }
html body.u-legal .lx-crumb svg { width: 14px; height: 14px; }
html body.u-legal .legal-heading { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 32px; margin: 0 0 40px; padding: 0 0 32px; border-bottom: 1px solid var(--border); }
html body.u-legal .legal-heading h1 { margin: 0; font-size: clamp(40px, 5.4vw, 68px); font-weight: 600; line-height: 1; letter-spacing: -.055em; }
html body.u-legal .legal-heading > p { margin: 0; color: var(--text-muted); font-size: 13px; }
html body.u-legal .legal-note { margin: 0 0 40px; padding: 22px 24px; border: 1px solid rgba(var(--primary-rgb), .25); border-radius: var(--u-r-lg); background: var(--u-accent-soft); }
html body.u-legal .legal-note p { margin: 0; color: var(--text); font-size: 15px; line-height: 1.7; }
html body.u-legal .legal-content section { margin: 0 0 40px; }
html body.u-legal .legal-content h2 { margin: 0 0 14px; font-size: 24px; font-weight: 650; letter-spacing: -.04em; }
html body.u-legal .legal-content h3 { margin: 22px 0 8px; font-size: 16px; font-weight: 650; letter-spacing: -.02em; }
html body.u-legal .legal-content :is(p, li) { color: var(--text-muted); font-size: 16px; line-height: 1.75; }
html body.u-legal .legal-content li { margin: 6px 0; padding-left: 4px; }
html body.u-legal .legal-content a { color: var(--u-accent-text); text-underline-offset: 3px; }
html body.u-legal .legal-content strong { color: var(--text); }

/* ───────────── 9. Reveal on scroll (non-landing pages; the landing has its own choreography) ───────────── */
html.u-js [data-u-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--u-ease), transform .7s var(--u-ease); transition-delay: var(--u-d, 0ms); }
html.u-js [data-u-reveal].is-in { opacity: 1; transform: none; }

/* ───────────── 10. Responsive ───────────── */
@media (max-width: 1024px) {
  html body.pricing-body .plan-price { font-size: 48px; }
  html body.pricing-body .pro-includes { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  html body.u-auth .auth-shell { grid-template-columns: 1fr; margin-top: -80px; background: none; }
  html body.u-auth .auth-context { position: relative !important; height: auto; min-height: 0; padding: 132px 24px 76px; }
  html body.u-auth .auth-context h1 { max-width: 12em; font-size: clamp(38px, 9vw, 56px); }
  html body.u-auth .auth-context p { margin-top: 18px; font-size: 16px; }
  html body.u-auth .trust-list { margin-top: 26px; }
  html body.u-auth .auth-panel { position: relative; z-index: 2; width: calc(100% - 32px); margin: -36px auto 40px; padding: 26px 22px; }
  html body.choice-page .choice-deck { grid-template-columns: 1fr; }
  html body.choice-page .exam-card, html body.choice-page .exam-face { min-height: 264px; }
  html body.pricing-body .plan-grid { grid-template-columns: 1fr; max-width: none; }
  html body.pricing-body .plan-card:hover { transform: none; }
}
@media (max-width: 640px) {
  html body :is(.account-nav, .choice-nav, .pricing-nav, .legal-nav) { top: 10px !important; width: calc(100% - 20px) !important; min-height: 58px !important; margin-top: 10px !important; padding: 6px 8px 6px 12px !important; }
  html body :is(.account-brand, .choice-brand, .legal-brand) { width: 120px !important; height: 42px !important; }
  html body :is(.nav-return, .guide-link, #choiceLogin) { display: none; }
  html body :is(.theme-toggle, .lx-tools button) { width: 40px; height: 40px; min-height: 40px; }
  html body.pricing-body .pro-includes ul { grid-template-columns: 1fr; }
  html body.pricing-body .plan-price { font-size: 44px; }
  html body.u-legal .legal-content :is(p, li) { font-size: 15px; }
  html body.choice-page .exam-face { padding: 24px !important; }
}

/* ───────────── 11. Motion preferences ───────────── */
@media (prefers-reduced-motion: reduce) {
  html.u-js [data-u-reveal] { opacity: 1; transform: none; transition: none; }
  html body :is(.button, .btn, .plan-action, .plan-card, .exam-arrow) { transition: none !important; }
}

/* ───────────── 12. Practice workspace (toefl.html): the app on the landing's rhythm ─────────────
   Same floating pill as every other page, one big headline with the serif accent, pill controls,
   generous vertical spacing, and a staged entrance. The header and main become transparent wrappers
   (display: contents) so the pieces can be ordered and spaced like the landing's scenes. */
html body.u-workspace {
  --u-wrap: min(1180px, calc(100% - 32px));
  display: flex; flex-direction: column; align-items: stretch;
  font-family: var(--sans);
}
html body.u-workspace .topbar { display: contents !important; }
html body.u-workspace .app-main:not([hidden]) { display: contents !important; }
html body.u-workspace .topbar-inner { order: 0; }
html body.u-workspace .toefl-modebar { order: 1; }
html body.u-workspace #workspaceHead { order: 2; }
html body.u-workspace .mock-test-main:not([hidden]) { order: 2; }
html body.u-workspace .writing-subnav { order: 3; }
html body.u-workspace .progress-line { order: 4; }
html body.u-workspace .question-surface { order: 5; }
/* each task draws its own inner card; inside the surface they become plain content so there is one frame, not two */
html body.u-workspace .question-surface :is(.cloze-sheet, .exam-sheet, .listening-question) { border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
html body.u-workspace .question-surface :is(.cloze-sheet, .exam-sheet) { padding: 0 !important; }
html body.u-workspace .question-surface .listening-question { padding: 12px 0 0 !important; }
html body.u-workspace .question-controls { order: 6; }
html body.u-workspace .site-footer { order: 9; margin-top: auto; }

/* pill nav */
html body.u-workspace .topbar-inner {
  position: sticky !important; top: 16px; z-index: 120;
  display: flex !important; align-items: center; gap: 8px;
  width: var(--u-wrap) !important; max-width: none !important; min-height: 64px !important;
  margin: 16px auto 0 !important; padding: 8px 10px 8px 18px;
  border: 1px solid var(--u-nav-line); border-radius: 18px;
  background: var(--u-nav-bg); color: var(--u-nav-ink);
  -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: var(--u-shadow-float);
}
html body.u-workspace .topbar-inner > .brand { width: 148px !important; height: 48px !important; flex: 0 0 auto; }
html body.u-workspace .exam-tabs { display: flex; gap: 2px; margin: 0 auto; padding: 0; border: 0; background: none; }
html body.u-workspace .exam-tab {
  min-height: 40px; padding: 0 16px; border: 0 !important; border-radius: var(--u-r);
  background: transparent !important; color: var(--u-nav-ink) !important;
  font: 600 13px/1 var(--sans); letter-spacing: -.005em; opacity: .78; box-shadow: none !important;
  transition: background-color .18s, opacity .18s, color .18s;
}
html body.u-workspace .exam-tab::after { content: none !important; }
html body.u-workspace .exam-tab:hover { background: var(--u-hover) !important; opacity: 1; }
html body.u-workspace .exam-tab.active { background: var(--u-accent-soft) !important; color: var(--u-accent-text) !important; opacity: 1; }
html body.u-workspace .header-status { display: flex; flex-direction: column; align-items: flex-end; margin: 0 6px 0 0; color: var(--text-muted); font-size: 11px; line-height: 1.3; text-align: right; }
html body.u-workspace .header-status strong { color: var(--text); font-size: 13px; font-weight: 650; }
html body.u-workspace .auth-actions { display: flex; align-items: center; gap: 6px; margin: 0; }
html body.u-workspace .auth-actions :is(.auth-button, .pro-nav-action) {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 42px; padding: 0 16px; border-radius: var(--u-r); font: 650 13px/1 var(--sans); letter-spacing: -.005em;
}
html body.u-workspace .auth-actions .auth-button:not(.signup) { border: 0 !important; background: transparent !important; color: var(--u-nav-ink) !important; box-shadow: none !important; }
html body.u-workspace .auth-actions .auth-button:not(.signup):hover { background: var(--u-hover) !important; }
html body.u-workspace .auth-actions .auth-button[data-auth-action="login"] {
  background: var(--u-login-bg) !important; color: var(--u-login-ink) !important;
  border: 1.5px solid var(--u-login-line) !important; font-weight: 700 !important;
}
html body.u-workspace .auth-actions .auth-button[data-auth-action="login"]:hover { background: var(--u-login-bg-hover) !important; }
html body.u-workspace .auth-actions .auth-button.signup { border: 0 !important; background: var(--primary) !important; color: var(--on-primary) !important; box-shadow: none !important; }
html body.u-workspace .auth-actions .auth-button.signup:hover { background: var(--primary-hover) !important; }

html body.u-workspace .topbar-inner :is(.exam-tab, .auth-button, .pro-nav-action, .header-status, .header-status *) { white-space: nowrap; }
/* TOEFL / mode row: hairline label left, segmented switch right */
html body.u-workspace .toefl-modebar { background: transparent !important; border: 0 !important; padding: 0; }
html body.u-workspace .toefl-modebar-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: var(--u-wrap); max-width: none; min-height: 0; margin: clamp(18px, 3vh, 28px) auto 0;
}
html body.u-workspace .toefl-modebar-inner > strong { margin: 0; font: 750 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); }
html body.u-workspace :is(.workspace-head, .mock-test-head) .eyebrow {
  display: inline-flex; align-items: center; gap: 12px; margin: 0;
  font: 750 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--u-accent-text);
}
html body.u-workspace :is(.workspace-head, .mock-test-head) .eyebrow::before { content: ""; width: 26px; height: 1px; background: currentColor; opacity: .7; }
html body.u-workspace .toefl-modebar nav { display: inline-grid; grid-auto-flow: column; gap: 4px; padding: 4px; border: 0; border-radius: 14px; background: var(--surface-secondary); }
html body.u-workspace .toefl-modebar nav button {
  display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 16px;
  border: 0 !important; border-radius: 10px; background: transparent !important; box-shadow: none;
  color: var(--text-muted); font: 650 13px/1 var(--sans);
  transition: background-color .2s, color .2s, box-shadow .2s;
}
html body.u-workspace .toefl-modebar nav button::after { content: none !important; }
html body.u-workspace .toefl-modebar nav button[aria-pressed="true"] { background: var(--surface) !important; color: var(--text); box-shadow: 0 1px 2px rgba(21, 19, 30, .08), 0 4px 12px rgba(21, 19, 30, .06); }

/* headline block */
html body.u-workspace #workspaceHead { width: var(--u-wrap); max-width: none; margin: 18px auto 0; padding: 0; }
html body.u-workspace .workspace-head { display: block; margin: 0; padding: 0; border: 0; }
html body.u-workspace :is(.workspace-head, .mock-test-head) h1 {
  max-width: 13em; margin: 22px 0 0; font-size: clamp(38px, 5.2vw, 76px); font-weight: 600; line-height: .98; letter-spacing: -.055em; text-wrap: balance; color: var(--text);
}
html body.u-workspace .workspace-head .section-description + * { margin-top: 14px; }
html body.u-workspace :is(.workspace-head .section-description, .mock-test-head > p:not(.eyebrow)) {
  max-width: 34em; margin: 22px 0 0; color: var(--text-muted); font-size: 17px; line-height: 1.65; text-wrap: pretty;
}
/* The question is the point of this screen, so the task title is a compact heading, not a poster: the first question
   shows under the task tabs on a laptop screen without scrolling. */
html body.u-workspace .workspace-head h1 { max-width: none; margin: 10px 0 0; font-size: clamp(26px, 2.4vw, 34px); line-height: 1.08; letter-spacing: -.04em; }
html body.u-workspace .workspace-head .section-description { max-width: 52em; margin: 8px 0 0; font-size: 15px; line-height: 1.5; }
html body.u-workspace .mock-test-main:not([hidden]) { display: block; width: var(--u-wrap); max-width: none; margin: 28px auto 0; padding: 0; }
html body.u-workspace .mock-test-head { display: block; margin: 0; padding: 0; border: 0; }
html body.u-workspace .mock-test-head h1 { margin-top: 22px; }
html body.u-workspace .mock-test-list { margin-top: 40px; }

/* task tabs: the same pill controls as the landing's question reel */
html body.u-workspace .writing-subnav { background: transparent !important; border: 0 !important; padding: 0 !important; }
html body.u-workspace .writing-subnav[hidden] { display: none !important; }
html body.u-workspace .writing-subnav-inner { width: var(--u-wrap); max-width: none; margin: 18px auto 0; }
html body.u-workspace .section-tabs { display: flex !important; flex-wrap: wrap; gap: 8px; width: auto; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible; }
html body.u-workspace .section-tab {
  display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto;
  min-height: 44px; padding: 0 8px 0 18px; border: 1px solid var(--border) !important; border-radius: 999px !important;
  background: var(--surface) !important; color: var(--text-muted) !important; box-shadow: none !important;
  font: 600 13.5px/1 var(--sans); letter-spacing: -.005em; text-align: left; white-space: nowrap;
  transition: background-color .2s, border-color .2s, color .2s;
}
html body.u-workspace .section-tab:hover { color: var(--text) !important; border-color: color-mix(in srgb, var(--primary) 45%, var(--border)) !important; }
html body.u-workspace .section-tab.active { background: var(--primary) !important; border-color: var(--primary) !important; color: var(--on-primary) !important; }
html body.u-workspace .section-tab .tab-count { position: static !important; transform: none !important; inset: auto !important; display: inline-grid; place-items: center; min-width: 32px; height: 28px; padding: 0 9px; border-radius: 999px; background: var(--surface-secondary) !important; color: var(--text-muted) !important; font-size: 11px; font-weight: 700; }
html body.u-workspace .section-tab.active .tab-count { background: color-mix(in srgb, var(--on-primary) 18%, transparent) !important; color: var(--on-primary) !important; }

/* progress + surface + controls + footer */
html body.u-workspace .progress-line { width: var(--u-wrap); max-width: none; height: 3px; margin: 18px auto 0; border-radius: 999px; background: var(--border); overflow: hidden; }
html body.u-workspace .progress-line span { background: var(--primary) !important; border-radius: inherit; }
html body.u-workspace .question-surface {
  width: var(--u-wrap); max-width: none; margin: 18px auto 0; padding: clamp(16px, 2.4vw, 36px);
  border: 1px solid var(--border); border-radius: var(--u-r-xl); background: var(--surface); box-shadow: var(--u-shadow-card);
}
html body.u-workspace .question-controls {
  display: flex; align-items: center; gap: 14px; width: var(--u-wrap); max-width: none; margin: 24px auto 0; padding: 20px 0 0;
  border: 0; border-top: 1px solid var(--border); background: transparent;
}
html body.u-workspace .question-controls .control-center { margin: 0 auto 0 0; color: var(--text-muted); font: 650 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
html body.u-workspace .question-controls .control-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
html body.u-workspace .question-controls .icon-button { flex: 0 0 auto; width: 48px; min-width: 48px; padding: 0; }
html body.u-workspace .site-footer {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px;
  width: var(--u-wrap); max-width: none; margin: 80px auto 0; padding: 28px 0 44px;
  border: 0; border-top: 1px solid var(--border); background: transparent; color: var(--text-muted); font-size: 12px; line-height: 1.6;
}
html body.u-workspace .site-footer a { color: var(--text-muted); text-underline-offset: 3px; }
html body.u-workspace .site-footer a:hover { color: var(--text); }

/* staged entrance: each block rises in once on load (containers persist, so task changes don't replay it) */
@keyframes u-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
html body.u-workspace :is(.toefl-modebar-inner, #workspaceHead, .mock-test-main, .writing-subnav-inner, .progress-line, .question-surface, .question-controls) { animation: u-rise .7s var(--u-ease) both; }
html body.u-workspace #workspaceHead, html body.u-workspace .mock-test-main { animation-delay: .08s; }
html body.u-workspace .writing-subnav-inner { animation-delay: .16s; }
html body.u-workspace .progress-line { animation-delay: .22s; }
html body.u-workspace .question-surface { animation-delay: .28s; }
html body.u-workspace .question-controls { animation-delay: .36s; }

@media (max-width: 1100px) { html body.u-workspace .header-status { display: none; } }
@media (max-width: 980px) {
  html body.u-workspace .topbar-inner { position: static !important; flex-wrap: wrap; width: calc(100% - 20px) !important; margin-top: 10px !important; padding: 8px 10px 8px 14px; }
  html body.u-workspace .topbar-inner > .brand { margin-right: auto; }
  html body.u-workspace .exam-tabs { order: 5; flex: 1 1 100%; justify-content: space-between; margin: 2px 0 0; }
  html body.u-workspace .exam-tab { flex: 1 1 0; justify-content: center; padding: 0 8px; }
}
@media (max-width: 640px) {
  html body.u-workspace .toefl-modebar-inner { margin-top: 22px; }
  html body.u-workspace .workspace-head h1 { font-size: 26px; }
  html body.u-workspace .workspace-head .section-description { font-size: 14px; }
  html body.u-workspace .section-tabs { flex-wrap: nowrap; overflow-x: auto; margin-inline: -16px; padding: 0 16px 4px !important; scrollbar-width: none; }
  html body.u-workspace .section-tabs::-webkit-scrollbar { display: none; }
  html body.u-workspace .auth-actions :is(.pro-nav-action, .auth-button:not(.signup)) { display: none !important; }
  html body.u-workspace .question-controls { flex-wrap: wrap; gap: 12px; }
  html body.u-workspace .question-controls .control-center { order: 1; flex: 1 1 0; min-width: 0; margin: 0; }
  html body.u-workspace .question-controls .icon-button { order: 0; }
  html body.u-workspace .question-controls .control-right { order: 2; flex: 1 1 100%; flex-wrap: wrap; margin: 0; }
  html body.u-workspace .question-controls .control-right > * { flex: 1 1 auto; }
  html body.u-workspace .site-footer { margin-top: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  html body.u-workspace :is(.toefl-modebar-inner, #workspaceHead, .mock-test-main, .writing-subnav-inner, .progress-line, .question-surface, .question-controls) { animation: none !important; }
}

:root{--hero-photo:url("hero-landscape.webp?v=20260930-1")}
@media (max-width:700px){:root{--hero-photo:url("hero-portrait.webp?v=20260930-1")}}