/* GENERATED by scripts/generate-practice-studios.mjs from data/practice-studio/worlds.json — do not edit by hand.
   One daylight (Practice) and one night (Challenge) palette per world; see assets/studio-v2.css for the components. */

body[data-world="reef"] {
  --brand: hsl(192, 55%, 29%); --brand-dark: hsl(192, 33%, 15%); --brand-tint: hsl(192, 30%, 93%); --brand-line: hsl(192, 19%, 78%);
  --sun: hsl(14, 62%, 61%); --sun-deep: hsl(14, 58%, 33%); --sun-tint: hsl(14, 55%, 93%); --sun-ink: hsl(14, 55%, 20%);
  --on-brand: #FFFFFF; --on-sun: hsl(192, 33%, 15%);
  --paper: hsl(192, 30%, 96%); --well: hsl(192, 25%, 91%); --surface: #FFFFFF; --surface-soft: hsl(192, 35%, 97.5%);
  --border: hsl(192, 18%, 84%); --border-strong: hsl(192, 14%, 47%);
  --ink: hsl(192, 6%, 13%); --ink-muted: hsl(192, 5%, 27%); --ink-light: hsl(192, 4%, 37%);
  --hue: 192; --hue-accent: 14;
  --font-display: "Avenir Next Rounded", "Arial Rounded MT Bold", "Nunito", "Varela Round", ui-rounded, "Trebuchet MS", system-ui, sans-serif;
  --radius-sm: 11px; --radius-md: 18px; --radius-lg: 25px;
  --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='22'%3E%3Cpath d='M0 11 Q16 0 32 11 T64 11' stroke='%23fff' stroke-opacity='.13' fill='none' stroke-width='2'/%3E%3C/svg%3E");
}
body[data-world="reef"] .app-header { background-image: var(--motif); background-repeat: repeat; }

body[data-world="reef"][data-theme="dark"] {
  --brand: hsl(192, 58%, 74%); --brand-dark: hsl(192, 33%, 10%); --brand-tint: hsl(192, 28%, 21%); --brand-line: hsl(192, 22%, 36%);
  --sun: hsl(14, 58%, 66%); --sun-deep: hsl(14, 56%, 72%); --sun-tint: hsl(14, 28%, 17%); --sun-ink: hsl(14, 62%, 84%);
  --paper: hsl(192, 30%, 7%); --well: hsl(192, 28%, 10%); --surface: hsl(192, 28%, 13%); --surface-soft: hsl(192, 26%, 17%);
  --border: hsl(192, 22%, 27%); --border-strong: hsl(192, 16%, 58%);
  --ink: hsl(192, 6%, 93%); --ink-muted: hsl(192, 5%, 80%); --ink-light: hsl(192, 4%, 70%);
  --on-brand: hsl(192, 33%, 10%); --on-sun: hsl(192, 33%, 10%); --on-ok: hsl(152, 60%, 8%); --on-bad: hsl(5, 60%, 8%);
  --ok-ink: hsl(148, 70%, 88%); --bad-ink: hsl(5, 100%, 90%); --warn-ink: hsl(42, 100%, 82%);
  --ok: hsl(152, 42%, 58%); --ok-tint: hsl(152, 28%, 15%); --ok-line: hsl(152, 30%, 34%);
  --bad: hsl(6, 62%, 68%); --bad-tint: hsl(6, 30%, 17%); --bad-line: hsl(6, 36%, 40%);
  --warn: hsl(42, 70%, 70%); --warn-tint: hsl(42, 30%, 15%); --warn-line: hsl(42, 42%, 38%);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 18px rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}

body[data-world="orbit"] {
  --brand: hsl(120, 55%, 29%); --brand-dark: hsl(120, 33%, 15%); --brand-tint: hsl(120, 30%, 93%); --brand-line: hsl(120, 19%, 78%);
  --sun: hsl(45, 62%, 58%); --sun-deep: hsl(45, 58%, 33%); --sun-tint: hsl(45, 55%, 93%); --sun-ink: hsl(45, 55%, 20%);
  --on-brand: #FFFFFF; --on-sun: hsl(120, 33%, 15%);
  --paper: hsl(120, 30%, 96%); --well: hsl(120, 25%, 91%); --surface: #FFFFFF; --surface-soft: hsl(120, 35%, 97.5%);
  --border: hsl(120, 18%, 84%); --border-strong: hsl(120, 14%, 47%);
  --ink: hsl(120, 6%, 13%); --ink-muted: hsl(120, 5%, 27%); --ink-light: hsl(120, 4%, 37%);
  --hue: 120; --hue-accent: 45;
  --font-display: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px;
  --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='70'%3E%3Ccircle cx='10' cy='12' r='1.6' fill='%23fff' fill-opacity='.10'/%3E%3Ccircle cx='52' cy='28' r='1' fill='%23fff' fill-opacity='.10'/%3E%3Ccircle cx='78' cy='10' r='2' fill='%23fff' fill-opacity='.10'/%3E%3Ccircle cx='30' cy='56' r='1.4' fill='%23fff' fill-opacity='.10'/%3E%3Ccircle cx='70' cy='60' r='1' fill='%23fff' fill-opacity='.10'/%3E%3C/svg%3E");
}
body[data-world="orbit"] .app-header { background-image: var(--motif); background-repeat: repeat; }

