@font-face {
  font-family: 'Mali Local';
  src: url('./assets/fonts/Mali-Regular.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Mali Local';
  src: url('./assets/fonts/Mali-SemiBold.woff2') format('woff2');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

body[data-visual-theme='pastel-princess'] {
  --princess-strawberry: #f6c6d8;
  --princess-buttercream: #fffcdf;
  --princess-pistachio: #edfde0;
  --princess-aqua: #defef9;
  --princess-lavender: #efe0fd;
  --princess-pearl: #fffafc;
  --princess-raspberry: #d3487d;
  --princess-deep-berry: #68183d;
  --princess-candy-pink: #e879a5;
  --princess-candy-yellow: #e6c94c;
  --princess-candy-green: #8ccfa2;
  --princess-candy-blue: #74ccd8;
  --princess-candy-purple: #b69ae6;
  --princess-font-display: 'Mali Local', 'Trebuchet MS', sans-serif;
  --princess-font-study: 'Mali Local', ui-rounded, system-ui, sans-serif;
  --world-font-heading: var(--princess-font-display);
  --world-font-navigation: var(--princess-font-study);
  --princess-bow: url('./assets/princess/bow.svg');
  --princess-bunny-bow: url('./assets/princess/bunny-bow.svg');
  --princess-strawberry-art: url('./assets/princess/strawberry.svg');
  --princess-cherries-art: url('./assets/princess/cherries.svg');
  --princess-pearl-heart: url('./assets/princess/pearl-heart.svg');
  --princess-dot-grid: url('./assets/princess/dot-grid.svg');
  --princess-primary-motif: var(--princess-strawberry-art);
  --princess-secondary-motif: var(--princess-cherries-art);
  --ui-control-radius: 12px;
}

body[data-visual-theme='pastel-princess'][data-princess-motif='strawberry'] {
  --princess-primary-motif: var(--princess-strawberry-art);
  --princess-secondary-motif: var(--princess-cherries-art);
}

body[data-visual-theme='pastel-princess'][data-princess-motif='cherry-ribbon'] {
  --princess-primary-motif: url('./assets/princess/cherry-ribbon/cherry-ribbon-ambient.svg');
  --princess-secondary-motif: var(--princess-cherries-art);
}

/* Imported photographs become coordinated stationery without touching their data
   or outer board geometry. The artwork lives only in the paper stock below it. */
body[data-visual-theme='pastel-princess'] .board-object[data-kind='image'] {
  --image-frame-stock: #fffafc;
  --image-frame-edge: #e49ab8;
  --image-frame-side: 12px;
  --image-frame-bottom: 36px;
  --image-frame-primary-art: var(--princess-primary-motif);
  --image-frame-secondary-art: var(--princess-secondary-motif);
}
body[data-visual-theme='pastel-princess'] .board-object[data-kind='image'][data-image-frame='frame'] > .object-body {
  border-color: #e49ab8;
  box-shadow: inset 0 0 0 3px #fff, 0 3px 9px rgb(104 24 61 / .11);
}
body[data-visual-theme='pastel-princess'] .board-object[data-kind='image'][data-image-frame='polaroid'] > .object-body {
  border-color: #efbfd1;
  box-shadow: 0 4px 12px rgb(104 24 61 / .14);
}
body[data-visual-theme='pastel-princess'][data-princess-density='quiet'] .board-object[data-kind='image']::before { display: none; }

body[data-visual-theme='pastel-princess'] .course-card-sheet {
  color: var(--princess-deep-berry);
  border: 2px solid #efbfd1;
  border-radius: 14px;
  background:
    linear-gradient(90deg, transparent 0 17px, rgb(246 198 216 / .56) 17px 18px, transparent 18px),
    repeating-linear-gradient(transparent 0 36px, rgb(232 121 165 / .17) 36px 37px),
    linear-gradient(145deg, #fffafd, #fff3f8);
  box-shadow: inset 0 0 0 3px rgb(255 255 255 / .72), 0 5px 14px rgb(104 24 61 / .13);
  font-family: var(--princess-font-study);
}
body[data-visual-theme='pastel-princess'] .course-card-sheet::after {
  content: ''; position: absolute; top: 8px; right: 9px; width: 28px; height: 28px;
  pointer-events: none; background: var(--princess-primary-motif) center / contain no-repeat;
}
body[data-visual-theme='pastel-princess'][data-princess-density='quiet'] .course-card-sheet::after {
  width: 20px; height: 20px; opacity: .72;
}
body[data-visual-theme='pastel-princess'] .course-card-eyebrow,
body[data-visual-theme='pastel-princess'] .course-card-label { color: #a34770; }
body[data-visual-theme='pastel-princess'] .course-card-input {
  color: var(--princess-deep-berry); border-bottom-color: rgb(211 72 125 / .34);
  font-family: var(--princess-font-study);
}

body[data-visual-theme='pastel-princess'] .brand > span:last-child,
body[data-visual-theme='pastel-princess'] .workspace-tab-label,
body[data-visual-theme='pastel-princess'] .text-box-editor,
body[data-visual-theme='pastel-princess'] .guided-content {
  font-family: var(--princess-font-study);
}

/* Strawberry stationery shell ------------------------------------------------ */
body[data-visual-theme='pastel-princess'] {
  --paper: var(--princess-pearl);
  --ink: var(--princess-deep-berry);
  --panel: #fff4f8;
  --canvas: #fdeff5;
  --line: #efbfd1;
  --muted: #8a3d61;
  --accent-ui: var(--princess-deep-berry);
  --accent: var(--accent-ui);
  --pen: var(--pen-user);
  --focus: var(--accent-ui);
  --on-pen: #fffafd;
  --flag-ok: var(--princess-raspberry);
  --flag-bad: #b82961;
  color: var(--princess-deep-berry);
}

body[data-visual-theme='pastel-princess'] .toolbar {
  position: relative;
  border-bottom-color: #edb9ce;
  box-shadow: 0 2px 0 #fff, 0 5px 18px rgb(104 24 61 / .07);
}

body[data-visual-theme='pastel-princess'] .toolbar::after {
  display: none;
}

body[data-visual-theme='pastel-princess'] .brand {
  color: var(--princess-deep-berry);
  font-family: var(--princess-font-display);
  font-weight: 600;
  letter-spacing: -.75px;
}

body[data-visual-theme='pastel-princess'] .brand-mark {
  border: 1px solid #e8a5bf;
  border-radius: 14px;
  background: linear-gradient(145deg, #fffafd, #f9dce8);
  box-shadow: inset 0 0 0 3px rgb(255 255 255 / .78), 0 3px 9px rgb(104 24 61 / .10);
}

body[data-visual-theme='pastel-princess'] .chemistry-mark .mark-oxygen { display: none; }
body[data-visual-theme='pastel-princess'] .chemistry-mark .mark-oxygen-heart {
  display: block;
  fill: var(--princess-candy-pink);
  stroke: var(--princess-raspberry);
  stroke-width: 2;
}
body[data-visual-theme='pastel-princess'] .chemistry-mark .mark-bond { stroke: #d982a5; stroke-width: 5; }
body[data-visual-theme='pastel-princess'] .chemistry-mark .mark-bond-highlight { stroke: #f3bad0; stroke-width: 1.6; }
body[data-visual-theme='pastel-princess'] .chemistry-mark .mark-carbon { fill: var(--princess-deep-berry); }
body[data-visual-theme='pastel-princess'] .chemistry-mark .mark-calcium {
  fill: var(--princess-pearl);
  stroke: var(--princess-raspberry);
}

body[data-visual-theme='pastel-princess'] .ruled-writing-layer { font-family: var(--princess-font-study); }

body[data-visual-theme='pastel-princess'] .document-meta input {
  color: var(--princess-deep-berry);
  border-radius: 10px;
}
body[data-visual-theme='pastel-princess'] .document-meta input:hover,
body[data-visual-theme='pastel-princess'] .document-meta input:focus {
  border-color: #efbfd1;
  background: #fff5f9;
}
body[data-visual-theme='pastel-princess'] .divider { background: #f3d4e1; }
body[data-visual-theme='pastel-princess'] .divider span { background: #dc8cac; }
body[data-visual-theme='pastel-princess'] .divider:hover,
body[data-visual-theme='pastel-princess'] .divider.dragging { background: var(--accent); }

body[data-visual-theme='pastel-princess'] .workspace-toolbar {
  position: relative;
  z-index: 70;
  border-bottom-color: #efbfd1;
  box-shadow: 0 5px 16px rgb(104 24 61 / .045);
}
body[data-visual-theme='pastel-princess'] .workspace-toolbar::after {
  display: none;
}

body[data-visual-theme='pastel-princess'] :is(.tool-button, .icon-button, .chip, .add-line, .graph-button, .secondary-button, .segment, .text-format-toolbar button) {
  border-radius: 11px;
  box-shadow: 0 1px 0 #fff, 0 2px 5px rgb(104 24 61 / .045);
}
body[data-visual-theme='pastel-princess'] :is(.tool-button, .icon-button, .chip, .add-line, .graph-button, .secondary-button, .segment, .text-format-toolbar button):hover {
  box-shadow: 0 2px 7px rgb(104 24 61 / .09);
  transform: translateY(-1px);
}
body[data-visual-theme='pastel-princess'] :is(.chip, .segment).active,
body[data-visual-theme='pastel-princess'] :is(.tool-button, .icon-button, .chip)[aria-pressed='true'],
body[data-visual-theme='pastel-princess'] .right-pane-tab.active,
body[data-visual-theme='pastel-princess'] .right-pane-tab[aria-selected='true'] {
  color: var(--princess-deep-berry);
  border-color: var(--accent);
  background-color: color-mix(in oklab, var(--accent) 28%, var(--princess-pearl));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .7), 0 2px 6px rgb(104 24 61 / .08);
}
body[data-visual-theme='pastel-princess'] .workspace-toolbar #focus-notes.active {
  color: var(--princess-deep-berry);
  border-color: var(--accent);
  background: color-mix(in oklab, var(--accent) 28%, var(--princess-pearl));
}
body[data-visual-theme='pastel-princess'] .workspace-toolbar .chip.active,
body[data-visual-theme='pastel-princess'] .workspace-toolbar .chip[aria-pressed='true'] {
  color: var(--princess-deep-berry);
  border-color: var(--accent);
  background: color-mix(in oklab, var(--accent) 28%, var(--princess-pearl));
}
body[data-visual-theme='pastel-princess'] :is(button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid color-mix(in oklab, var(--focus) 30%, transparent);
  outline-offset: 2px;
}
body[data-visual-theme='pastel-princess'] :is(button, input, select, textarea):disabled {
  color: #8a3d61;
  border-color: #efc0d2;
  background: #fff1f7;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

body[data-visual-theme='pastel-princess'] .workspace-tab {
  border-radius: 12px 12px 0 0;
}
body[data-visual-theme='pastel-princess'] .workspace-tab:hover {
  color: var(--princess-deep-berry);
}
body[data-visual-theme='pastel-princess'] .workspace-tab.active {
  color: var(--princess-deep-berry);
  box-shadow: inset 0 3px var(--accent);
}
body[data-visual-theme='pastel-princess'] .workspace-tab.active::before {
  margin-right: 2px;
  color: var(--accent);
  content: '♥';
  font-size: 9px;
}
body[data-visual-theme='pastel-princess'] .tab-close:hover { color: #b82961; background: #ffe4ee; }

body[data-visual-theme='pastel-princess'] .pane-bar,
body[data-visual-theme='pastel-princess'] .right-pane-tabs {
  background-color: var(--princess-pearl);
  border-color: #efbfd1;
}
body[data-visual-theme='pastel-princess'] .right-pane-tabs {
  border-radius: 12px;
  box-shadow: 0 3px 10px rgb(104 24 61 / .05);
}
body[data-visual-theme='pastel-princess'] .right-pane-tab {
  border-radius: 8px;
  color: var(--princess-deep-berry);
}
body[data-visual-theme='pastel-princess'] .right-pane-tab:hover { color: var(--princess-deep-berry); }

body[data-visual-theme='pastel-princess'] :is(.tool-library, .command-palette, .formula-guides, .modal) {
  color: var(--princess-deep-berry);
  border-color: #e8b3c8;
  border-radius: 17px;
  background-color: var(--princess-pearl);
  background-image: linear-gradient(145deg, #fffafc, #fff5f9);
  box-shadow: 0 18px 48px rgb(104 24 61 / .17), inset 0 0 0 1px #fff;
}
body[data-visual-theme='pastel-princess'] .modal::backdrop { background: rgb(104 24 61 / .18); backdrop-filter: blur(3px); }
body[data-visual-theme='pastel-princess'] .modal-header,
body[data-visual-theme='pastel-princess'] .modal-footer { border-color: #f0cada; }
body[data-visual-theme='pastel-princess'] .modal-header h2 { color: var(--princess-deep-berry); font-weight: 600; }
body[data-visual-theme='pastel-princess']:not([data-readability='high']) .modal-header h2 { font-family: var(--princess-font-display); }

body[data-visual-theme='pastel-princess'] :is(input, select, textarea) {
  color: var(--princess-deep-berry);
  border-color: #eab8cb;
  border-radius: 10px;
  background-color: #fffdfd;
}
body[data-visual-theme='pastel-princess'] :is(input, select, textarea):hover { border-color: #e29ab6; }
body[data-visual-theme='pastel-princess'] :is(input, select, textarea):focus {
  border-color: var(--focus);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--focus) 15%, transparent);
}
body[data-visual-theme='pastel-princess'] input[type='checkbox'],
body[data-visual-theme='pastel-princess'] input[type='range'] { accent-color: var(--accent); }

body[data-visual-theme='pastel-princess'] .theme-preview-container.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 16%, transparent);
}
body[data-visual-theme='pastel-princess'] .princess-preview-paper {
  color: var(--princess-deep-berry);
  border-color: #e8adc3;
  background:
    radial-gradient(circle at 24% 32%, #fff 0 1.3px, transparent 1.6px) 0 0 / 9px 9px,
    linear-gradient(145deg, #fffafc, #fbdde8);
}

@media (prefers-reduced-motion: reduce) {
  body[data-visual-theme='pastel-princess'] :is(button, .workspace-tab) { transition: none; }
}

/* Writing semantics. Visual material and frame geometry are defined once,
   below and in world-frame.css; only ruled paper opts into line locking. */
body[data-visual-theme='pastel-princess'] .note-editor {
  color: var(--princess-deep-berry);
  background-origin: border-box;
}
body[data-visual-theme='pastel-princess'] .board-object { z-index: 2; }
body[data-visual-theme='pastel-princess'] .board-resize-handle {
  background: var(--hearts-handle) center / contain no-repeat;
  box-shadow: none;
}
body[data-visual-theme='pastel-princess'][data-paper='ruled'] .note-editor {
  --ruled-line-step: 32px;
  --ruled-writing-margin: 64px;
  --ruled-baseline-offset: 10px;
  --ruled-safe-right: 44px;
}
body[data-visual-theme='pastel-princess'][data-paper='ruled'] .board-decoration::before {
  position: absolute;
  top: 22px;
  bottom: 22px;
  left: 48px;
  width: 14px;
  content: '';
  background:
    radial-gradient(circle, #fff7e8 0 2px, var(--princess-rule) 2.2px 3px, transparent 3.2px) center top / 12px 32px repeat-y,
    linear-gradient(90deg, transparent 5px, color-mix(in srgb, var(--princess-rule) 24%, transparent) 5px 7px, transparent 7px);
}

/* Drawing desk ------------------------------------------------------------- */
body[data-visual-theme='pastel-princess'] .ink-bar {
  color: var(--princess-deep-berry);
  border: 1px solid #e8adc3;
  background-color: var(--princess-pearl);
  background-image: linear-gradient(135deg, #fffafc, #fff1f6);
  box-shadow: 0 9px 28px rgb(104 24 61 / .17), inset 0 0 0 1px #fff;
}
body[data-visual-theme='pastel-princess'] .ink-swatch {
  border-color: rgb(104 24 61 / .12);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .82), 0 2px 4px rgb(104 24 61 / .08);
}
body[data-visual-theme='pastel-princess'] .ink-swatch.active {
  border-color: var(--princess-deep-berry);
  box-shadow: 0 0 0 2px var(--princess-pearl) inset, 0 0 0 2px var(--accent);
}
body[data-visual-theme='pastel-princess'] .ink-rainbow {
  background: conic-gradient(from 210deg,
    var(--princess-candy-pink), var(--princess-candy-yellow), var(--princess-candy-green),
    var(--princess-candy-blue), var(--princess-candy-purple), var(--princess-candy-pink));
}
body[data-visual-theme='pastel-princess'] .ink-custom,
body[data-visual-theme='pastel-princess'] .ink-width,
body[data-visual-theme='pastel-princess'] .ink-tool {
  color: var(--princess-deep-berry);
  border-color: #edbfd0;
  background: #fffafd;
}
body[data-visual-theme='pastel-princess'] .ink-tool.active,
body[data-visual-theme='pastel-princess'] .ink-tool[aria-pressed='true'] {
  color: var(--princess-deep-berry);
  border-color: var(--accent);
  background: color-mix(in oklab, var(--accent) 28%, var(--princess-pearl));
}
body[data-visual-theme='pastel-princess'] .ink-sep { background: #efc5d5; }

/* Princess checker language ------------------------------------------------ */
body[data-visual-theme='pastel-princess'] #note-editor [data-chalk-check='ok']::after {
  color: var(--princess-raspberry);
  content: '♥';
  text-shadow: -6px -4px 0 #fff, 7px -5px 0 #f6c6d8, 5px 5px 0 #fff;
  animation: princess-correct-pop .42s ease-out both;
}
body[data-visual-theme='pastel-princess'] #note-editor [data-chalk-check='bad']::after {
  display: inline-grid;
  width: 18px;
  height: 18px;
  place-items: center;
  color: var(--princess-deep-berry);
  border: 1.5px solid var(--princess-deep-berry);
  border-radius: 4px;
  content: '✕';
  transform: rotate(-7deg);
}
body[data-visual-theme='pastel-princess'] #note-editor [data-chalk-check='narrowed']::after {
  color: var(--princess-candy-purple);
  content: '△';
  font-size: 17px;
  filter: drop-shadow(0 1px 0 #68183d);
}
body[data-visual-theme='pastel-princess'] #note-editor [data-chalk-check='unknown']::after {
  display: inline-grid;
  width: 18px;
  height: 18px;
  place-items: center;
  color: var(--princess-deep-berry);
  border: 1px solid var(--princess-candy-blue);
  border-radius: 50%;
  background-color: var(--princess-aqua);
  box-shadow: inset 0 0 0 2px rgb(255 255 255 / .72);
  content: '?';
}
body[data-visual-theme='pastel-princess'] :is(.check-badge, .chem-verdict) { font-size: 0; }
body[data-visual-theme='pastel-princess'] :is(.check-badge.check-ok, .chem-verdict[data-verdict='ok'])::after {
  color: var(--princess-raspberry);
  content: '♥';
  font-size: 17px;
  text-shadow: -5px -4px 0 #fff, 6px -5px 0 #f6c6d8;
  animation: princess-correct-pop .42s ease-out both;
}
body[data-visual-theme='pastel-princess'] :is(.check-badge.check-bad, .chem-verdict[data-verdict='bad'])::after {
  display: inline-grid;
  width: 17px;
  height: 17px;
  place-items: center;
  color: var(--princess-deep-berry);
  border: 1.5px solid currentColor;
  border-radius: 4px;
  content: '✕';
  font-size: 14px;
  transform: rotate(-7deg);
}
body[data-visual-theme='pastel-princess'] .check-badge.check-narrowed::after {
  color: var(--princess-candy-purple);
  content: '△';
  font-size: 17px;
}
body[data-visual-theme='pastel-princess'] .check-badge.check-context::after { content: '•'; font-size: 18px; color: var(--princess-deep-berry); }
body[data-visual-theme='pastel-princess'] :is(.check-badge.check-unknown, .chem-verdict[data-verdict='?'])::after {
  display: inline-grid;
  width: 18px;
  height: 18px;
  place-items: center;
  color: var(--princess-deep-berry);
  border: 1px solid var(--princess-candy-blue);
  border-radius: 50%;
  background: var(--princess-aqua);
  content: '?';
  font-size: 13px;
}

/* Scientific tools: candy categories around unchanged scientific geometry. */
body[data-visual-theme='pastel-princess'] .board-object[data-kind='lewis'],
body[data-visual-theme='pastel-princess'] .board-object[data-kind='skeletal'] {
  padding-top: 62px;
}
body[data-visual-theme='pastel-princess'] :is(.lewis-palette, .skeletal-palette) {
  top: 6px; right: auto; bottom: auto; left: 6px;
  box-sizing: border-box; width: calc(100% - 24px); max-width: calc(100% - 24px);
}
body[data-visual-theme='pastel-princess'] :is(.lewis-palette, .skeletal-palette, .geo-palette, .chem-palette) {
  color: var(--princess-deep-berry);
  border: 1px solid var(--princess-strawberry);
  border-radius: 11px;
  background-color: var(--princess-pearl);
  box-shadow: 0 5px 14px rgb(104 24 61 / .09);
}
body[data-visual-theme='pastel-princess'] :is(.lewis-palette, .skeletal-palette, .geo-palette, .chem-palette) button {
  color: #7f3658;
  border-color: #efc0d2;
  border-radius: 8px;
  background: #fffafd;
}
body[data-visual-theme='pastel-princess'] :is(.lewis-palette, .skeletal-palette, .geo-palette, .chem-palette) button:is(:hover, :focus-visible, .active, [aria-pressed='true']) {
  color: var(--princess-deep-berry);
  border-color: var(--accent);
  background: color-mix(in oklab, var(--accent) 28%, var(--princess-pearl));
}
body[data-visual-theme='pastel-princess'] .dimensional-toolbar {
  padding: 7px 9px;
  border: 1px solid #dec7f0;
  border-radius: 10px;
  background-color: var(--princess-lavender);
}
body[data-visual-theme='pastel-princess'] .dimensional-board
  :is(.dimensional-toolbar > strong, .dimensional-target-label, .dimensional-exact-label) { color: var(--princess-deep-berry); }
body[data-visual-theme='pastel-princess'] .dimensional-given { background: var(--princess-pearl); }
body[data-visual-theme='pastel-princess'] .dimensional-factor-group:nth-child(4n + 2) .dimensional-factor { background: var(--princess-buttercream); }
body[data-visual-theme='pastel-princess'] .dimensional-factor-group:nth-child(4n + 3) .dimensional-factor { background: var(--princess-pistachio); }
body[data-visual-theme='pastel-princess'] .dimensional-factor-group:nth-child(4n) .dimensional-factor { background: var(--princess-aqua); }
body[data-visual-theme='pastel-princess'] .dimensional-factor-group:nth-child(4n + 1) .dimensional-factor { background: var(--princess-lavender); }
body[data-visual-theme='pastel-princess'] :is(.dimensional-factor, .dimensional-given) {
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgb(211 72 125 / .10);
}
body[data-visual-theme='pastel-princess'] .dimensional-separator { background: #e8a9c1; }
body[data-visual-theme='pastel-princess'] .dimensional-numerator { border-bottom-color: var(--accent); }
body[data-visual-theme='pastel-princess'] .dimensional-board :is(.dimensional-target, .dimensional-value, .dimensional-units, button) {
  color: var(--princess-deep-berry);
  border-color: #e9b5c8;
  background: var(--princess-pearl);
}
body[data-visual-theme='pastel-princess'] .dimensional-board button:disabled {
  color: #9a6079;
  opacity: 1;
  background: #fff6f9;
}

body[data-visual-theme='pastel-princess'] .graph-curve {
  stroke-width: 2.5;
  filter: drop-shadow(0 0 .45px var(--princess-deep-berry));
}
body[data-visual-theme='pastel-princess'] .graph-curve-0 { stroke: var(--princess-candy-pink); }
body[data-visual-theme='pastel-princess'] .graph-curve-1 { stroke: var(--princess-candy-blue); }
body[data-visual-theme='pastel-princess'] .graph-curve-2 { stroke: var(--princess-candy-green); }
body[data-visual-theme='pastel-princess'] .graph-curve-3 { stroke: var(--princess-candy-purple); }
body[data-visual-theme='pastel-princess'] :is(.graph-vector-head-0, .graph-vector-head-1, .graph-vector-head-2, .graph-vector-head-3) {
  stroke: var(--princess-deep-berry);
  stroke-width: .35px;
  paint-order: stroke fill;
}
body[data-visual-theme='pastel-princess'] .graph-vector-head-0 { fill: var(--princess-candy-pink); }
body[data-visual-theme='pastel-princess'] .graph-vector-head-1 { fill: var(--princess-candy-blue); }
body[data-visual-theme='pastel-princess'] .graph-vector-head-2 { fill: var(--princess-candy-green); }
body[data-visual-theme='pastel-princess'] .graph-vector-head-3 { fill: var(--princess-candy-purple); }

body[data-visual-theme='pastel-princess'] .board-table th {
  color: var(--princess-deep-berry);
  border-color: #efbfd1;
  background-color: var(--princess-buttercream);
}
body[data-visual-theme='pastel-princess'] .board-table td { color: var(--princess-deep-berry); border-color: #efc9d8; }
body[data-visual-theme='pastel-princess'] .board-table tbody tr:nth-child(odd) td { background-color: var(--princess-pistachio); }
body[data-visual-theme='pastel-princess'] .board-table tbody tr:nth-child(even) td { background-color: var(--princess-aqua); }

body[data-visual-theme='pastel-princess'] :is(.calc-row math-field, .key, .formula-item, .formula-section, .formula-guides, .chem-reference-group) {
  border-color: #efc4d4;
  background-color: var(--princess-pearl);
}
body[data-visual-theme='pastel-princess'] .calc-row.is-active { border-color: #e18caf; background: #fff0f6; }
/* Stationery color follows key meaning, including after users hide keys. */
body[data-visual-theme='pastel-princess'] #calculator-keypad .key { color: var(--princess-deep-berry); background-color: var(--princess-pearl); }
body[data-visual-theme='pastel-princess'] #calculator-keypad :is(.key-function, .key-utility) { background-color: #f8f0fa; }
body[data-visual-theme='pastel-princess'] #calculator-keypad .key-operator { background-color: #f8dfe9; }
body[data-visual-theme='pastel-princess'] #calculator-keypad .key-equals { color: #fffafd; border-color: #782447; background-color: #782447; }
body[data-visual-theme='pastel-princess'] #calculator-keypad .key:hover { background-color: #f4d3e2; }
body[data-visual-theme='pastel-princess'] #calculator-keypad .key-equals:hover { background-color: #601735; }
body[data-visual-theme='pastel-princess'] .calc-mini { color: var(--princess-deep-berry); background-color: var(--princess-pearl); }
body[data-visual-theme='pastel-princess'] .calc-mini.active { color: var(--princess-deep-berry); background-color: #f8dfe9; }
body[data-visual-theme='pastel-princess'] .formula-section:nth-of-type(4n + 1) > summary { background-color: rgb(246 198 216 / .32); }
body[data-visual-theme='pastel-princess'] .formula-section:nth-of-type(4n + 2) > summary { background-color: rgb(255 252 223 / .62); }
body[data-visual-theme='pastel-princess'] .formula-section:nth-of-type(4n + 3) > summary { background-color: rgb(222 254 249 / .58); }
body[data-visual-theme='pastel-princess'] .formula-section:nth-of-type(4n) > summary { background-color: rgb(239 224 253 / .52); }

/* The periodic table is the palette authority. */
body[data-visual-theme='pastel-princess'] :is(.ptable-cell, .ptable-key-chip).cat-am { background: var(--princess-strawberry); }
body[data-visual-theme='pastel-princess'] :is(.ptable-cell, .ptable-key-chip).cat-ae { background: var(--princess-buttercream); }
body[data-visual-theme='pastel-princess'] :is(.ptable-cell, .ptable-key-chip).cat-tm { background: var(--princess-aqua); }
body[data-visual-theme='pastel-princess'] :is(.ptable-cell, .ptable-key-chip).cat-pm { background: var(--princess-pistachio); }
body[data-visual-theme='pastel-princess'] :is(.ptable-cell, .ptable-key-chip).cat-md { background: var(--princess-lavender); }
body[data-visual-theme='pastel-princess'] :is(.ptable-cell, .ptable-key-chip).cat-nm { background: #e2f6e4; }
body[data-visual-theme='pastel-princess'] :is(.ptable-cell, .ptable-key-chip).cat-hl { background: #f9dfe9; }
body[data-visual-theme='pastel-princess'] :is(.ptable-cell, .ptable-key-chip).cat-ng { background: #e3f6fb; }
body[data-visual-theme='pastel-princess'] :is(.ptable-cell, .ptable-key-chip).cat-ln { background: #fff5d3; }
body[data-visual-theme='pastel-princess'] :is(.ptable-cell, .ptable-key-chip).cat-an { background: #eadcf4; }

body[data-visual-theme='pastel-princess'] :is(.text-box-editor, .ruled-writing-layer) > ul > li::marker {
  color: var(--princess-raspberry);
  content: '♥  ';
  font-size: .92em;
}
body[data-visual-theme='pastel-princess'] :is(.text-box-editor, .ruled-writing-layer) ul ul > li::marker {
  color: var(--princess-deep-berry);
  content: '♥  ';
  font-size: .72em;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) {
  body[data-visual-theme='pastel-princess'] .toolbar::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-visual-theme='pastel-princess'] #note-editor [data-chalk-check='ok']::after,
  body[data-visual-theme='pastel-princess'] :is(.check-badge.check-ok, .chem-verdict[data-verdict='ok'])::after {
    animation: none;
  }
}

@media print {
  body[data-visual-theme='pastel-princess'] :is(.board-decoration, .board-ornament),
  body[data-visual-theme='pastel-princess'] .ink-stage::before,
  body[data-visual-theme='pastel-princess'] .ink-stage::after,
  body[data-visual-theme='pastel-princess'] .toolbar::after,
  body[data-visual-theme='pastel-princess'] .workspace-toolbar::after {
    display: none !important;
  }
  body[data-visual-theme='pastel-princess'] :is(.note-editor, .print-board-content) {
    color: #111 !important;
    border-color: transparent !important;
    background: #fff !important;
    box-shadow: none !important;
  }
  body[data-visual-theme='pastel-princess'] .board-table :is(th, td) {
    color: #111 !important;
    border-color: #aaa !important;
    background: transparent !important;
  }
}

/* Eight Worlds — Princess pen-and-wash stationery.
   The approved Strawberry drawing anchors the illustration language. Geometry,
   alpha-safe joins, material grain and exterior placement live in world-frame.css. */
body[data-visual-theme='pastel-princess'] {
  --princess-board-layer: 0;
  --princess-surface-layer: 1;
  --princess-atmosphere-layer: 5;
  --princess-lace-layer: 4;
  --princess-focal-layer: 6;
  --princess-authored-art-opacity: 1;
  --princess-focal-mode: independent;
  --world-paper-grain: url('./assets/sketch-worlds/paper-grain.png');
  --world-chalk-grain: url('./assets/sketch-worlds/chalk-grain.png');
  --world-surface: var(--princess-paper);
  --world-rule: var(--princess-rule);
  --princess-margin-x: 58px;
}

body[data-visual-theme='pastel-princess'][data-princess-motif='strawberry'] {
  --world-accent-a: url('./assets/sketch-worlds/strawberry/accent-a.png');
  --world-accent-b: url('./assets/sketch-worlds/strawberry/accent-b.png');
  --world-accent-c: url('./assets/sketch-worlds/strawberry/accent-c.png');
  --princess-dot: #de7699;
  --princess-control-ink: #7f3658;
  --princess-control-line: #efc0d2;
  --princess-control-line-strong: #e89fbb;
  --princess-control-hover: #fff0f6;
  --princess-shell: #f8edf2;
  --princess-toolbar: #fff8fa;
  --princess-toolbar-end: #fffce8;
  --princess-workspace: #f1dfe7;
  --princess-pane: #faeef3;
  --paper: #fffafc;
  --panel: #fff4f8;
  --canvas: #fdeff5;
  --line: #efbfd1;
}

body[data-visual-theme='pastel-princess'][data-princess-motif='cherry-ribbon'] {
  --world-accent-a: url('./assets/sketch-worlds/cherry-ribbon/accent-a.png');
  --world-accent-b: url('./assets/sketch-worlds/cherry-ribbon/accent-b.png');
  --world-accent-c: url('./assets/sketch-worlds/cherry-ribbon/accent-c.png');
  --princess-dot: #d33d61;
  --princess-strawberry: #f7bfd1;
  --princess-raspberry: #d33d61;
  --princess-deep-berry: #651b38;
  --princess-candy-pink: #eb6f91;
  --princess-lavender: #eadff6;
  --princess-aqua: #e3f5e9;
  --princess-pearl: #fffaf7;
  --princess-control-ink: #7b2849;
  --princess-control-line: #efb4c6;
  --princess-control-line-strong: #e67596;
  --princess-control-hover: #fff0f4;
  --princess-shell: #f8e9ef;
  --princess-toolbar: #fff7f9;
  --princess-toolbar-end: #fff8e8;
  --princess-workspace: #f0dce5;
  --princess-pane: #faedf2;
  --paper: #fffaf7;
  --panel: #fff1f5;
  --canvas: #fcecf2;
  --line: #efb4c6;
}

body[data-visual-theme='pastel-princess'] {
  background-color: var(--princess-shell);
  background-image: linear-gradient(118deg, var(--princess-shell), var(--princess-pane));
}
body[data-visual-theme='pastel-princess'] .app-shell { background: var(--princess-shell); }
body[data-visual-theme='pastel-princess'] .toolbar {
  background-color: var(--princess-toolbar);
  background-image: linear-gradient(90deg, var(--princess-toolbar), var(--princess-toolbar-end));
}
body[data-visual-theme='pastel-princess'] .workspace-toolbar {
  background-color: var(--princess-pane);
  background-image: linear-gradient(90deg, var(--princess-pane), var(--princess-toolbar));
}
body[data-visual-theme='pastel-princess'] .workspace-pane { background: var(--princess-workspace); }
body[data-visual-theme='pastel-princess'] .editor-scroll {
  overflow-x: hidden;
  background-color: var(--princess-workspace);
}
body[data-visual-theme='pastel-princess'] .graph-pane {
  background-color: var(--princess-pearl);
  background-image: linear-gradient(180deg, var(--princess-pearl), var(--princess-pane));
  box-shadow: inset 1px 0 var(--princess-control-line);
}
body[data-visual-theme='pastel-princess'] :is(.tool-button, .icon-button, .chip, .add-line, .graph-button, .secondary-button, .segment, .text-format-toolbar button) {
  color: var(--princess-control-ink);
  border-color: var(--princess-control-line);
  background-color: var(--princess-pearl);
}
body[data-visual-theme='pastel-princess'] :is(.tool-button, .icon-button, .chip, .add-line, .graph-button, .secondary-button, .segment, .text-format-toolbar button):hover {
  color: var(--princess-deep-berry);
  border-color: var(--princess-control-line-strong);
  background-color: var(--princess-control-hover);
}
body[data-visual-theme='pastel-princess'] .notebook-tabs { border-bottom-color: var(--princess-control-line); }
body[data-visual-theme='pastel-princess'] .workspace-tab { color: var(--princess-control-ink); }
body[data-visual-theme='pastel-princess'] .workspace-tab:hover { background: var(--princess-control-hover); }
body[data-visual-theme='pastel-princess'] .workspace-tab.active {
  border-color: var(--princess-control-line-strong);
  background: var(--princess-pearl);
}

/* Five distinct papers; all rule geometry is horizontal or vertical. */
body[data-visual-theme='pastel-princess'][data-paper='blank'] { --world-surface: var(--princess-paper); }
body[data-visual-theme='pastel-princess'][data-paper='ruled'] { --world-surface: var(--princess-paper-alt); }
body[data-visual-theme='pastel-princess'][data-paper='dots'] { --world-surface: color-mix(in srgb, var(--princess-paper) 94%, var(--princess-paper-alt)); }
body[data-visual-theme='pastel-princess'][data-paper='grid'] { --world-surface: color-mix(in srgb, var(--princess-paper-alt) 76%, #fff8df); }
body[data-visual-theme='pastel-princess'][data-paper='chalkboard'] { --world-surface: var(--princess-chalk-surface); }

body[data-visual-theme='pastel-princess'][data-paper='blank'] .note-editor {
  background-image:
    radial-gradient(ellipse at 12% 9%, color-mix(in srgb, var(--princess-rule) 9%, transparent), transparent 47%),
    radial-gradient(ellipse at 88% 95%, rgb(249 227 190 / .16), transparent 43%);
  background-position: left top, right bottom;
  background-size: auto, auto;
  background-repeat: no-repeat;
}
body[data-visual-theme='pastel-princess'][data-paper='ruled'] .note-editor {
  background-image:
    linear-gradient(90deg, transparent 0 var(--princess-margin-x), color-mix(in srgb, var(--princess-rule) 75%, transparent) var(--princess-margin-x) calc(var(--princess-margin-x) + 1px), transparent calc(var(--princess-margin-x) + 1px)),
    linear-gradient(180deg, transparent 0 31px, color-mix(in srgb, var(--princess-rule) 57%, transparent) 31px 32px);
  /* Margin belongs to the sheet; horizontal rules share the typing origin. */
  background-origin: border-box, content-box;
  background-position: 0 0, 0 0;
  background-size: 100% 100%, 100% 32px;
  background-repeat: no-repeat, repeat;
}
body[data-visual-theme='pastel-princess'][data-paper='dots'] .note-editor {
  background-image: var(--princess-dot-grid);
  background-position: 0 0;
  background-size: 120px 120px;
  background-repeat: repeat;
}
body[data-visual-theme='pastel-princess'][data-paper='grid'] .note-editor {
  background-image:
    linear-gradient(180deg, color-mix(in srgb, var(--princess-rule) 29%, transparent) 0 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--princess-rule) 29%, transparent) 0 1px, transparent 1px),
    linear-gradient(180deg, color-mix(in srgb, var(--princess-rule) 49%, transparent) 0 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--princess-rule) 49%, transparent) 0 1px, transparent 1px);
  background-position: 0 0;
  background-repeat: repeat;
}
body[data-visual-theme='pastel-princess'][data-paper='chalkboard'] .note-editor {
  padding: 38px;
  color: #fff7e9;
  background-image:
    radial-gradient(ellipse at 17% 25%, rgb(255 244 215 / .06), transparent 40%),
    radial-gradient(ellipse at 82% 74%, rgb(24 13 20 / .09), transparent 43%),
    linear-gradient(145deg, color-mix(in srgb, var(--princess-chalk-surface) 94%, #fff7e1), var(--princess-chalk-surface));
  background-position: left top, right bottom, center;
  background-size: auto;
  background-repeat: no-repeat;
}
body[data-visual-theme='pastel-princess'][data-paper='chalkboard'] .note-editor :is(math-field, code) { color: #fff7e9; }
body[data-visual-theme='pastel-princess'][data-paper='chalkboard'] .dimensional-board
  :is(.dimensional-target, .dimensional-units) { color: var(--princess-deep-berry); }
body[data-visual-theme='pastel-princess'][data-paper='chalkboard'] .note-editor .dimensional-result {
  background: var(--princess-chalk-surface);
}
@media (max-width: 600px) {
  body[data-visual-theme='pastel-princess'] { --princess-margin-x: 44px; }
  body[data-visual-theme='pastel-princess'][data-paper='ruled'] .board-decoration::before { left: 34px; }
  body[data-visual-theme='pastel-princess'][data-paper='chalkboard'] .note-editor { padding: 28px 22px; }
}

/* V189 artwork approved by the owner; geometry and safe writing insets persist. */
body[data-visual-theme='pastel-princess'][data-princess-motif='strawberry'] {
  --world-focal: url('./assets/refined-worlds/strawberry/focal.png');
  --world-rail-top: url('./assets/refined-worlds/strawberry/rail-top.svg');
  --world-rail-bottom: url('./assets/refined-worlds/strawberry/rail-bottom.svg');
  --world-rail-left: url('./assets/refined-worlds/strawberry/rail-left.svg');
  --world-rail-right: url('./assets/refined-worlds/strawberry/rail-right.svg');
  --world-corner-tl: url('./assets/refined-worlds/strawberry/corner-tl.svg');
  --world-corner-tr: url('./assets/refined-worlds/strawberry/corner-tr.svg');
  --world-corner-bl: url('./assets/refined-worlds/strawberry/corner-bl.svg');
  --world-corner-br: url('./assets/refined-worlds/strawberry/corner-br.svg');
}

body[data-visual-theme='pastel-princess'][data-princess-motif='cherry-ribbon'] {
  --world-focal: url('./assets/refined-worlds/cherry-ribbon/focal.png');
  --world-rail-top: url('./assets/refined-worlds/cherry-ribbon/rail-top.svg');
  --world-rail-bottom: url('./assets/refined-worlds/cherry-ribbon/rail-bottom.svg');
  --world-rail-left: url('./assets/refined-worlds/cherry-ribbon/rail-left.svg');
  --world-rail-right: url('./assets/refined-worlds/cherry-ribbon/rail-right.svg');
  --world-corner-tl: url('./assets/refined-worlds/cherry-ribbon/corner-tl.svg');
  --world-corner-tr: url('./assets/refined-worlds/cherry-ribbon/corner-tr.svg');
  --world-corner-bl: url('./assets/refined-worlds/cherry-ribbon/corner-bl.svg');
  --world-corner-br: url('./assets/refined-worlds/cherry-ribbon/corner-br.svg');
}
