montekidz-demo{display:block;width:100%;max-width:1100px;margin-inline:auto}
.mk-demo{--mk-ink:#453a2f;--mk-muted:#716858;--mk-sage:#6a8066;--mk-paper:#f6f0e3;--mk-line:#d8d0bb;color:var(--mk-ink);font-family:inherit}
.mk-demo *{box-sizing:border-box}
.mk-demo button{font-family:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.mk-demo button:focus-visible{outline:3px solid #3b614d;outline-offset:6px}
.mk-demo button:disabled{cursor:default}
.mk-demo svg{display:block;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.mk-demo-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 4px 20px}
.mk-demo-invitation{font-size:12px;color:var(--mk-muted)}
.mk-demo-tools{display:flex;gap:18px}
.mk-demo-tool{border:0;background:none;display:inline-flex;gap:7px;align-items:center;padding:8px 0;font-size:12px;font-weight:600}
.mk-demo-tool svg{width:16px;height:16px}
.mk-demo-tool:disabled{opacity:.35}
.mk-demo-board{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 310px;align-items:center;min-height:540px;gap:34px;padding:42px 54px 34px;overflow:hidden;isolation:isolate;background:#e9e7d9;border-radius:7px}
.mk-demo-board:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 22% 7%,#f6f3e9 0,transparent 63%),linear-gradient(155deg,transparent 58%,#d8dfcf);z-index:-1;pointer-events:none}
.mk-demo-table{min-width:0;align-self:center;padding:7px 0 26px}
.mk-demo-kicker{display:block;color:#6a785d;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.18em;margin-bottom:16px}
.mk-demo-prompt h3{font-family:var(--font-display,"Playfair Display",Georgia,serif);font-size:clamp(35px,4.4vw,55px);font-weight:400;line-height:1.03;letter-spacing:-.045em;margin:0 0 15px}
.mk-demo-prompt h3 em{color:#60775e;font-weight:inherit}
.mk-demo-instruction{font-size:13px;line-height:1.6;color:var(--mk-muted);margin:0;min-height:42px}
.mk-demo-cards{display:flex;align-items:center;justify-content:center;padding:38px 8px 25px;gap:0;position:relative;isolation:isolate}
.mk-demo-card{display:block;position:relative;padding:8px;background:#fffefa;border:1px solid #e3dece;border-radius:9px;width:34%;max-width:173px;aspect-ratio:1;box-shadow:0 4px 1px #d6d2c3,0 8px 1px #e6e2d6,0 19px 28px #51492e24;transition:transform 220ms var(--ease-out,cubic-bezier(.23,1,.32,1)),opacity 220ms var(--ease-out,cubic-bezier(.23,1,.32,1));flex-shrink:0}
.mk-demo-card img{display:block;width:100%;height:100%;object-fit:contain;border-radius:3px;pointer-events:none;user-select:none}
.mk-demo-card-elephant{transform:translateY(11px) rotate(-9deg);z-index:1}
.mk-demo-card-lion{transform:rotate(2deg);z-index:3;margin-left:-4px}
.mk-demo-card-girafe{transform:translateY(11px) rotate(10deg);z-index:2;margin-left:-4px}
.mk-demo-card:active{transform:translateY(2px) rotate(0) scale(.97)}
.mk-demo-card[aria-disabled="true"]{cursor:default}
.mk-demo[data-phase="scan"] .mk-demo-card[aria-pressed="true"]{opacity:.3}
.mk-demo[data-phase="learn"] .mk-demo-card:not([aria-pressed="true"]){opacity:.55}
.mk-demo-table-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:40px;padding:6px 12px 0}
.mk-demo-hint{font-size:11px;line-height:1.5;color:var(--mk-muted)}
.mk-demo-arrow{display:block;width:80px;color:#829072;transform:rotate(-8deg)}
.mk-demo-arrow svg{width:100%;stroke-width:1.1}
.mk-demo-listening{display:flex;align-items:center;gap:15px;margin:20px 0 -66px;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity 240ms var(--ease-out,cubic-bezier(.23,1,.32,1)),transform 240ms var(--ease-out,cubic-bezier(.23,1,.32,1))}
.mk-demo[data-phase="learn"] .mk-demo-listening{opacity:1;visibility:visible;transform:translateY(0)}
.mk-demo-listen{border:0;border-radius:50px;padding:13px 18px;background:#53694e!important;color:#fffaf0!important;display:inline-flex;align-items:center;justify-content:center;gap:10px;font-size:12px;font-weight:600;white-space:nowrap;transition:transform 140ms ease}
.mk-demo-listen svg{width:18px;height:18px}
.mk-demo-listen:active{transform:scale(.97)}
.mk-demo-listening p{font-size:10px;line-height:1.6;color:var(--mk-muted);margin:0}
.mk-demo-device-area{display:flex;flex-direction:column;align-items:center;gap:20px;position:relative}
.mk-demo-phone{position:relative;width:242px;height:464px;border-radius:36px;padding:7px;background:linear-gradient(110deg,#5e5a4f,#242924 16%,#33362d 85%,#797768);box-shadow:1px 0 0 1px #77766b,0 4px 0 1px #262c24,13px 24px 40px #393f3029,0 3px 6px #30362833;transform:rotate(4deg)}
.mk-demo-phone:before{content:"";position:absolute;left:-3px;top:88px;height:30px;width:3px;border-radius:2px;background:#585e51;box-shadow:0 39px 0 #585e51}
.mk-demo-phone-screen{height:100%;width:100%;position:relative;isolation:isolate;border-radius:29px;background:#f7f0df;overflow:hidden;font-family:Arial,sans-serif}
.mk-demo-phone-status{position:absolute;inset:10px 18px auto;display:flex;justify-content:space-between;font-size:8px;font-weight:700;line-height:12px;color:#332f28;z-index:8}
.mk-demo-phone-island{position:absolute;left:50%;top:7px;transform:translateX(-50%);width:76px;height:18px;border-radius:14px;background:#20251f;z-index:9}
.mk-demo-phone-island:after{content:"";width:5px;height:5px;border-radius:50%;background:#303a3b;position:absolute;top:6px;right:9px;box-shadow:inset 0 0 1px 1px #101a16}
.mk-demo-phone-homebar{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);height:3px;width:79px;background:#20251f80;border-radius:3px;z-index:9}
.mk-demo-home,.mk-demo-scanner,.mk-demo-result{position:absolute;inset:0;transition:opacity 240ms var(--ease-out,cubic-bezier(.23,1,.32,1));}
.mk-demo-home{display:flex;flex-direction:column;opacity:1;background:#f7f0df}
.mk-demo-home-settings{position:absolute;right:13px;top:39px;width:25px;height:25px;padding:6px;border-radius:9px;background:#fff9ebd1;color:#7d6a50}
.mk-demo-home-settings svg{width:100%;height:100%}
.mk-demo-home-logo{display:flex;align-items:center;justify-content:center;flex:1;padding:30px 18px 8px}
.mk-demo-home-logo img{display:block;width:143px;height:auto;object-fit:contain}
.mk-demo-home-wave{width:100%;height:47px;flex-shrink:0;margin-bottom:-1px}
.mk-demo-home-bottom{position:relative;height:42%;background:#8eaa8d;display:flex;align-items:center;flex-direction:column;padding:46px 13px 0;color:#fffaf0;text-align:center}
.mk-demo-home-camera{position:absolute;top:-34px;left:calc(50% - 31px);width:62px;height:62px;border:4px solid #fff8ea;border-radius:50%;background:#a7774b;display:grid;place-items:center;box-shadow:0 6px 12px #4b382838}
.mk-demo-home-camera svg{width:27px;height:27px;stroke-width:1.7}
.mk-demo-home-bottom strong{font-size:15px;font-weight:800;line-height:1.3}
.mk-demo-home-bottom>span:not(.mk-demo-home-camera):not(.mk-demo-home-adventure){font-size:11px;line-height:1.4;opacity:.85;margin-top:5px}
.mk-demo-home-dots{display:flex;gap:6px;margin-top:16px}
.mk-demo-home-dots i{width:5px;height:5px;background:#fffaf06b;border-radius:50%}
.mk-demo-home-dots i:first-child{background:#fffaf0}
.mk-demo-home-adventure{font-size:9px;font-weight:600;padding:7px 12px;background:#fffaf02e;border:1px solid #fffaf070;border-radius:11px;margin-top:13px}
.mk-demo-scanner{opacity:0;background:linear-gradient(160deg,#c5bfaa,#7a7f65);pointer-events:none;display:flex;align-items:center;justify-content:center}
.mk-demo-scan-square{width:162px;aspect-ratio:1;position:relative}
.mk-demo-scan-square i{width:22px;height:22px;position:absolute;border-style:solid;border-color:#fff9e9;border-width:0;border-radius:2px;z-index:1}
.mk-demo-scan-square i:nth-child(1){left:-6px;top:-6px;border-width:2px 0 0 2px}
.mk-demo-scan-square i:nth-child(2){right:-6px;top:-6px;border-width:2px 2px 0 0}
.mk-demo-scan-square i:nth-child(3){left:-6px;bottom:-6px;border-width:0 0 2px 2px}
.mk-demo-scan-square i:nth-child(4){right:-6px;bottom:-6px;border-width:0 2px 2px 0}
.mk-demo-scan-square img{display:block;width:100%;height:100%;object-fit:contain;border:6px solid #fffefa;border-radius:6px;opacity:0}
.mk-demo[data-phase="scan"] .mk-demo-scan-square img{animation:mk-demo-scan-card-in 200ms 950ms var(--ease-out,cubic-bezier(.23,1,.32,1)) forwards}
.mk-demo-scan-line{position:absolute;left:34px;right:34px;top:145px;height:1px;background:#f7f9dc;opacity:.85;box-shadow:0 0 8px #f7f9dc80}
.mk-demo[data-phase="scan"] .mk-demo-scan-line{animation:mk-demo-scanning 1500ms linear 1}
.mk-demo-scan-label{position:absolute;bottom:48px;left:20px;right:20px;text-align:center;border-radius:13px;background:#fff8eae8;padding:12px 8px;font-size:10px;font-weight:600;color:#4d392b}
.mk-demo-result{background:#fbf4e4;opacity:0;padding:35px 12px 20px;pointer-events:none}
.mk-demo[data-phase="scan"] .mk-demo-home,.mk-demo[data-phase="learn"] .mk-demo-home{opacity:0;pointer-events:none}
.mk-demo[data-phase="scan"] .mk-demo-scanner{opacity:1}
.mk-demo[data-phase="learn"] .mk-demo-result{opacity:1;pointer-events:auto}
.mk-demo-app-header{display:grid;grid-template-columns:27px 1fr 27px;gap:5px;align-items:center;color:#3a2e1e}
.mk-demo-app-header>span:first-child{display:grid;place-items:center;width:27px;height:27px;border-radius:10px;background:#fff9ed;font-size:24px;color:#7d6a50}
.mk-demo-app-header strong{text-align:center;font-size:15px;font-weight:800}
.mk-demo-app-gear{width:27px;height:27px;padding:6px;background:#fff9ed;border-radius:10px;color:#7d6a50}
.mk-demo-app-gear svg{height:100%;width:100%}
.mk-demo-app-subtitle{font-size:12px;color:#6a5948;margin:9px 0 15px;text-align:center;line-height:18px}
.mk-demo-app-hero{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:10px}
.mk-demo-app-image{background:#fff;border-radius:12px;padding:6px;aspect-ratio:1;box-shadow:0 4px 9px #7e5f352d}
.mk-demo-app-image img{width:100%;height:100%;display:block;object-fit:contain}
.mk-demo-app-actions{display:flex;flex-direction:column;gap:8px;min-width:0}
.mk-demo-app-actions button{border:0;display:flex;align-items:center;justify-content:center;gap:4px;padding:11px 6px;border-radius:14px;background:#8eaa8d;color:#fff8ea;font-size:8px;font-weight:800;white-space:nowrap}
.mk-demo-app-actions button svg{width:12px;height:12px;flex-shrink:0}
.mk-demo-app-languages{display:flex;align-self:flex-start;gap:4px;padding:4px;background:#eadcc5;border-radius:20px}
.mk-demo-app-languages span{padding:5px 6px;font-size:7px;font-weight:800;background:#789579;color:#fff;border-radius:14px}
.mk-demo-app-facts{display:grid;gap:7px;margin:13px 0 0}
.mk-demo-app-facts>div{padding:10px 11px;border-radius:11px;background:#ead7b8}
.mk-demo-app-facts dt{font-size:8px;color:#745a3e;font-weight:700;margin-bottom:4px}
.mk-demo-app-facts dd{font-size:10px;line-height:1.4;font-weight:600;color:#3a2e1e;margin:0}
.mk-demo-device-caption{font-family:var(--font-display,"Playfair Display",Georgia,serif);font-style:italic;font-size:13px;color:#56634b;transform:rotate(2deg)}
.mk-demo-travelling-card{position:absolute;border:7px solid #fffefa;background:#fffefa;border-radius:8px;box-shadow:0 15px 30px #373c3033;pointer-events:none;z-index:20;will-change:transform,opacity}
.mk-demo-travelling-card img{display:block;width:100%;height:100%;object-fit:contain}
.mk-demo-steps{display:grid;grid-template-columns:repeat(3,1fr);padding:26px 0 0;margin:0;list-style:none;gap:14px}
.mk-demo-steps li{display:flex;align-items:center;gap:12px;padding-top:14px;border-top:1px solid var(--mk-line);color:#6f6c5e}
.mk-demo-steps li span{font-size:10px;letter-spacing:.04em;color:#626451}
.mk-demo-steps li strong{font-size:12px;font-weight:500}
.mk-demo-steps li[aria-current="step"]{border-color:#5e775b;color:#354c31}
.mk-demo-steps li[aria-current="step"] span{color:#5e775b}
.mk-demo-steps .mk-demo-step-done{border-color:#a4b19a}
.mk-demo-live{font-size:11px;line-height:1.6;color:#746f60;min-height:36px;margin:18px 0 0;text-align:center}
.mk-demo-paused .mk-demo-scan-line,.mk-demo-paused .mk-demo-scan-square img{animation-play-state:paused!important}
.mk-demo-is-listening .mk-demo-listen{background:#3c553a!important}
.mk-demo-keyboard-flow .mk-demo-card,.mk-demo-keyboard-flow .mk-demo-home,.mk-demo-keyboard-flow .mk-demo-scanner,.mk-demo-keyboard-flow .mk-demo-result,.mk-demo-keyboard-flow .mk-demo-listening{transition:none}
.mk-demo-keyboard-flow .mk-demo-scan-line{display:none}
.mk-demo-keyboard-flow .mk-demo-scan-square img{animation:none!important;opacity:1}
@keyframes mk-demo-scanning{from{transform:translateY(0);opacity:0}10%{opacity:.85}90%{opacity:.85}to{transform:translateY(160px);opacity:0}}
@keyframes mk-demo-scan-card-in{from{opacity:0}to{opacity:1}}
@media(hover:hover) and (pointer:fine){
  .mk-demo-card:not([aria-disabled="true"]):hover{transform:translateY(-8px) rotate(0);z-index:4}
  .mk-demo-tool:not(:disabled):hover{color:#4c6748}
  .mk-demo-listen:hover{transform:translateY(-2px)}
}
@media(max-width:950px){
  .mk-demo-board{padding:38px 30px 34px;gap:18px;grid-template-columns:minmax(0,1fr) 250px}
  .mk-demo-phone{width:225px;height:436px}
  .mk-demo-cards{padding-inline:0;padding-top:30px}
  .mk-demo-card{padding:6px}
  .mk-demo-prompt h3{font-size:42px}
  .mk-demo-listening{gap:10px;margin-bottom:-75px;align-items:flex-start;flex-direction:column}
  .mk-demo-listening p br{display:none}
  .mk-demo-app-result{padding-inline:10px}
  .mk-demo-app-facts>div{padding:8px 10px}
  .mk-demo-scan-square{width:150px}
}
@media(max-width:680px){
  .mk-demo-toolbar{padding-bottom:14px;align-items:center}
  .mk-demo-invitation{font-size:10px;max-width:150px;line-height:1.5}
  .mk-demo-tools{gap:16px}
  .mk-demo-tool{font-size:10px;gap:5px}
  .mk-demo-tool svg{width:14px;height:14px}
  .mk-demo-board{grid-template-columns:1fr;padding:30px 22px 30px;gap:0;min-height:auto;border-radius:5px}
  .mk-demo-table{display:contents;padding:0;text-align:center}
  .mk-demo-prompt{grid-row:1}
  .mk-demo-cards{grid-row:2}
  .mk-demo-table-footer{grid-row:3}
  .mk-demo-kicker{margin-bottom:12px;font-size:9px}
  .mk-demo-prompt h3{font-size:40px;margin-bottom:12px}
  .mk-demo-instruction{font-size:12px;min-height:20px}
  .mk-demo-cards{max-width:450px;margin:auto;padding:31px 3px 22px}
  .mk-demo-card{max-width:150px;border-radius:7px;padding:5px}
  .mk-demo-table-footer{justify-content:center;padding:0;min-height:26px}
  .mk-demo-arrow{display:none}
  .mk-demo-hint{font-size:10px}
  .mk-demo-listening{grid-row:5;flex-direction:row;align-items:center;justify-content:center;margin:24px 0 0;min-height:60px;position:static;gap:12px}
  .mk-demo-listening p{font-size:9px;text-align:left;max-width:130px}
  .mk-demo-listening p br{display:initial}
  .mk-demo-listen{font-size:11px;padding:12px 14px;gap:8px}
  .mk-demo-device-area{grid-row:4;margin-top:34px;padding-bottom:0;gap:20px}
  .mk-demo-phone{width:225px;height:436px;transform:rotate(3deg)}
  .mk-demo-steps{gap:10px;padding-top:18px}
  .mk-demo-steps li{gap:7px;padding-top:12px}
  .mk-demo-steps li strong{font-size:11px}
  .mk-demo-steps li span{font-size:9px}
  .mk-demo-live{font-size:10px;margin-top:15px}
}
@media(prefers-reduced-motion:reduce){
  .mk-demo-card,.mk-demo-listening,.mk-demo-listen{transform:none!important;transition:opacity 150ms ease}
  .mk-demo-home,.mk-demo-scanner,.mk-demo-result{transition:opacity 150ms ease}
  .mk-demo-scan-line{display:none}
  .mk-demo[data-phase="scan"] .mk-demo-scan-square img{animation:none;opacity:1}
  .mk-demo-travelling-card{display:none}
}
.mk-demo-toolbar .mk-demo-tool,.mk-demo-table-footer .mk-demo-hint,.mk-demo-live{font-size:12px}
.mk-demo-listening p,.mk-demo-steps li span{font-size:11px}
.mk-demo-steps li strong{font-size:12px}

/* Keep the app preview's square independent of the image's intrinsic size.
   Scoped selectors also survive the later landing-page stylesheet. */
montekidz-demo .mk-demo .mk-demo-app-hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
montekidz-demo .mk-demo .mk-demo-app-image{position:relative;inline-size:100%;block-size:auto;aspect-ratio:1 / 1;min-inline-size:0;min-block-size:0;align-self:center;padding:0;overflow:hidden}
montekidz-demo .mk-demo .mk-demo-app-image>img{position:absolute;inset:6px;display:block;inline-size:calc(100% - 12px);block-size:calc(100% - 12px);max-inline-size:none;max-block-size:none;object-fit:contain;object-position:center}
montekidz-demo .mk-demo .mk-demo-app-actions{min-inline-size:0}
montekidz-demo .mk-demo .mk-demo-app-actions button{white-space:normal;min-inline-size:0;line-height:1.35}
montekidz-demo .mk-demo .mk-demo-listening{flex-wrap:wrap}
montekidz-demo .mk-demo .mk-demo-listening p{flex:1 1 130px;max-inline-size:none;text-align:start}
montekidz-demo .mk-demo .mk-demo-prompt h3{letter-spacing:-.03em}
montekidz-demo .mk-demo .mk-demo-phone{direction:ltr}
montekidz-demo .mk-demo .mk-demo-home-bottom{flex-shrink:0}
montekidz-demo .mk-demo .mk-demo-app-subtitle bdi,montekidz-demo .mk-demo .mk-demo-app-facts bdi{unicode-bidi:isolate}
montekidz-demo[dir="rtl"] .mk-demo .mk-demo-prompt h3{font-family:inherit;letter-spacing:0;line-height:1.35}
montekidz-demo[dir="rtl"] .mk-demo .mk-demo-prompt h3 em{font-style:normal}
montekidz-demo[dir="rtl"] .mk-demo .mk-demo-kicker{letter-spacing:0}
montekidz-demo[dir="rtl"] .mk-demo .mk-demo-arrow{transform:scaleX(-1) rotate(-8deg)}
montekidz-demo[dir="rtl"] .mk-demo .mk-demo-app-facts{text-align:right}
montekidz-demo[dir="rtl"] .mk-demo .mk-demo-home-bottom{font-family:inherit}
montekidz-demo[dir="rtl"] .mk-demo .mk-demo-home-bottom strong{font-size:17px}
montekidz-demo[dir="rtl"] .mk-demo .mk-demo-home-bottom>span:not(.mk-demo-home-camera):not(.mk-demo-home-adventure){font-size:11px;line-height:1.55}
montekidz-demo[dir="rtl"] .mk-demo .mk-demo-instruction,montekidz-demo[dir="rtl"] .mk-demo .mk-demo-hint,montekidz-demo[dir="rtl"] .mk-demo .mk-demo-live{line-height:1.85}
@media(max-width:680px){
  montekidz-demo .mk-demo .mk-demo-listening{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:12px}
  montekidz-demo .mk-demo .mk-demo-listening p{flex:0 1 135px}
  montekidz-demo[dir="rtl"] .mk-demo .mk-demo-steps li{gap:7px}
  montekidz-demo[dir="rtl"] .mk-demo .mk-demo-tool{font-size:11px}
}
