@font-face {
  font-family: "Whiteboard Hand";
  src: url("assets/fonts/Xiaolai-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/*
 * Clean handwritten board system.
 * This file is intentionally loaded last. It owns board composition while the
 * older stylesheets continue to style the surrounding editor.
 */
.board[data-board-system="clean-handwritten"] {
  --wb-ink: #171717;
  --wb-red: #d7392f;
  --wb-muted: #73706b;
  --wb-soft-red: #fff2f0;
  --wb-hand: "Whiteboard Hand", "Microsoft YaHei", sans-serif;
  background: #fff !important;
  color: var(--wb-ink) !important;
  font-family: var(--wb-hand) !important;
  letter-spacing: .025em;
  outline: 0 !important;
  box-shadow: 0 18px 50px rgb(20 20 20 / .16), 0 2px 8px rgb(20 20 20 / .08) !important;
}

.board[data-board-system="clean-handwritten"].paper {
  background: #fff !important;
}

.board[data-board-system="clean-handwritten"] .board-grain {
  opacity: .008 !important;
  background-image: radial-gradient(#111 0 .28px, transparent .48px) !important;
  background-size: 13px 15px !important;
}

.board[data-board-system="clean-handwritten"] .board-inner {
  inset: 0 !important;
  padding: 7.6cqh 8.4cqw 6.5cqh !important;
  display: flex !important;
  flex-direction: column !important;
}

.board[data-board-system="clean-handwritten"] .safe-guide {
  inset: 5.6% 6.2% 6.2% !important;
  border: 1px dashed rgb(215 57 47 / .28) !important;
}

.board[data-board-system="clean-handwritten"] .safe-guide::before {
  color: rgb(215 57 47 / .48) !important;
  font: 7px/1 "Microsoft YaHei", sans-serif !important;
}

/* Keep the guide's geometry available to the fitter and QA while hiding it visually. */
.board[data-board-system="clean-handwritten"] .safe-guide.hidden {
  display: block !important;
  visibility: hidden !important;
}

.board[data-board-system="clean-handwritten"] .board-element {
  color: var(--element-color, var(--wb-ink)) !important;
  filter: none !important;
  text-shadow: none !important;
}

.board[data-board-system="clean-handwritten"] .board-element:hover,
.board[data-board-system="clean-handwritten"] .board-element.selected {
  outline: 0 !important;
}

.board[data-board-system="clean-handwritten"] .eyebrow-element {
  display: none !important;
}

.board[data-board-system="clean-handwritten"][data-header-mode="quiet"] .eyebrow-element {
  display: none !important;
}

.board[data-board-system="clean-handwritten"] .board-layout,
.board[data-board-system="clean-handwritten"][data-skin-treatment] .board-layout {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 5.5cqh 0 2.8cqh !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  gap: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.board[data-board-system="clean-handwritten"][data-header-mode="quiet"] .board-layout {
  padding-top: 1.6cqh !important;
}

.board[data-board-system="clean-handwritten"] .board-copy,
.board[data-board-system="clean-handwritten"][data-skin] .board-copy {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  color: var(--wb-ink) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  text-align: left !important;
}

.board[data-board-system="clean-handwritten"] .title-element {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: pre-line !important;
  overflow: visible !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  text-wrap: balance;
  color: var(--element-color, var(--wb-ink)) !important;
  font: 400 clamp(31px, 9.1cqw, 80px)/1.18 var(--wb-hand) !important;
  letter-spacing: .025em !important;
  text-shadow: .01em 0 currentColor, -.006em 0 currentColor !important;
  transform: translate(var(--move-x, 0), var(--move-y, 0)) scale(var(--element-scale, 1)) !important;
  transform-origin: left center !important;
}

.board[data-board-system="clean-handwritten"].title-short .title-element {
  font-size: clamp(34px, 10.2cqw, 90px) !important;
}

.board[data-board-system="clean-handwritten"].title-long .title-element,
.board[data-board-system="clean-handwritten"].dense .title-element {
  font-size: clamp(27px, 7.6cqw, 68px) !important;
  line-height: 1.18 !important;
}

.board[data-board-system="clean-handwritten"] .red-line {
  display: none !important;
  width: min(48%, 11em) !important;
  height: clamp(7px, 1.5cqw, 13px) !important;
  margin: 1.5cqh 0 2.3cqh !important;
  border: 0 !important;
  background: transparent !important;
  transform: rotate(-.7deg) !important;
  box-shadow: none !important;
}

.board[data-board-system="clean-handwritten"] .red-line::before,
.board[data-board-system="clean-handwritten"] .red-line::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 42%;
  border-top: clamp(2px, .48cqw, 4px) solid var(--wb-red);
  border-radius: 50%;
  transform: rotate(.6deg);
}

.board[data-board-system="clean-handwritten"] .red-line::after {
  left: 6%;
  right: 11%;
  top: 66%;
  opacity: .28;
  transform: rotate(-.45deg);
}

.board[data-board-system="clean-handwritten"] .body-element {
  width: auto !important;
  max-width: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  overflow-wrap: anywhere !important;
  color: var(--element-color, var(--wb-ink)) !important;
  font: 400 clamp(19px, 4.7cqw, 42px)/1.55 var(--wb-hand) !important;
  letter-spacing: .025em !important;
  text-shadow: .007em 0 currentColor !important;
  transform: translate(var(--move-x, 0), var(--move-y, 0)) scale(var(--element-scale, 1)) !important;
  transform-origin: left center !important;
}

.board[data-board-system="clean-handwritten"].dense .body-element {
  font-size: clamp(17px, 4cqw, 35px) !important;
  line-height: 1.5 !important;
}

.board[data-board-system="clean-handwritten"] .accent-element,
.board[data-board-system="clean-handwritten"][data-skin] .accent-element {
  position: relative !important;
  inset: auto !important;
  display: inline-block !important;
  width: auto !important;
  max-width: 94% !important;
  min-height: 0 !important;
  margin: 4.2cqh 0 0 !important;
  padding: 0 .08em .3em !important;
  overflow: visible !important;
  overflow-wrap: anywhere !important;
  border: 0 !important;
  border-bottom: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--element-color, var(--wb-red)) !important;
  font: 400 clamp(22px, 5.5cqw, 48px)/1.34 var(--wb-hand) !important;
  letter-spacing: .035em !important;
  text-shadow: .01em 0 currentColor, -.006em 0 currentColor !important;
  transform: translate(var(--move-x, 0), var(--move-y, 0)) rotate(-.18deg) scale(var(--element-scale, 1)) !important;
  transform-origin: left center !important;
}

.board[data-board-system="clean-handwritten"] .accent-element::before {
  display: none !important;
}

.board[data-board-system="clean-handwritten"] .accent-element::after {
  content: "";
  position: absolute;
  left: -.04em;
  right: -.08em;
  bottom: .08em;
  border-top: .11em solid var(--wb-red);
  border-radius: 50%;
  transform: rotate(-.8deg);
}

.board[data-board-system="clean-handwritten"] .accent-element:empty,
.board[data-board-system="clean-handwritten"] .body-element:empty,
.board[data-board-system="clean-handwritten"] .board-visual:empty {
  display: none !important;
}

.board[data-board-system="clean-handwritten"] .board-visual,
.board[data-board-system="clean-handwritten"][data-skin] .board-visual {
  flex: 0 0 auto !important;
  width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 4.2cqh 0 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
}

.board[data-board-system="clean-handwritten"][data-ratio] .board-visual {
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: 0 !important;
}

.board[data-board-system="clean-handwritten"][data-ratio] .points,
.board[data-board-system="clean-handwritten"][data-ratio] .stack-diagram,
.board[data-board-system="clean-handwritten"][data-ratio] .question-diagram,
.board[data-board-system="clean-handwritten"][data-ratio] .flow-diagram,
.board[data-board-system="clean-handwritten"][data-ratio] .timeline-diagram,
.board[data-board-system="clean-handwritten"][data-ratio] .hierarchy-diagram,
.board[data-board-system="clean-handwritten"][data-ratio] .cause-diagram,
.board[data-board-system="clean-handwritten"][data-ratio] .compare-diagram,
.board[data-board-system="clean-handwritten"][data-ratio] .spotlight-diagram {
  height: auto !important;
  min-height: 0 !important;
}

.board[data-board-system="clean-handwritten"][data-ratio] .compare-card,
.board[data-board-system="clean-handwritten"][data-ratio] .cause-card,
.board[data-board-system="clean-handwritten"][data-ratio] .hierarchy-node {
  height: auto !important;
  min-height: 0 !important;
}

.board[data-board-system="clean-handwritten"][data-ratio] .compare-diagram {
  grid-template-columns: minmax(0, 1fr) 2.2em minmax(0, 1fr) !important;
  grid-template-rows: auto !important;
  align-items: start !important;
}

.board[data-board-system="clean-handwritten"][data-ratio] .board-layout {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  align-content: normal !important;
  justify-content: flex-start !important;
}

.board[data-board-system="clean-handwritten"][data-ratio] .structural-accent {
  position: relative !important;
  inset: auto !important;
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: 94% !important;
  margin-top: 3.6cqh !important;
  padding: 0 .08em .22em !important;
}

.board[data-board-system="clean-handwritten"][data-ratio].layout-cover .board-layout,
.board[data-board-system="clean-handwritten"][data-ratio].layout-question .board-layout,
.board[data-board-system="clean-handwritten"][data-ratio].layout-quote .board-layout {
  justify-content: flex-start !important;
  padding-top: 10cqh !important;
}

.board[data-board-system="clean-handwritten"] .points,
.board[data-board-system="clean-handwritten"] .stack-diagram,
.board[data-board-system="clean-handwritten"] .question-diagram,
.board[data-board-system="clean-handwritten"] .flow-diagram,
.board[data-board-system="clean-handwritten"] .timeline-diagram,
.board[data-board-system="clean-handwritten"] .hierarchy-diagram,
.board[data-board-system="clean-handwritten"] .cause-diagram,
.board[data-board-system="clean-handwritten"] .compare-diagram,
.board[data-board-system="clean-handwritten"] .spotlight-diagram {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: translate(var(--move-x, 0), var(--move-y, 0)) scale(var(--element-scale, 1)) !important;
  transform-origin: left center !important;
}

/* Standard notes: large writing, no card stack. */
.board[data-board-system="clean-handwritten"] .points {
  display: grid !important;
  gap: 2.8cqh !important;
}

.board[data-board-system="clean-handwritten"] .points .point-element,
.board[data-board-system="clean-handwritten"] .stack-diagram .point-element {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 2.1em minmax(0, 1fr) !important;
  align-items: start !important;
  gap: .55em !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 0 .42em !important;
  border: 0 !important;
  border-bottom: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--wb-ink) !important;
  font: 400 clamp(20px, 5cqw, 44px)/1.46 var(--wb-hand) !important;
  text-align: left !important;
  transform: none !important;
}

.board[data-board-system="clean-handwritten"] .points .point-element,
.board[data-board-system="clean-handwritten"] .stack-diagram .point-element,
.board[data-board-system="clean-handwritten"] .question-item,
.board[data-board-system="clean-handwritten"] .flow-diagram .point-element,
.board[data-board-system="clean-handwritten"] .timeline-stop {
  transform: none !important;
}

.board[data-board-system="clean-handwritten"] .points .point-element b {
  display: grid !important;
  place-items: center !important;
  width: 1.7em !important;
  height: 1.7em !important;
  margin: .02em 0 0 !important;
  border: .1em solid var(--wb-red) !important;
  border-radius: 52% 48% 46% 54% !important;
  background: transparent !important;
  color: var(--wb-red) !important;
  font: 700 .62em/1 Arial, sans-serif !important;
  transform: rotate(-4deg) !important;
}

.board[data-board-system="clean-handwritten"] .points .point-element p,
.board[data-board-system="clean-handwritten"] .stack-diagram .point-element span {
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  overflow-wrap: anywhere !important;
}

.board[data-board-system="clean-handwritten"] .stack-diagram {
  display: grid !important;
  gap: 2.5cqh !important;
}

.board[data-board-system="clean-handwritten"] .stack-diagram .point-element {
  grid-template-columns: auto !important;
  padding-left: 1.15em !important;
}

.board[data-board-system="clean-handwritten"] .stack-diagram .point-element::before {
  content: "";
  position: absolute;
  left: 0;
  top: .52em;
  width: .55em;
  height: .55em;
  border-radius: 50%;
  background: var(--wb-red);
}

.board[data-board-system="clean-handwritten"] .stack-diagram .point-element:nth-child(2) {
  color: var(--wb-red) !important;
  border-color: rgb(215 57 47 / .35) !important;
}

/* Question: one prompt plus up to three compact choices. */
.board[data-board-system="clean-handwritten"].layout-question .board-layout,
.board[data-board-system="clean-handwritten"].layout-quote .board-layout {
  justify-content: flex-start !important;
  padding-top: 10cqh !important;
  padding-bottom: 6cqh !important;
}

.board[data-board-system="clean-handwritten"].layout-question .board-copy,
.board[data-board-system="clean-handwritten"].layout-quote .board-copy {
  position: relative !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: 96% !important;
}

.board[data-board-system="clean-handwritten"].layout-quote .board-copy::before {
  display: none !important;
  content: none !important;
}

.board[data-board-system="clean-handwritten"].layout-question .accent-element,
.board[data-board-system="clean-handwritten"].layout-quote .accent-element,
.board[data-board-system="clean-handwritten"].layout-cover .accent-element {
  margin-top: 4cqh !important;
  padding: .18em .48em .25em !important;
  border: .1em solid var(--wb-red) !important;
  border-radius: 49% 52% 48% 51% / 48% 45% 55% 52% !important;
  transform: translate(var(--move-x, 0), var(--move-y, 0)) rotate(-1.2deg) scale(var(--element-scale, 1)) !important;
}

.board[data-board-system="clean-handwritten"].layout-question .accent-element::after,
.board[data-board-system="clean-handwritten"].layout-quote .accent-element::after,
.board[data-board-system="clean-handwritten"].layout-cover .accent-element::after {
  inset: -.09em -.16em -.12em -.12em;
  border: .055em solid rgb(215 57 47 / .48);
  border-radius: 53% 47% 51% 49% / 48% 55% 45% 52%;
  transform: rotate(1.4deg);
}

.board[data-board-system="clean-handwritten"] .question-diagram {
  display: grid !important;
  gap: 2cqh !important;
}

.board[data-board-system="clean-handwritten"] .question-item {
  display: grid !important;
  grid-template-columns: 1.7em minmax(0, 1fr) !important;
  align-items: baseline !important;
  gap: .6em !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--wb-ink) !important;
  font: 400 clamp(18px, 4.5cqw, 40px)/1.42 var(--wb-hand) !important;
}

