/* stage: lighting the workshop presentation */
html body #end .career-hero{grid-template-columns:minmax(0,.7fr) minmax(0,1.65fr);gap:24px;background:radial-gradient(ellipse at 80% 20%,#27504760,transparent 65%),#10232b}
html body #end .beacon-showcase{min-width:0;width:100%;border:1px solid #95cbb650;border-radius:12px;background:#07151e;overflow:hidden;box-shadow:0 14px 38px #020b143b,inset 0 1px #d8ffed14}
.beacon-showcase .beacon-sheet{display:block;width:100%;height:auto;aspect-ratio:820/460}
.beacon-sheet .studio-detail{pointer-events:none}
html body #end .beacon-showcase .beacon-detail{border-bottom:1px solid #95cbb61c;margin-bottom:14px}
@media(min-width:1051px) and (max-width:1250px){
html body #end .career-hero{grid-template-columns:1fr}
}
.beacon-sheet text{font-family:var(--apex-font,system-ui)}
.beacon-sheet .technical-label{fill:#a9c7ce;font-size:10px;letter-spacing:1px}
.beacon-sheet .technical-line{fill:none;stroke:#709d9e;stroke-width:1;stroke-dasharray:3 4}
.beacon-sheet .focus-part{transition:opacity .18s}
.beacon-showcase[data-view="chassis"] .driver-part{opacity:.2}
.beacon-showcase[data-view="driver"] .chassis-part{opacity:.26}
.beacon-showcase[data-view="engine"] .driver-part{opacity:.22}
.beacon-showcase[data-view="engine"] .engine-highlight{stroke:#ffd38d;stroke-width:2;stroke-dasharray:5 4;fill:#ffcf8310}
.beacon-sheet .engine-highlight{fill:none;stroke:transparent}
html body #end #round-actions .beacon-controls{display:flex;flex-wrap:wrap;gap:6px;padding:12px 14px 0}
html body #end #round-actions .beacon-controls button{flex:1 1 80px;min-height:44px;width:auto;padding:9px 8px;border-radius:6px;font-size:9px;letter-spacing:.8px;background:#112934;border:1px solid #648d9255;color:#bed0d5;box-shadow:none}
html body #end #round-actions .beacon-controls button[aria-pressed="true"]{background:#b9f3d7;color:#09291e;border-color:#d4ffec;box-shadow:inset 0 -3px #65af92}
html body #end #round-actions .beacon-controls button:focus-visible{outline:3px solid #fff;outline-offset:2px}
html body #end .beacon-detail{margin:0;padding:12px 16px 16px;font:11px/1.65 var(--apex-font,system-ui);color:#aec8d1;min-height:70px}
html body #end .beacon-detail b{color:#d3f8e6;font-weight:750}
html body #end .career-pace-summary{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0}
.career-pace-summary div{padding:14px;background:#0a1c26;border:1px solid #9cc9c12b;border-radius:8px}
.career-pace-summary dt{font-size:9px;letter-spacing:1px;color:#a9c5ce}
.career-pace-summary dd{margin:5px 0 0;font:750 22px/1.3 var(--apex-font,system-ui);font-variant-numeric:tabular-nums;color:#d8f7e8}
@media(max-width:1050px){html body #end .career-hero{grid-template-columns:1fr}html body #end .career-hero>div:first-child{max-width:none}}
@media(max-width:540px){html body #end .career-hero{padding:12px;gap:16px}html body #end #round-actions .beacon-controls{padding:8px 8px 0;gap:5px}html body #end #round-actions .beacon-controls button{flex-basis:40%;min-height:44px}html body #end .beacon-detail{padding:10px;min-height:85px;font-size:10px}}
@media(prefers-reduced-motion:reduce){.beacon-sheet .focus-part{transition:none}}
/* stage: presenting component inspection controls */
html body #end #round-actions .beacon-inspection-tools{
display:flex;flex-wrap:wrap;align-items:center;gap:7px;padding:10px 14px 0;
border-top:1px solid #95cbb61c;margin-top:12px;
}
html body #end #round-actions .beacon-inspection-tools button{
flex:0 1 auto;width:auto;min-width:0;min-height:44px;padding:9px 12px;
font:750 9px/1.5 var(--apex-font,system-ui);letter-spacing:.8px;
border:1px solid #648d9255;border-radius:6px;background:#112934;
color:#c5dedf;box-shadow:none;touch-action:manipulation;
}
html body #end #round-actions .beacon-inspection-tools button[aria-pressed="true"]{
background:#294839;border-color:#b9f3d7;color:#e2ffed;
box-shadow:inset 0 -2px #b9f3d7;
}
html body #end #round-actions .beacon-inspection-tools button:disabled{
background:#0d202a;color:#a2b8c0;border-style:dashed;opacity:.65;
}
html body #end #round-actions .beacon-inspection-tools button:focus-visible{
outline:3px solid var(--apex-focus,#d4ffec);outline-offset:2px;
}
html body #end .beacon-view-hint{
flex:1 1 180px;font:10px/1.6 var(--apex-font,system-ui);color:#a9c5ce;
}
.beacon-showcase[data-closeup="true"] .beacon-sheet{
background:radial-gradient(ellipse at center,#193c3c,#091922 75%);
}
.beacon-showcase[data-closeup="true"] .beacon-sheet .technical-label,
.beacon-showcase[data-closeup="true"] .beacon-sheet .technical-line{
opacity:.3;
}
@media(max-width:540px){
html body #end #round-actions .beacon-inspection-tools{padding:9px 8px 0;margin-top:9px}
html body #end .beacon-view-hint{flex-basis:100%}
}
/* stage: adding workshop component notes */
html body #end .beacon-notes{
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;
margin:0;padding:0 14px 16px;
}
html body #end .beacon-note{
min-width:0;padding:12px;border:1px solid #95cbb629;border-radius:8px;
background:linear-gradient(145deg,#17313b,#0c202b);
}
html body #end .beacon-note dt{
font:750 9px/1.5 var(--apex-font,system-ui);letter-spacing:1px;
color:#c3edda;margin:0 0 7px;
}
html body #end .beacon-note dd{
margin:0;font:11px/1.65 var(--apex-font,system-ui);color:#b7ced6;
overflow-wrap:anywhere;
}
.beacon-showcase[data-labels="false"] .beacon-sheet .technical-label,
.beacon-showcase[data-labels="false"] .beacon-sheet .technical-line,
.beacon-showcase[data-labels="false"] .beacon-sheet .technical-markers{
visibility:hidden;
}
@media(max-width:540px){
html body #end .beacon-notes{grid-template-columns:1fr;padding:0 8px 12px;gap:6px}
html body #end .beacon-note{padding:10px}
}
@media(prefers-contrast:more){
html body #end .beacon-note{background:#091720;border-color:#a8c4d1}
html body #end .beacon-note dd{color:#edf8f5}
}



/* stage: presenting selected range evidence */
html body #end .career-range-summary{
margin:16px 0;padding:16px;border:1px solid #95cbb64a;
border-radius:10px;background:linear-gradient(135deg,#19382e,#0b1e2a);
}
html body #end .career-range-summary h4{margin:0;color:#d7f9e5}
html body #end .career-range-summary p{
font:11px/1.75 var(--apex-font,system-ui);color:#bed3da;
}
html body #end .career-comparison-text{
padding:14px;border:1px solid #95cbb638;border-radius:10px;background:#091922;
}
html body #end .career-comparison-text[hidden]{display:none}
html body #end .career-comparison-text textarea{
display:block;box-sizing:border-box;width:100%;min-height:200px;max-height:60vh;
resize:vertical;padding:12px;border:1px solid #95cbb670;border-radius:7px;
background:#06131d;color:#dcf3e8;font:12px/1.65 var(--apex-mono,monospace);
user-select:text;touch-action:pan-y;white-space:pre-wrap;
}
html body #end .career-comparison-text textarea:focus-visible{
outline:3px solid var(--apex-focus,#d4ffec);outline-offset:3px;
}
@media(max-width:540px){
html body #end .career-range-summary{padding:12px}
}
@media(prefers-contrast:more){
html body #end .career-range-summary,
html body #end .career-comparison-text{background:#091720;border-color:#d5f8e4}
}
/* stage: organising lap review controls */
html body #end .career-lap-tools{
display:flex;flex-wrap:wrap;gap:10px;align-items:end;margin:16px 0;
}
html body #end .career-lap-tools label{
display:flex;flex-direction:column;gap:6px;flex:1 1 180px;
color:#c7f8e5;font:700 10px/1.6 var(--apex-font,system-ui);
}
html body #end .career-lap-tools select{
width:100%;min-height:48px;box-sizing:border-box;padding:10px;
background:#091922;color:#edf8f5;border:1px solid #95cbb666;
border-radius:7px;font:12px/1.5 var(--apex-font,system-ui);touch-action:manipulation;
}
html body #end .career-lap-tools select:focus-visible{
outline:3px solid var(--apex-focus,#d4ffec);outline-offset:3px;
}
html body #end #round-actions .career-lap-tools button{
flex:0 1 auto;width:auto;min-height:48px;touch-action:manipulation;
}
html body #end .career-lap-view-status{
padding:10px 12px;background:#07172199;border-radius:7px;
}
html body #end .career-flying-summary{
border-left:2px solid #b9f3d7;padding:10px 12px;background:#b9f3d709;
}
@media(max-width:540px){
html body #end #round-actions .career-lap-tools button{flex-basis:100%}
}
/* stage: pairing saved finish selectors */
html body #end .career-journal-compare{
padding:16px;border:1px solid #95cbb638;border-radius:12px;
background:linear-gradient(145deg,#162e38,#0b1d28);
}
html body #end .career-journal-compare-heading{
display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;
}
html body #end .career-journal-compare-heading>div{flex:1 1 240px;min-width:0}
html body #end .career-journal-compare h3{
margin:0;font:800 11px/1.6 var(--apex-font,system-ui);
letter-spacing:1px;color:#d7f9e5;
}
html body #end .career-journal-compare-heading p{
margin:6px 0 0;font:11px/1.7 var(--apex-font,system-ui);color:#b7ced6;
}
html body #end #round-actions .career-journal-compare-heading button{
flex:0 1 auto;width:auto;min-height:48px;touch-action:manipulation;
}
html body #end .career-journal-compare-body[hidden]{display:none}
html body #end .career-journal-compare-body{margin-top:14px;border-top:1px solid #95cbb629}
html body #end .career-compare-settings{
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 0 14px;
}
html body #end .career-compare-settings .career-journal-filter{
display:flex;flex-direction:column;align-items:stretch;gap:8px;min-width:0;
}
html body #end .career-compare-settings select{flex:0 0 auto;width:100%}
html body #end .career-compare-output .career-attempt-review{
width:100%;box-sizing:border-box;background:#081a2399;
}
html body #end .career-compare-output .career-compare-objectives{
border-top:1px solid #95cbb633;padding-top:12px;color:#d4efdf;
}
@media(max-width:600px){
html body #end .career-compare-settings{grid-template-columns:1fr}
html body #end #round-actions .career-journal-compare-heading button{flex-basis:100%}
html body #end .career-journal-compare{padding:12px}
}
@media(prefers-contrast:more){
html body #end .career-journal-compare{background:#091720;border-color:#a8c4d1}
html body #end .career-journal-compare-heading p{color:#edf8f5}
}

