:root {
  --studio-edge: #d8dfd2;
  --studio-raise: 0 2px 5px #14291c08, 0 12px 28px -15px #17352640;
  --studio-float: 0 3px 10px #14291c14, 0 22px 44px -19px #17352659;
  --studio-ease: cubic-bezier(.2,.72,.28,1);
}
.studio-shell {
  background-image: radial-gradient(ellipse at 85% 0%, #e5ebde66, transparent 55rem),
    linear-gradient(135deg,#fffaf43b,transparent 42rem);
}
.studio-shell .studio-header {box-shadow:0 1px 0 #17352614,0 6px 24px -18px #17352670}
.studio-shell :is(.discovery-card,.collection-tiles>*,.brief-work-card,.scope-group-choice,.direction-panel,.form-panel,.upload-panel,.export-thumbs>*,.workflow-bar) {
  box-shadow:var(--studio-raise);
  border-radius:16px;
}
.studio-shell :is(.primary,.secondary,.connection,.scope-group-choice,.discovery-card,.collection-tiles>*) {
  transition:background-color .2s,border-color .2s,box-shadow .25s var(--studio-ease);
}
.studio-shell .primary:not(:disabled) {box-shadow:0 5px 12px -5px #10372785}
.studio-shell :is(.primary,.secondary):not(:disabled):active {filter:brightness(.96)}
.studio-shell .scope-group-choice[aria-pressed="true"] {box-shadow:inset 0 0 0 1px #547c55, var(--studio-raise)}
.studio-shell .scope-group-photo {border-radius:9px}
.studio-shell .direction-panel {background:linear-gradient(155deg,#fffdf8,#f7f7ee)}
.studio-shell .editorial-board-row {padding-inline:12px}
.studio-shell :is(.concept-canvas,.export-thumbs img) {box-shadow:var(--studio-raise)}
.studio-shell .example-canvas>img {object-fit:contain}
.modal {border-radius:20px;box-shadow:0 25px 85px #0d211c55}
@media(hover:hover) and (pointer:fine) {
  .studio-shell :is(.discovery-card,.collection-tiles>*,.scope-group-choice,.primary):not(:disabled):hover {
    box-shadow:var(--studio-float);
  }
}
.editorial-brief .editorial-material {
  align-self:start;min-width:0;min-height:0;display:block;overflow:hidden;
  background:#fffdf7;border:1px solid var(--studio-edge);border-radius:20px;
  box-shadow:var(--studio-float);padding:clamp(8px,1.1vw,16px);
}
.brief-reference-stage {
  display:grid;place-items:center;aspect-ratio:3/2;overflow:hidden;
  background:radial-gradient(ellipse at 50% 28%,#fdf9ed,#eae6d8);
  border-radius:12px;
}
.editorial-brief .editorial-material .brief-reference-stage img {
  display:block;width:100%;height:100%;min-height:0;min-width:0;
  object-fit:contain;object-position:center;border-radius:clamp(8px, 1vw, 12px);
}
.editorial-brief .editorial-material .brief-reference-controls {
  position:static;inset:auto;background:transparent;padding:12px 0 2px;
  gap:10px;border-radius:0;
}
.brief-reference-controls>div {text-align:center;min-width:0}
.brief-reference-controls strong {font:600 clamp(15px,1.6vw,21px)/1.2 Georgia,serif}
.brief-reference-controls small {color:#596856}
.brief-reference-controls button {border-radius:50%;display:grid;place-items:center;box-shadow:0 3px 10px #12372c15}
.brief-reference-dots {display:flex;justify-content:center;gap:2px;margin-top:4px}
.brief-reference-dots button {
  display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;background:none;box-shadow:none;
}
.brief-reference-dots button::before {
  content:"";display:block;width:7px;height:7px;border-radius:9px;background:#8a9b89;
  transition:background-color .16s;
}
.brief-reference-dots button[aria-current="true"]::before {width:21px;background:#20513c}
@keyframes studio-enter {from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes studio-fade {from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:no-preference) {
  .modal {animation:studio-enter .24s var(--studio-ease) both}
  .modal-backdrop {animation:studio-fade .18s ease-out both}
}
@media(prefers-reduced-motion:reduce) {
  .studio-shell *, .modal-backdrop, .modal, #toast {transition-duration:0s!important;scroll-behavior:auto!important}
  .studio-shell :is(.discovery-card,.collection-tiles>*,.scope-group-choice,.primary,.secondary):hover {transform:none}
}
@media(max-width:680px) {
  .editorial-brief .editorial-material {border-radius:16px}
  .brief-reference-stage {border-radius:9px}
  .studio-shell .head-actions :is(.primary,.secondary) {font-size:14px;white-space:normal}
  .studio-shell .section-head {flex-wrap:wrap}
  .studio-shell .editorial-board-row {padding-inline:6px}
}

/* Active navigation and the remaining POSM screens. */
.studio-shell .studio-top-nav > a,
.studio-shell .studio-top-nav summary {
  border-radius:9px;
  padding:7px 9px;
}
.studio-shell .studio-top-nav a[aria-current],
.studio-shell .design-menu[data-active="true"] > summary,
.studio-shell .support-link[aria-current] {
  background:#e2ecdd;
  color:#163e2e;
  box-shadow:inset 0 -2px #54815e;
  font-weight:650;
}
.workspace-shell .studio-header .design-menu[data-active="true"] > summary {
  background:#ffffff24;
  color:#fffdf4;
  box-shadow:inset 0 -2px #b6cd9b;
}
.studio-shell .workflow-step[aria-current="step"] {
  background:#deebdc;
  color:#153e2e;
  box-shadow:inset 0 -3px #51815c;
}
.workspace-shell .scope-needs {
  padding:clamp(12px,2vw,24px);
  border-radius:18px;
  border:1px solid var(--studio-edge);
  background:#ffffff65;
}
.workspace-shell .scope-group-choice {
  background:#fffdf8;
  border-color:var(--studio-edge);
  text-align:left;
}
.workspace-shell .scope-group-choice[aria-pressed="true"] {
  background:#e4efdf;
  border-color:#74977b;
}
.workspace-shell .scope-total {
  padding:8px 12px;
  border-radius:12px;
  background:#e4efdf;
  color:#24513b;
}
.studio-shell .concept-empty {
  display:grid;
  justify-items:center;
  align-content:center;
  gap:8px;
  text-align:center;
  padding:24px 12px;
  background:radial-gradient(ellipse at top,#fdfaf0,#edf2e8);
  color:#254c3b;
}
.studio-shell .concept-empty > svg {margin-bottom:4px}
.studio-shell .concept-empty p {margin:0}
.studio-shell .editorial-progress {
  border:1px solid var(--studio-edge);
  border-radius:14px;
  padding:14px;
  background:#fffdf8;
  box-shadow:var(--studio-raise);
}
.studio-shell .export-stats {
  background:#edf2e7;
  border:1px solid var(--studio-edge);
  border-radius:16px;
  padding:16px;
}
.studio-shell .export-thumbs > div {
  padding:10px;
  border:1px solid var(--studio-edge);
  background:#fffdf8;
}
.studio-shell .export-thumbs img {
  height:auto;
  aspect-ratio:3/2;
  object-fit:contain;
  background:#f0eee4;
}
@media(max-width:560px) {
  .studio-shell .studio-top-nav {gap:3px}
  .studio-shell .studio-top-nav > a,
  .studio-shell .studio-top-nav summary {padding-inline:5px}
  .studio-shell .export-stats {padding:12px}
}

/* Balance the brief and its reference without enlarging the form controls. */
.editorial-brief .brief-work-card {
  display:flex;
  flex-direction:column;
  padding:clamp(16px,2vw,28px);
}
.brief-work-card .brand-modes {align-self:flex-start}
.editorial-brief .brief-work-card h1 {font-size:clamp(27px,2.85vw,39px)}
.editorial-brief .brief-work-card .workspace-actions {margin-top:auto}
.editorial-brief .editorial-brief-grid {margin-bottom:20px}
.editorial-brief .editorial-material {box-shadow:var(--studio-raise)}
.brief-reference-controls strong {font-size:clamp(15px,1.35vw,19px)}
@media(min-width:1101px) {
  .editorial-brief.website-start {
    grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
    gap:18px;
  }
  .editorial-brief .editorial-material {
    align-self:stretch;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
}

/* Quiet workspace: one reading path, with a secondary reference column. */
.workspace-shell .workflow-bar {
  box-shadow:none;
  border-radius:0;
}
.studio-shell .workflow-step[aria-current="step"] {
  background:#e8eee5;
  box-shadow:inset 0 -2px #306346;
}
.editorial-brief.website-start {
  width:min(100%,1160px);
  margin-inline:auto;
  align-items:start;
  gap:clamp(24px,5vw,72px);
}
.editorial-brief .brief-work-card {
  padding:0;
  border:0;
  border-radius:0;
  box-shadow:none;
  background:transparent;
}
.brief-intro {margin-bottom:22px}
.brief-intro .brief-kicker {
  margin:0 0 10px;
  color:#486550;
  font-size:12px;
  font-weight:700;
  letter-spacing:.12em;
}
.editorial-brief .brief-work-card h1 {
  font-size:clamp(28px,3.1vw,44px);
  letter-spacing:-.035em;
}
.brief-intro > p:last-child {margin:10px 0 0;color:#4e5e53}
.brief-work-card .brand-modes {margin:0}
.editorial-brief .brief-work-card .editorial-brief-grid {
  grid-template-columns:minmax(0,1fr);
  gap:18px;
  margin:22px 0;
}
.editorial-brief .brief-work-card .workspace-actions {
  position:static;
  padding:14px 0 0;
  background:transparent;
}
.editorial-brief .editorial-material {
  align-self:start;
  padding:10px;
  border-radius:16px;
  box-shadow:none;
}
.brief-reference-controls button {box-shadow:none}
.brief-reference-controls strong {font:600 15px/1.35 system-ui,sans-serif}
@media(min-width:900px) {
  .editorial-brief.website-start {
    grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  }
}

/* Keep control geometry steady during hover, press and rerender. */
.studio-shell :is(button,a,summary),
.studio-shell :is(button,a,summary):is(:hover,:active) {
  transform:none;
}
.studio-shell .studio-header {transition:background-color .16s,box-shadow .16s}
.studio-shell .brief-reference-dots button::before {width:21px;transform:scaleX(.34)}
.studio-shell .brief-reference-dots button[aria-current="true"]::before {transform:none}

/* Step navigation sets the scroll position when replacing the workspace. */
html:has(.workspace-shell) {overflow-anchor:none;scrollbar-gutter:stable}

/* Workspace interactions are immediate, including selection and step changes. */
.workspace-shell,
.workspace-shell *,
.workspace-shell *::before,
.workspace-shell *::after,
html:has(.workspace-shell) #overlay * {
  animation:none!important;
  transition:none!important;
  scroll-behavior:auto!important;
}
.editorial-board-row .board-error {
  max-width:420px;
  font-size:14px;
  line-height:1.5;
  color:#91442e;
  overflow-wrap:anywhere;
}
@media(max-width:680px) {
  .editorial-board-row {flex-wrap:wrap}
  .editorial-board-row .board-error {order:5;flex-basis:100%}
}