.beginner-tips-page {
  overflow: clip;
}

.beginner-tips-page .bt-hero {
  padding-block: var(--space-10);
  background:
    radial-gradient(circle at 82% 43%, rgba(240, 42, 155, 0.16), transparent 27%),
    linear-gradient(120deg, rgba(27, 22, 64, 0.42), transparent 56%);
}

.beginner-tips-page .bt-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-6);
  align-items: center;
}

.beginner-tips-page .bt-hero__grid > * { min-width: 0; width: 100%; }
.beginner-tips-page .bt-hero__content { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); margin: 0; }
.beginner-tips-page .bt-hero__content > * { margin: 0; min-width: 0; }
.beginner-tips-page .bt-hero__content h1 { font-size: clamp(3.25rem, 5.2vw, 4.25rem); }
.beginner-tips-page .bt-hero__subtitle { color: var(--color-text-muted); font-size: var(--text-14); }
.beginner-tips-page .bt-hero__lead { max-width: 37.5rem; }
.beginner-tips-page .bt-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); width: 100%; }
.beginner-tips-page .bt-hero__actions > * { min-width: 0; }
.beginner-tips-page .bt-hero__context { max-width: 36rem; color: var(--color-text-secondary); font-size: var(--text-14); line-height: 1.5; }
.beginner-tips-page .bt-hero__media { position: relative; margin: 0; min-width: 0; }
.beginner-tips-page .bt-hero__media::before { position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(8, 6, 17, 0.56), transparent 38%); content: ""; }
.beginner-tips-page .bt-hero__media img { width: 100%; max-width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: right center; border: 1px solid var(--color-violet-line); clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); }
.beginner-tips-page .bt-hero__media figcaption { margin: var(--space-2) 0 0; }

.beginner-tips-page .bt-loop__intro { width: min(100%, 40rem); }
.beginner-tips-page .bt-loop__cards,
.beginner-tips-page .bt-team__cards,
.beginner-tips-page .bt-routes__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-6); }
.beginner-tips-page .bt-loop__cards > *, .beginner-tips-page .bt-team__cards > *, .beginner-tips-page .bt-routes__cards > * { min-width: 0; width: 100%; }
.beginner-tips-page .bt-loop-card,
.beginner-tips-page .bt-team-card,
.beginner-tips-page .bt-route-card { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-3); min-width: 0; padding: var(--space-5); border: 1px solid var(--color-violet-line); background: var(--color-archive); clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); }
.beginner-tips-page .bt-loop-card > *, .beginner-tips-page .bt-team-card > *, .beginner-tips-page .bt-route-card > * { margin: 0; min-width: 0; }
.beginner-tips-page .bt-loop-card--cyan, .beginner-tips-page .bt-team-card--momentum { border-top: 2px solid var(--color-cyan); }
.beginner-tips-page .bt-loop-card--magenta, .beginner-tips-page .bt-team-card--pressure { border-top: 2px solid var(--color-magenta); }
.beginner-tips-page .bt-loop-card--portal, .beginner-tips-page .bt-team-card--adapt { background: radial-gradient(circle at 92% 92%, rgba(240, 42, 155, 0.16), transparent 35%), var(--color-archive); }
.beginner-tips-page .bt-route-card--signal { border-top: 2px solid var(--color-signal); }

