/* Cloud Top G Labs workspace, inside VIP: VIP's near-black, warm charcoal panels,
   white pill actions and VIP red as the one highlight. Headings in Space Grotesk. */
:root {
  color-scheme: dark;
  --canvas: #0b0a0a;
  --panel: #151313;
  --panel-2: #1d1a1a;
  --panel-3: #2a2626;
  --inset: #090808;
  --line: rgba(255, 255, 255, 0.07);
  --line-2: rgba(255, 255, 255, 0.13);
  --text: #d8d4d4;
  --hi: #faf8f8;
  --muted: #aba5a5;
  --faint: #918a8a;
  --accent: #e61919;
  --accent-ink: #ffffff;
  --accent-soft: rgba(230, 25, 25, 0.14);
  --amber: #e6bd74;
  --amber-soft: rgba(230, 189, 116, 0.12);
  --danger: #ff7a70;
  --danger-soft: rgba(240, 115, 107, 0.14);
  --pass: #5ccf97;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --action: #faf8f8;
  --action-ink: #0b0a0a;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --term-black: #3a3a40;
  --term-red: #ff8a80;
  --term-green: #8fd4a8;
  --term-yellow: #e6bd74;
  --term-blue: #7fb8ff;
  --term-magenta: #d7a6f2;
  --term-cyan: #7fd8e6;
  --term-white: #e4e4e7;
  --term-bright-black: #86868b;
  --term-bright-red: #ffb0a8;
  --term-bright-green: #b3e6c4;
  --term-bright-yellow: #f3d39a;
  --term-bright-blue: #a9d0ff;
  --term-bright-magenta: #e9c9f8;
  --term-bright-cyan: #b0eef6;
  --term-bright-white: #ffffff;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--canvas); color: var(--text); font: 14px/1.5 var(--sans); -webkit-font-smoothing: antialiased; overflow: hidden; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
button:disabled { cursor: not-allowed; }
input, textarea { font: inherit; }
:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.7); outline-offset: 2px; border-radius: 6px; }
code, kbd, pre { font-family: var(--mono); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ic { display: inline-flex; flex: none; }

/* ---------- frame ---------- */
.app-frame { height: 100vh; display: grid; grid-template-rows: 62px minmax(0, 1fr); position: relative; }
.top { display: flex; align-items: center; gap: 14px; padding: 0 16px 0 10px; border-bottom: 1px solid var(--line); min-width: 0; position: relative; }
.icon-btn { width: 34px; height: 34px; border-radius: 17px; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); }
.icon-btn:hover:not(:disabled) { color: var(--hi); background: var(--panel-2); }
.icon-btn:disabled { opacity: 0.4; }
.brand { display: flex; align-items: center; gap: 9px; color: var(--hi); font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; text-decoration: none; }
a.brand:hover small { color: var(--hi); }
.brand small { color: var(--muted); font: 500 15px/1 var(--display); letter-spacing: -0.01em; }
.sep { width: 1px; height: 24px; background: var(--line-2); flex: none; }
.lab-title { color: var(--hi); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.lab-title span { color: var(--muted); }
.fixture-tag { font-size: 11px; color: var(--amber); border: 1px solid rgba(230, 189, 116, 0.35); border-radius: 6px; padding: 1px 6px; white-space: nowrap; }
.top-right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
.conn { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); padding: 0 8px; white-space: nowrap; }
.conn i { width: 7px; height: 7px; border-radius: 50%; background: var(--pass); }
.conn.warn { color: var(--amber); }
.conn.warn i { background: var(--amber); }
.conn.bad { color: var(--danger); }
.conn.bad i { background: var(--danger); }
.conn.idle i { background: var(--faint); }
.voice-pill { display: inline-flex; align-items: center; gap: 2px; height: 34px; padding: 0 3px 0 4px; border-radius: 17px; background: var(--panel-2); border: 1px solid var(--line); }
.voice-pill .vp-open { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 10px 0 3px; border-radius: 14px; font-size: 12px; color: var(--hi); white-space: nowrap; }
.voice-pill canvas { width: 22px; height: 22px; border-radius: 50%; background: #000; }
.vp-mic { width: 28px; height: 28px; border-radius: 14px; display: grid; place-items: center; color: var(--text); }
.vp-mic:hover { background: var(--panel-3); }
.vp-mic.off { color: var(--danger); background: var(--danger-soft); }
.session-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px 0 12px; border-radius: 17px; color: var(--text); font-size: 13px; white-space: nowrap; }
.session-btn:hover, .session-btn[aria-expanded="true"] { background: var(--panel-2); color: var(--hi); }
.session-btn .who { width: 24px; height: 24px; border-radius: 50%; background: var(--panel-3); color: var(--hi); display: grid; place-items: center; font-size: 11px; font-weight: 600; flex: none; }
.menu .menu-link { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; padding: 8px 10px; border-radius: 8px; font-size: 13px; color: var(--text); text-decoration: none; }
.menu .menu-link .ic { grid-row: span 2; align-self: center; }
.menu .menu-link span { grid-column: 2; font-size: 11.5px; color: var(--faint); }
.menu .menu-link:hover, .menu .menu-link:focus-visible { background: var(--panel-3); color: var(--hi); }
.menu { position: absolute; top: 54px; right: 14px; z-index: 40; min-width: 230px; background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 12px; padding: 6px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55); }
.menu.left { left: 10px; right: auto; min-width: 280px; }
.menu button { display: flex; width: 100%; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; text-align: left; font-size: 13px; color: var(--text); }
.menu button:hover:not(:disabled), .menu button:focus-visible { background: var(--panel-3); color: var(--hi); }
.menu button:disabled { opacity: 0.45; }
.menu .danger { color: var(--danger); }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: 5px 4px; }
.menu .meta { padding: 6px 10px 4px; font-size: 11px; color: var(--muted); letter-spacing: 0.05em; text-transform: uppercase; }
.menu .outline-item { justify-content: space-between; }
.menu .outline-item span:last-child { color: var(--muted); font-size: 12px; }
.menu .outline-item[aria-current="step"] { color: var(--hi); }

/* ---------- split ---------- */
.split { --left: 350px; display: grid; grid-template-columns: var(--left) 24px minmax(0, 1fr); padding: 14px 20px 18px; min-height: 0; }
.split.expand-ws { grid-template-columns: 0 0 minmax(0, 1fr); }
.split.expand-ws .left, .split.expand-ws .divider { visibility: hidden; }
.split.expand-task { grid-template-columns: minmax(0, 1fr) 0 0; }
.split.expand-task .ws, .split.expand-task .divider { visibility: hidden; }
.pane { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.tabrow { display: flex; align-items: flex-end; gap: 2px; height: 38px; flex: none; }
.tabrow [role="tablist"] { display: flex; gap: 2px; align-items: flex-end; min-width: 0; }
.tab { height: 38px; padding: 0 14px; border-radius: 12px 12px 0 0; display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; font-weight: 500; white-space: nowrap; }
.tab:hover:not(:disabled) { color: var(--hi); }
.tab .tab-note { font-size: 11px; font-weight: 400; color: var(--muted); }
.tab[aria-selected="true"] { background: var(--panel); color: var(--hi); }
.tab:disabled { opacity: 0.4; }
.tab .tab-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--amber); border: 1px solid rgba(230, 189, 116, 0.35); border-radius: 5px; padding: 0 4px; line-height: 1.5; }
.tab .mini-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.tab.term-tab { padding-right: 34px; }
.tab.term-tab[aria-busy="true"] .ic { animation: term-tab-pulse 1.2s ease-in-out infinite; }
.tab.term-tab[data-lost="true"] .ic { color: var(--danger); }
@keyframes term-tab-pulse { 50% { opacity: 0.35; } }
.tab-close { width: 22px; height: 22px; margin: 0 0 8px -30px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); position: relative; flex: none; }
.tab-close:hover { color: var(--hi); background: var(--panel-2); }
.tab-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) { .tab.term-tab[aria-busy="true"] .ic { animation: none; } }
/* Up to three terminals plus Editor: the tab list scrolls instead of running under the tools. */
.pane.ws .tabrow [role="tablist"] { flex: 1 1 auto; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.pane.ws .tabrow [role="tablist"]::-webkit-scrollbar { display: none; }
.pane.ws .tabrow .tab, .pane.ws .tabrow .tab-close, .pane.ws .tabrow .add-terminal { flex: none; }
.pane.ws .tab-tools { flex: none; }
.tab-tools { margin-left: auto; display: flex; align-items: center; gap: 2px; height: 38px; padding-bottom: 2px; }
.timer { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; padding: 0 6px; white-space: nowrap; }
.timer.warn { color: var(--amber); }
.body { flex: 1; min-height: 0; background: var(--panel); border-radius: 0 20px 20px 20px; display: flex; flex-direction: column; overflow: hidden; position: relative; }
.divider { display: flex; align-items: center; justify-content: center; cursor: col-resize; touch-action: none; }
.divider span { width: 4px; height: 36px; border-radius: 2px; background: var(--panel-3); }
.divider:hover span, .divider:focus-visible span { background: var(--accent); }
/* Connect GitHub (owner only): the lab's end offers to send the project to GitHub. */
.tp-github { margin: 18px 0 4px; padding: 14px 16px; border-radius: 14px; background: var(--panel-2); display: grid; gap: 8px; }
.tp-github p { margin: 0; color: var(--text); font-size: 13px; line-height: 1.55; }
.tp-github .tp-label { display: inline-flex; align-items: center; gap: 6px; }
.tp-github a { color: var(--accent); }
.tp-github .tp-github-note { color: var(--hi); }
.tp-github .tp-github-small { color: var(--muted); font-size: 12px; }
.tp-github .gh-push { margin: 0; padding-left: 18px; display: grid; gap: 8px; font-size: 13px; line-height: 1.55; }
.gh-setup .gh-steps { list-style: none; margin: 14px 0; padding: 0; display: grid; gap: 8px; text-align: left; }
.gh-setup .gh-steps li { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; }
.gh-setup .gh-steps li .mk { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--line-2); display: inline-grid; place-items: center; flex: none; }
.gh-setup .gh-steps li.done { color: var(--text); }
.gh-setup .gh-steps li.done .mk { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.gh-setup .gh-steps li.now { color: var(--text); }
.gh-setup .gh-steps li.now .mk { border-color: var(--accent); border-top-color: transparent; animation: gh-spin 0.9s linear infinite; }
@keyframes gh-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .gh-setup .gh-steps li.now .mk { animation: none; } }
.l-github { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 12px; padding: 12px 14px; border-radius: 12px; background: var(--panel-2); cursor: pointer; font-size: 13px; line-height: 1.5; }
.l-github input { margin-top: 3px; accent-color: var(--accent); }
.l-github .note { display: block; color: var(--muted); font-size: 12px; }
.tp-github .btn-ghost { justify-self: start; }
/* A lab machine's web app (the Git server): opens in its own browser tab. */
.web-app-tab { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text); padding: 0 10px; height: 30px; border-radius: 15px; white-space: nowrap; }
.web-app-tab:hover:not(:disabled) { background: var(--panel-2); color: var(--hi); }
.web-app-tab:disabled { opacity: 0.45; }
.web-app-tab .ic:last-child { opacity: 0.6; }
.web-app-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.stop-lab { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text); padding: 0 10px; height: 30px; border-radius: 15px; white-space: nowrap; }
.stop-lab:hover { background: var(--panel-2); color: var(--hi); }
.stop-lab i { width: 8px; height: 8px; border-radius: 2px; background: var(--danger); }

/* ---------- task ---------- */
.task { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.task-scroll { flex: 1; overflow: auto; padding: 22px 26px 12px; }
.q-head { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 22px; }
.q-label { font-size: 12px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--hi); }
.segs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; width: min(240px, 100%); }
.seg { height: 14px; display: flex; align-items: center; }
.seg i { display: block; width: 100%; height: 4px; border-radius: 2px; background: var(--panel-3); }
.seg.passed i { background: var(--hi); }
.seg.skipped i { background: repeating-linear-gradient(90deg, var(--muted) 0 3px, transparent 3px 6px); }
.seg.failed i { background: var(--amber); }
.seg.current i { height: 6px; background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent); }
.q-sum { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.task h1 { font-family: var(--display); font-size: 19px; line-height: 1.35; font-weight: 600; color: var(--hi); margin: 0 0 10px; text-wrap: balance; letter-spacing: -0.01em; }
.task p { margin: 0 0 14px; max-width: 62ch; font-size: 14.5px; }
.cmds { display: flex; flex-direction: column; gap: 8px; margin: 0 0 18px; }
.cmd { display: flex; align-items: center; gap: 8px; background: var(--inset); border: 1px solid var(--line); border-radius: 10px; padding: 0 4px 0 12px; min-height: 38px; }
.cmd code { flex: 1; min-width: 0; font-size: 13px; line-height: 1.45; color: var(--hi); padding: 8px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.cmd button { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 8px; font-size: 12px; color: var(--muted); flex: none; }
.cmd button:hover { background: var(--panel-3); color: var(--hi); }
.acceptance { margin: 0 0 18px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--panel-2); }
.acceptance .kicker { display: block; color: var(--muted); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }
.acceptance p { margin: 5px 0 0; color: var(--text); font-size: 13px; line-height: 1.45; }
.check { width: 100%; height: 44px; border-radius: 22px; background: var(--action); color: var(--action-ink); font-weight: 600; font-size: 14px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.check:hover:not(:disabled) { filter: brightness(0.92); }
.check:active:not(:disabled) { transform: scale(0.985); }
.check:disabled { background: var(--panel-3); color: var(--muted); }
.result { margin-top: 12px; border-radius: 12px; padding: 12px 14px; display: grid; grid-template-columns: 20px 1fr; gap: 4px 10px; font-size: 13px; background: var(--panel-2); }
.result strong { color: var(--hi); font-weight: 600; font-size: 13.5px; }
.result .ic { margin-top: 1px; color: var(--muted); }
.result .d { grid-column: 2; color: var(--text); }
.result .n { grid-column: 2; color: var(--muted); font-size: 12px; }
.result.fail .ic { color: var(--amber); }
.result.pass .ic { color: var(--pass); }
.result.infra .ic { color: var(--muted); }
.result .bar { grid-column: 1 / -1; height: 3px; border-radius: 2px; background: var(--panel-3); overflow: hidden; margin-top: 6px; }
.result .bar i, .ebar i { display: block; height: 100%; width: 35%; background: var(--accent); animation: slide 1.1s ease-in-out infinite; }
@keyframes slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(300%); } }
.task-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 22px 16px; border-top: 1px solid var(--line); font-size: 13px; }
.task-foot .muted { color: var(--muted); }
.task .cap-note { margin: -4px 0 12px; font-size: 12.5px; color: var(--muted); }
.result .n .ic { display: inline-flex; vertical-align: -2px; margin: 0 2px 0 0; color: var(--muted); }
.link { color: var(--hi); display: inline-flex; align-items: center; gap: 6px; font-weight: 500; white-space: nowrap; }
.link:hover { text-decoration: underline; }

