/* Met's exact brand tokens. These stay fixed inside either TGOs theme. */
.met-placement{container-type:inline-size}
.met-ad{--met-navy:#0b2f4a;--met-teal:#1b7288;--met-gold:#d4a93a;--met-paper:#f9fafb;position:relative;isolation:isolate;display:grid;grid-template-columns:1fr 1fr;min-height:436px;overflow:hidden;background:var(--met-paper);color:var(--met-navy);font-family:var(--sans,system-ui);color-scheme:light}
.met-copy{position:relative;z-index:3;padding:28px 0 32px 36px}
.met-ad .met-logo{display:block;width:100px;height:auto;mix-blend-mode:multiply;margin:0 0 24px}
.met-ad .met-headline{font:500 clamp(42px,6.3cqw,72px)/.98 var(--serif,Georgia);letter-spacing:-.045em;margin:0 0 20px}
.met-headline em{font-weight:400;color:var(--met-teal)}
.met-ad .met-description{font:400 14px/1.6 var(--sans,system-ui);margin:0 0 20px;letter-spacing:-.015em;color:var(--met-navy)}
.met-ad .met-link{display:inline-flex;align-items:center;justify-content:space-between;gap:36px;background:var(--met-navy);color:var(--met-paper);padding:12px 16px;text-decoration:none;font-size:14px;font-weight:600;border-radius:0;transition:background .2s}
.met-ad .met-link:hover{background:var(--met-teal)}
.met-link span{font-size:22px;line-height:1}
.met-ad a:focus-visible,.met-ad button:focus-visible{outline:3px solid var(--met-teal);outline-offset:4px}
.met-platform{display:block;margin-top:9px;font-size:10px;letter-spacing:.03em;color:var(--met-teal)}
.met-scene{position:relative;min-width:0;perspective:900px;align-self:stretch}
.met-orbit{position:absolute;width:360px;height:360px;left:0;top:52px;border:1px solid #1b728825;border-radius:50%}
.met-orbit::after{content:'';position:absolute;inset:30px;border:1px solid #1b728812;border-radius:50%}
.met-lanyard{position:absolute;left:43%;top:-160px;height:250px;width:30px;border-inline:3px solid #0b2f4a25;background:var(--met-teal);transform:rotate(-20deg);transform-origin:bottom}
.met-badge{position:absolute;top:68px;left:10%;width:210px;height:260px;border-radius:9px;background:var(--met-navy);color:var(--met-paper);padding:20px 22px;box-shadow:0 12px 25px #0b2f4a20;transform:rotate(-12deg) translate(-22px,-7px)}
.met-badge-slot{width:42px;height:7px;border-radius:5px;background:var(--met-paper);margin:0 auto 22px;opacity:.9}
.met-badge-label{font-size:8px;letter-spacing:.13em;color:#d4a93a;display:block;margin-bottom:12px}
.met-badge b{font:600 32px/.98 var(--sans,system-ui);letter-spacing:-.04em;display:block}
.met-badge-role{display:block;font-size:10px;margin-top:13px;opacity:.8}
.met-barcode{height:28px;width:88px;margin-top:24px;background:repeating-linear-gradient(90deg,#f9fafb 0 1px,transparent 1px 4px,#f9fafb 4px 6px,transparent 6px 8px);opacity:.45}
.met-badge-foot{font-size:6px;letter-spacing:.12em;display:block;margin-top:8px;opacity:.8}
.met-note{position:absolute;left:14%;top:154px;z-index:2;width:250px;min-height:181px;background:var(--met-gold);padding:23px 23px 24px;transform:rotate(5deg);box-shadow:0 12px 24px #0b2f4a1c}
.met-note-label{font-size:8px;letter-spacing:.08em;display:block;font-weight:700}
.met-ad .met-note p{font:italic 400 29px/1.08 var(--serif,Georgia);letter-spacing:-.025em;margin:17px 0}
.met-note-rule{height:1px;background:#0b2f4a35;margin-bottom:13px}
.met-note-next{font-size:11px;display:block}
.met-draft{position:absolute;z-index:4;left:1%;top:338px;display:flex;align-items:center;gap:12px;width:270px;padding:14px 16px;border:1px solid #1b728840;background:var(--met-paper);box-shadow:0 8px 18px #0b2f4a0d;transform:rotate(-3deg)}
.met-draft-icon{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--met-teal);color:var(--met-paper);font-size:19px}
.met-draft b{font-size:11px;display:block;font-weight:600;letter-spacing:-.025em}
.met-draft div>span{display:block;font-size:10px;color:var(--met-teal);margin-top:4px}
.met-example{position:absolute;left:20%;top:416px;font-size:8px;color:var(--met-teal)}
.met-replay{position:absolute;right:12px;bottom:10px;z-index:5;border:0;background:transparent;color:var(--met-navy);font:11px var(--sans,system-ui);padding:8px;cursor:pointer}
.met-replay[hidden]{display:none}
.met-replay span{font-size:15px;margin-right:3px}
.met-ad.is-playing .met-badge{animation:met-badge 4.6s both}
.met-ad.is-playing .met-lanyard{animation:met-strap 4.6s both}
.met-ad.is-playing .met-note{animation:met-note 4.6s both}
.met-ad.is-playing .met-draft{animation:met-draft 4.6s both}
.met-ad.is-paused *{animation-play-state:paused!important}
@keyframes met-badge{0%,24%{transform:rotate(7deg) translate(5px,12px)}45%,100%{transform:rotate(-12deg) translate(-22px,-7px)}}
@keyframes met-strap{0%,24%{transform:rotate(7deg)}45%,100%{transform:rotate(-20deg)}}
@keyframes met-note{0%,23%{opacity:0;transform:translate(70px,35px) rotate(16deg)}49%,100%{opacity:1;transform:rotate(5deg)}}
@keyframes met-draft{0%,55%{opacity:0;transform:translateY(22px) rotate(0)}78%,100%{opacity:1;transform:rotate(-3deg)}}
@container(max-width:620px){
 .met-ad{grid-template-columns:1fr;min-height:620px}
 .met-copy{padding:26px 26px 0}
 .met-ad .met-logo{width:70px;margin-bottom:16px}
 .met-ad .met-headline{font-size:44px;line-height:.97;margin-bottom:14px}
 .met-headline br:nth-child(2){display:none}
 .met-headline em::before{content:' '}
 .met-ad .met-description{font-size:13px;margin-bottom:16px}
 .met-scene{height:285px;margin:18px auto 0;width:320px;max-width:100%;transform:scale(.88);transform-origin:top center}
 .met-orbit{top:-32px;left:4%;width:290px;height:290px}
 .met-lanyard{top:-90px;height:155px;left:42%}
 .met-badge{top:24px;left:20%;width:175px;height:210px;padding:16px 18px}
 .met-badge-slot{margin-bottom:15px;width:36px;height:6px}
 .met-badge b{font-size:28px}.met-badge-label{font-size:7px}
 .met-barcode{margin-top:16px;height:18px}
 .met-note{top:91px;left:19%;width:230px;min-height:164px;padding:20px}
 .met-ad .met-note p{font-size:27px;margin:14px 0}
 .met-draft{top:235px;left:6%;width:262px;padding:12px}
 .met-example{top:300px;left:22px}
 .met-replay{bottom:8px}
}
@container(max-width:340px){.met-ad .met-headline{font-size:40px}.met-copy{padding-inline:22px}.met-scene{transform:scale(.91);transform-origin:top center;height:285px}.met-ad{min-height:600px}}
@media(prefers-reduced-motion:reduce){.met-ad *{animation:none!important;transition:none!important}.met-replay{display:none}}