.beginner-tips-page .bt-priority__intro { width: min(100%, 38.75rem); margin-inline-start: 8.333%; }
.beginner-tips-page .bt-priority__rail { display: flex; flex-direction: column; gap: var(--space-6); width: min(100%, 64.5rem); margin: var(--space-6) auto 0; }
.beginner-tips-page .bt-step { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 8fr); gap: var(--space-5); min-width: 0; width: 100%; }
.beginner-tips-page .bt-step > * { min-width: 0; width: 100%; }
.beginner-tips-page .bt-step__marker { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); color: var(--color-cyan); font-family: var(--font-heading); }
.beginner-tips-page .bt-step__marker span { font-size: var(--text-52); font-weight: 700; line-height: 1; letter-spacing: -0.05em; }
.beginner-tips-page .bt-step__marker small { color: inherit; font-size: var(--text-12); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.beginner-tips-page .bt-step__marker--magenta { color: var(--color-magenta-bright); }
.beginner-tips-page .bt-step__marker--signal { color: var(--color-signal); }
.beginner-tips-page .bt-step__copy { width: min(100%, 36.25rem); }
.beginner-tips-page .bt-step__copy h3 { margin-bottom: var(--space-3); }
.beginner-tips-page .bt-priority__callout { width: min(100%, 42.5rem); margin: 0 0 0 auto; }

.beginner-tips-page .bt-team__intro { width: min(100%, 40rem); }
.beginner-tips-page .bt-team__handoff { width: min(100%, 40rem); margin-top: var(--space-5); }

.beginner-tips-page .bt-combat__intro { width: min(100%, 40rem); }
.beginner-tips-page .bt-combat__split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(20.625rem, 5fr); gap: var(--space-6); align-items: start; margin-top: var(--space-6); }
.beginner-tips-page .bt-combat__split > * { min-width: 0; width: 100%; }
.beginner-tips-page .bt-combat__prose { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }
.beginner-tips-page .bt-combat__unit { width: min(100%, 40rem); }
.beginner-tips-page .bt-combat__unit--magenta { padding-inline-start: var(--space-4); border-inline-start: 3px solid var(--color-magenta); }
.beginner-tips-page .bt-combat__unit--magenta h3 { margin-bottom: var(--space-3); }
.beginner-tips-page .bt-analysis { display: flex; flex-direction: column; gap: var(--space-4); }
.beginner-tips-page .bt-analysis > * { margin: 0; }
.beginner-tips-page .bt-analysis ol { display: flex; flex-direction: column; gap: var(--space-2); padding: 0; list-style-position: inside; }
.beginner-tips-page .bt-analysis li { padding-bottom: var(--space-2); border-bottom: 1px solid rgba(91, 231, 242, 0.35); }