/* ---------- mentor ---------- */
.mentor { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.m-top { display: flex; align-items: center; gap: 10px; padding: 12px 16px 0; }
.m-top[hidden] { display: none; }
.seg-ctl { display: inline-flex; background: var(--inset); border-radius: 9px; padding: 2px; border: 1px solid var(--line); flex: none; }
.seg-ctl button { height: 26px; padding: 0 12px; border-radius: 7px; font-size: 12px; color: var(--muted); font-weight: 500; }
.seg-ctl button[aria-pressed="true"] { background: var(--panel-3); color: var(--hi); }
.allow { margin-left: auto; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.allow.out { color: var(--amber); }
.voice { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.status { text-align: center; font-size: 13px; color: var(--hi); min-height: 20px; margin-top: 10px; }
.status.warn { color: var(--amber); }
.ctx { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; padding: 6px 16px 0; font-size: 12px; color: var(--faint); align-items: center; }
.ctx .c { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 2px 9px; color: var(--text); display: inline-flex; align-items: center; gap: 5px; max-width: 190px; }
.ctx .c span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stage-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 4px 16px 0; overflow: hidden; }
.stage { position: relative; flex: none; width: min(280px, 100%, 34vh); aspect-ratio: 1 / 1; margin-bottom: -6px; transition: width 0.35s ease; }
.voice.compact .stage { width: min(150px, 100%, 20vh); margin-bottom: 0; }
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.said { font-size: 13px; color: var(--faint); text-align: center; max-width: 32ch; flex: none; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.said:empty { display: none; }
.cap { font-size: 17px; line-height: 1.45; text-align: center; color: var(--hi); min-height: 0; max-width: 32ch; letter-spacing: -0.01em; text-wrap: balance; flex: 0 1 auto; overflow-y: auto; scrollbar-width: thin; padding: 0 4px; overflow-wrap: anywhere; }
.voice.compact .cap { font-size: 16px; }
.cap .dim { color: #55555a; }
.cap .last { color: #a1a1a6; }
.cap .soft { color: var(--muted); font-size: 15px; }
.cap-previous, .cap-current, .cap-context { display: block; }
.cap-previous { margin-bottom: 4px; color: var(--muted); font-size: 13px; opacity: 0.58; transform: translateY(-2px); animation: caption-history 0.45s ease-out both; }
.cap-current { color: var(--hi); animation: caption-arrive 0.28s ease-out both; }
.cap-context { margin-top: 6px; color: var(--muted); font-size: 12px; }
@keyframes caption-history { from { opacity: 0.8; transform: translateY(4px); } to { opacity: 0.58; transform: translateY(-2px); } }
@keyframes caption-arrive { from { opacity: 0.5; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.voice.reduce-motion .cap-previous, .voice.reduce-motion .cap-current { animation: none; transform: none; }
.chips { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; padding: 6px 16px 0; flex: none; }
.chips:empty { display: none; }
.chip { height: 32px; padding: 0 13px; border-radius: 16px; background: var(--panel-2); border: 1px solid var(--line-2); color: var(--hi); font-size: 13px; }
.chip:hover { background: var(--panel-3); }
.chips .or { font-size: 12px; color: var(--faint); align-self: center; }
.voice-interruption { margin: 8px 16px 0; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--amber) 45%, var(--line)); border-radius: 10px; background: color-mix(in srgb, var(--amber) 8%, var(--panel)); display: grid; gap: 4px; color: var(--muted); font-size: 12px; }
.voice-interruption strong { color: var(--hi); font-size: 13px; }
.voice-interruption .chips { padding: 4px 0 0; justify-content: flex-start; }
.ladder { display: flex; justify-content: center; gap: 14px; font-size: 11px; color: var(--faint); margin-top: 8px; flex: none; }
.ladder:empty { display: none; }
.ladder b { font-weight: 400; display: inline-flex; align-items: center; gap: 5px; }
.ladder b i { width: 6px; height: 6px; border-radius: 50%; background: var(--panel-3); }
.ladder b.on { color: var(--hi); }
.ladder b.on i { background: var(--accent); }
.ladder b.done i { background: #56697c; }
.controls { display: flex; justify-content: center; align-items: flex-start; gap: 6px; padding: 10px 12px 14px; margin-top: 8px; border-top: 1px solid var(--line); flex: none; }
.ctrl { display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 11px; color: var(--muted); width: 74px; white-space: nowrap; }
.ctrl button { width: 46px; height: 46px; border-radius: 23px; background: var(--panel-3); color: var(--hi); display: grid; place-items: center; transition: background 0.2s, box-shadow 0.12s; }
.ctrl button:hover:not(:disabled) { background: #303035; }
.ctrl button.off { background: var(--danger-soft); color: var(--danger); }
.ctrl button.muted { background: var(--amber-soft); color: var(--amber); }
.ctrl button.end { background: var(--danger-soft); color: var(--danger); }
.ctrl button:disabled { opacity: 0.4; }
.consent { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px 28px; gap: 12px; }
.consent .stage { width: 120px; margin: 0; }
.consent h2 { margin: 0; font-family: var(--display); font-size: 20px; color: var(--hi); font-weight: 600; letter-spacing: -0.015em; }
.consent p { margin: 0; max-width: 34ch; color: var(--text); font-size: 14px; }
.consent ul { margin: 4px 0 6px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); text-align: left; }
.consent li { display: flex; gap: 8px; align-items: flex-start; }
.consent li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-top: 7px; flex: none; }
.consent.assessment .assess-icon { width: 56px; height: 56px; border-radius: 16px; background: var(--panel-2); display: grid; place-items: center; color: var(--muted); }
.consent .warn-text { color: var(--amber); font-size: 13px; max-width: 34ch; }
.btn-primary { height: 42px; padding: 0 22px; border-radius: 21px; background: var(--hi); color: #000; font-weight: 600; }
.btn-primary:hover:not(:disabled) { filter: brightness(0.92); }
.btn-primary:disabled { opacity: 0.6; }
a.btn-primary { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.ended-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 4px; }
.back-link { gap: 4px; }
.btn-accent { height: 46px; padding: 0 30px; border-radius: 23px; background: var(--action); color: var(--action-ink); font-weight: 600; font-size: 15px; }
.btn-accent:active:not(:disabled) { transform: scale(0.985); }
.btn-accent:hover:not(:disabled) { filter: brightness(0.92); }
.btn-accent:disabled { background: var(--panel-3); color: var(--muted); }
.btn-quiet { height: 36px; padding: 0 14px; border-radius: 18px; color: var(--muted); font-size: 13px; display: inline-flex; align-items: center; text-decoration: none; }
.btn-quiet:hover { color: var(--hi); background: var(--panel-2); }
.btn-ghost { height: 38px; padding: 0 16px; border-radius: 19px; background: var(--panel-3); color: var(--hi); }
.btn-danger { height: 38px; padding: 0 16px; border-radius: 19px; background: var(--danger); color: #1a0503; font-weight: 600; }

/* chat */
.chat { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.chat-note { font-size: 12px; color: var(--muted); text-align: center; padding: 8px 16px 0; }
.chat-note:empty { display: none; }
.log { flex: 1; overflow: auto; padding: 10px 16px 6px; display: flex; flex-direction: column; gap: 12px; }
.log::before { content: ""; flex: 1 1 auto; margin-bottom: -12px; }
.msg { max-width: 88%; font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.who-user { align-self: flex-end; background: var(--panel-3); color: var(--hi); padding: 8px 12px; border-radius: 14px 14px 4px 14px; }
.msg.who-mentor { align-self: flex-start; color: var(--text); }
.msg .mentor-body { line-height: 1.55; white-space: normal; }
.msg .mentor-body p { margin: 0 0 10px; }
.msg .mentor-body p:last-child { margin-bottom: 0; }
.msg .mentor-body ul { margin: 0 0 10px; padding-left: 19px; }
.msg .mentor-body li + li { margin-top: 4px; }
.msg .mentor-body code { font: 0.91em/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--hi); background: var(--panel-2); border-radius: 4px; padding: 1px 4px; }
.msg .mentor-body pre { max-width: 100%; margin: 0 0 10px; padding: 10px 12px; overflow-x: auto; border: 1px solid var(--line-2); border-radius: 9px; background: var(--inset); }
.msg .mentor-body pre code { padding: 0; background: none; white-space: pre; }
.msg .tag { display: block; font-size: 11px; color: var(--faint); margin-bottom: 2px; }
.msg.who-user .tag { color: #8e8e93; }
.msg .typing { display: inline-flex; gap: 3px; }
.msg .typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--muted); animation: blink 1.2s infinite; }
.msg .typing i:nth-child(2) { animation-delay: 0.2s; }
.msg .typing i:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }
.suggest { display: flex; gap: 6px; flex-wrap: wrap; padding: 2px 12px 8px; }
.suggest button { height: 28px; padding: 0 11px; border-radius: 14px; background: var(--panel-2); border: 1px solid var(--line-2); color: var(--text); font-size: 12px; }
.suggest button:hover:not(:disabled) { background: var(--panel-3); color: var(--hi); }
.composer { margin: 0 12px 12px; background: var(--inset); border: 1px solid var(--line-2); border-radius: 14px; padding: 8px 8px 8px 12px; display: flex; gap: 8px; align-items: flex-end; }
.composer:focus-within { border-color: rgba(255, 255, 255, 0.3); }
.composer textarea { flex: 1; background: none; border: 0; color: var(--hi); resize: none; min-height: 22px; max-height: 120px; outline: none; }
.composer .send { width: 32px; height: 32px; border-radius: 16px; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; flex: none; }
.composer .send:disabled { background: var(--panel-3); color: var(--muted); }
.composer .stop { height: 32px; padding: 0 12px; border-radius: 16px; background: var(--panel-3); color: var(--hi); font-size: 12px; flex: none; }

/* ---------- workspace ---------- */
.ws-banner { margin: 12px 16px 0; padding: 9px 12px; border-radius: 10px; background: var(--amber-soft); color: var(--amber); font-size: 13px; display: flex; align-items: center; gap: 10px; }
.ws-banner.bad { background: var(--danger-soft); color: var(--danger); }
.ws-banner .grow { flex: 1; }
.ws-banner button { color: var(--hi); font-weight: 500; }
.term { flex: 1; min-height: 0; margin: 12px; background: var(--inset); border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; position: relative; }
.terminal-screen { flex: 1; min-height: 0; overflow: auto; padding: 12px 14px; font: 13px/1.5 var(--mono); color: var(--term-white); white-space: pre; cursor: text; outline: none; position: relative; scrollbar-width: none; }
/* Like a desktop terminal: history still scrolls by wheel, trackpad and keys, without a visible bar. */
.terminal-screen::-webkit-scrollbar { display: none; }
.terminal-screen:focus-within { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); border-radius: 12px; }
/* Pinned to the top of the terminal's visible area, so typing (which scrolls the
   caret into view) never throws a scrolled terminal back to its first line. */
.terminal-input { position: sticky; top: 0; display: block; width: 1px; height: 1px; margin: 0 0 -1px; padding: 0; border: 0; opacity: 0; overflow: hidden; resize: none; pointer-events: none; caret-color: transparent; }
.terminal-row { display: block; min-height: 1.5em; }
.terminal-cursor { background: var(--term-white); color: var(--inset); animation: terminal-cursor-blink 1.1s steps(2, jump-none) infinite; }
.terminal-screen:not(:focus-within) .terminal-cursor { background: transparent; box-shadow: inset 0 0 0 1px var(--muted); color: inherit; animation: none; }
@keyframes terminal-cursor-blink { 50% { background: transparent; color: inherit; } }
.pane-state { position: absolute; inset: 0; z-index: 6; background: rgba(10, 10, 11, 0.92); display: grid; place-items: center; text-align: center; padding: 24px; }
.pane-state .inner { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 360px; }
.pane-state h2 { margin: 0; font-family: var(--display); font-size: 18px; color: var(--hi); font-weight: 600; }
.pane-state p { margin: 0; color: var(--muted); font-size: 13.5px; }
.pane-state .ebar { width: 180px; }

/* VS Code-style editor */
.vsc { flex: 1; min-height: 0; margin: 16px; display: grid; grid-template-columns: 44px 210px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 24px; background: #1e1e1f; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); position: relative; }
.vsc-unavailable { grid-template-columns: minmax(0, 1fr); }
.vsc-unavailable .vsc-main { grid-column: 1; }
.vsc.no-side { grid-template-columns: 44px 0 minmax(0, 1fr); }
.vsc.no-side .vsc-side { visibility: hidden; }
.vsc-act { grid-row: 1; background: #161617; display: flex; flex-direction: column; align-items: center; padding-top: 4px; border-right: 1px solid var(--line); }
.vsc-act button { width: 44px; height: 42px; display: grid; place-items: center; color: #7c7c82; border-left: 2px solid transparent; border-radius: 0; }
.vsc-act button:hover:not(:disabled) { color: var(--hi); }
.vsc-act button[aria-pressed="true"] { color: var(--hi); border-left-color: var(--accent); }
.vsc-act button:disabled { opacity: 0.35; }
.vsc-side { grid-row: 1; background: #19191a; border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; min-width: 0; font-size: 13px; overflow: hidden; }
.vsc-side-h { height: 34px; flex: none; display: flex; align-items: center; padding: 0 14px; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.vsc-sec-h { display: flex; align-items: center; gap: 2px; width: 100%; height: 24px; flex: none; padding: 0 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: var(--text); text-transform: uppercase; border-radius: 0; }
.vsc-tree, .vsc-tree ul { list-style: none; margin: 0; padding: 0; }
.vsc-tree { overflow: auto; flex: 1; padding-bottom: 8px; }
.tr { display: flex; align-items: center; gap: 5px; width: 100%; height: 24px; padding-right: 10px; color: #c5c5c8; text-align: left; white-space: nowrap; border: 1px solid transparent; border-radius: 0; }
.tr:hover { background: rgba(255, 255, 255, 0.04); }
.tr.on { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.18); color: var(--hi); }
.tr .tw { width: 14px; flex: none; display: inline-grid; place-items: center; color: var(--muted); }
.tr .tw .rot { transform: rotate(-90deg); }
.tr .nm { overflow: hidden; text-overflow: ellipsis; }
.fi { font: 600 10px/1 var(--mono); width: 16px; flex: none; text-align: center; }
.dd { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #c5c5c8; margin-left: auto; flex: none; }
.vsc-main { grid-row: 1; grid-column: 3; display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; background: #1e1e1f; }
.vsc-tabs { display: flex; height: 35px; background: #19191a; overflow-x: auto; scrollbar-width: none; flex: none; }
.vt { display: flex; align-items: center; height: 35px; border-right: 1px solid rgba(0, 0, 0, 0.4); color: #8b8b90; font-size: 13px; position: relative; background: #19191a; flex: none; }
.vt.on { background: #1e1e1f; color: var(--hi); }
.vt.on::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--accent); }
.vt-open { display: flex; align-items: center; gap: 6px; height: 100%; padding: 0 4px 0 12px; color: inherit; border-radius: 0; }
.vt-x { width: 22px; height: 22px; margin-right: 6px; border-radius: 5px; display: grid; place-items: center; color: inherit; opacity: 0; }
.vt.on .vt-x, .vt:hover .vt-x, .vt-x.dirty, .vt-x:focus-visible { opacity: 1; }
.vt-x .dd { display: none; margin: 0; }
.vt-x.dirty .dd { display: block; }
.vt-x.dirty svg { display: none; }
.vt-x.dirty:hover .dd { display: none; }
.vt-x.dirty:hover svg { display: block; }
.vt-x:hover { background: rgba(255, 255, 255, 0.08); }
.vsc-crumbs { height: 24px; display: flex; align-items: center; gap: 5px; padding: 0 12px; font-size: 12px; color: #8b8b90; flex: none; white-space: nowrap; overflow: hidden; }
.vsc-crumbs .cp { display: inline-flex; align-items: center; gap: 4px; }
.cs { color: #5c5c61; }
.vsc-code { flex: 1; min-height: 0; display: flex; position: relative; }
.vsc-gutter { width: 50px; flex: none; overflow: hidden; padding: 8px 14px 8px 0; text-align: right; font: 13px/20px var(--mono); color: #6e6e73; user-select: none; }
.vsc-gutter span { display: block; }
.vsc-gutter span.on { color: #c5c5c8; }
.vsc-text { position: relative; flex: 1; min-width: 0; overflow: hidden; }
.vsc-curl { position: absolute; left: 0; right: 0; top: 8px; height: 20px; background: rgba(255, 255, 255, 0.035); box-shadow: inset 0 1px rgba(255, 255, 255, 0.04), inset 0 -1px rgba(255, 255, 255, 0.04); pointer-events: none; }
.vsc-hl, .vsc-text textarea { position: absolute; inset: 0; margin: 0; padding: 8px 18px 8px 4px; font: 13px/20px var(--mono); white-space: pre; tab-size: 2; border: 0; letter-spacing: 0; width: 100%; height: 100%; }
.vsc-hl { color: #d4d4d4; pointer-events: none; overflow: hidden; }
.vsc-text textarea { background: transparent; color: transparent; caret-color: #e4e4e7; resize: none; outline: none; overflow: auto; }
.vsc-text textarea::selection { background: rgba(38, 79, 120, 0.75); color: transparent; }
.t-k { color: #569cd6; } .t-s { color: #ce9178; } .t-a { color: #9cdcfe; } .t-n { color: #d7ba7d; } .t-f { color: #c586c0; } .t-c { color: #7c7c82; font-style: italic; }
.vsc-status { grid-column: 1 / -1; grid-row: 2; display: flex; align-items: center; gap: 14px; padding: 0 10px; font-size: 11.5px; color: #b5b5ba; background: #161617; border-top: 1px solid var(--line); white-space: nowrap; overflow: hidden; }
.vsc-status .br { display: inline-flex; align-items: center; gap: 5px; }
.vsc-status .grow { flex: 1; }
.vsc-status .err { color: var(--danger); }
.vsc-empty { position: absolute; inset: 35px 0 0; display: flex; flex-direction: column; gap: 6px; align-items: center; justify-content: center; color: var(--muted); font-size: 13px; text-align: center; background: #1e1e1f; padding: 24px; }
.vsc-empty strong { color: var(--hi); font-weight: 600; }
.vsc-empty kbd { font-size: 12px; background: var(--panel-3); border-radius: 4px; padding: 1px 5px; color: var(--text); }
/* The editor's frame: inset like the terminal, so switching tabs keeps the same edges. */
.ide-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 32px; margin: 12px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--inset); }
.ide-shell .vsc-main { grid-column: 1; }
.ide-surface { position: relative; flex: 1; min-height: 0; background: #1e1e1f; }
.ide-frame-slot { width: 100%; height: 100%; min-height: 280px; background: #1e1e1f; }
.ide-frame-host { position: fixed; display: none; z-index: 30; overflow: hidden; background: #1e1e1f; border-radius: 11px 11px 0 0; }
.ide-frame { display: block; width: 100%; height: 100%; min-height: 0; border: 0; background: #1e1e1f; color-scheme: dark; }
.ide-visual-probe { position: absolute; inset: 0 auto auto 0; width: 0; height: 0; border: 0; opacity: 0; pointer-events: none; }
.ide-frame-curtain { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; background: #1e1e1f; color: var(--muted); font-size: 13px; pointer-events: none; overflow: hidden; }
.ide-frame-loaded .ide-frame-curtain { display: none; }
/* A faint outline of the workbench that is on its way. */
.ide-load-skeleton { position: absolute; inset: 0; display: grid; grid-template-columns: 44px 220px minmax(0, 1fr); opacity: 0.55; }
.ide-load-skeleton i { display: block; height: 9px; border-radius: 4px; background: linear-gradient(90deg, rgba(255,255,255,0.035) 0%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.035) 100%); background-size: 240% 100%; animation: ide-shimmer 2.4s ease-in-out infinite; }
.sk-act { background: #161617; border-right: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; gap: 18px; padding-top: 16px; }
.sk-act i { width: 20px; height: 20px; border-radius: 6px; }
.sk-side { background: #19191a; border-right: 1px solid var(--line); padding: 44px 16px 0; display: flex; flex-direction: column; gap: 14px; }
.sk-side i, .sk-main > i { width: var(--w); }
.sk-main { padding: 0 0 0 28px; display: flex; flex-direction: column; gap: 15px; }
.sk-tabs { display: flex; gap: 2px; margin: 0 0 20px -28px; height: 35px; background: #19191a; }
.sk-tabs i { width: 120px; height: 35px; border-radius: 0; }
.sk-tabs i:first-child { background: #1e1e1f; }
@keyframes ide-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.ide-load-card { position: relative; width: min(340px, 100%); padding: 28px 28px 22px; border-radius: 20px; background: rgba(21, 19, 19, 0.92); border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); display: flex; flex-direction: column; align-items: center; text-align: center; }
.ide-load-ring { position: relative; width: 120px; height: 120px; margin-bottom: 18px; }
.ide-load-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.ide-ring-track { fill: none; stroke: rgba(255, 255, 255, 0.07); stroke-width: 6; }
.ide-ring-arc { fill: none; stroke: var(--accent); stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset 0.25s linear; }
.ide-ring-count { position: absolute; inset: 0; display: grid; place-items: center; color: var(--hi); font-family: var(--display); font-size: 34px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
/* At zero the countdown hands over to a short, open-ended spin. */
.ide-frame-curtain.is-almost .ide-ring-arc { stroke-dashoffset: 250 !important; transition: none; }
.ide-frame-curtain.is-almost .ide-load-ring svg { animation: ide-spin 1.1s linear infinite; }
@keyframes ide-spin { from { transform: rotate(-90deg); } to { transform: rotate(270deg); } }
.ide-load-title { margin: 0 0 4px; color: var(--hi); font-family: var(--display); font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.ide-load-sub { margin: 0 0 18px; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.ide-load-terminal { pointer-events: auto; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); color: var(--text); font-size: 12.5px; font-weight: 500; background: rgba(255, 255, 255, 0.04); }
.ide-load-terminal:hover { background: rgba(255, 255, 255, 0.09); color: var(--hi); }
@media (prefers-reduced-motion: reduce) {
  .ide-load-skeleton i, .ide-frame-curtain.is-almost .ide-load-ring svg { animation: none; }
  .ide-ring-arc { transition: none; }
}

.ide-bar { gap: 16px; padding: 0 12px; background: var(--panel); color: var(--muted); font-size: 12px; border-top: 1px solid var(--line); }
.ide-bar .ide-state { display: inline-flex; align-items: center; gap: 7px; color: var(--hi); font-weight: 500; }
.ide-bar .ide-state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--faint); flex: none; }
.ide-shell[data-ide-status="ready"] .ide-state::before { background: var(--pass); }
.ide-shell[data-ide-status="loading"] .ide-state::before, .ide-shell[data-ide-status="requesting"] .ide-state::before { background: var(--amber); animation: ide-dot 1.2s ease-in-out infinite; }
.ide-shell[data-ide-status="revoked"] .ide-state::before, .ide-shell[data-ide-status="unavailable"] .ide-state::before { background: var(--danger); }
@keyframes ide-dot { 50% { opacity: 0.35; } }
.ide-bar .ide-same { display: inline-flex; align-items: center; gap: 6px; }
.ide-bar [data-ide-expires] { font-variant-numeric: tabular-nums; }
@media (max-width: 1100px) { .ide-bar .ide-same { display: none; } }
.ide-surface-copy { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 6px; align-items: center; justify-content: center; padding: 24px; color: var(--muted); font-size: 13px; text-align: center; background: rgba(30, 30, 31, 0.94); pointer-events: none; }
.ide-surface-copy strong { color: var(--hi); font-weight: 600; }
.ide-attached .ide-surface-copy { display: none; }
.ide-unavailable .ide-surface { min-height: 220px; }

/* ---------- launch, setup, gates ---------- */
.gate { position: absolute; inset: 62px 0 0; z-index: 25; background: var(--canvas); display: grid; place-items: center; padding: 24px; overflow: auto; }
.gate.leaving { animation: gateOut 0.5s ease forwards; }
/* VIP design: the code rain behind the setup card; the card stays solid. */
.setup-sky { position: absolute; inset: 0; pointer-events: none; }
.setup-sky canvas { width: 100%; height: 100%; display: block; }
.gate > .setup { position: relative; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 30px 80px rgba(0, 0, 0, 0.6); }
/* VIP design: the code rain behind the setup card; the card stays solid. */
@keyframes gateOut { to { opacity: 0; transform: scale(0.985); } }
.launch { width: min(1000px, 100%); display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); background: var(--panel); border-radius: 20px; overflow: hidden; }
.l-main { padding: 34px 36px; display: flex; flex-direction: column; gap: 14px; }
.eyebrow { font-size: 12px; color: var(--muted); letter-spacing: 0.07em; text-transform: uppercase; font-weight: 600; }
.l-main h1 { margin: 0; font-family: var(--display); font-size: 30px; line-height: 1.2; color: var(--hi); font-weight: 600; letter-spacing: -0.02em; text-wrap: balance; }
.l-main p { margin: 0; max-width: 56ch; font-size: 15px; }
.facts { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 10px 30px; margin: 8px 0 4px; }
.facts div { display: flex; flex-direction: column; gap: 3px; }
.facts dt { font-size: 11px; color: var(--faint); text-transform: uppercase; letter-spacing: 0.07em; }
.facts dd { margin: 0; color: var(--hi); font-size: 14px; font-variant-numeric: tabular-nums; }
.l-act { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 10px; }
.l-act .note { font-size: 13px; color: var(--muted); }
.l-main .fine { font-size: 12.5px; color: var(--faint); }
.l-tasks { margin: 0; padding: 26px 26px 22px; background: var(--panel-2); display: flex; flex-direction: column; }
.l-tasks h2 { margin: 0 0 10px; font-size: 12px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.l-tasks ol { list-style: none; margin: 0; padding: 0; }
.l-tasks li { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; color: var(--text); }
.l-tasks li:last-child { border-bottom: 0; }
.l-tasks b { width: 22px; height: 22px; border-radius: 11px; background: var(--panel-3); color: var(--muted); display: grid; place-items: center; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.notice { width: min(460px, 100%); background: var(--panel); border-radius: 20px; padding: 30px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.notice h1 { margin: 0; font-family: var(--display); font-size: 20px; color: var(--hi); font-weight: 600; letter-spacing: -0.015em; }
.notice p { margin: 0; color: var(--text); }
.notice .ebar { width: 100%; }
.setup { width: min(820px, 100%); background: var(--panel); border-radius: 20px; display: grid; grid-template-columns: 250px minmax(0, 1fr); overflow: hidden; }
.setup-visual { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 30px 0 30px 34px; }
.setup-timer { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.setup-timer b { font-size: 26px; line-height: 1.1; font-weight: 500; color: var(--hi); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.setup-timer span { font-size: 11px; color: var(--faint); text-transform: uppercase; letter-spacing: 0.07em; font-variant-numeric: tabular-nums; }
.setup.failed .setup-timer b { color: var(--danger); font-size: 20px; }
.setup.ready .setup-timer b { color: var(--hi); font-size: 20px; }
.ring-wrap { position: relative; width: 200px; height: 200px; }
.ring-slot { position: absolute; inset: -6%; pointer-events: none; }
.ring-slot canvas { width: 100%; height: 100%; display: block; }
@keyframes ringspin { to { transform: rotate(360deg); } }
.ring-wrap .stage { position: absolute; inset: 6%; width: auto; margin: 0; aspect-ratio: auto; pointer-events: none; }
.setup-main { padding: 32px 34px 26px 26px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.setup-main .eyebrow { margin-bottom: 6px; }
.setup.failed .setup-main .eyebrow { color: var(--danger); }
.setup.ready .setup-main .eyebrow { color: var(--hi); }
.setup-main h1 { margin: 0; font-family: var(--display); font-size: 23px; line-height: 1.25; color: var(--hi); font-weight: 600; letter-spacing: -0.015em; text-wrap: balance; }
.setup-foot { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 18px 12px 34px; border-top: 1px solid var(--line); background: var(--panel-2); font-size: 13px; color: var(--muted); min-height: 60px; }
.setup-foot .elapsed { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.setup.failed .setup-foot .ic { color: var(--danger); }
.setup-foot button { white-space: nowrap; flex: none; }
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.steps li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: center; font-size: 14px; color: var(--faint); }
.steps li.now { color: var(--hi); }
.steps li.done { color: var(--text); }
.steps li.fail { color: var(--danger); }
.steps .mk { width: 18px; height: 18px; border-radius: 9px; border: 1.5px solid var(--panel-3); display: grid; place-items: center; }
.steps li.now .mk { border-color: var(--accent); border-top-color: transparent; animation: ringspin 0.9s linear infinite; }
.steps li.done .mk { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.steps li.just-done .mk { animation: checkPop 0.5s cubic-bezier(0.3, 1.6, 0.5, 1); }
@keyframes checkPop { 0% { transform: scale(0.4); } 100% { transform: scale(1); } }
.steps li.fail .mk { background: var(--danger); border-color: var(--danger); color: #1a0503; }
.steps .dt { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tip { margin: 0; padding-top: 16px; border-top: 1px solid var(--line); }
.tip blockquote { margin: 0 0 6px; font-size: 17px; line-height: 1.45; color: var(--hi); font-style: italic; text-wrap: balance; max-width: 46ch; }
.tip blockquote.long { font-size: 15.5px; }
.tip figcaption { font-size: 12px; color: var(--muted); }
.tip figcaption::before { content: "— "; }

/* ended / evidence */
.ended { position: absolute; inset: 62px 0 0; background: var(--canvas); display: grid; place-items: center; z-index: 30; overflow: auto; padding: 24px; }
.ended-card { width: min(440px, 100%); text-align: center; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.ended-card h2 { margin: 0; color: var(--hi); font-family: var(--display); font-size: 24px; font-weight: 600; letter-spacing: -0.015em; }
.ended-card p { margin: 0; color: var(--text); }
.ebar { height: 3px; width: 100%; background: var(--panel-3); border-radius: 2px; overflow: hidden; }
.rows { width: 100%; display: grid; gap: 0; margin: 8px 0; font-size: 13px; text-align: left; }
.rows div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); padding: 8px 0; font-variant-numeric: tabular-nums; }
.rows span { color: var(--muted); white-space: nowrap; }
.rows span.pass { color: var(--hi); }
.reflect { width: 100%; text-align: left; display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.reflect label { font-size: 13px; color: var(--muted); }
.reflect textarea { background: var(--inset); border: 1px solid var(--line-2); border-radius: 12px; color: var(--hi); padding: 10px 12px; resize: vertical; min-height: 64px; outline: none; }
.reflect textarea:focus { border-color: rgba(255, 255, 255, 0.3); }
.reflect .row { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 12px; color: var(--faint); }

/* dialog, toast */
.modal-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, 0.6); display: grid; place-items: center; padding: 16px; }
.modal { background: var(--panel-2); color: var(--text); border: 1px solid var(--line-2); border-radius: 16px; padding: 22px; width: min(400px, 100%); }
.modal h2 { margin: 0 0 8px; color: var(--hi); font-family: var(--display); font-size: 18px; font-weight: 600; }
.modal p { margin: 0 0 18px; font-size: 14px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; }
.modal .modal-note { margin-top: -6px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 10px; background: rgba(255, 255, 255, 0.04); color: var(--hi); font-size: 13px; }
.toast { position: fixed; top: 74px; left: 50%; transform: translateX(-50%); z-index: 45; background: var(--panel-2); border: 1px solid var(--line-2); color: var(--hi); padding: 10px 14px; border-radius: 12px; font-size: 13px; display: flex; gap: 10px; align-items: center; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5); max-width: calc(100% - 32px); }
.toast .ic { color: var(--muted); }
.toast.toast-error .ic { color: var(--danger); }
.toast.toast-success .ic { color: var(--pass); }
.toast.toast-warn .ic { color: var(--amber); }

/* fixture-only development panel */
.dev-panel { position: fixed; right: 14px; bottom: 14px; z-index: 50; width: 250px; background: #101012; border: 1px dashed rgba(255, 255, 255, 0.18); border-radius: 12px; font-size: 12px; color: var(--muted); }
.dev-panel summary { cursor: pointer; padding: 9px 12px; list-style: none; display: flex; justify-content: space-between; color: var(--text); }
.dev-panel summary::-webkit-details-marker { display: none; }
.dev-panel .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 0 10px 10px; }
.dev-panel .note { grid-column: 1 / -1; color: var(--faint); line-height: 1.4; }
.dev-panel button { min-height: 30px; border-radius: 8px; background: var(--panel-2); border: 1px solid var(--line); font-size: 11.5px; color: var(--text); padding: 2px 6px; }
.dev-panel button:hover { color: var(--hi); background: var(--panel-3); }
.dev-panel button.on { border-color: var(--accent); color: var(--accent); }
.dev-panel .wide { grid-column: 1 / -1; }

/* ---------- screens this lab does not support ---------- */
.desk-only { display: none; position: fixed; inset: 0; z-index: 100; background: var(--canvas); color: var(--text); align-items: center; justify-content: center; padding: 28px; text-align: center; }
.desk-only .card { display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 300px; }
.desk-only svg { color: var(--muted); }
.desk-only p { margin: 0; font-size: 17px; line-height: 1.45; color: var(--hi); text-wrap: balance; }

@media (max-width: 1100px) {
  .split { padding: 12px 14px 14px; }
  .launch { grid-template-columns: 1fr; }
  .setup { grid-template-columns: 1fr; }
  .setup-visual { padding: 28px 0 0; }
  .setup-main { padding: 22px 28px; }
  .setup-foot { padding-left: 28px; }
  .lab-title { max-width: 32vw; }
  .optional-tab { display: none; }
  .pane.ws .tab { padding: 0 10px; gap: 6px; }
  .pane.ws .tab.term-tab { padding-right: 30px; }
  .stop-lab .lbl { display: none; }
  .stop-lab { padding: 0 9px; }
  .top { gap: 10px; }
  .session-btn { padding: 0 8px; }
}
/* Laptops with short viewports (for example 1280×720 or 1366×768 with browser chrome): reclaim vertical space. */
@media (max-height: 820px) {
  .app-frame { grid-template-rows: 54px minmax(0, 1fr); }
  .gate, .ended { inset: 54px 0 0; }
  .menu { top: 48px; }
  .split { padding-top: 10px; padding-bottom: 12px; }
  .task-scroll { padding: 16px 22px 10px; }
  .q-head { margin-bottom: 14px; gap: 8px; }
  .task-foot { padding: 8px 22px 12px; }
  .controls { padding: 8px 12px 10px; margin-top: 4px; }
  .gate { padding: 16px; }
  .setup-visual { padding: 22px 0 22px 30px; gap: 10px; }
  .setup-main { padding: 22px 30px 18px 22px; gap: 14px; }
  .setup-foot { min-height: 52px; padding-top: 8px; padding-bottom: 8px; }
}
@media (max-width: 767px) {
  .desk-only { display: flex; }
  .app-frame, .dev-panel, .toast, .modal-backdrop { display: none !important; }
}
html.is-phone .desk-only { display: flex; }
html.is-phone .app-frame, html.is-phone .dev-panel, html.is-phone .toast, html.is-phone .modal-backdrop { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Inside the lab: VIP's design as the owner chose it (4–6 Oct); these rules are scoped by data-accent="white" ---------- */
/* Black, white and VIP red only; clear controls. */
:root[data-accent="white"] .conn i { background: var(--hi); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1); animation: conn-live 2.4s ease-in-out infinite; }
:root[data-accent="white"] .conn.warn { color: var(--text); }
:root[data-accent="white"] .conn.warn i { background: var(--hi); animation: conn-blink 0.9s steps(2, jump-none) infinite; }
:root[data-accent="white"] .conn.bad { color: #ff6b6b; }
:root[data-accent="white"] .conn.bad i { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); animation: none; }
:root[data-accent="white"] .conn.idle i { background: var(--faint); box-shadow: none; animation: none; }
@keyframes conn-live { 0%, 100% { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1); } 50% { box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.03); } }
@keyframes conn-blink { 0% { opacity: 1; } 100% { opacity: 0.25; } }
:root[data-accent="white"] .seg.current i { height: 4px; background: var(--accent); box-shadow: 0 0 10px rgba(230, 25, 25, 0.45); }
:root[data-accent="white"] .seg.failed i { background: #7a1f1f; }
:root[data-accent="white"] .timer.warn { color: #ff6b6b; }
:root[data-accent="white"] .result.pass { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); }
:root[data-accent="white"] .result.pass .ic { color: var(--hi); }
:root[data-accent="white"] .result.fail { box-shadow: inset 0 0 0 1px rgba(230, 25, 25, 0.35); }
:root[data-accent="white"] .result.fail .ic { color: var(--accent); }
:root[data-accent="white"] .ide-shell[data-ide-status="ready"] .ide-state::before { background: var(--hi); }
:root[data-accent="white"] .toast.toast-success .ic { color: var(--hi); }
:root[data-accent="white"] .stop-lab { border: 1px solid rgba(230, 25, 25, 0.45); color: var(--hi); }
:root[data-accent="white"] .stop-lab:hover { background: var(--accent-soft); }
:root[data-accent="white"] .stop-lab i { background: var(--accent); }
:root[data-accent="white"] .stop-lab .lbl { display: inline; }
:root[data-accent="white"] .tab-tools { gap: 6px; }
.link-quiet { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; }
.link-quiet:hover { color: var(--hi); }

/* Step set-up (owner, 5 Oct): the circle with the CloudTopG mark glowing inside, one quiet line, no details */
.task-scroll:has(.step-setup) { display: flex; flex-direction: column; }
.step-setup { flex: 1 0 auto; min-height: 240px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 8px 2px 24px; text-align: center; }
.step-setup-ring { position: relative; width: 132px; height: 132px; display: grid; place-items: center; }
.step-setup-ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 3px var(--panel-3); }
.step-setup-ring .glow { position: absolute; inset: 14px; border-radius: 50%; background: radial-gradient(circle, rgba(230, 25, 25, 0.38) 0%, rgba(230, 25, 25, 0.12) 45%, transparent 70%); animation: step-setup-breathe 2.6s ease-in-out infinite; }
.step-setup-ring .arc { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0deg, transparent 150deg, rgba(230, 25, 25, 0.12) 220deg, rgba(230, 25, 25, 0.6) 310deg, var(--accent) 359.5deg, transparent 360deg); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px)); animation: ringspin 1.4s linear infinite; }
.step-setup-ring .head { position: absolute; inset: 0; animation: ringspin 1.4s linear infinite; }
.step-setup-ring .head::after { content: ""; position: absolute; top: -1.5px; left: 50%; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px #fff, 0 0 16px var(--accent); }
.step-setup-ring img { position: relative; width: 64px; height: 64px; border-radius: 50%; animation: step-setup-logo 2.6s ease-in-out infinite; }
.step-setup-line { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
@keyframes step-setup-breathe { 0%, 100% { opacity: 0.55; transform: scale(0.92); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes step-setup-logo { 0%, 100% { filter: drop-shadow(0 0 6px rgba(230, 25, 25, 0.4)); transform: scale(0.98); } 50% { filter: drop-shadow(0 0 16px rgba(230, 25, 25, 0.85)); transform: scale(1.02); } }
@media (prefers-reduced-motion: reduce) { .step-setup-ring .glow, .step-setup-ring .arc, .step-setup-ring .head, .step-setup-ring img, .step-setup-ring .brand-mark-round { animation: none; } }
/* A passed task moving on (owner, 17 Oct): the set-up ring with a tick, which step passed and which
   opens next, and a bar that fills until it opens. Delays are negative (time already shown), so a
   re-render carries on where the animation was. */
.task-scroll:has(.step-advance) { display: flex; flex-direction: column; }
.step-advance { gap: 18px; }
.step-advance .step-setup-ring { animation: step-advance-in 360ms ease-out both; animation-delay: var(--advance-since, 0ms); }
.step-advance-tick { position: absolute; right: 12px; bottom: 12px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #0b0a0a; box-shadow: 0 0 0 4px var(--panel); animation: step-advance-pop 420ms cubic-bezier(0.2, 1.4, 0.4, 1) both; animation-delay: calc(var(--advance-since, 0ms) + 120ms); }
.step-advance-tick .ic { stroke-width: 2.6; }
.step-advance-text { display: grid; gap: 6px; justify-items: center; }
.step-advance-passed { margin: 0; font-size: 17px; font-weight: 600; color: var(--hi); }
.step-advance-next { max-width: 30ch; font-size: 14px; color: var(--text); }
.step-advance-bar { width: min(220px, 70%); height: 3px; border-radius: 3px; background: var(--panel-3); overflow: hidden; }
.step-advance-bar span { display: block; height: 100%; background: var(--accent); transform-origin: left; animation: step-advance-fill var(--advance-ms, 1800ms) linear both; animation-delay: var(--advance-since, 0ms); }
@keyframes step-advance-in { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: none; } }
@keyframes step-advance-pop { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: none; } }
@keyframes step-advance-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* The step that just opened slides in once. */
.task-scroll.tp-enter { animation: tp-enter 450ms cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: var(--enter-since, 0ms); }
@keyframes tp-enter { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .step-advance .step-setup-ring, .step-advance-tick, .task-scroll.tp-enter { animation: none; } }

/* ---------- VIP design (owner, 6 Oct): the task panel with richer task text, named checks, hint levels, step kinds and chapters, and a first-time tour. Shown only for the fields a lab sends. ---------- */
.tp-chapter { text-align: center; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.segs.tp-segs { display: flex; gap: 5px; width: min(280px, 100%); margin: 0 auto; align-items: center; }
.tp-segs .seg { flex: 1 1 0; min-width: 0; }
.tp-seg-gap { flex: 0 0 6px; height: 4px; }
.tp-kicker { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
.tp-context p, .tp-ask p { margin: 0 0 10px; }
.tp-context p { font-size: 14.5px; color: var(--text); }
.tp-ask { padding-left: 10px; border-left: 2px solid var(--accent); margin: 0 0 12px; }
.tp-ask p { font-size: 14px; color: var(--hi); margin-bottom: 6px; }
.tp-ask p:last-child, .tp-context p:last-child { margin-bottom: 0; }
.tp-chip { font-family: var(--mono); font-size: 12.5px; color: var(--hi); background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 5px; padding: 0 5px; overflow-wrap: anywhere; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.tp-checks, .tp-details { min-width: 0; }
.tp-list { margin: 0 0 12px; padding-left: 18px; display: grid; gap: 4px; font-size: 14px; }
.tp-list li::marker { color: var(--accent); }
.tp-nudge { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 14px; font-size: 13px; color: var(--muted); }
.tp-nudge .ic { color: var(--hi); margin-top: 2px; }
.tp-details { margin: 0 0 14px; display: grid; gap: 1px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); }
.tp-details div { display: grid; gap: 2px; padding: 7px 10px; background: var(--panel-2); font-size: 13px; }
.tp-details dt { color: var(--muted); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; }
.tp-details dd { margin: 0; color: var(--hi); overflow-wrap: anywhere; }
/* Labs with several machines (ADR 0017). */
.tp-machines { margin: 0 0 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); font-size: 13px; }
.tp-machines summary { cursor: pointer; padding: 8px 10px; color: var(--hi); list-style: none; display: flex; align-items: center; gap: 8px; }
.tp-machines summary::-webkit-details-marker { display: none; }
.tp-machines summary::before { content: "▸"; color: var(--muted); font-size: 11px; transition: transform 0.15s ease; }
.tp-machines[open] summary::before { transform: rotate(90deg); }
.tp-machines summary span { margin-left: auto; color: var(--muted); font-size: 12px; }
.tp-machines ul { margin: 0; padding: 0 10px 4px; list-style: none; display: grid; gap: 6px; }
.tp-machines li { display: grid; gap: 2px; }
.tp-machines li > span { color: var(--muted); }
.tp-machines p { margin: 6px 10px 10px; color: var(--muted); }
.tp-code { position: relative; margin: 0 0 14px; background: var(--inset); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.tp-code figcaption { padding: 6px 10px 0; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.tp-code pre { margin: 0; padding: 8px 10px 10px; white-space: pre-wrap; overflow-wrap: anywhere; font: 12.5px/1.55 var(--mono); color: var(--hi); }
.tp-code.expected { border-style: dashed; border-color: var(--line-2); background: transparent; }
.tp-code.expected pre { color: var(--text); }
.tp-code.code pre { padding-right: 62px; }
.tp-copy { position: absolute; top: 6px; right: 6px; height: 24px; padding: 0 9px; border-radius: 12px; font-size: 11.5px; color: var(--muted); background: var(--panel-2); border: 1px solid var(--line); }
.tp-copy:hover { color: var(--hi); }
.task.tp .check { margin-top: 4px; }

/* named checks */
.tp-checks { margin-top: 12px; border-radius: 12px; background: var(--panel-2); padding: 10px 12px; }
.tp-checks.fail { box-shadow: inset 0 0 0 1px rgba(230, 25, 25, 0.35); }
.tp-checks.pass { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); }
.tp-checks-head { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; font-weight: 600; color: var(--hi); margin-bottom: 6px; }
.tp-checks-head span { font-weight: 400; color: var(--muted); }
.tp-checks ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.tp-check { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 2px 8px; align-items: start; padding: 5px 0; font-size: 13px; color: var(--text); }
.tp-check .mk { width: 16px; height: 16px; margin-top: 1px; border-radius: 50%; border: 1.5px solid var(--panel-3); display: grid; place-items: center; font-size: 11px; color: var(--muted); }
.tp-check.running .mk { border-color: var(--accent); border-top-color: transparent; animation: ringspin 0.9s linear infinite; animation-delay: calc(var(--i) * 120ms); }
.tp-check.pass .mk { background: var(--hi); border-color: var(--hi); color: var(--canvas); }
.tp-check.fail .mk { background: var(--accent); border-color: var(--accent); color: #fff; }
.tp-check.fail .nm { color: var(--hi); }
.tp-check.skip { color: var(--faint); }
.tp-check.skip .mk { border-style: dashed; }
.tp-check .nm small { display: block; font-size: 11.5px; color: var(--faint); }
.tp-check .why { grid-column: 2; font-size: 12.5px; color: var(--text); background: rgba(230, 25, 25, 0.08); border-radius: 8px; padding: 7px 9px; margin-top: 4px; }
.tp-check .why p { margin: 0; }
.tp-fail-hint { margin-top: 8px; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 15px; background: var(--panel-3); color: var(--hi); font-size: 12.5px; }
.tp-fail-hint:hover { background: #343030; }

/* hint levels */
.tp-hints-head { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--hi); }
.tp-hints-head .c { margin-left: auto; font-weight: 400; color: var(--muted); font-size: 12px; }
.task .tp-hints-note { margin: 2px 0 0; font-size: 11.5px; color: var(--faint); }

/* welcome, lesson, choice, wrap-up */
.tp-uses { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; }
.tp-use { font-size: 12px; color: var(--text); border: 1px solid var(--line-2); border-radius: 999px; padding: 3px 10px; }
.tp-options { display: grid; gap: 8px; margin: 4px 0 14px; }
.tp-option { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: center; text-align: left; padding: 10px 12px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); font-size: 13.5px; color: var(--hi); }
.tp-option:hover:not(:disabled) { border-color: rgba(255, 255, 255, 0.3); }
.tp-option:disabled { cursor: default; }
.tp-option .mk { width: 24px; height: 24px; border-radius: 12px; background: var(--panel-3); display: grid; place-items: center; font-size: 11px; font-weight: 600; color: var(--muted); }
.tp-option.right { border-color: rgba(255, 255, 255, 0.5); }
.tp-option.right .mk { background: var(--hi); color: var(--canvas); }
.tp-option.wrong { border-color: rgba(230, 25, 25, 0.6); }
.tp-option.wrong .mk { background: var(--accent); color: #fff; }
.tp-option.dim { opacity: 0.5; }
.tp-explain { margin: 0 0 12px; font-size: 13.5px; padding: 10px 12px; border-radius: 10px; background: var(--panel-2); }
.tp-explain.right { box-shadow: inset 2px 0 0 var(--hi); }
.tp-explain.wrong { box-shadow: inset 2px 0 0 var(--accent); }
.tp-explain b { color: var(--hi); }
.tp-wrap { display: flex; flex-direction: column; }
.tp-results { list-style: none; margin: 0 0 4px; padding: 0; display: grid; gap: 2px; }
.tp-results li { display: grid; grid-template-columns: 20px 1fr auto; gap: 10px; align-items: center; padding: 7px 10px; border-radius: 8px; background: var(--panel-2); font-size: 13px; color: var(--text); }
.tp-results .mk { width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; color: var(--faint); }
.tp-results li.pass .mk { background: var(--hi); color: var(--canvas); }
.tp-results .s { font-size: 12px; color: var(--muted); }
.tp-wrap-actions { display: grid; gap: 4px; }
.tp-wrap-actions .btn-quiet { justify-content: center; }

/* first-time tour */
#lab-tour { position: fixed; inset: 0; z-index: 200; }
.tp-tour-spot { position: fixed; border-radius: 16px; box-shadow: 0 0 0 9999px rgba(5, 4, 4, 0.72), 0 0 0 2px var(--accent); transition: all 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); pointer-events: none; }
.tp-tour-card { position: fixed; background: var(--panel); border: 1px solid var(--line-2); border-radius: 16px; padding: 16px 16px 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); transition: all 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); }
.tp-tour-count { font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.tp-tour-card h2 { margin: 6px 0 6px; font: 600 18px/1.3 var(--display); color: var(--hi); }
.tp-tour-card p { margin: 0 0 12px; font-size: 13.5px; color: var(--text); }
.tp-tour-card .tp-tour-keys { margin-top: -4px; font-size: 12px; color: var(--muted); }
.tp-tour-dots { display: flex; gap: 5px; margin-bottom: 10px; }
.tp-tour-dots i { width: 6px; height: 6px; border-radius: 3px; background: var(--panel-3); }
.tp-tour-dots i.on { width: 16px; background: var(--hi); }
.tp-tour-actions { display: flex; align-items: center; gap: 4px; }
.tp-tour-actions .grow { flex: 1; }
.tp-tour-actions .btn-primary { height: 36px; padding: 0 16px; font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .tp-tour-spot, .tp-tour-card { transition: none; } }

/* Hint and Solution tabs beside Task (6 Oct): compact so three tabs, the clock and expand fit at 280px and up */
.pane.left .tabrow.tp-tabs [role="tablist"] { flex: 1 1 auto; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.pane.left .tabrow.tp-tabs [role="tablist"]::-webkit-scrollbar { display: none; }
.pane.left .tabrow.tp-tabs .tab { flex: none; padding: 0 10px; gap: 5px; }
.pane.left .tabrow.tp-tabs .timer { padding: 0 4px; }
.pane.left .tabrow.tp-tabs .tab-tools { flex: none; }
/* With the Mentor on, a task with hints has four tabs (owner, 15 Oct: all four named): the tabs are words only, a little closer together, and the time left sits in a small pill, so all four fit beside the tools at the default width. */
.pane.left .tabrow.tp-tabs.with-mentor .tab { padding: 0 9px; gap: 4px; }
.pane.left .tabrow.tp-tabs.with-mentor .tab .ic { display: none; }
.pane.left .tabrow.tp-tabs.with-mentor .timer { height: 24px; margin-bottom: 5px; padding: 0 8px; border-radius: 12px; background: rgba(255, 255, 255, 0.06); font-size: 12px; }
.pane.left .tabrow.tp-tabs.with-mentor .timer .ic { display: none; }
.tab.locked { color: var(--faint); }
.tab.locked .ic { color: var(--faint); }
.tp-help h1 { margin-bottom: 14px; }
.task .tp-help-note { display: flex; align-items: flex-start; gap: 7px; margin: 14px 0 0; font-size: 12.5px; color: var(--muted); }
.tp-help-note .ic { margin-top: 2px; flex: none; }
.tp-help-note b { color: var(--hi); font-weight: 600; font-variant-numeric: tabular-nums; }
.tp-lock { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 28px 6px 8px; }
.tp-lock-ring { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 14px; color: var(--hi); background: var(--panel-2); box-shadow: inset 0 0 0 1.5px var(--line-2), 0 0 24px rgba(230, 25, 25, 0.18); }
.tp-lock h1 { margin: 0 0 8px; font-variant-numeric: tabular-nums; }
.task .tp-lock p { margin: 0 0 18px; font-size: 13.5px; color: var(--text); max-width: 280px; }
.tp-lock .check { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.tp-solution { border-radius: 12px; background: var(--panel-2); padding: 12px 13px; box-shadow: inset 2px 0 0 var(--hi); }
.tp-solution p { margin: 0 0 8px; font-size: 13.5px; }
.tp-solution > :last-child { margin-bottom: 0; }
.task-foot .link .ic { margin-right: 2px; }

/* Feedback when a lab ends (6 Oct): one tap, optional tags and note */
.lab-fb { width: 100%; margin-top: 4px; padding: 16px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; align-items: center; }
.lab-fb h3 { margin: 0; font: 600 16px/1.3 var(--display); color: var(--hi); }
.fb-rate { height: 38px; padding: 0 16px; border-radius: 19px; border: 1px solid var(--line-2); background: var(--panel-2); color: var(--hi); font-size: 13.5px; font-weight: 500; }
.fb-rate:hover { border-color: rgba(255, 255, 255, 0.32); }
.fb-rate.on { background: var(--hi); border-color: var(--hi); color: var(--canvas); }
.fb-rate[data-rate="problems"].on { background: var(--accent); border-color: var(--accent); color: #fff; }
.fb-tag { height: 30px; padding: 0 12px; border-radius: 15px; border: 1px solid var(--line-2); color: var(--text); font-size: 12.5px; }
.fb-tag:hover { color: var(--hi); border-color: rgba(255, 255, 255, 0.3); }
.fb-tag[aria-pressed="true"] { background: var(--panel-3); border-color: rgba(255, 255, 255, 0.45); color: var(--hi); }
.fb-note { width: 100%; display: flex; gap: 6px; }
.fb-note input { flex: 1; min-width: 0; height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--inset); color: var(--hi); font: inherit; font-size: 13px; }
.fb-note input:focus { outline: none; border-color: rgba(255, 255, 255, 0.35); }
.fb-note .btn-ghost { height: 36px; flex: none; }
.ended-card .fb-done { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }

/* The ended screen, easy to read (6 Oct): score on top, results list, feedback card, actions side by side */
.ended-card.ec { width: min(520px, 100%); gap: 22px; align-items: stretch; text-align: left; padding: 8px 0 24px; }
.ec-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.ec-score { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 4px; background: var(--panel-2); color: var(--hi); font: 600 18px/1 var(--display); font-variant-numeric: tabular-nums; box-shadow: inset 0 0 0 1.5px var(--line-2); }
.ec-score.full { background: var(--hi); color: var(--canvas); box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.06), 0 0 26px rgba(230, 25, 25, 0.35); }
.ended-card.ec h2 { font-size: 26px; }
.ended-card.ec .ec-head p { max-width: 420px; font-size: 14px; line-height: 1.55; color: var(--text); }
.ec-head p b { color: var(--hi); font-weight: 600; }
.ec-block { display: grid; gap: 8px; }
.ec-label { font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.ec-results { list-style: none; margin: 0; padding: 4px; display: grid; gap: 2px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); }
.ec-results li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 10px; font-size: 14px; color: var(--text); }
.ec-results li + li { box-shadow: inset 0 1px 0 var(--line); }
.ec-results .mk { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--panel-3); }
.ec-results li.pass .mk { background: var(--hi); color: var(--canvas); box-shadow: none; }
.ec-results li.skip .mk { box-shadow: none; border: 1.5px dashed var(--panel-3); }
.ec-results li.pass .t { color: var(--hi); }
.ec-results .s { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.ec-results li.pass .s { color: var(--hi); }
.lab-fb.fb2 { align-items: stretch; gap: 14px; padding: 18px; margin: 0; }
.fb2-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.fb2-head h3 { margin: 0; font: 600 17px/1.3 var(--display); color: var(--hi); }
.fb2-state { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted); }
.fb2-state.saved { color: var(--hi); }
.fb2-rates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fb2-rates .fb-rate { height: 44px; padding: 0 8px; border-radius: 12px; font-size: 13.5px; }
.fb2-more { display: grid; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.fb2-sub { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 13.5px; font-weight: 600; color: var(--hi); }
.fb2-sub span { font-size: 12.5px; font-weight: 400; color: var(--muted); }
.fb2-tags { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.fb2-tags .fb-tag { height: 38px; padding: 0 12px; border-radius: 10px; font-size: 13px; text-align: left; display: inline-flex; align-items: center; gap: 7px; background: var(--panel-2); border-color: var(--line); }
.fb2-tags .fb-tag[aria-pressed="true"] { background: var(--panel-3); border-color: rgba(255, 255, 255, 0.5); color: var(--hi); }
.fb2 .fb-note input { height: 40px; }
.fb2 .fb-note .btn-ghost { height: 40px; }
.ended-card.ec .fb-done { justify-content: flex-start; color: var(--text); overflow-wrap: anywhere; }
.ended-card.ec .ended-actions { margin-top: 2px; gap: 10px; }
.ended-card.ec .ended-actions .btn-quiet { height: 42px; padding: 0 20px; border-radius: 21px; border: 1px solid var(--line-2); color: var(--hi); }
.ended-card.ec .ended-actions .btn-quiet:hover { border-color: rgba(255, 255, 255, 0.35); }
@media (max-width: 520px) { .fb2-rates { grid-template-columns: 1fr; } .fb2-tags { grid-template-columns: 1fr; } }
/* Feedback card with faces (owner, 6 Oct: "improve the feedback card too"). */
.lab-fb.fb3 { background: #000; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 16px; padding: 18px 18px 16px; }
.lab-fb.fb3 .fb2-rates .fb-rate { height: auto; min-height: 84px; padding: 12px 8px 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border-radius: 14px; background: #0d0d0d; border: 1px solid rgba(255, 255, 255, 0.12); color: var(--hi); font-size: 13px; font-weight: 500; transition: border-color 0.15s, background 0.15s, transform 0.15s; }
.lab-fb.fb3 .fb2-rates .fb-rate .ic { color: var(--muted); transition: color 0.15s, transform 0.15s; }
.lab-fb.fb3 .fb2-rates .fb-rate:hover { border-color: rgba(255, 255, 255, 0.32); background: #141414; }
.lab-fb.fb3 .fb2-rates .fb-rate:hover .ic { color: var(--hi); transform: scale(1.08); }
.lab-fb.fb3 .fb2-rates .fb-rate.on[data-rate] { background: var(--hi); border-color: var(--hi); color: #000; }
.lab-fb.fb3 .fb2-rates .fb-rate.on[data-rate] .ic { color: #000; }
.lab-fb.fb3 .fb2-rates .fb-rate:focus-visible, .lab-fb.fb3 .fb-tag:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.6); outline-offset: 2px; }
.lab-fb.fb3 .fb2-more { border-top-color: rgba(255, 255, 255, 0.08); }
.lab-fb.fb3 .fb2-tags .fb-tag { height: 40px; border-radius: 12px; background: #0d0d0d; border-color: rgba(255, 255, 255, 0.12); color: var(--text); }
.lab-fb.fb3 .fb2-tags .fb-tag:hover { border-color: rgba(255, 255, 255, 0.3); color: var(--hi); }
.lab-fb.fb3 .fb2-tags .fb-tag[aria-pressed="true"] { background: var(--hi); border-color: var(--hi); color: #000; font-weight: 500; }
.lab-fb.fb3 .fb-note { gap: 8px; }
.lab-fb.fb3 .fb-note input { height: 40px; padding: 0 14px; border-radius: 20px; border-color: rgba(255, 255, 255, 0.16); background: #0d0d0d; }
.lab-fb.fb3 .fb-note input:focus { border-color: rgba(255, 255, 255, 0.4); }
.lab-fb.fb3 .fb-send { height: 40px; min-width: 76px; padding: 0 18px; font-size: 13.5px; flex: none; }
.lab-fb.fb3 .fb-send:disabled { opacity: 1; background: #1f1f1f; color: #6f6f6f; }
@media (max-width: 520px) { .lab-fb.fb3 .fb2-rates { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lab-fb.fb3 .fb2-rates .fb-rate { min-height: 76px; font-size: 12px; } }
.ec-body { display: grid; gap: 22px; align-items: start; }
@media (min-width: 980px) {
  .ended-card.ec:has(.ec-body.two) { width: min(940px, 100%); }
  .ec-body.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 20px; }
}

/* The Task card in black (owner, 6 Oct): the left pane's card, its selected tab and the boxes inside in neutral greys, not warm. */
:root[data-accent="white"] .app-frame .pane.left { --panel: #000; --panel-2: #141414; --panel-3: #262626; --inset: #0a0a0a; --line: rgba(255, 255, 255, 0.09); --line-2: rgba(255, 255, 255, 0.15); --muted: #b3b3b3; --faint: #8f8f8f; }


/* Solution as steps in a terminal look (owner, 6 Oct). Short commands can't be copied or selected: students type them. */
.tp-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.tp-step { display: grid; gap: 8px; }
.tp-step-head { display: flex; align-items: baseline; gap: 9px; }
.tp-step-n { flex: none; font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.tp-step-t { font-size: 14px; font-weight: 600; color: var(--hi); }
.tp-term { position: relative; margin: 0; border-radius: 10px; background: #050505; border: 1px solid var(--line-2); overflow: hidden; }
.tp-term pre { margin: 0; padding: 10px 12px; white-space: pre-wrap; overflow-wrap: anywhere; font: 13px/1.6 var(--mono); color: var(--hi); }
.tp-term .ps { color: #87d7ff; }
.tp-term .out { color: #a3a3a3; }
.tp-term:has(.tp-copy) pre { padding-right: 62px; }
.task .tp-step-why { margin: 0; font-size: 13px; line-height: 1.55; color: var(--text); }
.tp-step-why b { color: var(--hi); font-weight: 600; }
.tp-term.no-copy pre, .tp-code.no-copy pre, .tp-chip { -webkit-user-select: none; user-select: none; }
.tp-code.code.no-copy pre { padding-right: 10px; }

/* Task text laid out to read line by line (owner, 6 Oct): what's going on, then "Your task" as numbered lines, then a tip, with room between them; lighter code chips. */
.task.tp h1 { margin-bottom: 12px; }
.tp-context { margin: 0 0 20px; }
.tp-context p { font-size: 14.5px; line-height: 1.65; color: #cfcfcf; }
.tp-ask { padding: 0; border-left: 0; margin: 0 0 18px; }
.tp-label { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.tp-ask p { font-size: 15px; line-height: 1.6; color: var(--hi); }
.tp-olist { list-style: none; counter-reset: ask; margin: 0; padding: 0; display: grid; gap: 12px; }
.tp-olist li { counter-increment: ask; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 11px; align-items: start; font-size: 15px; line-height: 1.55; color: var(--hi); }
.tp-olist li::before { content: counter(ask); width: 22px; height: 22px; border-radius: 50%; background: var(--panel-3); color: var(--hi); font-size: 12px; font-weight: 600; display: grid; place-items: center; margin-top: 1px; }
.tp-nudge { margin: 0 0 18px; padding: 10px 12px; border-radius: 10px; background: var(--panel-2); font-size: 13px; line-height: 1.55; color: var(--text); }
.tp-nudge .ic { color: var(--hi); margin-top: 2px; flex: none; }
.tp-nudge b { color: var(--hi); font-weight: 600; margin-right: 6px; }
.tp-chip { border: 0; background: rgba(255, 255, 255, 0.09); padding: 1px 5px; font-size: 0.88em; }

/* No red inside the lab (owner, 6 Oct: "go with white"), except End session; the setup screen and the step set-up circle keep their red. */
:root[data-accent="white"] .app-frame, :root[data-accent="white"] #lab-tour { --accent: #faf8f8; --accent-soft: rgba(255, 255, 255, 0.12); --danger: #ececec; --danger-soft: rgba(255, 255, 255, 0.08); }
:root[data-accent="white"] .gate, :root[data-accent="white"] .step-setup, :root[data-accent="white"] .stop-lab, :root[data-accent="white"] .menu .danger { --accent: #e61919; --accent-soft: rgba(230, 25, 25, 0.14); --danger: #ff7a70; --danger-soft: rgba(240, 115, 107, 0.14); }
:root[data-accent="white"] .seg.current i { height: 4px; background: var(--hi); box-shadow: 0 0 10px rgba(255, 255, 255, 0.28); }
:root[data-accent="white"] .seg.passed i { background: rgba(255, 255, 255, 0.5); }
:root[data-accent="white"] .seg.failed i { background: rgba(255, 255, 255, 0.24); }
:root[data-accent="white"] .conn.bad, :root[data-accent="white"] .timer.warn { color: var(--hi); }
:root[data-accent="white"] .conn.bad i { background: var(--hi); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15); }
:root[data-accent="white"] .result.fail, :root[data-accent="white"] .tp-checks.fail { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22); }
:root[data-accent="white"] .tp-check.fail .mk, :root[data-accent="white"] .tp-option.wrong .mk { background: transparent; border: 1.5px solid var(--hi); color: var(--hi); }
:root[data-accent="white"] .tp-check .why { background: rgba(255, 255, 255, 0.06); }
:root[data-accent="white"] .tp-option.wrong { border-color: rgba(255, 255, 255, 0.35); }
:root[data-accent="white"] .ec-score.full { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.06), 0 0 24px rgba(255, 255, 255, 0.16); }
:root[data-accent="white"] .tp-lock-ring { box-shadow: inset 0 0 0 1.5px var(--line-2), 0 0 24px rgba(255, 255, 255, 0.1); }
:root[data-accent="white"] .fb-rate[data-rate="problems"].on { color: var(--canvas); }
:root[data-accent="white"] .tp-tour-spot { box-shadow: 0 0 0 9999px rgba(5, 4, 4, 0.72), 0 0 0 2px var(--hi); }

/* Swap sides (owner, 6 Oct): the terminal on the left and the task on the right; a round button on the line between them. */
.split.swapped { grid-template-columns: minmax(0, 1fr) 24px var(--left); }
.split.swapped > .pane.ws { order: 1; }
.split.swapped > .divider { order: 2; }
.split.swapped > .pane.left { order: 3; }
.split.swapped.expand-ws { grid-template-columns: minmax(0, 1fr) 0 0; }
.split.swapped.expand-task { grid-template-columns: 0 0 minmax(0, 1fr); }
.divider { position: relative; }
.swap-sides { position: absolute; top: 50%; left: 50%; z-index: 2; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #0b0a0a; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.55); cursor: pointer; opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(0.8); transition: opacity 0.15s ease, transform 0.15s ease; }
.divider:hover .swap-sides, .divider:focus-within .swap-sides, .divider.show-swap .swap-sides { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.swap-sides:hover { transform: translate(-50%, -50%) scale(1.08); }
.swap-sides:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .swap-sides { transition: none; } }

/* No grip on the divider (owner, 6 Oct); hovering it still shows the resize cursor and the swap button, and dragging still resizes. */
:root[data-accent="white"] .divider span { display: none; }

/* The Hint tab laid out for reading (owner, 6 Oct): the task on top, hints as short lines, commands in the terminal look, file names in plain monospace. */
.hl2-recap { padding: 12px 14px; border-radius: 12px; background: var(--panel-2); margin: 2px 0 24px; }
.hl2-recap .tp-label { margin-bottom: 8px; }
.task .hl2-recap p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--text); }
.hl2-recap .tp-olist { gap: 6px; }
.hl2-recap .tp-olist li { grid-template-columns: 18px minmax(0, 1fr); gap: 9px; font-size: 13.5px; color: var(--text); }
.hl2-recap .tp-olist li::before { width: 18px; height: 18px; font-size: 11px; }
.hl2-hint { margin: 0 0 24px; }
.hl2-hint .tp-label { margin-bottom: 10px; }
.hl2-body { display: grid; gap: 8px; }
.task .hl2-body p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--hi); max-width: none; }
.hl2-body .tp-term { margin: 2px 0; }
.hl2 .tp-chip { background: transparent; padding: 0; border-radius: 0; font-size: 0.92em; color: var(--hi); }
.hl2-more { width: 100%; display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line-2); background: transparent; color: var(--hi); font-size: 14px; text-align: left; }
.hl2-more:hover { border-color: rgba(255, 255, 255, 0.35); background: var(--panel-2); }
.task .hl2-note { display: flex; align-items: center; gap: 6px; margin: 10px 2px 0; font-size: 12.5px; color: var(--muted); }
.hl2-note b { color: var(--hi); font-weight: 600; font-variant-numeric: tabular-nums; }

/* The solution lock sits in the middle of the panel, a little above centre (owner, 6 Oct: "too much space below"). */
.tp-help .task-scroll:has(> .tp-lock) { display: flex; flex-direction: column; }
.tp-lock { flex: 1 0 auto; justify-content: center; padding: 16px 6px 56px; }

/* Commands in a small terminal window with a soft glow (owner, 6 Oct: look 8, "4 and 7" of the command box sample). */
:root[data-accent="white"] .tp-term { background: #0b0b0b; border-color: rgba(255, 255, 255, 0.22); box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.03), 0 6px 22px rgba(255, 255, 255, 0.06); }
:root[data-accent="white"] .tp-term::before { content: "terminal"; display: flex; align-items: center; height: 26px; padding: 0 12px 0 62px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); font: 11px var(--mono); color: #8a8a8a; background: radial-gradient(circle at 16px 13px, #4a4a4a 4px, transparent 4.5px), radial-gradient(circle at 30px 13px, #4a4a4a 4px, transparent 4.5px), radial-gradient(circle at 44px 13px, #4a4a4a 4px, transparent 4.5px), #121212; }
:root[data-accent="white"] .tp-term .tp-copy { top: 32px; }

/* The tour, animated (owner, 6 Oct): spot, card and a cursor glide to each part; a click ring on buttons and tabs. Cards in black. */
.tp-tour-spot { transition: left 0.75s cubic-bezier(0.65, 0, 0.35, 1), top 0.75s cubic-bezier(0.65, 0, 0.35, 1), width 0.75s cubic-bezier(0.65, 0, 0.35, 1), height 0.75s cubic-bezier(0.65, 0, 0.35, 1); }
.tp-tour-card { background: #000; border-color: rgba(255, 255, 255, 0.16); transition: left 0.6s cubic-bezier(0.65, 0, 0.35, 1) 0.1s, top 0.6s cubic-bezier(0.65, 0, 0.35, 1) 0.1s; }
.tp-tour-dots i { background: #2a2a2a; }
.tp-tour-cursor { position: fixed; z-index: 3; width: 24px; height: 24px; margin: -3px 0 0 -5px; pointer-events: none; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.6)); transition: left 0.8s cubic-bezier(0.65, 0, 0.35, 1), top 0.8s cubic-bezier(0.65, 0, 0.35, 1); }
.tp-tour-click { position: fixed; z-index: 2; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; border: 2px solid #fff; opacity: 0; pointer-events: none; }
.tp-tour-click.go { animation: tour-click 0.65s ease-out; }
@keyframes tour-click { 0% { opacity: 0.9; transform: scale(0.3); } 100% { opacity: 0; transform: scale(1.35); } }
@media (prefers-reduced-motion: reduce) { .tp-tour-cursor, .tp-tour-spot, .tp-tour-card { transition: none; } }

/* Floating cards in black too (owner, 6 Oct): the session menu and the confirm dialogs. */
:root[data-accent="white"] .menu { background: #000; border-color: rgba(255, 255, 255, 0.14); }
:root[data-accent="white"] .menu button:hover:not(:disabled), :root[data-accent="white"] .menu button:focus-visible, :root[data-accent="white"] .menu .menu-link:hover, :root[data-accent="white"] .menu .menu-link:focus-visible { background: #1c1c1c; }
:root[data-accent="white"] .modal { background: #000; border-color: rgba(255, 255, 255, 0.14); }

/* The session menu (owner, 6 Oct): who and how it's going, sections, warnings under risky items, the sides switch, shortcuts. */
.menu.sm { width: 312px; padding: 8px; }
.sm-head { display: flex; align-items: center; gap: 11px; padding: 8px 10px 10px; }
.sm-avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #1f1f1f; color: var(--hi); font-weight: 600; font-size: 14px; flex: none; }
.sm-who { display: grid; min-width: 0; }
.sm-who b { color: var(--hi); font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-who span { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-progress { display: grid; gap: 6px; padding: 0 10px 10px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.sm-bar { height: 4px; border-radius: 2px; background: #262626; overflow: hidden; }
.sm-bar i { display: block; height: 100%; border-radius: 2px; background: var(--hi); }
.sm-label { padding: 8px 10px 4px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.menu.sm button, .menu.sm .sm-row { align-items: flex-start; }
.menu.sm button .ic, .menu.sm .sm-row .ic { margin-top: 1px; flex: none; }
.sm-t { display: grid; gap: 1px; text-align: left; }
.sm-t small { font-size: 11.5px; color: var(--faint); font-weight: 400; }
.menu.sm .sm-row { display: flex; gap: 10px; }
.menu.sm .sm-row span { grid-column: auto; font-size: 13px; color: inherit; }
.menu.sm .sm-row .sm-t small { font-size: 11.5px; color: var(--faint); }
.menu.sm .sm-alert { background: rgba(255, 255, 255, 0.07); margin-bottom: 2px; color: var(--hi); }
.sm-switch { margin-left: auto; width: 30px; height: 18px; border-radius: 9px; background: #333; position: relative; flex: none; align-self: center; transition: background 0.15s; }
.sm-switch i { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #9a9a9a; transition: transform 0.15s, background 0.15s; }
.sm-switch.on { background: var(--hi); }
.sm-switch.on i { transform: translateX(12px); background: #0b0a0a; }
.sm-keys { display: flex; gap: 10px; padding: 8px 10px; font-size: 13px; color: var(--text); }
.sm-keys .ic { margin-top: 1px; flex: none; }
.sm-keylist { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 5px; font-size: 11.5px; color: var(--muted); }
.sm-key { display: inline-flex; align-items: center; gap: 4px; }
.sm-key kbd { font: 10.5px var(--mono); color: var(--hi); background: #1c1c1c; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 4px; padding: 0 4px; }
@media (prefers-reduced-motion: reduce) { .sm-switch, .sm-switch i { transition: none; } }

/* Report a problem */
.modal.report { width: min(420px, 100%); }
.rp-kinds { display: grid; gap: 8px; margin: 0 0 14px; }
.rp-kind { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.14); background: #0f0f0f; color: var(--hi); font-size: 13.5px; text-align: left; }
.rp-kind:hover { border-color: rgba(255, 255, 255, 0.32); }
.rp-kind.on { background: #1f1f1f; border-color: rgba(255, 255, 255, 0.55); }

/* Short code chips never break mid-command (owner saw "sudo nginx -" / "t"); long ones wrap at
   spaces and after a path's slashes, so they stay inside a narrow panel. */
.tp-chip { white-space: nowrap; }
.tp-chip.long { white-space: normal; }

/* Tour preview of the Hint and Solution tabs on steps that don't have them. */
.tab.tour-ghost { cursor: default; opacity: 0.85; }

/* One-time tips (owner, 6 Oct): a small black bubble by the feature, a cursor that glides to it and clicks, gone on its own. */
.lab-tip { position: fixed; z-index: 190; background: #000; color: var(--text); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 14px; padding: 12px 14px 8px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6); animation: lab-tip-in 0.25s ease-out; }
.lab-tip b { display: block; color: var(--hi); font-size: 13.5px; margin-bottom: 4px; }
.lab-tip p { margin: 0 0 6px; font-size: 12.5px; line-height: 1.5; }
.lab-tip .btn-quiet { height: 28px; padding: 0 8px; margin-left: -8px; font-size: 12px; color: var(--hi); }
@keyframes lab-tip-in { from { opacity: 0; transform: translateY(4px); } }
.lab-tip-cursor, .lab-tip-click { z-index: 191; }
.lab-tip-cursor.gone { opacity: 0; transition: opacity 0.4s; }
@media (prefers-reduced-motion: reduce) { .lab-tip { animation: none; } }

/* The top-left (owner, 6 Oct): the red cloud mark with "Cloud Top G Labs" in white (not a link), and the lab's name opens the task list. */
.brand2 { gap: 9px; }
.brand2 img { width: 28px; height: 28px; border-radius: 50%; flex: none; }
.brand-mark { width: 22px; height: 22px; border-radius: 7px; background: var(--hi); color: #000; display: grid; place-items: center; font-size: 12px; font-weight: 600; flex: none; }
.brand-mark-round { width: var(--mark, 28px); height: var(--mark, 28px); border-radius: 50%; font: 700 calc(var(--mark, 28px) * 0.5)/1 var(--display); }
.step-setup-ring .brand-mark-round { position: relative; animation: step-setup-logo 2.6s ease-in-out infinite; }
.brand2 .brand-name { color: var(--hi); font: 600 15.5px/1 var(--display); letter-spacing: -0.01em; }
.brand2 .brand-name span { font-weight: 500; color: #cfcfcf; }
.lab-title-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 8px 0 10px; margin-left: -10px; border-radius: 9px; color: var(--hi); font-size: 15px; max-width: 42vw; }
.lab-title-btn .ic { flex: none; color: var(--muted); transition: transform 0.15s; }
.lab-title-btn:hover, .lab-title-btn[aria-expanded="true"] { background: #161616; }
.lab-title-btn[aria-expanded="true"] .ic { transform: rotate(180deg); }
.lab-title-btn:focus-visible { outline: 2px solid var(--hi); outline-offset: 2px; }
.top:has(.brand2) .menu.left { left: 190px; }
@media (prefers-reduced-motion: reduce) { .lab-title-btn .ic { transition: none; } }

/* The connection status shows only when something is wrong (owner, 6 Oct): a pill that stands out, with Reconnect in it. */
.conn.conn2 { height: 30px; padding: 0 6px 0 12px; border-radius: 15px; background: #141414; border: 1px solid rgba(255, 255, 255, 0.22); color: var(--hi); font-size: 12.5px; animation: lab-tip-in 0.25s ease-out; }
.conn.conn2 i { background: var(--hi); box-shadow: none; animation: conn-blink 0.9s steps(2, jump-none) infinite; }
.conn.conn2.warn { padding-right: 12px; }
.conn.conn2 button { height: 22px; margin-left: 6px; padding: 0 10px; border-radius: 11px; background: var(--hi); color: #0b0a0a; font-size: 12px; font-weight: 600; }
.conn.conn2.sr-only { animation: none; }

/* A lab that couldn't start (owner, 6 Oct): one plain card, no orb, list or code rain. */
.fail-card { width: min(440px, 100%); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 34px 30px 26px; background: #000; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 22px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); animation: lab-tip-in 0.3s ease-out; }
.fail-icon { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: #161616; color: var(--hi); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.16); margin-bottom: 4px; }
.fail-card h1 { margin: 0; font: 600 22px/1.3 var(--display); color: var(--hi); letter-spacing: -0.01em; text-wrap: balance; }
.fail-card p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--text); max-width: 340px; }
.fail-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin-top: 10px; }
.fail-actions .btn-primary { min-width: 140px; }
.fail-actions .btn-quiet { height: 42px; padding: 0 18px; border-radius: 21px; border: 1px solid rgba(255, 255, 255, 0.16); color: var(--hi); gap: 6px; }
.fail-lab { margin-top: 8px; font-size: 12px; color: var(--faint); }
@media (prefers-reduced-motion: reduce) { .fail-card { animation: none; } }

/* A step whose setup failed (owner, 6 Oct): a card in the task panel instead of the question. */
.step-fail { gap: 12px; text-align: center; padding: 0 6px; }
.step-fail .fail-icon { margin-bottom: 2px; }
.step-fail-title { font: 600 18px/1.3 var(--display); color: var(--hi); }
.task .step-fail p { margin: 0; max-width: 280px; font-size: 13.5px; line-height: 1.55; color: var(--text); }
.step-fail .fail-actions { margin-top: 6px; }

/* Running out of time (owner, 6 Oct): in the last 5 minutes the clock turns red, the one warning red inside the lab besides End session. */
:root[data-accent="white"] .timer.warn, :root[data-accent="white"] .timer.warn .ic { color: #ff5a4a; }
:root[data-accent="white"] .timer.warn { font-weight: 600; }

/* Connection problems as a card over the terminal (owner, 6 Oct). */
.pane-state.conn-card { background: rgba(5, 5, 5, 0.8); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); border-radius: inherit; }
.conn-card .fail-card { width: min(400px, 100%); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6); }
.conn-card .fail-card h1 { font-size: 21px; }
.conn-card .fail-actions .btn-primary { min-width: 150px; }
.task .conn-card-note, .conn-card .conn-card-note { margin: 2px 0 0; font-size: 12px; color: var(--faint); }
.conn-spin { width: 26px; height: 26px; border-radius: 50%; border: 2.5px solid #2e2e2e; border-top-color: var(--hi); animation: ringspin 0.9s linear infinite; }
@media (prefers-reduced-motion: reduce) { .conn-spin { animation-duration: 2.4s; } }

/* The checker failed (owner, 6 Oct): a clear card, not a grey note. */
.check-err { margin-top: 12px; padding: 14px; border-radius: 14px; background: #0b0b0b; border: 1px solid rgba(255, 255, 255, 0.22); display: grid; gap: 8px; animation: lab-tip-in 0.25s ease-out; }
.check-err-head { display: flex; align-items: center; gap: 10px; }
.check-err-icon { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #1c1c1c; color: var(--hi); }
.check-err strong { color: var(--hi); font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.task .check-err p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--text); }
.check-err-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.check-err-actions .btn-primary { height: 36px; padding: 0 16px; font-size: 13px; }
.check-err-actions .btn-quiet { height: 36px; padding: 0 14px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.16); color: var(--hi); }
@media (prefers-reduced-motion: reduce) { .check-err { animation: none; } }

/* Report a problem from an error screen: the dialog says what it's about (owner, 6 Oct). */
.rp-about { display: inline-flex; align-items: center; gap: 6px; margin: -4px 0 12px; padding: 4px 10px; border-radius: 999px; background: #161616; font-size: 12px; color: var(--hi); }
/* Report dialog (owner, 6 Oct: "improve this card"). */
.modal.rp2 { width: min(440px, 100%); padding: 22px 22px 20px; }
.rp2 .rp-head { display: flex; gap: 14px; align-items: flex-start; margin: 0 0 16px; }
.rp2 .rp-mark { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, 0.22); background: #121212; color: var(--hi); }
.rp2.is-sent .rp-mark { background: var(--hi); border-color: var(--hi); color: #000; }
.rp2 h2 { margin: 1px 0 3px; font-size: 18px; line-height: 1.3; }
.rp2 .rp-head p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.rp2 .rp-about { margin: 0 0 14px; }
.rp2 .rp-kinds { grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 16px; }
.rp2 .rp-kind { min-height: 54px; padding: 8px 12px; gap: 10px; font-size: 13px; line-height: 1.3; border-radius: 12px; background: #0d0d0d; border-color: rgba(255, 255, 255, 0.12); transition: border-color 0.15s, background 0.15s; }
.rp2 .rp-kind .ic { flex: none; color: var(--muted); }
.rp2 .rp-kind:hover { border-color: rgba(255, 255, 255, 0.3); background: #141414; }
.rp2 .rp-kind.on { background: var(--hi); border-color: var(--hi); color: #000; font-weight: 500; }
.rp2 .rp-kind.on .ic { color: #000; }
.rp2 .rp-kind:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.6); outline-offset: 2px; }
.rp2 .rp-foot { display: flex; gap: 8px; justify-content: flex-end; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.rp2 .rp-foot input { flex: 1; min-width: 0; height: 40px; padding: 0 14px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.16); background: #0d0d0d; color: var(--hi); font: inherit; font-size: 13px; }
.rp2 .rp-foot input:focus { outline: none; border-color: rgba(255, 255, 255, 0.4); }
.rp2 .rp-foot .btn-primary, .rp2 .rp-foot .btn-ghost { height: 40px; min-width: 76px; padding: 0 18px; font-size: 13.5px; flex: none; }
@media (max-width: 420px) { .rp2 .rp-kinds { grid-template-columns: 1fr; } }
.step-fail-report { margin-top: 2px; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.step-fail-report:hover { color: var(--hi); }

/* Welcome step from the task card's parts (owner, 6 Oct). */
.wl2 h1 { margin-bottom: 8px; }
.wl2 .tp-context { margin: 0 0 14px; }
.wl2 .wl-block { margin: 0 0 14px; }
.wl2 .wl-block .tp-label { margin-bottom: 8px; }
.wl2 .tp-olist { gap: 8px; }
.wl2 .tp-olist li { font-size: 14px; line-height: 1.5; }
.wl2 .wl-details { margin: 0 0 14px; }
.wl2 .wl-details div { grid-template-columns: 76px minmax(0, 1fr); align-items: baseline; gap: 10px; padding: 7px 12px; }
.wl2 .wl-details dt { font-size: 10.5px; }
.wl2 .wl-details dd { color: var(--text); font-size: 13px; }
.wl2 .wl-details div:first-child dd { color: var(--hi); }
.wl-how { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.wl-how li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: center; font-size: 13.5px; line-height: 1.45; color: var(--text); }
.wl-how b { color: var(--hi); font-weight: 600; }
.wl-mark { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #141414; border: 1px solid rgba(255, 255, 255, 0.1); color: var(--hi); }
/* Let's start stays in view on short screens. */
.wl-go { position: sticky; bottom: 0; margin: 0 -2px; padding: 14px 2px 2px; background: linear-gradient(to bottom, transparent, var(--panel, #000) 14px); }
.wl-go .check { width: 100%; }

/* Lesson, question and wrap-up steps from the task card's parts (owner, 6 Oct). */
.st2 .tp-context ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 1px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); }
.st2 .tp-context ul li { padding: 8px 12px; background: var(--panel-2); font-size: 13px; color: var(--text); }
.st2 .tp-options { margin: 0 0 14px; }
.st2 .tp-option { padding: 11px 12px; border-radius: 12px; background: #0d0d0d; border-color: rgba(255, 255, 255, 0.12); }
.st2 .tp-option:hover:not(:disabled) { border-color: rgba(255, 255, 255, 0.35); }
.st2 .tp-option.right { background: var(--hi); border-color: var(--hi); color: #000; }
.st2 .tp-option.right .mk { background: #000; color: #fff; }
/* The right answer turns white: its code chip must turn dark with it, or the answer can't be read (walk, 18 Oct). */
.st2 .tp-option.right .tp-chip { color: #000; background: rgba(0, 0, 0, 0.08); }
.st2 .tp-explain { border-radius: 12px; padding: 11px 12px; }
.st2 .st-try { margin-top: 2px; }
.st2 .st-gap { margin-top: 16px; }
.st2 .tp-results { margin-bottom: 14px; }
.st2 .tp-results li { padding: 9px 12px; border-radius: 10px; }
.st2 .tp-results li.pass .mk { background: var(--hi); color: #000; }
.st2 .tp-results li .s { font-size: 12px; color: var(--muted); }
.st2 .tp-results li.pass .s, .st2 .tp-results li.pass .t { color: var(--hi); }
.st2 .tp-wrap-actions { display: flex; gap: 8px; }
.st2 .tp-wrap-actions .check { flex: 1; }
.st-ring { position: relative; width: 76px; height: 76px; margin: 2px 0 14px; display: grid; place-items: center; }
.st-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.st-ring .track { fill: none; stroke: rgba(255, 255, 255, 0.1); stroke-width: 5; }
.st-ring .fill { fill: none; stroke: var(--accent, #e61919); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 0 var(--c); animation: st-ring-fill 1.4s cubic-bezier(.2, .8, .2, 1) 0.2s forwards; filter: drop-shadow(0 0 4px rgba(230, 25, 25, 0.6)); }
.st-ring.pass .fill { stroke: #fff; filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.4)); }
.st-ring span { position: relative; font: 700 17px/1 var(--display); color: var(--hi); font-variant-numeric: tabular-nums; }
@keyframes st-ring-fill { to { stroke-dasharray: var(--fill) var(--c); } }
@media (prefers-reduced-motion: reduce) { .st-ring .fill { animation: none; stroke-dasharray: var(--fill) var(--c); } }

/* Tendra Labs (no host brand): the start and can't-start screens keep Labs' own colours. The setup (loading)
   screen and the inside of the lab are the VIP design for every brand (owner, 13 and 15 Oct). */
:root[data-brand="tendra"] .gate:not(.setup-gate), :root[data-brand="tendra"][data-accent="white"] .gate:not(.setup-gate) {
  --accent: #1dacfe; --accent-ink: #00111c; --accent-soft: rgba(29, 172, 254, 0.14);
  --canvas: #000000; --inset: #0a0a0b; --panel: #141414; --panel-2: #1c1c1f; --panel-3: #26262a;
  --hi: #f5f5f7; --text: #d4d4d4; --muted: #a8a8ad; --faint: #8e8e93; --danger: #f0736b;
  background: var(--canvas);
}
:root[data-brand="tendra"] .l-main h1 { font-family: inherit; }

/* GitHub at the lab's end, in "End this session?" and on "Session ended": VIP's approved drawing (24 Oct,
   VIP src/demo/labs-workspace/concepts/github-end.html). One card, one job at a time. */
.l-github-on { cursor: default; align-items: center; }
.l-github-on > .ic { flex: none; color: var(--accent); }
.btn-line { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; padding: 0 16px; border-radius: 19px; background: transparent; color: var(--hi); border: 1px solid var(--line-2); font-weight: 600; font-size: 13px; text-decoration: none; white-space: nowrap; }
.btn-line:hover { background: var(--panel-3); }
.ghc { margin: 18px 0 4px; border: 1px solid var(--line-2); border-radius: 16px; background: #000; padding: 18px; scroll-margin: 24px 0 140px; }
.ghc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.ghc-who { display: inline-flex; align-items: center; gap: 7px; font: 700 10.5px var(--sans, inherit); letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.ghc-login { font: 500 12px var(--mono); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ghc h4 { margin: 0; font: 600 17px/1.3 var(--display); color: var(--hi); }
.ghc-state { display: flex; align-items: center; gap: 8px; }
.ghc-dot { width: 20px; height: 20px; border-radius: 999px; display: grid; place-items: center; flex: none; }
.ghc-dot.ok { background: rgba(92, 207, 151, 0.16); color: var(--pass); }
.ghc-dot.warn { background: rgba(230, 189, 116, 0.14); color: var(--amber); }
.ghc-dot.busy { border: 1.5px solid var(--hi); border-top-color: transparent; width: 16px; height: 16px; animation: gh-spin 0.9s linear infinite; }
.ghc-say { margin: 6px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.ghc-say code { font: 500 12.5px var(--mono); color: var(--hi); }
.ghc-small { font-size: 12.5px; color: var(--faint); }
.ghc-note { margin: 10px 0 0; padding: 9px 11px; border-radius: 10px; background: var(--amber-soft); color: var(--hi); font-size: 12.5px; line-height: 1.5; }
.ghc .ghc-do { margin-top: 16px; width: 100%; height: 44px; justify-content: center; }
.ghc-after { margin: 10px 0 0; font-size: 12px; color: var(--faint); text-align: center; }
.ghc-after a, .ghc a { color: var(--hi); }
.ghc-repo { display: inline-flex; align-items: center; gap: 5px; font: 500 12.5px var(--mono); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.3); text-underline-offset: 3px; white-space: nowrap; }
.ghc-steps { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 14px; counter-reset: ghc; }
.ghc-steps > li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; counter-increment: ghc; }
.ghc-steps > li::before { content: counter(ghc); width: 22px; height: 22px; border-radius: 999px; background: var(--panel-3); color: var(--hi); font: 600 12px var(--sans, inherit); display: grid; place-items: center; }
.ghc-steps b { color: var(--hi); font-weight: 600; font-size: 13.5px; }
.ghc-steps p { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.ghc-term { margin-top: 8px; border-radius: 12px; background: var(--inset); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(230, 25, 25, 0.06); overflow: hidden; }
.ghc-bar { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-bottom: 1px solid var(--line); font: 600 10.5px var(--sans, inherit); letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.ghc-bar i { width: 7px; height: 7px; border-radius: 99px; background: var(--panel-3); }
.ghc-term pre { margin: 0; padding: 10px 12px; font: 500 12px/1.7 var(--mono); color: var(--hi); white-space: pre; overflow-x: auto; }
.ghc-term pre span { color: var(--faint); user-select: none; }
.ghc-more { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; font-size: 12.5px; color: var(--muted); }
.ghc-more summary { cursor: pointer; color: var(--text); list-style: none; }
.ghc-more summary::-webkit-details-marker { display: none; }
.ghc-more summary::before { content: "+ "; color: var(--faint); }
.ghc-more[open] summary::before { content: "− "; }
.ghc-more code { font: 500 12px var(--mono); color: var(--hi); }
.ghc-progress { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 9px; font-size: 13.5px; }
.ghc-progress li { display: flex; align-items: center; gap: 10px; color: var(--faint); }
.ghc-progress li.now { color: var(--hi); font-weight: 500; }
.ghc-progress .mk { width: 18px; height: 18px; border-radius: 99px; border: 1.5px solid var(--panel-3); flex: none; }
.ghc-progress li.now .mk { border-color: var(--hi); border-top-color: transparent; animation: gh-spin 0.9s linear infinite; }
.modal.modal-end { background: #000; border-color: rgba(255, 255, 255, 0.14); border-radius: 20px; padding: 28px 28px 24px; width: min(460px, 100%); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55); }
.modal.modal-end h2 { margin: 0; font-size: 22px; line-height: 1.2; letter-spacing: -0.01em; }
.modal.modal-end > p { margin: 10px 0 0; font-size: 14.5px; line-height: 1.55; }
.modal-gh { display: flex; gap: 12px; align-items: flex-start; margin-top: 18px; padding: 13px 14px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); font-size: 13.5px; line-height: 1.5; color: var(--text); }
.modal-gh b { color: var(--hi); font-weight: 600; }
.modal-gh .ic { flex: none; margin-top: 2px; color: var(--hi); }
.modal.modal-end .modal-actions { gap: 10px; margin-top: 24px; }
.modal.modal-end .modal-actions button { height: 40px; padding: 0 18px; }
.ec-gh { display: flex; align-items: center; gap: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); padding: 12px 14px 12px 16px; text-align: left; }
.ec-gh .t { flex: 1; min-width: 0; font-size: 13.5px; color: var(--text); }
.ec-gh .t b { color: var(--hi); font-weight: 600; }