/* ============================================================
   ScolerAI Marketing — App Screen Mockups
   Replaces the assets/shot_*.webp screenshots with live,
   translatable HTML/CSS renderings of the app screens.

   Markup is generated by js/mockups.js from a slot:
     <div class="mk-slot" data-mock="dashboard"></div>

   Fallback: add ?shots=real to the URL (or set
   localStorage.scolerShots = 'real') to show the original
   screenshots again — see js/mockups.js.
   ============================================================ */

/* ──── SLOT + FALLBACK FLAG ──── */
/* No width on the base slot: positioned slots (hero floats, pomodoro ring)
   must keep the width their page CSS gives them — width:100% here made the
   home-page floats span the whole collage. */
.mk-slot{display:block}
/* Two classes on purpose: must out-rank `.shot img` / `.shot-carousel__slide img`
   in styles.css (0,1,1), or the "hidden" screenshot renders above the mockup
   and carousel slides double in height. */
.mk-slot .mk-slot__real{display:none;width:100%;height:auto;border-radius:14px}
html[data-shots="real"] .mk-slot .mk-slot__real{display:block}
html[data-shots="real"] .mk-slot .mk{display:none}

/* ──── TOKENS ──── */
.mk{
  --mk-surface:#FFFFFF;
  --mk-surface-2:#F7F8FB;
  --mk-surface-3:#EEF1F7;
  --mk-line:#E6E9F0;
  --mk-line-2:#F0F2F7;
  --mk-t1:#111827;
  --mk-t2:#4B5563;
  --mk-t3:#98A0B0;
  --mk-purple:#7C3AED;
  --mk-purple-soft:rgba(124,58,237,.09);
  --mk-blue:#2563EB;
  --mk-blue-soft:rgba(37,99,235,.09);
  --mk-green:#059669;
  --mk-green-soft:rgba(5,150,105,.10);
  --mk-amber:#D97706;
  --mk-amber-soft:rgba(217,119,6,.10);
  --mk-shadow:0 18px 48px rgba(17,24,39,.10);
  --mk-radius:16px;

  font-family:var(--ff,'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif);
  color:var(--mk-t1);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  font-size:14px;
  text-wrap:pretty;
}
.mk--dark{
  --mk-surface:#15151F;
  --mk-surface-2:#1C1C29;
  --mk-surface-3:#242433;
  --mk-line:rgba(255,255,255,.10);
  --mk-line-2:rgba(255,255,255,.06);
  --mk-t1:#F4F5F9;
  --mk-t2:#B4BAC9;
  --mk-t3:#7B8293;
  --mk-purple:#A78BFA;
  --mk-purple-soft:rgba(167,139,250,.14);
  --mk-blue:#60A5FA;
  --mk-blue-soft:rgba(96,165,250,.14);
  --mk-green:#34D399;
  --mk-green-soft:rgba(52,211,153,.14);
  --mk-amber:#FBBF24;
  --mk-amber-soft:rgba(251,191,36,.14);
  --mk-shadow:0 24px 60px rgba(0,0,0,.45);
}
.mk *{box-sizing:border-box;margin:0;padding:0}
.mk i[data-lucide]{width:16px;height:16px;flex-shrink:0;stroke-width:2}

/* ──── FRAMES ──── */
.mk-phone{
  /* isolate: keeps the notch's z-index from painting over the hero floats */
  position:relative;isolation:isolate;width:100%;max-width:340px;margin:0 auto;
  padding:9px;border-radius:42px;
  background:linear-gradient(160deg,#3A3A48,#15151C 45%,#2C2C38);
  box-shadow:0 30px 70px rgba(17,24,39,.30),inset 0 0 0 1px rgba(255,255,255,.10);
}
.mk-phone__screen{
  position:relative;border-radius:34px;overflow:hidden;
  background:var(--mk-surface);
}
.mk-phone__status{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 20px 4px;font-size:11px;font-weight:700;color:var(--mk-t2);
}
.mk-phone__status-icons{display:flex;align-items:center;gap:4px;opacity:.75}
.mk-phone__status-icons i{width:13px;height:13px}
.mk-phone__notch{
  position:absolute;top:9px;left:50%;transform:translateX(-50%);
  width:74px;height:20px;border-radius:12px;background:#0C0C12;z-index:3;
}

.mk-panel{
  position:relative;width:100%;
  border-radius:var(--mk-radius);border:1px solid var(--mk-line);
  background:var(--mk-surface);box-shadow:var(--mk-shadow);overflow:hidden;
}
.mk-panel__bar{
  display:flex;align-items:center;gap:8px;
  padding:9px 12px;border-bottom:1px solid var(--mk-line-2);
  background:var(--mk-surface-2);
}
.mk-panel__dots{display:flex;gap:5px}
.mk-panel__dots span{width:8px;height:8px;border-radius:50%;background:var(--mk-line)}
.mk-panel__title{
  display:flex;align-items:center;gap:6px;
  font-size:11.5px;font-weight:700;color:var(--mk-t2);letter-spacing:.01em;
}
.mk-panel__title i{width:14px;height:14px;color:var(--mk-purple)}
.mk-panel__body{padding:16px}

/* ──── SHARED PARTS ──── */
.mk-chip{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 10px;border-radius:999px;
  font-size:11px;font-weight:700;
  background:var(--mk-purple-soft);color:var(--mk-purple);
}
.mk-chip i{width:12px;height:12px}
.mk-chip--blue{background:var(--mk-blue-soft);color:var(--mk-blue)}
.mk-chip--green{background:var(--mk-green-soft);color:var(--mk-green)}
.mk-chip--amber{background:var(--mk-amber-soft);color:var(--mk-amber)}
.mk-chip--quiet{background:var(--mk-surface-3);color:var(--mk-t2)}

.mk-row{display:flex;align-items:center;gap:8px}
.mk-row--between{justify-content:space-between}
.mk-stack{display:flex;flex-direction:column;gap:10px}
.mk-h{font-size:15px;font-weight:800;letter-spacing:-.01em}
.mk-label{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mk-t3)}
.mk-sub{font-size:12.5px;color:var(--mk-t2)}
.mk-link{font-size:12px;font-weight:700;color:var(--mk-purple)}

.mk-bar{height:6px;border-radius:999px;background:var(--mk-line-2);overflow:hidden}
.mk-bar__fill{
  height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--mk-purple),var(--mk-blue));
  width:var(--w,50%);
  animation:mkFill 1.4s cubic-bezier(.4,0,.2,1) both;
}
.mk-bar__fill--green{background:linear-gradient(90deg,#10B981,var(--mk-green))}
@keyframes mkFill{from{width:0}to{width:var(--w,50%)}}

.mk-input{
  display:flex;align-items:center;gap:8px;min-width:0;
  padding:10px 12px;border-radius:12px;
  background:var(--mk-surface-2);border:1px solid var(--mk-line);
  font-size:12.5px;color:var(--mk-t3);
}
.mk-input i{color:var(--mk-t3)}
.mk-input>span[data-i18n]{min-width:0;line-height:1.35}
.mk-caret{
  display:inline-block;width:1.5px;height:13px;margin-left:1px;
  background:var(--mk-purple);vertical-align:-2px;
  animation:mkBlink 1.1s steps(1,end) infinite;
}
@keyframes mkBlink{0%,49%{opacity:1}50%,100%{opacity:0}}

.mk-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:10px 12px;border-radius:12px;text-align:center;
  font-size:12px;font-weight:700;line-height:1.25;
  background:linear-gradient(135deg,var(--mk-purple),var(--mk-blue));color:#fff;
}
.mk-btn--amber{background:linear-gradient(135deg,#F59E0B,var(--mk-amber));color:#3B2503}
.mk-btn--quiet{background:var(--mk-surface-3);color:var(--mk-t2)}

/* thumbnails / generated-media stand-ins */
.mk-art{position:relative;border-radius:12px;overflow:hidden;background:var(--mk-surface-3)}
.mk-art--scene{background:#1E5FA8}
.mk-art--scene svg{display:block;width:100%;height:100%}
.mk-art__chip{
  position:absolute;left:10px;bottom:10px;display:inline-flex;align-items:center;gap:5px;
  padding:4px 9px;border-radius:999px;background:rgba(8,22,40,.55);
  font-size:10.5px;font-weight:700;color:#fff;white-space:nowrap;backdrop-filter:blur(4px);
}
.mk-art__chip i{width:12px;height:12px}
.mk-art--chart{background:linear-gradient(135deg,#0E7490,#22D3EE)}
.mk-art--chart2{background:linear-gradient(135deg,#0F766E,#2DD4BF)}
.mk-art--atom{background:radial-gradient(circle at 50% 45%,#FFE8C8,#FDBA74 70%,#FB923C)}
.mk-art--info{background:linear-gradient(135deg,#4338CA,#818CF8)}
.mk-art--note1{background:linear-gradient(135deg,#F59E0B,#EA580C)}
.mk-art--note2{background:linear-gradient(135deg,#0EA5E9,#2563EB)}
.mk-art--note3{background:linear-gradient(135deg,#7C3AED,#C026D3)}
.mk-art--note4{background:linear-gradient(135deg,#059669,#65A30D)}
.mk-art--note5{background:linear-gradient(135deg,#DB2777,#F43F5E)}
.mk-art--note6{background:linear-gradient(135deg,#0D9488,#0891B2)}
.mk-art__glyph{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.92);
}
.mk-art__glyph i{width:26px;height:26px}
.mk-art__rings{position:absolute;inset:0}
.mk-art__rings span{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  border:1.5px solid rgba(124,45,18,.45);border-radius:50%;
}
.mk-art__rings span:nth-child(1){width:52%;height:52%}
.mk-art__rings span:nth-child(2){width:78%;height:78%}
.mk-art__rings span:nth-child(3){width:26%;height:26%;background:#DC2626;border-color:#B91C1C}

/* ============================================================
   1 — DASHBOARD (phone)
   ============================================================ */
.mk-dash{padding:0 14px 16px}
.mk-dash__hero{
  position:relative;overflow:hidden;
  margin:6px 0 14px;padding:14px 14px 12px;border-radius:18px;
  background:linear-gradient(140deg,#3E6C93,#6E9BBE 55%,#A8C8DE);
  color:#fff;
}
.mk-dash__hello{font-size:11.5px;font-weight:600;opacity:.9}
.mk-dash__name{font-size:22px;font-weight:800;letter-spacing:-.02em;margin:1px 0 6px}
.mk-dash__footrow{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mk-dash__meta{display:flex;align-items:center;gap:6px;min-width:0;font-size:11.5px;opacity:.95}
.mk-dash__meta span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-dash__stats{
  display:flex;align-items:center;gap:4px;flex-shrink:0;
  font-size:11px;font-weight:700;white-space:nowrap;
}
.mk-dash__streak{position:absolute;right:14px;top:16px;display:flex;gap:4px}
.mk-dash__streak span{width:12px;height:3px;border-radius:2px;background:rgba(255,255,255,.45)}
.mk-dash__streak span.is-on{background:#fff}

.mk-dash__section{font-size:14.5px;font-weight:800;letter-spacing:-.01em;margin:0 0 8px}
.mk-row--between .mk-dash__section{white-space:nowrap}
.mk-row--between .mk-link{white-space:nowrap}
.mk-dash__resume{
  display:flex;align-items:center;gap:10px;
  padding:9px;border-radius:14px;margin-bottom:16px;
  background:var(--mk-blue-soft);border:1px solid var(--mk-line-2);
}
.mk-dash__resume-art{width:44px;height:44px;border-radius:10px;flex-shrink:0}
.mk-dash__resume-txt{flex:1;min-width:0}
.mk-dash__resume-kind{display:block;font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--mk-blue)}
.mk-dash__resume-title{display:block;font-size:12.5px;font-weight:700;color:var(--mk-t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-dash__resume-btn{
  padding:7px 12px;border-radius:999px;background:var(--mk-surface);
  font-size:11.5px;font-weight:700;color:var(--mk-blue);flex-shrink:0;
  box-shadow:0 1px 3px rgba(17,24,39,.10);
}
.mk-dash__launcher{
  padding:12px;border-radius:18px;margin-bottom:16px;
  background:linear-gradient(160deg,var(--mk-surface-2),var(--mk-surface-3));
  border:1px solid var(--mk-line-2);
}
.mk-dash__launcher-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.mk-dash__launcher-icon{
  width:30px;height:30px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:var(--mk-purple-soft);color:var(--mk-purple);
}
.mk-dash__launcher-title{font-size:12.5px;font-weight:800}
.mk-dash__times{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:8px 0 10px}
.mk-dash__time{
  padding:7px 0;border-radius:10px;text-align:center;
  background:var(--mk-surface);border:1px solid var(--mk-line);
  font-size:11px;font-weight:700;color:var(--mk-t2);
}
.mk-dash__time.is-on{background:var(--mk-blue);border-color:var(--mk-blue);color:#fff}
.mk-dash__actions{display:grid;grid-template-columns:1.45fr 1fr;gap:6px}
.mk-dash__notes{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mk-dash__note-art{aspect-ratio:1.4;border-radius:12px}
.mk-dash__note-title{font-size:11.5px;font-weight:700;margin-top:5px}
.mk-dash__note-meta{font-size:10.5px;color:var(--mk-t3)}

/* ============================================================
   2 — INSTANT Q&A (panel)
   ============================================================ */
.mk-qa__user{
  align-self:flex-end;max-width:76%;
  padding:9px 13px;border-radius:16px 16px 4px 16px;
  background:var(--mk-blue-soft);color:var(--mk-t1);
  font-size:12.5px;font-weight:600;
}
.mk-qa__ai{
  padding:14px;border-radius:4px 16px 16px 16px;
  background:var(--mk-surface-2);border:1px solid var(--mk-line-2);
}
.mk-qa__lead{font-size:12.5px;color:var(--mk-t2);margin-bottom:10px}
.mk-qa__title{font-size:14px;font-weight:800;color:var(--mk-purple);margin-bottom:10px}
.mk-qa__steps{display:flex;flex-direction:column;gap:9px;counter-reset:mkstep}
.mk-qa__step{display:flex;gap:9px}
.mk-qa__step::before{
  counter-increment:mkstep;content:counter(mkstep) '.';
  font-size:12px;font-weight:800;color:var(--mk-blue);line-height:1.45;
}
.mk-qa__step-t{font-size:12.5px;font-weight:700;color:var(--mk-blue);display:block;margin-bottom:1px}
.mk-qa__step-d{font-size:12px;color:var(--mk-t2);line-height:1.55}
.mk-qa__summary{
  margin-top:11px;padding:9px 12px;border-left:3px solid var(--mk-blue);
  border-radius:0 10px 10px 0;
  background:linear-gradient(90deg,var(--mk-blue-soft),var(--mk-purple-soft));
  font-size:12px;color:var(--mk-t1);
}
.mk-qa__summary b{color:var(--mk-blue)}
.mk-qa__check{margin-top:11px}
.mk-qa__check-label{font-size:12.5px;font-weight:800;color:var(--mk-purple);margin-bottom:3px}
.mk-qa__check-q{font-size:12px;color:var(--mk-t2)}
.mk-qa__tool{
  display:flex;align-items:center;gap:10px;
  padding:10px;border-radius:12px;
  background:var(--mk-surface);border:1px solid var(--mk-line);
}
.mk-qa__tool-icon{
  width:30px;height:30px;border-radius:9px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--mk-blue-soft);color:var(--mk-blue);
}
.mk-qa__tool-txt{flex:1;min-width:0}
.mk-qa__tool-title{font-size:12.5px;font-weight:700}
.mk-qa__tool-desc{font-size:11px;color:var(--mk-t3)}
.mk-qa__composer{
  margin-top:12px;padding:10px;border-radius:14px;
  background:var(--mk-surface-2);border:1px solid var(--mk-line);
}
.mk-qa__modes{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:9px}
.mk-qa__mode{
  padding:5px 11px;border-radius:999px;font-size:11.5px;font-weight:700;color:var(--mk-t3);
}
.mk-qa__mode.is-on{background:#FEF3C7;color:#92400E}
.mk--dark .mk-qa__mode.is-on{background:rgba(251,191,36,.18);color:#FBBF24}
.mk-qa__mic{margin-left:auto;display:flex;gap:8px;color:var(--mk-t3)}

/* ============================================================
   3 — ADAPTIVE SESSION (wide panel)
   ============================================================ */
.mk-ad__grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.mk-ad__left{padding:16px;border-right:1px solid var(--mk-line-2);background:var(--mk-surface-2)}
.mk-ad__right{padding:16px;display:flex;flex-direction:column;gap:10px}
.mk-ad__lead{font-size:12.5px;color:var(--mk-t2);margin-bottom:9px}
.mk-ad__fact{
  padding:10px 12px;border-radius:12px;margin-bottom:11px;
  background:var(--mk-surface);border:1px solid var(--mk-line);
  font-size:12px;font-style:italic;color:var(--mk-t2);
}
.mk-ad__art{aspect-ratio:1.25;margin-bottom:12px}
.mk-ad__progress{padding:11px 12px;border-radius:12px;background:var(--mk-surface);border:1px solid var(--mk-line)}
.mk-ad__progress-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
.mk-ad__progress-title{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:800}
.mk-ad__progress-title i{color:var(--mk-purple)}
.mk-ad__progress-count{font-size:11.5px;font-weight:700;color:var(--mk-t3)}
.mk-ad__rows{display:flex;flex-direction:column;gap:8px}
.mk-ad__row-top{display:flex;justify-content:space-between;gap:8px;font-size:11.5px;margin-bottom:5px}
.mk-ad__row-name{color:var(--mk-t2);font-weight:600;min-width:0;line-height:1.35}
.mk-ad__row-pct{flex-shrink:0}
.mk-ad__row-pct{font-weight:800;color:var(--mk-purple)}
.mk-ad__row-pct--done{color:var(--mk-green)}
.mk-ad__row-pct--todo{color:var(--mk-t3)}
.mk-ad__msg{font-size:12.5px;line-height:1.6;color:var(--mk-t2)}
.mk-ad__msg b{color:var(--mk-blue);font-weight:700}
.mk-ad__user{
  align-self:flex-end;padding:8px 13px;border-radius:16px 16px 4px 16px;
  background:var(--mk-blue-soft);font-size:12.5px;font-weight:600;
}
.mk-ad__check{
  padding:10px 12px;border-radius:12px;
  background:var(--mk-purple-soft);font-size:12.5px;font-weight:700;color:var(--mk-purple);
}
.mk-ad__spacer{flex:1;min-height:6px}
@media(max-width:640px){
  .mk-ad__grid{grid-template-columns:1fr}
  .mk-ad__left{border-right:none;border-bottom:1px solid var(--mk-line-2)}
}

/* ============================================================
   4 — SMART PLANNER (panel)
   ============================================================ */
.mk-pl__hero{
  position:relative;overflow:hidden;padding:18px 16px 16px;color:#fff;
  background:linear-gradient(140deg,#1E4B75,#2F6FA8 60%,#4E8FC4);
}
.mk-pl__hero::after{
  content:'';position:absolute;right:-30px;bottom:-60px;width:190px;height:190px;
  border-radius:34px;background:rgba(255,255,255,.07);transform:rotate(18deg);
}
.mk-pl__badge{
  display:inline-block;padding:4px 10px;border-radius:999px;
  background:rgba(255,255,255,.18);font-size:10px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px;
}
.mk-pl__title{font-size:18px;font-weight:800;letter-spacing:-.02em;max-width:26ch}
.mk-pl__chips{display:flex;flex-wrap:wrap;gap:6px;padding:12px 16px 0}
.mk-pl__remind{
  display:flex;align-items:center;gap:10px;margin:12px 16px 0;
  padding:10px 12px;border-radius:12px;
  background:var(--mk-blue-soft);border:1px solid var(--mk-line-2);
}
.mk-pl__remind-icon{color:var(--mk-blue);display:flex}
.mk-pl__remind-label{font-size:11px;font-weight:800;color:var(--mk-blue)}
.mk-pl__remind-val{font-size:12px;color:var(--mk-t2)}
.mk-pl__goal{padding:14px 16px 0}
.mk-pl__goal-head{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:800;margin-bottom:5px}
.mk-pl__goal-head i{color:var(--mk-blue)}
.mk-pl__goal-txt{font-size:12px;color:var(--mk-t2);line-height:1.6}
.mk-pl__prog{padding:14px 16px 0}
.mk-pl__prog-top{display:flex;justify-content:space-between;gap:10px;font-size:11.5px;font-weight:700;color:var(--mk-t2);margin-bottom:6px}
.mk-pl__prog-top span{white-space:nowrap}
.mk-pl__phase{margin:14px 16px 16px;padding:12px;border-radius:14px;background:var(--mk-surface-2);border:1px solid var(--mk-line-2)}
.mk-pl__phase-head{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.mk-pl__phase-num{
  width:22px;height:22px;border-radius:7px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--mk-blue-soft);color:var(--mk-blue);font-size:11px;font-weight:800;
}
.mk-pl__phase-title{font-size:12.5px;font-weight:700;flex:1}
.mk-pl__phase-count{font-size:11px;font-weight:700;color:var(--mk-t3)}
.mk-pl__tasks{display:flex;flex-direction:column;gap:8px}
.mk-pl__task{
  display:flex;align-items:center;gap:10px;padding:10px;border-radius:12px;
  background:var(--mk-surface);border:1px solid var(--mk-line);
}
.mk-pl__check{
  width:19px;height:19px;border-radius:6px;flex-shrink:0;
  border:1.5px solid var(--mk-line);display:flex;align-items:center;justify-content:center;color:transparent;
}
.mk-pl__check--on{background:var(--mk-blue);border-color:var(--mk-blue);color:#fff}
.mk-pl__check i{width:12px;height:12px}
.mk-pl__task-txt{flex:1;min-width:0}
.mk-pl__task-title{font-size:12.5px;font-weight:700}
.mk-pl__task--done .mk-pl__task-title{color:var(--mk-t3);text-decoration:line-through}
.mk-pl__task-meta{display:flex;align-items:center;gap:6px;margin-top:3px}

/* ============================================================
   5 — LIBRARY (panel)
   ============================================================ */
.mk-lib__head{display:flex;gap:8px;margin-bottom:14px}
.mk-lib__head .mk-input{flex:1}
.mk-lib__filter{
  width:38px;display:flex;align-items:center;justify-content:center;
  border-radius:12px;background:var(--mk-surface-2);border:1px solid var(--mk-line);color:var(--mk-t2);
}
.mk-lib__section{margin-bottom:14px}
.mk-lib__section:last-child{margin-bottom:0}
.mk-lib__section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
.mk-lib__cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.mk-lib__card{border-radius:12px;overflow:hidden;background:var(--mk-surface);border:1px solid var(--mk-line)}
.mk-lib__card-art{aspect-ratio:1.45;position:relative}
.mk-lib__card-body{padding:8px 9px 10px}
.mk-lib__card-title{font-size:11.5px;font-weight:700;line-height:1.35}
.mk-lib__card-kind{font-size:10.5px;color:var(--mk-t3);margin-top:2px}
.mk-lib__card-foot{display:flex;align-items:center;justify-content:space-between;margin-top:7px;font-size:10px;color:var(--mk-t3)}
.mk-lib__mini-bar{height:4px;border-radius:999px;background:var(--mk-line-2);overflow:hidden;margin-top:7px}
.mk-lib__mini-fill{height:100%;border-radius:999px;background:var(--mk-green);width:var(--w,100%);animation:mkFill 1.4s cubic-bezier(.4,0,.2,1) both}
@media(max-width:640px){.mk-lib__cards{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ============================================================
   6 — STUDY NOTES GALLERY (panel)
   ============================================================ */
.mk-nt__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.mk-nt__card{border-radius:14px;overflow:hidden;background:var(--mk-surface);border:1px solid var(--mk-line)}
.mk-nt__art{aspect-ratio:1.35;position:relative}
.mk-nt__art::after{
  content:'';position:absolute;inset:auto 0 0 0;height:52%;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.22));
}
.mk-nt__art-mark{
  position:absolute;left:10px;top:10px;width:24px;height:24px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.22);color:#fff;
}
.mk-nt__body{padding:9px 10px 11px}
.mk-nt__title{font-size:12px;font-weight:700;line-height:1.35}
.mk-nt__meta{font-size:10.5px;color:var(--mk-t3);margin-top:3px}
@media(max-width:640px){.mk-nt__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ============================================================
   7 — PODCAST PLAYER (card)
   ============================================================ */
.mk-pod{
  padding:18px;border-radius:18px;color:#fff;
  background:linear-gradient(150deg,#4F46E5,#4338CA 55%,#5B21B6);
  box-shadow:0 20px 44px rgba(67,56,202,.30);
}
.mk-pod__top{display:flex;gap:12px;align-items:center}
.mk-pod__art{
  width:56px;height:56px;border-radius:14px;flex-shrink:0;
  background:rgba(255,255,255,.14);display:flex;align-items:flex-end;justify-content:center;gap:2.5px;padding:14px 0;
}
.mk-pod__art span{
  width:3px;border-radius:2px;background:rgba(255,255,255,.85);
  height:var(--h,50%);animation:mkWave 1.1s ease-in-out infinite alternate;
}
.mk-pod__art span:nth-child(2){animation-delay:.15s}
.mk-pod__art span:nth-child(3){animation-delay:.3s}
.mk-pod__art span:nth-child(4){animation-delay:.45s}
.mk-pod__art span:nth-child(5){animation-delay:.6s}
@keyframes mkWave{from{transform:scaleY(1)}to{transform:scaleY(.35)}}
.mk-pod__title{font-size:14.5px;font-weight:800;letter-spacing:-.01em;line-height:1.3}
.mk-pod__meta{font-size:11.5px;opacity:.8;margin-top:3px}
.mk-pod__track{margin:16px 0 6px;height:4px;border-radius:999px;background:rgba(255,255,255,.28);position:relative}
.mk-pod__track-fill{position:absolute;inset:0 auto 0 0;width:34%;border-radius:999px;background:#fff}
.mk-pod__knob{position:absolute;top:50%;left:34%;transform:translate(-50%,-50%);width:11px;height:11px;border-radius:50%;background:#fff}
.mk-pod__times{display:flex;justify-content:space-between;font-size:10.5px;opacity:.8}
.mk-pod__controls{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:12px}
.mk-pod__ctrl{opacity:.85;display:flex}
.mk-pod__ctrl i{width:20px;height:20px}
.mk-pod__play{
  width:44px;height:44px;border-radius:50%;background:#fff;color:#4338CA;
  display:flex;align-items:center;justify-content:center;
}
.mk-pod__play i{width:20px;height:20px;fill:currentColor}
.mk-pod__speed{padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.16);font-size:11px;font-weight:700}

/* ============================================================
   8 — VIDEO LESSON (16:9 panel)
   ============================================================ */
.mk-vid{border-radius:var(--mk-radius);overflow:hidden;background:#0F172A;box-shadow:var(--mk-shadow)}
.mk-vid__stage{position:relative;aspect-ratio:16/9;padding:22px 24px;background:linear-gradient(140deg,#12233F,#1E3A5F 55%,#2A5580);color:#fff}
.mk-vid__stage::after{
  content:'';position:absolute;right:-40px;top:-40px;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle,rgba(96,165,250,.35),rgba(96,165,250,0) 70%);
}
.mk-vid__chip{
  display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;
  background:rgba(255,255,255,.14);font-size:10.5px;font-weight:700;
}
.mk-vid__title{font-size:20px;font-weight:800;letter-spacing:-.02em;margin:12px 0 12px;max-width:22ch}
.mk-vid__bullets{display:flex;flex-direction:column;gap:8px;max-width:34ch}
.mk-vid__bullet{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;color:rgba(255,255,255,.88)}
.mk-vid__bullet i{width:15px;height:15px;color:#93C5FD;margin-top:2px}
.mk-vid__caption{
  position:absolute;left:24px;right:24px;bottom:18px;
  padding:9px 12px;border-radius:10px;background:rgba(8,15,28,.62);
  font-size:12px;color:rgba(255,255,255,.92);backdrop-filter:blur(6px);
}
.mk-vid__bar{display:flex;align-items:center;gap:12px;padding:10px 14px;background:#0B1424;color:rgba(255,255,255,.85)}
.mk-vid__bar i{width:17px;height:17px}
.mk-vid__seek{flex:1;height:4px;border-radius:999px;background:rgba(255,255,255,.18);position:relative}
.mk-vid__seek::before{content:'';position:absolute;inset:0 auto 0 0;width:42%;border-radius:999px;background:#60A5FA}
.mk-vid__counter{font-size:10.5px;font-weight:700;opacity:.8;white-space:nowrap}

/* ============================================================
   9 — POMODORO RING (float)
   ============================================================ */
.mk-pom{
  width:132px;padding:14px;border-radius:20px;text-align:center;
  background:var(--mk-surface);border:1px solid var(--mk-line);box-shadow:var(--mk-shadow);
}
.mk-pom__ring{
  width:100%;max-width:88px;aspect-ratio:1;margin:0 auto 8px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:conic-gradient(var(--mk-purple) 0turn .62turn,var(--mk-line-2) .62turn 1turn);
}
.mk-pom__ring-inner{
  width:79%;height:79%;border-radius:50%;background:var(--mk-surface);
  display:flex;align-items:center;justify-content:center;
}
.mk-pom__time{font-size:18px;font-weight:800;letter-spacing:-.02em}
.mk-pom__label{
  font-size:9.5px;font-weight:800;letter-spacing:.06em;line-height:1.2;
  text-transform:uppercase;color:var(--mk-t3);
}
.mk-pom__session{font-size:10.5px;color:var(--mk-t3)}

@media(prefers-reduced-motion:reduce){
  .mk *,.mk *::before,.mk *::after{animation:none!important}
  .mk-bar__fill{width:var(--w,50%)}
}

/* ============================================================
   PAGE INTEGRATION — sizing inside the existing page frames
   ============================================================ */

/* marketing.html — hero panel */
.hero__mockslot{display:flex;justify-content:center;padding:.25rem 0 .5rem}
.hero__mockslot .mk-phone{max-width:296px}

/* marketing.html — studio stages & screenshot carousels
   (the surrounding figure/viewport already supplies card chrome) */
.studio__shot .mk-slot,.shot-carousel__slide .mk-slot{display:block;width:100%}
.shot .mk-panel,.shot-carousel__slide .mk-panel{border:none;box-shadow:none;border-radius:0}
.studio__shot--chrome .mk-panel__bar{display:none}
.studio__stage .mk-vid,.shot-carousel__slide .mk-vid{border-radius:0;box-shadow:none}
.studio__stage .mk-pod{border-radius:0;box-shadow:none}
.shot-carousel__slide .mk-phone{max-width:300px;margin:1rem auto}

/* marketing.html — dashboard section */
.dashboard__visual .mk-slot{display:flex;justify-content:center}

/* marketing.html — pomodoro float */
.toolkit__pomodoro-ring.mk-slot{background:none;border:none;box-shadow:none;width:118px}
.toolkit__pomodoro-ring.mk-slot .mk-pom{width:100%}

/* index.html — dark home hero + reel */
.hero__main-shot--mock{background:none;border:none;box-shadow:none;border-radius:0;overflow:visible}
/* z-index keeps the floating cards above the phone frame */
.hero__float--mock{background:none;border:none;box-shadow:none;z-index:2}
.hero__float--ring .mk-pom{width:100%;padding:12px}
.hero__float--podcast .mk-pod{padding:14px}
.hero__float--podcast .mk-pod__art{width:44px;height:44px}
.hero__float--podcast .mk-pod__title{font-size:13px}
.reel__slide .mk-slot{width:100%;max-width:740px}
.reel__slide .mk-phone{max-width:280px}
.reel__slide .mk-vid,.reel__slide .mk-panel{box-shadow:0 18px 44px rgba(0,0,0,.45)}


/* ════════════════════════════════════════════════════════════
   BATCH 2 — shared primitives
   ════════════════════════════════════════════════════════════ */
.mk-grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mk-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mk-card{padding:12px;border-radius:12px;border:1px solid var(--mk-line);background:var(--mk-surface-2)}
.mk-card--plain{background:var(--mk-surface)}
.mk-title{font-size:13.5px;font-weight:800;line-height:1.3;letter-spacing:-.01em}
.mk-body{font-size:12.5px;line-height:1.55;color:var(--mk-t2)}
.mk-mono{font-variant-numeric:tabular-nums}
.mk-spacer{flex:1}
.mk-divider{height:1px;background:var(--mk-line-2);margin:10px 0}

/* option rows / selectable cards */
.mk-opt{
  display:flex;align-items:center;gap:9px;min-width:0;
  padding:9px 11px;border-radius:12px;
  border:1px solid var(--mk-line);background:var(--mk-surface);
  font-size:12.5px;font-weight:700;color:var(--mk-t1);
}
.mk-opt.is-on{border-color:var(--mk-purple);background:var(--mk-purple-soft);color:var(--mk-purple)}
.mk-opt.is-on--green{border-color:var(--mk-green);background:var(--mk-green-soft);color:var(--mk-green)}
.mk-opt__ic{
  flex:none;width:26px;height:26px;border-radius:8px;
  display:grid;place-items:center;background:var(--mk-surface-3);color:var(--mk-t2);
}
.mk-opt__ic i{width:14px;height:14px}
.mk-opt.is-on .mk-opt__ic{background:var(--mk-purple);color:#fff}
.mk-opt__txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.mk-opt__d{font-size:10.5px;font-weight:500;color:var(--mk-t3);line-height:1.35}
.mk-opt__end{margin-left:auto;flex:none;color:var(--mk-t3);display:flex;align-items:center}
.mk-opt__end i{width:14px;height:14px}
.mk-opt.is-on .mk-opt__end{color:var(--mk-purple)}
.mk-box{display:flex;flex-direction:column;gap:7px}

/* checkbox / radio marks */
.mk-tick{
  flex:none;width:17px;height:17px;border-radius:5px;
  border:1.5px solid var(--mk-line);background:var(--mk-surface);
  display:grid;place-items:center;color:transparent;
}
.mk-tick i{width:11px;height:11px}
.mk-tick.is-on{background:var(--mk-purple);border-color:var(--mk-purple);color:#fff}
.mk-radio{flex:none;width:16px;height:16px;border-radius:999px;border:1.5px solid var(--mk-line)}
.mk-radio.is-on{border:5px solid var(--mk-purple)}

/* slider + toggle */
.mk-slider{position:relative;height:5px;border-radius:999px;background:var(--mk-line-2);margin:9px 3px}
.mk-slider__fill{position:absolute;inset:0 auto 0 0;width:var(--w,55%);border-radius:999px;background:var(--mk-purple)}
.mk-slider__knob{
  position:absolute;top:50%;left:var(--w,55%);width:15px;height:15px;border-radius:999px;
  transform:translate(-50%,-50%);background:#fff;border:2px solid var(--mk-purple);
  box-shadow:0 2px 6px rgba(17,24,39,.18);
}
.mk-toggle{
  flex:none;width:34px;height:19px;border-radius:999px;background:var(--mk-line);position:relative;
}
.mk-toggle::after{
  content:'';position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:999px;
  background:#fff;box-shadow:0 1px 3px rgba(17,24,39,.25);transition:left .2s;
}
.mk-toggle.is-on{background:var(--mk-purple)}
.mk-toggle.is-on::after{left:17px}

/* textarea-ish field */
.mk-field{
  padding:10px 12px;border-radius:12px;background:var(--mk-surface-2);
  border:1px solid var(--mk-line);font-size:12.5px;color:var(--mk-t3);line-height:1.5;
}
.mk-field--tall{min-height:56px}
.mk-drop{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:15px;border-radius:12px;border:1.5px dashed var(--mk-line);
  background:var(--mk-surface-2);font-size:12px;font-weight:700;color:var(--mk-t3);
}
.mk-drop i{width:15px;height:15px}

/* metrics */
.mk-metric{padding:11px;border-radius:12px;background:var(--mk-surface-2);border:1px solid var(--mk-line)}
.mk-metric__v{font-size:19px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.mk-metric__l{margin-top:3px;font-size:10.5px;font-weight:600;color:var(--mk-t3);line-height:1.3}
.mk-metric--purple .mk-metric__v{color:var(--mk-purple)}
.mk-metric--green .mk-metric__v{color:var(--mk-green)}
.mk-metric--blue .mk-metric__v{color:var(--mk-blue)}

/* heatmap */
.mk-heat{display:grid;grid-template-columns:repeat(16,1fr);gap:3px}
.mk-heat span{aspect-ratio:1;border-radius:3px;background:var(--mk-line-2)}
.mk-heat span[data-l="1"]{background:rgba(124,58,237,.22)}
.mk-heat span[data-l="2"]{background:rgba(124,58,237,.45)}
.mk-heat span[data-l="3"]{background:rgba(124,58,237,.70)}
.mk-heat span[data-l="4"]{background:var(--mk-purple)}
.mk-heat__key{display:flex;align-items:center;gap:4px;font-size:10px;color:var(--mk-t3)}
.mk-heat__key span{width:9px;height:9px;border-radius:2px}

/* column chart */
.mk-cols{display:flex;align-items:flex-end;gap:7px;height:104px}
.mk-cols__col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%}
.mk-cols__bar{
  width:100%;margin-top:auto;border-radius:6px 6px 3px 3px;
  height:var(--h,50%);background:linear-gradient(180deg,var(--mk-purple),var(--mk-blue));
}
.mk-cols__col--peak .mk-cols__bar{background:linear-gradient(180deg,var(--mk-amber),#F59E0B)}
.mk-cols__lbl{font-size:9.5px;font-weight:700;color:var(--mk-t3)}

/* donut */
.mk-donut{
  width:100%;max-width:104px;aspect-ratio:1;border-radius:999px;flex:none;
  background:conic-gradient(var(--mk-green) 0 var(--a),var(--mk-blue) var(--a) var(--b),var(--mk-line-2) var(--b) 100%);
  display:grid;place-items:center;
}
.mk-donut__hole{
  width:64%;height:64%;border-radius:999px;background:var(--mk-surface);
  display:grid;place-items:center;text-align:center;line-height:1.15;
}
.mk-donut__v{font-size:16px;font-weight:800;letter-spacing:-.02em}
.mk-legend{display:flex;flex-direction:column;gap:7px;font-size:11.5px;color:var(--mk-t2)}
.mk-legend__row{display:flex;align-items:center;gap:7px}
.mk-legend__sw{width:9px;height:9px;border-radius:3px;flex:none}
.mk-legend__n{margin-left:auto;font-weight:800;color:var(--mk-t1)}

/* ring gauge */
.mk-gauge{
  width:100%;max-width:88px;aspect-ratio:1;border-radius:999px;flex:none;
  background:conic-gradient(var(--mk-purple) 0 var(--a,72%),var(--mk-line-2) var(--a,72%) 100%);
  display:grid;place-items:center;
}
.mk-gauge__hole{width:70%;height:70%;border-radius:999px;background:var(--mk-surface);display:grid;place-items:center}
.mk-gauge__v{font-size:15px;font-weight:800;letter-spacing:-.02em}

/* source cards */
.mk-src{display:flex;align-items:flex-start;gap:9px;padding:10px;border-radius:12px;background:var(--mk-surface-2);border:1px solid var(--mk-line)}
.mk-src__fav{
  flex:none;width:26px;height:26px;border-radius:7px;display:grid;place-items:center;
  font-size:11px;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--mk-blue),var(--mk-purple));
}
.mk-src__b{min-width:0;flex:1}
.mk-src__t{font-size:12px;font-weight:700;line-height:1.35;color:var(--mk-t1)}
.mk-src__d{margin-top:2px;font-size:10.5px;color:var(--mk-t3)}
.mk-src__trust{display:flex;align-items:center;gap:5px;margin-top:6px;font-size:10px;font-weight:800;color:var(--mk-green)}
.mk-src__trust .mk-bar{flex:1;height:4px}
.mk-cite{
  display:inline-flex;align-items:center;justify-content:center;min-width:15px;height:15px;padding:0 4px;
  border-radius:5px;background:var(--mk-blue-soft);color:var(--mk-blue);
  font-size:9.5px;font-weight:800;vertical-align:2px;margin:0 1px;
}

/* waveform */
.mk-wave{display:flex;align-items:center;justify-content:center;gap:3px;height:44px}
.mk-wave span{
  width:3px;border-radius:999px;background:var(--mk-purple);
  height:var(--h,40%);animation:mkWave 1.1s ease-in-out infinite;animation-delay:var(--d,0s);
}
@keyframes mkWave{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.mk-wave span{animation:none}}

/* ── screen-specific ── */
.mk-qz__q{font-size:13px;font-weight:700;line-height:1.45;margin-bottom:10px}
.mk-qz__top{display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:700;color:var(--mk-t3);margin-bottom:6px}

.mk-fc{
  border-radius:14px;border:1px solid var(--mk-line);background:var(--mk-surface-2);
  padding:22px 16px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:9px;min-height:132px;justify-content:center;
}
.mk-fc__q{font-size:14px;font-weight:800;line-height:1.4;letter-spacing:-.01em}
.mk-fc__hint{font-size:11px;color:var(--mk-t3)}

.mk-phase{display:flex;align-items:center;gap:0;margin:10px 0}
.mk-phase__s{flex:1;text-align:center;font-size:9.5px;font-weight:800;color:var(--mk-t3);position:relative;padding-top:17px}
.mk-phase__s::before{
  content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:11px;height:11px;border-radius:999px;background:var(--mk-line);z-index:1;
}
.mk-phase__s::after{content:'';position:absolute;top:5px;left:0;right:0;height:2px;background:var(--mk-line-2)}
.mk-phase__s:first-child::after{left:50%}
.mk-phase__s:last-child::after{right:50%}
.mk-phase__s.is-done::before{background:var(--mk-green)}
.mk-phase__s.is-done{color:var(--mk-green)}
.mk-phase__s.is-on::before{background:var(--mk-purple);box-shadow:0 0 0 3px var(--mk-purple-soft)}
.mk-phase__s.is-on{color:var(--mk-purple)}

.mk-math{
  padding:10px 12px;border-radius:10px;background:var(--mk-surface-2);border:1px solid var(--mk-line);
  font-family:'Georgia',serif;font-size:13px;color:var(--mk-t1);
}
.mk-math__lbl{font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--mk-purple);margin-bottom:4px;font-family:inherit}
.mk-math--ans{background:var(--mk-green-soft);border-color:transparent}
.mk-math--ans .mk-math__lbl{color:var(--mk-green)}

.mk-lvl{display:inline-flex;padding:3px 8px;border-radius:999px;font-size:9.5px;font-weight:800}
.mk-lvl--4{background:var(--mk-green-soft);color:var(--mk-green)}
.mk-lvl--3{background:var(--mk-blue-soft);color:var(--mk-blue)}
.mk-lvl--2{background:var(--mk-amber-soft);color:var(--mk-amber)}

.mk-voice__t{font-size:12.5px;line-height:1.5;color:var(--mk-t2)}
.mk-voice__t b{color:var(--mk-t1);font-weight:700}
.mk-voice__mic{
  width:56px;height:56px;border-radius:999px;margin:0 auto;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,var(--mk-purple),var(--mk-blue));box-shadow:0 8px 22px rgba(124,58,237,.35);
}
.mk-voice__mic i{width:22px;height:22px}

.mk-sim{position:relative;border-radius:12px;overflow:hidden;background:#0E1220}
.mk-sim > svg{display:block;width:100%;height:auto}
.mk-sim__chip svg{width:12px;height:12px;flex:none}
.mk-sim__chip{position:absolute;top:9px;left:9px;display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:999px;background:rgba(0,0,0,.5);color:#fff;font-size:10px;font-weight:700;backdrop-filter:blur(6px)}
.mk-sim__chip i{width:12px;height:12px}

.mk-chartbox{border-radius:12px;border:1px solid var(--mk-line);background:var(--mk-surface);padding:12px}
.mk-chartbox > svg{display:block;width:100%;height:auto;overflow:visible}
.mk-insight{margin-top:10px;padding:11px;border-radius:12px;background:var(--mk-purple-soft)}
.mk-insight__h{display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--mk-purple);margin-bottom:5px}
.mk-insight__h i{width:13px;height:13px}
.mk-insight p{font-size:12px;line-height:1.5;color:var(--mk-t2)}

.mk-fmt{
  display:flex;flex-direction:column;gap:5px;align-items:flex-start;
  padding:10px;border-radius:12px;border:1px solid var(--mk-line);background:var(--mk-surface);
}
.mk-fmt.is-on{border-color:var(--mk-purple);background:var(--mk-purple-soft)}
.mk-fmt__ic{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;background:var(--mk-surface-3);color:var(--mk-t2)}
.mk-fmt__ic i{width:13px;height:13px}
.mk-fmt.is-on .mk-fmt__ic{background:var(--mk-purple);color:#fff}
.mk-fmt__t{font-size:11.5px;font-weight:700;line-height:1.3}
.mk-fmt.is-on .mk-fmt__t{color:var(--mk-purple)}

/* narrow-container guards */
@container (max-width: 420px){
  .mk-grid3{grid-template-columns:1fr 1fr}
  .mk-heat{grid-template-columns:repeat(11,1fr)}
}