.board[data-board-system="clean-handwritten"] .question-item b {
  color: var(--wb-red) !important;
  font: 700 .85em/1 Arial, sans-serif !important;
}

.board[data-board-system="clean-handwritten"] .question-item p {
  min-width: 0 !important;
  margin: 0 !important;
  overflow-wrap: anywhere !important;
}

/* Flow and timeline use a teacher-style vertical writing rail. */
.board[data-board-system="clean-handwritten"] .flow-diagram,
.board[data-board-system="clean-handwritten"] .timeline-diagram {
  display: grid !important;
  gap: 2.2cqh !important;
}

.board[data-board-system="clean-handwritten"] .flow-diagram .point-element,
.board[data-board-system="clean-handwritten"] .timeline-stop {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 2.15em minmax(0, 1fr) !important;
  align-items: center !important;
  gap: .7em !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 0 .45em !important;
  border: 0 !important;
  border-bottom: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--wb-ink) !important;
  font: 400 clamp(20px, 4.9cqw, 43px)/1.44 var(--wb-hand) !important;
  text-align: left !important;
  transform: none !important;
}

.board[data-board-system="clean-handwritten"] .flow-diagram .point-element b,
.board[data-board-system="clean-handwritten"] .timeline-stop b {
  display: grid !important;
  place-items: center !important;
  width: 1.9em !important;
  height: 1.9em !important;
  border: .11em solid var(--wb-red) !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: var(--wb-red) !important;
  font: 700 .72em/1 Arial, sans-serif !important;
}

