:root {
  --font-ui: 'Avenir Next', 'Trebuchet MS', 'Gill Sans', 'Segoe UI', sans-serif;
  --font-display: 'Rockwell', 'Avenir Next', 'Trebuchet MS', serif;
  --worksheet-font: 'Trebuchet MS', 'Courier New', monospace;

  --bg-app: #eef3f8;
  --bg-hero: #dff0ff;
  --bg-surface: #ffffff;
  --bg-surface-2: #f8fbff;
  --bg-muted: #edf3f9;

  --text-main: #1e2a35;
  --text-soft: #516173;
  --text-faint: #7b8a9a;

  --accent: #2d7dbf;
  --accent-strong: #1f5e93;
  --accent-soft: #d7ebfb;
  --danger: #cb3f49;
  --danger-soft: #ffe8eb;
  --ok: #2d9f7e;

  --border: #c9d7e5;
  --border-strong: #9eb6ce;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  --space-1: 0.35rem;
  --space-2: 0.6rem;
  --space-3: 0.9rem;
  --space-4: 1.25rem;
  --space-5: 1.8rem;
  --space-6: 2.4rem;

  --shadow-soft: 0 10px 22px rgba(42, 73, 104, 0.09);
  --shadow-float: 0 20px 45px rgba(36, 66, 96, 0.17);
  --worksheet-number-weight: 700;

  --anim-fast: 160ms ease;
  --anim-base: 260ms ease;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-ui);
  color: var(--text-main);
  background:
    radial-gradient(circle at 8% 12%, rgba(83, 158, 222, 0.23), transparent 32%),
    radial-gradient(circle at 90% 80%, rgba(37, 133, 174, 0.18), transparent 38%),
    linear-gradient(150deg, #f5f9ff 0%, #edf4fb 45%, #e8f0f8 100%);
}

h2,
h3 {
  margin-top: 0;
  color: #20445f;
  font-family: var(--font-display);
  letter-spacing: 0.01em;
}

p {
  margin: 0;
}

section {
  width: min(1140px, 94vw);
  margin: 0 auto;
  padding: var(--space-4) var(--space-4) var(--space-5);
}

#landing-page {
  min-height: 100vh;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.56), rgba(216, 236, 255, 0.7)),
    var(--bg-hero);
  position: relative;
  overflow: hidden;
}

#landing-page::before,
#landing-page::after {
  content: '';
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
}

#landing-page::before {
  width: 420px;
  height: 420px;
  top: -160px;
  right: -120px;
  background: radial-gradient(circle, rgba(80, 154, 220, 0.35) 0%, rgba(80, 154, 220, 0) 70%);
}

#landing-page::after {
  width: 320px;
  height: 320px;
  bottom: -120px;
  left: -120px;
  background: radial-gradient(circle, rgba(43, 129, 194, 0.28) 0%, rgba(43, 129, 194, 0) 70%);
}

#landing-page > header {
  width: min(1140px, 94vw);
  margin: 0 auto;
  padding: clamp(1.2rem, 2.4vw, 2rem) 1rem 0.6rem;
  text-align: center;
  color: var(--text-main);
  position: relative;
  z-index: 1;
}

.logo-image {
  max-width: min(620px, 92vw);
  max-height: 380px;
  height: auto;
  margin: 0 auto;
  display: block;
  filter: drop-shadow(0 12px 20px rgba(37, 92, 130, 0.17));
}

.landing-operation-icons {
  width: min(1140px, 94vw);
  margin: 0 auto 0.6rem;
  padding: 0 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  position: relative;
  z-index: 1;
}

.landing-hero-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin: 1rem 0 0.65rem;
}

.landing-secondary-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 150px;
  padding: 0.72rem 1.1rem;
  border-radius: 999px;
  border: 1px solid rgba(32, 70, 101, 0.14);
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 12px 24px rgba(31, 64, 95, 0.12);
  color: #204665;
  font-weight: 800;
  text-decoration: none;
  transition: transform var(--anim-fast), box-shadow var(--anim-fast), background var(--anim-fast);
}

.landing-secondary-link:hover,
.landing-secondary-link:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(31, 64, 95, 0.16);
}

.landing-secondary-link-featured {
  background: linear-gradient(180deg, #ffffff 0%, #eef8ff 100%);
}

.landing-operation-icons .op-icon {
  pointer-events: none;
  cursor: default;
}

.landing-operation-icons .op-icon:hover {
  transform: none;
}

#landing-page > header .subtitle {
  margin-top: 0.45rem;
  color: #315671;
  font-size: clamp(1rem, 1.4vw, 1.22rem);
  font-weight: 600;
}

#layout-selection {
  position: relative;
  z-index: 1;
}

#layout-selection h2 {
  text-align: center;
  font-size: clamp(1.45rem, 2.1vw, 1.95rem);
  margin-bottom: 0.45rem;
}

.layout-picker-hint {
  text-align: center;
  margin: 0 0 var(--space-4);
  color: #3d5f7a;
  font-weight: 600;
  font-size: 0.95rem;
}

#page-layout-picker {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.landing-resume-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.6rem;
}

#landing-resume-btn {
  border: 1px solid #b9cbe0;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f2f7fd 100%);
  color: #2e5068;
  font-size: 0.88rem;
  font-weight: 700;
  padding: 0.3rem 0.78rem;
  cursor: pointer;
}

.landing-page-block {
  border: 1px solid #c7d9e9;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 8px 18px rgba(44, 80, 114, 0.08);
  padding: 0.8rem;
}

.landing-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
}

.landing-page-title {
  color: #244d6a;
  font-size: 1rem;
  font-weight: 800;
}

.page-enable-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #36566f;
  font-weight: 700;
  font-size: 0.85rem;
}

.page-enable-label input {
  width: 15px;
  height: 15px;
}

.page-layout-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 0.6rem;
}

@media (min-width: 900px) {
  .page-layout-options {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.layout-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: var(--space-4);
}

.layout-option {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  border: 1px solid var(--border);
  background: linear-gradient(165deg, #ffffff 0%, #f6fbff 100%);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  text-align: center;
  color: var(--text-main);
  font: inherit;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  transition:
    transform var(--anim-base),
    border-color var(--anim-fast),
    box-shadow var(--anim-fast),
    background var(--anim-fast);
}

.layout-option:hover {
  transform: translateY(-2px);
  border-color: #8cb6dd;
  box-shadow: 0 14px 28px rgba(47, 90, 129, 0.16);
}

.layout-option:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
.word-problem-content:focus-visible {
  outline: 3px solid #2a72ae;
  outline-offset: 2px;
}

.layout-option.selected {
  border-color: var(--accent);
  background: linear-gradient(165deg, #ffffff 0%, #eaf5ff 100%);
  box-shadow: 0 0 0 3px rgba(45, 125, 191, 0.18), 0 16px 35px rgba(45, 98, 147, 0.2);
}

.layout-option p {
  margin-top: var(--space-2);
  font-size: 0.95rem;
  font-weight: 700;
  color: #2d4d67;
}

.layout-preview {
  width: min(130px, 90%);
  margin: 0 auto;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background-color: #f9fdff;
  padding: 4px;
}

.layout-preview.two,
.layout-preview.three,
.layout-preview.four,
.layout-preview.five,
.layout-preview.six,
.layout-preview.seven,
.layout-preview.eight,
.layout-preview.nine {
  display: grid;
  gap: 4px;
}

.layout-preview.two {
  grid-template-columns: 1fr;
  grid-template-rows: repeat(2, 1fr);
}

.layout-preview.three {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

.layout-preview.four {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

.layout-preview.five {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 1fr);
}

.layout-preview.six {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 1fr);
}

.layout-preview.seven {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(4, 1fr);
}

.layout-preview.eight {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(4, 1fr);
}

.layout-preview.nine {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(5, 1fr);
}

.layout-preview.three div:nth-child(3),
.layout-preview.five div:nth-child(5),
.layout-preview.seven div:nth-child(7),
.layout-preview.nine div:nth-child(9) {
  grid-column: 1 / -1;
}

.layout-preview div {
  border: 1px solid #bfcfe0;
  border-radius: 4px;
  min-height: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #edf5fd 100%);
}

#preview-page {
  padding: var(--space-4) 0 var(--space-5);
}

#worksheet-section {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.93) 0%, rgba(244, 250, 255, 0.94) 100%);
  border: 1px solid rgba(161, 190, 217, 0.6);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-float);
  animation: rise-in var(--anim-base);
}

.worksheet-top-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  position: relative;
}

.worksheet-top-bar h2 {
  margin: 0;
  font-size: clamp(1.08rem, 1.65vw, 1.4rem);
  margin-right: auto;
}

.worksheet-title-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 0 1 auto;
  flex-wrap: wrap;
  min-width: 0;
  margin-right: auto;
}

.worksheet-title-group h2 {
  margin-right: 0;
}

.worksheet-history-controls {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  flex-wrap: wrap;
}

.preview-layout-switcher {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  border: 1px solid #bfd2e3;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff 0%, #eef5fb 100%);
  padding: 0.22rem;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: thin;
}

.preview-layout-btn {
  width: 34px;
  height: 34px;
  border: 1px solid #a9bfd4;
  border-radius: 9px;
  background: #ffffff;
  color: #33536c;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform var(--anim-fast), box-shadow var(--anim-fast), background var(--anim-fast), border-color var(--anim-fast);
  padding: 0;
  flex: 0 0 auto;
}

.preview-layout-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 12px rgba(46, 84, 119, 0.16);
}

.preview-layout-btn:focus-visible {
  outline: 2px solid #2d7dbf;
  outline-offset: 2px;
}

.preview-layout-btn.active {
  border-color: #2d7dbf;
  background: linear-gradient(180deg, #e7f3ff 0%, #d4e8fd 100%);
  box-shadow: 0 0 0 2px rgba(45, 125, 191, 0.16);
}

.preview-layout-glyph {
  display: grid;
  width: 17px;
  height: 17px;
  gap: 1.5px;
}

.preview-layout-glyph.two {
  grid-template-columns: 1fr;
  grid-template-rows: repeat(2, 1fr);
}

.preview-layout-glyph.three {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

.preview-layout-glyph.four {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

.preview-layout-glyph.five {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 1fr);
}

.preview-layout-glyph.six {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 1fr);
}

.preview-layout-glyph.seven {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(4, 1fr);
}

.preview-layout-glyph.eight {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(4, 1fr);
}

.preview-layout-glyph.nine {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(5, 1fr);
}

.preview-layout-glyph.three span:nth-child(3),
.preview-layout-glyph.five span:nth-child(5),
.preview-layout-glyph.seven span:nth-child(7),
.preview-layout-glyph.nine span:nth-child(9) {
  grid-column: 1 / -1;
}

.preview-layout-glyph span {
  border: 1px solid #5d748a;
  border-radius: 1.5px;
  background: rgba(243, 250, 255, 0.88);
}

.preview-layout-btn.active .preview-layout-glyph span {
  border-color: #2d5f8c;
  background: rgba(176, 214, 248, 0.92);
}

.worksheet-settings {
  position: relative;
}

.settings-icon-btn {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid #9eb6ce;
  background: linear-gradient(180deg, #ffffff 0%, #edf4fc 100%);
  color: #335a79;
  font-size: 1.22rem;
  line-height: 1;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform var(--anim-fast), box-shadow var(--anim-fast), background var(--anim-fast);
}

.worksheet-settings-menu {
  position: absolute;
  top: calc(100% + 0.48rem);
  right: 0;
  width: min(330px, 80vw);
  border: 1px solid #bfd2e3;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 14px 28px rgba(30, 62, 92, 0.22);
  padding: 0.7rem;
  z-index: 20;
}

.settings-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.62rem;
}

.settings-row:last-child {
  margin-bottom: 0;
}

.settings-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  margin-bottom: 0.6rem;
  color: #355068;
  font-weight: 700;
  font-size: 0.87rem;
  cursor: pointer;
}

.settings-checkbox-row input[type='checkbox'] {
  margin-top: 0.1rem;
}

.settings-checkbox-row span {
  line-height: 1.3;
}

.worksheet-container {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), var(--shadow-soft);
  padding: clamp(0.8rem, 1.6vw, 1.2rem);
}

.worksheet-body {
  display: grid;
  grid-template-columns: 164px 1fr;
  gap: 0.85rem;
  align-items: start;
}

.worksheet-container {
  min-width: 0;
}

.worksheet-main {
  min-width: 0;
}

.page-rail {
  border: 1px solid #cddceb;
  border-radius: 12px;
  background: linear-gradient(180deg, #f8fbff 0%, #eef5fb 100%);
  padding: 0.55rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.page-rail-item {
  border: 1px solid #b7ccdf;
  border-radius: 10px;
  background: #ffffff;
  color: #2d4e67;
  text-align: left;
  cursor: pointer;
  padding: 0.45rem 0.5rem;
  width: 100%;
  transition: background var(--anim-fast), border-color var(--anim-fast);
}

.page-rail-item:hover {
  background: #f2f8ff;
}

.page-rail-item.active {
  border-color: #2d7dbf;
  background: #e8f3ff;
  box-shadow: 0 0 0 2px rgba(45, 125, 191, 0.16);
}

.page-rail-item-title {
  display: block;
  font-size: 0.86rem;
  font-weight: 800;
}

.page-rail-item-subtitle {
  display: block;
  margin-top: 0.08rem;
  font-size: 0.74rem;
  color: #56708a;
  font-weight: 700;
}

.page-rail-item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
}

.page-delete-btn {
  border: 1px solid #caa2ac;
  border-radius: 999px;
  background: #fff2f5;
  color: #9e3240;
  cursor: pointer;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 0.15rem 0.45rem;
}

.page-delete-btn:hover {
  background: #ffe7ec;
}

.page-add-btn {
  border: 1px dashed #88aac7;
  border-radius: 10px;
  background: #f7fbff;
  color: #2e5978;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 800;
  padding: 0.45rem 0.4rem;
}

.page-add-btn:hover {
  background: #ecf6ff;
}

.worksheet-header {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: 0.7rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid #d1dde9;
  font-family: var(--worksheet-font);
}

.header-field {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: #3f5263;
  font-size: 1.02rem;
  font-weight: 700;
}

.header-field label {
  font-family: inherit;
}

.header-blank {
  display: inline-block;
  width: clamp(120px, 20vw, 180px);
  border-bottom: 2px solid #9fb7cf;
  height: 1.35rem;
}

.header-three-line-lane {
  display: none;
}

.worksheet-header[data-name-date-style='three-line'],
.worksheet-header[data-name-date-style='blank-three-line'] {
  display: block;
  border-bottom: none;
  padding-bottom: 0.35rem;
  --three-line-lane-size: calc(clamp(36px, 5.3vw, 50px) * 0.75);
  --three-line-label-fill: 0.9;
}

.worksheet-header[data-name-date-style='three-line'] .header-field,
.worksheet-header[data-name-date-style='blank-three-line'] .header-field {
  display: none;
}

.worksheet-header[data-name-date-style='three-line'] .header-three-line-lane,
.worksheet-header[data-name-date-style='blank-three-line'] .header-three-line-lane {
  display: block;
  position: relative;
  min-height: var(--three-line-lane-size);
  margin: 0;
  border-top: 2px solid #7f9ab4;
  border-bottom: 2px solid #7f9ab4;
}

.worksheet-header[data-name-date-style='three-line'] .header-three-line-lane::after,
.worksheet-header[data-name-date-style='blank-three-line'] .header-three-line-lane::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 1.5px dashed #b8c6d4;
  transform: translateY(-50%);
}

.header-three-line-label {
  position: absolute;
  bottom: 0;
  color: #10263a;
  font-family: inherit;
  font-weight: 500;
  font-size: calc(var(--three-line-lane-size) * var(--three-line-label-fill));
  line-height: 0.9;
  letter-spacing: 0.01em;
  white-space: nowrap;
  pointer-events: none;
}

.header-three-line-name {
  left: clamp(2.5%, 4.5%, 6.5%);
}

.header-three-line-date {
  left: clamp(58%, 62%, 66%);
}

.worksheet-header[data-name-date-style='blank-three-line'] .header-three-line-label {
  display: none;
}

.worksheet-page {
  position: relative;
  width: 100%;
  aspect-ratio: 8.5 / 11;
  border: 1px dashed #b8cadd;
  border-radius: 12px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(248, 252, 255, 0.97) 100%);
}

.worksheet-section {
  position: absolute;
  --problem-number-lane: 0px;
  --problem-number-clearance: 5px;
  --problem-number-size: 24px;
  --problem-number-fill: #ffffff;
  --problem-number-border: #000000;
  --problem-number-text: #000000;
  border: 1px dashed #c5d4e2;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  box-sizing: border-box;
  transition: border-color var(--anim-fast), background var(--anim-fast);
}

.worksheet-section.has-problem {
  border-color: #a9bfd5;
}

.worksheet-section .select-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid #2b6ea7;
  border-radius: 999px;
  background: linear-gradient(180deg, #3f8ecf 0%, #2d78b8 100%);
  color: #fff;
  padding: 0.38rem 0.95rem;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 8px 16px rgba(48, 95, 141, 0.24);
  transition: transform var(--anim-fast), box-shadow var(--anim-fast);
}

.worksheet-section .select-button:hover {
  transform: translate(-50%, -50%) translateY(-1px);
  box-shadow: 0 11px 20px rgba(48, 95, 141, 0.28);
}

.worksheet-section.has-problem .select-button {
  display: none;
}

.problem-grid {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem;
}

.worksheet-section.with-problem-number .problem-grid {
  inset: var(--problem-number-lane) 0 0 0;
}

.problem-horizontal {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.35rem, 2.2vw, 0.9rem);
  box-sizing: border-box;
  overflow: hidden;
  --horizontal-font-size: clamp(1.05rem, 5.2vw, 2.35rem);
}

.problem-horizontal[data-item-count='2'],
.problem-horizontal[data-item-count='3'],
.problem-horizontal[data-item-count='4'] {
  align-items: stretch;
}

.worksheet-section.with-problem-number .problem-horizontal {
  inset: var(--problem-number-lane) 0 0 0;
}

.problem-math {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.22rem, 0.92vh, 0.62rem);
  padding: clamp(0.34rem, 1.25vh, 0.9rem) clamp(0.3rem, 1.2vw, 0.95rem);
  box-sizing: border-box;
  color: #1f2f3e;
  font-family: var(--worksheet-font);
  --math-prompt-size: clamp(0.56rem, 1.15vw, 0.88rem);
  --math-prompt-line-height: 1.1;
  --math-prompt-max-width: 100%;
  --math-content-max-width: 100%;
  --math-content-height: 100%;
}

.worksheet-section.with-problem-number .problem-math {
  inset: var(--problem-number-lane) 0 0 0;
}

.math-prompt {
  margin: 0;
  width: min(100%, var(--math-prompt-max-width, 100%));
  max-width: 100%;
  color: #233244;
  font-family: var(--worksheet-font);
  font-size: var(--math-prompt-size);
  line-height: var(--math-prompt-line-height, 1.1);
  font-weight: 400;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}

.problem-math-content {
  position: relative;
  width: min(100%, var(--math-content-max-width, 100%));
  max-width: 100%;
  height: var(--math-content-height, 100%);
  min-height: 0;
  flex: 1 1 auto;
}

.problem-math-content > .problem-grid,
.problem-math-content > .problem-horizontal,
.problem-math-content > .problem-area-model {
  position: absolute;
  inset: 0;
}

.problem-missing-number {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.22rem, 0.92vh, 0.62rem);
  padding: clamp(0.34rem, 1.25vh, 0.9rem) clamp(0.3rem, 1.2vw, 0.95rem);
  box-sizing: border-box;
  color: #1f2f3e;
  font-family: var(--worksheet-font);
  --missing-number-prompt-size: clamp(0.56rem, 1.15vw, 0.88rem);
  --missing-number-prompt-line-height: 1.1;
  --missing-number-content-max-width: 100%;
  --missing-number-content-height: 100%;
  --missing-number-font-size: clamp(1rem, 4vw, 2.2rem);
  --missing-number-gap: clamp(0.28rem, 1.8vw, 0.8rem);
  --missing-number-blank-width: clamp(4.8rem, 26vw, 10rem);
  --missing-number-number-weight: var(--worksheet-number-weight, 700);
  --missing-number-symbol-weight: 700;
}

.missing-number-prompt {
  margin: 0;
  width: min(100%, 100%);
  max-width: 100%;
  color: #233244;
  font-family: var(--worksheet-font);
  font-size: var(--missing-number-prompt-size);
  line-height: var(--missing-number-prompt-line-height, 1.1);
  font-weight: 400;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}

