

.ml-head{padding-bottom:clamp(1.5rem,4vw,2.5rem)}
.ml-head .lv-k{margin:0 0 .7rem;color:var(--hazard)}

.st-pass{--s:#1E7F45}.st-warn{--s:#9A5B00}.st-fail{--s:#B3261E}.st-unknown{--s:var(--steel)}.st-info{--s:#2F6FA8}
:root[data-theme="dark"] .st-pass{--s:#4CC37A}
:root[data-theme="dark"] .st-warn{--s:#E3A43A}
:root[data-theme="dark"] .st-fail{--s:#FF7A6E}
:root[data-theme="dark"] .st-info{--s:#6FA8DC}

.ml-intake{
  margin-top:clamp(1.5rem,4vw,2.25rem);max-width:46rem;
  border:2px solid var(--iron);background:var(--paper);
  padding:1rem clamp(.9rem,2.5vw,1.25rem) 1.1rem;
  box-shadow:0 1px 0 var(--line-strong) inset,0 18px 40px -24px rgba(0,0,0,.55);
}
.ml-intake-k{display:block;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mono-label);margin-bottom:.5rem}
.ml-intake-row{display:flex;border:2px solid var(--iron);background:var(--ground)}
.ml-intake-row:focus-within{outline:3px solid var(--hazard);outline-offset:2px}
.ml-at{display:grid;place-items:center;padding:0 .2rem 0 .9rem;font:500 clamp(1.3rem,3.6vw,1.75rem)/1 "IBM Plex Mono",ui-monospace,monospace;color:var(--steel-light)}
.ml-intake input{
  flex:1;min-width:0;border:0;background:transparent;color:var(--iron);
  font:inherit;font-size:clamp(1.3rem,3.6vw,1.75rem);font-variation-settings:"wdth" 104,"wght" 650;
  padding:.85rem .6rem .85rem .35rem;letter-spacing:-.01em;
}
.ml-intake input::placeholder{color:var(--steel-light);opacity:.75;font-variation-settings:"wdth" 104,"wght" 500}
.ml-intake input:focus{outline:none}
.ml-go{
  display:flex;align-items:center;justify-content:center;gap:.55rem;
  font:inherit;font-size:1.0625rem;font-variation-settings:"wdth" 110,"wght" 750;
  padding:0 1.35rem;border:0;border-left:2px solid var(--iron);cursor:pointer;
  background:var(--hazard);color:var(--on-iron);white-space:nowrap;
}
:root[data-theme="light"] .ml-go{color:#14110F}
.ml-go svg{width:1.3rem;height:1.3rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.ml-go:hover:not(:disabled){filter:brightness(1.08)}
.ml-go:focus-visible{outline:3px solid var(--iron);outline-offset:-5px}
.ml-go:disabled{cursor:progress}
.ml-go.is-busy svg{animation:ml-spin 1s linear infinite}
@keyframes ml-spin{to{transform:rotate(360deg)}}
.ml-note{margin:.75rem 0 0;font-size:.8125rem;color:var(--steel-light)}
.ml-note.is-err{color:var(--st-err,#B3261E);font-weight:600}
:root[data-theme="dark"] .ml-note.is-err{color:#FF7A6E}
@media (max-width:40rem){
  .ml-intake-row{flex-wrap:wrap}
  .ml-intake input{flex:1 1 0}
  .ml-go{flex:1 1 100%;min-height:3.1rem;border-left:0;border-top:2px solid var(--iron)}
}

.ml-result{padding-top:clamp(1rem,3vw,1.5rem);scroll-margin-top:4.5rem}
.ml-result:focus{outline:none}
.ml-card{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:0;
  border:2px solid var(--plate-edge);
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.12) 0 1px,transparent 1px 3px),
    linear-gradient(158deg,var(--plate-face) 0%,var(--plate-face-2) 52%,var(--plate-face) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 0 rgba(0,0,0,.14),0 4px 0 var(--plate-edge);
}
@media (min-width:44rem){.ml-card{grid-template-columns:auto minmax(0,1fr)}}
.ml-card::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 13px 13px,#A9A399 0 3px,#6E685E 3px 4.2px,transparent 4.3px),
    radial-gradient(circle at calc(100% - 13px) 13px,#A9A399 0 3px,#6E685E 3px 4.2px,transparent 4.3px),
    radial-gradient(circle at 13px calc(100% - 13px),#A9A399 0 3px,#6E685E 3px 4.2px,transparent 4.3px),
    radial-gradient(circle at calc(100% - 13px) calc(100% - 13px),#A9A399 0 3px,#6E685E 3px 4.2px,transparent 4.3px);
}
.ml-grade{
  --g:var(--steel);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;
  padding:1.6rem 2.4rem 1.4rem;min-width:12rem;
  border-bottom:2px solid var(--plate-edge);
}
@media (min-width:44rem){.ml-grade{border-bottom:0;border-right:2px solid var(--plate-edge)}}
.ml-grade[data-grade="A"],.ml-grade[data-grade="B"]{--g:#1E7F45}
.ml-grade[data-grade="C"]{--g:#9A5B00}
.ml-grade[data-grade="D"],.ml-grade[data-grade="E"],.ml-grade[data-grade="F"]{--g:#B3261E}
:root[data-theme="dark"] .ml-grade[data-grade="A"],:root[data-theme="dark"] .ml-grade[data-grade="B"]{--g:#4CC37A}
:root[data-theme="dark"] .ml-grade[data-grade="C"]{--g:#E3A43A}
:root[data-theme="dark"] .ml-grade[data-grade="D"],:root[data-theme="dark"] .ml-grade[data-grade="E"],:root[data-theme="dark"] .ml-grade[data-grade="F"]{--g:#FF7A6E}
.ml-letter{
  display:grid;place-items:center;width:clamp(7rem,22vw,9.5rem);aspect-ratio:1;
  font-weight:normal;font-variation-settings:"wdth" 125,"wght" 800;
  font-size:clamp(5.5rem,18vw,8rem);line-height:1;letter-spacing:-.04em;
  color:var(--g);border:4px solid var(--g);border-radius:6px;
  background:color-mix(in srgb,var(--g) 9%,transparent);
  box-shadow:inset 0 0 0 3px color-mix(in srgb,var(--g) 22%,transparent);
  text-shadow:0 1px 0 rgba(255,255,255,.35);
}
:root[data-theme="dark"] .ml-letter{text-shadow:none}
.ml-score{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.875rem;color:var(--mono-label)}
.ml-score b{color:var(--iron);font-size:1.125rem}
.ml-facts{padding:1.3rem clamp(1.1rem,3vw,1.8rem) 1.4rem;min-width:0;display:flex;flex-direction:column;gap:.9rem}
.ml-dom{margin:0;font-variation-settings:"wdth" 116,"wght" 800;font-size:clamp(1.5rem,4.6vw,2.4rem);line-height:1.05;letter-spacing:-.02em;overflow-wrap:anywhere}
.ml-meter{height:.55rem;background:var(--ground);outline:1px solid var(--plate-edge);outline-offset:-1px;position:relative}
.ml-meter i{position:absolute;inset:0 auto 0 0;width:var(--w,0%);background:var(--iron)}
.ml-facts dl{margin:0;display:grid;gap:.55rem 1.4rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:56rem){.ml-facts dl{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ml-facts dl div{border-left:2px solid var(--line-strong);padding:.05rem 0 .05rem .7rem;min-width:0}
.ml-facts dt{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mono-label)}
.ml-facts dd{margin:.15rem 0 0;font-variation-settings:"wdth" 100,"wght" 600;font-size:.9375rem;line-height:1.35;overflow-wrap:anywhere}
.ml-facts dd code{font-size:.8125rem;font-weight:500}
.ml-share{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .9rem}
.ml-copy{padding:.55rem 1.1rem;font:inherit;font-size:.9375rem;font-variation-settings:"wdth" 106,"wght" 600;cursor:pointer}
.ml-copied{font-size:.8125rem;color:var(--steel);overflow-wrap:anywhere}

.ml-checks{list-style:none;margin:1.5rem 0 0;padding:0;border-top:3px solid var(--iron)}
.ml-check{
  display:grid;grid-template-columns:minmax(0,1fr);gap:.35rem 1.25rem;
  padding:1rem 0 1.05rem;border-bottom:1px solid var(--line);
}
@media (min-width:48rem){.ml-check{grid-template-columns:9.5rem minmax(0,1fr)}}
.ml-badge{
  justify-self:start;align-self:start;display:inline-flex;align-items:center;gap:.4rem;
  padding:.2rem .65rem .2rem .3rem;border:2px solid var(--s);color:var(--s);
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;
  background:color-mix(in srgb,var(--s) 8%,var(--paper));white-space:nowrap;
}
.ml-badge svg{width:1.1rem;height:1.1rem;flex:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ml-badge svg > :first-child{fill:var(--s);stroke:none}
.ml-badge svg > :not(:first-child){fill:none;stroke:var(--paper)}
.ml-check h3{margin:0;font-size:1.0625rem;font-variation-settings:"wdth" 104,"wght" 700;line-height:1.3}
.ml-check h3 code{margin-left:.35rem;font-size:.75rem;color:var(--steel-light);font-weight:500}
.ml-check p{margin:.25rem 0 0;color:var(--steel);font-size:.9375rem;max-width:var(--measure)}
.ml-fix{
  margin-top:.55rem !important;padding:.45rem .7rem;border-left:3px solid var(--hazard);
  background:var(--chip-bg);color:var(--iron) !important;
}
.ml-fix b{font-variation-settings:"wdth" 100,"wght" 700;font-weight:normal;margin-right:.3rem}

.ml-records{display:grid;gap:1rem;margin-top:1.5rem}
@media (min-width:56rem){.ml-records{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ml-rec{margin:0;border:2px solid var(--iron);background:var(--stage-bg);min-width:0}
.ml-rec figcaption{
  display:flex;justify-content:space-between;gap:.75rem;flex-wrap:wrap;
  padding:.45rem .8rem;background:var(--iron);color:var(--on-iron);
  font-size:.875rem;font-variation-settings:"wdth" 104,"wght" 700;
}
.ml-rec figcaption span{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.75rem;opacity:.75;font-weight:500}
.ml-rec pre{
  margin:0;padding:.9rem .9rem 1rem;color:#D8E6D0;
  font:500 .875rem/1.55 "IBM Plex Mono",ui-monospace,monospace;
  white-space:pre-wrap;overflow-wrap:anywhere;
}
.ml-rec pre.is-none{color:#FF8F84}

.ml-how{
  margin:1.5rem 0 0;padding:.85rem 1rem;border:1px dashed var(--line-strong);
  font-size:.875rem;color:var(--steel);line-height:1.55;max-width:none;
}
.ml-how .lv-k{display:block;margin-bottom:.25rem}
.ml-how b{color:var(--iron);font-variant-numeric:tabular-nums}

.ml-why{display:grid;gap:2px;background:var(--line);border:2px solid var(--iron)}
@media (min-width:56rem){.ml-why{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ml-why article{background:var(--paper);padding:1.2rem 1.3rem 1.3rem}
.ml-why h3{margin:0 0 .45rem;font-size:1.1875rem;font-variation-settings:"wdth" 108,"wght" 750;font-weight:normal}
.ml-why p{margin:0;color:var(--steel);font-size:.9375rem;line-height:1.55}
.ml-why article:last-child h3{color:var(--rust)}
.ml-run{margin:.9rem 0 0;padding:0;list-style:none;display:grid;gap:.6rem;max-width:var(--measure)}
.ml-run li{position:relative;padding-left:1.35rem;color:var(--steel)}
.ml-run li::before{content:"";position:absolute;left:0;top:.68em;width:.55rem;height:2px;background:var(--hazard)}
.ml-run b{color:var(--iron);font-variation-settings:"wdth" 104,"wght" 700;font-weight:normal}

.ml-cta{padding-top:0}
.ml-cta-plate{
  background:var(--iron);color:var(--on-iron);padding:clamp(1.5rem,4vw,2.5rem);
  border-top:6px solid var(--hazard);
}
.ml-cta-plate h2{margin:0;font-variation-settings:"wdth" 116,"wght" 800;font-size:clamp(1.6rem,4.4vw,2.6rem);line-height:1.02;letter-spacing:-.02em;max-width:20ch}
.ml-cta-plate p{margin:.8rem 0 1.4rem;max-width:52ch;opacity:.85}
.ml-cta-plate .btn-solid{background:var(--hazard);border-color:var(--hazard);color:#14110F}
.ml-cta-plate .btn-solid:hover{background:var(--on-iron);border-color:var(--on-iron);color:var(--iron)}
.ml-cta-plate .btn-line{border-color:var(--on-iron);color:var(--on-iron)}
.ml-cta-plate .btn-line:hover{background:var(--on-iron);color:var(--iron)}
.ml-cta-plate .btn{overflow-wrap:anywhere}
.ml-cta-plate :focus-visible{outline-color:var(--hazard)}

@media (prefers-reduced-motion:no-preference){
  .ml-result.is-in .ml-card{animation:ml-seat .45s cubic-bezier(.2,.75,.3,1) both}
  .ml-result.is-in .ml-letter{animation:ml-stamp .42s cubic-bezier(.3,1.6,.5,1) .25s both}
  .ml-result.is-in .ml-meter i{transition:width .9s cubic-bezier(.2,.75,.3,1) .35s}
  .ml-result.is-in .ml-check{animation:ml-arrive .38s cubic-bezier(.2,.75,.3,1) both;animation-delay:calc(.55s + var(--i) * 110ms)}
  .ml-result.is-in .ml-check .ml-badge{animation:ml-pop .3s cubic-bezier(.3,1.6,.5,1) both;animation-delay:calc(.7s + var(--i) * 110ms)}
  .ml-result.is-in .ml-records,.ml-result.is-in .ml-how{animation:ml-arrive .4s ease both;animation-delay:calc(.65s + var(--n) * 110ms)}
}
@keyframes ml-seat{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes ml-stamp{from{opacity:0;transform:scale(1.6) rotate(-8deg)}to{opacity:1;transform:none}}
@keyframes ml-arrive{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
@keyframes ml-pop{from{transform:scale(.6)}to{transform:none}}
.ml-run-sec{padding-top:0}
