/* Generated from components/mock.mjs — do not edit by hand. */
.mk{--mk-navy:#0B1F3A;--mk-navy-2:#16304F;--mk-cream:#F6F3EE;--mk-ink:#14213D;--mk-terra:#C2552B;
  --mk-ok:#0E9F6E;--mk-warn:#D97706;--mk-line:rgba(20,33,61,.12);--mk-loop:24s;
  width:min(320px,100%);margin-inline:auto}
.mk-phone{position:relative;aspect-ratio:320/658;background:var(--mk-navy);border-radius:34px;padding:11px;
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 24px 50px -30px rgba(8,23,41,.75)}
.mk-screen{position:relative;height:100%;background:var(--mk-cream);border-radius:24px;overflow:hidden;
  display:flex;flex-direction:column;color:var(--mk-ink);font-size:12.5px;line-height:1.45}
.mk-notch{position:absolute;top:6px;left:50%;transform:translateX(-50%);width:74px;height:5px;border-radius:3px;
  background:rgba(20,33,61,.16);z-index:5}
.mk-top{display:flex;align-items:center;gap:7px;padding:16px 14px 10px;flex:0 0 auto}
.mk-top img{width:19px;height:19px}
.mk-top b{font-size:11px;letter-spacing:.11em;text-transform:uppercase;font-weight:600;color:var(--mk-ink)}
.mk-top .mk-timer{margin-left:auto;font-size:10.5px;letter-spacing:.08em;color:rgba(20,33,61,.55);font-variant-numeric:tabular-nums}
.mk-stage{position:relative;flex:1 1 auto;min-height:0}
.mk-scene{position:absolute;inset:0;padding:4px 14px 16px;display:flex;flex-direction:column;opacity:0;visibility:hidden}
.mk-step{font-size:10px;letter-spacing:.13em;text-transform:uppercase;font-weight:600;color:var(--mk-terra);margin:0 0 10px}
.mk-h{font-family:var(--serif,Georgia,serif);font-weight:600;font-size:17px;line-height:1.2;letter-spacing:-.02em;margin:0 0 12px}

/* 1 — choose your topic */
.mk-topic{border:1px solid var(--mk-line);border-radius:6px;background:#fff;padding:11px 12px;margin-bottom:9px;
  display:flex;align-items:center;gap:9px;position:relative}
.mk-topic span{font-weight:600;font-size:13px}
.mk-topic i{width:15px;height:15px;border-radius:50%;border:1.5px solid rgba(20,33,61,.3);flex:0 0 auto}
.mk-topic--pick{position:relative}
.mk-topic--pick i::after{content:"";position:absolute;left:13.5px;top:50%;width:7px;height:7px;border-radius:50%;
  background:var(--mk-navy);transform:translateY(-50%) scale(0);animation:mk-pick var(--mk-loop) linear infinite}
.mk-tap{position:absolute;right:14px;top:50%;width:26px;height:26px;margin-top:-13px;border-radius:50%;
  border:2px solid var(--mk-terra);opacity:0;animation:mk-tap var(--mk-loop) linear infinite}
@keyframes mk-pick{0%,11%{transform:translateY(-50%) scale(0)}13%,19%{transform:translateY(-50%) scale(1)}20%,100%{transform:translateY(-50%) scale(0)}}
@keyframes mk-tap{0%,8.5%{opacity:0;transform:scale(.4)}10%{opacity:1;transform:scale(.7)}12.5%{opacity:0;transform:scale(1.5)}100%{opacity:0;transform:scale(.4)}}

/* 2 — the examiner asks */
.mk-bubble{background:var(--mk-navy);color:var(--mk-cream);border-radius:6px;padding:12px 13px}
.mk-who{font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:rgba(246,243,238,.6);margin:0 0 6px}
.mk-q{font-family:var(--serif,Georgia,serif);font-size:15px;line-height:1.35;margin:0}
.mk-gloss{font-size:11px;color:rgba(20,33,61,.55);margin:9px 0 0}
.mk-wave{display:flex;align-items:center;gap:3px;height:34px;margin-top:14px}
.mk-wave i{flex:1 1 0;background:var(--mk-navy);border-radius:2px;height:100%;transform:scaleY(.16);transform-origin:center;
  animation:mk-w 1.05s ease-in-out infinite alternate}
.mk-wave--mic i{background:var(--mk-terra)}
@keyframes mk-w{from{transform:scaleY(.16)}to{transform:scaleY(1)}}

/* 3 — your answer */
.mk-rec{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:600;color:var(--mk-terra);margin:0 0 4px}
.mk-rec b{width:8px;height:8px;border-radius:50%;background:var(--mk-terra);animation:mk-blink 1.6s steps(1) infinite}
@keyframes mk-blink{0%,50%{opacity:1}51%,100%{opacity:.25}}
.mk-said{font-size:12.5px;line-height:1.6;margin:12px 0 0;color:rgba(20,33,61,.75)}

