:root {
  --ink: #edf7f4;
  --muted: #a9beb9;
  --surface: #101b20;
  --surface-raised: #18282f;
  --surface-soft: #21353d;
  --line: #35505a;
  --accent: #61dfbd;
  --accent-deep: #0e725d;
  --signal: #f0b35c;
  --danger: #ff8f8f;
  --focus: #ffdd78;
  --shadow: 0 22px 55px rgb(0 0 0 / 25%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: #091216;
}

html[data-theme="light"] {
  --ink: #102127;
  --muted: #4d646b;
  --surface: #f8fbfa;
  --surface-raised: #ffffff;
  --surface-soft: #eaf3f0;
  --line: #b9cdc7;
  --accent: #086d58;
  --accent-deep: #d2f4e8;
  --signal: #9a5507;
  --danger: #a52626;
  --focus: #7b4f00;
  --shadow: 0 22px 55px rgb(29 57 63 / 14%);
  background: #eaf1ef;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 85% 0%, rgb(54 107 105 / 25%), transparent 34rem), var(--surface); color: var(--ink); line-height: 1.55; }
a { color: var(--accent); text-underline-offset: .2em; }
a:hover { text-decoration-thickness: .14em; }
button, input, select, textarea { font: inherit; }
button, .primary-button, .secondary-button { min-height: 2.75rem; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.skip-link { position: fixed; inset: .75rem auto auto .75rem; padding: .65rem 1rem; background: var(--ink); color: var(--surface); transform: translateY(-180%); z-index: 20; }
.skip-link:focus { transform: translateY(0); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.site-header { min-height: 4.5rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .85rem clamp(1rem, 4vw, 4.5rem); border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 88%, transparent); }
.site-header nav { display: flex; align-items: center; flex-wrap: wrap; gap: 1.1rem; }
.site-header nav a { color: var(--ink); text-decoration: none; }
.wordmark { display: inline-flex; align-items: center; gap: .65rem; min-width: 0; color: var(--ink); text-decoration: none; font-weight: 780; letter-spacing: -.02em; }
.wordmark-logo { display: block; flex: 0 0 auto; width: 3.25rem; height: 3.25rem; object-fit: contain; border-radius: .45rem; }
.range-logo { display: block; width: min(100%, 22rem); height: auto; aspect-ratio: 1; object-fit: contain; margin: 0 auto 1.5rem; border-radius: .7rem; }
.range-logo-compact { width: min(100%, 11rem); margin-inline: 0; }
.quiet-button { border: 1px solid var(--line); border-radius: .55rem; padding: .45rem .75rem; color: var(--ink); background: transparent; cursor: pointer; }
main { width: min(94rem, 100%); margin: 0 auto; }
.hero { min-height: calc(100vh - 11rem); align-items: center; padding-block: clamp(3rem, 10vw, 8rem); }
.section-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(19rem, .65fr); gap: clamp(2rem, 6vw, 7rem); padding-inline: clamp(1rem, 5vw, 5rem); }
.hero h1 { margin: .4rem 0 1.25rem; max-width: 14ch; font-size: clamp(3rem, 8vw, 7.5rem); line-height: .91; letter-spacing: -.065em; }
.eyebrow { margin: 0 0 .55rem; color: var(--accent); font-size: .78rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.lede { max-width: 68ch; color: var(--muted); font-size: clamp(1.05rem, 2vw, 1.3rem); }
.button-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.primary-button, .secondary-button { display: inline-flex; justify-content: center; align-items: center; border-radius: .6rem; padding: .7rem 1rem; font-weight: 750; text-decoration: none; cursor: pointer; }
.primary-button { border: 1px solid var(--accent); background: var(--accent); color: #071c18; }
.secondary-button { border: 1px solid var(--line); background: var(--surface-soft); color: var(--ink); }
button:disabled { cursor: not-allowed; opacity: .55; }
.brief-card, .panel, .rank-card { border: 1px solid var(--line); border-radius: 1rem; background: linear-gradient(145deg, var(--surface-raised), var(--surface)); box-shadow: var(--shadow); }
.brief-card { padding: clamp(1.5rem, 4vw, 2.5rem); }
.brief-card h2 { font-size: 2rem; margin: 1.25rem 0 .5rem; }
.status-pill, .sync-state { color: var(--muted); font-size: .85rem; }
.status-pill span, .sync-state span { color: var(--accent); }
.brief-stats { display: grid; gap: .8rem; margin: 1.75rem 0 0; }
.brief-stats div { display: flex; justify-content: space-between; gap: 1rem; padding-top: .7rem; border-top: 1px solid var(--line); }
.brief-stats dt { color: var(--muted); }
.brief-stats dd { margin: 0; text-align: right; font-weight: 700; }
.content-section { padding: clamp(2.5rem, 6vw, 5rem) clamp(1rem, 5vw, 5rem); border-top: 1px solid var(--line); }
.content-section h2 { margin: .25rem 0 1.5rem; font-size: clamp(1.8rem, 4vw, 3.2rem); letter-spacing: -.035em; }
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.card-grid article { padding: 1.4rem; border: 1px solid var(--line); border-radius: .8rem; background: var(--surface-raised); }
.card-grid h3 { margin-top: 0; }
.card-grid p { color: var(--muted); }
.site-footer { padding: 1.5rem clamp(1rem, 5vw, 5rem); border-top: 1px solid var(--line); color: var(--muted); }
.form-shell { display: grid; grid-template-columns: minmax(18rem, .75fr) minmax(22rem, 1fr); gap: clamp(2rem, 7vw, 7rem); align-items: start; padding: clamp(3rem, 9vw, 7rem) clamp(1rem, 6vw, 7rem); }
.form-shell.compact { max-width: 70rem; margin-inline: auto; }
.form-shell h1, .dashboard-heading h1, .mission-header h1 { margin: .25rem 0 1rem; font-size: clamp(2.4rem, 5vw, 4.8rem); letter-spacing: -.055em; line-height: 1; }
.stacked-form { display: grid; gap: 1.15rem; padding: clamp(1.25rem, 4vw, 2.25rem); border: 1px solid var(--line); border-radius: 1rem; background: var(--surface-raised); }
[hidden] { display: none !important; }
.stacked-form label { display: grid; gap: .42rem; font-weight: 700; }
.stacked-form input, .stacked-form select, .stacked-form textarea, .terminal-toolbar select { width: 100%; border: 1px solid var(--line); border-radius: .48rem; padding: .7rem .8rem; background: var(--surface); color: var(--ink); }
.check-row { grid-template-columns: auto 1fr; align-items: start; font-weight: 500 !important; }
.check-row input { width: 1.2rem; height: 1.2rem; margin-top: .15rem; }
.field-help { color: var(--muted); font-size: .84rem; font-weight: 400; }
.form-status[data-kind="error"] { color: var(--danger); }
.dashboard-heading, .mission-header { display: flex; justify-content: space-between; align-items: end; gap: 2rem; padding: clamp(2.5rem, 6vw, 5rem) clamp(1rem, 5vw, 5rem); }
.rank-card { min-width: 17rem; display: grid; gap: .4rem; padding: 1.25rem; }
.rank-card span { color: var(--muted); }
.rank-card strong { font-size: 1.4rem; }
progress { width: 100%; accent-color: var(--accent); }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 1rem; }
.mission-list { display: grid; gap: .75rem; }
.mission-card { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center; padding: 1rem; border: 1px solid var(--line); border-radius: .75rem; background: var(--surface-raised); }
.mission-number { display: grid; place-items: center; width: 3rem; aspect-ratio: 1; border: 1px solid var(--accent); border-radius: 50%; color: var(--accent); font-weight: 800; }
.mission-card h3 { margin: 0; }
.mission-card p { margin: .2rem 0 0; color: var(--muted); }
.split-section { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.panel { padding: 1.25rem; box-shadow: none; }
.panel h2 { font-size: 1.3rem; margin: 0 0 1rem; }
.stacked-form { align-content: start; }
.stacked-form label:has(> input[type="checkbox"]) { display: flex; align-items: center; gap: .75rem; font-weight: 500; }
.stacked-form input[type="checkbox"] { width: 1.2rem; height: 1.2rem; flex: 0 0 1.2rem; accent-color: var(--accent); }
main button:not([class]) { border: 1px solid var(--line); border-radius: .6rem; padding: .65rem 1rem; background: var(--surface-soft); color: var(--ink); cursor: pointer; }
main form button[type="submit"]:not([class]) { background: var(--accent); color: #071c18; border-color: var(--accent); font-weight: 750; }
main select { max-width: 100%; border: 1px solid var(--line); border-radius: .45rem; padding: .55rem .7rem; background: var(--surface); color: var(--ink); }
.mission-card label { display: inline-flex; align-items: center; gap: .5rem; margin-top: .65rem; font-size: .85rem; }
.mission-number { width: 4.5rem; text-align: center; font-size: .78rem; overflow-wrap: anywhere; }
#campaign-section, #admin-resource { margin: .5rem 0 1.25rem; }
#admin-records, #admin-users, #admin-awards { display: grid; gap: .75rem; margin-top: 1rem; overflow-wrap: anywhere; }
#admin-records p { margin: -.5rem 0 .5rem; color: var(--muted); font-size: .8rem; }
#admin-fields { padding: 0; border: 0; background: transparent; }
#session-list article { padding: .75rem 0; border-top: 1px solid var(--line); }
[role="status"][data-kind="error"] { color: var(--danger); }
.simulation-banner { max-width: 25rem; display: grid; gap: .2rem; padding: .85rem 1rem; border-left: .3rem solid var(--signal); background: var(--surface-raised); }
.simulation-banner span { color: var(--muted); font-size: .88rem; }
.workspace-grid { display: grid; grid-template-columns: minmax(15rem, .55fr) minmax(30rem, 1.6fr) minmax(16rem, .65fr); gap: .8rem; padding: 0 clamp(.75rem, 3vw, 3rem) 1rem; align-items: start; }
.terminal-panel { overflow: hidden; border: 1px solid var(--line); border-radius: 1rem; background: #071014; box-shadow: var(--shadow); }
.terminal-toolbar { min-height: 4rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .65rem 1rem; border-bottom: 1px solid #294049; background: #101d22; color: #edf7f4; }
.terminal-toolbar > div { display: flex; align-items: center; gap: .65rem; }
.terminal-toolbar h2 { margin: 0; font-size: 1rem; }
.terminal-toolbar label { display: flex; align-items: center; gap: .55rem; font-size: .8rem; }
.terminal-toolbar select { padding: .4rem; background: #071014; color: #edf7f4; }
.terminal-light { width: .65rem; aspect-ratio: 1; border-radius: 50%; background: var(--accent); box-shadow: 0 0 1rem var(--accent); }
.terminal-output { min-height: 28rem; max-height: 52vh; overflow: auto; padding: 1rem; color: #d8eee7; font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace; font-size: .92rem; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.terminal-output p { margin: 0 0 .8rem; }
.terminal-output .stderr { color: #ffb0b0; }
.terminal-output .command-echo { color: #9fc9bd; }
.terminal-input-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; border-top: 1px solid #294049; color: #d8eee7; font-family: "Cascadia Code", Consolas, monospace; }
.terminal-input-row span { padding-left: 1rem; }
.terminal-input-row input { min-width: 0; border: 0; padding: .95rem .5rem; outline-offset: -3px; background: transparent; color: #edf7f4; }
.terminal-input-row button { align-self: stretch; border: 0; padding-inline: 1rem; background: var(--accent); color: #071c18; font-weight: 800; }
.terminal-panel > .field-help { display: block; margin: 0; padding: .5rem 1rem; border-top: 1px solid #294049; background: #101d22; color: #a9beb9; }
.objective-list { display: grid; gap: .6rem; padding-left: 1.4rem; }
.objective-list li[data-complete="true"] { color: var(--accent); text-decoration: line-through; text-decoration-thickness: .08em; }
.mission-recovery { display: grid; gap: .55rem; margin-top: 1rem; padding-top: .75rem; border-top: 1px solid var(--line); }
.mission-recovery h3, .mission-recovery p { margin: 0; }
details { margin-top: .75rem; border-top: 1px solid var(--line); padding-top: .75rem; }
summary { cursor: pointer; font-weight: 750; }
.evidence-list { display: grid; gap: .6rem; margin-top: 1rem; }
.evidence-item { padding: .75rem; border: 1px solid var(--line); border-radius: .5rem; }
.evidence-item p { margin: 0; }
.notebook-panel { grid-column: 2 / 3; }
.notebook-panel .stacked-form { padding: 0; border: 0; background: transparent; }
.submission-bar { position: sticky; bottom: 0; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .85rem clamp(1rem, 3vw, 3rem); border-top: 1px solid var(--line); background: color-mix(in srgb, var(--surface-raised) 95%, transparent); box-shadow: 0 -10px 30px rgb(0 0 0 / 15%); }
.submission-bar div { display: grid; }
.submission-bar span { color: var(--muted); font-size: .84rem; }
.submission-details { margin-top: .5rem; }
.submission-details summary { cursor: pointer; font-weight: 700; }
.submission-fields { display: grid !important; grid-template-columns: repeat(2, minmax(14rem, 1fr)); gap: .75rem; margin-top: .75rem; }
.submission-fields label { display: grid; gap: .3rem; font-size: .84rem; font-weight: 700; }
.submission-fields textarea { width: 100%; resize: vertical; border: 1px solid var(--line); border-radius: .48rem; padding: .55rem .65rem; background: var(--surface); color: var(--ink); }
.instructor-layout { display: grid; grid-template-columns: minmax(15rem, .55fr) minmax(28rem, 1.4fr) minmax(17rem, .7fr); gap: 1rem; align-items: start; }
.instructor-layout select { width: 100%; margin-bottom: 1rem; border: 1px solid var(--line); border-radius: .48rem; padding: .7rem .8rem; background: var(--surface); color: var(--ink); }
.instructor-review, .instructor-operations { display: grid; gap: 1rem; }
.instructor-review h3 { margin: 1.5rem 0 .6rem; }
.review-list, .review-records, .event-list, #rubric-criteria { display: grid; gap: .65rem; }
.review-attempt-button { width: 100%; display: grid; justify-items: start; text-align: left; }
.review-attempt-button[aria-pressed="true"] { border-color: var(--focus); box-shadow: 0 0 0 2px var(--focus); }
.review-attempt-button span, .review-record small, .event-record small { color: var(--muted); }
.review-record, .event-record, .rubric-criterion { padding: .8rem; border: 1px solid var(--line); border-radius: .55rem; background: color-mix(in srgb, var(--surface-soft) 60%, transparent); }
.review-record h4, .review-record p { margin: 0 0 .35rem; }
.event-list { padding-left: 1.5rem; }
.event-record { display: grid; gap: .45rem; }
.event-record code { overflow-wrap: anywhere; color: var(--accent); white-space: pre-wrap; }
.event-record span { font-size: .88rem; }
.rubric-criterion { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin: 0 0 .75rem; }
.rubric-criterion legend { padding-inline: .35rem; font-weight: 800; }
.rubric-criterion label { display: grid; gap: .35rem; }
.rubric-criterion input, .rubric-criterion textarea { width: 100%; border: 1px solid var(--line); border-radius: .48rem; padding: .6rem; background: var(--surface); color: var(--ink); }
.rubric-criterion small { grid-column: 1 / -1; color: var(--muted); }
.compact-form { margin-top: .75rem; padding: 1rem; }
.compact-form fieldset { display: grid; gap: .55rem; border: 0; padding: 0; }
.compact-form legend { margin-bottom: .5rem; font-weight: 800; }

@media (max-width: 70rem) {
  .workspace-grid { grid-template-columns: minmax(14rem, .5fr) minmax(24rem, 1.5fr); }
  .instructor-layout { grid-template-columns: minmax(14rem, .55fr) minmax(26rem, 1.45fr); }
  .instructor-operations { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .evidence-panel { grid-column: 1 / -1; }
  .notebook-panel { grid-column: 2 / 3; }
}

@media (max-width: 48rem) {
  .site-header, .dashboard-heading, .mission-header, .section-heading, .submission-bar { align-items: stretch; flex-direction: column; }
  .section-grid, .form-shell, .card-grid, .split-section, .workspace-grid, .instructor-layout, .instructor-operations, .rubric-criterion { grid-template-columns: 1fr; }
  .notebook-panel, .evidence-panel { grid-column: auto; }
  .submission-fields { grid-template-columns: 1fr; }
  .terminal-output { min-height: 20rem; }
  .terminal-input-row { grid-template-columns: 1fr auto; }
  .terminal-input-row span { grid-column: 1 / -1; padding-top: .6rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

@media (forced-colors: active) {
  .status-pill span, .sync-state span, .terminal-light { forced-color-adjust: none; background: CanvasText; color: CanvasText; }
}