/* ═══════════════════════════════════════════════════════════════════
   THE MACHINE — machine.css · everything .mc-, and only .mc-

   The look every room on the machine shares: the graph, the units in
   their colours (from ../../foundation.css), the lines and the curve,
   the notation and the table, the zoom, and the handles. One Machine's
   look (old-instruments/one-machine), which was The Quadratic
   Function's, with the cube, the copies and the differences added.
   ═══════════════════════════════════════════════════════════════════ */

.mc-framed,.mc-framed body{background:transparent}
.mc-framed .sh-head{display:none}
.mc-framed .sh-page{padding:2px 0 8px}
/* the handles are rows of the page, built into this box */
.mc-handles{display:contents}

.mc-card{position:relative;padding-top:18px}
#mc-stage{max-height:min(74vh,700px);max-width:790px;margin:0 auto;cursor:pointer}

.mc-says{font-family:var(--serif);font-size:19px;color:var(--muted);text-align:center;padding:0 12px;letter-spacing:.005em}
.mc-is{font-family:var(--serif);font-size:18px;line-height:1.45;color:var(--ink);text-align:center;
        padding:4px 24px 20px;min-height:80px;max-width:760px;margin:0 auto;transition:opacity .25s}
.mc-is.mc-wait{opacity:0}

/* ── the graph ── */
.mc-grid{stroke:var(--line);stroke-width:1}
.mc-axis{stroke:var(--machine-soft);stroke-width:1.6;stroke-linecap:round}
.mc-floor{stroke:var(--machine-soft);stroke-width:2.2;stroke-linecap:round;opacity:.7}
.mc-tick{fill:var(--muted);font-family:var(--sans);font-size:10.5px}
/* turned (3d): the sheet the graph is drawn on, and the floor behind it */
.mc-sheet{fill:color-mix(in srgb,var(--room) 55%,transparent);stroke:var(--line);stroke-width:1.2;stroke-linejoin:round}
.mc-floor3{stroke:var(--faint);stroke-width:.8}

/* ── the units, each kind in the one colour it means: a one is the
   block's blue, the rectangle (so many by x) the bag's canvas, the colour
   of x; a square the field, a cube the field's deeper green with its
   depth; taken away, the balloon's red ── */
