.beginner-page { overflow: hidden; background: var(--color-ink-950); }
.beginner-page ul { list-style: none !important; padding: 0; }
.beginner-page__reveal-path { position: relative; }
.beginner-page__reveal-path::after { content: ""; position: absolute; pointer-events: none; inset: 12% 8%; border: 1px solid rgb(91 214 255 / 45%); border-left-color: transparent; border-bottom-color: transparent; border-radius: 50%; transform: rotate(-18deg); opacity: .7; }
.beginner-hero { padding: clamp(3rem, 7vw, 6rem) 0 clamp(4rem, 9vw, 7rem); background: linear-gradient(135deg, var(--color-ink-900), var(--color-ink-950) 68%); }
.beginner-hero__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-5); row-gap: var(--space-5); align-items: center; }
.beginner-hero__copy { grid-column: 1 / span 5; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); }
.beginner-hero__copy h1, .beginner-hero__copy p { margin: 0; }
.beginner-hero__copy h1 { max-width: 38rem; font-size: clamp(2.8rem, 5vw, 3.5rem); }
.beginner-hero__lead { max-width: 35rem; color: var(--color-mist-300); font-size: var(--text-lead); font-weight: 500; line-height: var(--line-lead); }
.beginner-hero__actions, .beginner-final__actions { display: flex; width: 100%; min-width: 0; flex-wrap: wrap; gap: var(--space-3); }
.beginner-hero__actions > *, .beginner-final__actions > * { min-width: 0; }
.beginner-hero__media { grid-column: 7 / span 6; width: 100%; min-width: 0; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-ink-800); aspect-ratio: 16 / 10; }
.beginner-hero__media img, .beginner-ricochet__figure img, .beginner-waves__media img { width: 100%; height: 100%; object-fit: cover; }
.beginner-hero__media::before, .beginner-ricochet__figure::before, .beginner-waves__media::before { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(100deg, rgb(9 11 16 / 28%), rgb(9 11 16 / 8%)); }
.beginner-hero__orbit { position: absolute; z-index: 2; right: 13%; top: 17%; width: 16%; aspect-ratio: 1; border: 2px solid var(--color-amber-400); border-radius: 50%; box-shadow: 0 0 20px rgb(255 184 74 / 24%); pointer-events: none; }
.beginner-hero__tags { grid-column: 1 / span 5; display: flex; min-width: 0; flex-wrap: wrap; gap: var(--space-3); }
.beginner-cycle__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-6); align-items: start; }
.beginner-cycle__main { grid-column: 1 / span 7; min-width: 0; max-width: 43.75rem; }
.beginner-cycle__steps { display: flex; min-width: 0; flex-direction: column; gap: var(--space-6); }
.beginner-numbered-step { display: flex; min-width: 0; gap: var(--space-4); }
.beginner-numbered-step__number { flex: 0 0 2rem; color: var(--color-amber-400); font-family: var(--font-heading); font-weight: 700; }
.beginner-numbered-step__body { flex: 1 1 auto; min-width: 0; }
.beginner-numbered-step__body h3, .beginner-numbered-step__body p { margin: 0; }
.beginner-numbered-step__body { display: flex; flex-direction: column; gap: var(--space-3); }
.beginner-numbered-step h3 { font-size: 1.4rem; }
.beginner-rule-panel { grid-column: 9 / span 3; min-width: 0; max-width: 20rem; padding: var(--space-5); border: 1px solid rgb(91 214 255 / 55%); border-radius: var(--radius-md); background: rgb(23 28 38 / 80%); }
.beginner-rule-panel p { margin: var(--space-4) 0 0; color: var(--color-mist-100); }
.beginner-ricochet { background: linear-gradient(180deg, transparent, rgb(15 18 25 / 70%)); }
.beginner-ricochet__intro { max-width: 35rem; }
.beginner-ricochet__figure { position: relative; width: 100%; min-width: 0; margin: var(--space-6) 0; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-lg); aspect-ratio: 16 / 10; }
.beginner-ricochet__marker { position: absolute; z-index: 3; display: inline-grid; width: 2.75rem; height: 2.75rem; place-items: center; border: 1px solid var(--color-electric-400); border-radius: 50%; background: var(--color-ink-950); color: var(--color-electric-400); font-weight: 700; }
.beginner-ricochet__marker--one { left: 25%; top: 57%; }.beginner-ricochet__marker--two { left: 57%; top: 27%; }.beginner-ricochet__marker--three { right: 18%; bottom: 20%; }
.beginner-ricochet__lead { max-width: 35rem; }
.beginner-ricochet__notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-6); }
.beginner-angle-note { min-width: 0; padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.beginner-angle-note h3 { margin-top: var(--space-3); font-size: 1.4rem; }.beginner-angle-note p { margin-bottom: var(--space-4); }
.beginner-powerups__intro { max-width: 39.5rem; }.beginner-powerups__panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-6); }
.beginner-choice-panel { min-width: 0; padding: var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-ink-800); }.beginner-choice-panel--physics { border-top: 3px solid var(--color-electric-400); }.beginner-choice-panel--pressure { background: var(--color-ink-900); }.beginner-choice-panel h3 { font-size: 1.5rem; }.beginner-choice-panel ul { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; }.beginner-choice-panel li { position: relative; padding-left: 1.25rem; color: var(--color-mist-300); }.beginner-choice-panel li::before { content: ""; position: absolute; left: 0; top: .65em; width: .45rem; height: .45rem; border-radius: 50%; background: var(--color-electric-400); }
.beginner-choice-checklist { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--color-border); }.beginner-choice-checklist__items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin: var(--space-4) 0; }.beginner-choice-checklist__items button { display: grid; width: 100%; min-width: 0; min-height: 4rem; grid-template-columns: 2rem minmax(0, 1fr); gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); color: var(--color-mist-100); text-align: left; }.beginner-choice-checklist__items button span { color: var(--color-amber-400); font-family: var(--font-heading); font-weight: 700; }.beginner-choice-checklist__items small { display: none; grid-column: 2; color: var(--color-mist-300); }.beginner-choice-checklist__items button[aria-expanded="true"] small { display: block; }
.beginner-upgrades__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-6); row-gap: var(--space-5); align-items: start; }.beginner-upgrades__copy { grid-column: 1 / span 7; min-width: 0; max-width: 42.5rem; }.beginner-timeline { grid-column: 9 / span 4; display: flex; min-width: 0; flex-direction: column; gap: var(--space-4); padding: var(--space-5); border-left: 1px solid var(--color-electric-400); }.beginner-timeline button { display: flex; min-width: 0; align-items: center; gap: var(--space-3); color: var(--color-mist-300); text-align: left; }.beginner-timeline button span { flex: 0 0 2rem; color: var(--color-amber-400); font-family: var(--font-heading); font-weight: 700; }.beginner-upgrades__notes { grid-column: 1 / span 7; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }.beginner-upgrades__notes article { min-width: 0; padding-top: var(--space-4); border-top: 1px solid var(--color-border); }.beginner-upgrades__notes h3 { margin-top: var(--space-3); font-size: 1.3rem; }.beginner-upgrades__link { grid-column: 1 / span 7; }
.beginner-combos { position: relative; background: var(--color-ink-900); }.beginner-combos__grid { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-6); row-gap: var(--space-5); }.beginner-combos__symbol { position: absolute; right: 4%; top: -3rem; color: rgb(91 214 255 / 10%); font-family: var(--font-heading); font-size: 18rem; font-weight: 700; line-height: 1; pointer-events: none; }.beginner-combos__lead { grid-column: 1 / span 7; min-width: 0; max-width: 38rem; }.beginner-combos__side { grid-column: 9 / span 4; display: flex; min-width: 0; flex-direction: column; gap: var(--space-5); }.beginner-combo-card { min-width: 0; padding-left: var(--space-4); border-left: 2px solid var(--color-electric-400); }.beginner-combo-card--warning { border-left-color: var(--color-coral-400); }.beginner-combo-card h3 { font-size: 1.35rem; }.beginner-combos__link { grid-column: 1 / span 7; }
.beginner-waves__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-6); align-items: start; }.beginner-waves__media { grid-column: 1 / span 5; position: relative; width: 100%; min-width: 0; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-lg); aspect-ratio: 16 / 10; }.beginner-waves__copy { grid-column: 7 / span 6; min-width: 0; max-width: 38.75rem; }.beginner-waves__copy h2 { margin-top: var(--space-3); }.beginner-wave-note { margin-top: var(--space-5); padding-left: var(--space-4); border-left: 2px solid var(--color-electric-400); }.beginner-wave-note--amber { border-left-color: var(--color-amber-400); }.beginner-wave-note h3 { font-size: 1.35rem; }.beginner-wave-note ul { display: flex; flex-direction: column; gap: var(--space-2); }.beginner-wave-note li { position: relative; padding-left: 1rem; color: var(--color-mist-300); }.beginner-wave-note li::before { content: "•"; position: absolute; left: 0; color: var(--color-amber-400); }
.beginner-run-plan { background: linear-gradient(180deg, var(--color-ink-950), var(--color-ink-900)); }.beginner-run-plan__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }.beginner-run-plan__list { grid-column: 1 / span 8; min-width: 0; max-width: 42.5rem; display: flex; flex-direction: column; gap: var(--space-5); }.beginner-run-plan__list h2 { margin-bottom: 0; }.beginner-plan-step { min-width: 0; }.beginner-plan-step label { display: grid; min-width: 0; grid-template-columns: 1.15rem 2.25rem minmax(0, 1fr); align-items: center; gap: var(--space-3); margin: 0; font-size: 1.15rem; }.beginner-plan-step label input { width: 1rem; min-height: 1rem; }.beginner-plan-step label span { color: var(--color-amber-400); font-family: var(--font-heading); font-weight: 700; }.beginner-plan-step p { margin: var(--space-3) 0 0 4.4rem; }.beginner-run-reminder { display: none; }.beginner-run-reminder { min-width: 0; padding: var(--space-5); border: 1px solid var(--color-electric-400); border-radius: var(--radius-md); background: rgb(23 28 38 / 82%); }.beginner-run-reminder strong { display: block; color: var(--color-mist-100); font-family: var(--font-heading); font-size: 2rem; }.beginner-run-reminder strong:nth-of-type(2) { color: var(--color-electric-400); }.beginner-run-reminder strong:nth-of-type(3) { color: var(--color-amber-400); }
.beginner-deeper__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-6); }.beginner-feature-guide { grid-column: 1 / span 7; position: relative; min-width: 0; overflow: hidden; padding: var(--space-6); border: 1px solid var(--color-electric-400); border-radius: var(--radius-lg); background: linear-gradient(140deg, rgb(23 28 38 / 92%), var(--color-ink-900)); }.beginner-feature-guide > * { position: relative; z-index: 1; }.beginner-feature-guide__arc { position: absolute; z-index: 0; right: -4rem; top: -4rem; width: 15rem; aspect-ratio: 1; border: 2px solid rgb(91 214 255 / 45%); border-radius: 50%; }.beginner-feature-guide h3 { font-size: 2rem; }.beginner-deeper__compact { grid-column: 9 / span 4; display: flex; min-width: 0; flex-direction: column; gap: var(--space-5); }.beginner-deeper__compact article { min-width: 0; padding-bottom: var(--space-5); border-bottom: 1px solid var(--color-border); }.beginner-deeper__compact h3 { margin-top: var(--space-2); font-size: 1.4rem; }
.beginner-final__panel { width: min(100%, 62.5rem); min-width: 0; margin-inline: auto; padding: clamp(var(--space-6), 6vw, var(--space-8)); overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-ink-900); }.beginner-final__panel::before { content: ""; position: absolute; right: 7%; top: 20%; width: 5rem; height: 5rem; border-radius: 50%; background: var(--color-amber-400); box-shadow: 0 0 3rem rgb(255 184 74 / 25%); pointer-events: none; }.beginner-final__content { position: relative; z-index: 1; display: flex; max-width: 36.25rem; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-5); margin-inline: auto; }.beginner-final__content h2, .beginner-final__content p { margin: 0; }.beginner-final__content p { font-size: var(--text-lead); color: var(--color-mist-300); }
@media (max-width: 75rem) { .beginner-hero__grid, .beginner-cycle__grid, .beginner-upgrades__grid, .beginner-combos__grid, .beginner-waves__grid, .beginner-run-plan__grid, .beginner-deeper__grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }.beginner-hero__copy { grid-column: 1 / span 4; }.beginner-hero__media { grid-column: 5 / span 4; }.beginner-hero__tags { grid-column: 1 / span 4; }.beginner-cycle__main { grid-column: 1 / span 8; }.beginner-rule-panel { grid-column: 1 / span 8; max-width: none; }.beginner-upgrades__copy { grid-column: 1 / span 5; }.beginner-timeline { grid-column: 6 / span 3; }.beginner-upgrades__notes, .beginner-upgrades__link { grid-column: 1 / span 8; }.beginner-combos__lead { grid-column: 1 / span 8; }.beginner-combos__side { grid-column: 1 / span 8; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }.beginner-combos__link { grid-column: 1 / span 8; }.beginner-waves__media { grid-column: 1 / span 3; }.beginner-waves__copy { grid-column: 4 / span 5; }.beginner-run-plan__list { grid-column: 1 / span 8; }.beginner-feature-guide { grid-column: 1 / span 8; }.beginner-deeper__compact { grid-column: 1 / span 8; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }.beginner-run-reminder { display: block; } }
@media (max-width: 61.25rem) { .beginner-hero__copy h1 { font-size: 3rem; }.beginner-ricochet__notes { grid-template-columns: repeat(2, minmax(0, 1fr)); }.beginner-angle-note:last-child { grid-column: 1 / span 2; }.beginner-upgrades__grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }.beginner-upgrades__copy { grid-column: 1 / span 8; }.beginner-timeline { grid-column: 1 / span 8; flex-direction: row; justify-content: space-between; border-left: 0; border-top: 1px solid var(--color-electric-400); }.beginner-timeline button { flex: 1 1 0; }.beginner-upgrades__notes { grid-column: 1 / span 8; }.beginner-waves__media { grid-column: 1 / span 8; }.beginner-waves__copy { grid-column: 1 / span 8; }.beginner-choice-checklist__items { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 47.99rem) { .beginner-page .section { padding-block: var(--space-7); }.beginner-hero { padding-block: var(--space-7); }.beginner-hero__grid, .beginner-cycle__grid, .beginner-upgrades__grid, .beginner-combos__grid, .beginner-waves__grid, .beginner-run-plan__grid, .beginner-deeper__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }.beginner-hero__copy, .beginner-hero__media, .beginner-hero__tags, .beginner-cycle__main, .beginner-rule-panel, .beginner-upgrades__copy, .beginner-timeline, .beginner-upgrades__notes, .beginner-upgrades__link, .beginner-combos__lead, .beginner-combos__side, .beginner-combos__link, .beginner-waves__media, .beginner-waves__copy, .beginner-run-plan__list, .beginner-feature-guide, .beginner-deeper__compact { grid-column: 1 / span 4; }.beginner-hero__copy { gap: var(--space-4); }.beginner-hero__copy h1 { font-size: 2.125rem; line-height: 1.18; }.beginner-hero__lead { max-width: 34ch; font-size: 1.125rem; line-height: 1.55; }.beginner-hero__actions, .beginner-final__actions { flex-direction: column; }.beginner-hero__actions .button, .beginner-final__actions .button { width: 100%; }.beginner-hero__media { order: 2; }.beginner-hero__tags { order: 3; }.beginner-cycle__grid { gap: var(--space-5); }.beginner-numbered-step { gap: var(--space-3); }.beginner-numbered-step__number { flex-basis: 2rem; }.beginner-rule-panel { max-width: none; }.beginner-ricochet__intro, .beginner-ricochet__lead { max-width: 38ch; }.beginner-ricochet__figure { aspect-ratio: 4 / 3; }.beginner-ricochet__notes, .beginner-powerups__panels, .beginner-choice-checklist__items, .beginner-upgrades__notes, .beginner-combos__side, .beginner-deeper__compact { grid-template-columns: 1fr; }.beginner-angle-note:last-child { grid-column: auto; }.beginner-choice-panel { padding: var(--space-4); }.beginner-choice-checklist__items button { min-height: 2.75rem; }.beginner-timeline { flex-direction: row; gap: var(--space-2); padding: var(--space-4) 0; }.beginner-timeline button { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); font-size: var(--text-meta); }.beginner-timeline button span { flex-basis: auto; }.beginner-upgrades__notes { gap: var(--space-5); }.beginner-combos__symbol { font-size: 10rem; top: -1rem; right: -1rem; }.beginner-combos__lead { max-width: 38ch; }.beginner-combo-card { padding-left: var(--space-3); }.beginner-waves__copy { max-width: 39ch; }.beginner-plan-step p { margin-left: 0; }.beginner-plan-step label { grid-template-columns: 1.15rem 2rem minmax(0, 1fr); font-size: 1rem; }.beginner-run-reminder { display: block; order: 0; }.beginner-feature-guide { padding: var(--space-5); }.beginner-feature-guide h3 { font-size: 1.75rem; }.beginner-final__panel { padding: var(--space-5); }.beginner-final__content { max-width: none; }.beginner-final__content p { font-size: 1.125rem; line-height: 1.55; } }
@media (prefers-reduced-motion: no-preference) { .beginner-page__reveal-path::after { animation: beginner-path-enter 600ms ease both; }.beginner-ricochet__marker, .beginner-timeline button, .beginner-choice-checklist__items button { transition: border-color var(--transition-fast), background-color var(--transition-fast), transform var(--transition-fast); }.beginner-ricochet__marker:hover, .beginner-ricochet__marker:focus-visible { transform: scale(1.08); } }@keyframes beginner-path-enter { from { opacity: 0; transform: rotate(-18deg) scale(.9); } to { opacity: .7; transform: rotate(-18deg) scale(1); } }
.beginner-angle-note.is-highlighted, .beginner-upgrades__notes article.is-highlighted { outline: 2px solid var(--color-electric-400); outline-offset: 4px; border-radius: var(--radius-sm); }