/* Mime kit2 (21 Oct 2026): the window still you can point at (.mm-spots), the drawn flow (.mm-flow) and the face
	(.mm-face). Black and white only. Motion is opacity and transform written by mime-kit2.js through Motion.Loop, plus
	stroke-dashoffset where a lit box's dashes march. */

/* ---------- the window, a picture you can point at ---------- */
.mm-spots { display: grid; gap: 16px; margin: 6px 0 22px; container-type: inline-size; }
.mm-spots-fig { margin: 0; }
.mm-spots-pic { position: relative; display: block; border-radius: 14px; overflow: hidden; isolation: isolate; background: var(--soft);
	box-shadow: 0 1px 2px rgb(var(--shadow-rgb) / .08), 0 4px 14px rgb(var(--shadow-rgb) / .1); }
.mm-spots-pic img { border-radius: 0; box-shadow: none; }
.mm-boxes { position: absolute; inset: 0; visibility: hidden; }
.mm-spots.mm-on .mm-boxes { visibility: visible; }
.mm-box { --lit: 0; --press: 0; position: absolute; -webkit-tap-highlight-color: transparent; }
.mm-box-dim { position: absolute; inset: 5px; border-radius: 9px; box-shadow: 0 0 0 200vmax rgb(16 16 24 / .3); opacity: var(--lit); pointer-events: none; }
.mm-box-line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none;
	transform: scale(calc(1 - var(--press) * .015)); }
.mm-box-under, .mm-box-rect { x: 5px; y: 5px; width: calc(100% - 10px); height: calc(100% - 10px); rx: 9px; ry: 9px; fill: none; }
.mm-box-under { stroke: #fff; stroke-width: 5px; opacity: calc(.3 + .65 * var(--lit)); }
.mm-box-rect { stroke: #000; stroke-width: 2px; stroke-linecap: round; stroke-dasharray: 8 6; opacity: calc(.32 + .68 * var(--lit)); }
.mm-box-tag { position: absolute; right: 13px; bottom: 13px; opacity: var(--lit); pointer-events: none;
	transform: translateY(calc((1 - var(--lit)) * 5px)) scale(calc(1 - var(--press) * .04)); transform-origin: 100% 50%; }
.mm-box-tag::after { content: attr(data-name); display: block; padding: 5px 9px 4px; border-radius: 999px; background: #000; color: #fff;
	font: 700 12px/1.1 ui-monospace, "Cascadia Mono", Consolas, monospace; white-space: nowrap; }

.mm-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 10px; margin: 0; padding: 0; list-style: none; }
.mm-row { --lit: 0; --press: 0; position: relative; isolation: isolate; display: grid; grid-template-columns: auto minmax(0, 1fr);
	column-gap: 12px; row-gap: 4px; align-items: center; margin: 0; padding: 9px 12px 10px 9px; border-radius: 14px; outline: none;
	transform: scale(calc(1 - var(--press) * .02)); -webkit-tap-highlight-color: transparent; }
.mm-row::marker { content: none; }
.mm-row-glow { position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: #ececef; opacity: var(--lit); }
.mm-row-tile { grid-row: 1 / span 2; display: inline-flex; color: #000; }
.mm-pill { position: relative; justify-self: start; padding: 3px 10px; border: 1.5px solid #000; border-radius: 999px; }
.mm-pill::before { content: ""; position: absolute; inset: -1.5px; border-radius: inherit; background: #000; opacity: var(--lit); }
.mm-pill::after { content: attr(data-name); position: absolute; left: 0; top: 0; padding: 3px 10px; color: #fff; opacity: var(--lit); white-space: nowrap; }
.mm-rows .mm-pill code, .mm-pill::after { font: 700 13px/18px ui-monospace, "Cascadia Mono", Consolas, monospace; }
.mm-rows .mm-pill code { position: relative; display: block; color: #000; white-space: nowrap; }
.mm-pill::after { z-index: 1; }
.mm-row-text { font-size: 14.5px; line-height: 1.38; color: var(--ink); }
@container (max-width: 520px) {
	.mm-rows { grid-template-columns: minmax(0, 1fr); }
	.mm-box-tag { right: 9px; bottom: 9px; }
	.mm-box-tag::after { padding: 4px 7px 3px; font-size: 10px; }
}

/* ---------- Roblox places, drawn ---------- */
.mm-flow { position: relative; margin: 20px 0 30px; container-type: inline-size; }
.mm-flow-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.mm-step { display: grid; align-content: start; justify-items: start; gap: 12px; margin: 0; min-width: 0; }
.mm-step::marker { content: none; }
.mm-step-tile { display: inline-flex; color: #000; }
.mm-step-text { display: grid; gap: 5px; min-width: 0; }
.mm-step-label { font-weight: 800; font-size: 16px; line-height: 1.2; color: #000; }
.mm-step-cmd { font-size: 14px; line-height: 1.45; color: var(--muted); overflow-wrap: anywhere; }
.mm-flow .mm-step-cmd code { padding: 1px 6px 2px; border-radius: 7px; background: #efeff1; color: #000; font-size: 12.5px;
	-webkit-box-decoration-break: clone; box-decoration-break: clone; }
.mm-flow-line { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.mm-flow-line line { stroke: #000; stroke-width: 2.5px; stroke-linecap: round; }
@container (max-width: 600px) {
	.mm-flow-steps { grid-template-columns: minmax(0, 1fr); gap: 30px; }
	.mm-step { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 14px; }
	.mm-step-text { padding-top: 4px; }
}
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
	.mm-flow:not(.mm-done) .mm-step-tile, .mm-flow:not(.mm-done) .mm-step-text, .mm-flow:not(.mm-done) .mm-flow-line { opacity: 0; animation: mm-failsafe .8s ease 3.2s forwards; }
	.mm-flow.mm-armed .mm-step-tile, .mm-flow.mm-armed .mm-step-text, .mm-flow.mm-armed .mm-flow-line { animation: none; }
	.mm-flow.mm-armed .mm-flow-line { opacity: 1; }
}
@keyframes mm-failsafe { to { opacity: 1; } }

/* ---------- the face: the master logo inlined at whole-pixel sizes, so at rest it draws exactly like the file ---------- */
.doc svg.doc-lockup.mm-face { display: block; width: 300px; height: 74px; max-width: none; }
svg.st-mark.mm-face { width: 25px; height: 25px; }
@media (max-width: 560px) { .doc svg.doc-lockup.mm-face { width: 224px; height: 55px; } }