html, body {
margin: 0;
padding: 0;
}
.mk-lab {
--cream: #FAF7F2;
--ink: #1F2740;
--muted: #5F6878;
--sage: #7ED6A0;
--sky: #7DB8F6;
--pink: #F7A8C8;
--apricot: #FFB06B;
--line: #E8E2D9;
position: relative;
width: 100vw;
min-height: 100vh;
margin-left: calc(50% - 50vw);
background: var(--cream);
color: var(--ink);
font-family: 'Inter', Arial, sans-serif;
display: flex;
flex-direction: column;
overflow: hidden;
}
.mk-lab *,
.mk-lab *::before,
.mk-lab *::after {
box-sizing: border-box;
}
.mk-lab-header {
min-height: 76px;
padding: 14px clamp(18px, 4vw, 64px);
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
border-bottom: 1px solid var(--line);
background: var(--cream);
flex-shrink: 0;
}
.mk-lab-brand {
display: flex;
align-items: center;
gap: 11px;
color: var(--ink);
text-decoration: none;
font-size: 20px;
font-weight: 800;
letter-spacing: -0.7px;
white-space: nowrap;
}
.mk-lab-logo {
width: 38px;
height: 38px;
border-radius: 13px;
background: linear-gradient(135deg, var(--sage), var(--sky), var(--pink));
display: grid;
place-items: center;
color: var(--ink);
font-size: 20px;
font-weight: 900;
}
.mk-lab-nav {
display: flex;
align-items: center;
gap: clamp(12px, 2.2vw, 30px);
}
.mk-lab-nav a {
color: var(--muted);
text-decoration: none;
font-size: 13px;
font-weight: 650;
transition: color .2s ease;
}
.mk-lab-nav a:hover {
color: var(--ink);
}
.mk-lab-cta {
background: var(--ink);
color: white !important;
padding: 12px 18px;
border-radius: 100px;
white-space: nowrap;
}
.mk-lab-main {
flex: 1;
min-height: calc(100vh - 77px);
display: flex;
flex-direction: column;
}
.mk-lab-intro {
padding: 22px clamp(18px, 4vw, 64px) 18px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
flex-shrink: 0;
}
.mk-lab-eyebrow {
margin: 0 0 7px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 2px;
font-size: 10px;
font-weight: 800;
}
.mk-lab-intro h1 {
margin: 0;
font-family: 'Montserrat', Arial, sans-serif;
font-size: clamp(26px, 3vw, 42px);
line-height: 1.08;
letter-spacing: -1.8px;
color: var(--ink);
}
.mk-lab-intro h1 span {
color: #589A76;
}
.mk-lab-description {
max-width: 410px;
margin: 8px 0 0;
font-size: 13px;
line-height: 1.6;
color: var(--muted);
}
.mk-lab-tabs {
padding: 0 clamp(18px, 4vw, 64px) 14px;
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
.mk-lab-tab {
border: 1px solid var(--line);
background: rgba(255,255,255,.65);
color: var(--ink);
padding: 11px 17px;
border-radius: 100px;
font-size: 12px;
font-weight: 750;
cursor: pointer;
transition: .2s ease;
}
.mk-lab-tab.active {
background: var(--ink);
border-color: var(--ink);
color: #fff;
}
.mk-lab-tab:hover {
transform: translateY(-1px);
}
.mk-lab-viewer {
flex: 1;
min-height: 450px;
margin: 0 clamp(12px, 2vw, 28px) 20px;
border: 1px solid var(--line);
border-radius: 18px;
overflow: hidden;
background: #fff;
box-shadow: 0 12px 40px rgba(31,39,64,.08);
display: flex;
flex-direction: column;
}
.mk-lab-viewerbar {
min-height: 48px;
padding: 8px 14px 8px 18px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
border-bottom: 1px solid var(--line);
background: #fff;
flex-shrink: 0;
}
.mk-lab-projectname {
display: flex;
align-items: center;
gap: 10px;
font-size: 12px;
font-weight: 800;
color: var(--ink);
}
.mk-lab-dot {
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--sage);
}
.mk-lab-controls {
display: flex;
align-items: center;
gap: 8px;
}
.mk-lab-control {
border: 1px solid var(--line);
background: var(--cream);
color: var(--ink);
border-radius: 100px;
padding: 9px 13px;
cursor: pointer;
font-size: 11px;
font-weight: 750;
}
.mk-lab-control:hover {
background: #f0ebe2;
}
.mk-lab-framewrap {
position: relative;
flex: 1;
min-height: 400px;
background: #fff;
}
.mk-lab-frame {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
display: block;
background: #fff;
}
.mk-lab-panel {
display: none;
flex: 1;
min-height: 0;
}
.mk-lab-panel.active {
display: flex;
flex-direction: column;
}
.mk-lab-note {
padding: 0 24px 14px;
text-align: center;
font-size: 10px;
color: var(--muted);
}
@media (min-width: 1000px) {
.mk-lab-main {
min-height: calc(100vh - 77px);
}
.mk-lab-viewer {
flex: 1;
}
.mk-lab-framewrap {
min-height: 0;
}
}
@media (max-width: 760px) {
.mk-lab-header {
padding: 12px 16px;
flex-wrap: wrap;
}
.mk-lab-brand {
font-size: 18px;
}
.mk-lab-nav {
order: 3;
width: 100%;
overflow-x: auto;
padding: 3px 0 5px;
gap: 20px;
}
.mk-lab-nav a {
white-space: nowrap;
font-size: 12px;
}
.mk-lab-cta {
padding: 10px 13px;
}
.mk-lab-intro {
align-items: flex-start;
padding-top: 22px;
}
.mk-lab-description {
display: none;
}
.mk-lab-tabs {
padding-bottom: 12px;
}
.mk-lab-viewer {
margin: 0 8px 10px;
border-radius: 12px;
min-height: 55vh;
}
.mk-lab-framewrap {
min-height: 55vh;
}
.mk-lab-viewerbar {
padding: 9px 10px;
}
.mk-lab-control {
padding: 8px 10px;
}
.mk-lab-note {
padding-bottom: 10px;
}
}
@media (max-width: 420px) {
.mk-lab-intro h1 {
font-size: 27px;
}
.mk-lab-controls {
gap: 5px;
}
.mk-lab-control {
font-size: 10px;
padding: 8px;
}
}
Interactive project lab
Explore. Play. Experience.
Try our interactive projects directly below. Switch between experiences
and explore them right here.
Countdown Adventure
Some experiences may offer their own in-game controls. Use Fullscreen for a more immersive view.
(function () {
const root = document.querySelector('.mk-lab');
if (!root) return;
const tabs = root.querySelectorAll('[data-mk-target]');
const panels = root.querySelectorAll('[data-mk-panel]');
tabs.forEach(function (tab) {
tab.addEventListener('click', function () {
const target = tab.getAttribute('data-mk-target');
tabs.forEach(function (item) {
const active = item === tab;
item.classList.toggle('active', active);
item.setAttribute('aria-selected', active ? 'true' : 'false');
});
panels.forEach(function (panel) {
panel.classList.toggle(
'active',
panel.getAttribute('data-mk-panel') === target
);
});
});
});
const urls = {
countdown: 'https://makarioslimited.com/sfhg_games/countdownadventure/countdownweb.html',
stockd: 'https://makarioslimited.com/stockd-demo/'
};
root.querySelectorAll('[data-mk-reload]').forEach(function (button) {
button.addEventListener('click', function () {
const key = button.getAttribute('data-mk-reload');
const frame = root.querySelector('#mk-' + key + '-frame');
if (frame) frame.src = urls[key];
});
});
root.querySelectorAll('[data-mk-fullscreen]').forEach(function (button) {
button.addEventListener('click', function () {
const key = button.getAttribute('data-mk-fullscreen');
const wrap = root.querySelector('#mk-' + key + '-wrap');
const frame = root.querySelector('#mk-' + key + '-frame');
const target = frame || wrap;
if (target && target.requestFullscreen) {
target.requestFullscreen().catch(function () {
if (frame) window.open(frame.src, '_blank', 'noopener');
});
} else if (frame) {
window.open(frame.src, '_blank', 'noopener');
}
});
});
})();