.mc-u{fill:var(--field);stroke:var(--field-deep);stroke-width:1}
.mc-u.mc-x{fill:var(--bag);stroke:var(--bag-deep)}
.mc-u.mc-one{fill:var(--block);stroke:var(--block-deep)}
.mc-u.mc-cube{fill:var(--field-deep);stroke:color-mix(in srgb,var(--field-deep) 70%,#000)}
.mc-u.mc-cube.mc-t{fill:color-mix(in srgb,var(--field-deep) 62%,#fff)}
.mc-u.mc-cube.mc-l{fill:color-mix(in srgb,var(--field-deep) 80%,#000)}
.mc-u.mc-neg{fill:var(--balloon);stroke:var(--balloon-deep)}
.mc-u.mc-neg.mc-t{fill:color-mix(in srgb,var(--balloon) 62%,#fff)}
/* in 3d every unit has a top that catches the light and a left in shade */
.mc-u.mc-one.mc-t{fill:color-mix(in srgb,var(--block) 62%,#fff)}
.mc-u.mc-one.mc-l{fill:color-mix(in srgb,var(--block) 80%,#000)}
.mc-u.mc-x.mc-t{fill:color-mix(in srgb,var(--bag) 62%,#fff)}
.mc-u.mc-x.mc-l{fill:color-mix(in srgb,var(--bag) 80%,#000)}
.mc-u.mc-sq.mc-t{fill:color-mix(in srgb,var(--field) 62%,#fff)}
.mc-u.mc-sq.mc-l{fill:color-mix(in srgb,var(--field) 80%,#000)}
.mc-u.mc-neg.mc-l{fill:color-mix(in srgb,var(--balloon) 80%,#000)}
.mc-tiny .mc-u,.mc-u.mc-tiny{stroke:none}
.mc-run{stroke:none}
.mc-join{stroke:var(--surface);stroke-width:.8;opacity:.8}
/* where one copy of the last column sits on the one before it */
.mc-sep{stroke:var(--machine);stroke-width:1.6}
/* the column on the right, cut into equal parts */
.mc-cut{stroke:var(--machine);stroke-width:1.4}

.mc-t-cube{fill:color-mix(in srgb,var(--field-deep) 80%,#000)}
.mc-t-sq{fill:var(--field-deep)}
.mc-t-x{fill:var(--bag-deep)}
.mc-t-one{fill:var(--block-deep)}
.mc-t-neg{fill:var(--balloon-deep)}
.mc-t-sum{fill:var(--ink);font-weight:600}
.mc-t-faint{fill:var(--muted);font-size:16px}
.mc-over{font-family:var(--serif);font-size:13.5px;font-weight:600}

/* ── the lines and the curve ── */
.mc-line-c{fill:none;stroke:var(--block);stroke-width:2.2;stroke-linecap:round}
.mc-line-b{fill:none;stroke:var(--bag-deep);stroke-width:2.2;stroke-linecap:round}
.mc-line-q{fill:none;stroke:var(--field-deep);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:6 4}
/* the log turning: the line y = x it turns over */
.mc-mirror{stroke:var(--muted);stroke-width:1.4;stroke-dasharray:2 5;stroke-linecap:round}
/* under a line drawn over the columns, a pale edge, so it reads over any unit */
.mc-halo{fill:none;stroke:var(--surface);stroke-width:6.5;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:.9}
.mc-curve{fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.mc-dot{fill:var(--ink)}
.mc-label{fill:var(--ink);font-family:var(--serif);font-size:13px;paint-order:stroke;stroke:var(--surface);stroke-width:4px;stroke-linejoin:round}
.mc-yint{fill:var(--surface);stroke:var(--block-deep);stroke-width:2.2}
.mc-xint{fill:var(--surface);stroke:var(--ink);stroke-width:2}
.mc-vtx{fill:var(--surface);stroke:var(--field-deep);stroke-width:2.2}
.mc-guide{stroke:var(--machine-soft);stroke-width:1.2;stroke-dasharray:3 4}
.mc-pt{fill:var(--ink);font-family:var(--serif);font-size:12px;paint-order:stroke;stroke:var(--surface);stroke-width:5px;stroke-linejoin:round}
.mc-over.mc-over{font-family:var(--serif)}
text.mc-over{fill:var(--muted)}

/* ── the notation, the table ── */
.mc-eq{fill:var(--ink);font-family:var(--serif);font-size:20px}
.mc-lm{fill:var(--muted);font-family:var(--serif);font-size:13px;font-style:italic}
.mc-th{fill:var(--muted);font-family:var(--serif);font-size:14px;font-style:italic}
.mc-td{fill:var(--ink);font-family:var(--serif);font-size:14.5px}
.mc-td.mc-faint{opacity:.42}
.mc-dk{fill:var(--faint);font-family:var(--sans);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase}
.mc-dh{font-style:normal;font-family:var(--sans);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase}
.mc-gold{fill:var(--gold);font-weight:700}

/* ── the zoom ── */
.mc-zb{cursor:pointer;outline:none}
.mc-zb-hit{fill:transparent}
.mc-zb-face{fill:var(--surface);stroke:var(--line);stroke-width:1.4;transition:stroke .15s}
.mc-zb-glyph{fill:var(--machine);font-family:var(--sans);font-size:17px;font-weight:600;pointer-events:none}
.mc-zb:hover .mc-zb-face{stroke:var(--machine-soft)}
.mc-zb.mc-off{cursor:default;opacity:.3}

/* ── the throws ── */
.mc-row{justify-content:center;padding-top:2px;flex-wrap:wrap;row-gap:12px;gap:28px}
.mc-throw{position:relative;margin:0 12px}
.mc-notch{position:absolute;left:9.5px;right:9.5px;top:13px;height:0;display:flex;justify-content:space-between;pointer-events:none}
.mc-notch i{display:block;width:9px;height:9px;margin:-4.5px;border-radius:50%;background:var(--line)}
.mc-throw input[type=range]{position:relative;appearance:none;-webkit-appearance:none;width:100%;height:26px;background:transparent;cursor:pointer;margin:0;display:block}
.mc-throw input[type=range]::-webkit-slider-runnable-track{height:3px;background:var(--line);border-radius:2px}
.mc-throw input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:19px;height:19px;border-radius:50%;background:var(--machine);margin-top:-8px;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:background .15s}
.mc-throw input[type=range]:hover::-webkit-slider-thumb{background:var(--machine-soft)}
.mc-throw input[type=range]::-moz-range-track{height:3px;background:var(--line);border-radius:2px}
.mc-throw input[type=range]::-moz-range-thumb{width:19px;height:19px;border:none;border-radius:50%;background:var(--machine);box-shadow:0 1px 3px rgba(0,0,0,.25)}
.mc-stops{position:relative;height:25px;margin-top:3px}
.mc-stop{position:absolute;top:0;left:calc(9.5px + (100% - 19px) * var(--i) / var(--n));transform:translateX(-50%);border:none;background:none;
          font-family:var(--serif);font-size:15px;color:var(--faint);cursor:pointer;padding:2px 0;white-space:nowrap;transition:color .15s}
.mc-stop:hover{color:var(--muted)}
.mc-stop.on{color:var(--ink)}
.mc-cap{text-align:center;font-size:12px;color:var(--muted);margin-top:2px}
.mc-now{color:var(--ink);font-weight:600}
.mc-cap-cube{color:color-mix(in srgb,var(--field-deep) 80%,#000);font-weight:600}
.mc-cap-sq{color:var(--field-deep);font-weight:600}
.mc-cap-x{color:var(--bag-deep);font-weight:600}
.mc-cap-one{color:var(--block-deep);font-weight:600}
.mc-tog{font-family:var(--serif);font-size:16px;color:var(--ink)}
.mc-switches{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;max-width:430px}
.mc-line-tog{font-size:14px;gap:7px}
.mc-sw{display:inline-block;width:16px;height:3px;border-radius:2px}
.mc-sw-b{background:var(--bag-deep)}
.mc-sw-c{background:var(--block)}
.mc-sw-q{background:var(--field-deep)}
.mc-sw-g{background:var(--gold)}
.mc-clear{margin-right:0}
/* the handles that don't make this function step back */
.mc-copies{opacity:.38;transition:opacity .25s}
.mc-copying .mc-copies{opacity:1}
.mc-copying .mc-parts{opacity:.38}
.mc-parts{transition:opacity .25s}

@media (prefers-reduced-motion:reduce){
  .mc-stop,.mc-throw input[type=range]::-webkit-slider-thumb,.mc-is{transition:none}
}
@media (max-width:640px){
  .mc-says{font-size:16px}
  .mc-is{font-size:16px;min-height:110px}
  .mc-curve{stroke-width:4}
  #mc-side{max-width:100%}
}

.mc-twotogs{display:flex;flex-direction:column;gap:10px;align-items:flex-start}

/* ── the workbench: every object, a row above everything ── */
.mc-bench{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 6px;margin:-4px 0 -6px}
.mc-bench a{padding:4px 11px 5px;border-radius:99px;color:var(--muted);text-decoration:none;font-family:var(--sans);font-size:12.5px;
            letter-spacing:.02em;transition:color .15s,background .15s}
.mc-bench a:hover{color:var(--ink);background:color-mix(in srgb,var(--line) 60%,transparent)}
.mc-bench a.on{color:var(--surface);background:var(--machine)}

/* ── a room in steps: its pages, as a strip above the stage ── */
.mc-strip{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:-2px 0 0}
.mc-strip a{display:flex;align-items:baseline;gap:7px;padding:7px 15px 8px;border:1px solid var(--line);border-radius:99px;
            background:var(--surface);color:var(--muted);text-decoration:none;font-family:var(--serif);font-size:15px;
            transition:border-color .15s,color .15s}
.mc-strip a b{font-family:var(--sans);font-size:11px;font-weight:600;color:var(--faint)}
.mc-strip a:hover{border-color:var(--faint);color:var(--ink)}
.mc-strip a.on{border-color:var(--machine);color:var(--ink)}
.mc-strip a.on b{color:var(--machine)}
/* (a room whose pieces are chosen: its buttons, its lines and its pieces' names, pieces/pieces.css) */
/* the calm room: what a line of the working says of a part of the figure, over it */
.mc-tag{fill:var(--ink);font-family:var(--serif);font-size:16px;paint-order:stroke;stroke:var(--surface);stroke-width:5px;stroke-linejoin:round}
.mc-tag-sum{font-weight:600;font-size:17px}
/* (each in its term's colour, as the equation and the words have it; plain, ink, but what's taken away) */
.mc-tag.mc-t-x{fill:var(--bag-deep)}
.mc-tag.mc-t-one{fill:var(--block-deep)}
.mc-tag.mc-t-neg{fill:var(--balloon-deep)}
/* a first difference lit: its arc in the table (its step on the graph: pieces/pieces.css) */
.mc-arc-on{stroke-width:2.2}

/* ── the pattern: each step's name under it, and, counted, how many ── */
.mc-pat-step{fill:var(--muted);font-family:var(--sans);font-size:11.5px;letter-spacing:.04em}
.mc-pat-count{fill:var(--ink);font-family:var(--serif);font-size:17px;font-weight:600}
.mc-pat-step.mc-pat-now{fill:var(--ink);font-weight:600}
/* a step lit: an edge round its figure and its column, a band behind its
   row; and what can be touched to light one */
.mc-lit{fill:none;stroke:var(--machine);stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.mc-lit-glow{fill:none;stroke:var(--machine-soft);stroke-width:7;stroke-linejoin:round;stroke-opacity:.16}
.mc-lit-row{fill:color-mix(in srgb,var(--machine-soft) 15%,transparent)}
/* what's new in a step, while it comes in */
/* the reading, kept for those who listen to the page, not shown */
.mc-veil{fill:var(--surface);stroke:none}
/* the pattern's cubes: one block, a fine line where each cube meets the next */
.mc-u.mc-block{stroke-width:.7;stroke-linejoin:round}
.mc-is.mc-hush{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.mc-new{fill:none;stroke:var(--machine);stroke-width:1.6;stroke-linecap:round;stroke-opacity:.7}
.mc-new-glow{fill:none;stroke:var(--machine-soft);stroke-width:6;stroke-linecap:round;stroke-opacity:.2}
.mc-hit{fill:transparent;cursor:pointer}
/* a step too far for blocks: named, and no more */
.mc-pat-far{fill:var(--ink);font-family:var(--serif);font-size:14px;font-weight:600}

/* ── the square completed (the quadratic's switch): a handle held while it's
   on, the switch while it can't be pressed, and the mirror, gold ── */
.mc-held{opacity:.38;transition:opacity .25s}
.mc-held input[type=range],.mc-held .mc-stop{cursor:default}
.sh-tog.mc-tog-off{opacity:.38}
.sh-tog.mc-tog-off .sh-switch{cursor:default}
.mc-mirror-gold{fill:none;stroke:var(--gold);stroke-width:2;stroke-dasharray:6 5;stroke-linecap:round}
/* its table's square and its ones, named in their colours */
.mc-th.mc-th-sq{fill:var(--field-deep)}
.mc-th.mc-th-one{fill:var(--block-deep)}
.mc-th.mc-th-neg{fill:var(--balloon-deep)}

/* ── the colours on a switch (the linear function's; Jae, 2026-10-20: "the
   blue gives it away too fast"). Off, every part is one plain grey, the
   machine's steel made light, with its edges, lines and rings the steel
   itself, and the terms and the names ink; taken away is still red, and
   the gold stays. Between the two, how plain it is (--mc-plain) eases from
   one to the other, and every colour with it, each the palette's own
   (--mc-o-…, kept by handles.js) mixed with the grey (Jae: "nice transition
   for the colors please when i turn it on... and off please"). The parts
   are drawn again every frame they move, so it's the colours that ease,
   not each part. Eased only once a hand turns it: a page opens as it is ── */
@property --mc-plain{syntax:'<percentage>';inherits:true;initial-value:0%}
:root.mc-hues{--mc-grey:#A4A7AF;
  --block:color-mix(in srgb,var(--mc-grey) var(--mc-plain),var(--mc-o-block));
  --bag:color-mix(in srgb,var(--mc-grey) var(--mc-plain),var(--mc-o-bag));
  --field:color-mix(in srgb,var(--mc-grey) var(--mc-plain),var(--mc-o-field));
  --block-deep:color-mix(in srgb,var(--machine-soft) var(--mc-plain),var(--mc-o-block-deep));
  --bag-deep:color-mix(in srgb,var(--machine-soft) var(--mc-plain),var(--mc-o-bag-deep));
  --field-deep:color-mix(in srgb,var(--machine-soft) var(--mc-plain),var(--mc-o-field-deep))}
:root.mc-hues.mc-plain{--mc-plain:100%}
:root.mc-hues.mc-ease{transition:--mc-plain 1s ease-in-out}
.mc-hues .mc-t-one{fill:color-mix(in srgb,var(--ink) var(--mc-plain),var(--mc-o-block-deep))}
.mc-hues .mc-t-x{fill:color-mix(in srgb,var(--ink) var(--mc-plain),var(--mc-o-bag-deep))}
.mc-hues .mc-t-sq{fill:color-mix(in srgb,var(--ink) var(--mc-plain),var(--mc-o-field-deep))}
.mc-hues .mc-t-cube{fill:color-mix(in srgb,var(--ink) var(--mc-plain),color-mix(in srgb,var(--mc-o-field-deep) 80%,#000))}
.mc-hues .mc-cap-one{color:color-mix(in srgb,var(--ink) var(--mc-plain),var(--mc-o-block-deep))}
.mc-hues .mc-cap-x{color:color-mix(in srgb,var(--ink) var(--mc-plain),var(--mc-o-bag-deep))}
.mc-hues .mc-cap-sq{color:color-mix(in srgb,var(--ink) var(--mc-plain),var(--mc-o-field-deep))}
.mc-hues .mc-cap-cube{color:color-mix(in srgb,var(--ink) var(--mc-plain),color-mix(in srgb,var(--mc-o-field-deep) 80%,#000))}
.mc-hues .mc-th.mc-th-one{fill:color-mix(in srgb,var(--muted) var(--mc-plain),var(--mc-o-block-deep))}
.mc-hues .mc-th.mc-th-sq{fill:color-mix(in srgb,var(--muted) var(--mc-plain),var(--mc-o-field-deep))}
@media (prefers-reduced-motion:reduce){:root.mc-hues.mc-ease{transition:none}}

/* ── a room in steps on one page (flow.js): its table a table, with rows
   and columns, its names' row shaded; everything a size to read (Jae,
   2026-10-20: "things should not be so small"); and a handle its step
   doesn't have folded away, coming back as its piece does ── */
.mc-flow .mc-td{font-size:18px}
.mc-flow .mc-th{font-size:15px}
.mc-flow .mc-pat-step{font-size:13px}
.mc-flow .mc-eq{font-size:23px}
.mc-tgrid{fill:none;stroke:color-mix(in srgb,var(--faint) 55%,var(--line));stroke-width:1.1}
.mc-thead{fill:color-mix(in srgb,var(--line) 45%,transparent)}
.mc-fl{transition:opacity .45s ease,max-width .45s ease}
.mc-fl.mc-fl-off{opacity:0;max-width:0!important;overflow:hidden;pointer-events:none}
/* its handles in two places (Jae, 2026-10-20: "it should all just be on
   one side.. or better organization"): the sliders that make the pattern
   on the left; what's shown on the right, one under another, each the same
   size, its words after its switch and its line's colour after its words;
   start over and reset under them, apart. Narrow, the column goes under */
.mc-panel{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:22px 56px;padding-top:4px}
.mc-panel-sliders{display:flex;flex-direction:column;align-items:center;gap:16px}
.mc-panel-sliders > .mc-row{padding-top:0}
/* (and no wider than there's room for: on a phone, or in a page's frame on
   one, each throw as wide as the column it's in, its steps closer together;
   2026-10-22, the Sage Tiles site's frame on a phone, 311 across, which the
   step's throw, 400, went past) */
.mc-panel-sliders,.mc-panel-sliders > .mc-row{max-width:100%}
.mc-panel-sliders .mc-throw{max-width:calc(100% - 24px)}
/* (a phone's width: the throws out nearer the edges, and their numbers the
   size the handles down a wide room's side have, so a step's number, −3
   beside −2, never runs into the next) */
@media (max-width:480px){
  .mc-panel-sliders > .mc-row{padding-left:0;padding-right:0}
  .mc-panel-sliders .mc-throw{margin:0 4px;max-width:calc(100% - 8px)}
  .mc-panel-sliders .mc-stop{font-size:13.5px}
}
.mc-panel-toggles{display:flex;flex-direction:column;align-items:flex-start;gap:14px;min-width:210px;padding-top:6px}
.mc-panel .sh-tog{font-family:var(--serif);font-size:16px;color:var(--ink);gap:10px}
.mc-panel .mc-sw{order:2}
.mc-panel-acts{display:flex;gap:18px;padding-top:4px}
.mc-panel-acts .mc-clear{padding:0}
.mc-change{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 5px;margin:-8px 0 -4px;border-radius:8px;transition:color .2s,background .2s}
.mc-change:hover,.mc-change.on{color:var(--ink);background:color-mix(in srgb,var(--line) 50%,transparent)}
.mc-chev{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s ease}
.mc-change.on .mc-chev{transform:rotate(180deg)}
/* what's under it: its height and its strength coming and going together */
.mc-drop{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .4s ease,opacity .3s ease;align-self:stretch}
.mc-drop.open{grid-template-rows:1fr;opacity:1}
.mc-drop-in{min-height:0;overflow:hidden}
.mc-drop-box{padding:12px 6px 8px;margin-top:2px;border-radius:12px;background:color-mix(in srgb,var(--line) 32%,transparent)}
.mc-drop-box > .mc-row{padding-top:0}
@media (prefers-reduced-motion:reduce){ .mc-drop,.mc-chev{transition:none} }
.mc-choice{display:flex;align-items:center;gap:5px;font-family:var(--serif)}
.mc-choice-name{font-size:16px;color:var(--muted);margin-right:6px}
.mc-choice-b{border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:99px;padding:3px 11px 4px;
             font-family:var(--serif);font-size:14.5px;cursor:pointer;transition:color .15s,border-color .15s,background .15s}
.mc-choice-b:hover{color:var(--ink);border-color:var(--faint)}
.mc-choice-b.on{color:var(--surface);background:var(--machine);border-color:var(--machine)}
.mc-panel-toggles .mc-fl{transition:opacity .45s ease,max-height .45s ease}
.mc-panel-toggles .mc-fl.mc-fl-off{max-height:0!important;max-width:none!important}
@media (prefers-reduced-motion:reduce){ .mc-fl,.mc-panel-toggles .mc-fl{transition:none} }

/* (a room as wide as the window, ROOM.wide: pieces/pieces.css) */

/* the calm room (ROOM.calm, flow.js): how much each grows, an arc under the
   table on its side; the equation a little bigger */
.mc-arc{fill:none;stroke:var(--faint);stroke-width:1.4;stroke-linecap:round}
.mc-calm .mc-eq{font-size:26px}
/* each square as it's counted: edged as it's touched, shaded until its figure's number leaves */
.mc-count-ring{fill:none;stroke:var(--machine);stroke-width:1.8}
.mc-count-tint{fill:var(--machine)}
.mc-count-n{fill:var(--ink);font-family:var(--serif);font-weight:600;pointer-events:none}
/* a count on its way, edged in the paper's white, so it passes cleanly over what's under it */
.mc-flyn{paint-order:stroke;stroke:var(--surface);stroke-width:5px;stroke-linejoin:round}