/* Two palettes share the exact same layout, geometry and motion. */
:root{--field:#050914;--track:#1c2a46;--ambient:#5379b6;--idle:#344c73;--active:#426ee0;--energy:#a6c4ff;--terminal:#819ac3;--selected:#243d72;--border-active:#91adea;--control:#101a2c;--border:#2c3b55}
:root[data-palette=teal]{--field:#080e10;--track:#203a3c;--ambient:#478c87;--idle:#3b6a68;--active:#43a49b;--energy:#a1e8d4;--terminal:#79aaa3;--selected:#1c4844;--border-active:#83c7ba;--control:#132323;--border:#304c49}
/* Quiet matte field. Geometry excludes every text region by at least 18px. */
html,body,.opening{background:var(--field)}.world{background:var(--field)}.world:after{display:none}#circuits{width:100%;height:100%;position:absolute;inset:0}.trace{stroke:var(--track);stroke-width:1;stroke-linejoin:round}.ambient{fill:var(--ambient)}.route-idle{stroke:var(--idle);stroke-width:1.2}.route-active{stroke:var(--active);stroke-width:1.7}.energy{fill:var(--energy)}.terminal{fill:var(--field);stroke:var(--terminal);stroke-width:1}.still .route-active{stroke:var(--energy)}.outcomes>button{color:#d6deee!important}.outcomes>button[aria-pressed=true]{background:var(--selected)!important;border-color:var(--border-active)!important}.outcomes>button:not([aria-pressed=true]){background:var(--control)!important;border:1px solid var(--border)!important}.description,.headline,.example{background:var(--field);box-shadow:0 0 0 16px var(--field);text-shadow:none}.description{color:#edf1fa;min-height:125px}.headline{color:#f1f4fb}.example{transition:none}.headline{transition:none}.example-label,.workflow p{color:#c9d3e6}.workflow li{border-color:#52627f}.signal{box-shadow:none;background:var(--energy)}header{background:var(--field)}.pill{background:var(--control);backdrop-filter:none;border-color:var(--border)}.is-example .description{font-size:15px}.is-example .world{opacity:1}.motion{position:absolute;left:154px;top:22px;z-index:11;font-size:11px;color:#c4cfe2;padding:8px}.navigation nav{box-shadow:0 0 0 18px var(--field);background:var(--control)}.name-dot{background:var(--energy)}footer{background:var(--field)}.is-example #leads{backdrop-filter:none}#leads{backdrop-filter:none}
@media(max-width:800px){.is-example .description{font-size:14px}.motion{left:125px}}
@media(max-width:520px){.motion{top:77px;left:124px}.description{min-height:88px}.is-example .description{font-size:13px;min-height:64px}.is-example .outcomes{top:auto;bottom:50px}.is-example .outcomes>button:disabled,.is-example .outcomes>button{display:flex}.is-example .outcomes>p{display:none}.is-example .outcomes>button{font-size:15px;padding:6px 10px;margin-top:3px;margin-bottom:3px}.example{width:calc(100% - 40px)}.workflow{margin-top:24px;margin-bottom:16px}}

.pad{fill:var(--track)}.palette{position:absolute;left:264px;top:25px;z-index:11;display:flex;gap:3px;background:var(--field)}.palette button{font-size:11px;padding:4px 9px;color:#b7c4db;border:1px solid transparent;border-radius:14px}.palette button[aria-pressed=true]{border-color:var(--border-active);color:#f1f4fb;background:var(--control)}.modal .world{visibility:hidden}.outcomes button{transition:none!important}.description{transition:none}.is-example .headline{transform:none}.is-example .example{transform:none}.dot{background:var(--energy)}
@media(max-width:800px){.palette{left:225px}.description{min-height:125px}}
@media(max-width:520px){.palette{left:auto;right:20px;top:80px}.motion{left:123px}.outcomes,.is-example .outcomes{top:auto;bottom:60px;transform:none}.outcomes>p,.is-example .outcomes>p{display:block}.outcomes>button,.is-example .outcomes>button{font-size:15px;padding:6px 10px;margin:3px 0 3px -10px}.headline{top:26%}.description{top:43%;bottom:auto;min-height:88px}.is-example .description{top:17%;min-height:64px}.example{top:27%}.workflow{gap:16px}.workflow p{line-height:1.5}.back{padding:4px 0}}

.done{display:inline-flex;align-items:center;gap:14px;margin-top:26px;font-size:14px;padding:12px 18px;background:#e9efff;color:#07102a;border-color:#e9efff;font-weight:600}.done:hover{background:#fff;border-color:#fff}