:root {
  --bg: #e7e4dd;
  --panel: #f4f2ed;
  --panel2: #d9dddf;
  --ink: #202427;
  --muted: #686f73;
  --line: #aeb3b5;
  --signal: #8a674b;
  --signal2: #70523d;
  --alert: #66727a;
}

body::before {
  background: linear-gradient(rgba(32, 36, 39, .035) 1px, transparent 1px),
              linear-gradient(90deg, rgba(32, 36, 39, .025) 1px, transparent 1px);
  background-size: 24px 24px;
}

.top-settings{position:fixed;z-index:20;top:calc(10px + env(safe-area-inset-top));right:max(12px,calc((100vw - 700px)/2 + 14px));width:42px;height:42px;border:1px solid var(--line);border-radius:50%;background:rgba(244,242,237,.96);color:var(--signal2);font-size:20px;box-shadow:2px 2px 0 #c1beb7}
.top-settings:active{transform:translate(1px,1px);box-shadow:1px 1px 0 #c1beb7}

.mode-card,
.skill-card,
.persona-card {
  box-shadow: 3px 3px 0 #c1beb7;
}

.mode-card:active {
  box-shadow: 1px 1px 0 #c1beb7;
}

.mode-card.primary-mode {
  background: #d8d2c7;
  color: var(--ink);
  border-color: #a89480;
  border-left: 4px solid var(--signal);
}

.primary-mode .mode-icon {
  border-color: var(--signal);
  color: var(--signal);
}

.primary-mode small {
  color: var(--muted);
}

.primary-mode b {
  color: var(--signal2);
}

.scenario {
  background: #343a3e;
  color: #f4f2ed;
  box-shadow: 4px 4px 0 #c1beb7;
}

.stack-form textarea,
form textarea {
  background: #faf8f3;
  color: var(--ink);
}

.assistant {
  background: #d8dcdd;
}

.user {
  background: #4c565c;
  color: #fff;
  border-right-color: #b99572;
}

.bar i {
  box-shadow: none;
}

.about p,
.feedback p,
.result > p {
  color: #4f565a;
}

.random-card {
  width: 100%;
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 4px 12px;
  margin-bottom: 12px;
  padding: 15px;
  text-align: left;
  color: var(--ink);
  background: #d8d2c7;
  border: 1px dashed #8f7b68;
}

.random-card span {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--signal);
  color: var(--signal2);
  font-weight: 800;
}

.random-card strong {
  text-transform: uppercase;
}

.random-card small,
.persona-card em,
.person small {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.locale-form,.translator-card{display:grid;gap:10px;padding:16px;background:var(--panel);border:1px solid var(--line)}
.locale-form label{font:750 10px ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase;color:var(--muted)}
.locale-form select{width:100%;padding:12px;background:#faf8f3;color:var(--ink);border:1px solid var(--line);font:inherit}
.locale-form button,.translator-card button{min-height:47px;background:var(--signal);color:#fff;font-weight:800;text-transform:uppercase}
.check-row{display:flex;align-items:center;gap:9px;padding:8px 0;font:inherit!important;text-transform:none!important;color:var(--ink)!important}
.check-row input{width:18px;height:18px;accent-color:var(--signal)}
.translator-card{margin-top:18px}
.translator-card h2{margin:0;text-transform:uppercase;font-size:19px}.translator-card p{margin:0;color:var(--muted)}
.translator-card textarea{width:100%;resize:vertical;padding:12px;background:#faf8f3;color:var(--ink);border:1px solid var(--line);font:inherit}
.translator-result{padding:13px;background:#d8dcdd;border-left:3px solid var(--signal);white-space:pre-wrap;-webkit-user-select:text;user-select:text}

.literacy-dictionary{margin-top:20px;padding:16px;background:var(--panel);border:1px solid var(--line)}
.literacy-dictionary>strong{display:block;color:var(--signal2);font:800 11px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase}.literacy-dictionary>p{margin:8px 0;color:var(--muted)}
.literacy-word{padding:10px 0;border-top:1px solid var(--line)}.literacy-word strong,.literacy-word small{display:block}.literacy-word small{margin-top:4px;color:var(--muted)}

.persona-card em {
  display: block;
  margin-top: 5px;
  color: var(--signal2);
  font-weight: 650;
}

.session-tools {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 16px;
}

.session-tools button {
  padding: 5px 0;
  color: var(--muted);
  background: transparent;
  font-size: 11px;
  text-decoration: underline;
}

.section-title {
  margin: 28px 0 12px;
  font-size: 18px;
  text-transform: uppercase;
}

.style-map {
  display: grid;
  gap: 10px;
}

.style-row {
  padding: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
}

.style-row > div:first-child {
  display: flex;
  justify-content: space-between;
}

.style-row b {
  color: var(--signal2);
}

.style-row p,
.empty {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.program {
  margin-top: 18px;
  padding: 16px;
  background: #d8d2c7;
  border-left: 4px solid var(--signal);
}

.program strong {
  text-transform: uppercase;
  font-size: 12px;
}

.program p {
  margin: 8px 0 0;
  color: #4f565a;
}

.audit-questions {
  display: grid;
  gap: 12px;
}

.audit-domain {
  margin: 0;
  padding: 15px;
  background: var(--panel);
  border: 1px solid var(--line);
}

.audit-domain legend {
  padding: 0 7px;
  color: var(--signal2);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.audit-question + .audit-question {
  margin-top: 17px;
  padding-top: 15px;
  border-top: 1px solid #d4d1ca;
}

.audit-question p {
  margin: 0 0 9px;
}

.audit-question > div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.audit-question label input {
  position: absolute;
  opacity: 0;
}

.audit-question label span {
  display: block;
  padding: 8px 5px;
  border: 1px solid var(--line);
  color: var(--muted);
  text-align: center;
  font-size: 11px;
}

.audit-question input:checked + span {
  background: #d8d2c7;
  border-color: var(--signal);
  color: var(--ink);
  font-weight: 700;
}

.wide-button {
  width: 100%;
  min-height: 49px;
  margin-top: 14px;
  background: var(--signal);
  color: #fff;
  font-weight: 800;
  text-transform: uppercase;
}

.audit-result {
  margin-top: 20px;
  padding: 17px;
  background: var(--panel);
  border: 1px solid var(--line);
}

.audit-result h2 {
  margin: 0 0 5px;
  text-transform: uppercase;
}

.evidence-note {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 12px;
}

.audit-scores {
  display: grid;
  gap: 9px;
}

.audit-scores > div > div:first-child {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}

.development-plan {
  margin-top: 19px;
  padding-top: 16px;
  border-top: 2px solid var(--signal);
}

.development-plan > strong {
  text-transform: uppercase;
}

.development-plan div {
  margin-top: 12px;
  padding-left: 12px;
  border-left: 2px solid #b7a18b;
}

.development-plan b {
  font-size: 12px;
  text-transform: uppercase;
}

.development-plan p {
  margin: 4px 0 0;
  color: var(--muted);
}

.resource-card {
  display: grid;
  gap: 4px;
  width: 100%;
  margin-top: 10px;
  padding: 11px;
  color: var(--ink);
  background: #f2eee7;
  border: 1px solid #bba894;
  text-decoration: none;
  text-align: left;
  font: inherit;
}

.resource-card strong {
  font-size: 12px;
  text-transform: none;
}

.resource-card small,
.resource-card span {
  color: var(--muted);
  font-size: 10px;
}

.resource-card .resource-tip {
  margin-top: 6px;
  padding-top: 7px;
  color: var(--signal2);
  border-top: 1px solid #d7cabc;
  font-size: 11px;
  line-height: 1.45;
}

.resource-card b {
  margin-top: 4px;
  color: var(--signal2);
  font-size: 10px;
  text-transform: uppercase;
}

.resource-guide {
  margin: 18px 0;
  padding: 16px;
  background: #d8d2c7;
  border-left: 4px solid var(--signal);
}

.resource-guide p {
  margin: 9px 0 0;
  color: #4f565a;
  line-height: 1.65;
}

.resource-list {
  display: grid;
  gap: 12px;
}

.resource-domain {
  padding: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
}

.resource-domain h2 {
  margin: 0 0 8px;
  color: var(--signal2);
  font-size: 14px;
  text-transform: uppercase;
}

.lesson-list {
  display: grid;
  gap: 10px;
}

.lesson-card {
  background: var(--panel);
  border: 1px solid var(--line);
}

.lesson-card summary {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 14px;
  cursor: pointer;
  list-style: none;
}

.lesson-card summary::-webkit-details-marker {
  display: none;
}

.lesson-card summary span,
.lesson-card summary b {
  color: var(--signal2);
  font: 800 10px ui-monospace, SFMono-Regular, Menlo, monospace;
}

.lesson-card summary strong {
  font-size: 13px;
  text-transform: uppercase;
}

.lesson-card > div {
  padding: 0 14px 14px;
  border-top: 1px solid #d4d1ca;
}

.lesson-card > div > strong {
  display: block;
  margin-top: 14px;
  color: var(--signal2);
  font-size: 11px;
  text-transform: uppercase;
}

.lesson-card > div > p {
  margin: 5px 0 0;
  color: var(--muted);
}

.lesson-done {
  width: 100%;
  min-height: 42px;
  margin-top: 15px;
  color: #fff;
  background: var(--signal);
  font-weight: 800;
  text-transform: uppercase;
}

.lesson-done:disabled {
  color: var(--muted);
  background: #d8d2c7;
}

.pattern-lab {
  margin: 22px 0;
  padding: 17px;
  background: #d8d2c7;
  border: 1px solid #a89480;
  border-left: 4px solid var(--signal);
}

.pattern-lab h2 {
  margin: 8px 0;
  font-size: 21px;
  text-transform: uppercase;
}

.pattern-lab > p,
.real-pattern-summary p,
.pattern-result p {
  color: #4f565a;
  white-space: pre-line;
}

.pattern-dislikes fieldset {
  margin: 16px 0 0;
  padding: 0;
  border: 0;
}

.pattern-dislikes legend {
  margin-bottom: 9px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

#patternTraitOptions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

#patternTraitOptions input {
  position: absolute;
  opacity: 0;
}

#patternTraitOptions span {
  display: block;
  min-height: 44px;
  padding: 9px;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
}

#patternTraitOptions input:checked + span {
  color: var(--ink);
  background: #efe9df;
  border-color: var(--signal);
  font-weight: 700;
}

#startPatternLab,
.pattern-result > button {
  width: 100%;
  min-height: 46px;
  margin-top: 12px;
  color: #fff;
  background: var(--signal);
  font-weight: 800;
  text-transform: uppercase;
}

.pattern-round {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #b7a18b;
}

.pattern-round > small {
  color: var(--signal2);
  font: 800 10px ui-monospace, SFMono-Regular, Menlo, monospace;
}

.pattern-round > p {
  font-size: 16px;
  font-weight: 700;
}

.pattern-choices {
  display: grid;
  gap: 8px;
}

.pattern-choices button {
  padding: 13px;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  text-align: left;
  line-height: 1.45;
}

.pattern-result,
.real-pattern-summary {
  margin-top: 16px;
  padding: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
}

.pattern-result > strong,
.real-pattern-summary > strong,
.pattern-result > b {
  display: block;
  color: var(--signal2);
  font-size: 11px;
  text-transform: uppercase;
}

.pattern-result > small {
  display: block;
  color: var(--muted);
  font-size: 10px;
}

.pattern-result h3 { margin: 10px 0 8px; font-size: 21px; line-height: 1.2; }
.pattern-clarifier, .pattern-next { padding: 11px; background: #e7e4dd; border-left: 3px solid var(--signal); }
.pattern-practice { width: 100%; min-height: 46px; margin: 4px 0 12px; background: var(--signal); color: #fff; font-weight: 800; text-transform: uppercase; }

@media (max-width: 500px) {
  #patternTraitOptions {
    grid-template-columns: 1fr;
  }
}

.plan-domain > .resource-card {
  padding-left: 11px;
  border-left: 1px solid #bba894;
}

.diagnostic-progress {
  margin: 18px 0;
  padding: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
}

.diagnostic-progress > span {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 12px;
}

.diagnostic-conversation {
  display: grid;
  gap: 10px;
  max-height: 52vh;
  margin-bottom: 16px;
  overflow: auto;
}

.diagnostic-message {
  padding: 14px;
  border: 1px solid var(--line);
}

.diagnostic-message.agent {
  margin-right: 8%;
  background: #d8dcdd;
  border-left: 4px solid var(--signal);
}

.diagnostic-message.answer {
  margin-left: 8%;
  background: #f8f6f1;
}

.diagnostic-message p {
  margin: 7px 0 0;
  white-space: pre-wrap;
}

.diagnostic-message small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
}

.evidence-grid {
  display: grid;
  gap: 9px;
  margin: 9px 0 18px;
}

.evidence-grid p {
  margin: 0;
  padding: 12px;
  white-space: pre-wrap;
  background: #f8f6f1;
  border-left: 3px solid var(--signal);
}

.scenario-grid {
  display: grid;
  gap: 11px;
}

.scenario-card {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 15px;
  color: var(--ink);
  text-align: left;
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: 3px 3px 0 #c1beb7;
}

.scenario-card > span:first-child {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: var(--signal2);
  border: 1px solid var(--signal);
  font-weight: 800;
}

.scenario-card strong,
.scenario-card small {
  display: block;
}

.scenario-card small {
  margin-top: 5px;
  color: var(--muted);
  line-height: 1.35;
}

.scenario-card > b {
  color: var(--signal2);
  font-size: 11px;
}

.dialogue-map,
.replay-panel {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.dialogue-map h3,
.replay-panel h3 {
  margin: 0 0 10px;
  text-transform: uppercase;
  font-size: 16px;
}

.heat-turn {
  margin-top: 10px;
  padding: 13px;
  background: #f8f6f1;
  border: 1px solid #cbc8c0;
}

.heat-turn > div:first-child {
  display: grid;
  gap: 4px;
  margin-bottom: 10px;
}

.heat-turn small,
.heat-turn p {
  color: var(--muted);
  font-size: 11px;
}

.heat-turn p {
  margin: 9px 0 0;
}

.heat-metric {
  display: grid;
  grid-template-columns: 88px 1fr 28px;
  align-items: center;
  gap: 8px;
  margin: 5px 0;
  font-size: 11px;
}

.heat-metric > div {
  position: relative;
  height: 7px;
  background: linear-gradient(90deg,#d7c5bb 0 49.5%,#929a9e 49.5% 50.5%,#c5d2c8 50.5% 100%);
}

.heat-metric i {
  position: absolute;
  top: 0;
  height: 100%;
  background: #748b79;
}

.heat-metric i[data-polarity="down"] {
  background: #9b7164;
}

.signal-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 9px;
}

.signal-tags span {
  padding: 3px 6px;
  color: #3f5f47;
  background: #dde6dd;
  font-size: 10px;
}

.signal-tags span[data-polarity="down"] {
  color: #754c43;
  background: #eaded9;
}

.replay-result {
  margin-top: 14px;
  padding: 14px;
  background: #f8f6f1;
  border-left: 4px solid var(--signal);
}

.replay-result p {
  white-space: pre-wrap;
}

@media (max-width: 520px) {
  .scenario-card {
    grid-template-columns: 38px 1fr;
  }
  .scenario-card > b {
    grid-column: 2;
  }
}