body {
  --accent: var(--yellow);
  --suite-panel: #10110f;
  --suite-green: #86b88c;
}

button, input, textarea, select { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.version-tag,
.quality-badge,
.task-number {
  color: var(--text-dim);
  font-size: 9px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.domain-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0.2rem 0 1.2rem;
}

.domain-strip span,
.filter-chip {
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 100px;
  color: var(--text-dim);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.suite-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  margin-top: 0.4rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--suite-panel);
}

.suite-facts div { padding: 12px; border-right: 1px solid var(--border); }
.suite-facts div:last-child { border-right: 0; }
.suite-facts strong { display: block; color: var(--text); font-size: 17px; font-weight: 500; }
.suite-facts span { color: var(--muted); font-size: 8px; letter-spacing: 0.08em; text-transform: uppercase; }

.field-label {
  margin: 0.6rem 0 0.4rem;
  color: var(--text-dim);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.text-field,
.wide-select,
.task-input,
.task-textarea {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 11px 12px;
  border: 1px solid var(--border-bright);
  border-radius: var(--radius);
  outline: none;
  background: var(--surface);
  color: var(--text);
}

.text-field:focus,
.wide-select:focus,
.task-input:focus,
.task-textarea:focus { border-color: var(--yellow); }

.field-note { margin: 0.3rem 0 0.6rem; color: var(--muted); font-size: 11px; }
.consent-row { display: grid; grid-template-columns: 18px 1fr; gap: 10px; margin-top: 1rem; color: #aaa; font: 12px/1.55 var(--font-sans); }
.consent-row input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--yellow); }
.form-error { min-height: 18px; margin: 0.45rem 0 0; color: var(--red); font-size: 11px; }

.suite-dashboard {
  width: min(100%, 1040px);
  max-width: 1040px;
  height: min(calc(100dvh - clamp(2rem, 6vh, 4rem)), 820px);
  max-height: calc(100dvh - clamp(2rem, 6vh, 4rem));
  gap: 0;
}

.suite-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--border);
}

.suite-header h2 { margin: 5px 0 0; }
.session-chip { display: flex; align-items: center; gap: 7px; color: var(--text-dim); font-size: 10px; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(94, 201, 122, 0.08); }

.dashboard-summary {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 17px;
  align-items: center;
  width: 100%;
  padding: 14px 0;
}

.dashboard-summary p { margin: 3px 0 0; color: var(--muted); font-size: 11px; }
.dashboard-summary .section-label { display: block; margin: 0 0 2px; }
.dashboard-summary strong { color: var(--text); font-size: 13px; font-weight: 400; }
.progress-ring { --progress: 0; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: conic-gradient(var(--yellow) calc(var(--progress) * 1%), var(--border) 0); position: relative; }
.progress-ring::after { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: var(--bg); }
.progress-ring span { z-index: 1; font-size: 10px; }
.compact-btn { max-width: none; margin: 0; padding: 7px 12px; font-size: 10px; }

.filter-row { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; padding: 4px 0 12px; }
.filter-chip { margin: 0; max-width: none; background: transparent; cursor: pointer; }
.filter-chip.active { border-color: var(--yellow); color: var(--yellow); background: rgba(212, 170, 63, 0.07); }

.task-catalogue {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  width: 100%;
  padding-right: 5px;
  overflow-y: auto;
  scrollbar-color: var(--border-bright) transparent;
}

.task-card {
  display: grid;
  grid-template-columns: 31px 1fr auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--suite-panel);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--transition), transform var(--transition), background var(--transition);
}

.task-card:hover { border-color: var(--border-bright); background: var(--surface); transform: translateY(-1px); }
.task-card.completed { border-color: #2c4b32; }
.task-index { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 50%; background: var(--surface); color: var(--text-dim); font-size: 9px; }
.task-card.completed .task-index { background: rgba(94, 201, 122, 0.12); color: var(--green); }
.task-card-copy { min-width: 0; }
.task-card-copy strong { display: block; overflow: hidden; color: var(--text); font-size: 11px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.task-card-copy span { display: block; margin-top: 4px; color: var(--muted); font-size: 8px; letter-spacing: 0.08em; text-transform: uppercase; }
.task-card-state { color: var(--dimmed); font-size: 13px; }
.task-card.completed .task-card-state { color: var(--green); }

.dashboard-footer { display: flex; justify-content: space-between; width: 100%; padding-top: 10px; color: var(--muted); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; }
.text-button { margin: 0; padding: 0; border: 0; background: transparent; color: var(--text-dim); cursor: pointer; font-size: 10px; text-decoration: underline; text-underline-offset: 3px; }
.text-button:hover { color: var(--text); }

.instruction-actions,
.summary-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; margin-top: auto; }
.instruction-actions .btn,
.summary-actions .btn { margin-top: 1rem !important; max-width: none; }

.suite-task-page {
  width: min(100%, 720px);
  max-width: 720px;
  height: min(680px, calc(100dvh - clamp(2rem, 6vh, 4rem)));
  max-height: calc(100dvh - clamp(2rem, 6vh, 4rem));
}
.suite-stimulus {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  width: 100%;
  min-height: 0;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--suite-panel);
  padding: clamp(14px, 3vw, 28px);
}
.task-exit { align-self: center; }
.task-heading { margin: 0; color: var(--text); font-size: 16px; text-align: center; }
.task-prompt { max-width: 580px; margin: 0; color: #bbb; text-align: center; }
.task-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; width: 100%; }
.task-actions .btn { max-width: none; margin: 0; }
.task-submit { background: var(--text); color: var(--bg); }
.task-textarea { min-height: 110px; resize: vertical; font-family: var(--font-sans); line-height: 1.5; }
.stimulus-large { color: var(--text); font-size: clamp(42px, 11vw, 76px); font-weight: 500; letter-spacing: 0.12em; }
.timing-note { color: var(--muted); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; }