body[data-world="orbit"][data-theme="dark"] {
  --brand: hsl(120, 58%, 74%); --brand-dark: hsl(120, 33%, 10%); --brand-tint: hsl(120, 28%, 21%); --brand-line: hsl(120, 22%, 36%);
  --sun: hsl(45, 58%, 66%); --sun-deep: hsl(45, 56%, 72%); --sun-tint: hsl(45, 28%, 17%); --sun-ink: hsl(45, 62%, 84%);
  --paper: hsl(120, 30%, 7%); --well: hsl(120, 28%, 10%); --surface: hsl(120, 28%, 13%); --surface-soft: hsl(120, 26%, 17%);
  --border: hsl(120, 22%, 27%); --border-strong: hsl(120, 16%, 58%);
  --ink: hsl(120, 6%, 93%); --ink-muted: hsl(120, 5%, 80%); --ink-light: hsl(120, 4%, 70%);
  --on-brand: hsl(120, 33%, 10%); --on-sun: hsl(120, 33%, 10%); --on-ok: hsl(152, 60%, 8%); --on-bad: hsl(5, 60%, 8%);
  --ok-ink: hsl(148, 70%, 88%); --bad-ink: hsl(5, 100%, 90%); --warn-ink: hsl(42, 100%, 82%);
  --ok: hsl(152, 42%, 58%); --ok-tint: hsl(152, 28%, 15%); --ok-line: hsl(152, 30%, 34%);
  --bad: hsl(6, 62%, 68%); --bad-tint: hsl(6, 30%, 17%); --bad-line: hsl(6, 36%, 40%);
  --warn: hsl(42, 70%, 70%); --warn-tint: hsl(42, 30%, 15%); --warn-line: hsl(42, 42%, 38%);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 18px rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}

body[data-world="trail"] {
  --brand: hsl(140, 45%, 29%); --brand-dark: hsl(140, 27%, 15%); --brand-tint: hsl(140, 25%, 93%); --brand-line: hsl(140, 16%, 78%);
  --sun: hsl(24, 62%, 58%); --sun-deep: hsl(24, 58%, 33%); --sun-tint: hsl(24, 55%, 93%); --sun-ink: hsl(24, 55%, 20%);
  --on-brand: #FFFFFF; --on-sun: hsl(140, 27%, 15%);
  --paper: hsl(140, 30%, 96%); --well: hsl(140, 25%, 91%); --surface: #FFFFFF; --surface-soft: hsl(140, 35%, 97.5%);
  --border: hsl(140, 18%, 84%); --border-strong: hsl(140, 14%, 47%);
  --ink: hsl(140, 6%, 13%); --ink-muted: hsl(140, 5%, 27%); --ink-light: hsl(140, 4%, 37%);
  --hue: 140; --hue-accent: 24;
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --radius-sm: 7px; --radius-md: 12px; --radius-lg: 17px;
  --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='34'%3E%3Cpath d='M0 30 L14 10 L24 22 L38 4 L54 26 L64 16 L72 30' stroke='%23fff' stroke-opacity='.13' fill='none' stroke-width='2'/%3E%3C/svg%3E");
}
body[data-world="trail"] .app-header { background-image: var(--motif); background-repeat: repeat; }

body[data-world="trail"][data-theme="dark"] {
  --brand: hsl(140, 49%, 74%); --brand-dark: hsl(140, 27%, 10%); --brand-tint: hsl(140, 23%, 21%); --brand-line: hsl(140, 18%, 36%);
  --sun: hsl(24, 58%, 66%); --sun-deep: hsl(24, 56%, 72%); --sun-tint: hsl(24, 28%, 17%); --sun-ink: hsl(24, 62%, 84%);
  --paper: hsl(140, 30%, 7%); --well: hsl(140, 28%, 10%); --surface: hsl(140, 28%, 13%); --surface-soft: hsl(140, 26%, 17%);
  --border: hsl(140, 22%, 27%); --border-strong: hsl(140, 16%, 58%);
  --ink: hsl(140, 6%, 93%); --ink-muted: hsl(140, 5%, 80%); --ink-light: hsl(140, 4%, 70%);
  --on-brand: hsl(140, 27%, 10%); --on-sun: hsl(140, 27%, 10%); --on-ok: hsl(152, 60%, 8%); --on-bad: hsl(5, 60%, 8%);
  --ok-ink: hsl(148, 70%, 88%); --bad-ink: hsl(5, 100%, 90%); --warn-ink: hsl(42, 100%, 82%);
  --ok: hsl(152, 42%, 58%); --ok-tint: hsl(152, 28%, 15%); --ok-line: hsl(152, 30%, 34%);
  --bad: hsl(6, 62%, 68%); --bad-tint: hsl(6, 30%, 17%); --bad-line: hsl(6, 36%, 40%);
  --warn: hsl(42, 70%, 70%); --warn-tint: hsl(42, 30%, 15%); --warn-line: hsl(42, 42%, 38%);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 18px rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}

