:root {
  --ink: #1f2528;
  --muted: #667276;
  --line: #d8dee0;
  --paper: #f6f7f1;
  --panel: #ffffff;
  --teal: #047c83;
  --teal-dark: #07545a;
  --green: #86a76a;
  --level-1-deep: #4f6f41;
  --level-1-main: #86a76a;
  --level-1-soft: #f1f6ec;
  --level-1-warm: #fffdfa;
  --level-1-cream: #fbf2df;
  --level-1-border: #dce4d5;
  --level-1-muted: #65725f;
  --level-1-amber: #c87916;
  --level-2-deep: #66516d;
  --level-2-main: #9a7aa3;
  --level-2-soft: #f6eff8;
  --level-2-warm: #fffdfa;
  --level-2-cream: #fbf2df;
  --level-2-border: #e3d7e7;
  --level-2-muted: #6d6271;
  --level-2-amber: #c87916;
  --level-3-deep: #3f658c;
  --level-3-main: #7299bd;
  --level-3-soft: #eef5fb;
  --level-3-warm: #fffdfa;
  --level-3-cream: #fbf2df;
  --level-3-border: #d8e3ee;
  --level-3-muted: #5e6d7b;
  --level-3-amber: #c87916;
  --blue: #477bb8;
  --orange: #df922f;
  --red: #c65349;
  --violet: #77547a;
  --shadow: 0 18px 46px rgba(31, 37, 40, 0.1);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.68), rgba(246, 247, 241, 0.92) 260px),
    var(--paper);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button {
  font: inherit;
}

.level-profile-link {
  appearance: none;
  cursor: pointer;
  text-align: inherit;
}

.app-shell {
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  min-height: 100vh;
}

body[data-view="recipes"] .app-shell {
  grid-template-columns: 420px minmax(0, 1fr);
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px;
  border-right: 1px solid var(--line);
  background: rgba(243, 245, 239, 0.92);
}

.brand-block {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.brand-mark {
  display: grid;
  width: 72px;
  height: 72px;
  place-items: center;
  border: 1px solid var(--line);
  background: white;
  padding: 7px;
}

.brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.eyebrow,
.section-label {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
  overflow-wrap: break-word;
}

h1 {
  margin-bottom: 0;
  font-size: 22px;
  line-height: 1.12;
}

h2 {
  margin-bottom: 0;
  font-size: 28px;
  line-height: 1.1;
}

h3 {
  margin-bottom: 8px;
  font-size: 18px;
  line-height: 1.2;
}

.mode-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
  background: var(--panel);
}

.mode-tab {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-weight: 720;
}

.mode-tab:last-child {
  border-right: 0;
}

.mode-tab.is-active {
  background: var(--teal-dark);
  color: white;
}

.mode-tab:focus {
  outline: none;
}

.mode-tab:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: -3px;
}

.secondary-tools {
  display: none;
  gap: 8px;
}

body:not([data-view="start"]) .secondary-tools {
  display: none;
}

.secondary-view-button {
  min-height: 38px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.62);
  color: var(--teal-dark);
  cursor: pointer;
  font-weight: 760;
  text-align: left;
  padding: 8px 10px;
}

.secondary-view-button.is-active,
.secondary-view-button:hover {
  border-color: var(--teal);
  background: #f1faf7;
}

.secondary-view-button:focus-visible,
.partner-brochure-button:focus-visible,
.home-path-card button:focus-visible,
.category-button:focus-visible,
.level-button:focus-visible,
.recipe-button:focus-visible,
.current-match-action:focus-visible,
.start-recipe-button:focus-visible,
.level-profile-link:focus-visible,
.situation-button:focus-visible,
.translator-situation-button:focus-visible,
.translator-open-button:focus-visible,
.guidance-card:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
}

.filter-group {
  display: grid;
  gap: 10px;
}

body:not([data-view="recipes"]) .filter-group {
  display: none;
}

@media (min-width: 721px) {
  body:not(.recipe-immersive-mode) .sidebar {
    align-self: start;
    height: 100vh;
    max-height: 100vh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

body[data-view="recipes"] .sidebar-helper,
body[data-view="recipes"] .sidebar-situation-filter {
  display: none;
}

.sidebar-helper {
  border: 1px solid var(--line);
  background: #fffef9;
  padding: 16px;
}

.sidebar-helper ol {
  display: grid;
  gap: 12px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.sidebar-helper li {
  display: grid;
  gap: 3px;
  border-left: 4px solid var(--orange);
  padding-left: 10px;
}

.sidebar-helper span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.sidebar-logo-slot[hidden] {
  display: none;
}

.sidebar-support-tools[hidden] {
  display: none;
}

.sidebar-start-tools[hidden] {
  display: none;
}

body:not([data-view="home"]) .sidebar-logo-slot {
  display: none;
}

body[data-view="home"] .sidebar-logo-slot {
  display: grid;
}

body:not([data-view="levels"]) .sidebar-support-tools {
  display: none;
}

body:not([data-view="start"]) .sidebar-start-tools {
  display: none;
}

.sidebar-start-tools {
  display: grid;
  gap: 18px;
}

.sidebar-start-tools .start-recipe-grid {
  grid-template-columns: 1fr;
}

.sidebar-start-tools .start-recipe-button {
  min-height: 0;
  padding: 11px 12px;
}

.sidebar-start-tools .start-recipe-button span {
  font-size: 16px;
}

.sidebar-start-tools .start-recipe-level-link {
  font-size: 12px;
  padding: 4px 8px;
}

.sidebar-partner-tools {
  display: grid;
  gap: 10px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.sidebar-partner-logo-list {
  display: grid;
  gap: 8px;
}

.sidebar-partner-logo-list .partner-logo-card {
  min-height: 58px;
  background: white;
}

.sidebar-partner-logo-list .partner-logo-card img {
  max-height: 42px;
}

.sidebar-partner-logo-list .partner-logo-card[title="Co-funded by the European Union"] {
  min-height: 64px;
}

.sidebar-partner-logo-list .partner-logo-card[title="Co-funded by the European Union"] img {
  max-height: 48px;
}

.sidebar-brochure-button {
  justify-content: center;
  text-align: center;
}

.sidebar-support-tools {
  display: grid;
  gap: 14px;
}

.sidebar-support-tools .instruction-fit-card,
.sidebar-support-tools .background-card {
  margin-top: 0;
  padding: 12px;
  box-shadow: none;
}

.sidebar-support-tools .instruction-fit-card {
  gap: 10px;
}

.sidebar-support-tools .instruction-fit-head h3,
.sidebar-support-tools .background-card-head h3 {
  font-size: 16px;
}

.sidebar-support-tools .instruction-fit-head p,
.sidebar-support-tools .background-card-head p,
.sidebar-support-tools .background-resource-body p {
  font-size: 13px;
  line-height: 1.35;
}

.sidebar-support-tools .instruction-fit-table,
.sidebar-support-tools .background-resource-body {
  grid-template-columns: 1fr;
}

.sidebar-support-tools .instruction-fit-row {
  grid-template-columns: 48px minmax(0, 1fr);
  min-height: auto;
  gap: 9px;
  align-items: start;
  border-top-width: 0;
  border-left: 5px solid var(--fit-accent);
  padding: 10px;
}

.sidebar-support-tools .fit-visual {
  grid-template-columns: 1fr;
  gap: 4px;
}

.sidebar-support-tools .fit-number {
  width: 36px;
  height: 36px;
  font-size: 14px;
}

.sidebar-support-tools .fit-label {
  font-size: 10px;
  line-height: 1.1;
}

.sidebar-support-tools .instruction-fit-row strong {
  margin-bottom: 4px;
  font-size: 14px;
}

.sidebar-support-tools .fit-copy p {
  margin-bottom: 5px;
  font-size: 12px;
}

.sidebar-support-tools .fit-copy span {
  font-size: 12px;
}

.sidebar-support-tools .background-card {
  border-top-width: 5px;
}

.sidebar-support-tools .background-resource-body {
  padding: 12px;
}

.sidebar-support-tools .background-video {
  height: auto;
  max-height: none;
  min-height: 140px;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  object-fit: contain;
}

.sidebar-support-tools .background-resource-body a {
  width: 100%;
  justify-content: center;
}

.partner-logo-block {
  display: grid;
  gap: 14px;
  border: 1px solid var(--line);
  background: #fbfdfb;
  padding: 16px;
}

.sidebar-logo-slot .partner-logo-block {
  box-shadow: none;
}

.start-logo-block {
  display: grid;
  grid-column: 1 / -1;
}

.partner-home-block {
  display: grid;
  grid-column: 1 / -1;
  gap: 18px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--level-1-border) 78%, white 22%);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(134, 167, 106, 0.09), rgba(255, 255, 255, 0.92)),
    var(--panel);
  padding: 22px;
  box-shadow: 0 18px 42px rgba(20, 52, 34, 0.06);
}

.partner-home-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.partner-home-head .section-label {
  color: var(--level-1-deep);
  font-size: 18px;
  letter-spacing: 0.04em;
}

.partner-brochure-button {
  min-height: 42px;
  border: 1px solid var(--teal);
  background: var(--teal-dark);
  color: white;
  cursor: pointer;
  font-weight: 780;
  padding: 9px 14px;
}

.logo-note {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.logo-group {
  display: grid;
  gap: 8px;
}

.logo-group strong {
  color: var(--teal-dark);
  font-size: 13px;
}

.logo-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.logo-group.is-single .logo-grid {
  grid-template-columns: 1fr;
}

.partner-logo-card {
  display: grid;
  min-height: 66px;
  place-items: center;
  border: 1px solid var(--line);
  background: white;
  padding: 8px;
}

a.partner-logo-card:hover {
  border-color: var(--teal);
  background: #f1faf7;
}

.partner-logo-card img {
  display: block;
  max-width: 100%;
  max-height: 48px;
  object-fit: contain;
}

.home-partner-logos {
  display: grid;
  gap: 20px;
}

.home-partner-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: center;
}

.home-partner-logo,
.home-funder-logo {
  min-height: 86px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  padding: 10px 18px;
}

a.home-partner-logo:hover,
a.home-funder-logo:hover,
a.home-partner-logo:focus-visible,
a.home-funder-logo:focus-visible {
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--level-1-border) 70%, white 30%);
}

.home-partner-logo img {
  max-width: min(100%, 210px);
  max-height: 64px;
}

.home-funding-row {
  display: grid;
  grid-template-columns: minmax(120px, auto) minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  border-top: 1px solid color-mix(in srgb, var(--level-1-border) 64%, white 36%);
  padding-top: 20px;
}

.home-funding-row > strong {
  color: var(--level-1-deep);
  font-size: 13px;
  font-weight: 860;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home-funder-logos {
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-funder-logo {
  width: min(100%, 360px);
  min-height: 72px;
}

.home-funder-logo img {
  max-width: min(100%, 320px);
  max-height: 56px;
}

.logo-group-project .partner-logo-card {
  min-height: 88px;
}

.logo-group-project .partner-logo-card img {
  max-height: 66px;
}

.brochure-logo-block {
  gap: 8px;
}

.brochure-logo-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}

.brochure-logo-item {
  display: grid;
  gap: 4px;
  min-height: 58px;
  align-content: center;
  border: 1px solid var(--line);
  background: white;
  padding: 6px;
}

.brochure-logo-item img {
  display: block;
  max-width: 100%;
  max-height: 34px;
  object-fit: contain;
}

.brochure-logo-group-project {
  min-height: 78px;
}

.brochure-logo-group-project img {
  max-height: 52px;
}

.brochure-logo-item span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 760;
  line-height: 1.15;
  text-transform: uppercase;
}

.level-filters,
.category-filters,
.recipe-list {
  display: grid;
  gap: 8px;
}

.recipe-list.is-grouped {
  grid-template-columns: 1fr;
}

.recipe-level-group {
  display: grid;
  gap: 7px;
  border: 1px solid var(--line);
  background: #fbfdfb;
  padding: 10px;
}

.recipe-level-heading {
  display: grid;
  gap: 2px;
  color: var(--teal-dark);
}

.recipe-level-heading strong {
  font-size: 13px;
}

.recipe-level-heading span,
.empty-note.mini {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.empty-note.mini {
  margin: 0;
}

.level-button,
.category-button,
.recipe-button {
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}

.level-button {
  display: grid;
  gap: 4px;
  padding: 12px;
}

.category-button {
  min-height: 36px;
  padding: 8px 10px;
  font-size: 13px;
}

.recipe-button {
  min-height: 42px;
  padding: 10px 12px;
  font-size: 14px;
}

.level-button.is-active,
.category-button.is-active,
.recipe-button.is-active {
  border-color: var(--teal);
  background: #f3fbf8;
  box-shadow: inset 4px 0 0 var(--teal);
}

.level-button strong,
.recipe-button strong {
  display: block;
}

.level-button span {
  color: var(--muted);
  font-size: 13px;
}

.main-panel {
  min-width: 0;
  padding: 24px;
}

.sidebar,
.view,
.topbar > div,
.start-panel,
.start-card,
.background-card,
.sidebar-support-tools,
.start-hero,
.start-hero-copy,
.start-rule {
  min-width: 0;
  max-width: 100%;
}

.view {
  display: none;
}

.view.is-active {
  display: block;
}

body[data-view="start"] #startView .topbar {
  display: none;
}

.topbar {
  display: flex;
  min-height: 70px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

body[data-view="recipes"] #recipesView > .topbar {
  display: none;
}

body[data-view="recipes"] .workspace-grid {
  max-width: 1120px;
}

.view-subtitle {
  max-width: 640px;
  margin: 10px 0 0;
  color: #394246;
  line-height: 1.45;
}

.status-pill,
.print-button {
  border: 1px solid var(--line);
  background: var(--panel);
}

.status-pill {
  padding: 10px 13px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.print-button {
  min-height: 42px;
  padding: 9px 13px;
  cursor: pointer;
  color: var(--teal-dark);
  font-weight: 760;
}

.print-title {
  display: none;
}

.pilot-footer {
  display: grid;
  gap: 6px;
  margin-top: 28px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.jump-recipe-button {
  display: none;
  min-height: 44px;
  border: 1px solid var(--teal);
  background: var(--teal-dark);
  color: white;
  cursor: pointer;
  font-weight: 760;
}

.workspace-grid {
  display: grid;
  gap: 18px;
  max-width: 1040px;
}

.home-panel {
  display: grid;
  gap: 22px;
  max-width: 1180px;
}

.home-hero {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-top: 7px solid var(--teal);
  background:
    linear-gradient(135deg, rgba(4, 124, 131, 0.1), rgba(223, 146, 47, 0.06)),
    var(--panel);
  padding: 26px;
  box-shadow: var(--shadow);
}

.home-hero h1 {
  max-width: 760px;
  color: var(--ink);
  font-size: 42px;
  line-height: 1.02;
}

.home-hero p:last-child {
  max-width: 780px;
  margin-bottom: 0;
  color: #394246;
  font-size: 18px;
  line-height: 1.42;
}

.home-hero-body {
  display: grid;
  gap: 10px;
  max-width: 820px;
  color: #394246;
  font-size: 18px;
  line-height: 1.42;
}

.home-hero-body p {
  margin: 0;
}

.home-card-note {
  margin: 0;
  border-radius: 12px;
  background: color-mix(in srgb, var(--level-1-soft) 72%, white 28%);
  color: var(--level-1-deep);
  font-size: 14px;
  font-weight: 760;
  line-height: 1.38;
  padding: 10px 12px;
}

.home-path-section {
  display: grid;
  gap: 10px;
}

.home-path-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.home-path-card {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 18px;
  border: 1px solid var(--line);
  border-top: 6px solid var(--teal);
  background: var(--panel);
  padding: 20px;
  box-shadow: var(--shadow);
}

.home-path-card.is-primary {
  border-color: color-mix(in srgb, var(--teal) 42%, var(--line));
  border-top-color: var(--orange);
  background:
    linear-gradient(135deg, rgba(223, 146, 47, 0.14), rgba(4, 124, 131, 0.08)),
    var(--panel);
}

.home-path-card h2 {
  margin-bottom: 10px;
  color: var(--teal-dark);
  font-size: 25px;
}

.home-path-card p:not(.eyebrow) {
  margin-bottom: 0;
  color: #394246;
  line-height: 1.42;
}

.home-path-card p + p {
  margin-top: 8px;
}

.home-path-card ul {
  display: grid;
  gap: 4px;
  margin: 10px 0 0;
  padding-left: 20px;
  color: #394246;
  line-height: 1.35;
}

.home-path-card li::marker {
  color: var(--level-1-main);
}

.home-path-card button {
  min-height: 46px;
  border: 1px solid var(--teal);
  background: white;
  color: var(--teal-dark);
  cursor: pointer;
  padding: 10px 14px;
  font-weight: 820;
}

.home-path-card.is-primary button {
  background: var(--teal-dark);
  color: white;
}

.home-path-card button:hover {
  background: #f1faf7;
}

.home-path-card.is-primary button:hover {
  background: var(--teal);
}

.next-move-decision-aid {
  margin-bottom: 16px;
}

.start-panel,
.levels-grid {
  display: grid;
  gap: 20px;
}

.start-panel {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.start-intro-desktop-slot {
  display: grid;
  grid-column: 1 / -1;
}

.start-intro-desktop-slot:empty {
  display: none;
}

.responsive-start-intro {
  width: 100%;
}

.start-decision-panel {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: 1fr;
  gap: 14px;
  border: 1px solid var(--line);
  border-top: 6px solid var(--teal);
  background:
    linear-gradient(135deg, rgba(4, 124, 131, 0.08), rgba(223, 146, 47, 0.06)),
    var(--panel);
  padding: 16px;
  box-shadow: var(--shadow);
}

.start-situation-picker {
  display: grid;
  gap: 10px;
  align-content: start;
}

.start-recipe-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.start-recipe-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 52px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--teal);
  border-radius: 14px;
  background: white;
  padding: 10px 12px;
  transition: background 0.16s ease, border-color 0.16s ease;
}

.start-recipe-button {
  display: block;
  min-width: 0;
  min-height: 30px;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  padding: 0;
  text-align: left;
}

.start-recipe-button span {
  color: var(--teal-dark);
  font-size: 15px;
  font-weight: 820;
  line-height: 1.14;
}

.start-recipe-level-link {
  display: inline-flex;
  width: auto;
  min-width: 64px;
  justify-content: center;
  align-items: center;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--muted);
  font-size: 11px;
  font-weight: 830;
  line-height: 1.25;
  padding: 4px 8px;
  text-align: center;
  white-space: nowrap;
}

.start-recipe-level-link:hover {
  border-color: currentColor;
  background: white;
}

.start-recipe-level-link.level-1 {
  color: var(--level-1-deep);
}

.start-recipe-level-link.level-2 {
  color: var(--level-2-deep);
}

.start-recipe-level-link.level-3 {
  color: var(--level-3-deep);
}

.start-recipe-button.level-1 {
  color: var(--level-1-deep);
}

.start-recipe-button.level-1 span {
  color: var(--level-1-deep);
}

.start-recipe-option.level-1 {
  border-left-color: var(--level-1-main);
}

.start-recipe-option.level-1.is-selected,
.start-recipe-option.level-1:has(.start-recipe-button:hover),
.start-recipe-option.level-1:has(.start-recipe-button:focus-visible) {
  border-color: var(--level-1-main);
  background: var(--level-1-soft);
}

.start-recipe-button.level-2 {
  color: var(--level-2-deep);
}

.start-recipe-button.level-2 span {
  color: var(--level-2-deep);
}

.start-recipe-option.level-2 {
  border-left-color: var(--level-2-main);
}

.start-recipe-option.level-2.is-selected,
.start-recipe-option.level-2:has(.start-recipe-button:hover),
.start-recipe-option.level-2:has(.start-recipe-button:focus-visible) {
  border-color: var(--level-2-main);
  background: var(--level-2-soft);
}

.start-recipe-button.level-3 {
  color: var(--level-3-deep);
}

.start-recipe-button.level-3 span {
  color: var(--level-3-deep);
}

.start-recipe-option.level-3 {
  border-left-color: var(--level-3-main);
}

.start-recipe-option.level-3.is-selected,
.start-recipe-option.level-3:has(.start-recipe-button:hover),
.start-recipe-option.level-3:has(.start-recipe-button:focus-visible) {
  border-color: var(--level-3-main);
  background: var(--level-3-soft);
}

.start-recipe-button.is-selected,
.start-recipe-button:hover {
  background: transparent;
}

.start-match-panel {
  display: grid;
  gap: 18px;
  align-content: start;
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(241, 246, 236, 0.66), rgba(255, 255, 255, 0.9) 148px),
    var(--panel);
  padding: 20px;
}

.start-match-head {
  display: grid;
  gap: 10px;
}

.start-match-head h3 {
  margin-bottom: 0;
  color: var(--level-1-deep);
  font-size: clamp(32px, 5vw, 60px);
  letter-spacing: -0.04em;
  line-height: 0.98;
}

.start-match-panel.level-2 .start-match-head h3 {
  color: var(--level-2-deep);
}

.start-match-panel.level-3 .start-match-head h3 {
  color: var(--level-3-deep);
}

.start-match-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.start-match-chip {
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--level-1-muted);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.12em;
  line-height: 1;
  padding: 9px 12px;
  text-transform: uppercase;
}

.start-match-chip.support {
  background: var(--level-1-main);
  color: white;
}

.start-match-chip.support.level-2 {
  background: var(--level-2-main);
}

.start-match-chip.support.level-3 {
  background: var(--level-3-main);
}

.start-match-recognition {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--level-1-border);
  border-bottom: 1px solid var(--level-1-border);
  margin-left: -20px;
  margin-right: -20px;
}

.start-match-panel.level-2 .start-match-recognition {
  border-color: var(--level-2-border);
}

.start-match-panel.level-3 .start-match-recognition {
  border-color: var(--level-3-border);
}

.start-match-field {
  display: grid;
  align-content: start;
  gap: 12px;
  border-left: 4px solid var(--orange);
  background: rgba(255, 253, 248, 0.8);
  padding: 20px 20px 22px;
}

.start-match-field.meaning {
  border-left-color: var(--teal);
}

.start-match-panel.level-2 .start-match-field.meaning {
  border-left-color: var(--level-2-main);
}

.start-match-panel.level-3 .start-match-field.meaning {
  border-left-color: var(--level-3-main);
}

.start-match-recognition .start-match-field:first-child {
  border-right: 1px solid var(--level-1-border);
}

.start-match-panel.level-2 .start-match-recognition .start-match-field:first-child {
  border-right-color: var(--level-2-border);
}

.start-match-panel.level-3 .start-match-recognition .start-match-field:first-child {
  border-right-color: var(--level-3-border);
}

.start-match-action-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.start-match-action-grid .start-match-field {
  min-height: 136px;
  border-left-color: var(--orange);
}

.start-match-field strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.07em;
  line-height: 1.2;
  text-transform: uppercase;
}

.start-match-field p {
  margin-bottom: 0;
  color: #394246;
  font-size: 17px;
  line-height: 1.42;
}

.start-match-recognition .start-match-field p {
  font-size: 19px;
}

.start-match-panel .translator-open-button {
  min-height: 48px;
  font-size: 17px;
}