.problem-missing-number-content {
  position: relative;
  width: min(100%, var(--missing-number-content-max-width, 100%));
  max-width: 100%;
  height: var(--missing-number-content-height, 100%);
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.missing-number-equations {
  width: 100%;
  height: 100%;
  display: grid;
  gap: var(--missing-number-set-gap, clamp(0.34rem, 1.4vh, 0.9rem));
  align-items: stretch;
  justify-items: stretch;
}

.missing-number-equation-slot {
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.missing-number-equation {
  width: min(100%, 100%);
  max-width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: var(--missing-number-gap, clamp(0.28rem, 1.8vw, 0.8rem));
  font-family: var(--worksheet-font);
  font-size: var(--missing-number-font-size);
  line-height: 1.05;
  color: #1f2f3e;
  white-space: nowrap;
}

.missing-number-value {
  display: inline-flex;
  align-items: flex-end;
  gap: 0.02em;
  font-weight: var(--missing-number-number-weight, var(--worksheet-number-weight, 700));
}

.missing-number-digit.editable-digit-cell {
  cursor: pointer;
  border-radius: 4px;
  transition: background-color var(--anim-fast), box-shadow var(--anim-fast);
}

.missing-number-digit.editable-digit-cell:hover {
  background-color: rgba(211, 232, 251, 0.56);
}

.missing-number-digit.editable-digit-cell:focus-visible {
  outline: 2px solid #2d7dbf;
  outline-offset: 1px;
  background-color: rgba(211, 232, 251, 0.6);
}

.missing-number-digit.digit-editing {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.missing-number-symbol {
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  font-weight: var(--missing-number-symbol-weight, 700);
  color: #1f2f3e;
}

.missing-number-blank {
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  min-width: var(--missing-number-blank-width, clamp(4.8rem, 26vw, 10rem));
  min-height: 1.2em;
  border-bottom: 2px solid #253444;
  padding: 0 0.12em 0.08em;
}

.missing-number-answer-value {
  line-height: 1;
  font-weight: var(--missing-number-number-weight, var(--worksheet-number-weight, 700));
}

.missing-number-answer-value.answer-key-text {
  font-weight: var(--missing-number-number-weight, var(--worksheet-number-weight, 700));
}

.problem-angles {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.22rem, 0.92vh, 0.62rem);
  padding: clamp(0.34rem, 1.25vh, 0.9rem) clamp(0.3rem, 1.2vw, 0.95rem);
  box-sizing: border-box;
  color: #1f2f3e;
  font-family: var(--worksheet-font);
  --angles-prompt-size: clamp(0.56rem, 1.15vw, 0.88rem);
  --angles-prompt-line-height: 1.1;
  --angles-content-width: 100%;
  --angles-content-height: 100%;
}

.angles-prompt {
  margin: 0;
  width: min(100%, 100%);
  max-width: 100%;
  color: #233244;
  font-family: var(--worksheet-font);
  font-size: var(--angles-prompt-size);
  line-height: var(--angles-prompt-line-height, 1.1);
  font-weight: 400;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}

.problem-angles-content {
  position: relative;
  width: min(100%, var(--angles-content-width, 100%));
  max-width: 100%;
  height: var(--angles-content-height, 100%);
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.angles-items {
  width: 100%;
  height: 100%;
  display: grid;
  gap: var(--angles-set-gap, clamp(0.34rem, 1.4vh, 0.9rem));
  align-items: stretch;
  justify-items: stretch;
}

.angles-item-slot {
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.angles-item {
  width: min(100%, 100%);
  max-width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.25rem, 1vh, 0.7rem);
  --angles-diagram-width: min(100%, 220px);
  --angles-diagram-height: min(100%, 164px);
  --angles-answer-size: clamp(0.95rem, 2.8vw, 1.7rem);
  --worksheet-choice-font-size: clamp(0.72rem, 1.9vw, 1rem);
  --angles-answer-line-width: clamp(4rem, 22vw, 8rem);
}

.angles-diagram-wrap {
  width: min(100%, var(--angles-diagram-width));
  height: var(--angles-diagram-height);
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.angles-diagram-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.angles-protractor-image {
  pointer-events: none;
}

.angles-protractor-arc,
.angles-protractor-baseline,
.angles-protractor-tick {
  fill: none;
  stroke: #5e6b78;
}

.angles-protractor-arc {
  stroke-width: 2.2;
}

.angles-protractor-baseline {
  stroke-width: 2;
}

.angles-protractor-tick-major {
  stroke-width: 1.8;
}

.angles-protractor-tick-minor {
  stroke-width: 1.1;
}

.angles-protractor-label {
  fill: #3d4650;
  font-family: var(--worksheet-font);
  font-size: 8.5px;
  font-weight: 500;
  text-anchor: middle;
  dominant-baseline: middle;
}

.angles-protractor-center,
.angles-vertex {
  fill: #1f2f3e;
}

.angles-ray {
  stroke: #c62828;
  stroke-width: 2.4;
  stroke-linecap: round;
}

.angles-marker {
  fill: none;
  stroke: #2d5da1;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.angles-answer-wrap {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}

.angles-answer-line-wrap {
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.24rem;
}

.angles-answer-line {
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  min-width: var(--angles-answer-line-width);
  min-height: 1.15em;
  border-bottom: 2px solid #253444;
  padding: 0 0.12em 0.08em;
}

.angles-answer-value {
  line-height: 1;
  font-size: var(--angles-answer-size);
  font-weight: var(--worksheet-number-weight, 700);
}

.angles-answer-unit {
  font-size: calc(var(--angles-answer-size) * 0.92);
  font-weight: 700;
  line-height: 1;
  color: #1f2f3e;
}

.worksheet-choice-options {
  width: min(100%, 15rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  justify-items: stretch;
  justify-self: center;
  gap: clamp(0.24rem, 0.95vw, 0.72rem) clamp(0.4rem, 1.2vw, 0.95rem);
  font-size: var(--worksheet-choice-font-size);
}

.worksheet-choice-options-bottom {
  margin-top: auto;
  margin-bottom: var(--worksheet-choice-bottom-inset, clamp(0.18rem, 0.75vh, 0.62rem));
}

.worksheet-choice-option {
  color: #1f2f3e;
  font-family: var(--worksheet-font);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(0.28rem, 0.9vw, 0.58rem);
  min-width: 0;
}

.worksheet-choice-badge {
  width: 1.6em;
  height: 1.6em;
  min-width: 1.6em;
  border: 0.12em solid currentColor;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82em;
  font-weight: 700;
  line-height: 1;
  box-sizing: border-box;
}

.worksheet-choice-label {
  min-width: 0;
  text-align: left;
  line-height: 1.15;
}

.worksheet-choice-option.answer-key-text .worksheet-choice-badge,
.worksheet-choice-option.answer-key-text .worksheet-choice-label {
  color: inherit;
}

.worksheet-choice-items[data-item-count="1"] .worksheet-choice-options,
.worksheet-choice-items[data-item-count="2"] .worksheet-choice-options {
  width: min(100%, 16rem);
}

.worksheet-choice-items[data-item-count="1"] .worksheet-choice-options[data-option-count="2"],
.worksheet-choice-items[data-item-count="2"] .worksheet-choice-options[data-option-count="2"] {
  grid-template-columns: minmax(0, 1fr);
}

.worksheet-choice-card-bottom-anchor {
  justify-content: flex-start;
}

.worksheet-choice-card-bottom-anchor .angles-diagram-wrap,
.worksheet-choice-card-bottom-anchor .lines-diagram-wrap,
.worksheet-choice-card-bottom-anchor .shapes-2d-shape-wrap,
.worksheet-choice-card-bottom-anchor .shapes-3d-shape-wrap {
  flex: 1 1 auto;
}

.worksheet-choice-card-bottom-anchor.shapes-2d-item,
.worksheet-choice-card-bottom-anchor.shapes-3d-item {
  display: flex;
  flex-direction: column;
}

.worksheet-choice-answer-wrap-bottom-anchor {
  width: 100%;
  min-height: 0;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

.problem-lines {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.22rem, 0.92vh, 0.62rem);
  padding: clamp(0.34rem, 1.25vh, 0.9rem) clamp(0.3rem, 1.2vw, 0.95rem);
  box-sizing: border-box;
  color: #1f2f3e;
  font-family: var(--worksheet-font);
  --lines-prompt-size: clamp(0.56rem, 1.15vw, 0.88rem);
  --lines-prompt-line-height: 1.1;
  --lines-content-width: 100%;
  --lines-content-height: 100%;
}

.lines-prompt {
  margin: 0;
  width: min(100%, 100%);
  max-width: 100%;
  color: #233244;
  font-family: var(--worksheet-font);
  font-size: var(--lines-prompt-size);
  line-height: var(--lines-prompt-line-height, 1.1);
  font-weight: 400;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}

.problem-lines-content {
  position: relative;
  width: min(100%, var(--lines-content-width, 100%));
  max-width: 100%;
  height: var(--lines-content-height, 100%);
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lines-items {
  width: 100%;
  height: 100%;
  display: grid;
  gap: var(--lines-set-gap, clamp(0.34rem, 1.4vh, 0.9rem));
  align-items: stretch;
  justify-items: stretch;
}

.lines-item-slot {
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lines-item {
  width: min(100%, 100%);
  max-width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.25rem, 1vh, 0.7rem);
  --lines-diagram-width: min(100%, 220px);
  --lines-diagram-height: min(100%, 140px);
  --lines-answer-size: clamp(0.95rem, 2.8vw, 1.7rem);
  --worksheet-choice-font-size: clamp(0.72rem, 1.9vw, 1rem);
  --lines-answer-line-width: clamp(4rem, 22vw, 8rem);
}

.lines-diagram-wrap {
  width: min(100%, var(--lines-diagram-width));
  height: var(--lines-diagram-height);
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lines-diagram-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.lines-relationship-line,
.lines-relationship-marker {
  fill: none;
  stroke: #243747;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lines-figure-highlight,
.lines-figure-arrow {
  fill: none;
  stroke: #c62828;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lines-point {
  fill: #243747;
}

.lines-point-highlighted {
  fill: #c62828;
}

.lines-point-label {
  fill: #243747;
  font-family: var(--worksheet-font);
  font-size: 12px;
  font-weight: 600;
  text-anchor: middle;
  dominant-baseline: middle;
}

.lines-answer-wrap {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}

.lines-answer-line-wrap {
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
}

.lines-answer-line {
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  min-width: var(--lines-answer-line-width);
  min-height: 1.15em;
  border-bottom: 2px solid #253444;
  padding: 0 0.12em 0.08em;
}

.lines-answer-value {
  line-height: 1;
  font-size: var(--lines-answer-size);
  font-weight: var(--worksheet-number-weight, 700);
}

.problem-expanded-form {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.22rem, 0.92vh, 0.62rem);
  padding: clamp(0.34rem, 1.25vh, 0.9rem) clamp(0.3rem, 1.2vw, 0.95rem);
  box-sizing: border-box;
  color: #1f2f3e;
  font-family: var(--worksheet-font);
  --expanded-form-prompt-size: clamp(0.56rem, 1.15vw, 0.88rem);
  --expanded-form-prompt-line-height: 1.1;
  --expanded-form-prompt-max-width: 100%;
  --expanded-form-content-max-width: 100%;
  --expanded-form-content-height: 100%;
}

.worksheet-section.with-problem-number .problem-expanded-form {
  inset: var(--problem-number-lane) 0 0 0;
}

.expanded-form-prompt {
  margin: 0;
  width: min(100%, var(--expanded-form-prompt-max-width, 100%));
  max-width: 100%;
  color: #233244;
  font-family: var(--worksheet-font);
  font-size: var(--expanded-form-prompt-size);
  line-height: var(--expanded-form-prompt-line-height, 1.1);
  font-weight: 400;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}

.problem-expanded-form-content {
  position: relative;
  width: min(100%, var(--expanded-form-content-max-width, 100%));
  max-width: 100%;
  height: var(--expanded-form-content-height, 100%);
  min-height: 0;
  flex: 1 1 auto;
}

.problem-expanded-form-content > .expanded-form-problem {
  position: absolute;
  inset: 0;
}

.problem-expanded-form-content > .expanded-form-problems {
  position: absolute;
  inset: 0;
}

.expanded-form-problems {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.expanded-form-problems[data-item-count='2'][data-item-layout='stacked'] {
  flex-direction: column;
  gap: clamp(0.3rem, 1.45vh, 0.95rem);
}

.expanded-form-problems[data-item-count='2'][data-item-layout='horizontal'] {
  flex-direction: row;
  gap: clamp(0.36rem, 1.8vw, 1.02rem);
}

.expanded-form-problem-slot {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.expanded-form-problems[data-item-count='1'] .expanded-form-problem-slot {
  width: 100%;
  height: 100%;
}

.expanded-form-problems[data-item-count='2'][data-item-layout='stacked'] .expanded-form-problem-slot {
  width: 100%;
  flex: 1 1 0;
}

.expanded-form-problems[data-item-count='2'][data-item-layout='horizontal'] .expanded-form-problem-slot {
  height: 100%;
  flex: 1 1 0;
}

.expanded-form-problem {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.28rem, 1.1vw, 0.58rem);
  padding: clamp(0.28rem, 1.2vw, 0.72rem) clamp(0.22rem, 1vw, 0.52rem);
  max-width: 100%;
  font-family: var(--worksheet-font);
  color: #1f2f3e;
  white-space: nowrap;
  --expanded-form-font-size: clamp(0.84rem, 2.5vw, 1.7rem);
  --expanded-form-term-width: clamp(2.2em, 9vw, 5.2em);
  --expanded-form-plus-gap: clamp(0.08em, 0.45vw, 0.24em);
  --expanded-form-plus-width: clamp(0.44em, 2.2vw, 1em);
  --expanded-form-separator-gap: clamp(0.16rem, 0.9vw, 0.44rem);
  --expanded-form-operand-chars: 4;
  --expanded-form-op-slot-width: 0.95em;
  --expanded-form-equals-slot-width: 0.95em;
}

.worksheet-section.with-problem-number > .expanded-form-problem {
  inset: var(--problem-number-lane) 0 0 0;
}

.expanded-form-row {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: clamp(0.16rem, 0.8vw, 0.48rem);
  width: min(100%, var(--expanded-form-content-width, 100%));
  margin-inline: auto;
  min-width: 0;
}

.expanded-form-left {
  display: grid;
  grid-template-columns:
    var(--expanded-form-op-slot-width)
    minmax(calc(var(--expanded-form-operand-chars) * 0.72em), auto)
    var(--expanded-form-equals-slot-width);
  align-items: end;
  column-gap: clamp(0.1em, 0.5vw, 0.24em);
  flex: 0 0 auto;
  min-width: 0;
  font-size: var(--expanded-form-font-size);
  font-weight: 700;
  line-height: 1;
  color: #1b2733;
}

.expanded-form-op-slot,
.expanded-form-equals {
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  font-size: var(--expanded-form-font-size);
  font-weight: 700;
  line-height: 1;
  color: #1b2733;
}

.expanded-form-op-slot.placeholder {
  visibility: hidden;
}

.expanded-form-operand {
  display: inline-flex;
  align-items: flex-end;
  justify-content: flex-end;
  min-width: calc(var(--expanded-form-operand-chars) * 0.72em);
  gap: 0.015em;
  text-align: right;
  font-size: var(--expanded-form-font-size);
  font-weight: 700;
  line-height: 1;
  color: #1b2733;
}

.expanded-form-digit {
  display: inline-block;
  text-align: center;
}

.expanded-form-separator {
  display: inline-block;
  margin: 0 -0.02em;
}

.expanded-form-digit.editable-digit-cell {
  cursor: pointer;
  border-radius: 4px;
  transition: background-color var(--anim-fast), box-shadow var(--anim-fast);
}

.expanded-form-digit.editable-digit-cell:hover {
  background-color: rgba(211, 232, 251, 0.56);
}

.expanded-form-digit.editable-digit-cell:focus-visible {
  outline: 2px solid #2d7dbf;
  outline-offset: 1px;
  background-color: rgba(211, 232, 251, 0.6);
}

.expanded-form-digit.digit-editing {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.expanded-form-terms {
  display: inline-flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: var(--expanded-form-plus-gap);
  min-width: 0;
  flex: 1 1 auto;
  font-size: var(--expanded-form-font-size);
}

.expanded-form-term {
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  width: var(--expanded-form-term-width);
  min-width: 1.45em;
  min-height: 1.22em;
  border-bottom: 3px solid var(--expanded-term-color, #2f5fd7);
  padding: 0 0.12em 0.06em;
  line-height: 1;
  color: #1b2733;
}

.expanded-form-plus {
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  width: var(--expanded-form-plus-width);
  min-width: var(--expanded-form-plus-width);
  font-size: var(--expanded-form-font-size);
  font-weight: 700;
  line-height: 1;
  color: #1b2733;
}

.expanded-form-total {
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  min-width: 1.7em;
  border-bottom: 3px solid #151d24;
  padding: 0 0.12em 0.06em;
  font-size: var(--expanded-form-font-size);
  font-weight: 700;
  line-height: 1;
  color: #1b2733;
}

.expanded-form-row-result .expanded-form-total {
  grid-column: 1 / span 2;
  justify-self: stretch;
}

.expanded-form-row-result .expanded-form-equals {
  grid-column: 3;
}

.expanded-form-separator-line {
  width: min(100%, var(--expanded-form-content-width, 100%));
  border-top: 3px solid #151d24;
  margin: var(--expanded-form-separator-gap) auto;
}

.horizontal-equation {
  width: 100%;
  max-width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: var(--horizontal-gap, clamp(0.28rem, 1.8vw, 0.72rem));
  font-family: var(--worksheet-font);
  font-size: var(--horizontal-font-size);
  font-weight: 700;
  line-height: 1.05;
  color: #1f2f3e;
  white-space: nowrap;
}

.horizontal-equations {
  width: 100%;
  height: 100%;
  min-height: 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.horizontal-equations[data-item-layout='stacked'] {
  flex-direction: column;
  gap: var(--horizontal-set-stack-gap, clamp(0.38rem, 2vh, 1rem));
}

.horizontal-equations[data-item-layout='horizontal'] {
  flex-direction: row;
  gap: var(--horizontal-set-row-gap, clamp(0.42rem, 2.3vw, 1.05rem));
}

.horizontal-equations[data-item-layout='grid'] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  column-gap: var(--horizontal-set-row-gap, clamp(0.42rem, 2.3vw, 1.05rem));
  row-gap: var(--horizontal-set-stack-gap, clamp(0.38rem, 2vh, 1rem));
}

.horizontal-equations[data-item-layout='paired'] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  column-gap: var(--horizontal-set-row-gap, clamp(0.42rem, 2.3vw, 1.05rem));
  row-gap: var(--horizontal-set-stack-gap, clamp(0.38rem, 2vh, 1rem));
}

.horizontal-equation-slot {
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.horizontal-equations[data-item-layout='stacked'] .horizontal-equation-slot {
  width: 100%;
  flex: 1 1 0;
}

.horizontal-equations[data-item-layout='horizontal'] .horizontal-equation-slot {
  height: 100%;
  flex: 1 1 0;
}

.horizontal-equations[data-item-layout='grid'] .horizontal-equation-slot {
  width: 100%;
  height: 100%;
}

.horizontal-equations[data-item-layout='paired'] .horizontal-equation-slot {
  width: 100%;
  height: 100%;
}

.horizontal-equations[data-item-layout='paired'][data-item-count='3'] .horizontal-equation-slot:last-child {
  grid-column: 1 / span 2;
  justify-self: center;
  width: calc((100% - var(--horizontal-set-row-gap, clamp(0.42rem, 2.3vw, 1.05rem))) / 2);
  max-width: 100%;
}

.horizontal-equation-slot .horizontal-equation {
  max-width: 100%;
}

.horizontal-operand {
  display: inline-flex;
  align-items: flex-end;
  gap: 0.02em;
  font-weight: var(--worksheet-number-weight, 700);
}

.horizontal-symbol {
  display: inline-flex;
  align-items: flex-end;
  color: #1f2f3e;
}

.horizontal-answer-blank {
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  min-width: 8.4em;
  min-height: 1.2em;
  border-bottom: 2px solid #253444;
  padding: 0 0.12em 0.08em;
}

.horizontal-answer-text {
  line-height: 1;
  font-weight: var(--worksheet-number-weight, 700);
}

.horizontal-digit.editable-digit-cell {
  cursor: pointer;
  border-radius: 4px;
  transition: background-color var(--anim-fast), box-shadow var(--anim-fast);
}

.horizontal-digit.editable-digit-cell:hover {
  background-color: rgba(211, 232, 251, 0.56);
}

.horizontal-digit.editable-digit-cell:focus-visible {
  outline: 2px solid #2d7dbf;
  outline-offset: 1px;
  background-color: rgba(211, 232, 251, 0.6);
}

.horizontal-digit.digit-editing {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.problem-area-model {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(0.4rem, 1.4vh, 0.8rem);
  padding: clamp(0.2rem, 1.1vh, 0.62rem) clamp(0.2rem, 1vw, 0.58rem);
  box-sizing: border-box;
  color: #1f2f3e;
}

.area-model-equation {
  width: min(100%, 26rem);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.16rem, 0.85vw, 0.4rem);
  font-family: var(--worksheet-font);
  font-size: clamp(1rem, 2.4vw, 1.56rem);
  font-weight: 700;
  line-height: 1.05;
  white-space: nowrap;
}

.area-model-operand {
  display: inline-flex;
  align-items: flex-end;
  gap: 0.02em;
}

.area-model-symbol {
  display: inline-flex;
  align-items: flex-end;
}

.area-model-answer-blank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: clamp(4rem, 20vw, 7.4rem);
  min-height: clamp(1.4rem, 3.6vh, 2.2rem);
  border: 2px solid #253444;
  border-radius: 8px;
  background: #ffffff;
  padding: 0 0.24em;
}

.area-model-answer-text {
  line-height: 1;
}

.area-model-diagram {
  width: min(100%, 26rem);
  max-width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr;
  column-gap: clamp(0.2rem, 0.7vw, 0.5rem);
  row-gap: clamp(0.12rem, 0.45vw, 0.3rem);
  --area-model-cols: 2;
  --area-model-rows: 2;
}

.area-model-corner-spacer {
  min-width: clamp(1.5rem, 8vw, 3.3rem);
}

.area-model-top-labels {
  display: grid;
  grid-template-columns: repeat(var(--area-model-cols), minmax(0, 1fr));
  align-items: end;
}

.area-model-left-labels {
  display: grid;
  grid-template-rows: repeat(var(--area-model-rows), minmax(0, 1fr));
  align-items: center;
  justify-items: end;
  padding-right: 0.16rem;
}

.area-model-top-label,
.area-model-left-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--worksheet-font);
  font-size: clamp(0.82rem, 1.8vw, 1.08rem);
  line-height: 1.05;
}

.area-model-grid {
  display: grid;
  grid-template-columns: repeat(var(--area-model-cols), minmax(0, 1fr));
  grid-template-rows: repeat(var(--area-model-rows), minmax(0, 1fr));
  border: 2px solid #253444;
  background: #ffffff;
  min-height: 0;
}

.area-model-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 2px solid #394a5c;
  border-bottom: 2px solid #394a5c;
  font-size: clamp(0.8rem, 1.7vw, 1.1rem);
  font-family: var(--worksheet-font);
  line-height: 1.05;
  padding: 0.08rem;
}

.area-model-cell.last-col {
  border-right: none;
}

.area-model-cell.last-row {
  border-bottom: none;
}

.area-model-equation-digit.editable-digit-cell {
  cursor: pointer;
  border-radius: 4px;
  transition: background-color var(--anim-fast), box-shadow var(--anim-fast);
}

.area-model-equation-digit.editable-digit-cell:hover {
  background-color: rgba(211, 232, 251, 0.56);
}

.area-model-equation-digit.editable-digit-cell:focus-visible {
  outline: 2px solid #2d7dbf;
  outline-offset: 1px;
  background-color: rgba(211, 232, 251, 0.6);
}

.area-model-equation-digit.digit-editing {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.problem-skip-count {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(0.22rem, 0.9vh, 0.5rem);
  padding: clamp(0.32rem, 1.2vh, 0.76rem) clamp(0.26rem, 1vw, 0.7rem);
  box-sizing: border-box;
  color: #1f2f3e;
  --skip-count-strip-width: min(100%, 22rem);
  --skip-count-strip-height: clamp(2.4rem, 20vh, 4.8rem);
  --skip-count-value-size: clamp(0.82rem, 1.8vw, 1.3rem);
  --skip-count-prompt-size: clamp(0.59rem, 1.31vw, 0.89rem);
  --skip-count-start-size: clamp(0.56rem, 1.1vw, 0.88rem);
}

.worksheet-section.with-problem-number .problem-skip-count {
  inset: var(--problem-number-lane) 0 0 0;
}

.skip-count-prompt {
  margin: 0;
  font-family: var(--worksheet-font);
  font-size: var(--skip-count-prompt-size);
  line-height: 1.08;
  font-weight: 400;
  color: #1f2f3e;
  text-align: center;
}

.skip-count-strip {
  width: min(100%, var(--skip-count-strip-width));
  height: var(--skip-count-strip-height);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(var(--skip-count-box-count, 10), minmax(0, 1fr));
  border: 2px solid #253444;
  background: #ffffff;
}

.skip-count-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 2px solid #394a5c;
  min-width: 0;
}

.skip-count-box:last-child {
  border-right: none;
}

.skip-count-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  padding: 0 0.16rem;
  font-family: var(--worksheet-font);
  font-size: var(--skip-count-value-size);
  font-weight: 700;
  line-height: 1.05;
  color: #1f2f3e;
  text-align: center;
}

.skip-count-start-label {
  position: absolute;
  left: 50%;
  bottom: 4px;
  transform: translateX(-50%);
  font-family: var(--worksheet-font);
  font-size: var(--skip-count-start-size);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #1f2f3e;
  line-height: 1;
}

.problem-digit-vs-value {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(0.26rem, 1.05vh, 0.66rem);
  padding: clamp(0.34rem, 1.3vh, 0.82rem) clamp(0.3rem, 1.2vw, 0.92rem);
  box-sizing: border-box;
  color: #1f2f3e;
  font-family: var(--worksheet-font);
  --digit-vs-value-prompt-size: clamp(0.48rem, 1.05vw, 0.74rem);
  --digit-vs-value-row-size: clamp(0.96rem, 2.5vw, 2.05rem);
  --digit-vs-value-number-width: clamp(5.8rem, 33vw, 12.8rem);
  --digit-vs-value-equals-width: clamp(1rem, 4.6vw, 2.6rem);
  --digit-vs-value-answer-width: clamp(5.8rem, 36vw, 11.8rem);
  --digit-vs-value-col-gap: clamp(0.26rem, 1.2vw, 0.74rem);
}

.worksheet-section.with-problem-number .problem-digit-vs-value {
  inset: var(--problem-number-lane) 0 0 0;
}

.digit-vs-value-prompt {
  margin: 0;
  color: #233244;
  font-family: var(--worksheet-font);
  font-size: var(--digit-vs-value-prompt-size);
  line-height: 1.08;
  font-weight: 400;
  text-align: center;
}

.digit-vs-value-rows {
  width: min(100%, 35rem);
  display: flex;
  flex-direction: column;
  gap: clamp(0.34rem, 1.4vh, 0.95rem);
}

.digit-vs-value-row {
  width: min(
    100%,
    calc(
      var(--digit-vs-value-number-width) +
      var(--digit-vs-value-equals-width) +
      var(--digit-vs-value-answer-width) +
      (var(--digit-vs-value-col-gap) * 2)
    )
  );
  display: grid;
  grid-template-columns:
    minmax(0, var(--digit-vs-value-number-width))
    minmax(0, var(--digit-vs-value-equals-width))
    minmax(5.8rem, var(--digit-vs-value-answer-width));
  align-items: center;
  justify-content: center;
  column-gap: var(--digit-vs-value-col-gap);
}

.digit-vs-value-number {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  justify-self: end;
  width: 100%;
  white-space: nowrap;
  font-size: var(--digit-vs-value-row-size);
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.digit-vs-value-char {
  display: inline-flex;
  align-items: baseline;
}

.digit-vs-value-char.editable-digit-cell {
  cursor: pointer;
  border-radius: 4px;
  transition: background-color var(--anim-fast), box-shadow var(--anim-fast);
}

.digit-vs-value-char.editable-digit-cell:hover {
  background-color: rgba(211, 232, 251, 0.56);
}

.digit-vs-value-char.editable-digit-cell:focus-visible {
  outline: 2px solid #2d7dbf;
  outline-offset: 1px;
  background-color: rgba(211, 232, 251, 0.6);
}

.digit-vs-value-char.digit-editing {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.digit-vs-value-underlined {
  border-bottom: 2px solid #223242;
  line-height: 0.9;
  padding-bottom: 0.04em;
}

.digit-vs-value-equals {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  justify-self: stretch;
  font-size: calc(var(--digit-vs-value-row-size) * 0.92);
  line-height: 1;
  font-weight: 700;
}

.digit-vs-value-answer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: stretch;
  min-height: calc(var(--digit-vs-value-row-size) * 0.72);
  min-width: 5.8rem;
  width: 100%;
  border-bottom: 2px solid #253444;
}

.digit-vs-value-answer-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  padding: 0 0.12rem;
  font-family: var(--worksheet-font);
  font-size: calc(var(--digit-vs-value-row-size) * 0.72);
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.problem-more-less {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--more-less-row-gap, clamp(0.34rem, 1.15vh, 0.9rem));
  padding: clamp(0.34rem, 1.25vh, 0.9rem) clamp(0.3rem, 1.2vw, 0.96rem);
  box-sizing: border-box;
  color: #1f2f3e;
  font-family: var(--worksheet-font);
  --more-less-prompt-size: clamp(0.54rem, 1.1vw, 0.86rem);
  --more-less-prompt-line-height: 1.1;
  --more-less-prompt-max-width: 100%;
  --more-less-content-max-width: 100%;
  --more-less-content-height: 100%;
  --more-less-anchor-size: clamp(1.4rem, 5vw, 3.6rem);
  --more-less-row-size: clamp(1rem, 2.8vw, 2rem);
  --more-less-label-size: clamp(0.84rem, 2.2vw, 1.56rem);
  --more-less-row-stride: clamp(1.5rem, 5.2vh, 3.5rem);
  --more-less-answer-width: clamp(6.2rem, 32vw, 12.5rem);
  --more-less-answer-line-min-height: calc(var(--more-less-row-size) * 0.64);
  --more-less-answer-bottom-inset: 0px;
  --more-less-label-to-line-gap: 0.12em;
}

.worksheet-section.with-problem-number .problem-more-less {
  inset: var(--problem-number-lane) 0 0 0;
}

.more-less-prompt {
  margin: 0;
  width: min(100%, var(--more-less-prompt-max-width, 100%));
  color: #233244;
  font-family: var(--worksheet-font);
  font-size: var(--more-less-prompt-size);
  line-height: var(--more-less-prompt-line-height, 1.1);
  font-weight: 400;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}

.more-less-anchor {
  width: min(100%, var(--more-less-content-max-width, 100%));
  text-align: center;
  font-family: var(--worksheet-font);
  font-size: var(--more-less-anchor-size);
  line-height: 1;
  font-weight: 500;
  color: #0f8a2a;
  font-variant-numeric: tabular-nums;
}

.more-less-anchor-digit,
.more-less-anchor-separator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.more-less-rows {
  width: min(100%, var(--more-less-content-max-width, 100%));
  display: flex;
  flex-direction: column;
  gap: var(--more-less-row-gap, clamp(0.34rem, 1.15vh, 0.9rem));
}

.more-less-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(6rem, var(--more-less-answer-width));
  align-items: stretch;
  min-height: var(--more-less-row-stride, auto);
  column-gap: clamp(0.24rem, 1.05vw, 0.86rem);
}

.more-less-label {
  justify-self: start;
  align-self: center;
  font-family: var(--worksheet-font);
  font-size: var(--more-less-label-size);
  line-height: 1.05;
  font-weight: 400;
  color: #233244;
  white-space: nowrap;
}

.more-less-answer-line {
  position: relative;
  justify-self: stretch;
  align-self: end;
  margin-bottom: var(--more-less-answer-bottom-inset, 0px);
  min-width: 0;
  min-height: var(--more-less-answer-line-min-height);
  border-bottom: 2px solid #253444;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: margin-bottom var(--anim-fast);
}

.more-less-answer-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  padding: 0 0.14rem;
  font-family: var(--worksheet-font);
  font-size: calc(var(--more-less-row-size) * 0.72);
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.problem-even-odd {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(0.34rem, 1.15vh, 0.9rem);
  padding: clamp(0.34rem, 1.25vh, 0.9rem) clamp(0.3rem, 1.2vw, 0.96rem);
  box-sizing: border-box;
  color: #1f2f3e;
  font-family: var(--worksheet-font);
  --even-odd-prompt-size: clamp(0.54rem, 1.1vw, 0.86rem);
  --even-odd-prompt-line-height: 1.1;
  --even-odd-prompt-max-width: 100%;
  --even-odd-content-max-width: 100%;
  --even-odd-content-height: 100%;
  --even-odd-number-size: clamp(1.22rem, 4.5vw, 3.25rem);
  --even-odd-column-count: 2;
  --even-odd-row-count: 3;
  --even-odd-row-gap: clamp(0.36rem, 1.35vh, 1.28rem);
  --even-odd-col-gap: clamp(0.7rem, 5vw, 3.2rem);
  --even-odd-zigzag-offset: 0px;
}

.worksheet-section.with-problem-number .problem-even-odd {
  inset: var(--problem-number-lane) 0 0 0;
}

.even-odd-prompt {
  margin: 0;
  width: min(100%, var(--even-odd-prompt-max-width, 100%));
  color: #233244;
  font-family: var(--worksheet-font);
  font-size: var(--even-odd-prompt-size);
  line-height: var(--even-odd-prompt-line-height, 1.1);
  font-weight: 400;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}

.even-odd-number-grid {
  width: min(100%, var(--even-odd-content-max-width, 100%));
  max-height: var(--even-odd-content-height, 100%);
  min-height: 0;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(var(--even-odd-column-count, 2), minmax(0, 1fr));
  grid-template-rows: repeat(var(--even-odd-row-count, 5), minmax(0, 1fr));
  column-gap: var(--even-odd-col-gap);
  row-gap: var(--even-odd-row-gap);
  align-items: center;
  justify-items: center;
}

.even-odd-number {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 0.1em 0.24em;
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: var(--worksheet-font);
  font-size: var(--even-odd-number-size);
  font-weight: 400;
  line-height: 1;
  color: #233244;
  font-variant-numeric: tabular-nums;
  text-align: center;
  white-space: nowrap;
}

.even-odd-number[data-grid-row='1'] { grid-row: 1; }
.even-odd-number[data-grid-row='2'] { grid-row: 2; }
.even-odd-number[data-grid-row='3'] { grid-row: 3; }
.even-odd-number[data-grid-row='4'] { grid-row: 4; }
.even-odd-number[data-grid-row='5'] { grid-row: 5; }
.even-odd-number[data-grid-col='1'] { grid-column: 1; }
.even-odd-number[data-grid-col='2'] { grid-column: 2; }
.even-odd-number[data-grid-col='3'] { grid-column: 3; }
.even-odd-number[data-zigzag='down'] { transform: translateY(var(--even-odd-zigzag-offset, 0px)); }
.even-odd-number[data-zigzag='up'] { transform: translateY(calc(-1 * var(--even-odd-zigzag-offset, 0px))); }

.even-odd-number.answer-key-marked {
  border-color: #c62828;
  color: #c62828;
}

.problem-perimeter,
.problem-area {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(0.28rem, 1.05vh, 0.78rem);
  padding: clamp(0.34rem, 1.25vh, 0.86rem) clamp(0.3rem, 1.2vw, 0.94rem);
  box-sizing: border-box;
  color: #1f2f3e;
  font-family: var(--worksheet-font);
  --perimeter-prompt-size: clamp(0.54rem, 1.1vw, 0.86rem);
  --perimeter-prompt-line-height: 1.1;
  --perimeter-content-max-width: 100%;
  --perimeter-content-height: 100%;
  --perimeter-shape-height: clamp(90px, 50%, 182px);
  --perimeter-answer-size: clamp(0.86rem, 2.5vw, 1.5rem);
  --area-prompt-size: clamp(0.54rem, 1.1vw, 0.86rem);
  --area-prompt-line-height: 1.1;
  --area-content-max-width: 100%;
  --area-content-height: 100%;
  --area-shape-height: clamp(90px, 50%, 182px);
  --area-answer-size: clamp(0.86rem, 2.5vw, 1.5rem);
}

.worksheet-section.with-problem-number .problem-perimeter,
.worksheet-section.with-problem-number .problem-area {
  inset: var(--problem-number-lane) 0 0 0;
}

.perimeter-prompt,
.area-prompt {
  margin: 0;
  width: min(100%, 100%);
  color: #233244;
  font-family: var(--worksheet-font);
  line-height: 1.1;
  font-weight: 400;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}

.perimeter-prompt {
  font-size: var(--perimeter-prompt-size);
  line-height: var(--perimeter-prompt-line-height, 1.1);
}

.area-prompt {
  font-size: var(--area-prompt-size);
  line-height: var(--area-prompt-line-height, 1.1);
}

.perimeter-items,
.area-items {
  width: min(100%, var(--perimeter-content-max-width, 100%));
  max-height: var(--perimeter-content-height, 100%);
  min-height: 0;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: minmax(0, 1fr);
  gap: clamp(0.3rem, 1.08vh, 0.82rem);
}

.area-items {
  width: min(100%, var(--area-content-max-width, 100%));
  max-height: var(--area-content-height, 100%);
}

.perimeter-items.is-horizontal,
.area-items.is-horizontal {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: 1fr;
}

.perimeter-item,
.area-item {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: clamp(0.18rem, 0.75vh, 0.46rem);
  align-items: stretch;
}

.perimeter-shape,
.area-shape {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}

.shape-visual-svg {
  width: 100%;
  height: 100%;
  max-height: var(--perimeter-shape-height, 182px);
}

.problem-area .shape-visual-svg {
  max-height: var(--area-shape-height, 182px);
}

.shape-label {
  font-family: var(--worksheet-font);
  font-size: clamp(8px, 1.2vw, 12px);
  fill: #233244;
  font-weight: 400;
}

.perimeter-answer-line,
.area-answer-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.14rem, 0.52vw, 0.38rem);
  min-width: 0;
  color: #233244;
  font-family: var(--worksheet-font);
  font-size: var(--perimeter-answer-size);
  line-height: 1.05;
  font-weight: 400;
}

.area-answer-line {
  font-size: var(--area-answer-size);
}

.perimeter-answer-blank,
.area-answer-blank {
  min-width: clamp(4.2rem, 30%, 8.4rem);
  min-height: calc(var(--perimeter-answer-size) * 0.72);
  border-bottom: 2px solid #253444;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.16rem;
}

.area-answer-blank {
  min-height: calc(var(--area-answer-size) * 0.72);
}

.perimeter-answer-value,
.area-answer-value {
  font-size: calc(var(--perimeter-answer-size) * 0.78);
  line-height: 1;
  font-weight: 700;
  white-space: nowrap;
}

.area-answer-value {
  font-size: calc(var(--area-answer-size) * 0.78);
}

.problem-time {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(0.22rem, 0.95vh, 0.58rem);
  padding: clamp(0.34rem, 1.25vh, 0.86rem) clamp(0.3rem, 1.2vw, 0.94rem);
  box-sizing: border-box;
  color: #1f2f3e;
  font-family: var(--worksheet-font);
  --time-columns: 1;
  --time-prompt-size: clamp(0.51rem, 1.07vw, 0.82rem);
  --time-clock-size: clamp(72px, 23vh, 180px);
  --time-answer-width: clamp(6.2rem, 36vw, 13.2rem);
  --time-answer-font-size: clamp(1rem, 3.1vw, 2rem);
}

.worksheet-section.with-problem-number .problem-time {
  inset: var(--problem-number-lane) 0 0 0;
}

.time-prompt {
  margin: 0;
  color: #233244;
  font-family: var(--worksheet-font);
  font-size: var(--time-prompt-size);
  line-height: 1.08;
  font-weight: 400;
  text-align: center;
}

.time-items {
  width: min(100%, 36rem);
  display: grid;
  grid-template-columns: repeat(var(--time-columns, 1), minmax(0, 1fr));
  gap: clamp(0.38rem, 1.5vh, 1.06rem);
  align-items: center;
  justify-items: center;
}

.time-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.34rem, 1.2vw, 0.96rem);
  min-width: 0;
}

.time-clock {
  flex: 0 0 var(--time-clock-size);
  width: var(--time-clock-size);
  height: var(--time-clock-size);
  display: flex;
  align-items: center;
  justify-content: center;
}

.time-clock-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.time-clock-face {
  fill: #ffffff;
  stroke: #2d2d2d;
  stroke-width: 2.6;
}

.time-clock-tick {
  stroke: #2d2d2d;
  stroke-linecap: round;
}

.time-clock-tick-hour {
  stroke-width: 2.5;
}

.time-clock-tick-minute {
  stroke-width: 1.4;
}

.time-clock-number {
  fill: #1f2f3e;
  font-family: var(--worksheet-font);
  font-size: 11.8px;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: middle;
}

.time-clock-hand {
  stroke: #2d2d2d;
  stroke-linecap: round;
}

.time-clock-minute-hand {
  stroke-width: 2.4;
}

.time-clock-hour-hand {
  stroke-width: 3.2;
}

.time-clock-center {
  fill: #2d2d2d;
}

.time-answer {
  min-width: 0;
  width: min(100%, var(--time-answer-width));
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(0.24rem, 0.9vw, 0.72rem);
}

.time-equals {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--time-answer-font-size) * 0.9);
  line-height: 1;
  font-weight: 700;
}