body[data-world="kitchen"] {
  --brand: hsl(16, 55%, 29%); --brand-dark: hsl(16, 33%, 15%); --brand-tint: hsl(16, 30%, 93%); --brand-line: hsl(16, 19%, 78%);
  --sun: hsl(44, 62%, 58%); --sun-deep: hsl(44, 58%, 33%); --sun-tint: hsl(44, 55%, 93%); --sun-ink: hsl(44, 55%, 20%);
  --on-brand: #FFFFFF; --on-sun: hsl(16, 33%, 15%);
  --paper: hsl(16, 30%, 96%); --well: hsl(16, 25%, 91%); --surface: #FFFFFF; --surface-soft: hsl(16, 35%, 97.5%);
  --border: hsl(16, 18%, 84%); --border-strong: hsl(16, 14%, 47%);
  --ink: hsl(16, 6%, 13%); --ink-muted: hsl(16, 5%, 27%); --ink-light: hsl(16, 4%, 37%);
  --hue: 16; --hue-accent: 44;
  --font-display: "Avenir Next Rounded", "Arial Rounded MT Bold", "Nunito", "Varela Round", ui-rounded, "Trebuchet MS", system-ui, sans-serif;
  --radius-sm: 10px; --radius-md: 16px; --radius-lg: 22px;
  --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Crect width='14' height='14' fill='%23fff' fill-opacity='.10'/%3E%3Crect x='14' y='14' width='14' height='14' fill='%23fff' fill-opacity='.10'/%3E%3C/svg%3E");
}
body[data-world="kitchen"] .app-header { background-image: var(--motif); background-repeat: repeat; }

body[data-world="kitchen"][data-theme="dark"] {
  --brand: hsl(16, 58%, 74%); --brand-dark: hsl(16, 33%, 10%); --brand-tint: hsl(16, 28%, 21%); --brand-line: hsl(16, 22%, 36%);
  --sun: hsl(44, 58%, 66%); --sun-deep: hsl(44, 56%, 72%); --sun-tint: hsl(44, 28%, 17%); --sun-ink: hsl(44, 62%, 84%);
  --paper: hsl(16, 30%, 7%); --well: hsl(16, 28%, 10%); --surface: hsl(16, 28%, 13%); --surface-soft: hsl(16, 26%, 17%);
  --border: hsl(16, 22%, 27%); --border-strong: hsl(16, 16%, 58%);
  --ink: hsl(16, 6%, 93%); --ink-muted: hsl(16, 5%, 80%); --ink-light: hsl(16, 4%, 70%);
  --on-brand: hsl(16, 33%, 10%); --on-sun: hsl(16, 33%, 10%); --on-ok: hsl(152, 60%, 8%); --on-bad: hsl(5, 60%, 8%);
  --ok-ink: hsl(148, 70%, 88%); --bad-ink: hsl(5, 100%, 90%); --warn-ink: hsl(42, 100%, 82%);
  --ok: hsl(152, 42%, 58%); --ok-tint: hsl(152, 28%, 15%); --ok-line: hsl(152, 30%, 34%);
  --bad: hsl(6, 62%, 68%); --bad-tint: hsl(6, 30%, 17%); --bad-line: hsl(6, 36%, 40%);
  --warn: hsl(42, 70%, 70%); --warn-tint: hsl(42, 30%, 15%); --warn-line: hsl(42, 42%, 38%);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 18px rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}

body[data-world="studio"] {
  --brand: hsl(164, 55%, 29%); --brand-dark: hsl(164, 33%, 15%); --brand-tint: hsl(164, 30%, 93%); --brand-line: hsl(164, 19%, 78%);
  --sun: hsl(170, 62%, 58%); --sun-deep: hsl(170, 58%, 33%); --sun-tint: hsl(170, 55%, 93%); --sun-ink: hsl(170, 55%, 20%);
  --on-brand: #FFFFFF; --on-sun: hsl(164, 33%, 15%);
  --paper: hsl(164, 30%, 96%); --well: hsl(164, 25%, 91%); --surface: #FFFFFF; --surface-soft: hsl(164, 35%, 97.5%);
  --border: hsl(164, 18%, 84%); --border-strong: hsl(164, 14%, 47%);
  --ink: hsl(164, 6%, 13%); --ink-muted: hsl(164, 5%, 27%); --ink-light: hsl(164, 4%, 37%);
  --hue: 164; --hue-accent: 170;
  --font-display: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px;
  --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='34'%3E%3Crect x='4' y='14' width='6' height='20' fill='%23fff' fill-opacity='.10'/%3E%3Crect x='16' y='4' width='6' height='30' fill='%23fff' fill-opacity='.10'/%3E%3Crect x='28' y='20' width='6' height='14' fill='%23fff' fill-opacity='.10'/%3E%3C/svg%3E");
}
body[data-world="studio"] .app-header { background-image: var(--motif); background-repeat: repeat; }

