/* Sign-in: an all-access laminate hanging from a lanyard, under stage lights. */
body.stage{min-height:100vh;min-height:100dvh;overflow-x:hidden;
  background:
    radial-gradient(ellipse 60% 45% at 50% 0%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 70%),
    radial-gradient(ellipse 80% 40% at 50% 105%,rgb(255 74 61 / .10),transparent 70%),
    var(--bg)}
.beams{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.beams i{position:absolute;top:-10%;width:42vw;height:130%;left:var(--x);transform-origin:50% 0;transform:rotate(var(--r));
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 14%,transparent),transparent 75%);
  clip-path:polygon(46% 0,54% 0,100% 100%,0 100%);opacity:.55;animation:sweep 9s ease-in-out infinite alternate}
.beams i:nth-child(1){--x:-12vw;--r:-24deg}
.beams i:nth-child(2){--x:29vw;--r:2deg;animation-delay:-3s;opacity:.35}
.beams i:nth-child(3){--x:70vw;--r:22deg;animation-delay:-6s}
@keyframes sweep{to{transform:rotate(calc(var(--r) * -.35))}}
:root[data-theme="light"] .beams i{opacity:.3}

.pass-wrap{position:relative;display:flex;flex-direction:column;align-items:center;padding:0 16px 40px;min-height:100vh;min-height:100dvh}
.lanyard{width:46px;height:clamp(40px,12vh,120px);background:#C2271C;position:relative;overflow:hidden;
  box-shadow:inset 6px 0 0 rgb(0 0 0 / .18),inset -6px 0 0 rgb(0 0 0 / .18)}
.lanyard span{position:absolute;left:50%;top:0;writing-mode:vertical-rl;transform:translateX(-50%);white-space:nowrap;
  font:800 13px/1 var(--font-display);letter-spacing:.2em;color:#FFE7C2}
.clip{width:30px;height:26px;margin-top:-2px;border-radius:4px 4px 10px 10px;border:5px solid #9C968B;border-top-width:7px;background:transparent;
  box-shadow:0 2px 0 rgb(0 0 0 / .3)}
.pass{position:relative;width:min(380px,100%);margin-top:-6px;background:var(--surface);border:1px solid var(--line-2);border-radius:22px;
  padding:30px 26px 18px;display:flex;flex-direction:column;gap:20px;transform-origin:50% -60px;
  box-shadow:0 1px 0 rgb(255 255 255 / .06) inset,0 30px 80px rgb(0 0 0 / .55),0 0 0 6px color-mix(in srgb,var(--surface) 70%,transparent);
  animation:swing 1.6s cubic-bezier(.3,1.5,.5,1) both}
@keyframes swing{0%{transform:rotate(-7deg)}35%{transform:rotate(3deg)}60%{transform:rotate(-1.4deg)}80%{transform:rotate(.5deg)}100%{transform:rotate(0)}}
.slot{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:64px;height:12px;border-radius:8px;background:var(--bg);box-shadow:inset 0 2px 3px rgb(0 0 0 / .5)}
.foil{position:absolute;top:0;right:0;width:150px;height:150px;border-top-right-radius:22px;pointer-events:none;opacity:.28;z-index:0;
  background:linear-gradient(115deg,#ff6b6b,#ffd93d,#6bff95,#6bd8ff,#b16bff,#ff6bd5,#ff6b6b,#ffd93d) 0 0/300% 300%;
  -webkit-mask:radial-gradient(circle at 100% 0,#000 0 38%,transparent 72%);mask:radial-gradient(circle at 100% 0,#000 0 38%,transparent 72%);
  animation:holo 7s linear infinite alternate}
@keyframes holo{to{background-position:100% 100%}}
.pass-top{position:relative;z-index:1;display:flex;flex-direction:column;gap:4px;padding-top:6px}
.pass-no{font-size:10.5px;letter-spacing:.16em;color:var(--muted)}
.word{font-family:var(--font-stencil);font-weight:900;font-size:58px;line-height:.85;letter-spacing:.01em;text-transform:uppercase}
.ws{font-size:12px;color:var(--accent-fg);letter-spacing:.06em}
.aaa{display:flex;justify-content:space-between;background:var(--accent);color:var(--accent-ink);margin:0 -26px;padding:9px 26px 7px;
  font:900 30px/1 var(--font-display);letter-spacing:.18em}
.enter{min-height:50px;font-size:16px;letter-spacing:.02em}
.pass-foot{display:flex;align-items:center;gap:14px;border-top:1px dashed var(--line-2);padding-top:14px;margin-top:2px}
.pass-foot span{font-size:10.5px;letter-spacing:.06em;color:var(--muted);line-height:1.5}
.barcode{display:block;width:96px;height:34px;flex:none;opacity:.85;
  background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 4px,var(--ink) 4px 5px,transparent 5px 8px,var(--ink) 8px 11px,transparent 11px 12px,var(--ink) 12px 13px,transparent 13px 17px)}
@media (max-width:380px){.word{font-size:48px}.aaa{font-size:25px}.pass{padding-inline:20px}.aaa{margin-inline:-20px;padding-inline:20px}}