.beginner-guide-page { background: var(--color-paper-050); }
.beginner-guide-page a { color: var(--color-blueprint-900); font-weight: 700; }
.beginner-guide-page a:hover { color: var(--color-blueprint-700); }
.bg-dossier, .bg-session, .bg-closing { position: relative; overflow: hidden; background: var(--color-blueprint-900); color: var(--color-paper-050); }
.bg-dossier::before, .bg-session::before, .bg-closing::before { position: absolute; inset: 0; opacity: .1; background-image: linear-gradient(rgba(118,183,193,.7) 1px, transparent 1px), linear-gradient(90deg, rgba(118,183,193,.7) 1px, transparent 1px); background-size: 32px 32px; content: ""; pointer-events: none; }
.bg-dossier__grid, .bg-closing__grid { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(15rem, 2fr) minmax(0, 3fr); gap: var(--space-5); padding-block: clamp(var(--space-8), 10vw, var(--space-10)); }
.bg-dossier__title, .bg-dossier__index, .bg-dossier__media, .bg-closing__grid > * { min-width: 0; }
.bg-dossier__title { grid-column: 1; align-self: start; max-width: 44rem; }
.bg-dossier__title h1 { margin-bottom: var(--space-5); }
.bg-dossier__title .lead { margin-top: var(--space-5); margin-bottom: 0; max-width: 43rem; }
.bg-dossier__datum { width: 100%; height: 2px; background: var(--color-construction-500); }
.bg-dossier__index { grid-column: 2; display: flex; flex-direction: column; gap: var(--space-4); padding-top: var(--space-2); }
.bg-index-item { min-width: 0; padding: var(--space-3); border-left: 1px solid var(--border-dark); }
.bg-index-item p:last-child { margin-bottom: 0; font-size: var(--text-small); line-height: 1.5; }
.bg-index-item--caution { border-left: 2px solid var(--color-signal-red-600); }
.bg-index-item--caution .technical-label { color: var(--color-construction-300); }
.bg-first-move { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: var(--space-2) var(--space-3); align-items: start; padding-top: var(--space-4); border-top: 2px solid var(--color-construction-500); color: var(--color-paper-050) !important; text-decoration: none; }
.bg-first-move span { display: grid; width: 2rem; height: 2rem; place-items: center; background: var(--color-construction-500); color: var(--color-ink-950); font-size: var(--text-small); font-weight: 700; }
.bg-first-move strong, .bg-first-move small { grid-column: 2; }
.bg-first-move small { color: var(--color-blueprint-050); line-height: 1.4; }
.bg-first-move:hover { color: var(--color-construction-300) !important; }
.bg-dossier__media { grid-column: 3; align-self: end; margin: 0; }
.bg-dossier__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 70% center; border: 1px solid var(--border-dark); }
.bg-dossier figcaption, .bg-session a, .bg-closing a { color: var(--color-paper-050); }
.bg-loop__intro, .bg-machines__intro, .bg-themes__intro, .bg-questions__intro { width: min(100%, 41rem); margin-left: calc((100% / 12) * 1); }
.bg-loop__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-7); }
.bg-loop-card { position: relative; min-width: 0; padding: var(--space-6); border: 1px solid var(--border-light); }
.bg-loop-card--a { background: var(--color-blueprint-050); }
.bg-loop-card--b { margin-top: var(--space-5); background: var(--color-paper-050); }
.bg-loop-card--c { background: var(--color-paper-200); }
.bg-loop-card p:last-child { margin-bottom: 0; }
.bg-coordinate { display: block; margin-bottom: var(--space-5); color: var(--color-blueprint-700); font-family: var(--font-heading); font-size: 3rem; line-height: 1; }
.bg-route { color: var(--color-blueprint-700); font-size: var(--text-small); font-weight: 700; line-height: 1.55; }
.bg-route span { color: var(--color-construction-500); padding-inline: .15rem; }
.bg-assignment__layout { display: grid; grid-template-columns: minmax(0, 9fr) minmax(13.75rem, 3fr); gap: var(--space-7); }
.bg-assignment__content { grid-column: 1; min-width: 0; order: 1; }
.bg-evidence-rail { grid-column: 2; min-width: 0; order: 2; align-self: start; padding: var(--space-5); border-top: 2px solid var(--color-construction-500); background: var(--color-blueprint-050); }
.bg-evidence-rail p:last-child { margin-bottom: 0; font-size: var(--text-small); }
.bg-checklist { display: flex; flex-direction: column; margin-top: var(--space-6); border-top: 1px solid var(--border-light); }
.bg-check-row { display: grid; grid-template-columns: minmax(2rem, 1fr) minmax(8rem, 2fr) minmax(0, 6fr); gap: var(--space-4); min-width: 0; padding-block: var(--space-5); border-bottom: 1px solid var(--border-light); }
.bg-check-row > * { min-width: 0; }
.bg-check-row h3, .bg-check-row p:last-child { margin-bottom: 0; }
.bg-check-mark { display: grid; width: 2rem; height: 2rem; place-items: center; background: var(--color-construction-500); color: var(--color-ink-950); font-size: var(--text-micro); font-weight: 700; }
.bg-phase-strip { display: flex; flex-wrap: wrap; gap: var(--space-2); color: var(--color-blueprint-700); font-size: var(--text-small); font-weight: 700; }
.bg-phase-strip span { padding-left: var(--space-2); border-left: 1px solid var(--border-light); }
.bg-session { padding-block: clamp(var(--space-8), 10vw, var(--space-10)); }
.bg-session > .container { position: relative; }
.bg-session__heading { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 3fr); justify-content: space-between; gap: var(--space-5); }
.bg-session__heading > * { min-width: 0; }
.bg-session__heading > .technical-label { align-self: end; justify-self: end; }
.bg-session__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-7); }
.bg-step { min-width: 0; padding: var(--space-5); border-top: 2px solid var(--color-construction-500); border-right: 1px solid var(--border-dark); background: rgba(16,23,27,.22); }
.bg-step > :last-child { margin-bottom: 0; }
.bg-step__number { display: block; margin-bottom: var(--space-5); color: var(--color-construction-300); font-family: var(--font-heading); font-size: 3.25rem; line-height: 1; }
.bg-step__caution { color: var(--color-construction-300); font-size: var(--text-small); font-weight: 700; line-height: 1.4; }
.bg-input-diagram { display: flex; gap: var(--space-3); padding-top: var(--space-3); color: var(--color-construction-300); font-size: 1.5rem; }
.bg-progress-line { height: 2px; margin-top: var(--space-5); background: rgba(231,241,240,.4); }
.bg-progress-line span { display: block; width: 75%; height: 100%; background: var(--color-construction-500); }
.bg-machines__media { width: min(100%, 65rem); margin: var(--space-7) 0 var(--space-6) auto; }
.bg-machines__media img, .bg-themes__media img { width: 100%; object-fit: cover; border: 1px solid var(--border-light); }
.bg-machines__media img { aspect-ratio: 3 / 2; }
.bg-machine-records { display: flex; flex-direction: column; border-top: 1px solid var(--border-light); }
.bg-machine-record { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(11.25rem, 2fr); gap: var(--space-5); min-width: 0; padding: var(--space-5); border-bottom: 1px solid var(--border-light); }
.bg-machine-record:nth-child(even) { background: var(--color-blueprint-050); }
.bg-machine-record > * { min-width: 0; }
.bg-machine-record h3 { margin-bottom: var(--space-2); font-size: 1.75rem; }
.bg-machine-record > p { margin-bottom: 0; }
.bg-datum { display: block; width: .55rem; height: .55rem; margin-bottom: var(--space-3); background: var(--color-construction-500); }
.bg-record-status { display: flex; flex-direction: column; gap: var(--space-2); color: var(--color-graphite-500); font-size: var(--text-small); line-height: 1.45; }
.bg-record-status--limited strong { color: var(--color-signal-red-600); text-transform: uppercase; letter-spacing: .08em; font-size: var(--text-micro); }
.bg-controls { background: var(--color-paper-200); }
.bg-controls__layout { display: grid; grid-template-columns: minmax(0, 7fr) minmax(17.5rem, 5fr); gap: var(--space-8); }
.bg-controls__copy, .bg-control-field { min-width: 0; }
.bg-controls__copy { display: flex; flex-direction: column; gap: var(--space-6); }
.bg-controls__copy > .eyebrow { margin-bottom: calc(var(--space-4) * -1); }
.bg-controls__copy article { min-width: 0; padding-bottom: var(--space-5); border-bottom: 1px solid var(--border-light); }
.bg-controls__copy article > :last-child { margin-bottom: 0; }
.bg-control-field { align-self: start; padding: var(--space-6); border: 1px solid rgba(18,55,70,.28); background: var(--color-blueprint-050); }
.bg-control-field > :last-child { margin-bottom: 0; }
.bg-sightline { position: relative; min-height: 15rem; margin-top: var(--space-6); border: 1px solid var(--color-blueprint-300); background: linear-gradient(135deg, transparent 49.6%, var(--color-blueprint-300) 49.8%, var(--color-blueprint-300) 50.2%, transparent 50.4%); }
.bg-sightline__point { position: absolute; left: var(--space-3); bottom: var(--space-3); padding: var(--space-2); background: var(--color-construction-500); color: var(--color-ink-950); font-size: var(--text-micro); font-weight: 700; text-transform: uppercase; }
.bg-sightline__point--far { top: var(--space-3); right: var(--space-3); bottom: auto; left: auto; background: var(--color-blueprint-900); color: var(--color-paper-050); }
.bg-themes__media { width: min(100%, 52rem); margin: var(--space-7) 0 var(--space-7) auto; }
.bg-themes__media img { aspect-ratio: 16 / 10; }
.bg-operation-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 5fr); column-gap: calc((100% / 12) * 2); row-gap: var(--space-6); }
.bg-operation-grid article { min-width: 0; padding-top: var(--space-5); border-top: 1px solid var(--border-light); }
.bg-operation-grid article > :last-child { margin-bottom: 0; }
.bg-operation-code { color: var(--color-blueprint-700); font-family: var(--font-heading); font-size: 1.75rem; font-weight: 600; }
.bg-operation-grid small { color: var(--color-graphite-500); font-size: var(--text-small); }
.bg-limit { display: inline-block; padding: var(--space-2); border: 1px solid var(--color-signal-red-600); color: var(--color-signal-red-600) !important; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.bg-question-list { display: flex; flex-direction: column; margin-top: var(--space-6); border-top: 1px solid var(--border-light); }
.bg-question-list article { display: grid; grid-template-columns: minmax(0, 8fr) minmax(14rem, 4fr); gap: var(--space-6); min-width: 0; padding-block: var(--space-6); border-bottom: 1px solid var(--border-light); }
.bg-question-list article > * { min-width: 0; }
.bg-question-list article div > :last-child, .bg-question-list aside > :last-child { margin-bottom: 0; }
.bg-question-list aside { align-self: start; padding: var(--space-4); background: var(--color-blueprint-050); }
.bg-question-list .button { width: 100%; min-height: 3rem; }
.bg-field-checklist { background: var(--color-blueprint-050); }
.bg-field-checklist__inner { width: min(100%, 65rem); margin-inline: auto; }
.bg-compact-list { display: flex; flex-direction: column; gap: 0; margin-top: var(--space-6); padding: 0; list-style: none; border-top: 1px solid var(--border-light); }
.bg-compact-list li { display: grid; grid-template-columns: minmax(2rem, 1fr) minmax(0, 6fr) minmax(0, 3fr); gap: var(--space-4); align-items: start; min-width: 0; padding-block: var(--space-4); border-bottom: 1px solid var(--border-light); }
.bg-compact-list li > * { min-width: 0; }
.bg-compact-list li > span { display: grid; width: 2rem; height: 2rem; place-items: center; background: var(--color-construction-500); color: var(--color-ink-950); font-size: var(--text-micro); font-weight: 700; }
.bg-compact-list h3 { margin-bottom: var(--space-1); }
.bg-compact-list p { margin-bottom: 0; }
.bg-route-cluster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.bg-route-cluster a { display: flex; min-height: 2.75rem; align-items: center; padding: var(--space-2); border: 1px solid var(--border-light); font-size: var(--text-small); text-decoration: none; }
.bg-route-cluster a:hover { border-color: var(--color-construction-500); background: var(--color-construction-300); color: var(--color-ink-950); }
.bg-scope-note { width: min(100%, 36rem); margin: var(--space-6) 0 0 calc((100% / 10) * 1); padding: var(--space-4); border-left: 2px solid var(--color-construction-500); }
.bg-scope-note p:last-child { margin-bottom: 0; font-size: var(--text-small); }
.bg-closing__grid { grid-template-columns: minmax(0, 7fr) minmax(18.75rem, 5fr); align-items: center; gap: var(--space-8); }
.bg-closing__grid > div:first-child { max-width: 40rem; }
.bg-closing__grid .eyebrow { color: var(--color-construction-300); }
.bg-closing__action { display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; padding: var(--space-6); border-left: 2px solid var(--color-construction-500); background: rgba(16,23,27,.24); }
.bg-closing__action .button { min-height: 3rem; }
.bg-closing__action p { margin: 0; color: var(--color-blueprint-050); font-size: var(--text-small); line-height: 1.5; }
.beginner-guide-page .button:focus-visible { outline-color: var(--color-ink-950); }
.bg-dossier :focus-visible, .bg-session :focus-visible, .bg-closing :focus-visible { outline-color: var(--color-construction-300); }
@media (max-width: 65rem) { .bg-dossier__grid { grid-template-columns: minmax(0, 5fr) minmax(15rem, 3fr); } .bg-dossier__media { grid-column: 1 / -1; width: 100%; margin-top: var(--space-4); } .bg-dossier__media img { aspect-ratio: 16 / 10; object-position: center; } }
@media (max-width: 61.25rem) { .bg-session__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bg-assignment__layout { grid-template-columns: 1fr; gap: var(--space-5); } .bg-evidence-rail { grid-column: 1; grid-row: 1; order: 1; } .bg-assignment__content { grid-column: 1; grid-row: 2; order: 2; } }
@media (max-width: 60rem) { .bg-controls__layout { grid-template-columns: 1fr; gap: var(--space-6); } .bg-control-field { grid-row: 1; } }
@media (max-width: 57.5rem) { .bg-loop__intro, .bg-machines__intro, .bg-themes__intro, .bg-questions__intro { margin-left: 0; } .bg-loop__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bg-loop-card--c { grid-column: 1 / -1; } .bg-loop-card--b { margin-top: 0; } }
@media (max-width: 55rem) { .bg-machine-record { grid-template-columns: 1fr; gap: var(--space-3); } .bg-record-status { border-top: 1px solid var(--border-light); padding-top: var(--space-3); } .bg-operation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); } .bg-question-list article { grid-template-columns: 1fr; gap: var(--space-4); } .bg-question-list aside { width: 100%; } }
@media (max-width: 51.25rem) { .bg-closing__grid { grid-template-columns: 1fr; gap: var(--space-6); } .bg-closing__action { width: min(100%, 26.25rem); } }
@media (max-width: 47.5rem) { .bg-compact-list li { grid-template-columns: minmax(2rem, auto) minmax(0, 1fr); } .bg-route-cluster { grid-column: 2; } .bg-scope-note { margin-left: 0; } }
@media (max-width: 42.5rem) { .bg-dossier::before, .bg-session::before, .bg-closing::before { background-size: 48px 48px; opacity: .06; } .bg-dossier__grid { grid-template-columns: 1fr; gap: var(--space-5); padding-block: var(--space-7); } .bg-dossier__title, .bg-dossier__index, .bg-dossier__media { grid-column: 1; } .bg-dossier__title { max-width: none; } .bg-dossier__title h1 { font-size: clamp(2.75rem, 11vw, 3.625rem); } .bg-dossier__index { padding-top: 0; } .bg-dossier__media { margin-top: 0; } .bg-loop__cards, .bg-session__steps, .bg-operation-grid { grid-template-columns: 1fr; } .bg-loop-card--c { grid-column: auto; } .bg-check-row { grid-template-columns: 2rem 1fr; gap: var(--space-3); } .bg-check-row > div { grid-column: 1 / -1; } .bg-check-row h3 { padding-top: var(--space-1); } .bg-session__heading { grid-template-columns: 1fr; } .bg-session__heading > .technical-label { justify-self: start; } .bg-step { border-right: 0; border-left: 1px solid var(--border-dark); } .bg-machines__media, .bg-themes__media { width: 100%; margin-left: 0; } .bg-controls__copy { gap: var(--space-5); } .bg-operation-grid { row-gap: var(--space-4); } .bg-question-list article { padding-block: var(--space-5); } .bg-compact-list li { gap: var(--space-3); } .bg-route-cluster { grid-template-columns: 1fr; } .bg-route-cluster a { min-height: 2.75rem; } .bg-closing { padding-block: var(--space-7); } .bg-closing__grid { padding-block: 0; } .bg-closing__action { width: 100%; padding: var(--space-5); } .bg-closing__action .button { width: 100%; min-height: 3rem; font-size: var(--text-base); } }
@media (prefers-reduced-motion: reduce) { .bg-dossier::before, .bg-session::before, .bg-closing::before { display: none; } }