.beginner-tips-page .bt-domain { background: radial-gradient(circle at 76% 45%, rgba(240, 42, 155, 0.16), transparent 28%), var(--color-void); }
.beginner-tips-page .bt-domain__band { display: grid; grid-template-columns: minmax(26.25rem, 5fr) minmax(0, 7fr); gap: var(--space-6); align-items: stretch; padding: var(--space-7); border: 1px solid var(--color-violet-line); background: var(--color-indigo); clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); }
.beginner-tips-page .bt-domain__band > * { min-width: 0; width: 100%; }
.beginner-tips-page .bt-domain__content { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.beginner-tips-page .bt-domain__content > * { margin: 0; min-width: 0; }
.beginner-tips-page .bt-domain__lead { max-width: 35rem; }
.beginner-tips-page .bt-domain__media { order: 2; margin: 0; min-width: 0; }
.beginner-tips-page .bt-domain__media img { width: 100%; max-width: 100%; min-height: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: 58% center; border: 1px solid var(--color-violet-line); }
.beginner-tips-page .bt-domain__media figcaption { margin: var(--space-2) 0 0; }
.beginner-tips-page .bt-domain__checks { display: flex; flex-direction: column; gap: var(--space-3); width: 100%; }
.beginner-tips-page .bt-domain-check { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: var(--space-3); width: 100%; min-width: 0; padding: var(--space-3); border: 1px solid var(--color-violet-line); background: rgba(8, 6, 17, 0.38); }
.beginner-tips-page .bt-domain-check > * { min-width: 0; margin: 0; }
.beginner-tips-page .bt-domain-check span { color: var(--color-cyan); font-family: var(--font-heading); font-weight: 700; }
.beginner-tips-page .bt-domain-check p { max-width: 26.25rem; font-size: var(--text-14); line-height: 1.5; }
.beginner-tips-page .bt-domain__caution { width: min(100%, 38.75rem); }

.beginner-tips-page .bt-progression__rail { position: relative; width: min(100%, 45rem); margin-inline: auto; }
.beginner-tips-page .bt-progression__intro { width: min(100%, 42.5rem); }
.beginner-tips-page .bt-progression-block { position: relative; width: 100%; margin-top: var(--space-6); padding: var(--space-5); border-left: 2px solid var(--color-violet-line); background: var(--color-archive); }
.beginner-tips-page .bt-progression-block--cyan { border-left-color: var(--color-cyan); }
.beginner-tips-page .bt-progression-block--magenta { border-left-color: var(--color-magenta); background: var(--color-indigo); }
.beginner-tips-page .bt-progression-block > :last-child { margin-bottom: 0; }
.beginner-tips-page .bt-progression-block__number { position: absolute; right: calc(100% + var(--space-4)); top: var(--space-5); color: var(--color-text-muted); font-family: var(--font-heading); font-size: var(--text-28); font-weight: 700; line-height: 1; }
.beginner-tips-page .bt-progression__link { margin-top: var(--space-5); }

.beginner-tips-page .bt-mistakes__wrap { width: min(100%, 53.75rem); margin-inline: auto; }
.beginner-tips-page .bt-mistakes__intro { width: min(100%, 38.75rem); }
.beginner-tips-page .bt-disclosures { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-5); }
.beginner-tips-page .bt-disclosure { width: 100%; min-width: 0; border: 1px solid var(--color-violet-line); background: var(--color-archive); }
.beginner-tips-page .bt-disclosure__trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); width: 100%; min-width: 0; min-height: 3rem; padding: var(--space-3) var(--space-4); border: 0; background: transparent; color: var(--color-text-primary); font-family: var(--font-heading); font-size: var(--text-16); font-weight: 600; text-align: left; }
.beginner-tips-page .bt-disclosure__trigger > * { min-width: 0; }
.beginner-tips-page .bt-disclosure__action { display: inline-flex; flex: 0 0 auto; align-items: center; gap: var(--space-2); color: var(--color-cyan); font-family: var(--font-body); font-size: var(--text-12); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.beginner-tips-page .bt-disclosure__action b { color: inherit; font-size: var(--text-18); }
.beginner-tips-page .bt-disclosure__panel { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows var(--transition-base), opacity var(--transition-base); }
.beginner-tips-page .bt-disclosure.is-open .bt-disclosure__panel { grid-template-rows: 1fr; opacity: 1; }
.beginner-tips-page .bt-disclosure__panel[hidden] { display: none; }
.beginner-tips-page .bt-disclosure__content { min-width: 0; overflow: hidden; padding: 0 var(--space-5) var(--space-4); border-left: 3px solid var(--color-cyan); }
.beginner-tips-page .bt-disclosure__content--magenta { border-left-color: var(--color-magenta); }
.beginner-tips-page .bt-disclosure__content p { width: min(100%, 40rem); margin: 0; }
.beginner-tips-page .bt-mistakes__closing { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--color-violet-line); color: var(--color-text-muted); }

.beginner-tips-page .bt-routes__intro { width: min(100%, 37.5rem); }
.beginner-tips-page .bt-route-card { min-height: 100%; }
.beginner-tips-page .bt-route-card .link-arrow { margin-top: auto; min-height: 2.75rem; }

.beginner-tips-page .bt-close { background: radial-gradient(circle at 50% 48%, rgba(240, 42, 155, 0.16), transparent 38%), var(--color-void); }
.beginner-tips-page .bt-close__block { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); width: min(100%, 42.5rem); margin-inline: auto; padding: var(--space-9); background: var(--color-indigo); }
.beginner-tips-page .bt-close__block > * { margin: 0; min-width: 0; }
.beginner-tips-page .bt-close__block p { width: min(100%, 38.75rem); }
.beginner-tips-page .bt-close__context { padding-top: var(--space-4); border-top: 1px solid var(--color-violet-line); color: var(--color-text-secondary); font-size: var(--text-14); }

@media (max-width: 64.99rem) {
  .beginner-tips-page .bt-hero__grid { grid-template-columns: minmax(0, 3fr) minmax(0, 5fr); }
  .beginner-tips-page .bt-domain__band { grid-template-columns: minmax(0, 3fr) minmax(0, 5fr); padding: var(--space-6); }
}