.start-support-reference {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.start-support-card {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-top: 5px solid var(--teal);
  background: rgba(255, 255, 255, 0.74);
  padding: 10px;
}

.start-support-card:nth-child(1) {
  border-top-color: var(--level-1-main);
}

.start-support-card:nth-child(2) {
  border-top-color: var(--violet);
}

.start-support-card:nth-child(3) {
  border-top-color: var(--blue);
}

.start-support-card.is-selected {
  background: #f1faf7;
  border-color: var(--teal);
}

.start-support-card:nth-child(1).is-selected {
  background: var(--level-1-soft);
  border-color: var(--level-1-main);
}

.start-support-card:nth-child(1) strong {
  color: var(--level-1-deep);
}

.start-support-card strong {
  color: var(--teal-dark);
  font-size: 15px;
}

.start-support-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 820;
  text-transform: uppercase;
}

.levels-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.level-chooser {
  margin-bottom: 20px;
}

.task-responsibility-card {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(420px, 1.14fr);
  gap: 22px;
  align-items: stretch;
  margin-bottom: 16px;
  border: 1px solid color-mix(in srgb, var(--level-1-border) 82%, white 18%);
  border-left: 7px solid var(--level-1-main);
  border-radius: 16px;
  background:
    radial-gradient(circle at 94% 0%, rgba(134, 167, 106, 0.18), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(241, 246, 236, 0.78));
  box-shadow: 0 16px 42px rgba(20, 52, 34, 0.055);
  padding: 18px;
}

.task-responsibility-card > div:first-child {
  display: grid;
  align-content: center;
  gap: 8px;
}

.task-responsibility-card h3 {
  margin-bottom: 0;
  color: var(--level-1-deep);
  font-size: 22px;
  line-height: 1.16;
}

.task-responsibility-card p {
  margin-bottom: 0;
  color: #394246;
  line-height: 1.45;
}

.task-responsibility-prompts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.task-responsibility-prompts article {
  display: grid;
  gap: 7px;
  min-width: 0;
  border: 1px solid var(--level-1-border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.82);
  padding: 12px;
}

.task-responsibility-prompts span {
  color: var(--level-1-main);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.task-responsibility-prompts strong {
  color: var(--teal-dark);
  font-size: 15px;
  line-height: 1.15;
}

.task-responsibility-prompts p {
  color: var(--muted);
  font-size: 13px;
}

.instruction-helper-grid {
  display: none;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 18px;
  align-items: stretch;
}

.instruction-helper-grid .instruction-fit-card,
.instruction-helper-grid .background-card {
  height: 100%;
  margin: 0;
  border-radius: 16px;
}

.instruction-helper-grid .background-card {
  grid-template-columns: minmax(230px, 0.38fr) minmax(0, 1fr);
  align-items: start;
}

.instruction-helper-grid .background-card-head {
  grid-column: 1;
  grid-row: 1;
}

.instruction-helper-grid .background-resource {
  grid-column: 2;
  grid-row: 1;
}

.instruction-helper-grid .instruction-fit-table {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.instruction-helper-grid .instruction-fit-row {
  min-height: 164px;
}

.instruction-helper-grid .background-resource-body {
  grid-template-columns: minmax(170px, 180px) minmax(0, 1fr);
  align-items: center;
  padding: 12px;
}

.instruction-helper-grid .background-video {
  height: auto;
  max-height: none;
  min-height: 0;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  object-fit: contain;
}

.levels-grid > .instruction-helper-grid {
  grid-column: 1 / -1;
}

.situation-translator-card {
  display: grid;
  grid-column: 1 / -1;
  gap: 0;
  border: 1px solid var(--line);
  border-top: 6px solid var(--teal);
  background:
    linear-gradient(135deg, rgba(4, 124, 131, 0.1), rgba(223, 146, 47, 0.08)),
    var(--panel);
  padding: 16px;
  box-shadow: var(--shadow);
}

.translator-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: start;
}

.translator-hero h2 {
  max-width: 520px;
  font-size: 30px;
  line-height: 1.06;
}

.translator-hero p {
  margin-bottom: 0;
  color: #394246;
  font-size: 14px;
  line-height: 1.36;
}

.translator-process {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}

.translator-process li {
  display: grid;
  gap: 4px;
  min-height: 58px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.72);
  padding: 9px;
}

.translator-process strong {
  color: var(--teal-dark);
  font-size: 15px;
  letter-spacing: 0;
}

.translator-process span {
  color: #394246;
  font-size: 12px;
  line-height: 1.25;
}

.translator-situations {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.78);
  padding: 12px;
}

body[data-view="recipes"] #recipesView .translator-situations {
  display: none;
}

.translator-situation-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}

.translator-situation-button {
  min-height: 42px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--teal);
  background: white;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  padding: 8px;
}

.translator-situation-button span {
  color: var(--teal-dark);
  font-size: 15px;
  font-weight: 820;
}

.translator-situation-button.is-selected,
.translator-situation-button:hover {
  border-color: var(--teal);
  background: #f1faf7;
}

.translator-open-button {
  grid-column: 1 / -1;
  min-height: 40px;
  border: 1px solid var(--teal);
  background: var(--teal-dark);
  color: white;
  cursor: pointer;
  font-weight: 780;
  padding: 8px 12px;
}

.recipe-card[hidden] {
  display: none;
}

.decision-aid {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(260px, 0.82fr) minmax(0, 1.18fr);
  gap: 18px;
  border: 1px solid var(--line);
  border-top: 8px solid var(--teal);
  background:
    linear-gradient(135deg, rgba(4, 124, 131, 0.1), rgba(223, 146, 47, 0.08)),
    var(--panel);
  padding: 22px;
  box-shadow: var(--shadow);
}

.decision-copy {
  display: grid;
  align-content: center;
  gap: 10px;
}

.decision-copy h2 {
  max-width: 520px;
  font-size: 38px;
  line-height: 1.04;
}

.decision-copy p {
  margin-bottom: 0;
  color: #394246;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.38;
}

.start-intro {
  display: grid;
  gap: 8px;
  margin-top: 4px;
  border-left: 5px solid var(--orange);
  background: rgba(255, 255, 255, 0.72);
  padding: 12px 14px;
}

.start-intro p {
  color: #394246;
  font-size: 14px;
  font-weight: 560;
  line-height: 1.38;
}

.situation-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.situation-button {
  min-height: 72px;
  border: 1px solid var(--line);
  border-left: 6px solid var(--teal);
  background: white;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  padding: 13px;
}

.situation-button span {
  color: var(--teal-dark);
  font-size: 16px;
  font-weight: 820;
}

.situation-button:hover {
  border-color: var(--teal);
  background: #f1faf7;
}

.chooser-card {
  border: 1px solid var(--line);
  background: var(--panel);
  display: grid;
  gap: 14px;
  padding: 18px;
  box-shadow: var(--shadow);
}

.chooser-card h3,
.chooser-card p {
  margin-bottom: 0;
}

.chooser-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.chooser-option {
  display: grid;
  gap: 7px;
  min-height: 104px;
  border: 1px solid var(--line);
  padding: 16px;
  background: #fbfdfb;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}

.chooser-option.level-1 {
  border-top: 6px solid var(--level-1-main);
}

.chooser-option.level-1 strong {
  color: var(--level-1-deep);
}

.chooser-option.level-2 {
  border-top: 6px solid var(--level-2-main);
}

.chooser-option.level-2 strong {
  color: var(--level-2-deep);
}

.chooser-option.level-3 {
  border-top: 6px solid var(--level-3-main);
}

.chooser-option.level-3 strong {
  color: var(--level-3-deep);
}

.chooser-option strong {
  color: var(--teal-dark);
  font-size: 18px;
}

.chooser-option span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 820;
  text-transform: uppercase;
}

.chooser-option small {
  color: #394246;
  font-size: 14px;
  line-height: 1.4;
}

.chooser-option:hover,
.level-card-action:hover {
  border-color: var(--teal);
  background: #f1faf7;
}

.chooser-option.level-1:hover {
  border-color: var(--level-1-main);
  background: var(--level-1-soft);
}

.support-guide-switcher {
  gap: 16px;
}

.compact-level-guide {
  --compact-accent: var(--teal);
  --compact-deep: var(--teal-dark);
  --compact-soft: #f1faf7;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-content: stretch;
  gap: 12px;
  border: 1px solid var(--line);
  border-top: 6px solid var(--compact-accent);
  background: #fffdfa;
  padding: 16px;
  min-height: 100%;
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.compact-level-guide.level-1 {
  --compact-accent: var(--level-1-main);
  --compact-deep: var(--level-1-deep);
  --compact-soft: var(--level-1-soft);
}

.compact-level-guide.level-2 {
  --compact-accent: var(--level-2-main);
  --compact-deep: var(--level-2-deep);
  --compact-soft: var(--level-2-soft);
}

.compact-level-guide.level-3 {
  --compact-accent: var(--level-3-main);
  --compact-deep: var(--level-3-deep);
  --compact-soft: var(--level-3-soft);
}

.compact-level-guide.is-active {
  border-color: var(--compact-accent);
  background: var(--compact-soft);
  box-shadow: 0 12px 28px rgba(31, 37, 40, 0.08);
}

.compact-level-guide:focus-within,
.compact-level-guide:hover {
  transform: translateY(-1px);
  border-color: var(--compact-accent);
}

.compact-level-guide-main {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  padding: 0;
  text-align: left;
}

.compact-level-guide-main span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 860;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.compact-level-guide-main strong {
  color: var(--compact-deep);
  font-size: 21px;
  line-height: 1.08;
}

.compact-level-guide-main small {
  color: #394246;
  font-size: 14px;
  font-weight: 560;
  line-height: 1.36;
}

.compact-level-guide-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-self: end;
  margin-top: 4px;
}

.compact-level-guide-actions button {
  min-height: 42px;
  border: 1px solid var(--compact-accent);
  background: white;
  color: var(--compact-deep);
  padding: 8px 10px;
  font-size: 13px;
}

.compact-level-guide-actions button:first-child {
  background: var(--compact-deep);
  color: white;
}

.compact-level-guide.is-active .compact-level-guide-actions button:first-child {
  background: var(--compact-accent);
}

.current-match-slot {
  margin: 0 0 20px;
}

.recipe-current-match-slot {
  margin-bottom: 0;
}

.current-match-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--teal) 28%, var(--line));
  border-left: 7px solid var(--teal);
  background:
    linear-gradient(135deg, rgba(4, 124, 131, 0.08), rgba(223, 146, 47, 0.06)),
    var(--panel);
  padding: 14px 16px;
  box-shadow: 0 12px 30px rgba(31, 37, 40, 0.08);
}

.current-match-copy {
  display: grid;
  gap: 8px;
}

.current-match-lines {
  display: grid;
  gap: 5px;
}

.current-match-lines p {
  margin-bottom: 0;
  color: #394246;
  line-height: 1.34;
}

.current-match-lines span {
  margin-right: 5px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 780;
}

.current-match-lines strong {
  color: var(--teal-dark);
}

.current-match-next {
  font-weight: 720;
}

.current-match-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  min-width: 150px;
}

.current-match-action {
  min-height: 42px;
  border: 1px solid var(--teal);
  cursor: pointer;
  padding: 8px 12px;
  font-weight: 780;
}

.current-match-action.primary {
  background: var(--teal-dark);
  color: white;
}

.current-match-action.secondary {
  background: white;
  color: var(--teal-dark);
}

.current-match-action:disabled {
  border-color: var(--line);
  background: #eef1ed;
  color: var(--muted);
  cursor: not-allowed;
  opacity: 0.75;
}

.guide-placeholder {
  display: grid;
  grid-column: 1 / -1;
  gap: 8px;
  border: 1px dashed var(--line);
  background: rgba(255, 255, 255, 0.72);
  padding: 24px;
}

.guide-placeholder h3,
.guide-placeholder p {
  margin-bottom: 0;
}

.guide-placeholder h3 {
  color: var(--teal-dark);
  font-size: 22px;
}

.guide-placeholder p {
  color: #394246;
  line-height: 1.4;
}

.instruction-fit-card {
  display: grid;
  gap: 16px;
  margin-top: 14px;
  border: 1px solid #cfdcda;
  background:
    linear-gradient(135deg, rgba(4, 124, 131, 0.08), rgba(223, 146, 47, 0.08)),
    #fffdf8;
  padding: 20px;
  box-shadow: var(--shadow);
}

.instruction-fit-head {
  display: grid;
  gap: 6px;
}

.instruction-fit-head h3,
.instruction-fit-head p {
  margin-bottom: 0;
}

.instruction-fit-head h3 {
  color: var(--teal-dark);
  font-size: 22px;
}

.instruction-fit-head p {
  color: #394246;
  line-height: 1.45;
}

.instruction-fit-table {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.instruction-fit-row {
  --fit-accent: var(--teal);
  --fit-tint: #eef8f6;
  display: grid;
  gap: 8px;
  min-height: 0;
  align-content: start;
  border: 1px solid color-mix(in srgb, var(--fit-accent) 24%, var(--line));
  border-top: 5px solid var(--fit-accent);
  border-radius: 12px;
  background:
    radial-gradient(circle at 20% 14%, color-mix(in srgb, var(--fit-accent) 14%, transparent), transparent 32%),
    linear-gradient(180deg, #ffffff 0%, var(--fit-tint) 100%),
    white;
  color: var(--ink);
  cursor: zoom-in;
  font: inherit;
  padding: 10px;
  text-align: left;
  box-shadow: 0 14px 30px rgba(20, 52, 34, 0.045);
}

.instruction-fit-row:hover,
.instruction-fit-row:focus-visible {
  border-color: color-mix(in srgb, var(--fit-accent) 62%, var(--line));
  box-shadow: 0 16px 34px rgba(20, 52, 34, 0.09);
  transform: translateY(-1px);
}

.instruction-fit-row:focus-visible {
  outline: 3px solid #df922f;
  outline-offset: 3px;
}

.instruction-fit-row.fit-new {
  --fit-accent: var(--teal);
  --fit-tint: #edf9f7;
}

.instruction-fit-row.fit-routine {
  --fit-accent: var(--green);
  --fit-tint: #f1f8eb;
}

.instruction-fit-row.fit-changed {
  --fit-accent: var(--blue);
  --fit-tint: #eef5ff;
}

.instruction-fit-row.fit-language {
  --fit-accent: var(--violet);
  --fit-tint: #f7f0f8;
}

.instruction-fit-row.fit-safety {
  --fit-accent: var(--red);
  --fit-tint: #fff1ef;
}

.fit-card-head {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.fit-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--fit-accent) 16%, white 84%);
  color: var(--fit-accent);
}

.fit-icon svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.fit-kicker {
  display: grid;
  gap: 2px;
}

.fit-number {
  color: white;
  color: var(--fit-accent);
  font-size: 17px;
  font-weight: 860;
  line-height: 0.95;
}

.fit-label {
  color: var(--fit-accent);
  font-size: 11px;
  font-weight: 860;
  line-height: 1;
  text-transform: uppercase;
}

.instruction-fit-row strong {
  display: block;
  margin-bottom: 4px;
  color: var(--teal-dark);
  font-size: 14px;
  line-height: 1.18;
}

.fit-copy p {
  min-height: 0;
  margin-bottom: 7px;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.24;
}

.fit-detail-list {
  display: grid;
  gap: 5px;
  border-top: 1px solid color-mix(in srgb, var(--fit-accent) 18%, var(--line));
  padding-top: 7px;
}

.fit-detail {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 6px;
  align-items: start;
  color: #394246;
  font-size: 10.5px;
  line-height: 1.22;
}

.fit-detail::before {
  display: grid;
  grid-row: 1 / span 2;
  width: 17px;
  height: 17px;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--fit-accent) 16%, white 84%);
  color: var(--fit-accent);
  font-size: 10px;
  font-weight: 900;
}

.fit-detail:first-child::before {
  content: "≡";
}

.fit-detail:last-child::before {
  content: "✓";
}

.fit-detail b {
  display: block;
  grid-column: 2;
  color: var(--fit-accent);
  font-size: 10.5px;
  font-weight: 860;
}

.fit-detail em {
  display: block;
  grid-column: 2;
  color: #394246;
  font-style: normal;
}

body.instruction-fit-modal-open {
  overflow: hidden;
}

.instruction-fit-modal[hidden] {
  display: none;
}

.instruction-fit-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 22px;
}

.instruction-fit-modal-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background:
    linear-gradient(135deg, rgba(18, 50, 37, 0.28), rgba(251, 253, 248, 0.78)),
    rgba(250, 250, 247, 0.72);
  cursor: zoom-out;
  backdrop-filter: blur(8px);
}

.instruction-fit-modal-card {
  --fit-accent: var(--teal);
  --fit-tint: #eef8f6;
  position: relative;
  z-index: 1;
  display: grid;
  gap: 18px;
  width: min(430px, calc(100vw - 40px));
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--fit-accent) 24%, var(--line));
  border-radius: 18px;
  background:
    radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--fit-accent) 14%, transparent), transparent 35%),
    linear-gradient(180deg, #ffffff 0%, var(--fit-tint) 100%);
  box-shadow: 0 28px 82px rgba(15, 36, 26, 0.24);
  padding: 28px;
}

.instruction-fit-modal-card.fit-new {
  --fit-accent: var(--teal);
  --fit-tint: #edf9f7;
}

.instruction-fit-modal-card.fit-routine {
  --fit-accent: var(--green);
  --fit-tint: #f1f8eb;
}

.instruction-fit-modal-card.fit-changed {
  --fit-accent: var(--blue);
  --fit-tint: #eef5ff;
}

.instruction-fit-modal-card.fit-language {
  --fit-accent: var(--violet);
  --fit-tint: #f7f0f8;
}

.instruction-fit-modal-card.fit-safety {
  --fit-accent: var(--red);
  --fit-tint: #fff1ef;
}

.instruction-fit-modal-card:focus {
  outline: none;
}

.instruction-fit-modal-topline {
  position: absolute;
  inset: 0 0 auto;
  height: 6px;
  background: var(--fit-accent);
}

.instruction-fit-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--fit-accent) 18%, var(--line));
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--fit-accent);
  cursor: pointer;
  font-size: 22px;
  font-weight: 760;
  line-height: 1;
}

.instruction-fit-modal-close:hover,
.instruction-fit-modal-close:focus-visible {
  background: white;
  outline: 3px solid #df922f;
  outline-offset: 2px;
}

.instruction-fit-modal-head {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding-right: 36px;
}

.instruction-fit-modal-head .fit-icon {
  width: 54px;
  height: 54px;
}

.instruction-fit-modal-head .fit-icon svg {
  width: 28px;
  height: 28px;
}

.instruction-fit-modal-head .fit-number {
  font-size: 30px;
}

.instruction-fit-modal-head .fit-label {
  font-size: 19px;
  letter-spacing: 0.02em;
}

.instruction-fit-modal-copy {
  display: grid;
  gap: 8px;
}

.instruction-fit-modal-copy h3 {
  margin: 0;
  color: var(--teal-dark);
  font-size: 24px;
  line-height: 1.08;
}

.instruction-fit-modal-copy p {
  margin: 0;
  color: #394246;
  font-size: 18px;
  line-height: 1.35;
}

.instruction-fit-modal-details {
  display: grid;
  gap: 16px;
  border-top: 1px solid color-mix(in srgb, var(--fit-accent) 18%, var(--line));
  padding-top: 18px;
}

.instruction-fit-modal-details section {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
}

.fit-detail-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--fit-accent) 16%, white 84%);
  color: var(--fit-accent);
  font-size: 17px;
  font-weight: 900;
}

.instruction-fit-modal-details strong {
  display: block;
  margin-bottom: 3px;
  color: var(--fit-accent);
  font-size: 17px;
}

.instruction-fit-modal-details p {
  margin: 0;
  color: #394246;
  font-size: 17px;
  line-height: 1.36;
}

.recipe-card,
.mini-panel,
.brochure-panel,
.background-card,
.start-card,
.level-card,
.start-hero {
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.start-card,
.background-card,
.level-card {
  padding: 22px;
}

.support-path {
  overflow: hidden;
  border-top: 7px solid var(--teal);
  background:
    linear-gradient(135deg, rgba(4, 124, 131, 0.06), rgba(223, 146, 47, 0.05)),
    var(--panel);
}

.background-card,
.start-card.wide {
  grid-column: 1 / -1;
}

.start-hero {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1.28fr) minmax(260px, 0.72fr);
  min-height: 0;
  overflow: hidden;
  background: var(--teal-dark);
}

.start-hero-copy {
  display: grid;
  align-content: center;
  gap: 12px;
  padding: 28px;
  color: white;
}

.start-hero-copy .eyebrow,
.start-hero-copy p {
  color: rgba(255, 255, 255, 0.86);
}

.start-hero-copy h2 {
  max-width: 780px;
  font-size: 34px;
  line-height: 1.04;
}

.start-hero-copy p {
  max-width: 700px;
  font-size: 15px;
  line-height: 1.45;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 6px;
}

.primary-action,
.secondary-action {
  min-height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.38);
  padding: 10px 14px;
  cursor: pointer;
  font-weight: 760;
}

.primary-action {
  background: white;
  color: var(--teal-dark);
}

.secondary-action {
  background: transparent;
  color: white;
}

.start-rule {
  display: grid;
  align-content: center;
  gap: 10px;
  padding: 22px;
  background: #fff7e8;
  color: var(--ink);
}

.start-rule strong {
  font-size: 22px;
  line-height: 1.13;
}

.start-rule span {
  color: #394246;
  line-height: 1.5;
}

.pathway-heading {
  display: grid;
  gap: 6px;
  max-width: 760px;
  margin-top: 4px;
}

.pathway-heading h3 {
  margin-bottom: 0;
  color: var(--teal-dark);
  font-size: 26px;
}

.pathway-heading p {
  margin-bottom: 0;
  color: #394246;
  font-size: 16px;
  font-weight: 700;
}

.use-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 14px;
}

.use-flow article {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 6px;
  align-items: start;
}

.support-path .use-flow {
  gap: 0;
  margin-top: 18px;
  border: 1px solid var(--line);
  background: white;
}

.support-path .use-flow article {
  position: relative;
  min-height: 128px;
  border-right: 1px solid var(--line);
  padding: 18px;
  background: white;
}

.support-path .use-flow article:last-child {
  border-right: 0;
}

.support-path .use-flow article:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 34px;
  right: -9px;
  z-index: 1;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 9px solid var(--line);
}

.use-flow article span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  background: var(--orange);
  color: white;
  font-size: 20px;
  font-weight: 800;
}

.support-path .use-flow article:nth-child(1) span {
  background: var(--orange);
}

.support-path .use-flow article:nth-child(2) span {
  background: var(--teal);
}

.support-path .use-flow article:nth-child(3) span {
  background: var(--violet);
}

.support-path .use-flow article:nth-child(4) span {
  background: var(--green);
}

.support-path .use-flow article strong {
  align-self: center;
  color: var(--ink);
  font-size: 18px;
}

.use-flow article p {
  grid-column: 2;
  margin-bottom: 0;
}

.start-card p,
.level-card p,
.level-card li {
  color: #394246;
  line-height: 1.5;
}

.level-card {
  display: grid;
  align-content: start;
  gap: 16px;
}

.level-card.level-1 {
  border-top: 8px solid var(--level-1-main);
}

.level-card.level-2 {
  border-top: 8px solid var(--violet);
}

.level-card.level-3 {
  border-top: 8px solid var(--blue);
}

.level-card section {
  display: grid;
  gap: 8px;
}

.level-card section p {
  margin-bottom: 0;
}

.level-card-section {
  align-content: start;
}

@media (min-width: 1101px) {
  .level-card {
    grid-template-rows:
      minmax(18px, auto)
      minmax(76px, auto)
      minmax(230px, auto)
      minmax(240px, auto)
      minmax(118px, auto)
      minmax(112px, auto)
      minmax(160px, auto)
      minmax(170px, auto)
      auto;
  }
}