body[data-world="studio"][data-theme="dark"] {
  --brand: hsl(164, 58%, 74%); --brand-dark: hsl(164, 33%, 10%); --brand-tint: hsl(164, 28%, 21%); --brand-line: hsl(164, 22%, 36%);
  --sun: hsl(170, 58%, 66%); --sun-deep: hsl(170, 56%, 72%); --sun-tint: hsl(170, 28%, 17%); --sun-ink: hsl(170, 62%, 84%);
  --paper: hsl(164, 30%, 7%); --well: hsl(164, 28%, 10%); --surface: hsl(164, 28%, 13%); --surface-soft: hsl(164, 26%, 17%);
  --border: hsl(164, 22%, 27%); --border-strong: hsl(164, 16%, 58%);
  --ink: hsl(164, 6%, 93%); --ink-muted: hsl(164, 5%, 80%); --ink-light: hsl(164, 4%, 70%);
  --on-brand: hsl(164, 33%, 10%); --on-sun: hsl(164, 33%, 10%); --on-ok: hsl(152, 60%, 8%); --on-bad: hsl(5, 60%, 8%);
  --ok-ink: hsl(148, 70%, 88%); --bad-ink: hsl(5, 100%, 90%); --warn-ink: hsl(42, 100%, 82%);
  --ok: hsl(152, 42%, 58%); --ok-tint: hsl(152, 28%, 15%); --ok-line: hsl(152, 30%, 34%);
  --bad: hsl(6, 62%, 68%); --bad-tint: hsl(6, 30%, 17%); --bad-line: hsl(6, 36%, 40%);
  --warn: hsl(42, 70%, 70%); --warn-tint: hsl(42, 30%, 15%); --warn-line: hsl(42, 42%, 38%);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 18px rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}

body[data-world="arcade"] {
  --brand: hsl(176, 55%, 29%); --brand-dark: hsl(176, 33%, 15%); --brand-tint: hsl(176, 30%, 93%); --brand-line: hsl(176, 19%, 78%);
  --sun: hsl(190, 62%, 58%); --sun-deep: hsl(190, 58%, 33%); --sun-tint: hsl(190, 55%, 93%); --sun-ink: hsl(190, 55%, 20%);
  --on-brand: #FFFFFF; --on-sun: hsl(176, 33%, 15%);
  --paper: hsl(176, 30%, 96%); --well: hsl(176, 25%, 91%); --surface: #FFFFFF; --surface-soft: hsl(176, 35%, 97.5%);
  --border: hsl(176, 18%, 84%); --border-strong: hsl(176, 14%, 47%);
  --ink: hsl(176, 6%, 13%); --ink-muted: hsl(176, 5%, 27%); --ink-light: hsl(176, 4%, 37%);
  --hue: 176; --hue-accent: 190;
  --font-display: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, "Courier New", monospace;
  --radius-sm: 2px; --radius-md: 4px; --radius-lg: 6px;
  --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Crect x='4' y='4' width='8' height='8' fill='%23fff' fill-opacity='.10'/%3E%3Crect x='20' y='12' width='8' height='8' fill='%23fff' fill-opacity='.10'/%3E%3Crect x='12' y='24' width='8' height='8' fill='%23fff' fill-opacity='.10'/%3E%3C/svg%3E");
}
body[data-world="arcade"] .app-header { background-image: var(--motif); background-repeat: repeat; }

body[data-world="arcade"][data-theme="dark"] {
  --brand: hsl(176, 58%, 74%); --brand-dark: hsl(176, 33%, 10%); --brand-tint: hsl(176, 28%, 21%); --brand-line: hsl(176, 22%, 36%);
  --sun: hsl(190, 58%, 66%); --sun-deep: hsl(190, 56%, 72%); --sun-tint: hsl(190, 28%, 17%); --sun-ink: hsl(190, 62%, 84%);
  --paper: hsl(176, 30%, 7%); --well: hsl(176, 28%, 10%); --surface: hsl(176, 28%, 13%); --surface-soft: hsl(176, 26%, 17%);
  --border: hsl(176, 22%, 27%); --border-strong: hsl(176, 16%, 58%);
  --ink: hsl(176, 6%, 93%); --ink-muted: hsl(176, 5%, 80%); --ink-light: hsl(176, 4%, 70%);
  --on-brand: hsl(176, 33%, 10%); --on-sun: hsl(176, 33%, 10%); --on-ok: hsl(152, 60%, 8%); --on-bad: hsl(5, 60%, 8%);
  --ok-ink: hsl(148, 70%, 88%); --bad-ink: hsl(5, 100%, 90%); --warn-ink: hsl(42, 100%, 82%);
  --ok: hsl(152, 42%, 58%); --ok-tint: hsl(152, 28%, 15%); --ok-line: hsl(152, 30%, 34%);
  --bad: hsl(6, 62%, 68%); --bad-tint: hsl(6, 30%, 17%); --bad-line: hsl(6, 36%, 40%);
  --warn: hsl(42, 70%, 70%); --warn-tint: hsl(42, 30%, 15%); --warn-line: hsl(42, 42%, 38%);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 18px rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}

