/* Shared base styles for the morph pages (morph.html, asap.html). Theme tokens: dark default, .light = ASAP CI. */
@font-face { font-family: 'ArchivoLocal'; src: url('archivo.ttf'); font-weight: 100 900; font-stretch: 62% 125%; }
* { box-sizing: border-box; margin: 0; padding: 0; }
:root { --canvas: #EEF0EE; --on-surf: #fff; --muted: #8E9791; --track: rgba(255,255,255,.16); --knob: #fff; --knob-shadow: none;
  --loader-track: rgba(255,255,255,.18); --loader-arc: #fff; --undo: #93A69A;
  --shadow: inset 0 0 0 1px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.05), 0 10px 30px rgba(0,0,0,.06); }
/* ASAP CI light: white surfaces, sage as the only accent */
.light { --canvas: #FFFFFF; --on-surf: #222A26; --muted: #777F7B; --track: #E8EDEA; --knob: #fff;
  --knob-shadow: 0 0 0 1px rgba(34,42,38,.08), 0 2px 6px rgba(34,42,38,.18); --loader-track: #E8EDEA; --loader-arc: #93A69A; --undo: #6E8376;
  --shadow: inset 0 0 0 1px #E3E8E5, 0 1px 2px rgba(34,42,38,.04), 0 12px 32px rgba(34,42,38,.07); }
html, body { width: 100%; height: 100%; overflow: hidden; background: var(--canvas); }
html.render body { font-family: 'ArchivoLocal', sans-serif; }
#stage { position: absolute; left: 0; top: 0; width: 1440px; height: 1440px; overflow: hidden; transform-origin: 0 0; }
body { font-family: 'Archivo', sans-serif; -webkit-font-smoothing: antialiased; font-feature-settings: 'tnum' 1; }
#cam { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
#shape { position: absolute; overflow: hidden; transform-origin: 50% 50%;
  box-shadow: var(--shadow); }
#pill { position: absolute; z-index: 2; }
.layer { position: absolute; z-index: 3; }
.under { z-index: 1; }
.top { z-index: 4; }
.abs { position: absolute; }
.white { color: var(--on-surf); }
svg { display: block; overflow: visible; }
.ico { fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
#cursor { position: absolute; left: 0; top: 0; transform-origin: 0 0; z-index: 10; }