@media (max-width: 59.99rem) {
  .beginner-tips-page .bt-loop__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .beginner-tips-page .bt-loop__cards > :first-child { grid-column: 1 / 2; }
  .beginner-tips-page .bt-team__cards { grid-template-columns: minmax(0, 5fr) minmax(0, 3fr); }
  .beginner-tips-page .bt-team__cards > :nth-child(3) { grid-column: 1 / -1; }
  .beginner-tips-page .bt-routes__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .beginner-tips-page .bt-routes__cards > :first-child { grid-column: 1 / -1; }
  .beginner-tips-page .bt-priority__intro { margin-inline-start: 0; }
  .beginner-tips-page .bt-step { grid-template-columns: 1fr; gap: var(--space-3); }
  .beginner-tips-page .bt-step__marker { flex-direction: row; align-items: baseline; }
  .beginner-tips-page .bt-step__marker span { font-size: var(--text-36); }
  .beginner-tips-page .bt-combat__split { grid-template-columns: minmax(0, 5fr) minmax(17.5rem, 3fr); gap: var(--space-5); }
}

@media (max-width: 56.24rem) {
  .beginner-tips-page .bt-combat__split { grid-template-columns: minmax(0, 1fr); }
  .beginner-tips-page .bt-analysis { width: min(100%, 40rem); }
  .beginner-tips-page .bt-domain__band { grid-template-columns: minmax(0, 1fr); }
  .beginner-tips-page .bt-domain__media { order: 0; }
}

@media (max-width: 47.49rem) {
  .beginner-tips-page .bt-hero { padding-block: var(--space-9); }
  .beginner-tips-page .bt-hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .beginner-tips-page .bt-hero__content h1 { font-size: clamp(2.5rem, 11vw, 2.75rem); }
  .beginner-tips-page .bt-hero__actions { flex-direction: column; align-items: stretch; }
  .beginner-tips-page .bt-hero__actions .button { width: 100%; min-height: 3rem; }
  .beginner-tips-page .bt-hero__media::before { background: linear-gradient(180deg, rgba(8, 6, 17, 0.12), transparent 30%); }
  .beginner-tips-page .bt-loop__cards, .beginner-tips-page .bt-team__cards, .beginner-tips-page .bt-routes__cards { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .beginner-tips-page .bt-loop__cards > :first-child, .beginner-tips-page .bt-team__cards > :nth-child(3), .beginner-tips-page .bt-routes__cards > :first-child { grid-column: auto; }
  .beginner-tips-page .bt-loop-card, .beginner-tips-page .bt-team-card, .beginner-tips-page .bt-route-card { padding: var(--space-5); }
  .beginner-tips-page .bt-priority__rail { gap: var(--space-5); }
  .beginner-tips-page .bt-step__copy, .beginner-tips-page .bt-priority__callout { width: 100%; }
  .beginner-tips-page .bt-combat__unit, .beginner-tips-page .bt-analysis { width: 100%; }
  .beginner-tips-page .bt-domain__band { gap: var(--space-5); padding: var(--space-4); }
  .beginner-tips-page .bt-domain__media img { aspect-ratio: 3 / 2; }
  .beginner-tips-page .bt-domain-check { padding: var(--space-3); }
  .beginner-tips-page .bt-progression__rail { width: 100%; }
  .beginner-tips-page .bt-progression-block { padding: var(--space-4); }
  .beginner-tips-page .bt-progression-block__number { position: static; display: block; margin-bottom: var(--space-3); font-size: var(--text-22); }
  .beginner-tips-page .bt-disclosure__trigger { min-height: 3rem; padding: var(--space-3); }
  .beginner-tips-page .bt-disclosure__action { font-size: 0; }
  .beginner-tips-page .bt-disclosure__action b { font-size: var(--text-18); }
  .beginner-tips-page .bt-disclosure__content { padding: 0 var(--space-4) var(--space-4); }
  .beginner-tips-page .bt-close__block { width: 100%; padding: var(--space-6) var(--space-4); }
  .beginner-tips-page .bt-close__block .button { width: 100%; min-height: 3rem; }
}

@media (prefers-reduced-motion: reduce) {
  .beginner-tips-page .bt-disclosure__panel { transition: none; }
}