body[data-world="lab"] {
  --brand: hsl(212, 55%, 29%); --brand-dark: hsl(212, 33%, 15%); --brand-tint: hsl(212, 30%, 93%); --brand-line: hsl(212, 19%, 78%);
  --sun: hsl(38, 62%, 58%); --sun-deep: hsl(38, 58%, 33%); --sun-tint: hsl(38, 55%, 93%); --sun-ink: hsl(38, 55%, 20%);
  --on-brand: #FFFFFF; --on-sun: hsl(212, 33%, 15%);
  --paper: hsl(212, 30%, 96%); --well: hsl(212, 25%, 91%); --surface: #FFFFFF; --surface-soft: hsl(212, 35%, 97.5%);
  --border: hsl(212, 18%, 84%); --border-strong: hsl(212, 14%, 47%);
  --ink: hsl(212, 6%, 13%); --ink-muted: hsl(212, 5%, 27%); --ink-light: hsl(212, 4%, 37%);
  --hue: 212; --hue-accent: 38;
  --font-display: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --radius-sm: 5px; --radius-md: 8px; --radius-lg: 11px;
  --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='42'%3E%3Cpath d='M12 4 L24 4 L30 14 L24 24 L12 24 L6 14 Z' stroke='%23fff' stroke-opacity='.13' fill='none' stroke-width='2'/%3E%3C/svg%3E");
}
body[data-world="lab"] .app-header { background-image: var(--motif); background-repeat: repeat; }

body[data-world="lab"][data-theme="dark"] {
  --brand: hsl(212, 58%, 74%); --brand-dark: hsl(212, 33%, 10%); --brand-tint: hsl(212, 28%, 21%); --brand-line: hsl(212, 22%, 36%);
  --sun: hsl(38, 58%, 66%); --sun-deep: hsl(38, 56%, 72%); --sun-tint: hsl(38, 28%, 17%); --sun-ink: hsl(38, 62%, 84%);
  --paper: hsl(212, 30%, 7%); --well: hsl(212, 28%, 10%); --surface: hsl(212, 28%, 13%); --surface-soft: hsl(212, 26%, 17%);
  --border: hsl(212, 22%, 27%); --border-strong: hsl(212, 16%, 58%);
  --ink: hsl(212, 6%, 93%); --ink-muted: hsl(212, 5%, 80%); --ink-light: hsl(212, 4%, 70%);
  --on-brand: hsl(212, 33%, 10%); --on-sun: hsl(212, 33%, 10%); --on-ok: hsl(152, 60%, 8%); --on-bad: hsl(5, 60%, 8%);
  --ok-ink: hsl(148, 70%, 88%); --bad-ink: hsl(5, 100%, 90%); --warn-ink: hsl(42, 100%, 82%);
  --ok: hsl(152, 42%, 58%); --ok-tint: hsl(152, 28%, 15%); --ok-line: hsl(152, 30%, 34%);
  --bad: hsl(6, 62%, 68%); --bad-tint: hsl(6, 30%, 17%); --bad-line: hsl(6, 36%, 40%);
  --warn: hsl(42, 70%, 70%); --warn-tint: hsl(42, 30%, 15%); --warn-line: hsl(42, 42%, 38%);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 18px rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}

body[data-world="harbor"] {
  --brand: hsl(350, 50%, 29%); --brand-dark: hsl(350, 30%, 15%); --brand-tint: hsl(350, 28%, 93%); --brand-line: hsl(350, 18%, 78%);
  --sun: hsl(40, 62%, 58%); --sun-deep: hsl(40, 58%, 33%); --sun-tint: hsl(40, 55%, 93%); --sun-ink: hsl(40, 55%, 20%);
  --on-brand: #FFFFFF; --on-sun: hsl(350, 30%, 15%);
  --paper: hsl(350, 30%, 96%); --well: hsl(350, 25%, 91%); --surface: #FFFFFF; --surface-soft: hsl(350, 35%, 97.5%);
  --border: hsl(350, 18%, 84%); --border-strong: hsl(350, 14%, 47%);
  --ink: hsl(350, 6%, 13%); --ink-muted: hsl(350, 5%, 27%); --ink-light: hsl(350, 4%, 37%);
  --hue: 350; --hue-accent: 40;
  --font-display: Rockwell, "Roboto Slab", "Rockwell Nova", "Courier New", Georgia, serif;
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px;
  --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='20'%3E%3Cpath d='M0 6 Q14 -2 28 6 T56 6 M0 14 Q14 22 28 14 T56 14' stroke='%23fff' stroke-opacity='.13' fill='none' stroke-width='2'/%3E%3C/svg%3E");
}
body[data-world="harbor"] .app-header { background-image: var(--motif); background-repeat: repeat; }