/* stage: presenting paired lap differences */
html body #end .career-selected-laps{
margin-top:18px;padding-top:16px;border-top:1px solid #95cbb638;
}
html body #end .career-selected-laps h4{
margin:0 0 10px;color:#d7f9e5;
font:800 10px/1.6 var(--apex-font,system-ui);letter-spacing:.8px;
}
html body #end .career-selected-laps .career-classification th:first-child{
width:10%;
}
html body #end .career-selected-laps td[data-pace="faster"]{color:#b9f3d7}
html body #end .career-selected-laps td[data-pace="slower"]{color:#ffcf96}
html body #end .career-selected-laps td small{
display:block;margin-top:3px;color:#b7ced6;
font:10px/1.5 var(--apex-font,system-ui);
}
html body #end .career-selected-laps caption{text-align:left}
/* stage: reading cumulative lap differences */
html body #end .career-selected-laps .career-lap-table-scroll{
width:100%;overflow-x:auto;overscroll-behavior-x:contain;
touch-action:pan-x pan-y;border:1px solid #95cbb629;border-radius:8px;
}
html body #end .career-selected-laps .career-lap-table-scroll:focus-visible{
outline:3px solid var(--apex-focus,#d4ffec);outline-offset:3px;
}
/* stage: spacing relative lap changes */
html body #end .career-selected-laps .career-lap-table-scroll table{
min-width:690px;
}
html body #end .career-selected-laps .career-lap-table-scroll th:first-child{
width:8%;
}
html body #end .career-selected-laps .career-lap-table-scroll td:last-child{
font-weight:750;background:#95cbb608;
}
html body #end .career-selected-laps .career-gap-note{
padding:10px 12px;border-left:2px solid #95cbb666;
background:#07172166;line-height:1.7;
}
@media(prefers-contrast:more){
html body #end .career-selected-laps td[data-pace="faster"]{color:#caffdf}
html body #end .career-selected-laps td[data-pace="slower"]{color:#ffe0b8}
html body #end .career-selected-laps .career-gap-note{border-color:#d5f8e4}
}
@media(max-width:540px){
html body #end .career-selected-laps .career-classification :is(th,td){
padding:8px 3px;font-size:10px;
}
html body #end .career-selected-laps td small{font-size:9px}
}