.time-answer-line {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(var(--time-answer-font-size) * 0.72);
  width: min(100%, var(--time-answer-width));
  border-bottom: 2px solid #253444;
}

.time-answer-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  padding: 0 0.14rem;
  font-family: var(--worksheet-font);
  font-size: calc(var(--time-answer-font-size) * 0.72);
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.time-time-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: calc(var(--time-answer-font-size) * 1.24);
  min-width: clamp(5.4rem, 28vw, 10rem);
  padding: 0 0.74rem;
  border: 2px solid #253444;
  font-family: var(--worksheet-font);
  font-size: var(--time-answer-font-size);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.time-time-box.editable-digit-cell {
  cursor: pointer;
  transition: background-color var(--anim-fast), box-shadow var(--anim-fast), border-color var(--anim-fast);
}

.time-time-box.editable-digit-cell:hover {
  background-color: rgba(211, 232, 251, 0.48);
}

.time-time-box.editable-digit-cell:focus-visible {
  outline: 2px solid #2d7dbf;
  outline-offset: 2px;
  background-color: rgba(211, 232, 251, 0.58);
}

.time-time-box.digit-editing {
  padding: 0;
}

.time-box-editor {
  min-width: 100%;
  height: 100%;
  border-radius: inherit;
  text-align: center;
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0;
  margin: 0;
  border: 1px solid #2d7dbf;
}

.problem-fractions {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(0.2rem, 0.9vh, 0.56rem);
  padding: clamp(0.34rem, 1.25vh, 0.86rem) clamp(0.3rem, 1.2vw, 0.92rem);
  box-sizing: border-box;
  color: #1f2f3e;
  font-family: var(--worksheet-font);
  --fractions-columns: 1;
  --fractions-prompt-size: clamp(0.54rem, 1.11vw, 0.87rem);
  --fractions-term-size: clamp(0.94rem, 2.4vw, 2rem);
  --fractions-answer-width: clamp(4.4rem, 25vw, 9.2rem);
  --fractions-item-gap: clamp(0.24rem, 1.1vw, 0.76rem);
  --fractions-row-gap: clamp(0.34rem, 1.4vh, 1rem);
  --fractions-content-max-width: 100%;
}

.worksheet-section.with-problem-number .problem-fractions {
  inset: var(--problem-number-lane) 0 0 0;
}

.fractions-prompt {
  margin: 0;
  color: #233244;
  font-family: var(--worksheet-font);
  font-size: var(--fractions-prompt-size);
  line-height: 1.08;
  font-weight: 400;
  text-align: center;
}

.fractions-items {
  width: min(100%, var(--fractions-content-max-width, 100%));
  display: grid;
  grid-template-columns: repeat(var(--fractions-columns, 1), minmax(0, 1fr));
  gap: var(--fractions-row-gap, clamp(0.34rem, 1.4vh, 1rem));
  align-items: center;
  justify-items: center;
}

.fractions-scaffold {
  --fractions-scaffold-accent-a: #2f6fb6;
  --fractions-scaffold-accent-b: #d67a1f;
  position: relative;
  width: min(100%, var(--fractions-content-max-width, 100%));
  min-height: calc(var(--fractions-term-size) * 3.9);
  display: block;
  overflow: hidden;
}

.fractions-scaffold-backdrop {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.fractions-scaffold-backdrop-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  user-select: none;
}

.fractions-scaffold-overlay {
  position: absolute;
  inset: 0;
  pointer-events: auto;
}

.fractions-scaffold-equation {
  position: absolute;
  inset: 0;
  display: block;
}

.fractions-scaffold-top-expression,
.fractions-scaffold-rewrite-expression {
  position: absolute;
  inset: 0;
  margin: 0;
}

.fractions-scaffold-top-expression .fraction-term,
.fractions-scaffold-top-expression .fractions-operator,
.fractions-scaffold-rewrite-expression > .fraction-term,
.fractions-scaffold-rewrite-expression > .fractions-operator,
.fractions-scaffold-rewrite-expression > .fractions-equals,
.fractions-scaffold-rewrite-expression > .fractions-answer-line,
.fractions-scaffold-rewrite-expression > .fractions-scaffold-rewrite-slot {
  position: absolute;
  margin: 0;
}

.fractions-scaffold-top-expression .fraction-whole.editable-digit-cell,
.fractions-scaffold-top-expression .fraction-numerator.editable-digit-cell,
.fractions-scaffold-top-expression .fraction-denominator.editable-digit-cell {
  pointer-events: auto;
}

.fractions-scaffold-denominator-left {
  color: var(--fractions-scaffold-accent-a);
}

.fractions-scaffold-denominator-right {
  color: var(--fractions-scaffold-accent-b);
}

.fractions-scaffold-rewrite-slot {
  width: calc(var(--fractions-term-size) * 1.3);
  min-width: calc(var(--fractions-term-size) * 1.3);
  border-top: 2px solid #253444;
}

.fractions-scaffold-rewrite-value.answer-key-text {
  color: #c62828;
}

.fractions-scaffold-answer-line {
  width: max(calc(var(--fractions-answer-width) * 0.86), 3.9rem);
}

.fractions-item {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--fractions-item-gap);
}

.fraction-term {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--fractions-term-size) * 0.2);
  min-width: 0;
}

.fraction-whole {
  font-family: var(--worksheet-font);
  font-size: calc(var(--fractions-term-size) * 1);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.fraction-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: calc(var(--fractions-term-size) * 0.98);
  line-height: 1.06;
  gap: calc(var(--fractions-term-size) * var(--fractions-stack-gap-ratio, 0.12));
}

.fraction-numerator,
.fraction-denominator {
  font-family: var(--worksheet-font);
  font-size: calc(var(--fractions-term-size) * 0.72);
  font-weight: 700;
  line-height: 1.04;
  font-variant-numeric: tabular-nums;
}

.fraction-bar {
  width: 100%;
  border-top: 2px solid #253444;
  margin: calc(var(--fractions-term-size) * var(--fractions-bar-margin-ratio, 0.1)) 0;
}

.fractions-operator,
.fractions-equals {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--worksheet-font);
  font-size: calc(var(--fractions-term-size) * 0.92);
  line-height: 1;
  font-weight: 700;
}

.fractions-answer-line {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: calc(var(--fractions-term-size) * 0.74);
  min-width: 4.4rem;
  width: var(--fractions-answer-width);
  border-bottom: 2px solid #253444;
}

.fractions-answer-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  padding: 0 0.14rem;
  font-family: var(--worksheet-font);
  font-size: calc(var(--fractions-term-size) * 0.68);
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.fraction-whole.editable-digit-cell,
.fraction-numerator.editable-digit-cell,
.fraction-denominator.editable-digit-cell {
  cursor: text;
  border-radius: 0.2em;
}

.fraction-whole.editable-digit-cell:focus-visible,
.fraction-numerator.editable-digit-cell:focus-visible,
.fraction-denominator.editable-digit-cell:focus-visible {
  outline: 2px dashed #2d7dbf;
  outline-offset: 2px;
}

.fraction-whole.digit-editing,
.fraction-numerator.digit-editing,
.fraction-denominator.digit-editing {
  padding: 0;
}

.fraction-part-editor {
  min-width: 100%;
  height: 100%;
  border-radius: inherit;
  text-align: center;
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 0;
  margin: 0;
  border: 1px solid #2d7dbf;
}

.problem-fractions-visual {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--fractions-visual-row-gap, clamp(0.3rem, 1.1vh, 0.8rem));
  padding: clamp(0.35rem, 1.3vh, 0.9rem) clamp(0.35rem, 1.3vw, 0.95rem);
  font-family: var(--worksheet-font);
  color: #1f2f3e;
  overflow: hidden;
  --fractions-visual-prompt-size: clamp(0.56rem, 1.15vw, 0.89rem);
  --fractions-visual-prompt-line-height: 1.12;
  --fractions-visual-prompt-max-width: 100%;
  --fractions-visual-row-gap: clamp(0.32rem, 1.15vh, 0.9rem);
  --fractions-visual-size: clamp(44px, 10.3vw, 116px);
  --fractions-visual-numeric-size: clamp(1.18rem, 3.15vw, 1.98rem);
  --fractions-visual-numeric-part-size: clamp(1.16rem, 2.72vw, 1.74rem);
  --fractions-visual-order-numeric-size: clamp(1.08rem, 2.72vw, 1.56rem);
  --fractions-visual-order-numeric-part-size: clamp(1rem, 2.38vw, 1.42rem);
  --fractions-visual-identify-prompt-size: clamp(0.61rem, 1.33vw, 0.89rem);
  --fractions-visual-item-height: auto;
  --fractions-visual-identify-horizontal-gap: clamp(0.34rem, 1.25vw, 1rem);
  --fractions-visual-answer-bottom-inset: 0px;
  --fractions-visual-fill-color: rgba(89, 154, 227, 0.75);
}

.worksheet-section.with-problem-number .problem-fractions-visual {
  inset: var(--problem-number-lane) 0 0 0;
}

.fractions-visual-prompt {
  margin: 0;
  width: min(100%, var(--fractions-visual-prompt-max-width, 100%));
  max-width: 100%;
  font-family: var(--worksheet-font);
  font-size: var(--fractions-visual-prompt-size);
  line-height: var(--fractions-visual-prompt-line-height, 1.1);
  font-weight: 400;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}

.fractions-visual-items {
  width: min(100%, 100%);
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: var(--fractions-visual-item-height, auto);
  gap: var(--fractions-visual-row-gap, clamp(0.32rem, 1.15vh, 0.9rem));
  align-items: stretch;
}

.problem-fractions-visual[data-subtype='identify'][data-identify-layout='horizontal'] .fractions-visual-items.fractions-visual-identify-horizontal {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: var(--fractions-visual-item-height, auto);
  column-gap: var(--fractions-visual-identify-horizontal-gap, clamp(0.34rem, 1.25vw, 1rem));
  row-gap: 0;
}

.fractions-visual-item {
  height: var(--fractions-visual-item-height, auto);
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.35rem, 1.1vw, 0.95rem);
  flex-wrap: wrap;
}

.problem-fractions-visual[data-subtype='identify'] .fractions-visual-item {
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
}