.level-card-action {
  min-height: 44px;
  border: 1px solid var(--teal);
  background: var(--teal-dark);
  color: white;
  cursor: pointer;
  font-weight: 760;
}

.interactive-level-card {
  --interactive-progress: 0%;
  display: grid;
  grid-column: 1 / -1;
  justify-self: center;
  width: min(100%, 760px);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.interactive-level-head {
  position: relative;
  display: grid;
  min-height: 190px;
  align-items: end;
  overflow: hidden;
  padding: 28px;
  background: var(--teal-dark);
  color: white;
}

.interactive-level-head::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 88% 12%, rgba(255, 255, 255, 0.14), transparent 22%),
    linear-gradient(135deg, rgba(111, 159, 69, 0.22), transparent 44%);
  pointer-events: none;
}

.interactive-level-head > div {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 8px;
  max-width: 520px;
}

.interactive-level-head > span {
  position: absolute;
  top: -18px;
  right: 22px;
  color: rgba(255, 255, 255, 0.08);
  font-size: 148px;
  font-weight: 900;
  line-height: 1;
}

.interactive-level-kicker {
  margin-bottom: 0;
  color: #d5e7c6;
  font-size: 12px;
  font-weight: 840;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.interactive-level-head h3 {
  margin-bottom: 0;
  color: white;
  font-size: 34px;
  line-height: 1.03;
}

.interactive-level-head p {
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.74);
  font-size: 15px;
  line-height: 1.45;
}

.interactive-recognition {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  border-left: 6px solid var(--orange);
  background: #fff7e8;
  padding: 16px 20px;
}

.interactive-recognition > div {
  display: grid;
  min-width: 44px;
  min-height: 44px;
  place-items: center;
  background: rgba(223, 146, 47, 0.14);
  color: #8b560e;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.interactive-recognition p {
  margin-bottom: 0;
  color: #5d3b08;
  font-size: 14px;
  line-height: 1.52;
}

.interactive-recognition strong {
  display: block;
  margin-bottom: 3px;
  color: var(--orange);
  font-size: 11px;
  font-weight: 860;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.interactive-level-body {
  display: grid;
  gap: 24px;
  padding: 26px;
  background: #fffefa;
}

.interactive-step-tool {
  overflow: hidden;
  border: 1px solid var(--line);
  background: white;
}

.interactive-step-tool > .section-label {
  margin: 0;
  padding: 14px 16px 10px;
}

.interactive-step-tabs {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #f7f8f3;
}

.interactive-progress-fill {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 0;
  width: var(--interactive-progress);
  height: 3px;
  background: var(--green);
  transition: width 0.22s ease;
}

.interactive-step-tab {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 6px;
  justify-items: center;
  min-height: 76px;
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 10px 8px;
}

.interactive-step-tab:last-child {
  border-right: 0;
}

.interactive-step-tab span {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: white;
  color: var(--muted);
  font-size: 12px;
  font-weight: 860;
}

.interactive-step-tab strong {
  color: inherit;
  font-size: 13px;
  line-height: 1.15;
  text-align: center;
}

.interactive-step-tab:hover,
.interactive-step-tab:focus-visible {
  background: rgba(111, 159, 69, 0.12);
}

.interactive-step-tab.is-active {
  background: white;
  color: var(--teal-dark);
}

.interactive-step-tab.is-active span {
  border-color: var(--teal-dark);
  background: var(--teal-dark);
  color: white;
}

.interactive-step-tab.is-done span {
  border-color: var(--green);
  background: var(--green);
  color: white;
}

.interactive-step-panel {
  display: none;
  gap: 14px;
  padding: 20px;
}

.interactive-step-panel.is-visible {
  display: grid;
}

.interactive-step-panel-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.interactive-step-panel-head h4 {
  margin: 0 0 4px;
  color: var(--teal-dark);
  font-size: 22px;
  line-height: 1.12;
}

.interactive-step-panel-head p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.38;
}

.interactive-step-panel-head > span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 840;
  white-space: nowrap;
}

.interactive-step-focus {
  display: grid;
  gap: 8px;
}

.interactive-step-focus p {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr);
  gap: 10px;
  margin-bottom: 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 720;
  line-height: 1.35;
}

.interactive-step-focus span {
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 999px;
  background: var(--green);
}

.interactive-step-quote {
  margin: 0;
  border-left: 4px solid var(--orange);
  background: #f7f8f3;
  padding: 12px 14px;
}

.interactive-step-quote span {
  color: var(--ink);
  font-size: 15px;
  font-weight: 760;
  line-height: 1.42;
}

.interactive-step-warning {
  margin-bottom: 0;
  background: #fff0ee;
  color: #7b2c26;
  padding: 11px 13px;
  font-size: 14px;
  line-height: 1.42;
}

.interactive-step-nav {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.interactive-step-nav button {
  min-height: 40px;
  border: 1px solid var(--line);
  background: white;
  color: var(--teal-dark);
  cursor: pointer;
  font-weight: 820;
  padding: 8px 12px;
}

.interactive-step-nav button:last-child {
  background: var(--teal-dark);
  color: white;
}

.interactive-step-nav button:disabled {
  cursor: not-allowed;
  opacity: 0.38;
}

.interactive-chip-section {
  display: grid;
  gap: 10px;
}

.interactive-chip-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.interactive-chip {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 54px;
  border: 1px solid var(--line);
  padding: 10px 12px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 760;
  line-height: 1.25;
}

.interactive-chip b {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 999px;
  color: white;
  font-size: 13px;
  line-height: 1;
}

.interactive-chip.need {
  border-color: #c8ddbd;
  background: #f0f7ec;
}

.interactive-chip.need b {
  background: var(--green);
}

.interactive-chip.avoid {
  border-color: #f1c4bf;
  background: #fff0ee;
  color: #7b2c26;
}

.interactive-chip.avoid b {
  background: var(--red);
}

.interactive-aim {
  display: grid;
  gap: 6px;
  background: var(--teal-dark);
  padding: 18px;
}

.interactive-aim .section-label {
  color: #d5e7c6;
}

.interactive-aim strong {
  color: white;
  font-size: 19px;
  line-height: 1.3;
}

.interactive-level-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 72px;
  border: 0;
  background: var(--teal-dark);
  color: white;
  cursor: pointer;
  padding: 18px 26px;
  text-align: left;
}

.interactive-level-cta span {
  color: #d5e7c6;
  font-size: 12px;
  font-weight: 840;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.interactive-level-cta strong {
  font-size: 20px;
}

.interactive-level-cta::after {
  content: "->";
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  font-weight: 900;
}

.interactive-level-cta:hover {
  background: var(--teal);
}

.expanded-level-profile {
  --profile-main: var(--level-1-main);
  --profile-deep: var(--level-1-deep);
  --profile-soft: var(--level-1-soft);
  --profile-border: var(--level-1-border);
  --profile-muted: var(--level-1-muted);
  --profile-amber: var(--level-1-amber);
  --profile-cream: var(--level-1-cream);
  --profile-ink: #25371f;
  display: grid;
  grid-column: 1 / -1;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--profile-border);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.expanded-level-profile.level-1 {
  --profile-main: var(--level-1-main);
  --profile-deep: var(--level-1-deep);
  --profile-soft: var(--level-1-soft);
  --profile-border: var(--level-1-border);
  --profile-muted: var(--level-1-muted);
  --profile-amber: var(--level-1-amber);
  --profile-cream: var(--level-1-cream);
  --profile-ink: #25371f;
}

.expanded-level-profile.level-2 {
  --profile-main: var(--level-2-main);
  --profile-deep: var(--level-2-deep);
  --profile-soft: var(--level-2-soft);
  --profile-border: var(--level-2-border);
  --profile-muted: var(--level-2-muted);
  --profile-amber: var(--level-2-amber);
  --profile-cream: var(--level-2-cream);
  --profile-ink: #3a293f;
}

.expanded-level-profile.level-3 {
  --profile-main: var(--level-3-main);
  --profile-deep: var(--level-3-deep);
  --profile-soft: var(--level-3-soft);
  --profile-border: var(--level-3-border);
  --profile-muted: var(--level-3-muted);
  --profile-amber: var(--level-3-amber);
  --profile-cream: var(--level-3-cream);
  --profile-ink: #173345;
}

.expanded-level-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 170px;
  gap: 24px;
  align-items: center;
  padding: 22px 40px;
  background:
    linear-gradient(110deg, rgba(255, 255, 255, 0.94), rgba(238, 245, 251, 0.9)),
    var(--profile-soft);
}

.expanded-level-hero-copy {
  display: grid;
  gap: 12px;
  max-width: 760px;
}

.expanded-level-hero h3 {
  max-width: none;
  margin-bottom: 0;
  color: var(--profile-deep);
  font-size: 35px;
  line-height: 1.03;
}

.expanded-level-hero p:not(.interactive-level-kicker) {
  max-width: 680px;
  margin-bottom: 0;
  color: var(--profile-ink);
  font-size: 16px;
  font-weight: 620;
  line-height: 1.45;
}

.expanded-level-hero .interactive-level-kicker {
  color: var(--profile-ink);
}

.expanded-level-portrait {
  justify-self: center;
  align-self: end;
  width: min(100%, 145px);
  margin: 0;
}

.expanded-level-portrait img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid color-mix(in srgb, var(--profile-main) 34%, var(--line));
  background: #24c5c3;
}

.expanded-level-profile .section-label {
  letter-spacing: 0.02em;
  text-transform: none;
}

.expanded-level-recognition {
  display: grid;
  gap: 10px;
  border-left: 7px solid var(--profile-amber);
  background: var(--profile-cream);
  padding: 24px 44px;
}

.expanded-level-recognition .section-label {
  margin-bottom: 0;
  color: var(--profile-amber);
  letter-spacing: 0.12em;
}

.expanded-level-recognition p:not(.section-label) {
  max-width: 980px;
  margin-bottom: 0;
  color: #5d3b08;
  font-size: 17px;
  line-height: 1.52;
}

.expanded-level-recognition.is-signal-strip {
  grid-template-columns: minmax(170px, 0.34fr) minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  border-left: 0;
  border-bottom: 1px solid var(--profile-border);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.96), color-mix(in srgb, var(--profile-soft) 78%, white)),
    #fffefa;
  padding: 20px 44px;
}

.expanded-recognition-title {
  margin-bottom: 0;
  color: var(--profile-ink);
  font-size: 20px;
  font-weight: 860;
  line-height: 1.2;
}

.expanded-recognition-signals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  align-items: stretch;
}

.expanded-recognition-signal {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 66px;
  border-left: 1px solid var(--profile-border);
  padding: 0 22px;
}

.expanded-recognition-signal:first-child {
  border-left: 0;
}

.expanded-recognition-signal strong {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.16;
}

.expanded-signal-icon {
  display: grid;
  width: 50px;
  height: 50px;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--profile-main) 16%, white);
  color: var(--profile-deep);
}

.expanded-signal-icon svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.expanded-level-body {
  display: grid;
  gap: 28px;
  padding: 34px 44px 40px;
  background: #fffefa;
}

.expanded-step-section {
  display: grid;
  gap: 16px;
}

.expanded-step-section > .section-label {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 0;
  color: var(--profile-muted);
  font-size: 13px;
  letter-spacing: 0.15em;
}

.expanded-step-section > .section-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--profile-border);
}

.expanded-step-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.expanded-step-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  grid-template-rows: 98px 106px minmax(94px, auto) auto;
  gap: 14px 16px;
  align-content: start;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--profile-main) 26%, var(--line));
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(238, 245, 251, 0.5), rgba(255, 255, 255, 0.96)),
    white;
  padding: 24px;
  box-shadow: 0 12px 28px rgba(63, 101, 140, 0.11);
}

.expanded-step-number {
  display: grid;
  grid-column: 1;
  grid-row: 1;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 999px;
  background: var(--profile-deep);
  color: white;
  font-size: 18px;
  font-weight: 860;
}

.expanded-step-copy {
  display: grid;
  grid-column: 2;
  grid-row: 1;
  gap: 6px;
  align-content: start;
}

.expanded-step-copy h4 {
  margin: 0;
  color: var(--profile-ink);
  font-size: 24px;
  line-height: 1.1;
}

.expanded-step-copy strong {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.28;
}

.expanded-step-copy p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.38;
}

.expanded-step-focus {
  display: grid;
  grid-column: 2;
  grid-row: 2;
  gap: 8px;
  align-content: start;
}

.expanded-step-focus p {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr);
  gap: 10px;
  margin-bottom: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 680;
  line-height: 1.36;
}

.expanded-step-focus span {
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 999px;
  background: var(--profile-deep);
}

.expanded-step-quote {
  display: grid;
  grid-template-columns: 1fr;
  grid-column: 1 / -1;
  grid-row: 3;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--profile-amber) 35%, var(--profile-cream));
  border-radius: 10px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--profile-cream) 88%, white), rgba(255, 255, 255, 0.92)),
    white;
  padding: 14px 16px;
}

.expanded-step-quote .section-label {
  color: var(--profile-amber);
}

.expanded-step-quote span {
  color: var(--ink);
  font-size: 15px;
  font-weight: 760;
  line-height: 1.42;
}

.expanded-step-warning {
  display: grid;
  grid-template-columns: 28px auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  grid-column: 1 / -1;
  grid-row: 4;
  margin-bottom: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  color: #7b2c26;
  padding: 12px 4px 0;
  font-size: 13px;
  line-height: 1.38;
}

.expanded-step-warning span {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 999px;
  background: var(--red);
  color: white;
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
}

.expanded-step-warning b {
  color: var(--red);
}

.expanded-level-lower {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}

.expanded-level-outcome {
  display: grid;
  grid-template-columns: minmax(150px, auto) minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  border: 1px solid var(--profile-border);
  border-left: 6px solid var(--profile-main);
  border-radius: 12px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--profile-soft) 72%, white), white),
    white;
  padding: 16px 18px;
  box-shadow: 0 10px 24px rgba(63, 101, 140, 0.07);
}

.expanded-level-outcome .section-label {
  margin: 0;
  color: var(--profile-deep);
}

.expanded-level-outcome strong {
  color: var(--profile-ink);
  font-size: 17px;
  line-height: 1.35;
}

.expanded-chip-section {
  display: grid;
  align-content: start;
  gap: 10px;
  border: 1px solid var(--profile-border);
  border-radius: 12px;
  background: white;
  padding: 18px;
  box-shadow: 0 10px 24px rgba(63, 101, 140, 0.08);
}

.expanded-chip-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.expanded-chip {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 42px;
  border: 1px solid var(--line);
  padding: 9px 10px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 760;
  line-height: 1.2;
}

.expanded-chip b {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 999px;
  color: white;
  font-size: 12px;
  line-height: 1;
}

.expanded-chip.need {
  border-color: var(--profile-border);
  background: color-mix(in srgb, var(--profile-main) 10%, white);
}

.expanded-chip.need b {
  background: var(--profile-main);
}

.expanded-chip.avoid {
  border-color: #f1c4bf;
  background: #fff0ee;
  color: #7b2c26;
}

.expanded-chip.avoid b {
  background: var(--red);
}

.expanded-chip-section:last-child .expanded-chip-grid {
  grid-template-columns: 1fr;
}

.expanded-level-cta {
  background: var(--profile-deep);
}

.expanded-level-cta:hover {
  background: var(--profile-main);
}

.interactive-level-card.level-1 {
  --guide-forest: var(--level-1-deep);
  --guide-sage: var(--level-1-main);
  --guide-cream: var(--level-1-cream);
  --guide-warm: var(--level-1-warm);
  --guide-amber: var(--level-1-amber);
  --guide-border: var(--level-1-border);
  max-width: 900px;
  border-color: var(--guide-border);
  border-radius: 0 0 28px 28px;
  background: var(--guide-warm);
  box-shadow: 0 26px 70px rgba(31, 37, 40, 0.12);
}

.interactive-level-card.level-1 .interactive-level-head {
  grid-template-columns: minmax(0, 1fr) 170px;
  column-gap: 28px;
  min-height: 220px;
  border-top: 8px solid var(--guide-sage);
  padding: 34px 44px 36px;
  background:
    linear-gradient(135deg, rgba(241, 246, 236, 0.96), rgba(255, 253, 250, 0.98)),
    var(--level-1-soft);
  color: var(--ink);
}

.interactive-level-card.level-1 .interactive-level-head::after {
  background:
    radial-gradient(circle at 86% 16%, rgba(134, 167, 106, 0.12), transparent 25%),
    linear-gradient(90deg, transparent 0 78%, rgba(134, 167, 106, 0.08) 78% 82%, transparent 82%);
}

.interactive-level-card.level-1 .interactive-level-head > div {
  align-self: center;
  min-width: 0;
  max-width: 650px;
  gap: 18px;
}

.interactive-level-card.level-1 .interactive-level-head > span {
  top: -18px;
  right: 34px;
  color: rgba(79, 111, 65, 0.08);
  font-size: 170px;
}

.interactive-level-card.level-1 .interactive-level-portrait {
  position: relative;
  z-index: 1;
  align-self: end;
  justify-self: end;
  width: 168px;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(79, 111, 65, 0.18);
  background: white;
  box-shadow: 0 18px 36px rgba(31, 37, 40, 0.1);
}

.interactive-level-card.level-1 .interactive-level-portrait img {
  display: block;
  width: 100%;
  height: auto;
}

.interactive-level-card.level-1 .interactive-level-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--guide-forest);
  font-size: 14px;
  letter-spacing: 0.12em;
}

.interactive-level-card.level-1 .interactive-level-kicker::before {
  content: none;
}

.interactive-level-card.level-1 .interactive-level-head h3 {
  max-width: 520px;
  color: var(--guide-forest);
  font-size: 42px;
  font-weight: 860;
  line-height: 1.02;
}

.interactive-level-card.level-1 .interactive-level-head p {
  max-width: 690px;
  color: #45513f;
  font-size: 18px;
  line-height: 1.42;
}

.interactive-level-card.level-1 .interactive-recognition {
  grid-template-columns: 1fr;
  gap: 0;
  border-left: 7px solid var(--guide-amber);
  background: var(--guide-cream);
  padding: 30px 44px;
}

.interactive-level-card.level-1 .interactive-recognition > div {
  min-width: 42px;
  min-height: 42px;
  background: transparent;
  color: var(--guide-forest);
  font-size: 26px;
}

.interactive-level-card.level-1 .interactive-recognition p {
  color: #4d3412;
  font-size: 17px;
  line-height: 1.55;
}

.interactive-level-card.level-1 .interactive-recognition strong {
  margin-bottom: 10px;
  color: var(--guide-amber);
  font-size: 13px;
  letter-spacing: 0.08em;
}

.interactive-level-card.level-1 .interactive-level-body {
  gap: 28px;
  padding: 40px 48px 44px;
  background: var(--guide-warm);
}

.interactive-level-card.level-1 .section-label {
  color: var(--level-1-muted);
  font-size: 16px;
  font-weight: 860;
  letter-spacing: 0.08em;
}

.interactive-level-card.level-1 .interactive-step-tool > .section-label {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 0 18px;
  background: var(--guide-warm);
}

.interactive-level-card.level-1 .interactive-step-tool > .section-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--guide-border);
}

.interactive-level-card.level-1 .interactive-step-tool {
  border: 0;
  border-radius: 0;
  background: var(--guide-warm);
}

.interactive-level-card.level-1 .interactive-step-tabs {
  overflow: hidden;
  border: 2px solid var(--guide-border);
  border-bottom: 2px solid var(--guide-border);
  border-radius: 16px 16px 0 0;
  background: #f4f2eb;
}

.interactive-level-card.level-1 .interactive-progress-fill {
  height: 4px;
  background: var(--guide-forest);
}

.interactive-level-card.level-1 .interactive-step-tab {
  min-height: 96px;
  border-right: 2px solid var(--guide-border);
  color: var(--level-1-muted);
  padding: 16px 10px 14px;
}

.interactive-level-card.level-1 .interactive-step-tab span {
  width: 40px;
  height: 40px;
  border-color: var(--guide-border);
  color: var(--level-1-muted);
  font-size: 20px;
}

.interactive-level-card.level-1 .interactive-step-tab strong {
  color: inherit;
  font-size: 18px;
  line-height: 1.14;
  text-transform: none;
}

.interactive-level-card.level-1 .interactive-step-tab.is-active {
  color: var(--guide-forest);
}

.interactive-level-card.level-1 .interactive-step-tab.is-active span {
  border-color: var(--guide-forest);
  background: var(--guide-forest);
  color: white;
}

.interactive-level-card.level-1 .interactive-step-tab.is-done span {
  border-color: var(--guide-sage);
  background: var(--guide-sage);
  color: white;
}

.interactive-level-card.level-1 .interactive-step-panel {
  border-right: 2px solid var(--guide-border);
  border-bottom: 2px solid var(--guide-border);
  border-left: 2px solid var(--guide-border);
  border-radius: 0 0 16px 16px;
  padding: 38px 44px 34px;
  background: var(--guide-warm);
}

.interactive-level-card.level-1 .interactive-step-panel-head h4 {
  color: var(--guide-forest);
  font-size: 28px;
  font-weight: 860;
  line-height: 1.12;
}

.interactive-level-card.level-1 .interactive-step-panel-head p {
  color: #6b6f66;
  font-size: 16px;
  line-height: 1.42;
}

.interactive-level-card.level-1 .interactive-step-focus {
  gap: 14px;
  margin-top: 8px;
}

.interactive-level-card.level-1 .interactive-step-focus p {
  grid-template-columns: 12px minmax(0, 1fr);
  gap: 16px;
  color: #171a15;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.32;
}

.interactive-level-card.level-1 .interactive-step-focus span {
  width: 10px;
  height: 10px;
  margin-top: 10px;
  background: var(--guide-sage);
}

.interactive-level-card.level-1 .interactive-step-quote {
  margin-top: 10px;
  border-left: 6px solid var(--guide-amber);
  border-radius: 0 14px 14px 0;
  background: #f4f0ea;
  padding: 22px 28px;
}

.interactive-level-card.level-1 .interactive-step-quote .section-label {
  margin-bottom: 10px;
  color: var(--guide-amber);
}

.interactive-level-card.level-1 .interactive-step-quote span {
  color: #161914;
  font-size: 17px;
  font-style: normal;
  font-weight: 680;
  line-height: 1.42;
}

.interactive-level-card.level-1 .interactive-step-warning {
  border-radius: 10px;
  padding: 14px 18px;
  font-size: 16px;
}

.interactive-level-card.level-1 .interactive-step-nav {
  margin-top: 8px;
}

.interactive-level-card.level-1 .interactive-step-nav button {
  min-height: 48px;
  border-color: var(--guide-border);
  padding: 10px 18px;
}

.interactive-level-card.level-1 .interactive-step-nav button:last-child {
  background: var(--guide-sage);
}

.interactive-level-card.level-1 .interactive-chip {
  border-color: var(--guide-border);
  background: var(--level-1-soft);
}

.interactive-level-card.level-1 .interactive-chip.avoid {
  border-color: #efc9c3;
  background: #fff3f1;
}

.interactive-level-card.level-1 .interactive-aim {
  border: 1px solid var(--guide-border);
  border-left: 7px solid var(--guide-sage);
  background: var(--level-1-soft);
  padding: 24px 28px;
}

.interactive-level-card.level-1 .interactive-aim .section-label {
  color: var(--guide-forest);
}

.interactive-level-card.level-1 .interactive-aim strong {
  color: var(--guide-forest);
}

.interactive-level-card.level-1 .interactive-level-cta {
  background: var(--guide-sage);
}

