/* Models, design system v2 (board 10): the product theme in brand.css maps the shared variables onto the scale, cards are flat, the only
       gradients left are art-directed illustrations. Static grain sits on the black ground (D4). */
    .models-page { background:var(--bg); color-scheme:dark; }
    /* The grain sits inside main (its own stacking context) so the screen blend of the hero art works against it */
    .models-page main, .models-page .footer { background-image:url("../assets/images/grain.png"); }
    .models-page::after { display:none; }
    .models-page .rm-mark { font-family:var(--font-brand); font-weight:700; }
    .models-page :focus-visible { outline:2px solid var(--focus-ring); outline-offset:4px; }
    .models-page .site-shell { top:0; left:0; transform:none; width:100%; padding:calc(24px + var(--safe-top, 0px)) max(var(--section-x),calc((100% - var(--section-w))/2)) 20px; background:var(--bg); }
    .models-page .site-shell::after { content:""; position:absolute; top:100%; inset-inline:0; height:24px; background:linear-gradient(var(--bg),transparent); pointer-events:none; }
    .models-page .menu-button svg { display:block; margin:auto; }
    .mp-wrap { width:min(var(--section-w),calc(100% - var(--section-x) * 2)); margin-inline:auto; }
    .mp-section { padding-block:var(--section-space); scroll-margin-top:100px; }
    .mp-eyebrow { display:flex; align-items:center; gap:12px; margin:0 0 30px; color:var(--text-2); font-size:var(--fs-label); font-weight:500; letter-spacing:.16em; }
    .mp-eyebrow::before { content:""; flex:none; width:12px; height:12px; background:var(--sapphire-300); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M2 3h20L12 21z'/%3E%3C/svg%3E") center / contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M2 3h20L12 21z'/%3E%3C/svg%3E") center / contain no-repeat; }
    .mp-heading { margin:0; font-size:clamp(32px,3.6vw,50px); font-weight:500; line-height:1.25; letter-spacing:-.035em; text-wrap:balance; }
    .mp-lead { color:var(--muted); font-size:var(--fs-body); line-height:1.9; margin:24px 0 0; max-width:700px; }
    .mp-pill { display:inline-flex; align-items:center; justify-content:center; gap:15px; min-height:48px; padding:12px 21px; background:var(--panel); border:1px solid var(--line); color:var(--ink); border-radius:var(--radius-button); font-size:var(--fs-caption); line-height:1.4; white-space:nowrap; cursor:pointer; transition:background var(--dur-hover) var(--ease-settle),transform var(--dur-hover) var(--ease-settle); }
    .mp-pill:hover { background:var(--panel-strong); transform:translateY(-1px); }
    .mp-pill:not(:disabled):active, .mp-pill:not(:disabled):hover:active { transform:scale(.98); }
    .mp-icon { width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
    .mp-hero { min-height:100svh; padding-top:124px; padding-bottom:44px; display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); align-items:center; column-gap:36px; }
    .mp-hero h1 { margin:0; font-size:var(--fs-h1); font-weight:500; line-height:1.2; letter-spacing:-.04em; }
    .mp-hero h1 span { display:block; }
    .mp-hero h1 span + span { color:var(--text-3); margin-top:4px; }
    .mp-hero .mp-lead { max-width:580px; margin-top:30px; }
    .mp-hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
    .mp-hero-art { position:relative; height:480px; margin:0; }
    .mp-model-visual { position:absolute; width:55%; aspect-ratio:.82; padding:0; border:0; border-radius:8px; background:transparent; color:var(--ink); cursor:pointer; mix-blend-mode:screen; -webkit-tap-highlight-color:transparent; }
    .mp-model-visual.dense { left:-3%; top:24%; }
    .mp-model-visual.moe { right:-3%; top:0; }
    .mp-glass-stack { display:block; width:100%; height:100%; overflow:visible; pointer-events:none; }
    .mp-glass-layer { transition:transform 1.1s var(--motion),filter 1.1s var(--motion); }
    .mp-glass-layer.upper { transition-delay:.07s; }
    .mp-glass-layer.lower { transition-delay:.12s; }
    .mp-glass-layer.feature { transform-origin:center; transform-box:fill-box; }
    .mp-model-visual[aria-pressed="true"] .upper { transform:translate(-3px,-24px); }
    .mp-model-visual[aria-pressed="true"] .feature { transform:translate(-6px,-2px) scale(1.035); filter:brightness(1.13); }
    .mp-model-visual[aria-pressed="true"] .lower { transform:translate(3px,16px); }
    @media(hover:hover) and (pointer:fine) {
      .mp-model-visual:hover .upper { transform:translate(-3px,-24px); }
      .mp-model-visual:hover .feature { transform:translate(-6px,-2px) scale(1.035); filter:brightness(1.13); }
      .mp-model-visual:hover .lower { transform:translate(3px,16px); }
    }
    /* Motion layer (D9): each glass layer drifts a little while idle, a soft light sweeps across it where the glass is bright (the mask is
       the picture itself, boosted), and on RMQ4 a few of the blocks light up and fade at random. Runs only while the hero art is on screen. */
    @keyframes mp-glass-float { from { transform:translateY(-1.2px); } to { transform:translateY(1.6px); } }
    @keyframes mp-glass-sweep { 0% { transform:translateX(0); } 60%,100% { transform:translateX(var(--tx)); } }
    .mp-glass-sweep { mix-blend-mode:plus-lighter; transform:translateX(0); opacity:.9; }
    .mp-glass-tile { fill:#fff; opacity:0; transition:opacity .9s ease-in-out; mix-blend-mode:plus-lighter; }
    .mp-glass-tile.on { opacity:.85; }
    @media(prefers-reduced-motion:no-preference) {
      .mp-hero-art[data-live] .mp-glass-float { animation:mp-glass-float 7s ease-in-out infinite alternate; }
      .mp-hero-art[data-live] .upper .mp-glass-float { animation-duration:8s; }
      .mp-hero-art[data-live] .lower .mp-glass-float { animation-duration:9s; animation-delay:-3s; }
      .mp-hero-art[data-live] .feature .mp-glass-float { animation-duration:6s; animation-delay:-2s; }
      .mp-hero-art[data-live] .mp-glass-sweep { animation:mp-glass-sweep 6s linear infinite; }
    }
    .mp-sculpture-name { position:absolute; display:flex; flex-direction:column; align-items:flex-start; gap:10px; text-align:left; }
    .mp-sculpture-name .rm-mark { color:var(--ink); font-size:25px; line-height:1; }
    .dense .mp-sculpture-name { left:8%; top:-27%; }
    .moe .mp-sculpture-name { right:5%; bottom:-24%; align-items:flex-end; text-align:right; }
    .mp-models { min-height:100svh; padding-top:112px; padding-bottom:40px; display:grid; align-items:center; scroll-margin-top:0; }
    .mp-model-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
    .mp-model-card { position:relative; display:flex; flex-direction:column; padding:32px; border:1px solid var(--line); border-radius:16px; background:var(--n-2); }
    .mp-card-top { display:flex; justify-content:space-between; align-items:center; gap:16px; }
    .mp-model-card h2 { margin:0; font-size:clamp(40px,4.2vw,60px); font-weight:700; line-height:1.1; letter-spacing:.01em; }
    .mp-architecture-tag { display:inline-flex; align-items:center; gap:7px; color:var(--ink); font-size:var(--fs-small); font-weight:700; letter-spacing:-.035em; line-height:1; flex:none; }
    .mp-architecture-tag svg { width:18px; height:18px; fill:currentColor; flex:none; }
    .mp-model-card .mp-architecture-tag { padding:8px 14px; border:1px solid var(--line); border-radius:var(--radius-button); font-size:var(--fs-note); font-weight:500; letter-spacing:0; }
    .mp-model-card .mp-architecture-tag svg { display:none; }
    /* LED illustration: Dense lights every dot, MoE only a few experts; marked as an illustration, not a parameter count */
    .mp-led { margin:28px 0 0; }
    .mp-led-grid { display:grid; grid-template-columns:repeat(26,1fr); padding:12px 14px; border-radius:var(--radius-panel); background:var(--n-0); }
    .mp-led-grid i { display:grid; place-items:center; aspect-ratio:1; }
    .mp-led-grid i::before { content:""; width:56%; height:56%; border-radius:50%; background:var(--n-4); transition:background-color var(--dur-hover) var(--ease-settle); }
    .mp-led-grid i.is-lit::before { background:var(--sapphire-300); }
    .mp-led[data-led="dense"] .mp-led-grid i::before { background:var(--sapphire-300); opacity:.7; animation:mp-led-wave 3.6s ease-in-out infinite; animation-delay:calc(var(--c) * 70ms + var(--r) * 110ms); }
    @keyframes mp-led-wave { 0%, 100% { opacity:.38; } 50% { opacity:.85; } }
    .mp-led-note { margin:10px 0 0; color:var(--text-3); font-family:var(--font-mono); font-size:var(--fs-label); letter-spacing:.04em; }
    .mp-model-tagline { display:flex; flex-wrap:wrap; column-gap:.25em; margin:24px 0 0; color:var(--ink); font-size:var(--fs-h3); font-weight:500; line-height:1.45; letter-spacing:-.02em; }
    .mp-model-description { color:var(--text-2); line-height:1.85; font-size:var(--fs-small); margin:14px 0 0; }
    .mp-model-capabilities { display:grid; margin:24px 0; padding:0; list-style:none; border-top:1px solid var(--line-1); }
    .mp-model-capabilities > li { display:grid; grid-template-columns:minmax(104px,.38fr) minmax(0,1fr); column-gap:24px; padding:16px 0; border-bottom:1px solid var(--line-1); }
    .mp-model-capabilities h3 { margin:0; color:var(--ink); font-size:var(--fs-compact); line-height:1.6; font-weight:500; }
    .mp-model-capabilities p { margin:0; color:var(--text-2); font-size:var(--fs-caption); line-height:1.8; }
    .mp-card-bottom { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:auto; padding-top:4px; }
    .mp-model-card .mp-pill { min-height:42px; padding:10px 17px; gap:8px; font-size:var(--fs-note); background:transparent; }
    .mp-model-card .mp-pill:disabled { color:var(--dim); cursor:default; transform:none; border-color:var(--line); }
    .hf-icon, .hf-wordmark { display:block; flex:none; filter:invert(1); opacity:.85; }
    .hf-icon { width:18px; height:18px; }
    .hf-wordmark { width:82.875px; height:13px; }
    @media(min-width:821px) {
      html[lang="en"] .mp-model-grid { row-gap:0; }
      html[lang="en"] .mp-model-card { display:grid; grid-row:span 8; grid-template-rows:subgrid; row-gap:0; }
      html[lang="en"] .mp-model-tagline { display:block; }
      html[lang="en"] .mp-model-tagline > span { display:block; }
      html[lang="en"] .mp-model-capabilities { grid-row:span 3; grid-template-rows:subgrid; row-gap:0; }
      html[lang="en"] .mp-model-capabilities > li { align-self:start; }
    }
    .mp-benchmarks { padding-top:48px; scroll-margin-top:120px; }
    .mp-benchmark-plots { margin:32px 0 0; }
    .mp-benchmark-particles { display:block; width:100%; height:clamp(260px,30vw,400px); touch-action:pan-y; }
    .mp-benchmark-status { margin:24px 0 0; color:var(--dim); font-size:var(--fs-small); line-height:1.8; text-align:center; }
    .mp-scenarios .mp-lead { max-width:720px; }
    .mp-scenarios .mp-heading { scroll-margin-top:120px; }
    .mp-case-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:40px; }
    .mp-case-card { display:flex; flex-direction:column; min-width:0; padding:22px 24px; text-align:left; color:var(--ink); font:inherit; background:var(--n-2); border:1px solid var(--line); border-radius:16px; cursor:pointer; transition:border-color var(--dur-hover) var(--ease-settle),transform var(--dur-hover) var(--ease-settle),--ba var(--dur-hover) var(--ease-settle); }
    .mp-case-card[aria-expanded="true"] { background:var(--n-3); border-color:var(--line-3); }
    /* Top-edge light (D9 task 6). The nine cards are a row of equal entries, so the light is graded: .18 at rest, .5 on hover, keyboard focus and the open card.
       --ba has to be registered to be able to transition. Touch and reduced motion: motion.js leaves the line in the middle, and :hover is not applied without a pointer. */
    @property --ba { syntax:"<number>"; inherits:true; initial-value:.5; }
    .mp-case-card { --ba:.18; }
    .mp-case-card:focus-visible, .mp-case-card[aria-expanded="true"] { --ba:.5; }
    @media(hover:hover) and (pointer:fine) { .mp-case-card:hover { --ba:.5; } }
    .mp-case-industry { display:flex; flex-direction:row; align-items:center; gap:14px; color:var(--ink-soft); font-size:var(--fs-small); line-height:1.65; }
    .mp-case-industry .mp-icon { width:22px; height:22px; color:var(--text-2); flex:none; }
    .mp-case-task { display:block; margin:14px 0 8px; font-size:var(--fs-h3); font-weight:500; line-height:1.5; letter-spacing:-.02em; white-space:pre-line; }
    .mp-case-outputs { display:flex; flex-wrap:wrap; gap:2px 16px; margin-top:auto; color:var(--muted); font-size:var(--fs-caption); line-height:1.8; }
    .mp-case-open { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:16px; padding-top:12px; border-top:1px solid var(--line-1); color:var(--ink-soft); font-size:var(--fs-caption); line-height:1.6; }
    .mp-case-open .mp-icon { width:18px; height:18px; color:var(--dim); transition:transform var(--dur-hover) var(--ease-settle),color var(--dur-hover) var(--ease-settle); }
    .mp-case-detail { grid-column:1/-1; position:relative; padding:30px; background:var(--n-3); border:1px solid var(--line-2); border-radius:16px; }
    .mp-case-detail[hidden] { display:none; }
    .mp-case-detail-eyebrow { display:block; margin:0 48px 8px 0; color:var(--muted); font-size:var(--fs-note); line-height:1.7; }
    .mp-case-detail h3 { margin:0 48px 26px 0; font-size:var(--fs-h3); font-weight:500; line-height:1.5; }
    .mp-case-close { position:absolute; right:22px; top:22px; display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; border-radius:50%; background:transparent; color:var(--text-2); cursor:pointer; transition:background var(--dur-hover) var(--ease-settle), color var(--dur-hover) var(--ease-settle); }
    .mp-case-close:hover { background:var(--line-1); color:var(--text-1); }
    .mp-case-close:active { background:var(--line-2); }
    .mp-case-flow { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; }
    .mp-case-stage { position:relative; min-width:0; }
    .mp-case-stage:not(:last-child)::before { content:""; position:absolute; top:14px; left:28px; width:calc(100% + 1px); height:1px; background:var(--line-3); }
    .mp-case-step { position:relative; display:grid; place-items:center; width:28px; height:28px; margin-bottom:16px; border:1px solid var(--line-3); border-radius:50%; color:var(--ink-soft); background:var(--n-3); font-size:var(--fs-label); font-family:var(--font-mono); }
    .mp-case-stage h4 { margin:0; color:var(--ink); font-size:var(--fs-body); font-weight:500; line-height:1.6; }
    .mp-case-stage p { margin:10px 0 0; color:var(--muted); font-size:var(--fs-compact); line-height:1.9; }
    @media(hover:hover) and (pointer:fine) { .mp-case-card:hover { border-color:var(--line-3); transform:translateY(-1px); } .mp-case-card:hover .mp-case-open .mp-icon { transform:translateX(3px); color:var(--ink); } }
    @media(max-width:1000px) { .mp-case-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
    @media(max-width:600px) { .mp-case-grid { grid-template-columns:1fr; margin-top:28px; gap:12px; } .mp-case-card { padding:20px; } .mp-case-industry { flex-direction:row; align-items:center; gap:14px; } .mp-case-industry .mp-icon { width:20px; height:20px; } .mp-case-task { font-size:var(--fs-h4); margin-top:14px; } .mp-case-detail { padding:24px; } .mp-case-detail h3 { font-size:var(--fs-h4); margin-right:36px; } .mp-case-close { top:16px; right:16px; } .mp-case-flow { grid-template-columns:1fr; gap:26px; } .mp-case-stage { padding-left:44px; } .mp-case-step { position:absolute; left:0; top:0; } .mp-case-stage:not(:last-child)::before { top:28px; left:14px; width:1px; height:calc(100% - 2px); background:linear-gradient(#60676f,#343b42); } }
    @media(prefers-reduced-motion:reduce) { .mp-case-card,.mp-case-open .mp-icon { transition:none; } .mp-case-card:hover,.mp-case-card:hover .mp-case-open .mp-icon { transform:none; } }
    .mp-engines { padding-top:48px; }
    .mp-engine-layout { display:grid; grid-template-columns:minmax(0,1.32fr) minmax(0,1fr); gap:64px; align-items:center; margin-top:42px; }
    .mp-engine-visual { min-width:0; }
    .mp-engine-art { position:relative; aspect-ratio:1.5; margin:0; min-width:0; }
    .mp-engine-stack { position:absolute; width:80%; height:52%; left:10%; top:34%; transform:rotateX(48deg) rotateZ(-30deg); transform-style:preserve-3d; }
    .mp-engine-plane { position:absolute; inset:0; border:1px solid #727c83; border-radius:8px; background:linear-gradient(140deg,#353d43,#151b20 70%); box-shadow:2px 5px 0 #0b0e10,3px 6px 0 #58616a,12px 24px 28px #0009; transform-style:preserve-3d; }
    .mp-engine-plane > span { position:absolute; bottom:16px; left:20px; font-size:17px; font-weight:500; white-space:nowrap; color:var(--ink); }
    html:is(:lang(ja),:lang(ko),:lang(es),:lang(fr)) .mp-engine-plane.runtime > span { right:20px; white-space:normal; line-height:1.25; }
    html:is(:lang(ja),:lang(ko),:lang(es),:lang(fr)) .mp-engine-core { bottom:70px; }
    .mp-engine-plane.base { transform:translateZ(-45px); border-color:#737b80; background:linear-gradient(140deg,#373c40,#101315 55%,#23282c); box-shadow:2px 5px 0 #0b0d0f,3px 6px 0 #43494d,10px 22px 30px #0009; }
    .mp-engine-plane.runtime { transform:translate3d(0,-30px,30px); background:linear-gradient(145deg,#6d7985e6,#26333ee8 70%); border-color:#a6b2bc; transition:transform .45s var(--motion); }
    .mp-engine-plane.model { transform:translate3d(0,-60px,85px); background:linear-gradient(140deg,#83909b80,#263440be 60%,#1b2732df); border-color:#afb9c1; backdrop-filter:blur(2.5px); }
    .mp-engine-plane.model span { font-family:var(--font-brand); font-weight:700; font-size:var(--fs-h4); }
    .mp-engine-art[data-engine="vllm"] .runtime { transform:translate3d(0,-36px,46px); }
    .mp-engine-traces { position:absolute; top:27px; left:22px; right:22px; display:grid; gap:13px; }
    .mp-engine-traces i { display:block; width:100%; height:2px; background:linear-gradient(90deg,#dce1e5,#5a697766); box-shadow:0 5px 0 #6778894d; }
    .mp-engine-traces i:nth-child(2) { width:72%; }
    .mp-engine-traces i:nth-child(3) { width:88%; }
    /* translateZ(0) gives the cell grid its own layer. Without it Safari lifts the animated cells out of the grid and draws them above the
       model glass in the vLLM state (the C++ state sets its own transform below). */
    .mp-engine-core { position:absolute; inset:22px 20px 53px; display:grid; grid-template-columns:repeat(6,1fr); gap:6px; transform:translateZ(0); transition:gap .6s var(--motion),transform .6s var(--motion); }
    .mp-engine-core i { background:linear-gradient(135deg,#9aa7b2,#556471); border:1px solid #c3cbd15e; transition:transform .5s; }
    .mp-engine-compute { position:absolute; inset:24px 22px 60px; display:grid; grid-template-columns:repeat(12,1fr); gap:5px; }
    .mp-engine-compute i { background:#454c52; border:1px solid #747e86; box-shadow:1px 2px 0 #07090b; }
    /* Motion layer (D9). A light block travels model -> runtime -> CUDA; traces and cells pulse. C++ closes the cells into one lit core and
       counts the runner's memory; vLLM keeps them open, lifts two and names FlashInfer. It runs only while the figure is on screen (data-live). */
    .mp-engine-plane > span.mp-engine-tag-v { left:auto; right:20px; bottom:16px; font-size:var(--fs-label); color:#dfe6ff; opacity:0; transition:opacity .4s; white-space:nowrap; }
    .mp-engine-art[data-engine="vllm"] .mp-engine-tag-v { opacity:.9; }
    .mp-engine-tokens { position:absolute; inset:0; transform-style:preserve-3d; }
    .mp-token { position:absolute; width:14px; height:14px; border-radius:3px; background:linear-gradient(135deg,#fff,#c9d4ff); box-shadow:0 0 10px #a8b8f0aa; opacity:0; transform-style:preserve-3d; }
    .mp-engine-traces i { position:relative; overflow:hidden; }
    .mp-engine-traces i::after { content:""; position:absolute; top:-1px; left:0; width:30%; height:4px; background:linear-gradient(90deg,transparent,#fff,transparent); opacity:.9; }
    .mp-engine-traces i:nth-child(2) { --d:.4s; }
    .mp-engine-traces i:nth-child(3) { --d:.8s; }
    .mp-engine-core::after { content:""; position:absolute; inset:36% 36%; border-radius:4px; background:radial-gradient(circle,#fff,#a8b8f0 55%,transparent 75%); opacity:0; transition:opacity .5s; }
    .mp-engine-art[data-engine="cpp"] .mp-engine-core { gap:0; transform:translateZ(14px) scale(.44); }
    .mp-engine-art[data-engine="cpp"] .mp-engine-core i { border-color:#e6ecf455; }
    .mp-engine-art[data-engine="cpp"] .mp-engine-core::after { opacity:1; }
    @keyframes mp-tok { 0% { opacity:0; transform:translate3d(0,-60px,100px); } 12% { opacity:1; } 40% { transform:translate3d(0,-60px,92px); } 55% { transform:translate3d(0,-30px,38px); opacity:1; } 85% { transform:translate3d(0,0,-38px); opacity:.9; } 100% { transform:translate3d(0,0,-44px); opacity:0; } }
    @keyframes mp-tpulse { from { transform:translateX(-120%); } to { transform:translateX(420%); } }
    /* brightness(1) instead of none keeps a filter on the cell all the time; with none, Safari drops a cell to black for one frame each time the filter switches on. */
    @keyframes mp-cpulse { 0%,50%,100% { filter:brightness(1); } 65% { filter:brightness(1.55); box-shadow:0 0 8px #cfd9ff88; } }
    @keyframes mp-core { 0%,100% { filter:brightness(.9); } 55% { filter:brightness(1.5); } }
    @keyframes mp-swap { 0%,100% { transform:translateZ(0); } 30%,50% { transform:translateZ(18px); background:#c9d4ff; } }
    @media(prefers-reduced-motion:no-preference) {
      .mp-engine-art[data-live] .mp-token { animation:mp-tok 2.8s var(--d,0s) infinite cubic-bezier(.45,.05,.4,1); }
      .mp-engine-art[data-live] .mp-engine-traces i::after { animation:mp-tpulse 2.8s var(--d,0s) infinite linear; }
      .mp-engine-art[data-live] .mp-engine-core i { animation:mp-cpulse 2.8s calc(var(--k) * .07s) infinite ease-in-out; }
      .mp-engine-art[data-live] .mp-engine-core::after { animation:mp-core 2.8s infinite ease-in-out; }
      .mp-engine-art[data-live][data-engine="vllm"] .mp-engine-core i:nth-child(8) { animation:mp-cpulse 2.8s infinite,mp-swap 5.2s infinite ease-in-out; }
      .mp-engine-art[data-live][data-engine="vllm"] .mp-engine-core i:nth-child(15) { animation:mp-cpulse 2.8s infinite,mp-swap 5.2s 2.6s infinite ease-in-out; }
    }
    .mp-engine-mb { position:absolute; right:1%; bottom:4%; text-align:right; opacity:0; transition:opacity .5s; pointer-events:none; }
    .mp-engine-art[data-engine="cpp"] .mp-engine-mb { opacity:1; }
    .mp-engine-mb b { display:block; font:500 clamp(36px,5vw,64px)/1 var(--font-pixel); color:var(--ink); letter-spacing:-.02em; }
    .mp-engine-mb b em { font-style:normal; color:var(--sapphire-300); font-size:.5em; margin-left:.2em; }
    .mp-engine-mb small { display:block; margin-top:10px; font-size:var(--fs-note); color:var(--dim); line-height:1.6; }
    .mp-engine-mb small span { display:block; }
    .mp-engine-reading { display:grid; min-width:0; }
    .mp-engine-panel { grid-area:1 / 1; align-self:start; min-width:0; }
    .mp-engine-tabs { display:flex; width:max-content; max-width:100%; border-radius:var(--radius-button); padding:4px; gap:4px; border:1px solid var(--line); margin:24px auto 0; }
    .mp-engine-tabs button { background:transparent; color:var(--dim); border:0; border-radius:var(--radius-button); padding:11px 19px; min-height:44px; cursor:pointer; font-size:var(--fs-caption); white-space:nowrap; transition:background var(--dur-hover) var(--ease-settle),color var(--dur-hover) var(--ease-settle); }
    .mp-engine-tabs button[aria-selected="true"] { color:var(--ink); background:var(--panel-strong); }
    .mp-engine-panel h3 { margin:0; font-size:var(--fs-h3); line-height:1.4; font-weight:500; letter-spacing:-.02em; }
    .mp-engine-panel h4 { margin:28px 0 0; font-size:17px; line-height:1.6; font-weight:500; color:var(--ink); }
    .mp-engine-panel p { margin:12px 0 0; font-size:var(--fs-body); line-height:1.9; color:var(--muted); }
    .mp-engine-panel[hidden] { display:block; visibility:hidden; }
    .mp-optimization { padding-top:72px; }
    .mp-optimization-heading > span { display:block; }
    .mp-optimization-heading > span + span { margin-top:.18em; color:var(--muted); }
    html[lang="zh-CN"] .mp-optimization-heading > span > span { display:inline-block; }
    .mp-optimization-list { margin-top:40px; }
    .mp-optimization-list details { border-top:1px solid var(--line); padding:0; }
    .mp-optimization-list details:last-child { border-bottom:1px solid var(--line); }
    .mp-optimization-list summary { list-style:none; display:grid; grid-template-columns:230px minmax(0,1fr) 24px; column-gap:46px; align-items:center; padding:30px 0; cursor:pointer; }
    .mp-optimization-list summary::-webkit-details-marker { display:none; }
    .mp-opt-name h3 { margin:0; font-size:var(--fs-lead-l); font-weight:500; line-height:1.4; letter-spacing:-.015em; }
    html:lang(ja) .mp-opt-name h3 { white-space:pre-line; }
    .mp-opt-model { display:block; margin-top:9px; font-family:var(--font-brand); font-size:var(--fs-note); font-weight:700; color:var(--dim); letter-spacing:.025em; }
    .mp-opt-benefit { margin:0; color:var(--muted); font-size:var(--fs-compact); line-height:1.8; }
    .mp-opt-plus { color:var(--muted); }
    .mp-opt-plus .mp-plus-vertical { transition:opacity var(--dur-hover) var(--ease-settle); }
    details[open] .mp-opt-plus .mp-plus-vertical { opacity:0; }
    .mp-opt-detail { padding:0 70px 30px 276px; color:var(--muted); font-size:var(--fs-small); line-height:1.9; }
    .mp-opt-detail p { margin:0; max-width:750px; }
    .mp-opt-detail p + p { margin-top:14px; }
    .mp-opt-detail strong { display:block; margin-bottom:10px; font-size:var(--fs-label); font-weight:500; color:var(--dim); letter-spacing:.08em; }
    .mp-dialog { color:var(--ink); background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-panel); padding:27px; width:min(400px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); overflow:auto; }
    .mp-dialog::backdrop { background:#0009; backdrop-filter:blur(12px); }
    .mp-dialog-top { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:18px; }
    .mp-close { display:grid; place-items:center; flex:none; width:44px; height:44px; padding:0; border:0; border-radius:50%; background:transparent; color:var(--text-2); cursor:pointer; transition:background var(--dur-hover) var(--ease-settle), color var(--dur-hover) var(--ease-settle); }
    .mp-close:hover { background:var(--line-1); color:var(--text-1); }
    .mp-close:active { background:var(--line-2); }
    /* The phone menu follows the shared overlay (styles.css .mobile-overlay): the page ground, a 118px logo, a round 44px close button, 32px links between line-2 rules with a decorative number */
    .mp-menu-dialog { width:100%; height:100dvh; max-width:none; max-height:none; margin:0; padding:calc(28px + env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left)); border:0; border-radius:0; background:color-mix(in srgb,var(--bg) 98%,transparent); backdrop-filter:blur(30px); }
    .mp-menu-dialog .mp-dialog-top { margin-bottom:0; }
    .mp-menu-dialog img { width:118px; }
    .mp-mobile-links { display:grid; counter-reset:menu-item; margin-top:40px; }
    .mp-mobile-links a { display:grid; grid-template-columns:44px 1fr; align-items:center; padding:22px 0; border-top:1px solid var(--line-2); font-size:min(32px,9.2vw); line-height:normal; font-weight:500; letter-spacing:-.03em; color:var(--ink); }
    .mp-mobile-links a:last-child { border-bottom:1px solid var(--line-2); }
    /* The number is decoration: the empty text after the slash keeps it out of the link's name */
    .mp-mobile-links a::before { counter-increment:menu-item; content:counter(menu-item,decimal-leading-zero) / ""; font:400 var(--fs-note)/1 var(--font-mono); letter-spacing:.04em; color:var(--text-3); }
    .mp-mobile-links a[aria-current="page"]::before { color:var(--sapphire-300); }
    .models-page:has(dialog[open]) { overflow:hidden; }
    @media(min-width:1000px) and (max-height:800px) {
      .mp-models { padding-top:96px; padding-bottom:24px; }
      .mp-model-card { padding:20px 28px; }
      .mp-model-tagline { margin-top:14px; }
      .mp-model-description { line-height:1.7; margin-top:12px; }
      .mp-model-capabilities { gap:8px; margin:16px 0; }
      .mp-model-capabilities p { margin-top:4px; line-height:1.7; }
      .mp-card-bottom { padding-top:14px; }
    }
    @media(min-width:821px) and (max-height:760px) { .mp-hero-art { height:400px; } }
    @media(max-width:1120px) { .mp-hero { grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:20px; } .mp-hero h1 { font-size:clamp(34px,4vw,46px); } .mp-engine-layout { gap:40px; } }
    @media(max-width:820px) {
      .models-page .site-shell { padding:calc(16px + env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) 16px max(24px,env(safe-area-inset-left)); }
      .mp-hero { grid-template-columns:1fr; padding-top:142px; gap:16px; padding-bottom:35px; }
      .mp-hero h1 { font-size:clamp(36px,6vw,50px); }
      .mp-hero .mp-lead { max-width:640px; }
      .mp-hero-art { width:min(100%,560px); height:470px; margin:42px auto 0; }
      .mp-models { padding-top:96px; padding-bottom:32px; }
      .mp-model-card { padding:28px 26px 26px; }
      .mp-model-card h2 { font-size:36px; }
      .mp-card-top { gap:12px; }
      .mp-benchmarks { padding-top:32px; scroll-margin-top:96px; }
      .mp-engine-layout { grid-template-columns:1fr; gap:34px; margin-top:34px; }
      .mp-engine-art { width:min(100%,490px); margin-inline:auto; }
      .mp-engine-reading { max-width:640px; width:100%; margin-inline:auto; }
      .mp-optimization-list summary { grid-template-columns:200px minmax(0,1fr) 24px; gap:24px; }
      .mp-opt-detail { padding-left:224px; padding-right:48px; }
      .mp-section { scroll-margin-top:92px; }
    }
    @media(max-width:560px) {
      html:lang(ja) .mp-hero h1 span { white-space:pre-line; }
      html:lang(ja) .mp-case-detail h3, html:lang(ja) .mp-case-detail-eyebrow { white-space:pre-line; }
      .mp-hero { padding-top:131px; }
      .mp-eyebrow { margin-bottom:24px; }
      .mp-hero h1 { font-size:34px; line-height:1.3; letter-spacing:-.04em; }
      .mp-hero .mp-lead { margin-top:24px; font-size:var(--fs-compact); line-height:1.9; }
      .mp-hero-actions { margin-top:26px; gap:10px; }
      .mp-pill { padding:12px 17px; gap:10px; }
      .mp-hero-art { height:auto; aspect-ratio:1.1; margin-top:34px; margin-bottom:26px; }
      .mp-model-visual { width:56%; }
      .mp-sculpture-name .rm-mark { font-size:21px; }
      .mp-sculpture-name { gap:8px; }
      .dense .mp-sculpture-name { top:-34%; }
      .moe .mp-sculpture-name { bottom:-30%; }
      .mp-model-grid { grid-template-columns:1fr; gap:18px; }
      .mp-card-top { flex-direction:row; align-items:center; }
      .mp-model-card h2 { font-size:39px; }
      .mp-model-card { padding:27px 25px; }
      .mp-model-tagline { font-size:21px; }
      .mp-model-description { font-size:var(--fs-compact); }
      .mp-heading { font-size:32px; line-height:1.3; }
      .mp-lead { font-size:var(--fs-compact); line-height:1.9; margin-top:22px; }
      .mp-benchmark-plots { margin-top:28px; }
      .mp-benchmark-status { margin-top:20px; font-size:var(--fs-note); }
      .mp-engines { padding-top:12px; }
      .mp-engine-layout { gap:30px; }
      .mp-engine-art { aspect-ratio:1.08; margin-bottom:92px; }
      .mp-engine-mb { top:100%; bottom:auto; right:0; margin-top:4px; }
      .mp-engine-stack { width:57%; left:24%; height:51%; top:38%; }
      .mp-engine-plane > span { font-size:var(--fs-note); left:13px; bottom:12px; }
      .mp-engine-plane.model span { font-size:var(--fs-compact); }
      .mp-engine-plane > span.mp-engine-tag-v { left:13px; right:auto; bottom:34px; font-size:var(--fs-label); }
      .mp-engine-plane.base { transform:translateZ(-22px); }
      .mp-engine-plane.runtime { transform:translate3d(0,-20px,22px); }
      .mp-engine-plane.model { transform:translate3d(0,-40px,58px); }
      html:lang(fr) .mp-engine-plane.model { transform:translate3d(0,-58px,80px); }
      .mp-engine-art[data-engine="vllm"] .runtime { transform:translate3d(0,-24px,31px); }
      .mp-engine-traces { left:15px; right:15px; top:20px; gap:12px; }
      .mp-engine-core { inset:17px 14px 40px; gap:4px; }
      html:is(:lang(ja),:lang(ko),:lang(es),:lang(fr)) .mp-engine-plane.runtime > span { right:13px; }
      html:is(:lang(ja),:lang(ko),:lang(es),:lang(fr)) .mp-engine-core { bottom:55px; }
      .mp-engine-compute { inset:18px 15px 44px; gap:4px; }
      .mp-engine-tabs { margin-top:16px; }
      .mp-engine-tabs button { font-size:var(--fs-note); padding:10px 15px; }
      .mp-engine-panel h3 { font-size:21px; }
      .mp-engine-panel h4 { font-size:var(--fs-body); margin-top:24px; }
      .mp-engine-panel p { font-size:var(--fs-compact); }
      .mp-optimization { padding-top:18px; }
      .mp-optimization-list { margin-top:30px; }
      .mp-optimization-list summary { grid-template-columns:minmax(0,1fr) 24px; padding:25px 0; column-gap:16px; row-gap:16px; }
      .mp-opt-name { grid-column:1; grid-row:1; }
      .mp-opt-name h3 { font-size:19px; }
      .mp-opt-benefit { grid-column:1; grid-row:2; font-size:var(--fs-small); }
      .mp-opt-plus { grid-column:2; grid-row:1; }
      .mp-opt-detail { padding:0 0 26px; font-size:var(--fs-small); }
            .models-page .footer-inner { gap:25px; }
      .models-page .footer-brand { align-items:flex-start; }
    }
    @media(max-width:820px) { .mp-model-capabilities > li { grid-template-columns:1fr; row-gap:4px; } }
    @media(max-width:560px) { .mp-led-grid { padding:10px 10px; } }
    @media(max-width:360px) { .mp-hero h1 { font-size:29px; } .mp-model-card { padding:25px 21px; } .mp-model-card h2 { font-size:34px; } .mp-architecture-tag { font-size:var(--fs-caption); gap:5px; } .mp-heading { font-size:29px; } .mp-engine-tabs button { padding:10px 13px; } }
    @media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .models-page *, .models-page *::before,.models-page *::after { transition:none; animation:none; } .mp-pill:hover, .mp-pill:active { transform:none; } .mp-led[data-led="dense"] .mp-led-grid i::before { animation:none; opacity:.7; } }