.fractions-visual-compare-side {
  min-width: 0;
  flex: 1 1 34%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.fractions-visual-item.fractions-visual-compare-layout {
  display: grid;
  grid-template-columns: max-content max-content max-content;
  justify-content: center;
  align-items: center;
  column-gap: clamp(0.45rem, 1.45vw, 1.05rem);
  row-gap: 0;
  flex-wrap: nowrap;
}

.fractions-visual-item.fractions-visual-compare-layout .fractions-visual-compare-side {
  flex: 0 0 auto;
}

.fractions-visual-compare-slot {
  width: clamp(4.8rem, 14vw, 7.6rem);
  min-height: clamp(1.3rem, 4vw, 2rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-bottom: 2px solid #253444;
  font-family: var(--worksheet-font);
  font-size: clamp(1rem, 2.5vw, 1.45rem);
  font-weight: 700;
  line-height: 1;
  transition: margin-bottom var(--anim-fast);
}

.problem-fractions-visual[data-subtype='compare'][data-answer-bottom-anchor='true'] .fractions-visual-compare-slot {
  align-self: end;
  margin-bottom: var(--fractions-visual-answer-bottom-inset, 0px);
}

.fractions-visual-numeric {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: clamp(2.6rem, 9vw, 4.5rem);
  font-family: var(--worksheet-font);
  font-size: var(--fractions-visual-numeric-size, clamp(1.1rem, 2.9vw, 1.85rem));
  font-weight: 700;
  line-height: 1.05;
  text-align: center;
}

.fractions-visual-numeric-slash {
  white-space: nowrap;
}

.fractions-visual-numeric-stacked {
  flex-direction: column;
  min-width: clamp(2.2rem, 8vw, 3.7rem);
  gap: 0;
  line-height: 1;
}

.fractions-visual-numeric-numerator,
.fractions-visual-numeric-denominator {
  display: block;
  font-size: var(--fractions-visual-numeric-part-size, clamp(1.08rem, 2.5vw, 1.6rem));
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.fractions-visual-numeric-bar {
  width: 100%;
  min-width: 1.35em;
  border-top: 2px solid #253444;
  margin: 0.09em 0;
}

.fraction-visual {
  width: var(--fractions-visual-size, clamp(38px, 9vw, 102px));
  height: var(--fractions-visual-size, clamp(38px, 9vw, 102px));
  box-sizing: border-box;
  border: 2px solid #253444;
  background: #ffffff;
  transition: width var(--anim-fast), height var(--anim-fast);
}

.fraction-visual-circle {
  position: relative;
  border-radius: 50%;
  --fraction-denominator: 2;
  --fraction-fill-percent: 50%;
  --fraction-fill-color: var(--fractions-visual-fill-color, rgba(89, 154, 227, 0.75));
  background: conic-gradient(
    from -90deg,
    var(--fraction-fill-color) 0 var(--fraction-fill-percent),
    #ffffff var(--fraction-fill-percent) 100%
  );
  overflow: hidden;
}

.fraction-visual-circle[data-shaded-mode='blank'] {
  background: #ffffff;
}

.fraction-visual-circle.fraction-visual-answer {
  --fraction-fill-color: rgba(198, 40, 40, 0.76);
}

.fraction-visual-circle::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(
    from -90deg,
    transparent 0 calc((360deg / var(--fraction-denominator)) - 1.6deg),
    rgba(37, 52, 68, 0.46) calc((360deg / var(--fraction-denominator)) - 1.6deg) calc(360deg / var(--fraction-denominator))
  );
  pointer-events: none;
}

.fraction-visual-circle-segment {
  display: none;
}

.fraction-visual-rectangle {
  --fraction-visual-rows: 1;
  --fraction-visual-cols: 2;
  width: calc(var(--fractions-visual-size, clamp(38px, 9vw, 102px)) * 1.26);
  height: calc(var(--fractions-visual-size, clamp(38px, 9vw, 102px)) * 0.82);
  border-radius: 0.24rem;
  display: grid;
  grid-template-columns: repeat(var(--fraction-visual-cols), minmax(0, 1fr));
  grid-template-rows: repeat(var(--fraction-visual-rows), minmax(0, 1fr));
  overflow: hidden;
  transition: width var(--anim-fast), height var(--anim-fast);
}

.fraction-visual-rect-cell {
  border-right: 1.5px solid #253444;
  border-bottom: 1.5px solid #253444;
  background: #ffffff;
}

.fraction-visual-rect-cell.is-shaded {
  background: var(--fractions-visual-fill-color, rgba(89, 154, 227, 0.75));
}

.fraction-visual-rect-cell.is-answer-shaded {
  background: rgba(198, 40, 40, 0.76);
}

.fractions-visual-order-cards {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.28rem, 1vw, 0.7rem);
  align-items: stretch;
  min-height: 100%;
}

.fractions-visual-item.fractions-visual-order-layout {
  align-items: stretch;
}

.fractions-visual-order-entry {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  justify-content: stretch;
  row-gap: clamp(0.2rem, 0.75vh, 0.48rem);
  min-height: 100%;
}

.fractions-visual-order-card {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: end;
  min-height: 0;
}

.fractions-visual-order-card .fractions-visual-numeric {
  min-width: clamp(2.1rem, 7.6vw, 3.6rem);
  font-size: var(--fractions-visual-order-numeric-size, clamp(0.98rem, 2.35vw, 1.42rem));
}

.fractions-visual-order-card .fractions-visual-numeric-numerator,
.fractions-visual-order-card .fractions-visual-numeric-denominator {
  font-size: var(--fractions-visual-order-numeric-part-size, clamp(0.92rem, 2.1vw, 1.26rem));
}

.fractions-visual-order-answer-slot {
  width: min(92%, 7.2rem);
  min-height: 1.12rem;
  border-bottom: 2px solid #253444;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: end;
}

.fractions-visual-order-answer-value {
  white-space: nowrap;
}

.fractions-visual-answer-line {
  width: min(86%, 20rem);
  min-height: 1.22rem;
  border-bottom: 2px solid #253444;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: margin-top var(--anim-fast), margin-bottom var(--anim-fast);
}

.problem-fractions-visual[data-subtype='identify'][data-layout-count='2'][data-identify-layout='horizontal'][data-answer-bottom-anchor='false'] .fractions-visual-item[data-identify-mode='name-shaded'] .fractions-visual-answer-line {
  margin-top: clamp(0.55rem, calc(var(--fractions-visual-item-height, 0px) * 0.12), 2.25rem);
}

.problem-fractions-visual[data-subtype='identify'][data-answer-bottom-anchor='true'] .fractions-visual-item[data-identify-mode='name-shaded'] .fractions-visual-answer-line {
  margin-top: auto;
  margin-bottom: var(--fractions-visual-answer-bottom-inset, 0px);
}

.fractions-visual-answer-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.24rem;
  font-family: var(--worksheet-font);
  font-size: clamp(0.8rem, 2vw, 1.08rem);
  font-weight: 700;
  line-height: 1;
  text-align: center;
}

.fractions-visual-identify-prompt {
  width: 100%;
  text-align: center;
  font-size: var(--fractions-visual-identify-prompt-size, clamp(0.54rem, 1.19vw, 0.8rem));
  font-weight: 400;
  line-height: 1.1;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}

.problem-decimals-visual {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--decimals-visual-row-gap, clamp(0.3rem, 1.1vh, 0.8rem));
  padding: clamp(0.35rem, 1.3vh, 0.9rem) clamp(0.35rem, 1.3vw, 0.95rem);
  font-family: var(--worksheet-font);
  color: #1f2f3e;
  overflow: hidden;
  --decimals-visual-prompt-size: clamp(0.56rem, 1.15vw, 0.89rem);
  --decimals-visual-prompt-line-height: 1.12;
  --decimals-visual-prompt-max-width: 100%;
  --decimals-visual-row-gap: clamp(0.32rem, 1.15vh, 0.9rem);
  --decimals-visual-size: clamp(44px, 10.3vw, 116px);
  --decimals-visual-numeric-size: clamp(1.08rem, 2.85vw, 1.86rem);
  --decimals-visual-order-numeric-size: clamp(0.98rem, 2.45vw, 1.46rem);
  --decimals-visual-numeric-weight: 700;
  --decimals-visual-answer-weight: 700;
  --decimals-visual-identify-prompt-size: clamp(0.61rem, 1.33vw, 0.89rem);
  --decimals-visual-item-height: auto;
  --decimals-visual-identify-horizontal-gap: clamp(0.34rem, 1.25vw, 1rem);
  --decimals-visual-answer-bottom-inset: 0px;
  --decimals-visual-fill-color: rgba(89, 154, 227, 0.75);
  --decimals-visual-tenths-height-factor: 0.7;
}

.worksheet-section.with-problem-number .problem-decimals-visual {
  inset: var(--problem-number-lane) 0 0 0;
}

.decimals-visual-prompt {
  margin: 0;
  width: min(100%, var(--decimals-visual-prompt-max-width, 100%));
  max-width: 100%;
  font-family: var(--worksheet-font);
  font-size: var(--decimals-visual-prompt-size);
  line-height: var(--decimals-visual-prompt-line-height, 1.1);
  font-weight: 400;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}

.decimals-visual-items {
  width: min(100%, 100%);
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: var(--decimals-visual-item-height, auto);
  gap: var(--decimals-visual-row-gap, clamp(0.32rem, 1.15vh, 0.9rem));
  align-items: stretch;
}

.problem-decimals-visual[data-subtype='identify'][data-identify-layout='horizontal'] .decimals-visual-items.decimals-visual-identify-horizontal {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: var(--decimals-visual-item-height, auto);
  column-gap: var(--decimals-visual-identify-horizontal-gap, clamp(0.34rem, 1.25vw, 1rem));
  row-gap: 0;
}

.decimals-visual-item {
  height: var(--decimals-visual-item-height, auto);
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.35rem, 1.1vw, 0.95rem);
  flex-wrap: wrap;
}

.problem-decimals-visual[data-subtype='identify'] .decimals-visual-item {
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
}

.decimals-visual-compare-side {
  min-width: 0;
  flex: 1 1 34%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.decimals-visual-item.decimals-visual-compare-layout {
  display: grid;
  grid-template-columns: max-content max-content max-content;
  justify-content: center;
  align-items: center;
  column-gap: clamp(0.45rem, 1.45vw, 1.05rem);
  row-gap: 0;
  flex-wrap: nowrap;
}

.decimals-visual-item.decimals-visual-compare-layout .decimals-visual-compare-side {
  flex: 0 0 auto;
}

.decimals-visual-compare-slot {
  width: clamp(4.8rem, 14vw, 7.6rem);
  min-height: clamp(1.3rem, 4vw, 2rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-bottom: 2px solid #253444;
  font-family: var(--worksheet-font);
  font-size: clamp(1rem, 2.5vw, 1.45rem);
  font-weight: 700;
  line-height: 1;
  transition: margin-bottom var(--anim-fast);
}

.problem-decimals-visual[data-subtype='compare'][data-answer-bottom-anchor='true'] .decimals-visual-compare-slot {
  align-self: end;
  margin-bottom: var(--decimals-visual-answer-bottom-inset, 0px);
}

.decimals-visual-numeric {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: clamp(2.6rem, 9vw, 4.5rem);
  font-family: var(--worksheet-font);
  font-size: var(--decimals-visual-numeric-size, clamp(1.08rem, 2.85vw, 1.86rem));
  font-weight: var(--decimals-visual-numeric-weight, 700);
  line-height: 1.05;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.decimals-visual-order-cards {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.28rem, 1vw, 0.7rem);
  align-items: stretch;
  min-height: 100%;
}

.decimals-visual-item.decimals-visual-order-layout {
  align-items: stretch;
}

.decimals-visual-order-entry {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  justify-content: stretch;
  row-gap: clamp(0.2rem, 0.75vh, 0.48rem);
  min-height: 100%;
}

.decimals-visual-order-card {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  min-height: 0;
}

.decimals-visual-order-card .decimals-visual-numeric {
  min-width: clamp(2.1rem, 7.6vw, 3.6rem);
  font-size: var(--decimals-visual-order-numeric-size, clamp(0.92rem, 2.2vw, 1.34rem));
}

.decimals-visual-order-answer-slot {
  width: min(92%, 7.2rem);
  min-height: 1.12rem;
  border-bottom: 2px solid #253444;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  align-self: end;
}

.decimals-visual-order-answer-value {
  white-space: nowrap;
}

.decimals-visual-answer-line {
  width: min(86%, 20rem);
  min-height: 1.22rem;
  border-bottom: 2px solid #253444;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: margin-top var(--anim-fast), margin-bottom var(--anim-fast);
}

.problem-decimals-visual[data-subtype='identify'][data-layout-count='2'][data-identify-layout='horizontal'][data-answer-bottom-anchor='false'] .decimals-visual-item[data-identify-mode='name-shaded'] .decimals-visual-answer-line {
  margin-top: clamp(0.55rem, calc(var(--decimals-visual-item-height, 0px) * 0.12), 2.25rem);
}

.problem-decimals-visual[data-subtype='identify'][data-answer-bottom-anchor='true'] .decimals-visual-item[data-identify-mode='name-shaded'] .decimals-visual-answer-line {
  margin-top: auto;
  margin-bottom: var(--decimals-visual-answer-bottom-inset, 0px);
}

.decimals-visual-answer-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.24rem;
  font-family: var(--worksheet-font);
  font-size: clamp(0.8rem, 2vw, 1.08rem);
  font-weight: var(--decimals-visual-answer-weight, 700);
  line-height: 1;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.decimals-visual-identify-prompt {
  width: 100%;
  text-align: center;
  font-size: var(--decimals-visual-identify-prompt-size, clamp(0.54rem, 1.19vw, 0.8rem));
  font-weight: 400;
  line-height: 1.1;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}

.problem-shapes-2d {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--shapes-2d-row-gap, clamp(0.3rem, 1.1vh, 0.8rem));
  padding: clamp(0.35rem, 1.3vh, 0.9rem) clamp(0.35rem, 1.3vw, 0.95rem);
  font-family: var(--worksheet-font);
  color: #1f2f3e;
  overflow: hidden;
  --shapes-2d-prompt-size: clamp(0.56rem, 1.15vw, 0.89rem);
  --shapes-2d-prompt-line-height: 1.12;
  --shapes-2d-content-width: 100%;
  --shapes-2d-content-height: auto;
  --shapes-2d-row-gap: clamp(0.3rem, 1.1vh, 0.8rem);
  --shapes-2d-item-height: auto;
  --shapes-2d-item-gap: clamp(0.3rem, 0.95vh, 0.7rem);
  --shapes-2d-shape-size: clamp(58px, 12vw, 138px);
  --shapes-2d-answer-size: clamp(0.8rem, 2vw, 1.08rem);
  --shapes-2d-answer-line-width: 10rem;
  --shapes-2d-choice-gap: clamp(0.28rem, 0.95vw, 0.75rem);
  --shapes-2d-identify-shape-size: 84%;
  --shapes-2d-draw-prompt-size: clamp(0.6rem, 1.22vw, 0.88rem);
  --shapes-2d-draw-sample-size: clamp(4.8rem, 14vh, 8.2rem);
  --shapes-2d-match-row-gap: clamp(0.3rem, 1vh, 0.72rem);
  --shapes-2d-match-row-height: 3.4rem;
  --shapes-2d-match-label-width: 44%;
  --shapes-2d-match-gutter-width: 18%;
  --shapes-2d-match-label-size: clamp(0.9rem, 2vw, 1.3rem);
  --shapes-2d-match-shape-size: clamp(3rem, 9vw, 6rem);
}

.worksheet-section.with-problem-number .problem-shapes-2d {
  inset: var(--problem-number-lane) 0 0 0;
}

.shapes-2d-prompt {
  margin: 0;
  width: min(100%, var(--shapes-2d-content-width, 100%));
  max-width: 100%;
  font-family: var(--worksheet-font);
  font-size: var(--shapes-2d-prompt-size);
  line-height: var(--shapes-2d-prompt-line-height, 1.1);
  font-weight: 400;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}

.shapes-2d-name-items,
.shapes-2d-identify-items,
.shapes-2d-draw-items,
.shapes-2d-match-items {
  width: min(100%, var(--shapes-2d-content-width, 100%));
  height: var(--shapes-2d-content-height, auto);
  align-items: stretch;
}

.shapes-2d-name-items,
.shapes-2d-identify-items,
.shapes-2d-draw-items {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: var(--shapes-2d-item-height, auto);
  gap: var(--shapes-2d-row-gap, clamp(0.3rem, 1.1vh, 0.8rem));
}

.shapes-2d-name-items[data-item-layout='horizontal'],
.shapes-2d-name-items[data-item-layout='paired'] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(0.34rem, 1.2vw, 1rem);
}

.shapes-2d-item-slot[data-paired-center='true'] {
  grid-column: 1 / -1;
  width: min(50%, 21rem);
  justify-self: center;
}

.shapes-2d-item {
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center;
  align-items: center;
  gap: var(--shapes-2d-item-gap, clamp(0.3rem, 0.95vh, 0.7rem));
}