.interactive-level-card.level-1 .interactive-level-cta:hover {
  background: var(--guide-forest);
}

@media (max-width: 700px) {
  .interactive-level-card.level-1 {
    width: 100%;
    border-radius: 0 0 22px 22px;
  }

  .interactive-level-card.level-1 .interactive-level-head {
    grid-template-columns: minmax(0, 1fr) 84px;
    column-gap: 12px;
    min-height: 184px;
    padding: 22px 22px 24px;
  }

  .interactive-level-card.level-1 .interactive-level-head > span {
    right: 16px;
    font-size: 132px;
  }

  .interactive-level-card.level-1 .interactive-level-head h3 {
    font-size: 28px;
  }

  .interactive-level-card.level-1 .interactive-level-head p {
    font-size: 15px;
  }

  .interactive-level-card.level-1 .interactive-level-portrait {
    width: 82px;
  }

  .interactive-level-card.level-1 .interactive-recognition {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 22px 24px;
  }

  .interactive-level-card.level-1 .interactive-recognition p {
    font-size: 17px;
  }

  .interactive-level-card.level-1 .interactive-level-body {
    padding: 28px 24px 32px;
  }

  .interactive-level-card.level-1 .interactive-step-tab {
    min-height: 82px;
    padding: 12px 4px 10px;
  }

  .interactive-level-card.level-1 .interactive-step-tab span {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }

  .interactive-level-card.level-1 .interactive-step-tab strong {
    font-size: 13px;
  }

  .interactive-level-card.level-1 .interactive-step-panel {
    padding: 28px 24px 24px;
  }

  .interactive-level-card.level-1 .interactive-step-panel-head h4 {
    font-size: 23px;
  }

  .interactive-level-card.level-1 .interactive-step-panel-head p,
  .interactive-level-card.level-1 .interactive-step-focus p,
  .interactive-level-card.level-1 .interactive-step-quote span {
    font-size: 15px;
  }

  .interactive-level-card.level-1 .interactive-chip-grid {
    grid-template-columns: 1fr;
  }
}

.interactive-level-card.level-1 {
  --guide-forest: var(--level-1-deep);
  --guide-sage: var(--level-1-main);
  --guide-soft: var(--level-1-soft);
  --guide-cream: var(--level-1-cream);
  --guide-warm: var(--level-1-warm);
  --guide-amber: var(--level-1-amber);
  --guide-border: var(--level-1-border);
  --guide-muted: var(--level-1-muted);
}

.interactive-level-card.level-2 {
  --guide-forest: var(--level-2-deep);
  --guide-sage: var(--level-2-main);
  --guide-soft: var(--level-2-soft);
  --guide-cream: var(--level-2-cream);
  --guide-warm: var(--level-2-warm);
  --guide-amber: var(--level-2-amber);
  --guide-border: var(--level-2-border);
  --guide-muted: var(--level-2-muted);
}

.interactive-level-card.level-3 {
  --guide-forest: var(--level-3-deep);
  --guide-sage: var(--level-3-main);
  --guide-soft: var(--level-3-soft);
  --guide-cream: var(--level-3-cream);
  --guide-warm: var(--level-3-warm);
  --guide-amber: var(--level-3-amber);
  --guide-border: var(--level-3-border);
  --guide-muted: var(--level-3-muted);
}

.interactive-level-card:is(.level-1, .level-2, .level-3) {
  max-width: 900px;
  border-color: var(--guide-border);
  border-radius: 0 0 28px 28px;
  background: var(--guide-warm);
  box-shadow: 0 26px 70px rgba(31, 37, 40, 0.12);
}

.interactive-level-card:is(.level-1, .level-2, .level-3) .interactive-level-head {
  grid-template-columns: minmax(0, 1fr) 170px;
  column-gap: 28px;
  min-height: 220px;
  border-top: 8px solid var(--guide-sage);
  padding: 34px 44px 36px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--guide-soft) 88%, white), rgba(255, 253, 250, 0.98)),
    var(--guide-soft);
  color: var(--ink);
}

.interactive-level-card:is(.level-1, .level-2, .level-3) .interactive-level-head::after {
  background:
    radial-gradient(circle at 86% 16%, color-mix(in srgb, var(--guide-sage) 14%, transparent), transparent 25%),
    linear-gradient(90deg, transparent 0 78%, color-mix(in srgb, var(--guide-sage) 9%, transparent) 78% 82%, transparent 82%);
}

.interactive-level-card:is(.level-1, .level-2, .level-3) .interactive-level-head > div {
  align-self: center;
  min-width: 0;
  max-width: 650px;
  gap: 18px;
}

.interactive-level-card:is(.level-1, .level-2, .level-3) .interactive-level-head > span {
  display: none;
}

.interactive-level-card:is(.level-1, .level-2, .level-3) .interactive-level-portrait {
  position: relative;
  z-index: 1;
  align-self: end;
  justify-self: end;
  width: 168px;
  margin: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--guide-forest) 18%, transparent);
  background: white;
  box-shadow: 0 18px 36px rgba(31, 37, 40, 0.1);
}

.interactive-level-card:is(.level-1, .level-2, .level-3) .interactive-level-portrait img {
  display: block;
  width: 100%;
  height: auto;
}

.interactive-level-card:is(.level-1, .level-2, .level-3) .interactive-level-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--guide-forest);
  font-size: 14px;
  letter-spacing: 0.12em;
}

.interactive-level-card:is(.level-1, .level-2, .level-3) .interactive-level-kicker::before {
  content: none;
}

.interactive-level-card:is(.level-1, .level-2, .level-3) .interactive-level-head h3 {
  max-width: 520px;
  color: var(--guide-forest);
  font-size: 42px;
  font-weight: 860;
  line-height: 1.02;
}

.interactive-level-card:is(.level-1, .level-2, .level-3) .interactive-level-head p {
  max-width: 690px;
  color: #45513f;
  font-size: 18px;
  line-height: 1.42;
}

.interactive-level-card:is(.level-1, .level-2, .level-3) .interactive-recognition {
  grid-template-columns: 1fr;
  gap: 0;
  border-left: 7px solid var(--guide-amber);
  background: var(--guide-cream);
  padding: 30px 44px;
}

.interactive-level-card:is(.level-1, .level-2, .level-3) .interactive-recognition > div {
  display: none;
}

.interactive-level-card:is(.level-1, .level-2, .level-3) .interactive-recognition p {
  color: #4d3412;
  font-size: 17px;
  line-height: 1.55;
}

.interactive-level-card:is(.level-1, .level-2, .level-3) .interactive-recognition strong {
  margin-bottom: 10px;
  color: var(--guide-amber);
  font-size: 13px;
  letter-spacing: 0.08em;
}

.interactive-level-card:is(.level-1, .level-2, .level-3) .interactive-level-body {
  gap: 28px;
  padding: 40px 48px 44px;
  background: var(--guide-warm);
}

.interactive-level-card:is(.level-1, .level-2, .level-3) .section-label {
  color: var(--guide-muted);
  font-size: 16px;
  font-weight: 860;
  letter-spacing: 0.08em;
}

.interactive-level-card:is(.level-1, .level-2, .level-3) .interactive-step-tool > .section-label {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 0 18px;
  background: var(--guide-warm);
}

.interactive-level-card:is(.level-1, .level-2, .level-3) .interactive-step-tool > .section-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--guide-border);
}

.interactive-level-card:is(.level-1, .level-2, .level-3) .interactive-step-tool {
  border: 0;
  border-radius: 0;
  background: var(--guide-warm);
}

.interactive-level-card:is(.level-1, .level-2, .level-3) .interactive-step-tabs {
  overflow: hidden;
  border: 2px solid var(--guide-border);
  border-bottom: 2px solid var(--guide-border);
  border-radius: 16px 16px 0 0;
  background: #f4f2eb;
}

.interactive-level-card:is(.level-1, .level-2, .level-3) .interactive-progress-fill {
  height: 4px;
  background: var(--guide-forest);
}

.interactive-level-card:is(.level-1, .level-2, .level-3) .interactive-step-tab {
  min-height: 96px;
  border-right: 2px solid var(--guide-border);
  color: var(--guide-muted);
  padding: 16px 10px 14px;
}

.interactive-level-card:is(.level-1, .level-2, .level-3) .interactive-step-tab span {
  width: 40px;
  height: 40px;
  border-color: var(--guide-border);
  color: var(--guide-muted);
  font-size: 20px;
}

.interactive-level-card:is(.level-1, .level-2, .level-3) .interactive-step-tab strong {
  color: inherit;
  font-size: 18px;
  line-height: 1.14;
  text-transform: none;
}

.interactive-level-card:is(.level-1, .level-2, .level-3) .interactive-step-tab:hover,
.interactive-level-card:is(.level-1, .level-2, .level-3) .interactive-step-tab:focus-visible {
  background: color-mix(in srgb, var(--guide-soft) 78%, white);
}

.interactive-level-card:is(.level-1, .level-2, .level-3) .interactive-step-tab.is-active {
  color: var(--guide-forest);
}

.interactive-level-card:is(.level-1, .level-2, .level-3) .interactive-step-tab.is-active span {
  border-color: var(--guide-forest);
  background: var(--guide-forest);
  color: white;
}

.interactive-level-card:is(.level-1, .level-2, .level-3) .interactive-step-tab.is-done span {
  border-color: var(--guide-sage);
  background: var(--guide-sage);
  color: white;
}

.interactive-level-card:is(.level-1, .level-2, .level-3) .interactive-step-panel {
  border-right: 2px solid var(--guide-border);
  border-bottom: 2px solid var(--guide-border);
  border-left: 2px solid var(--guide-border);
  border-radius: 0 0 16px 16px;
  padding: 38px 44px 34px;
  background: var(--guide-warm);
}

.interactive-level-card:is(.level-1, .level-2, .level-3) .interactive-step-panel-head h4 {
  color: var(--guide-forest);
  font-size: 28px;
  font-weight: 860;
  line-height: 1.12;
}

.interactive-level-card:is(.level-1, .level-2, .level-3) .interactive-step-panel-head p {
  color: #6b6f66;
  font-size: 16px;
  line-height: 1.42;
}

.interactive-level-card:is(.level-1, .level-2, .level-3) .interactive-step-focus {
  gap: 14px;
  margin-top: 8px;
}

.interactive-level-card:is(.level-1, .level-2, .level-3) .interactive-step-focus p {
  grid-template-columns: 12px minmax(0, 1fr);
  gap: 16px;
  color: #171a15;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.32;
}

.interactive-level-card:is(.level-1, .level-2, .level-3) .interactive-step-focus span {
  width: 10px;
  height: 10px;
  margin-top: 10px;
  background: var(--guide-sage);
}

.interactive-level-card:is(.level-1, .level-2, .level-3) .interactive-step-quote {
  margin-top: 10px;
  border-left: 6px solid var(--guide-amber);
  border-radius: 0 14px 14px 0;
  background: #f4f0ea;
  padding: 22px 28px;
}

.interactive-level-card:is(.level-1, .level-2, .level-3) .interactive-step-quote .section-label {
  margin-bottom: 10px;
  color: var(--guide-amber);
}

.interactive-level-card:is(.level-1, .level-2, .level-3) .interactive-step-quote span {
  color: #161914;
  font-size: 17px;
  font-style: normal;
  font-weight: 680;
  line-height: 1.42;
}

.interactive-level-card:is(.level-1, .level-2, .level-3) .interactive-step-warning {
  border-radius: 10px;
  padding: 14px 18px;
  font-size: 16px;
}

.interactive-level-card:is(.level-1, .level-2, .level-3) .interactive-step-nav {
  margin-top: 8px;
}

.interactive-level-card:is(.level-1, .level-2, .level-3) .interactive-step-nav button {
  min-height: 48px;
  border-color: var(--guide-border);
  padding: 10px 18px;
}

.interactive-level-card:is(.level-1, .level-2, .level-3) .interactive-step-nav button:last-child {
  background: var(--guide-sage);
}

.interactive-level-card:is(.level-1, .level-2, .level-3) .interactive-chip {
  border-color: var(--guide-border);
  background: var(--guide-soft);
}

.interactive-level-card:is(.level-1, .level-2, .level-3) .interactive-chip.need b {
  background: var(--guide-sage);
}

.interactive-level-card:is(.level-1, .level-2, .level-3) .interactive-chip.avoid {
  border-color: #efc9c3;
  background: #fff3f1;
}

.interactive-level-card:is(.level-1, .level-2, .level-3) .interactive-aim {
  border: 1px solid var(--guide-border);
  border-left: 7px solid var(--guide-sage);
  background: var(--guide-soft);
  padding: 24px 28px;
}

.interactive-level-card:is(.level-1, .level-2, .level-3) .interactive-aim .section-label,
.interactive-level-card:is(.level-1, .level-2, .level-3) .interactive-aim strong {
  color: var(--guide-forest);
}

.interactive-level-card:is(.level-1, .level-2, .level-3) .interactive-level-cta {
  background: var(--guide-sage);
}

.interactive-level-card:is(.level-1, .level-2, .level-3) .interactive-level-cta:hover {
  background: var(--guide-forest);
}

@media (max-width: 700px) {
  .interactive-level-card:is(.level-1, .level-2, .level-3) {
    width: 100%;
    border-radius: 0 0 22px 22px;
  }

  .interactive-level-card:is(.level-1, .level-2, .level-3) .interactive-level-head {
    grid-template-columns: minmax(0, 1fr) 84px;
    column-gap: 12px;
    min-height: 184px;
    padding: 22px 22px 24px;
  }

  .interactive-level-card:is(.level-1, .level-2, .level-3) .interactive-level-head h3 {
    font-size: 28px;
  }

  .interactive-level-card:is(.level-1, .level-2, .level-3) .interactive-level-head p {
    font-size: 15px;
  }

  .interactive-level-card:is(.level-1, .level-2, .level-3) .interactive-level-portrait {
    width: 82px;
  }

  .interactive-level-card:is(.level-1, .level-2, .level-3) .interactive-recognition {
    padding: 22px 24px;
  }

  .interactive-level-card:is(.level-1, .level-2, .level-3) .interactive-recognition p {
    font-size: 17px;
  }

  .interactive-level-card:is(.level-1, .level-2, .level-3) .interactive-level-body {
    padding: 28px 24px 32px;
  }

  .interactive-level-card:is(.level-1, .level-2, .level-3) .interactive-step-tab {
    min-height: 82px;
    padding: 12px 4px 10px;
  }

  .interactive-level-card:is(.level-1, .level-2, .level-3) .interactive-step-tab span {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }

  .interactive-level-card:is(.level-1, .level-2, .level-3) .interactive-step-tab strong {
    font-size: 13px;
  }

  .interactive-level-card:is(.level-1, .level-2, .level-3) .interactive-step-panel {
    padding: 28px 24px 24px;
  }

  .interactive-level-card:is(.level-1, .level-2, .level-3) .interactive-step-panel-head h4 {
    font-size: 23px;
  }

  .interactive-level-card:is(.level-1, .level-2, .level-3) .interactive-step-panel-head p,
  .interactive-level-card:is(.level-1, .level-2, .level-3) .interactive-step-focus p,
  .interactive-level-card:is(.level-1, .level-2, .level-3) .interactive-step-quote span {
    font-size: 15px;
  }

  .interactive-level-card:is(.level-1, .level-2, .level-3) .interactive-chip-grid {
    grid-template-columns: 1fr;
  }
}

.recipe-card {
  min-height: 620px;
  padding: 28px;
}

.instruction-overview-card {
  min-height: 0;
  border: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
}

.instruction-overview {
  display: grid;
  gap: 20px;
}

.instruction-overview-fit .instruction-fit-card {
  margin-top: 0;
  border-radius: 18px;
  box-shadow: 0 16px 42px rgba(20, 52, 34, 0.055);
}

.instruction-overview-fit .instruction-fit-table {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.instruction-overview-fit .instruction-fit-row {
  min-height: 0;
}

.instruction-overview-hero {
  display: grid;
  gap: 10px;
  overflow: hidden;
  border-radius: 22px;
  background:
    radial-gradient(circle at 84% 10%, rgba(134, 167, 106, 0.3), transparent 34%),
    linear-gradient(135deg, #064c38 0%, #0b693f 64%, #5f814f 100%);
  color: white;
  padding: 30px 34px;
  box-shadow: 0 22px 56px rgba(28, 71, 45, 0.12);
}

.instruction-overview-hero .eyebrow {
  color: rgba(255, 255, 255, 0.78);
}

.instruction-overview-hero h2 {
  margin: 0;
  color: white;
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 880;
  letter-spacing: -0.04em;
  line-height: 1;
}

.instruction-overview-hero p:last-child {
  max-width: 780px;
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: 17px;
  line-height: 1.42;
}

.instruction-situation-grid {
  display: grid;
  gap: 16px;
}

.instruction-situation-card {
  --instruction-accent: var(--level-1-main);
  --instruction-deep: var(--level-1-deep);
  --instruction-soft: var(--level-1-soft);
  display: grid;
  gap: 16px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--instruction-accent) 28%, var(--line));
  border-top: 7px solid var(--instruction-accent);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 16px 42px rgba(20, 52, 34, 0.055);
  padding: 18px;
}

.instruction-situation-card.level-2 {
  --instruction-accent: var(--level-2-main);
  --instruction-deep: var(--level-2-deep);
  --instruction-soft: var(--level-2-soft);
}

.instruction-situation-card.level-3 {
  --instruction-accent: var(--level-3-main);
  --instruction-deep: var(--level-3-deep);
  --instruction-soft: var(--level-3-soft);
}

.instruction-situation-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
}

.instruction-situation-head h3 {
  margin: 0 0 6px;
  color: var(--instruction-deep);
  font-size: 24px;
  line-height: 1.08;
}

.instruction-situation-head p:not(.section-label) {
  margin: 0;
  color: #394246;
  font-weight: 720;
  line-height: 1.35;
}

.instruction-situation-head button {
  min-height: 42px;
  border: 1px solid var(--instruction-accent);
  border-radius: 8px;
  background: var(--instruction-deep);
  color: white;
  cursor: pointer;
  padding: 9px 13px;
  font-weight: 860;
}

.instruction-situation-head button:hover,
.instruction-situation-head button:focus-visible {
  background: var(--instruction-accent);
}

.instruction-demo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
}

.instruction-demo-grid.is-standalone {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.instruction-demo-card {
  display: grid;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--instruction-accent) 18%, var(--line));
  border-radius: 13px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--instruction-soft) 64%, white 36%), white 44%),
    white;
  padding: 12px;
}

.instruction-demo-card.is-standalone {
  --instruction-accent: var(--level-1-main);
  --instruction-deep: var(--level-1-deep);
  --instruction-soft: var(--level-1-soft);
  padding: 14px;
}

.instruction-demo-video {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #122;
  object-fit: cover;
}

.instruction-demo-copy {
  display: grid;
  gap: 10px;
}

.instruction-demo-card h3,
.instruction-demo-card h4 {
  margin: 4px 0 4px;
  color: var(--instruction-deep);
  font-size: 17px;
  line-height: 1.18;
}

.instruction-demo-card p {
  margin: 0;
  color: #394246;
  font-size: 13px;
  line-height: 1.4;
}

.instruction-full-recipe-only {
  border: 1px dashed color-mix(in srgb, var(--instruction-accent) 35%, var(--line));
  border-radius: 12px;
  background: var(--instruction-soft);
  color: var(--instruction-deep);
  padding: 12px;
  font-size: 13px;
  font-weight: 820;
}

.recipe-card.interactive-recipe-shell {
  --recipe-accent: var(--level-1-main);
  --recipe-deep: var(--level-1-deep);
  --recipe-soft: var(--level-1-soft);
  --recipe-cream: var(--level-1-cream);
  --recipe-warm: var(--level-1-warm);
  --recipe-border: var(--level-1-border);
  --recipe-muted: var(--level-1-muted);
  --recipe-progress: 0%;
  max-width: 760px;
  min-height: 0;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid var(--recipe-border);
  border-radius: 0 0 24px 24px;
  background: var(--recipe-warm);
  padding: 0;
  box-shadow: 0 18px 46px rgba(31, 37, 40, 0.12);
}

.recipe-card.interactive-recipe-shell.level-1 {
  --recipe-accent: var(--level-1-main);
  --recipe-deep: var(--level-1-deep);
  --recipe-soft: var(--level-1-soft);
  --recipe-cream: var(--level-1-cream);
  --recipe-warm: var(--level-1-warm);
  --recipe-border: var(--level-1-border);
  --recipe-muted: var(--level-1-muted);
}

.recipe-card.interactive-recipe-shell.level-2 {
  --recipe-accent: var(--level-2-main);
  --recipe-deep: var(--level-2-deep);
  --recipe-soft: var(--level-2-soft);
  --recipe-cream: var(--level-2-cream);
  --recipe-warm: var(--level-2-warm);
  --recipe-border: var(--level-2-border);
  --recipe-muted: var(--level-2-muted);
}

.recipe-card.interactive-recipe-shell.level-3 {
  --recipe-accent: var(--level-3-main);
  --recipe-deep: var(--level-3-deep);
  --recipe-soft: var(--level-3-soft);
  --recipe-cream: var(--level-3-cream);
  --recipe-warm: var(--level-3-warm);
  --recipe-border: var(--level-3-border);
  --recipe-muted: var(--level-3-muted);
}

.interactive-recipe-header {
  position: relative;
  display: grid;
  gap: 12px;
  overflow: hidden;
  border-top: 8px solid var(--recipe-accent);
  background:
    linear-gradient(135deg, rgba(241, 246, 236, 0.96), rgba(255, 253, 250, 0.98)),
    var(--recipe-soft);
  padding: 26px 30px 24px;
}

.interactive-recipe-header::after {
  content: "?";
  position: absolute;
  right: 22px;
  bottom: -26px;
  color: color-mix(in srgb, var(--recipe-deep) 12%, transparent);
  font-size: 132px;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
}

.interactive-recipe-meta {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.interactive-recipe-tag {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--recipe-muted);
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 820;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.interactive-recipe-tag.level {
  border-color: transparent;
  background: var(--recipe-accent);
  color: #fff;
}

.interactive-recipe-tag.level:hover,
.meta-chip.support:hover {
  filter: brightness(0.94);
}

.interactive-recipe-header h2 {
  position: relative;
  z-index: 1;
  max-width: 460px;
  color: var(--recipe-deep);
  font-size: 36px;
  line-height: 1.06;
}

.interactive-recipe-recognition {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-bottom: 1px solid var(--recipe-border);
  background: var(--recipe-warm);
}

.interactive-recipe-rec-block {
  display: grid;
  gap: 7px;
  min-height: 136px;
  border-left: 4px solid transparent;
  padding: 18px 20px;
}

.interactive-recipe-rec-block.signal {
  border-left-color: var(--orange);
  border-right: 1px solid var(--recipe-border);
}

.interactive-recipe-rec-block.meaning {
  border-left-color: var(--teal);
}

.interactive-recipe-rec-block.signal .section-label {
  color: var(--orange);
}

.interactive-recipe-rec-block.meaning .section-label {
  color: var(--teal-dark);
}

.interactive-recipe-rec-block p:last-child {
  margin-bottom: 0;
  color: #394246;
  font-size: 15px;
  line-height: 1.52;
}

.interactive-recipe-body {
  display: grid;
  gap: 22px;
  background: var(--recipe-warm);
  padding: 26px 30px 28px;
}

.interactive-recipe-step-tool {
  display: grid;
  gap: 10px;
}

.interactive-recipe-tabs {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 2px solid var(--recipe-border);
  border-radius: 12px 12px 0 0;
  background: #f4f2eb;
}

.interactive-recipe-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
  width: var(--recipe-progress);
  height: 3px;
  background: var(--recipe-deep);
  transition: width 0.22s ease;
}

