:root {
        --ink: #172033;
        --muted: #64748b;
        --canvas: #f4f7fb;
        --surface: #ffffff;
        --line: #dce3ee;
        --accent: #635bff;
        --accent-pale: #eeedff;
        --terminal: #111827;
        --green: #34d399;
        --warning: #f59e0b;
      }

      * { box-sizing: border-box; }

      body {
        margin: 0;
        background: var(--canvas);
        color: var(--ink);
        font: 15px/1.5 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      }

      header {
        padding: 56px max(28px, calc((100vw - 1160px) / 2));
        background: linear-gradient(135deg, #20205f, #635bff);
        color: white;
      }

      header p { max-width: 720px; margin: 10px 0 0; color: #e3e1ff; }
      h1 { margin: 0; font-size: clamp(2rem, 5vw, 3.2rem); letter-spacing: -0.05em; }
      h2 { margin: 0; font-size: 1.45rem; letter-spacing: -0.025em; }
      h3 { margin: 0 0 8px; font-size: 0.98rem; }

      main { max-width: 1160px; margin: 0 auto; padding: 40px 28px 72px; }
      .intro, .questions { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 24px; }
      .intro p { margin: 8px 0 0; color: var(--muted); }
      .sequence { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px; }
      .tag { padding: 5px 10px; border-radius: 100px; background: var(--accent-pale); color: #463cb7; font-size: .8rem; font-weight: 700; }

      .journey { margin-top: 36px; }
      .journey-heading { display: flex; align-items: baseline; gap: 12px; margin: 0 0 14px; }
      .number { color: var(--accent); font-size: .82rem; font-weight: 800; letter-spacing: .08em; }
      .journey-purpose { margin: 0 0 16px; color: var(--muted); }

      .wireframe {
        overflow: hidden;
        background: var(--surface);
        border: 1px solid #bfcada;
        border-radius: 12px;
        box-shadow: 0 12px 32px rgba(43, 53, 74, .09);
      }
      .browser { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; background: #edf1f6; border-bottom: 1px solid var(--line); }
      .dot { width: 8px; height: 8px; border-radius: 50%; background: #c3cad5; }
      .url { margin-left: 8px; padding: 3px 10px; flex: 1; background: white; border: 1px solid #dce3ee; border-radius: 4px; color: #8a96a8; font-size: .72rem; }
      .app-bar { display: flex; align-items: center; justify-content: space-between; height: 52px; padding: 0 18px; border-bottom: 1px solid var(--line); }
      .brand { font-weight: 800; letter-spacing: -.03em; }
      .brand i { color: var(--accent); font-style: normal; }
      .avatar { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; background: #d9d6ff; color: #463cb7; font-size: .7rem; font-weight: 800; }
      .screen { min-height: 370px; padding: 24px; }
      .screen-title { margin: 0; font-size: 1.25rem; letter-spacing: -.03em; }
      .screen-subtitle { margin: 5px 0 18px; color: var(--muted); }

.exercise-card { display: flex; align-items: center; justify-content: space-between; max-width: 680px; padding: 18px; border: 1px solid var(--line); border-radius: 10px; }
      .exercise-card strong, .meta { display: block; }
      .meta { margin-top: 3px; color: var(--muted); font-size: .8rem; }
      .empty { display: grid; place-items: center; min-height: 250px; text-align: center; color: var(--muted); }

      .workspace { display: grid; grid-template-columns: minmax(230px, .85fr) minmax(360px, 1.5fr); min-height: 500px; padding: 0; }
      .agent-panel { display: flex; flex-direction: column; border-right: 1px solid var(--line); background: #fafbfe; }
      .panel-head { display: flex; align-items: center; justify-content: space-between; padding: 15px 16px; border-bottom: 1px solid var(--line); font-size: .85rem; font-weight: 800; }
      .status { color: #168363; font-size: .72rem; }
      .messages { flex: 1; padding: 16px; }
      .message { max-width: 94%; margin-bottom: 13px; padding: 10px 11px; border: 1px solid #dce3ee; border-radius: 9px 9px 9px 2px; background: white; font-size: .84rem; }
      .message.user { margin-left: auto; border-color: #d9d6ff; border-radius: 9px 9px 2px 9px; background: var(--accent-pale); }
      .message .speaker { display: block; margin-bottom: 3px; color: #6055b4; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
      .composer { display: flex; gap: 7px; padding: 12px; border-top: 1px solid var(--line); }
      .input { flex: 1; min-height: 34px; padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 6px; background: white; color: #8792a4; font-size: .78rem; }
      .send { display: grid; place-items: center; width: 35px; border: 0; border-radius: 6px; background: var(--accent); color: white; }

      .code-area { display: grid; grid-template-rows: auto 1fr auto; min-width: 0; }
      .filebar { display: flex; justify-content: space-between; padding: 10px 15px; border-bottom: 1px solid var(--line); font-size: .78rem; }
      .tabs { display: flex; gap: 12px; }
      .tab { color: var(--muted); }
      .tab.active { color: var(--ink); font-weight: 800; }
      .editor { padding: 14px 0; background: #fcfcfd; color: #344154; font: .82rem/1.75 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
      .code-line { display: flex; min-height: 23px; }
      .ln { width: 42px; padding-right: 12px; color: #adb7c6; text-align: right; user-select: none; }
      .code { white-space: pre; }
      .comment { color: #8696a9; }
      .keyword { color: #7745d8; }
      .string { color: #168363; }
      .actionbar { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-top: 1px solid var(--line); }
      .save-state { color: var(--muted); font-size: .72rem; }

      .terminal-wrap { display: grid; grid-template-rows: 1fr auto; min-height: 500px; }
      .terminal { padding: 17px; background: var(--terminal); color: #d5dce8; font: .8rem/1.7 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
      .term-dim { color: #8b9bb4; } .term-green { color: var(--green); } .cursor { display: inline-block; width: 7px; height: 15px; vertical-align: -2px; background: #d5dce8; }
      .terminal-actions { display: flex; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line); }
      .run-state { margin-left: auto; align-self: center; color: #168363; font-size: .75rem; font-weight: 700; }

      .review { max-width: 790px; }
      .review-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 20px 0; }
      .check { padding: 13px; border: 1px solid var(--line); border-radius: 9px; }
      .check small { display: block; color: var(--muted); }
      .check .ok { color: #168363; font-weight: 800; }
      .check .pending { color: #b36a00; font-weight: 800; }
      .review-note { padding: 13px; border-left: 3px solid var(--accent); background: #f7f6ff; color: #3e3a70; font-size: .86rem; }

      .questions { margin-top: 48px; }
      .questions h2 { margin-bottom: 12px; }
      .questions ol { margin: 0; padding-left: 22px; }
      .questions li { margin: 9px 0; color: #3f4c60; }
      .questions strong { color: var(--ink); }
      .note { margin-top: 16px; color: var(--muted); font-size: .84rem; }

      @media (max-width: 720px) {
        .workspace { grid-template-columns: 1fr; }
        .agent-panel { min-height: 290px; border-right: 0; border-bottom: 1px solid var(--line); }
        .code-area { min-height: 420px; }
        .review-grid { grid-template-columns: 1fr; }
      }

      /* Visual direction: the product workspace is dark by default. */
      :root { --ink: #edf2ff; --muted: #9daac0; --canvas: #070b14; --surface: #101827; --line: #2a3850; --accent: #897dff; --accent-pale: #27234f; --terminal: #060a12; }
      body { background: var(--canvas); }
      header { background: linear-gradient(135deg, #111735, #4338a8); }
      header p { color: #c8ccff; }
      .intro, .questions, .wireframe { background: var(--surface); border-color: var(--line); }
      .wireframe { box-shadow: 0 12px 32px rgba(0, 0, 0, .28); }
      .browser { background: #0b1220; border-color: var(--line); }
      .dot { background: #53617a; }
      .url, .input { background: #151f30; border-color: #33435d; color: #9daac0; }
      .app-bar, .filebar, .panel-head, .composer, .actionbar, .terminal-actions { background: #0d1524; border-color: var(--line); }
      .brand i, .tab.active { color: #a39aff; }
      .avatar { background: #312d65; color: #dcd8ff; }
      .exercise-card, .check { border-color: var(--line); background: #131d2e; }

.agent-panel { background: #0c1423; border-color: var(--line); }
      .message { border-color: #33435d; background: #172238; }
      .message.user { border-color: #6057bd; background: #242047; }
      .editor { background: #0b1120; color: #d4dbea; }
      .terminal { background: #060a12; }
      .review-note { background: #1d1a3c; color: #dedbff; }
      .run-workspace { display: grid; grid-template-columns: minmax(230px, .85fr) minmax(360px, 1.5fr); min-height: 500px; }
      .run-code { position: relative; display: grid; grid-template-rows: auto 1fr auto; min-height: 500px; overflow: hidden; }
      .terminal-drawer { position: absolute; z-index: 2; right: 0; bottom: 0; left: 0; height: 52%; border-top: 1px solid #3c4c68; box-shadow: 0 -16px 30px rgba(0,0,0,.35); }
      .terminal-drawer .terminal { height: calc(100% - 47px); }
      @media (max-width: 720px) { .run-workspace { grid-template-columns: 1fr; } .run-workspace .agent-panel { min-height: 250px; border-right: 0; border-bottom: 1px solid var(--line); } }