.shapes-2d-shape-wrap {
  width: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.shapes-2d-shape-svg,
.shapes-2d-identify-svg {
  width: min(100%, var(--shapes-2d-shape-size, clamp(58px, 12vw, 138px)));
  height: min(100%, var(--shapes-2d-shape-size, clamp(58px, 12vw, 138px)));
  max-width: 100%;
  max-height: 100%;
  overflow: visible;
  flex: 0 0 auto;
}

.shapes-2d-identify-svg {
  width: 100%;
  height: 100%;
}

.shapes-2d-shape {
  fill: none;
  stroke: #253444;
  stroke-width: 4;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.shapes-2d-answer-wrap {
  width: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.shapes-2d-answer-line-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
}

.shapes-2d-answer-line {
  width: min(84%, var(--shapes-2d-answer-line-width, 10rem));
  min-height: 1.18rem;
  border-bottom: 2px solid #253444;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.shapes-2d-answer-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.24rem;
  font-family: var(--worksheet-font);
  font-size: var(--shapes-2d-answer-size, clamp(0.8rem, 2vw, 1.08rem));
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.shapes-2d-identify-item,
.shapes-2d-draw-item {
  min-height: 0;
  height: var(--shapes-2d-item-height, auto);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(0.28rem, 0.9vh, 0.62rem);
}

.shapes-2d-draw-item {
  grid-template-rows: auto minmax(0, 1fr);
  align-items: start;
}

.shapes-2d-identify-grid {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: var(--shapes-2d-choice-gap, clamp(0.28rem, 0.95vw, 0.75rem));
  align-items: stretch;
}

.shapes-2d-identify-card {
  min-height: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-sizing: border-box;
  border: 1px dashed rgba(63, 98, 132, 0.46);
  border-radius: 0.42rem;
  background: rgba(255, 255, 255, 0.86);
  overflow: hidden;
}

.shapes-2d-identify-shape-box {
  width: min(100%, var(--shapes-2d-identify-shape-size, 84%));
  height: min(100%, var(--shapes-2d-identify-shape-size, 84%));
  max-width: calc(100% - 0.45rem);
  max-height: calc(100% - 0.45rem);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.shapes-2d-identify-answer-ring {
  position: absolute;
  inset: clamp(2px, 4%, 8px);
  box-sizing: border-box;
  border: 3px solid #c62828;
  border-radius: 999px;
  pointer-events: none;
}

.shapes-2d-draw-prompt {
  width: 100%;
  text-align: center;
  font-size: var(--shapes-2d-draw-prompt-size, clamp(0.6rem, 1.22vw, 0.88rem));
  line-height: 1.12;
}

.shapes-2d-draw-sample-svg {
  width: min(100%, var(--shapes-2d-draw-sample-size, clamp(4.8rem, 14vh, 8.2rem)));
  height: min(100%, var(--shapes-2d-draw-sample-size, clamp(4.8rem, 14vh, 8.2rem)));
  max-width: 100%;
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  justify-self: center;
  overflow: visible;
}

.shapes-2d-match-items {
  position: relative;
  display: grid;
  grid-template-columns:
    minmax(0, var(--shapes-2d-match-label-width, 44%))
    minmax(1.5rem, var(--shapes-2d-match-gutter-width, 18%))
    minmax(0, 1fr);
  column-gap: 0;
}

.shapes-2d-match-labels,
.shapes-2d-match-shapes {
  display: grid;
  grid-auto-rows: var(--shapes-2d-match-row-height, 3.4rem);
  gap: var(--shapes-2d-match-row-gap, clamp(0.3rem, 1vh, 0.72rem));
}

.shapes-2d-match-labels {
  grid-column: 1;
}

.shapes-2d-match-shapes {
  grid-column: 3;
}

.shapes-2d-match-label-row,
.shapes-2d-match-shape-row {
  min-height: 0;
  display: flex;
  align-items: center;
}

.shapes-2d-match-label {
  width: 100%;
  font-size: var(--shapes-2d-match-label-size, clamp(0.9rem, 2vw, 1.3rem));
  line-height: 1.08;
  text-align: left;
  white-space: nowrap;
}

.shapes-2d-match-shape-row {
  justify-content: center;
}

.shapes-2d-match-shape-svg {
  width: min(100%, var(--shapes-2d-match-shape-size, clamp(3rem, 9vw, 6rem)));
  height: min(100%, var(--shapes-2d-match-shape-size, clamp(3rem, 9vw, 6rem)));
  max-width: 100%;
  max-height: 100%;
  overflow: visible;
  flex: 0 0 auto;
}

.shapes-2d-match-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.shapes-2d-match-line {
  fill: none;
  stroke: #c62828;
  stroke-width: 8;
  stroke-linecap: round;
}

.problem-shapes-3d {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--shapes-3d-row-gap, clamp(0.3rem, 1.1vh, 0.8rem));
  padding: clamp(0.35rem, 1.3vh, 0.9rem) clamp(0.35rem, 1.3vw, 0.95rem);
  font-family: var(--worksheet-font);
  color: #1f2f3e;
  overflow: hidden;
  --shapes-3d-prompt-size: clamp(0.56rem, 1.15vw, 0.89rem);
  --shapes-3d-prompt-line-height: 1.12;
  --shapes-3d-content-width: 100%;
  --shapes-3d-content-height: auto;
  --shapes-3d-row-gap: clamp(0.3rem, 1.1vh, 0.8rem);
  --shapes-3d-item-height: auto;
  --shapes-3d-item-gap: clamp(0.3rem, 0.95vh, 0.7rem);
  --shapes-3d-shape-size: clamp(64px, 13vw, 146px);
  --shapes-3d-answer-size: clamp(0.8rem, 2vw, 1.08rem);
  --shapes-3d-answer-line-width: 10rem;
  --shapes-3d-choice-gap: clamp(0.28rem, 0.95vw, 0.75rem);
  --shapes-3d-identify-shape-size: 84%;
  --shapes-3d-draw-prompt-size: clamp(0.6rem, 1.22vw, 0.88rem);
  --shapes-3d-draw-sample-size: clamp(4.8rem, 14vh, 8.2rem);
  --shapes-3d-match-row-gap: clamp(0.3rem, 1vh, 0.72rem);
  --shapes-3d-match-row-height: 3.4rem;
  --shapes-3d-match-label-width: 44%;
  --shapes-3d-match-gutter-width: 18%;
  --shapes-3d-match-label-size: clamp(0.9rem, 2vw, 1.3rem);
  --shapes-3d-match-shape-size: clamp(3.2rem, 9.6vw, 6.5rem);
}

.worksheet-section.with-problem-number .problem-shapes-3d {
  inset: var(--problem-number-lane) 0 0 0;
}

.shapes-3d-prompt {
  margin: 0;
  width: min(100%, var(--shapes-3d-content-width, 100%));
  max-width: 100%;
  font-family: var(--worksheet-font);
  font-size: var(--shapes-3d-prompt-size);
  line-height: var(--shapes-3d-prompt-line-height, 1.1);
  font-weight: 400;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}

.shapes-3d-name-items,
.shapes-3d-identify-items,
.shapes-3d-draw-items,
.shapes-3d-match-items {
  width: min(100%, var(--shapes-3d-content-width, 100%));
  height: var(--shapes-3d-content-height, auto);
  align-items: stretch;
}

.shapes-3d-name-items,
.shapes-3d-identify-items,
.shapes-3d-draw-items {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: var(--shapes-3d-item-height, auto);
  gap: var(--shapes-3d-row-gap, clamp(0.3rem, 1.1vh, 0.8rem));
}

.shapes-3d-name-items[data-item-layout='horizontal'],
.shapes-3d-name-items[data-item-layout='paired'] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(0.34rem, 1.2vw, 1rem);
}

.shapes-3d-item-slot[data-paired-center='true'] {
  grid-column: 1 / -1;
  width: min(50%, 21rem);
  justify-self: center;
}

.shapes-3d-item {
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center;
  align-items: center;
  gap: var(--shapes-3d-item-gap, clamp(0.3rem, 0.95vh, 0.7rem));
}

.shapes-3d-shape-wrap {
  width: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.shapes-3d-shape-svg,
.shapes-3d-identify-svg {
  width: min(100%, var(--shapes-3d-shape-size, clamp(64px, 13vw, 146px)));
  height: min(100%, var(--shapes-3d-shape-size, clamp(64px, 13vw, 146px)));
  max-width: 100%;
  max-height: 100%;
  overflow: visible;
  flex: 0 0 auto;
}

.shapes-3d-identify-svg {
  width: 100%;
  height: 100%;
}

.shapes-3d-answer-wrap {
  width: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.shapes-3d-answer-line-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
}

.shapes-3d-answer-line {
  width: min(84%, var(--shapes-3d-answer-line-width, 10rem));
  min-height: 1.18rem;
  border-bottom: 2px solid #253444;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.shapes-3d-answer-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.24rem;
  font-family: var(--worksheet-font);
  font-size: var(--shapes-3d-answer-size, clamp(0.8rem, 2vw, 1.08rem));
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.shapes-3d-identify-item,
.shapes-3d-draw-item {
  min-height: 0;
  height: var(--shapes-3d-item-height, auto);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(0.28rem, 0.9vh, 0.62rem);
}

.shapes-3d-draw-item {
  grid-template-rows: auto minmax(0, 1fr);
  align-items: start;
}

.shapes-3d-identify-grid {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: var(--shapes-3d-choice-gap, clamp(0.28rem, 0.95vw, 0.75rem));
  align-items: stretch;
}

.shapes-3d-identify-card {
  min-height: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-sizing: border-box;
  border: 1px dashed rgba(63, 98, 132, 0.46);
  border-radius: 0.42rem;
  background: rgba(255, 255, 255, 0.86);
  overflow: hidden;
}

.shapes-3d-identify-shape-box {
  width: min(100%, var(--shapes-3d-identify-shape-size, 84%));
  height: min(100%, var(--shapes-3d-identify-shape-size, 84%));
  max-width: calc(100% - 0.45rem);
  max-height: calc(100% - 0.45rem);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.shapes-3d-identify-answer-ring {
  position: absolute;
  inset: clamp(2px, 4%, 8px);
  box-sizing: border-box;
  border: 3px solid #c62828;
  border-radius: 999px;
  pointer-events: none;
}

.shapes-3d-draw-prompt {
  width: 100%;
  text-align: center;
  font-size: var(--shapes-3d-draw-prompt-size, clamp(0.6rem, 1.22vw, 0.88rem));
  line-height: 1.12;
}

.shapes-3d-draw-sample-svg {
  width: min(100%, var(--shapes-3d-draw-sample-size, clamp(4.8rem, 14vh, 8.2rem)));
  height: min(100%, var(--shapes-3d-draw-sample-size, clamp(4.8rem, 14vh, 8.2rem)));
  max-width: 100%;
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  justify-self: center;
  overflow: visible;
}

.shapes-3d-match-items {
  position: relative;
  display: grid;
  grid-template-columns:
    minmax(0, var(--shapes-3d-match-label-width, 44%))
    minmax(1.5rem, var(--shapes-3d-match-gutter-width, 18%))
    minmax(0, 1fr);
  column-gap: 0;
}

.shapes-3d-match-labels,
.shapes-3d-match-shapes {
  display: grid;
  grid-auto-rows: var(--shapes-3d-match-row-height, 3.4rem);
  gap: var(--shapes-3d-match-row-gap, clamp(0.3rem, 1vh, 0.72rem));
}

.shapes-3d-match-labels {
  grid-column: 1;
}

.shapes-3d-match-shapes {
  grid-column: 3;
}

.shapes-3d-match-label-row,
.shapes-3d-match-shape-row {
  min-height: 0;
  display: flex;
  align-items: center;
}

.shapes-3d-match-label {
  width: 100%;
  font-size: var(--shapes-3d-match-label-size, clamp(0.9rem, 2vw, 1.3rem));
  line-height: 1.08;
  text-align: left;
  white-space: nowrap;
}

.shapes-3d-match-shape-row {
  justify-content: center;
}

.shapes-3d-match-shape-svg {
  width: min(100%, var(--shapes-3d-match-shape-size, clamp(3.2rem, 9.6vw, 6.5rem)));
  height: min(100%, var(--shapes-3d-match-shape-size, clamp(3.2rem, 9.6vw, 6.5rem)));
  max-width: 100%;
  max-height: 100%;
  overflow: visible;
  flex: 0 0 auto;
}

.shapes-3d-match-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.shapes-3d-match-line {
  fill: none;
  stroke: #c62828;
  stroke-width: 8;
  stroke-linecap: round;
}

.decimals-visual-model {
  position: relative;
  width: var(--decimals-visual-size, clamp(44px, 10.3vw, 116px));
  height: var(--decimals-visual-size, clamp(44px, 10.3vw, 116px));
  box-sizing: border-box;
  border: 2px solid #253444;
  border-radius: 0.22rem;
  background: #ffffff;
  overflow: hidden;
  --decimals-grid-rows: 10;
  --decimals-grid-cols: 10;
  --decimals-full-row-percent: 0%;
  --decimals-partial-top-percent: 0%;
  --decimals-partial-width-percent: 0%;
  --decimals-cell-height-percent: 10%;
  transition: width var(--anim-fast), height var(--anim-fast);
}

.decimals-visual-model.decimals-visual-model-tenths {
  width: calc(var(--decimals-visual-size, clamp(44px, 10.3vw, 116px)) * 0.33);
  height: calc(var(--decimals-visual-size, clamp(44px, 10.3vw, 116px)) * var(--decimals-visual-tenths-height-factor, 0.7));
  min-width: 20px;
}

.decimals-visual-model.decimals-visual-model-hundredths {
  width: calc(var(--decimals-visual-size, clamp(44px, 10.3vw, 116px)) * 0.94);
  height: calc(var(--decimals-visual-size, clamp(44px, 10.3vw, 116px)) * 0.94);
}

.decimals-visual-model.decimals-visual-model-thousandths {
  width: calc(var(--decimals-visual-size, clamp(44px, 10.3vw, 116px)) * 1.404);
  height: calc(var(--decimals-visual-size, clamp(44px, 10.3vw, 116px)) * 1.404);
}

.decimals-visual-shade-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.decimals-visual-shade-full {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--decimals-full-row-percent, 0%);
  background: var(--decimals-visual-fill-color, rgba(89, 154, 227, 0.75));
}

.decimals-visual-shade-partial {
  position: absolute;
  left: 0;
  top: var(--decimals-partial-top-percent, 0%);
  width: var(--decimals-partial-width-percent, 0%);
  height: var(--decimals-cell-height-percent, 10%);
  background: var(--decimals-visual-fill-color, rgba(89, 154, 227, 0.75));
}

.decimals-visual-shade-layer.is-blank .decimals-visual-shade-full,
.decimals-visual-shade-layer.is-blank .decimals-visual-shade-partial {
  display: none;
}

.decimals-visual-shade-layer.is-answer .decimals-visual-shade-full,
.decimals-visual-shade-layer.is-answer .decimals-visual-shade-partial {
  background: rgba(198, 40, 40, 0.76);
}

.decimals-visual-grid-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(37, 52, 68, 0.45) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(37, 52, 68, 0.45) 1px, transparent 1px);
  background-size:
    calc(100% / var(--decimals-grid-cols, 10)) 100%,
    100% calc(100% / var(--decimals-grid-rows, 10));
}

.decimals-visual-model.decimals-visual-model-thousandths .decimals-visual-grid-layer {
  background-image:
    linear-gradient(to right, rgba(37, 52, 68, 0.34) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(37, 52, 68, 0.34) 1px, transparent 1px);
}

.problem-symmetry {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--symmetry-row-gap, clamp(0.3rem, 1.1vh, 0.8rem));
  padding: clamp(0.35rem, 1.3vh, 0.9rem) clamp(0.35rem, 1.3vw, 0.95rem);
  font-family: var(--worksheet-font);
  color: #1f2f3e;
  overflow: hidden;
  --symmetry-prompt-size: clamp(0.56rem, 1.15vw, 0.89rem);
  --symmetry-prompt-line-height: 1.12;
  --symmetry-row-gap: clamp(0.3rem, 1.1vh, 0.8rem);
  --symmetry-item-height: auto;
  --symmetry-card-gap: clamp(0.3rem, 1.05vw, 0.85rem);
  --symmetry-item-prompt-size: clamp(0.56rem, 1.12vw, 0.84rem);
}

.worksheet-section.with-problem-number .problem-symmetry {
  inset: var(--problem-number-lane) 0 0 0;
}

.symmetry-prompt {
  margin: 0;
  width: min(100%, 100%);
  max-width: 100%;
  font-family: var(--worksheet-font);
  font-size: var(--symmetry-prompt-size);
  line-height: var(--symmetry-prompt-line-height, 1.1);
  font-weight: 400;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}

.symmetry-items {
  width: min(100%, 100%);
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: var(--symmetry-item-height, auto);
  gap: var(--symmetry-row-gap, clamp(0.3rem, 1.1vh, 0.8rem));
  align-items: stretch;
}

.symmetry-item {
  height: var(--symmetry-item-height, auto);
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: clamp(0.2rem, 0.7vh, 0.4rem);
}

.symmetry-item-prompt {
  width: 100%;
  text-align: center;
  font-size: var(--symmetry-item-prompt-size, clamp(0.56rem, 1.12vw, 0.84rem));
  font-weight: 400;
  line-height: 1.1;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}

.symmetry-cards {
  width: 100%;
  height: 100%;
  display: grid;
  gap: var(--symmetry-card-gap, clamp(0.3rem, 1.05vw, 0.85rem));
  align-items: stretch;
}

.symmetry-cards-circle {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.symmetry-cards-draw {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.symmetry-card {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  border: 1px dashed rgba(63, 98, 132, 0.46);
  border-radius: 0.42rem;
  background: rgba(255, 255, 255, 0.86);
  overflow: hidden;
}

.symmetry-card-svg {
  width: 100%;
  height: 100%;
}

.symmetry-shape {
  fill: none;
  stroke: #253444;
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.symmetry-axis-candidate {
  stroke: #253444;
  stroke-width: 3;
  stroke-dasharray: 9 7;
  stroke-linecap: round;
}

.symmetry-axis-answer {
  stroke: #c62828;
  stroke-width: 3;
  stroke-dasharray: 9 7;
  stroke-linecap: round;
}

.symmetry-card-answer-ring {
  fill: none;
  stroke: #c62828;
  stroke-width: 4;
}

.problem-number-bond {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.22rem, 0.92vh, 0.62rem);
  padding: clamp(0.34rem, 1.25vh, 0.9rem) clamp(0.3rem, 1.2vw, 0.95rem);
  box-sizing: border-box;
  color: #1f2f3e;
  font-family: var(--worksheet-font);
  --number-bond-prompt-size: clamp(0.56rem, 1.15vw, 0.88rem);
  --number-bond-prompt-line-height: 1.1;
  --number-bond-prompt-max-width: 100%;
  --number-bond-content-max-width: 100%;
  --number-bond-content-height: 100%;
}

.worksheet-section.with-problem-number .problem-number-bond {
  inset: var(--problem-number-lane) 0 0 0;
}

.number-bond-prompt {
  margin: 0;
  width: min(100%, var(--number-bond-prompt-max-width, 100%));
  max-width: 100%;
  color: #233244;
  font-family: var(--worksheet-font);
  font-size: var(--number-bond-prompt-size);
  line-height: var(--number-bond-prompt-line-height, 1.1);
  font-weight: 400;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}

.problem-number-bond-content {
  position: relative;
  width: min(100%, var(--number-bond-content-max-width, 100%));
  max-width: 100%;
  height: var(--number-bond-content-height, 100%);
  min-height: 0;
  flex: 1 1 auto;
}

.problem-number-bond-content > .number-bond-problem {
  position: absolute;
  inset: 0;
}

.number-bond-problem {
  position: absolute;
  inset: 0;
  padding: clamp(1px, 0.35vw, 4px);
}

.worksheet-section.with-problem-number > .number-bond-problem {
  inset: var(--problem-number-lane) 0 0 0;
}

.worksheet-section.with-problem-number .problem-grid,
.worksheet-section.with-problem-number .problem-horizontal,
.worksheet-section.with-problem-number .problem-math,
.worksheet-section.with-problem-number .problem-expanded-form,
.worksheet-section.with-problem-number > .expanded-form-problem,
.worksheet-section.with-problem-number .problem-skip-count,
.worksheet-section.with-problem-number .problem-digit-vs-value,
.worksheet-section.with-problem-number .problem-more-less,
.worksheet-section.with-problem-number .problem-even-odd,
.worksheet-section.with-problem-number .problem-perimeter,
.worksheet-section.with-problem-number .problem-area,
.worksheet-section.with-problem-number .problem-time,
.worksheet-section.with-problem-number .problem-fractions,
.worksheet-section.with-problem-number .problem-fractions-visual,
.worksheet-section.with-problem-number .problem-decimals-visual,
.worksheet-section.with-problem-number .problem-symmetry,
.worksheet-section.with-problem-number .problem-number-bond,
.worksheet-section.with-problem-number > .number-bond-problem {
  inset: 0;
}

.worksheet-section .problem-number-badge-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.number-bond-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.number-bond-connector {
  stroke: var(--number-bond-stroke-color, #2d2d2d);
  stroke-width: var(--number-bond-stroke, 10);
  stroke-linecap: round;
}

.number-bond-circle {
  fill: #ffffff;
  stroke: var(--number-bond-stroke-color, #2d2d2d);
  stroke-width: var(--number-bond-stroke, 10);
}

.number-bond-text {
  fill: #000000;
  font-family: var(--worksheet-font);
}

.number-bond-digit.editable-digit-cell {
  cursor: pointer;
  transition: fill var(--anim-fast), opacity var(--anim-fast);
}

.number-bond-digit.editable-digit-cell:hover {
  fill: #1d5f96;
}

.number-bond-digit.editable-digit-cell:focus-visible {
  outline: 2px solid #2d7dbf;
  outline-offset: 1px;
  fill: #1d5f96;
}

.grid-table {
  border-collapse: collapse;
  user-select: none;
}

.grid-table td {
  border: 1px solid #253444;
  width: 1.35rem;
  height: 1.35rem;
  text-align: center;
  vertical-align: middle;
  font-family: var(--worksheet-font);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  color: #1f2f3e;
  background-color: rgba(255, 255, 255, 0.9);
}

.grid-table td.editable-digit-cell {
  cursor: pointer;
  transition: background-color var(--anim-fast), box-shadow var(--anim-fast);
}

.grid-table td.editable-digit-cell:hover {
  background-color: rgba(211, 232, 251, 0.52);
}

.grid-table td.editable-digit-cell:focus-visible {
  outline: 2px solid #2d7dbf;
  outline-offset: -2px;
  background-color: rgba(211, 232, 251, 0.6);
}

.grid-table td.digit-editing {
  padding: 0;
}

.digit-cell-editor {
  width: 100%;
  height: 100%;
  border: 1px solid #2d7dbf;
  border-radius: 0;
  text-align: center;
  font: inherit;
  font-weight: 700;
  color: #1f2f3e;
  background: #ffffff;
  outline: none;
  padding: 0;
  margin: 0;
}

.bond-digit-editor {
  position: absolute;
  z-index: 8;
  border-radius: 6px;
  box-shadow: 0 4px 10px rgba(28, 54, 77, 0.24);
}

.horizontal-digit-editor {
  width: 1.18em;
  height: 1.18em;
  min-width: 1.18em;
  min-height: 1.18em;
  border-radius: 4px;
  font-size: 1em;
  line-height: 1;
}

.missing-number-digit-editor {
  width: 1.18em;
  height: 1.18em;
  min-width: 1.18em;
  min-height: 1.18em;
  border-radius: 4px;
  font-size: 1em;
  line-height: 1;
}

.expanded-form-digit-editor {
  width: 1.14em;
  height: 1.14em;
  min-width: 1.14em;
  min-height: 1.14em;
  border-radius: 4px;
  font-size: 1em;
  line-height: 1;
}

.digit-vs-value-digit-editor {
  width: 1.14em;
  height: 1.14em;
  min-width: 1.14em;
  min-height: 1.14em;
  border-radius: 4px;
  font-size: 1em;
  line-height: 1;
}

.more-less-anchor-editor {
  width: 1.14em;
  height: 1.14em;
  min-width: 1.14em;
  min-height: 1.14em;
  border-radius: 4px;
  font-size: 1em;
  line-height: 1;
}

.area-model-digit-editor {
  width: 1.14em;
  height: 1.14em;
  min-width: 1.14em;
  min-height: 1.14em;
  border-radius: 4px;
  font-size: 1em;
  line-height: 1;
}

.no-grid-lines .grid-table td {
  border: none;
  background-color: transparent;
}

.grid-table td.answer-key-text,
.answer-key-text {
  color: var(--danger);
  font-weight: 700;
}

.word-problem {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.55rem;
}

.word-problem-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid #d3dfeb;
  border-radius: 10px;
  background: #f5faff;
  padding: 0.35rem 0.5rem;
}

.word-problem-toolbar label,
.word-problem-toolbar span {
  color: #355068;
  font-weight: 700;
  font-size: 0.84rem;
}

.word-problem-toolbar select {
  border: 1px solid #b8ccde;
  border-radius: 8px;
  background: #fff;
  color: #2e475d;
  font-weight: 600;
  padding: 0.24rem 0.42rem;
}

.word-problem-content {
  flex: 1;
  border: 1px dashed #91abc1;
  border-radius: 10px;
  padding: 0.62rem;
  background: #fff;
  overflow: auto;
  outline: none;
  color: #1f2f3d;
  font-family: var(--worksheet-font);
  line-height: 1.45;
}

.word-problem-content.size-small {
  font-size: 1rem;
}

.word-problem-content.size-medium {
  font-size: 1.2rem;
}

.word-problem-content.size-large {
  font-size: 1.45rem;
}

.word-problem-content.align-left {
  text-align: left;
}

.word-problem-content.align-center {
  text-align: center;
}

.word-problem-content.align-right {
  text-align: right;
}

.word-problem-content:empty::before {
  content: attr(data-placeholder);
  color: var(--text-faint);
}

.section-config-btn,
.recycle-btn,
.section-clear-btn {
  position: absolute;
  width: 24px;
  height: 24px;
  border: 1px solid #bac9d8;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffffff 0%, #ecf3fa 100%);
  color: #4f6a82;
  font-size: 14px;
  line-height: 22px;
  text-align: center;
  cursor: pointer;
  user-select: none;
  padding: 0;
  box-shadow: 0 6px 12px rgba(67, 93, 118, 0.2);
  transition: background var(--anim-fast), color var(--anim-fast), border-color var(--anim-fast);
  z-index: 6;
}

.section-config-btn {
  top: 5px;
  right: 5px;
  width: 28px;
  height: 28px;
  font-size: 16px;
  line-height: 26px;
}

.recycle-btn {
  right: 5px;
  bottom: 5px;
}

.section-clear-btn {
  left: 5px;
  bottom: 5px;
  font-size: 13px;
  font-weight: 700;
  line-height: 22px;
}

.section-config-btn:hover,
.recycle-btn:hover,
.section-clear-btn:hover {
  background: #eef6ff;
  color: #2d5f8a;
  border-color: #8aaccb;
}

.worksheet-section .problem-number-badge {
  position: absolute;
  width: var(--problem-number-size);
  height: var(--problem-number-size);
  border-radius: 50%;
  border: 2px solid var(--problem-number-border);
  background: var(--problem-number-fill);
  color: var(--problem-number-text);
  font-size: var(--problem-number-font-size, clamp(0.7rem, 0.5rem + 0.35vw, 0.82rem));
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  user-select: none;
  box-shadow: 0 4px 10px rgba(30, 62, 92, 0.16);
}

.answer-toggle-btn,
.number-toggle-btn,
.reset-page-main-btn,
.number-color-trigger,
.export-buttons button,
.modal-actions button {
  border-radius: 999px;
  border: 1px solid #9eb6ce;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform var(--anim-fast), box-shadow var(--anim-fast), background var(--anim-fast), color var(--anim-fast);
}

.answer-toggle-btn {
  background: linear-gradient(180deg, #ffffff 0%, #eef5fc 100%);
  color: #2f4f66;
  padding: 0.38rem 1.06rem;
  white-space: nowrap;
}

.reset-page-main-btn {
  background: linear-gradient(180deg, #417fb4 0%, #2e6ea3 100%);
  border-color: #2d6293;
  color: #fff;
  padding: 0.38rem 1rem;
  white-space: nowrap;
}

.worksheet-top-bar > .answer-toggle-btn,
.worksheet-top-bar > .reset-page-main-btn {
  flex: 0 0 auto;
}

.reset-page-main-btn:hover {
  transform: translateY(-1px);
}

.settings-number-controls {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  position: relative;
}

.number-bond-color-picker {
  display: block;
  width: 100%;
}

.number-toggle-btn {
  background: linear-gradient(180deg, #ffffff 0%, #edf7f3 100%);
  color: #2f5d52;
  padding: 0.38rem 1.06rem;
}

.number-toggle-btn:hover {
  transform: translateY(-1px);
}

.number-toggle-btn.active {
  color: #fff;
  border-color: #2f7f66;
  background: linear-gradient(180deg, #43b28b 0%, #2d936f 100%);
}

.number-color-trigger,
{
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid #000000;
  padding: 0;
  flex: 0 0 auto;
}

.number-color-trigger {
  --number-color-preview: #ffffff;
  background: var(--number-color-preview);
}

.number-color-trigger:hover {
  transform: translateY(-1px);
}

.number-color-menu {
  position: absolute;
  top: calc(100% + 0.42rem);
  right: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.35rem;
  padding: 0.48rem;
  border: 1px solid #c2d4e3;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 12px 24px rgba(30, 62, 92, 0.2);
  z-index: 14;
  min-width: 8.2rem;
}

.number-bond-color-menu {
  position: static;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.45rem;
  width: min(100%, 15rem);
  padding: 0.25rem 0.1rem 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  min-width: 0;
}

.number-color-option,
.number-bond-color-option {
  width: 1.34rem;
  height: 1.34rem;
  border-radius: 50%;
  border: 2px solid #000000;
  cursor: pointer;
  padding: 0;
  position: relative;
  transition: transform var(--anim-fast), box-shadow var(--anim-fast);
}

.number-color-option {
  --number-color-option-fill: #ffffff;
  background: var(--number-color-option-fill);
}

.number-bond-color-option {
  --number-bond-color-option-fill: #2d2d2d;
  background: var(--number-bond-color-option-fill);
}

.number-bond-color-option.random-option,
.number-bond-color-option.fractions-visual-random-color-option {
  background: conic-gradient(
    from 0deg,
    #ffd6dc 0deg,
    #ffe79a 72deg,
    #d8f2be 144deg,
    #bfe9ff 216deg,
    #cec7ff 288deg,
    #ffd6dc 360deg
  );
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #1f2c3a;
  font-family: var(--worksheet-font);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
}

.number-color-option:hover,
.number-bond-color-option:hover {
  transform: translateY(-1px) scale(1.04);
}

.number-color-option.selected {
  box-shadow: 0 0 0 2px #2d7dbf;
}

.number-bond-color-option.selected {
  box-shadow: none;
}

.number-bond-color-option.selected::after {
  content: '';
  position: absolute;
  inset: -5px;
  border: 2px dashed #1f2c3a;
  border-radius: 50%;
  pointer-events: none;
}

.answer-toggle-btn:hover {
  transform: translateY(-1px);
}

.history-action-btn:disabled,
.history-action-btn:disabled:hover,
.history-action-btn:disabled:active {
  background: linear-gradient(180deg, #ffffff 0%, #eef5fc 100%);
  border-color: #9eb6ce;
  color: #7d95ab;
  cursor: default;
  opacity: 0.68;
  box-shadow: none;
  transform: none;
}

.answer-toggle-btn.active {
  color: #fff;
  border-color: #a52f38;
  background: linear-gradient(180deg, #d94f59 0%, #ba3741 100%);
}

.export-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: var(--space-3);
  padding: 0.6rem 0.7rem;
  border: 1px solid #ccdceb;
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, #f8fbff 0%, #edf5fc 100%);
}

.export-buttons-left,
.export-buttons-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.export-buttons-right {
  margin-left: auto;
}

.worksheet-settings-menu .font-label {
  color: #33536c;
  font-weight: 700;
  font-size: 0.9rem;
}

.worksheet-settings-menu .font-select {
  flex: 1;
  min-width: 9.5rem;
  border-radius: 999px;
  border: 1px solid #a9bfd4;
  background: #fff;
  color: #2e495f;
  font-size: 0.86rem;
  font-weight: 700;
  padding: 0.38rem 0.78rem;
  cursor: pointer;
}

.export-buttons button {
  color: #214766;
  background: linear-gradient(180deg, #ffffff 0%, #eef5fc 100%);
  padding: 0.38rem 0.9rem;
}

.persistence-modal-content label {
  display: block;
  margin-bottom: 0.35rem;
  color: #2f4f66;
  font-weight: 700;
  font-size: 0.9rem;
}

.persistence-modal-content input[type='text'],
.persistence-modal-content textarea,
.persistence-modal-content input[type='file'] {
  width: 100%;
  border: 1px solid #a9bfd4;
  border-radius: 12px;
  background: #fff;
  color: #2e495f;
  font-size: 0.92rem;
  padding: 0.5rem 0.6rem;
  margin-bottom: 0.45rem;
}

.persistence-modal-content textarea {
  min-height: 96px;
  resize: vertical;
}

#save-session-code-output {
  min-height: 124px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
  font-size: 0.82rem;
  line-height: 1.35;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.persistence-inline-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}

.session-save-list {
  display: grid;
  gap: 0.45rem;
}

.session-save-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  border: 1px solid #d3dfeb;
  border-radius: 11px;
  background: #ffffff;
  padding: 0.42rem 0.5rem;
}

.session-save-meta {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.session-save-meta strong {
  color: #2f4f66;
  font-size: 0.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.session-save-meta span {
  color: #5f7489;
  font-size: 0.78rem;
}

.session-save-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
}

.session-save-actions button,
.persistence-inline-actions button {
  border-radius: 999px;
  border: 1px solid #9eb6ce;
  background: linear-gradient(180deg, #ffffff 0%, #eef5fc 100%);
  color: #214766;
  font-weight: 700;
  font-size: 0.82rem;
  padding: 0.34rem 0.68rem;
  cursor: pointer;
}

.persistence-status {
  margin: 0 0 0.55rem;
  border-radius: 10px;
  border: 1px solid #bfd2e3;
  background: #eef6ff;
  color: #234b6f;
  padding: 0.45rem 0.55rem;
  font-size: 0.85rem;
  line-height: 1.3;
}

.persistence-status.error {
  border-color: #cb5f66;
  background: #ffe9ec;
  color: #8c2e35;
}

.session-save-empty {
  margin: 0;
  color: #5f7489;
  font-size: 0.85rem;
}

.export-buttons button:hover,
.modal-actions button:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 16px rgba(46, 84, 119, 0.2);
}

.modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(14, 29, 44, 0.52);
  backdrop-filter: blur(3px);
  z-index: 1000;
}

.modal-content {
  width: min(430px, 96vw);
  max-height: 90vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(175, 197, 219, 0.75);
  background: linear-gradient(180deg, #ffffff 0%, #f4f9ff 100%);
  box-shadow: var(--shadow-float);
  padding: 1.2rem 1.25rem;
  animation: rise-in var(--anim-base);
}

.modal-content h3 {
  margin-bottom: 0.8rem;
}

.config-section {
  border: 1px solid #d6e2ee;
  border-radius: 12px;
  background: #fbfdff;
  padding: 0.62rem 0.7rem;
  margin-bottom: 0.62rem;
}

.config-section p {
  margin-bottom: 0.35rem;
  color: #355068;
  font-weight: 700;
  font-size: 0.88rem;
}

.problem-type-options,
.word-align-buttons,
.operation-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.problem-type-btn,
.word-align-btn {
  border: 1px solid #92b0c9;
  border-radius: 999px;
  background: #fff;
  color: #2e4d66;
  padding: 0.28rem 0.72rem;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--anim-fast), border-color var(--anim-fast), color var(--anim-fast);
}

.problem-type-btn.selected,
.word-align-btn.selected {
  background: #2f7ec0;
  border-color: #2f7ec0;
  color: #fff;
}

.skip-count-by-buttons {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.4rem;
  margin-bottom: 0.42rem;
}

.skip-count-by-btn {
  border: 1px solid #92b0c9;
  border-radius: 999px;
  background: #fff;
  color: #2e4d66;
  padding: 0.26rem 0.72rem;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--anim-fast), border-color var(--anim-fast), color var(--anim-fast);
}

.skip-count-by-btn.selected {
  background: #2f7ec0;
  border-color: #2f7ec0;
  color: #1f2c3a;
}

.skip-count-by-btn:disabled {
  opacity: 0.58;
  background: #eef3f8;
  border-color: #b7cadb;
  color: #6a7f92;
  cursor: not-allowed;
  transform: none;
}

#skip-count-custom-input,
#skip-count-box-count,
#skip-count-prefilled-count {
  border: 1px solid #a8bfd4;
  border-radius: 999px;
  padding: 0.24rem 0.62rem;
  font-size: 0.86rem;
  font-weight: 700;
  color: #2d4a62;
  background: #fff;
}

.skip-count-start-mode label,
#skip-count-fill-mode-section label {
  display: inline-flex;
  align-items: center;
  gap: 0.36rem;
  margin-right: 0.72rem;
  margin-top: 0.22rem;
}

#word-text-size,
#number-bond-digits,
#number-bond-circle-count,
#missing-number-range-min-select,
#missing-number-range-max-select,
#missing-place-value-position-select,
#rounding-range-min-select,
#rounding-range-max-select,
#rounding-place-select {
  border: 1px solid #a8bfd4;
  border-radius: 999px;
  padding: 0.24rem 0.62rem;
  font-size: 0.86rem;
  font-weight: 700;
  color: #2d4a62;
  background: #fff;
}

#number-bond-config-group label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #355068;
  font-weight: 700;
  font-size: 0.86rem;
}

#disable-instructions-section label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #355068;
  font-weight: 700;
  font-size: 0.86rem;
}

#number-bond-filled-parts-section label {
  display: flex;
  align-items: center;
  gap: 0.38rem;
  margin-top: 0.2rem;
}

.digit-size-container {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.digit-size-container div:not(.digit-option) {
  border: none;
  background: transparent;
  pointer-events: none;
}

.digit-option {
  border: 1px solid #93b3cd;
  border-radius: 6px;
  padding: 0.22rem;
  font-size: 0.73rem;
  text-align: center;
  cursor: pointer;
  user-select: none;
  font-weight: 700;
  color: #31536d;
  background: #fff;
  transition: background var(--anim-fast), color var(--anim-fast), border-color var(--anim-fast);
}

.digit-option.selected {
  background: #2f7ec0;
  border-color: #2f7ec0;
  color: #fff;
}

.op-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  border: 2px solid transparent;
  color: #fff;
  font-size: 1.45rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 7px 13px rgba(57, 83, 108, 0.25);
  transition: transform var(--anim-fast), box-shadow var(--anim-fast), border-color var(--anim-fast);
}

.op-icon:hover {
  transform: translateY(-1px);
}

.op-icon.add-op {
  background: linear-gradient(180deg, #f4a8ae 0%, #dc8189 100%);
}

.op-icon.sub-op {
  background: linear-gradient(180deg, #f6d77e 0%, #dfb851 100%);
}

.op-icon.mul-op {
  background: linear-gradient(180deg, #7ea8ea 0%, #618ed7 100%);
}

.op-icon.div-op {
  background: linear-gradient(180deg, #b7a2de 0%, #937ec3 100%);
}

.op-icon.selected {
  border-color: #2d2d2d;
  outline: 3px solid rgba(64, 112, 177, 0.7);
  outline-offset: 2px;
  transform: translateY(-2px) scale(1.06);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.82), 0 12px 18px rgba(50, 76, 102, 0.32);
}

.modal-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.46rem;
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin-top: 0.8rem;
  padding: 0.62rem 0 calc(0.5rem + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(244, 249, 255, 0) 0%, rgba(244, 249, 255, 0.96) 30%, #f4f9ff 100%);
  border-top: 1px solid rgba(126, 149, 174, 0.45);
}

.modal-actions button {
  padding: 0.36rem 0.78rem;
  color: #214766;
  background: linear-gradient(180deg, #ffffff 0%, #edf4fc 100%);
}

.hidden {
  display: none !important;
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.992);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 900px) {
  section {
    width: 96vw;
    padding: 0.95rem 0.78rem 1.4rem;
  }

  .worksheet-top-bar {
    flex-wrap: wrap;
  }

  .worksheet-title-group {
    width: 100%;
    margin-right: 0;
  }

  .worksheet-history-controls {
    width: 100%;
  }

  .preview-layout-switcher {
    order: 2;
    width: 100%;
    justify-content: flex-start;
  }

  .answer-toggle-btn {
    margin-left: 0;
  }

  .reset-page-main-btn {
    margin-left: 0;
  }

  .number-toggle-btn {
    margin-left: 0;
  }

  .worksheet-settings-menu {
    width: min(320px, 92vw);
    right: 0;
  }

  .worksheet-body {
    grid-template-columns: 1fr;
    gap: 0.65rem;
  }

  .page-rail {
    flex-direction: row;
    overflow-x: auto;
    align-items: stretch;
  }

  .page-rail-item {
    min-width: 132px;
  }

  .page-add-btn {
    min-width: 120px;
  }

  .export-buttons {
    gap: 0.45rem;
    padding: 0.5rem;
  }

  .export-buttons-left,
  .export-buttons-right {
    width: 100%;
  }

  .export-buttons-right {
    margin-left: 0;
    justify-content: flex-end;
  }

  .logo-image {
    max-height: 300px;
  }

  .landing-operation-icons {
    margin-bottom: 0.5rem;
    gap: 0.42rem;
  }

  .landing-operation-icons .op-icon {
    width: 38px;
    height: 38px;
    font-size: 1.28rem;
  }
}

@media (max-width: 640px) {
  #landing-page > header {
    padding-top: 0.95rem;
  }

  .layout-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
  }

  .page-layout-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .layout-option {
    padding: 0.55rem;
  }

  .landing-operation-icons {
    margin-bottom: 0.42rem;
    gap: 0.34rem;
  }

  .landing-operation-icons .op-icon {
    width: 34px;
    height: 34px;
    font-size: 1.12rem;
  }

  .landing-resume-row {
    margin-top: 0.52rem;
  }

  .session-save-row {
    flex-direction: column;
    align-items: stretch;
  }

  .session-save-actions {
    justify-content: flex-start;
  }

  .layout-preview {
    width: 100%;
  }

  .worksheet-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
  }

  .worksheet-header[data-name-date-style='three-line'],
  .worksheet-header[data-name-date-style='blank-three-line'] {
    width: 100%;
    --three-line-lane-size: calc(clamp(34px, 8vw, 44px) * 0.75);
  }

  .worksheet-header[data-name-date-style='three-line'] .header-three-line-lane,
  .worksheet-header[data-name-date-style='blank-three-line'] .header-three-line-lane {
    width: 100%;
    min-height: var(--three-line-lane-size);
  }

  .worksheet-header[data-name-date-style='three-line'] .header-three-line-name,
  .worksheet-header[data-name-date-style='blank-three-line'] .header-three-line-name {
    left: clamp(2.5%, 4.5%, 6.5%);
  }

  .worksheet-header[data-name-date-style='three-line'] .header-three-line-date,
  .worksheet-header[data-name-date-style='blank-three-line'] .header-three-line-date {
    left: clamp(55%, 60%, 64%);
  }

  .header-blank {
    width: 62vw;
    max-width: 180px;
  }

  .modal-content {
    padding: 0.95rem;
  }

  .config-section {
    padding: 0.5rem 0.55rem;
  }

  .word-problem {
    padding: 0.42rem;
  }
}

/* -------------------------------------------------------------------------- */
/* Hand-drawn design system override layer (visual only, DOM contract intact) */
/* -------------------------------------------------------------------------- */

:root {
  --ds-bg: #fdfbf7;
  --ds-fg: #2d2d2d;
  --ds-muted: #e5e0d8;
  --ds-accent-red: #ff4d4d;
  --ds-accent-blue: #2d5da1;
  --ds-border: #2d2d2d;
  --ds-note: #fff9c4;

  --ds-wobbly-xl: 255px 15px 225px 15px / 15px 225px 15px 255px;
  --ds-wobbly-md: 26px 18px 30px 16px / 18px 28px 16px 24px;
  --ds-wobbly-sm: 14px 18px 13px 17px / 17px 12px 19px 15px;
  --ds-wobbly-pill: 64px 42px 58px 46px / 48px 62px 40px 54px;

  --ds-shadow: 4px 4px 0px 0px var(--ds-border);
  --ds-shadow-strong: 8px 8px 0px 0px var(--ds-border);
  --ds-shadow-hover: 2px 2px 0px 0px var(--ds-border);

  --font-ui: 'Patrick Hand', 'Comic Sans MS', 'Segoe UI', cursive;
  --font-display: 'Patrick Hand', 'Comic Sans MS', cursive;
  --worksheet-font: 'Patrick Hand', 'Comic Sans MS', 'Trebuchet MS', cursive;

  --bg-app: var(--ds-bg);
  --bg-hero: var(--ds-bg);
  --bg-surface: #ffffff;
  --bg-surface-2: #fffefb;
  --bg-muted: var(--ds-muted);
  --text-main: var(--ds-fg);
  --text-soft: #4f4a42;
  --text-faint: #7b7265;
  --accent: var(--ds-accent-blue);
  --accent-strong: #1f4576;
  --accent-soft: #d9e7fb;
  --danger: var(--ds-accent-red);
  --danger-soft: #ffe5e5;
  --ok: #2f8a53;
  --border: var(--ds-border);
  --border-strong: var(--ds-border);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 30px;
  --shadow-soft: var(--ds-shadow);
  --shadow-float: var(--ds-shadow-strong);
  --anim-fast: 110ms ease-out;
  --anim-base: 140ms ease-out;
  --ds-ui-scale: 1.14;
  --ds-hit-min: 44px;
  --ds-control-font: clamp(0.98rem, 0.9rem + 0.22vw, 1.12rem);
  --ds-label-font: clamp(1rem, 0.92rem + 0.25vw, 1.16rem);
  --ds-modal-title-font: clamp(1.5rem, 2.7vw, 2.15rem);
}

body {
  font-family: var(--font-ui);
  color: var(--ds-fg);
  background-color: var(--ds-bg);
  background-image:
    radial-gradient(var(--ds-muted) 1px, transparent 1px),
    linear-gradient(180deg, #fffefb 0%, var(--ds-bg) 100%);
  background-size: 24px 24px, 100% 100%;
}

h2,
h3 {
  font-family: var(--font-display);
  color: var(--ds-fg);
  letter-spacing: 0.015em;
}

button,
select,
input,
textarea {
  font-family: var(--font-ui);
}

.layout-option:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
.word-problem-content:focus-visible {
  outline: 3px dashed var(--ds-accent-blue);
  outline-offset: 2px;
}

#landing-page {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 249, 196, 0.28) 100%),
    var(--ds-bg);
}

#landing-page > header {
  padding-top: clamp(1rem, 2.5vw, 2rem);
}

