/* machine scene: the visit is the state machine (1800 x 674) */
.sc-sm { position: relative; width: 100%; height: 100%; }
.sc-sm-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sc-sm-cap { font-size: 20px; fill: var(--mute) !important; }

/* phases */
.sc-sm-pbox { fill: rgba(255,255,255,.035); stroke: rgba(255,255,255,.16); stroke-width: 1.5; }
.sc-sm-pt { font-size: 26px; font-weight: 700; fill: #fff !important; }
.sc-sm-pt.small { font-size: 23px; }
.sc-sm-pa { font-size: 22px; fill: var(--fg2) !important; }
.sc-sm-pb { font-size: 20px; fill: var(--mute) !important; }
.sc-sm-pb.mono { font-family: var(--mono) !important; font-size: 19px; }
.sc-sm-ep { font-family: var(--mono) !important; font-size: 19px; fill: var(--fg2) !important; }
.sc-sm-edge { fill: none; stroke: #f4f4f4; stroke-width: 2.5; }
.sc-sm-edge.dim { stroke: rgba(255,255,255,.22); stroke-width: 2; }
.sc-sm-head { fill: #f4f4f4; }
.sc-sm-head.dim { fill: rgba(255,255,255,.3); }
.sc-sm-elbl { font-family: var(--mono) !important; font-size: 19px; fill: #fff !important; }
.sc-sm-cursor { fill: rgba(243,184,78,.10); stroke: var(--amber); stroke-width: 3; filter: drop-shadow(0 0 18px rgba(243,184,78,.35)); }

/* wearables */
.sc-sm-card { fill: rgba(255,255,255,.035); stroke: rgba(255,255,255,.16); stroke-width: 1.5; }
.sc-sm-h { font-size: 24px; font-weight: 700; fill: #fff !important; }
.sc-sm-sub { font-size: 20px; fill: var(--mute) !important; }
.sc-sm-thr { stroke: rgba(255,255,255,.4); stroke-width: 1.5; stroke-dasharray: 6 6; }
.sc-sm-thr-t { font-family: var(--mono) !important; font-size: 17px; fill: var(--mute) !important; }
.sc-sm-hr { fill: none; stroke: #f4f4f4; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.sc-sm-hr.dim { stroke: rgba(255,255,255,.14); }
.sc-sm-tip { fill: #fff; }
.sc-sm-hrv { font-family: var(--mono) !important; font-size: 19px; font-weight: 700; fill: #fff !important; }

/* rule engine */
.sc-sm-box { fill: rgba(0,0,0,.28); stroke: rgba(255,255,255,.16); stroke-width: 1.5; }
.sc-sm-chip rect { fill: rgba(255,255,255,0.03); stroke: rgba(255,255,255,0.4); stroke-width: 1.5; }
.sc-sm-chip.static rect { stroke-dasharray: 6 5; }
.sc-sm-chip text { font-family: var(--mono) !important; font-size: 19px; fill: #d9d9d9; }
.sc-sm-cool { font-family: var(--mono) !important; font-size: 19px; fill: #d9d9d9; }
.sc-sm-legend rect { fill: none; stroke: rgba(255,255,255,.55); stroke-width: 1.5; stroke-dasharray: 5 4; }
.sc-sm-legend text { font-size: 20px; fill: var(--mute) !important; }

/* outputs */
.sc-sm-prompt rect { fill: rgba(0,0,0,.3); stroke: rgba(255,255,255,.16); stroke-width: 1.5; }
.sc-sm-prompt text { font-family: var(--mono) !important; font-size: 19px; fill: #f4f4f4 !important; }
.sc-sm-model { fill: #2f7fe0; filter: drop-shadow(0 0 14px rgba(47,127,224,.7)); }
.sc-sm-glow { fill: none; stroke: #6aa8ff; stroke-width: 2.5; }
.sc-sm-phone rect { fill: rgba(255,255,255,.035); stroke: rgba(255,255,255,.16); stroke-width: 1.5; }
.sc-sm-tag { font-family: var(--mono) !important; font-size: 19px; fill: #9cc8ff !important; }
.sc-sm-sq { fill: #f4f4f4; }

/* wires */
.sc-sm-bus { fill: none; stroke: rgba(255,255,255,.1); stroke-width: 2; }
.sc-sm-wire { fill: none; stroke: #f4f4f4; stroke-width: 2.5; }
.sc-sm-wire.model { stroke: #6aa8ff; }
.sc-sm-fixed { font-family: var(--mono) !important; font-size: 17px; fill: var(--fg2) !important; }

/* the model's attempt */
.sc-sm-try { fill: none; stroke: #6aa8ff; stroke-width: 2.5; stroke-dasharray: 8 7; }
.sc-sm-x circle { fill: var(--red); }
.sc-sm-x path { stroke: #fff; stroke-width: 2.6; stroke-linecap: round; }
.sc-sm-xlbl { font-size: 20px; fill: #ff8f86 !important; }
.sc-sm-src { font-size: 19px; fill: var(--mute) !important; }