:root {
  color-scheme: light;
  --ink: #20202a;
  --muted: #777487;
  --subtle: #a7a3b2;
  --page: #f3f0f8;
  --surface: #ffffff;
  --surface-2: #faf9fc;
  --border: #e8e4ed;
  --border-strong: #d8d2df;
  --brand: #6d5bd0;
  --brand-dark: #5140b3;
  --brand-soft: #f0edff;
  --green: #24835d;
  --green-soft: #e9f7f0;
  --orange: #b66820;
  --orange-soft: #fff2df;
  --red: #b64b55;
  --red-soft: #fff0f1;
  --blue: #356fa8;
  --blue-soft: #eaf4ff;
  --shadow: 0 18px 54px rgba(34, 27, 48, .13);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { background: #15141a; }
body { min-width: 760px; margin: 0; background: #15141a; color: var(--ink); font-size: 14px; }
button, input, select { color: inherit; font: inherit; }
button { cursor: pointer; }
.ui-icon { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }

.review-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 24px;
  border-bottom: 1px solid #2d2b34;
  background: rgba(21, 20, 26, .96);
  color: white;
}
.review-brand { display: flex; align-items: center; gap: 12px; }
.prototype-mark { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; background: #8170ec; font-size: 11px; font-weight: 900; letter-spacing: .08em; }
.review-brand p, .review-brand h1 { margin: 0; }
.review-brand p { color: #9793a1; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.review-brand h1 { margin-top: 3px; font-size: 15px; }
.review-controls { display: flex; align-items: end; gap: 8px; }
.review-controls label { display: grid; gap: 4px; color: #aaa6b2; font-size: 9px; font-weight: 700; text-transform: uppercase; }
.review-controls select, .review-button { height: 34px; border: 1px solid #3a3741; border-radius: 9px; background: #211f27; color: #e5e2ea; font-size: 11px; }
.review-controls select { min-width: 150px; padding: 0 28px 0 10px; }
.review-button { padding: 0 12px; }
.review-button:hover, .review-button[aria-pressed="true"] { border-color: #8170ec; background: #2a263a; color: #c8c0ff; }

.state-pills { display: flex; gap: 7px; overflow-x: auto; padding: 10px 24px; border-bottom: 1px solid #2d2b34; background: #1c1a21; scrollbar-width: thin; }
.state-pill { flex: 0 0 auto; border: 1px solid #35323c; border-radius: 999px; background: transparent; padding: 7px 11px; color: #8f8b98; font-size: 10px; }
.state-pill:hover { color: white; }
.state-pill.active { border-color: #8170ec; background: #332d51; color: #ded9ff; }

.prototype-layout { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 16px; padding: 16px; }
.prototype-stage { min-height: 820px; overflow: hidden; border: 1px solid #34313b; border-radius: 22px; background: var(--page); box-shadow: 0 25px 70px rgba(0, 0, 0, .32); }
#screen-root, #screen-root > * { min-height: 820px; }
.review-notes { position: sticky; top: 16px; align-self: start; max-height: calc(100vh - 32px); overflow-y: auto; border: 1px solid #35323c; border-radius: 18px; background: #201e25; padding: 18px; color: #d8d4df; }
.note-heading { padding-bottom: 14px; border-bottom: 1px solid #37333e; }
.note-heading p, .note-heading h2 { margin: 0; }
.note-heading p { color: #9189c5; font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.note-heading h2 { margin-top: 4px; font-size: 17px; }
.review-notes section { padding: 13px 0; border-bottom: 1px solid #322f38; }
.review-notes section:last-child { border: 0; }
.review-notes section > span { color: #8170ec; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.review-notes p, .review-notes li { color: #aaa5b1; font-size: 11px; line-height: 1.55; }
.review-notes p { margin: 6px 0 0; }
.review-notes ul { margin: 7px 0 0; padding-left: 16px; }
.question-note { margin-top: 4px; border-radius: 12px; background: #292438; padding-inline: 12px !important; }
body[data-notes-visible="false"] .prototype-layout { grid-template-columns: minmax(0, 1fr); }
body[data-notes-visible="false"] .review-notes { display: none; }
body[data-stage-mode="studio"] .prototype-stage, body[data-stage-mode="studio"] #screen-root, body[data-stage-mode="studio"] #screen-root > * { min-height: 880px; }

.badge { display: inline-flex; align-items: center; min-height: 22px; border-radius: 999px; padding: 4px 8px; white-space: nowrap; font-size: 9px; font-weight: 800; }
.badge-purple { background: var(--brand-soft); color: var(--brand); }
.badge-green { background: var(--green-soft); color: var(--green); }
.badge-orange { background: var(--orange-soft); color: var(--orange); }
.badge-red { background: var(--red-soft); color: var(--red); }
.badge-blue { background: var(--blue-soft); color: var(--blue); }
.badge-neutral { background: #f0eef2; color: #6f6b76; }
.primary-button, .secondary-button { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; border-radius: 12px; padding: 0 15px; font-size: 11px; font-weight: 800; }
.primary-button { border: 1px solid #24222a; background: #24222a; color: white; box-shadow: 0 4px 10px rgba(27, 24, 33, .12); }
.primary-button:hover { background: #37333f; }
.secondary-button { border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink); }
.secondary-button:hover { border-color: #bcb4c7; background: var(--surface-2); }
.prototype-toast { position: fixed; z-index: 100; bottom: 28px; left: 50%; transform: translateX(-50%); border-radius: 12px; background: #25222b; padding: 11px 16px; color: white; box-shadow: var(--shadow); font-size: 11px; font-weight: 700; }

.entity-mark { display: grid; width: 36px; height: 36px; flex: 0 0 auto; place-items: center; border-radius: 12px; font-size: 9px; font-weight: 900; letter-spacing: .05em; }
.entity-mark.violet { background: #eeebff; color: #6752ca; }
.entity-mark.blue { background: #e7f2ff; color: #3170aa; }
.entity-mark.teal { background: #e6f7f4; color: #167a6b; }
.entity-mark.orange { background: #fff0de; color: #b26725; }
.entity-mark.green { background: #e6f6ee; color: #267d58; }
.entity-mark.rose { background: #ffeaed; color: #b04e5a; }

@media (prefers-reduced-motion: no-preference) {
  button, .recipe-card, .studio-node { transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease, box-shadow 140ms ease, transform 140ms ease; }
}