.board[data-board-system="clean-handwritten"] .flow-diagram .point-element::after {
  content: "↓" !important;
  left: .56em !important;
  bottom: -1.42em !important;
  color: var(--wb-red) !important;
  font: 700 .9em/1 Arial, sans-serif !important;
  transform: none !important;
}

.board[data-board-system="clean-handwritten"] .flow-diagram .point-element p,
.board[data-board-system="clean-handwritten"] .timeline-stop p {
  min-width: 0 !important;
  margin: 0 !important;
  overflow-wrap: anywhere !important;
}

/* Comparison is a real two-column comparison, without cards. */
.board[data-board-system="clean-handwritten"] .compare-diagram {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 2.2em minmax(0, 1fr) !important;
  align-items: stretch !important;
  gap: .7em !important;
}

.board[data-board-system="clean-handwritten"] .compare-card,
.board[data-board-system="clean-handwritten"] .compare-card.red {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: .25em .2em .4em !important;
  border: 0 !important;
  border-bottom: .12em solid var(--wb-ink) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--wb-ink) !important;
  transform: none !important;
}

.board[data-board-system="clean-handwritten"] .compare-card.red {
  border-color: var(--wb-red) !important;
}

.board[data-board-system="clean-handwritten"] .compare-card small {
  color: var(--wb-muted) !important;
  font: 400 clamp(14px, 3.15cqw, 28px)/1.42 var(--wb-hand) !important;
  overflow-wrap: anywhere !important;
}