/* stage: refining journal browsing controls */
html body #end .career-journal-tools{
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;
}
html body #end .career-journal-tools .career-journal-filter{
min-width:0;display:flex;flex-direction:column;align-items:stretch;gap:8px;
}
html body #end .career-journal-tools .career-journal-filter select{
flex:0 0 auto;width:100%;min-height:48px;
}
html body #end .career-journal-tools .career-journal-filter label{
font-size:10px;letter-spacing:.7px;
}
/* stage: resetting journal filters accessibly */
html body #end #round-actions .career-journal-reset{
grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;
min-width:0;
}
html body #end #round-actions .career-journal-reset button{
flex:0 1 auto;width:auto;min-height:48px;touch-action:manipulation;
}
html body #end .career-journal-reset p{
flex:1 1 220px;margin:0;color:#b7ced6;
font:11px/1.7 var(--apex-font,system-ui);
}
/* stage: highlighting retained finish records */
html body #end .career-journal-records{
display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;
}
html body #end .career-journal-record{
display:inline-block;padding:5px 8px;border:1px solid #b9f3d759;
border-radius:6px;background:#b9f3d710;color:#d5f8e4;
font:750 9px/1.6 var(--apex-font,system-ui);letter-spacing:.45px;
overflow-wrap:anywhere;
}
@media(max-width:540px){
html body #end #round-actions .career-journal-reset button{flex-basis:100%}
}
@media(prefers-contrast:more){
html body #end .career-journal-record{background:#091720;border-color:#d5f8e4}
html body #end .career-journal-reset p{color:#edf8f5}
}
html body #end .career-journal-count{
margin:0;color:#c7f8e5;font:650 12px/1.65 var(--apex-font,system-ui);
}
html body #end #round-actions .career-journal-chapter-actions{
display:flex;flex-wrap:wrap;align-items:center;gap:12px;
}
html body #end #round-actions .career-journal-chapter-actions button{
flex:0 1 auto;width:auto;min-height:48px;
}
html body #end .career-journal-chapter-actions p{
flex:1 1 220px;margin:0;color:#b7ced6;
font:11px/1.7 var(--apex-font,system-ui);
}
html body #end .career-brief h3:focus{
outline:2px solid var(--apex-focus,#d4ffec);outline-offset:5px;
}
@media(max-width:760px){
html body #end .career-journal-tools{grid-template-columns:1fr}
html body #end .career-journal-tools .career-journal-filter{padding:11px}
}
@media(max-width:540px){
html body #end #round-actions .career-journal-chapter-actions button{
flex-basis:100%;
}
}
@media(prefers-contrast:more){
html body #end .career-journal-chapter-actions p{color:#edf8f5}
}