/* 4 — the report */
.mk-score{display:flex;align-items:baseline;gap:6px;margin:0 0 10px}
.mk-score b{font-family:var(--serif,Georgia,serif);font-weight:700;font-size:30px;line-height:1;letter-spacing:-.03em;color:var(--mk-navy)}
.mk-score span{font-size:11px;color:rgba(20,33,61,.55)}
.mk-score em{margin-left:auto;font-style:normal;font-size:9px;letter-spacing:.11em;text-transform:uppercase;font-weight:600;
  color:#0A6D4C;background:rgba(14,159,110,.1);border:1px solid rgba(14,159,110,.35);border-radius:2px;padding:2px 5px}
.mk-crit{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.mk-crit li{margin:0;display:grid;grid-template-columns:1fr 46px;gap:3px 8px;align-items:center;opacity:0;
  animation-duration:var(--mk-loop);animation-timing-function:linear;animation-iteration-count:infinite}
.mk-crit .mk-n{font-size:10.5px;line-height:1.25}
.mk-bar{grid-column:2;height:5px;border-radius:3px;background:rgba(20,33,61,.1);overflow:hidden}
.mk-bar i{display:block;height:100%;background:var(--mk-navy);transform:scaleX(0);transform-origin:left;
  animation-duration:var(--mk-loop);animation-timing-function:cubic-bezier(.2,.7,.3,1);animation-iteration-count:infinite}
.mk-bar--low i{background:var(--mk-warn)}
.mk-fix{margin-top:11px;border-radius:5px;border:1px solid rgba(217,119,6,.35);background:rgba(217,119,6,.08);padding:9px 10px;
  opacity:0;animation:mk-fix var(--mk-loop) linear infinite}
@keyframes mk-fix{0%,69%{opacity:0;transform:translateY(4px)}72%,81%{opacity:1;transform:none}83%,100%{opacity:0;transform:translateY(4px)}}
.mk-fix .mk-lbl{font-size:9px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:#8A4B04;margin:0 0 5px}
.mk-fix p{margin:0;font-size:11.5px;line-height:1.45}
.mk-fix .mk-err{color:#8A4B04;text-decoration:line-through}
.mk-fix .mk-ok{color:#0A6D4C;font-weight:600}
.mk-fix .mk-note{margin-top:5px;font-size:10.5px;color:rgba(20,33,61,.6)}

/* 5 — three actions */
.mk-acts{counter-reset:mka;list-style:none;margin:2px 0 0;padding:0;display:grid;gap:9px}
.mk-acts li{counter-increment:mka;margin:0;position:relative;padding-left:26px;font-size:12px;line-height:1.45}
.mk-acts li::before{content:counter(mka);position:absolute;left:0;top:0;width:19px;height:19px;border-radius:3px;
  border:1px solid var(--mk-navy);display:grid;place-items:center;font-size:10px;font-weight:700}
.mk-badge{margin-top:auto;padding-top:14px;display:flex;align-items:center;gap:7px;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(20,33,61,.5)}
.mk-badge img{width:16px;height:16px}

/* scenes */
.mk-scene{animation-duration:var(--mk-loop);animation-timing-function:linear;animation-iteration-count:infinite}
.mk-scene:nth-child(1){animation-name:mk-s1}
.mk-scene:nth-child(2){animation-name:mk-s2}
.mk-scene:nth-child(3){animation-name:mk-s3}
.mk-scene:nth-child(4){animation-name:mk-s4}
.mk-scene:nth-child(5){animation-name:mk-s5}
@keyframes mk-s1{0%{opacity:1;visibility:visible}17%{opacity:1;visibility:visible}19%,100%{opacity:0;visibility:hidden}}
@keyframes mk-s2{0%,18.5%{opacity:0;visibility:hidden}20%{opacity:1;visibility:visible}35%{opacity:1;visibility:visible}37%,100%{opacity:0;visibility:hidden}}
@keyframes mk-s3{0%,36.5%{opacity:0;visibility:hidden}38%{opacity:1;visibility:visible}52%{opacity:1;visibility:visible}54%,100%{opacity:0;visibility:hidden}}
@keyframes mk-s4{0%,53.5%{opacity:0;visibility:hidden}55%{opacity:1;visibility:visible}81%{opacity:1;visibility:visible}83%,100%{opacity:0;visibility:hidden}}
@keyframes mk-s5{0%,82.5%{opacity:0;visibility:hidden}84%{opacity:1;visibility:visible}97%,100%{opacity:1;visibility:visible}}
@keyframes mk-r0{0%,55.4%{opacity:0;transform:translateY(5px)}58.4%,81%{opacity:1;transform:none}83%,100%{opacity:0;transform:translateY(5px)}}
@keyframes mk-b0{0%,56.0%{transform:scaleX(0)}59.0%,81%{transform:scaleX(var(--v))}83%,100%{transform:scaleX(0)}}
@keyframes mk-r1{0%,56.9%{opacity:0;transform:translateY(5px)}59.9%,81%{opacity:1;transform:none}83%,100%{opacity:0;transform:translateY(5px)}}
@keyframes mk-b1{0%,57.5%{transform:scaleX(0)}60.5%,81%{transform:scaleX(var(--v))}83%,100%{transform:scaleX(0)}}
@keyframes mk-r2{0%,58.4%{opacity:0;transform:translateY(5px)}61.4%,81%{opacity:1;transform:none}83%,100%{opacity:0;transform:translateY(5px)}}
@keyframes mk-b2{0%,59.0%{transform:scaleX(0)}62.0%,81%{transform:scaleX(var(--v))}83%,100%{transform:scaleX(0)}}
@keyframes mk-r3{0%,59.9%{opacity:0;transform:translateY(5px)}62.9%,81%{opacity:1;transform:none}83%,100%{opacity:0;transform:translateY(5px)}}
@keyframes mk-b3{0%,60.5%{transform:scaleX(0)}63.5%,81%{transform:scaleX(var(--v))}83%,100%{transform:scaleX(0)}}
@keyframes mk-r4{0%,61.4%{opacity:0;transform:translateY(5px)}64.4%,81%{opacity:1;transform:none}83%,100%{opacity:0;transform:translateY(5px)}}
@keyframes mk-b4{0%,62.0%{transform:scaleX(0)}65.0%,81%{transform:scaleX(var(--v))}83%,100%{transform:scaleX(0)}}
@keyframes mk-r5{0%,62.9%{opacity:0;transform:translateY(5px)}65.9%,81%{opacity:1;transform:none}83%,100%{opacity:0;transform:translateY(5px)}}
@keyframes mk-b5{0%,63.5%{transform:scaleX(0)}66.5%,81%{transform:scaleX(var(--v))}83%,100%{transform:scaleX(0)}}
@keyframes mk-r6{0%,64.4%{opacity:0;transform:translateY(5px)}67.4%,81%{opacity:1;transform:none}83%,100%{opacity:0;transform:translateY(5px)}}
@keyframes mk-b6{0%,65.0%{transform:scaleX(0)}68.0%,81%{transform:scaleX(var(--v))}83%,100%{transform:scaleX(0)}}
@keyframes mk-r7{0%,65.9%{opacity:0;transform:translateY(5px)}68.9%,81%{opacity:1;transform:none}83%,100%{opacity:0;transform:translateY(5px)}}
@keyframes mk-b7{0%,66.5%{transform:scaleX(0)}69.5%,81%{transform:scaleX(var(--v))}83%,100%{transform:scaleX(0)}}
.mk-crit li:nth-child(1){animation-name:mk-r0}
.mk-crit li:nth-child(1) .mk-bar i{animation-name:mk-b0}
.mk-crit li:nth-child(2){animation-name:mk-r1}
.mk-crit li:nth-child(2) .mk-bar i{animation-name:mk-b1}
.mk-crit li:nth-child(3){animation-name:mk-r2}
.mk-crit li:nth-child(3) .mk-bar i{animation-name:mk-b2}
.mk-crit li:nth-child(4){animation-name:mk-r3}
.mk-crit li:nth-child(4) .mk-bar i{animation-name:mk-b3}
.mk-crit li:nth-child(5){animation-name:mk-r4}
.mk-crit li:nth-child(5) .mk-bar i{animation-name:mk-b4}
.mk-crit li:nth-child(6){animation-name:mk-r5}
.mk-crit li:nth-child(6) .mk-bar i{animation-name:mk-b5}
.mk-crit li:nth-child(7){animation-name:mk-r6}
.mk-crit li:nth-child(7) .mk-bar i{animation-name:mk-b6}
.mk-crit li:nth-child(8){animation-name:mk-r7}
.mk-crit li:nth-child(8) .mk-bar i{animation-name:mk-b7}

/* Reduced motion: no loop at all, just the finished report. */
@media(prefers-reduced-motion:reduce){
  .mk *,.mk *::after,.mk *::before{animation:none!important;transition:none!important}
  .mk-scene{opacity:0;visibility:hidden}
  .mk-scene--final{opacity:1;visibility:visible;position:relative;inset:auto;height:100%}
  .mk-crit li{opacity:1;transform:none}
  .mk-bar i{transform:scaleX(var(--v))}
  .mk-fix{opacity:1;transform:none}
  .mk-topic--pick i::after{transform:translateY(-50%) scale(1)}
  .mk-wave i{transform:scaleY(.55)}
}