:root {
  color-scheme: dark;
  --ink: #080b0d;
  --surface: #0d1214;
  --surface-raised: #12191b;
  --pine: #0d2924;
  --mint: #67e8b0;
  --amber: #f0b45c;
  --violet: #a68cff;
  --chalk: #ecefe9;
  --muted: #91a09c;
  --line: #26302f;
  --danger: #ff7b72;
  --font-display: Bahnschrift, "Microsoft YaHei", sans-serif;
  --font-body: "Microsoft YaHei", "PingFang SC", sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--ink); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--chalk);
  background:
    linear-gradient(rgba(103, 232, 176, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(103, 232, 176, .035) 1px, transparent 1px),
    radial-gradient(circle at 38% 0%, #0d211e 0, var(--ink) 40%);
  background-size: 64px 64px, 64px 64px, auto;
  font-family: var(--font-body);
}
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--mint); outline-offset: 3px;
}

.app-shell { min-height: 100vh; }
.topbar {
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4vw;
  border-bottom: 1px solid var(--line);
  background: rgba(8, 11, 13, .9);
  backdrop-filter: blur(14px);
  position: sticky;
  top: 0;
  z-index: 10;
}
.brand { color: inherit; text-decoration: none; display: flex; align-items: center; gap: 11px; }
.brand-mark {
  width: 34px; height: 34px; display: grid; place-items: center;
  color: var(--ink); background: var(--mint); border-radius: 9px 3px 9px 3px;
  font: 800 20px/1 var(--font-display); transform: skew(-4deg);
}
.brand strong { display: block; font: 700 17px/1 var(--font-display); letter-spacing: -.02em; }
.brand small { display: block; color: var(--muted); font-size: 10px; margin-top: 4px; letter-spacing: .12em; }
.topbar-actions { display: flex; align-items: center; gap: 24px; font-size: 12px; color: var(--muted); }
.system-state { display: flex; gap: 7px; align-items: center; }
.system-state i { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 14px var(--mint); }
.system-state[data-configured="false"] i { background: var(--amber); box-shadow: 0 0 14px rgba(240, 180, 92, .55); }
.text-link { color: var(--chalk); text-decoration: none; }

main { width: min(1500px, 94vw); margin: 0 auto; padding: 50px 0 70px; }
.intro { padding: 0 0 34px; border-bottom: 1px solid var(--line); }
.route-mark { color: var(--mint); font-size: 12px; margin: 0 0 16px; letter-spacing: .08em; }
.intro-row { display: flex; justify-content: space-between; align-items: end; gap: 24px; }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 760px; font: 700 clamp(38px, 5.2vw, 76px)/.98 var(--font-display); letter-spacing: -.045em; margin-bottom: 18px; }
.intro-row > div > p { color: var(--muted); margin: 0; font-size: 15px; }
.run-counter { display: flex; align-items: baseline; gap: 12px; white-space: nowrap; }
.run-counter strong { color: var(--mint); font: 700 42px/1 var(--font-display); }
.run-counter span { color: var(--muted); font-size: 12px; }