.interactive-recipe-tab {
  display: grid;
  gap: 5px;
  min-height: 76px;
  place-items: center;
  border: 0;
  border-right: 2px solid var(--recipe-border);
  background: transparent;
  color: var(--recipe-muted);
  cursor: pointer;
  padding: 12px 8px 10px;
}

.interactive-recipe-tab:last-child {
  border-right: 0;
}

.interactive-recipe-tab:hover,
.interactive-recipe-tab:focus-visible {
  background: color-mix(in srgb, var(--recipe-soft) 72%, white);
}

.interactive-recipe-tab:focus-visible,
.interactive-recipe-nav button:focus-visible,
.interactive-recipe-back:focus-visible,
.interactive-recipe-done button:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
}

.interactive-recipe-tab.is-active {
  background: white;
  color: var(--recipe-deep);
}

.interactive-recipe-tab span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 2px solid var(--recipe-border);
  border-radius: 50%;
  background: white;
  color: var(--recipe-muted);
  font-size: 13px;
  font-weight: 860;
}

.interactive-recipe-tab strong {
  font-size: 13px;
  line-height: 1.16;
  text-align: center;
}

.interactive-recipe-tab.is-active span {
  border-color: var(--recipe-deep);
  background: var(--recipe-deep);
  color: white;
}

.interactive-recipe-tab.is-done span {
  border-color: var(--recipe-accent);
  background: var(--recipe-accent);
  color: transparent;
}

.interactive-recipe-tab.is-done span::before {
  content: "✓";
  color: white;
}

.interactive-recipe-panel {
  display: none;
  gap: 13px;
  border: 2px solid var(--recipe-border);
  border-top: 0;
  border-radius: 0 0 12px 12px;
  background: var(--recipe-warm);
  padding: 22px 24px;
}

.interactive-recipe-panel.is-visible {
  display: grid;
  animation: panelIn 0.2s ease both;
}

.interactive-recipe-panel h3 {
  margin-bottom: 0;
  color: var(--recipe-deep);
  font-size: 25px;
  line-height: 1.16;
}

.interactive-recipe-panel > p {
  margin-bottom: 0;
  color: #394246;
  font-size: 16px;
  line-height: 1.54;
}

.interactive-recipe-quote {
  display: grid;
  gap: 6px;
  margin: 0;
  border-left: 4px solid var(--orange);
  border-radius: 0 8px 8px 0;
  background: var(--recipe-cream);
  padding: 12px 15px;
}

.interactive-recipe-quote .section-label {
  color: var(--orange);
}

.interactive-recipe-quote span {
  color: var(--ink);
  font-size: 15px;
  font-style: italic;
  line-height: 1.5;
}

.interactive-recipe-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
  border-top: 1px solid var(--recipe-border);
  padding-top: 14px;
}

.interactive-recipe-nav button,
.interactive-recipe-done button {
  min-height: 38px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--recipe-muted);
  cursor: pointer;
  padding: 7px 10px;
  font-weight: 760;
}

.interactive-recipe-nav button:hover,
.interactive-recipe-done button:hover {
  background: var(--paper);
  color: var(--recipe-deep);
}

.interactive-recipe-nav button:disabled {
  cursor: default;
  opacity: 0.34;
}

.interactive-recipe-nav button.is-primary {
  border-color: var(--recipe-border);
  background: #f4f2eb;
  color: var(--recipe-deep);
}

.interactive-recipe-nav button.is-primary:hover,
.interactive-recipe-done button:hover {
  border-color: var(--recipe-accent);
  background: var(--recipe-soft);
}

.interactive-recipe-nav span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 720;
}

.interactive-recipe-say-avoid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.interactive-recipe-instruction-fit {
  display: grid;
  gap: 7px;
  border: 1px solid var(--recipe-border);
  border-left: 7px solid var(--recipe-accent);
  background: var(--recipe-soft);
  padding: 18px 20px;
}

.interactive-recipe-instruction-fit .section-label {
  color: var(--recipe-deep);
}

.interactive-recipe-instruction-fit p:last-child {
  margin-bottom: 0;
  color: #394246;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.5;
}

.interactive-recipe-demos {
  display: grid;
  gap: 14px;
  border: 1px solid var(--recipe-border);
  background: color-mix(in srgb, var(--recipe-soft) 62%, white);
  padding: 18px;
}

.interactive-recipe-demo-head {
  display: grid;
  gap: 7px;
}

.interactive-recipe-demo-head .section-label {
  color: var(--recipe-deep);
}

.interactive-recipe-demo-head h3 {
  max-width: 650px;
  margin-bottom: 0;
  color: var(--recipe-deep);
  font-size: 20px;
  line-height: 1.22;
}

.interactive-recipe-demo-grid {
  display: grid;
  gap: 12px;
}

.interactive-recipe-demo-card {
  display: grid;
  grid-template-columns: minmax(190px, 0.38fr) minmax(0, 1fr);
  gap: 14px;
  border: 1px solid var(--recipe-border);
  background: var(--recipe-warm);
  padding: 12px;
}

.interactive-recipe-video {
  width: 100%;
  max-height: 260px;
  border: 1px solid var(--recipe-border);
  background: #111;
  object-fit: contain;
}

.interactive-recipe-demo-copy {
  display: grid;
  align-content: start;
  gap: 10px;
}

.interactive-recipe-demo-copy h4 {
  margin-bottom: 0;
  color: var(--recipe-deep);
  font-size: 18px;
  line-height: 1.18;
}

.interactive-recipe-demo-copy > p:not(.task-demo-meta) {
  margin-bottom: 0;
  color: #394246;
  font-size: 14px;
  line-height: 1.44;
}

.interactive-recipe-demo-check {
  display: grid;
  gap: 4px;
  border-left: 5px solid var(--recipe-accent);
  background: var(--recipe-soft);
  padding: 10px 12px;
}

.interactive-recipe-demo-check strong {
  color: var(--recipe-deep);
  font-size: 12px;
  text-transform: uppercase;
}

.interactive-recipe-demo-check span {
  color: #394246;
  font-size: 14px;
  line-height: 1.44;
}

.interactive-recipe-demo-details {
  border-top: 1px solid var(--recipe-border);
  padding-top: 8px;
}

.interactive-recipe-demo-details summary {
  color: var(--recipe-deep);
  cursor: pointer;
  font-size: 13px;
  font-weight: 820;
}

.interactive-recipe-box {
  display: grid;
  align-content: start;
  gap: 8px;
  border-radius: 10px;
  padding: 18px;
}

.interactive-recipe-box.say {
  border: 1px solid #f0d9aa;
  background: #fef3dc;
}

.interactive-recipe-box.say .section-label {
  color: var(--orange);
}

.interactive-recipe-box.avoid {
  border: 1px solid #f5c4bf;
  background: #fdecea;
}

.interactive-recipe-box.avoid .section-label {
  color: var(--red);
}

.interactive-recipe-box p:last-child {
  margin-bottom: 0;
  color: #394246;
  font-size: 15px;
  line-height: 1.5;
}

.interactive-recipe-box.say p:last-child {
  color: #5c3a04;
  font-style: italic;
}

.interactive-recipe-box.avoid p:last-child {
  color: #7a1f17;
}

.interactive-recipe-check {
  display: grid;
  gap: 6px;
  border: 1px solid var(--recipe-border);
  border-left: 7px solid var(--recipe-accent);
  border-radius: 0;
  background: var(--recipe-soft);
  padding: 18px 20px;
}

.interactive-recipe-check .section-label {
  color: var(--recipe-deep);
}

.interactive-recipe-check p:last-child {
  margin-bottom: 0;
  color: var(--recipe-deep);
  font-size: 16px;
  font-weight: 680;
  line-height: 1.48;
}

.interactive-recipe-where {
  display: grid;
  gap: 10px;
}

.interactive-recipe-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.interactive-recipe-tags li {
  border: 1px solid var(--recipe-border);
  border-radius: 999px;
  background: var(--recipe-soft);
  color: var(--recipe-deep);
  padding: 7px 12px;
  font-size: 14px;
  font-weight: 650;
}

.interactive-recipe-back {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  border: 0;
  background: var(--recipe-accent);
  color: white;
  cursor: pointer;
  padding: 18px 30px;
  text-align: left;
}

.interactive-recipe-back:hover {
  background: var(--recipe-deep);
}

.interactive-recipe-back span {
  color: rgba(255, 255, 255, 0.78);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.interactive-recipe-back strong {
  color: white;
  font-size: 18px;
}

.interactive-recipe-done {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 18px 10px;
  text-align: center;
}

.interactive-recipe-done > span {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 50%;
  background: var(--recipe-accent);
  color: white;
  font-size: 24px;
  font-weight: 900;
}

.interactive-recipe-done p {
  max-width: 320px;
  margin-bottom: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.45;
}

.interactive-recipe-done button {
  margin-top: 4px;
  border-color: var(--level-1-border);
}

.recipe-card.interactive-recipe-shell.quick-use-recipe-shell {
  max-width: 820px;
  border: 1px solid var(--level-1-border);
  border-radius: 16px;
  background: #fffdfa;
  box-shadow: 0 14px 34px rgba(31, 37, 40, 0.1);
}

.quick-full-recipe,
.quick-recipe-preview {
  --quick-deep: var(--level-1-deep);
  --quick-main: var(--level-1-main);
  --quick-soft: var(--level-1-soft);
  --quick-border: var(--level-1-border);
  --quick-cream: var(--level-1-cream);
  --quick-warm: var(--level-1-warm);
  --quick-amber: var(--level-1-amber);
  display: grid;
  overflow: hidden;
  background: var(--quick-warm);
}

.quick-recipe-preview.level-2 {
  --quick-deep: var(--level-2-deep);
  --quick-main: var(--level-2-main);
  --quick-soft: var(--level-2-soft);
  --quick-border: var(--level-2-border);
  --quick-cream: var(--level-2-cream);
  --quick-warm: var(--level-2-warm);
  --quick-amber: var(--level-2-amber);
}

.quick-recipe-preview.level-3 {
  --quick-deep: var(--level-3-deep);
  --quick-main: var(--level-3-main);
  --quick-soft: var(--level-3-soft);
  --quick-border: var(--level-3-border);
  --quick-cream: var(--level-3-cream);
  --quick-warm: var(--level-3-warm);
  --quick-amber: var(--level-3-amber);
}

.quick-recipe-icon {
  display: grid;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--quick-main) 18%, white);
  color: var(--quick-deep);
}

.quick-recipe-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

.quick-full-header {
  position: relative;
  display: grid;
  gap: 10px;
  overflow: hidden;
  background:
    radial-gradient(circle at 92% 18%, rgba(255, 255, 255, 0.1), transparent 17%),
    linear-gradient(135deg, #114f35, #0f472f);
  color: white;
  padding: 20px 24px 19px;
}

.quick-full-header::after {
  content: "?";
  position: absolute;
  right: 32px;
  bottom: -24px;
  color: rgba(255, 255, 255, 0.1);
  font-size: 78px;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
}

.quick-full-meta {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.quick-full-pill,
.quick-full-level {
  border-radius: 6px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
}

.quick-full-pill {
  background: rgba(134, 167, 106, 0.72);
  color: white;
  padding: 6px 9px;
}

.quick-full-level {
  border: 1px solid rgba(255, 255, 255, 0.74);
  color: rgba(255, 255, 255, 0.92);
  padding: 6px 10px;
}

.quick-full-header h2 {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0;
  color: white;
  font-size: clamp(26px, 3.4vw, 34px);
  letter-spacing: -0.025em;
  line-height: 1.04;
}

.quick-full-header p {
  position: relative;
  z-index: 1;
  max-width: 660px;
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.34;
}

.quick-full-notice {
  display: grid;
  grid-template-columns: 34px minmax(96px, 0.2fr) minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  border-bottom: 1px solid var(--quick-border);
  background: white;
  padding: 14px 18px;
}

.quick-full-notice strong,
.quick-full-band strong,
.quick-full-say strong,
.quick-full-section-title strong,
.quick-full-avoid strong,
.quick-full-context strong {
  color: var(--quick-deep);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.07em;
  line-height: 1.15;
  text-transform: uppercase;
}

.quick-full-notice ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.quick-full-notice li {
  position: relative;
  color: var(--ink);
  font-size: 16px;
  font-weight: 680;
  line-height: 1.32;
  padding-left: 15px;
}

.quick-full-notice li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.58em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--quick-main);
}

.quick-full-band,
.quick-full-say {
  display: grid;
  grid-template-columns: 34px minmax(132px, 0.28fr) minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  margin: 14px 18px 0;
  border-radius: 12px;
  padding: 14px;
}

.quick-full-band.meaning {
  background: #f3f6fb;
}

.quick-full-band.meaning .quick-recipe-icon {
  background: #dfe9f8;
  color: #244c7a;
}

.quick-full-band p,
.quick-full-say p,
.quick-full-check p,
.quick-full-avoid p,
.quick-full-context p {
  margin: 0;
  color: #30383c;
  font-size: 16px;
  line-height: 1.45;
}

.quick-full-say {
  grid-template-columns: 34px minmax(96px, 0.2fr) minmax(0, 1fr);
  background: white;
  border: 1px solid #edf0e9;
}

.quick-full-say .quick-recipe-icon {
  background: #ddeddd;
  color: #125b37;
}

.quick-full-say p {
  color: #125b37;
  font-size: 16px;
  font-style: italic;
  font-weight: 850;
  line-height: 1.34;
}

.quick-full-two-up {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  margin: 12px 18px 0;
}

.quick-full-do,
.quick-full-check {
  display: grid;
  align-content: start;
  gap: 14px;
  min-height: 220px;
  border-radius: 12px;
  padding: 14px;
}

.quick-full-do {
  background: #fff8ef;
}

.quick-full-check {
  background: #f7faf5;
}

.quick-full-do .quick-recipe-icon {
  background: #f8d9a5;
  color: #bd6905;
}

.quick-full-check .quick-recipe-icon {
  background: #ddefd9;
  color: #2e7a4d;
}

.quick-full-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.quick-full-do ol {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: quick-step;
}

.quick-full-do li {
  position: relative;
  min-height: 38px;
  border-bottom: 1px solid rgba(199, 137, 22, 0.2);
  color: var(--ink);
  font-size: 16px;
  font-weight: 720;
  line-height: 1.38;
  padding: 0 0 9px 31px;
  counter-increment: quick-step;
}

.quick-full-do li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.quick-full-do li::before {
  content: counter(quick-step);
  position: absolute;
  left: 0;
  top: -1px;
  display: grid;
  width: 23px;
  height: 23px;
  place-items: center;
  border-radius: 50%;
  background: #dc7607;
  color: white;
  font-size: 11px;
  font-weight: 900;
}

.quick-full-check > p {
  border-bottom: 1px solid var(--quick-border);
  padding-bottom: 14px;
  font-weight: 760;
}

.quick-full-ask {
  display: grid;
  gap: 8px;
}

.quick-full-ask span {
  color: var(--quick-deep);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.quick-full-avoid {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin: 12px 18px 0;
  border-radius: 12px;
  background: #fff1ef;
  padding: 14px;
}

.quick-full-avoid .quick-recipe-icon {
  background: #ffd9d5;
  color: #c0372d;
}

.quick-full-avoid strong {
  color: #922a25;
}

.quick-full-avoid p {
  color: #61201c;
  font-weight: 680;
}

.quick-full-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(170px, 0.32fr);
  gap: 12px;
  align-items: center;
  border-top: 1px solid var(--quick-border);
  margin-top: 16px;
  padding: 14px 18px 18px;
}

.quick-full-context {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.quick-full-context .quick-recipe-icon {
  background: #e7f1de;
}

.quick-full-context p {
  font-size: 16px;
}

.quick-full-back {
  display: flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  background: #125b37;
  color: white;
  cursor: pointer;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 900;
}

.quick-full-back:hover,
.quick-full-back:focus-visible {
  background: #0f472f;
}

.quick-full-back:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
}

body.recipe-immersive-mode {
  background: #f5f8f4;
}

body.recipe-immersive-mode .app-shell {
  display: block;
  min-height: 100vh;
}

body.recipe-immersive-mode .sidebar,
body.recipe-immersive-mode .pilot-footer {
  display: none;
}

body.recipe-immersive-mode .main-panel {
  display: block;
  min-height: 100vh;
  padding: 0;
}

body.recipe-immersive-mode .view {
  padding: 0;
}

body.recipe-immersive-mode .workspace-grid {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
}

body.recipe-immersive-mode .recipe-card {
  width: 100%;
  max-width: none;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body.recipe-immersive-mode .recipe-card.interactive-recipe-shell.quick-use-recipe-shell {
  width: 100%;
  max-width: none;
  margin: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
}

.situation-recipe-page {
  --recipe-green: var(--recipe-deep);
  --recipe-green-2: var(--recipe-accent);
  --recipe-line: color-mix(in srgb, var(--recipe-border) 88%, white 12%);
  --recipe-amber: #dd850e;
  --recipe-blue: #1d61cc;
  --recipe-red: #d43e37;
  display: grid;
  grid-template-columns: 90px minmax(0, 1120px);
  justify-content: center;
  min-height: 100vh;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(246, 249, 245, 0.98) 240px),
    #f4f8f3;
  color: #1f2528;
}

.situation-rail {
  position: sticky;
  top: 0;
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 100vh;
  background:
    radial-gradient(circle at 35% 0%, rgba(255, 203, 25, 0.24), transparent 24%),
    radial-gradient(circle at 90% 13%, rgba(0, 187, 213, 0.26), transparent 28%),
    linear-gradient(180deg, #075a48 0%, #064236 42%, #043329 100%);
  color: white;
  padding: 20px 10px;
}

.situation-rail-mark {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  justify-self: center;
  margin-bottom: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 12px 30px rgba(3, 35, 51, 0.26);
}

.situation-rail-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 5px;
}

.situation-rail-item svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.situation-rail-item {
  display: grid;
  gap: 6px;
  min-height: 72px;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  font-size: 12px;
  font-weight: 780;
  line-height: 1.1;
  padding: 8px 4px;
  text-align: center;
}

.situation-rail-item:hover,
.situation-rail-item:focus-visible {
  background: rgba(255, 255, 255, 0.11);
}

.situation-rail-item:focus-visible {
  outline: 3px solid #df922f;
  outline-offset: 2px;
}

.situation-rail-item.is-active {
  background: rgba(134, 167, 106, 0.46);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.2),
    0 12px 24px rgba(0, 0, 0, 0.12);
}

.situation-recipe-main {
  min-width: 0;
  width: 100%;
}

.situation-recipe-hero {
  position: relative;
  display: grid;
  min-height: 206px;
  align-items: end;
  overflow: hidden;
  background:
    radial-gradient(circle at 74% 6%, color-mix(in srgb, var(--recipe-green-2) 42%, transparent), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--recipe-deep) 82%, black 18%) 0%, var(--recipe-deep) 58%, color-mix(in srgb, var(--recipe-green-2) 64%, var(--recipe-deep) 36%) 100%);
  color: white;
  padding: 28px 48px 22px;
}

.situation-hero-copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
  max-width: 1040px;
}

.situation-hero-pill {
  width: max-content;
  border-radius: 8px;
  background: color-mix(in srgb, var(--recipe-green-2) 72%, white 10%);
  color: white;
  font-size: 10px;
  font-weight: 920;
  letter-spacing: 0.1em;
  line-height: 1;
  padding: 7px 11px;
  text-transform: uppercase;
}

.situation-recipe-hero h2 {
  max-width: 1000px;
  margin: 0;
  color: white;
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 880;
  letter-spacing: -0.025em;
  line-height: 1.04;
}

.situation-recipe-hero p {
  max-width: 880px;
  margin: 0;
  color: rgba(255, 255, 255, 0.93);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.35;
}

.situation-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 4px;
}

.situation-hero-tags span,
.situation-hero-level-link {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  font-size: 12px;
  font-weight: 760;
  line-height: 1;
  padding: 8px 13px;
}

.situation-hero-tags span:first-child,
.situation-hero-level-link {
  border-color: rgba(255, 255, 255, 0.75);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.situation-hero-level-link:hover,
.quick-recipe-level:hover,
.quick-view-level:hover {
  background: rgba(255, 255, 255, 0.18);
}

.situation-leaf-mark {
  position: absolute;
  right: 38px;
  top: 18px;
  width: 170px;
  height: 170px;
  fill: none;
  opacity: 0.17;
  stroke: white;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 8;
}

.situation-match-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  border-bottom: 1px solid var(--recipe-line);
  background: rgba(255, 255, 255, 0.92);
}

.situation-match-strip > div {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  border-right: 1px solid var(--recipe-line);
  padding: 12px 48px;
}

.situation-match-strip > div:last-child {
  border-right: 0;
}

.situation-match-strip .quick-recipe-icon {
  background: color-mix(in srgb, var(--recipe-soft) 88%, white 12%);
  color: var(--recipe-green);
}

.situation-match-strip p {
  margin: 0;
  color: #30383c;
  font-size: 14px;
  line-height: 1.35;
}

.situation-match-strip strong {
  color: var(--recipe-green);
  font-weight: 880;
}

.situation-recipe-top-actions,
.situation-recipe-bottom-actions {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
  gap: 12px;
  padding: 16px 18px 0;
}

.situation-recipe-top-actions .situation-primary-action,
.situation-recipe-top-actions .situation-secondary-action,
.situation-recipe-bottom-actions .situation-primary-action,
.situation-recipe-bottom-actions .situation-secondary-action {
  min-height: 52px;
  border-radius: 12px;
}

.situation-recipe-top-actions .situation-primary-action,
.situation-recipe-bottom-actions .situation-primary-action {
  display: grid;
  gap: 2px;
  justify-items: center;
  align-content: center;
}

.situation-recipe-top-actions .situation-primary-action span,
.situation-recipe-bottom-actions .situation-primary-action span {
  max-width: 100%;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.78);
  font-size: 11px;
  font-weight: 760;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.situation-recipe-bottom-actions {
  padding: 0 22px 32px;
}

.situation-recipe-layout {
  display: grid;
  grid-template-columns: minmax(320px, 0.48fr) minmax(0, 0.52fr);
  gap: 16px;
  padding: 20px 22px 28px;
  align-items: start;
}

.situation-recipe-left {
  display: grid;
  order: 2;
  gap: 12px;
}

.situation-use-panel {
  order: 1;
}

.situation-info-card,
.use-block {
  border: 1px solid color-mix(in srgb, var(--recipe-line) 88%, white 12%);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 16px 42px rgba(20, 52, 34, 0.055);
}

.situation-info-card {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 20px;
}

.situation-info-card .quick-recipe-icon,
.use-block .quick-recipe-icon {
  width: 44px;
  height: 44px;
  border-radius: 13px;
}

.situation-info-card h3,
.use-block strong,
.situation-use-panel > h3 {
  margin: 0 0 10px;
  color: var(--recipe-green);
  font-size: 14px;
  font-weight: 920;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.situation-info-card p,
.situation-info-card li,
.use-block p,
.use-block li {
  color: #273238;
  font-size: 16px;
  line-height: 1.5;
}

.situation-info-card p,
.use-block p {
  margin: 0;
}

.situation-info-card ul,
.use-block ul,
.use-block ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.situation-info-card li,
.use-block li {
  position: relative;
  padding-left: 18px;
}

.situation-info-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--recipe-green-2);
}