/* stage: browsing completed story attempts */
html body #end .career-journal-filter{
display:flex;flex-wrap:wrap;align-items:center;gap:12px;
padding:14px;border:1px solid #95cbb638;border-radius:10px;background:#10232e;
}
html body #end .career-journal-filter label{
font:750 11px/1.5 var(--apex-font,system-ui);color:#c7f8e5;
}
html body #end .career-journal-filter select{
flex:1 1 210px;min-width:0;max-width:100%;min-height:48px;
padding:10px;border:1px solid #95cbb666;border-radius:7px;
background:#091922;color:#edf8f5;font:12px/1.5 var(--apex-font,system-ui);
touch-action:manipulation;
}
html body #end .career-journal-filter select:focus-visible{
outline:3px solid var(--apex-focus,#d4ffec);outline-offset:3px;
}
html body #end .career-journal-list{display:grid;gap:10px}
html body #end .career-journal-entry{
display:flex;flex-wrap:wrap;align-items:center;gap:12px;
padding:16px;background:#102630;border:1px solid #95cbb633;border-radius:10px;
}
html body #end .career-journal-copy{flex:1 1 250px;min-width:0}
html body #end .career-journal-copy h4{
margin:5px 0;color:#e0f5e9;font:750 15px/1.5 var(--apex-font,system-ui);
}
html body #end .career-journal-copy p{
margin:5px 0;color:#b7ced6;font:11px/1.7 var(--apex-font,system-ui);
font-variant-numeric:tabular-nums;
}
html body #end #round-actions .career-journal-entry button{
flex:0 1 auto;min-height:48px;width:auto;
}
html body #end .career-brief-review{
margin-top:18px;padding-top:14px;border-top:1px solid #95cbb638;
}
html body #end .career-brief-review .career-next-focus{
margin:10px 0;padding:13px;gap:10px;
}
html body #end .career-brief-review .career-next-focus h3{font-size:16px}
html body #end .career-brief-review .career-focus-symbol{width:28px;height:28px}
@media(max-width:540px){
html body #end .career-journal-entry{padding:12px}
html body #end #round-actions .career-journal-entry button{flex-basis:100%}
}
@media(prefers-contrast:more){
html body #end .career-journal-entry,
html body #end .career-journal-filter{background:#091720;border-color:#a8c4d1}
html body #end .career-journal-copy p{color:#edf8f5}
}

/* stage: focusing the next attempt */
html body #end .career-next-focus{
display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;
padding:18px;border:1px solid #b9f3d749;border-left:3px solid #b9f3d7;
border-radius:10px;background:linear-gradient(120deg,#1b3c32,#10232e);
}
html body #end .career-next-focus .career-focus-symbol{
display:grid;place-items:center;align-self:start;width:38px;height:38px;
border:1px solid #b9f3d733;border-radius:50%;color:#c7f8e5;
font:800 20px/1 var(--apex-font,system-ui);
}
html body #end .career-next-focus h3{
margin:7px 0;font:800 17px/1.4 var(--apex-font,system-ui);color:#e4f9ee;
}
html body #end .career-next-focus p{
margin:6px 0;font:12px/1.75 var(--apex-font,system-ui);color:#bed4d9;
}
html body #end .career-next-focus .career-focus-evidence{
font-size:11px;color:#efd3a4;
}
@media(max-width:540px){
html body #end .career-next-focus{padding:14px;gap:10px}
html body #end .career-next-focus h3{font-size:15px}
}
@media(prefers-contrast:more){
html body #end .career-next-focus{background:#091720;border-color:#b9f3d7}
html body #end .career-next-focus p{color:#edf8f5}
}

/* stage: reviewing progress across retries */
html body #end .career-attempt-review{
padding:clamp(14px,2vw,22px);border:1px solid #95cbb638;
border-radius:12px;background:linear-gradient(130deg,#153329,#0c202c);
}
html body #end .career-attempt-review h3{
margin:0 0 8px;font:800 11px/1.6 var(--apex-font,system-ui);
letter-spacing:1.3px;color:#d4f7e4;
}
html body #end .career-attempt-review p{
margin:8px 0 0;font:11px/1.75 var(--apex-font,system-ui);color:#b6ced4;
}
html body #end .career-attempt-grid{
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px;margin:16px 0;
}
html body #end .career-attempt-grid>div{
min-width:0;padding:14px;border:1px solid #accbd22a;
border-radius:8px;background:#07172199;
}
html body #end .career-attempt-grid dt{
font:700 9px/1.6 var(--apex-font,system-ui);letter-spacing:.8px;color:#b1c8d0;
}
html body #end .career-attempt-grid dd{
margin:7px 0 5px;font:800 clamp(16px,2vw,23px)/1.3 var(--apex-font,system-ui);
color:#d6e6e8;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;
}
html body #end .career-attempt-grid small{
display:block;font:11px/1.6 var(--apex-font,system-ui);
color:#b4ccd2;font-variant-numeric:tabular-nums;
}
html body #end .career-attempt-grid [data-trend="lower"] dd{color:#b9f3d7}
html body #end .career-attempt-grid [data-trend="higher"] dd{color:#ffcf96}
@media(max-width:600px){
html body #end .career-attempt-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
html body #end .career-attempt-grid>div{padding:11px}
}
@media(max-width:350px){
html body #end .career-attempt-grid{grid-template-columns:1fr}
}
@media(prefers-contrast:more){
html body #end .career-attempt-review,
html body #end .career-attempt-grid>div{background:#091720;border-color:#a8c4d1}
html body #end .career-attempt-review p,
html body #end .career-attempt-grid small{color:#edf8f5}
}

