.interactive-workspace { max-width:1280px; margin:0 auto; padding:24px 16px 96px; color:var(--text-0,#e8eaf1); }
.interactive-workspace *, .interactive-project-card * { box-sizing:border-box; }
.interactive-workspace .id-simple-heading h2 { margin-top:12px; }
.interactive-workspace .id-complete-label { color:var(--primary,#bba6ff); font-weight:600; }
.interactive-workspace .id-main-operation { min-width:0; }
.interactive-workspace .id-preview-notice { margin-top:18px; padding:14px 18px; border-left:3px solid var(--primary,#bba6ff); border-radius:8px; background:var(--bg-2,#222638); }
.interactive-workspace .id-preview-notice p { margin:8px 0 0; color:var(--text-2,#b1b5c5); font-size:14px; }
.interactive-workspace .id-output-source { padding:0 14px; border:1px solid var(--border,#414357); border-radius:8px; }
.interactive-workspace .id-output-source li { margin-bottom:8px; overflow-wrap:anywhere; line-height:1.7; }
.interactive-workspace .id-output-tabs { display:flex; gap:10px; padding-bottom:18px; border-bottom:1px solid var(--border,#414357); }
.interactive-workspace .id-output-tabs button { min-height:46px; padding:10px 28px; border:1px solid var(--border,#414357); border-radius:10px; color:var(--text-1,#d7d9e4); background:var(--bg-2,#222638); font:inherit; cursor:pointer; }
.interactive-workspace .id-output-tabs [aria-selected=true] { color:var(--primary,#bba6ff); border-color:var(--primary,#a58aff); font-weight:600; }
.interactive-workspace .id-delivery-text { overflow-wrap:anywhere; font:inherit; font-size:16px; line-height:1.95; margin:24px 0; min-height:260px; }
.interactive-workspace h1 { margin:6px 0 10px; font-size:clamp(24px,3vw,34px); line-height:1.35; overflow-wrap:anywhere; }
.interactive-workspace h2 { margin:0 0 18px; font-size:21px; }
.interactive-workspace h3 { margin:16px 0 10px; font-size:17px; }
.interactive-workspace p { line-height:1.75; overflow-wrap:anywhere; }
.id-header { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:22px; }
.id-header p { margin:0; color:var(--text-2,#b1b5c5); }
.id-eyebrow { color:var(--primary,#b39aff); font-size:13px; letter-spacing:.05em; }
.id-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:14px 0; }
.interactive-workspace .btn { min-height:44px; white-space:normal; }
.interactive-workspace [aria-busy=true] { cursor:progress; }
.id-notice { padding:12px 16px; border:1px solid var(--border,#414357); border-radius:10px; background:var(--bg-2,#222638); }
.id-notice.is-error { border-color:#c26468; color:var(--text-0,#fff); }
.id-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:0 0 24px; }
.id-steps button { display:flex; align-items:center; gap:9px; border:1px solid var(--border,#414357); border-radius:10px; padding:13px 12px; background:var(--bg-2,#222638); color:var(--text-1,#d7d9e4); text-align:left; cursor:pointer; min-height:52px; font:inherit; }
.id-steps span { display:inline-grid; place-items:center; flex:0 0 26px; height:26px; border-radius:50%; background:var(--bg-3,#33384a); font-size:13px; }
.id-steps [aria-current=step] { border-color:var(--primary,#a58aff); color:var(--primary,#bba6ff); box-shadow:inset 0 0 0 1px var(--primary,#a58aff); font-weight:600; cursor:default; }
.interactive-workspace .id-steps button:disabled { color:var(--text-2,#b1b5c5); filter:grayscale(1); opacity:.65; cursor:not-allowed; }
.id-steps [aria-current=step] span { color:#fff; background:var(--primary,#805bd5); }
.id-panel { min-width:0; padding:22px; margin-bottom:20px; border:1px solid var(--border,#414357); border-radius:14px; background:var(--bg-1,#1b2030); }
.id-two { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.id-template-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:18px 0; }
.id-template { display:flex; flex-direction:column; align-items:flex-start; gap:8px; min-width:0; padding:16px; border:1px solid var(--border,#414357); border-radius:10px; background:var(--bg-2,#222638); color:inherit; text-align:left; font:inherit; }
button.id-template { cursor:pointer; }
.id-template.selected { border-color:var(--primary,#a58aff); box-shadow:inset 0 0 0 1px var(--primary,#a58aff); }
.id-template span,.id-template small { color:var(--text-2,#b1b5c5); line-height:1.55; }
.interactive-workspace .form-field { display:flex; flex-direction:column; gap:8px; margin:16px 0; min-width:0; }
.interactive-workspace .input { width:100%; min-width:0; font-size:15px; line-height:1.7; }
.interactive-workspace textarea { resize:vertical; }
.interactive-workspace details { margin:16px 0; }
.interactive-workspace summary { cursor:pointer; min-height:44px; padding:10px 0; font-weight:600; }
.id-job { padding:15px; border:1px solid var(--border,#414357); border-radius:10px; margin:16px 0; background:var(--bg-2,#222638); }
.interactive-workspace .id-next-step { margin:12px 0 0; color:var(--primary,#bba6ff); font-size:14px; }
.interactive-workspace .id-job-more { margin:12px 0 0; }
.interactive-workspace .id-job-more summary { min-height:36px; padding:6px 0; color:var(--text-2,#b1b5c5); font-size:14px; }
.interactive-workspace button:disabled { opacity:.5; cursor:not-allowed; }
.interactive-workspace :is(button,a,input,textarea,select,summary):focus-visible { outline:3px solid var(--primary,#ac95ef); outline-offset:3px; }
.interactive-workspace hr { border:0; border-top:1px solid var(--border,#414357); margin:24px 0; }
@media (max-width:767px) {
  .interactive-workspace { padding:16px 12px 100px; }
  .id-header { flex-direction:column; gap:8px; }
  .id-header .id-actions { margin:4px 0; }
  .id-two { grid-template-columns:minmax(0,1fr); gap:0; }
  .id-steps { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .id-steps button { padding:10px; font-size:14px; }
  .id-panel { padding:16px; }
  .id-template { padding:12px; }
  .id-template-grid { gap:8px; }
}
@media (max-width:340px) { .id-template-grid,.id-steps { grid-template-columns:minmax(0,1fr); } }
.interactive-workspace .id-components { display: flex; flex-wrap: wrap; gap: 12px 20px; margin: 20px 0; padding: 16px; border: 1px solid var(--border-color,rgba(148,163,184,.22)); border-radius: 12px; }
.interactive-workspace .id-components label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.interactive-workspace .id-components input { width: 18px; height: 18px; accent-color: var(--accent,#a78bfa); }
.interactive-workspace .id-input-warning { color:var(--warning,#d7aa68); }
.interactive-workspace .id-input-error { color:var(--danger,#fb7185); min-height:1em; }
.interactive-workspace .id-creation-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,320px); gap:24px; align-items:start; }
.interactive-workspace .id-creation-main { padding:26px; }
.interactive-workspace .id-creation-main h2 { margin-top:10px; }
.interactive-workspace .id-creation-aside { display:grid; gap:18px; min-width:0; }
.interactive-workspace .id-creation-summary,.interactive-workspace .id-assistant { padding:20px; border:1px solid var(--border,#414357); border-radius:14px; background:var(--bg-1,#1b2030); min-width:0; overflow-wrap:anywhere; }
.interactive-workspace .id-assistant { border-color:var(--primary,#a58aff); background:var(--bg-2,#222638); }
.interactive-workspace .id-assistant h3,.interactive-workspace .id-creation-summary h3 { margin:9px 0 12px; }
.interactive-workspace .id-creation-summary dl,.interactive-workspace .id-assist-candidate dl,.interactive-workspace .id-concept-card dl { margin:0; display:grid; gap:14px; }
.interactive-workspace .id-creation-summary dt,.interactive-workspace .id-assist-candidate dt,.interactive-workspace .id-concept-card dt { font-size:13px; color:var(--text-2,#b1b5c5); }
.interactive-workspace .id-creation-summary dd,.interactive-workspace .id-assist-candidate dd,.interactive-workspace .id-concept-card dd { margin:5px 0 0; line-height:1.7; overflow-wrap:anywhere; white-space:pre-wrap; }
.interactive-workspace .id-assistant-reading { grid-column:1/-1; padding:30px; border-color:var(--primary,#a58aff); }
.interactive-workspace .id-assist-candidate h2 { margin:10px 0; scroll-margin-top:32px; }
.interactive-workspace .id-assist-candidate .id-assist-fields { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin:24px 0; }
.interactive-workspace .id-assist-fields > div { min-width:0; padding:20px; border:1px solid var(--border,#414357); border-radius:10px; background:var(--bg-2,#222638); }
.interactive-workspace .id-assist-fields > [data-assist-field=seed] { grid-column:1/-1; }
.interactive-workspace .id-assist-candidate dd { font-size:16px; line-height:1.9; }
.interactive-workspace .id-assist-candidate dt { font-weight:600; }
.interactive-workspace .id-assist-explanation { margin:24px 0; }
.interactive-workspace .id-assist-explanation p { white-space:pre-wrap; }
.interactive-workspace .id-assist-footer { border-top:1px solid var(--border,#414357); padding-top:22px; }
.interactive-workspace .id-assist-candidate h4 { margin:10px 0; }
.interactive-workspace .id-assist-candidate small { display:block; margin-top:6px; color:var(--text-2,#b1b5c5); }
.interactive-workspace .id-assist-candidate ul { padding-left:20px; line-height:1.7; }
@media(max-width:767px) { .interactive-workspace .id-assistant-reading { padding:18px; } .interactive-workspace .id-assist-candidate .id-assist-fields { grid-template-columns:minmax(0,1fr); gap:16px; } .interactive-workspace .id-assist-fields > div { padding:16px; } }
.interactive-workspace .id-creation-footer { border-top:1px solid var(--border,#414357); padding-top:18px; margin-top:24px; }
.interactive-workspace .id-source-field small { line-height:1.6; }
.interactive-workspace .id-playstyle { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.interactive-workspace .id-concept-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:22px; }
.interactive-workspace .id-concept-card { padding:20px; gap:12px; }
.interactive-workspace .id-concept-card h3 { margin:0; }
.interactive-workspace .id-concept-card dl { width:100%; gap:15px; }
.interactive-workspace .id-concept-card .btn { margin-top:auto; }
.interactive-workspace .id-empty-state { margin-top:18px; padding:20px; background:var(--bg-2,#222638); border-radius:10px; }
@media(max-width:1000px) { .interactive-workspace .id-creation-layout { grid-template-columns:minmax(0,1fr) 280px; gap:16px; } .interactive-workspace .id-concept-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:767px) { .interactive-workspace .id-creation-layout { grid-template-columns:minmax(0,1fr); gap:0; } .interactive-workspace .id-creation-main { padding:18px; } .interactive-workspace .id-creation-aside { margin-bottom:20px; } .interactive-workspace .id-creation-summary { display:none; } .interactive-workspace .id-concept-grid { grid-template-columns:minmax(0,1fr); } .interactive-workspace .id-playstyle { grid-template-columns:minmax(0,1fr); } }
.interactive-workspace .id-delivery-text { max-width:1040px; margin:28px auto; }
.interactive-workspace .id-delivery-text h2 { margin:0 0 24px; font-size:26px; }
.interactive-workspace .id-delivery-text h3 { margin:36px 0 20px; padding-top:24px; border-top:1px solid var(--border,#414357); font-size:22px; }
.interactive-workspace .id-delivery-text h4 { margin:26px 0 14px; padding:12px 16px; border-left:3px solid var(--primary,#bba6ff); background:var(--bg-2,#222638); font-size:17px; }
.interactive-workspace .id-delivery-text p { line-height:1.95; margin:14px 0; }

/* The reader presents the existing delivery response without changing its text. */
.interactive-workspace .id-simple-output,.interactive-workspace [data-id=output-content] { scroll-margin-top:88px; }
.interactive-workspace .id-output-tabs button small { display:block; margin-top:3px; font-size:12px; font-weight:400; color:var(--text-2,#b1b5c5); }
.interactive-workspace .id-reader-toolbar { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:end; gap:12px 24px; padding:20px 0; }
.interactive-workspace .id-reader-toolbar form { flex:1 1 300px; max-width:480px; min-width:0; }
.interactive-workspace .id-reader-toolbar label { display:block; font-size:13px; margin-bottom:8px; color:var(--text-2,#b1b5c5); }
.interactive-workspace .id-reader-search-row { display:flex; gap:8px; }
.interactive-workspace .id-reader-search-row input { flex:1; }
.interactive-workspace .id-reader-search-row button { flex-shrink:0; }
.interactive-workspace .id-reader-toolbar .id-actions { margin:0; }
.interactive-workspace .id-reader-layout { display:flex; align-items:flex-start; gap:28px; }
.interactive-workspace .id-reader-toc { flex:0 0 225px; min-width:0; margin:0; padding:0 12px; position:sticky; top:20px; border:1px solid var(--border,#414357); border-radius:10px; background:var(--bg-2,#222638); }
.interactive-workspace .id-reader-toc nav { display:flex; flex-direction:column; gap:4px; max-height:65vh; overflow:auto; padding:4px 4px 12px; }
.interactive-workspace .id-reader-toc .btn { text-align:left; width:100%; justify-content:flex-start; overflow-wrap:anywhere; font-weight:400; font-size:14px; line-height:1.6; }
.interactive-workspace .id-reader-toc [aria-current] { color:var(--primary,#bba6ff); background:var(--bg-1,#1b2030); box-shadow:inset 3px 0 var(--primary,#bba6ff); font-weight:600; }
.interactive-workspace .id-reader-main { flex:1; min-width:0; }
.interactive-workspace .id-reader-location { padding:12px 0 4px; border-bottom:1px solid var(--border,#414357); }
.interactive-workspace .id-reader-location strong { display:block; overflow-wrap:anywhere; font-size:15px; }
.interactive-workspace .id-reader-location .id-actions:empty { display:none; }
.interactive-workspace .id-reader-location p,.interactive-workspace .id-reader-footer p { font-size:13px; color:var(--text-2,#b1b5c5); }
.interactive-workspace .id-reader .id-delivery-text { margin:24px 0; }
.interactive-workspace .id-reader .id-delivery-text > h3:first-child { border:0; padding-top:0; margin-top:0; }
.interactive-workspace .id-reader-link { display:inline; min-height:32px; margin:4px 0; padding:4px 8px; border:1px solid var(--border,#414357); border-radius:6px; color:var(--primary,#bba6ff); background:var(--bg-2,#222638); font:inherit; font-size:13px; cursor:pointer; }
.interactive-workspace .id-reader-results { margin:0 0 20px; padding:18px; border:1px solid var(--primary,#a58aff); border-radius:10px; background:var(--bg-2,#222638); }
.interactive-workspace .id-reader-results h3 { margin-top:0; overflow-wrap:anywhere; }
.interactive-workspace .id-reader-results ul { padding:0; list-style:none; }
.interactive-workspace .id-reader-results li { padding:8px 0; border-bottom:1px solid var(--border,#414357); }
.interactive-workspace .id-reader-results li .btn { text-align:left; overflow-wrap:anywhere; }
.interactive-workspace .id-reader-results li p { margin:4px 0 8px; color:var(--text-2,#b1b5c5); font-size:13px; }
.interactive-workspace .id-reader-footer { padding-top:12px; border-top:1px solid var(--border,#414357); }
.interactive-workspace .id-reader [tabindex]:focus-visible { outline:2px solid var(--primary,#bba6ff); outline-offset:4px; }
@media(max-width:1000px) { .interactive-workspace .id-reader-layout { gap:18px; } .interactive-workspace .id-reader-toc { flex-basis:180px; } }
@media(max-width:767px) {
  .interactive-workspace .id-reader-layout { flex-direction:column; gap:18px; }
  .interactive-workspace .id-reader-toc { position:static; flex-basis:auto; width:100%; }
  .interactive-workspace .id-reader-main { width:100%; }
  .interactive-workspace .id-reader-toc nav { max-height:45vh; }
  .interactive-workspace .id-reader-results { padding:12px; }
  .interactive-workspace .id-reader-toolbar { align-items:stretch; }
  .interactive-workspace .id-reader-toolbar form { max-width:none; }
  .interactive-workspace .id-reader .id-delivery-text h3 { font-size:20px; }
}