/* MoE lab: the quantization lab's palette and slide layout, rebuilt under .moe-* class names. */
.moe-page{margin:0;background:#080e1b;color:#e2e9f3;font-family:system-ui,sans-serif;color-scheme:dark}
.moe-page main{max-width:1100px;margin:25px auto;padding:0 18px}
.moe-page h1{font-size:26px;font-weight:500;margin:18px 0 8px}
.moe-page-intro{max-width:850px;font-size:13px;color:#a4b1c7;line-height:1.8}
.moe-page-nav{max-width:1100px;margin:auto;padding:20px 18px;display:flex;gap:20px;justify-content:space-between;align-items:center;border-bottom:1px solid #253246}
.moe-page a{color:#9adbe2;text-decoration:none;font-size:13px}
.moe-page-nav nav{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.moe-page a[aria-current]{color:#efc373;border-bottom:1px solid;padding-bottom:6px}
.moe-page-foot{margin:36px 0 10px;padding-top:16px;border-top:1px solid #253246;display:flex;gap:18px;flex-wrap:wrap;justify-content:space-between;align-items:baseline;font-size:12px;line-height:1.7;color:#a4b1c7}
.moe-page-foot p{margin:0;max-width:640px}
.moe-page-foot a{color:#efc373;white-space:nowrap}

/* ---- layout: stage left, one card per screen right, both on one shared frame height ---- */
/* Two equal columns: the user asked for the stage and the card to be the same size, so the halves
   are 1fr/1fr and not the 1:1.06 the quantization lab uses. */
.moe-lab{--moe-frame:min(660px,76vh);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:start;margin:18px 0 0}
.moe-stage{grid-column:1;grid-row:2;box-sizing:border-box;position:relative;display:flex;flex-direction:column;height:var(--moe-frame);min-height:430px;border:1px solid #263e56;border-radius:8px;overflow:hidden;background:radial-gradient(ellipse at 50% 38%,#122037,#080e1b 68%)}
/* the scene shares a wrapper with the replay button so the button hangs in the scene's corner,
   below the read-out row, never over it */
.moe-scene-wrap{flex:1 1 auto;position:relative;display:flex;flex-direction:column;min-height:0}
.moe-scene-host{flex:1 1 auto;min-height:0;position:relative;touch-action:pan-y;cursor:grab;outline-offset:-2px}
.moe-scene-host:active{cursor:grabbing}
.moe-scene-host[hidden]{display:none}
.moe-svg{display:block;width:100%;height:100%;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.moe-svg text{paint-order:stroke fill;stroke:#080e1b;stroke-width:2px;stroke-linejoin:round}
/* A label lying on a block wears no plate: white glyphs, lifted by a thin translucent edge so they
   read on any of the seven fills — the pale expert-cache blue and the KV amber included.
   paint-order (from the rule above) lays that edge under the fill, so the counters of a 10px glyph
   stay open; dark glyphs on a light plate are what used to bleed together. */
.moe-svg text.moe-inblock{stroke:#030b16;stroke-opacity:.62;stroke-width:2.8px;text-shadow:0 1px 2px rgba(3,11,22,.5)}
/* the bandwidth and the share print beside their line on bare background: no box, so the shadow is
   what keeps them legible over the tray edges and the radial glow */
.moe-svg text.moe-bandwidth,.moe-svg text.moe-share{text-shadow:0 1px 3px rgba(3,11,22,.9)}
.moe-svg text.moe-tag{letter-spacing:.06em}
.moe-compare-panel{fill:#101f31;stroke:#36546f;stroke-width:1}
.moe-compare-title{fill:#e3eef8;font-weight:700}
.moe-compare-gpu-count{fill:#70c8ff;font-weight:600}
.moe-compare-cache{fill:#37aefa}
.moe-compare-hit{fill:#50d6a8}
.moe-compare-miss{fill:#ff696f}
.moe-compare-count{fill:#f2f7ff;font-weight:700}
.moe-compare-swap{fill:#9dddbd}
.moe-compare-conclusion{fill:#f2f7ff;font-weight:700}
.moe-compare-schematic{fill:#8ca6bf}

/* stage read-out, legend, caption, replay */
/* the read-out is the stage's first row, above the scene: it may never cover a panel (v5 ticket
   item 1 — at 390px it used to sit on the VRAM panel's title) */
.moe-hud{flex:0 0 auto;display:grid;gap:2px;padding:6px 12px 7px;border-bottom:1px solid #33485c;background:#0a1420cc;z-index:4;pointer-events:none}
.moe-hud-line{margin:0;font:11px/1.35 ui-monospace,monospace;color:#b9dbe6;overflow-wrap:anywhere}
.moe-hud-line.is-lead{color:#f2d59a;font-weight:600;font-size:12px}
/* the small print under the RAM reading names the two blocks that add up to it */
.moe-hud-line.is-sub{font-size:9.5px;color:#8db2cc;letter-spacing:0}
.moe-hud-line[hidden]{display:none}
.moe-replay{position:absolute;right:14px;top:12px;z-index:5;font:600 12px ui-monospace,monospace;background:#152638e6;border:1px solid #4a6a8a;color:#e2effa;border-radius:6px;padding:5px 11px;cursor:pointer}
.moe-replay:hover{background:#1c334d;border-color:#6da0cf}
.moe-replay[hidden]{display:none}
.moe-legend{flex:0 0 auto;display:flex;flex-wrap:wrap;gap:4px 14px;padding:8px 12px;border-top:1px solid #22354a;background:#0a111ea6;font:10.5px/1.35 ui-monospace,monospace;color:#cddceb}
.moe-legend-row{display:flex;align-items:flex-start;gap:6px}
.moe-legend-dot{width:9px;height:9px;border-radius:2px;flex:0 0 auto;margin-top:2px}
.moe-caption{flex:0 0 auto;margin:0;padding:9px 14px;text-align:center;font:600 12px/1.5 ui-monospace,monospace;color:#f2d59a;border-top:1px solid #22354a;background:#0a111ea6;overflow-wrap:anywhere}

/* step cards, arrows on the border, dots below */
.moe-steps{grid-column:2;grid-row:2;position:relative;display:grid;grid-template-columns:minmax(0,1fr);align-items:center;align-self:center}
.moe-cards{grid-area:1/1;position:relative;display:grid;grid-template-columns:minmax(0,1fr);align-items:start;overflow:hidden;height:var(--moe-frame)}
.moe-lab:not(.is-live) .moe-card{transition:none}
.moe-card{grid-area:1/1;box-sizing:border-box;width:100%;height:var(--moe-frame);padding:24px 30px 26px;border:1px solid #304354;border-radius:10px;background:linear-gradient(145deg,#101e2b,#0a111d);overflow-y:auto;overscroll-behavior:contain;transition:transform 1.1s cubic-bezier(.2,0,0,1),opacity 1.1s ease,visibility 1.1s,border-color .3s}
.moe-card.is-current{transform:translateX(0);opacity:1;visibility:visible;border-color:#c0a265;box-shadow:0 0 26px #b6934520}
.moe-card.is-before{transform:translateX(-100%);opacity:0;visibility:hidden}
.moe-card.is-after{transform:translateX(100%);opacity:0;visibility:hidden}
.moe-step-number{margin:0 0 8px;font:12px ui-monospace,monospace;letter-spacing:.15em;color:#91c5d8}
.moe-card-title{margin:0 0 16px;font-size:clamp(20px,2vw,24px);font-weight:500;line-height:1.4}
.moe-card-body{margin:0;font-size:14px;line-height:1.9;color:#d3dfeb}
.moe-card-note{margin:14px 0 0;padding-top:12px;border-top:1px solid #2b3d50;font-size:13px;line-height:1.85;color:#cfe3f0}
.moe-arrow{position:absolute;top:50%;z-index:6;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border-radius:50%;box-sizing:border-box;background:#11202f;color:#c0d5e8;border:1px solid #3d566d;font:600 18px/1 system-ui,-apple-system,sans-serif;line-height:1;cursor:pointer;user-select:none;transition:background .15s,border-color .15s,opacity .15s,color .15s}
.moe-arrow:hover:not(:disabled){background:#1b3046;border-color:#5c84a8;color:#fff}
.moe-arrow:disabled{opacity:.25;cursor:not-allowed}
.moe-arrow:focus-visible,.moe-dots button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.moe-prev{left:0;transform:translate(-50%,-50%)}
.moe-next-arrow{right:0;transform:translate(50%,-50%)}
.moe-dots{grid-column:2;grid-row:3;justify-self:center;display:flex;flex-direction:row;align-items:center;gap:10px;margin:14px 0 0}
.moe-dots button{width:30px;height:30px;padding:0;border-radius:50%;font:600 12px ui-monospace,monospace;background:#11202f;color:#9db3c7;border:1px solid #3d566d;line-height:1;cursor:pointer}
.moe-dots button.is-active{background:#c9a25a;border-color:#e6c37f;color:#0c1421}

@media(max-width:850px){
  .moe-page main{margin-top:16px}
  .moe-page-nav{gap:10px;align-items:flex-start}
  .moe-page-nav nav{gap:10px}
  .moe-page a{font-size:12px}
  .moe-page h1{font-size:23px}
  .moe-lab{--moe-frame:min(59vh,496px);grid-template-columns:minmax(0,1fr);gap:0}
  .moe-stage{grid-column:1;grid-row:2;height:var(--moe-frame);min-height:360px;border-radius:8px}  .moe-steps{grid-column:1;grid-row:3;margin-top:12px;align-self:start}
  .moe-stage.is-comparing{min-height:740px}
  .moe-dots{grid-column:1;grid-row:4}
  .moe-cards{height:auto}
  .moe-card{height:auto;max-height:var(--moe-frame);padding:16px 24px 18px}
  .moe-card-title{font-size:19px;margin-bottom:12px}
  .moe-card-body{font-size:13px;line-height:1.8}
  .moe-card-note{font-size:12px;margin-top:12px;padding-top:10px}
  .moe-hud{padding:4px 9px 5px;gap:1px}
  .moe-hud-line{font-size:9.5px}
  .moe-hud-line.is-lead{font-size:10.5px}
  .moe-hud-line.is-sub{font-size:8.5px}
  .moe-replay{right:10px;top:10px;font-size:11px;padding:5px 8px}
  .moe-legend{gap:3px 10px;padding:4px 9px;font-size:9px}
  .moe-caption{font-size:10px;padding:5px 8px}
  .moe-arrow{width:32px;height:32px;font-size:16px}
  .moe-dots button{width:26px;height:26px;font-size:11px}
}
@media(prefers-reduced-motion:reduce){
  .moe-card{transition:none!important}
}