.board[data-board-system="clean-handwritten"] .compare-card b {
  margin: .4em 0 !important;
  color: var(--wb-ink) !important;
  font: 600 clamp(18px, 4.5cqw, 40px)/1.35 var(--wb-hand) !important;
  overflow-wrap: anywhere !important;
}

.board[data-board-system="clean-handwritten"] .compare-card.red b {
  color: var(--wb-red) !important;
}

.board[data-board-system="clean-handwritten"] .compare-plus {
  align-self: center !important;
  color: var(--wb-red) !important;
  font: 600 clamp(17px, 4cqw, 36px)/1 Arial, sans-serif !important;
}

/* Cause, hierarchy and metric stay compact and semantic. */
.board[data-board-system="clean-handwritten"] .cause-diagram {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: .8em !important;
}

.board[data-board-system="clean-handwritten"] .cause-card,
.board[data-board-system="clean-handwritten"] .cause-card.result {
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: .2em 0 .5em !important;
  border: 0 !important;
  border-bottom: .12em solid var(--wb-ink) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--wb-ink) !important;
  transform: none !important;
}

.board[data-board-system="clean-handwritten"] .cause-card.result {
  border-color: var(--wb-red) !important;
}

.board[data-board-system="clean-handwritten"] .cause-card small {
  color: var(--wb-red) !important;
  font: 600 clamp(12px, 2.7cqw, 24px)/1.2 var(--wb-hand) !important;
}

.board[data-board-system="clean-handwritten"] .cause-card p {
  margin: .35em 0 0 !important;
  font: 400 clamp(18px, 4.25cqw, 38px)/1.4 var(--wb-hand) !important;
  overflow-wrap: anywhere !important;
}

.board[data-board-system="clean-handwritten"] .cause-arrow {
  color: var(--wb-red) !important;
  font: 700 clamp(18px, 4cqw, 36px)/1 Arial, sans-serif !important;
}

.board[data-board-system="clean-handwritten"] .hierarchy-diagram {
  display: grid !important;
  gap: 3cqh !important;
}

.board[data-board-system="clean-handwritten"] .hierarchy-node,
.board[data-board-system="clean-handwritten"] .hierarchy-root {
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: .35em .65em !important;
  border: .1em solid var(--wb-red) !important;
  border-radius: 51% 49% 48% 52% / 46% 52% 48% 54% !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--wb-red) !important;
  font: 600 clamp(18px, 4.35cqw, 39px)/1.35 var(--wb-hand) !important;
  text-align: center !important;
  transform: rotate(-.45deg) !important;
}

.board[data-board-system="clean-handwritten"] .hierarchy-node p {
  margin: 0 !important;
  overflow-wrap: anywhere !important;
}

.board[data-board-system="clean-handwritten"] .hierarchy-branches {
  position: relative !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: start !important;
  gap: 1em !important;
  padding-top: 1.4em !important;
}

.board[data-board-system="clean-handwritten"] .hierarchy-branches::before {
  content: "";
  position: absolute;
  top: 0;
  left: 16.66%;
  right: 16.66%;
  height: .9em;
  border-top: .1em solid var(--wb-red);
  border-left: .1em solid var(--wb-red);
  border-right: .1em solid var(--wb-red);
  background: transparent !important;
}