.orientation-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; width: 100%; }
.orientation-grid label { color: var(--text-dim); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; }
.orientation-grid input, .orientation-grid textarea { margin-top: 5px; }
.orientation-grid .wide-field { grid-column: 1 / -1; }

.symbol-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; width: min(100%, 560px); }
.symbol-cell { aspect-ratio: 1; min-width: 0; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: 4px; background: var(--surface); color: #aaa; font-size: clamp(13px, 2.7vw, 20px); cursor: pointer; }
.symbol-cell.selected { border-color: var(--yellow); background: rgba(212, 170, 63, 0.12); color: var(--yellow); }

.desk-scene { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; width: min(100%, 560px); padding: 17px; border: 1px solid var(--border); border-radius: var(--radius); background: #171512; }
.desk-object { min-height: 76px; margin: 0; padding: 8px; border: 1px solid var(--border-bright); border-radius: 5px; background: #20201d; color: var(--text-dim); cursor: pointer; }
.desk-object svg { display: block; width: 38px; height: 38px; margin: 0 auto 6px; stroke: currentColor; }
.desk-object.picked { border-color: var(--yellow); color: var(--yellow); }

.picture-stage { display: grid; place-items: center; width: 180px; height: 180px; border: 1px solid var(--border); border-radius: var(--radius); background: #e4dfd1; }
.picture-stage svg { width: 125px; height: 125px; stroke: #26231d; fill: none; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.cue-copy { min-height: 20px; color: var(--yellow); font: 12px/1.5 var(--font-sans); }

.pattern-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; width: min(100%, 600px); }
.pattern-card { aspect-ratio: 1.1; margin: 0; padding: 6px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface); color: var(--text-dim); cursor: pointer; }
.pattern-card svg { width: 100%; height: 100%; }
.pattern-card.selected { border-color: var(--yellow); color: var(--yellow); }

.narrative-card { max-width: 580px; padding: 18px; border-left: 3px solid var(--yellow); background: var(--surface); color: #ccc; font: 14px/1.8 var(--font-sans); }
.match-layout { display: grid; grid-template-columns: 160px 1fr; gap: 18px; align-items: center; width: 100%; }
.match-target { padding: 12px; border: 1px solid var(--yellow); border-radius: var(--radius); text-align: center; }
.match-target svg { width: 110px; height: 110px; }
.match-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.match-options button { min-height: 90px; margin: 0; border: 1px solid var(--border); background: var(--surface); color: var(--text-dim); cursor: pointer; }
.match-options svg { width: 72px; height: 72px; }

.builder-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; width: 100%; }
.piece-bank, .shape-slots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); }
.builder-piece, .builder-slot { display: grid; place-items: center; min-height: 70px; margin: 0; border: 1px solid var(--border-bright); border-radius: 5px; background: var(--surface); color: var(--text-dim); cursor: pointer; }
.builder-piece.selected { border-color: var(--yellow); color: var(--yellow); }
.builder-slot.filled { border-color: var(--green); color: var(--green); }
.builder-piece svg, .builder-slot svg { width: 48px; height: 48px; }

.maze-board { display: grid; gap: 2px; width: min(78vw, 390px); aspect-ratio: 1; padding: 4px; border: 1px solid var(--border-bright); background: var(--border); }
.maze-cell { margin: 0; padding: 0; border: 0; border-radius: 1px; background: #181818; cursor: pointer; }
.maze-cell.wall { background: #080808; cursor: default; }
.maze-cell.path { background: rgba(212, 170, 63, 0.35); }
.maze-cell.start { background: var(--green); }
.maze-cell.finish { background: var(--red); }
.maze-cell.current { box-shadow: inset 0 0 0 2px var(--yellow); }

.change-stage { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; width: min(100%, 540px); }
.change-item { display: grid; place-items: center; min-height: 82px; margin: 0; border: 1px solid var(--border); background: var(--surface); color: var(--text-dim); cursor: pointer; }
.change-item svg { width: 52px; height: 52px; }
.city-map { display: grid; grid-template-columns: repeat(5, 1fr); width: min(100%, 450px); border: 1px solid var(--border-bright); background: #282823; }
.map-cell { display: grid; place-items: center; aspect-ratio: 1; border: 1px solid #282823; background: #11120f; color: var(--text-dim); font-size: 8px; text-align: center; }
.map-cell.road { background: #292925; }
.map-cell.landmark { color: var(--yellow); background: #1c1d17; }
.map-form { display: grid; gap: 8px; width: min(100%, 540px); }
.map-question { display: grid; grid-template-columns: 1fr 150px; gap: 10px; align-items: center; color: #bbb; font: 12px/1.4 var(--font-sans); }
.map-question select { width: 100%; max-width: none; margin: 0; }

.rule-card { display: grid; place-items: center; width: 160px; height: 150px; border: 2px solid currentColor; border-radius: 12px; background: var(--surface); }
.rule-card .shape { width: 62px; height: 62px; background: currentColor; }
.rule-card .shape.circle { border-radius: 50%; }
.rule-card .shape.triangle { width: 0; height: 0; border-right: 34px solid transparent; border-bottom: 62px solid currentColor; border-left: 34px solid transparent; background: transparent; }
.rule-cue { padding: 6px 10px; border: 1px solid var(--border-bright); border-radius: 100px; color: var(--text); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; }

.quality-panel { width: 100%; margin-top: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--suite-panel); }
.quality-panel .section-label { display: block; margin-bottom: 4px; }
.quality-panel ul { margin: 0; }
.quality-panel li { padding-top: 2px; padding-bottom: 2px; font-size: 11px; }
.quality-badge { padding: 4px 7px; border: 1px solid #315038; border-radius: 100px; color: var(--green); }

.suite-summary {
  width: min(100%, 660px);
  max-width: 660px;
  height: auto;
  max-height: calc(100dvh - clamp(2rem, 6vh, 4rem));
  margin: auto;
  overflow-x: hidden;
  overflow-y: auto;
}
.summary-banner { display: flex; align-items: baseline; gap: 9px; width: 100%; margin-bottom: 14px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--suite-panel); }
.summary-banner strong { color: var(--yellow); font-size: 23px; font-weight: 500; }
.summary-banner span { color: var(--text-dim); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }
.domain-summary { display: grid; gap: 7px; width: 100%; }
.domain-row { display: grid; grid-template-columns: 105px 1fr 55px; gap: 10px; align-items: center; color: var(--text-dim); font-size: 10px; }
.domain-bar { height: 5px; border-radius: 10px; background: var(--border); overflow: hidden; }
.domain-bar span { display: block; height: 100%; background: var(--suite-green); }
.domain-count { text-align: right; }

@media (max-width: 760px) {
  .task-catalogue { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-summary { grid-template-columns: auto 1fr; }
  .dashboard-summary .compact-btn { display: none; }
  .match-layout { grid-template-columns: 1fr; }
  .match-target { width: 140px; margin: auto; }
}

@media (max-width: 520px) {
  .suite-dashboard { width: 100%; max-width: 100%; height: calc(100dvh - 2rem); }
  .task-catalogue { grid-template-columns: 1fr; }
  .suite-facts span { font-size: 7px; }
  .orientation-grid { grid-template-columns: 1fr; }
  .orientation-grid .wide-field { grid-column: auto; }
  .symbol-grid { grid-template-columns: repeat(6, 1fr); }
  .desk-scene { grid-template-columns: repeat(2, 1fr); }
  .pattern-grid { grid-template-columns: repeat(2, 1fr); }
  .builder-layout { grid-template-columns: 1fr; }
  .map-question { grid-template-columns: 1fr; }
  .instruction-actions, .summary-actions { align-items: stretch; flex-direction: column-reverse; }
  .instruction-actions .btn, .summary-actions .btn { width: 100%; margin-top: 0 !important; }
}

@media (max-height: 670px) {
  .suite-dashboard { height: calc(100dvh - 1.5rem); max-height: calc(100dvh - 1.5rem); }
  .dashboard-summary { padding: 8px 0; }
  .suite-task-page { height: calc(100dvh - 1.5rem); max-height: calc(100dvh - 1.5rem); }
  .suite-stimulus { padding: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}