.landing-hero {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(0.75rem, 2vw, 1.2rem);
  align-items: center;
}

.landing-hero-media {
  display: flex;
  justify-content: center;
  flex: 1 1 30rem;
  max-width: 38rem;
}

.logo-image {
  width: 100%;
  max-width: 100%;
  height: auto;
  filter: drop-shadow(4px 4px 0 rgba(45, 45, 45, 0.2));
  transform: rotate(-0.9deg);
}

.landing-hero-copy {
  display: grid;
  gap: 0.65rem;
  justify-items: center;
  text-align: center;
  width: 100%;
  max-width: 28rem;
  margin: 0;
  flex: 1 1 22rem;
}

.landing-hero-bubble {
  margin: 0;
  position: relative;
  width: min(100%, 27rem);
  max-width: 100%;
  border: 3px solid var(--ds-border);
  border-radius: var(--ds-wobbly-md);
  background: #fffefb;
  box-shadow: var(--ds-shadow);
  padding: clamp(0.72rem, 1.6vw, 1rem) clamp(0.8rem, 1.8vw, 1.08rem) clamp(0.66rem, 1.4vw, 0.9rem);
}

.landing-hero-bubble::after {
  content: '';
  position: absolute;
  left: -8px;
  top: 50%;
  width: 12px;
  height: 12px;
  background: #fffefb;
  border-left: 3px solid var(--ds-border);
  border-bottom: 3px solid var(--ds-border);
  border-radius: 1px 0 5px 1px;
  transform: translateY(-50%) rotate(18deg);
}

.landing-hero-quote {
  margin: 0;
  font-family: var(--font-ui);
  font-size: clamp(1.22rem, 2.2vw, 1.9rem);
  line-height: 1.2;
  color: var(--ds-fg);
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}

.landing-hero-attribution {
  margin-top: 0.28rem;
  font-family: var(--font-ui);
  font-size: clamp(0.88rem, 1.2vw, 1rem);
  line-height: 1.2;
  text-align: right;
  color: #5f564a;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}

.landing-operation-icons {
  width: fit-content;
  max-width: 100%;
  margin: 0.35rem auto 0;
  padding: 0;
  position: static;
  justify-content: center;
  gap: 0.5rem;
}

.landing-operation-icons .op-icon {
  border: 2px solid var(--ds-border);
  box-shadow: var(--ds-shadow);
  pointer-events: none;
  cursor: default;
}

.landing-operation-icons .op-icon:hover {
  transform: none;
  box-shadow: var(--ds-shadow);
}

@media (min-width: 768px) {
  .landing-hero {
    gap: clamp(1rem, 2.5vw, 2.2rem);
  }

  .landing-hero-bubble {
    width: min(100%, 28rem);
  }

  .landing-hero-quote {
    font-size: clamp(1.35rem, 1.9vw, 2rem);
  }
}

@media (max-width: 767px) {
  .landing-hero-bubble::after {
    left: 50%;
    top: -7px;
    width: 12px;
    height: 12px;
    border-left: 3px solid var(--ds-border);
    border-top: 3px solid var(--ds-border);
    border-bottom: 0;
    transform: translateX(-50%) rotate(45deg);
  }
}

#layout-selection h2 {
  display: none;
}

.landing-resume-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.7rem;
}

#landing-resume-btn {
  border: 2px dashed var(--ds-border);
  border-radius: var(--ds-wobbly-sm);
  background: #fffefb;
  color: var(--ds-fg);
  box-shadow: var(--ds-shadow);
  font-family: var(--font-display);
  font-size: clamp(0.9rem, 0.82rem + 0.16vw, 1rem);
  min-height: 36px;
  padding: 0.34rem 0.88rem;
}

#landing-resume-btn:hover {
  background: #f0e9d4;
  box-shadow: var(--ds-shadow-hover);
  transform: translate(2px, 2px) rotate(0deg);
}

#landing-resume-btn:active {
  box-shadow: none;
  transform: translate(4px, 4px) rotate(0deg);
}

.layout-picker-hint {
  color: #4f4a42;
  font-size: 1.02rem;
}

.landing-page-block {
  border: 3px solid var(--ds-border);
  border-radius: var(--ds-wobbly-md);
  background: #fffefb;
  box-shadow: var(--ds-shadow);
}

.landing-page-block:nth-child(odd) {
  transform: rotate(-0.45deg);
}

.landing-page-block:nth-child(even) {
  transform: rotate(0.45deg);
}

.landing-page-title {
  color: var(--ds-fg);
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.1vw, 1.45rem);
  text-align: center;
}

.landing-page-header {
  justify-content: center;
}

.page-enable-label {
  color: var(--ds-fg);
  font-size: 0.95rem;
}

.layout-option,
#layout-continue,
.answer-toggle-btn,
.number-toggle-btn,
.reset-page-main-btn,
.settings-icon-btn,
.page-add-btn,
.export-buttons button,
.modal-actions button,
.session-save-actions button,
.persistence-inline-actions button,
.problem-type-btn,
.op-icon,
.digit-option,
.word-align-btn,
.worksheet-section .select-button {
  border: 3px solid var(--ds-border);
  border-radius: var(--ds-wobbly-sm);
  background: #ffffff;
  color: var(--ds-fg);
  box-shadow: var(--ds-shadow);
  transition:
    transform var(--anim-fast),
    box-shadow var(--anim-fast),
    background-color var(--anim-fast),
    color var(--anim-fast);
}

/* Moderate chrome sizing pass for better touch targets and readability. */
#digit-size-options-section {
  overflow-x: visible;
  overflow-y: visible;
  position: relative;
  padding-bottom: 0.42rem;
}

.digit-size-container {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  min-width: 430px;
  width: 100%;
}

.digit-option {
  min-width: var(--ds-hit-min);
  min-height: var(--ds-hit-min);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.3rem 0.38rem;
  font-size: clamp(0.86rem, 0.8rem + 0.16vw, 1rem);
  line-height: 1.1;
}

.modal-content h3 {
  font-size: var(--ds-modal-title-font);
}

.config-section p {
  font-size: var(--ds-label-font);
}

#word-text-size,
#number-bond-digits,
#number-bond-circle-count,
#missing-number-range-min-select,
#missing-number-range-max-select,
#missing-place-value-position-select,
#rounding-range-min-select,
#rounding-range-max-select,
#rounding-place-select,
#name-date-style-select,
#font-select {
  min-height: var(--ds-hit-min);
  font-size: var(--ds-control-font);
  padding: 0.32rem 0.72rem;
}

#number-bond-config-group label,
#perimeter-config-group label,
#area-config-group label,
.settings-checkbox-row,
.worksheet-settings-menu .font-label {
  font-size: var(--ds-label-font);
}

#layout-continue,
.answer-toggle-btn,
.number-toggle-btn,
.reset-page-main-btn,
.page-add-btn,
.export-buttons button,
.modal-actions button,
.problem-type-btn,
.word-align-btn,
.worksheet-section .select-button {
  min-height: var(--ds-hit-min);
  font-size: var(--ds-control-font);
  padding: 0.44rem 1rem;
}

/* Keep per-section clear control compact for precise corner placement. */
.section-config-btn,
.recycle-btn,
.section-clear-btn {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--ds-border);
  border-radius: 54% 46% 56% 44% / 46% 55% 45% 54%;
  box-shadow: 3px 3px 0px 0px var(--ds-border);
  color: var(--ds-fg);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  transition:
    transform var(--anim-fast),
    box-shadow var(--anim-fast),
    background-color var(--anim-fast),
    color var(--anim-fast);
}

.section-config-btn {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  font-size: 15px;
  background: #efe8d8;
}

.recycle-btn {
  background: #dce9fb;
}

.section-clear-btn {
  background: #ffe1e1;
}

.section-config-btn:hover {
  background: var(--ds-accent-blue);
  color: #ffffff;
  box-shadow: 2px 2px 0px 0px var(--ds-border);
  transform: translate(1px, 1px) rotate(-1deg);
}

.recycle-btn:hover {
  background: var(--ds-accent-blue);
  color: #ffffff;
  box-shadow: 2px 2px 0px 0px var(--ds-border);
  transform: translate(1px, 1px) rotate(-2deg);
}

.section-clear-btn:hover {
  background: var(--ds-accent-red);
  color: #ffffff;
  box-shadow: 2px 2px 0px 0px var(--ds-border);
  transform: translate(1px, 1px) rotate(2deg);
}

.section-config-btn:active,
.recycle-btn:active,
.section-clear-btn:active {
  box-shadow: none;
  transform: translate(3px, 3px) rotate(0deg);
}

.section-config-btn:focus-visible,
.recycle-btn:focus-visible,
.section-clear-btn:focus-visible {
  outline: 2px dashed var(--ds-border);
  outline-offset: 2px;
}

.odd-placement-stepper {
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 7;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.worksheet-section.with-problem-number .odd-placement-stepper {
  top: var(--problem-number-clearance);
}

.odd-placement-arrow {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  padding: 0;
  border: 2px solid var(--ds-border);
  border-radius: 52% 48% 55% 45% / 46% 54% 46% 54%;
  background: #fffef7;
  color: var(--ds-fg);
  box-shadow: 3px 3px 0px 0px var(--ds-border);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    transform var(--anim-fast),
    box-shadow var(--anim-fast),
    background-color var(--anim-fast),
    color var(--anim-fast);
}

.odd-placement-arrow:hover:not(:disabled) {
  background: var(--ds-accent-blue);
  color: #ffffff;
  box-shadow: 2px 2px 0px 0px var(--ds-border);
  transform: translate(1px, 1px) rotate(-1deg);
}

.odd-placement-arrow:active:not(:disabled) {
  box-shadow: none;
  transform: translate(3px, 3px);
}

.odd-placement-arrow:focus-visible {
  outline: 2px dashed var(--ds-border);
  outline-offset: 2px;
}

.odd-placement-arrow:disabled {
  background: #ece7dd;
  color: #887f73;
  opacity: 0.72;
  cursor: default;
  box-shadow: none;
}

.problem-type-btn,
.word-align-btn {
  padding: 0.38rem 0.92rem;
}

.settings-icon-btn {
  width: 50px;
  height: 50px;
  font-size: 1.34rem;
}

.number-color-trigger {
  width: 36px;
  height: 36px;
}

.op-icon {
  width: 48px;
  height: 48px;
  font-size: 1.62rem;
}

.preview-layout-btn {
  width: 44px;
  height: 44px;
}

.layout-option p {
  font-size: clamp(1.12rem, 1.02rem + 0.28vw, 1.24rem);
}

.page-rail-item-title {
  font-size: 1.08rem;
}

.page-rail-item-subtitle {
  font-size: 0.9rem;
}

.layout-option {
  background: #ffffff;
}

.layout-option:nth-child(odd) {
  transform: rotate(-0.55deg);
}

.layout-option:nth-child(even) {
  transform: rotate(0.55deg);
}

.layout-option p {
  color: var(--ds-fg);
  font-size: 1.05rem;
}

.layout-option:hover {
  background: #86B8F3;
  color: #ffffff;
  border-color: #4B83C8;
  box-shadow: var(--ds-shadow-hover);
  transform: translate(2px, 2px) rotate(0deg);
}

#layout-continue:hover,
.answer-toggle-btn:hover,
.number-toggle-btn:hover,
.reset-page-main-btn:hover,
.settings-icon-btn:hover,
.export-buttons button:hover,
.modal-actions button:hover,
.session-save-actions button:hover,
.persistence-inline-actions button:hover,
.problem-type-btn:hover,
.digit-option:hover,
.word-align-btn:hover {
  background: var(--ds-accent-red);
  color: #ffffff;
  box-shadow: var(--ds-shadow-hover);
  transform: translate(2px, 2px) rotate(0deg);
}

.layout-option:active,
#layout-continue:active,
.answer-toggle-btn:active,
.number-toggle-btn:active,
.reset-page-main-btn:active,
.settings-icon-btn:active,
.export-buttons button:active,
.modal-actions button:active,
.session-save-actions button:active,
.persistence-inline-actions button:active,
.problem-type-btn:active,
.digit-option:active,
.word-align-btn:active {
  box-shadow: none;
  transform: translate(4px, 4px) rotate(0deg);
}

.layout-option.selected,
.preview-layout-btn.active {
  background: var(--ds-accent-blue);
  color: #ffffff;
  border-color: #1f4576;
  box-shadow: var(--ds-shadow);
}

.layout-option.selected p {
  color: #ffffff;
}

.preview-layout-btn.active .preview-layout-glyph span {
  border-color: #ffffff;
  background: rgba(255, 255, 255, 0.18);
}

.problem-type-btn.selected,
.digit-option.selected,
.word-align-btn.selected,
.number-toggle-btn.active,
.answer-toggle-btn.active {
  background: var(--ds-note);
  color: var(--ds-fg);
  border-color: var(--ds-border);
  box-shadow: var(--ds-shadow);
}

.layout-preview {
  border: 2px dashed var(--ds-border);
  border-radius: var(--ds-wobbly-sm);
  background: #fffefb;
}

.layout-preview div {
  border: 1px dashed #7c7468;
  border-radius: 6px;
  background: #ffffff;
}

#worksheet-section {
  border: 3px solid var(--ds-border);
  border-radius: var(--ds-wobbly-xl);
  background: rgba(255, 254, 250, 0.96);
  box-shadow: var(--ds-shadow-strong);
}

.worksheet-top-bar {
  gap: 0.52rem;
  align-items: center;
}

.worksheet-top-bar h2 {
  font-size: clamp(1.42rem, 2.1vw, 1.82rem);
  letter-spacing: 0.02em;
  transform: rotate(-0.4deg);
}

.preview-layout-switcher {
  border: 3px solid var(--ds-border);
  border-radius: var(--ds-wobbly-pill);
  background: #fffefb;
  box-shadow: var(--ds-shadow);
  max-width: 100%;
  overflow-x: auto;
  flex-wrap: nowrap;
  justify-content: flex-start;
}

.preview-layout-btn {
  width: var(--ds-hit-min);
  height: var(--ds-hit-min);
  border: 2px solid var(--ds-border);
  border-radius: var(--ds-wobbly-sm);
  background: #ffffff;
  color: var(--ds-fg);
  box-shadow: none;
  flex: 0 0 auto;
}

.preview-layout-btn:hover {
  background: var(--ds-accent-blue);
  color: #ffffff;
  transform: rotate(1deg);
}

.preview-layout-glyph span {
  border-color: #5b5348;
  background: #fffefb;
}

.worksheet-settings-menu {
  border: 3px solid var(--ds-border);
  border-radius: var(--ds-wobbly-md);
  background: #fffefb;
  box-shadow: var(--ds-shadow-strong);
}