.board[data-board-system="clean-handwritten"] .hierarchy-root::after {
  width: .1em !important;
  height: 1.45em !important;
  background: var(--wb-red) !important;
}

.board[data-board-system="clean-handwritten"] .hierarchy-branches .hierarchy-node::before {
  top: -1.4em !important;
  width: .1em !important;
  height: 1.4em !important;
  background: var(--wb-red) !important;
}

.board[data-board-system="clean-handwritten"] .hierarchy-branches .hierarchy-node {
  padding: .3em .35em !important;
  border: 0 !important;
  border-bottom: .1em solid var(--wb-ink) !important;
  border-radius: 0 !important;
  color: var(--wb-ink) !important;
  font-size: clamp(17px, 3.85cqw, 34px) !important;
  transform: none !important;
}

.board[data-board-system="clean-handwritten"] .spotlight-diagram {
  display: grid !important;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr) !important;
  align-items: center !important;
  gap: 1.2em !important;
}

.board[data-board-system="clean-handwritten"] .spotlight-value {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  min-height: 2.1em !important;
  padding: .12em !important;
  color: var(--wb-red) !important;
  font: 700 clamp(42px, 13cqw, 116px)/1 var(--wb-hand) !important;
  text-align: center !important;
}

.board[data-board-system="clean-handwritten"] .spotlight-value::after {
  content: "";
  position: absolute;
  inset: -.05em -.12em;
  border: .045em solid var(--wb-red);
  border-radius: 50%;
  transform: rotate(-5deg);
}

.board[data-board-system="clean-handwritten"] .spotlight-notes {
  display: grid !important;
  gap: 1em !important;
}

.board[data-board-system="clean-handwritten"] .spotlight-note {
  margin: 0 !important;
  padding: 0 0 .35em !important;
  border: 0 !important;
  border-bottom: 1px solid rgb(23 23 23 / .2) !important;
  background: transparent !important;
  color: var(--wb-ink) !important;
  font: 400 clamp(17px, 4cqw, 36px)/1.45 var(--wb-hand) !important;
  overflow-wrap: anywhere !important;
}

.board[data-board-system="clean-handwritten"] .structural-accent {
  margin-top: 4.2cqh !important;
  margin-bottom: 0 !important;
  align-self: flex-start !important;
}

.board[data-board-system="clean-handwritten"].layout-bullets .board-visual,
.board[data-board-system="clean-handwritten"].layout-recap .board-visual {
  flex: 0 0 auto !important;
  height: auto !important;
  margin-top: 4.2cqh !important;
}

.board[data-board-system="clean-handwritten"].layout-bullets .points,
.board[data-board-system="clean-handwritten"].layout-recap .points,
.board[data-board-system="clean-handwritten"].layout-bullets.variant-3 .points,
.board[data-board-system="clean-handwritten"].layout-recap.variant-3 .points {
  width: 100% !important;
  height: auto !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: none !important;
  grid-auto-rows: auto !important;
  align-content: start !important;
  gap: 2.8cqh !important;
}

.board[data-board-system="clean-handwritten"].layout-bullets .points .point-element,
.board[data-board-system="clean-handwritten"].layout-recap .points .point-element,
.board[data-board-system="clean-handwritten"].layout-bullets.variant-3 .points .point-element,
.board[data-board-system="clean-handwritten"].layout-recap.variant-3 .points .point-element {
  grid-column: auto !important;
  grid-row: auto !important;
  width: 100% !important;
  min-height: 0 !important;
  margin-left: 0 !important;
  padding: 0 0 .42em !important;
  font-size: clamp(19px, 4.8cqw, 43px) !important;
}

.board[data-board-system="clean-handwritten"] footer {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  margin-top: auto !important;
  padding: 0 !important;
  display: flex !important;
  justify-content: flex-end !important;
  color: #aaa49e !important;
  font: 600 clamp(7px, 1.65cqw, 14px)/1.2 "Microsoft YaHei", sans-serif !important;
  letter-spacing: .1em !important;
}

