.ng { --ng-blue:#3157d5; color:#172033; padding:12px; container-type:inline-size; }
.ng *, .ng *::before, .ng *::after { box-sizing:border-box; }
.ng h2 { margin:0 0 10px; font-size:clamp(18px,4.5vw,25px); line-height:1.25; text-wrap:balance; }
.ng button, .ng input, .ng summary { font:inherit; touch-action:manipulation; }
.ng button, .ng summary { min-height:44px; cursor:pointer; }
.ng button { border:1px solid #d8dfec; border-radius:12px; background:#fff; color:#243451; padding:8px 12px; }
.ng button:hover { border-color:var(--ng-blue); background:#f5f7ff; }
.ng button:disabled { opacity:.45; cursor:default; }
.ng .ng-primary:hover:not(:disabled) { background:#2448b8; border-color:#2448b8; color:#fff; }
.ng :where(button,input,summary):focus-visible { outline:3px solid #3157d5; outline-offset:2px; }
.ng [hidden] { display:none !important; }
.ng-phase { font-size:13px; font-weight:700; color:#2448b8; margin:4px 0 8px; }
.ng-toolbar { display:flex; gap:6px; align-items:center; margin-bottom:10px; }
.ng-toolbar .ng-icon { flex:0 0 44px; width:44px; padding:0; font-size:20px; }
.ng-toolbar .ng-repeat { padding:0 8px; white-space:nowrap; font-size:12px; }
.ng-toolbar [aria-pressed=true] { background:#eef6f2; border-color:#d8e9df; }
.ng-skip { margin-left:auto; white-space:nowrap; font-size:12px; padding:0 10px; }
.ng .ng-primary { background:#3157d5; border-color:#3157d5; color:#fff; font-weight:700; }
.ng-question { border:1px solid #dbe4ff; padding:8px 10px; border-radius:12px; background:#f8faff; margin-bottom:8px; font-weight:700; text-align:center; }
.ng-question strong { font-size:24px; font-variant-numeric:tabular-nums; }
.ng-paper { padding:8px; border:1px solid #d8e2f1; border-radius:14px; background:#fffef8; overflow-x:auto; scrollbar-width:thin; }
.ng-label-grid {
  --ng-slots: var(--ng-count, 5);
  --ng-digit-gap: 4px;
  --ng-digit-w: clamp(28px, calc((100% - (var(--ng-slots) - 1) * var(--ng-digit-gap)) / var(--ng-slots)), 96px);
  display:flex;
  gap:var(--ng-digit-gap);
  width:100%;
  max-width:100%;
  margin:0 auto;
  align-items:start;
  justify-content:center;
}
.ng-digit { width:var(--ng-digit-w); flex:0 0 var(--ng-digit-w); min-width:0; }
.ng-digit strong { display:block; text-align:center; font-size:clamp(16px, calc(var(--ng-digit-w) * .45), 32px); padding:4px 0; }
.ng-digit button { width:100%; padding:6px 4px; font-size:clamp(8px, calc(var(--ng-digit-w) * .16), 13px); font-weight:800; line-height:1.15; min-height:clamp(36px, calc(var(--ng-digit-w) * .72), 56px); overflow-wrap:break-word; color:#17356b; background:#eef3ff; border-color:#9db4f3; }
.ng-comma { font-size:clamp(16px, calc(var(--ng-digit-w) * .45), 32px); align-self:start; padding-top:4px; flex:0 0 clamp(10px, calc(var(--ng-digit-w) * .28), 14px); min-width:0; text-align:center; }
.ng-comma small { display:block; font-size:9px; max-width:35px; }
.ng-bank { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.ng-bank button { font-size:14px; font-weight:800; padding:8px 12px; color:#17356b; background:#eef3ff; border-color:#9db4f3; }
.ng-bank [aria-pressed=true] { background:#edf2ff; border:2px solid #3157d5; padding:5px 8px; }
.ng [data-error=true] { border-color:#b42318; background:#fff0ed; }
.ng [data-correct=true] { border-color:#067647; background:#ecfdf3; }
.ng [data-highlight=true] { box-shadow:inset 0 0 0 2px #3157d5; background:#edf2ff; }
.ng-hint { display:none !important; }
.ng-actions { display:flex; flex:0 0 auto; flex-wrap:wrap; gap:8px; margin-top:10px; }
.ng-actions button { flex:1 1 auto; }
.ng-columns {
  --ng-cell: 44px;
  --ng-digits: 6;
  --ng-comma-at: 0;
  --ng-grid-line: rgba(70, 116, 180, 0.28);
  width: calc(var(--ng-cell) * (var(--ng-digits) + 1));
  margin: auto;
  position: relative;
  background-image:
    linear-gradient(var(--ng-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--ng-grid-line) 1px, transparent 1px);
  background-size: var(--ng-cell) var(--ng-cell);
  background-position: 0 0;
  box-shadow: inset 0 0 0 1px var(--ng-grid-line);
}
.ng-column-paper {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 12px;
  background-color: #fffef8;
}
.ng-column-row {
  display: grid;
  grid-template-columns: repeat(calc(var(--ng-digits) + 1), var(--ng-cell));
  align-items: stretch;
  height: var(--ng-cell);
  margin: 0;
  position: relative;
}
.ng-column-row > :not(.ng-decimal-mark) {
  width: 100%;
  height: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: center;
  font-size: calc(var(--ng-cell) * 0.58);
  line-height: 1;
  font-weight: 700;
  color: #172033;
  caret-color: #3157d5;
  appearance: textfield;
  -moz-appearance: textfield;
}
.ng-column-row input::-webkit-outer-spin-button,
.ng-column-row input::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}
.ng-column-row input { appearance: textfield; color: #172033; }
.ng-column-row input:disabled { opacity: 1; -webkit-text-fill-color: #172033; color: #172033; }
.ng-column-row .ng-place-name {
  font-size: calc(var(--ng-cell) * 0.2);
  font-weight: 750;
  color: #667085;
  display: grid;
  place-items: center;
  line-height: 1.05;
  padding: 2px;
}
.ng-column-row .ng-annotation {
  color: #a15c00;
  font-size: calc(var(--ng-cell) * 0.42);
  font-weight: 800;
}
.ng-column-row .ng-decimal-mark {
  position: absolute;
  left: calc(var(--ng-cell) * (1 + var(--ng-comma-at)));
  top: 58%;
  transform: translate(-50%, -50%);
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: calc(var(--ng-cell) * 0.72);
  font-weight: 900;
  line-height: 1;
  color: #172033;
  pointer-events: none;
  z-index: 2;
}
.ng-column-row [data-highlight="true"] {
  box-shadow: inset 0 0 0 3px #3157d5;
  background: #f4f6ff;
}
.ng-column-row [data-error="true"] {
  box-shadow: inset 0 0 0 3px #b42318;
  background: #fff4f2;
}
.ng-bottom {
  box-shadow: 0 2px 0 0 #172033;
  border-bottom: 0;
}
.ng-sign {
  position: relative;
  display: grid;
  place-items: center;
  font-size: 0;
  line-height: 0;
  overflow: visible;
  border: 0;
  background: transparent;
}
.ng[data-operation="add"] .ng-bottom .ng-sign::before,
.ng[data-operation="subtract"] .ng-bottom .ng-sign::before {
  position: absolute;
  right: 2px;
  bottom: calc(var(--ng-cell) - 0.38em);
  font-size: calc(var(--ng-cell) * 0.78);
  font-weight: 800;
  line-height: 1;
  color: #172033;
}
.ng[data-operation="add"] .ng-bottom .ng-sign::before { content: "+"; }
.ng[data-operation="subtract"] .ng-bottom .ng-sign::before { content: "−"; }
.ng-shift-tape {
  --ng-shift-gap: clamp(1px, .7cqw, 8px);
  display:flex;
  flex-wrap:nowrap;
  width:100%;
  max-width:100%;
  margin:0 auto;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  overflow:hidden;
}
.ng-shift-tape .ng-shift-digit {
  flex:1 1 0;
  width:auto;
  min-width:0;
  max-width:36px;
  aspect-ratio:3 / 4;
  height:auto;
  display:grid;
  place-items:center;
  border:1px solid #d3ddec;
  font-size:clamp(9px, 3.4cqw, 24px);
  line-height:1;
  box-sizing:border-box;
}
.ng-shift-gap {
  flex:0 0 var(--ng-shift-gap);
  width:var(--ng-shift-gap);
  min-width:0;
  color:#3157d5;
  font-size:clamp(10px, 4cqw, 30px);
  font-weight:900;
  text-align:center;
  line-height:1;
}
.ng-shift-value { margin:8px 0 0; text-align:center; font-size:20px; font-variant-numeric:tabular-nums; }
.ng-shift-instruction { font-size:12px; color:#475467; text-align:center; margin:8px 0 0; }
.ng-storage-note { font-size:12px; color:#a15c00; }
.notebook-homework-content[inert] { opacity:.45; }
@media(max-width:720px){
.ng { padding:10px; }
.ng-columns { --ng-cell:clamp(28px,calc((100cqw - 40px) / var(--ng-count)),44px); }
.ng-column-row .ng-place-name { font-size:calc(var(--ng-cell) * 0.18); }
.ng-label-grid { --ng-digit-gap:2px; }
.ng-digit button { font-size:clamp(8px, calc(var(--ng-digit-w) * .15), 12px); }
}
@media(prefers-reduced-motion:reduce){.ng *{scroll-behavior:auto!important;transition:none!important;animation:none!important;}}

/* Unified OGE game shell: matches the number-decomposition lesson. */
.ng {
  --ng-shell-height: 650px;
  position: relative;
  display: flex;
  flex-direction: column;
  height: var(--ng-shell-height);
  min-height: var(--ng-shell-height);
  max-height: var(--ng-shell-height);
  overflow: hidden;
  padding: 12px 12px 12px 58px;
  font-family: ui-rounded, "SF Pro Rounded", Inter, system-ui, sans-serif;
}
.ng h2 {
  margin: 0 0 8px;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.15;
  font-weight: 850;
}
.ng [data-ng="work"] {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.ng-progress {
  position: absolute;
  z-index: 4;
  left: 12px;
  top: 64px;
  bottom: 14px;
  width: 34px;
  padding: 2px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  overflow-x: visible;
  overflow-y: auto;
  scrollbar-width: none;
}
.ng-progress::-webkit-scrollbar { display: none; }
.ng-progress::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 17px;
  bottom: 17px;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #e4e7ec;
}
.ng-progress button {
  position: relative;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  min-height: 30px;
  max-height: 30px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 2px solid #d7deea;
  border-radius: 50%;
  background: #fff;
  color: #667085;
  box-shadow: 0 0 0 4px #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}
.ng-progress button:disabled { opacity: 1; }
.ng-progress button[data-state=current],
.ng-progress button[aria-current] {
  color: #fff;
  background: #3157d5;
  border-color: #3157d5;
  box-shadow: 0 0 0 4px #edf2ff;
  transform: scale(1.08);
}
.ng-progress button[data-state=done] {
  color: #067647;
  background: #ecfdf3;
  border-color: #12b76a;
  box-shadow: 0 0 0 4px #fff;
  transform: none;
}
.ng-progress button[data-state=done]:hover:not(:disabled) {
  border-color: #12b76a;
  background: #d1fadf;
  color: #05603a;
}
.ng-progress button[data-state=todo] { opacity: .55; }
.ng-toolbar {
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 8px;
}
.ng-phase {
  min-height: 20px;
  margin: 0 0 10px;
  color: #667085;
  font-weight: 800;
}
.ng-paper {
  --ng-paper-height: 305px;
  height: var(--ng-paper-height);
  min-height: var(--ng-paper-height);
  max-height: var(--ng-paper-height);
  border-radius: 18px;
  box-shadow: inset 0 0 0 1px rgba(70, 116, 180, .08);
  overflow: auto;
}
/* Opening/choice steps: keep Yes/No actions on screen without scrolling the shell. */
.ng[data-mode="opening"] .ng-paper,
.ng[data-mode="intro"] .ng-paper,
.ng[data-mode="check"] .ng-paper {
  --ng-paper-height: clamp(160px, 34svh, 240px);
  height: auto;
  min-height: 140px;
  max-height: clamp(160px, 38svh, 260px);
  flex: 1 1 auto;
}
.ng[data-mode="opening"] [data-ng="work"],
.ng[data-mode="intro"] [data-ng="work"],
.ng[data-mode="check"] [data-ng="work"] {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.ng-hint {
  display: none !important;
}

@media(max-width:720px) {
  .ng {
    --ng-shell-height: 650px;
    padding: 10px 8px 10px 46px;
  }
  .ng-progress {
    left: 7px;
    top: 58px;
    bottom: 10px;
    width: 30px;
    gap: 8px;
  }
  .ng-progress button {
    flex-basis: 28px;
    width: 28px;
    height: 28px;
    min-height: 28px;
  }
  .ng-paper {
    --ng-paper-height: 305px;
  }
}

.ng-admin-scrub{
  display:inline-flex;align-items:center;gap:8px;margin-left:auto;
  padding:4px 8px;border:1px dashed #9db4f3;border-radius:12px;background:#f5f8ff;
}
.ng-toolbar .ng-admin-scrub{margin-left:auto;}
.ng-admin-scrub button{min-width:44px;min-height:40px;font-size:16px;font-weight:900;border:1px solid #d8dfec;border-radius:12px;background:#fff;cursor:pointer;}
.ng-admin-scrub button:disabled{opacity:.45;cursor:default;}
.ng-admin-slide{min-width:4.5em;text-align:center;font-size:12px;font-weight:800;color:#2448b8;font-variant-numeric:tabular-nums}
.ng[data-admin="1"] .ng-progress button:disabled{opacity:1}
.ng[data-admin="1"] .ng-progress button[data-state=todo]{opacity:1}