/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
@layer theme {
  :root,
  :host {
    --font-sans:
      ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono:
      ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --spacing: 0.25rem;
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}
@layer base {
  *,
  :after,
  :before,
  ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }
  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }
  html,
  :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(
      --default-font-family,
      ui-sans-serif,
      system-ui,
      sans-serif,
      "Apple Color Emoji",
      "Segoe UI Emoji",
      "Segoe UI Symbol",
      "Noto Color Emoji"
    );
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b,
  strong {
    font-weight: bolder;
  }
  code,
  kbd,
  samp,
  pre {
    font-family: var(
      --default-mono-font-family,
      ui-monospace,
      SFMono-Regular,
      Menlo,
      Monaco,
      Consolas,
      "Liberation Mono",
      "Courier New",
      monospace
    );
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(
      --default-mono-font-variation-settings,
      normal
    );
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub,
  sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol,
  ul,
  menu {
    list-style: none;
  }
  img,
  svg,
  video,
  canvas,
  audio,
  iframe,
  embed,
  object {
    vertical-align: middle;
    display: block;
  }
  img,
  video {
    max-width: 100%;
    height: auto;
  }
  button,
  input,
  select,
  optgroup,
  textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }
  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not ((-webkit-appearance: -apple-pay-button))) or
    (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentColor;
    }
    @supports (color: color-mix(in lab, red, red)) {
      ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit {
    padding-block: 0;
  }
  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }
  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }
  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }
  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }
  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }
  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }
  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }
  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button,
  input:where([type="button"], [type="reset"], [type="submit"]) {
    appearance: button;
  }
  ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button {
    height: auto;
  }
  ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer components;