body[data-world="harbor"][data-theme="dark"] {
  --brand: hsl(350, 54%, 74%); --brand-dark: hsl(350, 30%, 10%); --brand-tint: hsl(350, 25%, 21%); --brand-line: hsl(350, 20%, 36%);
  --sun: hsl(40, 58%, 66%); --sun-deep: hsl(40, 56%, 72%); --sun-tint: hsl(40, 28%, 17%); --sun-ink: hsl(40, 62%, 84%);
  --paper: hsl(350, 30%, 7%); --well: hsl(350, 28%, 10%); --surface: hsl(350, 28%, 13%); --surface-soft: hsl(350, 26%, 17%);
  --border: hsl(350, 22%, 27%); --border-strong: hsl(350, 16%, 58%);
  --ink: hsl(350, 6%, 93%); --ink-muted: hsl(350, 5%, 80%); --ink-light: hsl(350, 4%, 70%);
  --on-brand: hsl(350, 30%, 10%); --on-sun: hsl(350, 30%, 10%); --on-ok: hsl(152, 60%, 8%); --on-bad: hsl(5, 60%, 8%);
  --ok-ink: hsl(148, 70%, 88%); --bad-ink: hsl(5, 100%, 90%); --warn-ink: hsl(42, 100%, 82%);
  --ok: hsl(152, 42%, 58%); --ok-tint: hsl(152, 28%, 15%); --ok-line: hsl(152, 30%, 34%);
  --bad: hsl(6, 62%, 68%); --bad-tint: hsl(6, 30%, 17%); --bad-line: hsl(6, 36%, 40%);
  --warn: hsl(42, 70%, 70%); --warn-tint: hsl(42, 30%, 15%); --warn-line: hsl(42, 42%, 38%);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 18px rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}

body[data-world="garden"] {
  --brand: hsl(100, 50%, 29%); --brand-dark: hsl(100, 30%, 15%); --brand-tint: hsl(100, 28%, 93%); --brand-line: hsl(100, 18%, 78%);
  --sun: hsl(42, 62%, 58%); --sun-deep: hsl(42, 58%, 33%); --sun-tint: hsl(42, 55%, 93%); --sun-ink: hsl(42, 55%, 20%);
  --on-brand: #FFFFFF; --on-sun: hsl(100, 30%, 15%);
  --paper: hsl(100, 30%, 96%); --well: hsl(100, 25%, 91%); --surface: #FFFFFF; --surface-soft: hsl(100, 35%, 97.5%);
  --border: hsl(100, 18%, 84%); --border-strong: hsl(100, 14%, 47%);
  --ink: hsl(100, 6%, 13%); --ink-muted: hsl(100, 5%, 27%); --ink-light: hsl(100, 4%, 37%);
  --hue: 100; --hue-accent: 42;
  --font-display: "Avenir Next Rounded", "Arial Rounded MT Bold", "Nunito", "Varela Round", ui-rounded, "Trebuchet MS", system-ui, sans-serif;
  --radius-sm: 12px; --radius-md: 20px; --radius-lg: 28px;
  --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='44'%3E%3Cellipse cx='14' cy='14' rx='9' ry='4' transform='rotate(-35 14 14)' fill='%23fff' fill-opacity='.10'/%3E%3Cellipse cx='40' cy='30' rx='9' ry='4' transform='rotate(35 40 30)' fill='%23fff' fill-opacity='.10'/%3E%3C/svg%3E");
}
body[data-world="garden"] .app-header { background-image: var(--motif); background-repeat: repeat; }

body[data-world="garden"][data-theme="dark"] {
  --brand: hsl(100, 54%, 74%); --brand-dark: hsl(100, 30%, 10%); --brand-tint: hsl(100, 25%, 21%); --brand-line: hsl(100, 20%, 36%);
  --sun: hsl(42, 58%, 66%); --sun-deep: hsl(42, 56%, 72%); --sun-tint: hsl(42, 28%, 17%); --sun-ink: hsl(42, 62%, 84%);
  --paper: hsl(100, 30%, 7%); --well: hsl(100, 28%, 10%); --surface: hsl(100, 28%, 13%); --surface-soft: hsl(100, 26%, 17%);
  --border: hsl(100, 22%, 27%); --border-strong: hsl(100, 16%, 58%);
  --ink: hsl(100, 6%, 93%); --ink-muted: hsl(100, 5%, 80%); --ink-light: hsl(100, 4%, 70%);
  --on-brand: hsl(100, 30%, 10%); --on-sun: hsl(100, 30%, 10%); --on-ok: hsl(152, 60%, 8%); --on-bad: hsl(5, 60%, 8%);
  --ok-ink: hsl(148, 70%, 88%); --bad-ink: hsl(5, 100%, 90%); --warn-ink: hsl(42, 100%, 82%);
  --ok: hsl(152, 42%, 58%); --ok-tint: hsl(152, 28%, 15%); --ok-line: hsl(152, 30%, 34%);
  --bad: hsl(6, 62%, 68%); --bad-tint: hsl(6, 30%, 17%); --bad-line: hsl(6, 36%, 40%);
  --warn: hsl(42, 70%, 70%); --warn-tint: hsl(42, 30%, 15%); --warn-line: hsl(42, 42%, 38%);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 18px rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}