.situation-info-card.meaning {
  background: linear-gradient(135deg, #f5f8ff, #fbfdff);
  border-color: #dce9ff;
}

.situation-info-card.meaning h3 {
  color: #1f62cc;
}

.situation-info-card.meaning .quick-recipe-icon {
  background: #e6efff;
  color: #1f62cc;
}

.situation-info-card.ask,
.situation-info-card.signs {
  background: linear-gradient(135deg, #fcfffb, #ffffff);
}

.situation-info-card.show-up {
  background: linear-gradient(135deg, #fbfdf8, #ffffff);
  border-color: color-mix(in srgb, var(--recipe-border) 82%, white 18%);
}

.situation-info-card.show-up .quick-recipe-icon {
  background: #e7f4e7;
  color: var(--recipe-green);
}

.situation-info-card.where {
  grid-template-columns: 44px max-content minmax(0, 1fr);
  align-items: center;
  padding: 14px 18px;
}

.situation-context-wide {
  grid-column: 1 / -1;
  order: 3;
}

.situation-info-card.where h3 {
  margin: 0;
}

.situation-inline-tags {
  display: flex;
  flex-wrap: wrap;
  grid-column: auto;
  justify-content: flex-start;
  gap: 7px;
  min-width: 0;
  max-width: 100%;
}

.situation-inline-tags span {
  max-width: 100%;
  border: 1px solid color-mix(in srgb, var(--recipe-border) 86%, white 14%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--recipe-soft) 82%, white 18%);
  color: var(--recipe-green);
  font-size: 12px;
  font-weight: 720;
  padding: 6px 10px;
  overflow-wrap: anywhere;
  white-space: nowrap;
}

.situation-info-card.reflect {
  background: #fcf9ff;
  border-color: #e5dafa;
}

.situation-info-card.reflect h3 {
  color: #6842d2;
}

.situation-info-card.reflect .quick-recipe-icon {
  background: #efe8ff;
  color: #6842d2;
}

.situation-info-card.task-demo {
  background: #fffdfa;
  border-color: color-mix(in srgb, var(--recipe-border) 82%, #f3dfbf 18%);
}

.situation-info-card.task-demo .quick-recipe-icon {
  background: #fde9c7;
  color: #d87600;
}

.situation-task-demo-list {
  display: grid;
  gap: 14px;
}

.situation-task-demo-card {
  display: grid;
  gap: 12px;
}

.situation-task-video {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--recipe-line);
  border-radius: 12px;
  background: #122;
  object-fit: cover;
}

.situation-task-demo-copy {
  display: grid;
  gap: 9px;
}

.situation-task-demo-copy h4 {
  margin: 0;
  color: var(--recipe-green);
  font-size: 17px;
  line-height: 1.2;
}

.situation-task-demo-copy p {
  font-size: 14px;
}

.situation-task-demo-copy .task-demo-meta {
  color: var(--recipe-muted);
  font-size: 12px;
  font-weight: 780;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.situation-task-demo-copy .task-demo-check,
.situation-task-demo-copy .task-safety-note {
  display: grid;
  gap: 4px;
  border-left: 3px solid var(--recipe-amber);
  background: var(--recipe-cream);
  padding: 10px 12px;
}

.situation-task-demo-copy .task-demo-check strong,
.situation-task-demo-copy .task-safety-note strong {
  color: #d87600;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.situation-task-demo-copy .task-demo-check span,
.situation-task-demo-copy .task-safety-note span,
.situation-task-demo-copy .task-demo-details,
.situation-task-demo-copy .task-demo-details li {
  color: #273238;
  font-size: 13px;
  line-height: 1.45;
}

.situation-task-demo-copy .task-demo-details summary {
  cursor: pointer;
  color: var(--recipe-green);
  font-size: 13px;
  font-weight: 820;
}

.situation-reflect-wide {
  grid-column: 1 / -1;
  order: 4;
}

.reflect-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.reflect-grid article {
  border-left: 3px solid #ddd1f4;
  padding-left: 12px;
}

.reflect-grid article:first-child {
  border-left: 3px solid #ddd1f4;
  padding-left: 12px;
}

.reflect-grid strong {
  display: block;
  margin-bottom: 5px;
  color: #6842d2;
  font-size: 13px;
  font-weight: 840;
}

.reflect-grid p {
  font-size: 13px;
  line-height: 1.45;
}

.situation-use-panel {
  position: static;
  display: grid;
  align-content: start;
  gap: 12px;
  border: 1px solid color-mix(in srgb, var(--recipe-line) 90%, white 10%);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 20px 58px rgba(31, 37, 40, 0.09);
  padding: 16px;
}

.situation-use-panel > h3 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-bottom: 1px solid var(--recipe-line);
  padding-bottom: 12px;
}

.situation-use-panel > h3 svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.use-block {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  padding: 18px;
}

.use-block.say {
  background: linear-gradient(135deg, #fbfffb, #ffffff);
}

.use-block.say p {
  color: var(--recipe-green);
  font-weight: 840;
  font-style: italic;
}

.use-block.do {
  background: linear-gradient(135deg, #fff8ec, #fffdf8);
  border-color: #f3dfbf;
}

.use-block.do strong,
.use-block.do .example-phrases b {
  color: #d87600;
}

.use-block.do strong {
  display: block;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.2;
  margin: 0 0 2px;
  text-transform: uppercase;
}

.use-block.do .quick-recipe-icon {
  background: #fde9c7;
  color: #d87600;
}

.use-block.do > div:last-child {
  display: grid;
  gap: 12px;
}

.use-block-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.use-block.do ol {
  counter-reset: situation-step;
  gap: 12px;
}

.use-block.do ol li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  column-gap: 14px;
  align-items: start;
  min-height: 26px;
  padding-left: 0;
  counter-increment: situation-step;
}

.use-block.do ol li::before {
  content: counter(situation-step);
  position: static;
  margin-top: -1px;
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 999px;
  background: #ed8506;
  color: white;
  font-size: 12px;
  font-weight: 900;
}

.example-phrases {
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.7);
  padding: 12px;
}

.example-phrases b {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.do-this-listen-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  border: 1px solid color-mix(in srgb, #d87600 54%, white 46%);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: #9a5700;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 860;
  letter-spacing: 0.04em;
  line-height: 1;
  padding: 8px 13px;
  text-transform: uppercase;
  white-space: nowrap;
}

.do-this-listen-button:hover,
.do-this-listen-button:focus-visible,
.do-this-listen-button.is-listening {
  border-color: #d87600;
  background: #ed8506;
  color: white;
}

.do-this-listen-button:focus-visible {
  outline: 3px solid rgba(216, 118, 0, 0.34);
  outline-offset: 2px;
}

.do-this-listen-button:disabled {
  border-color: var(--recipe-line);
  background: #f2f0ea;
  color: var(--recipe-muted);
  cursor: not-allowed;
}

.example-phrases li {
  font-size: 14px;
  line-height: 1.45;
}

.use-block.check {
  background: linear-gradient(135deg, #f4fbf4, #ffffff);
}

.use-block.avoid {
  background: linear-gradient(135deg, #fff1f0, #fff8f7);
  border-color: #f3cecb;
}

.use-block.avoid strong {
  color: #d2352f;
}

.use-block.avoid .quick-recipe-icon {
  background: #ffdeda;
  color: #d2352f;
}

.use-block.avoid li {
  padding-left: 28px;
}

.use-block.avoid li::before {
  content: "x";
  position: absolute;
  left: 0;
  top: 0;
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
  color: #d2352f;
  font-size: 15px;
  font-weight: 900;
}

.situation-use-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(130px, 0.56fr);
  gap: 10px;
}

.situation-primary-action,
.situation-secondary-action {
  min-height: 46px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 860;
  padding: 10px 14px;
}

.situation-primary-action {
  border: 0;
  background: var(--recipe-deep);
  color: white;
}

.situation-secondary-action {
  border: 1px solid #cfd8d2;
  background: white;
  color: #1f2528;
}

.situation-primary-action:hover,
.situation-primary-action:focus-visible {
  background: #083a26;
}

.situation-secondary-action:hover,
.situation-secondary-action:focus-visible {
  border-color: var(--recipe-green);
  color: var(--recipe-green);
}

.situation-primary-action:focus-visible,
.situation-secondary-action:focus-visible {
  outline: 3px solid #df922f;
  outline-offset: 2px;
}

body.quick-view-open {
  overflow: hidden;
}

.quick-view-overlay[hidden] {
  display: none;
}

.quick-view-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  min-height: 100vh;
  place-items: start center;
  overflow: auto;
  padding: 32px 20px;
}

.quick-view-backdrop {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(6, 55, 35, 0.16), rgba(250, 250, 247, 0.82)),
    rgba(250, 250, 247, 0.72);
  backdrop-filter: blur(8px);
}

.quick-view-card {
  position: relative;
  z-index: 1;
  width: min(720px, calc(100vw - 40px));
  overflow: hidden;
  border: 1px solid rgba(11, 79, 49, 0.18);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 28px 82px rgba(15, 36, 26, 0.24);
}

.quick-view-card:focus {
  outline: none;
}

.quick-view-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 74% 8%, rgba(44, 150, 86, 0.52), transparent 34%),
    linear-gradient(135deg, #064525 0%, #08713b 100%);
  color: white;
  padding: 28px 32px 24px;
}

.quick-view-hero > div {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
}

.quick-view-pill,
.quick-view-level {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
}

.quick-view-pill {
  background: rgba(139, 177, 104, 0.85);
  color: white;
  padding: 8px 13px;
}

.quick-view-level {
  border: 1px solid rgba(255, 255, 255, 0.7);
  color: white;
  padding: 8px 12px;
}

.quick-view-hero h2 {
  max-width: 560px;
  margin: 0;
  color: white;
  font-size: clamp(30px, 4.2vw, 42px);
  letter-spacing: -0.025em;
  line-height: 1.03;
}

.quick-view-hero p {
  margin: 0;
  color: rgba(255, 255, 255, 0.95);
  font-size: 16px;
  font-weight: 760;
  line-height: 1.35;
}

.quick-view-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.quick-view-tags span {
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: white;
  font-size: 12px;
  font-weight: 760;
  padding: 6px 11px;
}

.quick-view-leaf {
  position: absolute;
  right: 32px;
  top: 28px;
  width: 150px;
  height: 150px;
  fill: none;
  opacity: 0.16;
  stroke: white;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 8;
}

.quick-view-body {
  display: grid;
  gap: 14px;
  padding: 16px 20px 20px;
}

.quick-view-block,
.quick-view-why {
  border: 1px solid #dfe8df;
  border-radius: 12px;
  background: white;
  box-shadow: 0 12px 30px rgba(10, 50, 28, 0.04);
}

.quick-view-block {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 16px;
  padding: 14px;
}

.quick-view-block .quick-recipe-icon,
.quick-view-why .quick-recipe-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
}

.quick-view-block strong,
.quick-view-why summary span {
  display: block;
  margin-bottom: 8px;
  color: var(--recipe-green);
  font-size: 13px;
  font-weight: 920;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.quick-view-block p,
.quick-view-block li,
.quick-view-why p {
  margin: 0;
  color: #1f292f;
  font-size: 15px;
  line-height: 1.45;
}

.quick-view-block.say {
  background: #fbfffb;
}

.quick-view-block.say p {
  color: var(--recipe-green);
  font-size: 18px;
  font-style: italic;
  font-weight: 850;
}

.quick-view-block.do {
  background: #fff9f0;
  border-color: #f3dfbf;
}

.quick-view-block.do strong,
.quick-view-block.do li::before {
  color: #d87600;
}

.quick-view-block.do .quick-recipe-icon {
  background: #fde9c7;
  color: #d87600;
}

.quick-view-block.do ol {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: quick-view-step;
}

.quick-view-block.do li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  counter-increment: quick-view-step;
}

.quick-view-block.do li::before {
  content: counter(quick-view-step);
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 999px;
  background: #ed8506;
  color: white;
  font-size: 11px;
  font-weight: 900;
}

.quick-view-block.check {
  background: #f6fbf5;
}

.quick-view-block.show-up {
  background: #fbfdf8;
  border-color: #dce9d7;
}

.quick-view-block.show-up .quick-recipe-icon {
  background: #e7f4e7;
  color: var(--recipe-green);
}

.quick-view-block.show-up ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.quick-view-block.show-up li {
  position: relative;
  padding-left: 18px;
}

.quick-view-block.show-up li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--recipe-green-2);
}

.quick-view-block.avoid {
  background: #fff1f0;
  border-color: #f3cecb;
}

.quick-view-block.avoid strong {
  color: #d2352f;
}

.quick-view-block.avoid .quick-recipe-icon {
  background: #ffdeda;
  color: #d2352f;
}

.quick-view-block.avoid ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.quick-view-block.avoid li {
  position: relative;
  padding-left: 22px;
}

.quick-view-block.avoid li::before {
  content: "x";
  position: absolute;
  left: 0;
  top: 0;
  color: #d2352f;
  font-weight: 900;
}

.quick-view-why {
  background: #f5f8ff;
  border-color: #dfeafc;
}

.quick-view-why summary {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  cursor: pointer;
  padding: 14px;
  list-style: none;
}

.quick-view-why summary::-webkit-details-marker {
  display: none;
}

.quick-view-why summary::after {
  content: "⌄";
  color: #1f62cc;
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
}

.quick-view-why[open] summary::after {
  content: "⌃";
}

.quick-view-why .quick-recipe-icon {
  background: #e6efff;
  color: #1f62cc;
}

.quick-view-why summary span {
  margin: 0;
  color: #1f62cc;
}

.quick-view-why p {
  border-top: 1px solid #dfeafc;
  padding: 0 14px 14px 74px;
}

.quick-view-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: 12px;
}

.quick-view-primary,
.quick-view-secondary {
  min-height: 52px;
  border-radius: 9px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 880;
  padding: 12px 16px;
}

.quick-view-primary {
  border: 0;
  background: var(--recipe-deep);
  color: white;
}

.quick-view-secondary {
  border: 1px solid #cfd8d2;
  background: white;
  color: #1f2528;
}

.quick-view-primary:hover,
.quick-view-primary:focus-visible {
  background: #083a26;
}

.quick-view-secondary:hover,
.quick-view-secondary:focus-visible {
  border-color: var(--recipe-green);
  color: var(--recipe-green);
}

.quick-view-primary:focus-visible,
.quick-view-secondary:focus-visible,
.quick-view-why summary:focus-visible {
  outline: 3px solid #df922f;
  outline-offset: 2px;
}

.quick-recipe-preview {
  gap: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--quick-border) 80%, white 20%);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 42px rgba(31, 37, 40, 0.1);
  padding: 0;
}

.quick-recipe-header {
  position: relative;
  display: grid;
  gap: 12px;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 2%, color-mix(in srgb, var(--quick-main) 36%, transparent), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--quick-deep) 88%, black 12%) 0%, var(--quick-deep) 64%, color-mix(in srgb, var(--quick-main) 58%, var(--quick-deep) 42%) 100%);
  color: white;
  padding: 32px 36px 30px;
}

.quick-recipe-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.quick-recipe-label,
.quick-recipe-level {
  display: inline-flex;
  align-items: center;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
  line-height: 1;
  padding: 8px 12px;
  text-transform: uppercase;
}

.quick-recipe-label {
  background: color-mix(in srgb, var(--quick-main) 72%, white 8%);
  color: white;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

.quick-recipe-level {
  border: 1px solid rgba(255, 255, 255, 0.66);
  background: rgba(255, 255, 255, 0.08);
  color: white;
}

.quick-recipe-preview h3 {
  margin: 0;
  color: white;
  font-size: clamp(30px, 3.7vw, 48px);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1.04;
}

.quick-recipe-header > p {
  max-width: 680px;
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 17px;
  font-weight: 620;
  line-height: 1.35;
}

.quick-recipe-compact-body {
  display: grid;
  gap: 14px;
  padding: 26px 28px 30px;
}

.quick-recipe-row,
.quick-recipe-avoid {
  display: grid;
  grid-template-columns: 46px minmax(150px, 0.22fr) minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--quick-border) 82%, white 18%);
  border-radius: 14px;
  background: white;
  padding: 14px;
}

.quick-recipe-preview .quick-recipe-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
}

.quick-recipe-preview .quick-recipe-icon svg {
  width: 21px;
  height: 21px;
}

.quick-recipe-row strong,
.quick-recipe-section-head strong,
.quick-recipe-avoid strong,
.quick-recipe-context strong {
  color: var(--quick-deep);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.quick-recipe-row.meaning {
  background: #f3f6fb;
  border-color: #dbe7f5;
}

.quick-recipe-row.meaning .quick-recipe-icon {
  background: #dfe9f8;
  color: #244c7a;
}

.quick-recipe-row.say {
  background: linear-gradient(90deg, #f8fcf7, #ffffff);
  border: 1px solid #edf0e9;
}

.quick-recipe-row.say .quick-recipe-icon {
  background: #ddeddd;
  color: #125b37;
}

.quick-recipe-row p,
.quick-recipe-check p,
.quick-recipe-avoid p,
.quick-recipe-context span,
.quick-recipe-context div {
  margin: 0;
  color: #394246;
  font-size: 18px;
  line-height: 1.42;
}

.quick-recipe-row.say p {
  color: #125b37;
  font-size: 19px;
  font-style: italic;
  font-weight: 850;
}

.quick-recipe-two-column {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: 16px;
}

.quick-recipe-do,
.quick-recipe-check {
  display: grid;
  align-content: start;
  gap: 16px;
  border: 1px solid transparent;
  border-radius: 14px;
  padding: 18px;
}

.quick-recipe-do {
  border-color: #f4dfbf;
  background: linear-gradient(135deg, #fff8ef, #fffdf8);
}

.quick-recipe-check {
  border-color: #e0ebd9;
  background: linear-gradient(135deg, #f7faf5, #fffdf8);
}

.quick-recipe-section-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.quick-recipe-do ol {
  display: grid;
  gap: 11px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: preview-step;
}

.quick-recipe-do li {
  position: relative;
  color: var(--ink);
  font-size: 17px;
  font-weight: 740;
  line-height: 1.32;
  padding-left: 38px;
  counter-increment: preview-step;
}

.quick-recipe-do li::before {
  content: counter(preview-step);
  position: absolute;
  left: 0;
  top: -2px;
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border-radius: 50%;
  background: #dc7607;
  color: white;
  font-size: 13px;
  font-weight: 900;
}

.quick-recipe-avoid {
  grid-template-columns: 46px minmax(92px, 0.13fr) minmax(0, 1fr);
  background: linear-gradient(90deg, #fff1ef, #fff8f7);
  border-color: #f4ccc8;
}

.quick-recipe-avoid .quick-recipe-icon {
  background: #ffd9d5;
  color: #c0372d;
}

.quick-recipe-avoid strong {
  color: #922a25;
}

.quick-recipe-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
  border-top: 1px solid color-mix(in srgb, var(--quick-border) 82%, white 18%);
  padding-top: 16px;
}

.quick-recipe-context {
  display: grid;
  gap: 10px;
}

.quick-recipe-context div {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
}

.quick-recipe-context span {
  min-width: 130px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--quick-soft) 74%, white 26%);
  color: var(--quick-deep);
  font-weight: 760;
  padding: 8px 14px;
  text-align: center;
}

.quick-recipe-preview .translator-open-button {
  min-height: 52px;
  border-radius: 9px;
  font-size: 16px;
}

@media (max-width: 760px) {
  .instruction-fit-card {
    border-radius: 16px;
    padding: 18px 14px;
  }

  .instruction-fit-head {
    gap: 5px;
  }

  .instruction-fit-head h3 {
    font-size: 22px;
    line-height: 1.12;
  }

  .instruction-fit-head p {
    font-size: 14px;
    line-height: 1.35;
  }

  .instruction-fit-table,
  .instruction-helper-grid .instruction-fit-table,
  .instruction-overview-fit .instruction-fit-table {
    grid-template-columns: 1fr !important;
    gap: 10px;
  }

  .instruction-fit-row,
  .instruction-helper-grid .instruction-fit-row,
  .instruction-overview-fit .instruction-fit-row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 10px 12px;
    min-height: 0;
    border-top-width: 0;
    border-left: 5px solid var(--fit-accent);
    padding: 12px;
  }

  .fit-card-head {
    grid-row: 1 / span 2;
    grid-template-columns: 1fr;
    justify-items: center;
    align-content: start;
    gap: 7px;
  }

  .fit-icon {
    width: 36px;
    height: 36px;
  }

  .fit-icon svg {
    width: 18px;
    height: 18px;
  }

  .fit-kicker {
    justify-items: center;
    gap: 1px;
  }

  .fit-number {
    font-size: 15px;
  }

  .fit-label {
    font-size: 8px;
    letter-spacing: 0.06em;
  }

  .instruction-fit-row strong {
    margin-bottom: 3px;
    font-size: 15px;
    line-height: 1.14;
  }

  .fit-copy p {
    margin-bottom: 8px;
    font-size: 13px;
    line-height: 1.28;
  }

  .fit-detail-list {
    gap: 6px;
    padding-top: 8px;
  }

  .fit-detail {
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 6px;
    font-size: 12px;
    line-height: 1.28;
  }

  .fit-detail::before {
    width: 18px;
    height: 18px;
    font-size: 10px;
  }

  .fit-detail b {
    font-size: 12px;
  }

  .fit-detail em {
    overflow-wrap: anywhere;
  }

  .quick-recipe-header {
    gap: 8px;
    padding: 18px 18px 17px;
  }

  .quick-recipe-preview h3 {
    font-size: 24px;
    line-height: 1.08;
  }

  .quick-recipe-header > p {
    font-size: 14px;
  }

  .quick-recipe-compact-body {
    gap: 10px;
    padding: 12px;
  }

  .quick-recipe-row,
  .quick-recipe-avoid {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 8px 10px;
    align-items: center;
    padding: 12px;
  }

  .quick-recipe-preview .quick-recipe-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }

  .quick-recipe-preview .quick-recipe-icon svg {
    width: 17px;
    height: 17px;
  }

  .quick-recipe-row p,
  .quick-recipe-avoid p {
    grid-column: 1 / -1;
    font-size: 14px;
    line-height: 1.35;
  }

  .quick-recipe-row.say p {
    font-size: 15px;
  }

  .quick-recipe-do,
  .quick-recipe-check {
    gap: 12px;
    padding: 14px;
  }

  .quick-recipe-do li {
    font-size: 14px;
    line-height: 1.32;
    padding-left: 32px;
  }

  .quick-recipe-do li::before {
    width: 24px;
    height: 24px;
    font-size: 12px;
  }

  .quick-recipe-two-column {
    grid-template-columns: 1fr;
  }

  .quick-recipe-context span {
    min-width: 0;
    flex: 1 1 calc(50% - 8px);
    padding: 8px 10px;
  }
}

