.bright-content > .home-page { padding-block: 0 32px; }
.home-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.home-actions .practice-button { min-height: 44px; font-weight: 600; }
.home-actions .practice-button > span { font-size: 17px; }
.aura-home .scene { margin: 0; }
.home-intro { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding-block: clamp(28px, 4.1vw, 60px) 24px; }
.home-intro h1 { font-size: clamp(34px, 4.45vw, 64px); font-weight: 500; line-height: 1.04; letter-spacing: -.032em; text-wrap: balance; }
.home-intro p { margin-top: 12px; color: var(--muted); }
.home-intro .home-actions { flex: none; }
.scene { --lens-size: clamp(298px, 34vw, 364px); position: relative; display: grid; height: 390px; place-items: center; isolation: isolate; overflow: hidden; border-radius: var(--bright-tile-radius); box-shadow: 0 20px 38px -27px rgb(0 0 0 / .32); }
.scene-wash { position: absolute; inset: 0; z-index: -1; background: linear-gradient(99deg, var(--md-primary), #463cf2 29%, #8650cd 59%, #f76a1c 96%); pointer-events: none; }
.orbit { position: absolute; width: min(90%, 975px); pointer-events: none; }
.lens { position: relative; display: block; width: var(--lens-size); height: auto; filter: drop-shadow(0 14px 20px #180e5677); }
.chart-labels { font: 600 16px var(--bright-mono); }
.chart-reference { opacity: 0; visibility: hidden; transition: opacity 200ms var(--bright-motion-ease), visibility 200ms; }
.scene:has(.compare[aria-pressed='true']) .chart-reference { opacity: 1; visibility: visible; }
.scene-caption { position: absolute; inset: 0; pointer-events: none; }
.scene-formula, .scene-vertex { position: absolute; display: grid; gap: 3px; padding: 11px 16px; border-radius: 8px; color: var(--ink); }
.scene-formula span, .scene-vertex span { font-size: 12px; font-weight: 600; }
.scene-formula strong, .scene-vertex strong { font: 600 16px/1.35 var(--bright-mono); white-space: nowrap; }
.scene-formula { top: 36%; right: calc(50% + var(--lens-size) / 2 - 9px); background: #f0f1ff; }
.scene-vertex { bottom: 26%; left: calc(50% + var(--lens-size) / 2 - 8px); background: #fff0e6; }
.scene-vertex span { color: #733815; }
.compare { position: absolute; left: 16px; bottom: 16px; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 7px 11px; border: 1px solid #bec7ff92; border-radius: 8px; color: white; background: #1f1c61; cursor: pointer; font-size: 13px; pointer-events: auto; transition: background-color 180ms var(--bright-motion-ease); }
.compare:hover, .compare[aria-pressed='true'] { background: #332889; }
.compare:focus-visible { outline-color: white; }
.compare b { font: 600 13px var(--bright-mono); }
.compare-key { width: 16px; border-top: 2px dashed #a8deff; }
.home-intro { animation: home-appear 440ms var(--bright-motion-ease) both; }
.chart-curve { animation: home-trace 840ms 100ms var(--bright-motion-ease) both; stroke-dasharray: 100; }
.orbit-sweep { stroke-dasharray: 100; animation: home-trace 1.15s 130ms var(--bright-motion-ease) both; }
.chart-vertex { animation: home-mark 620ms 430ms var(--bright-motion-ease) both; transform-origin: 195px 206px; }
@keyframes home-appear { from { opacity: .84; transform: translateY(6px); } }
@keyframes home-trace { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes home-mark { from { transform: scale(.38); } to { transform: scale(1); } }
@media (max-width: 1040px) { .home-intro { align-items: start; flex-direction: column; gap: 16px; } }
@media (max-width: 840px) { .scene { --lens-size: 300px; height: 365px; } .scene-formula, .scene-vertex { padding-inline: 12px; } .scene-vertex { bottom: 24%; } }
@media (max-width: 650px) {
  .home-intro { padding-block: 24px 16px; }
  .home-intro h1 { max-width: 18ch; }
  .home-intro p { max-width: 35ch; margin-top: 8px; font-size: 14px; }
  .scene { --lens-size: min(100%, 266px); height: auto; padding: 0 8px 8px; align-content: start; }
  .orbit { top: 4%; width: 155%; height: 78%; }
  .scene-caption { position: static; display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 8px; width: 100%; }
  .scene-formula, .scene-vertex, .compare { position: static; }
  .scene-formula, .scene-vertex { padding: 6px 9px; }
  .scene-formula strong, .scene-vertex strong { font-size: 13px; }
  .compare { width: 100%; }
}
@media (max-width: 360px) { .home-intro h1 { font-size: 32px; } .scene { --lens-size: min(100%, 238px); } }
@media (prefers-reduced-motion: reduce) {
  .home-intro, .chart-curve, .orbit-sweep, .chart-vertex { animation-name: none; }
  .chart-reference, .compare, .vertex-highlight { transition: none; }
}

.vertex-hit { cursor: grab; touch-action: none; }
.vertex-hit.is-dragging { cursor: grabbing; }
.vertex-highlight { opacity: 0; pointer-events: none; }
.vertex-point:has(.vertex-hit:hover, .vertex-hit.is-dragging) .vertex-highlight { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .vertex-highlight { transition: opacity 160ms var(--bright-motion-ease); }
}
.chart-vertex { transform-origin: 0 0; }
.chart-y-labels { paint-order: stroke fill; stroke: #292369; stroke-width: 4; stroke-linejoin: round; }
.vertex-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 0 16px; padding-block: 8px; }
.vertex-toolbar > p:not(.sr-only) { align-self: start; padding-block: 12px; color: var(--muted); font-size: 14px; }
.vertex-controls { min-width: 0; }
.vertex-controls summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 6px 8px; border-radius: 8px; color: #253eaa; cursor: pointer; font-size: 14px; font-weight: 600; }
.vertex-controls summary::after { width: 7px; height: 7px; margin: -4px 3px 0 2px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; content: ''; transform: rotate(45deg); transition: transform 180ms var(--bright-motion-ease); }
.vertex-controls summary::-webkit-details-marker { display: none; }
.vertex-controls[open] summary::after { margin-top: 4px; transform: rotate(225deg); }
.vertex-controls summary:hover { background: #eef1ff; }
.vertex-fields { display: grid; gap: 8px; padding: 10px 12px 4px; border-radius: 8px; background: #f1f4ff; }
.vertex-field { display: grid; grid-template-columns: minmax(0, 1fr) minmax(22px, auto); gap: 0 8px; }
.vertex-field label { font-size: 13px; font-weight: 600; }
.vertex-output { color: #253eaa; font: 600 14px var(--bright-mono); text-align: right; }
.vertex-field input { grid-column: 1 / -1; width: 100%; min-height: 44px; margin: 0; cursor: pointer; }

.landing-examples { margin-top: clamp(36px, 6vw, 80px); }
.landing-feature { display: grid; grid-template-columns: minmax(0, .74fr) minmax(0, 1.26fr); gap: clamp(28px, 6vw, 96px); align-items: center; min-height: 520px; padding-block: clamp(48px, 7vw, 104px); }
.landing-feature { border-top: 1px solid var(--line); }
.feature-copy { min-width: 0; }
.feature-copy h2 { max-width: 17ch; font-size: clamp(34px, 4.15vw, 60px); font-weight: 500; line-height: 1.04; letter-spacing: -.035em; text-wrap: balance; }
.feature-copy h3 { margin-bottom: 4px; font-size: 17px; }
.feature-copy p { max-width: 42ch; margin-block: 16px 12px; color: var(--muted); }
.feature-media { margin: 0; padding: clamp(14px, 3vw, 40px); border-radius: 16px; background: #eaf0ff; }
.feature-media img { display: block; width: 100%; height: auto; border-radius: 8px; box-shadow: 0 12px 24px -17px rgb(0 0 0 / .32); }
.feature-lesson .feature-media { display: grid; place-items: center; }
.feature-lesson .feature-media img { max-width: 364px; }
.feature-media-pair { display: grid; gap: clamp(12px, 2vw, 20px); }
.feature-media-pair .feature-detail { justify-self: end; width: min(76%, 390px); }
.feature-lab { grid-template-columns: minmax(0, 1.26fr) minmax(0, .74fr); }
.feature-lab .feature-media { grid-area: 1 / 1; background: #fbf0e9; }
.feature-lab .feature-copy { grid-area: 1 / 2; }
.feature-works { align-items: start; }
.feature-works .feature-media { align-self: center; background: #eef0f7; }
.feature-audience { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.feature-audience p { margin-block: 0 4px; }
.feature-actions { display: flex; flex-wrap: wrap; gap: 0 16px; }
.landing-examples .feature-link { display: inline-flex; gap: 8px; align-items: center; min-height: 44px; color: #203fc8; font-size: 14px; font-weight: 650; line-height: 1.4; text-decoration: underline; text-decoration-color: #203fc863; text-underline-offset: 4px; transition: text-decoration-color 180ms var(--bright-motion-ease); }
.feature-link:hover { text-decoration-color: currentColor; }
.feature-link svg { display: block; width: 16px; height: 16px; flex: 0 0 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform 180ms var(--bright-motion-ease); }
.feature-link:hover svg, .feature-link:focus-visible svg { transform: translateX(3px); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .feature-media {
      animation: feature-appear linear both;
      animation-timeline: view();
      animation-range: entry 10% entry 65%;
    }
    @keyframes feature-appear {
      from { opacity: .86; transform: translateY(12px); }
      to { opacity: 1; transform: translateY(0); }
    }
  }
}

@media (max-width: 900px) {
  .landing-feature { gap: 24px; min-height: 390px; }
  .feature-copy h2 { font-size: 36px; }
  .feature-works { grid-template-columns: 1fr; }
  .feature-works .feature-copy { max-width: none; }
  .feature-works .feature-copy h2 { max-width: none; }
  .feature-works .feature-audience { display: inline-block; width: calc(50% - 10px); vertical-align: top; }
  .feature-works .feature-audience:last-child { margin-left: 16px; }
}
@media (max-width: 650px) {
  .vertex-toolbar { grid-template-columns: minmax(0, 1fr); padding-block: 4px 0; }
  .vertex-toolbar > p:not(.sr-only) { padding-block: 8px 0; font-size: 13px; }
  .vertex-controls summary { width: fit-content; margin-left: -8px; }
  .landing-examples { margin-top: 32px; }
  .landing-feature { grid-template-columns: 1fr; gap: 20px; min-height: 0; padding-block: 38px; }
  .feature-lab .feature-copy, .feature-lab .feature-media { grid-area: auto; }
  .feature-copy h2 { font-size: 32px; }
  .feature-copy p { margin-block: 10px 6px; font-size: 15px; }
  .feature-media { padding: 10px; }
  .feature-media-pair .feature-detail { width: 100%; }
  .feature-works .feature-audience { display: block; width: auto; }
  .feature-works .feature-audience:last-child { margin-left: 0; }
}

.practice-page.bright-tournament {
  width: 100%;
  max-width: none;
  padding: 0;
}

.tournament-title {
  margin: 0 0 18px;
  font-size: clamp(28px, 4.1vw, 40px);
  line-height: 1.16;
}

.tournament-heading {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.tournament-heading > span {
  white-space: nowrap;
  color: #e0c2ba;
  font-weight: 700;
}

.tournament-grid {
  display: grid;
  grid-template-columns: minmax(0, 2.17fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.tournament-surface {
  border: 1px solid #633d42;
  border-radius: 18px;
  padding: 15px;
  background: #463033;
  box-shadow: 0 3px #211417;
}

.tournament-entry {
  display: grid;
  justify-items: start;
  gap: 14px;
  padding: 24px;
  background: #25191b;
}

.tournament-demo-note {
  margin: 13px 0 0;
  color: #e0c2ba;
  font-size: 15px;
}
.tournament-entry .tournament-demo-note { margin: 0; }

.tournament-world {
  min-height: 282px;
  border-radius: 14px;
  background:
    linear-gradient(90deg, #25191b40, #25191b08),
    url('/practice/media/bright-angle/world.jpg') center / cover;
}

.tournament-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  padding: 4px;
  margin: 0 0 13px;
  border-radius: 12px;
  background: #25191b;
}

.tournament-tabs a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 14px;
  border-radius: 10px;
  color: #e0c2ba;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
}

.tournament-tabs [aria-current='page'] {
  box-shadow: inset 0 0 0 1px #b98e86;
  color: #fff4e8;
  background: #724447;
}

.tournament-table {
  width: 100%;
  border-spacing: 0;
  border-radius: 12px;
  overflow: hidden;
  background: #25191b;
  font-variant-numeric: tabular-nums;
  text-align: left;
}

.tournament-table :is(th, td) {
  padding: 10px;
  border-block-end: 1px solid #633d42;
}

.tournament-table thead th {
  color: #e0c2ba;
  background: #4c3336;
  font-size: 14px;
}

.tournament-table :is(td, thead th):first-child { text-align: center; }
.tournament-table tbody tr:last-child > * { border-block-end: 0; }

.tournament-own > * { background: #473132; }
.tournament-own th { color: #a3e4cb; }
.tournament-own small { display: block; }
.tournament-table tbody td:last-child { white-space: nowrap; }

.tournament-team-progress {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  color: #a3e4cb;
}

.tournament-team-progress progress {
  width: clamp(28px, 12vw, 135px);
  height: 9px;
  accent-color: #a3e4cb;
}

.tournament-aside { display: grid; gap: 14px; min-width: 0; }
.tournament-position {
  min-height: 145px;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 20px;
  background:
    linear-gradient(90deg, #25191bf2 4%, #25191b44 100%),
    url('/practice/media/bright-angle/world.jpg') center / cover;
}

.tournament-position p { margin: 0; font-weight: 700; }
.tournament-position strong { font-size: 32px; color: #ffdf8a; line-height: 1.1; }
.tournament-aside .practice-button { min-height: 48px; }
.tournament-rules { max-width: 840px; padding: 22px; background: #25191b; }
.tournament-rules h2 { margin: 0 0 5px; font-size: 20px; }
.tournament-rules p { margin: 0 0 20px; color: #e0c2ba; }
.tournament-rules p:last-child { margin: 0; }
.tournament-back { margin-block-start: 18px; }

@media (max-width: 760px) {
  .tournament-grid { grid-template-columns: minmax(0, 1fr); }
  .tournament-world { min-height: 153px; }
  .tournament-position { min-height: 110px; }
  .tournament-aside { grid-row: 1; }
  .tournament-surface { padding: 10px; }
  .tournament-entry { padding: 20px; }
  .tournament-rules { padding: 18px; }
  .tournament-table :is(th, td) { padding: 9px 6px; font-size: 14px; }
  .tournament-tabs a { padding-inline: 9px; }
}