.handbook-nav { margin-left: auto; display: flex; gap: 16px; font-size: 13px; }.handbook-nav a { color: var(--text-muted); text-decoration: none; }.handbook-nav a:hover,.handbook-nav a.is-active{color:var(--accent)}
.studio { padding-top: 28px; padding-bottom: 96px; max-width: 980px; }.studio__intro { max-width: 720px; margin-bottom: 24px; }.studio__intro h2 { margin: 6px 0 8px; font-size: clamp(24px, 4vw, 34px); letter-spacing: -.03em; }.studio__intro p:last-child { color: var(--text-muted); line-height: 1.6; }.page-eyebrow { margin: 0; color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.studio-form { display: grid; gap: 22px; }.studio-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; padding: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }.studio-grid label { display: grid; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-muted); }.studio-grid [hidden] { display:none!important; }.studio-grid .wide { grid-column: 1/-1; }.studio-grid input,.studio-grid textarea,.code-input { width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; background: #fff; color: var(--text); font: inherit; font-size: 13px; }.studio-grid textarea,.code-input { resize: vertical; line-height: 1.5; }.studio__section { padding: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }.studio__section-head { display:flex; justify-content:space-between; gap:12px; align-items:center; margin-bottom:12px; }.studio__section h3 { margin: 5px 0 0; }.studio-help { margin: 10px 0 0; color: var(--text-muted); font-size: 12px; line-height: 1.5; }.studio-actions { display:flex; gap:10px; flex-wrap:wrap; }.studio-status { min-height: 22px; margin: 0; color: var(--accent); white-space: pre-wrap; font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }.studio-status.is-error { color: var(--danger, #b44949); }
@media(max-width:640px){.handbook-nav{gap:9px;font-size:11px}.studio-grid{grid-template-columns:1fr}.studio-grid .wide{grid-column:auto}.studio__section-head{align-items:flex-start;flex-direction:column}}
.studio__section-actions{display:flex;gap:8px;flex-wrap:wrap}.advanced-json{margin-top:14px;border-top:1px solid var(--border);padding-top:12px}.advanced-json summary{cursor:pointer;color:var(--accent);font-size:13px;font-weight:600}.advanced-json .code-input{margin-top:12px}
.studio__build { border-color: rgba(35,107,86,.28); background: linear-gradient(180deg,#fff,#f7fbf8); }
.studio-preview { margin-top: 16px; padding: 16px; border: 1px dashed #b9d2c6; border-radius: var(--radius); background: rgba(255,255,255,.72); }
.studio-preview > p { margin: 0; color: var(--text-muted); font-size: 13px; }
.studio-preview__steps { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; counter-reset: stage; }
.studio-preview__steps li { counter-increment: stage; display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 2px 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: #fff; }
.studio-preview__steps li::before { content: counter(stage); grid-row: 1/3; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent-tint); color: var(--accent); font-size: 12px; font-weight: 700; }
.studio-preview__steps b { font-size: 13px; }
.studio-preview__steps span { color: var(--text-muted); font-size: 11.5px; line-height: 1.4; }
.studio-preview__endings { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.studio-ending { padding: 6px 9px; border-radius: 999px; background: #e9f6ee; color: #27734d; font-size: 11px; font-weight: 600; }
.studio-ending--failure { background: #fff0ed; color: #9b5145; }
.studio-advanced { padding: 15px 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.studio-advanced > summary { cursor: pointer; color: var(--accent); font-size: 13px; font-weight: 600; }
.studio-grid--advanced { margin: 14px 0; padding: 0; border: 0; box-shadow: none; }
.studio-publish { display: flex; align-items: center; gap: 9px; color: var(--text-muted); font-size: 12.5px; }
.studio-publish input { width: 16px; height: 16px; accent-color: var(--accent); }
.studio-actions .btn:disabled { opacity: .5; cursor: not-allowed; }
.studio-result-actions[hidden] { display: none; }
.studio-control { position: relative; display: block; min-width: 0; }
.studio-control > input,.studio-control > textarea { padding-right: 72px; padding-bottom: 24px; }
.studio-counter {
  position: absolute;
  right: 10px;
  bottom: 7px;
  padding: 1px 4px;
  border-radius: 4px;
  background: rgba(255,255,255,.92);
  color: var(--neutral-mute);
  font-size: 12px;
  font-weight: 600;
  pointer-events: none;
}
.studio-counter.is-near-limit { color: #9B5D00; font-weight: 700; }
.required-mark { color: var(--danger, #B44949); font-weight: 800; }
.studio-required-note { margin: -2px 0 0; color: var(--text-muted); font-size: 11.5px; font-weight: 600; }
.studio-grid label.has-error { color: var(--danger, #B44949); }
.studio-grid label.has-error input,.studio-grid label.has-error textarea { border-color: var(--danger, #B44949); box-shadow: 0 0 0 3px rgba(180,73,73,.12); }
.studio-required-errors {
  margin-top: 14px;
  padding: 11px 13px;
  border: 1px solid rgba(180,73,73,.38);
  border-radius: 9px;
  background: #FFF2F0;
  color: #8E302B;
  font-size: 12.5px;
  line-height: 1.45;
}
.studio-required-errors[hidden] { display: none; }
.studio-generate { margin-top: 12px; }
.graph-editor { min-width:0; max-width:100%; }.graph-editor[hidden] { display: none; }
.graph-editor__group { display: grid; gap: 12px; margin-top: 20px; }
.node-palette { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:16px; padding:12px; border:1px solid var(--border); border-radius:12px; background:#F8FBF9; }
.node-palette > span { margin-right:4px; color:var(--text-muted); font-size:13px; font-weight:700; }
.node-palette__item { min-height:44px; padding:9px 12px; border:1px solid #9CB3A7; border-radius:9px; background:#fff; color:var(--text); font:700 13px/1.2 inherit; cursor:pointer; }
.node-palette__item:hover { border-color:var(--accent); background:var(--accent-tint); }
.node-palette__item b { margin-right:5px; color:var(--accent); }
.node-palette__item--success b { color:#27734d; }.node-palette__item--failure b { color:#9b5145; }
.graph-canvas-shell { width:100%; max-width:100%; min-width:0; box-sizing:border-box; margin-top:14px; overflow:auto; border:1px solid var(--border); border-radius:12px; background:#F8FBF9; }
.graph-canvas { width:100%; min-width:0; min-height:360px; overflow:visible; }
.graph-canvas svg { display:block; min-width:100%; max-width:none; }
.graph-node { cursor:grab; touch-action:none; }.graph-node:active { cursor:grabbing; }
.graph-node rect { fill:#fff; stroke:#9CB3A7; stroke-width:1.5; }
.graph-node.is-selected rect { fill:#EDF7F1; stroke:var(--accent); stroke-width:2.5; }
.graph-node text { pointer-events:none; fill:var(--text); font:600 13px Inter,Arial,sans-serif; }
.graph-node .graph-node__type { fill:var(--text-muted); font-size:11px; font-weight:600; }
.graph-edge { fill:none; stroke:#789588; stroke-width:2; }
.graph-edge-hit { fill:none; stroke:transparent; stroke-width:16; cursor:pointer; }
.graph-edge-end,.graph-connect-handle { fill:#fff; stroke:var(--accent); stroke-width:2.5; cursor:grab; }
.graph-edge-end:active,.graph-connect-handle:active { cursor:grabbing; }
.graph-drag-line { fill:none; stroke:var(--accent); stroke-width:2; stroke-dasharray:6 4; pointer-events:none; }
.graph-workspace { display:grid; grid-template-columns:minmax(0,1fr); min-width:0; max-width:100%; gap:14px; align-items:start; }
.graph-transitions { min-width:0; max-width:100%; box-sizing:border-box; padding:12px; border:1px solid var(--border); border-radius:12px; background:#FAFCFB; }
.graph-transitions summary { cursor:pointer; color:var(--accent-strong); font-weight:700; }
.graph-inspector { min-width:0; }
.graph-editor__heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.graph-editor__heading h4 { margin: 0; }
.node-editor { display: grid; gap: 12px; }
.node-card { display: grid; gap: 11px; padding: 15px; border: 1px solid var(--border); border-radius: 12px; background: #FAFCFB; }
.node-card__head { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 9px; }
.node-card__head b { color: var(--accent); font: 600 11px/1.2 ui-monospace, monospace; }
.node-card__head button,.edge-row button { color: #9B3C36; font-size: 11px; }
.node-card label { display: grid; gap: 5px; color: var(--text-muted); font-size: 11.5px; font-weight: 600; }
.node-card input,.node-card textarea,.node-card select,.edge-row input,.edge-row select,.graph-refine textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-size: 12px;
}
.node-card textarea,.graph-refine textarea { resize: vertical; line-height: 1.45; }
.node-card__grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.node-refine { display:grid; gap:8px; padding-top:10px; border-top:1px solid var(--border); }
.node-refine textarea { min-height:70px; }
.edge-editor { display: grid; min-width:0; max-width:100%; gap: 8px; }
.edge-row { display: grid; grid-template-columns: minmax(150px,1fr) auto minmax(150px,1fr); min-width:0; align-items: center; gap: 8px; padding: 10px; border: 1px solid var(--border); border-radius: 10px; background: #FAFCFB; }
.edge-row select:nth-of-type(3) { grid-column:1; }.edge-row input { grid-column:2; min-width:0; }.edge-row button { grid-column:3; justify-self:end; }
.graph-refine { display: grid; gap: 8px; margin-top: 22px; padding: 16px; border: 1px solid rgba(35,107,86,.25); border-radius: 12px; background: var(--accent-tint); }
.graph-refine > label { color: var(--accent-strong); font-size: 13px; font-weight: 700; }
.graph-refine__actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.graph-refine small { color: var(--text-muted); font-size: 10.5px; }
.generation-progress { display:flex; align-items:center; gap:12px; margin-top:14px; padding:12px 14px; border:1px solid #BFD8CC; border-radius:10px; background:#F2F8F5; }
.generation-progress[hidden] { display:none; }
.generation-progress__spinner { width:20px; height:20px; border:3px solid #D8E8E0; border-top-color:var(--accent); border-radius:50%; animation:studio-spin .8s linear infinite; }
.generation-progress p { margin:3px 0 0; color:var(--text-muted); font-size:14px; }
@keyframes studio-spin { to { transform:rotate(360deg); } }
@media(max-width:760px){.graph-workspace{grid-template-columns:1fr}.node-card__grid{grid-template-columns:1fr}.edge-row{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}.edge-row select:nth-of-type(3),.edge-row input{grid-column:1/-1}.edge-row button{grid-column:3;justify-self:end}.graph-editor__heading{align-items:flex-start;flex-direction:column}.node-palette{align-items:stretch}.node-palette>span{flex-basis:100%}.node-palette__item{flex:1 1 140px}}

/* v21.15: the editor uses the same readable three-weight typography system. */
.studio-grid label,.studio-help,.studio-status,.studio-preview>p,.studio-preview__steps b,.studio-preview__steps span,.studio-publish,.studio-required-note,.node-card label,.graph-refine small{font-size:14px;line-height:1.45}
.studio-grid input,.studio-grid textarea,.code-input{font-size:15px}
.source-prep-toggle{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:9px 12px;border:1px solid #9CB3A7;border-radius:999px;background:#fff;color:var(--accent-strong);font:700 13px/1.2 inherit;cursor:pointer}.source-prep-toggle:hover{border-color:var(--accent);background:var(--accent-tint)}.source-prep-toggle b{padding:3px 6px;border-radius:999px;background:#FFF4D8;color:#8B6500;font-size:10px;text-transform:uppercase;letter-spacing:.05em}.source-prep{display:grid;gap:14px;margin-bottom:22px;padding:18px;border:1px solid #C9D9D1;border-radius:var(--radius-lg);background:linear-gradient(180deg,#fff,#F6FAF8);box-shadow:var(--shadow-sm)}.source-prep[hidden],.source-preview[hidden]{display:none}.source-prep__inputs{display:grid;grid-template-columns:minmax(0,2fr) minmax(220px,1fr);gap:14px}.source-prep__inputs>label,.source-prep__file{display:grid;align-content:start;gap:7px;color:var(--text-muted);font-size:13px;font-weight:700}.source-prep__inputs textarea{width:100%;box-sizing:border-box;padding:11px 12px;border:1px solid var(--border);border-radius:var(--radius);font:14px/1.5 inherit;resize:vertical}.source-prep__file{padding:13px;border:1px dashed #AAC2B6;border-radius:var(--radius);background:#fff}.source-prep__file input{max-width:100%;font-size:12px}.source-prep__file small{font-weight:500;line-height:1.45}.source-prep__status,.source-preview__actions span{color:var(--text-muted);font-size:12px;line-height:1.45}.source-preview{display:grid;gap:12px;padding-top:14px;border-top:1px solid var(--border)}.source-preview__summary{display:flex;align-items:center;justify-content:space-between;gap:12px}.source-preview__summary>div{display:grid;gap:3px}.source-preview__summary span{color:var(--text-muted);font-size:12px}.source-preview__summary strong{color:var(--accent);font-size:12px}.source-preview__notice{margin:0;padding:10px 12px;border-radius:9px;background:#FFF8E8;color:#765900;font-size:12px;line-height:1.45}.source-preview__sections{display:grid;gap:8px;max-height:430px;overflow:auto;padding-right:3px}.source-section{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;padding:11px 12px;border:1px solid var(--border);border-radius:10px;background:#fff;cursor:pointer}.source-section:has(input:checked){border-color:#8CB7A3;background:#F4FAF7}.source-section input{width:17px;height:17px;margin-top:2px;accent-color:var(--accent)}.source-section span{display:grid;gap:3px}.source-section b{font-size:12px}.source-section small{color:var(--accent);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}.source-section p{margin:3px 0 0;color:var(--text-muted);font-size:12px;line-height:1.45}.source-preview__actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}@media(max-width:700px){.source-prep__inputs{grid-template-columns:1fr}.source-preview__summary{align-items:flex-start;flex-direction:column}.source-preview__actions{align-items:stretch;flex-direction:column}.source-preview__actions .btn{width:100%}#source-prep-close{align-self:flex-end}}