.recipe-summary-grid {
  display: grid;
  align-items: stretch;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.guidance-card {
  display: grid;
  align-content: start;
  gap: 10px;
  grid-template-rows:
    minmax(15px, auto)
    minmax(50px, auto)
    minmax(118px, auto)
    minmax(58px, auto)
    minmax(44px, auto)
    minmax(74px, auto);
  min-height: 250px;
  border: 1px solid var(--line);
  border-top: 6px solid var(--teal);
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  padding: 16px;
  text-align: left;
  box-shadow: 0 12px 30px rgba(31, 37, 40, 0.07);
}

.guidance-card.level-1 {
  border-top-color: var(--level-1-main);
}

.guidance-card.level-1 .guidance-card-title {
  color: var(--level-1-deep);
}

.guidance-card.level-1.is-active,
.guidance-card.level-1:hover {
  border-color: var(--level-1-main);
  background: var(--level-1-soft);
}

@media (max-width: 1240px) {
  .recipe-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.guidance-card.is-active {
  border-color: var(--teal);
  background: #f3fbf8;
}

.guidance-card:hover {
  border-color: var(--teal);
  background: #f8fdfb;
}

.guidance-card-kicker {
  color: var(--muted);
  font-size: 12px;
  font-weight: 820;
  text-transform: uppercase;
}

.guidance-card-title {
  color: var(--teal-dark);
  display: block;
  font-size: 20px;
  line-height: 1.16;
}

.guidance-card-line,
.guidance-card-check {
  display: grid;
  gap: 3px;
}

.guidance-card-line b,
.guidance-card-check b {
  color: var(--ink);
  font-size: 12px;
  text-transform: uppercase;
}

.guidance-card-line em,
.guidance-card-check em {
  color: #394246;
  font-style: normal;
  line-height: 1.36;
}

.guidance-card-phrase {
  border-left: 4px solid var(--orange);
  padding-left: 10px;
  color: var(--ink);
  font-weight: 760;
  line-height: 1.34;
}

@supports (grid-template-rows: subgrid) {
  .guidance-card {
    grid-row: span 6;
    grid-template-rows: subgrid;
  }
}

.recipe-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

.back-to-situation-button {
  min-height: 42px;
  flex-shrink: 0;
  border: 1px solid var(--teal);
  background: #ffffff;
  color: var(--teal-dark);
  cursor: pointer;
  font-weight: 780;
  padding: 9px 13px;
}

.back-to-situation-button:hover,
.back-to-situation-button:focus-visible {
  background: #f1faf7;
  border-color: var(--teal-dark);
}

.recipe-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.meta-chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  padding: 7px 9px;
  background: #f8faf9;
  color: #394246;
  font-size: 12px;
  font-weight: 760;
  text-transform: uppercase;
}

.meta-chip.support {
  color: white;
}

.meta-chip.support.level-1 {
  background: var(--level-1-main);
}

.meta-chip.support.level-2 {
  background: var(--violet);
}

.meta-chip.support.level-3 {
  background: var(--blue);
}

.recipe-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 22px;
}

.field {
  min-height: 118px;
  padding: 16px;
  border: 1px solid var(--line);
  background: #fffef9;
}

.field.signal {
  border-left: 6px solid var(--orange);
}

.field.meaning {
  border-left: 6px solid var(--teal);
}

.action-field {
  background: #f4fbf8;
}

.instruction-fit-recommendation {
  border-left: 6px solid var(--orange);
  background: #fffaf1;
}

.field.full {
  grid-column: 1 / -1;
}

.field p,
.field li,
.mini-panel li {
  color: #394246;
  line-height: 1.5;
}

.phrase-list,
.compact-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.context-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.phrase-list li {
  padding-left: 12px;
  border-left: 3px solid var(--orange);
}

.compact-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.compact-list li {
  border: 1px solid var(--line);
  padding: 7px 9px;
  background: #f8faf9;
  font-size: 14px;
  font-weight: 650;
}

.context-list li {
  border: 1px solid var(--line);
  padding: 7px 10px;
  background: #f8faf9;
  color: #394246;
  font-size: 14px;
  font-weight: 650;
}

.step-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 20px;
}

.task-demo-field {
  background: #f7fbfc;
}

.task-demo-list {
  display: grid;
  gap: 14px;
}

.task-demo-card {
  display: grid;
  grid-template-columns: minmax(220px, 0.38fr) minmax(0, 1fr);
  gap: 16px;
  border: 1px solid var(--line);
  background: var(--panel);
  padding: 14px;
}

.task-demo-media {
  display: grid;
  align-content: start;
}

.task-video {
  width: 100%;
  max-height: 390px;
  border: 1px solid var(--line);
  background: #111;
  object-fit: contain;
}

.task-demo-copy {
  display: grid;
  align-content: start;
  gap: 12px;
}

.task-demo-copy h3 {
  margin-bottom: 6px;
  color: var(--teal-dark);
}

.task-demo-meta {
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
  text-transform: uppercase;
}

.task-demo-check,
.task-safety-note {
  display: grid;
  gap: 4px;
  padding-left: 12px;
}

.task-demo-check {
  border-left: 4px solid var(--orange);
}

.task-safety-note {
  border-left: 4px solid var(--red);
  background: #fff7f5;
  padding: 10px 12px;
}

.task-demo-check span,
.task-safety-note {
  color: #394246;
  line-height: 1.45;
}

.task-safety-note span {
  color: #394246;
  line-height: 1.45;
}

.task-demo-details {
  border: 1px solid var(--line);
  background: #fffef9;
  padding: 10px 12px;
}

.task-demo-details summary {
  cursor: pointer;
  color: var(--teal-dark);
  font-weight: 760;
}

.task-note-group {
  display: grid;
  gap: 6px;
  margin-top: 12px;
}

.task-note-group ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding-left: 18px;
}

.task-note-group li {
  color: #394246;
  line-height: 1.42;
}

.background-card {
  display: grid;
  gap: 16px;
  border-top: 7px solid var(--blue);
  background: #f7fbfc;
}

.level-chooser .background-card {
  margin-top: 14px;
}

.background-card-head {
  display: grid;
  gap: 6px;
}

.background-card-head h3,
.background-card-head p {
  margin-bottom: 0;
}

.background-card-head h3 {
  color: var(--teal-dark);
  font-size: 24px;
}

.background-card-head p {
  color: #394246;
  line-height: 1.45;
}

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

.background-resource-body {
  display: grid;
  grid-template-columns: minmax(280px, 0.5fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 16px;
}

.background-video {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #111;
  object-fit: contain;
}

.background-resource-body p {
  color: #394246;
  line-height: 1.5;
}

.background-resource-body a {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  border: 1px solid var(--teal);
  padding: 8px 12px;
  color: var(--teal-dark);
  font-weight: 760;
  text-decoration: none;
}

.background-resource-body a:hover {
  background: #f1faf7;
}

.quick-levels,
.quick-categories,
.featured-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.quick-level,
.quick-categories button,
.featured-recipe {
  border: 1px solid var(--line);
  background: #fbfdfb;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}

.quick-level {
  display: grid;
  gap: 4px;
  padding: 13px;
}

.quick-level span {
  color: var(--muted);
  font-size: 13px;
}

.quick-categories {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.quick-categories button {
  min-height: 40px;
  padding: 9px 11px;
  font-weight: 700;
}

.featured-recipe {
  display: grid;
  gap: 5px;
  padding: 13px;
}

.featured-recipe span {
  color: var(--teal);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.featured-recipe small {
  color: var(--muted);
  line-height: 1.35;
}

.quick-level:hover,
.quick-categories button:hover,
.featured-recipe:hover {
  border-color: var(--teal);
  background: #f1faf7;
}

.stick-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.stick-grid article {
  display: grid;
  grid-template-columns: minmax(110px, 0.28fr) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  border: 1px solid var(--line);
  padding: 12px;
  background: #f8faf9;
}

.stick-grid strong {
  text-transform: capitalize;
  color: var(--teal-dark);
}

.stick-grid span,
.empty-note {
  color: #394246;
  line-height: 1.45;
}

.support-panel {
  display: grid;
  align-content: start;
  gap: 18px;
}

.mini-panel {
  padding: 18px;
}

.mindset-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding-left: 18px;
}

.level-focus h3 {
  margin-bottom: 10px;
}

.level-focus p {
  color: #394246;
  line-height: 1.5;
}

.focus-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.focus-strip span {
  border: 1px solid var(--line);
  padding: 7px 9px;
  background: #f8faf9;
  color: var(--ink);
  font-size: 13px;
  font-weight: 760;
}

.learning-flow {
  display: grid;
  gap: 10px;
}

.flow-step {
  padding: 12px;
  border: 1px solid var(--line);
  background: #f8faf9;
}

.flow-step strong {
  display: block;
  margin-bottom: 4px;
  text-transform: capitalize;
}

.brochure-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.brochure-panel {
  min-height: 360px;
  padding: 18px;
}

.brochure-panel.hero {
  background: var(--teal);
  color: white;
}

.brochure-panel.hero .eyebrow,
.brochure-panel.hero p {
  color: rgba(255, 255, 255, 0.85);
}

.pilot-version {
  font-weight: 760;
}

.action-panel .compact-recipe span {
  min-height: 24px;
}

.action-panel .compact-recipe .compact-fit-item {
  min-height: 0;
}

.compact-recipe {
  display: grid;
  gap: 4px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}

.compact-instruction-fit {
  border-left: 5px solid var(--orange);
  padding: 10px;
  background:
    linear-gradient(135deg, rgba(223, 146, 47, 0.15), rgba(4, 124, 131, 0.07)),
    #fffaf1;
}

.compact-fit-grid {
  display: grid;
  gap: 6px;
  margin-top: 4px;
}

.compact-fit-item {
  --fit-accent: var(--teal);
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  gap: 2px 8px;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--fit-accent) 34%, var(--line));
  background: white;
  padding: 7px;
}

.compact-fit-item.fit-routine {
  --fit-accent: var(--green);
}

.compact-fit-item.fit-changed {
  --fit-accent: var(--blue);
}

.compact-fit-item.fit-language {
  --fit-accent: var(--violet);
}

.compact-fit-item.fit-safety {
  --fit-accent: var(--red);
}

.compact-fit-item b {
  grid-row: span 2;
  display: grid;
  min-height: 34px;
  place-items: center;
  background: var(--fit-accent);
  color: white;
  font-size: 10px;
  text-transform: uppercase;
}

.compact-fit-item em {
  color: var(--teal-dark);
  font-style: normal;
  font-weight: 760;
  line-height: 1.1;
}

.compact-fit-item small {
  color: #394246;
  font-size: 11px;
  line-height: 1.2;
}

.compact-recipe:last-child {
  border-bottom: 0;
}

@media (max-width: 1100px) {
  body[data-view="recipes"] .app-shell,
  .app-shell,
  .start-hero,
  .start-decision-panel,
  .decision-aid,
  .translator-hero {
    grid-template-columns: 1fr;
  }

  .sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .recipe-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-view="recipes"] .jump-recipe-button {
    display: block;
  }

  .start-panel,
  .home-path-grid,
  .home-partner-row,
  .home-funding-row,
  .levels-grid,
  .chooser-options,
  .start-match-grid,
  .start-match-recognition,
  .start-match-action-grid,
  .start-support-reference,
  .brochure-grid,
  .use-flow,
  .stick-grid,
  .task-demo-card,
  .interactive-recipe-demo-card,
  .background-resource-body,
  .instruction-fit-table {
    grid-template-columns: 1fr;
  }

  .home-partner-row {
    gap: 12px;
  }

  .home-funding-row {
    justify-items: center;
    text-align: center;
  }

  .sidebar-logo-slot {
    display: none !important;
  }

  .sidebar-support-tools {
    display: none !important;
  }

  body[data-view="levels"] .sidebar-support-tools {
    display: grid !important;
  }

  .current-match-card {
    grid-template-columns: 1fr;
  }

  .current-match-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
  }

  .start-match-recognition {
    margin-left: 0;
    margin-right: 0;
  }

  .start-match-recognition .start-match-field:first-child {
    border-right: 0;
    border-bottom: 1px solid var(--level-1-border);
  }

  .quick-full-notice,
  .quick-full-band,
  .quick-full-say,
  .quick-full-two-up,
  .quick-full-footer,
  .quick-recipe-notice,
  .quick-recipe-band,
  .quick-recipe-say,
  .quick-recipe-action-row,
  .quick-recipe-footer {
    grid-template-columns: 1fr;
  }

  .quick-full-notice,
  .quick-full-band,
  .quick-full-say,
  .quick-full-avoid,
  .quick-full-footer {
    margin-left: 18px;
    margin-right: 18px;
  }

  .quick-full-notice ul {
    grid-template-columns: 1fr;
  }

  .sidebar-partner-tools,
  .secondary-tools {
    display: none;
  }

  .partner-home-block {
    display: grid;
  }

  .recipe-card.interactive-recipe-shell {
    max-width: none;
  }

  .instruction-helper-grid {
    grid-template-columns: 1fr;
  }

  .instruction-helper-grid .background-card {
    grid-template-columns: 1fr;
  }

  .instruction-helper-grid .background-card-head,
  .instruction-helper-grid .background-resource {
    grid-column: auto;
    grid-row: auto;
  }

  .instruction-helper-grid .instruction-fit-table {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .expanded-level-hero,
  .expanded-level-recognition.is-signal-strip,
  .expanded-step-grid,
  .expanded-level-outcome,
  .expanded-level-lower {
    grid-template-columns: 1fr;
  }

  .expanded-recognition-signals {
    grid-template-columns: 1fr;
  }

  .expanded-recognition-signal {
    min-height: 0;
    border-left: 0;
    border-top: 1px solid var(--profile-border);
    padding: 12px 0;
  }

  .expanded-recognition-signal:first-child {
    border-top: 0;
  }

  .expanded-level-hero {
    padding: 24px;
  }

  .expanded-level-portrait {
    justify-self: start;
    width: 150px;
  }

  .expanded-level-body,
  .expanded-level-recognition {
    padding-left: 24px;
    padding-right: 24px;
  }

  .interactive-recipe-header,
  .interactive-recipe-body,
  .interactive-recipe-back {
    padding-left: 20px;
    padding-right: 20px;
  }

  .interactive-recipe-header h2 {
    font-size: 31px;
  }

  .interactive-recipe-recognition,
  .interactive-recipe-say-avoid {
    grid-template-columns: 1fr;
  }

  .interactive-recipe-rec-block.signal {
    border-right: 0;
    border-bottom: 1px solid var(--level-1-border);
  }

  .start-logo-block {
    display: grid;
  }

  .support-path .use-flow article {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .support-path .use-flow article:last-child {
    border-bottom: 0;
  }

  .support-path .use-flow article:not(:last-child)::after {
    display: none;
  }

  .instruction-fit-row {
    min-height: auto;
  }

  .stick-grid article {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  body[data-view="start"] .sidebar-helper,
  body[data-view="start"] .sidebar-start-tools,
  body[data-view="start"] .filter-group,
  body[data-view="recipes"] .sidebar-helper,
  body[data-view="recipes"] .sidebar-situation-filter,
  body[data-view="recipes"] .sidebar-support-filter,
  body[data-view="recipes"] .sidebar-recipe-filter {
    display: none;
  }

  .main-panel,
  .sidebar {
    padding: 16px;
  }

  .mode-tabs {
    grid-template-columns: repeat(4, 1fr);
  }

  .recipe-body,
  .quick-categories,
  .recipe-list,
  .situation-grid,
  .start-recipe-grid,
  .home-path-grid,
  .recipe-summary-grid {
    grid-template-columns: 1fr;
  }

  .home-hero {
    padding: 18px;
  }

  .home-hero h1 {
    font-size: 32px;
  }

  .home-hero p:last-child {
    font-size: 16px;
  }

  .expanded-level-hero h3 {
    font-size: 32px;
  }

  .expanded-level-hero p:not(.interactive-level-kicker),
  .expanded-level-recognition p:not(.section-label) {
    font-size: 15px;
  }

  .expanded-level-body {
    gap: 18px;
    padding: 22px 18px 26px;
  }

  .expanded-level-recognition {
    padding: 18px;
  }

  .expanded-step-card {
    grid-template-columns: 38px minmax(0, 1fr);
    grid-template-rows: auto;
    padding: 14px;
    border-radius: 10px;
  }

  .expanded-step-number {
    width: 34px;
    height: 34px;
    font-size: 15px;
  }

  .expanded-step-focus {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .expanded-step-quote {
    grid-row: auto;
    padding: 12px;
  }

  .expanded-step-warning {
    grid-row: auto;
  }

  .expanded-chip-grid {
    grid-template-columns: 1fr;
  }

  .home-path-card {
    padding: 16px;
  }

  .situation-translator-card {
    gap: 12px;
    padding: 14px;
  }

  .translator-hero h2 {
    font-size: 27px;
  }

  .translator-process li {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 8px;
    min-height: 0;
    align-items: center;
    padding: 8px;
  }

  .translator-process {
    grid-template-columns: 1fr;
  }

  .translator-situations {
    padding: 10px;
  }

  .translator-situation-grid {
    grid-template-columns: 1fr;
  }

  .decision-aid {
    padding: 18px;
  }

  .decision-copy h2 {
    font-size: 31px;
  }

  .start-intro {
    gap: 7px;
    padding: 11px 12px;
  }

  .start-intro p {
    font-size: 13px;
  }

  .situation-button,
  .guidance-card {
    min-height: 0;
  }

  .guidance-card {
    grid-row: auto;
    grid-template-rows: none;
  }

  .start-hero-copy {
    padding: 22px;
  }

  .start-hero-copy {
    padding: 22px;
  }

  .start-hero-copy h2 {
    font-size: 29px;
  }

  .start-match-panel {
    gap: 14px;
    padding: 14px;
  }

  .start-match-head h3 {
    font-size: 36px;
  }

  .start-match-field,
  .start-match-action-grid .start-match-field {
    min-height: 0;
    padding: 16px;
  }

  .start-match-field p,
  .start-match-recognition .start-match-field p {
    font-size: 16px;
  }

  .start-rule {
    padding: 20px;
  }

  .recipe-head,
  .topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .interactive-recipe-tabs {
    grid-template-columns: 1fr;
    border-radius: 12px;
  }

  .interactive-recipe-tab {
    grid-template-columns: 28px minmax(0, 1fr);
    min-height: 54px;
    justify-items: start;
    border-right: 0;
    border-bottom: 1px solid var(--level-1-border);
    padding: 10px 12px;
  }

  .interactive-recipe-tab:last-child {
    border-bottom: 0;
  }

  .interactive-recipe-tab strong {
    text-align: left;
  }

  .interactive-recipe-panel {
    margin-top: 10px;
    border-top: 1px solid var(--level-1-border);
    border-radius: 12px;
    padding: 18px;
  }

  .interactive-recipe-panel h3 {
    font-size: 22px;
  }

  .interactive-recipe-nav {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .interactive-recipe-nav span {
    order: -1;
    width: 100%;
    text-align: center;
  }

  .interactive-recipe-nav button {
    flex: 1;
  }

  .interactive-recipe-back {
    align-items: flex-start;
    flex-direction: column;
  }

  .quick-full-header {
    padding: 28px 22px 26px;
  }

  .quick-full-header h2 {
    font-size: 28px;
  }

  .quick-full-header p {
    font-size: 16px;
  }

  .quick-full-meta {
    align-items: flex-start;
    flex-direction: column;
  }

  .quick-full-notice,
  .quick-full-band,
  .quick-full-say,
  .quick-full-do,
  .quick-full-check,
  .quick-full-avoid,
  .quick-full-footer {
    padding: 18px;
  }

  .quick-full-band,
  .quick-full-say,
  .quick-full-two-up,
  .quick-full-avoid,
  .quick-full-footer {
    margin-top: 14px;
  }

  .quick-full-say p {
    font-size: 16px;
  }

  .quick-recipe-preview h3 {
    font-size: 28px;
  }

  .quick-recipe-notice,
  .quick-recipe-band,
  .quick-recipe-say,
  .quick-recipe-do,
  .quick-recipe-check,
  .quick-recipe-avoid {
    padding: 12px;
  }
}

@media (max-width: 860px) {
  .situation-recipe-layout {
    grid-template-columns: 1fr;
  }

  .situation-use-panel {
    position: static;
  }

  .situation-info-card.where {
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: start;
  }

  .situation-info-card.where h3 {
    margin-bottom: 10px;
  }

  .situation-inline-tags {
    flex-wrap: wrap;
    grid-column: 2;
    justify-content: flex-start;
  }

  .reflect-grid {
    grid-template-columns: 1fr;
  }

  .reflect-grid article,
  .reflect-grid article:first-child {
    border-left: 3px solid #ddd1f4;
    padding-left: 12px;
  }
}

@media (max-width: 720px) {
  .situation-recipe-page {
    grid-template-columns: 1fr;
  }

  .situation-rail {
    position: static;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    min-height: 0;
    padding: 10px;
  }

  .situation-rail-mark {
    width: 46px;
    height: 46px;
    margin: 0;
  }

  .situation-rail-item {
    min-height: 54px;
    font-size: 11px;
  }

  .situation-rail-item svg {
    width: 20px;
    height: 20px;
  }

  .situation-recipe-hero {
    min-height: 190px;
    padding: 24px 24px 20px;
  }

  .situation-leaf-mark {
    right: 10px;
    width: 120px;
    height: 120px;
  }

  .situation-match-strip,
  .situation-use-actions {
    grid-template-columns: 1fr;
  }

  .situation-recipe-top-actions,
  .situation-recipe-bottom-actions {
    grid-template-columns: 1fr;
    padding: 12px 12px 0;
  }

  .situation-match-strip > div {
    border-right: 0;
    border-bottom: 1px solid var(--recipe-line);
    padding: 12px 24px;
  }

  .situation-match-strip > div:last-child {
    border-bottom: 0;
  }

}

@media (max-width: 620px) {
  body.recipe-immersive-mode .main-panel {
    min-width: 0;
  }

  .situation-rail {
    grid-template-columns: 44px repeat(4, minmax(0, 1fr));
  }

  .situation-rail-mark {
    display: grid;
    width: 40px;
    height: 40px;
  }

  .situation-recipe-hero {
    min-height: 0;
    padding: 20px 18px 18px;
  }

  .situation-recipe-hero h2 {
    font-size: 28px;
  }

  .situation-recipe-hero p {
    font-size: 14px;
  }

  .situation-hero-tags {
    gap: 6px;
  }

  .situation-hero-tags span {
    font-size: 11px;
    padding: 7px 10px;
  }

  .situation-leaf-mark {
    display: none;
  }

  .situation-recipe-layout {
    gap: 12px;
    padding: 14px;
  }

  .situation-info-card,
  .use-block {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 12px;
    padding: 14px;
  }

  .situation-info-card.where {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .situation-info-card.where h3 {
    margin-bottom: 10px;
  }

  .situation-inline-tags {
    flex-wrap: wrap;
    grid-column: 2;
    justify-content: flex-start;
  }

  .situation-info-card .quick-recipe-icon,
  .use-block .quick-recipe-icon {
    width: 38px;
    height: 38px;
  }

  .situation-info-card p,
  .situation-info-card li,
  .use-block p,
  .use-block li {
    font-size: 15px;
  }

  .situation-use-panel {
    padding: 12px;
  }
}

@media (max-width: 720px) {
  .quick-view-overlay {
    align-items: start;
    padding: 16px 12px;
  }

  .quick-view-card {
    width: min(100%, 520px);
    max-height: calc(100vh - 32px);
  }

  .quick-view-hero {
    padding: 22px 20px 20px;
  }

  .quick-view-hero h2 {
    font-size: 30px;
  }

  .quick-view-leaf {
    display: none;
  }

  .quick-view-body {
    padding: 14px;
  }

  .quick-view-block,
  .quick-view-why summary {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 12px;
  }

  .quick-view-why summary {
    grid-template-columns: 40px minmax(0, 1fr) auto;
  }

  .quick-view-block.say p {
    font-size: 16px;
  }

  .quick-view-block.avoid ul,
  .quick-view-actions {
    grid-template-columns: 1fr;
  }

  .quick-view-why p {
    padding-left: 66px;
  }
}

/* Unified WLife tool skin: the whole app now uses the same workplace-aid frame as recipe pages. */
@media (min-width: 721px) {
  body:not(.recipe-immersive-mode) {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(242, 248, 240, 0.94) 260px),
      #f3f7f1;
  }

  body:not(.recipe-immersive-mode) .app-shell,
  body:not(.recipe-immersive-mode)[data-view="recipes"] .app-shell {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr);
    min-height: 100vh;
  }

  body:not(.recipe-immersive-mode) .sidebar {
    position: sticky;
    top: 0;
    align-self: start;
    display: grid;
    align-content: start;
    gap: 12px;
    height: 100vh;
    max-height: 100vh;
    min-height: 100vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 0;
    background:
      radial-gradient(circle at 35% 0%, rgba(255, 203, 25, 0.24), transparent 24%),
      radial-gradient(circle at 90% 13%, rgba(0, 187, 213, 0.26), transparent 28%),
      linear-gradient(180deg, #075a48 0%, #064236 42%, #043329 100%);
    color: white;
    padding: 20px 10px;
  }

  body:not(.recipe-immersive-mode) .brand-block {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 0;
    margin-bottom: 16px;
  }

  body:not(.recipe-immersive-mode) .brand-block > div {
    display: none;
  }

  body:not(.recipe-immersive-mode) .brand-mark {
    width: 52px;
    height: 52px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.62);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 12px 30px rgba(3, 35, 51, 0.26);
    padding: 5px;
  }

  body:not(.recipe-immersive-mode) .mode-tabs {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    border: 0;
    background: transparent;
  }

  body:not(.recipe-immersive-mode) .mode-tab {
    display: grid;
    gap: 6px;
    min-height: 72px;
    place-items: center;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: rgba(255, 255, 255, 0.9);
    font-size: 12px;
    font-weight: 780;
    line-height: 1.1;
    padding: 8px 4px;
    text-align: center;
  }

  body:not(.recipe-immersive-mode) .mode-tab-icon {
    display: grid;
    place-items: center;
  }

  body:not(.recipe-immersive-mode) .mode-tab-icon svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
  }

  body:not(.recipe-immersive-mode) .mode-tab:hover,
  body:not(.recipe-immersive-mode) .mode-tab:focus-visible {
    background: rgba(255, 255, 255, 0.11);
  }

  body:not(.recipe-immersive-mode) .mode-tab.is-active {
    background: rgba(134, 167, 106, 0.46);
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.2),
      0 12px 24px rgba(0, 0, 0, 0.12);
  }

  body:not(.recipe-immersive-mode) .secondary-tools,
  body:not(.recipe-immersive-mode) .sidebar-logo-slot,
  body:not(.recipe-immersive-mode) .sidebar-start-tools,
  body:not(.recipe-immersive-mode) .sidebar-support-tools,
  body:not(.recipe-immersive-mode) .filter-group {
    display: none !important;
  }

  body:not(.recipe-immersive-mode) .main-panel {
    min-width: 0;
    padding: 0;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(242, 248, 240, 0.9) 340px),
      #f3f7f1;
  }

  body:not(.recipe-immersive-mode) .view.is-active {
    width: min(100%, 1160px);
    margin: 0 auto;
    padding: 24px;
  }

  body:not(.recipe-immersive-mode)[data-view="start"] #startView .topbar {
    display: flex;
  }

  body:not(.recipe-immersive-mode) .topbar {
    min-height: 0;
    margin: 0 0 18px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--level-1-border) 72%, white 28%);
    border-radius: 22px;
    background:
      radial-gradient(circle at 84% 10%, rgba(134, 167, 106, 0.3), transparent 34%),
      linear-gradient(135deg, #064c38 0%, #0b693f 64%, #5f814f 100%);
    color: white;
    padding: 26px 32px;
    box-shadow: 0 22px 56px rgba(28, 71, 45, 0.12);
  }

  body:not(.recipe-immersive-mode) .topbar .eyebrow,
  body:not(.recipe-immersive-mode) .topbar .view-subtitle {
    color: rgba(255, 255, 255, 0.78);
  }

  body:not(.recipe-immersive-mode) .topbar h2 {
    color: white;
    font-size: clamp(30px, 4vw, 50px);
    font-weight: 880;
    letter-spacing: -0.04em;
  }

  body:not(.recipe-immersive-mode) .home-panel,
  body:not(.recipe-immersive-mode) .start-panel,
  body:not(.recipe-immersive-mode) .levels-grid,
  body:not(.recipe-immersive-mode) .level-chooser,
  body:not(.recipe-immersive-mode) .brochure-grid,
  body:not(.recipe-immersive-mode) .workspace-grid {
    max-width: none;
  }

  body:not(.recipe-immersive-mode) .home-hero {
    overflow: hidden;
    border: 0;
    border-radius: 22px;
    background:
      radial-gradient(circle at 84% 8%, rgba(134, 167, 106, 0.3), transparent 34%),
      linear-gradient(135deg, #064c38 0%, #0b693f 64%, #5f814f 100%);
    color: white;
    padding: 34px 38px;
    box-shadow: 0 22px 56px rgba(28, 71, 45, 0.12);
  }

  body:not(.recipe-immersive-mode) .home-hero .eyebrow,
  body:not(.recipe-immersive-mode) .home-hero .home-hero-body,
  body:not(.recipe-immersive-mode) .home-hero .home-hero-body p,
  body:not(.recipe-immersive-mode) .home-hero p:last-child {
    color: rgba(255, 255, 255, 0.82);
  }

  body:not(.recipe-immersive-mode) .home-hero h1 {
    color: white;
    font-size: clamp(34px, 4.6vw, 58px);
    letter-spacing: -0.04em;
  }

  body:not(.recipe-immersive-mode) .start-hero {
    gap: 0;
    overflow: hidden;
    border: 0;
    border-radius: 22px;
    background:
      radial-gradient(circle at 84% 8%, rgba(134, 167, 106, 0.3), transparent 34%),
      linear-gradient(135deg, #064c38 0%, #0b693f 64%, #5f814f 100%);
    color: white;
    box-shadow: 0 22px 56px rgba(28, 71, 45, 0.12);
  }

  body:not(.recipe-immersive-mode) .start-hero-copy {
    padding: 34px 38px;
  }

  body:not(.recipe-immersive-mode) .start-hero-copy .eyebrow,
  body:not(.recipe-immersive-mode) .start-hero-copy p {
    color: rgba(255, 255, 255, 0.82);
  }

  body:not(.recipe-immersive-mode) .start-hero-copy h2 {
    color: white;
    font-size: clamp(32px, 4vw, 52px);
    font-weight: 880;
    letter-spacing: -0.04em;
  }

  body:not(.recipe-immersive-mode) .start-rule {
    margin: 22px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    backdrop-filter: blur(10px);
  }

  body:not(.recipe-immersive-mode) .start-rule .section-label {
    color: rgba(255, 255, 255, 0.72);
  }

  body:not(.recipe-immersive-mode) .start-rule span {
    color: rgba(255, 255, 255, 0.82);
  }

  body:not(.recipe-immersive-mode) .home-path-card,
  body:not(.recipe-immersive-mode) .start-situation-picker,
  body:not(.recipe-immersive-mode) .start-decision-panel,
  body:not(.recipe-immersive-mode) .start-match-panel,
  body:not(.recipe-immersive-mode) .level-chooser,
  body:not(.recipe-immersive-mode) .level-card,
  body:not(.recipe-immersive-mode) .partner-home-block,
  body:not(.recipe-immersive-mode) .brochure-panel {
    border: 1px solid color-mix(in srgb, var(--level-1-border) 82%, white 18%);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 16px 42px rgba(20, 52, 34, 0.055);
  }

  body:not(.recipe-immersive-mode) .home-path-card,
  body:not(.recipe-immersive-mode) .start-situation-picker,
  body:not(.recipe-immersive-mode) .start-decision-panel {
    border-top: 7px solid var(--level-1-main);
  }

  body:not(.recipe-immersive-mode) .partner-home-block {
    border: 1px solid color-mix(in srgb, var(--level-1-border) 78%, white 22%);
    border-radius: 18px;
    background:
      linear-gradient(135deg, rgba(134, 167, 106, 0.09), rgba(255, 255, 255, 0.96)),
      rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 42px rgba(20, 52, 34, 0.06);
  }

  body:not(.recipe-immersive-mode) .start-situation-picker {
    grid-column: 1 / -1;
    gap: 14px;
    padding: 18px;
  }

  body:not(.recipe-immersive-mode) .start-recipe-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  body:not(.recipe-immersive-mode) .quick-recipe-preview {
    gap: 0;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--quick-border) 82%, white 18%);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.96);
    padding: 0;
  }

  body:not(.recipe-immersive-mode) .quick-recipe-header {
    position: relative;
    overflow: hidden;
    background:
      radial-gradient(circle at 86% 4%, color-mix(in srgb, var(--quick-main) 36%, transparent), transparent 34%),
      linear-gradient(135deg, color-mix(in srgb, var(--quick-deep) 84%, black 16%) 0%, var(--quick-deep) 66%, color-mix(in srgb, var(--quick-main) 58%, var(--quick-deep) 42%) 100%);
    color: white;
    padding: 26px 28px 24px;
  }

  body:not(.recipe-immersive-mode) .quick-recipe-label {
    background: color-mix(in srgb, var(--quick-main) 75%, white 8%);
  }

  body:not(.recipe-immersive-mode) .quick-recipe-level {
    border-color: rgba(255, 255, 255, 0.68);
    background: rgba(255, 255, 255, 0.1);
    color: white;
  }

  body:not(.recipe-immersive-mode) .quick-recipe-preview h3 {
    color: white;
    font-size: clamp(28px, 3.4vw, 40px);
    font-weight: 880;
    letter-spacing: -0.03em;
  }

  body:not(.recipe-immersive-mode) .quick-recipe-header > p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 16px;
  }

  body:not(.recipe-immersive-mode) .quick-recipe-notice,
  body:not(.recipe-immersive-mode) .quick-recipe-band,
  body:not(.recipe-immersive-mode) .quick-recipe-say,
  body:not(.recipe-immersive-mode) .quick-recipe-action-row,
  body:not(.recipe-immersive-mode) .quick-recipe-avoid,
  body:not(.recipe-immersive-mode) .quick-recipe-footer {
    margin: 14px 18px 0;
  }

  body:not(.recipe-immersive-mode) .quick-recipe-footer {
    margin-bottom: 18px;
  }

  body:not(.recipe-immersive-mode) .home-path-card.is-primary {
    border-color: color-mix(in srgb, var(--orange) 45%, var(--level-1-border));
    border-top-color: var(--orange);
    background:
      linear-gradient(135deg, rgba(223, 146, 47, 0.12), rgba(134, 167, 106, 0.08)),
      rgba(255, 255, 255, 0.96);
  }

  body:not(.recipe-immersive-mode) .home-path-card h2,
  body:not(.recipe-immersive-mode) .start-recipe-button span,
  body:not(.recipe-immersive-mode) .level-card h3 {
    color: var(--level-1-deep);
  }

  body:not(.recipe-immersive-mode) .home-path-card button,
  body:not(.recipe-immersive-mode) .partner-brochure-button,
  body:not(.recipe-immersive-mode) .level-card-action,
  body:not(.recipe-immersive-mode) .translator-open-button,
  body:not(.recipe-immersive-mode) .current-match-action.primary {
    border-color: #075a48;
    background: #075a48;
    color: white;
  }

  body:not(.recipe-immersive-mode) .home-path-card button:not(:hover),
  body:not(.recipe-immersive-mode) .home-path-card:not(.is-primary) button:not(:hover) {
    border-color: #075a48;
  }

  body:not(.recipe-immersive-mode) .home-path-card:not(.is-primary) button {
    background: white;
    color: #075a48;
  }

  body:not(.recipe-immersive-mode) .home-path-card button:hover,
  body:not(.recipe-immersive-mode) .partner-brochure-button:hover,
  body:not(.recipe-immersive-mode) .level-card-action:hover {
    background: #0b6d52;
    color: white;
  }

  body:not(.recipe-immersive-mode) .start-recipe-button,
  body:not(.recipe-immersive-mode) .level-button,
  body:not(.recipe-immersive-mode) .category-button,
  body:not(.recipe-immersive-mode) .recipe-button,
  body:not(.recipe-immersive-mode) .chooser-card,
  body:not(.recipe-immersive-mode) .guidance-card {
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.92);
  }

  body:not(.recipe-immersive-mode) .start-recipe-button.is-selected,
  body:not(.recipe-immersive-mode) .start-recipe-button:hover,
  body:not(.recipe-immersive-mode) .level-button.is-active,
  body:not(.recipe-immersive-mode) .category-button.is-active,
  body:not(.recipe-immersive-mode) .recipe-button.is-active,
  body:not(.recipe-immersive-mode) .guidance-card.is-active {
    border-color: var(--level-1-main);
    background: var(--level-1-soft);
    box-shadow: inset 5px 0 0 var(--level-1-main);
  }

  body:not(.recipe-immersive-mode) .start-recipe-button.level-1 span {
    color: var(--level-1-deep);
  }

  body:not(.recipe-immersive-mode) .start-recipe-button.level-2 span {
    color: var(--level-2-deep);
  }

  body:not(.recipe-immersive-mode) .start-recipe-button.level-3 span {
    color: var(--level-3-deep);
  }

  body:not(.recipe-immersive-mode) .start-recipe-button.level-2.is-selected,
  body:not(.recipe-immersive-mode) .start-recipe-button.level-2:hover {
    border-color: var(--level-2-main);
    background: var(--level-2-soft);
    box-shadow: inset 5px 0 0 var(--level-2-main);
  }

  body:not(.recipe-immersive-mode) .start-recipe-button.level-3.is-selected,
  body:not(.recipe-immersive-mode) .start-recipe-button.level-3:hover {
    border-color: var(--level-3-main);
    background: var(--level-3-soft);
    box-shadow: inset 5px 0 0 var(--level-3-main);
  }

  body:not(.recipe-immersive-mode) .pilot-footer {
    width: min(100%, 1160px);
    margin: 24px auto 0;
    padding: 16px 24px 24px;
  }

  body:not(.recipe-immersive-mode) .instruction-helper-grid {
    display: grid;
  }
}

