/* Independent four-card gallery. The selected card keeps its original DOM
   position and grows over the grid, so moving beneath it cannot retrigger hover. */
.apple-edition .focus-grid {
  --focus-gap: clamp(12px, 1.5vw, 22px);
  --focus-radius: clamp(18px, 2vw, 28px);
  --focus-duration: 380ms;
  --focus-ease: cubic-bezier(.22, .72, .22, 1);
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--focus-gap);
  width: 100%;
  min-height: min(64svh, 500px);
  aspect-ratio: 16 / 9;
  margin-block: clamp(24px, 4svh, 44px) 0;
  isolation: isolate;
}
.apple-edition .focus-grid > .focus-card {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: var(--focus-radius);
  background: #132438;
  isolation: isolate;
}
.apple-edition .focus-grid.focus-ready { display: block; }
.apple-edition .focus-ready > .focus-card {
  position: absolute;
  top: 0;
  left: 0;
  width: calc((100% - var(--focus-gap)) / 2);
  height: calc((100% - var(--focus-gap)) / 2);
  opacity: 1;
  z-index: 1;
  transition: top var(--focus-duration) var(--focus-ease),
    left var(--focus-duration) var(--focus-ease),
    width var(--focus-duration) var(--focus-ease),
    height var(--focus-duration) var(--focus-ease),
    opacity 200ms ease, box-shadow 200ms ease;
}
.apple-edition .focus-ready > .focus-card:nth-child(2n) { left: calc((100% + var(--focus-gap)) / 2); }
.apple-edition .focus-ready > .focus-card:nth-child(n + 3) { top: calc((100% + var(--focus-gap)) / 2); }
.apple-edition .focus-ready.is-expanded > .focus-card:not(.is-active) {
  opacity: 0;
  pointer-events: none;
}
.apple-edition .focus-ready > .focus-card.is-active {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  box-shadow: 0 18px 55px #0e294c1c;
}
.apple-edition .focus-grid .focus-main {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  text-decoration: none;
  background: #132438;
  overflow: hidden;
  cursor: zoom-out;
}
.apple-edition .focus-grid .focus-main > img,
.apple-edition .focus-grid .focus-main > video {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-width: none;
  max-height: none;
  margin: 0;
  object-fit: contain;
  object-position: var(--focus-art-position, center);
}
.apple-edition .focus-grid .focus-main > .focus-art-background {
  position: absolute;
  inset: -24px;
  width: calc(100% + 48px);
  height: calc(100% + 48px);
  object-fit: cover;
  filter: blur(18px) brightness(.78);
  pointer-events: none;
}
.apple-edition .focus-grid .focus-main > .focus-art-foreground { position: relative; z-index: 1; }
.apple-edition .focus-grid .focus-art-contain .focus-main > .focus-art-foreground {
  width: min(100%, 640px);
  height: min(100%, 480px);
  object-fit: contain;
}
.apple-edition .focus-grid .focus-footer {
  position: absolute;
  inset: auto 0 0;
  z-index: 7;
  display: flex;
  align-items: flex-end;
  gap: 16px;
  padding: clamp(44px, 8vw, 105px) clamp(18px, 2.2vw, 32px) 18px;
  color: #fff;
  background: linear-gradient(0deg, #071a2bea 0%, #071a2ba8 40%, #071a2b00 100%);
  pointer-events: none;
}
.apple-edition .focus-grid .focus-caption { flex: 1; min-width: 0; }
.apple-edition .focus-section-subtitle { margin: 12px 0 0; color: #6a7c91; font-size: clamp(16px, 1.5vw, 24px); }
.apple-edition .focus-grid .focus-category {
  margin: 0 0 7px;
  color: #d9e9ff;
  font: 500 clamp(11px, 1vw, 15px)/1.45 var(--font);
  letter-spacing: .02em;
}
.apple-edition .focus-grid .focus-caption h4 {
  margin: 0;
  color: #fff;
  font: 650 clamp(20px, 2.1vw, 34px)/1.18 var(--font);
  letter-spacing: -.035em;
  text-wrap: balance;
  text-shadow: 0 2px 20px #071a2b44;
}
.apple-edition .focus-grid .focus-caption > p:not(.focus-category) {
  margin: 8px 0 0;
  color: #e3edfa;
  font: 400 clamp(12px, 1.05vw, 16px)/1.45 var(--font);
}
.apple-edition .focus-grid .focus-links,
.apple-v2 #practice .focus-grid .focus-links {
  position: relative;
  flex: 0 1 auto;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 46%;
  margin: 0;
  pointer-events: auto;
}
.apple-edition .focus-grid .focus-links a,
.apple-v2 #practice .focus-grid .focus-links a.private-icon-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-width: 42px;
  min-height: 40px;
  padding: 7px 9px;
  margin: 0;
  border: 0;
  border-radius: 12px;
  color: #fff;
  background: #fff2;
  text-decoration: none;
  transition: background 160ms ease, transform 160ms ease;
}
.apple-edition .focus-grid .focus-links a:hover,
.apple-v2 #practice .focus-grid .focus-links a.private-icon-link:hover {
  color: #fff;
  background: #ffffff3b;
  transform: translateY(-2px);
}
.apple-edition .focus-grid .focus-links a > img,
.apple-edition .focus-grid .focus-links a > svg:not(.project-link-external):not(.focus-external) {
  display: block;
  width: 25px;
  height: 25px;
  object-fit: contain;
  flex: none;
}
.apple-edition .focus-grid .focus-links a > .project-link-logo-arxiv { width: 45px; }
.apple-v2 #practice .focus-grid .focus-links .project-link-logo-arxiv { width:45px; }
.apple-edition .focus-grid .focus-platform-heybox > img { filter: brightness(0) invert(1); }
.apple-edition .focus-grid .focus-links .focus-platform-starrail > img { width:40px; height:40px; border-radius:9px; }
.apple-edition .focus-grid .focus-links .project-link-external,
.apple-edition .focus-grid .focus-links .focus-external { position:absolute; top:-2px; right:-3px; width:11px; height:11px; opacity:.8; pointer-events:none; }
.apple-edition .focus-grid .focus-link-tooltip {
  position:absolute; bottom:calc(100% + 10px); right:0; z-index:8;
  padding:7px 11px; border-radius:9px; background:#f4f8fff5; color:#354151;
  font:500 12px/1.5 system-ui,"Microsoft YaHei",sans-serif; white-space:nowrap;
  box-shadow:0 6px 20px #0002; opacity:0; visibility:hidden; transform:translateY(5px);
  transition:opacity .16s,transform .16s,visibility .16s; pointer-events:none;
}
.apple-edition .focus-grid .focus-link-tooltip::after {
  content:""; position:absolute; top:100%; right:15px;
  border:5px solid transparent; border-top-color:#f4f8fff5;
}
.apple-edition .focus-grid .focus-platform-link:is(:hover,:focus-visible) .focus-link-tooltip {
  opacity:1; visibility:visible; transform:translateY(0);
}
.apple-edition .focus-grid .private-link-tooltip { left: auto; right: 0; }
.apple-edition .focus-grid .private-link-tooltip::after { left: auto; right: 15px; }
.apple-edition .focus-grid .focus-main .private-link-tooltip { bottom:72px; right:22px; }
.apple-edition .focus-grid .focus-mark { display:block; width:48px; height:48px; border-radius:12px; object-fit:cover; margin:0 0 12px; }
.apple-edition .focus-grid .focus-activate {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  cursor: zoom-in;
}
.apple-edition .focus-grid .focus-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 8;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #152b43;
  background: #fffffff0;
  box-shadow: 0 4px 20px #08182a29;
  cursor: zoom-out;
}
.apple-edition .focus-grid .focus-close svg { display: block; width: 20px; height: 20px; }
.apple-edition .focus-grid :is(.focus-activate, .focus-close)[hidden] { display: none; }
.apple-edition .focus-grid :is(a, button):focus-visible { outline: 3px solid #ffdc66; outline-offset: -4px; }
.apple-edition .focus-grid .focus-main:focus-visible { outline-offset: -7px; }
@media (orientation: portrait) {
  .apple-edition .focus-grid { aspect-ratio: 1 / 1; min-height: min(68svh, 720px); }
}
@media (max-width: 600px) {
  .apple-edition .focus-grid { --focus-gap: 10px; --focus-radius: 18px; min-height: 480px; aspect-ratio: 4 / 5; }
  .apple-edition .focus-grid .focus-footer { padding: 55px 13px 12px; flex-wrap: wrap; gap: 10px; }
  .apple-edition .focus-grid .focus-caption { flex-basis: 100%; }
  .apple-edition .focus-grid .focus-caption h4 { font-size: clamp(17px, 4.4vw, 24px); }
  .apple-edition .focus-grid .focus-category { font-size: 10px; margin-bottom: 5px; }
  .apple-edition .focus-grid .focus-links,
  .apple-v2 #practice .focus-grid .focus-links { gap: 3px; max-width: 100%; margin-left: auto; }
  .apple-edition .focus-grid .focus-links a,
  .apple-v2 #practice .focus-grid .focus-links a.private-icon-link { min-width: 36px; min-height: 38px; padding: 6px; gap: 0; }
  .apple-edition .focus-grid .focus-links a > img,
  .apple-edition .focus-grid .focus-links a > svg:not(.project-link-external):not(.focus-external) { width: 23px; height: 23px; }
  .apple-edition .focus-grid .focus-links a > .project-link-logo-arxiv { width: 37px; }
  .apple-edition .focus-grid .focus-close { top: 10px; right: 10px; }
  .apple-edition .focus-grid .is-active .focus-footer { padding: 80px 22px 14px; }
  .apple-edition .focus-grid .is-active .focus-caption h4 { font-size: clamp(25px, 6vw, 36px); }
}
.motion-off .focus-grid *,
.focus-grid.motion-off * { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .apple-edition .focus-grid * { transition: none !important; }
}