/* The differentiation "Explore" applets (tangent, derivative, optimise,
 * ladder): the few things the shared sheet does not have. */

.mcg-hit { fill: var(--gold); stroke: var(--ink); stroke-width: 2; }
.mcg-link { fill: none; stroke: var(--gold); stroke-width: 4; stroke-dasharray: 3 6; stroke-linecap: round; }
.mcg-now-dot { stroke-width: 3; }
.mcg-pair { display: grid; gap: 12px; }

/* The open box. */
.mcg-face { stroke: var(--ink); stroke-width: 1.4; stroke-linejoin: round; }
.mcg-face.is-front { fill: color-mix(in srgb, var(--ink) 9%, var(--paper)); }
.mcg-face.is-side { fill: color-mix(in srgb, var(--ink) 20%, var(--paper)); }
.mcg-face.is-in { fill: color-mix(in srgb, var(--ink) 5%, var(--paper)); stroke: var(--muted); }
.mcg-face.is-floor { fill: color-mix(in srgb, var(--tangerine) 18%, var(--paper)); stroke: var(--muted); }
.mcg-rim { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.mcg-edge { stroke-width: 4; stroke-linecap: round; }
.mcg-edge.is-x { stroke: var(--tangerine); }
.mcg-edge.is-h { stroke: var(--teal-deep); }

/* The ladder, the wall and the ground. */
.mcg-solid { fill: color-mix(in srgb, var(--ink) 12%, var(--paper)); stroke: none; }
.mcg-ladder { stroke: var(--ink); stroke-width: 7; stroke-linecap: round; }
.mcg-arrow { stroke-width: 3.2; stroke-linecap: round; }
.mcg-arrow.is-b { stroke: var(--tangerine); }
.mcg-arrow.is-c { stroke: var(--teal-deep); }
.mcg-head.is-b { fill: var(--tangerine); }
.mcg-head.is-c { fill: var(--teal-deep); }