@layer utilities {
  .visible {
    visibility: visible;
  }
  .relative {
    position: relative;
  }
  .start {
    inset-inline-start: var(--spacing);
  }
  .block {
    display: block;
  }
  .table {
    display: table;
  }
  .resize {
    resize: both;
  }
  .rounded {
    border-radius: 0.25rem;
  }
  .antialiased {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}
:root {
  --ink: #171a1b;
  --muted: #615b52;
  --blue: #f2571f;
  --blue-bright: #ffad32;
  --green: #00b9ad;
  --orange: #f2571f;
  --panel: #f0d7aef0;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  background: #ead2aa;
}
body {
  color: var(--ink);
  font-family: var(--font-geist-sans), Arial, Helvetica, sans-serif;
  background: #ead2aa;
  margin: 0;
  overflow-x: clip;
}
button,
a {
  color: inherit;
  font: inherit;
}
button {
  border: 0;
}
a {
  text-decoration: none;
}
.site-scene {
  --cursor-x: 62vw;
  --cursor-y: 35vh;
  isolation: isolate;
  background:
    radial-gradient(circle at 76% 42%, #fff6e2c7, #0000 33%),
    radial-gradient(circle at 7% 88%, #f2571f21, #0000 33%),
    linear-gradient(128deg, #f4e2c2 0%, #ead2aa 49%, #d5b77f 100%);
  height: auto;
  min-height: 720px;
  position: relative;
  overflow: clip;
}
.site-scene:before {
  content: "";
  z-index: -2;
  pointer-events: none;
  filter: blur(10px) saturate(1.22) contrast(1.06);
  background:
    radial-gradient(circle at 18% 21%, #ff97326b, #0000 21%),
    radial-gradient(circle at 79% 27%, #00b9ad33, #0000 22%),
    radial-gradient(circle at 68% 80%, #0077712e, #0000 23%),
    radial-gradient(circle at 28% 84%, #f2571f29, #0000 22%);
  animation: 16s ease-in-out infinite alternate palette-drift;
  position: absolute;
  inset: -24%;
}
.site-scene:after {
  content: none;
}
.binary-field {
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  color: #007e77;
  font-family: var(--font-geist-mono), monospace;
  letter-spacing: 0.22em;
  text-shadow: 0 0 12px #00b9ad7a;
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(
    circle 230px at var(--cursor-x) var(--cursor-y),
    #000 0%,
    #000000f5 27%,
    #0000008f 52%,
    transparent 78%
  );
  -webkit-mask-image: radial-gradient(
    circle 230px at var(--cursor-x) var(--cursor-y),
    #000 0%,
    #000000f5 27%,
    #0000008f 52%,
    transparent 78%
  );
  -webkit-mask-image: radial-gradient(
    circle 230px at var(--cursor-x) var(--cursor-y),
    #000 0%,
    #000000f5 27%,
    #0000008f 52%,
    transparent 78%
  );
  -webkit-mask-image: radial-gradient(
    circle 230px at var(--cursor-x) var(--cursor-y),
    #000 0%,
    #000000f5 27%,
    #0000008f 52%,
    transparent 78%
  );
  mask-image: radial-gradient(
    circle 230px at var(--cursor-x) var(--cursor-y),
    #000 0%,
    #000000f5 27%,
    #0000008f 52%,
    transparent 78%
  );
  grid-template-rows: repeat(10, 1fr);
  align-items: center;
  padding: 26px 0;
  font-size: clamp(11px, 0.82vw, 14px);
  font-weight: 740;
  line-height: 1;
  transition: opacity 0.32s;
  display: grid;
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.site-scene.has-pointer .binary-field {
  opacity: 1;
}
.binary-row {
  white-space: nowrap;
  filter: blur(0.1px);
  width: max-content;
  animation: 22s linear infinite binary-flow;
  display: flex;
}
.binary-row span {
  padding-right: 4.2em;
}
.binary-row:nth-child(2n) {
  color: #f2571f;
  opacity: 0.92;
  animation-duration: 28s;
  animation-direction: reverse;
}
.binary-row:nth-child(3n) {
  opacity: 0.55;
  animation-duration: 35s;
}
.binary-row:nth-child(4n) {
  color: #00a89e;
  opacity: 1;
  animation-duration: 19s;
}
.binary-row:nth-child(5n) {
  animation-duration: 31s;
  animation-direction: reverse;
}
.cursor-light {
  z-index: 1;
  width: 470px;
  height: 470px;
  left: var(--cursor-x);
  top: var(--cursor-y);
  pointer-events: none;
  opacity: 0;
  filter: blur(5px);
  background: radial-gradient(
    circle,
    #00d6c938,
    #f2571f17 39%,
    #ffae3209 58%,
    #0000 72%
  );
  border-radius: 50%;
  transition: opacity 0.32s;
  position: absolute;
  translate: -50% -50%;
}
.site-scene.has-pointer .cursor-light {
  opacity: 1;
}
.top-beam {
  background: linear-gradient(90deg, #0000, #00d6c9, #ff6a23, #ffb232, #0000);
  width: 20%;
  height: 1px;
  animation: 7s ease-in-out infinite top-scan;
  position: absolute;
  top: 0;
  left: -25%;
  box-shadow: 0 0 16px #f2571f9e;
}
.site-header {
  z-index: 20;
  border-bottom: 1px solid #94b1ce21;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: min(1240px, 100% - 64px);
  height: 82px;
  margin: 0 auto;
  display: grid;
  position: relative;
}
.brand {
  letter-spacing: -0.03em;
  align-items: center;
  gap: 12px;
  width: max-content;
  font-size: 18px;
  font-weight: 760;
  display: inline-flex;
}
.brand-symbol {
  background: #3da1ff14;
  border: 1px solid #68c6ff6b;
  border-radius: 9px;
  grid-template-rows: repeat(2, 7px);
  grid-template-columns: repeat(2, 7px);
  place-content: center;
  gap: 4px;
  width: 30px;
  height: 30px;
  display: grid;
  position: relative;
  box-shadow: inset 0 0 12px #39a6ff14;
}
.brand-symbol i {
  background: #56b8ff;
  border-radius: 2px;
  display: block;
  box-shadow: 0 0 7px #50baff80;
}
.brand-symbol i:nth-child(2),
.brand-symbol i:nth-child(3) {
  opacity: 0.4;
}
.brand-symbol b {
  background: #56b8ff;
  width: 6px;
  height: 2px;
  position: absolute;
  top: 14px;
  right: -7px;
  box-shadow: 0 0 5px #56b8ff;
}
.main-nav {
  align-items: center;
  gap: 32px;
  display: flex;
}
.main-nav a {
  color: #9eb0c4;
  font-size: 13px;
  transition: color 0.25s;
}
.header-actions {
  justify-self: end;
  align-items: center;
  gap: 10px;
  display: flex;
}
.login-button {
  color: #aab9c9;
  cursor: pointer;
  background: 0 0;
  height: 42px;
  padding: 0 18px;
}
.header-cta {
  color: #d7efff;
  cursor: pointer;
  background: #3497ed1a;
  border: 1px solid #6ec1ff57;
  border-radius: 10px;
  align-items: center;
  gap: 9px;
  height: 42px;
  padding: 0 18px;
  transition: all 0.25s;
  display: inline-flex;
}
.header-cta:hover {
  background: #3497ed2e;
  border-color: #6ec1ffb3;
}
.header-cta svg,
.primary-cta svg,
.check-button svg,
.exam-route button svg {
  width: 18px;
  height: 18px;
}
.signal-arrow {
  color: currentColor;
  flex: none;
  width: 25px;
  height: 16px;
  overflow: visible;
}
.signal-arrow-node {
  fill: currentColor;
  transform-box: fill-box;
  transform-origin: 50%;
  animation: 2.2s ease-in-out infinite signal-arrow-node;
}
.signal-arrow-track,
.signal-arrow-head,
.signal-arrow-echo {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.signal-arrow-track {
  stroke-width: 1.45px;
  stroke-dasharray: 9 3;
  animation: 1.8s linear infinite signal-arrow-flow;
}
.signal-arrow-head {
  stroke-width: 1.8px;
}
.signal-arrow-echo {
  stroke-width: 1.35px;
  opacity: 0.44;
}
:is(a, button):hover .signal-arrow-head,
:is(a, button):hover .signal-arrow-echo {
  transition: translate 0.22s;
  translate: 2px;
}
.primary-cta .signal-arrow {
  width: 27px;
  height: 16px;
}
.check-button .signal-arrow {
  width: 21px;
  height: 13px;
}
@keyframes signal-arrow-flow {
  to {
    stroke-dashoffset: -12px;
  }
}
@keyframes signal-arrow-node {
  50% {
    opacity: 0.48;
    scale: 0.62;
  }
}
.hero {
  z-index: 4;
  grid-template-columns: minmax(460px, 0.92fr) minmax(600px, 1.18fr);
  align-items: center;
  gap: 58px;
  width: min(1240px, 100% - 64px);
  height: calc(100svh - 188px);
  min-height: 520px;
  max-height: 720px;
  margin: 0 auto;
  padding: 24px 0 42px;
  display: grid;
  position: relative;
}
.hero-copy {
  z-index: 8;
  padding-bottom: 12px;
  position: relative;
}
.eyebrow {
  color: #91a9c0;
  letter-spacing: 0.18em;
  align-items: center;
  gap: 9px;
  width: max-content;
  margin-bottom: 23px;
  font-size: 10px;
  font-weight: 710;
  display: flex;
}
.eyebrow > i {
  background: var(--green);
  border-radius: 50%;
  width: 6px;
  height: 6px;
  animation: 2.2s ease-out infinite pulse-dot;
  box-shadow:
    0 0 0 4px #50e3a414,
    0 0 14px #50e3a499;
}
.eyebrow span {
  color: #6fc8ff;
  letter-spacing: 0.08em;
  background: #329df014;
  border: 1px solid #4bb2ff40;
  border-radius: 5px;
  margin-left: 4px;
  padding: 5px 7px;
}
.hero h1 {
  color: #f7fbff;
  letter-spacing: -0.062em;
  max-width: 580px;
  margin: 0;
  font-size: clamp(54px, 4.3vw, 70px);
  font-weight: 690;
  line-height: 0.97;
}
.hero h1 > span,
.hero h1 > em {
  display: block;
}
.hero h1 > span {
  margin-top: 8px;
}
.hero h1 > em {
  color: #0000;
  background: linear-gradient(90deg, #58b8ff 0%, #8bd7ff 48%, #5be6b0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  width: max-content;
  margin-top: 8px;
  font-style: normal;
  position: relative;
}
.hero h1 > em:after {
  content: "";
  transform-origin: 0;
  background: linear-gradient(90deg, #58b8ff 0%, #8bd7ff 56%, #5be6b0 100%);
  border-radius: 999px;
  width: calc(100% - 0.22em);
  height: 3px;
  animation: 3.8s ease-in-out infinite data-line;
  position: absolute;
  bottom: -10px;
  left: 0.02em;
  box-shadow: 0 0 11px #56caff57;
}
.hero-lead {
  color: #a0b0c2;
  letter-spacing: -0.012em;
  max-width: 530px;
  margin: 30px 0 0;
  font-size: 16px;
  line-height: 1.65;
}
.hero-actions {
  align-items: center;
  gap: 24px;
  margin-top: 28px;
  display: flex;
}
.primary-cta {
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, #1597ef, #1378d8);
  border-radius: 11px;
  justify-content: center;
  align-items: center;
  gap: 12px;
  min-width: 212px;
  height: 54px;
  padding: 0 22px;
  font-size: 14px;
  font-weight: 680;
  transition:
    transform 0.25s,
    box-shadow 0.25s;
  display: inline-flex;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 10px 32px #0d80de47,
    inset 0 1px #ffffff40;
}
.primary-cta:hover {
  transform: translateY(-2px);
  box-shadow:
    0 16px 40px #0d80de61,
    inset 0 1px #ffffff40;
}
.button-shine {
  background: linear-gradient(100deg, #0000 30%, #ffffff40, #0000 70%);
  animation: 5s ease-in-out infinite button-glint;
  position: absolute;
  inset: 0;
  translate: -120%;
}
.play-button {
  color: #c1cfdd;
  cursor: pointer;
  background: 0 0;
  align-items: center;
  gap: 10px;
  padding: 0;
  font-size: 13px;
  display: inline-flex;
}
.play-button > span {
  background: #1e466d38;
  border: 1px solid #7db0da59;
  border-radius: 50%;
  place-items: center;
  width: 38px;
  height: 38px;
  transition: all 0.25s;
  display: grid;
}
.play-button > span i {
  border-top: 5px solid #0000;
  border-bottom: 5px solid #0000;
  border-left: 7px solid #7acbff;
  width: 0;
  height: 0;
  margin-left: 2px;
}
.play-button small {
  color: #637589;
  font-size: 10px;
}
.diagnostic-note {
  color: #637589;
  align-items: center;
  gap: 7px;
  margin: 12px 0 0;
  font-size: 10px;
  display: flex;
}
.diagnostic-note > i {
  background: var(--signal, #00a7a0);
  width: 5px;
  height: 5px;
  box-shadow: 0 0 8px var(--signal, #00a7a0);
  border-radius: 50%;
}
@supports (color: color-mix(in lab, red, red)) {
  .diagnostic-note > i {
    box-shadow: 0 0 8px
      color-mix(in srgb, var(--signal, #00a7a0) 65%, transparent);
  }
}
.diagnostic-note > span {
  opacity: 0.45;
}
.proof-row {
  align-items: center;
  gap: 20px;
  margin-top: 23px;
  display: flex;
}
.proof-row div {
  gap: 1px;
  display: grid;
}
.proof-row strong {
  color: #e8f4ff;
  font-size: 17px;
  line-height: 1;
}
.proof-row span {
  color: #63788e;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 9px;
}
.proof-row > i {
  background: #83a1bf2e;
  width: 1px;
  height: 24px;
}
.hero-product {
  isolation: isolate;
  min-width: 0;
  position: relative;
}
.live-label {
  color: #6d8198;
  letter-spacing: 0.16em;
  z-index: 10;
  align-items: center;
  gap: 7px;
  font-size: 8px;
  font-weight: 700;
  display: flex;
  position: absolute;
  top: -35px;
  right: 5px;
}
.live-label i {
  background: #4ee2a3;
  border-radius: 50%;
  width: 5px;
  height: 5px;
  box-shadow: 0 0 8px #4ee2a3;
}
.live-label span {
  color: #42566c;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  font-weight: 450;
}
.stage-wrap {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  z-index: 1;
  perspective: 1300px;
  height: 470px;
  position: relative;
}
.stage-aura {
  filter: blur(18px);
  background: radial-gradient(#1690ee2b, #0000 67%);
  border-radius: 50%;
  animation: 5s ease-in-out infinite breathe;
  position: absolute;
  inset: 5% -8% -4% 8%;
}
.stage-aura:before,
.stage-aura:after {
  content: "";
  border: 1px solid #3d9de621;
  border-radius: 50%;
  position: absolute;
  inset: -12% 8% 13% -2%;
  transform: rotate(-14deg);
}
.stage-aura:after {
  border-color: #4fdea417;
  inset: -4% 0 5% 12%;
  transform: rotate(17deg);
}
.product-shell {
  transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transform-style: preserve-3d;
  background: linear-gradient(145deg, #102237f7, #081423f7);
  border: 1px solid #6fafe245;
  border-radius: 18px;
  grid-template-rows: 49px 1fr 42px;
  transition: transform 0.15s ease-out;
  display: grid;
  position: absolute;
  inset: 15px 0 6px 12px;
  overflow: hidden;
  box-shadow:
    0 38px 90px #0000006b,
    0 0 70px #2187db1c,
    inset 0 1px #ffffff0d;
}
.product-shell:before {
  content: none;
}
.product-topbar {
  background: #05101d80;
  border-bottom: 1px solid #82a4c41f;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 17px;
  display: grid;
}
.window-mark {
  gap: 5px;
  display: flex;
}
.window-mark i {
  background: #31475c;
  border-radius: 50%;
  width: 6px;
  height: 6px;
}
.product-topbar nav {
  align-self: stretch;
  gap: 4px;
  display: flex;
}
.product-topbar nav button {
  color: #677d92;
  cursor: pointer;
  background: 0 0;
  height: 100%;
  padding: 0 15px;
  font-size: 10px;
  transition: color 0.3s;
  position: relative;
}
.product-topbar nav button:hover {
  color: #b7d3e8;
  background: #70bcf20e;
}
.product-topbar nav button:focus-visible {
  outline: 2px solid var(--accent-hi, #64a7ff);
  outline-offset: -3px;
}
.product-topbar nav button:after {
  content: "";
  opacity: 0;
  background: #52baff;
  border-radius: 2px;
  height: 2px;
  transition: all 0.3s;
  position: absolute;
  bottom: 0;
  left: 45%;
  right: 45%;
  box-shadow: 0 0 8px #52baff;
}
.product-topbar nav button.active:after {
  opacity: 1;
  left: 14px;
  right: 14px;
}
.sync-status {
  color: #4f6578;
  justify-self: end;
  align-items: center;
  gap: 6px;
  font-size: 8px;
  display: flex;
}
.sync-status i {
  background: #48d79b;
  border-radius: 50%;
  width: 5px;
  height: 5px;
}
.view-stack {
  min-height: 0;
  position: relative;
}
.view-layer {
  opacity: 0;
  filter: blur(5px);
  pointer-events: none;
  transition:
    opacity 0.5s,
    transform 0.55s cubic-bezier(0.22, 0.8, 0.2, 1),
    filter 0.45s;
  position: absolute;
  inset: 0;
  transform: translate(22px) scale(0.98);
}
.view-layer.is-active {
  opacity: 1;
  filter: blur();
  pointer-events: auto;
  transform: translate(0) scale(1);
}
.product-view {
  height: 100%;
  padding: 25px 29px 22px;
}
.view-heading {
  justify-content: space-between;
  align-items: flex-start;
  gap: 15px;
  display: flex;
}
.section-kicker {
  color: #4b90c5;
  letter-spacing: 0.17em;
  margin-bottom: 5px;
  font-size: 7px;
  font-weight: 800;
  display: block;
}
.view-heading h2 {
  color: #e8f3fd;
  letter-spacing: -0.035em;
  margin: 0;
  font-size: 20px;
  font-weight: 650;
}
.task-number {
  color: #67c3ff38;
  font-family: var(--font-geist-mono);
  font-size: 42px;
  font-weight: 750;
  line-height: 0.82;
}
.task-body {
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 27px;
  margin-top: 27px;
  display: grid;
}
.task-body > p {
  color: #91a5b8;
  margin: 0;
  font-size: 11px;
  line-height: 1.7;
}
.query-list {
  gap: 7px;
  display: grid;
}
.query-list button {
  color: #b9c9d8;
  height: 35px;
  font-family: var(--font-geist-mono);
  text-align: left;
  cursor: pointer;
  background: #11293f75;
  border: 1px solid #6b99bc29;
  border-radius: 7px;
  align-items: center;
  gap: 9px;
  padding: 0 11px;
  font-size: 9px;
  transition: all 0.25s;
  display: flex;
}
.query-list button:hover {
  background: #1f537a5c;
  border-color: #4fb5fa7a;
  transform: translate(-4px);
}
.query-list button span {
  color: #65bfff;
  width: 18px;
  height: 18px;
  font-family: var(--font-geist-sans);
  background: #43aaef17;
  border-radius: 4px;
  place-items: center;
  display: grid;
}
.answer-row {
  grid-template-columns: 1fr 126px;
  gap: 10px;
  display: grid;
  position: absolute;
  bottom: 24px;
  left: 29px;
  right: 29px;
}
.answer-field {
  background: #04101d7a;
  border: 1px solid #69a4d12e;
  border-radius: 7px;
  justify-content: space-between;
  align-items: center;
  height: 41px;
  padding: 0 13px;
  display: flex;
}
.answer-field span {
  color: #597086;
  font-size: 9px;
}
.answer-field strong {
  color: #8fd4ff;
  font-family: var(--font-geist-mono);
  letter-spacing: 0.12em;
  font-size: 11px;
}
.check-button {
  color: #fff;
  cursor: pointer;
  background: #158add;
  border-radius: 7px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  display: flex;
}
.ai-badge {
  color: #74ceff;
  background: #1f76af17;
  border: 1px solid #52c3ff3d;
  border-radius: 7px;
  align-items: center;
  gap: 5px;
  padding: 7px 9px;
  font-size: 9px;
  font-weight: 700;
  display: flex;
}
.ai-badge svg,
.skills p svg {
  width: 13px;
  height: 13px;
}
.code-window {
  background: #071421;
  border: 1px solid #6d97b924;
  border-radius: 9px;
  grid-template-columns: 26px 1fr;
  height: 137px;
  margin-top: 20px;
  padding: 14px;
  display: grid;
  position: relative;
  overflow: hidden;
}
.code-gutter {
  color: #2c495e;
  font-family: var(--font-geist-mono);
  -webkit-user-select: none;
  user-select: none;
  font-size: 9px;
  line-height: 20px;
}
.code-lines {
  color: #a9c4d8;
  font-family: var(--font-geist-mono);
  margin: 0;
  font-size: 9px;
  line-height: 20px;
}
.code-window mark {
  color: #ff9e61;
  background: #f08a4633;
  border-radius: 3px;
  padding: 1px 2px;
  box-shadow: 0 0 0 1px #f08a4640;
}
.ai-feedback {
  grid-template-columns: 126px 1fr;
  gap: 17px;
  margin-top: 15px;
  display: grid;
}
.feedback-score {
  background: #37bd870e;
  border-left: 2px solid #4fe1a3;
  align-content: center;
  padding: 10px 13px;
  display: grid;
}
.feedback-score strong {
  color: #64e8ae;
  font-size: 24px;
  line-height: 1;
}
.feedback-score span {
  color: #5d796f;
  text-transform: uppercase;
  margin-top: 4px;
  font-size: 7px;
}
.feedback-items {
  grid-template-columns: 1fr;
  align-content: center;
  gap: 3px;
  display: grid;
}
.feedback-items button {
  text-align: left;
  cursor: pointer;
  background: 0 0;
  border: 1px solid #0000;
  border-radius: 6px;
  width: 100%;
  min-height: 25px;
  padding: 3px 7px;
  transition:
    border-color 0.2s,
    background 0.2s,
    transform 0.2s;
}
.feedback-items button:hover {
  background: var(--signal, #4fe1a3);
  transform: translate(2px);
}
@supports (color: color-mix(in lab, red, red)) {
  .feedback-items button:hover {
    background: color-mix(in srgb, var(--signal, #4fe1a3) 7%, transparent);
  }
}
.feedback-items button.is-active {
  border-color: var(--signal, #4fe1a3);
}
@supports (color: color-mix(in lab, red, red)) {
  .feedback-items button.is-active {
    border-color: color-mix(in srgb, var(--signal, #4fe1a3) 34%, transparent);
  }
}
.feedback-items button.is-active {
  background: var(--signal, #4fe1a3);
}
@supports (color: color-mix(in lab, red, red)) {
  .feedback-items button.is-active {
    background: color-mix(in srgb, var(--signal, #4fe1a3) 11%, transparent);
  }
}
.feedback-items span {
  color: #73899d;
  align-items: center;
  gap: 6px;
  font-size: 8px;
  display: flex;
}
.feedback-items i {
  background: #4fe1a3;
  border-radius: 50%;
  width: 5px;
  height: 5px;
  box-shadow: 0 0 6px #4fe1a380;
}
.feedback-items .feedback-issue i {
  background: #f08a46;
  box-shadow: 0 0 6px #f08a468c;
}
.feedback-score small {
  color: var(--panel-muted, #8ca2b2);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-top: 7px;
  font-size: 8px;
  line-height: 1.35;
  display: -webkit-box;
  overflow: hidden;
}
.result-date {
  color: #51697e;
  font-size: 8px;
}
.result-grid {
  grid-template-columns: 180px 1fr;
  align-items: center;
  gap: 28px;
  height: calc(100% - 45px);
  display: grid;
}
.score-orbit {
  place-items: center;
  width: 150px;
  height: 150px;
  display: grid;
  position: relative;
}
.score-orbit svg {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  overflow: visible;
  transform: rotate(-90deg);
}
.score-orbit circle {
  fill: none;
  stroke: #5180a521;
  stroke-width: 7px;
}
.score-orbit .score-progress {
  stroke: #53c3ff;
  stroke-dasharray: 427;
  stroke-dashoffset: 142px;
  stroke-linecap: round;
  filter: drop-shadow(0 0 7px #50beff85);
  animation: 1.4s cubic-bezier(0.22, 0.8, 0.2, 1) both result-ring;
}
.score-orbit > div {
  text-align: center;
  display: grid;
}
.score-orbit strong {
  color: #ecf8ff;
  letter-spacing: -0.06em;
  font-size: 45px;
  line-height: 0.9;
}
.score-orbit span {
  color: #567086;
  margin-top: 5px;
  font-size: 9px;
}
.skills {
  gap: 15px;
  display: grid;
}
.skills > div {
  color: #7d94a8;
  grid-template-columns: 70px 1fr 32px;
  align-items: center;
  gap: 9px;
  font-size: 9px;
  display: grid;
}
.skills > div > i {
  background: #5484a924;
  border-radius: 10px;
  height: 4px;
  overflow: hidden;
}
.skills > div > i b {
  border-radius: inherit;
  transform-origin: 0;
  background: linear-gradient(90deg, #268fde, #63d1ff);
  height: 100%;
  animation: 1.1s both skill-grow;
  display: block;
  box-shadow: 0 0 7px #45b8f673;
}
.skills > div > strong {
  color: #a9c0d4;
  font-size: 9px;
}
.skills > button {
  color: var(--panel-muted, #7d94a8);
  text-align: left;
  cursor: pointer;
  background: 0 0;
  border: 1px solid #0000;
  border-radius: 7px;
  grid-template-columns: 70px 1fr 32px;
  align-items: center;
  gap: 9px;
  margin: -5px -8px;
  padding: 7px 8px;
  transition:
    border-color 0.2s,
    background 0.2s,
    transform 0.2s;
  display: grid;
}
.skills > button:hover {
  background: var(--signal, #4fe1a3);
  transform: translate(2px);
}
@supports (color: color-mix(in lab, red, red)) {
  .skills > button:hover {
    background: color-mix(in srgb, var(--signal, #4fe1a3) 7%, transparent);
  }
}
.skills > button.is-active {
  border-color: var(--signal, #4fe1a3);
}
@supports (color: color-mix(in lab, red, red)) {
  .skills > button.is-active {
    border-color: color-mix(in srgb, var(--signal, #4fe1a3) 30%, transparent);
  }
}
.skills > button.is-active {
  background: var(--signal, #4fe1a3);
}
@supports (color: color-mix(in lab, red, red)) {
  .skills > button.is-active {
    background: color-mix(in srgb, var(--signal, #4fe1a3) 10%, transparent);
  }
}
.skills > button > i {
  background: var(--signal, #4fe1a3);
  border-radius: 10px;
  height: 4px;
  overflow: hidden;
}
@supports (color: color-mix(in lab, red, red)) {
  .skills > button > i {
    background: color-mix(in srgb, var(--signal, #4fe1a3) 12%, transparent);
  }
}
.skills > button > i b {
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    var(--accent, #268fde),
    var(--accent-hi, #63d1ff)
  );
  height: 100%;
  box-shadow: 0 0 7px var(--accent, #268fde);
  display: block;
}
@supports (color: color-mix(in lab, red, red)) {
  .skills > button > i b {
    box-shadow: 0 0 7px
      color-mix(in srgb, var(--accent, #268fde) 48%, transparent);
  }
}
.skills > button > i b {
  transform-origin: 0;
  animation: 1.1s both skill-grow;
}
.skills > button > strong {
  color: var(--panel-ink, #a9c0d4);
  text-align: right;
}
.skills p {
  color: #62d6a8;
  border-top: 1px solid #6e97b51f;
  align-items: center;
  gap: 7px;
  margin: 4px 0 0;
  padding-top: 13px;
  font-size: 9px;
  display: flex;
}
.product-footer {
  color: #50657a;
  background: #06121f80;
  border-top: 1px solid #81a4c31a;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
  font-size: 8px;
  display: grid;
}
.product-footer strong {
  color: #7c93a7;
  font-weight: 550;
}
.mini-progress {
  background: #5984a526;
  border-radius: 5px;
  height: 2px;
  overflow: hidden;
}
.mini-progress i {
  background: linear-gradient(90deg, #2096e8, #58dcb0);
  height: 100%;
  transition: width 0.65s;
  display: block;
  box-shadow: 0 0 8px #39b9e68c;
}
.exam-route {
  z-index: 8;
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  background: #081524c7;
  border: 1px solid #709dc429;
  border-radius: 14px;
  grid-template-columns: 220px 1fr 45px;
  align-items: center;
  gap: 22px;
  width: min(1240px, 100% - 64px);
  height: 76px;
  padding: 0 17px 0 22px;
  display: grid;
  position: absolute;
  bottom: 18px;
  left: 50%;
  translate: -50%;
  box-shadow:
    0 18px 45px #0003,
    inset 0 1px #ffffff06;
}
.route-copy {
  gap: 5px;
  display: grid;
}
.route-copy span {
  color: #47789f;
  letter-spacing: 0.16em;
  font-size: 7px;
  font-weight: 800;
}
.route-copy strong {
  color: #b7c8d6;
  font-size: 10px;
  font-weight: 560;
}
.route-nodes {
  justify-content: space-between;
  align-items: center;
  display: flex;
  position: relative;
}
.route-line {
  background: #5c8db430;
  height: 1px;
  position: absolute;
  left: 7px;
  right: 7px;
  overflow: hidden;
}
.route-line i {
  background: linear-gradient(90deg, #0000, #4bc1ff, #0000);
  width: 90px;
  height: 100%;
  animation: 4.2s linear infinite route-signal;
  display: block;
  box-shadow: 0 0 8px #4bc1ff;
}
.route-nodes > span {
  z-index: 2;
  color: #41586c;
  width: 24px;
  height: 24px;
  font-family: var(--font-geist-mono);
  background: #0b1d2e;
  border: 1px solid #233c51;
  border-radius: 6px;
  place-items: center;
  font-size: 7px;
  display: grid;
  position: relative;
}
.route-nodes > span.current {
  color: #fff;
  background: #157fc2;
  border-color: #49b9ff;
  animation: 2s ease-in-out infinite current-node;
  box-shadow:
    0 0 0 4px #33a7ee14,
    0 0 18px #31a7ee47;
}
.exam-route > button {
  color: #62bdff;
  cursor: pointer;
  background: #246ba11a;
  border: 1px solid #5c9ed038;
  border-radius: 9px;
  place-items: center;
  width: 38px;
  height: 38px;
  display: grid;
}
.product-shell {
  background: linear-gradient(145deg, #fffbf4fb, #eee2cffb);
  border-color: #4a37213b;
  transition: none;
  box-shadow:
    0 38px 85px #4e341833,
    0 0 70px #d965161f,
    inset 0 1px #fffc;
}
.sync-status i {
  background: #278765;
}
.check-button {
  background: #c95712;
}
.main-nav a {
  color: #695a63;
}
.login-button {
  color: #5f5259;
}
.eyebrow {
  color: #65565f;
}
.hero h1 {
  color: #2d292c;
  text-shadow: 0 1px #ffffff5c;
}
.hero-lead {
  color: #655a60;
}
.play-button {
  color: #4f454a;
}
.proof-row strong {
  color: #2d292c;
}
.proof-row span {
  color: #7a6972;
}
.live-label {
  color: #66565f;
}
.stage-aura {
  background: radial-gradient(#d96ca145, #6397972b 43%, #0000 70%);
}
.query-list button {
  color: #e5dcdf;
  background: #5835514d;
  border-color: #baabcf29;
  box-shadow: 0 7px 18px #00000014;
}
.site-header {
  border-bottom-color: #171a1b33;
}
.brand {
  color: #171a1b;
}
.brand strong {
  color: #e54e19;
}
.brand-symbol {
  background: #171a1b;
  border-color: #171a1b75;
  box-shadow:
    0 9px 22px #171a1b2e,
    inset 0 0 14px #00d6c91f;
}
.brand-symbol i,
.brand-symbol b {
  background: #ff6424;
  box-shadow: 0 0 8px #ff6424b8;
}
.brand-symbol i:nth-child(2),
.brand-symbol i:nth-child(3) {
  opacity: 0.68;
  background: #00d6c9;
}
.main-nav a {
  color: #5b554c;
  font-weight: 560;
}
.main-nav a:hover {
  color: #e54e19;
}
.login-button {
  color: #353534;
  font-weight: 600;
}
.header-cta {
  color: #f7e9cf;
  background: #171a1b;
  border-color: #171a1bcc;
  box-shadow: 0 9px 24px #171a1b29;
}
.header-cta:hover {
  background: #222627;
  border-color: #ff6424;
  box-shadow:
    0 12px 30px #171a1b38,
    0 0 0 1px #ff642438;
}
.eyebrow {
  color: #4e4c46;
  font-weight: 780;
}
.eyebrow > i {
  background: #00b9ad;
  box-shadow:
    0 0 0 4px #00b9ad21,
    0 0 16px #00b9ad9e;
}
.eyebrow span {
  color: #171a1b;
  background: #fff6e285;
  border-color: #171a1b4d;
}
.hero h1 {
  color: #171a1b;
  text-shadow: none;
  font-weight: 750;
}
.hero h1 > em {
  background-image: linear-gradient(
    90deg,
    #e24715 0%,
    #ff6a23 58%,
    #ffad32 100%
  );
}
.hero h1 > em:after {
  background: linear-gradient(90deg, #f2571f14, #ff6424, #ffad3247);
}
.hero-lead {
  color: #514d46;
  font-weight: 490;
}
.primary-cta {
  background: linear-gradient(135deg, #ff6a23, #d93f11);
  box-shadow:
    0 12px 30px #d93f1157,
    inset 0 1px #ffffff4d;
}
.primary-cta:hover {
  box-shadow:
    0 17px 42px #d93f1175,
    inset 0 1px #ffffff52;
}
.play-button {
  color: #272a29;
  font-weight: 620;
}
.play-button > span {
  background: #fff6e28f;
  border-color: #171a1b57;
  box-shadow: 0 8px 20px #171a1b14;
}
.play-button:hover > span {
  border-color: #00a89e;
  box-shadow: 0 0 22px #00b9ad47;
}
.play-button > span i {
  border-left-color: #00a89e;
}
.play-button small {
  color: #746c60;
}
.proof-row strong {
  color: #171a1b;
  font-weight: 760;
}
.proof-row span {
  color: #6e665b;
  font-weight: 620;
}
.proof-row > i {
  background: #171a1b30;
}
.live-label {
  color: #3c3e3c;
  font-weight: 820;
}
.live-label span {
  color: #6c665c;
}
.live-label i {
  background: #00d6c9;
  box-shadow: 0 0 10px #00d6c9f2;
}
.stage-aura {
  filter: blur(20px) saturate(1.35);
  background: radial-gradient(#f2571f3d, #00b9ad33 42%, #0000 70%);
}
.stage-aura:before {
  border-color: #f2571f57;
}
.stage-aura:after {
  border-color: #00d6c957;
}
.product-shell {
  background: linear-gradient(145deg, #181d1efe, #080b0cfe);
  border-color: #00d6c970;
  box-shadow:
    0 42px 95px #171a1b7a,
    0 0 0 1px #ff642429,
    0 0 84px #00b9ad33,
    inset 0 1px #ffffff12;
}
.product-shell:before {
  background: radial-gradient(
    circle 300px at var(--stage-x) var(--stage-y),
    #00d6c92b,
    #ff64240e 46%,
    transparent 72%
  );
}
.product-topbar {
  background: #040708bf;
  border-bottom-color: #00d6c924;
}
.window-mark i {
  background: #414a4a;
}
.window-mark i:first-child {
  background: #ff6424;
  box-shadow: 0 0 9px #ff6424e6;
}
.product-topbar nav button {
  color: #74817f;
}
.product-topbar nav button:after {
  background: linear-gradient(90deg, #ff6424, #ffad32);
  box-shadow: 0 0 10px #ff6424d1;
}
.product-topbar nav button.active {
  color: #f5f1e8;
}
.sync-status {
  color: #6b7977;
}
.sync-status i {
  background: #00d6c9;
  box-shadow: 0 0 8px #00d6c9b8;
}
.section-kicker {
  color: #ff8b35;
}
.view-heading h2 {
  color: #f5f1e8;
}
.task-number {
  color: #00d6c952;
}
.task-body > p {
  color: #a8b4b1;
}
.query-list button {
  color: #e2e8e5;
  box-shadow: none;
  background: #1b2323b8;
  border-color: #00d6c929;
}
.query-list button:hover {
  background: #f2571f1f;
  border-color: #ff6424b8;
}
.query-list button span {
  color: #ff8b35;
  background: #ff64241f;
}
.answer-field {
  background: #0408099e;
  border-color: #00d6c933;
}
.answer-field span {
  color: #75827f;
}
.answer-field strong {
  color: #00d6c9;
}
.check-button {
  background: linear-gradient(135deg, #ff6a23, #d93f11);
  box-shadow: 0 7px 20px #d93f114d;
}
.ai-badge {
  color: #53f0e6;
  background: #00b9ad1f;
  border-color: #00d6c96b;
}
.code-window {
  background: #05090a;
  border-color: #00d6c933;
  box-shadow:
    inset 0 1px #ffffff09,
    0 14px 30px #00000040;
}
.code-gutter {
  color: #455553;
}
.code-lines {
  color: #c9d2cf;
}
.code-purple {
  color: #00d6c9;
}
.code-blue {
  color: #ffad32;
}
.code-orange {
  color: #ff6424;
}
.feedback-score {
  background: #00b9ad17;
  border-left-color: #00d6c9;
}
.feedback-score strong {
  color: #42e2d8;
}
.feedback-score span {
  color: #738783;
}
.feedback-items span {
  color: #a6b3b0;
}
.feedback-items i {
  background: #00d6c9;
  box-shadow: 0 0 7px #00d6c9a6;
}
.result-date {
  color: #7d8b88;
}
.score-orbit circle {
  stroke: #00d6c921;
}
.score-orbit .score-progress {
  stroke: #ff6424;
  filter: drop-shadow(0 0 9px #ff6424b3);
}
.score-orbit strong {
  color: #f5f1e8;
}
.score-orbit span {
  color: #81908d;
}
.skills > div {
  color: #a6b3b0;
}
.skills > div > i {
  background: #00d6c91c;
}
.skills > div > i b {
  background: linear-gradient(90deg, #ff6424, #ffad32);
  box-shadow: 0 0 8px #ff64248c;
}
.skills > div > strong {
  color: #edf2ef;
}
.skills p {
  color: #42e2d8;
  border-top-color: #00d6c926;
}
.product-footer {
  color: #71807e;
  background: #030708c7;
  border-top-color: #00d6c921;
}
.product-footer strong {
  color: #d5dedb;
}
.mini-progress {
  background: #00d6c91f;
}
.mini-progress i {
  background: linear-gradient(90deg, #ff6424 0%, #ffad32 48%, #00d6c9 100%);
  box-shadow: 0 0 10px #00d6c985;
}
.exam-route {
  background: #121617ed;
  border-color: #00d6c93d;
  box-shadow:
    0 20px 48px #171a1b4d,
    inset 0 1px #ffffff0d;
}
.route-copy span {
  color: #ff7a2d;
}
.route-copy strong {
  color: #dbe2df;
}
.route-line {
  background: #00d6c926;
}
.route-line i {
  background: linear-gradient(
    90deg,
    #0000,
    #ff6424 20%,
    #ffad32 50%,
    #00d6c9 80%,
    #0000
  );
  box-shadow: 0 0 10px #00d6c9ad;
}
.route-nodes > span {
  color: #687573;
  background: #171d1e;
  border-color: #394544;
}
.route-nodes > span.done {
  color: #47d8cf;
  background: #102a29;
  border-color: #00d6c957;
}
.route-nodes > span.current {
  color: #fff;
  background: #e54e19;
  border-color: #ff8b35;
  box-shadow:
    0 0 0 4px #ff642424,
    0 0 22px #ff642485;
}
.exam-route > button {
  color: #ff8b35;
  background: #ff64241f;
  border-color: #ff642470;
}
@keyframes binary-flow {
  0% {
    transform: translate(-25%);
  }
  to {
    transform: translate(-75%);
  }
}
@keyframes palette-drift {
  0% {
    transform: translate(-1.5%, -1%) scale(1);
  }
  to {
    transform: translate(2%, 1.5%) scale(1.04);
  }
}
@keyframes top-scan {
  0%,
  10% {
    left: -25%;
  }
  55%,
  to {
    left: 110%;
  }
}
@keyframes pulse-dot {
  0%,
  to {
    box-shadow:
      0 0 #00b9ad40,
      0 0 13px #00d6c98f;
  }
  55% {
    box-shadow:
      0 0 0 8px #00b9ad00,
      0 0 18px #00d6c9d1;
  }
}
@keyframes data-line {
  0%,
  to {
    opacity: 0.62;
    filter: brightness(0.9);
  }
  50% {
    opacity: 1;
    filter: brightness(1.2);
  }
}
@keyframes button-glint {
  0%,
  65% {
    translate: -120%;
  }
  85%,
  to {
    translate: 120%;
  }
}
@keyframes breathe {
  0%,
  to {
    opacity: 0.7;
    transform: scale(0.95);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}
@keyframes result-ring {
  0% {
    stroke-dashoffset: 427px;
  }
}
@keyframes skill-grow {
  0% {
    transform: scaleX(0);
  }
}
@keyframes route-signal {
  0% {
    transform: translate(-110px);
  }
  to {
    transform: translate(810px);
  }
}
@keyframes current-node {
  50% {
    box-shadow:
      0 0 0 7px #ff642400,
      0 0 24px #ff6424ad;
  }
}
@media (width<=1140px) {
  .site-header,
  .hero,
  .exam-route {
    width: calc(100% - 40px);
  }
  .main-nav {
    display: none;
  }
  .site-header {
    grid-template-columns: 1fr auto;
  }
  .header-actions {
    grid-column: 2;
  }
  .hero {
    grid-template-columns: 0.9fr 1.1fr;
    gap: 24px;
  }
  .hero h1 {
    font-size: 52px;
  }
  .stage-wrap {
    height: 430px;
  }
  .hero {
    grid-template-columns: minmax(395px, 0.85fr) minmax(520px, 1.15fr);
  }
  .proof-row {
    gap: 14px;
  }
}
@media (width<=920px) {
  .site-scene {
    height: auto;
    min-height: 100svh;
    overflow: clip;
  }
  .hero {
    grid-template-columns: 1fr;
    height: auto;
    max-height: none;
    padding: 70px 0 160px;
  }
  .hero-copy {
    max-width: 650px;
  }
  .hero-product {
    margin-top: 48px;
  }
  .stage-wrap {
    height: 480px;
  }
  .exam-route {
    margin: -110px auto 24px;
    position: relative;
    bottom: auto;
    left: auto;
    translate: none;
  }
}
@media (width<=680px) {
  .site-header,
  .hero,
  .exam-route {
    width: calc(100% - 32px);
  }
  .site-header {
    height: 70px;
  }
  .header-cta {
    display: none;
  }
  .hero {
    padding-top: 52px;
  }
  .hero h1 {
    font-size: clamp(43px, 12vw, 58px);
  }
  .hero-lead {
    font-size: 15px;
  }
  .hero-actions {
    flex-direction: column;
    align-items: flex-start;
  }
  .proof-row {
    flex-wrap: wrap;
  }
  .stage-wrap {
    height: 430px;
    margin-left: -7px;
    margin-right: -7px;
  }
  .product-shell {
    left: 0;
  }
  .product-topbar {
    grid-template-columns: auto 1fr;
  }
  .sync-status {
    display: none;
  }
  .product-topbar nav {
    justify-self: end;
  }
  .product-topbar nav button {
    padding: 0 7px;
    font-size: 8px;
  }
  .product-view {
    padding: 22px 18px;
  }
  .task-body {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 14px;
  }
  .answer-row {
    left: 18px;
    right: 18px;
  }
  .result-grid {
    grid-template-columns: 130px 1fr;
    gap: 12px;
  }
  .score-orbit {
    width: 120px;
    height: 120px;
  }
  .score-orbit strong {
    font-size: 36px;
  }
  .skills > div,
  .skills > button {
    grid-template-columns: 55px 1fr 28px;
    gap: 5px;
  }
  .exam-route {
    grid-template-columns: 1fr 38px;
    height: 86px;
  }
  .route-nodes {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  :before,
  :after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  .cursor-light {
    display: none;
  }
}
.site-scene[data-theme="classic"] {
  --page-a: #f7fafc;
  --page-b: #e5edf2;
  --page-c: #cbd9e2;
  --page-ink: #13212c;
  --page-muted: #526673;
  --accent: #1769e0;
  --accent-hi: #64a7ff;
  --signal: #00a7a0;
  --signal-hi: #5ff4e8;
  --panel-a: #122738;
  --panel-b: #07131e;
  --panel-ink: #eff8ff;
  --panel-muted: #a8bdca;
  --panel-dim: #6e8797;
  --route-bg: #091823f0;
  --route-ink: #e8f3f8;
  --binary-blend: multiply;
  --grid-line: #122c3b13;
}
.site-scene[data-theme="poisoned"] {
  --page-a: #25143b;
  --page-b: #44195c;
  --page-c: #0e0a18;
  --page-ink: #fbf4ff;
  --page-muted: #ceb5dc;
  --accent: #b760ff;
  --accent-hi: #e3a2ff;
  --signal: #a6f43d;
  --signal-hi: #dcff78;
  --panel-a: #180d25;
  --panel-b: #08060e;
  --panel-ink: #fcf7ff;
  --panel-muted: #c8b5d2;
  --panel-dim: #887495;
  --route-bg: #0a0710f0;
  --route-ink: #f8edff;
  --binary-blend: screen;
  --grid-line: #dbacff14;
}
.site-scene[data-theme="immolated"] {
  --page-a: #16090b;
  --page-b: #4b1015;
  --page-c: #07080b;
  --page-ink: #fff3e9;
  --page-muted: #d4aba1;
  --accent: #ff3d1f;
  --accent-hi: #ffb51c;
  --signal: #45d8ff;
  --signal-hi: #a2efff;
  --panel-a: #1b1113;
  --panel-b: #070708;
  --panel-ink: #fff5ed;
  --panel-muted: #cbb6b0;
  --panel-dim: #846e6d;
  --route-bg: #0a0708f2;
  --route-ink: #fff0e7;
  --binary-blend: screen;
  --grid-line: #ff693916;
}
.site-scene[data-theme="flayed"] {
  --page-a: #07150e;
  --page-b: #03120c;
  --page-c: #052019;
  --page-ink: #f4faf5;
  --page-muted: #b7c6bc;
  --accent: #93f23f;
  --accent-hi: #b8ff45;
  --signal: #2de1b2;
  --signal-hi: #91ffeb;
  --panel-a: #0a2419;
  --panel-b: #020b07;
  --panel-ink: #f4faf5;
  --panel-muted: #b7c6bc;
  --panel-dim: #879a8e;
  --route-bg: #050c08f2;
  --route-ink: #f4faf5;
  --binary-blend: screen;
  --grid-line: #96ff6913;
}
.site-scene[data-theme] {
  color: var(--page-ink);
  background:
    radial-gradient(circle at 76% 40%, var(--signal), transparent 33%),
    radial-gradient(circle at 8% 88%, var(--accent), transparent 34%),
    linear-gradient(
      128deg,
      var(--page-a) 0%,
      var(--page-b) 52%,
      var(--page-c) 100%
    );
}
@supports (color: color-mix(in lab, red, red)) {
  .site-scene[data-theme] {
    background:
      radial-gradient(
        circle at 76% 40%,
        color-mix(in srgb, var(--signal) 22%, transparent),
        transparent 33%
      ),
      radial-gradient(
        circle at 8% 88%,
        color-mix(in srgb, var(--accent) 24%, transparent),
        transparent 34%
      ),
      linear-gradient(
        128deg,
        var(--page-a) 0%,
        var(--page-b) 52%,
        var(--page-c) 100%
      );
  }
}
.site-scene[data-theme] {
  transition:
    background 0.65s cubic-bezier(0.22, 0.8, 0.2, 1),
    color 0.4s;
}
.site-scene[data-theme]:before {
  background:
    radial-gradient(circle at 18% 21%, var(--accent-hi), transparent 22%),
    radial-gradient(circle at 79% 27%, var(--signal), transparent 23%),
    radial-gradient(circle at 68% 80%, var(--signal-hi), transparent 24%),
    radial-gradient(circle at 28% 84%, var(--accent), transparent 23%);
}
@supports (color: color-mix(in lab, red, red)) {
  .site-scene[data-theme]:before {
    background:
      radial-gradient(
        circle at 18% 21%,
        color-mix(in srgb, var(--accent-hi) 42%, transparent),
        transparent 22%
      ),
      radial-gradient(
        circle at 79% 27%,
        color-mix(in srgb, var(--signal) 28%, transparent),
        transparent 23%
      ),
      radial-gradient(
        circle at 68% 80%,
        color-mix(in srgb, var(--signal-hi) 18%, transparent),
        transparent 24%
      ),
      radial-gradient(
        circle at 28% 84%,
        color-mix(in srgb, var(--accent) 27%, transparent),
        transparent 23%
      );
  }
}
.site-scene[data-theme]:before {
  filter: blur(12px) saturate(1.28) contrast(1.06);
}
.site-scene[data-theme]:after {
  content: none;
}
.site-scene[data-theme] .binary-field {
  color: var(--signal);
  text-shadow: 0 0 13px var(--signal);
}
@supports (color: color-mix(in lab, red, red)) {
  .site-scene[data-theme] .binary-field {
    text-shadow: 0 0 13px color-mix(in srgb, var(--signal) 68%, transparent);
  }
}
.site-scene[data-theme] .binary-field {
  mix-blend-mode: var(--binary-blend);
}
.site-scene[data-theme] .binary-row:nth-child(2n) {
  color: var(--accent);
}
.site-scene[data-theme] .binary-row:nth-child(4n) {
  color: var(--signal-hi);
}
.site-scene[data-theme] .cursor-light {
  background: radial-gradient(
    circle,
    var(--signal),
    var(--accent) 40%,
    transparent 72%
  );
}
@supports (color: color-mix(in lab, red, red)) {
  .site-scene[data-theme] .cursor-light {
    background: radial-gradient(
      circle,
      color-mix(in srgb, var(--signal) 30%, transparent),
      color-mix(in srgb, var(--accent) 15%, transparent) 40%,
      transparent 72%
    );
  }
}
.site-scene[data-theme] .top-beam {
  background: linear-gradient(
    90deg,
    transparent,
    var(--signal),
    var(--accent),
    var(--accent-hi),
    transparent
  );
  box-shadow: 0 0 17px var(--accent);
}
@supports (color: color-mix(in lab, red, red)) {
  .site-scene[data-theme] .top-beam {
    box-shadow: 0 0 17px color-mix(in srgb, var(--accent) 68%, transparent);
  }
}
.site-scene[data-theme] .site-header {
  border-bottom-color: var(--page-ink);
}
@supports (color: color-mix(in lab, red, red)) {
  .site-scene[data-theme] .site-header {
    border-bottom-color: color-mix(in srgb, var(--page-ink) 18%, transparent);
  }
}
.site-scene[data-theme] .brand {
  color: var(--page-ink);
}
.site-scene[data-theme] .brand strong {
  color: var(--accent);
}
.site-scene[data-theme] .brand-symbol {
  border-color: var(--accent);
}
@supports (color: color-mix(in lab, red, red)) {
  .site-scene[data-theme] .brand-symbol {
    border-color: color-mix(in srgb, var(--accent) 48%, transparent);
  }
}
.site-scene[data-theme] .brand-symbol {
  background: var(--panel-b);
}
@supports (color: color-mix(in lab, red, red)) {
  .site-scene[data-theme] .brand-symbol {
    background: color-mix(in srgb, var(--panel-b) 86%, transparent);
  }
}
.site-scene[data-theme] .brand-symbol {
  box-shadow:
    0 9px 22px var(--panel-b),
    inset 0 0 14px var(--signal);
}
@supports (color: color-mix(in lab, red, red)) {
  .site-scene[data-theme] .brand-symbol {
    box-shadow:
      0 9px 22px color-mix(in srgb, var(--panel-b) 28%, transparent),
      inset 0 0 14px color-mix(in srgb, var(--signal) 18%, transparent);
  }
}
.site-scene[data-theme] .brand-symbol i,
.site-scene[data-theme] .brand-symbol b {
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}
@supports (color: color-mix(in lab, red, red)) {
  .site-scene[data-theme] .brand-symbol i,
  .site-scene[data-theme] .brand-symbol b {
    box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 82%, transparent);
  }
}
.site-scene[data-theme] .brand-symbol i:nth-child(2),
.site-scene[data-theme] .brand-symbol i:nth-child(3) {
  background: var(--signal);
  opacity: 0.7;
}
.site-scene[data-theme] .login-button {
  color: var(--page-ink);
}
.site-scene[data-theme] .header-cta {
  border-color: var(--page-ink);
}
@supports (color: color-mix(in lab, red, red)) {
  .site-scene[data-theme] .header-cta {
    border-color: color-mix(in srgb, var(--page-ink) 72%, transparent);
  }
}
.site-scene[data-theme] .header-cta {
  background: var(--panel-b);
  color: var(--panel-ink);
  box-shadow: 0 9px 24px var(--panel-b);
}
@supports (color: color-mix(in lab, red, red)) {
  .site-scene[data-theme] .header-cta {
    box-shadow: 0 9px 24px color-mix(in srgb, var(--panel-b) 25%, transparent);
  }
}
.site-scene[data-theme] .header-cta:hover {
  border-color: var(--accent);
  background: var(--panel-a);
  box-shadow:
    0 12px 30px var(--panel-b),
    0 0 0 1px var(--accent);
}
@supports (color: color-mix(in lab, red, red)) {
  .site-scene[data-theme] .header-cta:hover {
    box-shadow:
      0 12px 30px color-mix(in srgb, var(--panel-b) 34%, transparent),
      0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
  }
}
.palette-switcher {
  border: 1px solid var(--page-ink);
  justify-content: center;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 5px;
  display: flex;
}
@supports (color: color-mix(in lab, red, red)) {
  .palette-switcher {
    border: 1px solid color-mix(in srgb, var(--page-ink) 16%, transparent);
  }
}
.palette-switcher {
  background: var(--page-a);
  border-radius: 13px;
}
@supports (color: color-mix(in lab, red, red)) {
  .palette-switcher {
    background: color-mix(in srgb, var(--page-a) 72%, transparent);
  }
}
.palette-switcher {
  box-shadow: 0 10px 28px var(--panel-b);
}
@supports (color: color-mix(in lab, red, red)) {
  .palette-switcher {
    box-shadow: 0 10px 28px color-mix(in srgb, var(--panel-b) 10%, transparent);
  }
}
.palette-switcher {
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.palette-caption {
  color: var(--page-muted);
  letter-spacing: 0.15em;
  margin: 0 5px 0 7px;
  font-size: 8px;
  font-weight: 820;
}
.palette-option {
  width: 31px;
  height: 31px;
  color: var(--page-ink);
  cursor: pointer;
  background: 0 0;
  border: 1px solid #0000;
  border-radius: 9px;
  justify-content: center;
  align-items: center;
  padding: 0;
  transition:
    transform 0.25s,
    border-color 0.25s,
    background 0.25s,
    box-shadow 0.25s;
  display: flex;
}
.palette-option:hover {
  border-color: var(--page-ink);
  transform: translateY(-1px) scale(1.06);
}
@supports (color: color-mix(in lab, red, red)) {
  .palette-option:hover {
    border-color: color-mix(in srgb, var(--page-ink) 24%, transparent);
  }
}
.palette-option.is-active {
  border-color: var(--page-ink);
}
@supports (color: color-mix(in lab, red, red)) {
  .palette-option.is-active {
    border-color: color-mix(in srgb, var(--page-ink) 42%, transparent);
  }
}
.palette-option.is-active {
  background: var(--page-a);
}
@supports (color: color-mix(in lab, red, red)) {
  .palette-option.is-active {
    background: color-mix(in srgb, var(--page-a) 72%, transparent);
  }
}
.palette-option.is-active {
  box-shadow:
    0 0 0 2px var(--page-a),
    0 0 0 3px var(--accent);
}
@supports (color: color-mix(in lab, red, red)) {
  .palette-option.is-active {
    box-shadow:
      0 0 0 2px color-mix(in srgb, var(--page-a) 88%, transparent),
      0 0 0 3px color-mix(in srgb, var(--accent) 62%, transparent);
  }
}
.palette-option i {
  width: 13px;
  height: 13px;
  box-shadow:
    0 0 0 2px var(--page-a),
    0 0 0 3px var(--page-ink);
  border-radius: 50%;
  flex: none;
}
@supports (color: color-mix(in lab, red, red)) {
  .palette-option i {
    box-shadow:
      0 0 0 2px color-mix(in srgb, var(--page-a) 62%, transparent),
      0 0 0 3px color-mix(in srgb, var(--page-ink) 18%, transparent);
  }
}
.palette-option[data-palette="classic"] i {
  background: linear-gradient(135deg, #1769e0 0 50%, #00a7a0 50%);
}
.palette-option[data-palette="poisoned"] i {
  background: linear-gradient(135deg, #b760ff 0 50%, #a6f43d 50%);
}
.palette-option[data-palette="immolated"] i {
  background: linear-gradient(135deg, #ff3d1f 0 50%, #ffb51c 50%);
}
.palette-option[data-palette="flayed"] i {
  background: linear-gradient(135deg, #83e64a 0 50%, #27d9bc 50%);
}
.site-scene[data-theme] .eyebrow {
  color: var(--page-muted);
}
.site-scene[data-theme] .eyebrow > i {
  background: var(--signal);
  box-shadow:
    0 0 0 4px var(--signal),
    0 0 16px var(--signal);
}
@supports (color: color-mix(in lab, red, red)) {
  .site-scene[data-theme] .eyebrow > i {
    box-shadow:
      0 0 0 4px color-mix(in srgb, var(--signal) 14%, transparent),
      0 0 16px color-mix(in srgb, var(--signal) 68%, transparent);
  }
}
.site-scene[data-theme] .eyebrow span {
  color: var(--page-ink);
  border-color: var(--accent);
}
@supports (color: color-mix(in lab, red, red)) {
  .site-scene[data-theme] .eyebrow span {
    border-color: color-mix(in srgb, var(--accent) 36%, transparent);
  }
}
.site-scene[data-theme] .eyebrow span {
  background: var(--page-a);
}
@supports (color: color-mix(in lab, red, red)) {
  .site-scene[data-theme] .eyebrow span {
    background: color-mix(in srgb, var(--page-a) 42%, transparent);
  }
}
.site-scene[data-theme] .hero h1 {
  color: var(--page-ink);
  text-shadow: none;
}
.site-scene[data-theme] .hero h1 > em {
  background-image: linear-gradient(
    92deg,
    var(--accent),
    var(--accent-hi) 56%,
    var(--signal)
  );
}
.site-scene[data-theme] .hero h1 > em:after {
  background: linear-gradient(
    90deg,
    var(--accent),
    var(--accent-hi) 56%,
    var(--signal)
  );
  box-shadow: 0 0 12px var(--accent);
}
@supports (color: color-mix(in lab, red, red)) {
  .site-scene[data-theme] .hero h1 > em:after {
    box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 34%, transparent);
  }
}
.site-scene[data-theme] .hero-lead {
  color: var(--page-muted);
}
.site-scene[data-theme] .primary-cta {
  background: linear-gradient(135deg, var(--accent-hi), var(--accent));
  color: #fff;
  box-shadow:
    0 12px 31px var(--accent),
    inset 0 1px #ffffff4d;
}
@supports (color: color-mix(in lab, red, red)) {
  .site-scene[data-theme] .primary-cta {
    box-shadow:
      0 12px 31px color-mix(in srgb, var(--accent) 38%, transparent),
      inset 0 1px #ffffff4d;
  }
}
.site-scene[data-theme] .primary-cta:hover {
  box-shadow:
    0 17px 42px var(--accent),
    inset 0 1px #ffffff57;
}
@supports (color: color-mix(in lab, red, red)) {
  .site-scene[data-theme] .primary-cta:hover {
    box-shadow:
      0 17px 42px color-mix(in srgb, var(--accent) 50%, transparent),
      inset 0 1px #ffffff57;
  }
}
.site-scene[data-theme="flayed"] .primary-cta,
.site-scene[data-theme="poisoned"] .primary-cta {
  color: #10150e;
}
.site-scene[data-theme] .play-button {
  color: var(--page-ink);
}
.site-scene[data-theme] .play-button > span {
  border-color: var(--page-ink);
}
@supports (color: color-mix(in lab, red, red)) {
  .site-scene[data-theme] .play-button > span {
    border-color: color-mix(in srgb, var(--page-ink) 32%, transparent);
  }
}
.site-scene[data-theme] .play-button > span {
  background: var(--page-a);
}
@supports (color: color-mix(in lab, red, red)) {
  .site-scene[data-theme] .play-button > span {
    background: color-mix(in srgb, var(--page-a) 46%, transparent);
  }
}
.site-scene[data-theme] .play-button > span {
  box-shadow: 0 8px 20px var(--panel-b);
}
@supports (color: color-mix(in lab, red, red)) {
  .site-scene[data-theme] .play-button > span {
    box-shadow: 0 8px 20px color-mix(in srgb, var(--panel-b) 11%, transparent);
  }
}
.site-scene[data-theme] .play-button:hover > span {
  border-color: var(--signal);
  box-shadow: 0 0 22px var(--signal);
}
@supports (color: color-mix(in lab, red, red)) {
  .site-scene[data-theme] .play-button:hover > span {
    box-shadow: 0 0 22px color-mix(in srgb, var(--signal) 28%, transparent);
  }
}
.site-scene[data-theme] .play-button > span i {
  border-left-color: var(--signal);
}
.site-scene[data-theme] .play-button small,
.site-scene[data-theme] .proof-row span {
  color: var(--page-muted);
}
.site-scene[data-theme] .proof-row strong {
  color: var(--page-ink);
}
.site-scene[data-theme] .proof-row > i {
  background: var(--page-ink);
}
@supports (color: color-mix(in lab, red, red)) {
  .site-scene[data-theme] .proof-row > i {
    background: color-mix(in srgb, var(--page-ink) 19%, transparent);
  }
}
.site-scene[data-theme] .live-label {
  color: var(--page-ink);
}
.site-scene[data-theme] .live-label span {
  color: var(--page-muted);
}
.site-scene[data-theme] .live-label i {
  background: var(--signal);
  box-shadow: 0 0 10px var(--signal);
}
@supports (color: color-mix(in lab, red, red)) {
  .site-scene[data-theme] .live-label i {
    box-shadow: 0 0 10px color-mix(in srgb, var(--signal) 95%, transparent);
  }
}
.site-scene[data-theme] .stage-aura {
  background: radial-gradient(
    ellipse,
    var(--accent),
    var(--signal) 43%,
    transparent 70%
  );
}
@supports (color: color-mix(in lab, red, red)) {
  .site-scene[data-theme] .stage-aura {
    background: radial-gradient(
      ellipse,
      color-mix(in srgb, var(--accent) 27%, transparent),
      color-mix(in srgb, var(--signal) 21%, transparent) 43%,
      transparent 70%
    );
  }
}
.site-scene[data-theme] .stage-aura {
  filter: blur(20px) saturate(1.35);
}
.site-scene[data-theme] .stage-aura:before {
  border-color: var(--accent);
}
@supports (color: color-mix(in lab, red, red)) {
  .site-scene[data-theme] .stage-aura:before {
    border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  }
}
.site-scene[data-theme] .stage-aura:after {
  border-color: var(--signal);
}
@supports (color: color-mix(in lab, red, red)) {
  .site-scene[data-theme] .stage-aura:after {
    border-color: color-mix(in srgb, var(--signal) 35%, transparent);
  }
}
.site-scene[data-theme] .product-shell {
  border-color: var(--signal);
}
@supports (color: color-mix(in lab, red, red)) {
  .site-scene[data-theme] .product-shell {
    border-color: color-mix(in srgb, var(--signal) 44%, transparent);
  }
}
.site-scene[data-theme] .product-shell {
  background: linear-gradient(145deg, var(--panel-a), var(--panel-b));
  box-shadow:
    0 42px 95px var(--panel-b),
    0 0 0 1px var(--accent),
    0 0 84px var(--signal),
    inset 0 1px #ffffff12;
}
@supports (color: color-mix(in lab, red, red)) {
  .site-scene[data-theme] .product-shell {
    box-shadow:
      0 42px 95px color-mix(in srgb, var(--panel-b) 62%, transparent),
      0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent),
      0 0 84px color-mix(in srgb, var(--signal) 20%, transparent),
      inset 0 1px #ffffff12;
  }
}
.site-scene[data-theme] .product-shell:before {
  background: radial-gradient(
    circle 300px at var(--stage-x) var(--stage-y),
    var(--signal),
    var(--accent) 46%,
    transparent 72%
  );
}
@supports (color: color-mix(in lab, red, red)) {
  .site-scene[data-theme] .product-shell:before {
    background: radial-gradient(
      circle 300px at var(--stage-x) var(--stage-y),
      color-mix(in srgb, var(--signal) 18%, transparent),
      color-mix(in srgb, var(--accent) 6%, transparent) 46%,
      transparent 72%
    );
  }
}
.site-scene[data-theme] .product-topbar {
  border-bottom-color: var(--signal);
}
@supports (color: color-mix(in lab, red, red)) {
  .site-scene[data-theme] .product-topbar {
    border-bottom-color: color-mix(in srgb, var(--signal) 15%, transparent);
  }
}
.site-scene[data-theme] .product-topbar {
  background: var(--panel-b);
}
@supports (color: color-mix(in lab, red, red)) {
  .site-scene[data-theme] .product-topbar {
    background: color-mix(in srgb, var(--panel-b) 80%, transparent);
  }
}
.site-scene[data-theme] .window-mark i {
  background: var(--panel-muted);
}
@supports (color: color-mix(in lab, red, red)) {
  .site-scene[data-theme] .window-mark i {
    background: color-mix(in srgb, var(--panel-muted) 36%, transparent);
  }
}
.site-scene[data-theme] .window-mark i:first-child {
  background: var(--accent);
  box-shadow: 0 0 9px var(--accent);
}
@supports (color: color-mix(in lab, red, red)) {
  .site-scene[data-theme] .window-mark i:first-child {
    box-shadow: 0 0 9px color-mix(in srgb, var(--accent) 90%, transparent);
  }
}
.site-scene[data-theme] .product-topbar nav button {
  color: var(--panel-ink);
}
.site-scene[data-theme] .product-topbar nav button:after {
  background: linear-gradient(90deg, var(--accent), var(--accent-hi));
  box-shadow: 0 0 10px var(--accent);
}
@supports (color: color-mix(in lab, red, red)) {
  .site-scene[data-theme] .product-topbar nav button:after {
    box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 82%, transparent);
  }
}
.site-scene[data-theme] .product-topbar nav button.active,
.site-scene[data-theme] .view-heading h2 {
  color: var(--panel-ink);
}
.site-scene[data-theme] .sync-status,
.site-scene[data-theme] .result-date {
  color: var(--panel-dim);
}
.site-scene[data-theme] .sync-status i {
  background: var(--signal);
  box-shadow: 0 0 8px var(--signal);
}
@supports (color: color-mix(in lab, red, red)) {
  .site-scene[data-theme] .sync-status i {
    box-shadow: 0 0 8px color-mix(in srgb, var(--signal) 72%, transparent);
  }
}
.site-scene[data-theme] .section-kicker,
.site-scene[data-theme] .answer-field strong {
  color: var(--accent-hi);
}
.site-scene[data-theme] .task-number {
  color: var(--signal);
}
@supports (color: color-mix(in lab, red, red)) {
  .site-scene[data-theme] .task-number {
    color: color-mix(in srgb, var(--signal) 34%, transparent);
  }
}
.site-scene[data-theme] .task-body > p,
.site-scene[data-theme] .feedback-items span,
.site-scene[data-theme] .skills > div {
  color: var(--panel-muted);
}
.site-scene[data-theme] .query-list button {
  border-color: var(--signal);
}
@supports (color: color-mix(in lab, red, red)) {
  .site-scene[data-theme] .query-list button {
    border-color: color-mix(in srgb, var(--signal) 18%, transparent);
  }
}
.site-scene[data-theme] .query-list button {
  background: var(--panel-a);
}
@supports (color: color-mix(in lab, red, red)) {
  .site-scene[data-theme] .query-list button {
    background: color-mix(in srgb, var(--panel-a) 72%, transparent);
  }
}
.site-scene[data-theme] .query-list button {
  color: var(--panel-ink);
}
.site-scene[data-theme] .query-list button:hover {
  border-color: var(--accent);
}
@supports (color: color-mix(in lab, red, red)) {
  .site-scene[data-theme] .query-list button:hover {
    border-color: color-mix(in srgb, var(--accent) 76%, transparent);
  }
}
.site-scene[data-theme] .query-list button:hover {
  background: var(--accent);
}
@supports (color: color-mix(in lab, red, red)) {
  .site-scene[data-theme] .query-list button:hover {
    background: color-mix(in srgb, var(--accent) 14%, var(--panel-a));
  }
}
.site-scene[data-theme] .query-list button span {
  color: var(--accent-hi);
  background: var(--accent);
}
@supports (color: color-mix(in lab, red, red)) {
  .site-scene[data-theme] .query-list button span {
    background: color-mix(in srgb, var(--accent) 15%, transparent);
  }
}
.site-scene[data-theme] .answer-field {
  border-color: var(--signal);
}
@supports (color: color-mix(in lab, red, red)) {
  .site-scene[data-theme] .answer-field {
    border-color: color-mix(in srgb, var(--signal) 21%, transparent);
  }
}
.site-scene[data-theme] .answer-field {
  background: var(--panel-b);
}
@supports (color: color-mix(in lab, red, red)) {
  .site-scene[data-theme] .answer-field {
    background: color-mix(in srgb, var(--panel-b) 68%, transparent);
  }
}
.site-scene[data-theme] .answer-field span {
  color: var(--panel-dim);
}
.site-scene[data-theme] .check-button {
  background: linear-gradient(135deg, var(--accent-hi), var(--accent));
  box-shadow: 0 7px 20px var(--accent);
}
@supports (color: color-mix(in lab, red, red)) {
  .site-scene[data-theme] .check-button {
    box-shadow: 0 7px 20px color-mix(in srgb, var(--accent) 34%, transparent);
  }
}
.site-scene[data-theme] .ai-badge {
  border-color: var(--signal);
}
@supports (color: color-mix(in lab, red, red)) {
  .site-scene[data-theme] .ai-badge {
    border-color: color-mix(in srgb, var(--signal) 43%, transparent);
  }
}
.site-scene[data-theme] .ai-badge {
  color: var(--signal-hi);
  background: var(--signal);
}
@supports (color: color-mix(in lab, red, red)) {
  .site-scene[data-theme] .ai-badge {
    background: color-mix(in srgb, var(--signal) 12%, transparent);
  }
}
.site-scene[data-theme] .code-window {
  border-color: var(--signal);
}
@supports (color: color-mix(in lab, red, red)) {
  .site-scene[data-theme] .code-window {
    border-color: color-mix(in srgb, var(--signal) 21%, transparent);
  }
}
.site-scene[data-theme] .code-window {
  background: var(--panel-b);
}
@supports (color: color-mix(in lab, red, red)) {
  .site-scene[data-theme] .code-window {
    background: color-mix(in srgb, var(--panel-b) 92%, black);
  }
}
.site-scene[data-theme] .code-gutter {
  color: var(--panel-dim);
}
.site-scene[data-theme] .code-lines {
  color: var(--panel-muted);
}
.site-scene[data-theme] .code-purple {
  color: var(--signal);
}
.site-scene[data-theme] .code-blue {
  color: var(--accent-hi);
}
.site-scene[data-theme] .code-orange {
  color: var(--accent);
}
.site-scene[data-theme] .code-window mark {
  background: var(--accent);
}
@supports (color: color-mix(in lab, red, red)) {
  .site-scene[data-theme] .code-window mark {
    background: color-mix(in srgb, var(--accent) 20%, transparent);
  }
}
.site-scene[data-theme] .code-window mark {
  color: var(--accent-hi);
  box-shadow: 0 0 0 1px var(--accent);
}
@supports (color: color-mix(in lab, red, red)) {
  .site-scene[data-theme] .code-window mark {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
  }
}
.site-scene[data-theme] .feedback-score {
  border-left-color: var(--signal);
  background: var(--signal);
}
@supports (color: color-mix(in lab, red, red)) {
  .site-scene[data-theme] .feedback-score {
    background: color-mix(in srgb, var(--signal) 10%, transparent);
  }
}
.site-scene[data-theme] .feedback-score strong,
.site-scene[data-theme] .skills p {
  color: var(--signal-hi);
}
.site-scene[data-theme] .feedback-score span {
  color: var(--panel-dim);
}
.site-scene[data-theme] .feedback-items i {
  background: var(--signal);
  box-shadow: 0 0 7px var(--signal);
}
@supports (color: color-mix(in lab, red, red)) {
  .site-scene[data-theme] .feedback-items i {
    box-shadow: 0 0 7px color-mix(in srgb, var(--signal) 68%, transparent);
  }
}
.site-scene[data-theme] .feedback-items .feedback-issue i {
  background: var(--accent);
  box-shadow: 0 0 7px var(--accent);
}
@supports (color: color-mix(in lab, red, red)) {
  .site-scene[data-theme] .feedback-items .feedback-issue i {
    box-shadow: 0 0 7px color-mix(in srgb, var(--accent) 68%, transparent);
  }
}
.site-scene[data-theme] .score-orbit circle {
  stroke: var(--signal);
}
@supports (color: color-mix(in lab, red, red)) {
  .site-scene[data-theme] .score-orbit circle {
    stroke: color-mix(in srgb, var(--signal) 14%, transparent);
  }
}
.site-scene[data-theme] .score-orbit .score-progress {
  stroke: var(--accent);
  filter: drop-shadow(0 0 9px var(--accent));
}
@supports (color: color-mix(in lab, red, red)) {
  .site-scene[data-theme] .score-orbit .score-progress {
    filter: drop-shadow(
      0 0 9px color-mix(in srgb, var(--accent) 72%, transparent)
    );
  }
}
.site-scene[data-theme] .score-orbit strong,
.site-scene[data-theme] .skills > div > strong {
  color: var(--panel-ink);
}
.site-scene[data-theme] .score-orbit span {
  color: var(--panel-dim);
}
.site-scene[data-theme] .skills > div > i {
  background: var(--signal);
}
@supports (color: color-mix(in lab, red, red)) {
  .site-scene[data-theme] .skills > div > i {
    background: color-mix(in srgb, var(--signal) 12%, transparent);
  }
}
.site-scene[data-theme] .skills > div > i b {
  background: linear-gradient(90deg, var(--accent), var(--accent-hi));
  box-shadow: 0 0 8px var(--accent);
}
@supports (color: color-mix(in lab, red, red)) {
  .site-scene[data-theme] .skills > div > i b {
    box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 56%, transparent);
  }
}
.site-scene[data-theme] .skills p {
  border-top-color: var(--signal);
}
@supports (color: color-mix(in lab, red, red)) {
  .site-scene[data-theme] .skills p {
    border-top-color: color-mix(in srgb, var(--signal) 15%, transparent);
  }
}
.site-scene[data-theme] .product-footer {
  border-top-color: var(--signal);
}
@supports (color: color-mix(in lab, red, red)) {
  .site-scene[data-theme] .product-footer {
    border-top-color: color-mix(in srgb, var(--signal) 14%, transparent);
  }
}
.site-scene[data-theme] .product-footer {
  background: var(--panel-b);
}
@supports (color: color-mix(in lab, red, red)) {
  .site-scene[data-theme] .product-footer {
    background: color-mix(in srgb, var(--panel-b) 78%, transparent);
  }
}
.site-scene[data-theme] .product-footer {
  color: var(--panel-dim);
}
.site-scene[data-theme] .product-footer strong {
  color: var(--panel-muted);
}
.site-scene[data-theme] .mini-progress {
  background: var(--signal);
}
@supports (color: color-mix(in lab, red, red)) {
  .site-scene[data-theme] .mini-progress {
    background: color-mix(in srgb, var(--signal) 13%, transparent);
  }
}
.site-scene[data-theme] .mini-progress i {
  background: linear-gradient(
    90deg,
    var(--accent),
    var(--accent-hi) 50%,
    var(--signal)
  );
  box-shadow: 0 0 10px var(--signal);
}
@supports (color: color-mix(in lab, red, red)) {
  .site-scene[data-theme] .mini-progress i {
    box-shadow: 0 0 10px color-mix(in srgb, var(--signal) 54%, transparent);
  }
}
.site-scene[data-theme] .exam-route {
  border-color: var(--signal);
}
@supports (color: color-mix(in lab, red, red)) {
  .site-scene[data-theme] .exam-route {
    border-color: color-mix(in srgb, var(--signal) 25%, transparent);
  }
}
.site-scene[data-theme] .exam-route {
  background: var(--route-bg);
  box-shadow:
    0 20px 48px var(--panel-b),
    inset 0 1px #ffffff0d;
}
@supports (color: color-mix(in lab, red, red)) {
  .site-scene[data-theme] .exam-route {
    box-shadow:
      0 20px 48px color-mix(in srgb, var(--panel-b) 38%, transparent),
      inset 0 1px #ffffff0d;
  }
}
.site-scene[data-theme] .route-copy span {
  color: var(--accent-hi);
}
.site-scene[data-theme] .route-copy strong {
  color: var(--route-ink);
}
.site-scene[data-theme] .route-line {
  background: var(--signal);
}
@supports (color: color-mix(in lab, red, red)) {
  .site-scene[data-theme] .route-line {
    background: color-mix(in srgb, var(--signal) 16%, transparent);
  }
}
.site-scene[data-theme] .route-line i {
  background: linear-gradient(
    90deg,
    transparent,
    var(--accent) 22%,
    var(--accent-hi) 50%,
    var(--signal) 80%,
    transparent
  );
  box-shadow: 0 0 10px var(--signal);
}
@supports (color: color-mix(in lab, red, red)) {
  .site-scene[data-theme] .route-line i {
    box-shadow: 0 0 10px color-mix(in srgb, var(--signal) 68%, transparent);
  }
}
.site-scene[data-theme] .route-nodes > span {
  border-color: var(--panel-muted);
}
@supports (color: color-mix(in lab, red, red)) {
  .site-scene[data-theme] .route-nodes > span {
    border-color: color-mix(in srgb, var(--panel-muted) 30%, transparent);
  }
}
.site-scene[data-theme] .route-nodes > span {
  background: var(--panel-a);
  color: var(--panel-dim);
}
.site-scene[data-theme] .route-nodes > span.done {
  border-color: var(--signal);
}
@supports (color: color-mix(in lab, red, red)) {
  .site-scene[data-theme] .route-nodes > span.done {
    border-color: color-mix(in srgb, var(--signal) 38%, transparent);
  }
}
.site-scene[data-theme] .route-nodes > span.done {
  color: var(--signal-hi);
  background: var(--signal);
}
@supports (color: color-mix(in lab, red, red)) {
  .site-scene[data-theme] .route-nodes > span.done {
    background: color-mix(in srgb, var(--signal) 15%, var(--panel-b));
  }
}
.site-scene[data-theme] .route-nodes > span.current {
  border-color: var(--accent-hi);
  color: #fff;
  background: var(--accent);
  box-shadow:
    0 0 0 4px var(--accent),
    0 0 22px var(--accent);
}
@supports (color: color-mix(in lab, red, red)) {
  .site-scene[data-theme] .route-nodes > span.current {
    box-shadow:
      0 0 0 4px color-mix(in srgb, var(--accent) 15%, transparent),
      0 0 22px color-mix(in srgb, var(--accent) 54%, transparent);
  }
}
.site-scene[data-theme] .route-nodes > span.current {
  animation: 2s ease-in-out infinite current-node-themed;
}
.site-scene[data-theme="flayed"] .route-nodes > span.current,
.site-scene[data-theme="poisoned"] .route-nodes > span.current {
  color: #10150e;
}
.site-scene[data-theme] .exam-route > button {
  border-color: var(--accent);
}
@supports (color: color-mix(in lab, red, red)) {
  .site-scene[data-theme] .exam-route > button {
    border-color: color-mix(in srgb, var(--accent) 46%, transparent);
  }
}
.site-scene[data-theme] .exam-route > button {
  background: var(--accent);
}
@supports (color: color-mix(in lab, red, red)) {
  .site-scene[data-theme] .exam-route > button {
    background: color-mix(in srgb, var(--accent) 13%, transparent);
  }
}
.site-scene[data-theme] .exam-route > button {
  color: var(--accent-hi);
}
@keyframes current-node-themed {
  50% {
    box-shadow:
      0 0 0 7px color-mix(in srgb, var(--accent) 0%, transparent),
      0 0 26px color-mix(in srgb, var(--accent) 72%, transparent);
  }
}
@media (width<=1140px) {
  .palette-caption {
    display: none;
  }
}
@media (width<=920px) {
  .palette-switcher {
    min-width: 0;
    position: absolute;
    top: 82px;
    left: 0;
  }
  .site-scene .hero {
    padding-top: 110px;
  }
}
@media (width<=680px) {
  .palette-switcher {
    justify-content: flex-start;
    top: 78px;
    right: 0;
    overflow-x: auto;
  }
}
.site-header {
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 34px;
}
.main-nav {
  justify-self: center;
  gap: 30px;
}
.site-scene[data-theme] .main-nav a {
  color: var(--page-muted);
  font-size: 12px;
  font-weight: 630;
  position: relative;
}
.site-scene[data-theme] .main-nav a:after {
  content: "";
  background: linear-gradient(90deg, var(--accent), var(--signal));
  opacity: 0;
  border-radius: 999px;
  height: 2px;
  transition:
    left 0.24s,
    right 0.24s,
    opacity 0.24s;
  position: absolute;
  bottom: -10px;
  left: 50%;
  right: 50%;
}
.site-scene[data-theme] .main-nav a:hover {
  color: var(--page-ink);
}
.site-scene[data-theme] .main-nav a:hover:after {
  opacity: 1;
  left: 0;
  right: 0;
}
.header-actions {
  gap: 7px;
}
.search-button,
.theme-button {
  border: 1px solid var(--page-ink);
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  display: grid;
  position: relative;
}
@supports (color: color-mix(in lab, red, red)) {
  .search-button,
  .theme-button {
    border: 1px solid color-mix(in srgb, var(--page-ink) 18%, transparent);
  }
}
.search-button,
.theme-button {
  background: var(--page-a);
  border-radius: 11px;
}
@supports (color: color-mix(in lab, red, red)) {
  .search-button,
  .theme-button {
    background: color-mix(in srgb, var(--page-a) 52%, transparent);
  }
}
.search-button,
.theme-button {
  color: var(--page-ink);
  cursor: pointer;
  transition:
    border-color 0.22s,
    transform 0.22s,
    background 0.22s;
}
.search-button:hover,
.theme-button:hover,
.theme-button[aria-expanded="true"] {
  border-color: var(--accent);
  transform: translateY(-1px);
}
@supports (color: color-mix(in lab, red, red)) {
  .search-button:hover,
  .theme-button:hover,
  .theme-button[aria-expanded="true"] {
    border-color: color-mix(in srgb, var(--accent) 70%, transparent);
  }
}
.search-button:hover,
.theme-button:hover,
.theme-button[aria-expanded="true"] {
  background: var(--page-a);
}
@supports (color: color-mix(in lab, red, red)) {
  .search-button:hover,
  .theme-button:hover,
  .theme-button[aria-expanded="true"] {
    background: color-mix(in srgb, var(--page-a) 78%, transparent);
  }
}
.search-button {
  white-space: nowrap;
  gap: 8px;
  width: auto;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 690;
  display: inline-flex;
}
.search-button svg,
.theme-button svg {
  width: 18px;
  height: 18px;
}
.theme-control {
  position: relative;
}
.active-theme-dot {
  border: 1px solid var(--page-a);
  width: 7px;
  height: 7px;
  position: absolute;
  bottom: 5px;
  right: 5px;
}
@supports (color: color-mix(in lab, red, red)) {
  .active-theme-dot {
    border: 1px solid color-mix(in srgb, var(--page-a) 75%, transparent);
  }
}
.active-theme-dot {
  background: linear-gradient(135deg, var(--accent) 0 50%, var(--signal) 50%);
  box-shadow: 0 0 8px var(--accent);
  border-radius: 50%;
}
@supports (color: color-mix(in lab, red, red)) {
  .active-theme-dot {
    box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 46%, transparent);
  }
}
.theme-control .palette-switcher {
  z-index: 40;
  background: var(--page-a);
  min-width: max-content;
  padding: 7px;
  position: absolute;
  top: calc(100% + 10px);
  left: auto;
  right: 0;
}
@supports (color: color-mix(in lab, red, red)) {
  .theme-control .palette-switcher {
    background: color-mix(in srgb, var(--page-a) 90%, transparent);
  }
}
.theme-control .palette-switcher {
  box-shadow: 0 18px 44px var(--panel-b);
}
@supports (color: color-mix(in lab, red, red)) {
  .theme-control .palette-switcher {
    box-shadow: 0 18px 44px color-mix(in srgb, var(--panel-b) 28%, transparent);
  }
}
.theme-control .palette-switcher {
  animation: 0.2s cubic-bezier(0.22, 0.8, 0.2, 1) both palette-pop;
}
.login-button {
  white-space: nowrap;
  border: 1px solid #0000;
  border-radius: 10px;
  align-items: center;
  height: 40px;
  padding: 0 13px;
  font-size: 12px;
  font-weight: 650;
  display: inline-flex;
}
.site-scene[data-theme] .login-button:hover {
  border-color: var(--page-ink);
}
@supports (color: color-mix(in lab, red, red)) {
  .site-scene[data-theme] .login-button:hover {
    border-color: color-mix(in srgb, var(--page-ink) 18%, transparent);
  }
}
.site-scene[data-theme] .login-button:hover {
  background: var(--page-a);
}
@supports (color: color-mix(in lab, red, red)) {
  .site-scene[data-theme] .login-button:hover {
    background: color-mix(in srgb, var(--page-a) 45%, transparent);
  }
}
.hero {
  height: calc(100svh - 82px);
  min-height: 620px;
  max-height: 780px;
  padding: 40px 0 58px;
}
.hero-product {
  transform: translateY(4px);
}
.stage-wrap {
  height: 450px;
}
.product-shell {
  grid-template-rows: 49px 1fr;
  inset: 10px 0 4px 12px;
}
.task-number {
  align-items: flex-start;
  gap: 2px;
  display: flex;
}
.task-number small {
  font-family: var(--font-geist-sans);
  margin-top: 4px;
  font-size: 11px;
  font-weight: 750;
}
.query-list button {
  position: relative;
}
.query-list button b {
  background: var(--accent);
  color: #fff;
  width: 19px;
  height: 19px;
  font-family: var(--font-geist-sans);
  box-shadow: 0 0 10px var(--accent);
  border-radius: 50%;
  place-items: center;
  margin-left: auto;
  font-size: 9px;
  display: grid;
}
@supports (color: color-mix(in lab, red, red)) {
  .query-list button b {
    box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 50%, transparent);
  }
}
.site-scene[data-theme="poisoned"] .query-list button b,
.site-scene[data-theme="flayed"] .query-list button b {
  color: #10150e;
}
.site-scene[data-theme] .query-list button.is-selected {
  border-color: var(--accent);
}
@supports (color: color-mix(in lab, red, red)) {
  .site-scene[data-theme] .query-list button.is-selected {
    border-color: color-mix(in srgb, var(--accent) 70%, transparent);
  }
}
.site-scene[data-theme] .query-list button.is-selected {
  background: var(--accent);
}
@supports (color: color-mix(in lab, red, red)) {
  .site-scene[data-theme] .query-list button.is-selected {
    background: color-mix(in srgb, var(--accent) 13%, var(--panel-a));
  }
}
.site-scene[data-theme] .query-list button.is-selected {
  transform: translate(-4px);
}
.check-button:disabled {
  cursor: not-allowed;
  opacity: 0.38;
  filter: saturate(0.45);
  box-shadow: none !important;
}
.site-scene[data-theme] .answer-field.is-correct {
  border-color: var(--signal);
}
@supports (color: color-mix(in lab, red, red)) {
  .site-scene[data-theme] .answer-field.is-correct {
    border-color: color-mix(in srgb, var(--signal) 60%, transparent);
  }
}
.site-scene[data-theme] .answer-field.is-correct {
  background: var(--signal);
}
@supports (color: color-mix(in lab, red, red)) {
  .site-scene[data-theme] .answer-field.is-correct {
    background: color-mix(in srgb, var(--signal) 10%, var(--panel-b));
  }
}
.site-scene[data-theme] .answer-field.is-correct span,
.site-scene[data-theme] .answer-field.is-correct strong {
  color: var(--signal-hi);
}
.site-scene[data-theme] .answer-field.is-wrong {
  border-color: var(--accent);
}
@supports (color: color-mix(in lab, red, red)) {
  .site-scene[data-theme] .answer-field.is-wrong {
    border-color: color-mix(in srgb, var(--accent) 65%, transparent);
  }
}
.site-scene[data-theme] .answer-field.is-wrong {
  animation: 0.34s answer-shake;
}
.sync-status {
  white-space: nowrap;
}
.sync-status.is-running i {
  animation: 1s ease-in-out infinite demo-pulse;
}
.play-button.is-running > span {
  border-color: var(--signal) !important;
  box-shadow:
    0 0 0 5px var(--signal),
    0 0 24px var(--signal) !important;
}
@supports (color: color-mix(in lab, red, red)) {
  .play-button.is-running > span {
    box-shadow:
      0 0 0 5px color-mix(in srgb, var(--signal) 9%, transparent),
      0 0 24px color-mix(in srgb, var(--signal) 34%, transparent) !important;
  }
}
.play-button.is-running > span i {
  background: var(--signal);
  border: 0;
  border-radius: 2px;
  width: 8px;
  height: 8px;
  margin: 0;
}
@keyframes palette-pop {
  0% {
    opacity: 0;
    transform: translateY(-5px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes answer-shake {
  25% {
    transform: translate(-3px);
  }
  55% {
    transform: translate(3px);
  }
  80% {
    transform: translate(-1px);
  }
}
@keyframes demo-pulse {
  50% {
    opacity: 0.45;
    box-shadow: 0 0 14px color-mix(in srgb, var(--signal) 92%, transparent);
  }
}
@media (width<=1080px) {
  .site-header,
  .main-nav {
    gap: 20px;
  }
  .site-scene[data-theme] .main-nav a {
    font-size: 11px;
  }
  .hero {
    grid-template-columns: minmax(390px, 0.86fr) minmax(510px, 1.14fr);
    gap: 24px;
  }
  .hero h1 {
    font-size: 51px;
  }
}
@media (width<=980px) {
  .site-header {
    grid-template-columns: auto 1fr;
  }
  .main-nav {
    display: none;
  }
  .header-actions {
    justify-self: end;
  }
  .site-scene .hero {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 0;
    max-height: none;
    padding: 76px 0 92px;
  }
  .hero-copy {
    max-width: 650px;
  }
  .hero-product {
    margin-top: 50px;
    transform: none;
  }
  .stage-wrap {
    height: 470px;
  }
}
@media (width<=680px) {
  .site-header,
  .hero {
    width: calc(100% - 32px);
  }
  .site-header {
    gap: 10px;
  }
  .header-actions {
    gap: 3px;
  }
  .search-button,
  .theme-button {
    width: 36px;
    height: 36px;
  }
  .search-button {
    padding: 0;
  }
  .search-button span {
    display: none;
  }
  .login-button {
    height: 36px;
    padding: 0 8px;
  }
  .theme-control .palette-switcher {
    top: calc(100% + 8px);
    left: auto;
    right: 0;
    overflow: visible;
  }
  .site-scene .hero {
    padding: 54px 0 78px;
  }
  .hero-actions {
    flex-direction: column;
    align-items: flex-start;
  }
  .stage-wrap {
    height: 438px;
  }
  .product-shell {
    left: 0;
  }
  .product-topbar {
    grid-template-columns: auto 1fr;
  }
  .sync-status {
    display: none;
  }
  .product-topbar nav {
    justify-self: end;
  }
  .product-topbar nav button {
    padding: 0 7px;
    font-size: 8px;
  }
  .product-view {
    padding: 22px 18px;
  }
  .task-body {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 14px;
  }
  .answer-row {
    bottom: 19px;
    left: 18px;
    right: 18px;
  }
  .result-grid {
    grid-template-columns: 130px 1fr;
    gap: 12px;
  }
}
@media (width<=430px) {
  .brand {
    gap: 8px;
    font-size: 16px;
  }
  .brand-symbol {
    width: 28px;
    height: 28px;
  }
  .login-button {
    display: none;
  }
  .hero h1 {
    font-size: clamp(41px, 12vw, 52px);
  }
  .answer-row {
    grid-template-columns: 1fr 108px;
  }
  .check-button {
    font-size: 9px;
  }
}
.screen-transition {
  --transition-width: 276px;
  --transition-half: 138px;
  z-index: 10;
  pointer-events: none;
  width: 100%;
  height: 0;
  position: relative;
}
.screen-transition:before {
  content: none;
}
.transition-rail {
  background: repeating-linear-gradient(
    90deg,
    var(--signal-hi) 0 12px,
    transparent 12px 20px
  );
  height: 5px;
  position: absolute;
  top: -2px;
  overflow: hidden;
}
@supports (color: color-mix(in lab, red, red)) {
  .transition-rail {
    background: repeating-linear-gradient(
      90deg,
      color-mix(in srgb, var(--signal-hi) 26%, transparent) 0 12px,
      transparent 12px 20px
    );
  }
}
.transition-rail {
  filter: drop-shadow(0 0 3px var(--signal));
}
@supports (color: color-mix(in lab, red, red)) {
  .transition-rail {
    filter: drop-shadow(
      0 0 3px color-mix(in srgb, var(--signal) 34%, transparent)
    );
  }
}
.transition-rail-left {
  right: calc(50% + var(--transition-half));
  justify-content: flex-end;
  left: 0;
}
.transition-rail-right {
  right: 0;
  left: calc(50% + var(--transition-half));
  justify-content: flex-start;
}
.transition-rail:before {
  content: "";
  background: repeating-linear-gradient(
    90deg,
    var(--accent) 0 12px,
    transparent 12px 20px
  );
  filter: drop-shadow(0 0 5px var(--accent));
  opacity: 0.95;
  transform: scaleX(var(--seam-progress, 0));
  transition: transform 0.12s linear;
  position: absolute;
  inset: 0;
}
.transition-rail-left:before {
  transform-origin: 0;
}
.transition-rail-right:before {
  transform-origin: 100%;
  background: repeating-linear-gradient(
    90deg,
    transparent 0 8px,
    var(--signal) 8px 20px
  );
  filter: drop-shadow(0 0 5px var(--signal));
}
.transition-rail:after {
  content: "";
  opacity: 0;
  background: linear-gradient(
    90deg,
    transparent,
    var(--signal-hi),
    transparent
  );
  width: 42px;
  height: 100%;
  filter: blur(1px) drop-shadow(0 0 8px var(--signal));
  transition:
    left 0.12s linear,
    right 0.12s linear,
    opacity 0.2s;
  position: absolute;
  top: 0;
}
.screen-transition.has-progress .transition-rail:after {
  opacity: 0.95;
}
.transition-rail-left:after {
  left: calc(var(--seam-progress, 0) * 100% - 22px);
}
.transition-rail-right:after {
  right: calc(var(--seam-progress, 0) * 100% - 22px);
}
.transition-core {
  width: var(--transition-width);
  border: 1px solid var(--page-ink);
  grid-template-columns: 36px 1fr 30px;
  align-items: center;
  gap: 11px;
  height: 66px;
  padding: 0 13px 0 15px;
  display: grid;
  position: absolute;
  top: 0;
  left: 50%;
}
@supports (color: color-mix(in lab, red, red)) {
  .transition-core {
    border: 1px solid color-mix(in srgb, var(--page-ink) 20%, transparent);
  }
}
.transition-core {
  background: var(--page-a);
  border-radius: 18px;
}
@supports (color: color-mix(in lab, red, red)) {
  .transition-core {
    background: color-mix(in srgb, var(--page-a) 90%, transparent);
  }
}
.transition-core {
  box-shadow:
    0 18px 42px var(--panel-b),
    0 0 0 5px var(--page-a),
    inset 0 1px #ffffff1f;
}
@supports (color: color-mix(in lab, red, red)) {
  .transition-core {
    box-shadow:
      0 18px 42px color-mix(in srgb, var(--panel-b) 18%, transparent),
      0 0 0 5px color-mix(in srgb, var(--page-a) 32%, transparent),
      inset 0 1px #ffffff1f;
  }
}
.transition-core {
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  pointer-events: auto;
  transition:
    border-color 0.25s,
    transform 0.25s,
    box-shadow 0.25s;
  translate: -50% -50%;
}
.transition-core:after {
  content: none;
}
.transition-core:hover {
  border-color: var(--signal);
  transform: translateY(3px);
}
@supports (color: color-mix(in lab, red, red)) {
  .transition-core:hover {
    border-color: color-mix(in srgb, var(--signal) 62%, transparent);
  }
}
.transition-core:hover {
  box-shadow:
    0 20px 46px var(--panel-b),
    0 0 0 5px var(--signal),
    0 0 30px var(--signal);
}
@supports (color: color-mix(in lab, red, red)) {
  .transition-core:hover {
    box-shadow:
      0 20px 46px color-mix(in srgb, var(--panel-b) 24%, transparent),
      0 0 0 5px color-mix(in srgb, var(--signal) 8%, transparent),
      0 0 30px color-mix(in srgb, var(--signal) 16%, transparent);
  }
}
.screen-transition.is-activating .transition-core {
  border-color: var(--signal);
}
@supports (color: color-mix(in lab, red, red)) {
  .screen-transition.is-activating .transition-core {
    border-color: color-mix(in srgb, var(--signal) 72%, transparent);
  }
}
.screen-transition.is-activating .transition-core {
  box-shadow:
    0 20px 46px var(--panel-b),
    0 0 0 7px var(--signal),
    0 0 42px var(--signal);
}
@supports (color: color-mix(in lab, red, red)) {
  .screen-transition.is-activating .transition-core {
    box-shadow:
      0 20px 46px color-mix(in srgb, var(--panel-b) 24%, transparent),
      0 0 0 7px color-mix(in srgb, var(--signal) 12%, transparent),
      0 0 42px color-mix(in srgb, var(--signal) 28%, transparent);
  }
}
.screen-transition.is-activating .transition-pulse i {
  animation: 0.52s cubic-bezier(0.2, 0.8, 0.2, 1) seam-click;
}
.transition-pulse {
  border: 1px solid var(--signal);
  place-items: center;
  width: 32px;
  height: 32px;
  display: grid;
  position: relative;
}
@supports (color: color-mix(in lab, red, red)) {
  .transition-pulse {
    border: 1px solid color-mix(in srgb, var(--signal) 48%, transparent);
  }
}
.transition-pulse {
  background: var(--signal);
  border-radius: 10px;
}
@supports (color: color-mix(in lab, red, red)) {
  .transition-pulse {
    background: color-mix(in srgb, var(--signal) 10%, transparent);
  }
}
.transition-pulse {
  rotate: 45deg;
}
.transition-pulse:before {
  content: "";
  border: 1px solid var(--accent);
  position: absolute;
  inset: 6px;
}
@supports (color: color-mix(in lab, red, red)) {
  .transition-pulse:before {
    border: 1px solid color-mix(in srgb, var(--accent) 58%, transparent);
  }
}
.transition-pulse:before {
  border-radius: 5px;
  animation: 2.2s ease-in-out infinite seam-core;
}
.transition-pulse i {
  background: var(--signal);
  width: 6px;
  height: 6px;
  box-shadow: 0 0 12px var(--signal);
  border-radius: 2px;
}
.transition-copy {
  gap: 3px;
  display: grid;
}
.transition-copy small {
  color: var(--page-muted);
  letter-spacing: 0.2em;
  font-size: 7px;
  font-weight: 820;
}
.transition-copy strong {
  color: var(--page-ink);
  letter-spacing: -0.01em;
  font-size: 12px;
  font-weight: 720;
}
.transition-arrow {
  background: var(--accent);
  border-radius: 9px;
  place-items: center;
  width: 29px;
  height: 29px;
  display: grid;
}
@supports (color: color-mix(in lab, red, red)) {
  .transition-arrow {
    background: color-mix(in srgb, var(--accent) 11%, transparent);
  }
}
.transition-arrow {
  color: var(--accent-hi);
}
.transition-arrow .signal-arrow {
  width: 20px;
  height: 13px;
  animation: 1.8s ease-in-out infinite seam-arrow;
  rotate: 90deg;
}
@keyframes seam-core {
  50% {
    opacity: 0.48;
    box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 62%, transparent);
    inset: 3px;
  }
}
@keyframes seam-arrow {
  50% {
    translate: 0 3px;
  }
}
@keyframes seam-click {
  50% {
    box-shadow: 0 0 24px var(--signal);
    scale: 2.4;
  }
}
.audience-section {
  z-index: 5;
  width: min(1240px, 100% - 64px);
  min-height: 780px;
  margin: 0 auto;
  padding: 118px 0 140px;
  position: relative;
}
.audience-section:before {
  content: none;
}
.audience-heading {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 430px);
  align-items: end;
  gap: 80px;
  display: grid;
}
.audience-heading > div > span {
  color: var(--page-muted);
  letter-spacing: 0.19em;
  margin-bottom: 17px;
  font-size: 9px;
  font-weight: 800;
  display: block;
}
.audience-heading h2 {
  color: var(--page-ink);
  letter-spacing: -0.055em;
  margin: 0;
  font-size: clamp(46px, 4vw, 62px);
  font-weight: 735;
  line-height: 1.02;
}
.audience-heading h2 em {
  color: #0000;
  background: linear-gradient(
    90deg,
    var(--accent),
    var(--accent-hi) 55%,
    var(--signal)
  );
  -webkit-background-clip: text;
  background-clip: text;
  font-style: normal;
}
.audience-heading > p {
  color: var(--page-muted);
  margin: 0 0 6px;
  font-size: 15px;
  line-height: 1.7;
}
.audience-switch {
  border-bottom: 1px solid var(--page-ink);
  grid-template-columns: 1fr 1fr;
  margin-top: 56px;
  display: grid;
}
@supports (color: color-mix(in lab, red, red)) {
  .audience-switch {
    border-bottom: 1px solid
      color-mix(in srgb, var(--page-ink) 16%, transparent);
  }
}
.audience-switch button {
  height: 62px;
  color: var(--page-muted);
  text-align: left;
  cursor: pointer;
  background: 0 0;
  align-items: center;
  gap: 13px;
  padding: 0 4px;
  font-size: 14px;
  font-weight: 690;
  transition: color 0.25s;
  display: flex;
  position: relative;
}
.audience-switch button + button {
  padding-left: 26px;
}
.audience-switch button span {
  font-family: var(--font-geist-mono);
  color: var(--page-muted);
}
@supports (color: color-mix(in lab, red, red)) {
  .audience-switch button span {
    color: color-mix(in srgb, var(--page-muted) 62%, transparent);
  }
}
.audience-switch button span {
  font-size: 9px;
}
.audience-switch button:after {
  content: "";
  background: linear-gradient(90deg, var(--accent), var(--signal));
  height: 3px;
  transition: right 0.35s cubic-bezier(0.22, 0.8, 0.2, 1);
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 100%;
}
.audience-switch button.is-active {
  color: var(--page-ink);
}
.audience-switch button.is-active:after {
  right: 0;
}
.audience-board {
  border: 1px solid var(--signal);
  grid-template-columns: minmax(350px, 0.82fr) minmax(480px, 1.18fr);
  min-height: 420px;
  margin-top: 28px;
  display: grid;
  position: relative;
  overflow: hidden;
}
@supports (color: color-mix(in lab, red, red)) {
  .audience-board {
    border: 1px solid color-mix(in srgb, var(--signal) 32%, transparent);
  }
}
.audience-board {
  background: linear-gradient(145deg, var(--panel-a), var(--panel-b));
  box-shadow:
    0 38px 90px var(--panel-b),
    0 0 70px var(--signal);
  border-radius: 24px;
}
@supports (color: color-mix(in lab, red, red)) {
  .audience-board {
    box-shadow:
      0 38px 90px color-mix(in srgb, var(--panel-b) 46%, transparent),
      0 0 70px color-mix(in srgb, var(--signal) 10%, transparent);
  }
}
.audience-board:before {
  content: "";
  pointer-events: none;
  background:
    radial-gradient(circle at 72% 42%, var(--signal), transparent 35%),
    linear-gradient(115deg, var(--accent), transparent 42%);
  position: absolute;
  inset: 0;
}
@supports (color: color-mix(in lab, red, red)) {
  .audience-board:before {
    background:
      radial-gradient(
        circle at 72% 42%,
        color-mix(in srgb, var(--signal) 11%, transparent),
        transparent 35%
      ),
      linear-gradient(
        115deg,
        color-mix(in srgb, var(--accent) 8%, transparent),
        transparent 42%
      );
  }
}
.audience-copy-panel {
  z-index: 2;
  border-right: 1px solid var(--signal);
  flex-direction: column;
  justify-content: center;
  padding: 50px 52px;
  display: flex;
  position: relative;
}
@supports (color: color-mix(in lab, red, red)) {
  .audience-copy-panel {
    border-right: 1px solid color-mix(in srgb, var(--signal) 16%, transparent);
  }
}
.audience-kicker {
  color: var(--accent-hi);
  letter-spacing: 0.17em;
  align-items: center;
  gap: 8px;
  font-size: 8px;
  font-weight: 820;
  display: flex;
}
.audience-kicker i {
  background: var(--signal);
  width: 6px;
  height: 6px;
  box-shadow: 0 0 10px var(--signal);
  border-radius: 50%;
}
@supports (color: color-mix(in lab, red, red)) {
  .audience-kicker i {
    box-shadow: 0 0 10px color-mix(in srgb, var(--signal) 82%, transparent);
  }
}
.audience-copy-panel h3 {
  max-width: 440px;
  color: var(--panel-ink);
  letter-spacing: -0.045em;
  margin: 18px 0 0;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.08;
}
.audience-copy-panel > p {
  max-width: 470px;
  color: var(--panel-muted);
  margin: 18px 0 0;
  font-size: 13px;
  line-height: 1.68;
}
.audience-copy-panel ul {
  gap: 10px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
}
.audience-copy-panel li {
  color: var(--panel-muted);
  align-items: center;
  gap: 10px;
  font-size: 11px;
  display: flex;
}
.audience-copy-panel li i {
  background: linear-gradient(90deg, var(--accent), var(--signal));
  width: 13px;
  height: 1px;
  box-shadow: 0 0 7px var(--signal);
}
@supports (color: color-mix(in lab, red, red)) {
  .audience-copy-panel li i {
    box-shadow: 0 0 7px color-mix(in srgb, var(--signal) 50%, transparent);
  }
}
.audience-copy-panel > a {
  width: max-content;
  color: var(--panel-ink);
  align-items: center;
  gap: 9px;
  margin-top: 30px;
  font-size: 12px;
  font-weight: 720;
  display: inline-flex;
}
.audience-copy-panel > a .signal-arrow {
  width: 25px;
  height: 15px;
  color: var(--accent-hi);
  transition: transform 0.22s;
}
.audience-copy-panel > a:hover .signal-arrow {
  transform: translate(3px);
}
.audience-route {
  z-index: 2;
  align-content: center;
  gap: 13px;
  padding: 45px 52px 45px 64px;
  display: grid;
  position: relative;
}
.route-head {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 7px;
  display: flex;
}
.route-head span {
  color: var(--panel-dim);
  letter-spacing: 0.17em;
  font-size: 8px;
  font-weight: 800;
}
.route-head strong {
  color: var(--signal-hi);
  font-size: 8px;
  font-weight: 650;
}
.route-step {
  z-index: 2;
  border: 1px solid var(--signal);
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 15px;
  min-height: 72px;
  padding: 0 18px;
  display: grid;
  position: relative;
}
@supports (color: color-mix(in lab, red, red)) {
  .route-step {
    border: 1px solid color-mix(in srgb, var(--signal) 14%, transparent);
  }
}
.route-step {
  background: var(--panel-a);
  border-radius: 13px;
}
@supports (color: color-mix(in lab, red, red)) {
  .route-step {
    background: color-mix(in srgb, var(--panel-a) 72%, transparent);
  }
}
.route-step {
  color: var(--panel-muted);
}
.route-step > span {
  border: 1px solid var(--panel-muted);
  place-items: center;
  width: 30px;
  height: 30px;
  display: grid;
}
@supports (color: color-mix(in lab, red, red)) {
  .route-step > span {
    border: 1px solid color-mix(in srgb, var(--panel-muted) 24%, transparent);
  }
}
.route-step > span {
  color: var(--panel-dim);
  font-family: var(--font-geist-mono);
  border-radius: 8px;
  font-size: 8px;
}
.route-step > div {
  gap: 5px;
  display: grid;
}
.route-step > div strong {
  color: var(--panel-ink);
  font-size: 11px;
  font-weight: 650;
}
.route-step > div small {
  color: var(--panel-dim);
  font-size: 8px;
}
.route-step > b {
  color: var(--panel-dim);
  font-size: 8px;
  font-weight: 720;
}
.route-step > b .signal-arrow {
  width: 21px;
  height: 13px;
}
.route-step.is-done {
  opacity: 0.7;
}
.route-step.is-done > span {
  border-color: var(--signal);
}
@supports (color: color-mix(in lab, red, red)) {
  .route-step.is-done > span {
    border-color: color-mix(in srgb, var(--signal) 38%, transparent);
  }
}
.route-step.is-done > span {
  color: var(--signal-hi);
  background: var(--signal);
}
@supports (color: color-mix(in lab, red, red)) {
  .route-step.is-done > span {
    background: color-mix(in srgb, var(--signal) 10%, transparent);
  }
}
.route-step.is-done > b {
  color: var(--signal-hi);
}
.route-step.is-current {
  border-color: var(--accent);
}
@supports (color: color-mix(in lab, red, red)) {
  .route-step.is-current {
    border-color: color-mix(in srgb, var(--accent) 58%, transparent);
  }
}
.route-step.is-current {
  background: var(--accent);
}
@supports (color: color-mix(in lab, red, red)) {
  .route-step.is-current {
    background: color-mix(in srgb, var(--accent) 10%, var(--panel-a));
  }
}
.route-step.is-current {
  box-shadow:
    0 12px 32px var(--panel-b),
    inset 3px 0 var(--accent);
}
@supports (color: color-mix(in lab, red, red)) {
  .route-step.is-current {
    box-shadow:
      0 12px 32px color-mix(in srgb, var(--panel-b) 35%, transparent),
      inset 3px 0 var(--accent);
  }
}
.route-step.is-current {
  transform: translate(-8px);
}
.route-step.is-current > span {
  border-color: var(--accent);
}
@supports (color: color-mix(in lab, red, red)) {
  .route-step.is-current > span {
    border-color: color-mix(in srgb, var(--accent) 62%, transparent);
  }
}
.route-step.is-current > span {
  color: var(--accent-hi);
}
.route-step.is-current > b {
  background: var(--accent);
  border-radius: 6px;
  padding: 6px 8px;
}
@supports (color: color-mix(in lab, red, red)) {
  .route-step.is-current > b {
    background: color-mix(in srgb, var(--accent) 14%, transparent);
  }
}
.route-step.is-current > b {
  color: var(--accent-hi);
}
.route-signal {
  z-index: 1;
  background: var(--signal);
  width: 1px;
  position: absolute;
  top: 114px;
  bottom: 78px;
  left: 82px;
}
@supports (color: color-mix(in lab, red, red)) {
  .route-signal {
    background: color-mix(in srgb, var(--signal) 18%, transparent);
  }
}
.route-signal:after {
  content: "";
  background: linear-gradient(180deg, transparent, var(--signal), transparent);
  width: 3px;
  height: 52px;
  box-shadow: 0 0 10px var(--signal);
  border-radius: 99px;
  animation: 3.2s linear infinite audience-signal;
  position: absolute;
  top: 0;
  left: -1px;
}
@keyframes audience-signal {
  0% {
    translate: 0 -45px;
  }
  to {
    translate: 0 190px;
  }
}
@media (width<=980px) {
  .screen-transition {
    --transition-width: 258px;
    --transition-half: 129px;
  }
  .audience-section {
    width: calc(100% - 40px);
    padding-top: 90px;
  }
  .audience-heading {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .audience-heading > p {
    max-width: 600px;
  }
  .audience-board {
    grid-template-columns: 1fr;
  }
  .audience-copy-panel {
    border-right: 0;
    border-bottom: 1px solid var(--signal);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .audience-copy-panel {
      border-bottom: 1px solid
        color-mix(in srgb, var(--signal) 16%, transparent);
    }
  }
  .audience-route {
    min-height: 390px;
  }
}
@media (width<=680px) {
  .screen-transition {
    --transition-width: 226px;
    --transition-half: 113px;
  }
  .transition-core {
    border-radius: 15px;
    grid-template-columns: 31px 1fr 28px;
    gap: 9px;
    height: 58px;
    padding: 0 10px 0 12px;
  }
  .transition-pulse {
    border-radius: 9px;
    width: 28px;
    height: 28px;
  }
  .transition-copy strong {
    font-size: 11px;
  }
  .transition-arrow {
    width: 27px;
    height: 27px;
  }
  .audience-section {
    width: calc(100% - 32px);
    padding: 76px 0 92px;
  }
  .audience-heading h2 {
    font-size: 42px;
  }
  .audience-heading > p {
    font-size: 14px;
  }
  .audience-switch {
    margin-top: 38px;
  }
  .audience-switch button {
    height: 56px;
    font-size: 12px;
  }
  .audience-switch button + button {
    padding-left: 14px;
  }
  .audience-board {
    border-radius: 18px;
    margin-top: 20px;
  }
  .audience-copy-panel {
    padding: 38px 26px;
  }
  .audience-copy-panel h3 {
    font-size: 30px;
  }
  .audience-route {
    min-height: 360px;
    padding: 34px 22px 34px 30px;
  }
  .route-step {
    grid-template-columns: 34px minmax(0, 1fr);
    padding: 0 12px;
  }
  .route-step > b {
    display: none;
  }
  .route-step.is-current {
    transform: translate(-4px);
  }
  .route-signal {
    left: 47px;
  }
}
.platform-section {
  z-index: 5;
  width: min(1240px, 100% - 64px);
  min-height: 850px;
  margin: 0 auto;
  padding: 118px 0 150px;
  position: relative;
}
.platform-section:before {
  content: none;
}
.learning-formats {
  border-top: 1px solid var(--page-ink);
  margin-top: 92px;
  padding-top: 58px;
}
@supports (color: color-mix(in lab, red, red)) {
  .learning-formats {
    border-top: 1px solid color-mix(in srgb, var(--page-ink) 14%, transparent);
  }
}
.formats-heading {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  align-items: end;
  gap: 80px;
  display: grid;
}
.formats-heading > div > span {
  color: var(--page-muted);
  letter-spacing: 0.18em;
  margin-bottom: 15px;
  font-size: 8px;
  font-weight: 820;
  display: block;
}
.formats-heading h3 {
  color: var(--page-ink);
  letter-spacing: -0.05em;
  margin: 0;
  font-size: clamp(38px, 3.4vw, 52px);
  font-weight: 735;
  line-height: 1.02;
}
.formats-heading h3 em {
  color: #0000;
  background: linear-gradient(
    90deg,
    var(--accent),
    var(--accent-hi) 52%,
    var(--signal)
  );
  -webkit-background-clip: text;
  background-clip: text;
  font-style: normal;
}
.formats-heading > p {
  color: var(--page-muted);
  margin: 0 0 4px;
  font-size: 14px;
  line-height: 1.65;
}
.program-spine {
  place-items: center;
  height: 70px;
  margin-top: 42px;
  display: grid;
  position: relative;
}
.program-spine:before {
  content: "";
  background: linear-gradient(
    90deg,
    var(--accent),
    var(--accent-hi) 50%,
    var(--signal)
  );
  height: 1px;
  box-shadow: 0 0 10px var(--signal);
  position: absolute;
  bottom: 0;
  left: 16.666%;
  right: 16.666%;
}
@supports (color: color-mix(in lab, red, red)) {
  .program-spine:before {
    box-shadow: 0 0 10px color-mix(in srgb, var(--signal) 48%, transparent);
  }
}
.program-spine > span {
  z-index: 2;
  border: 1px solid var(--accent);
  align-items: center;
  gap: 9px;
  padding: 9px 13px;
  display: inline-flex;
  position: relative;
}
@supports (color: color-mix(in lab, red, red)) {
  .program-spine > span {
    border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  }
}
.program-spine > span {
  background: var(--page-a);
  border-radius: 9px;
}
@supports (color: color-mix(in lab, red, red)) {
  .program-spine > span {
    background: color-mix(in srgb, var(--page-a) 82%, transparent);
  }
}
.program-spine > span {
  color: var(--page-ink);
  letter-spacing: 0.16em;
  box-shadow: 0 12px 28px var(--panel-b);
  font-size: 8px;
  font-weight: 820;
}
@supports (color: color-mix(in lab, red, red)) {
  .program-spine > span {
    box-shadow: 0 12px 28px color-mix(in srgb, var(--panel-b) 12%, transparent);
  }
}
.program-spine i {
  background: var(--signal);
  width: 6px;
  height: 6px;
  box-shadow: 0 0 9px var(--signal);
  border-radius: 50%;
}
.format-options {
  grid-template-columns: repeat(3, 1fr);
  display: grid;
}
.format-options article {
  border-top: 1px solid var(--signal);
  flex-direction: column;
  align-items: flex-start;
  min-height: 300px;
  padding: 36px 34px 32px;
  display: flex;
  position: relative;
}
@supports (color: color-mix(in lab, red, red)) {
  .format-options article {
    border-top: 1px solid color-mix(in srgb, var(--signal) 25%, transparent);
  }
}
.format-options article {
  border-bottom: 1px solid var(--page-ink);
}
@supports (color: color-mix(in lab, red, red)) {
  .format-options article {
    border-bottom: 1px solid
      color-mix(in srgb, var(--page-ink) 13%, transparent);
  }
}
.format-options article + article {
  border-left: 1px solid var(--page-ink);
}
@supports (color: color-mix(in lab, red, red)) {
  .format-options article + article {
    border-left: 1px solid color-mix(in srgb, var(--page-ink) 13%, transparent);
  }
}
.format-options article:before {
  content: "";
  background: var(--signal);
  width: 1px;
  height: 22px;
  position: absolute;
  top: -22px;
  left: 50%;
}
@supports (color: color-mix(in lab, red, red)) {
  .format-options article:before {
    background: color-mix(in srgb, var(--signal) 64%, transparent);
  }
}
.format-options article:before {
  box-shadow: 0 0 7px var(--signal);
}
@supports (color: color-mix(in lab, red, red)) {
  .format-options article:before {
    box-shadow: 0 0 7px color-mix(in srgb, var(--signal) 55%, transparent);
  }
}
.format-number {
  color: var(--page-muted);
  position: absolute;
  top: 29px;
  right: 30px;
}
@supports (color: color-mix(in lab, red, red)) {
  .format-number {
    color: color-mix(in srgb, var(--page-muted) 35%, transparent);
  }
}
.format-number {
  font-family: var(--font-geist-mono), monospace;
  font-size: 28px;
  font-weight: 750;
}
.format-options article > span {
  color: var(--accent);
  letter-spacing: 0.17em;
  font-size: 7px;
  font-weight: 820;
}
.format-options article:nth-child(2) > span {
  color: var(--accent-hi);
}
.format-options article:nth-child(3) > span {
  color: var(--signal);
}
.format-options h4 {
  max-width: 230px;
  color: var(--page-ink);
  letter-spacing: -0.035em;
  margin: 22px 0 12px;
  font-size: 23px;
  font-weight: 710;
  line-height: 1.06;
}
.format-options p {
  max-width: 290px;
  color: var(--page-muted);
  margin: 0;
  font-size: 12px;
  line-height: 1.65;
}
.format-cta {
  border: 1px solid var(--accent);
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  margin-top: auto;
  padding: 0 14px;
  display: inline-flex;
}
@supports (color: color-mix(in lab, red, red)) {
  .format-cta {
    border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
  }
}
.format-cta {
  background: var(--accent);
  border-radius: 10px;
}
@supports (color: color-mix(in lab, red, red)) {
  .format-cta {
    background: color-mix(in srgb, var(--accent) 7%, transparent);
  }
}
.format-cta {
  color: var(--page-ink);
  white-space: nowrap;
  cursor: pointer;
  transform-origin: 50%;
  font-size: 13px;
  font-weight: 720;
  transition:
    color 0.24s,
    border-color 0.24s,
    background 0.24s,
    transform 0.24s cubic-bezier(0.22, 0.8, 0.2, 1),
    box-shadow 0.24s;
}
.format-cta .signal-arrow {
  width: 23px;
  height: 14px;
  color: var(--accent-hi);
  transition:
    color 0.24s,
    transform 0.24s cubic-bezier(0.22, 0.8, 0.2, 1);
}
.format-cta:hover,
.format-cta:focus-visible {
  color: #fff;
  border-color: var(--accent-hi);
  background: linear-gradient(135deg, var(--accent), var(--accent-hi));
  box-shadow:
    0 16px 30px var(--accent),
    0 0 0 3px var(--accent-hi),
    inset 0 1px #ffffff52;
  transform: translateY(-4px) scale(1.025);
}
@supports (color: color-mix(in lab, red, red)) {
  .format-cta:hover,
  .format-cta:focus-visible {
    box-shadow:
      0 16px 30px color-mix(in srgb, var(--accent) 34%, transparent),
      0 0 0 3px color-mix(in srgb, var(--accent-hi) 16%, transparent),
      inset 0 1px #ffffff52;
  }
}
.format-cta:hover .signal-arrow,
.format-cta:focus-visible .signal-arrow {
  color: currentColor;
  transform: translate(4px);
}
.format-cta:focus-visible {
  outline: 2px solid var(--signal-hi);
  outline-offset: 4px;
}
.format-cta:active {
  transform: translateY(-1px) scale(0.99);
}
.site-scene[data-theme="poisoned"] .format-cta:hover,
.site-scene[data-theme="poisoned"] .format-cta:focus-visible,
.site-scene[data-theme="flayed"] .format-cta:hover,
.site-scene[data-theme="flayed"] .format-cta:focus-visible {
  color: #102018;
}
.platform-heading {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 390px);
  align-items: end;
  gap: 90px;
  display: grid;
}
.platform-heading > div > span {
  color: var(--page-muted);
  letter-spacing: 0.19em;
  margin-bottom: 17px;
  font-size: 9px;
  font-weight: 800;
  display: block;
}
.platform-heading h2 {
  color: var(--page-ink);
  letter-spacing: -0.055em;
  margin: 0;
  font-size: clamp(46px, 4vw, 62px);
  font-weight: 735;
  line-height: 1.02;
}
.platform-heading h2 em {
  color: #0000;
  background: linear-gradient(
    90deg,
    var(--accent),
    var(--accent-hi) 55%,
    var(--signal)
  );
  -webkit-background-clip: text;
  background-clip: text;
  font-style: normal;
}
.platform-heading > p {
  color: var(--page-muted);
  margin: 0 0 6px;
  font-size: 15px;
  line-height: 1.7;
}
.platform-showcase {
  border: 1px solid var(--signal);
  grid-template-columns: 330px minmax(0, 1fr);
  min-height: 500px;
  margin-top: 58px;
  display: grid;
  overflow: hidden;
}
@supports (color: color-mix(in lab, red, red)) {
  .platform-showcase {
    border: 1px solid color-mix(in srgb, var(--signal) 30%, transparent);
  }
}
.platform-showcase {
  background: linear-gradient(145deg, var(--panel-a), var(--panel-b));
  box-shadow:
    0 42px 100px var(--panel-b),
    0 0 80px var(--signal);
  border-radius: 25px;
}
@supports (color: color-mix(in lab, red, red)) {
  .platform-showcase {
    box-shadow:
      0 42px 100px color-mix(in srgb, var(--panel-b) 54%, transparent),
      0 0 80px color-mix(in srgb, var(--signal) 9%, transparent);
  }
}
.platform-menu {
  z-index: 2;
  border-right: 1px solid var(--signal);
  grid-template-rows: auto 1fr auto;
  padding: 26px 0 24px;
  display: grid;
  position: relative;
}
@supports (color: color-mix(in lab, red, red)) {
  .platform-menu {
    border-right: 1px solid color-mix(in srgb, var(--signal) 15%, transparent);
  }
}
.platform-menu {
  background: var(--panel-b);
}
@supports (color: color-mix(in lab, red, red)) {
  .platform-menu {
    background: color-mix(in srgb, var(--panel-b) 70%, transparent);
  }
}
.platform-menu-label {
  justify-content: space-between;
  align-items: center;
  padding: 0 25px 19px;
  display: flex;
}
.platform-menu-label span {
  color: var(--panel-dim);
  letter-spacing: 0.19em;
  font-size: 7px;
  font-weight: 820;
}
.platform-menu-label b {
  color: var(--signal-hi);
  font-size: 8px;
  font-weight: 650;
}
.platform-menu > div[role="tablist"] {
  align-content: start;
  display: grid;
}
.platform-menu button {
  border-top: 1px solid var(--signal);
  grid-template-columns: 34px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 13px;
  min-height: 83px;
  padding: 10px 21px 10px 24px;
  display: grid;
  position: relative;
}
@supports (color: color-mix(in lab, red, red)) {
  .platform-menu button {
    border-top: 1px solid color-mix(in srgb, var(--signal) 10%, transparent);
  }
}
.platform-menu button {
  color: var(--panel-muted);
  text-align: left;
  cursor: pointer;
  background: 0 0;
  transition:
    background 0.28s,
    color 0.28s;
}
.platform-menu button:last-child {
  border-bottom: 1px solid var(--signal);
}
@supports (color: color-mix(in lab, red, red)) {
  .platform-menu button:last-child {
    border-bottom: 1px solid color-mix(in srgb, var(--signal) 10%, transparent);
  }
}
.platform-menu button:before {
  content: "";
  background: linear-gradient(180deg, var(--accent), var(--signal));
  opacity: 0;
  border-radius: 0 4px 4px 0;
  width: 3px;
  transition:
    opacity 0.25s,
    transform 0.3s;
  position: absolute;
  top: 13px;
  bottom: 13px;
  left: 0;
  transform: scaleY(0.25);
}
.platform-menu button:hover {
  background: var(--signal);
}
@supports (color: color-mix(in lab, red, red)) {
  .platform-menu button:hover {
    background: color-mix(in srgb, var(--signal) 5%, transparent);
  }
}
.platform-menu button.is-active {
  background: linear-gradient(90deg, var(--accent), var(--signal));
}
@supports (color: color-mix(in lab, red, red)) {
  .platform-menu button.is-active {
    background: linear-gradient(
      90deg,
      color-mix(in srgb, var(--accent) 13%, transparent),
      color-mix(in srgb, var(--signal) 5%, transparent)
    );
  }
}
.platform-menu button.is-active {
  color: var(--panel-ink);
}
.platform-menu button.is-active:before {
  opacity: 1;
  transform: scaleY(1);
}
.platform-menu button > span {
  border: 1px solid var(--panel-muted);
  place-items: center;
  width: 30px;
  height: 30px;
  display: grid;
}
@supports (color: color-mix(in lab, red, red)) {
  .platform-menu button > span {
    border: 1px solid color-mix(in srgb, var(--panel-muted) 24%, transparent);
  }
}
.platform-menu button > span {
  color: var(--panel-dim);
  font-family: var(--font-geist-mono), monospace;
  border-radius: 8px;
  font-size: 8px;
}
.platform-menu button.is-active > span {
  border-color: var(--accent);
}
@supports (color: color-mix(in lab, red, red)) {
  .platform-menu button.is-active > span {
    border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  }
}
.platform-menu button.is-active > span {
  color: var(--accent-hi);
  background: var(--accent);
}
@supports (color: color-mix(in lab, red, red)) {
  .platform-menu button.is-active > span {
    background: color-mix(in srgb, var(--accent) 11%, transparent);
  }
}
.platform-menu button.is-active > span {
  box-shadow: 0 0 18px var(--accent);
}
@supports (color: color-mix(in lab, red, red)) {
  .platform-menu button.is-active > span {
    box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 12%, transparent);
  }
}
.platform-menu button > div {
  gap: 6px;
  display: grid;
}
.platform-menu button strong {
  color: inherit;
  font-size: 11px;
  font-weight: 680;
}
.platform-menu button small {
  color: var(--panel-dim);
  font-size: 8px;
  line-height: 1.35;
}
.platform-menu button > b {
  color: var(--panel-dim);
  opacity: 0;
  place-items: center;
  font-size: 12px;
  font-weight: 500;
  transition:
    opacity 0.25s,
    transform 0.25s;
  display: grid;
  transform: translate(-6px);
}
.platform-menu button > b .signal-arrow {
  width: 21px;
  height: 13px;
}
.platform-menu button.is-active > b {
  color: var(--signal-hi);
  opacity: 1;
  transform: translate(0);
}
.platform-menu > a {
  border: 1px solid var(--accent);
  justify-content: center;
  align-items: center;
  gap: 9px;
  width: calc(100% - 48px);
  height: 42px;
  margin: 21px 24px 0;
  display: flex;
}
@supports (color: color-mix(in lab, red, red)) {
  .platform-menu > a {
    border: 1px solid color-mix(in srgb, var(--accent) 44%, transparent);
  }
}
.platform-menu > a {
  background: var(--accent);
  border-radius: 10px;
}
@supports (color: color-mix(in lab, red, red)) {
  .platform-menu > a {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
  }
}
.platform-menu > a {
  color: var(--panel-ink);
  font-size: 11px;
  font-weight: 700;
  transition:
    border-color 0.25s,
    background 0.25s,
    transform 0.25s;
}
.platform-menu > a:hover {
  border-color: var(--accent-hi);
  background: var(--accent);
  transform: translateY(-2px);
}
@supports (color: color-mix(in lab, red, red)) {
  .platform-menu > a:hover {
    background: color-mix(in srgb, var(--accent) 17%, transparent);
  }
}
.platform-menu > a .signal-arrow {
  width: 23px;
  height: 14px;
  color: var(--accent-hi);
}
.platform-workspace {
  z-index: 1;
  grid-template-rows: 48px 1fr auto;
  min-width: 0;
  display: grid;
  position: relative;
}
.platform-workspace:before {
  content: "";
  pointer-events: none;
  background: radial-gradient(
    circle at 72% 30%,
    var(--signal),
    transparent 38%
  );
  position: absolute;
  inset: 0;
}
@supports (color: color-mix(in lab, red, red)) {
  .platform-workspace:before {
    background: radial-gradient(
      circle at 72% 30%,
      color-mix(in srgb, var(--signal) 9%, transparent),
      transparent 38%
    );
  }
}
.workspace-toolbar {
  z-index: 2;
  border-bottom: 1px solid var(--signal);
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 20px;
  display: grid;
  position: relative;
}
@supports (color: color-mix(in lab, red, red)) {
  .workspace-toolbar {
    border-bottom: 1px solid color-mix(in srgb, var(--signal) 12%, transparent);
  }
}
.workspace-toolbar {
  background: var(--panel-b);
}
@supports (color: color-mix(in lab, red, red)) {
  .workspace-toolbar {
    background: color-mix(in srgb, var(--panel-b) 60%, transparent);
  }
}
.workspace-demo-label {
  justify-self: center;
  align-items: center;
  gap: 7px;
  display: flex;
}
.workspace-demo-label > span {
  color: var(--panel-dim);
  font-size: 8px;
}
.workspace-demo-label > b {
  color: var(--signal-hi);
  border: 1px solid color-mix(in srgb, var(--signal) 46%, transparent);
  background: color-mix(in srgb, var(--signal) 10%, transparent);
  border-radius: 999px;
  padding: 2px 5px;
  font-family: var(--font-geist-mono), monospace;
  font-size: 7px;
  letter-spacing: 0.08em;
  line-height: 1;
}
.workspace-user {
  color: var(--panel-muted);
  justify-self: end;
  align-items: center;
  gap: 7px;
  font-size: 8px;
  display: flex;
}
.workspace-user i {
  border: 1px solid var(--signal);
  place-items: center;
  width: 23px;
  height: 23px;
  display: grid;
  position: relative;
}
@supports (color: color-mix(in lab, red, red)) {
  .workspace-user i {
    border: 1px solid color-mix(in srgb, var(--signal) 28%, transparent);
  }
}
.workspace-user i {
  background: var(--signal);
  border-radius: 7px;
}
@supports (color: color-mix(in lab, red, red)) {
  .workspace-user i {
    background: color-mix(in srgb, var(--signal) 8%, transparent);
  }
}
.workspace-user i:before {
  content: "";
  border: 1px solid var(--signal-hi);
  border-radius: 50%;
  width: 5px;
  height: 5px;
}
.workspace-user i:after {
  content: "";
  border: 1px solid var(--signal-hi);
  border-bottom: 0;
  border-radius: 7px 7px 0 0;
  width: 10px;
  height: 5px;
  position: absolute;
  bottom: 4px;
}
.workspace-content {
  z-index: 2;
  min-height: 0;
  position: relative;
}
.workspace-demo-caption {
  z-index: 3;
  color: var(--panel-ink);
  margin: 0;
  padding: 7px 18px;
  font-size: 11px;
  line-height: 1.4;
  position: relative;
  text-align: right;
  pointer-events: none;
  background: color-mix(in srgb, var(--panel-b) 88%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--signal) 14%, transparent);
}
.workspace-view {
  height: 100%;
  padding: 36px 42px 34px;
  animation: 0.42s cubic-bezier(0.22, 0.8, 0.2, 1) both workspace-enter;
}
@keyframes workspace-enter {
  0% {
    opacity: 0;
    filter: blur(3px);
    transform: translate(15px);
  }
  to {
    opacity: 1;
    filter: blur();
    transform: translate(0);
  }
}
.workspace-head {
  justify-content: space-between;
  align-items: flex-start;
  gap: 25px;
  display: flex;
}
.workspace-head > div {
  gap: 6px;
  display: grid;
}
.workspace-head > div > span {
  color: var(--accent-hi);
  letter-spacing: 0.18em;
  font-size: 7px;
  font-weight: 820;
}
.workspace-head h3 {
  color: var(--panel-ink);
  letter-spacing: -0.035em;
  margin: 0;
  font-size: 25px;
  font-weight: 690;
}
.workspace-head > b {
  color: var(--signal-hi);
  font-size: 8px;
  font-weight: 650;
}
.task-map {
  grid-template-columns: repeat(8, 1fr);
  gap: 8px;
  margin-top: 35px;
  display: grid;
}
.task-map button {
  border: 1px solid var(--signal);
  place-items: center;
  height: 69px;
  display: grid;
  position: relative;
}
@supports (color: color-mix(in lab, red, red)) {
  .task-map button {
    border: 1px solid color-mix(in srgb, var(--signal) 13%, transparent);
  }
}
.task-map button {
  background: var(--panel-a);
  border-radius: 10px;
}
@supports (color: color-mix(in lab, red, red)) {
  .task-map button {
    background: color-mix(in srgb, var(--panel-a) 70%, transparent);
  }
}
.task-map button {
  color: var(--panel-dim);
  cursor: pointer;
}
.task-map button span {
  font-family: var(--font-geist-mono), monospace;
  font-size: 9px;
}
.task-map button i {
  background: var(--panel-muted);
  border-radius: 50%;
  width: 4px;
  height: 4px;
  position: absolute;
  bottom: 8px;
  right: 8px;
}
@supports (color: color-mix(in lab, red, red)) {
  .task-map button i {
    background: color-mix(in srgb, var(--panel-muted) 26%, transparent);
  }
}
.task-map button.is-complete {
  border-color: var(--signal);
}
@supports (color: color-mix(in lab, red, red)) {
  .task-map button.is-complete {
    border-color: color-mix(in srgb, var(--signal) 24%, transparent);
  }
}
.task-map button.is-complete {
  color: var(--signal-hi);
  background: var(--signal);
}
@supports (color: color-mix(in lab, red, red)) {
  .task-map button.is-complete {
    background: color-mix(in srgb, var(--signal) 7%, transparent);
  }
}
.task-map button.is-complete i {
  background: var(--signal);
  box-shadow: 0 0 7px var(--signal);
}
.task-map button.is-current {
  border-color: var(--accent);
  color: var(--panel-ink);
  background: var(--accent);
}
@supports (color: color-mix(in lab, red, red)) {
  .task-map button.is-current {
    background: color-mix(in srgb, var(--accent) 15%, var(--panel-a));
  }
}
.task-map button.is-current {
  box-shadow:
    0 0 0 3px var(--accent),
    0 15px 30px var(--panel-b);
}
@supports (color: color-mix(in lab, red, red)) {
  .task-map button.is-current {
    box-shadow:
      0 0 0 3px color-mix(in srgb, var(--accent) 8%, transparent),
      0 15px 30px color-mix(in srgb, var(--panel-b) 34%, transparent);
  }
}
.task-map button.is-current {
  transform: translateY(-3px);
}
.task-map button.is-current i {
  background: var(--accent-hi);
  width: 6px;
  height: 6px;
  box-shadow: 0 0 10px var(--accent);
}
.workspace-insight {
  border: 1px solid var(--accent);
  grid-template-columns: 135px 1fr auto;
  align-items: center;
  gap: 18px;
  min-height: 70px;
  margin-top: 19px;
  padding: 0 20px;
  display: grid;
}
@supports (color: color-mix(in lab, red, red)) {
  .workspace-insight {
    border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
  }
}
.workspace-insight {
  background: linear-gradient(90deg, var(--accent), var(--signal));
  border-radius: 12px;
}
@supports (color: color-mix(in lab, red, red)) {
  .workspace-insight {
    background: linear-gradient(
      90deg,
      color-mix(in srgb, var(--accent) 10%, transparent),
      color-mix(in srgb, var(--signal) 5%, transparent)
    );
  }
}
.workspace-insight > span {
  color: var(--accent-hi);
  letter-spacing: 0.12em;
  align-items: center;
  gap: 7px;
  font-size: 7px;
  font-weight: 800;
  display: flex;
}
.workspace-insight > span i {
  background: var(--signal);
  width: 5px;
  height: 5px;
  box-shadow: 0 0 8px var(--signal);
  border-radius: 50%;
}
.workspace-insight > div {
  gap: 4px;
  display: grid;
}
.workspace-insight > div strong {
  color: var(--panel-ink);
  font-size: 10px;
}
.workspace-insight > div small {
  color: var(--panel-dim);
  font-size: 8px;
}
.workspace-insight > b {
  color: var(--signal-hi);
  font-size: 9px;
}
.module-progress {
  background: var(--signal);
  border-radius: 10px;
  height: 3px;
  margin-top: 28px;
}
@supports (color: color-mix(in lab, red, red)) {
  .module-progress {
    background: color-mix(in srgb, var(--signal) 12%, transparent);
  }
}
.module-progress i {
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    var(--accent),
    var(--accent-hi),
    var(--signal)
  );
  width: 42%;
  height: 100%;
  box-shadow: 0 0 8px var(--signal);
  display: block;
}
@supports (color: color-mix(in lab, red, red)) {
  .module-progress i {
    box-shadow: 0 0 8px color-mix(in srgb, var(--signal) 60%, transparent);
  }
}
.course-modules {
  grid-template-columns: 1fr 1fr;
  gap: 11px;
  margin-top: 24px;
  display: grid;
}
.course-module {
  border: 1px solid var(--signal);
  grid-template-columns: 35px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  min-height: 112px;
  padding: 0 17px;
  display: grid;
}
@supports (color: color-mix(in lab, red, red)) {
  .course-module {
    border: 1px solid color-mix(in srgb, var(--signal) 12%, transparent);
  }
}
.course-module {
  background: var(--panel-a);
  border-radius: 12px;
}
@supports (color: color-mix(in lab, red, red)) {
  .course-module {
    background: color-mix(in srgb, var(--panel-a) 66%, transparent);
  }
}
.course-module > span {
  border: 1px solid var(--panel-muted);
  place-items: center;
  width: 31px;
  height: 31px;
  display: grid;
}
@supports (color: color-mix(in lab, red, red)) {
  .course-module > span {
    border: 1px solid color-mix(in srgb, var(--panel-muted) 22%, transparent);
  }
}
.course-module > span {
  color: var(--panel-dim);
  font-family: var(--font-geist-mono), monospace;
  border-radius: 8px;
  font-size: 8px;
}
.course-module > div {
  gap: 5px;
  display: grid;
}
.course-module strong {
  color: var(--panel-muted);
  font-size: 10px;
  font-weight: 650;
}
.course-module small,
.course-module > b {
  color: var(--panel-dim);
  font-size: 8px;
}
.course-module > b .signal-arrow {
  width: 20px;
  height: 12px;
}
.course-module.is-done {
  opacity: 0.68;
}
.course-module.is-done > span,
.course-module.is-done > b {
  color: var(--signal-hi);
  border-color: var(--signal);
}
@supports (color: color-mix(in lab, red, red)) {
  .course-module.is-done > span,
  .course-module.is-done > b {
    border-color: color-mix(in srgb, var(--signal) 35%, transparent);
  }
}
.course-module.is-current {
  border-color: var(--accent);
  grid-column: span 2;
}
@supports (color: color-mix(in lab, red, red)) {
  .course-module.is-current {
    border-color: color-mix(in srgb, var(--accent) 56%, transparent);
  }
}
.course-module.is-current {
  background: linear-gradient(90deg, var(--accent), var(--signal));
}
@supports (color: color-mix(in lab, red, red)) {
  .course-module.is-current {
    background: linear-gradient(
      90deg,
      color-mix(in srgb, var(--accent) 13%, var(--panel-a)),
      color-mix(in srgb, var(--signal) 5%, var(--panel-a))
    );
  }
}
.course-module.is-current {
  box-shadow:
    inset 3px 0 var(--accent),
    0 13px 32px var(--panel-b);
}
@supports (color: color-mix(in lab, red, red)) {
  .course-module.is-current {
    box-shadow:
      inset 3px 0 var(--accent),
      0 13px 32px color-mix(in srgb, var(--panel-b) 32%, transparent);
  }
}
.course-module.is-current > span {
  border-color: var(--accent);
  color: var(--accent-hi);
}
.course-module.is-current strong {
  color: var(--panel-ink);
}
.course-module.is-current > b {
  background: var(--accent);
  border-radius: 7px;
  padding: 7px 9px;
}
@supports (color: color-mix(in lab, red, red)) {
  .course-module.is-current > b {
    background: color-mix(in srgb, var(--accent) 14%, transparent);
  }
}
.course-module.is-current > b {
  color: var(--accent-hi);
}
.exam-live {
  align-items: center;
  gap: 7px;
  display: flex;
}
.exam-live i {
  background: var(--signal);
  width: 5px;
  height: 5px;
  box-shadow: 0 0 9px var(--signal);
  border-radius: 50%;
  animation: 2s ease-out infinite pulse-dot;
}
.exam-metrics {
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 36px;
  display: grid;
}
.exam-metrics > div {
  border-left: 2px solid var(--signal);
  align-content: center;
  gap: 10px;
  min-height: 122px;
  padding: 0 22px;
  display: grid;
}
@supports (color: color-mix(in lab, red, red)) {
  .exam-metrics > div {
    border-left: 2px solid color-mix(in srgb, var(--signal) 30%, transparent);
  }
}
.exam-metrics > div {
  background: var(--panel-a);
}
@supports (color: color-mix(in lab, red, red)) {
  .exam-metrics > div {
    background: color-mix(in srgb, var(--panel-a) 54%, transparent);
  }
}
.exam-metrics > div:first-child {
  border-left-color: var(--accent);
  background: var(--accent);
}
@supports (color: color-mix(in lab, red, red)) {
  .exam-metrics > div:first-child {
    background: color-mix(in srgb, var(--accent) 8%, transparent);
  }
}
.exam-metrics span {
  color: var(--panel-dim);
  letter-spacing: 0.15em;
  font-size: 7px;
  font-weight: 800;
}
.exam-metrics strong {
  color: var(--panel-ink);
  font-family: var(--font-geist-mono), monospace;
  letter-spacing: -0.06em;
  font-size: 31px;
  font-weight: 600;
}
.exam-metrics small {
  color: var(--panel-dim);
  letter-spacing: 0;
  font-size: 12px;
}
.exam-track {
  grid-template-columns: repeat(16, 1fr);
  gap: 5px;
  margin-top: 32px;
  display: grid;
}
.exam-track i {
  background: var(--panel-muted);
  border-radius: 3px;
  height: 3px;
  position: relative;
}
@supports (color: color-mix(in lab, red, red)) {
  .exam-track i {
    background: color-mix(in srgb, var(--panel-muted) 13%, transparent);
  }
}
.exam-track i span {
  color: var(--panel-dim);
  font-family: var(--font-geist-mono), monospace;
  font-size: 6px;
  font-style: normal;
  position: absolute;
  top: 9px;
  left: 50%;
  translate: -50%;
}
.exam-track i.is-done {
  background: var(--signal);
  box-shadow: 0 0 6px var(--signal);
}
@supports (color: color-mix(in lab, red, red)) {
  .exam-track i.is-done {
    box-shadow: 0 0 6px color-mix(in srgb, var(--signal) 66%, transparent);
  }
}
.exam-track i.is-current {
  background: var(--accent);
  height: 5px;
  box-shadow: 0 0 10px var(--accent);
  margin-top: -1px;
}
.exam-track i.is-current span {
  color: var(--accent-hi);
  font-weight: 800;
}
.exam-workspace > p {
  color: var(--panel-dim);
  align-items: center;
  gap: 8px;
  margin: 45px 0 0;
  font-size: 8px;
  display: flex;
}
.exam-workspace > p i {
  background: var(--signal);
  width: 5px;
  height: 5px;
  box-shadow: 0 0 8px var(--signal);
  border-radius: 50%;
}
.mistake-list {
  gap: 10px;
  margin-top: 31px;
  display: grid;
}
.mistake-list > div {
  border: 1px solid var(--signal);
  grid-template-columns: 42px minmax(0, 1fr) 70px 38px;
  align-items: center;
  gap: 15px;
  min-height: 78px;
  padding: 0 18px;
  display: grid;
}
@supports (color: color-mix(in lab, red, red)) {
  .mistake-list > div {
    border: 1px solid color-mix(in srgb, var(--signal) 12%, transparent);
  }
}
.mistake-list > div {
  background: var(--panel-a);
  border-radius: 11px;
}
@supports (color: color-mix(in lab, red, red)) {
  .mistake-list > div {
    background: color-mix(in srgb, var(--panel-a) 65%, transparent);
  }
}
.mistake-list > div > span {
  border: 1px solid var(--panel-muted);
  place-items: center;
  width: 34px;
  height: 34px;
  display: grid;
}
@supports (color: color-mix(in lab, red, red)) {
  .mistake-list > div > span {
    border: 1px solid color-mix(in srgb, var(--panel-muted) 23%, transparent);
  }
}
.mistake-list > div > span {
  color: var(--panel-dim);
  font-family: var(--font-geist-mono), monospace;
  border-radius: 8px;
  font-size: 8px;
}
.mistake-list section {
  grid-template-columns: minmax(120px, auto) minmax(80px, 1fr);
  align-items: center;
  gap: 16px;
  display: grid;
}
.mistake-list section strong {
  color: var(--panel-muted);
  font-size: 10px;
  font-weight: 650;
}
.mistake-list section > i {
  background: var(--signal);
  border-radius: 4px;
  height: 3px;
  overflow: hidden;
}
@supports (color: color-mix(in lab, red, red)) {
  .mistake-list section > i {
    background: color-mix(in srgb, var(--signal) 12%, transparent);
  }
}
.mistake-list section > i b {
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent-hi));
  height: 100%;
  display: block;
}
.mistake-list small {
  color: var(--panel-dim);
  font-size: 8px;
}
.mistake-list em {
  color: var(--panel-muted);
  text-align: right;
  font-size: 9px;
  font-style: normal;
}
.mistake-list > div.is-priority {
  border-color: var(--accent);
}
@supports (color: color-mix(in lab, red, red)) {
  .mistake-list > div.is-priority {
    border-color: color-mix(in srgb, var(--accent) 52%, transparent);
  }
}
.mistake-list > div.is-priority {
  background: linear-gradient(90deg, var(--accent), var(--panel-a));
}
@supports (color: color-mix(in lab, red, red)) {
  .mistake-list > div.is-priority {
    background: linear-gradient(
      90deg,
      color-mix(in srgb, var(--accent) 12%, var(--panel-a)),
      color-mix(in srgb, var(--panel-a) 70%, transparent)
    );
  }
}
.mistake-list > div.is-priority {
  box-shadow: inset 3px 0 var(--accent);
}
.mistake-list > div.is-priority > span {
  border-color: var(--accent);
  color: var(--accent-hi);
}
.mistake-list > div.is-priority section strong {
  color: var(--panel-ink);
}
.mistake-action {
  background: var(--signal);
  border-radius: 10px;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  min-height: 55px;
  margin-top: 18px;
  padding: 0 18px;
  display: flex;
}
@supports (color: color-mix(in lab, red, red)) {
  .mistake-action {
    background: color-mix(in srgb, var(--signal) 8%, transparent);
  }
}
.mistake-action span {
  color: var(--panel-muted);
  align-items: center;
  gap: 8px;
  font-size: 9px;
  display: flex;
}
.mistake-action span svg {
  width: 14px;
  height: 14px;
  color: var(--signal-hi);
}
.mistake-action > b {
  color: var(--signal-hi);
  align-items: center;
  gap: 7px;
  font-size: 9px;
  display: inline-flex;
}
.mistake-action > b .signal-arrow {
  width: 21px;
  height: 13px;
}
@media (width<=1080px) {
  .platform-showcase {
    grid-template-columns: 285px minmax(0, 1fr);
  }
  .platform-menu button {
    padding-left: 18px;
    padding-right: 15px;
  }
  .workspace-view {
    padding-left: 28px;
    padding-right: 28px;
  }
  .task-map {
    grid-template-columns: repeat(4, 1fr);
  }
  .task-map button {
    height: 47px;
  }
  .workspace-insight {
    grid-template-columns: 115px 1fr auto;
  }
}
@media (width<=920px) {
  .platform-section {
    width: calc(100% - 40px);
    padding-top: 96px;
  }
  .platform-heading {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .platform-heading > p {
    max-width: 600px;
  }
  .platform-showcase {
    grid-template-columns: 1fr;
  }
  .platform-menu {
    border-right: 0;
    border-bottom: 1px solid var(--signal);
    grid-template-rows: auto auto auto;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .platform-menu {
      border-bottom: 1px solid
        color-mix(in srgb, var(--signal) 15%, transparent);
    }
  }
  .platform-menu > div[role="tablist"] {
    grid-template-columns: 1fr 1fr;
  }
  .platform-menu button:nth-child(odd) {
    border-right: 1px solid var(--signal);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .platform-menu button:nth-child(odd) {
      border-right: 1px solid color-mix(in srgb, var(--signal) 10%, transparent);
    }
  }
  .platform-menu > a {
    justify-self: end;
    width: max-content;
    min-width: 210px;
  }
  .platform-workspace {
    min-height: 500px;
  }
  .formats-heading {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .formats-heading > p {
    max-width: 620px;
  }
  .format-options article {
    padding-left: 22px;
    padding-right: 22px;
  }
}
@media (width<=680px) {
  .platform-section {
    width: calc(100% - 32px);
    min-height: 0;
    padding: 82px 0 96px;
  }
  .platform-heading h2 {
    font-size: 42px;
  }
  .platform-heading > p {
    font-size: 14px;
  }
  .platform-showcase {
    border-radius: 18px;
    min-height: 0;
    margin-top: 40px;
  }
  .learning-formats {
    margin-top: 70px;
    padding-top: 44px;
  }
  .formats-heading h3 {
    font-size: 38px;
  }
  .program-spine {
    justify-items: start;
    margin-top: 30px;
  }
  .program-spine:before {
    display: none;
  }
  .format-options {
    grid-template-columns: 1fr;
  }
  .format-options article {
    border-top: 1px solid var(--page-ink);
    min-height: 0;
    padding: 32px 20px 30px;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .format-options article {
      border-top: 1px solid color-mix(in srgb, var(--page-ink) 13%, transparent);
    }
  }
  .format-options article + article {
    border-left: 0;
  }
  .format-options article:before {
    display: none;
  }
  .platform-menu {
    padding-top: 21px;
  }
  .platform-menu-label {
    padding-left: 18px;
    padding-right: 18px;
  }
  .platform-menu > div[role="tablist"] {
    grid-template-columns: 1fr;
  }
  .platform-menu button {
    min-height: 72px;
    border-right: 0 !important;
  }
  .platform-menu button small {
    max-width: 240px;
  }
  .platform-menu > a {
    justify-self: stretch;
    width: calc(100% - 36px);
    margin-left: 18px;
    margin-right: 18px;
  }
  .platform-workspace {
    min-height: 520px;
  }
  .workspace-view {
    padding: 30px 19px;
  }
  .workspace-head h3 {
    font-size: 22px;
  }
  .workspace-head > b {
    text-align: right;
    max-width: 88px;
    line-height: 1.4;
  }
  .task-map {
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-top: 28px;
  }
  .task-map button {
    height: 48px;
  }
  .workspace-insight {
    grid-template-columns: 1fr auto;
    gap: 8px;
    padding: 14px;
  }
  .workspace-insight > span {
    grid-column: 1/-1;
  }
  .course-modules {
    grid-template-columns: 1fr;
  }
  .course-module,
  .course-module.is-current {
    grid-column: auto;
    min-height: 92px;
  }
  .course-module > b {
    display: none;
  }
  .exam-metrics {
    gap: 6px;
  }
  .exam-metrics > div {
    min-height: 102px;
    padding: 0 10px;
  }
  .exam-metrics strong {
    font-size: 24px;
  }
  .exam-track {
    gap: 3px;
  }
  .mistake-list > div {
    grid-template-columns: 36px minmax(0, 1fr) 35px;
    gap: 10px;
    padding: 0 11px;
  }
  .mistake-list section {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .mistake-list small {
    display: none;
  }
  .mistake-action {
    flex-direction: column;
    align-items: flex-start;
    padding: 14px;
  }
}
.eyebrow,
.live-label,
.product-topbar nav button,
.sync-status {
  font-size: 11px;
}
.diagnostic-note {
  font-size: 12px;
}
.proof-row span {
  font-size: 10px;
}
.section-kicker {
  font-size: 9px;
}
.task-body > p {
  font-size: 12px;
}
.query-list button,
.answer-field span {
  font-size: 10px;
}
.answer-field strong,
.check-button {
  font-size: 11px;
}
.ai-badge,
.code-gutter,
.code-lines {
  font-size: 10px;
}
.feedback-score span {
  font-size: 9px;
}
.feedback-items span {
  font-size: 10px;
}
.feedback-score small {
  font-size: 9px;
}
.result-date,
.score-orbit span,
.skills,
.skills > div,
.skills > button,
.skills > div > strong,
.skills > button > strong,
.skills p {
  font-size: 10px;
}
.product-footer,
.transition-copy small {
  font-size: 9px;
}
.transition-copy strong {
  font-size: 13px;
}
.audience-heading > div > span,
.audience-kicker {
  font-size: 10px;
}
.audience-copy-panel > p {
  font-size: 14px;
}
.audience-copy-panel li {
  font-size: 12px;
}
.audience-copy-panel > a {
  font-size: 13px;
}
.route-head span,
.route-head strong,
.route-step > span,
.route-step > b {
  font-size: 10px;
}
.route-step > div strong {
  font-size: 12px;
}
.route-step > div small,
.platform-heading > div > span,
.formats-heading > div > span,
.program-spine > span {
  font-size: 10px;
}
.format-options article > span {
  font-size: 9px;
}
.format-options p,
.format-cta {
  font-size: 14px;
}
.platform-showcase {
  min-height: 540px;
}
.platform-menu-label span {
  font-size: 9px;
}
.platform-menu-label b,
.platform-menu button > span {
  font-size: 10px;
}
.platform-menu button strong {
  font-size: 13px;
}
.stage-wrap .product-shell {
  z-index: 2;
}

.theme-control {
  position: relative;
}

.theme-hint {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: max-content;
  padding: 7px 10px;
  border: 1px solid color-mix(in srgb, var(--page-ink) 18%, transparent);
  border-radius: 9px;
  color: var(--page-ink);
  background: color-mix(in srgb, var(--page-a) 88%, transparent);
  box-shadow: 0 8px 26px rgba(12, 30, 44, 0.12);
  font-size: 9px;
  font-weight: 660;
  letter-spacing: 0.02em;
  pointer-events: none;
  animation: theme-hint-breathe 3.4s ease-in-out infinite;
  /* Replaced by one-time PaletteHint popover — keep rule inert. */
  display: none !important;
}

.theme-hint:after {
  content: "";
  position: absolute;
  right: 16px;
  bottom: 100%;
  width: 1px;
  height: 9px;
  background: var(--accent-hi, #64a7ff);
  box-shadow: 0 0 8px var(--accent-hi, #64a7ff);
}

.theme-button[aria-expanded="true"] ~ .palette-switcher + .theme-hint,
.theme-control:has(.theme-button[aria-expanded="true"]) .theme-hint {
  opacity: 0;
}

@keyframes theme-hint-breathe {
  50% { transform: translateX(-3px); filter: brightness(1.08); }
}

@media (width <= 920px) {
  .theme-hint {
    display: none;
  }
}

/* Landing demo refinements */
.product-topbar nav button,
.site-scene[data-theme] .product-topbar nav button,
.site-scene[data-theme] .product-topbar nav button.active {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.product-topbar nav button:hover,
.site-scene[data-theme] .product-topbar nav button:hover {
  background: transparent;
}

.product-topbar nav button:focus-visible {
  outline-offset: -5px;
}


.task-map > a {
  border: 1px solid color-mix(in srgb, var(--signal) 13%, transparent);
  border-radius: 10px;
  place-items: center;
  height: 69px;
  color: var(--panel-dim);
  background: color-mix(in srgb, var(--panel-a) 70%, transparent);
  display: grid;
  position: relative;
  transition:
    border-color 0.22s ease,
    background 0.22s ease,
    color 0.22s ease,
    transform 0.22s ease;
}

.task-map > a:hover,
.task-map > a:focus-visible {
  border-color: color-mix(in srgb, var(--signal) 48%, transparent);
  color: var(--panel-ink);
  background: color-mix(in srgb, var(--signal) 10%, var(--panel-a));
  outline: none;
  transform: translateY(-2px);
}

.task-map > a span {
  font-family: var(--font-geist-mono), monospace;
  font-size: 11px;
}

.task-map > a i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--panel-muted) 26%, transparent);
  position: absolute;
  right: 8px;
  bottom: 8px;
}

.task-map > a.is-complete {
  border-color: color-mix(in srgb, var(--signal) 24%, transparent);
  color: var(--signal-hi);
  background: color-mix(in srgb, var(--signal) 7%, transparent);
}

.task-map > a.is-complete i {
  background: var(--signal);
  box-shadow: 0 0 7px var(--signal);
}

.task-map > a.is-current {
  border-color: var(--accent);
  color: var(--panel-ink);
  background: color-mix(in srgb, var(--accent) 15%, var(--panel-a));
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--accent) 8%, transparent),
    0 15px 30px color-mix(in srgb, var(--panel-b) 34%, transparent);
  transform: translateY(-3px);
}

.task-map > a.is-current i {
  width: 6px;
  height: 6px;
  background: var(--accent-hi);
  box-shadow: 0 0 10px var(--accent);
}

@media (width <= 1080px) {
  .task-map > a {
    height: 47px;
  }
}

@media (width <= 680px) {
  .task-map > a {
    height: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .task-map > a {
    transition: none;
  }
}
.platform-menu button small {
  font-size: 10px;
}
.platform-menu > a {
  font-size: 12px;
}
.workspace-toolbar > span,
.workspace-user {
  font-size: 10px;
}
.workspace-head > div > span {
  font-size: 9px;
}
.workspace-head > b {
  font-size: 10px;
}
.task-map button span {
  font-size: 11px;
}
.workspace-insight > span {
  font-size: 9px;
}
.workspace-insight > div strong {
  font-size: 12px;
}
.workspace-insight > div small,
.workspace-insight > b,
.course-module > span,
.course-module small,
.course-module > b {
  font-size: 10px;
}
.course-module strong {
  font-size: 12px;
}
.exam-metrics span {
  font-size: 9px;
}
.exam-track i span {
  font-size: 8px;
}
.exam-workspace > p,
.mistake-list > div > span {
  font-size: 10px;
}
.mistake-list section strong {
  font-size: 12px;
}
.mistake-list small {
  font-size: 10px;
}
.mistake-list em,
.mistake-action span,
.mistake-action > b {
  font-size: 11px;
}

/* Shared PlatformHeader and mobile navigation */
.main-nav a[aria-current="page"] {
  color: var(--page-ink) !important;
}
.main-nav a[aria-current="page"]:after {
  opacity: 1 !important;
  left: 0 !important;
  right: 0 !important;
}
.mobile-menu-button {
  border: 0;
  width: 44px;
  height: 44px;
  display: none;
  place-items: center;
  border-radius: 50%;
  color: var(--page-ink);
  background: transparent;
  cursor: pointer;
  font: inherit;
  position: relative;
}
.mobile-menu-button:hover,
.mobile-menu-button:focus-visible {
  background: rgba(101, 70, 255, 0.08);
  color: var(--page-violet);
}
.mobile-menu-button > i {
  position: absolute;
  width: 20px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transition:
    transform 180ms ease,
    opacity 180ms ease;
}
.mobile-menu-button > i:first-child {
  transform: translateY(-4px);
}
.mobile-menu-button > i:last-child {
  transform: translateY(4px);
}
.mobile-menu-button[aria-expanded="true"] > i:first-child {
  transform: rotate(45deg);
}
.mobile-menu-button[aria-expanded="true"] > i:last-child {
  transform: rotate(-45deg);
}
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  background: rgba(18, 18, 38, 0.34);
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* Open uses transition below; close must be instant (no stale overlay frames). */
  transition: none;
}
.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity 180ms ease,
    visibility 180ms ease;
}
.mobile-menu-panel {
  width: min(88vw, 380px);
  min-height: 100%;
  padding: 104px 26px 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: -26px 0 80px rgba(31, 23, 90, 0.16);
  transform: translateX(100%);
  transition: none;
}
.mobile-menu.is-open .mobile-menu-panel {
  transform: translateX(0);
  transition: transform 180ms ease;
}
.mobile-menu-label {
  color: var(--page-muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.16em;
}
.mobile-menu-panel > a,
.mobile-menu-panel > button.mobile-logout-link {
  min-height: 54px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid rgba(45, 38, 79, 0.1);
  border-radius: 16px;
  color: var(--page-ink);
  text-decoration: none;
  font-weight: 850;
  background: rgba(255, 255, 255, 0.9);
}
.mobile-menu-panel > button.mobile-logout-link {
  appearance: none;
  width: 100%;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.mobile-menu-panel > button.mobile-logout-link:disabled {
  opacity: 0.65;
  cursor: wait;
}
.mobile-menu-panel > a:hover,
.mobile-menu-panel > a:focus-visible,
.mobile-menu-panel > button.mobile-logout-link:hover,
.mobile-menu-panel > button.mobile-logout-link:focus-visible {
  border-color: rgba(101, 70, 255, 0.28);
  color: var(--page-violet);
  background: rgba(101, 70, 255, 0.06);
}
.mobile-menu-panel > a > b,
.mobile-menu-panel > button.mobile-logout-link > b {
  font-size: 13px;
  letter-spacing: -0.01em;
}
.mobile-menu-panel > a > b:after,
.mobile-menu-panel > button.mobile-logout-link > b:after {
  content: "↗";
  margin-left: 8px;
  color: var(--page-coral);
}

@media (width <= 1180px) {
  .mobile-menu-button {
    display: grid;
  }
  .login-button {
    display: none;
  }
}

@media (width <= 680px) {
  .platform-header .search-button span {
    display: none;
  }
  .platform-header .search-button {
    width: 40px;
    padding: 0;
    justify-content: center;
  }
}

@media (width <= 430px) {
  .platform-header {
    width: calc(100% - 24px);
  }
  .platform-header .brand > span:last-child {
    display: none;
  }
  .platform-header .header-actions {
    gap: 5px;
  }
}

/* ProductStage: flat tabs and top-edge information controls */
.hero-product .product-topbar nav {
  gap: 2px;
}

.hero-product .product-topbar nav button,
.site-scene[data-theme] .hero-product .product-topbar nav button,
.site-scene[data-theme] .hero-product .product-topbar nav button.active {
  width: 92px;
  min-width: 92px;
  padding: 0;
  color: var(--panel-dim, #6e8797);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.hero-product .product-topbar nav button:hover,
.site-scene[data-theme] .hero-product .product-topbar nav button:hover {
  color: var(--panel-muted, #a8bdca);
  background: transparent;
}

.hero-product .product-topbar nav button.active,
.site-scene[data-theme] .hero-product .product-topbar nav button.active {
  color: var(--panel-ink, #eff8ff);
}

.hero-product .product-topbar nav button::after,
.site-scene[data-theme] .hero-product .product-topbar nav button::after {
  width: 34px;
  height: 2px;
  left: 50%;
  right: auto;
  opacity: 0;
  background: #2f8cff;
  box-shadow: 0 0 9px rgba(47, 140, 255, 0.82);
  transform: translateX(-50%) scaleX(0.35);
  transform-origin: center;
  transition:
    opacity 180ms ease,
    transform 220ms ease;
}

.hero-product .product-topbar nav button.active::after,
.site-scene[data-theme] .hero-product .product-topbar nav button.active::after {
  left: 50%;
  right: auto;
  opacity: 1;
  transform: translateX(-50%) scaleX(1);
}

/* Homepage demo: stable answer feedback and fixed code rows */
.hero-product .answer-area {
  position: absolute;
  right: 29px;
  bottom: 24px;
  left: 29px;
  display: grid;
  grid-template-rows: 36px 41px;
  gap: 6px;
}

.hero-product .answer-row {
  position: static;
  inset: auto;
}

.hero-product .answer-error {
  min-width: 0;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 7px;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  opacity: 0;
  visibility: hidden;
  color: #ffd4cf;
  background: rgba(92, 23, 24, 0.78);
  transform: translateY(3px);
  transition:
    opacity 180ms ease,
    transform 180ms ease,
    visibility 0s linear 180ms;
}

.hero-product .answer-error.is-visible {
  opacity: 1;
  visibility: visible;
  border-color: rgba(255, 107, 95, 0.72);
  box-shadow: 0 0 18px rgba(255, 107, 95, 0.14);
  transform: translateY(0);
  transition-delay: 0s;
}

.hero-product .answer-error strong {
  color: #ff8c82;
  font-size: 10px;
  font-weight: 780;
}

.hero-product .answer-error span {
  min-width: 0;
  color: #ffe6e3;
  font-size: 9px;
  line-height: 1.25;
}

.site-scene[data-theme] .hero-product .answer-field.is-wrong {
  border-color: #ff6b5f;
  background: color-mix(in srgb, #ff6b5f 10%, var(--panel-b));
  box-shadow: 0 0 0 1px rgba(255, 107, 95, 0.16);
}

.site-scene[data-theme] .hero-product .answer-field.is-wrong span,
.site-scene[data-theme] .hero-product .answer-field.is-wrong strong {
  color: #ffb2ab;
}

.hero-product .code-window {
  grid-template-columns: 26px max-content;
  align-content: start;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
}

.hero-product .code-window::-webkit-scrollbar {
  display: none;
}

.hero-product .code-gutter,
.hero-product .code-lines {
  display: grid;
  grid-template-rows: repeat(6, 18px);
  align-content: start;
  line-height: 18px;
}

.hero-product .code-gutter {
  position: sticky;
  left: 0;
  z-index: 1;
  background: #071421;
}

.hero-product .code-gutter span,
.hero-product .code-line {
  display: block;
  height: 18px;
  line-height: 18px;
  white-space: pre;
}

.hero-product .code-lines {
  min-width: max-content;
}

/* Homepage audience section: compact tabs and readable progress panel */
.site-scene .audience-switch {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  border-bottom: 0;
}

.site-scene .audience-switch button,
.site-scene .audience-switch button + button {
  height: 56px;
  padding: 0 16px;
  color: color-mix(in srgb, var(--page-ink) 72%, var(--page-muted));
  border: 1px solid color-mix(in srgb, var(--page-ink) 17%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--page-a) 88%, var(--page-b));
  box-shadow: 0 5px 14px color-mix(in srgb, var(--page-ink) 4%, transparent);
  transition:
    color 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.site-scene .audience-switch button span {
  color: color-mix(in srgb, var(--page-ink) 52%, var(--page-muted));
}

.site-scene .audience-switch button::after {
  right: 12px;
  bottom: -1px;
  left: 12px;
  height: 3px;
  opacity: 0;
  border-radius: 3px 3px 0 0;
  transition: opacity 180ms ease;
}

.site-scene .audience-switch button.is-active {
  color: var(--page-ink);
  border-color: color-mix(in srgb, var(--accent) 52%, transparent);
  background: color-mix(in srgb, var(--accent) 9%, var(--page-a));
  box-shadow: 0 7px 18px color-mix(in srgb, var(--page-ink) 6%, transparent);
}

.site-scene .audience-switch button.is-active span {
  color: var(--page-ink);
}

.site-scene .audience-switch button.is-active::after {
  right: 12px;
  opacity: 1;
}

.site-scene .audience-switch button:focus:not(:focus-visible) {
  outline: none;
}

.site-scene .audience-switch button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--signal) 76%, var(--accent));
  outline-offset: 3px;
}

.site-scene .audience-copy-panel > p {
  color: color-mix(in srgb, var(--panel-ink) 68%, var(--panel-muted));
}

.site-scene .audience-copy-panel li {
  color: color-mix(in srgb, var(--panel-ink) 62%, var(--panel-muted));
}

.site-scene .audience-copy-panel li i {
  width: 16px;
  height: 2px;
}

.site-scene .audience-copy-panel > a {
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--signal) 46%, var(--accent));
  border-radius: 9px;
  color: color-mix(in srgb, var(--panel-ink) 88%, var(--panel-muted));
  background: color-mix(in srgb, var(--signal) 5%, transparent);
  transition:
    color 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    transform 180ms ease;
}

.site-scene .audience-copy-panel > a:hover {
  color: var(--panel-ink);
  border-color: color-mix(in srgb, var(--signal) 68%, var(--accent));
  background: color-mix(in srgb, var(--signal) 10%, transparent);
  transform: translateY(-1px);
}

.site-scene .audience-copy-panel > a:focus:not(:focus-visible) {
  outline: none;
}

.site-scene .audience-copy-panel > a:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
}

.site-scene .route-head span {
  color: color-mix(in srgb, var(--panel-ink) 52%, var(--panel-muted));
}

.site-scene .route-head strong {
  color: color-mix(in srgb, var(--signal-hi) 82%, var(--panel-muted));
}

.site-scene .route-step {
  opacity: 1;
  border-color: color-mix(in srgb, var(--signal) 21%, transparent);
  background: color-mix(in srgb, var(--panel-a) 86%, transparent);
}

.site-scene .route-step.is-done {
  opacity: 0.86;
}

.site-scene .route-step > span {
  color: color-mix(in srgb, var(--panel-ink) 48%, var(--panel-muted));
  border-color: color-mix(in srgb, var(--panel-muted) 34%, transparent);
}

.site-scene .route-step > div strong {
  color: color-mix(in srgb, var(--panel-ink) 86%, var(--panel-muted));
}

.site-scene .route-step > div small,
.site-scene .route-step > b {
  color: color-mix(in srgb, var(--panel-ink) 54%, var(--panel-muted));
}

.site-scene .route-step.is-current {
  border-color: color-mix(in srgb, var(--accent) 68%, transparent);
  background: color-mix(in srgb, var(--accent) 11%, var(--panel-a));
}

.site-scene .route-step.is-current > div strong {
  color: var(--panel-ink);
}

.site-scene .route-step.is-current > div small {
  color: color-mix(in srgb, var(--accent-hi) 72%, var(--panel-muted));
}

@media (width <= 680px) {
  .hero-product .product-topbar nav {
    gap: 0;
  }

  .hero-product .product-topbar nav button,
  .site-scene[data-theme] .hero-product .product-topbar nav button,
  .site-scene[data-theme] .hero-product .product-topbar nav button.active {
    width: 70px;
    min-width: 70px;
  }

  .hero-product .answer-area {
    right: 18px;
    bottom: 19px;
    left: 18px;
    grid-template-rows: 42px auto;
  }

  .hero-product .answer-error {
    min-height: 42px;
    padding: 6px 10px;
    grid-template-columns: 1fr;
    align-content: center;
    gap: 2px;
  }

  .site-scene .audience-switch {
    gap: 7px;
  }

  .site-scene .audience-switch button,
  .site-scene .audience-switch button + button {
    height: 54px;
    padding: 0 10px;
    gap: 8px;
    font-size: 12px;
  }

  .site-scene .audience-heading > div > span,
  .site-scene .audience-kicker,
  .site-scene .route-head span,
  .site-scene .route-head strong,
  .site-scene .route-step > span,
  .site-scene .route-step > b,
  .site-scene .route-step > div strong,
  .site-scene .route-step > div small {
    font-size: 12px;
  }

  .site-scene .audience-copy-panel > a {
    min-height: 42px;
    padding: 0 13px;
    font-size: 13px;
  }

  .site-scene .audience-route {
    min-height: 380px;
    padding-right: 18px;
    padding-left: 26px;
  }

  .site-scene .route-step {
    min-height: 78px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-product .answer-error,
  .hero-product .product-topbar nav button::after {
    transition: none;
  }
}

/* Homepage platform showcase: focus, motion and responsive workspace */
.site-scene .platform-showcase {
  height: 590px;
  min-height: 590px;
}

.site-scene .platform-menu button {
  color: color-mix(in srgb, var(--panel-ink) 72%, var(--panel-muted));
  overflow: hidden;
  isolation: isolate;
  transition:
    color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

.site-scene .platform-menu button small {
  color: color-mix(in srgb, var(--panel-ink) 55%, var(--panel-muted));
}

.site-scene .platform-menu button:hover {
  color: color-mix(in srgb, var(--panel-ink) 88%, var(--signal-hi));
  background: color-mix(in srgb, var(--signal) 8%, transparent);
}

.site-scene .platform-menu button.is-active {
  color: var(--panel-ink);
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--accent) 14%, var(--panel-b)),
    color-mix(in srgb, var(--signal) 7%, var(--panel-b))
  );
}

.site-scene .platform-menu button.is-active small {
  color: color-mix(in srgb, var(--panel-ink) 68%, var(--panel-muted));
}

.site-scene .platform-menu button::before {
  z-index: 2;
}

.site-scene .platform-menu button:focus {
  outline: none;
}

.site-scene .platform-menu button:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--signal) 72%, var(--accent));
}

.site-scene .platform-menu button.is-active:focus-visible {
  box-shadow:
    inset 0 0 0 2px color-mix(in srgb, var(--signal-hi) 72%, var(--accent)),
    inset 4px 0 0 var(--accent);
}

.site-scene .spotlight-surface::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    150px circle at var(--spotlight-x, 50%) var(--spotlight-y, 50%),
    color-mix(in srgb, var(--signal) 18%, transparent),
    color-mix(in srgb, var(--accent) 8%, transparent) 42%,
    transparent 72%
  );
  transition: opacity 160ms ease;
}

.site-scene .spotlight-surface > * {
  position: relative;
  z-index: 1;
}

@media (hover: hover) and (pointer: fine) {
  .site-scene .spotlight-surface::after {
    opacity: var(--spotlight-opacity, 0);
  }

  .site-scene .spotlight-surface:hover::after {
    opacity: 1;
  }
}

.site-scene .workspace-view {
  animation: 240ms cubic-bezier(0.22, 0.72, 0.25, 1) both platform-workspace-enter;
}

@keyframes platform-workspace-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.site-scene .module-progress i,
.site-scene .mistake-list section > i b {
  transform-origin: left center;
  animation: 620ms cubic-bezier(0.22, 0.72, 0.25, 1) 90ms both platform-progress-fill;
}

@keyframes platform-progress-fill {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

.site-scene .course-module {
  border-color: color-mix(in srgb, var(--signal) 20%, transparent);
  background: color-mix(in srgb, var(--panel-a) 78%, transparent);
}

.site-scene .course-module strong {
  color: color-mix(in srgb, var(--panel-ink) 75%, var(--panel-muted));
}

.site-scene .course-module small,
.site-scene .course-module > b {
  color: color-mix(in srgb, var(--panel-ink) 50%, var(--panel-muted));
}

.site-scene .course-module.is-done {
  opacity: 0.86;
}

.site-scene .course-module.is-current {
  border-color: color-mix(in srgb, var(--accent) 68%, transparent);
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--accent) 15%, var(--panel-a)),
    color-mix(in srgb, var(--signal) 7%, var(--panel-a))
  );
}

.site-scene .course-module.is-current strong {
  color: var(--panel-ink);
}

.site-scene .exam-live i {
  animation: none;
}

.site-scene .exam-track i {
  animation: 220ms ease-out both platform-segment-reveal;
}

@keyframes platform-segment-reveal {
  from {
    opacity: 0;
    transform: scaleX(0);
  }
  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

.site-scene .exam-workspace > p {
  min-height: 54px;
  margin-top: 54px;
  padding: 0 16px;
  border: 1px solid color-mix(in srgb, var(--signal) 15%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--signal) 5%, transparent);
}

.site-scene .mistake-list > div {
  border-color: color-mix(in srgb, var(--signal) 20%, transparent);
  background: color-mix(in srgb, var(--panel-a) 78%, transparent);
}

.site-scene .mistake-list section strong {
  color: color-mix(in srgb, var(--panel-ink) 76%, var(--panel-muted));
}

.site-scene .mistake-list small,
.site-scene .mistake-list em {
  color: color-mix(in srgb, var(--panel-ink) 54%, var(--panel-muted));
}

.site-scene .mistake-list > div.is-priority {
  border-color: color-mix(in srgb, var(--accent) 68%, transparent);
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--accent) 15%, var(--panel-a)),
    color-mix(in srgb, var(--panel-a) 82%, transparent)
  );
}

@media (width <= 680px) {
  .site-scene .platform-showcase {
    height: auto;
    min-height: 0;
  }

  .site-scene .platform-menu {
    padding: 17px 0 16px;
  }

  .site-scene .platform-menu-label {
    padding: 0 16px 14px;
  }

  .site-scene .platform-menu > div[role="tablist"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 0 10px;
  }

  .site-scene .platform-menu button,
  .site-scene .platform-menu button:nth-child(odd),
  .site-scene .platform-menu button:last-child {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 9px;
    min-height: 88px;
    padding: 10px;
    border: 1px solid color-mix(in srgb, var(--signal) 16%, transparent);
    border-radius: 10px;
  }

  .site-scene .platform-menu button::before {
    top: 10px;
    bottom: 10px;
    border-radius: 0 3px 3px 0;
  }

  .site-scene .platform-menu button > span {
    width: 32px;
    height: 32px;
    font-size: 12px;
  }

  .site-scene .platform-menu button > div {
    gap: 4px;
  }

  .site-scene .platform-menu button strong,
  .site-scene .platform-menu button small {
    font-size: 12px;
    line-height: 1.25;
  }

  .site-scene .platform-menu button > b {
    position: absolute;
    right: 8px;
    bottom: 7px;
  }

  .site-scene .platform-menu > a {
    min-height: 44px;
  }

  .site-scene .platform-workspace {
    min-height: 0;
  }

  .site-scene .workspace-content,
  .site-scene .workspace-view {
    height: auto;
  }

  .site-scene .workspace-view {
    min-height: 0;
    padding: 26px 16px 28px;
  }

  .site-scene .workspace-head {
    align-items: flex-start;
    gap: 12px;
  }

  .site-scene .workspace-head > div > span,
  .site-scene .workspace-head > b,
  .site-scene .workspace-insight > span,
  .site-scene .workspace-insight > div strong,
  .site-scene .workspace-insight > div small,
  .site-scene .workspace-insight > b,
  .site-scene .course-module > span,
  .site-scene .course-module strong,
  .site-scene .course-module small,
  .site-scene .exam-metrics span,
  .site-scene .exam-metrics small,
  .site-scene .exam-track i span,
  .site-scene .exam-workspace > p,
  .site-scene .mistake-list > div > span,
  .site-scene .mistake-list section strong,
  .site-scene .mistake-list small,
  .site-scene .mistake-list em,
  .site-scene .mistake-action span,
  .site-scene .mistake-action > b {
    font-size: 12px;
  }

  .site-scene .task-map {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .site-scene .task-map > a {
    min-height: 48px;
  }

  .site-scene .course-modules,
  .site-scene .exam-metrics {
    grid-template-columns: 1fr;
  }

  .site-scene .course-module,
  .site-scene .course-module.is-current {
    min-height: 92px;
  }

  .site-scene .exam-metrics {
    margin-top: 28px;
  }

  .site-scene .exam-metrics > div {
    min-height: 76px;
    padding: 12px 16px;
  }

  .site-scene .exam-track {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    row-gap: 27px;
    margin-bottom: 12px;
  }

  .site-scene .exam-workspace > p {
    min-height: 0;
    margin-top: 50px;
    padding: 13px;
    line-height: 1.45;
  }

  .site-scene .mistake-list > div {
    min-height: 88px;
  }

  .site-scene .mistake-action {
    min-height: 76px;
  }
}

@media (hover: none), (pointer: coarse) {
  .site-scene .spotlight-surface::after {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-scene .workspace-view,
  .site-scene .module-progress i,
  .site-scene .mistake-list section > i b,
  .site-scene .exam-track i {
    animation: none;
  }

  .site-scene .platform-menu button,
  .site-scene .spotlight-surface::after {
    transition: none;
  }
}

/* Homepage learning formats: shared program and equal support choices */
.site-scene .program-spine::before {
  opacity: 0.35;
  transform: scaleX(0);
  transform-origin: left center;
  transition:
    transform 720ms cubic-bezier(0.22, 0.72, 0.25, 1),
    opacity 420ms ease;
}

.site-scene .learning-formats.is-visible .program-spine::before {
  opacity: 1;
  transform: scaleX(1);
}

.site-scene .program-spine > span {
  min-height: 38px;
  padding: 0 15px;
  border-color: color-mix(in srgb, var(--signal) 34%, var(--accent));
  background: color-mix(in srgb, var(--page-a) 92%, var(--page-b));
  box-shadow:
    0 12px 28px color-mix(in srgb, var(--panel-b) 10%, transparent),
    0 0 22px color-mix(in srgb, var(--signal) 9%, transparent);
  font-size: 10px;
}

.site-scene .program-spine i {
  width: 7px;
  height: 7px;
  background: var(--signal);
  box-shadow: 0 0 12px color-mix(in srgb, var(--signal) 62%, transparent);
}

.site-scene .format-options {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding-top: 22px;
}

.site-scene .format-options article {
  --format-accent: var(--accent);
  min-width: 0;
  min-height: 336px;
  padding: 32px 28px 26px;
  overflow: visible;
  isolation: isolate;
  border: 1px solid color-mix(in srgb, var(--format-accent) 25%, var(--page-ink) 10%);
  border-radius: 16px;
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--format-accent) 7%, var(--page-a)),
    color-mix(in srgb, var(--page-b) 68%, var(--page-a))
  );
  box-shadow:
    0 18px 42px color-mix(in srgb, var(--panel-b) 8%, transparent),
    inset 0 1px color-mix(in srgb, white 42%, transparent);
  transition:
    transform 220ms cubic-bezier(0.22, 0.72, 0.25, 1),
    border-color 220ms ease,
    box-shadow 220ms ease;
}

.site-scene .format-options article:nth-child(2) {
  --format-accent: var(--signal);
}

.site-scene .format-options article:nth-child(3) {
  --format-accent: color-mix(in srgb, var(--signal) 58%, var(--accent-hi));
}

.site-scene .format-options article + article {
  border-left: 1px solid color-mix(in srgb, var(--format-accent) 25%, var(--page-ink) 10%);
}

.site-scene .format-options article::before {
  top: -23px;
  bottom: auto;
  left: 50%;
  width: 9px;
  height: 23px;
  opacity: 0;
  border-radius: 0;
  background:
    radial-gradient(
      circle at 50% 3px,
      var(--format-accent) 0 3px,
      color-mix(in srgb, var(--format-accent) 32%, transparent) 3.5px,
      transparent 4.5px
    ),
    linear-gradient(
      90deg,
      transparent calc(50% - 0.5px),
      color-mix(in srgb, var(--format-accent) 68%, transparent) calc(50% - 0.5px),
      color-mix(in srgb, var(--format-accent) 68%, transparent) calc(50% + 0.5px),
      transparent calc(50% + 0.5px)
    );
  box-shadow: none;
  transform: translateX(-50%) scaleY(0);
  transform-origin: top center;
  transition:
    transform 360ms cubic-bezier(0.22, 0.72, 0.25, 1) 480ms,
    opacity 260ms ease 430ms;
}

.site-scene .learning-formats.is-visible .format-options article::before {
  opacity: 1;
  transform: translateX(-50%) scaleY(1);
}

.site-scene .format-options article.spotlight-surface::after {
  border-radius: inherit;
  background: radial-gradient(
    260px circle at var(--spotlight-x, 50%) var(--spotlight-y, 50%),
    color-mix(in srgb, var(--format-accent) 15%, transparent),
    color-mix(in srgb, var(--format-accent) 6%, transparent) 44%,
    transparent 72%
  );
}

.site-scene .format-card .format-number {
  z-index: 1;
  position: absolute;
  top: 24px;
  right: 24px;
  place-items: center;
  width: 46px;
  height: 38px;
  display: grid;
  color: color-mix(in srgb, var(--format-accent) 68%, var(--page-ink));
  border: 1px solid color-mix(in srgb, var(--format-accent) 28%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--format-accent) 7%, var(--page-a));
  font-size: 18px;
  font-weight: 720;
}

.site-scene .format-options article > span {
  max-width: calc(100% - 68px);
  color: color-mix(in srgb, var(--format-accent) 78%, var(--page-ink));
  font-size: 11px;
}

.site-scene .format-options article:nth-child(2) > span,
.site-scene .format-options article:nth-child(3) > span {
  color: color-mix(in srgb, var(--format-accent) 78%, var(--page-ink));
}

.site-scene .format-options h4 {
  max-width: 260px;
  margin-top: 26px;
  font-size: 24px;
}

.site-scene .format-options p {
  max-width: 310px;
  color: color-mix(in srgb, var(--page-ink) 68%, var(--page-muted));
  font-size: 14px;
  line-height: 1.62;
}

.site-scene .format-cta {
  width: 100%;
  min-height: 44px;
  margin-top: auto;
  padding: 0 14px;
  color: color-mix(in srgb, var(--page-ink) 88%, var(--format-accent));
  border: 1px solid color-mix(in srgb, var(--format-accent) 42%, transparent);
  background: color-mix(in srgb, var(--format-accent) 6%, transparent);
  box-shadow: none;
  font-size: 13px;
  transition:
    color 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

.site-scene .format-cta .signal-arrow {
  flex: 0 0 auto;
  color: color-mix(in srgb, var(--format-accent) 78%, var(--page-ink));
  transition:
    color 180ms ease,
    transform 180ms ease;
}

.site-scene .format-cta:focus {
  outline: none;
}

.site-scene .format-cta:hover,
.site-scene .format-cta:focus-visible {
  color: var(--page-ink);
  border-color: color-mix(in srgb, var(--format-accent) 68%, transparent);
  background: color-mix(in srgb, var(--format-accent) 11%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--format-accent) 16%, transparent);
  transform: none;
}

.site-scene .format-cta:focus-visible {
  outline: none;
  box-shadow:
    inset 0 0 0 2px color-mix(in srgb, var(--format-accent) 58%, transparent),
    0 0 0 1px color-mix(in srgb, var(--page-a) 88%, transparent);
}

.site-scene .format-cta:hover .signal-arrow,
.site-scene .format-cta:focus-visible .signal-arrow {
  color: var(--format-accent);
  transform: translateX(3px);
}

.site-scene .format-cta:active {
  transform: none;
}

@media (hover: hover) and (pointer: fine) {
  .site-scene .format-options article:hover {
    border-color: color-mix(in srgb, var(--format-accent) 48%, transparent);
    box-shadow:
      0 22px 46px color-mix(in srgb, var(--format-accent) 10%, transparent),
      inset 0 1px color-mix(in srgb, white 48%, transparent);
    transform: translateY(-4px);
  }
}

@media (width <= 1080px) and (width > 680px) {
  .site-scene .formats-heading > div > span,
  .site-scene .program-spine > span {
    font-size: 12px;
  }

  .site-scene .format-options {
    gap: 10px;
  }

  .site-scene .format-options article {
    min-height: 344px;
    padding: 28px 20px 24px;
  }

  .site-scene .format-card .format-number {
    top: 20px;
    right: 18px;
    width: 42px;
  }

  .site-scene .format-options article > span {
    max-width: calc(100% - 56px);
    font-size: 12px;
  }

  .site-scene .format-options h4 {
    font-size: 21px;
  }

  .site-scene .format-options p,
  .site-scene .format-cta {
    font-size: 12px;
  }
}

@media (width <= 680px) {
  .site-scene .program-spine {
    place-items: start;
    height: auto;
    margin-top: 28px;
    padding-bottom: 16px;
  }

  .site-scene .program-spine::before,
  .site-scene .format-options article::before {
    display: none;
  }

  .site-scene .program-spine > span {
    min-height: 40px;
    max-width: 100%;
    font-size: 12px;
    line-height: 1.35;
  }

  .site-scene .format-options {
    grid-template-columns: 1fr;
    gap: 14px;
    padding-top: 0;
  }

  .site-scene .format-options article,
  .site-scene .format-options article + article {
    min-height: 274px;
    padding: 26px 20px 22px;
    border: 1px solid color-mix(in srgb, var(--format-accent) 25%, var(--page-ink) 10%);
    border-radius: 14px;
  }

  .site-scene .format-card .format-number {
    top: 20px;
    right: 18px;
    width: 42px;
    height: 36px;
    font-size: 17px;
  }

  .site-scene .format-options article > span {
    max-width: calc(100% - 58px);
    font-size: 12px;
  }

  .site-scene .format-options h4 {
    margin-top: 24px;
    font-size: 23px;
  }

  .site-scene .format-options p {
    font-size: 14px;
  }

  .site-scene .format-cta {
    width: 100%;
    min-height: 44px;
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-scene .program-spine::before,
  .site-scene .format-options article::before {
    opacity: 1;
    transform: translateX(-50%) scale(1);
    transition: none;
  }

  .site-scene .program-spine::before {
    transform: scaleX(1);
  }

  .site-scene .format-options article,
  .site-scene .format-cta,
  .site-scene .format-cta .signal-arrow {
    transition: none;
  }
}