/* ---------- the AI levels model, in the hero ----------
   Sits where the room animation used to: hard right of the 1040px wrap, above
   the fold, gone below 1120px (the same breakpoint the room used). The page's
   own --ink/--dim/--line variables are dark-theme, so the card below inherits
   them rather than shipping its own palette. */
.pyr-wrap{position:absolute;right:-52px;top:118px;width:400px;height:440px;z-index:2;
  opacity:0;animation:pyrIn 1.05s cubic-bezier(.16,1,.3,1) .72s both}
@keyframes pyrIn{from{opacity:0;transform:translateY(26px) scale(.955)}to{opacity:1;transform:none}}
.pyr-3d{display:block;width:400px;height:400px;border-radius:18px;outline:none;touch-action:pan-y}
.pyr-3d:focus-visible{box-shadow:0 0 0 2px var(--blue-hi)}
.pyr-hint{position:absolute;left:0;right:0;top:408px;text-align:center;
  font-family:var(--mono);font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--faint);opacity:.8;pointer-events:none}
@media(min-width:1440px){
  .pyr-wrap{right:-86px;width:440px;height:484px}
  .pyr-3d{width:440px;height:440px}
  .pyr-hint{top:448px}
}
/* a fine desktop showpiece and a poor phone one — the same six levels are
   spelled out in the level cards further down the page */
@media(max-width:1119px){ .pyr-wrap{display:none} }
@media(prefers-reduced-motion:reduce){ .pyr-wrap{animation:none;opacity:1} }

/* ---------- the same levels, without the canvas ----------
   The model is a picture as far as assistive tech is concerned, so the six
   levels also exist as real buttons: off-screen until something focuses them,
   then a plain row of chips in the hero. Present at every width, including the
   phone widths where the model itself is gone. */
.pyr-sr{position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}
.pyr-sr:focus-within{position:relative;width:auto;height:auto;overflow:visible;
  clip-path:none;white-space:normal;margin-top:30px;max-width:640px}
.pyr-sr h2{font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--faint);font-weight:500;margin:0}
.pyr-sr ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0;padding:0}
.pyr-sr p{margin:8px 0 0;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint)}
.pyr-sr button{font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  padding:8px 12px;border-radius:6px;border:1px solid var(--line);
  background:rgba(255,255,255,.03);color:var(--dim);cursor:pointer;
  transition:color .2s,border-color .2s}
.pyr-sr button:hover{color:var(--ink);border-color:var(--line2)}
.pyr-sr button:focus-visible{outline:2px solid var(--blue-hi);outline-offset:2px;color:var(--ink)}

/* ---------- a level, opened from the model ---------- */
.lvm{position:fixed;inset:0;z-index:96;display:flex;align-items:center;justify-content:center;padding:26px}
.lvm[hidden]{display:none}
.lvm-scrim{position:absolute;inset:0;background:rgba(2,2,4,.7);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;transition:opacity .22s}
.lvm.on .lvm-scrim{opacity:1}
.lvm-card{position:relative;width:min(560px,100%);max-height:86vh;overflow:auto;padding:30px 32px 26px;
  border:1px solid var(--line2);border-radius:16px;
  background:linear-gradient(166deg,rgba(16,16,22,.98) 0%,rgba(9,9,13,.98) 58%,rgba(12,14,24,.98) 100%);
  box-shadow:0 40px 100px rgba(0,0,0,.6);outline:none;
  opacity:0;transform:translateY(10px) scale(.985);
  transition:opacity .26s cubic-bezier(.16,1,.3,1),transform .26s cubic-bezier(.16,1,.3,1)}
.lvm.on .lvm-card{opacity:1;transform:none}
.lvm-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;border-radius:16px 16px 0 0;background:var(--tier,var(--blue-hi))}
.lvm-x{position:absolute;right:14px;top:13px;width:30px;height:30px;border:1px solid var(--line);border-radius:9px;
  background:rgba(255,255,255,.03);color:var(--faint);font-size:13px;line-height:1;cursor:pointer;transition:color .2s,border-color .2s}
.lvm-x:hover{color:var(--ink);border-color:var(--line2)}
.lvm-kick{font-family:var(--mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--faint)}
.lvm-t{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-top:11px}
.lvm-n{font-family:var(--mono);font-size:26px;font-weight:600;color:var(--tier,var(--blue-hi));letter-spacing:.02em}
.lvm-name{font-family:var(--disp);font-size:31px;line-height:1.05;color:var(--ink)}
.lvm-badge{font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--blue-hi);border:1px solid var(--blue-dim);background:var(--blue-soft);border-radius:20px;padding:4px 9px}
.lvm-say{margin:14px 0 0;font-size:16.5px;line-height:1.62;color:var(--dim);font-weight:300}
.lvm-cell{margin-top:18px;padding-top:15px;border-top:1px solid var(--line);font-size:13.5px;line-height:1.65;color:var(--dim);font-weight:300}
.lvm-cell b{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--faint);font-weight:500;margin-bottom:8px}
.lvm-chips{display:flex;flex-wrap:wrap;gap:6px}
.lvm-chip{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;padding:5px 10px;border-radius:20px;
  border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--dim)}
.lvm-note{margin-top:10px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.lvm-act{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.lvm-b{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  padding:11px 17px;border-radius:6px;border:1px solid var(--line2);background:transparent;color:var(--ink);
  cursor:pointer;text-decoration:none;transition:color .2s,border-color .2s,background .2s}
.lvm-b:hover{border-color:var(--blue-hi);color:var(--blue-hi)}
.lvm-b.go{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 10px 26px rgba(43,107,235,.28)}
.lvm-b.go:hover{background:var(--blue-hi);border-color:var(--blue-hi);color:#08080c}
@media(max-width:620px){.lvm-card{padding:26px 20px 22px}.lvm-name{font-size:26px}}
@media(prefers-reduced-motion:reduce){
  .lvm-card,.lvm-scrim{transition:none}
  .lvm-card{opacity:1;transform:none}
}