/* ë·20 lineup layer (lineup.js) */
html.l20-lock,html.l20-lock body{overflow:hidden}
.l20{position:fixed;inset:0;z-index:9000;background:#050505;color:#f7f7f2;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  clip-path:circle(0 at var(--x,50%) var(--y,50%));transition:clip-path .65s cubic-bezier(.77,0,.18,1);font-family:'Space Mono',monospace;-webkit-user-select:none;user-select:none;touch-action:manipulation}
.l20.in{clip-path:circle(150vmax at var(--x,50%) var(--y,50%))}
.l20[hidden]{display:none}
.l20-x{all:unset;cursor:pointer;position:absolute;z-index:3;top:calc(14px + env(safe-area-inset-top));left:calc(16px + env(safe-area-inset-left));font-size:11px;letter-spacing:.24em;color:#f7f7f2;padding:10px 14px;border:1px solid rgba(247,247,242,.18);border-radius:999px;background:rgba(5,5,5,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.l20-x:hover,.l20-x:focus-visible{border-color:#ff3b30;color:#ff3b30}
.l20-stage{position:relative;overflow:hidden}
.l20-stage figure{position:absolute;inset:0;margin:0;opacity:0;transform:scale(1.06);transition:opacity .5s,transform 1.2s cubic-bezier(.19,1,.22,1)}
.l20-stage figure.on{opacity:1;transform:scale(1)}
.l20-stage img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;filter:grayscale(1) contrast(1.08)}
.l20-stage figure::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 55%,#050505),linear-gradient(0deg,#050505 0,transparent 30%)}
.l20-ph{position:absolute;inset:0;display:grid;place-items:center}
.l20-ph i{width:28vmin;height:28vmin;border-radius:50%;background:radial-gradient(circle at 38% 34%,#ff6a5f,#ff3b30 40%,#7a0f0a);box-shadow:0 0 12vmin rgba(255,59,48,.35)}
.l20-ph small{position:absolute;bottom:14%;font-size:10.9px;letter-spacing:.3em;color:rgba(247,247,242,.36)}
.l20-info{display:flex;flex-direction:column;justify-content:flex-end;padding:0 clamp(16px,4vw,56px) clamp(20px,5vh,56px) 0;min-width:0}
.l20-no{font-size:10.9px;letter-spacing:.3em;color:#ff3b30;margin:0 0 10px}
.l20-nm{font-family:'Inter',sans-serif;font-weight:700;font-size:clamp(40px,7.4vw,112px);line-height:.92;letter-spacing:-.04em;margin:0 0 14px;overflow-wrap:anywhere}
.l20-nm span{display:inline-block;animation:l20up .6s cubic-bezier(.19,1,.22,1) both}
@keyframes l20up{from{transform:translateY(.5em);opacity:0}}
.l20-rl{font-size:12px;letter-spacing:.2em;color:rgba(247,247,242,.66);margin:0 0 26px;min-height:1em}
.l20-go{align-self:flex-start;font-size:11px;letter-spacing:.24em;color:#f7f7f2;text-decoration:none;border-bottom:1px solid #ff3b30;padding:0 0 6px;margin:0 0 34px}
.l20-go:hover,.l20-go:focus-visible{color:#ff3b30;outline:none}
.l20-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;max-width:520px}
.l20-grid button{all:unset;cursor:pointer;position:relative;aspect-ratio:3/4;background:#0b0b0c center/cover no-repeat;filter:grayscale(1) brightness(.55);transition:filter .25s,transform .25s cubic-bezier(.19,1,.22,1);outline:1px solid #1d1d20}
.l20-grid button.nop::before{content:'';position:absolute;left:50%;top:50%;width:34%;aspect-ratio:1;border-radius:50%;background:#ff3b30;transform:translate(-50%,-50%);opacity:.8}
.l20-grid button:hover{filter:grayscale(1) brightness(.85)}
.l20-grid button[aria-selected=true]{filter:none;outline:2px solid #ff3b30;transform:translateY(-3px)}
.l20-grid button:focus-visible{outline:2px solid #f7f7f2}
.l20-hint{font-size:10px;letter-spacing:.24em;color:rgba(247,247,242,.36);margin:14px 0 0}
@media (max-width:760px){
 .l20{grid-template-columns:1fr;grid-template-rows:58svh 1fr;overflow:auto}
 .l20-stage figure::after{background:linear-gradient(0deg,#050505 0,transparent 45%)}
 .l20-info{justify-content:flex-start;padding:0 16px calc(24px + env(safe-area-inset-bottom));margin-top:-20svh;position:relative;z-index:2}
 .l20-go{margin-bottom:22px}.l20-grid{max-width:none}.l20-hint{display:none}
}
@media (prefers-reduced-motion:reduce){.l20{transition:none}.l20-stage figure,.l20-nm span{transition:none;animation:none}}
