/* Approved cream studio palette, shared by the portal's existing routes. */
@font-face {
  font-family: SUIT;
  src: url('/assets/fonts/SUIT-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

body.cream-site {
  --sand: #e5d8ad;
  --cream: #fcfde9;
  --ink: #20231f;
  --text: #414b3d;
  --muted: #5b6250;
  --coral: #ed7294;
  --teal: #327f73;
  --yellow: #f7bd45;
  --line: #d8ddc0;
  --line-soft: #d8ddc0;
  --canvas: #e5d8ad;
  --surface: #f1f3d9;
  --paper: #fcfde9;
  --blue: #327f73;
  --blue-hover: #27685e;
  --blue-soft: #e9edcc;
  --ai-surface: #edf7dd;
  --ai-surface-hover: #e0edc9;
  --ai-ink: #3c5537;
  --ai-chip: #f6fbee;
  --ai-line: #bacda1;
  --ai-badge: #cce3ae;
  --selected: #ffd5df;
  --shadow: 0 12px 30px -22px #43472b55;
  margin: 0;
  background: var(--sand);
  color: var(--ink);
  font-family: SUIT, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Malgun Gothic', sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

body.cream-site ::selection { background: #f3aac0; color: var(--ink); }
body.cream-site :focus-visible { outline: 3px solid #275eaa; outline-offset: 4px; }
body.cream-site :is(a, button, input, summary) { touch-action: manipulation; }
body.cream-site :is(a, button) { transition: background-color .18s ease, color .18s ease, box-shadow .18s ease; }
body.cream-site [hidden] { display: none !important; }
body.cream-site .skip-link { border: 0; border-radius: 24px; background: var(--ink); box-shadow: var(--shadow); }

body.cream-site .studio-shell {
  width: calc(100% - 32px);
  max-width: 1380px;
  margin: 16px auto 24px;
  border: 1px solid #e3e5bd;
  border-radius: 28px;
  background: var(--cream);
  box-shadow: 0 26px 60px -42px #59512e90;
}
body.cream-site .site-header { border-radius: 28px 28px 0 0; background: transparent; }
body.cream-site .header-inner {
  width: 100%;
  max-width: none;
  min-height: 64px;
  gap: 18px;
  margin: 0;
  padding: 9px 24px;
}
body.cream-site .brand { flex: 0 1 auto; gap: 10px; font-size: 17px; font-weight: 850; letter-spacing: -.04em; }
body.cream-site .brand strong { font-weight: 850; }
body.cream-site .brand-mark {
  flex-basis: 38px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: var(--coral);
  color: var(--cream);
}
body.cream-site .brand-mark svg { width: 26px; height: 26px; }
body.cream-site .header-actions { flex: 0 1 auto; gap: 7px; margin-left: auto; }
body.cream-site .all-tools-link {
  min-height: 44px;
  padding: 8px 13px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: transparent;
  box-shadow: none;
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
}
body.cream-site .all-tools-link:hover { background: var(--blue-soft); }
body.cream-site .all-tools-link[aria-current='page'] { border-color: #e5a3b7; background: #f8d4df; color: #87314c; }
body.cream-site .all-tools-link:active { transform: none; box-shadow: none; }
body.cream-site .site-layout,
body.cream-site:is([data-view='lesson'], [data-view='introduction']) .site-layout {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 24px 20px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
body.cream-site main { padding-top: 18px; }
body.cream-site:is([data-view='lesson'], [data-view='introduction'], [data-view='tips'], [data-view='resource'], [data-view='tools']) main { padding-top: 8px; }
body.cream-site .site-footer {
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
  margin: 12px 24px 0;
  padding: 16px 0 19px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
}
body.cream-site main > .site-footer { margin-right: 0; margin-left: 0; }
body.cream-site .site-footer > span { font-weight: 800; }
body.cream-site .noscript { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }

/* Link slots stay still while magnetic-tools.js moves only their artwork. */
body.cream-site :is(.tool-nav, .tool-overview-tools) {
  --dock-size: 46px;
  grid-template-columns: repeat(16, minmax(0, 1fr));
  gap: 26px 7px;
  min-width: 0;
  padding-top: 28px;
}
body.cream-site .tool-nav { padding-bottom: 15px; border-bottom: 1px solid var(--line); }
body.cream-site .tool-link { min-height: 44px; gap: 7px; border-radius: 13px; }
body.cream-site .tool-icon {
  width: var(--dock-size, 46px);
  height: var(--dock-size, 46px);
  padding: calc(var(--dock-size, 46px) * .18);
  border: 1px solid #d5d9bb;
  border-radius: 13px;
  background: #f8fae0;
  transition: background-color .18s ease, box-shadow .18s ease;
}
body.cream-site .tool-logo { width: 100%; height: 100%; }
body.cream-site .tool-name { max-width: 84px; min-height: 28px; color: var(--muted); font-size: 11px; font-weight: 650; line-height: 1.3; }
body.cream-site .tool-link:hover .tool-icon { background: #fae0b7; box-shadow: 0 5px 12px -9px #795c3680; }
body.cream-site .tool-link[aria-current='page'] .tool-icon,
body.cream-site .tool-link[data-category='canva'][aria-current='page'] .tool-icon { border-color: #de7692; background: #ffd5df; box-shadow: 0 4px 9px -5px #a5516877; }
body.cream-site .tool-link[aria-current='page'] .tool-name { color: var(--ink); font-weight: 850; }
body.cream-site .tool-link:active .tool-icon { transform: none; box-shadow: none; }
body.cream-site .tool-overview { padding: 8px 0 18px; }
body.cream-site .tool-overview-tools { margin-top: 12px; padding-bottom: 8px; }

/* Compact, horizontal practice rows keep the existing catalog metadata. */
body.cream-site .folder-heading { gap: 12px; margin-bottom: 12px; }
body.cream-site .folder-title { gap: 9px; }
body.cream-site .folder-title h1 { font-size: 22px; font-weight: 850; line-height: 1.35; letter-spacing: -.035em; }
body.cream-site .folder-count { font-size: 11px; font-weight: 650; }
body.cream-site .guide-list { gap: 7px; }
body.cream-site .guide-row {
  grid-template-columns: 38px minmax(0, 1fr) auto 16px;
  gap: 11px;
  min-height: 64px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: none;
}
body.cream-site .guide-row:hover { background: #e5eac3; }
body.cream-site .guide-row:active { transform: none; box-shadow: none; }
body.cream-site .guide-icon { width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--cream); color: var(--teal); }
body.cream-site .guide-icon svg { width: 21px; height: 21px; }
body.cream-site .intro-entry-icon img { width: 25px; height: 25px; }
body.cream-site .guide-copy { gap: 3px; }
body.cream-site .guide-copy h2 { font-size: 14px; font-weight: 800; line-height: 1.4; letter-spacing: -.025em; }
body.cream-site .guide-description { font-size: 12px; line-height: 1.5; }
body.cream-site .guide-facts { gap: 5px; max-width: 265px; }
body.cream-site .guide-facts > span { padding: 2px 6px; border-color: var(--line); border-radius: 5px; background: var(--cream); font-size: 11px; }
body.cream-site .guide-arrow { width: 16px; height: 16px; }
body.cream-site .guide-row--ai { background: var(--ai-surface); }
body.cream-site .guide-row--ai:hover { background: var(--ai-surface-hover); }
body.cream-site .guide-row--ai .guide-icon { background: #d5e8b9; color: #31542d; }
body.cream-site .guide-row--ai .guide-facts > span { border-color: var(--ai-line); background: var(--ai-chip); color: var(--ai-ink); }
body.cream-site .guide-ai-label { margin-inline-start: 6px; padding: 2px 5px; border: 0; border-radius: 4px; background: var(--ai-badge); color: #31542d; font-size: 9px; font-weight: 850; }
body.cream-site .guide-empty { padding: 24px 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
body.cream-site .guide-heading { margin-bottom: 14px; }
body.cream-site :is(.guide-heading h1, .tool-overview h1) { font-size: 26px; font-weight: 850; letter-spacing: -.035em; }
body.cream-site .hand-stars svg { fill: #fff0a5; stroke: #75412b; stroke-width: 1.3; }
body.cream-site .hand-stars svg + svg { fill: #fff0a5; stroke: #75412b; }

/* Guide materials and the practice steps share the first viewport. */
body.cream-site .learner-guide { max-width: 1100px; }
body.cream-site .back-link { min-height: 44px; margin-bottom: 2px; font-size: 12px; font-weight: 650; }
body.cream-site .lesson-intro { margin-bottom: 18px; }
body.cream-site .learner-guide h1 { margin-bottom: 6px; font-size: clamp(24px, 2.4vw, 29px); font-weight: 850; line-height: 1.3; letter-spacing: -.035em; }
body.cream-site .lesson-description { max-width: 850px; font-size: 14px; line-height: 1.65; }
body.cream-site .lesson-actions { gap: 7px; margin-top: 11px; }
body.cream-site .button { min-height: 44px; padding: 10px 17px; border: 1px solid var(--ink); border-radius: 26px; background: var(--ink); color: var(--cream); box-shadow: none; font-size: 12px; font-weight: 800; }
body.cream-site .button:hover { border-color: var(--teal); background: var(--teal); }
body.cream-site .button-secondary { border-color: var(--line); background: var(--surface); color: var(--ink); }
body.cream-site .button-secondary:hover { border-color: #c9d4a8; background: #e5eac3; }
body.cream-site .button:active { transform: none; box-shadow: none; }
body.cream-site .lesson-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 26px; align-items: start; }
body.cream-site .lesson-resources { grid-column: 2; grid-row: 1; min-width: 0; display: grid; gap: 12px; }
body.cream-site .lesson-instructions { grid-column: 1; grid-row: 1; min-width: 0; }
body.cream-site .lesson-instructions > h2 { margin: 0 0 10px; font-size: 17px; font-weight: 800; }
body.cream-site .lesson-flow { grid-template-columns: minmax(0, 1fr); gap: 0; margin-bottom: 16px; }
body.cream-site .lesson-flow li { display: grid; grid-template-columns: 25px minmax(0, 1fr); gap: 2px 10px; padding: 10px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
body.cream-site .lesson-flow li:first-child { padding-top: 0; }
body.cream-site .lesson-flow li:last-child { border-bottom: 0; padding-bottom: 0; }
body.cream-site .lesson-flow li > span { grid-row: 1 / 3; width: 25px; height: 25px; margin: 0; border: 0; border-radius: 50%; background: #e7edc9; color: #365c4e; font-weight: 850; }
body.cream-site .lesson-flow strong, body.cream-site .lesson-flow p { grid-column: 2; }
body.cream-site .lesson-flow strong { font-size: 14px; font-weight: 800; }
body.cream-site .lesson-flow p { margin-top: 0; font-size: 13px; line-height: 1.65; }
body.cream-site .lesson-mini-section { margin-bottom: 14px; }
body.cream-site .lesson-mini-section h2 { margin-bottom: 8px; font-size: 16px; font-weight: 800; }
body.cream-site .lesson-resources > .lesson-mini-section { margin: 0; }
body.cream-site .code-downloads { grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 7px; }
body.cream-site .code-download { min-height: 58px; gap: 9px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); box-shadow: none; }
body.cream-site .code-download:hover { background: #e5eac3; }
body.cream-site .code-download:active { transform: none; box-shadow: none; }
body.cream-site .code-download > svg { flex-shrink: 0; color: var(--teal); }
body.cream-site .code-download strong { font-size: 14px; font-weight: 800; }
body.cream-site :is(.setup-guide, .prompt-block, .lesson-checks) { border: 1px solid var(--line); border-radius: 17px; background: var(--cream); }
body.cream-site .setup-guide > summary { min-height: 48px; padding: 13px 17px; background: var(--surface); font-weight: 800; }
body.cream-site .setup-steps { gap: 15px; padding: 17px 22px 17px 39px; }
body.cream-site .setup-steps li { font-size: 14px; line-height: 1.75; }
body.cream-site .setup-properties { border-radius: 10px; background: var(--surface); }
body.cream-site .setup-properties > div { padding: 9px 11px; }
body.cream-site .setup-sources { padding: 11px 17px; }
body.cream-site .prompt-toolbar { gap: 10px; padding: 9px 13px; border-bottom: 1px solid var(--line); background: var(--surface); }
body.cream-site .lesson-resources .prompt-toolbar h2 { margin: 0; font-size: 15px; }
body.cream-site .lesson-resource--prompt .prompt-toolbar { background: #e7edcf; }
body.cream-site .lesson-resource--prompt .copy-prompt { background: var(--teal); border-color: var(--teal); color: var(--cream); }
body.cream-site .lesson-resource--prompt .copy-prompt:hover { background: var(--blue-hover); border-color: var(--blue-hover); }
body.cream-site .copy-prompt { min-width: 108px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 24px; background: var(--cream); color: var(--ink); box-shadow: none; font-size: 11px; font-weight: 800; }
body.cream-site .copy-prompt:hover { background: #e5eac3; }
body.cream-site .copy-prompt:active { transform: none; box-shadow: none; }
body.cream-site .copy-prompt.is-copied, body.cream-site .lesson-resource--prompt .copy-prompt.is-copied { border-color: #bacda1; background: #deefc9; color: #2f542b; }
body.cream-site .prompt-help { padding: 8px 13px 0; font-size: 12px; line-height: 1.6; }
body.cream-site .prompt-details summary { min-height: 46px; padding: 12px 16px; }
body.cream-site .prompt-details summary:hover,
body.cream-site .prompt-details[open] summary { background: #f1f3d980; }
body.cream-site .prompt-block pre { max-height: 310px; padding: 14px; background: var(--cream); font-size: 14px; line-height: 1.7; scrollbar-color: #a9b98b var(--cream); scrollbar-width: thin; }
body.cream-site .example-url-fallback input { min-height: 44px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
body.cream-site .lesson-checks { gap: 6px; padding: 12px 16px; background: var(--surface); }
body.cream-site .lesson-checks label { font-size: 14px; }
body.cream-site .lesson-checks input { border: 1px solid #8b9b78; border-radius: 5px; background-color: var(--cream); }
body.cream-site .lesson-checks input:checked { border-color: var(--teal); background-color: var(--teal); }
body.cream-site .lesson-finish { border: 1px solid var(--line); border-radius: 13px; overflow: hidden; }
body.cream-site .lesson-finish > summary { min-height: 46px; padding: 12px 15px; background: var(--surface); font-size: 14px; font-weight: 800; cursor: pointer; }
body.cream-site .lesson-finish > summary::marker { color: var(--teal); }
body.cream-site .lesson-finish > summary:focus-visible { outline-offset: -4px; }
body.cream-site .lesson-finish .lesson-checks { border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; }
body.cream-site .copy-toast { padding: 12px 17px; border: 1px solid #bacda1; border-radius: 24px; box-shadow: 0 8px 24px -10px #43472b77; }
body.cream-site .copy-toast.is-error { border-color: #d7bd78; }

@media (max-width: 840px) {
  body.cream-site .lesson-workspace { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  body.cream-site .lesson-resources, body.cream-site .lesson-instructions { grid-column: auto; grid-row: auto; }
}

/* Beginner introductions use the same cream surfaces and teal selection. */
body.cream-site .service-introduction { max-width: 840px; }
body.cream-site .service-introduction h2 { margin-bottom: 12px; font-size: 19px; font-weight: 800; }
body.cream-site .intro-hero { margin: 3px 0 20px; }
body.cream-site .intro-brand { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: none; }
body.cream-site .intro-hero h1 { font-size: 29px; font-weight: 850; line-height: 1.3; letter-spacing: -.035em; }
body.cream-site .intro-definition { font-size: 16px; line-height: 1.85; }
body.cream-site .intro-analogy { padding: 17px 20px; border: 1px solid #e6d79e; border-radius: 18px; background: #f7bd4526; }
body.cream-site .intro-analogy h2 { margin-bottom: 6px; font-size: 17px; }
body.cream-site .intro-analogy p { font-size: 14px; }
body.cream-site :is(.intro-role-section, .intro-abilities, .intro-more, .intro-comparison) { margin-top: 25px; }
body.cream-site .intro-section-heading { gap: 10px; margin-bottom: 12px; }
body.cream-site .intro-mode { max-width: 100%; border-color: var(--line); border-radius: 26px; background: var(--surface); }
body.cream-site .intro-mode button { min-height: 44px; border-radius: 23px; color: var(--text); font-weight: 750; }
body.cream-site .intro-mode button:hover { background: #e5eac3; }
body.cream-site .intro-mode button[aria-pressed='true'] { border-color: var(--teal); background: var(--teal); color: var(--cream); }
body.cream-site .intro-role-flow { padding: 17px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
body.cream-site .intro-flow-node { min-height: 106px; border: 1px solid var(--line); border-radius: 13px; background: var(--cream); }
body.cream-site .intro-flow-node.is-highlighted { border: 2px solid var(--teal); background: #d8efdf; }
body.cream-site .intro-flow-node img { max-width: 100%; }
body.cream-site .intro-flow-node strong { font-size: 14px; font-weight: 800; }
body.cream-site .intro-flow-caption { color: #235d50; font-size: 14px; }
body.cream-site .intro-role-note,
body.cream-site .intro-abilities dd,
body.cream-site .intro-disclosure > p,
body.cream-site .intro-glossary dd { font-size: 14px; line-height: 1.8; }
body.cream-site .intro-abilities dl > div { padding: 13px 0; }
body.cream-site .intro-disclosure summary { min-height: 48px; padding: 13px 6px; }
body.cream-site .intro-table-wrap { border-color: var(--line); border-radius: 16px; }
body.cream-site .intro-comparison thead th { background: var(--surface); }
body.cream-site .intro-comparison .is-current { background: #d8efdf; }
body.cream-site .intro-footer { gap: 15px; margin-top: 23px; padding-top: 18px; }

/* Smaller home shelf; the dedicated carousel retains its 86% snap geometry. */
body.cream-site #tips-shelf { margin-top: 23px; padding-top: 19px; }
body.cream-site .tip-shelf-heading { gap: 8px 14px; margin-bottom: 8px; }
body.cream-site .tip-shelf-title h2 { font-size: 20px; font-weight: 850; }
body.cream-site .tip-shelf-controls { gap: 6px; }
body.cream-site :is(.tip-shelf-controls button, .tips-carousel-controls button) { width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); box-shadow: none; }
body.cream-site :is(.tip-shelf-controls button, .tips-carousel-controls button):hover:not(:disabled) { background: #dfe7b8; }
body.cream-site .tip-shelf-controls button:active:not(:disabled) { transform: none; box-shadow: none; }
body.cream-site .tip-shelf-track { gap: 12px; padding: 4px 0 10px; scroll-padding-inline: 0; scrollbar-color: #b8c29f transparent; }
body.cream-site .tip-shelf-card { flex-basis: calc((100% - 36px) / 4); border: 1px solid var(--line); border-radius: 18px; background: #eaf0ce; box-shadow: none; }
body.cream-site .tip-shelf-card:hover { background: #dfe9bd; }
body.cream-site .tip-shelf-card > img { max-height: 150px; border-bottom: 1px solid var(--line); background: var(--surface); }
body.cream-site .tip-shelf-card > div { padding: 12px; }
body.cream-site .tip-shelf-card h3 { min-height: 38px; font-size: 13px; font-weight: 800; line-height: 1.45; }
body.cream-site .tip-shelf-card p { margin-top: 5px; font-size: 11px; }
body.cream-site .tips-section { width: 100%; max-width: 1060px; margin: 0 auto; }
body.cream-site .tips-symbol { color: #7e5f1e; }
body.cream-site .tips-carousel-track { padding: 10px 0 18px; }
body.cream-site .tip-slide { border: 1px solid var(--line); border-radius: 22px; background: var(--surface); box-shadow: none; }
body.cream-site .tip-slide-preview { border-bottom-color: var(--line); background: var(--cream); }
body.cream-site .tip-preview-type { top: 12px; right: 12px; padding: 5px 9px; border-color: var(--line); border-radius: 16px; background: var(--cream); }
body.cream-site .tip-slide-content { min-height: 185px; padding: 18px 21px; }
body.cream-site .tip-slide-content h2 { font-size: 22px; font-weight: 850; }
body.cream-site .tip-slide-content p { margin: 7px 0 16px; font-size: 14px; line-height: 1.7; }
body.cream-site .tips-carousel-footer { gap: 16px; }
body.cream-site .tips-carousel-dots { gap: 3px; }
body.cream-site .tips-carousel-dots button { width: 27px; height: 44px; }
body.cream-site .tips-carousel-dots button::after { border-color: #7d8c64; background: var(--surface); }
body.cream-site .tips-carousel-dots button[aria-pressed='true']::after { border-color: var(--teal); background: var(--teal); }
body.cream-site .tip-reader { max-width: 1120px; margin: 0 auto; }
body.cream-site .tip-reader-heading { gap: 14px 20px; margin-bottom: 17px; }
body.cream-site .tip-reader-heading h1 { font-size: 28px; font-weight: 850; letter-spacing: -.035em; }
body.cream-site .tip-frame { border: 1px solid var(--line); border-radius: 17px; background: var(--cream); }
body.cream-site .tip-pdf-pages { gap: 14px; }
body.cream-site .tip-pdf-pages figure { padding: 7px; border-color: var(--line); border-radius: 16px; background: var(--cream); }

@media (max-width: 1149px) {
  body.cream-site :is(.tool-nav, .tool-overview-tools) { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  body.cream-site .header-inner { gap: 14px; }
  body.cream-site .brand { font-size: 16px; }
  body.cream-site .all-tools-link { padding-inline: 11px; }
  body.cream-site .tip-shelf-card { flex-basis: calc((100% - 24px) / 3); }
}

@media (max-width: 840px) {
  body.cream-site .guide-row { grid-template-columns: 38px minmax(0, 1fr) 16px; gap: 5px 10px; }
  body.cream-site .guide-icon { grid-row: 1 / 3; }
  body.cream-site .guide-copy { grid-column: 2; }
  body.cream-site .guide-facts { grid-column: 2; justify-content: flex-start; max-width: none; }
  body.cream-site .guide-arrow { grid-column: 3; grid-row: 1 / 3; }
}

@media (max-width: 760px) {
  body.cream-site .studio-shell { width: calc(100% - 24px); margin-top: 12px; margin-bottom: 16px; border-radius: 26px; }
  body.cream-site .site-header { border-radius: 26px 26px 0 0; }
  body.cream-site .header-inner { flex-wrap: wrap; gap: 4px 12px; padding: 10px 17px 8px; }
  body.cream-site .brand { flex: 1 1 100%; min-height: 42px; font-size: 16px; }
  body.cream-site .brand-mark { flex-basis: 34px; width: 34px; height: 34px; }
  body.cream-site .brand-mark svg { width: 24px; height: 24px; }
  body.cream-site .header-actions { flex: 1 1 100%; justify-content: flex-start; gap: 6px; margin: 0; }
  body.cream-site .header-actions .all-tools-link { min-height: 44px; padding: 8px 11px; font-size: 11px; }
  body.cream-site .site-layout,
  body.cream-site:is([data-view='lesson'], [data-view='introduction']) .site-layout { padding: 0 17px 16px; }
  body.cream-site main { padding-top: 16px; }
  body.cream-site :is(.tool-nav, .tool-overview-tools) { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px 6px; padding-top: 18px; }
  body.cream-site .tool-nav { padding-bottom: 13px; }
  body.cream-site .tool-name { font-size: 11px; line-height: 1.3; }
  body.cream-site .folder-title h1 { font-size: 21px; }
  body.cream-site .folder-heading { margin-bottom: 11px; }
  body.cream-site .guide-row { padding: 10px; }
  body.cream-site .guide-copy h2 { font-size: 14px; }
  body.cream-site .guide-description { font-size: 12px; }
  body.cream-site .guide-facts > span { padding: 1px 5px; }
  body.cream-site .site-footer { margin-right: 17px; margin-left: 17px; padding-top: 14px; font-size: 10px; }
  body.cream-site .tip-shelf-card { flex-basis: min(260px, 82%); }
  body.cream-site .tip-shelf-card > img { max-height: none; }
  body.cream-site .intro-hero h1 { font-size: 25px; }
  body.cream-site .intro-definition { font-size: 15px; }
  body.cream-site .tip-reader-heading h1 { font-size: 25px; }
}

@media (max-width: 680px) {
  body.cream-site .lesson-flow { grid-template-columns: 1fr; gap: 7px; }
  body.cream-site .lesson-flow li { grid-template-columns: 26px minmax(0, 1fr); gap: 0 11px; padding: 12px 14px; }
  body.cream-site .lesson-flow li > span { grid-row: 1 / 3; margin: 0; }
  body.cream-site .lesson-flow strong,
  body.cream-site .lesson-flow p { grid-column: 2; }
  body.cream-site .intro-abilities dl > div { grid-template-columns: 1fr; gap: 4px; }
}

@media (max-width: 460px) {
  body.cream-site .header-actions { justify-content: space-between; gap: 4px; }
  body.cream-site .header-actions .all-tools-link { padding-inline: 9px; font-size: 10px; }
  body.cream-site .prompt-toolbar { flex-wrap: wrap; padding: 11px 13px; }
  body.cream-site .prompt-toolbar h2 { flex: 1 1 110px; font-size: 14px; }
  body.cream-site .copy-prompt { min-width: 104px; padding-inline: 10px; }
  body.cream-site .prompt-block pre { padding: 14px; }
  body.cream-site .lesson-description { font-size: 14px; }
  body.cream-site .setup-steps { padding: 15px 15px 15px 32px; }
  body.cream-site .setup-properties > div { grid-template-columns: 1fr; gap: 3px; }
  body.cream-site .lesson-checks { padding: 11px 13px; }
  body.cream-site .lesson-checks label { align-items: flex-start; padding: 8px 0; }
  body.cream-site .lesson-checks input { margin-top: 2px; }
  body.cream-site .intro-hero { grid-template-columns: 44px minmax(0, 1fr); }
  body.cream-site .intro-brand { width: 44px; height: 44px; padding: 7px; border-radius: 12px; }
  body.cream-site .intro-hero h1 { font-size: 22px; }
  body.cream-site .intro-analogy { padding: 15px; }
  body.cream-site .intro-role-flow,
  body.cream-site .intro-role-flow.is-saving { grid-template-columns: 1fr; gap: 8px; padding: 13px; }
  body.cream-site .intro-flow-node { min-height: 0; padding: 12px; }
  body.cream-site .intro-flow-arrow { height: 20px; }
  body.cream-site .intro-flow-arrow svg { rotate: 90deg; }
  body.cream-site .intro-comparison th,
  body.cream-site .intro-comparison td { padding: 8px 7px; }
  body.cream-site .tip-shelf-heading { gap: 3px 10px; }
  body.cream-site .tip-shelf-title { gap: 9px; }
  body.cream-site .tip-shelf-controls { gap: 5px; }
  body.cream-site .tip-shelf-controls > a { margin: 0; padding-inline: 3px; font-size: 11px; }
  body.cream-site .tips-section > .folder-heading { flex-wrap: wrap; align-items: flex-start; gap: 5px; }
  body.cream-site .tips-carousel-controls { margin-left: auto; gap: 6px; }
  body.cream-site .tips-carousel-controls .folder-count { display: none; }
  body.cream-site .tip-slide-content { min-height: 210px; padding: 15px; }
  body.cream-site .tip-slide-content h2 { font-size: 18px; }
  body.cream-site .tip-slide-content p { font-size: 13px; }
  body.cream-site .tip-slide-actions { gap: 7px; }
  body.cream-site .tip-slide-actions .button { padding: 9px 12px; font-size: 11px; }
  body.cream-site .tips-carousel-footer { flex-wrap: wrap; gap: 2px 10px; }
  body.cream-site .tip-reader-heading h1 { font-size: 23px; }
  body.cream-site .tip-reader-actions { gap: 7px; }
  body.cream-site .tip-reader-actions .button { padding: 9px 12px; font-size: 11px; }
}

@media (max-width: 370px) {
  body.cream-site .header-inner { padding-inline: 13px; }
  body.cream-site .brand { gap: 8px; font-size: 15px; }
  body.cream-site .header-actions .all-tools-link { padding-inline: 7px; }
  body.cream-site .site-layout,
  body.cream-site:is([data-view='lesson'], [data-view='introduction']) .site-layout { padding-inline: 13px; }
  body.cream-site :is(.tool-nav, .tool-overview-tools) { column-gap: 4px; }
  body.cream-site .guide-row { grid-template-columns: 32px minmax(0, 1fr) 13px; gap: 5px 8px; padding: 9px; }
  body.cream-site .guide-icon { width: 32px; height: 32px; }
  body.cream-site .guide-icon svg { width: 19px; height: 19px; }
  body.cream-site .guide-arrow { width: 13px; }
  body.cream-site .guide-facts { gap: 4px; }
  body.cream-site .guide-facts > span { font-size: 10px; }
  body.cream-site .tip-shelf-card { flex-basis: 88%; }
}

@media (hover: hover) and (pointer: fine) {
  body.cream-site :is(.tool-nav, .tool-overview-tools) { padding-top: 30px; row-gap: 27px; }
}

@media (prefers-reduced-motion: reduce) {
  body.cream-site :is(a, button),
  body.cream-site .tool-icon,
  body.cream-site .tip-slide { transition: none; }
  body.cream-site .tool-icon { translate: none !important; scale: none !important; rotate: none !important; }
}

@media (forced-colors: active) {
  body.cream-site :is(.guide-row, .guide-icon, .button, .copy-prompt, .tool-icon, .all-tools-link) { border: 1px solid ButtonText; }
  body.cream-site .lesson-checks input { appearance: auto; background-image: none; }
}