.settings-row {
  margin-bottom: 0.7rem;
}

.settings-checkbox-row {
  color: var(--ds-fg);
  font-size: 0.94rem;
}

.settings-checkbox-row input[type='checkbox'],
.page-enable-label input,
#grid-toggle,
#horizontal-problem-toggle,
#partial-products-toggle,
#partial-product-area-model-toggle,
#partial-product-area-model-unlabeled-toggle,
#partial-sums-toggle,
#expanded-form-color-code-toggle,
#digit-vs-value-mixed-toggle,
#long-division-toggle,
#number-bond-all-empty,
#perimeter-rectangle-all-toggle,
#perimeter-rectangle-two-toggle,
#perimeter-square-one-toggle,
#perimeter-non-standard-toggle,
#area-square-units-toggle,
#area-formula-toggle,
#area-rectangle-all-toggle,
#area-rectangle-two-toggle,
#area-square-one-toggle,
#area-non-standard-toggle,
#disable-instructions-toggle,
#include-name-date-toggle,
#edit-individual-numbers-toggle,
#include-name-date-first-page-toggle {
  accent-color: var(--ds-accent-blue);
}

.worksheet-container {
  border: 3px solid var(--ds-border);
  border-radius: var(--ds-wobbly-md);
  background: #fffefb;
  box-shadow: var(--ds-shadow);
}

.worksheet-body {
  gap: 0.95rem;
}

.page-rail {
  border: 3px dashed var(--ds-border);
  border-radius: var(--ds-wobbly-md);
  background: #fffdf9;
  box-shadow: var(--ds-shadow);
  padding: 0.62rem;
}

.page-rail-item {
  border: 2px solid var(--ds-border);
  border-radius: var(--ds-wobbly-sm);
  background: #ffffff;
  color: var(--ds-fg);
  box-shadow: var(--ds-shadow);
}

.page-rail-item:nth-child(odd) {
  transform: rotate(-0.6deg);
}

.page-rail-item:nth-child(even) {
  transform: rotate(0.55deg);
}

.page-rail-item:hover {
  background: var(--ds-note);
}

.page-rail-item.active {
  background: var(--ds-note);
  border-color: var(--ds-border);
}

.page-rail-item-title {
  font-size: 0.96rem;
  font-family: var(--font-display);
}

.page-rail-item-subtitle {
  color: #6a6257;
  font-size: 0.78rem;
}

.page-delete-btn {
  border: 2px solid var(--ds-border);
  border-radius: var(--ds-wobbly-pill);
  background: #ffeaea;
  color: #9f2a2a;
}

.page-add-btn {
  border-style: solid;
  background: var(--ds-muted);
}

.page-add-btn:hover {
  background: var(--ds-accent-blue);
  color: #ffffff;
}

.worksheet-header {
  border-bottom: 2px dashed #6d6559;
  color: var(--ds-fg);
}

.header-field {
  color: var(--ds-fg);
}

.header-blank {
  border-bottom: 3px solid #5c564d;
}

.worksheet-header[data-name-date-style='three-line'] .header-three-line-lane,
.worksheet-header[data-name-date-style='blank-three-line'] .header-three-line-lane {
  border-top: 3px solid #504a42;
  border-bottom: 3px solid #504a42;
}

.worksheet-header[data-name-date-style='three-line'] .header-three-line-lane::after,
.worksheet-header[data-name-date-style='blank-three-line'] .header-three-line-lane::after {
  border-top: 2px dashed #948a7e;
}

.header-three-line-label {
  color: var(--ds-fg);
  font-family: var(--font-display);
}

.worksheet-page {
  border: 3px dashed var(--ds-border);
  border-radius: var(--ds-wobbly-md);
  background-color: #fffefb;
  background-image:
    linear-gradient(transparent 95%, rgba(229, 224, 216, 0.75) 95%),
    linear-gradient(90deg, transparent 98%, rgba(229, 224, 216, 0.55) 98%);
  background-size: 100% 28px, 28px 100%;
}

.worksheet-section {
  border: 2px dashed rgba(45, 45, 45, 0.64);
  border-radius: 12px 18px 11px 19px / 18px 12px 20px 14px;
  background: rgba(255, 255, 255, 0.8);
}

.worksheet-section.has-problem {
  border-style: solid;
  border-color: rgba(45, 45, 45, 0.78);
}

.worksheet-section .select-button {
  transform: translate(-50%, -50%);
  border-radius: var(--ds-wobbly-pill);
  background: #ffffff;
  color: var(--ds-fg);
}

.worksheet-section .select-button:hover {
  transform: translate(-50%, -50%);
  background: var(--ds-accent-blue);
  color: #ffffff;
  box-shadow: var(--ds-shadow-hover);
}

.worksheet-section .select-button:active {
  transform: translate(-50%, -50%);
  box-shadow: none;
}

.horizontal-equation,
.expanded-form-problem,
.problem-area-model {
  color: var(--ds-fg);
}

.horizontal-answer-blank {
  border-bottom: 3px solid var(--ds-accent-blue);
}

.area-model-equation,
.area-model-top-label,
.area-model-left-label {
  color: var(--ds-fg);
}

.area-model-answer-blank {
  border: 3px solid var(--ds-border);
  border-radius: var(--ds-wobbly-sm);
  background: #fffefb;
  box-shadow: var(--ds-shadow);
}

.area-model-grid {
  border: 3px solid var(--ds-border);
  border-radius: 8px;
}

.area-model-cell {
  border-right-color: #5f584d;
  border-bottom-color: #5f584d;
}

.area-model-answer-text {
  color: var(--ds-accent-red);
}

.expanded-form-term {
  border-bottom-width: 3px;
  border-bottom-style: dashed;
}

.expanded-form-total {
  border-bottom-style: solid;
  border-bottom-color: #2d2d2d;
}

.expanded-form-separator-line {
  border-top: 3px solid #2d2d2d;
}

.problem-skip-count {
  color: var(--ds-fg);
  font-family: var(--worksheet-font);
}

.skip-count-strip {
  border: 3px solid var(--ds-border);
  border-radius: 10px 12px 9px 11px / 12px 9px 11px 10px;
  box-shadow: var(--ds-shadow);
  background: #fffefb;
}

.skip-count-box {
  border-right: 2px solid #5f584d;
}

.skip-count-value {
  color: var(--ds-fg);
}

.skip-count-start-label {
  color: #5b5348;
}

.problem-digit-vs-value {
  color: var(--ds-fg);
  font-family: var(--worksheet-font);
}

.digit-vs-value-underlined {
  border-bottom-color: var(--ds-border);
}

.digit-vs-value-answer {
  border-bottom: 3px solid var(--ds-border);
}

.digit-vs-value-answer-value {
  color: var(--ds-fg);
}

.digit-vs-value-answer-value.answer-key-text {
  color: var(--danger);
}

.problem-more-less {
  color: var(--ds-fg);
  font-family: var(--worksheet-font);
}

.more-less-anchor {
  color: #0f8a2a;
}

.more-less-answer-line {
  border-bottom: 3px solid var(--ds-border);
}

.more-less-answer-value {
  color: var(--ds-fg);
}

.more-less-answer-value.answer-key-text {
  color: var(--danger);
}

.problem-even-odd {
  color: var(--ds-fg);
  font-family: var(--worksheet-font);
}

.even-odd-number {
  color: var(--ds-fg);
  border-color: transparent;
}

.even-odd-number.answer-key-marked {
  border-color: var(--danger);
  color: var(--danger);
}

.problem-time {
  color: var(--ds-fg);
  font-family: var(--worksheet-font);
}

.problem-fractions {
  color: var(--ds-fg);
  font-family: var(--worksheet-font);
}

.problem-fractions-visual {
  color: var(--ds-fg);
  font-family: var(--worksheet-font);
}

.problem-decimals-visual {
  color: var(--ds-fg);
  font-family: var(--worksheet-font);
}

.problem-symmetry {
  color: var(--ds-fg);
  font-family: var(--worksheet-font);
}

.problem-angles {
  color: var(--ds-fg);
  font-family: var(--worksheet-font);
}

.problem-lines {
  color: var(--ds-fg);
  font-family: var(--worksheet-font);
}

.fraction-bar {
  border-top: 3px solid var(--ds-border);
}

.fractions-scaffold-rewrite-slot {
  border-top: 3px solid var(--ds-border);
}

.fractions-scaffold-hollow-one-image {
  filter: none;
}

.fractions-scaffold-arrow-image {
  filter: none;
}

.fractions-answer-line {
  border-bottom: 3px solid var(--ds-border);
}

.fractions-answer-value {
  color: var(--ds-fg);
}

.fractions-answer-value.answer-key-text {
  color: var(--danger);
}

.fractions-visual-compare-slot.answer-key-text,
.fractions-visual-answer-value.answer-key-text {
  color: var(--danger);
}

.decimals-visual-compare-slot.answer-key-text,
.decimals-visual-answer-value.answer-key-text {
  color: var(--danger);
}

.fraction-visual {
  border-color: var(--ds-border);
}

.fraction-visual-circle::after {
  background: repeating-conic-gradient(
    from -90deg,
    transparent 0 calc((360deg / var(--fraction-denominator)) - 1.6deg),
    rgba(45, 45, 45, 0.42) calc((360deg / var(--fraction-denominator)) - 1.6deg) calc(360deg / var(--fraction-denominator))
  );
}

.fraction-visual-rect-cell {
  border-right-color: var(--ds-border);
  border-bottom-color: var(--ds-border);
}

.fractions-visual-answer-line,
.fractions-visual-compare-slot,
.fractions-visual-order-answer-slot {
  border-bottom-color: var(--ds-border);
}

.decimals-visual-answer-line,
.decimals-visual-compare-slot,
.decimals-visual-order-answer-slot {
  border-bottom-color: var(--ds-border);
}

.fractions-visual-numeric-bar {
  border-top-color: var(--ds-border);
}

.decimals-visual-model {
  border-color: var(--ds-border);
}

.decimals-visual-grid-layer {
  background-image:
    linear-gradient(to right, rgba(45, 45, 45, 0.36) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(45, 45, 45, 0.36) 1px, transparent 1px);
}

.symmetry-shape {
  stroke: var(--ds-border);
}

.symmetry-axis-candidate {
  stroke: var(--ds-border);
}

.fraction-whole.editable-digit-cell,
.fraction-numerator.editable-digit-cell,
.fraction-denominator.editable-digit-cell {
  cursor: text;
}

.fraction-whole.editable-digit-cell:focus-visible,
.fraction-numerator.editable-digit-cell:focus-visible,
.fraction-denominator.editable-digit-cell:focus-visible {
  outline: 2px dashed var(--ds-border);
  outline-offset: 2px;
}

.fraction-part-editor {
  border: 2px solid var(--ds-border);
}

.time-clock-face {
  fill: #fffefb;
  stroke: var(--ds-border);
}

.time-clock-tick {
  stroke: var(--ds-border);
}

.time-clock-number {
  fill: var(--ds-fg);
}

.time-clock-hand {
  stroke: var(--ds-border);
}

.time-clock-center {
  fill: var(--ds-border);
}

.time-answer-line {
  border-bottom: 3px solid var(--ds-border);
}

.time-time-box {
  border: 3px solid var(--ds-border);
  border-radius: var(--ds-wobbly-sm);
  background: #fffefb;
  box-shadow: var(--ds-shadow);
}

.time-time-box.editable-digit-cell:hover {
  background: rgba(191, 233, 255, 0.42);
}

.time-time-box.editable-digit-cell:focus-visible {
  outline: 2px dashed var(--ds-border);
}

.time-answer-value {
  color: var(--ds-fg);
}

.time-answer-value.answer-key-text {
  color: var(--danger);
}

.time-box-editor {
  border: 2px solid var(--ds-border);
  border-radius: var(--ds-wobbly-sm);
}

.word-problem {
  border: 2px dashed var(--ds-border);
  border-radius: var(--ds-wobbly-md);
  background: #fffefb;
}

.word-problem-toolbar {
  border: 2px dashed #6c6457;
  border-radius: var(--ds-wobbly-sm);
  background: rgba(229, 224, 216, 0.38);
}

.word-problem-content {
  border: 2px solid #6c6457;
  border-radius: 10px 16px 13px 17px / 16px 10px 19px 12px;
  background: #fffefb;
  color: var(--ds-fg);
}

.number-bond-circle {
  fill: #fffefb;
  stroke: var(--number-bond-stroke-color, var(--ds-border));
}

.number-bond-connector {
  stroke: var(--number-bond-stroke-color, var(--ds-border));
}

.number-bond-text {
  fill: var(--ds-fg);
}

.grid-table td.worksheet-number-cell,
.horizontal-digit,
.horizontal-operand,
.horizontal-answer-text,
.area-model-cell,
.area-model-answer-text,
.expanded-form-left,
.expanded-form-operand,
.expanded-form-term,
.expanded-form-total,
.skip-count-value,
.digit-vs-value-number,
.digit-vs-value-answer-value,
.more-less-anchor,
.more-less-answer-value,
.even-odd-number,
.perimeter-answer-value,
.area-answer-value,
.time-clock-number,
.time-answer-value,
.time-time-box,
.fraction-whole,
.fraction-numerator,
.fraction-denominator,
.fractions-answer-value,
.fractions-visual-numeric,
.fractions-visual-numeric-numerator,
.fractions-visual-numeric-denominator,
.fractions-visual-answer-value,
.fractions-visual-order-answer-value,
.decimals-visual-numeric,
.decimals-visual-answer-value,
.decimals-visual-order-answer-value,
.number-bond-text {
  font-weight: var(--worksheet-number-weight, 700);
}

.worksheet-section .problem-number-badge {
  border: 2px solid var(--ds-border);
  box-shadow: var(--ds-shadow);
}

.settings-number-controls {
  gap: 0.4rem;
}

.number-color-trigger {
  border-width: 3px;
  border-style: solid;
  border-color: var(--ds-border);
  border-radius: var(--ds-wobbly-sm);
  box-shadow: var(--ds-shadow);
}

.number-color-menu {
  border: 3px solid var(--ds-border);
  border-radius: var(--ds-wobbly-md);
  background: #fffefb;
  box-shadow: var(--ds-shadow);
}

.number-bond-color-menu {
  position: static;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.number-color-option,
.number-bond-color-option {
  border: 2px solid var(--ds-border);
  box-shadow: var(--ds-shadow);
}

.number-color-option:hover,
.number-color-option.selected,
.number-bond-color-option:hover {
  transform: translate(2px, 2px);
  box-shadow: var(--ds-shadow-hover);
}

.number-bond-color-option.selected {
  box-shadow: var(--ds-shadow);
}

.number-bond-color-option.selected::after {
  border: 2px dashed var(--ds-border);
  border-radius: 50%;
}

.export-buttons {
  border: 3px dashed var(--ds-border);
  border-radius: var(--ds-wobbly-md);
  background: rgba(255, 255, 255, 0.8);
  box-shadow: var(--ds-shadow);
}

.export-buttons-left,
.export-buttons-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.export-buttons-right {
  margin-left: auto;
  justify-content: flex-end;
}

.worksheet-settings-menu .font-label,
.worksheet-settings-menu .font-select,
#number-bond-digits,
#number-bond-circle-count,
#missing-number-range-min-select,
#missing-number-range-max-select,
#missing-place-value-position-select,
#rounding-range-min-select,
#rounding-range-max-select,
#rounding-place-select,
#word-text-size,
#name-date-style-select,
#font-select {
  color: var(--ds-fg);
}

.worksheet-settings-menu .font-select,
#number-bond-digits,
#number-bond-circle-count,
#missing-number-range-min-select,
#missing-number-range-max-select,
#missing-place-value-position-select,
#rounding-range-min-select,
#rounding-range-max-select,
#rounding-place-select,
#word-text-size,
#name-date-style-select,
#font-select {
  border: 2px solid var(--ds-border);
  border-radius: var(--ds-wobbly-sm);
  background: #ffffff;
  box-shadow: var(--ds-shadow);
}

#missing-number-range-section p {
  display: flex;
  align-items: center;
  gap: 0.44rem;
  flex-wrap: wrap;
}

#rounding-range-section p {
  display: flex;
  align-items: center;
  gap: 0.44rem;
  flex-wrap: wrap;
}

.modal {
  background: rgba(45, 45, 45, 0.34);
  backdrop-filter: blur(1px);
}

.modal-content {
  width: min(560px, 96vw);
  max-height: 90vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 3px solid var(--ds-border);
  border-radius: var(--ds-wobbly-md);
  background: #fffefb;
  box-shadow: var(--ds-shadow-strong);
  transform: none;
}

.persistence-modal .modal-content {
  width: min(640px, 96vw);
}

.persistence-status {
  border: 2px dashed var(--ds-border);
  border-radius: var(--ds-wobbly-sm);
  background: #fffefb;
  color: var(--ds-fg);
  font-family: var(--font-ui);
}

.persistence-status.error {
  border-color: #9a2e2e;
  background: #ffeaea;
  color: #9a2e2e;
}

.session-save-row {
  border: 2px dashed var(--ds-border);
  border-radius: var(--ds-wobbly-sm);
  background: #fffefb;
  box-shadow: var(--ds-shadow);
}

.session-save-meta strong,
.session-save-meta span {
  color: var(--ds-fg);
}

.persistence-modal-content input[type='text'],
.persistence-modal-content textarea,
.persistence-modal-content input[type='file'] {
  border: 2px solid var(--ds-border);
  border-radius: var(--ds-wobbly-sm);
  box-shadow: var(--ds-shadow);
  background: #ffffff;
  color: var(--ds-fg);
  font-family: var(--font-ui);
}

.persistence-modal-content label {
  color: var(--ds-fg);
  font-family: var(--font-display);
}

#save-session-code-output {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
  line-height: 1.35;
}

.modal-content h3 {
  font-size: var(--ds-modal-title-font);
}

.config-section {
  border: 2px dashed #685f53;
  border-radius: var(--ds-wobbly-sm);
  background: rgba(255, 255, 255, 0.88);
}

.config-section p {
  color: var(--ds-fg);
  font-family: var(--font-display);
  letter-spacing: 0.01em;
}

#skip-count-config-group .config-section {
  border-style: solid;
}

#skip-count-by-section p,
#skip-count-box-count-section p,
#skip-count-prefilled-section p,
#skip-count-fill-mode-section p {
  margin-bottom: 0.45rem;
}

#skip-count-by-buttons {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.46rem;
}

.skip-count-by-btn {
  min-width: var(--ds-hit-min);
  min-height: var(--ds-hit-min);
  padding: 0.3rem 0.74rem;
  border: 2px solid var(--ds-border);
  border-radius: var(--ds-wobbly-pill);
  background: #ffffff;
  color: var(--ds-fg);
  font-family: var(--font-ui);
  font-size: var(--ds-control-font);
  box-shadow: var(--ds-shadow);
}

.skip-count-by-btn.selected {
  background: var(--ds-note);
  border-color: var(--ds-border);
  color: var(--ds-fg);
}

.skip-count-by-btn:disabled {
  opacity: 0.56;
  background: #edf2f8;
  border-color: #8b97a8;
  color: #6b7685;
  cursor: not-allowed;
  box-shadow: 1px 1px 0px 0px rgba(56, 56, 56, 0.35);
  transform: none;
}

#skip-count-custom-input,
#skip-count-box-count,
#skip-count-prefilled-count {
  min-height: var(--ds-hit-min);
  border: 2px solid var(--ds-border);
  border-radius: var(--ds-wobbly-pill);
  box-shadow: var(--ds-shadow);
  background: #ffffff;
  color: var(--ds-fg);
  font-size: var(--ds-control-font);
  font-family: var(--font-ui);
}

.skip-count-start-mode label,
#skip-count-fill-mode-section label {
  color: var(--ds-fg);
  font-family: var(--font-ui);
  font-size: var(--ds-control-font);
}

#digit-vs-value-config-group .config-section {
  border-style: solid;
}

#digit-vs-value-digit-buttons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.46rem;
}

.digit-vs-value-digit-btn {
  min-width: var(--ds-hit-min);
  min-height: var(--ds-hit-min);
  padding: 0.3rem 0.6rem;
  border: 2px solid var(--ds-border);
  border-radius: var(--ds-wobbly-pill);
  background: #ffffff;
  color: var(--ds-fg);
  font-family: var(--font-ui);
  font-size: var(--ds-control-font);
  box-shadow: var(--ds-shadow);
}

.digit-vs-value-digit-btn.selected {
  background: var(--ds-note);
  border-color: var(--ds-border);
  color: var(--ds-fg);
}

#digit-vs-value-item-count {
  min-height: var(--ds-hit-min);
  border: 2px solid var(--ds-border);
  border-radius: var(--ds-wobbly-pill);
  box-shadow: var(--ds-shadow);
  background: #ffffff;
  color: var(--ds-fg);
  font-size: var(--ds-control-font);
  font-family: var(--font-ui);
}

#digit-vs-value-mixed-section label {
  color: var(--ds-fg);
  font-family: var(--font-ui);
  font-size: var(--ds-control-font);
}

#time-config-group .config-section {
  border-style: solid;
}

#perimeter-config-group .config-section,
#area-config-group .config-section,
#fractions-config-group .config-section {
  border-style: solid;
}

#fractions-visual-config-group .config-section {
  border-style: solid;
}

#decimals-config-group .config-section {
  border-style: solid;
}

#symmetry-config-group .config-section {
  border-style: solid;
}

#decimals-config-group #decimals-visual-capacity-note-section {
  border: 2px dashed #cf889d;
  border-radius: var(--ds-wobbly-md);
  background: #e7f3ff;
}

#decimals-config-group #decimals-visual-capacity-note-section p {
  margin: 0;
  color: #7b2f48;
  font-family: var(--font-ui);
  font-size: var(--ds-control-font);
  font-weight: 400;
  line-height: 1.35;
}

#time-mode-section label {
  display: inline-flex;
  align-items: center;
  gap: 0.36rem;
  margin-right: 0.72rem;
  margin-top: 0.22rem;
  color: var(--ds-fg);
  font-family: var(--font-ui);
  font-size: var(--ds-control-font);
}

#time-clock-count {
  min-height: var(--ds-hit-min);
  border: 2px solid var(--ds-border);
  border-radius: var(--ds-wobbly-pill);
  box-shadow: var(--ds-shadow);
  background: #ffffff;
  color: var(--ds-fg);
  font-size: var(--ds-control-font);
  font-family: var(--font-ui);
}

#fractions-operation-buttons,
#fractions-denominator-buttons,
#fractions-difficulty-buttons,
.fractions-option-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.46rem;
}

#fractions-operation-buttons {
  align-items: center;
  gap: 0.58rem;
}

#fractions-operation-buttons .fraction-op-icon {
  min-width: var(--ds-hit-min);
  min-height: var(--ds-hit-min);
}

.fractions-option-btn {
  min-width: var(--ds-hit-min);
  min-height: var(--ds-hit-min);
  padding: 0.3rem 0.74rem;
  border: 2px solid var(--ds-border);
  border-radius: var(--ds-wobbly-pill);
  background: #ffffff;
  color: var(--ds-fg);
  font-family: var(--font-ui);
  font-size: var(--ds-control-font);
  box-shadow: var(--ds-shadow);
  cursor: pointer;
}

.fractions-option-btn.selected {
  background: var(--ds-note);
  border-color: var(--ds-border);
  color: var(--ds-fg);
}

#fractions-item-count {
  min-height: var(--ds-hit-min);
  border: 2px solid var(--ds-border);
  border-radius: var(--ds-wobbly-pill);
  box-shadow: var(--ds-shadow);
  background: #ffffff;
  color: var(--ds-fg);
  font-size: var(--ds-control-font);
  font-family: var(--font-ui);
}

#fractions-mixed-section label,
#fractions-proper-section label,
#fractions-scaffolded-unlike-section label,
#fractions-scaffolded-division-section label {
  color: var(--ds-fg);
  font-family: var(--font-ui);
  font-size: var(--ds-control-font);
}

#fractions-proper-toggle,
#fractions-mixed-toggle,
#fractions-scaffolded-unlike-toggle,
#fractions-scaffolded-division-toggle {
  accent-color: var(--ds-blue);
}

#fractions-visual-identify-mode-section label {
  color: var(--ds-fg);
  font-family: var(--font-ui);
  font-size: var(--ds-control-font);
}

#fractions-visual-identify-name-toggle,
#fractions-visual-identify-shade-toggle {
  accent-color: var(--ds-blue);
}

#decimals-identify-mode-section label {
  color: var(--ds-fg);
  font-family: var(--font-ui);
  font-size: var(--ds-control-font);
}

#decimals-identify-name-toggle,
#decimals-identify-shade-toggle {
  accent-color: var(--ds-blue);
}

#fractions-visual-item-count {
  min-height: var(--ds-hit-min);
  border: 2px solid var(--ds-border);
  border-radius: var(--ds-wobbly-pill);
  box-shadow: var(--ds-shadow);
  background: #ffffff;
  color: var(--ds-fg);
  font-size: var(--ds-control-font);
  font-family: var(--font-ui);
}