body[data-world="sports"] {
  --brand: hsl(30, 55%, 29%); --brand-dark: hsl(30, 33%, 15%); --brand-tint: hsl(30, 30%, 93%); --brand-line: hsl(30, 19%, 78%);
  --sun: hsl(215, 62%, 62%); --sun-deep: hsl(215, 58%, 33%); --sun-tint: hsl(215, 55%, 93%); --sun-ink: hsl(215, 55%, 20%);
  --on-brand: #FFFFFF; --on-sun: hsl(30, 33%, 15%);
  --paper: hsl(30, 30%, 96%); --well: hsl(30, 25%, 91%); --surface: #FFFFFF; --surface-soft: hsl(30, 35%, 97.5%);
  --border: hsl(30, 18%, 84%); --border-strong: hsl(30, 14%, 47%);
  --ink: hsl(30, 6%, 13%); --ink-muted: hsl(30, 5%, 27%); --ink-light: hsl(30, 4%, 37%);
  --hue: 30; --hue-accent: 215;
  --font-display: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px;
  --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M-4 28 L28 -4 M8 32 L32 8' stroke='%23fff' stroke-opacity='.13' fill='none' stroke-width='2'/%3E%3C/svg%3E");
}
body[data-world="sports"] .app-header { background-image: var(--motif); background-repeat: repeat; }

body[data-world="sports"][data-theme="dark"] {
  --brand: hsl(30, 58%, 74%); --brand-dark: hsl(30, 33%, 10%); --brand-tint: hsl(30, 28%, 21%); --brand-line: hsl(30, 22%, 36%);
  --sun: hsl(215, 58%, 66%); --sun-deep: hsl(215, 56%, 72%); --sun-tint: hsl(215, 28%, 17%); --sun-ink: hsl(215, 62%, 84%);
  --paper: hsl(30, 30%, 7%); --well: hsl(30, 28%, 10%); --surface: hsl(30, 28%, 13%); --surface-soft: hsl(30, 26%, 17%);
  --border: hsl(30, 22%, 27%); --border-strong: hsl(30, 16%, 58%);
  --ink: hsl(30, 6%, 93%); --ink-muted: hsl(30, 5%, 80%); --ink-light: hsl(30, 4%, 70%);
  --on-brand: hsl(30, 33%, 10%); --on-sun: hsl(30, 33%, 10%); --on-ok: hsl(152, 60%, 8%); --on-bad: hsl(5, 60%, 8%);
  --ok-ink: hsl(148, 70%, 88%); --bad-ink: hsl(5, 100%, 90%); --warn-ink: hsl(42, 100%, 82%);
  --ok: hsl(152, 42%, 58%); --ok-tint: hsl(152, 28%, 15%); --ok-line: hsl(152, 30%, 34%);
  --bad: hsl(6, 62%, 68%); --bad-tint: hsl(6, 30%, 17%); --bad-line: hsl(6, 36%, 40%);
  --warn: hsl(42, 70%, 70%); --warn-tint: hsl(42, 30%, 15%); --warn-line: hsl(42, 42%, 38%);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 18px rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}

body[data-world="mystery"] {
  --brand: hsl(72, 30%, 29%); --brand-dark: hsl(72, 18%, 15%); --brand-tint: hsl(72, 17%, 93%); --brand-line: hsl(72, 11%, 78%);
  --sun: hsl(48, 62%, 58%); --sun-deep: hsl(48, 58%, 33%); --sun-tint: hsl(48, 55%, 93%); --sun-ink: hsl(48, 55%, 20%);
  --on-brand: #FFFFFF; --on-sun: hsl(72, 18%, 15%);
  --paper: hsl(72, 30%, 96%); --well: hsl(72, 25%, 91%); --surface: #FFFFFF; --surface-soft: hsl(72, 35%, 97.5%);
  --border: hsl(72, 18%, 84%); --border-strong: hsl(72, 14%, 47%);
  --ink: hsl(72, 6%, 13%); --ink-muted: hsl(72, 5%, 27%); --ink-light: hsl(72, 4%, 37%);
  --hue: 72; --hue-accent: 48;
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px;
  --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M0 20 A20 20 0 0 1 20 0 M0 38 A38 38 0 0 1 38 0 M0 56 A56 56 0 0 1 56 0' stroke='%23fff' stroke-opacity='.13' fill='none' stroke-width='2'/%3E%3C/svg%3E");
}
body[data-world="mystery"] .app-header { background-image: var(--motif); background-repeat: repeat; }

