/* iTTypingTest public design system */
:root {
  --itt-primary: #6558f5;
  --itt-primary-dark: #4d41d8;
  --itt-primary-text: var(--itt-primary);
  --itt-primary-text-hover: var(--itt-primary-dark);
  --itt-primary-soft: #eeecff;
  --itt-success: #16a673;
  --itt-success-soft: #e6f8f1;
  --itt-danger: #e34d59;
  --itt-danger-soft: #fff0f1;
  --itt-warning: #e9982d;
  --itt-bg: #f7f8fc;
  --itt-surface: #ffffff;
  --itt-surface-2: #f1f3f9;
  --itt-surface-3: #e9ecf5;
  --itt-text: #17192d;
  --itt-heading: #111326;
  --itt-muted: #656a7d;
  --itt-muted-2: #8c90a0;
  --itt-border: #e2e5ee;
  --itt-border-strong: #cfd3e0;
  --itt-header: rgba(255, 255, 255, 0.9);
  --itt-code-bg: #17182b;
  --itt-shadow-sm: 0 1px 2px rgba(22, 24, 45, 0.04), 0 4px 16px rgba(22, 24, 45, 0.05);
  --itt-shadow: 0 18px 50px rgba(28, 30, 58, 0.1), 0 3px 10px rgba(28, 30, 58, 0.05);
  --itt-shadow-lg: 0 32px 90px rgba(25, 24, 58, 0.16), 0 8px 24px rgba(25, 24, 58, 0.08);
  --itt-radius-sm: 9px;
  --itt-radius: 14px;
  --itt-radius-lg: 22px;
  --itt-radius-xl: 30px;
  --itt-container: 1180px;
  --itt-font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --itt-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --itt-bg: #10111c;
  --itt-surface: #181a27;
  --itt-surface-2: #202230;
  --itt-surface-3: #292c3c;
  --itt-text: #e9eaf2;
  --itt-heading: #f8f8fb;
  --itt-muted: #a4a8ba;
  --itt-muted-2: #b3b7c7;
  --itt-danger: #ff8791;
  --itt-border: #303342;
  --itt-border-strong: #404455;
  --itt-header: rgba(16, 17, 28, 0.9);
  --itt-primary-text: #aaa2ff;
  --itt-primary-text-hover: #c9c5ff;
  --itt-primary-soft: rgba(101, 88, 245, 0.17);
  --itt-success-soft: rgba(22, 166, 115, 0.14);
  --itt-danger-soft: rgba(227, 77, 89, 0.14);
  --itt-shadow-sm: 0 4px 18px rgba(0, 0, 0, 0.15);
  --itt-shadow: 0 18px 55px rgba(0, 0, 0, 0.28);
  --itt-shadow-lg: 0 32px 90px rgba(0, 0, 0, 0.45);
  color-scheme: dark;
}

:root[data-theme="dark"] .itt-footer-bottom p { color: #a4a8ba; }

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-width: 320px;
  background: var(--itt-bg);
  color: var(--itt-text);
  font-family: var(--itt-font);
  font-size: 16px;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
body.itt-menu-is-open { overflow: hidden; }
button,
input,
select,
textarea { color: inherit; font: inherit; }
button,
select { cursor: pointer; }
button { border: 0; }
a { color: var(--itt-primary-text); text-decoration: none; }
a:hover { color: var(--itt-primary-text-hover); }
img { display: block; max-width: 100%; height: auto; }
svg { flex: 0 0 auto; }
figure { margin: 0; }
h1,
h2,
h3,
h4,
p { margin-top: 0; }
h1,
h2,
h3,
h4 { color: var(--itt-heading); font-weight: 760; line-height: 1.16; letter-spacing: -0.025em; }
[hidden] { display: none !important; }
::selection { background: rgba(101, 88, 245, 0.22); color: var(--itt-heading); }
:focus-visible { outline: 3px solid rgba(101, 88, 245, 0.35); outline-offset: 3px; }

.itt-site-shell { min-height: 100vh; overflow: clip; }
.itt-main { min-height: 60vh; }
.itt-container { width: min(calc(100% - 40px), var(--itt-container)); margin-inline: auto; }
.itt-section { padding: 96px 0; }
.itt-content-layout { padding-top: 48px; padding-bottom: 96px; }
.screen-reader-text,
.itt-skip-link:not(:focus) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.itt-skip-link {
  position: fixed;
  z-index: 10000;
  top: 12px;
  left: 12px;
  padding: 10px 16px;
  border-radius: var(--itt-radius-sm);
  background: var(--itt-heading);
  color: var(--itt-surface);
  font-weight: 700;
}

/* Header */
.itt-site-header {
  position: sticky;
  z-index: 1000;
  top: 0;
  height: 76px;
  border-bottom: 1px solid color-mix(in srgb, var(--itt-border) 80%, transparent);
  background: var(--itt-header);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
}
.admin-bar .itt-site-header { top: 32px; }
.itt-header-inner { display: flex; align-items: center; justify-content: space-between; height: 100%; gap: 28px; }
.itt-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--itt-heading); white-space: nowrap; }
.itt-brand:hover { color: var(--itt-heading); }
.itt-brand-mark {
  display: grid;
  width: 39px;
  height: 39px;
  place-items: center;
  border-radius: 11px;
  background: linear-gradient(145deg, var(--itt-primary), #7d70ff);
  box-shadow: 0 7px 18px rgba(101, 88, 245, 0.28);
  color: #fff;
}
.itt-brand-name { font-size: 19px; font-weight: 720; letter-spacing: -0.035em; }
.itt-brand-name strong { color: var(--itt-primary-text); }
.itt-brand-name span { color: var(--itt-muted-2); font-size: 0.69em; font-weight: 650; }
.itt-brand .custom-logo-link { display: block; }
.itt-brand .custom-logo { max-width: 190px; max-height: 48px; width: auto; }
.itt-primary-nav { margin-left: auto; }
.itt-nav-list { display: flex; align-items: center; gap: 3px; padding: 0; margin: 0; list-style: none; }
.itt-nav-list a {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 8px 13px;
  border-radius: 10px;
  color: var(--itt-text);
  font-size: 14px;
  font-weight: 620;
  transition: background 160ms ease, color 160ms ease;
}
.itt-nav-list a:hover,
.itt-nav-list .current-menu-item > a,
.itt-nav-list .current_page_item > a { background: var(--itt-primary-soft); color: var(--itt-primary-text); }
.itt-nav-list .menu-item-has-children { position: relative; }
.itt-nav-list .sub-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 220px;
  padding: 8px;
  margin: 0;
  border: 1px solid var(--itt-border);
  border-radius: var(--itt-radius);
  background: var(--itt-surface);
  box-shadow: var(--itt-shadow);
  list-style: none;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-5px);
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
}
.itt-nav-list li:hover > .sub-menu,
.itt-nav-list li:focus-within > .sub-menu { visibility: visible; opacity: 1; transform: translateY(0); }
.itt-header-actions { display: flex; align-items: center; gap: 7px; }
.itt-account-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 7px 11px;
  border-radius: 10px;
  color: var(--itt-text);
  font-size: 13px;
  font-weight: 650;
}
.itt-account-link:hover { background: var(--itt-surface-2); color: var(--itt-primary-text); }
.itt-register-link {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 7px 12px;
  border: 1px solid color-mix(in srgb, var(--itt-primary) 34%, var(--itt-border));
  border-radius: 10px;
  background: var(--itt-primary-soft);
  color: var(--itt-primary-text);
  font-size: 12px;
  font-weight: 720;
  white-space: nowrap;
}
.itt-register-link:hover { border-color: var(--itt-primary); color: var(--itt-primary-text-hover); }
.itt-icon-button {
  display: inline-grid;
  width: 42px;
  height: 42px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--itt-border);
  border-radius: 11px;
  background: var(--itt-surface);
  color: var(--itt-text);
  box-shadow: 0 1px 2px rgba(20, 20, 40, 0.03);
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}
.itt-icon-button:hover { border-color: var(--itt-border-strong); background: var(--itt-surface-2); color: var(--itt-primary-text); }
.itt-icon-button:active { transform: translateY(1px); }
.itt-theme-dark,
:root[data-theme="dark"] .itt-theme-light { display: none; }
:root[data-theme="dark"] .itt-theme-dark { display: inline-flex; }
.itt-menu-toggle { display: none; }
.itt-menu-close { display: none; }
.itt-menu-toggle[aria-expanded="true"] .itt-menu-open { display: none; }
.itt-menu-toggle[aria-expanded="true"] .itt-menu-close { display: inline-flex; }