.board[data-board-system="clean-handwritten"] footer span:last-child {
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* Cover is intentionally sparse but keeps the writing grouped, not floating. */
.board[data-board-system="clean-handwritten"].layout-cover .board-layout {
  justify-content: flex-start !important;
  padding-top: 12cqh !important;
  padding-bottom: 6cqh !important;
}

.board[data-board-system="clean-handwritten"].layout-cover .title-element {
  max-width: 96% !important;
  font-size: clamp(40px, 11.4cqw, 102px) !important;
  line-height: 1.15 !important;
}

.board[data-board-system="clean-handwritten"].layout-cover .board-visual {
  display: block !important;
  width: 100% !important;
  margin-top: 4.5cqh !important;
}

.board[data-board-system="clean-handwritten"].layout-cover .points {
  gap: 2.25cqh !important;
}

.board[data-board-system="clean-handwritten"].layout-cover .points .point-element {
  grid-template-columns: 1.25em minmax(0, 1fr) !important;
  gap: .45em !important;
  padding: 0 !important;
  font-size: clamp(19px, 4.75cqw, 42px) !important;
}

.board[data-board-system="clean-handwritten"].layout-cover .points .point-element b {
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  color: var(--wb-red) !important;
  font: 400 1em/1 var(--wb-hand) !important;
  transform: none !important;
}

.board[data-board-system="clean-handwritten"].layout-cover .points .point-element b::before {
  content: "•";
}

.board[data-board-system="clean-handwritten"].layout-cover .points .point-element b {
  font-size: 0 !important;
}

.board[data-board-system="clean-handwritten"].layout-cover .points .point-element b::before {
  font-size: 22px !important;
}

/* Wide canvases keep the same visual language and simply use the extra width. */
.board[data-board-system="clean-handwritten"].wide .board-inner {
  padding: 7cqh 6.3cqw 6.3cqh !important;
}

.board[data-board-system="clean-handwritten"].wide .board-layout {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: center !important;
  gap: 0 !important;
  padding: 2cqh 0 3cqh !important;
}

.board[data-board-system="clean-handwritten"].wide .title-element {
  font-size: clamp(31px, 7.2cqh, 72px) !important;
}

.board[data-board-system="clean-handwritten"].wide .body-element {
  font-size: clamp(17px, 3.6cqh, 36px) !important;
}

.board[data-board-system="clean-handwritten"].wide .accent-element {
  font-size: clamp(20px, 4.3cqh, 43px) !important;
}

.board[data-board-system="clean-handwritten"].wide .board-visual {
  width: 100% !important;
  margin-top: 4.5cqh !important;
}

.board[data-board-system="clean-handwritten"].wide.layout-cover .board-layout,
.board[data-board-system="clean-handwritten"].wide.layout-question .board-layout,
.board[data-board-system="clean-handwritten"].wide.layout-quote .board-layout {
  display: flex !important;
  max-width: 74% !important;
  justify-content: center !important;
}

.board[data-board-system="clean-handwritten"].wide .structural-accent {
  margin-top: 4cqh !important;
}

.board[data-board-system="clean-handwritten"][data-ratio="3:4"] .board-inner {
  padding-top: 6cqh !important;
  padding-bottom: 5.5cqh !important;
}

.board[data-board-system="clean-handwritten"][data-ratio="3:4"] .board-layout {
  padding-top: 3.2cqh !important;
  padding-bottom: 1.8cqh !important;
}

.board[data-board-system="clean-handwritten"][data-ratio="3:4"] .title-element {
  font-size: clamp(27px, 7.7cqw, 69px) !important;
}

.board[data-board-system="clean-handwritten"][data-ratio="3:4"] .structural-accent {
  margin-top: 2.8cqh !important;
  font-size: clamp(18px, 4.5cqw, 40px) !important;
}

.board[data-board-system="clean-handwritten"][data-ratio="1:1"] .board-inner {
  padding-top: 6.2cqh !important;
  padding-bottom: 5.4cqh !important;
}

.board[data-board-system="clean-handwritten"][data-ratio="1:1"]:not(.layout-cover):not(.layout-question):not(.layout-quote) .board-layout {
  justify-content: flex-start !important;
  padding-top: 1.5cqh !important;
  padding-bottom: 1.5cqh !important;
}

.board[data-board-system="clean-handwritten"][data-ratio="1:1"] .title-element {
  font-size: clamp(26px, 6.7cqh, 60px) !important;
  line-height: 1.12 !important;
}

.board[data-board-system="clean-handwritten"][data-ratio="1:1"] .body-element {
  font-size: clamp(16px, 3.35cqh, 30px) !important;
}

.board[data-board-system="clean-handwritten"][data-ratio="1:1"] .board-visual {
  margin-top: 3cqh !important;
}

.board[data-board-system="clean-handwritten"][data-ratio="1:1"] .structural-accent {
  margin-top: 3cqh !important;
  font-size: clamp(18px, 3.8cqh, 34px) !important;
}

.board[data-board-system="clean-handwritten"].wide .points .point-element,
.board[data-board-system="clean-handwritten"].wide .flow-diagram .point-element,
.board[data-board-system="clean-handwritten"].wide .timeline-stop {
  font-size: clamp(18px, 3.8cqh, 38px) !important;
}

.single-board-style .skin-gallery {
  display: none !important;
}

.single-board-style .skin-preview {
  min-height: 72px;
  grid-template-columns: 1fr auto !important;
}

.single-board-style .skin-preview img {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .board[data-board-system="clean-handwritten"] .reveal {
    animation: none !important;
  }
}

/*
 * V6: one quiet, universal handwriting composition.
 * These rules deliberately override every legacy semantic layout.
 */
.simple-hidden-field {
  display: none !important;
}

.board[data-board-system="clean-handwritten"].layout-simple {
  border: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: 0 16px 44px rgb(20 20 20 / .14) !important;
  letter-spacing: .015em !important;
}

.board[data-board-system="clean-handwritten"].layout-simple .board-grain,
.board[data-board-system="clean-handwritten"].layout-simple .red-line {
  display: none !important;
}

.board[data-board-system="clean-handwritten"].layout-simple .board-inner {
  padding: 7.2cqh 8.8cqw 5.8cqh !important;
}

.board[data-board-system="clean-handwritten"].layout-simple .board-layout {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-height: 0 !important;
  padding: 1.8cqh 0 2cqh !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 0 !important;
  overflow: visible !important;
}

.board[data-board-system="clean-handwritten"].layout-simple .board-copy {
  width: 100% !important;
  min-width: 0 !important;
  display: block !important;
}

.board[data-board-system="clean-handwritten"].layout-simple .title-element {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  color: var(--wb-ink) !important;
  font: 400 clamp(34px, 9.1cqw, 82px)/1.2 var(--wb-hand) !important;
  letter-spacing: .015em !important;
  white-space: pre-line !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

.board[data-board-system="clean-handwritten"].layout-simple.title-short .title-element {
  font-size: clamp(36px, 9.7cqw, 88px) !important;
}

.board[data-board-system="clean-handwritten"].layout-simple.title-long .title-element {
  font-size: clamp(31px, 8.2cqw, 74px) !important;
}

.board[data-board-system="clean-handwritten"].layout-simple .body-element {
  width: 100% !important;
  max-width: 100% !important;
  margin: 3.2cqh 0 0 !important;
  padding: 0 !important;
  color: var(--wb-ink) !important;
  font: 400 clamp(21px, 5.25cqw, 47px)/1.5 var(--wb-hand) !important;
  letter-spacing: .01em !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

.board[data-board-system="clean-handwritten"].layout-simple .board-visual {
  flex: 0 0 auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 4.4cqh 0 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

.board[data-board-system="clean-handwritten"].layout-simple .simple-points {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-rows: auto !important;
  gap: 2.3cqh !important;
  overflow: visible !important;
}

.board[data-board-system="clean-handwritten"].layout-simple .simple-points .point-element {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  display: grid !important;
  grid-template-columns: .7em minmax(0, 1fr) !important;
  align-items: start !important;
  gap: .38em !important;
  color: var(--wb-ink) !important;
  font: 400 clamp(21px, 5.4cqw, 48px)/1.42 var(--wb-hand) !important;
  transform: none !important;
}

.board[data-board-system="clean-handwritten"].layout-simple .simple-points .point-element b {
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: .3em 0 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--wb-red) !important;
  font: 400 .58em/1 var(--wb-hand) !important;
}

.board[data-board-system="clean-handwritten"].layout-simple .simple-points .point-element p {
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: inherit !important;
  font: inherit !important;
  letter-spacing: .005em !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

.board[data-board-system="clean-handwritten"].layout-simple .accent-element {
  position: relative !important;
  align-self: flex-start !important;
  width: auto !important;
  max-width: 92% !important;
  min-height: 0 !important;
  margin: 4.6cqh 0 0 !important;
  padding: .12em .2em .2em !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--wb-red) !important;
  font: 400 clamp(23px, 5.7cqw, 51px)/1.35 var(--wb-hand) !important;
  letter-spacing: .015em !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

.board[data-board-system="clean-handwritten"].layout-simple .accent-element::before,
.board[data-board-system="clean-handwritten"].layout-simple .accent-element::after {
  content: "" !important;
  position: absolute !important;
  pointer-events: none !important;
  background: transparent !important;
}

.board[data-board-system="clean-handwritten"].layout-simple .accent-short::before {
  inset: -.08em -.35em -.03em !important;
  border: .075em solid currentColor !important;
  border-radius: 50% 46% 53% 47% !important;
  transform: rotate(-2.5deg) !important;
}

.board[data-board-system="clean-handwritten"].layout-simple .accent-short::after {
  inset: -.02em -.28em -.1em -.4em !important;
  border: .035em solid currentColor !important;
  border-radius: 48% 52% 45% 55% !important;
  opacity: .52 !important;
  transform: rotate(1.5deg) !important;
}

.board[data-board-system="clean-handwritten"].layout-simple .accent-long::after {
  left: .05em !important;
  right: .15em !important;
  bottom: -.05em !important;
  height: .09em !important;
  border: 0 !important;
  border-radius: 70% 25% 68% 35% !important;
  background: currentColor !important;
  transform: rotate(-.7deg) !important;
}

.board[data-board-system="clean-handwritten"].layout-simple footer {
  margin-top: auto !important;
  color: #aaa59e !important;
}

.board[data-board-system="clean-handwritten"].layout-simple.wide .board-inner {
  padding: 7.5cqh 7cqw 6cqh !important;
}

.board[data-board-system="clean-handwritten"].layout-simple.wide .board-layout {
  max-width: 82% !important;
  margin: 0 auto !important;
}

.board[data-board-system="clean-handwritten"].layout-simple.wide .title-element {
  font-size: clamp(32px, 7.4cqh, 76px) !important;
}

.board[data-board-system="clean-handwritten"].layout-simple.wide .body-element,
.board[data-board-system="clean-handwritten"].layout-simple.wide .simple-points .point-element {
  font-size: clamp(18px, 3.7cqh, 38px) !important;
}

.board[data-board-system="clean-handwritten"].layout-simple.wide .accent-element {
  font-size: clamp(21px, 4.3cqh, 44px) !important;
}

/* V7 skin layer: material and color vary, composition never does. */
.board[data-board-system="clean-handwritten"].layout-simple[data-skin="clean-whiteboard"] {
  background: #fff !important;
}

.board[data-board-system="clean-handwritten"].layout-simple[data-skin="pin-paper"] {
  background:
    linear-gradient(90deg, transparent 0 6.2%, rgb(194 52 43 / .22) 6.2% 6.45%, transparent 6.45%),
    repeating-linear-gradient(0deg, transparent 0 39px, rgb(31 58 138 / .1) 39px 40px),
    radial-gradient(120% 90% at 20% 10%, rgb(255 255 255 / .2), transparent 60%),
    radial-gradient(140% 100% at 80% 95%, rgb(0 0 0 / .055), transparent 55%),
    #efe56a !important;
  box-shadow: 7px 8px 0 #1f3a8a, 0 16px 38px rgb(31 58 138 / .16) !important;
}

.board[data-board-system="clean-handwritten"].layout-simple[data-skin="pin-paper"] .accent-short::before {
  border-style: double !important;
}

.board[data-board-system="clean-handwritten"].layout-simple[data-skin="monochrome-ledger"] {
  background:
    repeating-linear-gradient(0deg, transparent 0 47px, rgb(26 26 22 / .065) 47px 48px),
    linear-gradient(90deg, transparent 0 8.7%, rgb(26 26 22 / .1) 8.7% calc(8.7% + 1px), transparent calc(8.7% + 1px)),
    #fafadf !important;
  box-shadow: 0 15px 42px rgb(26 26 22 / .13) !important;
}

.board[data-board-system="clean-handwritten"].layout-simple[data-skin="monochrome-ledger"] .accent-short::before,
.board[data-board-system="clean-handwritten"].layout-simple[data-skin="monochrome-ledger"] .accent-short::after {
  border-radius: 3px !important;
  transform: rotate(-1deg) !important;
}

.board[data-board-system="clean-handwritten"].layout-simple[data-skin="notebook-tabs"] {
  background:
    linear-gradient(#98d4bb 0 0) right 12% / 4.2% 9% no-repeat,
    linear-gradient(#c7b8ea 0 0) right 25% / 4.2% 9% no-repeat,
    linear-gradient(#f4b8c5 0 0) right 38% / 4.2% 9% no-repeat,
    linear-gradient(#a8d8ea 0 0) right 51% / 4.2% 9% no-repeat,
    linear-gradient(#ffe6a7 0 0) right 64% / 4.2% 9% no-repeat,
    radial-gradient(circle at 4.2% 12%, rgb(45 45 45 / .72) 0 3px, transparent 3.8px),
    radial-gradient(circle at 4.2% 28%, rgb(45 45 45 / .72) 0 3px, transparent 3.8px),
    radial-gradient(circle at 4.2% 44%, rgb(45 45 45 / .72) 0 3px, transparent 3.8px),
    radial-gradient(circle at 4.2% 60%, rgb(45 45 45 / .72) 0 3px, transparent 3.8px),
    radial-gradient(circle at 4.2% 76%, rgb(45 45 45 / .72) 0 3px, transparent 3.8px),
    radial-gradient(circle at 4.2% 92%, rgb(45 45 45 / .72) 0 3px, transparent 3.8px),
    #f8f6f1 !important;
  box-shadow: 0 18px 46px rgb(45 45 45 / .22) !important;
}

.board[data-board-system="clean-handwritten"].layout-simple[data-skin="notebook-tabs"] .board-inner {
  padding-right: 11cqw !important;
}

.board[data-board-system="clean-handwritten"].layout-simple[data-skin="paper-ink"] {
  background:
    linear-gradient(90deg, transparent 0 6.2%, rgb(196 30 58 / .16) 6.2% calc(6.2% + 1px), transparent calc(6.2% + 1px)),
    repeating-linear-gradient(0deg, transparent 0 54px, rgb(26 26 26 / .045) 54px 55px),
    radial-gradient(110% 85% at 15% 8%, rgb(255 255 255 / .5), transparent 58%),
    #faf9f7 !important;
  box-shadow: 0 16px 42px rgb(44 34 32 / .14) !important;
}

.board[data-board-system="clean-handwritten"].layout-simple[data-skin="paper-ink"] .accent-long::after {
  height: .065em !important;
}

.board[data-board-system="clean-handwritten"].layout-simple[data-skin="cobalt-grid"] {
  background:
    linear-gradient(rgb(31 43 224 / .095) 1px, transparent 1px),
    linear-gradient(90deg, rgb(31 43 224 / .095) 1px, transparent 1px),
    #f0ebde !important;
  background-size: 24px 24px !important;
  box-shadow: 0 16px 42px rgb(31 43 224 / .14) !important;
}

.board[data-board-system="clean-handwritten"].layout-simple[data-skin="cobalt-grid"] .accent-short::before {
  border-radius: 46% 54% 48% 52% !important;
}

.board[data-board-system="clean-handwritten"].layout-simple[data-skin="retro-zine"] {
  background:
    radial-gradient(circle at 20% 30%, rgb(0 0 0 / .035) 0 .7px, transparent .9px) 0 0 / 9px 11px,
    linear-gradient(125deg, rgb(255 255 255 / .1), transparent 46%),
    #c8b99a !important;
  box-shadow: 8px 8px 0 #008f4d !important;
}

.board[data-board-system="clean-handwritten"].layout-simple[data-skin="retro-zine"]::before {
  content: "";
  position: absolute;
  inset: 2.1%;
  z-index: 0;
  border: 2px solid rgb(26 26 26 / .7);
  pointer-events: none;
}

.board[data-board-system="clean-handwritten"].layout-simple[data-skin="retro-zine"] .accent-short::before,
.board[data-board-system="clean-handwritten"].layout-simple[data-skin="retro-zine"] .accent-short::after {
  border-radius: 0 !important;
  transform: rotate(-2deg) !important;
}

.skin-gallery {
  display: grid !important;
}