#decimals-item-count {
  min-height: var(--ds-hit-min);
  border: 2px solid var(--ds-border);
  border-radius: var(--ds-wobbly-pill);
  box-shadow: var(--ds-shadow);
  background: #ffffff;
  color: var(--ds-fg);
  font-size: var(--ds-control-font);
  font-family: var(--font-ui);
}

.config-help-text {
  margin: 0.24rem 0 0;
  color: var(--ds-fg-muted);
  font-family: var(--font-ui);
  font-size: 0.86rem;
  line-height: 1.2;
}

#partial-products-options-section .strategy-option-row {
  display: flex;
  align-items: center;
  gap: 0.42rem;
  margin-top: 0.24rem;
  font-size: var(--ds-control-font);
}

#partial-products-options-section .strategy-sub-option {
  margin-left: 1.08rem;
}

.problem-type-btn,
.digit-option,
.word-align-btn {
  box-shadow: var(--ds-shadow);
}

.op-icon {
  border-radius: 11px 9px 13px 10px / 9px 13px 10px 12px;
  font-family: var(--font-display);
  border-color: var(--ds-border);
}

.op-icon.selected {
  border-color: var(--ds-border);
  outline: 3px dashed rgba(45, 93, 161, 0.92);
  outline-offset: 3px;
  transform: translate(-1px, -2px) rotate(-1deg) scale(1.06);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.78), var(--ds-shadow-strong);
}

.modal-actions {
  flex-wrap: wrap;
  gap: 0.55rem;
  position: sticky;
  bottom: 0;
  z-index: 3;
  padding: 0.62rem 0 calc(0.5rem + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(255, 254, 251, 0) 0%, rgba(255, 254, 251, 0.96) 30%, #fffefb 100%);
  border-top: 2px dashed #7f7668;
}

@keyframes ds-gentle-bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}

#layout-selection h2::after {
  content: none;
  animation: none;
  border: 0;
}

@media (max-width: 900px) {
  #worksheet-section {
    border-radius: var(--ds-wobbly-md);
  }

  .worksheet-top-bar {
    gap: 0.44rem;
  }

  .page-rail {
    padding: 0.52rem;
  }

  .page-rail-item {
    min-width: 136px;
  }

  .digit-size-container {
    min-width: 400px;
  }

  .export-buttons-left,
  .export-buttons-right {
    width: 100%;
  }

  .export-buttons-right {
    margin-left: 0;
    justify-content: flex-end;
  }

  .modal-actions button {
    flex: 1 1 auto;
  }
}

@media (max-width: 640px) {
  section {
    width: 95vw;
    padding-left: 0.65rem;
    padding-right: 0.65rem;
  }

  .logo-image {
    max-height: 250px;
  }

  .layout-options,
  .page-layout-options {
    gap: 0.58rem;
  }

  .layout-option,
  .page-rail-item {
    transform: rotate(0deg);
  }

  .worksheet-title-group {
    width: 100%;
  }

  .worksheet-title-group h2 {
    width: auto;
  }

  .worksheet-history-controls {
    width: 100%;
  }

  .preview-layout-switcher {
    width: 100%;
    justify-content: flex-start;
  }

  .worksheet-header {
    gap: 0.28rem;
  }

  .header-blank {
    width: 58vw;
  }

  .modal-content {
    transform: none;
  }

  #digit-size-options-section {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-right: 1.5rem;
  }

  #digit-size-options-section::after {
    content: '→';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 2rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 0.26rem;
    color: #6f675b;
    font-size: 0.92rem;
    line-height: 1;
    background: linear-gradient(90deg, rgba(255, 254, 251, 0) 0%, rgba(255, 254, 251, 0.94) 58%, rgba(255, 254, 251, 1) 100%);
    pointer-events: none;
  }

  .digit-size-container {
    min-width: 376px;
    gap: 5px;
  }

  .preview-layout-btn {
    width: 42px;
    height: 42px;
  }

  .session-save-row {
    flex-direction: column;
    align-items: stretch;
  }

  .session-save-actions {
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

.problem-measurement {
  display: flex;
  flex-direction: column;
  gap: clamp(0.45rem, 1.4vh, 0.9rem);
  width: 100%;
  height: 100%;
  color: #2d2d2d;
}

.measurement-prompt {
  font-size: clamp(0.9rem, 1.85vh, 1.12rem);
  line-height: 1.3;
  font-weight: 600;
}

.measurement-item-prompt {
  font-size: clamp(0.86rem, 1.7vh, 1.04rem);
  line-height: 1.25;
  font-weight: 600;
}

.problem-measurement-items {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(0.5rem, 1.8vh, 1rem);
}

.problem-measurement-item {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(0.35rem, 1.1vh, 0.7rem);
}

.problem-measurement-visual {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}

.problem-measurement[data-ultrawide-section="true"] .problem-measurement-visual {
  display: flex;
  align-items: flex-end;
}

.measurement-item-svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.measurement-item-answer {
  display: flex;
  align-items: flex-end;
  gap: clamp(0.35rem, 1vw, 0.75rem);
  justify-content: flex-end;
  min-width: 0;
  margin-top: auto;
  align-self: stretch;
  padding-right: clamp(0.1rem, 0.5vw, 0.35rem);
}

.measurement-item-answer-blank {
  position: relative;
  flex: 0 0 clamp(6rem, 11vw, 8.5rem);
  padding-top: clamp(0.85rem, 1.8vh, 1.2rem);
}

.measurement-item-answer-line {
  display: block;
  width: 100%;
  border-bottom: 3px solid #2d2d2d;
  min-height: 1px;
}

.measurement-answer-value {
  position: absolute;
  left: 50%;
  bottom: 0.4rem;
  transform: translateX(-50%);
  font-size: clamp(1rem, 2vh, 1.25rem);
  line-height: 1;
  font-weight: 700;
  color: #c62828;
  white-space: nowrap;
}

.measurement-item-answer-unit {
  font-size: clamp(0.92rem, 1.8vh, 1.15rem);
  line-height: 1.1;
  font-weight: 600;
  white-space: nowrap;
}

.measurement-shell-note {
  font-size: clamp(0.72rem, 1.35vh, 0.92rem);
  line-height: 1.3;
  color: #5e6b78;
}

@media (max-width: 900px) {
  .measurement-item-answer {
    justify-content: flex-end;
  }
}

@media print {
  #landing-page,
  .auth-billing-banner,
  .app-menu-scrim,
  .app-menu-drawer,
  #preview-page .export-buttons,
  #config-modal,
  .modal,
  .page-rail,
  .worksheet-top-bar,
  .word-problem-toolbar,
  .section-config-btn,
  .recycle-btn,
  .section-clear-btn,
  .odd-placement-stepper {
    display: none !important;
  }

  body {
    background: #fff !important;
  }

  #preview-page,
  #worksheet-section {
    background: #fff !important;
    border: none !important;
    box-shadow: none !important;
  }

  .worksheet-container {
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
  }

  .worksheet-page {
    border: none !important;
    background: #fff !important;
  }
}

.auth-billing-banner {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.85rem;
  min-height: 62px;
  padding: 0.72rem clamp(0.85rem, 2vw, 1.3rem);
  border-bottom: 1px solid rgba(26, 48, 69, 0.14);
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0) 42%),
    linear-gradient(135deg, rgba(244, 251, 255, 0.92) 0%, rgba(255, 254, 247, 0.94) 100%);
  box-shadow: 0 8px 18px rgba(28, 49, 73, 0.06);
  backdrop-filter: blur(10px);
}

.auth-billing-banner[data-tone="warning"] {
  background:
    radial-gradient(circle at top left, rgba(255, 226, 184, 0.54), rgba(255, 226, 184, 0) 45%),
    linear-gradient(135deg, rgba(255, 249, 240, 0.94) 0%, rgba(255, 253, 247, 0.94) 100%);
}

.app-menu-toggle,
.app-home-link {
  border: 3px solid var(--ds-border);
  border-radius: var(--ds-wobbly-sm);
  background: #fffefb;
  color: var(--ds-fg);
  box-shadow: var(--ds-shadow);
  cursor: pointer;
  font: inherit;
  transition: transform var(--anim-fast), box-shadow var(--anim-fast), background var(--anim-fast);
}

.app-menu-toggle {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
  width: 48px;
  height: 44px;
  padding: 0 0.72rem;
}

.app-home-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 44px;
  padding: 0.32rem;
  text-decoration: none;
}

.app-home-link svg {
  display: block;
  width: 27px;
  height: 27px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.app-menu-toggle span {
  display: block;
  width: 100%;
  height: 3px;
  border-radius: 999px;
  background: var(--ds-fg);
}

.app-menu-toggle:hover,
.app-menu-toggle:focus-visible,
.app-home-link:hover,
.app-home-link:focus-visible {
  background: #f0e9d4;
  box-shadow: var(--ds-shadow-hover);
}

.app-menu-toggle:active,
.app-home-link:active {
  box-shadow: none;
  transform: translate(3px, 3px);
}

.app-back-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.52rem 0.9rem;
  border: 3px solid var(--ds-border);
  border-radius: var(--ds-wobbly-sm);
  background: #fffefb;
  color: var(--ds-fg);
  box-shadow: var(--ds-shadow);
  font: inherit;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-align: center;
  text-decoration: none;
  transition: transform var(--anim-fast), box-shadow var(--anim-fast), background var(--anim-fast);
}

.app-back-link:hover,
.app-back-link:focus-visible {
  background: #f0e9d4;
  box-shadow: var(--ds-shadow-hover);
}

.app-back-link:active {
  box-shadow: none;
  transform: translate(3px, 3px);
}

.app-top-actions {
  margin-left: auto;
}

.app-upgrade-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.app-menu-scrim {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(22, 38, 54, 0.28);
}

.app-menu-drawer {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  width: min(292px, 84vw);
  min-height: 100vh;
  padding: 1rem;
  overflow: hidden auto;
  border-right: 3px solid var(--ds-border);
  background: #6fc2f4;
  box-shadow: 12px 0 28px rgba(28, 49, 73, 0.18);
}

.app-menu-drawer::before,
.app-menu-drawer::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.app-menu-drawer::before {
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(57, 154, 225, 0.18), rgba(255, 255, 255, 0.08)),
    url('images/mathsky-sky-only.png') center top / cover no-repeat;
}

.app-menu-drawer::after {
  z-index: 0;
  top: auto;
  height: min(46vh, 360px);
  background: url('images/mathsky-clouds-extracted.png') center bottom / cover no-repeat;
}

.app-menu-branding,
.app-menu-links,
.app-menu-status {
  position: relative;
  z-index: 1;
}

.app-menu-branding {
  display: grid;
  gap: 0.35rem;
}

.app-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
}

.app-menu-mathsky-logo {
  display: block;
  width: min(168px, calc(100% - 62px));
  max-width: 100%;
  height: auto;
  object-fit: contain;
  transform: translateX(0.4rem);
}

.app-menu-presents {
  justify-self: center;
  margin: -0.05rem 0 0;
  color: #ffffff;
  font-family: var(--font-display);
  font-size: clamp(0.68rem, 2.55vw, 0.94rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  text-align: center;
  transform: translateX(-1.65rem);
}

.app-menu-mathmaker-logo {
  display: block;
  width: min(210px, 100%);
  max-width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(2px 3px 0 rgba(17, 55, 100, 0.26));
}

.app-menu-close {
  border: 3px solid var(--ds-border);
  border-radius: var(--ds-wobbly-sm);
  background: #fffefb;
  color: var(--ds-fg);
  box-shadow: var(--ds-shadow);
  cursor: pointer;
  font: inherit;
  width: 44px;
  height: 42px;
  font-size: 1.35rem;
  line-height: 1;
  transition: transform var(--anim-fast), box-shadow var(--anim-fast), background var(--anim-fast);
}

.app-menu-close:hover {
  background: #f0e9d4;
  box-shadow: var(--ds-shadow-hover);
}

.app-menu-close:focus-visible {
  outline: 2px solid var(--ds-accent-blue);
  outline-offset: 2px;
}

.app-menu-close:active {
  box-shadow: none;
  transform: translate(3px, 3px);
}

.app-menu-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
}

.app-menu-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(190px, 100%);
  min-height: 44px;
  padding: 0.52rem 0.8rem;
  border: 3px solid var(--ds-border);
  border-radius: var(--ds-wobbly-sm);
  background: rgba(255, 255, 255, 0.94);
  color: var(--ds-fg);
  box-shadow: var(--ds-shadow);
  font: inherit;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--anim-fast), box-shadow var(--anim-fast), background var(--anim-fast);
}

.app-menu-submenu {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.45rem;
  width: min(190px, 100%);
  margin: -0.18rem 0 0.15rem 0;
}

.app-menu-link--sub {
  width: min(145px, calc(100vw - 4rem));
  min-height: 38px;
  padding: 0.38rem 0.68rem;
  border-width: 2px;
  background: rgba(248, 251, 255, 0.95);
  box-shadow: 3px 3px 0 0 var(--ds-border);
  font-size: 0.94rem;
}

.app-menu-link:hover,
.app-menu-link:focus-visible {
  background: #f0e9d4;
  box-shadow: var(--ds-shadow-hover);
}

.app-menu-link:active {
  box-shadow: none;
  transform: translate(3px, 3px);
}

.app-menu-status {
  margin-top: auto;
  padding: 0.9rem;
  border: 2px dashed rgba(45, 45, 45, 0.72);
  border-radius: var(--ds-wobbly-md);
  background: rgba(255, 255, 255, 0.84);
  backdrop-filter: blur(2px);
}

.app-menu-status[data-tone="positive"] {
  border: 2px solid rgba(59, 128, 88, 0.45);
  background:
    radial-gradient(circle at top left, rgba(222, 255, 235, 0.82), rgba(222, 255, 235, 0) 58%),
    linear-gradient(135deg, rgba(242, 255, 247, 0.94) 0%, rgba(255, 254, 247, 0.96) 100%);
  box-shadow: 0 8px 18px rgba(42, 108, 70, 0.12);
}

.app-menu-status[data-tone="warning"] {
  border: 2px solid rgba(170, 108, 31, 0.48);
  background:
    radial-gradient(circle at top left, rgba(255, 229, 190, 0.74), rgba(255, 229, 190, 0) 60%),
    linear-gradient(135deg, rgba(255, 249, 240, 0.94) 0%, rgba(255, 253, 247, 0.96) 100%);
}

.auth-billing-copy {
  display: grid;
  gap: 0.22rem;
}

.auth-billing-headline {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #173149;
}

.auth-billing-detail {
  margin: 0;
  font-size: 0.88rem;
  color: #4d6172;
}

.auth-billing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.organization-admin-panel {
  margin: 0 auto 1rem;
  max-width: 1180px;
  border: 1px solid #d9e6f0;
  border-radius: 18px;
  padding: 1rem 1.05rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 251, 255, 0.96)),
    linear-gradient(135deg, rgba(198, 232, 255, 0.35), rgba(255, 241, 204, 0.28));
  box-shadow: 0 14px 28px rgba(29, 47, 67, 0.08);
}

.organization-admin-copy h3 {
  margin: 0 0 0.25rem;
  font-size: 1rem;
  color: #173149;
}

.organization-admin-copy p {
  margin: 0;
  color: #4f6477;
  font-size: 0.9rem;
}

.organization-admin-controls {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) 140px auto;
  gap: 0.65rem;
  margin-top: 0.9rem;
}

.organization-admin-controls input,
.organization-admin-controls select,
.organization-invite-link,
.auth-modal-content input,
.auth-modal-content textarea {
  border: 1px solid #c7d6e1;
  border-radius: 12px;
  padding: 0.72rem 0.82rem;
  font: inherit;
  color: #173149;
  background: #fff;
}

.auth-modal-content textarea {
  min-height: 150px;
  resize: vertical;
  line-height: 1.35;
}

.organization-invite-link {
  width: 100%;
  margin-top: 0.7rem;
}

.auth-turnstile {
  min-height: 66px;
}

.auth-modal {
  align-items: center;
}

.auth-modal-content {
  position: relative;
  display: grid;
  gap: 0.75rem;
  width: min(460px, calc(100vw - 2rem));
}

.auth-modal-content h3 {
  margin: 0;
  color: #173149;
}

.auth-modal-content p {
  margin: 0;
  color: #4f6477;
}

.auth-modal-content label {
  font-weight: 700;
  color: #173149;
}

.auth-social-options {
  display: grid;
  gap: 0.55rem;
  justify-items: center;
}

.auth-google-button-host {
  display: flex;
  justify-content: center;
  width: min(100%, 320px);
  min-height: 44px;
  color: #4f6477;
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 700;
}

.auth-google-button-host iframe {
  max-width: 100%;
}

.auth-google-button-host.is-disabled {
  opacity: 0.58;
  pointer-events: none;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: #637788;
  font-size: 0.9rem;
  font-weight: 700;
  text-align: center;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1 1 auto;
  border-top: 2px dashed rgba(23, 49, 73, 0.18);
}

.auth-modal-close {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  border: none;
  background: transparent;
  color: #486176;
  font-size: 1.5rem;
  cursor: pointer;
}

.auth-send-link-btn {
  justify-self: start;
}

.turnstile-retry-btn {
  justify-self: start;
}

.billing-verification-modal-content {
  width: min(460px, calc(100vw - 2rem));
}

.billing-verification-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.feedback-modal-content {
  width: min(620px, calc(100vw - 2rem));
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.72)),
    url('images/mathsky-clouds-extracted.png') center bottom / 100% auto no-repeat,
    url('images/mathsky-sky-only.png') center top / cover no-repeat,
    #6fc2f4;
}

.feedback-modal-intro {
  line-height: 1.38;
}

.feedback-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
}

.auth-cloud-empty {
  margin: 0;
  font-size: 0.88rem;
  color: #637788;
}

.auth-cloud-empty.error {
  color: #9b2f2f;
}

.auth-cloud-hint {
  margin: 0.2rem 0 0;
  color: #4f6477;
  font-size: 0.88rem;
  line-height: 1.3;
}

.pricing-page {
  min-height: 100vh;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(238, 247, 255, 0.42)),
    url('images/mathsky-clouds-extracted.png') center bottom / 100% auto no-repeat,
    url('images/mathsky-sky-only.png') center top / cover no-repeat,
    #6fc2f4;
}

.pricing-shell {
  width: min(1140px, calc(100vw - 2rem));
  margin: 0 auto;
  padding: 1rem 0 2.5rem;
}

.pricing-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.pricing-back-link,
.pricing-nav-link {
  color: #204665;
  font-weight: 800;
  text-decoration: none;
}

.pricing-back-link:hover,
.pricing-back-link:focus-visible,
.pricing-nav-link:hover,
.pricing-nav-link:focus-visible {
  text-decoration: underline;
}

.pricing-auth-banner {
  margin-bottom: 1.35rem;
  border-radius: 22px;
  border: 1px solid rgba(32, 70, 101, 0.08);
}

.pricing-hero {
  position: relative;
  display: grid;
  gap: 1rem;
  padding: clamp(1.5rem, 3vw, 2.6rem);
  border: 1px solid rgba(31, 64, 95, 0.1);
  border-radius: 30px;
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0) 45%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(244, 250, 255, 0.94));
  box-shadow: 0 24px 48px rgba(28, 47, 69, 0.12);
  overflow: hidden;
}

.pricing-hero[data-tone="positive"] {
  background:
    radial-gradient(circle at top left, rgba(208, 255, 224, 0.88), rgba(255, 255, 255, 0) 42%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.97), rgba(245, 255, 249, 0.95));
}

.pricing-hero[data-tone="warning"] {
  background:
    radial-gradient(circle at top left, rgba(255, 232, 195, 0.92), rgba(255, 255, 255, 0) 42%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.97), rgba(255, 250, 242, 0.95));
}

.pricing-kicker {
  color: #24577d;
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pricing-logo {
  display: block;
  width: min(440px, 88vw);
  height: auto;
}

.pricing-hero h1 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.02;
  color: #19324a;
}

.pricing-hero p {
  font-size: 1.03rem;
  line-height: 1.65;
  color: #446175;
}

.pricing-mini-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.9rem;
}

.pricing-mini-stat {
  display: grid;
  gap: 0.22rem;
  justify-items: start;
  width: min(310px, 100%);
  padding: 0.95rem 1rem;
  border: 1px solid rgba(32, 70, 101, 0.09);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.86);
}

.pricing-mini-stat strong {
  color: #173149;
  font-size: 1rem;
}

.pricing-stripe-badge-link {
  display: inline-flex;
  align-items: center;
  width: fit-content;
}

.pricing-stripe-badge {
  display: block;
  width: 150px;
  max-width: 100%;
  height: auto;
}

.pricing-mini-stat span {
  color: #52697b;
  font-size: 0.9rem;
  line-height: 1.45;
}

.pricing-status {
  border-radius: 16px;
  padding: 0.85rem 1rem;
  background: rgba(36, 84, 121, 0.08);
  color: #1f4d72;
  font-weight: 700;
}

.pricing-status.error {
  background: var(--danger-soft);
  color: #8d2431;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem;
  padding: 1.4rem 0 0;
}

.pricing-card {
  display: grid;
  gap: 1rem;
  padding: 1.35rem 1.35rem 1.25rem;
  border: 1px solid rgba(32, 70, 101, 0.09);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 18px 34px rgba(24, 43, 61, 0.11);
}

.pricing-card-featured {
  background:
    radial-gradient(circle at top right, rgba(219, 241, 255, 0.78), rgba(255, 255, 255, 0) 40%),
    rgba(255, 255, 255, 0.97);
  transform: translateY(-6px);
}

.pricing-card[data-disabled="true"] {
  opacity: 0.88;
}

.pricing-card h2 {
  margin: 0;
  font-size: 1.5rem;
}

.pricing-card-badge {
  justify-self: start;
  margin: 0;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  background: rgba(45, 125, 191, 0.12);
  color: #24577d;
  font-size: 0.82rem;
  font-weight: 800;
}

.pricing-card-price-row {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
}

.pricing-card-price {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4vw, 3.35rem);
  color: #173149;
  line-height: 0.95;
}

.pricing-card-period {
  color: #557084;
  font-weight: 700;
}

.pricing-card-summary {
  color: #3f5d70;
  line-height: 1.6;
}

.pricing-card-feature-list {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding-left: 1.25rem;
  color: #456174;
  line-height: 1.55;
}

.pricing-cta {
  border: 1px solid #2b6ea7;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #eef6fd 100%);
  color: #1c4e73;
  font: inherit;
  font-weight: 800;
  padding: 0.9rem 1rem;
  cursor: pointer;
  transition: transform var(--anim-fast), box-shadow var(--anim-fast), opacity var(--anim-fast);
}

.pricing-cta:hover,
.pricing-cta:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 12px 22px rgba(32, 70, 101, 0.16);
}

.pricing-cta:disabled {
  cursor: default;
  opacity: 0.72;
  box-shadow: none;
  transform: none;
}

.pricing-cta-featured {
  background: linear-gradient(180deg, #3f8ecf 0%, #2d78b8 100%);
  color: #fff;
}

.pricing-card-note {
  margin: 0;
  color: #5c7284;
  font-size: 0.92rem;
  line-height: 1.55;
}

.pricing-support-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  padding: 1.4rem 0 0;
}

.pricing-support-card {
  display: grid;
  gap: 0.6rem;
  padding: 1.1rem 1.15rem;
  border: 1px solid rgba(32, 70, 101, 0.09);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow-soft);
}

.pricing-support-card h2 {
  margin: 0;
  font-size: 1.08rem;
}

.pricing-support-card p,
.pricing-support-card a {
  color: #446175;
  line-height: 1.6;
}

.pricing-support-card a {
  font-weight: 700;
}

.site-meta-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.85rem 1rem;
  margin: 0 auto 2.4rem;
  padding: 0 1rem 1.2rem;
  color: #607586;
  font-size: 0.88rem;
}

.site-meta-footer a {
  color: #204665;
  font-weight: 700;
  text-decoration: none;
}

.site-meta-footer a:hover,
.site-meta-footer a:focus-visible {
  text-decoration: underline;
}

.legal-page {
  min-height: 100vh;
  padding: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(238, 247, 255, 0.44)),
    url('images/mathsky-clouds-extracted.png') center bottom / 100% auto no-repeat,
    url('images/mathsky-sky-only.png') center top / cover no-repeat,
    #6fc2f4;
}

.legal-shell {
  width: min(760px, 100%);
  margin: 0 auto;
  padding: 2rem 1rem 3rem;
}

.legal-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 1rem;
  color: #204665;
  font-weight: 700;
  text-decoration: none;
}

.legal-card {
  display: grid;
  gap: 1rem;
  padding: 1.35rem 1.4rem;
  border: 1px solid #d9e6f0;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 36px rgba(24, 43, 61, 0.1);
}

.legal-card h1,
.legal-card h2 {
  margin: 0;
  color: #173149;
}

.legal-card p,
.legal-card li {
  color: #41596c;
  line-height: 1.65;
}

.legal-card ul {
  margin: 0;
  padding-left: 1.2rem;
}

.legal-highlight {
  border-left: 4px solid #f0b93f;
  padding-left: 0.9rem;
  color: #274b66;
}

@media (max-width: 860px) {
  .pricing-mini-stats,
  .pricing-grid,
  .pricing-support-grid {
    grid-template-columns: 1fr;
  }

  .pricing-card-featured {
    transform: none;
  }

  .organization-admin-controls {
    grid-template-columns: 1fr;
  }
}