/* Decimals, percentages and money unit visuals. Scoped under .nd-visual; root wraps in .nu-visual. */
.nd-visual{max-width:640px;width:100%;margin:0 auto;color:#173e35;font-size:16px;line-height:1.5}
.nd-visual .nd-svg{display:block;width:100%;height:auto;max-width:600px;margin:0 auto;font-family:'Space Grotesk','DM Sans',sans-serif}
.nd-visual .nd-t{font-size:20px;fill:#173e35}
.nd-visual .nd-small{font-size:18px}
.nd-visual .nd-big{font-size:26px;font-weight:700}
.nd-visual .nd-bold{font-weight:700}
.nd-visual .nd-centre{text-anchor:middle}
.nd-visual .nd-end{text-anchor:end}
.nd-visual .nd-orange{fill:#b46a12}
.nd-visual .nd-green{fill:#1e7560}
.nd-caption{margin:12px 0 0;font-size:16px;line-height:1.6;color:#2b4a3f;padding:10px 14px;background:#f1f4e9;border-left:4px solid #799757;border-radius:0 8px 8px 0}
.nd-caption strong{color:#173e35}
.nd-phone-labels{display:none}
.nd-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* controls */
.nd-controls{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:12px}
.nd-btn{font:inherit;font-weight:700;min-height:44px;padding:8px 16px;border:1px solid #739b84;border-radius:8px;background:#fff;color:#174e3d;cursor:pointer}
.nd-btn:disabled{opacity:.4;cursor:default}
.nd-btn-quiet{background:transparent;border-color:transparent;text-decoration:underline}
.nd-step{font-size:15px;color:#4d6b57;min-width:96px;text-align:center}

/* place-value chart */
.nd-pv-wrap,.nd-col-wrap{overflow-x:auto;max-width:100%}
.nd-pv{border-collapse:collapse;margin:0 auto;font-family:'Space Grotesk','DM Sans',sans-serif;font-size:22px;background:#fffef9}
.nd-pv th,.nd-pv td{border:1px solid #9dbda7;padding:8px 10px;text-align:center;min-width:48px}
.nd-pv thead th{font-size:14px;font-weight:700;color:#305e48;background:#e2efda;text-transform:lowercase}
.nd-pv tbody th{font-size:16px;font-weight:700;background:#f1f4e9;text-align:right;white-space:nowrap}
.nd-pv .nd-hl{background:#d3f36b}
.nd-pv .nd-pt,.nd-pv .nd-pt-head{min-width:14px;padding:8px 2px;border-top:0;border-bottom:0;font-weight:900;font-size:28px;background:#fffef9}
.nd-pv .nd-placeholder span{color:#8a6d1c;background:#fff4d5;border-radius:6px;padding:0 6px}

/* column addition/subtraction */
.nd-col{border-collapse:collapse;margin:0 auto;font-family:'Space Grotesk','DM Sans',sans-serif;font-size:28px;background:#fffef9}
.nd-col td,.nd-col th{text-align:center;min-width:46px;padding:2px 6px}
.nd-col .nd-head th{font-size:13px;font-weight:700;color:#305e48;text-transform:lowercase;padding-bottom:6px}
.nd-col .nd-carry td{font-size:15px;color:#b46a12;height:22px;font-weight:700;vertical-align:bottom}
.nd-col .nd-sign{color:#4d6b57;min-width:32px}
.nd-col .nd-pt,.nd-col .nd-pt-head{min-width:14px;padding:2px 0;font-weight:900}
.nd-col .nd-b td{border-bottom:3px solid #173e35}
.nd-col .nd-b .nd-sign{border-bottom:3px solid #173e35}
.nd-col .nd-result td{padding-top:6px;color:#1e7560;font-weight:700}
.nd-col .nd-active{background:#d3f36b;border-radius:6px}
.nd-col .nd-done{color:#173e35}
.nd-col .nd-ph{color:#8a6d1c;background:#fff4d5;border-radius:6px;padding:0 6px}
.nd-col .nd-ph-slot{display:inline-block;width:22px;height:30px;border:2px dashed #c49a50;border-radius:6px;vertical-align:middle}

/* shop */
.nd-shop{background:#fffef9;border:1px solid #b6cdbd;border-radius:14px;padding:14px 16px}
.nd-budget{margin:0 0 10px;font-size:18px}
.nd-shelf{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.nd-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 10px;border:1px solid #9dbda7;border-radius:10px;background:#f1f4e9;text-align:center}
.nd-item-icon{font-size:36px;line-height:1}
.nd-item-name{font-weight:700;font-size:15px}
.nd-price{font-family:'Space Grotesk','DM Sans',sans-serif;font-size:22px;font-weight:700;color:#173e35;background:#d3f36b;border-radius:20px;padding:2px 12px}
.nd-tag{font-size:13px;font-weight:700;color:#fff;background:#d68a28;border-radius:6px;padding:2px 8px}

/* motion: learner-paced, replayable; disabled under still mode and reduced motion */
.nd-visual .nd-grow{transform-box:fill-box;transform-origin:left center;animation:nd-grow .5s ease both;animation-delay:var(--delay,0ms)}
.nd-visual .nd-grow-x{transform-box:fill-box;transform-origin:left center;animation:nd-grow .7s ease both}
.nd-visual .nd-pop{animation:nd-pop .45s ease both;animation-delay:var(--delay,0ms)}
.nd-visual svg .nd-pop{transform-box:fill-box;transform-origin:center}
.nd-visual .nd-jump{stroke-dasharray:400;stroke-dashoffset:400;animation:nd-draw .6s ease forwards;animation-delay:var(--delay,0ms)}
@keyframes nd-grow{from{transform:scaleX(0);opacity:.4}to{transform:scaleX(1);opacity:1}}
@keyframes nd-pop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes nd-draw{to{stroke-dashoffset:0}}
.nu-still .nd-visual *,.nd-still *,.nd-visual.nd-still *{animation:none!important;transition:none!important;stroke-dashoffset:0!important}
@media(prefers-reduced-motion:reduce){.nd-visual *{animation:none!important;transition:none!important;stroke-dashoffset:0!important}}

@media(max-width:520px){
  /* 600-unit viewBox renders ~290px wide: 30 units ≈ 14px on screen. Long labels move to the HTML list below the picture. */
  .nd-visual .nd-t,.nd-visual .nd-small{font-size:30px}.nd-visual .nd-big{font-size:32px}
  .nd-visual .nd-long,.nd-visual .nd-alt{display:none}
  .nd-phone-labels{display:block;list-style:none;margin:6px 0 0;padding:8px 12px;background:#fffef9;border:1px solid #dce2ec;border-radius:8px;font-size:15px;line-height:1.5}
  .nd-phone-labels li{margin:0}
  .nd-pv{font-size:18px}.nd-pv th,.nd-pv td{padding:6px 3px;min-width:30px}.nd-pv thead th{font-size:12px}.nd-pv tbody th{font-size:13px;padding-left:4px;padding-right:4px}.nd-pv .nd-pt,.nd-pv .nd-pt-head{min-width:10px;padding:6px 0;font-size:22px}
  .nd-col{font-size:22px}.nd-col td,.nd-col th{min-width:34px;padding:2px 4px}.nd-col .nd-ph-slot{width:18px;height:24px}
  .nd-caption{font-size:15px}.nd-item-icon{font-size:30px}.nd-price{font-size:18px}
  .nd-controls{gap:6px}.nd-btn{padding:8px 12px}
}

.nd-grid-pair{display:grid;grid-template-columns:1fr 1fr;gap:24px}.nd-grid-pair h3{text-align:center;margin:0 0 12px}.nd-grid-pair .nd-svg{max-width:340px}.nd-grid-pair .nd-caption{font-size:14px}@media(max-width:600px){.nd-grid-pair{grid-template-columns:1fr;gap:20px}.nd-grid-pair .nd-svg{max-width:250px}}