body[data-world="mystery"][data-theme="dark"] {
  --brand: hsl(72, 34%, 74%); --brand-dark: hsl(72, 18%, 10%); --brand-tint: hsl(72, 15%, 21%); --brand-line: hsl(72, 12%, 36%);
  --sun: hsl(48, 58%, 66%); --sun-deep: hsl(48, 56%, 72%); --sun-tint: hsl(48, 28%, 17%); --sun-ink: hsl(48, 62%, 84%);
  --paper: hsl(72, 30%, 7%); --well: hsl(72, 28%, 10%); --surface: hsl(72, 28%, 13%); --surface-soft: hsl(72, 26%, 17%);
  --border: hsl(72, 22%, 27%); --border-strong: hsl(72, 16%, 58%);
  --ink: hsl(72, 6%, 93%); --ink-muted: hsl(72, 5%, 80%); --ink-light: hsl(72, 4%, 70%);
  --on-brand: hsl(72, 18%, 10%); --on-sun: hsl(72, 18%, 10%); --on-ok: hsl(152, 60%, 8%); --on-bad: hsl(5, 60%, 8%);
  --ok-ink: hsl(148, 70%, 88%); --bad-ink: hsl(5, 100%, 90%); --warn-ink: hsl(42, 100%, 82%);
  --ok: hsl(152, 42%, 58%); --ok-tint: hsl(152, 28%, 15%); --ok-line: hsl(152, 30%, 34%);
  --bad: hsl(6, 62%, 68%); --bad-tint: hsl(6, 30%, 17%); --bad-line: hsl(6, 36%, 40%);
  --warn: hsl(42, 70%, 70%); --warn-tint: hsl(42, 30%, 15%); --warn-line: hsl(42, 42%, 38%);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 18px rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}

body[data-world="workshop"] {
  --brand: hsl(45, 55%, 29%); --brand-dark: hsl(45, 33%, 15%); --brand-tint: hsl(45, 30%, 93%); --brand-line: hsl(45, 19%, 78%);
  --sun: hsl(200, 62%, 58%); --sun-deep: hsl(200, 58%, 33%); --sun-tint: hsl(200, 55%, 93%); --sun-ink: hsl(200, 55%, 20%);
  --on-brand: #FFFFFF; --on-sun: hsl(45, 33%, 15%);
  --paper: hsl(45, 30%, 96%); --well: hsl(45, 25%, 91%); --surface: #FFFFFF; --surface-soft: hsl(45, 35%, 97.5%);
  --border: hsl(45, 18%, 84%); --border-strong: hsl(45, 14%, 47%);
  --ink: hsl(45, 6%, 13%); --ink-muted: hsl(45, 5%, 27%); --ink-light: hsl(45, 4%, 37%);
  --hue: 45; --hue-accent: 200;
  --font-display: Rockwell, "Roboto Slab", "Rockwell Nova", "Courier New", Georgia, serif;
  --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px;
  --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Ccircle cx='28' cy='28' r='14' stroke='%23fff' stroke-opacity='.13' fill='none' stroke-width='2' stroke-dasharray='5 4'/%3E%3Ccircle cx='28' cy='28' r='6' stroke='%23fff' stroke-opacity='.13' fill='none' stroke-width='2'/%3E%3C/svg%3E");
}
body[data-world="workshop"] .app-header { background-image: var(--motif); background-repeat: repeat; }

body[data-world="workshop"][data-theme="dark"] {
  --brand: hsl(45, 58%, 74%); --brand-dark: hsl(45, 33%, 10%); --brand-tint: hsl(45, 28%, 21%); --brand-line: hsl(45, 22%, 36%);
  --sun: hsl(200, 58%, 66%); --sun-deep: hsl(200, 56%, 72%); --sun-tint: hsl(200, 28%, 17%); --sun-ink: hsl(200, 62%, 84%);
  --paper: hsl(45, 30%, 7%); --well: hsl(45, 28%, 10%); --surface: hsl(45, 28%, 13%); --surface-soft: hsl(45, 26%, 17%);
  --border: hsl(45, 22%, 27%); --border-strong: hsl(45, 16%, 58%);
  --ink: hsl(45, 6%, 93%); --ink-muted: hsl(45, 5%, 80%); --ink-light: hsl(45, 4%, 70%);
  --on-brand: hsl(45, 33%, 10%); --on-sun: hsl(45, 33%, 10%); --on-ok: hsl(152, 60%, 8%); --on-bad: hsl(5, 60%, 8%);
  --ok-ink: hsl(148, 70%, 88%); --bad-ink: hsl(5, 100%, 90%); --warn-ink: hsl(42, 100%, 82%);
  --ok: hsl(152, 42%, 58%); --ok-tint: hsl(152, 28%, 15%); --ok-line: hsl(152, 30%, 34%);
  --bad: hsl(6, 62%, 68%); --bad-tint: hsl(6, 30%, 17%); --bad-line: hsl(6, 36%, 40%);
  --warn: hsl(42, 70%, 70%); --warn-tint: hsl(42, 30%, 15%); --warn-line: hsl(42, 42%, 38%);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 18px rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}