:root{--bg:#f7f5ed;--paper:#fffdf7;--ink:#334b50;--muted:#647c78;--line:#9cbab2;--teal:#087d86;--pink:#d45f59;--gold:#f1bd5e}
body{background:var(--bg);color:var(--ink)}
.site-shell{border-bottom:2px solid #b3c8c2}
.site-brand a{color:var(--ink);font-weight:900}
.chapter-nav a{border:2px solid #aec6bf;border-radius:13px;background:var(--paper);color:var(--ink);font-size:13px;font-weight:750;padding:9px 12px}
.chapter-nav a:hover{background:#e6f6f0}
.chapter-nav a[aria-current=page]{background:#157d89;border-color:#263f4b;color:#fff}
.panel,.chapter-card{background:var(--paper);border-color:#9cbab2;border-radius:18px}
.panel{box-shadow:3px 4px 0 #e1e9dc}
button,.modes button,#nav button,select,input[type=number],textarea{border-radius:11px}
button.primary,.enter{background:#087d86;color:#fff}
.eyebrow{color:#087d86}
.callout{background:#edf6f2;border-color:#9cbab2}
.site-footer{border-top:1px solid #c8d6cf;color:#68807a}
canvas{touch-action:none}
:focus-visible{outline:3px solid #d89b30;outline-offset:2px}
.replaced-range{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}
.drag-value{touch-action:none;user-select:none;cursor:grab;border:2px solid #557982;background:#eaf5ef;color:#334b50;font-weight:750;min-height:38px;padding:7px 12px;max-width:100%;white-space:normal;text-align:left}
.drag-value.dragging{cursor:grabbing;background:#d6efe8;box-shadow:0 0 0 3px #9cbab2}
/* One background palette for every chapter, including older canvas lessons. */
html body{background:#f7f5ed;color:#334b50}
html body .panel{background:#fffdf7;border-color:#9cbab2}
html body .site-shell{background:transparent}
html body #scene,html body #motion,html body #graph{background:#fffefa}