@media (max-width: 720px) {
  .task-responsibility-card {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 16px;
  }

  .task-responsibility-card h3 {
    font-size: 19px;
  }

  .task-responsibility-prompts {
    grid-template-columns: 1fr;
  }

  .mode-tab-icon {
    display: none;
  }
}

@media (max-width: 720px) {
  body:not(.recipe-immersive-mode) {
    background: #f3f7f1;
  }

  body:not(.recipe-immersive-mode) .app-shell,
  body:not(.recipe-immersive-mode)[data-view="recipes"] .app-shell {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 100vh;
  }

  body:not(.recipe-immersive-mode) .sidebar {
    position: static;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    border: 0;
    background:
      radial-gradient(circle at 18% 0%, rgba(255, 203, 25, 0.24), transparent 28%),
      radial-gradient(circle at 88% 8%, rgba(0, 187, 213, 0.28), transparent 30%),
      linear-gradient(135deg, #075a48 0%, #064236 45%, #07545a 100%);
    color: white;
    padding: 10px 10px 12px;
    height: auto;
    max-height: none;
    overflow: visible;
  }

  body:not(.recipe-immersive-mode) .brand-block {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 0;
  }

  body:not(.recipe-immersive-mode) .brand-block > div {
    display: none;
  }

  body:not(.recipe-immersive-mode) .brand-mark {
    width: 52px;
    height: 52px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.62);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 12px 30px rgba(3, 35, 51, 0.2);
    padding: 5px;
  }

  body:not(.recipe-immersive-mode) .mode-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    border: 0;
    background: transparent;
  }

  body:not(.recipe-immersive-mode) .mode-tab {
    display: grid;
    gap: 5px;
    min-height: 62px;
    place-items: center;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: rgba(255, 255, 255, 0.92);
    font-size: 11px;
    font-weight: 820;
    line-height: 1.08;
    padding: 7px 3px;
    text-align: center;
  }

  body:not(.recipe-immersive-mode) .mode-tab-icon {
    display: grid;
    place-items: center;
  }

  body:not(.recipe-immersive-mode) .mode-tab-icon svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
  }

  body:not(.recipe-immersive-mode) .mode-tab.is-active {
    background: rgba(134, 167, 106, 0.5);
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.22),
      0 10px 20px rgba(0, 0, 0, 0.12);
  }

  body:not(.recipe-immersive-mode) .sidebar-helper,
  body:not(.recipe-immersive-mode) .sidebar-logo-slot,
  body:not(.recipe-immersive-mode) .sidebar-start-tools,
  body:not(.recipe-immersive-mode) .sidebar-support-tools,
  body:not(.recipe-immersive-mode) .secondary-tools,
  body:not(.recipe-immersive-mode) .filter-group {
    display: none !important;
  }

  body:not(.recipe-immersive-mode) .main-panel {
    min-width: 0;
    padding: 0;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(242, 248, 240, 0.94) 300px),
      #f3f7f1;
  }

  body:not(.recipe-immersive-mode) .view.is-active {
    width: 100%;
    margin: 0;
    padding: 14px;
  }

  body:not(.recipe-immersive-mode) .topbar,
  body:not(.recipe-immersive-mode) .home-hero,
  body:not(.recipe-immersive-mode) .start-hero {
    overflow: hidden;
    border: 0;
    border-radius: 20px;
    background:
      radial-gradient(circle at 84% 8%, rgba(134, 167, 106, 0.28), transparent 34%),
      linear-gradient(135deg, #064c38 0%, #0b693f 64%, #5f814f 100%);
    color: white;
    box-shadow: 0 18px 40px rgba(28, 71, 45, 0.12);
  }

  body:not(.recipe-immersive-mode) .topbar {
    display: flex;
    margin: 0 0 14px;
    padding: 22px 20px;
  }

  body:not(.recipe-immersive-mode) .topbar .eyebrow,
  body:not(.recipe-immersive-mode) .topbar .view-subtitle,
  body:not(.recipe-immersive-mode) .home-hero .eyebrow,
  body:not(.recipe-immersive-mode) .home-hero .home-hero-body,
  body:not(.recipe-immersive-mode) .home-hero .home-hero-body p,
  body:not(.recipe-immersive-mode) .start-hero-copy .eyebrow,
  body:not(.recipe-immersive-mode) .start-hero-copy p {
    color: rgba(255, 255, 255, 0.82);
  }

  body:not(.recipe-immersive-mode) .topbar h2,
  body:not(.recipe-immersive-mode) .home-hero h1,
  body:not(.recipe-immersive-mode) .start-hero-copy h2 {
    color: white;
    font-weight: 880;
    letter-spacing: -0.035em;
  }

  body:not(.recipe-immersive-mode) .topbar h2,
  body:not(.recipe-immersive-mode) .home-hero h1 {
    font-size: 34px;
  }

  body:not(.recipe-immersive-mode) .start-hero-copy h2 {
    font-size: 31px;
  }

  body:not(.recipe-immersive-mode) .home-hero,
  body:not(.recipe-immersive-mode) .start-hero-copy {
    padding: 22px 20px;
  }

  body:not(.recipe-immersive-mode) .home-path-card,
  body:not(.recipe-immersive-mode) .start-situation-picker,
  body:not(.recipe-immersive-mode) .start-decision-panel,
  body:not(.recipe-immersive-mode) .start-match-panel,
  body:not(.recipe-immersive-mode) .level-chooser,
  body:not(.recipe-immersive-mode) .level-card,
  body:not(.recipe-immersive-mode) .partner-home-block,
  body:not(.recipe-immersive-mode) .brochure-panel {
    border: 1px solid color-mix(in srgb, var(--level-1-border) 82%, white 18%);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 16px 42px rgba(20, 52, 34, 0.055);
  }

  body:not(.recipe-immersive-mode) .start-recipe-grid,
  body:not(.recipe-immersive-mode) .home-path-grid,
  body:not(.recipe-immersive-mode) .levels-grid,
  body:not(.recipe-immersive-mode) .chooser-options,
  body:not(.recipe-immersive-mode) .workspace-grid {
    grid-template-columns: 1fr;
  }

  body:not(.recipe-immersive-mode) .start-recipe-button,
  body:not(.recipe-immersive-mode) .level-button,
  body:not(.recipe-immersive-mode) .category-button,
  body:not(.recipe-immersive-mode) .recipe-button,
  body:not(.recipe-immersive-mode) .chooser-card,
  body:not(.recipe-immersive-mode) .guidance-card {
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.94);
  }

  body:not(.recipe-immersive-mode) .pilot-footer {
    padding: 14px;
  }

  .situation-recipe-bottom-actions {
    grid-template-columns: 1fr;
    padding: 4px 14px 26px;
  }
}

body:not(.recipe-immersive-mode) .start-recipe-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  border: 1px solid var(--line);
  border-left-width: 5px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.94);
  padding: 10px 12px;
  box-shadow: none;
}

body:not(.recipe-immersive-mode) .start-recipe-button,
body:not(.recipe-immersive-mode) .start-recipe-button.is-selected,
body:not(.recipe-immersive-mode) .start-recipe-button:hover,
body:not(.recipe-immersive-mode) .start-recipe-button:focus-visible {
  min-height: 30px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

body:not(.recipe-immersive-mode) .start-recipe-level-link {
  width: auto;
  min-width: 64px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  font-size: 11px;
  line-height: 1.25;
  padding: 4px 8px;
  white-space: nowrap;
}

body:not(.recipe-immersive-mode) .start-recipe-option.level-1 {
  border-left-color: var(--level-1-main);
}

body:not(.recipe-immersive-mode) .start-recipe-option.level-2 {
  border-left-color: var(--level-2-main);
}

body:not(.recipe-immersive-mode) .start-recipe-option.level-3 {
  border-left-color: var(--level-3-main);
}

body:not(.recipe-immersive-mode) .start-recipe-option.level-1.is-selected,
body:not(.recipe-immersive-mode) .start-recipe-option.level-1:has(.start-recipe-button:hover),
body:not(.recipe-immersive-mode) .start-recipe-option.level-1:has(.start-recipe-button:focus-visible) {
  border-color: var(--level-1-main);
  background: var(--level-1-soft);
}

body:not(.recipe-immersive-mode) .start-recipe-option.level-2.is-selected,
body:not(.recipe-immersive-mode) .start-recipe-option.level-2:has(.start-recipe-button:hover),
body:not(.recipe-immersive-mode) .start-recipe-option.level-2:has(.start-recipe-button:focus-visible) {
  border-color: var(--level-2-main);
  background: var(--level-2-soft);
}

body:not(.recipe-immersive-mode) .start-recipe-option.level-3.is-selected,
body:not(.recipe-immersive-mode) .start-recipe-option.level-3:has(.start-recipe-button:hover),
body:not(.recipe-immersive-mode) .start-recipe-option.level-3:has(.start-recipe-button:focus-visible) {
  border-color: var(--level-3-main);
  background: var(--level-3-soft);
}

@media print {
  body {
    background: white;
  }

  .sidebar,
  .topbar .print-button,
  .pilot-footer,
  .brochure-note-block,
  #startView,
  #levelsView,
  #recipesView {
    display: none !important;
  }

  .app-shell,
  .main-panel,
  .view.is-active {
    display: block;
  }

  .main-panel {
    padding: 0;
  }

  .screen-title {
    display: none;
  }

  .print-title {
    display: inline;
  }

  .brochure-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  .brochure-panel {
    min-height: 250px;
    box-shadow: none;
    break-inside: avoid;
  }

  .compact-recipe strong {
    font-size: 11px;
    line-height: 1.15;
  }
}