/* stage: comparing completed lap pace */
html body #end .career-lap-visual{
margin:0 0 16px;padding:16px;border:1px solid #95cbb638;
border-radius:10px;background:#0b2029;
}
html body #end .career-lap-visual figcaption{
font:750 11px/1.6 var(--apex-font,system-ui);color:#d7f9e5;
}
html body #end .career-lap-visual ol{
list-style:none;margin:14px 0 0;padding:0;display:grid;gap:14px;
}
html body #end .career-lap-bar-heading{
display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;
font:600 11px/1.6 var(--apex-font,system-ui);font-variant-numeric:tabular-nums;
color:#c6dbe0;margin-bottom:5px;
}
html body #end .career-lap-bar-track{
height:10px;border-radius:3px;background:#030f17;overflow:hidden;
}
html body #end .career-lap-bar-fill{
display:block;height:100%;background:#769bb0;border-radius:3px;
}
html body #end .career-lap-visual li[data-fastest="true"] .career-lap-bar-fill{
background:#b9f3d7;
}
html body #end .career-lap-visual li[data-fastest="true"] .career-lap-bar-heading{
color:#caffdf;
}
html body #end .career-lap-visual p{
margin:12px 0 0;font:11px/1.65 var(--apex-font,system-ui);color:#abc5ce;
}
/* stage: opening the story paddock */
html body #end[data-screen^="career"]{
inset:0;padding:clamp(18px,4vw,48px) + 0px;padding-top:calc(clamp(18px,4vw,48px) + env(safe-area-inset-top,0px));
border:0;border-radius:0;text-align:left;align-content:normal;
background:radial-gradient(ellipse at 95% 0%,#28584665,transparent 52%),linear-gradient(150deg,#08141cf7,#10212bf7 65%,#112820fa);
box-shadow:none;color:#edf5ef;overflow:auto;touch-action:pan-y;scroll-padding:24px;
}
html body #end[data-screen^="career"]>.finish-stripe,
html body #end[data-screen^="career"]>.finish-caption{display:none}
html body #end[data-screen^="career"] h2#race-dialog-title{
font-size:clamp(30px,5.8vw,70px);line-height:.98;letter-spacing:-.055em;text-transform:uppercase;
margin:0 0 16px;font-weight:900;text-wrap:balance;
}
html body #end[data-screen^="career"]>#result{
text-align:left;font-size:13px;line-height:1.7;color:#adbec8;margin:0 0 20px;max-width:80ch;
}
html body #end[data-screen^="career"] #round-actions{
display:flex;flex-wrap:wrap;justify-content:flex-start;gap:12px;margin:0;width:100%;
}
html body #end[data-screen^="career"] #series-note{
color:#9fb8c3;border-top:1px solid #c6e1d923;margin-top:24px;padding-top:14px;line-height:1.7;
}
html body #end #round-actions .career-block{width:100%;flex:0 0 100%;min-width:0}
html body #end #round-actions .career-eyebrow{
display:block;font:800 10px/1.5 var(--apex-font,system-ui);letter-spacing:1.8px;text-transform:uppercase;color:#9be5c5;
}
.career-muted{color:#a3bac5}
.career-topline{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-bottom:16px}
.career-tag{border:1px solid #bbdccc35;border-radius:4px;padding:5px 8px;font:750 9px/1.5 system-ui;letter-spacing:1px;color:#d7e7dd;text-transform:uppercase}
.career-session{font:10px/1.5 system-ui;color:#9fb8c3}
.career-hero{display:grid;grid-template-columns:1.2fr 1fr;gap:24px;align-items:center;padding:24px;background:linear-gradient(120deg,#183b32,#172d39);border:1px solid #9dddbd40;border-radius:16px;overflow:hidden;position:relative}
.career-hero:after{content:"";position:absolute;width:220px;height:220px;right:-110px;bottom:-160px;border:45px solid #b6ebba14;border-radius:50%;pointer-events:none}
.career-hero h3{font-size:clamp(24px,3vw,40px);line-height:1.05;letter-spacing:-1px;margin:12px 0}
.career-hero p{font-size:13px;line-height:1.8;color:#c4d6d2;margin:0}
.career-poster{width:100%;height:190px;display:block}
.career-progress{display:grid;grid-template-columns:1fr auto;gap:8px 16px;align-items:end;margin-top:18px}
.career-progress strong{font-size:12px;color:#d9f6e5;letter-spacing:.5px}
.career-progress span{font:11px/1.5 system-ui;color:#b8cdcc}
.career-progress progress{appearance:none;width:100%;height:5px;border:0;background:#031018;border-radius:5px;grid-column:1/-1;overflow:hidden}
.career-progress progress::-webkit-progress-bar{background:#031018}
.career-progress progress::-webkit-progress-value{background:#a9ecc5}
.career-progress progress::-moz-progress-bar{background:#a9ecc5}
html body #end #round-actions .career-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0}
html body #end #round-actions .career-tabs button{
flex:0 1 auto;min-height:44px;padding:10px 16px;font-size:10px;letter-spacing:1px;background:#142633;border-radius:7px;
}
html body #end #round-actions .career-tabs button[aria-pressed=true]{background:#a9ecc5;color:#102c24;border-color:#bdf4d6;box-shadow:none}
html body #end #round-actions .career-primary{
background:#b8edb1;border-color:#d4ffcd;color:#142619;font-size:12px;letter-spacing:1px;min-height:52px;border-radius:8px;box-shadow:0 4px 20px #0002;
}
html body #end #round-actions .career-primary:not(:disabled):hover{background:#d0ffc5;color:#102411}
html body #end #round-actions .career-primary:not(:disabled):active{background:#a5d89f;color:#102411}
html body #end #round-actions .career-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:12px 0 0}
.career-heading h3{font-size:12px;letter-spacing:1.5px;font-weight:800;margin:0;text-transform:uppercase}
.career-heading span{font-size:10px;color:#9fb8c3}

/* stage: connecting campaign chapter cards */
html body #end #round-actions .career-chapters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
html body #end #round-actions button.career-chapter{
display:flex;flex-direction:column;align-items:stretch;text-align:left;justify-content:flex-start;
width:100%;min-width:0;min-height:174px;padding:13px;gap:7px;border-radius:10px;background:#112530;border:1px solid #aac9d02a;position:relative;box-shadow:none;
}
html body #end #round-actions button.career-chapter[aria-pressed=true]{border-color:#b8edb1;background:#1e3d32;box-shadow:inset 0 3px #b8edb1}
html body #end #round-actions button.career-chapter:disabled{opacity:.55;background:#0b1b25;color:#93a9b3}
.career-chapter .career-node-top{display:flex;justify-content:space-between;gap:5px;align-items:center;font:800 9px/1.4 system-ui;letter-spacing:1px;color:#a9e3c5}
.career-chapter svg{width:100%;height:62px;opacity:.85;display:block}
html body #end #round-actions .career-chapter strong{font:800 12px/1.35 system-ui;letter-spacing:.1px;color:#eef8ef}
html body #end #round-actions .career-chapter small{font:10px/1.5 system-ui;color:#a9bfcb;margin:0}
html body #end #round-actions .career-chapter .career-stars{color:#f8d18e;font-size:11px;letter-spacing:2px;white-space:nowrap}
.career-chapter .career-act{font-size:8px;color:#90afa8;text-transform:uppercase;letter-spacing:.8px}

/* stage: introducing crew and objectives */
.career-brief{display:grid;grid-template-columns:1fr 1fr;gap:18px;background:#10222b;border:1px solid #a8c7d22c;padding:22px;border-radius:12px}
.career-brief h3{margin:8px 0 10px;font-size:24px;letter-spacing:-.6px;line-height:1.15;color:#ecf5ed}
.career-brief p{color:#b7cdd2;font:12px/1.8 system-ui;margin:8px 0}
.career-conditions{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0}
.career-conditions span{font:750 9px/1.5 system-ui;letter-spacing:.6px;border:1px solid #abc8d02b;border-radius:5px;padding:5px 7px;color:#c9dce2}
.career-goals{list-style:none;padding:0;margin:9px 0 14px;display:grid;gap:8px}
.career-goals li{display:flex;gap:9px;align-items:flex-start;font:12px/1.6 system-ui;color:#d7e5e6;border-bottom:1px solid #bdd3d612;padding-bottom:7px}
.career-goals li:before{content:"◇";color:#9cbeb9;font-size:15px;line-height:1.3}
.career-goals li[data-met=true]:before{content:"◆";color:#b8edb1}
.career-goals li[data-met=false]:before{content:"×";color:#eeaa97}
.career-goals li[data-met=false]{color:#d3b9b1}
.career-goals li[data-met=true]{color:#d6f4d9}
.career-goals small{display:block;color:#94b0ba;font-size:10px}
.career-dialogue{display:grid;gap:12px}
.career-quote{display:flex;align-items:flex-start;gap:12px;padding:13px 0;border-top:1px solid #bcd4ce1c}
.career-portrait{width:56px;height:64px;flex:0 0 56px;overflow:hidden;background:#142c35;border-radius:8px;border:1px solid #a8cfbd38}
.career-portrait svg{width:100%;height:100%;display:block}
.career-quote strong{display:block;font:800 10px/1.4 system-ui;letter-spacing:.9px;color:var(--crew-colour,#b8edb1)}
.career-quote blockquote{font:12px/1.7 system-ui;color:#d1e1df;margin:5px 0 0}
.career-quote small{font:9px/1.5 system-ui;letter-spacing:.6px;color:#99b1bc;display:block;margin-top:3px}
.career-tip{border-left:2px solid #e6bd80;padding:8px 12px;background:#e6bd8009;color:#d3c3a8!important;font-size:11px!important}
.career-crew-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.career-driver{padding:18px;border:1px solid #bbd5d42b;border-radius:10px;background:#122832;display:flex;gap:13px;align-items:flex-start}
.career-driver h3{font:850 15px/1.3 system-ui;letter-spacing:.4px;margin:0 0 6px;color:var(--crew-colour,#b8edb1)}
.career-driver p{font:11px/1.7 system-ui;color:#b8ccd2;margin:8px 0 0}
.career-driver .career-portrait{width:65px;height:77px;flex-basis:65px}
.career-driver small{font:800 9px/1.5 system-ui;letter-spacing:.8px;color:#99b9c3}
.career-awards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.career-award{padding:15px;border:1px dashed #b5cdd52b;border-radius:9px;background:#0c1b2599;color:#8ca6b2}
.career-award[data-earned=true]{background:#213a2d;border-style:solid;border-color:#b8edb148;color:#d5f2ce}
.career-award strong{font:800 11px/1.5 system-ui;letter-spacing:.5px;display:block}
.career-award p{font:11px/1.6 system-ui;margin:5px 0 0;color:inherit}
.career-award .career-seal{font-size:23px;line-height:1;display:block;margin-bottom:8px;color:#6c8d91}
.career-award[data-earned=true] .career-seal{color:#f3d293}
.career-session-note{font:11px/1.7 system-ui;color:#9db7c4;padding:10px 0}

/* stage: celebrating measured race results */
.career-result-banner{padding:22px;border:1px solid #b8edb155;border-radius:12px;background:linear-gradient(130deg,#234b35,#162c36);display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.career-result-banner .career-big-stars{font-size:clamp(28px,5vw,54px);letter-spacing:6px;color:#f6d397;white-space:nowrap}
.career-result-banner strong{display:block;font-size:18px;letter-spacing:-.2px;color:#edfae8}
.career-result-banner p{font:12px/1.6 system-ui;color:#bcd6ce;margin:6px 0 0}
.career-result-banner[data-passed=false]{border-color:#d8ac8060;background:linear-gradient(130deg,#47332b,#172a37)}
.career-result-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.career-result-stats div{padding:16px;background:#102632;border:1px solid #accbd22a;border-radius:9px}
.career-result-stats b{font:850 clamp(18px,2.5vw,30px)/1.25 system-ui;display:block;letter-spacing:-.8px;font-variant-numeric:tabular-nums;color:#e6f8eb}
.career-result-stats span{font:750 9px/1.5 system-ui;color:#98b5be;letter-spacing:1px;text-transform:uppercase}
.career-podium{display:grid;grid-template-columns:1fr 1.15fr 1fr;align-items:end;gap:10px}
.career-podium>div{border:1px solid #b2cdd231;background:#132b35;border-radius:10px 10px 3px 3px;padding:16px;text-align:center}
.career-podium>div:nth-child(2){padding-top:26px;border-top:3px solid #f4d295;background:#284234}
.career-podium>div:nth-child(3){padding-top:10px}
.career-podium .career-place{font:900 32px/1 system-ui;display:block;color:#abc7c4;letter-spacing:-2px;margin-bottom:9px}
.career-podium>div:nth-child(2) .career-place{color:#f4d295}
.career-podium strong{font-size:12px;letter-spacing:.8px;display:block;color:#e8f7ed}
.career-podium small{font:10px/1.5 system-ui;color:#a8c1c9}
.career-podium [data-you=true]{border-color:#bbf0c5}
.career-classification{width:100%;border-collapse:collapse;font:12px/1.5 system-ui;font-variant-numeric:tabular-nums}
.career-classification th{font-size:9px;letter-spacing:1px;color:#99b7c0;text-align:left;padding:10px;border-bottom:1px solid #b4d2d533}
.career-classification td{padding:10px;border-bottom:1px solid #b4d2d515;color:#c5d8de}
.career-classification tr[data-you=true] td{background:#9cdeaa12;color:#d6facf;font-weight:750}
.career-classification td:last-child,.career-classification th:last-child{text-align:right}
html body #end #round-actions .career-exit{flex-basis:100%;text-align:left;background:#1a3535;color:#c7f8e5;border-color:#84e2bf50}
html body #end #round-actions button:focus-visible{outline:3px solid #deffd9;outline-offset:3px}

/* stage: keeping goals beside driving */
#career-race-hud{margin-top:7px;max-width:680px;pointer-events:none;font:600 10px/1.5 system-ui;color:#d9eedf}
#career-race-hud[hidden]{display:none}
#career-race-hud .career-live-goal{border-left:2px solid #b8edb1;padding-left:8px;text-shadow:0 1px 4px #06121b}
#career-race-hud .career-live-tag{color:#b8edb1;font-weight:850;letter-spacing:.7px}
#career-race-hud .career-live-radio{display:flex;gap:7px;margin-top:4px;color:#bacdcf;font:10px/1.5 system-ui}
#career-race-hud .career-live-radio strong{font-size:9px;letter-spacing:.5px;color:#e7d39e;white-space:nowrap}
#career-race-hud .career-live-radio[hidden]{display:none}
#career-race-hud progress{appearance:none;display:block;width:100%;height:2px;border:0;background:#c2e0d21b;margin-top:5px}
#career-race-hud progress::-webkit-progress-bar{background:#c2e0d21b}
#career-race-hud progress::-webkit-progress-value{background:#b8edb1}
#career-race-hud progress::-moz-progress-bar{background:#b8edb1}
@media(max-width:800px){
.career-crew-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.career-hero{gap:16px;padding:18px}
.career-brief{padding:17px;gap:16px}
html body #end #round-actions .career-chapters{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:540px){
html body #end[data-screen^="career"]{padding:20px 14px}
html body #end[data-screen^="career"] h2#race-dialog-title{font-size:36px}
.career-hero{grid-template-columns:1fr}
.career-hero h3{font-size:29px}
.career-poster{height:120px}
.career-brief{grid-template-columns:1fr}
.career-crew-grid{grid-template-columns:1fr}
.career-awards{grid-template-columns:repeat(2,minmax(0,1fr))}
.career-result-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
.career-podium>div{padding:12px 6px}
.career-podium strong{font-size:10px}
.career-podium small{font-size:9px}
html body #end #round-actions button.career-chapter{min-height:170px;padding:11px}
.career-heading{flex-wrap:wrap}
.career-result-banner{padding:16px;gap:12px}
#career-race-hud{font-size:9px;margin-top:5px}
#career-race-hud .career-live-radio{font-size:9px}
}
@media(orientation:landscape) and (max-height:600px){
html body #end[data-screen^="career"]{padding:20px}
html body #end[data-screen^="career"] h2#race-dialog-title{font-size:36px}
.career-poster{height:140px}
#career-race-hud{margin-top:3px;font-size:9px}
#career-race-hud .career-live-radio{font-size:9px;margin-top:2px}
}
@media(prefers-reduced-motion:reduce){
html body #end[data-screen^="career"] button{transition:none}
}

/* stage: harmonising the story interface */
html body #end[data-screen^="career"]{
padding-left:calc(clamp(14px,4vw,48px) + env(safe-area-inset-left,0px));
padding-right:calc(clamp(14px,4vw,48px) + env(safe-area-inset-right,0px));
padding-bottom:calc(clamp(20px,4vw,48px) + env(safe-area-inset-bottom,0px));
font-family:var(--apex-font);
scrollbar-gutter:stable;
}
html body #end[data-screen^="career"] h2#race-dialog-title{line-height:1.06}
html body #end[data-screen^="career"] #round-actions{
--career-gap:12px;gap:var(--career-gap);
}
html body #end[data-screen^="career"] :is(
.career-tag,.career-session,.career-progress span,.career-conditions span,
.career-goals li,.career-quote blockquote,.career-driver p,.career-award p,
.career-session-note,.career-classification,.career-result-stats b
){font-family:var(--apex-font)}
html body #end[data-screen^="career"] :is(
.career-hero,.career-brief,.career-driver,.career-award,
.career-result-banner,.career-result-stats div
){border-radius:var(--apex-panel-radius);min-width:0}
html body #end[data-screen^="career"] :is(
.career-hero>div,.career-brief>div,.career-driver>div,.career-quote>div
){min-width:0}
html body #end[data-screen^="career"] :is(p,blockquote,small){
overflow-wrap:anywhere;
}
html body #end[data-screen^="career"] .career-heading{
align-items:baseline;flex-wrap:wrap;row-gap:5px;
}
html body #end[data-screen^="career"] .career-heading span{
color:var(--apex-muted);line-height:1.5;
}

/* stage: making selection consistently visible */
html body #end[data-screen^="career"] #round-actions .career-tabs button{
min-height:48px;border-radius:9px;
}
html body #end[data-screen^="career"] #round-actions .career-tabs button[aria-pressed=true]{
background:var(--apex-mint-bright);border-color:var(--apex-mint-bright);
color:#102c24;box-shadow:inset 0 -3px 0 #326950;
}
html body #end[data-screen^="career"] #round-actions .career-primary{
background:var(--apex-mint-bright);border-color:#d4ffec;
color:#102c24;border-radius:10px;
}
html body #end[data-screen^="career"] #round-actions button.career-chapter[aria-pressed=true]{
background:#1e3d32;border-color:var(--apex-mint-bright);
box-shadow:inset 0 3px var(--apex-mint-bright);
}
html body #end[data-screen^="career"] #round-actions button.career-chapter:disabled{
opacity:1;background:#0c1c26;border:1px dashed #92aeb34d;
color:#afc2ca;box-shadow:none;
}
html body #end[data-screen^="career"] #round-actions button.career-chapter:disabled :is(strong,small,.career-node-top,.career-act){
color:#afc2ca;
}
html body #end[data-screen^="career"] #round-actions button.career-chapter:disabled svg{opacity:.4}
html body #end[data-screen^="career"] #round-actions button:focus-visible{
outline:3px solid var(--apex-focus);outline-offset:3px;
}
@media(hover:hover) and (pointer:fine){
html body #end[data-screen^="career"] #round-actions .career-tabs button[aria-pressed=true]:not(:active):hover,
html body #end[data-screen^="career"] #round-actions .career-primary:not(:disabled):not(:active):hover{
background:#e0fff0;color:#102c24;border-color:#e0fff0;
}
html body #end[data-screen^="career"] #round-actions button.career-chapter[aria-pressed=true]:not(:disabled):not(:active):hover{
background:#295441;border-color:#e0fff0;
box-shadow:inset 0 3px var(--apex-mint-bright);
}
}
html body #end[data-screen^="career"] #round-actions :is(.career-primary,.career-tabs button[aria-pressed=true]):not(:disabled):active{
background:#a5dbc2;color:#102c24;transform:none;
box-shadow:inset 0 0 0 2px #fff,inset 0 3px 8px #07101933;
}

/* stage: keeping debrief tables readable */
html body #end[data-screen^="career"] .career-classification{
table-layout:fixed;width:100%;font-variant-numeric:tabular-nums;
}
html body #end[data-screen^="career"] .career-classification :is(th,td){
overflow-wrap:anywhere;vertical-align:top;line-height:1.6;
}
html body #end[data-screen="career-result"] .career-classification :is(th,td):first-child{width:12%}
html body #end[data-screen^="career"] .career-classification tbody tr:nth-child(even):not([data-you=true]){
background:#a8c4d105;
}
html body #end[data-screen^="career"] .career-result-stats span{color:var(--apex-muted)}
html body #end[data-screen^="career"] .career-result-stats b{
margin-top:5px;font-size:clamp(17px,2.5vw,30px);
letter-spacing:-.5px;overflow-wrap:anywhere;
}
@media(max-width:540px){
html body #end[data-screen^="career"]{padding-top:calc(20px + env(safe-area-inset-top,0px))}
html body #end[data-screen^="career"] #round-actions{--career-gap:10px}
html body #end[data-screen^="career"] .career-classification :is(th,td){padding:9px 6px;font-size:11px}
html body #end[data-screen^="career"] .career-classification th{font-size:9px}
html body #end[data-screen^="career"] .career-result-stats div{padding:13px}
}
@media(orientation:landscape) and (max-height:600px){
html body #end[data-screen^="career"]{padding-top:calc(16px + env(safe-area-inset-top,0px))}
}
@media(prefers-contrast:more){
html body #end[data-screen^="career"]{background:#091720}
html body #end[data-screen^="career"] :is(p,blockquote,small,.career-muted){color:#e0e9ed}
html body #end[data-screen^="career"] :is(.career-hero,.career-brief,.career-driver,.career-award){
border-color:#a8c4d1;
}
}