/* Lesson player inside the course website. Everything is scoped to .gcc and uses the site's palette
   (website/assets/site.css): calm ink, teal links, white paper. Only the terminal is dark, as terminals are. */
.gcc {
  --g-ink: var(--ink, #183544); --g-muted: var(--muted, #475f6c); --g-line: var(--line, #c4cfd5); --g-paper: var(--paper, #fff);
  --g-canvas: var(--canvas, #f3f6f7); --g-soft: var(--selected, #e2edf2); --g-accent: var(--link, #145779); --g-focus: var(--focus, #874000);
  --g-commit: #9a4508; --g-commit-soft: #fbeee4;
  --branch: #145779; --remote: #6b3fa0; --repo: #0f766e; --tag: #7a5200; --head: #b42318; --stash: #8a5300;
  --ok: #17694a; --ok-soft: #e3f3ea; --warn: #8a5300; --warn-soft: #fbf0dc; --bad: #b42318; --bad-soft: #fbe6e4;
  --term-bg: #0f1d26; --term-ink: #dce7ee; --term-dim: #8aa0b0;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  --radius: 10px; --bar: 60px;
  display: block; color: var(--g-ink); position: relative;
}
.gcc *, .gcc *::before, .gcc *::after { box-sizing: border-box }
.gcc [hidden] { display: none !important }
.gcc button, .gcc select, .gcc textarea { font: inherit; color: inherit }
.gcc button { cursor: pointer }
.gcc p code, .gcc li code, .gcc legend code, .gcc .txt code, .gcc summary code { background: var(--g-soft); border-radius: 4px; padding: .05em .3em; white-space: nowrap; font-size: .92em }
.gcc .muted { color: var(--g-muted) }
.gcc .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0) }
.gcc .row { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center }
.gcc .primary, .gcc .ghost { display: inline-flex; align-items: center; gap: .45em; min-height: 44px; padding: .5em 1.05em; border-radius: 6px; font-weight: 650; text-decoration: none; border: 1px solid var(--g-accent); line-height: 1.2 }
.gcc .primary { background: var(--g-accent); color: #fff }
.gcc .primary:hover { background: #0e4560 }
.gcc .primary svg { width: 13px; fill: currentColor }
.gcc .ghost { background: var(--g-paper); color: var(--g-accent) }
.gcc .ghost:hover { background: var(--g-soft) }
.gcc button:disabled { opacity: .5; cursor: default }
.gcc .icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 6px; border: 0; background: transparent; padding: 0 }
.gcc .icon:hover { background: var(--g-soft) }
.gcc .icon svg { width: 18px; height: 18px; fill: currentColor }
.gcc-meta { color: var(--muted); margin-top: -.4rem }
.git-lesson:not(.gcc) .gcc-noscript { padding: .6rem .9rem; background: var(--selected); }
.gcc-start { display: inline-block; padding: .6rem 1.2rem; background: var(--link); color: #fff !important; font-weight: 700; text-decoration: none; border-radius: 6px }
/* Seal of approval on the overview: greyed until every lesson is complete. */
.gcc-seal { display: flex; gap: 1.2rem; align-items: center; margin: 1.5rem 0; padding: 1rem 1.2rem; border: 1px solid var(--line); border-radius: 12px; background: var(--paper) }
.gcc-seal img { flex: 0 0 auto; width: 140px; height: 140px; filter: grayscale(1) opacity(.45); transition: filter .6s }
.gcc-seal h2 { margin: 0 0 .3rem; font-size: 1.15rem }
.gcc-seal p { margin: .2rem 0 }
.gcc-seal progress { width: 10rem; vertical-align: middle }
.gcc-seal.earned { border-color: #c99a2e; background: #fffaf0 }
.gcc-seal.earned img { filter: none; animation: gcc-seal-in 1s cubic-bezier(.2,.8,.2,1.2) both }
@keyframes gcc-seal-in { from { transform: scale(.4) rotate(-20deg); opacity: 0 } }
@media (max-width: 560px) { .gcc-seal { flex-direction: column; text-align: center } }
/* Progress marks on lesson links (menu, overview). */
a.gcc-done::after { content: " ✓"; color: #17694a; font-weight: 800 }
a.gcc-started::after { content: " ◐"; color: #8a5300 }

/* ───── layout: text left, sticky stage right ───── */
.gcc .lesson { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 1.6rem }
.gcc .script { min-width: 0; padding-bottom: 2rem }
.gcc .stage { position: sticky; top: 1rem; height: calc(100vh - var(--bar) - 2rem); display: flex; flex-direction: column; gap: 8px; min-width: 0 }
.gcc .objectives { background: var(--g-canvas); border-left: 4px solid var(--g-accent); padding: .7rem 1rem; margin-bottom: .8rem }
.gcc .objectives h2, .gcc .misconceptions h2, .gcc .lesson-foot h2 { margin: 0 0 .3rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--g-muted) }
.gcc .objectives ul { margin: 0; padding-left: 1.1rem }
.gcc .sec { margin: 2rem 0 }
.gcc .sec-title { display: flex; align-items: center; gap: .55rem; font-size: 1.3rem; margin: 0 0 .6rem; line-height: 1.25 }
.gcc .badge { display: inline-block; font-size: .7rem; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; padding: .3em .65em; border-radius: 4px; background: var(--g-soft); color: var(--g-ink); white-space: nowrap }
.gcc .badge-explain { background: #e1edf5; color: var(--branch) }
.gcc .badge-demo { background: var(--g-commit-soft); color: var(--g-commit) }
.gcc .badge-practice { background: var(--ok-soft); color: var(--ok) }
.gcc .badge-quiz { background: #efe8f7; color: var(--remote) }
.gcc .badge-predict { background: var(--warn-soft); color: var(--warn); margin-right: .45rem }
.gcc .badge-reading { margin-right: .5rem }
/* Bloom level of an objective: lower levels light, higher levels darker (same hue, so not colour alone: the word is shown). */
.gcc .bloom, .gcc-bloom { display: inline-block; margin-left: .35rem; padding: 0 .45em; border-radius: 3px; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; vertical-align: .1em; background: #e1edf5; color: #145779 }
.gcc .bloom-analyze, .gcc .bloom-evaluate, .gcc .bloom-create, .gcc-bloom.bloom-analyze, .gcc-bloom.bloom-evaluate, .gcc-bloom.bloom-create { background: #145779; color: #fff }

/* cues: the narrated text, highlighted word by word */
.gcc .cue { position: relative; padding: .45rem .7rem .45rem 2.4rem; margin: 0 0 .2rem; border-radius: 6px; transition: background .3s }
.gcc .cue .txt { margin: 0; font-size: 1.04rem; line-height: 1.7; max-width: 70ch }
.gcc .cue-play { position: absolute; left: .45rem; top: .6rem; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--g-line); background: var(--g-paper); display: grid; place-items: center; opacity: .35; padding: 0 }
.gcc .cue-play svg { width: 10px; fill: var(--g-accent) }
.gcc .cue:hover .cue-play, .gcc .cue.now .cue-play, .gcc .cue-play:focus-visible { opacity: 1 }
.gcc .cue.now { background: var(--g-soft) }
.gcc .cue.now::before { content: ""; position: absolute; left: 0; top: .5rem; bottom: .5rem; width: 3px; background: var(--g-accent) }
.gcc.is-playing .cue.now .w:not(.spoken), .gcc .is-playing .cue.now .w:not(.spoken) { color: var(--g-muted) }
.gcc .cue .w { border-radius: 3px; transition: color .2s, background-color .2s }
.gcc .cue .w.now { background: #fde9b8; box-shadow: 0 0 0 2px #fde9b8 }
.gcc .cmd-chip { display: inline-flex; align-items: center; gap: .5rem; margin: .4rem 0 .15rem; padding: .3rem .75rem; border-radius: 6px; background: var(--term-bg); color: var(--term-ink); font: 13.5px var(--mono); max-width: 100% }
.gcc .cmd-chip span { color: #7fd8a4; font-weight: 700 } .gcc .cmd-chip.ada span { color: #6ee0d4 }
.gcc .cmd-chip code { white-space: pre-wrap; overflow-wrap: anywhere; background: none; padding: 0; color: inherit; font-size: 1em }

.gcc .predict, .gcc .question, .gcc .turn-card, .gcc .sec-practice, .gcc .misconceptions, .gcc .sec-reading details { background: var(--g-paper); border: 1px solid var(--g-line); border-radius: var(--radius); padding: .8rem 1rem; margin: .6rem 0 }
.gcc .predict { border-color: var(--warn); background: #fffbf3; animation: gcc-rise .35s ease-out }
.gcc .predict-q { margin: 0 0 .5rem; font-weight: 600 }
.gcc .options { display: grid; gap: 6px }
.gcc .options button { text-align: left; min-height: 44px; padding: .55rem .8rem; border-radius: 6px; border: 1.5px solid var(--g-line); background: var(--g-paper); line-height: 1.4 }
.gcc .options button:hover:not(:disabled) { border-color: var(--g-accent) }
.gcc .options button.chosen { border-color: var(--g-ink) }
.gcc .options button.right { border-color: var(--ok); background: var(--ok-soft) }
.gcc .options button.wrong { border-color: var(--bad); background: var(--bad-soft) }
.gcc .options button:disabled { opacity: 1 }
.gcc .feedback { margin: .5rem 0 0 } .gcc .feedback:empty { display: none }
.gcc .feedback.ok b { color: var(--ok) } .gcc .feedback.no b { color: var(--bad) }
.gcc .question legend { font-weight: 650; padding: 0 .3rem }
.gcc .question.answered legend::after { content: " ✓"; color: var(--ok) }
.gcc .turn-card { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: end; background: var(--ok-soft); border-color: #9fd0b5 }
.gcc .turn-card h3 { margin: 0 0 .2rem } .gcc .turn-card p { margin: 0 0 .3rem; color: var(--g-muted) }
.gcc .task-list { margin: .3rem 0 .6rem; padding-left: 1.3rem }
.gcc .task-list li.done::marker { content: "✓  "; color: var(--ok); font-weight: 800 }
.gcc .task-list li.shown::marker { content: "◐  "; color: var(--warn) }
.gcc .sec-reading summary { cursor: pointer; font-weight: 650; min-height: 44px; display: flex; align-items: center }
.gcc .reading-slot { max-width: 74ch }
.gcc .reading-slot table { border-collapse: collapse; width: 100%; font-size: .93rem; display: block; overflow-x: auto }
.gcc .reading-slot th, .gcc .reading-slot td { text-align: left; vertical-align: top; padding: .4rem .55rem; border-bottom: 1px solid var(--g-line) }
.gcc .reading-slot pre { background: var(--term-bg); color: var(--term-ink); padding: .7rem .9rem; border-radius: 6px; overflow-x: auto; font-size: .87rem }
.gcc .reading-slot pre code { background: none; color: inherit; padding: 0; white-space: pre }
.gcc .lesson-foot { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--g-line) }
.gcc .lesson-foot .links { display: flex; flex-direction: column; gap: .3rem; margin: 0 0 1rem }

/* ───── stage ───── */
.gcc .stage-head { display: flex; justify-content: space-between; align-items: center; min-height: 22px; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--g-muted) }
.gcc .stage-kind::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--g-muted); margin-right: .4rem }
.gcc .stage[data-mode="live"] .stage-kind::before { background: var(--ok); animation: gcc-live 1.8s infinite }
.gcc .pending { background: var(--warn-soft); color: var(--warn); border-radius: 4px; padding: .15em .6em }
.gcc .graph-host, .gcc .objects-host, .gcc .hosts-host { display: none; flex: 1 1 0; min-height: 150px; background: var(--g-paper); border: 1px solid var(--g-line); border-radius: var(--radius); position: relative; overflow: hidden;
  background-image: radial-gradient(circle at 1px 1px, #d9e2e7 1px, transparent 0); background-size: 22px 22px }
.gcc .graph, .gcc .objects, .gcc .hosts { position: absolute; inset: 0; width: 100%; height: 100% }
.gcc .areas-host, .gcc .term-host { display: none }
.gcc .term-host { flex: 0 0 auto; height: 36%; min-height: 170px }
.gcc .stage.p-graph .graph-host, .gcc .stage.p-objects .objects-host, .gcc .stage.p-hosts .hosts-host, .gcc .stage.p-areas .areas-host, .gcc .stage.p-terminal .term-host { display: block }
.gcc .stage.p-graph.p-objects .graph-host { flex-grow: .7 }
.gcc .alt { font-size: .85rem; color: var(--g-muted) }
.gcc .alt ul { margin: .3rem 0; padding-left: 1.1rem; max-height: 8rem; overflow: auto }

/* graph: one colour per lane (line of work); branch labels share their lane's colour */
.gcc { --lane-0: #145779; --lane-1: #8e3b8e; --lane-2: #2f7d32; --lane-3: #a15c00; --lane-4: #4a5d8a; --lane-5: #b03a5b }
.gcc .lane-0 { --lc: var(--lane-0) } .gcc .lane-1 { --lc: var(--lane-1) } .gcc .lane-2 { --lc: var(--lane-2) }
.gcc .lane-3 { --lc: var(--lane-3) } .gcc .lane-4 { --lc: var(--lane-4) } .gcc .lane-5 { --lc: var(--lane-5) }
.gcc .edge .line { fill: none; stroke: var(--lc); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: .8 }
.gcc .edge .head { fill: var(--lc) }
.gcc .edge.ghost .line { stroke: #9aa9b3; stroke-dasharray: 5 5; opacity: .9 } .gcc .edge.ghost .head { fill: #9aa9b3 }
.gcc .commit { cursor: pointer; outline: none }
.gcc .commit .dot { fill: var(--g-paper); stroke: var(--lc); stroke-width: 3.5; transition: fill .3s }
.gcc .commit .core { fill: var(--lc); opacity: 0; transition: opacity .3s }
.gcc .commit.at-head .core { opacity: 1 }
.gcc .commit.merge .dot { stroke-width: 5.5 }
.gcc .commit .ring { fill: none; stroke: var(--lc); stroke-width: 2; opacity: 0 }
.gcc .commit.hl .ring { opacity: .6; stroke: var(--g-focus); animation: gcc-glow 1.6s ease-in-out infinite }
.gcc .commit:hover .dot, .gcc .commit:focus-visible .dot { fill: color-mix(in srgb, var(--lc) 14%, var(--g-paper)) }
.gcc .commit:focus-visible .ring { opacity: 1; stroke: var(--g-focus) }
.gcc .commit.born .ring { animation: gcc-ripple .9s ease-out }
.gcc .commit.ghost .dot { stroke-dasharray: 4 4; stroke: var(--g-muted); fill: var(--g-canvas) }
.gcc .commit.ghost text { opacity: .55 }
.gcc .commit.at-head .cid { fill: #fff } .gcc .commit.at-head .core { r: 11 }
.gcc .cid { font: 700 12px var(--mono); fill: var(--g-ink); transition: fill .3s }
.gcc .hash { font: 600 11px var(--mono); fill: var(--g-ink) }
.gcc .msg { font: 11px system-ui, sans-serif; fill: var(--g-muted) }
.gcc .msg, .gcc .hash { paint-order: stroke; stroke: var(--g-paper); stroke-width: 4px; stroke-linejoin: round }
.gcc .graph-empty { font: 14px system-ui, sans-serif; fill: var(--g-muted) }
.gcc .ref rect { fill: var(--lc, var(--branch)) }
.gcc .ref text { font: 700 11.5px var(--mono); fill: #fff }
.gcc .ref .stem { stroke: var(--lc, var(--branch)); stroke-width: 2 }
.gcc .ref.remote rect { fill: var(--g-paper); stroke: var(--remote); stroke-width: 1.6; stroke-dasharray: 4 2 } .gcc .ref.remote text { fill: var(--remote) } .gcc .ref.remote .stem { stroke: var(--remote) }
.gcc .ref.repo rect { fill: var(--g-paper); stroke: var(--repo); stroke-width: 1.6 } .gcc .ref.repo text { fill: var(--repo) } .gcc .ref.repo .stem { stroke: var(--repo) }
.gcc .ref.tag rect { fill: #fdf3d8; stroke: var(--tag); stroke-width: 1.6 } .gcc .ref.tag text { fill: var(--tag) } .gcc .ref.tag .stem { stroke: var(--tag) }
.gcc .ref.stash rect { fill: var(--g-paper); stroke: var(--stash); stroke-width: 1.6 } .gcc .ref.stash text { fill: var(--stash) } .gcc .ref.stash .stem { stroke: var(--stash) }
.gcc .ref.head rect { fill: var(--head) } .gcc .ref.head .stem { stroke: var(--head) }
.gcc .ref.head.detached rect { fill: var(--g-paper); stroke: var(--head); stroke-width: 2 } .gcc .ref.head.detached text { fill: var(--head) }

/* object model */
.gcc .obj circle, .gcc .obj rect, .gcc .obj path { stroke-width: 2.5; fill: var(--g-paper) }
.gcc .obj.commit circle { stroke: var(--g-commit) } .gcc .obj.tree rect { stroke: var(--branch) } .gcc .obj.blob path { stroke: var(--ok) }
.gcc .obj.hl circle, .gcc .obj.hl rect, .gcc .obj.hl path { fill: #fdf3d8; stroke-width: 3.5 }
.gcc .o-type { font: 700 9.5px system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; fill: var(--g-muted) }
.gcc .o-label { font: 700 12px var(--mono); fill: var(--g-ink) }
.gcc .o-detail { font: 11px system-ui, sans-serif; fill: var(--g-muted) }
.gcc .obj-link path { fill: none; stroke: #7d919d; stroke-width: 2 }
.gcc .obj-link.parent path { stroke-dasharray: 5 4 }
.gcc .obj-link text { font: 600 10.5px var(--mono); fill: var(--g-muted); paint-order: stroke; stroke: var(--g-paper); stroke-width: 4px }

/* where the history lives (hosts figure) */
.gcc .host-item { transition: transform .6s cubic-bezier(.2,.7,.2,1), opacity .45s }
.gcc .host-item.entering { opacity: 0 }
.gcc .hosts.still .host-item { transition: none }
.gcc .host-title text { font: 700 12px system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; fill: var(--g-muted) }
.gcc .host .box { fill: var(--g-paper); stroke: var(--g-line); stroke-width: 1.6; transition: stroke .3s, fill .3s }
.gcc .host.server .box, .gcc .host.cloud .box { stroke: var(--remote) }
.gcc .host.hl .box { fill: #fdf3d8; stroke: var(--g-focus); stroke-width: 2.4 }
.gcc .host .icon { fill: var(--g-muted) } .gcc .host.server .icon, .gcc .host.cloud .icon { fill: var(--remote) }
.gcc .h-label { font: 700 12.5px system-ui, sans-serif; fill: var(--g-ink) }
.gcc .h-line { stroke: var(--g-commit); stroke-width: 2.5 }
.gcc .h-dot circle { fill: var(--g-paper); stroke: var(--g-commit); stroke-width: 2.5 }
.gcc .h-dot text { font: 700 10px var(--mono); fill: var(--g-ink) }
.gcc .h-dot.new { animation: gcc-pop .5s ease-out both }
.gcc .h-doc { fill: var(--g-paper); stroke: var(--g-muted); stroke-width: 1.2 }
.gcc .h-file { font: 11px var(--mono); fill: var(--g-ink) }
.gcc .h-note { font: italic 11px system-ui, sans-serif; fill: var(--g-muted) }
.gcc .host.down .box { stroke: var(--bad); stroke-dasharray: 5 4; fill: var(--bad-soft) }
.gcc .host.down > :not(.box):not(.h-down) { opacity: .3 }
.gcc .h-down path { stroke: var(--bad); stroke-width: 3; stroke-linecap: round }
.gcc .h-down-label { font: 800 10.5px system-ui, sans-serif; letter-spacing: .05em; text-transform: uppercase; fill: var(--bad) }
.gcc .h-link { fill: none; stroke: #7d919d; stroke-width: 2.2; transition: opacity .4s }
.gcc .h-link.peer { stroke-dasharray: 6 4 }
.gcc .h-link.down { stroke: var(--bad); stroke-dasharray: 3 5; opacity: .45 }
/* "try it" commands under a schematic graph */
.gcc .try-bar { border: 1px dashed var(--g-line); border-radius: var(--radius); padding: .5rem .6rem; background: var(--g-canvas) }
.gcc .try-lead { margin: 0 0 .4rem; font-size: .8rem; font-weight: 650; color: var(--g-muted) }
.gcc .try-cmds { display: flex; flex-wrap: wrap; gap: 6px }
.gcc .try-cmds button { min-height: 36px; padding: .25em .7em; font-size: .82rem }
.gcc .try-cmds button code { background: none; padding: 0; font-size: inherit }
.gcc .try-cmds button.ada { border-color: var(--remote); color: var(--remote) }
.gcc .try-cmds .try-reset { border-style: dashed; color: var(--g-muted) }
.gcc .try-note { margin: .45rem 0 0; min-height: 1.2em; font-size: .85rem }
.gcc .try-note:empty { display: none }
/* flows and the interactive comparison */
.gcc .h-flow rect { fill: var(--g-commit); stroke: var(--g-paper); stroke-width: 2 }
.gcc .h-flow text { font: 700 11px var(--mono); fill: #fff }
.gcc .h-flow-path { fill: none; stroke: var(--g-commit); stroke-width: 3; opacity: .35 }
.gcc .h-flash { font: 700 11.5px system-ui, sans-serif; fill: var(--g-focus); paint-order: stroke; stroke: var(--g-paper); stroke-width: 4px; animation: gcc-flash 2.2s ease-out both }
@keyframes gcc-flash { 0% { opacity: 0; transform: translateY(6px) } 12%, 75% { opacity: 1; transform: none } 100% { opacity: 0 } }
.gcc .hosts-sim { position: absolute; left: 8px; right: 8px; bottom: 8px; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center }
.gcc .hosts-sim button { min-height: 36px; padding: .3em .8em; font-size: .85rem }
.gcc .hosts-sim button.danger { color: var(--bad); border-color: var(--bad) }
.gcc .hosts-sim.busy button { opacity: .6 }
@media (max-width: 760px) {
  .gcc .stage.p-hosts .hosts-host { min-height: 440px }
  .gcc .hosts-sim { gap: 4px; left: 4px; right: 4px; bottom: 4px }
  .gcc .hosts-sim button, .gcc .try-cmds button { min-height: 32px; padding: .2em .55em; font-size: .74rem }
}
@keyframes gcc-pop { from { opacity: 0; transform: scale(.3) } }
.gcc .h-dot { transform-box: fill-box; transform-origin: center }

/* the three areas */
.gcc .areas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px }
.gcc .area { background: var(--g-paper); border: 1px solid var(--g-line); border-radius: 8px; padding: 6px 8px; min-height: 84px }
.gcc .area h3 { margin: 0 0 5px; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--g-muted); display: flex; align-items: center; gap: .35rem }
.gcc .area-dot { width: 7px; height: 7px; border-radius: 50% }
.gcc .area-work .area-dot { background: var(--warn) } .gcc .area-index .area-dot { background: var(--ok) } .gcc .area-head .area-dot { background: var(--g-commit) }
.gcc .cards { display: grid; gap: 5px }
.gcc .file-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 .4rem; align-items: baseline; background: var(--g-canvas); border: 1.5px solid var(--g-line); border-radius: 6px; padding: 4px 7px; font-size: .78rem }
.gcc .file-card b { font-family: var(--mono); font-weight: 650; overflow-wrap: anywhere }
.gcc .file-card .tag { justify-self: end; font-size: .64rem; font-weight: 700; text-transform: uppercase }
.gcc .file-card pre { grid-column: 1 / -1; border: 0; padding: 0; background: none; margin: 2px 0 0; color: var(--g-muted); white-space: pre-wrap; overflow-wrap: anywhere; font-size: .72rem; line-height: 1.35 }
.gcc .file-card.untracked { border-style: dashed }
.gcc .file-card.modified { border-color: var(--warn); background: var(--warn-soft) } .gcc .file-card.modified .tag { color: var(--warn) }
.gcc .file-card.staged { border-color: var(--ok); background: var(--ok-soft) } .gcc .file-card.staged .tag { color: var(--ok) }
.gcc .file-card.deleted { opacity: .6; text-decoration: line-through } .gcc .file-card.deleted .tag { color: var(--bad) }
.gcc .file-card.conflict { border-color: var(--bad); background: var(--bad-soft) } .gcc .file-card.conflict .tag { color: var(--bad) }
.gcc .area-empty { margin: 0; color: var(--g-muted); font-size: .76rem; font-style: italic }

/* terminal */
.gcc .term { height: 100%; display: flex; flex-direction: column; background: var(--term-bg); color: var(--term-ink); border-radius: var(--radius); overflow: hidden; font: 13.5px/1.55 var(--mono) }
.gcc .term header { display: flex; align-items: center; gap: .7rem; padding: 6px 12px; background: rgb(255 255 255 / .05); font: 12px system-ui, sans-serif; color: var(--term-dim) }
.gcc .lights { display: flex; gap: 6px } .gcc .lights i { width: 10px; height: 10px; border-radius: 50%; background: #e5534b } .gcc .lights i:nth-child(2) { background: #d9a520 } .gcc .lights i:nth-child(3) { background: #46a758 }
.gcc .term-title { flex: 1; text-align: center; margin-right: 46px }
.gcc .term-status { color: #f2c46d }
.gcc .term.busy .term-status::before { content: ""; display: inline-block; width: 9px; height: 9px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; margin-right: .4rem; animation: gcc-spin .7s linear infinite }
.gcc .term-body { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 8px 12px }
.gcc .scroll { flex: 1; overflow: auto; min-height: 0 }
.gcc .scroll > div { white-space: pre-wrap; overflow-wrap: anywhere }
.gcc .cmd { margin-top: .3rem } .gcc .cmd .typed { color: #fff; font-weight: 600 }
.gcc .p-user { color: #7fd8a4; font-weight: 700 } .gcc .term[data-actor="ada"] .p-user { color: #6ee0d4 }
.gcc .p-dir { color: #8cc4ff } .gcc .p-branch { color: #f2c46d } .gcc .p-sigil { color: var(--term-dim) }
.gcc .caret { display: inline-block; width: .55em; height: 1.1em; background: var(--term-ink); vertical-align: -.2em; animation: gcc-caret 1s steps(1) infinite }
.gcc .out { color: #c8d6e0 } .gcc .out-line.reveal { animation: gcc-line .28s ease-out both }
.gcc .out-line.err { color: #ff9b94 } .gcc .out-line.hint { color: var(--term-dim) }
.gcc .note { color: var(--term-dim); font-style: italic; margin: .3rem 0 } .gcc .ok { color: #7fd8a4; font-weight: 700 } .gcc .scroll .err { color: #ff9b94 }
.gcc .ansi-b { font-weight: 700 } .gcc .ansi-dim { opacity: .65 } .gcc .ansi-red { color: #ff7b72 } .gcc .ansi-green { color: #7ee787 } .gcc .ansi-yellow { color: #f2cc60 } .gcc .ansi-blue { color: #79c0ff } .gcc .ansi-magenta { color: #d2a8ff } .gcc .ansi-cyan { color: #76e3ea }
.gcc .term-input { display: flex; align-items: flex-start; border-top: 1px dashed rgb(255 255 255 / .1); padding-top: 5px; margin-top: 4px }
.gcc .term-input.off { display: none }
.gcc .term-input textarea { flex: 1; background: transparent; border: 0; color: #fff; font: inherit; resize: none; outline: none; padding: 0; min-height: 1.55em; caret-color: #7fd8a4 }
.gcc .term-input textarea::placeholder { color: #6a7f8f }
.gcc .term-input:focus-within { box-shadow: inset 0 -2px 0 #f2c46d }
.gcc .prompt { white-space: nowrap }

/* overlay, taskbar, inspector, editor */
.gcc .overlay { position: absolute; inset: 22px 0 0; display: grid; place-items: center; z-index: 5; background: rgb(243 246 247 / .85); border-radius: var(--radius) }
.gcc .overlay-card { background: var(--g-paper); border: 1px solid var(--g-line); border-radius: var(--radius); padding: 18px 22px; max-width: 420px; text-align: center; box-shadow: 0 8px 24px rgb(24 53 68 / .12); animation: gcc-rise .35s ease-out }
.gcc .overlay-card p { margin: .3rem 0 } .gcc .overlay-card .row { justify-content: center; margin-top: .8rem }
.gcc .your-turn { font-size: 1.8rem; margin: 0 0 .2rem; color: var(--ok) }
.gcc .spinner { width: 32px; height: 32px; margin: 0 auto 8px; border-radius: 50%; border: 3px solid var(--g-line); border-top-color: var(--g-accent); animation: gcc-spin .8s linear infinite }
.gcc .taskbar { background: var(--g-paper); border: 2px solid var(--ok); border-radius: var(--radius); padding: 8px 12px }
.gcc .taskbar.flash { animation: gcc-flash .7s }
.gcc .tb-dots { display: flex; gap: 5px; align-items: center; font-size: .75rem; color: var(--g-muted) }
.gcc .tb-dots i { width: 22px; height: 6px; border-radius: 3px; background: var(--g-line) }
.gcc .tb-dots i.done { background: var(--ok) } .gcc .tb-dots i.shown { background: var(--warn) } .gcc .tb-dots i.now { background: var(--g-accent) }
.gcc .tb-dots span { margin-left: .4rem }
.gcc .tb-task { margin: .4rem 0; font-weight: 600 } .gcc .tb-task.done { color: var(--ok) }
.gcc .tb-hint { margin: 0 0 .5rem; padding: .35rem .65rem; border-left: 3px solid var(--warn); background: var(--warn-soft); font-size: .92rem }
.gcc .pulse { animation: gcc-pulse 1.3s infinite }
.gcc .inspector { position: absolute; right: 10px; top: 32px; z-index: 6; width: min(320px, 90%); max-height: 60%; overflow: auto; background: var(--g-paper); border: 1px solid var(--g-line); border-radius: 8px; padding: 10px 14px; box-shadow: 0 8px 24px rgb(24 53 68 / .14); font-size: .88rem }
.gcc .inspector h3 { margin: 0 0 .3rem } .gcc .inspector p { margin: .2rem 0 } .gcc .inspector .close { position: absolute; right: 2px; top: 2px }
.gcc .inspector pre { background: var(--g-canvas); padding: 6px 8px; white-space: pre-wrap; max-height: 10rem; overflow: auto }
.gcc dialog.editor { border: 1px solid var(--g-line); border-radius: var(--radius); background: var(--g-paper); color: var(--g-ink); width: min(620px, 94vw); position: fixed; inset: 0; margin: auto; z-index: 50 }
.gcc dialog.editor::backdrop { background: rgb(15 29 38 / .45) }
.gcc dialog.editor h3 { margin: 0 } .gcc .editor-path { font: 12px var(--mono); color: var(--g-muted) }
.gcc dialog.editor textarea { width: 100%; background: var(--term-bg); color: var(--term-ink); border-radius: 6px; border: 0; padding: 10px; font: 13px/1.5 var(--mono) }
.gcc dialog.editor .row { justify-content: flex-end; margin-top: .6rem }
.gcc .stage.awaiting .graph-host { box-shadow: 0 0 0 3px var(--warn-soft), 0 0 0 4px var(--warn) }
.gcc .stage.celebrate .graph-host { animation: gcc-celebrate 1.4s }

/* player bar: sticks to the bottom of the viewport while the lesson is on screen */
.gcc .playerbar { position: sticky; bottom: 0; z-index: 8; height: var(--bar); display: flex; align-items: center; gap: 4px; padding: 0 8px; margin: 0 calc(-1 * clamp(1rem, 3vw, 3rem)); background: rgb(255 255 255 / .96); border-top: 1px solid var(--g-line); box-shadow: 0 -4px 14px rgb(24 53 68 / .06) }
.gcc .pb-play.big { width: 44px; height: 44px; border-radius: 50%; background: var(--g-accent); color: #fff }
.gcc .pb-play.big:hover { background: #0e4560 }
.gcc .pb-play .i-pause, .gcc .pb-play.playing .i-play { display: none } .gcc .pb-play.playing .i-pause { display: inline }
.gcc .pb-mute .i-x { display: none } .gcc .pb-mute[aria-pressed="true"] .i-x { display: inline } .gcc .pb-mute[aria-pressed="true"] .i-wave { display: none }
.gcc .pb-mute path { stroke: currentColor }
.gcc .timeline { flex: 1; display: flex; gap: 3px; align-items: center; height: 60px; margin: 0 8px; min-width: 0; overflow-x: auto }
.gcc .seg { flex: 1 0 44px; height: 44px; border: 0; background: none; padding: 0; display: flex; align-items: center }
.gcc .seg:focus-visible { outline-offset: -3px }
.gcc .seg i { display: block; width: 100%; height: 6px; border-radius: 3px; background: var(--g-line); transition: height .2s }
.gcc .seg:hover i { height: 10px }
.gcc .seg.past i { background: #8fb3c7 } .gcc .seg-demo.past i { background: #e0b393 }
.gcc .seg.now i { height: 12px; background: var(--g-accent) } .gcc .seg-demo.now i { background: var(--g-commit) }
.gcc .pb-count { font: 600 .82rem var(--mono); color: var(--g-muted); min-width: 4.5em; text-align: right }
.gcc .playerbar select { border: 1px solid var(--g-line); background: var(--g-paper); border-radius: 6px; min-height: 36px; font-size: .85rem; max-width: 9.5rem }

/* presenter mode: projector-friendly; site chrome hidden, the stage dominates */
body.present .site-header, body.present .section-navigation, body.present .page-outline, body.present main > footer,
body.present .breadcrumbs, body.present .reading-content > h1, body.present .gcc-meta { display: none }
body.present .workspace { max-width: none; padding: 0; display: block }
body.present main { border: 0; padding: 0 1.5rem }
body.present .gcc .lesson { grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr) }
body.present .gcc .cue .txt { font-size: 1.45rem; line-height: 1.55 }
body.present .gcc .cue:not(.now) { opacity: .38 }
body.present .gcc .objectives, body.present .gcc .misconceptions, body.present .gcc .lesson-foot, body.present .gcc .sec-reading { display: none }
body.present .gcc .term { font-size: 16px }
body.present .gcc .playerbar { margin: 0 -1.5rem }

@media (max-width: 1000px) {
  .gcc .lesson { grid-template-columns: 1fr; gap: 0 }
  .gcc .script { order: 2 }
  .gcc .stage { order: 1; position: relative; top: auto; height: auto; background: var(--g-paper); padding: 6px 0 8px; border-bottom: 1px solid var(--g-line) }
  .gcc .stage .graph-host, .gcc .stage .objects-host, .gcc .stage .hosts-host { flex: none; height: clamp(150px, 35vh, 320px) }
  .gcc .stage .term-host { height: clamp(160px, 35vh, 280px); min-height: 120px }
  .gcc .area { min-height: 0; padding: 4px 5px } .gcc .file-card pre { display: none }
  .gcc .area h3 { font-size: .6rem; letter-spacing: 0; hyphens: auto; overflow-wrap: normal }
  .gcc .file-card { grid-template-columns: 1fr; padding: 3px 5px } .gcc .file-card b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal } .gcc .file-card .tag { justify-self: start }
  .gcc .alt, .gcc .pb-voice { display: none }
  .gcc .cue, .gcc .predict, .gcc .turn-card { scroll-margin-top: 16px }
}
@media (max-width: 560px) { .gcc .pb-speed, .gcc .pb-count, .gcc .pb-present { display: none } .gcc .turn-card { grid-template-columns: 1fr } }
@keyframes gcc-rise { from { opacity: 0; transform: translateY(8px) } }
@keyframes gcc-live { 50% { opacity: .35 } }
@keyframes gcc-glow { 50% { opacity: .15 } }
@keyframes gcc-ripple { from { opacity: .9; r: 17 } to { opacity: 0; r: 40 } }
@keyframes gcc-spin { to { transform: rotate(360deg) } }
@keyframes gcc-caret { 50% { opacity: 0 } }
@keyframes gcc-line { from { opacity: 0; transform: translateY(3px) } }
@keyframes gcc-flash { 30% { box-shadow: 0 0 0 5px var(--ok-soft) } }
@keyframes gcc-pulse { 50% { box-shadow: 0 0 0 4px var(--warn-soft) } }
@keyframes gcc-celebrate { 20% { box-shadow: 0 0 0 6px var(--ok-soft) } }
@media (prefers-reduced-motion: reduce) { .gcc *, .gcc *::before, .gcc *::after { animation: none !important; transition: none !important } }