.product-studio { padding: 32px 0 38px; border-bottom: 1px solid var(--line); }
.studio-heading { display: flex; justify-content: space-between; align-items: end; gap: 28px; margin-bottom: 25px; }
.studio-heading h2 { margin: 5px 0 0; font: 650 24px/1.2 var(--font-display); }
.studio-heading > p { width: min(440px, 45%); margin: 0; color: var(--muted); font-size: 11px; line-height: 1.6; text-align: right; }
.studio-grid { display: grid; grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); border-top: 1px solid var(--line); }
.design-form { padding: 25px 28px 0 0; }
.design-form textarea { min-height: 98px; }
.design-form .compact-textarea { min-height: 76px; }
.design-output { min-height: 560px; padding: 25px 0 0 32px; border-left: 1px solid var(--line); }
.blueprint-empty, .blueprint-progress, .blueprint-failure { min-height: 500px; display: grid; align-content: center; justify-items: start; padding: 40px min(10vw, 100px); }
.blueprint-empty > span, .blueprint-kicker { color: var(--mint); font: 600 9px/1 var(--font-display); letter-spacing: .13em; text-transform: uppercase; }
.blueprint-empty h3, .blueprint-progress h3, .blueprint-failure h3 { font: 600 24px/1.2 var(--font-display); margin: 14px 0 9px; }
.blueprint-empty p, .blueprint-progress p, .blueprint-failure p { max-width: 520px; color: var(--muted); font-size: 11px; line-height: 1.75; margin: 0; }
.blueprint-loader { width: 38px; height: 2px; margin: 28px 0 6px; background: var(--line); overflow: hidden; }
.blueprint-loader::after { content: ''; display: block; width: 45%; height: 100%; background: var(--mint); animation: blueprint-scan 1.4s ease-in-out infinite alternate; }
.blueprint-failure { border-left: 2px solid var(--danger); min-height: 260px; }
.blueprint-failure .blueprint-kicker { color: var(--danger); }
.blueprint-document { min-width: 0; }
.blueprint-header { display: flex; justify-content: space-between; gap: 20px; align-items: start; padding-bottom: 17px; border-bottom: 1px solid var(--line); }
.blueprint-header h3 { margin: 8px 0 0; font: 650 25px/1.2 var(--font-display); }
.blueprint-status { color: var(--amber); border: 1px solid #5e4b31; border-radius: 999px; padding: 5px 9px; font-size: 9px; white-space: nowrap; }
.blueprint-status.confirmed { color: var(--mint); border-color: #285145; }
.product-statement { color: #dce4df; font: 500 15px/1.7 var(--font-display); margin: 20px 0 4px; max-width: 900px; }
.blueprint-section { padding: 19px 0; border-top: 1px solid rgba(38, 48, 47, .75); }
.product-statement + .blueprint-section { border-top: 0; }
.blueprint-section h4 { color: var(--muted); font-size: 9px; font-weight: 500; letter-spacing: .08em; margin: 0 0 12px; text-transform: uppercase; }
.blueprint-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; border-top: 1px solid rgba(38, 48, 47, .75); }
.blueprint-columns .blueprint-section { border-top: 0; }
.blueprint-list, .blueprint-object-list, .blueprint-tasks { margin: 0; padding: 0; list-style: none; }
.blueprint-list { display: grid; gap: 7px; }
.blueprint-list li { position: relative; padding-left: 17px; color: #bdcac6; font-size: 10px; line-height: 1.65; }
.blueprint-list li::before { content: '—'; position: absolute; left: 0; color: var(--violet); }
.blueprint-list.numbered { counter-reset: flow; }
.blueprint-list.numbered li { counter-increment: flow; padding-left: 31px; }
.blueprint-list.numbered li::before { content: counter(flow, decimal-leading-zero); color: var(--mint); font: 600 9px/1.7 var(--font-display); }
.blueprint-list.checks li::before { content: '✓'; color: var(--mint); }
.blueprint-list.later li { color: var(--muted); }
.blueprint-object-list { display: grid; gap: 10px; }
.blueprint-object-list li { padding-left: 12px; border-left: 1px solid #3b4a47; }
.blueprint-object-list strong { display: block; color: #d8e0dc; font-size: 11px; }
.blueprint-object-list p { color: var(--muted); font-size: 9px; line-height: 1.6; margin: 4px 0 0; }
.architecture-grid { display: grid; grid-template-columns: 70px 1fr 70px 1fr; gap: 9px 13px; margin: 0; }
.architecture-grid dt { color: var(--mint); font-size: 9px; }
.architecture-grid dd { color: #bdcac6; font-size: 10px; line-height: 1.55; margin: 0; }
.blueprint-tasks { counter-reset: task; }
.blueprint-tasks li { counter-increment: task; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 15px; align-items: center; padding: 13px 0 13px 34px; border-top: 1px solid rgba(38, 48, 47, .65); position: relative; }
.blueprint-tasks li::before { content: counter(task, decimal-leading-zero); position: absolute; left: 0; top: 16px; color: var(--violet); font: 600 9px/1 var(--font-display); }
.blueprint-tasks strong { font-size: 11px; }
.blueprint-tasks p { color: var(--muted); font-size: 9px; line-height: 1.55; margin: 5px 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.load-task-button, .confirm-design-button { min-height: 34px; padding: 0 12px; border-radius: 5px; font-size: 9px; font-weight: 700; cursor: pointer; }
.load-task-button { color: var(--mint); background: transparent; border: 1px solid #31584d; }
.load-task-button:hover { background: var(--pine); }
.load-task-button:disabled { color: #65716e; border-color: var(--line); cursor: not-allowed; }
.blueprint-approval { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px 18px; margin-top: 20px; padding: 16px; border-left: 2px solid var(--amber); background: #12130f; }
.blueprint-approval > div, .blueprint-confirm, .design-feedback { grid-column: 1 / -1; }
.blueprint-approval strong { font-size: 12px; }
.blueprint-approval p { color: var(--muted); font-size: 9px; margin: 5px 0 0; }
.blueprint-confirm { display: flex; align-items: center; gap: 8px; margin: 0; color: #c9cfcb; font-size: 10px; }
.blueprint-confirm input { width: 15px; height: 15px; margin: 0; accent-color: var(--mint); }
.confirm-design-button { grid-column: 2; color: #07110e; background: var(--mint); border: 0; }
.confirm-design-button:hover { background: #84f1c2; }
.confirm-design-button:disabled { color: #71807b; background: #24322f; cursor: not-allowed; }
.design-feedback { color: #ffc0bb !important; }
.blueprint-proof { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; margin-top: 20px; padding: 15px; background: var(--pine); border-left: 2px solid var(--mint); }
.blueprint-proof span { color: var(--mint); font-size: 8px; letter-spacing: .1em; text-transform: uppercase; }
.blueprint-proof strong { font-size: 10px; }
.blueprint-proof small { color: var(--muted); font-size: 8px; }

.workspace-grid { display: grid; grid-template-columns: minmax(250px, 320px) minmax(500px, 1fr) minmax(220px, 280px); gap: 0; }
.workspace-grid > * { min-width: 0; padding-top: 30px; }
.composer-panel { padding-right: 28px; border-right: 1px solid var(--line); }
.run-panel { padding-inline: 32px; }
.principles-panel { padding-left: 28px; border-left: 1px solid var(--line); }
.panel-heading { display: flex; flex-direction: column; gap: 5px; margin-bottom: 24px; }
.panel-heading h2 { margin: 0; font: 650 20px/1.2 var(--font-display); }
.panel-index { color: var(--muted); font-size: 11px; }
.run-heading { flex-direction: row; align-items: center; justify-content: space-between; }

form { display: flex; flex-direction: column; }
.model-connection { display: flex; align-items: center; gap: 10px; margin: 0 0 22px; padding: 11px 12px; background: #0a1011; border: 1px solid var(--line); border-radius: 6px; }
.model-connection i { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 12px rgba(240, 180, 92, .45); }
.model-connection strong, .model-connection small { display: block; }
.model-connection strong { color: var(--chalk); font-size: 11px; line-height: 1.35; }
.model-connection small { color: var(--muted); font-size: 9px; line-height: 1.45; margin-top: 2px; }
.model-connection[data-configured="true"] { border-color: #285145; background: #0b1715; }
.model-connection[data-configured="true"] i { background: var(--mint); box-shadow: 0 0 12px rgba(103, 232, 176, .45); }
label { color: var(--chalk); font-size: 12px; margin: 0 0 9px; }
label small { color: var(--muted); font-weight: 400; }
input, textarea {
  width: 100%; color: var(--chalk); background: #0a0f11; border: 1px solid var(--line);
  border-radius: 7px; padding: 12px 13px; margin-bottom: 20px; transition: border-color .18s, background .18s;
}
input:hover, textarea:hover { border-color: #3a4745; }
input:focus, textarea:focus { border-color: var(--mint); background: #0c1515; outline: none; }
textarea { min-height: 126px; resize: vertical; line-height: 1.65; margin-bottom: 6px; }
::placeholder { color: #596562; }
.field-meta { display: flex; justify-content: space-between; color: #65716e; font-size: 10px; margin-bottom: 20px; }
.form-error { color: #ffc0bb; background: rgba(255, 123, 114, .1); border-left: 2px solid var(--danger); padding: 10px 12px; font-size: 12px; margin-bottom: 14px; line-height: 1.5; }
.primary-button, .sample-button, .icon-button { border: 0; cursor: pointer; }
.primary-button {
  min-height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 0 15px;
  background: var(--mint); color: #06100d; border-radius: 7px; font-weight: 700;
}
.primary-button b { font: 700 23px/1 var(--font-display); }
.primary-button:hover { background: #84f1c2; }
.primary-button:disabled { opacity: .55; cursor: wait; }
.sample-button { color: var(--muted); background: transparent; padding: 12px; font-size: 11px; }
.sample-button:hover { color: var(--chalk); }
.icon-button { width: 34px; height: 34px; color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: 50%; font-size: 17px; }
.icon-button:hover { color: var(--mint); border-color: var(--mint); }

.run-list { display: flex; flex-direction: column; gap: 15px; }
.empty-state { min-height: 390px; display: grid; place-content: center; text-align: center; padding: 40px; }
.empty-state h3 { font: 600 18px/1.2 var(--font-display); margin: 23px 0 8px; }
.empty-state p { color: var(--muted); font-size: 12px; line-height: 1.6; max-width: 250px; margin: auto; }
.empty-orbit { width: 64px; height: 64px; margin: auto; border: 1px solid #345049; border-radius: 50%; display: grid; place-items: center; position: relative; }
.empty-orbit::before { content: ''; width: 36px; height: 36px; border: 1px dashed #365b51; border-radius: 50%; }
.empty-orbit span { position: absolute; top: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--mint); }

.run-card { background: rgba(13, 18, 20, .86); border: 1px solid var(--line); border-radius: 9px; padding: 20px; }
.run-card[data-status="running"] { border-color: #31584d; }
.run-card[data-status="failed"] { border-color: #623b38; }
.run-card[data-status="committed"] { border-color: #285145; }
.run-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.run-title-wrap { display: flex; align-items: flex-start; gap: 11px; min-width: 0; }
.run-title-wrap h3 { font: 600 16px/1.25 var(--font-display); margin-bottom: 7px; overflow-wrap: anywhere; }
.run-meta { color: var(--muted); font-size: 10px; margin: 0; }
.status-dot { flex: 0 0 auto; width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: #5b6562; }
[data-status="running"] .status-dot { background: var(--amber); box-shadow: 0 0 11px rgba(240, 180, 92, .6); animation: pulse 1.3s infinite; }
[data-status="success"] .status-dot, [data-status="committed"] .status-dot { background: var(--mint); }
[data-status="failed"] .status-dot { background: var(--danger); }
.status-label { color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 4px 8px; font-size: 10px; white-space: nowrap; }
[data-status="running"] .status-label { color: var(--amber); border-color: #5e4b31; }
[data-status="success"] .status-label, [data-status="committed"] .status-label { color: var(--mint); border-color: #285145; }
[data-status="failed"] .status-label { color: var(--danger); border-color: #623b38; }
.pipeline { list-style: none; display: grid; grid-template-columns: repeat(6, 1fr); padding: 0; margin: 24px 0 18px; }
.pipeline li { position: relative; min-width: 0; padding-right: 8px; }
.pipeline li::before { content: ''; position: absolute; height: 1px; background: var(--line); left: 9px; right: -3px; top: 8px; }
.pipeline li:last-child::before { display: none; }
.stage-marker { width: 17px; height: 17px; display: block; position: relative; z-index: 1; border: 2px solid #4a5552; border-radius: 50%; background: var(--surface); margin-bottom: 10px; }
.stage-label { display: block; font-size: 10px; color: #77817f; line-height: 1.4; }
.stage-detail { display: block; color: #5f6b68; font-size: 9px; margin-top: 4px; line-height: 1.4; overflow-wrap: anywhere; }
.pipeline li[data-status="running"] .stage-marker { border-color: var(--amber); background: var(--amber); box-shadow: 0 0 12px rgba(240, 180, 92, .35); }
.pipeline li[data-status="running"] .stage-label { color: var(--chalk); }
.pipeline li[data-status="success"] .stage-marker { border-color: var(--mint); background: var(--mint); }
.pipeline li[data-status="success"]::before { background: #366f5e; }
.pipeline li[data-status="success"] .stage-label { color: #b9c9c4; }
.pipeline li[data-status="failed"] .stage-marker { border-color: var(--danger); background: var(--danger); }
.pipeline li[data-status="failed"] .stage-label { color: var(--danger); }
.run-error { color: #ffc0bb; background: rgba(255, 123, 114, .08); padding: 10px 12px; border-left: 2px solid var(--danger); font-size: 11px; line-height: 1.55; margin-bottom: 15px; }
.run-error strong { display: block; margin-bottom: 3px; color: inherit; }
.run-error[data-tone="historical"] { color: #c8c2ea; background: rgba(166, 140, 255, .07); border-left-color: var(--violet); }
.execution-plan { margin: 0 0 17px; padding: 14px 14px 14px 31px; color: #b9c9c4; background: #0a1011; border-left: 2px solid var(--violet); font-size: 10px; line-height: 1.65; }
.execution-plan li + li { margin-top: 4px; }
.review-evidence { margin: 20px 0; padding: 18px 0; border-top: 1px solid #315148; border-bottom: 1px solid #315148; }
.review-evidence > header { display: flex; align-items: baseline; gap: 10px; margin-bottom: 9px; }
.review-evidence > header span { color: var(--mint); font: 600 9px/1 var(--font-display); letter-spacing: .13em; text-transform: uppercase; }
.review-evidence h4 { margin: 0; font: 600 13px/1.3 var(--font-display); }
.review-summary { color: #b9c9c4; font-size: 11px; line-height: 1.6; margin-bottom: 14px; }
.review-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.review-columns strong { color: var(--muted); font-size: 9px; font-weight: 500; letter-spacing: .06em; }
.review-columns ul { list-style: none; padding: 0; margin: 7px 0 0; }
.review-columns li { color: #cbd4d0; font: 10px/1.55 Consolas, monospace; overflow-wrap: anywhere; }
.review-columns li + li { margin-top: 3px; }
.diff-stat { color: var(--muted); font: 9px/1.5 Consolas, monospace; margin: 12px 0 5px; white-space: pre-line; }
.review-diff-link { color: var(--mint); font-size: 10px; text-decoration: none; }
.review-diff-link:hover { text-decoration: underline; }
.commit-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 11px 14px; align-items: end; margin-top: 17px; padding: 15px; background: #09100f; border-left: 2px solid var(--mint); }
.commit-prompt, .commit-message-label, .commit-confirm, .commit-feedback { grid-column: 1 / -1; }
.commit-prompt { display: flex; justify-content: space-between; gap: 12px; }
.commit-prompt strong { font-size: 11px; }
.commit-prompt span { color: var(--muted); font-size: 9px; }
.commit-message-label { color: var(--muted); font-size: 9px; margin: 0; }
.commit-message-label .commit-message { margin: 6px 0 0; min-height: 38px; padding: 9px 11px; font: 11px/1.4 Consolas, monospace; }
.commit-confirm { display: flex; align-items: center; gap: 8px; margin: 0; color: #b9c9c4; font-size: 10px; }
.commit-confirm input { width: 15px; height: 15px; margin: 0; accent-color: var(--mint); }
.commit-button { min-height: 36px; padding: 0 13px; color: #06100d; background: var(--mint); border: 0; border-radius: 5px; font-size: 10px; font-weight: 700; cursor: pointer; }
.commit-button:hover { background: #84f1c2; }
.commit-button:disabled { color: #71807b; background: #24322f; cursor: not-allowed; }
.commit-feedback { color: #ffc0bb; font-size: 10px; line-height: 1.5; margin: 0; }
.commit-proof { margin-top: 17px; padding: 13px 15px; background: var(--pine); border-left: 2px solid var(--mint); }
.commit-proof span, .commit-proof strong, .commit-proof small { display: block; }
.commit-proof span { color: var(--mint); font-size: 8px; letter-spacing: .12em; text-transform: uppercase; }
.commit-proof strong { margin-top: 6px; font: 600 15px/1 Consolas, monospace; }
.commit-proof p { color: #c5d4cf; font-size: 10px; margin: 7px 0 5px; }
.commit-proof small { color: var(--muted); font: 9px/1.5 Consolas, monospace; overflow-wrap: anywhere; }
.run-footer { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); padding-top: 13px; gap: 12px; }
.branch-name { color: var(--muted); font: 10px/1.4 Consolas, monospace; overflow-wrap: anywhere; }
.run-actions { display: flex; align-items: center; gap: 12px; }
.approve-button, .retry-button { min-height: 34px; padding: 0 12px; border-radius: 5px; font-size: 11px; font-weight: 700; cursor: pointer; }
.approve-button { border: 0; color: #07110e; background: var(--mint); }
.approve-button:hover { background: #84f1c2; }
.approve-button:disabled { opacity: .55; cursor: wait; }
.retry-button { color: #c8c2ea; background: transparent; border: 1px solid #4f466d; }
.retry-button:hover { color: var(--chalk); border-color: var(--violet); }
.attempt-history { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 11px; }
.attempt-history summary { color: var(--muted); font-size: 10px; cursor: pointer; list-style-position: outside; margin-left: 14px; }
.attempt-history ol { margin: 10px 0 0; padding: 0; list-style: none; }
.attempt-history li { display: grid; grid-template-columns: 78px 62px 1fr; gap: 8px; padding: 7px 0; color: var(--muted); font-size: 9px; border-top: 1px solid rgba(38, 48, 47, .65); }
.attempt-history li strong { color: #b9c9c4; font-weight: 500; }
.attempt-history li[data-current="true"] strong { color: var(--mint); }

.principle { padding: 17px 0 19px; border-top: 1px solid var(--line); }
.principle > span { display: inline-block; width: 26px; font: 600 11px/1 var(--font-display); }
.principle h3 { display: inline; font: 600 13px/1.3 var(--font-display); }
.principle p { color: var(--muted); font-size: 11px; line-height: 1.65; margin: 9px 0 0 31px; }
.accent-amber > span { color: var(--amber); }
.accent-violet > span { color: var(--violet); }
.accent-green > span { color: var(--mint); }
.scope-note { margin-top: 22px; padding: 15px; background: var(--pine); border-radius: 4px 12px 4px 12px; }
.scope-note span { color: var(--mint); font-size: 10px; }
.scope-note p { color: #b3c5bf; font-size: 10px; line-height: 1.65; margin: 8px 0 0; }

@keyframes pulse { 50% { opacity: .45; transform: scale(.8); } }
@keyframes blueprint-scan { from { transform: translateX(-10%); } to { transform: translateX(125%); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } }

@media (max-width: 1120px) {
  .studio-grid { grid-template-columns: 300px minmax(0, 1fr); }
  .architecture-grid { grid-template-columns: 65px 1fr; }
  .workspace-grid { grid-template-columns: 290px 1fr; }
  .principles-panel { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); padding-left: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .principles-panel .panel-heading, .scope-note { grid-column: 1 / -1; }
  .principle { border-bottom: 1px solid var(--line); }
}

@media (max-width: 760px) {
  .topbar { height: 60px; padding-inline: 18px; }
  .system-state { display: none; }
  main { width: min(100% - 32px, 620px); padding-top: 34px; }
  .intro-row { display: block; }
  h1 { font-size: clamp(35px, 10.5vw, 52px); line-height: 1.02; overflow-wrap: anywhere; }
  .run-counter { margin-top: 25px; }
  .studio-heading { display: block; }
  .studio-heading > p { width: auto; margin-top: 9px; text-align: left; }
  .studio-grid { display: block; }
  .design-form { padding-right: 0; }
  .design-output { min-height: 360px; padding-left: 0; margin-top: 28px; border-left: 0; border-top: 1px solid var(--line); }
  .blueprint-empty, .blueprint-progress, .blueprint-failure { min-height: 330px; padding: 34px 8px; }
  .blueprint-columns { grid-template-columns: 1fr; gap: 0; }
  .blueprint-columns .blueprint-section + .blueprint-section { border-top: 1px solid rgba(38, 48, 47, .75); }
  .architecture-grid { grid-template-columns: 65px 1fr; }
  .blueprint-tasks li { grid-template-columns: 1fr; }
  .load-task-button { width: 100%; }
  .blueprint-approval { grid-template-columns: 1fr; }
  .confirm-design-button { grid-column: 1; width: 100%; }
  .blueprint-proof { grid-template-columns: 1fr; }
  .workspace-grid { display: block; }
  .composer-panel, .run-panel, .principles-panel { padding: 28px 0; border: 0; border-bottom: 1px solid var(--line); }
  .run-panel { min-height: 400px; }
  .pipeline { grid-template-columns: repeat(3, 1fr); row-gap: 18px; }
  .pipeline li:nth-child(3)::before, .pipeline li:last-child::before { display: none; }
  .review-columns { grid-template-columns: 1fr; gap: 12px; }
  .commit-panel { grid-template-columns: 1fr; }
  .commit-prompt { display: block; }
  .commit-prompt span { display: block; margin-top: 5px; }
  .commit-button { width: 100%; }
  .principles-panel { display: block; }
  .scope-note { margin-top: 22px; }
}