/* Magik « tech » skin (.mk-tech) and widgets: code tabs, terminal, task queue, scores, browser.
   Dark console look: visible grid frame, dotted strips, coloured code labels, square buttons. */

:root { --mk-fx: clamp(20px, 4vw, 44px); }
.mk-tech { --line: var(--mk-color-line, #272a30); --lime: var(--mk-color-signal, #a8ff53); --violet: var(--mk-color-violet, #8d7bff); --pink: #ff4fa3; --yellow: #ffc53d; --blue: #4cc2ff; }
.mk-tech .mk-todo { color: #ff6b61; }

/* ---------- framed sections ---------- */
.e-con.mk-frame { --padding-top: 0px; --padding-bottom: 0px; }
.e-con.mk-frame > .e-con-inner { border-left: 1px solid var(--line); border-right: 1px solid var(--line); border-top: 1px solid var(--line); padding: 104px var(--mk-fx); }
.e-con.mk-frame.mk-py-s > .e-con-inner { padding-top: 64px; padding-bottom: 64px; }
.e-con.mk-frame.mk-py-l > .e-con-inner { padding-top: 140px; padding-bottom: 140px; }
.e-con.mk-frame.mk-pb0 > .e-con-inner { padding-bottom: 0; }
.e-con.mk-frame.mk-pt0 > .e-con-inner { padding-top: 0; }
.e-con.mk-frame.mk-noline > .e-con-inner { border-top: 0; }
@media (max-width: 767px) { .e-con.mk-frame > .e-con-inner { padding-top: 64px; padding-bottom: 64px; } .e-con.mk-frame.mk-py-l > .e-con-inner { padding-top: 88px; padding-bottom: 88px; } }
/* Dotted strip between sections */
.e-con.mk-dots > .e-con-inner { min-height: 56px; padding: 0; background-image: radial-gradient(color-mix(in srgb, var(--mk-color-text) 18%, transparent) 1px, transparent 1.3px); background-size: 7px 7px; }
/* Flush content: touches the frame lines */
.mk-flush { margin-left: calc(-1 * var(--mk-fx)) !important; margin-right: calc(-1 * var(--mk-fx)) !important; width: auto !important; max-width: none !important; }

/* ---------- type ---------- */
.mk-tech .elementor-widget-heading h2.elementor-heading-title { font-size: clamp(28px, 3.1vw, 40px); }
.mk-tech .elementor-widget-heading h3.elementor-heading-title { font-size: clamp(19px, 1.6vw, 22px); line-height: 1.3; letter-spacing: -0.01em; }
.mk-tech .mk-lead .elementor-heading-title, .mk-lead p { font-family: var(--mk-font-heading); font-size: clamp(22px, 2.2vw, 30px) !important; line-height: 1.3; color: color-mix(in srgb, var(--mk-color-text) 78%, transparent); letter-spacing: -0.015em; font-weight: 500; }
.mk-lead strong, .mk-lead b { color: var(--mk-color-primary); font-weight: 500; }
.mk-clabel { font: 500 13px/1.4 var(--mk-font-label); color: var(--c, var(--lime)); margin: 0; letter-spacing: 0; }
.mk-tech .mk-muted-mono, .mk-muted-mono { font: 400 12px/1.5 var(--mk-font-label); color: var(--mk-color-muted); margin: 0; }
.mk-tech p { text-wrap: pretty; }
.mk-tech a:not(.elementor-button):not(.elementor-item):not(.mk-link-box):not(.mk-announce) { color: var(--mk-color-primary); text-decoration-color: color-mix(in srgb, var(--mk-color-primary) 30%, transparent); text-underline-offset: 3px; }

/* ---------- buttons ---------- */
.mk-tech .elementor-button { font-weight: 600; letter-spacing: -0.005em; }
.mk-tech .mk-btn-outline .elementor-button { background: var(--mk-color-surface) !important; border: 1px solid color-mix(in srgb, var(--mk-color-text) 22%, transparent) !important; color: var(--mk-color-primary) !important; }
.mk-tech .mk-btn-outline .elementor-button:hover { border-color: color-mix(in srgb, var(--mk-color-text) 45%, transparent) !important; }
.mk-tech .mk-btn-sm .elementor-button { padding: 8px 14px; font-size: 14px; }
.mk-link-box { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid color-mix(in srgb, var(--mk-color-text) 22%, transparent); border-radius: var(--mk-radius-button); color: var(--mk-color-text) !important; font-size: 14px; text-decoration: none !important; transition: border-color .2s, color .2s; }
.mk-link-box:hover { border-color: var(--lime); color: var(--mk-color-primary) !important; }

/* ---------- hero ---------- */
.e-con.mk-hero-tech { position: relative; overflow: hidden; isolation: isolate; }
.e-con.mk-hero-tech > .e-con-inner { position: relative; }
.mk-hero-tech::after { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
	background-image: repeating-linear-gradient(90deg, color-mix(in srgb, var(--mk-color-text) 5%, transparent) 0 1px, transparent 1px 96px);
	-webkit-mask-image: linear-gradient(180deg, #000, transparent 85%); mask-image: linear-gradient(180deg, #000, transparent 85%); }
.mk-persp-wrap { position: absolute !important; inset: 0; z-index: -1; pointer-events: none; width: 100% !important; overflow: hidden; margin: 0 !important; }
.mk-persp { position: absolute; left: 50%; top: -14%; width: 1500px; margin: 0; white-space: pre; font: 500 30px/1.75 var(--mk-font-label); color: color-mix(in srgb, var(--mk-color-text) 13%, transparent);
	transform: translateX(-58%) perspective(1100px) rotateX(50deg) rotateZ(-26deg);
	-webkit-mask-image: radial-gradient(56% 52% at 46% 42%, #000 25%, transparent 78%); mask-image: radial-gradient(56% 52% at 46% 42%, #000 25%, transparent 78%);
	animation: mk-persp 22s ease-in-out infinite alternate; }
.mk-persp .p-g { color: color-mix(in srgb, var(--lime) 34%, transparent); }
.mk-persp .p-v { color: color-mix(in srgb, var(--violet) 40%, transparent); }
.mk-persp .p-k { display: inline-block; width: .55em; height: .55em; border: 2px solid color-mix(in srgb, var(--lime) 40%, transparent); vertical-align: middle; margin-right: .6em; }
@keyframes mk-persp { from { translate: 0 0; } to { translate: -40px -70px; } }
@media (max-width: 767px) { .mk-persp { font-size: 20px; top: -4%; } }
@media (prefers-reduced-motion: reduce) { .mk-persp { animation: none; } }
.mk-announce { display: inline-flex; align-items: center; gap: 10px; padding: 5px 6px 5px 6px; border-radius: 999px; border: 1px solid var(--line); background: color-mix(in srgb, var(--mk-color-surface) 80%, transparent); color: var(--mk-color-primary) !important; font-size: 14px; text-decoration: none !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.mk-announce b { font: 600 10px/1 var(--mk-font-label); letter-spacing: .08em; padding: 5px 8px; border-radius: 999px; background: color-mix(in srgb, var(--violet) 26%, transparent); color: #c9c1ff; }
.mk-announce i { font-style: normal; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); color: var(--mk-color-muted); }
.mk-hero-tech .elementor-widget-text-editor:has(.mk-announce) { text-align: center; }
.mk-hero-tech .elementor-heading-title { text-wrap: balance; }
.mk-tech .mk-centered { text-align: center; }
.mk-tech .e-con.mk-btn-row-center { justify-content: center; }
@media (max-width: 767px) { .mk-tech .e-con.mk-btn-row-center { align-items: center; } .mk-btn-row-center > .elementor-widget-button { width: auto; } }

/* ---------- grid cells ---------- */
.e-con.mk-cells { --gap: 0px; border-top: 1px solid var(--line); }
.e-con.mk-cells > .e-con { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); padding: 30px var(--mk-fx) 30px 28px !important; transition: background-color .3s; }
.e-con.mk-cells > .e-con:hover { background: color-mix(in srgb, var(--mk-color-text) 3%, transparent); }
.e-con.mk-cells.mk-cols-3 > .e-con:nth-child(3n), .e-con.mk-cells.mk-cols-2 > .e-con:nth-child(2n), .e-con.mk-cells.mk-cols-6 > .e-con:nth-child(6n), .e-con.mk-cells.mk-cols-4 > .e-con:nth-child(4n) { border-right: 0; }
.e-con.mk-cells.mk-nobottom > .e-con { border-bottom: 0; }
@media (max-width: 767px) {
	.e-con.mk-cells > .e-con { border-right: 0 !important; padding: 24px 20px !important; }
	.e-con.mk-cells.mk-cols-6 { flex-direction: row !important; }
	.e-con.mk-cells.mk-cols-6 > .e-con { width: 50% !important; border-right: 1px solid var(--line) !important; }
	.e-con.mk-cells.mk-cols-6 > .e-con:nth-child(2n) { border-right: 0 !important; }
}
.mk-cells .elementor-icon-box-wrapper { text-align: left !important; }
.mk-cells .elementor-icon-box-icon { margin-bottom: 14px !important; }
.mk-cells .elementor-icon { font-size: 20px !important; }
.mk-cell-logo { font: 600 19px/1 var(--mk-font-heading); color: var(--mk-color-muted); text-align: center; margin: 0; letter-spacing: -0.01em; transition: color .3s; }
.mk-cells > .e-con:hover .mk-cell-logo { color: var(--mk-color-primary); }
.e-con.mk-cells.mk-logos > .e-con { justify-content: center; min-height: 104px; }
.mk-cell-media .elementor-widget-image img { border-radius: var(--mk-radius-card); border: 1px solid var(--line); }

/* ---------- cards, chips, quotes ---------- */
.mk-tech .mk-card { box-shadow: none; border: 1px solid var(--line); }
.mk-tech .mk-chips { justify-content: flex-start; gap: 8px; }
.mk-tech .mk-chip { margin: 0; padding: 7px 12px; border-radius: var(--mk-radius-button); background: var(--mk-color-surface); border: 1px solid var(--line); color: var(--mk-color-text); font: 500 13px/1 var(--mk-font-label); }
.mk-tech .mk-chip-marquee .mk-chip { margin-right: 10px; }
.mk-tech .mk-quote { font-family: var(--mk-font-heading); font-size: 19px; line-height: 1.5; color: var(--mk-color-primary); }
.mk-who { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 14px; color: var(--mk-color-muted); }
.mk-who b { display: block; color: var(--mk-color-primary); font-weight: 600; }
.mk-avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none; font: 600 14px/1 var(--mk-font-heading); color: var(--mk-color-dark); background: var(--c, var(--lime)); }
.mk-tag-mini { display: inline-block; font: 500 11px/1 var(--mk-font-label); letter-spacing: .06em; text-transform: uppercase; padding: 4px 7px; border-radius: 3px; border: 1px solid currentColor; color: var(--c, var(--lime)); }

/* ---------- changelog ---------- */
.e-con.mk-log { border-top: 1px solid var(--line); }
.e-con.mk-log-row { border-bottom: 1px solid var(--line); padding: 26px 0 !important; }
.mk-log-date { font: 400 13px/1.6 var(--mk-font-label); color: var(--mk-color-muted); margin: 0; }

/* ---------- pricing ---------- */
.e-con.mk-offer { border: 1px solid var(--line); border-radius: var(--mk-radius-card); background: var(--mk-color-surface); }
.e-con.mk-offer.mk-offer-hl { border-color: color-mix(in srgb, var(--lime) 60%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--lime) 30%, transparent), 0 20px 60px -30px color-mix(in srgb, var(--lime) 50%, transparent); }
.mk-price .elementor-heading-title { font-size: clamp(24px, 2.4vw, 30px) !important; }

/* ---------- forms, accordion, popup ---------- */
.mk-tech .elementor-field-group .elementor-field-label { color: var(--mk-color-text); font-size: 14px; }
.mk-tech .elementor-field-group .elementor-field:not(.elementor-select-wrapper), .mk-tech .elementor-field-group select, .mk-tech .elementor-field-group textarea, .mk-tech .elementor-field-group input:not([type=checkbox]) {
	background-color: var(--mk-color-dark) !important; border: 1px solid var(--line) !important; color: var(--mk-color-primary) !important; }
.mk-tech .elementor-field-group .elementor-field:focus, .mk-tech .elementor-field-group textarea:focus { border-color: var(--lime) !important; outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--lime) 18%, transparent); }
.mk-tech .elementor-field-type-acceptance label, .mk-tech .elementor-field-option label { color: var(--mk-color-muted); font-size: 13px; }
.mk-tech .elementor-select-wrapper::before { color: var(--mk-color-muted); }
.mk-tech .mk-form-note, .mk-tech .mk-form-note a { color: var(--mk-color-muted); }
.mk-tech .elementor-accordion .elementor-accordion-item { border-color: var(--line) !important; }
.mk-tech .elementor-accordion .elementor-tab-title { padding: 20px 22px; }
.mk-tech .elementor-accordion .elementor-tab-content { border-color: var(--line) !important; padding: 0 22px 22px; }
.mk-tech .elementor-accordion .elementor-accordion-icon { color: var(--lime); }
.elementor-popup-modal .dialog-widget-content:has(.mk-tech) { border: 1px solid var(--mk-color-line, #272a30); }
.elementor-popup-modal .dialog-close-button i, .elementor-popup-modal .dialog-close-button svg { color: var(--mk-color-text); fill: var(--mk-color-text); }

/* ---------- header and footer ---------- */
.e-con.mk-tech-header { border-bottom: 1px solid var(--line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.elementor-location-header.mk-scrolled > .e-con.mk-tech-header { background-color: color-mix(in srgb, var(--mk-color-background) 88%, transparent) !important; }
.elementor-location-header:has(.mk-tech-header) { box-shadow: none !important; }
.mk-logo { display: inline-flex; align-items: center; gap: 10px; margin: 0; font: 700 19px/1 var(--mk-font-heading); letter-spacing: -0.02em; color: var(--mk-color-primary); white-space: nowrap; }
.mk-logo a { color: inherit !important; text-decoration: none !important; display: inline-flex; align-items: center; gap: 10px; }
.mk-logo svg { width: 26px; height: 26px; color: var(--lime); fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.mk-logo em { font-style: normal; color: var(--violet); }
.mk-tech .elementor-nav-menu--main .elementor-item { font-size: 14.5px; font-weight: 500; padding-left: 12px !important; padding-right: 12px !important; }
.mk-status { display: inline-flex; align-items: center; gap: 10px; padding: 7px 12px; border: 1px solid var(--line); border-radius: var(--mk-radius-button); font: 400 12px/1 var(--mk-font-label); color: var(--mk-color-text); margin: 0; }
.mk-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 0 color-mix(in srgb, var(--lime) 60%, transparent); animation: mk-pulse 2s infinite; }
@keyframes mk-pulse { 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.mk-foot-title { font: 600 14px/1 var(--mk-font-heading); color: var(--mk-color-primary); margin: 0 0 4px; }
.mk-foot-links { line-height: 2.1; font-size: 14px; margin: 0; }
.mk-foot-links a { color: var(--mk-color-muted) !important; text-decoration: none !important; }
.mk-foot-links a:hover { color: var(--mk-color-primary) !important; }
.mk-tech .mk-form-dark .elementor-field-type-acceptance label { color: var(--mk-color-muted) !important; }

/* ---------- icons ---------- */
.mk-ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ================================================================== widgets */

/* Code tabs */
.mk-ctabs { border-top: 1px solid var(--line, #272a30); }
.mk-ctabs-bar { display: flex; gap: 6px; padding: 10px var(--mk-fx); overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line, #272a30); }
.mk-ctabs-bar::-webkit-scrollbar { display: none; }
.mk-ctab { flex: none; display: inline-flex; align-items: center; gap: 9px; padding: 8px 13px; border-radius: var(--mk-radius-button, 4px); border: 1px solid transparent; background: transparent; color: var(--mk-color-text); font: 500 15px/1 var(--mk-font-body); cursor: pointer; transition: background-color .2s, border-color .2s; }
.mk-ctab:hover { background: color-mix(in srgb, var(--mk-color-text) 5%, transparent); }
.mk-ctab.is-on { background: color-mix(in srgb, var(--mk-color-text) 8%, transparent); border-color: color-mix(in srgb, var(--mk-color-text) 10%, transparent); color: var(--mk-color-primary); }
.mk-ctab:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
.mk-cpanel { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.mk-cpanel[hidden] { display: none; }
.mk-code { margin: 0; padding: 26px 24px 26px var(--mk-fx); background: transparent; border: 0; border-right: 1px solid var(--line, #272a30); border-radius: 0; font: 400 13.5px/1.7 var(--mk-font-label); color: #cfd2d8; overflow: auto; max-height: 480px; white-space: pre; tab-size: 2; }
.mk-code code { font: inherit; background: none; padding: 0; color: inherit; }
.mk-cl { display: block; }
.mk-cl i { display: inline-block; width: 2.4em; color: #4b505a; font-style: normal; user-select: none; }
.mk-code .c-tag { color: #a99cff; }
.mk-code .c-attr { color: #a8ff53; }
.mk-code .c-str { color: #f4d27a; }
.mk-code .c-com { color: #6b717c; font-style: italic; }
.mk-cpanel.is-anim .mk-cl { animation: mk-cl .45s both cubic-bezier(.2, .8, .2, 1); animation-delay: calc(var(--i, 0) * 28ms); }
@keyframes mk-cl { from { opacity: 0; transform: translateX(-8px); } }
.mk-cpanel-text { padding: 30px var(--mk-fx) 30px 34px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.mk-cpanel-text p { margin: 0; font: 500 clamp(21px, 2vw, 28px)/1.32 var(--mk-font-heading); letter-spacing: -0.015em; color: color-mix(in srgb, var(--mk-color-text) 80%, transparent); }
.mk-cpanel-text .mk-link-box { align-self: flex-end; }
.mk-cpanel.is-anim .mk-cpanel-text p { animation: mk-cl .6s .1s both; }
@media (max-width: 900px) {
	.mk-cpanel { grid-template-columns: 1fr; }
	.mk-code { border-right: 0; border-bottom: 1px solid var(--line, #272a30); max-height: 300px; font-size: 12.5px; padding-left: 20px; }
	.mk-cpanel-text { padding: 24px 20px; }
	.mk-cpanel-text .mk-link-box { align-self: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .mk-cpanel.is-anim .mk-cl, .mk-cpanel.is-anim .mk-cpanel-text p { animation: none; } }

/* Terminal */
.mk-term { border: 1px solid var(--line, #272a30); border-radius: var(--mk-radius-card, 8px); background: #0b0c0f; overflow: hidden; box-shadow: 0 30px 80px -40px rgba(0, 0, 0, .8); text-align: left; }
.mk-term-bar { display: flex; align-items: center; gap: 7px; padding: 12px 14px; border-bottom: 1px solid var(--line, #272a30); background: color-mix(in srgb, var(--mk-color-surface) 70%, #0b0c0f); }
.mk-term-bar i { width: 11px; height: 11px; border-radius: 50%; background: #2c2f36; }
.mk-term-bar span { flex: 1; text-align: center; margin-right: 50px; font: 400 12px/1 var(--mk-font-label); color: var(--mk-color-muted); }
.mk-term-body { padding: 18px 22px 22px; font: 400 13.5px/1.85 var(--mk-font-label); }
.mk-tl { display: flex; gap: 12px; margin: 0; color: #c9ccd2; opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .25s, transform .25s, visibility 0s .25s; }
.mk-tl.is-shown { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .25s; }
.mk-tl b { flex: none; width: 1.1em; font-weight: 400; text-align: center; }
.mk-tl span { min-width: 0; overflow-wrap: anywhere; }
.mk-tl-cmd { color: var(--mk-color-primary); }
.mk-tl-cmd b::before { content: "$"; color: var(--lime, #a8ff53); }
.mk-tl-out { color: #6b717c; }
.mk-tl-warn b::before { content: "!"; color: var(--yellow, #ffc53d); }
.mk-tl-task b::before { content: ""; display: inline-block; width: 10px; height: 10px; border: 2px solid var(--violet, #8d7bff); border-right-color: transparent; border-radius: 50%; animation: mk-spin .7s linear infinite; vertical-align: -1px; }
.mk-tl-task.is-ok b::before { content: "✓"; width: auto; height: auto; border: 0; border-radius: 0; animation: none; color: var(--lime, #a8ff53); vertical-align: 0; }
.mk-tl-done { color: var(--lime, #a8ff53); }
.mk-tl-done b::before { content: "●"; animation: mk-blink 1.4s ease-in-out infinite; }
.mk-caret { display: inline-block; width: 8px; height: 16px; background: var(--lime, #a8ff53); vertical-align: -3px; animation: mk-blink 1s steps(1) infinite; }
@keyframes mk-spin { to { transform: rotate(360deg); } }
@keyframes mk-blink { 50% { opacity: 0; } }
@media (max-width: 767px) { .mk-term-body { font-size: 12px; padding: 14px 14px 18px; } .mk-tl { gap: 8px; } }

/* Task queue */
.mk-queue { border: 1px solid var(--line, #272a30); border-radius: var(--mk-radius-card, 8px); background: var(--mk-color-surface); overflow: hidden; text-align: left; }
.mk-queue-head { display: flex; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line, #272a30); font-size: 14px; color: var(--mk-color-primary); }
.mk-queue-head span + span { color: var(--mk-color-muted); }
.mk-queue ul { list-style: none; margin: 0; padding: 0; }
.mk-queue li { display: grid; grid-template-columns: minmax(0, 1fr) 118px 70px; align-items: center; gap: 12px; padding: 13px 18px; border-bottom: 1px solid color-mix(in srgb, var(--line, #272a30) 70%, transparent); }
.mk-queue li:last-child { border-bottom: 0; }
.mk-queue code { font: 400 13.5px/1.2 var(--mk-font-label); color: var(--mk-color-primary); background: none; padding: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-st { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; }
.mk-st em { display: none; font-style: normal; }
.mk-st i { width: 14px; height: 14px; border-radius: 50%; flex: none; position: relative; }
.mk-queue li[data-st="done"] .s-done, .mk-queue li[data-st="run"] .s-run, .mk-queue li[data-st="wait"] .s-wait { display: inline; }
.mk-queue li[data-st="done"] .mk-st { color: var(--lime, #a8ff53); }
.mk-queue li[data-st="done"] .mk-st i { border: 1.5px solid currentColor; }
.mk-queue li[data-st="done"] .mk-st i::after { content: ""; position: absolute; left: 4px; top: 1.5px; width: 3px; height: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.mk-queue li[data-st="run"] .mk-st { color: #a99cff; }
.mk-queue li[data-st="run"] .mk-st i { border: 2px solid currentColor; border-right-color: transparent; animation: mk-spin .8s linear infinite; }
.mk-queue li[data-st="wait"] .mk-st { color: var(--mk-color-muted); }
.mk-queue li[data-st="wait"] .mk-st i { background: repeating-linear-gradient(180deg, currentColor 0 2px, transparent 2px 4px); border-radius: 2px; width: 12px; height: 10px; }
.mk-env { justify-self: end; font: 500 11px/1 var(--mk-font-label); letter-spacing: .06em; padding: 4px 6px; border-radius: 3px; border: 1px solid currentColor; }
.mk-env-prod { color: var(--lime, #a8ff53); }
.mk-env-staging { color: var(--yellow, #ffc53d); }
.mk-env-dev { color: var(--pink, #ff4fa3); }
@media (max-width: 480px) { .mk-queue li { grid-template-columns: minmax(0, 1fr) auto; } .mk-env { display: none; } }

/* Scores */
.mk-scores-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px 30px; }
.mk-score { display: grid; justify-items: center; width: 116px; text-align: center; color: var(--lime, #a8ff53); }
.mk-score.is-mid { color: var(--yellow, #ffc53d); }
.mk-score.is-low { color: #ff6b61; }
.mk-score svg { grid-area: 1 / 1; width: 96px; height: 96px; transform: rotate(-90deg); }
.mk-score circle { fill: none; stroke-width: 6; }
.mk-score .trk { stroke: color-mix(in srgb, var(--mk-color-text) 9%, transparent); }
.mk-score .val { stroke: currentColor; stroke-linecap: round; stroke-dasharray: 100; fill: color-mix(in srgb, currentColor 8%, transparent); }
.mk-score b { grid-area: 1 / 1; align-self: center; font: 600 28px/1 var(--mk-font-heading); letter-spacing: -0.03em; color: currentColor; }
.mk-score span { margin-top: 12px; font-size: 14px; line-height: 1.3; color: var(--mk-color-text); }
.mk-score small { margin-top: 4px; font: 400 11.5px/1 var(--mk-font-label); color: var(--mk-color-muted); }
.mk-scores-cap { margin: 22px 0 0; text-align: center; font: 400 12px/1.5 var(--mk-font-label); color: var(--mk-color-muted); }
@media (max-width: 480px) { .mk-score { width: 42%; } }

/* Browser mockup */
.mk-browser { border: 1px solid var(--line, #272a30); border-radius: var(--mk-radius-card, 8px); background: var(--mk-color-surface); overflow: hidden; text-align: left; }
.mk-browser-bar { display: flex; align-items: center; gap: 7px; padding: 10px 12px; border-bottom: 1px solid var(--line, #272a30); }
.mk-browser-bar i { width: 10px; height: 10px; border-radius: 50%; background: #2c2f36; }
.mk-url { margin-left: 10px; flex: 0 1 62%; padding: 5px 10px; border-radius: 4px; background: var(--mk-color-dark); font: 400 11.5px/1 var(--mk-font-label); color: var(--mk-color-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-browser-page { padding: 20px; background: color-mix(in srgb, var(--mk-color-surface) 60%, var(--mk-color-dark)); display: grid; gap: 22px; }
.wf-nav { display: flex; align-items: center; gap: 10px; }
.wf-nav b { width: 18px; height: 18px; border-radius: 4px; background: var(--lime, #a8ff53); margin-right: 10px; }
.wf-nav span { width: 34px; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--mk-color-text) 18%, transparent); }
.wf-nav em { margin-left: auto; width: 54px; height: 18px; border-radius: 4px; background: color-mix(in srgb, var(--lime, #a8ff53) 80%, transparent); }
.wf-hero { display: grid; gap: 9px; }
.wf-title { margin: 0 0 4px; font: 600 20px/1.2 var(--mk-font-heading); color: var(--mk-color-primary); letter-spacing: -0.02em; }
.wf-line { height: 7px; border-radius: 4px; background: color-mix(in srgb, var(--mk-color-text) 16%, transparent); width: 86%; }
.wf-line.short { width: 58%; }
.wf-btn { justify-self: start; margin-top: 8px; padding: 7px 12px; border-radius: 4px; background: var(--lime, #a8ff53); color: #121317; font: 600 12px/1 var(--mk-font-body); }
.wf-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.wf-cards span { height: 64px; border-radius: 6px; border: 1px solid var(--line, #272a30); background: color-mix(in srgb, var(--mk-color-text) 5%, transparent); }
.mk-js .mk-browser:not(.is-in) .mk-browser-page > *, .mk-js .mk-browser:not(.is-in) .wf-hero > *, .mk-js .mk-browser:not(.is-in) .wf-cards > * { opacity: 0; }
.mk-browser.is-in .mk-browser-page > *, .mk-browser.is-in .wf-hero > *, .mk-browser.is-in .wf-cards > * { animation: mk-wf .6s both cubic-bezier(.2, .8, .2, 1); }
.mk-browser.is-in .wf-hero > :nth-child(2) { animation-delay: .25s; } .mk-browser.is-in .wf-hero > :nth-child(3) { animation-delay: .35s; } .mk-browser.is-in .wf-hero > :nth-child(4) { animation-delay: .5s; }
.mk-browser.is-in .wf-cards { animation-delay: .5s; } .mk-browser.is-in .wf-cards > :nth-child(1) { animation-delay: .6s; } .mk-browser.is-in .wf-cards > :nth-child(2) { animation-delay: .7s; } .mk-browser.is-in .wf-cards > :nth-child(3) { animation-delay: .8s; }
@keyframes mk-wf { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .mk-browser.is-in * { animation: none !important; } }

/* Visual panel (mini UI inside a cell) */
.mk-visual { padding: 28px; border: 1px solid var(--line); border-radius: var(--mk-radius-card); background-image: radial-gradient(color-mix(in srgb, var(--mk-color-text) 9%, transparent) 1px, transparent 1.3px); background-size: 8px 8px; }

/* fixes: kit button styles must not reach the tabs; narrow cells */
.mk-ctabs .mk-ctab, .mk-ctabs .mk-ctab:hover, .mk-ctabs .mk-ctab:focus { background-color: transparent !important; color: var(--mk-color-text) !important; border: 1px solid transparent !important; box-shadow: none !important; padding: 8px 13px !important; font: 500 15px/1 var(--mk-font-body) !important; border-radius: var(--mk-radius-button, 4px) !important; }
.mk-ctabs .mk-ctab:hover { background-color: color-mix(in srgb, var(--mk-color-text) 5%, transparent) !important; }
.mk-ctabs .mk-ctab.is-on { background-color: color-mix(in srgb, var(--mk-color-text) 8%, transparent) !important; border-color: color-mix(in srgb, var(--mk-color-text) 10%, transparent) !important; color: var(--mk-color-primary) !important; }
.mk-cells .elementor-icon-box-title { font-size: 20px !important; line-height: 1.3 !important; margin: 0 0 8px !important; }
.mk-cells .elementor-icon-box-title, .mk-cells .elementor-icon-box-title a { color: var(--mk-color-primary); }
.mk-cells .elementor-icon-box-icon { margin-bottom: 18px !important; }
.mk-cells .mk-score { width: 92px; }
.mk-cells .mk-score svg { width: 76px; height: 76px; }
.mk-cells .mk-score b { font-size: 22px; }
.mk-cells .mk-scores-row { gap: 16px 14px; }
.mk-cells .mk-queue li { grid-template-columns: minmax(0, 1fr) 100px 62px; gap: 8px; padding: 12px 14px; }
.mk-cells .mk-queue code { font-size: 12.5px; }
.mk-cells .mk-st { font-size: 12.5px; }
.mk-svc-cells .elementor-widget-magik-browser, .mk-svc-cells .elementor-widget-magik-queue, .mk-svc-cells .elementor-widget-magik-scores { margin-top: 6px; margin-bottom: 6px; }
.mk-svc-cells > .e-con > .elementor-widget-text-editor:last-child { margin-top: auto; }
.mk-cta-tech > .e-con-inner { background: radial-gradient(60% 70% at 50% 115%, color-mix(in srgb, var(--lime) 14%, transparent), transparent 70%); }
.mk-tech .elementor-form .elementor-button[type="submit"] { color: var(--mk-color-dark) !important; }
.mk-url::before { content: ""; display: inline-block; width: 7px; height: 8px; margin-right: 7px; border: 1.5px solid currentColor; border-radius: 2px; vertical-align: -1px; }
.mk-visual .mk-scores-row { gap: 22px 14px; }
.mk-visual .mk-score { width: 108px; }
/* never let code widen the page */
.elementor-widget-magik-code-tabs, .elementor-widget-magik-terminal, .elementor-widget-magik-queue, .mk-ctabs, .mk-cpanel, .mk-ctabs-panels { min-width: 0; max-width: 100%; }
.mk-tech .e-con { min-width: 0; }
@media (max-width: 900px) { .mk-cpanel { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) { .e-con.mk-frame > .e-con-inner { max-width: 100vw; overflow-x: clip; } }
.e-con > .mk-flush, .e-con-inner > .mk-flush { width: calc(100% + 2 * var(--mk-fx)) !important; align-self: stretch !important; flex: none !important; }