/* Shared controls */
.itt-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 46px;
  padding: 11px 20px;
  border: 1px solid var(--itt-primary);
  border-radius: 11px;
  background: var(--itt-primary);
  box-shadow: 0 7px 18px rgba(101, 88, 245, 0.21);
  color: #fff;
  font-size: 14px;
  font-weight: 720;
  line-height: 1.2;
  text-align: center;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.itt-button:hover { background: var(--itt-primary-dark); border-color: var(--itt-primary-dark); box-shadow: 0 9px 24px rgba(101, 88, 245, 0.3); color: #fff; transform: translateY(-1px); }
.itt-button:active { transform: translateY(1px); }
.itt-button:disabled { cursor: not-allowed; opacity: 0.62; transform: none; }
.itt-button-large { min-height: 52px; padding: 14px 23px; border-radius: 13px; font-size: 15px; }
.itt-button-small { min-height: 38px; padding: 8px 14px; font-size: 13px; }
.itt-button-secondary { border-color: var(--itt-border-strong); background: var(--itt-surface); box-shadow: none; color: var(--itt-heading); }
.itt-button-secondary:hover { border-color: var(--itt-primary); background: var(--itt-primary-soft); color: var(--itt-primary-text); box-shadow: none; }
.itt-button-ghost { border-color: transparent; background: transparent; box-shadow: none; color: var(--itt-text); }
.itt-button-ghost:hover { border-color: var(--itt-border); background: var(--itt-surface-2); box-shadow: none; color: var(--itt-heading); }
.itt-button-dark { border-color: #202237; background: #202237; box-shadow: none; }
.itt-button-dark:hover { border-color: #111324; background: #111324; }
.itt-text-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 6px 9px;
  background: transparent;
  color: var(--itt-muted);
  font-size: 13px;
  font-weight: 650;
}
.itt-text-button:hover { color: var(--itt-primary-text); }
.itt-danger-link:hover { color: var(--itt-danger); }
.itt-text-link { display: inline-flex; align-items: center; gap: 8px; color: var(--itt-primary-text); font-size: 14px; font-weight: 720; }
.itt-text-link:hover { gap: 11px; }
.itt-inline-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.itt-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 16px;
  color: var(--itt-primary-text);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.095em;
  line-height: 1.4;
  text-transform: uppercase;
}
.itt-eyebrow > span { display: inline-grid; place-items: center; }
.itt-field { display: grid; gap: 7px; }
.itt-field > span,
.itt-select-field > span,
.itt-input-label { color: var(--itt-text); font-size: 12px; font-weight: 720; }
.itt-field input,
.itt-field textarea,
.itt-field select,
.itt-select-field select,
.itt-search-form input {
  width: 100%;
  min-height: 46px;
  padding: 11px 13px;
  border: 1px solid var(--itt-border-strong);
  border-radius: 10px;
  outline: none;
  background: var(--itt-surface);
  color: var(--itt-heading);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.itt-field textarea { resize: vertical; }
.itt-field input:focus,
.itt-field textarea:focus,
.itt-field select:focus,
.itt-select-field select:focus,
.itt-search-form input:focus { border-color: var(--itt-primary); box-shadow: 0 0 0 3px rgba(101, 88, 245, 0.13); }
.itt-select-field { display: grid; min-width: 185px; gap: 7px; }
.itt-select-field select { min-height: 42px; padding: 8px 34px 8px 12px; font-size: 13px; font-weight: 620; }
.itt-check { display: flex; align-items: center; gap: 9px; color: var(--itt-muted); font-size: 13px; }
.itt-check input { width: 17px; height: 17px; accent-color: var(--itt-primary-text); }
.itt-segmented-control { display: inline-flex; align-items: center; gap: 3px; padding: 4px; border: 1px solid var(--itt-border); border-radius: 11px; background: var(--itt-surface-2); }
.itt-segmented-control button {
  min-height: 34px;
  padding: 6px 12px;
  border-radius: 8px;
  background: transparent;
  color: var(--itt-muted);
  font-size: 12px;
  font-weight: 720;
  white-space: nowrap;
}
.itt-segmented-control button:hover { color: var(--itt-heading); }
.itt-segmented-control button[aria-pressed="true"],
.itt-segmented-control button.is-active { background: var(--itt-surface); box-shadow: 0 2px 7px rgba(24, 25, 45, 0.08); color: var(--itt-primary-text); }
.itt-setting-label { color: var(--itt-text); font-size: 12px; font-weight: 720; }

/* Homepage hero */
.itt-hero {
  position: relative;
  overflow: hidden;
  padding: 94px 0 140px;
  background:
    radial-gradient(circle at 8% 20%, rgba(101, 88, 245, 0.1), transparent 30%),
    radial-gradient(circle at 90% 38%, rgba(22, 166, 115, 0.08), transparent 28%),
    linear-gradient(180deg, var(--itt-surface) 0%, var(--itt-bg) 100%);
}
.itt-hero::before {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(101, 88, 245, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(101, 88, 245, 0.035) 1px, transparent 1px);
  background-size: 48px 48px;
  content: "";
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 85%);
  mask-image: linear-gradient(to bottom, #000, transparent 85%);
  pointer-events: none;
}
.itt-hero-glow { position: absolute; top: -170px; left: 45%; width: 430px; height: 430px; border-radius: 50%; background: rgba(101, 88, 245, 0.09); filter: blur(90px); }
.itt-hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(430px, 0.94fr); align-items: center; gap: 78px; }
.itt-hero-copy h1 { max-width: 720px; margin-bottom: 24px; font-size: clamp(44px, 5.2vw, 72px); letter-spacing: -0.062em; }
.itt-hero-copy h1 em { background: linear-gradient(100deg, var(--itt-primary), #8c63ee 55%, #21a978); -webkit-background-clip: text; background-clip: text; color: transparent; font-style: normal; }
.itt-hero-lead { max-width: 650px; margin-bottom: 32px; color: var(--itt-muted); font-size: 18px; line-height: 1.75; }
.itt-hero-actions { display: flex; flex-wrap: wrap; gap: 11px; }
.itt-hero-proof { display: flex; flex-wrap: wrap; gap: 20px; padding: 0; margin: 25px 0 0; list-style: none; }
.itt-hero-proof li { display: flex; align-items: center; gap: 6px; color: var(--itt-muted); font-size: 12px; font-weight: 620; }
.itt-hero-proof .itt-icon { color: var(--itt-success); }
.itt-hero-visual { position: relative; }
.itt-hero-visual::before,
.itt-hero-visual::after { position: absolute; border-radius: 50%; content: ""; filter: blur(1px); }
.itt-hero-visual::before { top: -38px; right: -18px; width: 95px; height: 95px; background: linear-gradient(135deg, rgba(101, 88, 245, 0.25), rgba(101, 88, 245, 0.02)); }
.itt-hero-visual::after { bottom: -28px; left: -30px; width: 70px; height: 70px; background: linear-gradient(135deg, rgba(22, 166, 115, 0.26), rgba(22, 166, 115, 0.02)); }
.itt-code-window { position: relative; z-index: 1; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 22px; background: var(--itt-code-bg); box-shadow: 0 34px 70px rgba(24, 21, 61, 0.28), 0 0 0 8px rgba(101, 88, 245, 0.04); transform: rotate(1.1deg); }
.itt-window-bar { display: flex; align-items: center; gap: 7px; height: 49px; padding: 0 17px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.025); }
.itt-window-bar > span { width: 9px; height: 9px; border-radius: 50%; background: #ef6a68; }
.itt-window-bar > span:nth-child(2) { background: #e9be55; }
.itt-window-bar > span:nth-child(3) { background: #62c969; }
.itt-window-bar b { margin-left: 8px; color: #7f829b; font-family: var(--itt-mono); font-size: 10px; font-weight: 500; }
.itt-code-window pre { min-height: 245px; padding: 39px 31px 28px; margin: 0; overflow: hidden; color: #d8daeb; font: 13px/2 var(--itt-mono); }
.itt-code-muted { color: #555a72; }
.itt-code-purple { color: #b69cff; }
.itt-code-green { color: #87dfb7; }
.itt-code-blue { color: #77b8ff; }
.itt-mini-result { display: flex; align-items: center; gap: 12px; padding: 17px 21px; border-top: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.045); color: #e9eafb; }
.itt-mini-result > span { display: grid; width: 39px; height: 39px; place-items: center; border-radius: 10px; background: rgba(101, 88, 245, 0.2); color: #a99fff; }
.itt-mini-result div { display: grid; }
.itt-mini-result b { font-size: 14px; }
.itt-mini-result small { color: #70d4a8; font-size: 10px; }
.itt-mini-result > strong { margin-left: auto; color: #9c94fb; font-size: 20px; }

/* Typing workspace */
.itt-workspace-wrap { position: relative; z-index: 5; margin-top: -78px; }
.itt-workspace-wrap-page { margin-top: -48px; }
.itt-typing-workspace { overflow: hidden; border: 1px solid var(--itt-border); border-radius: var(--itt-radius-lg); background: var(--itt-surface); box-shadow: var(--itt-shadow-lg); }
.itt-resume-banner,
.itt-challenge-banner { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 13px 23px; border-bottom: 1px solid rgba(101, 88, 245, 0.18); background: var(--itt-primary-soft); color: var(--itt-text); }
.itt-resume-banner > div:first-child { display: grid; }
.itt-resume-banner strong,
.itt-challenge-banner strong { font-size: 13px; }
.itt-resume-banner span,
.itt-challenge-banner span { color: var(--itt-muted); font-size: 12px; }
.itt-challenge-banner { justify-content: flex-start; background: linear-gradient(90deg, rgba(101, 88, 245, 0.13), rgba(22, 166, 115, 0.1)); }
.itt-challenge-banner > div { display: grid; }
.itt-challenge-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 10px; background: var(--itt-surface); color: var(--itt-primary-text); }
.itt-workspace-topbar { display: flex; align-items: center; justify-content: space-between; gap: 25px; padding: 21px 25px 18px; border-bottom: 1px solid var(--itt-border); }
.itt-workspace-topbar h2 { margin: 2px 0 0; font-size: 19px; }
.itt-workspace-kicker { display: flex; align-items: center; gap: 7px; margin: 0; color: var(--itt-muted); font-size: 10px; font-weight: 750; letter-spacing: 0.085em; text-transform: uppercase; }
.itt-workspace-kicker > span { width: 7px; height: 7px; border-radius: 50%; background: var(--itt-success); box-shadow: 0 0 0 4px var(--itt-success-soft); }
.itt-workspace-actions { display: flex; align-items: center; gap: 5px; }
.itt-tool-button { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 7px 10px; border-radius: 9px; background: transparent; color: var(--itt-muted); font-size: 11px; font-weight: 660; }
.itt-tool-button:hover { background: var(--itt-surface-2); color: var(--itt-heading); }
.itt-tool-button.is-active,
.itt-tool-button[aria-pressed="true"] { background: var(--itt-primary-soft); color: var(--itt-primary-text); }
.itt-keyword-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 15px 25px;
  border-bottom: 1px solid var(--itt-border);
  background:
    radial-gradient(circle at 8% 50%, rgba(22, 166, 115, 0.08), transparent 30%),
    radial-gradient(circle at 92% 50%, rgba(65, 143, 255, 0.09), transparent 32%),
    var(--itt-surface);
}
.itt-keyword-heading { display: grid; flex: 0 0 auto; gap: 2px; }
.itt-keyword-heading span { color: var(--itt-muted); font-size: 9px; font-weight: 780; letter-spacing: 0.1em; text-transform: uppercase; }
.itt-keyword-heading strong { color: var(--itt-heading); font-size: 13px; line-height: 1.35; }
.itt-keyword-tags { display: flex; flex: 1 1 auto; flex-wrap: wrap; justify-content: flex-end; gap: 9px; }
.itt-keyword-tag {
  position: relative;
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  padding: 8px 17px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 999px;
  outline: none;
  background:
    linear-gradient(var(--itt-surface), var(--itt-surface)) padding-box,
    linear-gradient(125deg, rgba(22, 166, 115, 0.52), rgba(72, 151, 255, 0.58)) border-box;
  box-shadow: 0 3px 10px rgba(34, 91, 126, 0.07);
  color: var(--itt-text);
  font-size: 12px;
  font-weight: 760;
  letter-spacing: 0.01em;
  transition: color 180ms ease, transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}
.itt-keyword-tag::before {
  width: 0;
  height: 6px;
  margin-right: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, #18a875, #438ff5);
  box-shadow: 0 0 0 0 rgba(67, 143, 245, 0);
  content: "";
  opacity: 0;
  transition: width 180ms ease, margin 180ms ease, opacity 180ms ease, box-shadow 180ms ease;
}
.itt-keyword-tag:hover {
  background:
    linear-gradient(color-mix(in srgb, var(--itt-surface) 92%, #eafff6), color-mix(in srgb, var(--itt-surface) 92%, #e9f3ff)) padding-box,
    linear-gradient(125deg, #16a673, #438ff5) border-box;
  box-shadow: 0 9px 24px rgba(45, 127, 164, 0.17), 0 2px 6px rgba(22, 166, 115, 0.1);
  color: var(--itt-heading);
  transform: translateY(-2px);
}
.itt-keyword-tag:focus-visible {
  box-shadow: 0 0 0 3px var(--itt-surface), 0 0 0 6px rgba(55, 147, 194, 0.32), 0 8px 20px rgba(45, 127, 164, 0.16);
}
.itt-keyword-tag[aria-pressed="true"],
.itt-keyword-tag.is-active {
  background:
    linear-gradient(125deg, color-mix(in srgb, var(--itt-success-soft) 70%, var(--itt-surface)), color-mix(in srgb, var(--itt-primary-soft) 65%, var(--itt-surface))) padding-box,
    linear-gradient(125deg, #13a66f, #397fe7) border-box;
  box-shadow: 0 8px 22px rgba(57, 127, 183, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.34);
  color: var(--itt-primary-text);
  transform: translateY(-1px);
}
.itt-keyword-tag[aria-pressed="true"]::before,
.itt-keyword-tag.is-active::before { width: 6px; margin-right: 7px; opacity: 1; box-shadow: 0 0 0 4px rgba(52, 143, 190, 0.1); }
.itt-keyword-tag:disabled { cursor: wait; filter: saturate(0.7); opacity: 0.58; transform: none; }
.itt-test-settings { display: flex; align-items: end; gap: 16px; padding: 16px 25px; border-bottom: 1px solid var(--itt-border); background: color-mix(in srgb, var(--itt-surface-2) 43%, var(--itt-surface)); }
.itt-setting-group { display: grid; gap: 7px; }
.itt-live-score { display: grid; grid-template-columns: 1.25fr repeat(3, 1fr); border-bottom: 1px solid var(--itt-border); }
.itt-live-score > div { display: flex; min-height: 83px; align-items: center; justify-content: center; gap: 13px; padding: 14px 20px; border-left: 1px solid var(--itt-border); }
.itt-live-score > div:first-child { border-left: 0; }
.itt-live-score span { color: var(--itt-muted); font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.04em; }
.itt-live-score strong { color: var(--itt-heading); font-family: var(--itt-mono); font-size: 25px; line-height: 1; letter-spacing: -0.05em; }
.itt-live-score strong small { color: var(--itt-muted); font-family: var(--itt-font); font-size: 11px; font-weight: 650; letter-spacing: 0; }
.itt-score-primary { justify-content: flex-start !important; padding-left: 26px !important; background: linear-gradient(90deg, var(--itt-primary-soft), transparent); }
.itt-score-primary strong { color: var(--itt-primary-text); font-size: 31px; }
.itt-passage-shell { position: relative; height: 242px; overflow: hidden auto; scroll-behavior: smooth; background: var(--itt-surface); scrollbar-color: var(--itt-border-strong) transparent; scrollbar-width: thin; }
.itt-passage { min-height: 100%; padding: 31px 32px 65px; color: var(--itt-muted-2); font: 500 21px/1.8 var(--itt-mono); letter-spacing: 0.01em; white-space: pre-wrap; word-break: break-word; user-select: none; }
.itt-passage span { position: relative; border-radius: 2px; transition: color 80ms ease, background 80ms ease; }
.itt-passage span.is-correct { color: var(--itt-heading); }
.itt-passage span.is-incorrect { background: var(--itt-danger-soft); color: var(--itt-danger); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.itt-passage span.is-current::before { position: absolute; top: 1px; bottom: 1px; left: -1px; width: 2px; border-radius: 2px; background: var(--itt-primary); content: ""; animation: itt-caret 1s step-end infinite; }
@keyframes itt-caret { 0%, 46% { opacity: 1; } 47%, 100% { opacity: 0; } }
.itt-passage-fade { position: sticky; z-index: 2; bottom: 0; width: 100%; height: 46px; margin-top: -46px; background: linear-gradient(transparent, var(--itt-surface)); pointer-events: none; }
.itt-input-label { display: block; padding: 15px 25px 7px; border-top: 1px solid var(--itt-border); color: var(--itt-muted); }
/* The typing input is captured invisibly: the passage shows the caret and the keyboard guides typing. No visible box. */
.itt-typing-input { position: absolute !important; left: -9999px; top: auto; width: 1px; height: 1px; padding: 0; margin: 0; overflow: hidden; opacity: 0; border: 0; background: transparent; resize: none; }
.itt-passage-shell { cursor: text; }
.itt-test-progress { height: 3px; background: var(--itt-surface-3); }
.itt-test-progress span { display: block; width: 0; height: 100%; border-radius: 0 3px 3px 0; background: linear-gradient(90deg, var(--itt-primary), #8e7ff9, var(--itt-success)); transition: width 100ms linear; }
.itt-workspace-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 58px; padding: 12px 25px; background: var(--itt-surface-2); }
.itt-secondary-stats { display: flex; flex-wrap: wrap; gap: 20px; }
.itt-secondary-stats span { color: var(--itt-muted); font-size: 11px; }
.itt-secondary-stats b { color: var(--itt-heading); font-family: var(--itt-mono); font-size: 12px; }
.itt-workspace-footer > p { display: flex; align-items: center; gap: 7px; margin: 0; color: var(--itt-muted); font-size: 11px; }

/* Virtual keyboard guide */
.itt-virtual-keyboard {
  padding: 17px 22px 22px;
  border-top: 1px solid var(--itt-border);
  background:
    radial-gradient(circle at 12% -10%, rgba(101, 88, 245, 0.07), transparent 45%),
    radial-gradient(circle at 88% -10%, rgba(22, 166, 115, 0.07), transparent 45%),
    var(--itt-surface-2);
}
.itt-keyboard-caption { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 14px; color: var(--itt-muted); font-size: 11px; font-weight: 620; }
.itt-keyboard-caption .itt-icon { color: var(--itt-primary-text); }
.itt-keyboard-inner { display: grid; gap: 7px; max-width: 820px; margin: 0 auto; }
.itt-keyboard-row { display: flex; gap: 6px; justify-content: center; }
.itt-key {
  position: relative;
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  height: clamp(34px, 6.2vw, 50px);
  padding: 4px 3px;
  border: 1px solid var(--itt-border-strong);
  border-bottom-width: 3px;
  border-radius: 9px;
  background: linear-gradient(180deg, var(--itt-surface), var(--itt-surface-2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 2px 4px rgba(24, 25, 45, 0.06);
  color: var(--itt-heading);
  font-family: var(--itt-mono);
  font-size: clamp(10px, 1.45vw, 13px);
  line-height: 1;
  user-select: none;
  transition: transform 90ms ease, box-shadow 130ms ease, background 130ms ease, border-color 130ms ease, color 130ms ease;
}
.itt-key b { font-weight: 700; }
.itt-key i { color: var(--itt-muted); font-size: 0.82em; font-style: normal; }
.itt-key-dual { gap: 2px; }
.itt-key-letter b { font-size: 1.08em; }
.itt-key-backspace, .itt-key-tab { flex: 1.7 1 0; }
.itt-key-caps { flex: 1.9 1 0; }
.itt-key-enter { flex: 2.1 1 0; }
.itt-key-shift { flex: 2.4 1 0; }
.itt-key-mod { flex: 1.4 1 0; }
.itt-key-space { flex: 7 1 0; }
.itt-key-backspace b, .itt-key-tab b, .itt-key-caps b, .itt-key-enter b, .itt-key-shift b, .itt-key-mod b, .itt-key-space b { font-size: 0.82em; font-weight: 650; letter-spacing: 0.02em; }
.itt-key.is-next {
  border-color: var(--itt-success);
  background: linear-gradient(180deg, var(--itt-success-soft), color-mix(in srgb, var(--itt-success-soft) 55%, var(--itt-surface)));
  color: var(--itt-success);
  transform: translateY(-1px);
  animation: itt-key-glow 1.15s ease-in-out infinite;
}
.itt-key.is-next i { color: color-mix(in srgb, var(--itt-success) 70%, var(--itt-muted)); }
.itt-key.is-next-mod {
  border-color: color-mix(in srgb, var(--itt-success) 60%, var(--itt-border-strong));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--itt-success) 28%, transparent);
  color: var(--itt-success);
}
@keyframes itt-key-glow {
  0%, 100% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--itt-success) 45%, transparent), 0 6px 15px rgba(22, 166, 115, 0.22); }
  50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--itt-success) 20%, transparent), 0 9px 22px rgba(22, 166, 115, 0.32); }
}
.itt-key.is-pressed {
  transform: translateY(1px);
  border-bottom-width: 1px;
  background: linear-gradient(180deg, var(--itt-surface-2), var(--itt-surface-3));
  box-shadow: inset 0 1px 3px rgba(24, 25, 45, 0.16);
}
.itt-key.is-hit { animation: itt-key-hit 0.24s ease; }
@keyframes itt-key-hit {
  0% { transform: scale(1); }
  35% { transform: scale(0.93); border-color: var(--itt-success); background: var(--itt-success); color: #fff; box-shadow: 0 0 18px rgba(22, 166, 115, 0.5); }
  100% { transform: scale(1); }
}
.itt-key.is-hit i { color: rgba(255, 255, 255, 0.85); }
.itt-key.is-miss { animation: itt-key-miss 0.3s ease; }
@keyframes itt-key-miss {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-2px); border-color: var(--itt-danger); background: var(--itt-danger); color: #fff; box-shadow: 0 0 18px rgba(239, 106, 104, 0.5); }
  60% { transform: translateX(2px); background: var(--itt-danger); color: #fff; }
}
.itt-key.is-miss i { color: rgba(255, 255, 255, 0.85); }
@media (prefers-reduced-motion: reduce) {
  .itt-key, .itt-key.is-next, .itt-key.is-hit, .itt-key.is-miss { animation: none !important; }
}

/* Dialogs */
.itt-dialog { width: min(calc(100% - 30px), 590px); max-height: calc(100dvh - 35px); padding: 0; overflow: auto; border: 1px solid var(--itt-border); border-radius: 21px; outline: 0; background: var(--itt-surface); box-shadow: var(--itt-shadow-lg); color: var(--itt-text); }
.itt-dialog::backdrop { background: rgba(12, 13, 27, 0.66); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.itt-dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--itt-border); }
.itt-dialog-header h2 { margin: 0; font-size: 23px; }
.itt-custom-dialog form { padding: 25px; }
.itt-custom-dialog form > p { margin: 20px 0; color: var(--itt-muted); font-size: 14px; }
.itt-custom-dialog .itt-field textarea { font-family: var(--itt-mono); font-size: 13px; }
.itt-field-error { margin: 7px 0 0 !important; color: var(--itt-danger) !important; font-size: 12px !important; }
.itt-dialog-actions { display: flex; justify-content: flex-end; gap: 9px; padding-top: 20px; }
.itt-dialog-actions-split { align-items: center; justify-content: space-between; padding: 18px 25px 23px; border-top: 1px solid var(--itt-border); }
.itt-result-dialog { width: min(calc(100% - 28px), 620px); overflow-x: hidden; }
.itt-result-celebration span { position: absolute; width: 7px; height: 7px; border-radius: 2px; background: var(--itt-primary); transform: rotate(23deg); }
.itt-result-celebration span:nth-child(1) { top: 38px; left: 65px; }
.itt-result-celebration span:nth-child(2) { top: 66px; right: 77px; background: var(--itt-success); }
.itt-result-celebration span:nth-child(3) { top: 25px; right: 140px; background: var(--itt-warning); }
.itt-result-header { padding: 27px 28px 12px; text-align: center; }
.itt-result-badge { display: grid; width: 63px; height: 63px; margin: 0 auto 14px; place-items: center; border: 1px solid rgba(101, 88, 245, 0.2); border-radius: 19px; background: var(--itt-primary-soft); color: var(--itt-primary-text); transform: rotate(-3deg); }
.itt-result-header .itt-eyebrow { margin-bottom: 6px; }
.itt-result-header h2 { margin-bottom: 7px; font-size: 26px; }
.itt-result-header > p:last-child { margin: 0; color: var(--itt-muted); font-size: 13px; }
.itt-result-score { display: grid; justify-content: center; margin: 8px auto 19px; text-align: center; }
.itt-result-score strong { color: var(--itt-primary-text); font: 800 63px/1 var(--itt-mono); letter-spacing: -0.08em; }
.itt-result-score span { color: var(--itt-muted); font-size: 11px; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; }
.itt-result-metrics { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 25px; overflow: hidden; border: 1px solid var(--itt-border); border-radius: 13px; }
.itt-result-metrics > div { display: grid; gap: 3px; padding: 13px 9px; border-left: 1px solid var(--itt-border); text-align: center; }
.itt-result-metrics > div:first-child { border-left: 0; }
.itt-result-metrics span { color: var(--itt-muted); font-size: 10px; }
.itt-result-metrics strong { color: var(--itt-heading); font: 720 17px var(--itt-mono); }
.itt-result-identity { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 18px; padding: 20px 25px 0; }
.itt-result-identity .itt-field input { min-height: 40px; padding: 8px 11px; font-size: 13px; }
.itt-result-identity .itt-check { min-height: 40px; }
.itt-save-status { min-height: 18px; padding: 6px 25px 0; margin: 0; color: var(--itt-muted); font-size: 11px; text-align: center; }
.itt-result-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; padding: 12px 25px 5px; }
.itt-result-actions .itt-button { min-height: 40px; padding: 9px 13px; font-size: 12px; }
.itt-share-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; padding: 13px 25px; }
.itt-share-row > span { margin-right: 3px; color: var(--itt-muted); font-size: 11px; font-weight: 700; }
.itt-share-row button { padding: 5px 8px; border-radius: 7px; background: var(--itt-surface-2); color: var(--itt-muted); font-size: 10px; font-weight: 650; }
.itt-share-row button:hover { background: var(--itt-primary-soft); color: var(--itt-primary-text); }

/* Homepage supporting sections */
.itt-trust-strip { margin-top: 37px; border-block: 1px solid var(--itt-border); background: var(--itt-surface); }
.itt-trust-strip .itt-container { display: flex; min-height: 82px; align-items: center; justify-content: space-between; gap: 25px; }
.itt-trust-strip p { margin: 0; color: var(--itt-muted); font-size: 11px; font-weight: 750; letter-spacing: 0.06em; text-transform: uppercase; }
.itt-trust-strip ul { display: flex; align-items: center; gap: 38px; padding: 0; margin: 0; list-style: none; }
.itt-trust-strip li { display: flex; align-items: baseline; gap: 7px; }
.itt-trust-strip b { color: var(--itt-heading); font-family: var(--itt-mono); font-size: 15px; }
.itt-trust-strip span { color: var(--itt-muted); font-size: 11px; }
.itt-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 55px; margin-bottom: 42px; }
.itt-section-heading h2 { max-width: 620px; margin: 0; font-size: clamp(30px, 3.3vw, 45px); }
.itt-section-heading > p { max-width: 490px; margin: 0 0 4px; color: var(--itt-muted); font-size: 15px; line-height: 1.75; }
.itt-section-heading-center { justify-content: center; text-align: center; }
.itt-section-heading-center .itt-eyebrow { justify-content: center; }
.itt-mode-grid { display: grid; grid-template-columns: 1.12fr 1fr 1fr; gap: 18px; }
.itt-mode-card { position: relative; display: flex; min-height: 288px; flex-direction: column; align-items: flex-start; padding: 28px; overflow: hidden; border: 1px solid var(--itt-border); border-radius: var(--itt-radius-lg); background: var(--itt-surface); box-shadow: var(--itt-shadow-sm); color: var(--itt-text); transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease; }
.itt-mode-card::after { position: absolute; right: -45px; bottom: -55px; width: 150px; height: 150px; border-radius: 50%; background: var(--itt-primary-soft); content: ""; opacity: 0.6; }
.itt-mode-card:hover { border-color: rgba(101, 88, 245, 0.45); box-shadow: var(--itt-shadow); color: var(--itt-text); transform: translateY(-4px); }
.itt-mode-card-featured { background: linear-gradient(145deg, #22203d, #17182b); border-color: #37345b; color: #dbdced; }
.itt-mode-card-featured::after { background: rgba(101, 88, 245, 0.3); }
.itt-mode-card-featured h3 { color: #fff; }
.itt-mode-card-featured p { color: #acaec4 !important; }
.itt-mode-card-featured small { position: absolute; top: 28px; right: 26px; padding: 5px 8px; border-radius: 20px; background: rgba(115, 99, 255, 0.17); color: #aba1ff; font-size: 9px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.itt-mode-icon { display: grid; width: 50px; height: 50px; margin-bottom: 24px; place-items: center; border-radius: 14px; background: var(--itt-primary-soft); color: var(--itt-primary-text); }
.itt-mode-card-featured .itt-mode-icon { background: rgba(101, 88, 245, 0.2); color: #a79dff; }
.itt-mode-card h3 { margin-bottom: 10px; font-size: 21px; }
.itt-mode-card p { margin-bottom: 25px; color: var(--itt-muted); font-size: 13px; line-height: 1.7; }
.itt-mode-card b { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; margin-top: auto; color: var(--itt-primary-text); font-size: 12px; }
.itt-mode-card-featured b { color: #a99fff; }
.itt-progress-promo { background: var(--itt-surface); }
.itt-split-feature { display: grid; grid-template-columns: 0.92fr 1.08fr; align-items: center; gap: 88px; }
.itt-feature-copy h2 { margin-bottom: 20px; font-size: clamp(31px, 3.5vw, 47px); }
.itt-feature-copy > p { color: var(--itt-muted); font-size: 15px; line-height: 1.8; }
.itt-check-list { display: grid; gap: 18px; padding: 0; margin: 28px 0; list-style: none; }
.itt-check-list li { display: flex; align-items: flex-start; gap: 12px; }
.itt-check-list > li > .itt-icon { margin-top: 3px; color: var(--itt-success); }
.itt-check-list span { display: grid; color: var(--itt-muted); font-size: 12px; }
.itt-check-list b { color: var(--itt-heading); font-size: 14px; }
.itt-dashboard-preview { overflow: hidden; border: 1px solid var(--itt-border); border-radius: 22px; background: var(--itt-surface); box-shadow: var(--itt-shadow-lg); }
.itt-preview-head { display: flex; align-items: center; justify-content: space-between; padding: 23px 25px; border-bottom: 1px solid var(--itt-border); }
.itt-preview-head > span { display: grid; }
.itt-preview-head b { color: var(--itt-heading); }
.itt-preview-head small { color: var(--itt-muted); font-size: 10px; }
.itt-preview-head > strong { padding: 5px 9px; border-radius: 20px; background: var(--itt-success-soft); color: var(--itt-success); font-size: 11px; }
.itt-preview-stats { display: grid; grid-template-columns: repeat(3, 1fr); padding: 23px 25px 13px; }
.itt-preview-stats > span { display: grid; padding-left: 20px; border-left: 1px solid var(--itt-border); }
.itt-preview-stats > span:first-child { padding-left: 0; border: 0; }
.itt-preview-stats small { color: var(--itt-muted); font-size: 9px; }
.itt-preview-stats b { color: var(--itt-heading); font-size: 23px; }
.itt-preview-stats em { color: var(--itt-muted); font-size: 9px; font-style: normal; }
.itt-dashboard-preview svg { display: block; width: 100%; padding: 0 20px 16px; overflow: visible; }
.itt-chart-grid { fill: none; stroke: var(--itt-border); stroke-width: 1; }
.itt-chart-line { fill: none; stroke: var(--itt-primary); stroke-linecap: round; stroke-width: 3; }
.itt-dashboard-preview circle { fill: var(--itt-primary); }
.itt-steps-section { background: var(--itt-bg); }
.itt-step-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding: 0; margin: 0; counter-reset: steps; list-style: none; }
.itt-step-grid li { position: relative; padding: 29px; overflow: hidden; border: 1px solid var(--itt-border); border-radius: var(--itt-radius-lg); background: var(--itt-surface); }
.itt-step-grid li > span { position: absolute; top: 12px; right: 20px; color: var(--itt-surface-3); font-size: 58px; font-weight: 850; line-height: 1; }
.itt-step-grid li > div { position: relative; }
.itt-step-grid .itt-icon { margin-bottom: 44px; color: var(--itt-primary-text); }
.itt-step-grid h3 { margin-bottom: 9px; font-size: 18px; }
.itt-step-grid p { margin: 0; color: var(--itt-muted); font-size: 13px; }

/* Page heroes and content */
.itt-page-hero { position: relative; padding: 78px 0 92px; overflow: hidden; background: radial-gradient(circle at 72% 0, rgba(101, 88, 245, 0.13), transparent 30%), linear-gradient(180deg, var(--itt-surface), var(--itt-bg)); text-align: center; }
.itt-page-hero::after { position: absolute; right: 10%; bottom: -100px; width: 260px; height: 260px; border: 1px solid rgba(101, 88, 245, 0.1); border-radius: 50%; content: ""; }
.itt-page-hero .itt-container { position: relative; z-index: 1; }
.itt-page-hero h1 { max-width: 860px; margin: 0 auto 18px; font-size: clamp(38px, 4.8vw, 58px); }
.itt-page-hero .itt-container > p:not(.itt-eyebrow) { max-width: 760px; margin: 0 auto; color: var(--itt-muted); font-size: 17px; line-height: 1.75; }
.itt-page-hero .itt-hero-proof { justify-content: center; margin-top: 24px; }
.itt-page-hero-compact { padding: 58px 0 94px; }
.itt-breadcrumbs { margin-bottom: 26px; }
.itt-breadcrumbs ol { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; list-style: none; }
.itt-breadcrumbs li { display: flex; align-items: center; color: var(--itt-muted-2); font-size: 11px; }
.itt-breadcrumbs li + li::before { margin-right: 8px; color: var(--itt-border-strong); content: "/"; }
.itt-breadcrumbs a { color: var(--itt-muted); }
.itt-info-section { padding-top: 72px; }
.itt-info-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; align-items: start; gap: 72px; }
.itt-prose { max-width: 820px; color: var(--itt-text); font-size: 16px; line-height: 1.85; }
.itt-prose > *:first-child { margin-top: 0; }
.itt-prose h2 { margin: 2.1em 0 0.7em; font-size: clamp(25px, 3vw, 34px); }
.itt-prose h3 { margin: 1.8em 0 0.6em; font-size: 22px; }
.itt-prose p,
.itt-prose li { color: var(--itt-muted); }
.itt-prose a { font-weight: 650; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.itt-prose ul,
.itt-prose ol { padding-left: 1.35em; }
.itt-prose li { margin-bottom: 0.45em; }
.itt-prose blockquote { padding: 18px 24px; margin: 28px 0; border-left: 4px solid var(--itt-primary); border-radius: 0 var(--itt-radius) var(--itt-radius) 0; background: var(--itt-primary-soft); color: var(--itt-heading); }
.itt-prose code { padding: 2px 6px; border-radius: 5px; background: var(--itt-surface-2); color: var(--itt-primary-text); font-family: var(--itt-mono); font-size: 0.9em; }
.itt-prose pre { padding: 20px; overflow: auto; border-radius: var(--itt-radius); background: var(--itt-code-bg); color: #e5e5ef; }
.itt-info-card { position: sticky; top: 105px; padding: 27px; border: 1px solid var(--itt-border); border-radius: var(--itt-radius-lg); background: var(--itt-surface); box-shadow: var(--itt-shadow-sm); }
.itt-info-card-icon { display: grid; width: 50px; height: 50px; margin-bottom: 18px; place-items: center; border-radius: 14px; background: var(--itt-primary-soft); color: var(--itt-primary-text); }
.itt-info-card h2 { margin-bottom: 11px; font-size: 20px; }
.itt-info-card p { color: var(--itt-muted); font-size: 13px; }
.itt-page-content { margin-top: 55px; }
.itt-practice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.itt-practice-card { display: flex; min-height: 245px; flex-direction: column; align-items: flex-start; padding: 24px; border: 1px solid var(--itt-border); border-radius: var(--itt-radius); background: var(--itt-surface); box-shadow: var(--itt-shadow-sm); text-align: left; transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease; }
.itt-practice-card:hover { border-color: rgba(101, 88, 245, 0.45); box-shadow: var(--itt-shadow); transform: translateY(-3px); }
.itt-practice-card > span { display: grid; width: 43px; height: 43px; margin-bottom: 20px; place-items: center; border-radius: 12px; background: var(--itt-primary-soft); color: var(--itt-primary-text); }
.itt-practice-card h3 { margin-bottom: 8px; font-size: 18px; }
.itt-practice-card p { margin-bottom: 20px; color: var(--itt-muted); font-size: 12px; line-height: 1.7; }
.itt-practice-card b { display: flex; align-items: center; gap: 7px; margin-top: auto; color: var(--itt-primary-text); font-size: 11px; }
.itt-page-article { margin-inline: auto; }
.itt-featured-image { margin-bottom: 38px; overflow: hidden; border-radius: var(--itt-radius-lg); }
.itt-featured-image img { width: 100%; }
.itt-ad-slot { min-height: 90px; padding: 12px; margin: 30px 0; overflow: hidden; border: 1px dashed var(--itt-border-strong); border-radius: var(--itt-radius); background: var(--itt-surface-2); text-align: center; }
.itt-ad-slot > span { display: block; margin-bottom: 5px; color: var(--itt-muted-2); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; }

/* Progress dashboard */
.itt-dashboard-hero { padding-bottom: 80px; text-align: left; }
.itt-dashboard-hero .itt-breadcrumbs ol { justify-content: flex-start; }
.itt-dashboard-hero-row { display: flex; align-items: end; justify-content: space-between; gap: 35px; }
.itt-dashboard-hero h1 { max-width: none; margin-inline: 0; }
.itt-dashboard-hero .itt-container > .itt-dashboard-hero-row p { max-width: 650px; margin-inline: 0; }
.itt-dashboard { padding: 44px 0 100px; }
.itt-account-notice { display: flex; align-items: center; gap: 15px; padding: 15px 18px; margin-bottom: 26px; border: 1px solid rgba(101, 88, 245, 0.2); border-radius: var(--itt-radius); background: var(--itt-primary-soft); }
.itt-account-notice > span { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 11px; background: var(--itt-surface); color: var(--itt-primary-text); }
.itt-account-notice > div:not(.itt-inline-actions) { flex: 1; }
.itt-account-notice .itt-inline-actions { flex: 0 0 auto; }
.itt-account-notice strong { display: block; color: var(--itt-heading); font-size: 13px; }
.itt-account-notice p { margin: 1px 0 0; color: var(--itt-muted); font-size: 11px; }
.itt-dashboard-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.itt-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.itt-stat-grid article { display: flex; align-items: flex-start; gap: 14px; padding: 21px; border: 1px solid var(--itt-border); border-radius: var(--itt-radius); background: var(--itt-surface); box-shadow: var(--itt-shadow-sm); }
.itt-stat-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 11px; }
.itt-stat-purple { background: var(--itt-primary-soft); color: var(--itt-primary-text); }
.itt-stat-blue { background: #e9f3ff; color: #3c83d4; }
.itt-stat-green { background: var(--itt-success-soft); color: var(--itt-success); }
.itt-stat-orange { background: #fff3e5; color: var(--itt-warning); }
:root[data-theme="dark"] .itt-stat-blue { background: rgba(60, 131, 212, 0.13); }
:root[data-theme="dark"] .itt-stat-orange { background: rgba(233, 152, 45, 0.13); }
.itt-stat-grid article > div { display: grid; }
.itt-stat-grid small { color: var(--itt-muted); font-size: 10px; font-weight: 650; }
.itt-stat-grid strong { color: var(--itt-heading); font-size: 28px; line-height: 1.3; letter-spacing: -0.04em; }
.itt-stat-grid strong em { margin-left: 3px; color: var(--itt-muted); font-size: 9px; font-style: normal; font-weight: 650; letter-spacing: 0; text-transform: uppercase; }
.itt-stat-grid p { margin: 1px 0 0; color: var(--itt-muted-2); font-size: 9px; }
.itt-dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, 0.75fr); gap: 18px; margin-bottom: 18px; }
.itt-panel { border: 1px solid var(--itt-border); border-radius: var(--itt-radius); background: var(--itt-surface); box-shadow: var(--itt-shadow-sm); }
.itt-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 19px 22px; border-bottom: 1px solid var(--itt-border); }
.itt-panel > header h2 { margin: 1px 0 0; font-size: 17px; }
.itt-panel-kicker { margin: 0; color: var(--itt-muted); font-size: 9px; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; }
.itt-trend-pill { padding: 5px 9px; border-radius: 20px; background: var(--itt-surface-2); color: var(--itt-muted); font-size: 11px; font-weight: 750; }
.itt-trend-pill.is-positive { background: var(--itt-success-soft); color: var(--itt-success); }
.itt-trend-pill.is-negative { background: var(--itt-danger-soft); color: var(--itt-danger); }
.itt-chart-wrap { position: relative; min-height: 335px; padding: 17px 15px 0; }
.itt-chart-wrap canvas { width: 100%; height: 300px; }
.itt-empty-chart { position: absolute; inset: 25px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--itt-muted); text-align: center; }
.itt-empty-chart > span { display: grid; width: 53px; height: 53px; margin-bottom: 13px; place-items: center; border-radius: 15px; background: var(--itt-primary-soft); color: var(--itt-primary-text); }
.itt-empty-chart strong { color: var(--itt-heading); font-size: 14px; }
.itt-empty-chart a { margin-top: 5px; font-size: 12px; font-weight: 700; }
.itt-chart-legend { display: flex; justify-content: center; gap: 20px; padding: 0 20px 17px; color: var(--itt-muted); font-size: 10px; }
.itt-chart-legend span { display: flex; align-items: center; gap: 6px; }
.itt-chart-legend i { width: 17px; height: 2px; border-radius: 2px; background: var(--itt-primary); }
.itt-chart-legend i.is-accuracy { border-top: 2px dashed var(--itt-success); background: transparent; }
.itt-records-panel > header > .itt-icon { color: var(--itt-primary-text); }
.itt-records-panel dl { margin: 0; }
.itt-records-panel dl > div { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 16px 20px; border-bottom: 1px solid var(--itt-border); }
.itt-records-panel dl > div:last-child { border: 0; }
.itt-records-panel dt { color: var(--itt-muted); font-size: 11px; }
.itt-records-panel dd { display: grid; margin: 0; text-align: right; }
.itt-records-panel dd strong { color: var(--itt-heading); font: 700 13px var(--itt-mono); }
.itt-records-panel dd span { color: var(--itt-muted-2); font-size: 9px; }
.itt-history-panel { margin-bottom: 18px; }
.itt-history-panel > header > span { color: var(--itt-muted); font-size: 11px; }
.itt-table-scroll { overflow-x: auto; }
.itt-data-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.itt-data-table th { padding: 12px 17px; border-bottom: 1px solid var(--itt-border); background: var(--itt-surface-2); color: var(--itt-muted); font-size: 9px; font-weight: 750; letter-spacing: 0.055em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.itt-data-table td { padding: 14px 17px; border-bottom: 1px solid var(--itt-border); color: var(--itt-muted); white-space: nowrap; }
.itt-data-table tbody tr:last-child td { border: 0; }
.itt-data-table tbody tr:hover { background: color-mix(in srgb, var(--itt-primary-soft) 30%, transparent); }
.itt-score-cell { color: var(--itt-heading) !important; font-family: var(--itt-mono); font-weight: 750; }
.itt-table-link { font-size: 11px; font-weight: 700; }
.itt-local-pill { padding: 3px 7px; border-radius: 20px; background: var(--itt-surface-2); color: var(--itt-muted-2); font-size: 9px; font-weight: 700; text-transform: uppercase; }
.itt-empty-state { display: flex; min-height: 220px; flex-direction: column; align-items: center; justify-content: center; padding: 35px; text-align: center; }
.itt-empty-state > span { display: grid; width: 54px; height: 54px; margin-bottom: 14px; place-items: center; border-radius: 15px; background: var(--itt-primary-soft); color: var(--itt-primary-text); }
.itt-empty-state h2,
.itt-empty-state h3 { margin-bottom: 7px; font-size: 18px; }
.itt-empty-state p { max-width: 430px; margin-bottom: 15px; color: var(--itt-muted); font-size: 12px; }
.itt-favorites-panel { padding-bottom: 20px; }
.itt-favorite-list { display: flex; flex-wrap: wrap; gap: 8px; padding: 20px 22px 0; }
.itt-favorite-chip { padding: 8px 12px; border: 1px solid var(--itt-border); border-radius: 10px; background: var(--itt-surface-2); color: var(--itt-text); font-size: 11px; font-weight: 650; }
.itt-favorite-chip:hover { border-color: var(--itt-primary); background: var(--itt-primary-soft); color: var(--itt-primary-text); }
.itt-empty-copy { padding: 16px 22px 0; margin: 0; color: var(--itt-muted); font-size: 12px; }

/* Leaderboard */
.itt-leaderboard-hero { padding-bottom: 72px; }
.itt-leaderboard { padding: 38px 0 100px; }
.itt-leaderboard-controls { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 50px; }
.itt-board-groups { display: flex; gap: 5px; }
.itt-board-groups button { display: inline-flex; align-items: center; gap: 7px; min-height: 39px; padding: 7px 13px; border: 1px solid var(--itt-border); border-radius: 10px; background: var(--itt-surface); color: var(--itt-muted); font-size: 11px; font-weight: 700; }
.itt-board-groups button[aria-pressed="true"] { border-color: rgba(101, 88, 245, 0.35); background: var(--itt-primary-soft); color: var(--itt-primary-text); }
.itt-podium { display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: 14px; max-width: 800px; margin: 0 auto 24px; }
.itt-podium-card { position: relative; display: flex; min-height: 225px; flex-direction: column; align-items: center; padding: 30px 20px 20px; border: 1px solid var(--itt-border); border-radius: var(--itt-radius-lg) var(--itt-radius-lg) var(--itt-radius-sm) var(--itt-radius-sm); background: var(--itt-surface); box-shadow: var(--itt-shadow-sm); text-align: center; }
.itt-podium-card.rank-1 { min-height: 260px; padding-top: 38px; border-color: rgba(101, 88, 245, 0.35); background: linear-gradient(180deg, var(--itt-primary-soft), var(--itt-surface) 54%); box-shadow: var(--itt-shadow); }
.itt-podium-rank { position: absolute; top: -15px; padding: 5px 10px; border-radius: 20px; background: #272945; color: #fff; font-size: 10px; font-weight: 800; }
.rank-1 .itt-podium-rank { background: linear-gradient(135deg, #796df8, var(--itt-primary)); box-shadow: 0 5px 14px rgba(101, 88, 245, 0.3); }
.itt-podium-avatar { display: grid; width: 54px; height: 54px; margin-bottom: 11px; place-items: center; border-radius: 50%; background: var(--itt-surface-2); color: var(--itt-primary-text); font-size: 15px; font-weight: 800; }
.rank-1 .itt-podium-avatar { width: 64px; height: 64px; background: var(--itt-primary); color: #fff; }
.itt-podium-card h2 { max-width: 180px; margin-bottom: 5px; overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.itt-podium-card strong { color: var(--itt-heading); font: 800 25px var(--itt-mono); }
.itt-podium-card strong small { color: var(--itt-muted); font-size: 9px; }
.itt-podium-card p { margin: 3px 0 10px; color: var(--itt-muted); font-size: 10px; }
.itt-podium-link { margin-top: auto; font-size: 10px; font-weight: 700; }
.itt-board-panel { overflow: hidden; }
.itt-live-indicator { display: flex; align-items: center; gap: 7px; color: var(--itt-muted); font-size: 10px; }
.itt-live-indicator i { width: 7px; height: 7px; border-radius: 50%; background: var(--itt-success); box-shadow: 0 0 0 4px var(--itt-success-soft); }
.itt-board-loading { display: flex; min-height: 250px; align-items: center; justify-content: center; gap: 6px; color: var(--itt-muted); }
.itt-board-loading span { width: 7px; height: 7px; border-radius: 50%; background: var(--itt-primary); animation: itt-loader 900ms ease-in-out infinite alternate; }
.itt-board-loading span:nth-child(2) { animation-delay: 150ms; }
.itt-board-loading span:nth-child(3) { animation-delay: 300ms; }
.itt-board-loading p { margin: 0 0 0 7px; font-size: 11px; }
@keyframes itt-loader { to { opacity: 0.25; transform: translateY(-5px); } }
.itt-table-person { display: flex; align-items: center; gap: 9px; }
.itt-table-person i { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; background: var(--itt-primary-soft); color: var(--itt-primary-text); font-size: 8px; font-style: normal; font-weight: 800; }
.itt-table-person b { max-width: 200px; overflow: hidden; color: var(--itt-heading); font-size: 11px; text-overflow: ellipsis; }
.itt-rank-cell { color: var(--itt-heading) !important; font-family: var(--itt-mono); font-weight: 750; }
.itt-board-footer { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 28px; margin-top: 24px; border: 1px solid var(--itt-border); border-radius: var(--itt-radius-lg); background: var(--itt-surface); }
.itt-board-footer > div { display: flex; align-items: flex-start; gap: 12px; }
.itt-board-footer > div > .itt-icon { margin-top: 4px; color: var(--itt-primary-text); }
.itt-board-footer p { display: grid; margin: 0; color: var(--itt-muted); font-size: 11px; }
.itt-board-footer strong { color: var(--itt-heading); font-size: 13px; }

/* Certificates */
.itt-certificate-hero { padding-bottom: 72px; }
.itt-certificate-page { padding: 46px 0 90px; }
.itt-certificate-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 25px; max-width: 1080px; margin: 0 auto 21px; }
.itt-certificate-toolbar > .itt-field { width: min(100%, 340px); }
.itt-certificate-loading { display: flex; min-height: 400px; flex-direction: column; align-items: center; justify-content: center; color: var(--itt-muted); }
.itt-certificate-loading span { width: 38px; height: 38px; margin-bottom: 13px; border: 3px solid var(--itt-border); border-top-color: var(--itt-primary-text); border-radius: 50%; animation: itt-spin 800ms linear infinite; }
@keyframes itt-spin { to { transform: rotate(360deg); } }
.itt-certificate-loading p { font-size: 12px; }
.itt-certificate-empty { max-width: 570px; padding: 55px; margin: 0 auto; border: 1px solid var(--itt-border); border-radius: var(--itt-radius-lg); background: var(--itt-surface); text-align: center; }
.itt-certificate-empty > span { display: grid; width: 72px; height: 72px; margin: 0 auto 18px; place-items: center; border-radius: 21px; background: var(--itt-primary-soft); color: var(--itt-primary-text); }
.itt-certificate-empty h2 { margin-bottom: 8px; }
.itt-certificate-empty p { color: var(--itt-muted); }
.itt-certificate { width: min(100%, 1080px); aspect-ratio: 1.414 / 1; padding: 13px; margin: 0 auto; border-radius: 4px; background: #f5f0e6; box-shadow: 0 25px 70px rgba(30, 27, 47, 0.17); color: #2d2940; }
.itt-certificate-border { position: relative; display: flex; height: 100%; flex-direction: column; padding: 5.2% 7.5% 3.4%; border: 2px solid #7768b7; outline: 1px solid rgba(119, 104, 183, 0.45); outline-offset: -8px; background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.9), rgba(250, 246, 237, 0.95)), repeating-linear-gradient(45deg, transparent, transparent 12px, rgba(119, 104, 183, 0.025) 12px, rgba(119, 104, 183, 0.025) 13px); overflow: hidden; }
.itt-certificate-corner { position: absolute; width: 105px; height: 105px; border: solid #a392d6; opacity: 0.55; }
.itt-certificate-corner.is-top-left { top: 20px; left: 20px; border-width: 2px 0 0 2px; border-radius: 35px 0 0; }
.itt-certificate-corner.is-top-right { top: 20px; right: 20px; border-width: 2px 2px 0 0; border-radius: 0 35px 0 0; }
.itt-certificate-corner.is-bottom-left { bottom: 20px; left: 20px; border-width: 0 0 2px 2px; border-radius: 0 0 0 35px; }
.itt-certificate-corner.is-bottom-right { right: 20px; bottom: 20px; border-width: 0 2px 2px 0; border-radius: 0 0 35px; }
.itt-certificate header { position: relative; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(119, 104, 183, 0.3); padding-bottom: 2.5%; }
.itt-certificate-logo { display: flex; align-items: center; gap: 8px; color: #6558a8; }
.itt-certificate-logo b { font-size: clamp(12px, 1.8vw, 20px); letter-spacing: -0.04em; }
.itt-certificate-logo em { color: #8d879c; font-size: 0.65em; font-style: normal; }
.itt-certificate header > p { margin: 0; color: #756f85; font-family: Georgia, serif; font-size: clamp(10px, 1.45vw, 16px); letter-spacing: 0.08em; text-transform: uppercase; }
.itt-certificate-content { position: relative; z-index: 1; display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.itt-certificate-content > p { max-width: 660px; margin-bottom: 1.4%; color: #777180; font-family: Georgia, serif; font-size: clamp(10px, 1.55vw, 17px); }
.itt-certificate-content h2 { max-width: 780px; margin: 0; overflow: hidden; color: #322d49; font-family: Georgia, "Times New Roman", serif; font-size: clamp(28px, 5vw, 58px); font-weight: 500; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.itt-name-line { width: min(70%, 620px); height: 1px; margin: 1.1% 0 1.7%; background: linear-gradient(90deg, transparent, #8b7eab, transparent); }
.itt-certificate-score { display: flex; align-items: baseline; gap: 10px; margin: 0.2% 0 2%; color: #6558a8; }
.itt-certificate-score strong { font-family: Georgia, serif; font-size: clamp(36px, 6.2vw, 72px); font-weight: 500; line-height: 1; }
.itt-certificate-score span { color: #777180; font-size: clamp(10px, 1.5vw, 16px); }
.itt-certificate-details { display: flex; align-items: center; justify-content: center; gap: clamp(28px, 7vw, 85px); }
.itt-certificate-details > div { display: grid; }
.itt-certificate-details small { color: #918b98; font-size: clamp(7px, 0.9vw, 10px); letter-spacing: 0.1em; text-transform: uppercase; }
.itt-certificate-details b { color: #3c374e; font-size: clamp(10px, 1.45vw, 16px); }
.itt-certificate footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 30px; }
.itt-certificate footer > div { display: grid; justify-items: center; }
.itt-certificate footer > div:first-child { justify-items: start; }
.itt-certificate footer > div:last-child { justify-items: end; }
.itt-certificate footer > div > span { width: min(100%, 180px); height: 1px; margin-bottom: 6px; background: #9d96a8; }
.itt-certificate footer b { color: #4d4859; font-family: Georgia, serif; font-size: clamp(9px, 1.1vw, 12px); font-weight: 500; }
.itt-certificate footer small { color: #96909d; font-size: clamp(6px, 0.75vw, 8px); letter-spacing: 0.08em; text-transform: uppercase; }
.itt-certificate-seal { display: grid; width: clamp(62px, 8vw, 88px); aspect-ratio: 1; place-items: center; border: 2px solid #7768b7; border-radius: 50%; outline: 1px dashed #7768b7; outline-offset: -6px; color: #6558a8; }
.itt-certificate-seal b { margin-top: -7px; font-family: var(--itt-font) !important; font-size: clamp(6px, 0.8vw, 9px) !important; font-weight: 800 !important; letter-spacing: 0.08em; text-transform: uppercase; }
.itt-certificate-id { position: absolute; right: 3%; bottom: 1.2%; margin: 0; color: #aaa3ae; font-family: var(--itt-mono); font-size: clamp(6px, 0.75vw, 8px); }
.itt-certificate-note { display: flex; align-items: center; justify-content: center; gap: 8px; max-width: 900px; margin: 21px auto 0; color: var(--itt-muted); font-size: 11px; text-align: center; }
.itt-certificate-bottom-actions { display: flex; justify-content: center; gap: 10px; margin-top: 25px; }
.itt-public-certificate-page .itt-certificate-toolbar { align-items: center; }
.itt-public-certificate-page .itt-certificate-toolbar h1 { margin: 0; font-size: 26px; }

/* Public result */
.itt-public-result-page { min-height: 720px; padding: 80px 0 100px; background: radial-gradient(circle at 50% 10%, rgba(101, 88, 245, 0.15), transparent 30%), var(--itt-bg); }
.itt-public-result-wrap { max-width: 680px; text-align: center; }
.itt-public-result-card { overflow: hidden; border: 1px solid var(--itt-border); border-radius: 24px; background: var(--itt-surface); box-shadow: var(--itt-shadow-lg); text-align: left; }
.itt-public-result-card > header { display: flex; align-items: center; gap: 12px; padding: 20px 22px; border-bottom: 1px solid var(--itt-border); }
.itt-result-avatar { display: grid; width: 43px; height: 43px; place-items: center; border-radius: 50%; background: var(--itt-primary-soft); color: var(--itt-primary-text); font-weight: 800; }
.itt-public-result-card header > div { display: grid; }
.itt-public-result-card header p { margin: 0; color: var(--itt-heading); font-size: 14px; font-weight: 730; }
.itt-public-result-card header div span { color: var(--itt-muted); font-size: 10px; }
.itt-verified-pill { display: flex; align-items: center; gap: 5px; padding: 5px 8px; margin-left: auto; border-radius: 20px; background: var(--itt-success-soft); color: var(--itt-success); font-size: 9px; font-weight: 750; text-transform: uppercase; }
.itt-public-score { display: grid; justify-content: center; padding: 38px 20px 24px; text-align: center; }
.itt-public-score strong { color: var(--itt-primary-text); font: 800 78px/1 var(--itt-mono); letter-spacing: -0.08em; }
.itt-public-score span { color: var(--itt-muted); font-size: 11px; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; }
.itt-public-result-card .itt-result-metrics { margin-bottom: 26px; }
.itt-public-result-meta { display: flex; justify-content: center; gap: 24px; padding: 15px 20px; border-top: 1px solid var(--itt-border); background: var(--itt-surface-2); }
.itt-public-result-meta span { display: flex; align-items: center; gap: 7px; color: var(--itt-muted); font-size: 10px; }
.itt-public-result-actions { display: flex; justify-content: center; gap: 9px; margin-top: 22px; }
.itt-public-share { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.itt-public-share > span { width: 100%; color: var(--itt-muted); font-size: 10px; }
.itt-public-share a { padding: 5px 9px; border-radius: 7px; background: var(--itt-surface); color: var(--itt-muted); font-size: 10px; font-weight: 650; }
.itt-public-result-note { margin-top: 20px; color: var(--itt-muted); font-size: 11px; }

/* FAQ and contact */
.itt-faq-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-items: start; gap: 60px; }
.itt-faq-list { display: grid; gap: 10px; }
.itt-faq-item { overflow: hidden; border: 1px solid var(--itt-border); border-radius: var(--itt-radius); background: var(--itt-surface); }
.itt-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 19px 21px; cursor: pointer; color: var(--itt-heading); font-size: 14px; font-weight: 700; list-style: none; }
.itt-faq-item summary::-webkit-details-marker { display: none; }
.itt-faq-item summary i { position: relative; width: 18px; height: 18px; border-radius: 50%; background: var(--itt-surface-2); }
.itt-faq-item summary i::before,
.itt-faq-item summary i::after { position: absolute; top: 8px; left: 5px; width: 8px; height: 2px; border-radius: 2px; background: var(--itt-muted); content: ""; }
.itt-faq-item summary i::after { transform: rotate(90deg); transition: transform 160ms ease; }
.itt-faq-item[open] summary { color: var(--itt-primary-text); }
.itt-faq-item[open] summary i::after { transform: rotate(0); }
.itt-faq-item > div { padding: 0 21px 19px; }
.itt-faq-item p { margin: 0; color: var(--itt-muted); font-size: 13px; line-height: 1.75; }
.itt-faq-aside { position: sticky; top: 105px; padding: 28px; border-radius: var(--itt-radius-lg); background: linear-gradient(145deg, #22203d, #17182b); box-shadow: var(--itt-shadow); color: #b9bbcd; }
.itt-faq-aside > span { display: grid; width: 52px; height: 52px; margin-bottom: 21px; place-items: center; border-radius: 14px; background: rgba(101, 88, 245, 0.2); color: #aaa1ff; }
.itt-faq-aside h2 { color: #fff; font-size: 22px; }
.itt-faq-aside p { font-size: 13px; }
.itt-faq-aside .itt-button { width: 100%; margin: 8px 0 16px; }
.itt-faq-aside .itt-text-link { display: block; color: #aaa1ff; text-align: center; }
.itt-contact-grid { display: grid; grid-template-columns: 0.82fr 1.18fr; align-items: start; gap: 80px; }
.itt-contact-copy h2 { margin-bottom: 16px; font-size: 39px; }
.itt-contact-copy > p { color: var(--itt-muted); }
.itt-contact-reasons { display: grid; gap: 16px; margin: 30px 0; }
.itt-contact-reasons > div { display: flex; gap: 13px; }
.itt-contact-reasons > div > span { display: grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; border-radius: 11px; background: var(--itt-primary-soft); color: var(--itt-primary-text); }
.itt-contact-reasons p { display: grid; margin: 0; color: var(--itt-muted); font-size: 11px; }
.itt-contact-reasons b { color: var(--itt-heading); font-size: 13px; }
.itt-response-note { display: flex; align-items: center; gap: 8px; color: var(--itt-muted); font-size: 11px; }
.itt-contact-card { padding: 31px; border: 1px solid var(--itt-border); border-radius: var(--itt-radius-lg); background: var(--itt-surface); box-shadow: var(--itt-shadow); }
.itt-contact-card form { display: grid; gap: 17px; }
.itt-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.itt-form-notice { padding: 12px 14px; margin-bottom: 18px; border-radius: 10px; font-size: 12px; }
.itt-form-notice.is-success { background: var(--itt-success-soft); color: var(--itt-success); }
.itt-form-notice.is-error { background: var(--itt-danger-soft); color: var(--itt-danger); }
.itt-honeypot { position: absolute; left: -10000px; }
.itt-form-privacy { display: flex; align-items: center; justify-content: center; gap: 6px; margin: -4px 0 0; color: var(--itt-muted); font-size: 10px; }

/* Blog, search, comments, 404 */
.itt-page-header { margin-bottom: 34px; }
.itt-page-header h1 { font-size: 46px; }
.itt-post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.itt-post-card { overflow: hidden; border: 1px solid var(--itt-border); border-radius: var(--itt-radius-lg); background: var(--itt-surface); box-shadow: var(--itt-shadow-sm); }
.itt-post-card-media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--itt-surface-2); }
.itt-post-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 300ms ease; }
.itt-post-card:hover .itt-post-card-media img { transform: scale(1.025); }
.itt-post-card-body { padding: 22px; }
.itt-post-meta { margin-bottom: 8px; color: var(--itt-muted-2); font-size: 9px; font-weight: 750; letter-spacing: 0.06em; text-transform: uppercase; }
.itt-post-card h2 { margin-bottom: 9px; font-size: 20px; }
.itt-post-card h2 a { color: var(--itt-heading); }
.itt-post-card p:not(.itt-post-meta) { color: var(--itt-muted); font-size: 12px; }
.itt-article-hero { padding: 64px 0 42px; background: linear-gradient(180deg, var(--itt-surface), var(--itt-bg)); text-align: center; }
.itt-article-head { max-width: 890px; }
.itt-article-head .itt-breadcrumbs { margin-bottom: 35px; }
.itt-article-head h1 { margin-bottom: 18px; font-size: clamp(40px, 5vw, 61px); }
.itt-article-meta { display: flex; justify-content: center; gap: 20px; color: var(--itt-muted); font-size: 11px; }
.itt-article-content { margin-inline: auto; }
.itt-article-footer { display: flex; align-items: center; justify-content: space-between; max-width: 820px; padding-top: 30px; margin: 35px auto 0; border-top: 1px solid var(--itt-border); }
.itt-tag-list { display: flex; flex-wrap: wrap; gap: 6px; }
.itt-tag-list a { padding: 5px 8px; border-radius: 6px; background: var(--itt-surface-2); color: var(--itt-muted); font-size: 10px; }
.itt-comments { max-width: 820px; padding-top: 45px; margin: 45px auto 0; border-top: 1px solid var(--itt-border); }
.itt-comment-list { padding: 0; list-style: none; }
.itt-comment-list .comment-body { padding: 18px; margin-bottom: 10px; border: 1px solid var(--itt-border); border-radius: var(--itt-radius); background: var(--itt-surface); }
.itt-comment-list .avatar { border-radius: 50%; }
.itt-comment-list .comment-meta { font-size: 11px; }
.itt-comment-list .comment-content { margin-top: 10px; color: var(--itt-muted); font-size: 13px; }
.comment-form { display: grid; gap: 10px; }
.comment-form input,
.comment-form textarea { width: 100%; padding: 11px; border: 1px solid var(--itt-border); border-radius: 9px; background: var(--itt-surface); }
.comment-form .submit { width: auto; padding: 11px 18px; border: 0; border-radius: 9px; background: var(--itt-primary); color: #fff; font-weight: 700; }
.itt-search-results { display: grid; gap: 13px; max-width: 850px; margin: 0 auto; }
.itt-search-result { padding: 22px; border: 1px solid var(--itt-border); border-radius: var(--itt-radius); background: var(--itt-surface); }
.itt-search-result h2 { margin-bottom: 7px; font-size: 21px; }
.itt-search-result h2 a { color: var(--itt-heading); }
.itt-search-result > p:last-child { margin: 0; color: var(--itt-muted); font-size: 13px; }
.itt-search-form { display: flex; width: min(100%, 550px); gap: 8px; margin: 25px auto 0; }
.itt-search-form label { flex: 1; }
.itt-search-form button { padding: 10px 18px; border-radius: 10px; background: var(--itt-primary); color: #fff; font-weight: 700; }
.itt-error-page { display: grid; min-height: 690px; place-items: center; padding: 80px 0; text-align: center; }
.itt-error-page .itt-container { max-width: 680px; }
.itt-error-code { display: flex; align-items: center; justify-content: center; gap: 17px; margin-bottom: 24px; color: var(--itt-primary-text); }
.itt-error-code span { color: var(--itt-heading); font: 800 90px/1 var(--itt-mono); }
.itt-error-code .itt-icon { padding: 13px; border-radius: 18px; background: var(--itt-primary-soft); }
.itt-error-page h1 { margin-bottom: 13px; font-size: 44px; }
.itt-error-page > .itt-container > p:not(.itt-eyebrow) { color: var(--itt-muted); }
.itt-error-page .itt-hero-actions { justify-content: center; }

/* Footer */
.itt-site-footer { border-top: 1px solid rgba(255, 255, 255, 0.07); background: #11121f; color: #9a9db1; }
.itt-footer-grid { display: grid; grid-template-columns: 1.4fr 2.6fr; gap: 48px; padding: 64px 0 44px; }
.itt-footer-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 30px 26px; }
.itt-footer-col { min-width: 0; }
.itt-footer-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.itt-footer-badges span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 999px; background: rgba(255, 255, 255, 0.03); color: #b9bccf; font-size: 10px; font-weight: 650; }
.itt-footer-badges .itt-icon { color: #8bf0c2; }
.itt-footer-widget { grid-column: 1 / -1; }
.itt-brand-footer { margin-bottom: 16px; color: #fff; }
.itt-brand-footer:hover { color: #fff; }
.itt-footer-brand p { max-width: 340px; color: #85889e; font-size: 12px; line-height: 1.8; }
.itt-footer-title { margin-bottom: 18px; color: #f2f3f8; font-size: 12px; letter-spacing: 0.02em; }
.itt-footer-links { display: grid; gap: 10px; padding: 0; margin: 0; list-style: none; }
.itt-footer-links a { color: #8e91a6; font-size: 11px; }
.itt-footer-links a:hover { color: #b1a9ff; }
.itt-footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 25px; padding: 20px 0; border-top: 1px solid rgba(255, 255, 255, 0.07); }
.itt-footer-bottom p { margin: 0; color: #6f7288; font-size: 10px; }
.itt-footer-status { display: flex; align-items: center; gap: 7px; }
.itt-footer-status span { width: 6px; height: 6px; border-radius: 50%; background: #38bf88; }

/* Pagination */
.navigation.pagination { grid-column: 1 / -1; margin-top: 25px; }
.nav-links { display: flex; justify-content: center; gap: 5px; }
.page-numbers { display: grid; min-width: 38px; height: 38px; place-items: center; padding: 0 10px; border: 1px solid var(--itt-border); border-radius: 9px; background: var(--itt-surface); color: var(--itt-muted); font-size: 11px; font-weight: 700; }
.page-numbers.current,
.page-numbers:hover { border-color: var(--itt-primary); background: var(--itt-primary); color: #fff; }

/* Dark-specific polish */
:root[data-theme="dark"] .itt-code-window { border-color: rgba(255, 255, 255, 0.08); }
:root[data-theme="dark"] .itt-button-dark { border-color: #34374d; background: #34374d; }
:root[data-theme="dark"] .itt-passage span.is-correct { color: #f0f1f8; }
:root[data-theme="dark"] .itt-certificate { color-scheme: light; }
:root[data-theme="dark"] .itt-faq-aside { border: 1px solid #343653; }

/* Responsive */
@media (max-width: 1080px) {
  .itt-hero-grid { grid-template-columns: minmax(0, 1fr) 420px; gap: 45px; }
  .itt-hero-copy h1 { font-size: clamp(42px, 5vw, 60px); }
  .itt-split-feature { gap: 48px; }
  .itt-stat-grid { grid-template-columns: repeat(2, 1fr); }
  .itt-footer-grid { grid-template-columns: 1fr; gap: 36px; }
}

@media (max-width: 959px) {
  .admin-bar .itt-site-header { top: 46px; }
  .itt-primary-nav { position: fixed; inset: 76px 0 auto; max-height: calc(100dvh - 76px); padding: 13px 20px 25px; overflow-y: auto; border-bottom: 1px solid var(--itt-border); background: var(--itt-surface); box-shadow: var(--itt-shadow); visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity 170ms ease, transform 170ms ease, visibility 170ms; }
  .admin-bar .itt-primary-nav { top: 122px; }
  .itt-primary-nav.is-open { visibility: visible; opacity: 1; transform: translateY(0); }
  .itt-nav-list { display: grid; align-items: stretch; gap: 3px; }
  .itt-nav-list a { min-height: 46px; padding-inline: 14px; }
  .itt-nav-list .sub-menu { position: static; display: block; min-width: 0; padding: 0 0 0 15px; border: 0; background: transparent; box-shadow: none; visibility: visible; opacity: 1; transform: none; }
  .itt-menu-toggle { display: inline-grid; }
  .itt-hero { padding-top: 75px; }
  .itt-hero-grid { grid-template-columns: 1fr; gap: 55px; }
  .itt-hero-copy { max-width: 760px; text-align: center; margin-inline: auto; }
  .itt-hero-copy .itt-eyebrow,
  .itt-hero-proof,
  .itt-hero-actions { justify-content: center; }
  .itt-hero-lead { margin-inline: auto; }
  .itt-hero-visual { width: min(100%, 580px); margin-inline: auto; }
  .itt-mode-grid { grid-template-columns: 1fr 1fr; }
  .itt-mode-card-featured { grid-column: 1 / -1; min-height: 250px; }
  .itt-split-feature { grid-template-columns: 1fr; }
  .itt-feature-copy { max-width: 700px; }
  .itt-dashboard-preview { width: min(100%, 720px); }
  .itt-practice-grid { grid-template-columns: repeat(2, 1fr); }
  .itt-info-grid { grid-template-columns: 1fr; gap: 38px; }
  .itt-info-card { position: static; }
  .itt-dashboard-grid { grid-template-columns: 1fr; }
  .itt-records-panel dl { display: grid; grid-template-columns: repeat(2, 1fr); }
  .itt-records-panel dl > div:nth-child(3) { border-bottom: 0; }
  .itt-records-panel dl > div:nth-child(even) { border-left: 1px solid var(--itt-border); }
  .itt-faq-layout { grid-template-columns: 1fr; gap: 35px; }
  .itt-faq-aside { position: static; }
  .itt-contact-grid { grid-template-columns: 1fr; gap: 45px; }
  .itt-contact-copy { max-width: 700px; }
  .itt-footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .itt-footer-cols { grid-template-columns: repeat(2, 1fr); }
  .itt-footer-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
}

@media (max-width: 767px) {
  .itt-container { width: min(calc(100% - 28px), var(--itt-container)); }
  .itt-section { padding: 70px 0; }
  .itt-site-header { height: 68px; }
  .itt-primary-nav { top: 68px; }
  .admin-bar .itt-primary-nav { top: 114px; }
  .itt-brand-mark { width: 36px; height: 36px; }
  .itt-brand-name { font-size: 17px; }
  .itt-account-link span { display: none; }
  .itt-account-link { width: 42px; height: 42px; justify-content: center; padding: 0; border: 1px solid var(--itt-border); }
  .itt-register-link { display: none; }
  .itt-hero { padding: 60px 0 122px; }
  .itt-hero-copy h1 { font-size: clamp(39px, 11vw, 54px); }
  .itt-hero-lead { font-size: 16px; }
  .itt-code-window pre { min-height: 220px; padding: 30px 20px 22px; font-size: 11px; }
  .itt-workspace-wrap { margin-top: -63px; }
  .itt-typing-workspace { border-radius: 17px; }
  .itt-workspace-topbar { align-items: flex-start; padding: 18px; }
  .itt-workspace-actions { gap: 2px; }
  .itt-tool-button { width: 38px; height: 38px; justify-content: center; padding: 0; }
  .itt-tool-button span { display: none; }
  .itt-keyword-toolbar { align-items: stretch; flex-direction: column; gap: 11px; padding: 14px 18px; }
  .itt-keyword-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
  .itt-keyword-tags { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; gap: 8px; }
  .itt-keyword-tag { width: 100%; min-height: 42px; padding-inline: 12px; }
  .itt-test-settings { display: grid; grid-template-columns: 1fr 1fr; padding: 15px 18px; }
  .itt-setting-group { grid-column: 1 / -1; }
  .itt-segmented-control { width: 100%; }
  .itt-segmented-control button { flex: 1; padding-inline: 7px; }
  .itt-select-field { min-width: 0; }
  .itt-live-score { grid-template-columns: repeat(2, 1fr); }
  .itt-live-score > div { min-height: 70px; border-bottom: 1px solid var(--itt-border); }
  .itt-live-score > div:nth-child(3) { border-left: 0; }
  .itt-live-score > div:nth-child(n+3) { border-bottom: 0; }
  .itt-score-primary { justify-content: center !important; padding-left: 20px !important; }
  .itt-passage-shell { height: 210px; }
  .itt-passage { padding: 25px 20px 55px; font-size: 18px; line-height: 1.75; }
  .itt-input-label { padding-inline: 18px; }
  .itt-typing-input { width: calc(100% - 36px); margin-inline: 18px; }
  .itt-workspace-footer { align-items: flex-start; padding-inline: 18px; }
  .itt-workspace-footer > p { display: none; }
  .itt-virtual-keyboard { padding: 12px 10px 15px; }
  .itt-keyboard-caption { margin-bottom: 11px; font-size: 10px; }
  .itt-keyboard-inner { gap: 5px; }
  .itt-keyboard-row { gap: 4px; }
  .itt-key { height: clamp(29px, 7.6vw, 42px); border-bottom-width: 2px; border-radius: 7px; font-size: clamp(9px, 2.5vw, 12px); }
  .itt-resume-banner { align-items: flex-start; flex-direction: column; }
  .itt-result-metrics { grid-template-columns: repeat(2, 1fr); }
  .itt-result-metrics > div:nth-child(3) { border-left: 0; border-top: 1px solid var(--itt-border); }
  .itt-result-metrics > div:nth-child(4) { border-top: 1px solid var(--itt-border); }
  .itt-result-identity { grid-template-columns: 1fr; }
  .itt-section-heading { align-items: flex-start; flex-direction: column; gap: 15px; }
  .itt-mode-grid,
  .itt-step-grid { grid-template-columns: 1fr; }
  .itt-mode-card-featured { grid-column: auto; }
  .itt-mode-card { min-height: 245px; }
  .itt-trust-strip .itt-container { align-items: flex-start; flex-direction: column; padding-block: 22px; }
  .itt-trust-strip ul { width: 100%; justify-content: space-between; gap: 10px; }
  .itt-trust-strip li { display: grid; gap: 0; }
  .itt-page-hero { padding: 49px 0 78px; }
  .itt-page-hero h1 { font-size: clamp(35px, 10vw, 48px); }
  .itt-page-hero .itt-container > p:not(.itt-eyebrow) { font-size: 15px; }
  .itt-practice-grid { grid-template-columns: 1fr; }
  .itt-practice-card { min-height: 215px; }
  .itt-dashboard-hero-row { align-items: flex-start; flex-direction: column; }
  .itt-dashboard-toolbar { align-items: flex-start; flex-direction: column; }
  .itt-dashboard-toolbar .itt-inline-actions { width: 100%; justify-content: space-between; }
  .itt-stat-grid { grid-template-columns: 1fr 1fr; }
  .itt-stat-grid article { padding: 17px; }
  .itt-stat-icon { display: none; }
  .itt-chart-wrap { min-height: 290px; }
  .itt-chart-wrap canvas { height: 270px; }
  .itt-account-notice { align-items: flex-start; flex-wrap: wrap; }
  .itt-account-notice .itt-inline-actions { margin-left: 56px; }
  .itt-leaderboard-controls { align-items: stretch; flex-direction: column; margin-bottom: 40px; }
  .itt-board-groups button { flex: 1; justify-content: center; }
  .itt-podium { gap: 7px; }
  .itt-podium-card { min-height: 195px; padding: 27px 8px 15px; }
  .itt-podium-card.rank-1 { min-height: 225px; padding-top: 32px; }
  .itt-podium-avatar { width: 44px; height: 44px; }
  .rank-1 .itt-podium-avatar { width: 52px; height: 52px; }
  .itt-podium-card h2 { max-width: 100px; font-size: 11px; }
  .itt-podium-card strong { font-size: 19px; }
  .itt-board-footer { align-items: flex-start; flex-direction: column; }
  .itt-certificate-page { overflow-x: auto; }
  .itt-certificate-toolbar { align-items: stretch; flex-direction: column; }
  .itt-certificate-toolbar > .itt-field { width: 100%; }
  .itt-certificate { min-width: 680px; }
  .itt-certificate-note { min-width: 680px; }
  .itt-public-result-actions { flex-direction: column; }
  .itt-public-result-actions .itt-button { width: 100%; }
  .itt-form-row { grid-template-columns: 1fr; }
  .itt-post-grid { grid-template-columns: 1fr; }
  .itt-article-footer { align-items: flex-start; flex-direction: column; gap: 18px; }
  .itt-footer-grid { grid-template-columns: 1fr 1fr; }
  .itt-footer-brand { grid-column: 1 / -1; }
  .itt-footer-grid > div:nth-child(4) { grid-column: auto; }
}

@media (max-width: 520px) {
  .itt-header-inner { gap: 9px; }
  .itt-brand-name { font-size: 15px; }
  .itt-header-actions { gap: 4px; }
  .itt-header-actions .itt-icon-button,
  .itt-account-link { width: 39px; height: 39px; }
  .itt-hero-actions .itt-button { width: 100%; }
  .itt-hero-proof { justify-content: flex-start; gap: 9px 14px; }
  .itt-hero-proof li { font-size: 10px; }
  .itt-code-window { transform: none; }
  .itt-mini-result { padding-inline: 14px; }
  .itt-keyword-heading { display: grid; justify-content: start; }
  .itt-keyword-tags { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .itt-keyword-tag:last-child { grid-column: 1 / -1; }
  .itt-test-settings { grid-template-columns: 1fr; }
  .itt-setting-group { grid-column: auto; }
  .itt-live-score > div { padding: 11px; gap: 8px; }
  .itt-live-score strong { font-size: 21px; }
  .itt-score-primary strong { font-size: 26px; }
  .itt-passage { font-size: 16px; }
  .itt-secondary-stats { justify-content: space-between; width: 100%; gap: 7px; }
  .itt-secondary-stats span { display: grid; text-align: center; }
  .itt-result-actions .itt-button { width: 100%; }
  .itt-dialog-actions-split { padding-inline: 18px; }
  .itt-trust-strip ul { display: grid; grid-template-columns: repeat(2, 1fr); }
  .itt-stat-grid { grid-template-columns: 1fr; }
  .itt-records-panel dl { grid-template-columns: 1fr; }
  .itt-records-panel dl > div:nth-child(3) { border-bottom: 1px solid var(--itt-border); }
  .itt-records-panel dl > div:nth-child(even) { border-left: 0; }
  .itt-dashboard-toolbar .itt-segmented-control { width: 100%; }
  .itt-account-notice .itt-inline-actions { width: 100%; margin-left: 0; }
  .itt-account-notice .itt-button { width: 100%; margin-left: 0; }
  .itt-podium-card h2 { max-width: 72px; }
  .itt-podium-card p { font-size: 8px; }
  .itt-podium-link { display: none; }
  .itt-public-result-card .itt-result-metrics { margin-inline: 14px; }
  .itt-public-result-meta { align-items: center; flex-direction: column; gap: 7px; }
  .itt-contact-card { padding: 21px; }
  .itt-footer-grid { grid-template-columns: 1fr 1fr; gap: 35px 20px; }
  .itt-footer-bottom { align-items: flex-start; flex-direction: column; }
  .itt-error-code span { font-size: 66px; }
  .itt-error-page h1 { font-size: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

@media print {
  @page { size: A4 landscape; margin: 8mm; }
  :root { --itt-bg: #fff; --itt-surface: #fff; }
  body { background: #fff !important; }
  .itt-site-header,
  .itt-site-footer,
  .itt-certificate-toolbar,
  .itt-certificate-note,
  .itt-certificate-bottom-actions,
  #wpadminbar { display: none !important; }
  .itt-public-certificate-page,
  .itt-certificate-page { padding: 0 !important; }
  .itt-container { width: 100% !important; max-width: none !important; }
  .itt-certificate { width: 100% !important; min-width: 0 !important; max-width: none !important; height: auto !important; box-shadow: none !important; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

/* Duration intent pages and custom timing */
.itt-nav-list .sub-menu { max-height: min(70vh, 520px); overflow-y: auto; }
.itt-duration-settings { flex: 0 1 auto; }
.itt-duration-field { display: grid; min-width: 174px; gap: 7px; }
.itt-duration-field > span:first-child { color: var(--itt-text); font-size: 12px; font-weight: 720; }
.itt-duration-field > small { color: var(--itt-muted-2); font-size: 9px; line-height: 1; }
.itt-duration-input-group { display: flex; gap: 6px; }
.itt-duration-input-group input {
  width: 72px;
  min-height: 42px;
  padding: 8px 9px;
  border: 1px solid var(--itt-border-strong);
  border-radius: 9px;
  outline: 0;
  background: var(--itt-surface);
  color: var(--itt-heading);
  font: 650 13px var(--itt-mono);
}
.itt-duration-input-group input:focus { border-color: var(--itt-primary); box-shadow: 0 0 0 3px rgba(101, 88, 245, 0.13); }
.itt-duration-input-group .itt-button { min-height: 42px; padding-inline: 11px; }
.itt-duration-directory { border-bottom: 1px solid var(--itt-border); background: var(--itt-surface); }
.itt-duration-directory .itt-container { display: flex; min-height: 82px; align-items: center; gap: 22px; padding-block: 14px; }
.itt-duration-directory strong { flex: 0 0 auto; color: var(--itt-heading); font-size: 12px; }
.itt-duration-directory ul { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; list-style: none; }
.itt-duration-directory a { display: inline-flex; min-height: 34px; align-items: center; padding: 6px 10px; border: 1px solid var(--itt-border); border-radius: 8px; background: var(--itt-bg); color: var(--itt-muted); font-size: 10px; font-weight: 700; }
.itt-duration-directory a:hover,
.itt-duration-directory a.is-current { border-color: color-mix(in srgb, var(--itt-primary) 42%, var(--itt-border)); background: var(--itt-primary-soft); color: var(--itt-primary-text); }

/* Branded front-end authentication */
.itt-auth-page { min-height: calc(100vh - 76px); padding: 86px 0 105px; background: radial-gradient(circle at 12% 15%, rgba(101, 88, 245, 0.13), transparent 30%), radial-gradient(circle at 87% 85%, rgba(22, 166, 115, 0.09), transparent 28%), var(--itt-bg); }
.itt-auth-layout { display: grid; grid-template-columns: minmax(0, 0.88fr) minmax(430px, 0.72fr); align-items: center; gap: 88px; max-width: 1060px; }
.itt-auth-copy h1 { max-width: 620px; margin-bottom: 21px; font-size: clamp(39px, 5vw, 59px); }
.itt-auth-copy > p:not(.itt-eyebrow) { max-width: 610px; color: var(--itt-muted); font-size: 16px; line-height: 1.8; }
.itt-auth-copy .itt-check-list { margin-bottom: 0; }
.itt-auth-stat-row { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 530px; margin-top: 34px; overflow: hidden; border: 1px solid var(--itt-border); border-radius: var(--itt-radius); background: var(--itt-surface); box-shadow: var(--itt-shadow-sm); }
.itt-auth-stat-row span { display: grid; padding: 20px; border-left: 1px solid var(--itt-border); }
.itt-auth-stat-row span:first-child { border-left: 0; }
.itt-auth-stat-row strong { color: var(--itt-primary-text); font: 800 17px var(--itt-mono); }
.itt-auth-stat-row small { color: var(--itt-muted); font-size: 10px; }
.itt-auth-card { overflow: hidden; border: 1px solid var(--itt-border); border-radius: var(--itt-radius-lg); background: var(--itt-surface); box-shadow: var(--itt-shadow-lg); }
.itt-auth-card > header { display: flex; align-items: flex-start; gap: 13px; padding: 24px 27px; border-bottom: 1px solid var(--itt-border); background: color-mix(in srgb, var(--itt-primary-soft) 35%, var(--itt-surface)); }
.itt-auth-card > header > span { display: grid; width: 46px; height: 46px; flex: 0 0 auto; place-items: center; border-radius: 13px; background: var(--itt-primary-soft); color: var(--itt-primary-text); }
.itt-auth-card > header h1,
.itt-auth-card > header h2 { margin: 0 0 3px; font-size: 21px; }
.itt-auth-card > header .itt-eyebrow { margin-bottom: 5px; }
.itt-auth-card > header p:not(.itt-eyebrow) { margin: 0; color: var(--itt-muted); font-size: 11px; line-height: 1.6; }
.itt-auth-card > .itt-form-notice { margin: 22px 27px 0; }
.itt-auth-card > .itt-button { margin: 4px 27px 28px; }
.itt-auth-form { display: grid; gap: 17px; padding: 26px 27px; }
.itt-auth-form .itt-field small { color: var(--itt-muted-2); font-size: 9px; line-height: 1.5; }
.itt-auth-form > .itt-button { width: 100%; margin-top: 2px; }
.itt-auth-form-options { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.itt-auth-form-options > a { font-size: 11px; font-weight: 700; }
.itt-auth-consent { align-items: flex-start; line-height: 1.6; }
.itt-auth-consent input { flex: 0 0 auto; margin-top: 2px; }
.itt-auth-consent a { font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.itt-auth-card > footer { padding: 17px 25px; border-top: 1px solid var(--itt-border); background: var(--itt-surface-2); text-align: center; }
.itt-auth-card > footer p { margin: 0; color: var(--itt-muted); font-size: 11px; }
.itt-auth-card > footer a { font-weight: 720; }
.itt-form-notice ul { padding-left: 18px; margin: 0; }
.itt-form-notice li + li { margin-top: 4px; }
.itt-auth-page-compact { display: grid; place-items: center; }
.itt-auth-card-single { width: min(100%, 540px); margin-inline: auto; }
.itt-auth-card-single > header { padding: 28px; }
.itt-auth-card-single > header h1 { font-size: 25px; }

/* Front-end account profile */
.itt-account-page { padding: 44px 0 100px; }
.itt-account-page > .itt-form-notice { max-width: 960px; margin: 0 auto 18px; }
.itt-account-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); align-items: start; gap: 20px; max-width: 960px; margin-inline: auto; }
.itt-account-profile,
.itt-account-form-card { border: 1px solid var(--itt-border); border-radius: var(--itt-radius-lg); background: var(--itt-surface); box-shadow: var(--itt-shadow-sm); }
.itt-account-profile { display: flex; flex-direction: column; align-items: center; padding: 29px 25px; text-align: center; }
.itt-account-avatar { display: grid; width: 78px; height: 78px; margin-bottom: 15px; place-items: center; border-radius: 50%; background: linear-gradient(145deg, var(--itt-primary), #7d70ff); box-shadow: 0 10px 25px rgba(101, 88, 245, 0.25); color: #fff; font-size: 28px; font-weight: 800; }
.itt-account-profile h2 { margin-bottom: 1px; font-size: 21px; }
.itt-account-profile > p { color: var(--itt-muted); font: 11px var(--itt-mono); }
.itt-account-profile dl { width: 100%; margin: 17px 0 23px; border-block: 1px solid var(--itt-border); }
.itt-account-profile dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--itt-border); text-align: left; }
.itt-account-profile dl > div:last-child { border: 0; }
.itt-account-profile dt { color: var(--itt-muted); font-size: 10px; }
.itt-account-profile dd { margin: 0; color: var(--itt-heading); font-size: 10px; font-weight: 700; text-align: right; }
.itt-account-profile .itt-button { width: 100%; }
.itt-account-logout { margin-top: 18px; color: var(--itt-danger); }
.itt-account-form-card { overflow: hidden; }
.itt-account-form-card > header { display: flex; align-items: center; justify-content: space-between; padding: 21px 25px; border-bottom: 1px solid var(--itt-border); }
.itt-account-form-card > header h2 { margin: 1px 0 0; font-size: 19px; }
.itt-account-form-card > header > .itt-icon { color: var(--itt-primary-text); }
.itt-account-form-card .itt-auth-form { padding: 25px; }
.itt-account-password-heading { padding-top: 8px; border-top: 1px solid var(--itt-border); }
.itt-account-password-heading h3 { margin: 12px 0 2px; font-size: 16px; }
.itt-account-password-heading p { margin: 0; color: var(--itt-muted); font-size: 10px; }
.itt-account-privacy-note { display: flex; align-items: center; justify-content: center; gap: 7px; max-width: 780px; margin: 23px auto 0; color: var(--itt-muted); font-size: 10px; text-align: center; }

@media (max-width: 959px) {
  .itt-auth-layout { grid-template-columns: 1fr; gap: 45px; max-width: 720px; }
  .itt-auth-copy { text-align: center; }
  .itt-auth-copy .itt-eyebrow,
  .itt-auth-copy .itt-check-list { justify-content: center; }
  .itt-auth-copy > p:not(.itt-eyebrow),
  .itt-auth-stat-row { margin-inline: auto; }
}

@media (max-width: 767px) {
  .itt-test-settings { align-items: end; }
  .itt-duration-settings { grid-column: 1 / -1; }
  .itt-duration-field { min-width: 0; }
  .itt-duration-directory .itt-container { align-items: flex-start; flex-direction: column; gap: 10px; }
  .itt-auth-page { min-height: calc(100vh - 68px); padding: 56px 0 78px; }
  .itt-auth-layout { gap: 35px; }
  .itt-auth-copy h1 { font-size: clamp(36px, 10vw, 49px); }
  .itt-auth-copy .itt-check-list { text-align: left; }
  .itt-account-grid { grid-template-columns: 1fr; }
  .itt-account-profile { max-width: none; }
}

@media (max-width: 520px) {
  .itt-test-settings .itt-segmented-control { flex-wrap: wrap; }
  .itt-test-settings .itt-segmented-control button { min-width: calc(33.333% - 3px); }
  .itt-duration-input-group input { flex: 1; width: auto; }
  .itt-duration-input-group .itt-button { width: auto; }
  .itt-duration-directory ul { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
  .itt-duration-directory a { justify-content: center; }
  .itt-auth-stat-row span { padding: 14px 10px; }
  .itt-auth-card > header,
  .itt-auth-form { padding-inline: 20px; }
  .itt-auth-form-options { align-items: flex-start; flex-direction: column; }
  .itt-auth-card > .itt-form-notice { margin-inline: 20px; }
  .itt-account-form-card .itt-auth-form { padding-inline: 19px; }
}

/* Homepage SEO intent directory */
.itt-home-durations { padding-top: 78px; background: var(--itt-surface); }
.itt-duration-card-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.itt-duration-card-grid > a { display: flex; min-height: 116px; align-items: center; gap: 11px; padding: 18px; border: 1px solid var(--itt-border); border-radius: var(--itt-radius); background: var(--itt-bg); box-shadow: var(--itt-shadow-sm); color: var(--itt-text); transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease; }
.itt-duration-card-grid > a:hover { border-color: color-mix(in srgb, var(--itt-primary) 45%, var(--itt-border)); box-shadow: var(--itt-shadow); color: var(--itt-text); transform: translateY(-3px); }
.itt-duration-card-grid > a > strong { display: grid; width: 43px; height: 43px; flex: 0 0 auto; place-items: center; border-radius: 12px; background: var(--itt-primary-soft); color: var(--itt-primary-text); font: 800 18px var(--itt-mono); }
.itt-duration-card-grid > a > span { display: grid; min-width: 0; }
.itt-duration-card-grid b { color: var(--itt-heading); font-size: 11px; line-height: 1.35; }
.itt-duration-card-grid small { color: var(--itt-muted); font-size: 9px; line-height: 1.45; }
.itt-duration-card-grid > a > .itt-icon { margin-left: auto; color: var(--itt-primary-text); }
.itt-public-result-title { margin: 0 auto 24px; color: var(--itt-heading); font-size: clamp(30px, 4vw, 44px); }

@media (max-width: 1080px) {
  .itt-duration-card-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
  .itt-duration-card-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .itt-duration-card-grid { grid-template-columns: 1fr; }
  .itt-duration-card-grid > a { min-height: 92px; }
}


/* ITI catalog, page-test controls, and focused responsive polish */
.itt-iti-preview-copy {
  min-height: 245px;
  padding: 34px 31px 28px;
  color: #d8daeb;
  font: 500 14px/1.9 var(--itt-mono);
}
.itt-iti-preview-copy strong {
  display: inline-block;
  padding: 5px 9px;
  border: 1px solid rgba(135, 223, 183, 0.25);
  border-radius: 7px;
  background: rgba(135, 223, 183, 0.08);
  color: #87dfb7;
  font-size: 10px;
  letter-spacing: 0.08em;
}
.itt-iti-preview-copy p { margin: 18px 0 0; color: #d8daeb; }

.itt-test-kind-switch {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 25px;
  border-bottom: 1px solid var(--itt-border);
  background: var(--itt-surface);
}
.itt-test-kind-switch .itt-segmented-control button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; }
.itt-test-settings { flex-wrap: wrap; }
.itt-length-settings { display: flex; flex: 1 1 520px; align-items: end; gap: 16px; min-width: 0; }
.itt-length-settings > .itt-setting-group { flex: 1 1 310px; min-width: 0; }
.itt-length-settings > .itt-duration-field { flex: 0 1 190px; min-width: 160px; }
.itt-test-settings > .itt-select-field { flex: 1 1 175px; max-width: 235px; }
.itt-page-progress-copy {
  min-height: 34px;
  padding: 8px 25px;
  margin: 0;
  border-top: 1px solid color-mix(in srgb, var(--itt-primary) 18%, var(--itt-border));
  background: color-mix(in srgb, var(--itt-primary-soft) 48%, var(--itt-surface));
  color: var(--itt-primary-text);
  font: 700 11px/1.55 var(--itt-mono);
  text-align: right;
}
.itt-custom-count { margin: 8px 0 0 !important; color: var(--itt-muted) !important; font: 650 11px/1.4 var(--itt-mono) !important; text-align: right; }

.itt-test-directory-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.itt-test-directory-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 278px;
  flex-direction: column;
  align-items: flex-start;
  padding: 26px;
  overflow: hidden;
  border: 1px solid var(--itt-border);
  border-radius: var(--itt-radius-lg);
  background: var(--itt-surface);
  box-shadow: var(--itt-shadow-sm);
  color: var(--itt-text);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
.itt-test-directory-card::after { position: absolute; right: -58px; bottom: -65px; width: 150px; height: 150px; border-radius: 50%; background: var(--itt-primary-soft); content: ""; opacity: 0.55; pointer-events: none; }
.itt-test-directory-card:hover { border-color: color-mix(in srgb, var(--itt-primary) 45%, var(--itt-border)); box-shadow: var(--itt-shadow); color: var(--itt-text); transform: translateY(-4px); }
.itt-test-directory-card .itt-mode-icon { margin-bottom: 20px; }
.itt-test-directory-card small { margin-bottom: 8px; color: var(--itt-primary-text); font-size: 9px; font-weight: 800; letter-spacing: 0.075em; text-transform: uppercase; }
.itt-test-directory-card h3 { margin-bottom: 9px; font-size: 19px; overflow-wrap: anywhere; }
.itt-test-directory-card p { margin-bottom: 22px; color: var(--itt-muted); font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.itt-test-directory-card b { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 7px; margin-top: auto; color: var(--itt-primary-text); font-size: 11px; }
.itt-catalog-section { content-visibility: auto; contain-intrinsic-size: auto 700px; }
.itt-catalog-category,
.itt-catalog-page,
.itt-home-categories,
.itt-home-pages { background: var(--itt-surface); }
.itt-home-durations { background: var(--itt-bg); }
.itt-directory-custom { border-top: 1px solid var(--itt-border); background: var(--itt-surface); }
.itt-section-action { margin: 30px 0 0; text-align: center; }
.itt-footer-legal { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 7px 14px; }
.itt-footer-legal a { color: #85889e; font-size: 10px; }
.itt-footer-legal a:hover { color: #b1a9ff; }

@media (max-width: 959px) {
  .itt-test-directory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .itt-length-settings { flex-basis: 100%; }
  .itt-test-settings > .itt-select-field { max-width: none; }
}

@media (max-width: 767px) {
  .itt-test-kind-switch { padding: 12px 18px; }
  .itt-test-kind-switch .itt-segmented-control button,
  .itt-length-settings .itt-segmented-control button { min-height: 44px; }
  .itt-length-settings { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(160px, 0.55fr); width: 100%; gap: 12px; }
  .itt-length-settings > .itt-setting-group { grid-column: auto; }
  .itt-length-settings > .itt-duration-field { min-width: 0; }
  .itt-test-settings > .itt-select-field { width: 100%; }
  .itt-page-progress-copy { padding-inline: 18px; text-align: left; }
  .itt-test-directory-card { min-height: 250px; padding: 23px; }
  .itt-catalog-section { contain-intrinsic-size: auto 900px; }
  .itt-footer-bottom { flex-wrap: wrap; }
}

@media (max-width: 520px) {
  .itt-iti-preview-copy { min-height: 220px; padding: 27px 20px 22px; font-size: 12px; line-height: 1.8; }
  .itt-test-kind-switch { align-items: stretch; flex-direction: column; gap: 8px; }
  .itt-test-kind-switch .itt-segmented-control { width: 100%; }
  .itt-test-kind-switch .itt-segmented-control button { flex: 1; }
  .itt-length-settings { grid-template-columns: minmax(0, 1fr); }
  .itt-length-settings > .itt-setting-group,
  .itt-length-settings > .itt-duration-field { grid-column: 1; }
  .itt-length-settings .itt-segmented-control { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .itt-test-settings .itt-length-settings .itt-segmented-control button { min-width: 0; }
  .itt-test-directory-grid { grid-template-columns: minmax(0, 1fr); }
  .itt-test-directory-card { min-height: 0; }
  .itt-dialog { width: calc(100% - 16px); max-height: calc(100dvh - 16px); border-radius: 16px; }
  .itt-custom-dialog form { padding: 18px; }
  .itt-custom-dialog .itt-dialog-header h2 { font-size: 20px; }
  .itt-custom-dialog .itt-field textarea { min-height: 180px; }
  .itt-custom-dialog .itt-dialog-actions { align-items: stretch; flex-direction: column-reverse; }
  .itt-custom-dialog .itt-dialog-actions .itt-button { width: 100%; }
  .itt-footer-legal { justify-content: flex-start; }
}