/* The Lifesaver Pass (o1-pass) from the W1 world of psy1-special.passtheyear.com (erudeon/studio design/psy1-lifesaver,
   assets/w1/world.css), copied as it is, Bence 17 Oct 13:35: reuse that card. The 3D rosette is live/token/pass3d.js. */
.lf-passwrap{position:relative;width:min(440px,100%);margin:0 auto}
:root{/* the warm light behind the object */
  --w1-night: #12201B;/* the pilot's dark (Maximizer surfaces) */
  --w1-night-2: #1B2E27;/* ink */
  --w1-ink: #1D2A25;--w1-soft: #56635D;--w1-gold-hi: #F8E7AE;--w1-gold: #D6AE55;--w1-gold-mid: #B88A33;--w1-gold-lo: #7E5A1C;--w1-gold-ink: #5E4312;/* type */
  --w1-display: Guton, Inter, system-ui, sans-serif;--w1-body: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;--w1-mono: ui-monospace, SFMono-Regular, Menlo, monospace;/* motion */
  --w1-ease: cubic-bezier(.2, .8, .2, 1);--w1-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .25 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* ============================================================ the Pass the token lands on =============== */
.o1-pass { position: relative; container-type: inline-size; width: 100%; aspect-ratio: 100 / 62; }
/* a Pass with data-tilt leans toward the pointer: a degree or two and 1.5px, plain ease-out (W1.tilt sets --tx, --ty, --lift) */
.o1-pass[data-tilt] { --base: none; transform: perspective(900px) translateY(var(--lift, 0px)) rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg)) var(--base); transition: transform .45s ease-out; will-change: transform; }
.o1-pass[data-tilt] .o1-pass-face { transition: box-shadow .45s ease-out; }
.o1-pass[data-tilt].is-near .o1-pass-face { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .9), inset 0 -1px 0 rgb(120 100 60 / .08), 0 2px 3px rgb(29 42 37 / .07), 0 34px 60px -26px rgb(70 55 25 / .5); }
.o1-pass-face { position: absolute; inset: 0; border-radius: 5cqi; overflow: hidden; color: var(--w1-ink);
  background: linear-gradient(162deg, #FFFFFF 0%, #FBF8F0 46%, #F1ECE0 100%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .9), inset 0 -1px 0 rgb(120 100 60 / .08), 0 1px 1px rgb(29 42 37 / .06), 0 26px 50px -24px rgb(70 55 25 / .45);
  -webkit-mask: radial-gradient(3.4cqi at 0 58%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(3.4cqi at 100% 58%, #0000 98%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(3.4cqi at 0 58%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(3.4cqi at 100% 58%, #0000 98%, #000) right / 51% 100% no-repeat; }
.o1-pass-face::before { content: ""; position: absolute; inset: 0; background-image: var(--w1-grain); background-size: 200px; opacity: .35; mix-blend-mode: multiply; pointer-events: none; }
.o1-pass-face::after { content: ""; position: absolute; inset: -30%; pointer-events: none;
  background: linear-gradient(115deg, transparent 42%, rgb(255 255 255 / .55) 50%, transparent 58%); animation: o1-sheen 9s ease-in-out infinite; will-change: transform; }
.o1-pass-perf { position: absolute; left: 4.6cqi; right: 4.6cqi; top: 58%; border-top: .45cqi dotted rgb(29 42 37 / .22); }
.o1-pass-logo { position: absolute; left: 6cqi; top: 6cqi; height: 3.6cqi; width: auto; }
.o1-pass-code { position: absolute; right: 6cqi; top: 6.2cqi; font: 600 2.6cqi/1 var(--w1-mono); letter-spacing: .14em; color: var(--w1-soft); }
.o1-pass-kind { position: absolute; left: 6cqi; top: 21cqi; font: 600 9.4cqi/1 var(--w1-display); letter-spacing: -.035em; }
.o1-pass-exam { position: absolute; left: 6.2cqi; top: 32.5cqi; right: 30cqi; font: 500 3.4cqi/1.2 var(--w1-body); color: var(--w1-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.o1-pass-row { position: absolute; left: 6cqi; right: 6cqi; bottom: 5.4cqi; display: flex; gap: 7cqi; }
.o1-pass-row span { display: grid; gap: 1.2cqi; }
.o1-pass-row i { font: 600 2.1cqi/1 var(--w1-body); letter-spacing: .1em; text-transform: uppercase; font-style: normal; opacity: .55; }
.o1-pass-row b { font: 600 4.1cqi/1 var(--w1-display); letter-spacing: -.02em; }
.o1-pass .o1 { position: absolute; width: 46cqi; right: 2cqi; top: -13cqi; z-index: 3; }
@keyframes o1-sheen { 0%, 100% { transform: translateX(-28%); } 50% { transform: translateX(28%); } }