/* designMYX 26 colour system — generated by build_palette.py */
:root {
  --myx-lavender: #F6B8FF;
  --myx-magenta: #FF33CC;
  --myx-hot-pink: #FF2E78;
  --myx-signal-red: #FF2424;
  --stage-black: #000000;
  --ink: #0B0B0B;
  --charcoal: #151515;
  --graphite: #4A4A4A;
  --silver: #9A9A9A;
  --mist: #D9D9D9;
  --white: #FFFFFF;
  --ice-blue: #A9D8FF;
  --electric-blue: #2F6BFF;
  --klein-blue: #1027FF;
  --ultramarine: #0A0F8F;
  --violet: #8A3DFF;
  --rose: #FF3FA0;
  --myntra-pink: #FF3F6C;
  --pale-acid: #F4FF6B;
  --acid: #D4FF00;
  --lime: #7DFF3A;
  --mint: #00E0A0;
  --cyan: #00E5FF;
  --spectrum-green: #7CFF4F;
  --spectrum-yellow: #FFE600;
  --gradient-designmyx-signature: linear-gradient(90deg, #F6B8FF 0%, #F8A7F6 10%, #FC7BE1 20%, #FF3FCE 30%, #FF33C6 40%, #FF31AB 50%, #FF2F85 60%, #FF2E77 70%, #FF2B65 80%, #FF2642 90%, #FF2424 100%);
  --gradient-klein-blue: linear-gradient(90deg, #A9D8FF 0%, #99C7FF 10%, #719FFF 20%, #3A72FF 30%, #2D67FF 40%, #2453FF 50%, #1635FF 60%, #1027FD 70%, #0E21E1 80%, #0B16B0 90%, #0A0F8F 100%);
  --gradient-acid: linear-gradient(90deg, #F4FF6B 0%, #EEFF60 10%, #E1FF42 20%, #D5FF11 30%, #CEFF0C 40%, #B1FF27 50%, #8BFF36 60%, #7CFE3F 70%, #67F56B 80%, #3CE791 90%, #00E0A0 100%);
  --gradient-spectrum: linear-gradient(90deg, #00E5FF 0%, #3AEBE8 10%, #64F6AD 20%, #7AFE5F 30%, #8EFD4C 40%, #C9F339 50%, #F4E918 60%, #FFE416 70%, #FFC261 80%, #FF7F8F 90%, #FF3FA0 100%);
  --gradient-hot-pink-blue: linear-gradient(90deg, #FF3FA0 0%, #FF3DAA 10%, #FF38BD 20%, #FF34CB 30%, #F834D1 40%, #D238E6 50%, #9E3CFA 60%, #893DFF 70%, #7237FF 80%, #452DFF 90%, #1027FF 100%);
  --gradient-mono: linear-gradient(90deg, #FFFFFF 0%, #F8F8F8 10%, #E8E8E8 20%, #DBDBDB 30%, #D4D4D4 40%, #BEBEBE 50%, #A3A3A3 60%, #999999 70%, #858585 80%, #636363 90%, #4A4A4A 100%);
  --gradient-ribbon-flow: linear-gradient(90deg, #F6B8FF 0%, #FA8CE8 8%, #FF33CC 17%, #FF31AB 25%, #FF2E78 33%, #FF295B 42%, #FF2424 50%, #FF295B 58%, #FF2E78 67%, #FF31AB 75%, #FF33CC 83%, #FA8CE8 92%, #F6B8FF 100%);
  --gradient-iridescent: linear-gradient(90deg, #FF4949 0.0%, #F0108C 8.3%, #C600C8 16.7%, #890CF1 25.0%, #4744FF 33.3%, #0E86EF 41.7%, #00C4C4 50.0%, #0EEF86 58.3%, #47FF44 66.7%, #89F10C 75.0%, #C6C800 83.3%, #F08C10 91.7%, #FF4949 100.0%);
  --glow-hot-pink: 0 0 12px #FF2E78d9, 0 0 36px #FF2E788c;
  --glow-klein: 0 0 12px #2F6BFFd9, 0 0 36px #2F6BFF8c;
}

/**
 * designmyx ’26 page styles
 * Ported from the Designmyx One Ribbon prototype (black stage).
 */

/* Layout: centred 3D stage. Logo top-left, event tag top-right, dash pagination on the right edge,
   headline and one-line description centred in the lower third, small meta in the bottom corners. */
:root{
  --paper:#ECEAEB;
  --ink:#0B0B0B;
  --mute:#6E696B;
  --line:rgba(11,11,11,.16);
  --panel:rgba(247,246,246,.94);
  --hot:var(--myx-hot-pink,#FF2E78);
  --grad:var(--gradient-designmyx-signature,linear-gradient(90deg,#F6B8FF 0%,#FF33CC 34%,#FF2E78 67%,#FF2424 100%));
  --f-wide:"Archivo","Arial Black",system-ui,sans-serif;
  --f-body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --gl:max(20px,calc(env(safe-area-inset-left,0px) + 20px));
  --gr:max(20px,calc(env(safe-area-inset-right,0px) + 20px));
  --gb:env(safe-area-inset-bottom,0px);
  color-scheme:light;
}
:root[data-stage="black"]{
  --paper:#000000;
  --ink:#FFFFFF;
  --mute:#9A9A9A;
  --line:rgba(255,255,255,.2);
  --panel:rgba(21,21,21,.94);
  color-scheme:dark;
}
html,body{height:100%}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--f-body);font-size:15px;line-height:1.5;
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));
  overflow-x:hidden;
}
/* drawn at the tallest the viewport gets (100lvh), so a phone's toolbar sliding in and out never resizes it */
#scene{position:fixed;top:0;left:0;width:100%;height:100vh;height:100lvh;display:block;z-index:0;touch-action:pan-y}
#track{position:relative;z-index:1;pointer-events:none}
/* the shell hides #root until this stylesheet has arrived (the static build loads it from script), so nothing shows
   unstyled, the register button included, before the loader */
#root{visibility:visible}
/* the Rewind stop's photo strip: over the stage and the opening's strips (6–7), under the wordmark (12), the headline (12) and header (20) */
.mem-strip{position:fixed;top:0;left:0;width:100%;height:100vh;height:100lvh;display:block;z-index:11;pointer-events:none;visibility:hidden}
/* depth of field: the top and bottom tenth of the scene fall out of focus, fading into the sharp middle */
.dof{position:fixed;left:0;right:0;height:13vh;z-index:5;pointer-events:none;backdrop-filter:blur(12px)}
/* the top band is as deep as the header it sits behind (the emblem and the docked lockup), so what scrolls under it
   stays readable, and fades out below it like the band at the bottom */
.dof-t{top:0;height:max(16vh,160px);-webkit-mask-image:linear-gradient(to bottom,#000 50%,transparent);mask-image:linear-gradient(to bottom,#000 50%,transparent)}
/* on the pass the lanyard's straps run up through the top band, so it barely blurs there: they stay sharp */
:root[data-section="register"] .dof-t{backdrop-filter:blur(1.5px)}
.dof-b{bottom:0;height:34vh;-webkit-mask-image:linear-gradient(to top,#000 45%,transparent);mask-image:linear-gradient(to top,#000 45%,transparent)}
/* touch screens: the same blur at the top and bottom, a little lighter (a live blur over the moving scene costs
   more there), fading into the sharp middle through the same masks */
@media (pointer:coarse){
  .dof{backdrop-filter:blur(8px)}
  :root[data-section="register"] .dof-t{backdrop-filter:blur(1.5px)}
  /* a long press shouldn't select the page's text or tint it; fields still take text */
  body{-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-touch-callout:none}
  input,textarea{-webkit-user-select:text;-moz-user-select:text;user-select:text}
}
button{font:inherit;color:inherit}
button:focus-visible{outline:2px solid var(--hot);outline-offset:3px}

/* top bar */
.top{
  position:fixed;left:0;right:0;top:0;z-index:20;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
  padding:calc(18px + env(safe-area-inset-top,0px)) var(--gr) 0 var(--gl);pointer-events:none;
}
.top > *{pointer-events:auto}
.logo{font-family:var(--f-wide);font-weight:800;font-stretch:112%;font-size:21px;letter-spacing:-.01em;line-height:1;display:flex;align-items:baseline;color:var(--ink);text-decoration:none}
.logo b{font-weight:900;font-stretch:125%;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:.6px var(--ink)}
.logo sup{font-size:11px;font-weight:700;margin-left:3px;align-self:flex-start}
.top-r{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
/* the agenda stop's bar: the countdown to the event and the link to the full agenda, top centre */
/* under the docked header (the lockup at top centre) */
.agenda-bar{position:fixed;left:50%;top:calc(72px + env(safe-area-inset-top,0px));translate:-50% 0;z-index:21;display:flex;align-items:center;gap:10px;
  opacity:0;visibility:hidden;transition:opacity .5s ease,visibility .5s}
:root[data-section="agenda"] .agenda-bar{opacity:1;visibility:visible}
.countdown{display:flex;align-items:center;gap:14px;padding:10px 16px;border-radius:999px;background:rgba(14,14,18,.72);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(10px);color:#fff;white-space:nowrap}
.countdown .cd-k,.countdown .cd-f{font:600 10px/1 "JetBrains Mono",monospace;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.countdown .cd-v{display:flex;gap:10px}
.countdown .cd-u{display:flex;align-items:baseline;gap:2px}
.countdown .cd-u b{font:300 22px/1 "Instrument Sans",Archivo,sans-serif;font-variant-numeric:tabular-nums}
.countdown .cd-u i{font:500 10px/1 "JetBrains Mono",monospace;font-style:normal;color:rgba(255,255,255,.55)}
.agenda-link{font:600 11px/1 "JetBrains Mono",monospace;letter-spacing:.08em;text-transform:uppercase;color:#0b0b0b;background:#fff;padding:12px 14px;border-radius:999px;text-decoration:none;white-space:nowrap}
/* on the agenda stop it's all one quiet pill: the countdown (without its own pill, or the hours, which the cards
   already show), a hairline, and a soft link to the full agenda */
.agenda-bar{gap:0;padding:5px 5px 5px 18px;border-radius:999px;background:rgba(10,10,14,.62);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(12px)}
.agenda-bar .countdown{padding:0;background:none;border:0;backdrop-filter:none;gap:12px}
.agenda-bar .countdown .cd-f{display:none}
.agenda-bar .countdown .cd-v{gap:8px}
.agenda-bar .countdown .cd-u b{font-size:19px}
.agenda-bar .agenda-link{margin-left:16px;position:relative;font:500 13px/1 var(--f-body);letter-spacing:0;text-transform:none;color:rgba(255,255,255,.88);
  background:rgba(255,255,255,.08);padding:10px 14px;transition:background .2s}
.agenda-bar .agenda-link::before{content:"";position:absolute;left:-9px;top:20%;bottom:20%;width:1px;background:rgba(255,255,255,.14)}
.agenda-bar .agenda-link:hover{background:rgba(255,255,255,.16);color:#fff}
@media (max-width:560px){.agenda-bar{padding-left:14px}.agenda-bar .countdown .cd-k{display:none}.agenda-bar .agenda-link{margin-left:12px;padding:9px 12px}}
/* the version switcher (with or without the team stop), top right */
.evt{font-family:var(--f-wide);font-weight:600;font-stretch:100%;font-size:19px;letter-spacing:-.02em;line-height:1}
.evt::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ink);margin-right:7px;vertical-align:4px}
.btn-stage{background:none;border:0;padding:2px 0;cursor:pointer;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);white-space:nowrap}
.btn-stage:hover{color:var(--ink)}

/* right-edge pagination, DesignUp style: dashes, the current stop shown as its number */
.pager{position:fixed;z-index:18;right:calc(var(--gr) + 2px);top:50%;transform:translateY(-50%)}
.track{position:relative;width:26px;height:min(230px,36vh);touch-action:none;cursor:pointer}
.track::before{content:"";position:absolute;left:50%;top:-6px;bottom:-6px;width:2px;transform:translateX(-50%);border-radius:2px;background:var(--line)}
#pager{list-style:none;margin:0;padding:0;position:absolute;inset:0}
#pager li{position:absolute;left:0;right:0;height:0}
#pager button{position:absolute;left:50%;top:0;transform:translate(-50%,-50%);width:26px;height:18px;background:none;border:0;padding:0;cursor:pointer}
#pager button::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:2px;border-radius:2px;background:var(--ink);opacity:.3;transform:translate(-50%,-50%);transition:width .2s,opacity .2s}
#pager button:hover::after,#pager button:focus-visible::after{width:14px;opacity:.75}
.knob{position:absolute;left:50%;top:calc(var(--k, 0) * 100%);width:10px;height:30px;margin:-15px 0 0 -5px;border-radius:99px;background:var(--ink);cursor:grab;
  box-shadow:0 0 0 3px var(--paper),0 4px 12px rgba(0,0,0,.2);transition:top .5s cubic-bezier(.34,1.5,.5,1),width .2s,height .2s,margin .2s}
.knob:hover,.knob:focus-visible,.pager.scrub .knob{width:12px;height:36px;margin:-18px 0 0 -6px}
.pager.scrub .knob{transition:width .2s,height .2s,margin .2s;cursor:grabbing}
.kl{position:absolute;right:calc(100% + 12px);top:50%;transform:translate(6px,-50%);white-space:nowrap;font-family:var(--f-mono);font-size:10.5px;line-height:1;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:99px;padding:6px 10px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.pager:hover .kl,.pager.scrub .kl,.knob:focus-visible .kl{opacity:1;transform:translate(0,-50%)}
.pager button:hover .nm,.pager button:focus-visible .nm{opacity:1}

/* centred headline in the lower third */
.headline{
  position:fixed;z-index:12;left:50%;transform:translateX(-50%);bottom:calc(98px + var(--gb));
  width:min(900px,calc(100% - 160px));text-align:center;pointer-events:none;
  transition:opacity .45s ease,transform .45s ease;
}
/* (swapped in place: it doesn't drop toward the button while it changes) */
.headline.out{opacity:0}
.headline .k{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.headline h1{margin:8px 0 0;font-family:var(--f-wide);font-weight:900;font-stretch:125%;font-size:clamp(26px,3.6vw,52px);line-height:.95;letter-spacing:-.015em;text-transform:uppercase;text-wrap:balance;transition:color .35s ease}
/* the heading turns black while the scene right behind it is bright (the ribbon scene measures it) */
:root.hl-bright .headline h1{color:#0b0b0b}
.headline p{margin:12px auto 0;max-width:50ch;font-size:16.5px;line-height:1.45;text-wrap:balance}

/* bottom corners */
.meta{position:fixed;z-index:12;bottom:calc(30px + var(--gb));font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);line-height:1.5;transition:opacity .45s ease}
.meta.out{opacity:0}
.meta b{display:block;color:var(--ink);font-weight:500}
.meta-l{left:var(--gl)}
.meta-r{right:var(--gr);text-align:right;max-width:28ch}

/* dock: the one call to action, a gradient pill with a soft glow, lifting a little on hover */
.dock{
  position:fixed;z-index:25;left:50%;transform:translateX(-50%);bottom:calc(22px + var(--gb));
  display:flex;gap:4px;padding:0;border-radius:999px;background:transparent;
}
/* The pass button, here and on the hero-only version: a dark rounded rectangle with a signature-gradient edge and
   its label in the strips' typeface (StripeLabel). Hover and press roll in the pink strip's gradient as a wave, from its hot
   pink onward: the pale start would lose the white type. Hover also raises it into a keycap: the face lifts, an ink
   line appears round it and a darker skirt with mitred corners shows beneath; pressing pushes the key back down.
   Hover applies to pointers only, so it can't stick on touch. */
.dock button,.hero-apply{
  border:0;border-radius:16px;padding:0 36px;height:60px;cursor:pointer;white-space:nowrap;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;user-select:none;
}
.dock .pass,.hero-apply{
  position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;color:#0b0b0b;background:transparent;
  box-shadow:0 8px 24px rgba(0,0,0,.4);
  transition:transform .28s cubic-bezier(.34,1.45,.64,1),box-shadow .28s ease,color .3s ease .12s;
}
/* the edge: 1.5px of the gradient, cut out of a full-size layer so it follows the corners exactly */
.dock .pass::before,.hero-apply::before{
  content:"";position:absolute;z-index:1;inset:0;border-radius:inherit;padding:1.5px;background:var(--grad);pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  transition:opacity .2s ease;
}
/* the keycap's skirt, behind the face: narrow dark sides, a brighter front facet, and an ink mitre at each lower corner */
.dock .pass::after,.hero-apply::after{
  --side-l:#8f1282;--side-r:#8c1016;
  content:"";position:absolute;z-index:-1;inset:0;border-radius:18px;opacity:0;pointer-events:none;
  background:
    linear-gradient(to bottom right,var(--side-l) calc(50% - 1px),#0b0b0b calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px)) 0 100%/14px 14px no-repeat,
    linear-gradient(to bottom left,var(--side-r) calc(50% - 1px),#0b0b0b calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px)) 100% 100%/14px 14px no-repeat,
    linear-gradient(var(--side-l) 0 0) 0 0/14px calc(100% - 14px) no-repeat,
    linear-gradient(var(--side-r) 0 0) 100% 0/14px calc(100% - 14px) no-repeat,
    linear-gradient(90deg,#d42ab0,#d51f6b 60%,#c81818);
  transition:inset .28s cubic-bezier(.34,1.45,.64,1),opacity .16s ease,filter .2s ease;
}
/* the fill: slabs with a rippling leading edge (one 28 x 52 sine tile, repeated down the edge), parked just off the
   left and slid across on hover. The tile scrolls while it moves, so the edge reads as a wave, not a wipe. */
.pass-wave{
  background:#fff;
  transition:filter .2s ease;
  --wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 52'%3E%3Cpath d='M0 0H14Q26 13 14 26T14 52H0Z'/%3E%3C/svg%3E");
  position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;
}
.pass-wave i,.pass-wave::after{
  -webkit-mask:linear-gradient(#000 0 0) 0 0/calc(100% - 27px) 100% no-repeat,var(--wave) 100% 0/28px 60px repeat-y;
  mask:linear-gradient(#000 0 0) 0 0/calc(100% - 27px) 100% no-repeat,var(--wave) 100% 0/28px 60px repeat-y;
}
.pass-wave i{
  position:absolute;top:0;bottom:0;left:0;width:calc(100% + 28px);transform:translateX(-100%);
  transition:transform .66s cubic-bezier(.33,0,.2,1);
}
.pass-wave .back{background:#ff7ad9;transition-duration:.52s}
.pass-wave .front{
  background:#ff2424 linear-gradient(90deg,#ff3fce 0%,#ff33c6 14%,#ff31ab 29%,#ff2f85 43%,#ff2e77 57%,#ff2b65 71%,#ff2642 86%,#ff2424 100%) 0 0/calc(100% - 28px) 100% no-repeat;
}
/* the keycap's ink line round the face */
.pass-wave::before{content:"";position:absolute;z-index:2;inset:0;border-radius:inherit;border:1.5px solid #0b0b0b;opacity:0;pointer-events:none;transition:opacity .2s ease,box-shadow .2s ease}
/* once it's full, a soft swell keeps rolling through from the left */
.pass-wave::after{
  content:"";position:absolute;top:0;bottom:0;left:0;width:70%;opacity:0;transform:translateX(-100%);
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.13));
}
@keyframes pass-wave-flow{
  to{-webkit-mask-position:0 0,100% -60px;mask-position:0 0,100% -60px}
}
@keyframes pass-wave-swell{
  0%{transform:translateX(-100%);opacity:0}
  18%,82%{opacity:1}
  100%{transform:translateX(150%);opacity:0}
}
/* the MYX logo's shimmer on the register button: a thin trailing streak, a gap, then a thick leading one, as "/" lines
   at 45°. Parked off the left edge; PassShimmer runs it across at random. */
.pass-shimmer{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}
.pass-shimmer i{
  position:absolute;inset:0;transform:translateX(calc(-50% - 70px));
  background:linear-gradient(135deg,transparent calc(50% - 16px),rgba(255,51,198,.3) calc(50% - 16px) calc(50% - 12px),transparent calc(50% - 12px) calc(50% - 3px),rgba(255,51,198,.3) calc(50% - 3px) calc(50% + 17px),transparent calc(50% + 17px)) 50% 50%/140px 140px no-repeat;
}
.stripe-label{position:relative;z-index:1;display:block}
.stripe-label svg{display:block;width:auto;height:13.5px;overflow:visible;fill:currentColor}
.stripe-label--fallback{font:900 13px/1 var(--f-wide);font-stretch:125%;text-transform:uppercase}
@media (hover:hover){
  .dock .pass:hover,.hero-apply:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(255,46,120,.32);color:#fff}
  .dock .pass:hover::before,.hero-apply:hover::before{opacity:0}
  .dock .pass:hover::after,.hero-apply:hover::after{inset:2px -5px -11px -5px;opacity:1}
  .dock .pass:hover .pass-wave::before,.hero-apply:hover .pass-wave::before{opacity:1}
  .dock .pass:hover .pass-wave i,.hero-apply:hover .pass-wave i{transform:translateX(0);animation:pass-wave-flow .9s linear infinite}
  .dock .pass:hover .pass-wave .back,.hero-apply:hover .pass-wave .back{animation-direction:reverse}
  .dock .pass:hover .pass-wave::after,.hero-apply:hover .pass-wave::after{animation:pass-wave-swell 2.4s .6s cubic-bezier(.4,0,.6,1) infinite,pass-wave-flow .9s linear infinite}
}
/* pressed: the key travels almost to the bottom of its skirt, which stays planted, so the face reads as pushed in.
   It goes down fast with no overshoot; the release uses the base transition, so it springs back up */
.dock .pass:active,.hero-apply:active{color:#fff;transform:translateY(6px) scale(.992);box-shadow:0 3px 12px rgba(255,46,120,.3);transition-duration:.07s;transition-timing-function:cubic-bezier(.2,0,.2,1)}
.dock .pass:active::before,.hero-apply:active::before{opacity:0}
.dock .pass:active::after,.hero-apply:active::after{inset:2px -4px -2px -4px;opacity:1;filter:brightness(.78);transition-duration:.07s;transition-timing-function:cubic-bezier(.2,0,.2,1)}
.dock .pass:active .pass-wave,.hero-apply:active .pass-wave{filter:brightness(.92);transition-duration:.07s}
.dock .pass:active .pass-wave::before,.hero-apply:active .pass-wave::before{opacity:1;box-shadow:inset 0 4px 8px rgba(0,0,0,.42),inset 0 -1px 0 rgba(255,255,255,.2);transition-duration:.07s}
.dock .pass:active .pass-wave i,.hero-apply:active .pass-wave i{transform:translateX(0);transition-duration:.3s}
.dock .pass:focus-visible,.hero-apply:focus-visible{outline:2px solid #fff;outline-offset:3px}
/* touch: a tap is shorter than the wave, so there's no wave. Pressed lands at once with the fill already full, holds
   a beat so even the quickest tap shows it, then the fill fades out rather than sliding back */
@media (hover:none){
  .dock .pass,.hero-apply,
  .dock .pass::before,.hero-apply::before,
  .dock .pass::after,.hero-apply::after,
  .pass-wave,.pass-wave::before{transition-delay:.14s}
  .pass-wave i{opacity:0;transition:opacity .18s ease .14s,transform 0s linear .32s}
  .dock .pass:active,.hero-apply:active,
  .dock .pass:active::before,.hero-apply:active::before,
  .dock .pass:active::after,.hero-apply:active::after,
  .dock .pass:active .pass-wave,.hero-apply:active .pass-wave,
  .dock .pass:active .pass-wave::before,.hero-apply:active .pass-wave::before{transition-delay:0s;transition-duration:0s}
  .dock .pass:active .pass-wave i,.hero-apply:active .pass-wave i{opacity:1;transition:none}
}
@media (prefers-reduced-motion:reduce){
  .dock .pass,.hero-apply{transition:box-shadow .34s ease}
  .dock .pass:hover,.dock .pass:active,.hero-apply:hover,.hero-apply:active{transform:none}
  .pass-wave i,.dock .pass::after,.hero-apply::after{transition:none}
  .dock .pass:hover .pass-wave i,.hero-apply:hover .pass-wave i,.dock .pass:hover .pass-wave::after,.hero-apply:hover .pass-wave::after{animation:none}
}
/* the width the tagline and note line up to, so a shorter label doesn't squeeze them */
.hero-apply{min-width:304px}
/* the hero-only registration version: nothing below the first screen, so no scrolling */
html.hero-only,html.hero-only body{overflow:hidden;height:100%}
.dock .ghost{background:transparent;color:var(--paper)}
.dock .ghost:hover,.dock .ghost[aria-expanded="true"]{background:rgba(127,127,127,.26)}

/* notes drawer (closed by default) */
.notes{
  position:fixed;z-index:22;right:calc(var(--gr) + 60px);bottom:calc(82px + var(--gb));width:min(330px,calc(100% - 2 * var(--gr)));
  max-height:calc(100% - 200px);overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:16px 18px;backdrop-filter:blur(10px);
}
.notes h2{margin:0 0 10px;font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);font-weight:500;display:flex;justify-content:space-between}
.notes h2 b{color:var(--hot);font-weight:500}
.notes dl{margin:0;display:grid;gap:10px}
.notes dt{font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.notes dd{margin:1px 0 0;font-size:13.5px;line-height:1.45}
.notes .fine{margin:12px 0 0;padding-top:10px;border-top:1px solid var(--line);font-size:11.5px;color:var(--mute);line-height:1.4}

/* sticker tray, shown at the last stop */
/* sticker field: stickers float in the open space around the pass */
.tray{position:fixed;inset:0;z-index:24;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .5s ease,visibility .5s}
.tray.on{opacity:1;visibility:visible}
.tray .hint{
  position:absolute;left:50%;transform:translateX(-50%);bottom:calc(98px + var(--gb));width:min(900px,calc(100% - 32px));
  text-align:center;pointer-events:auto;
}
/* (the same size and place as every other stop's headline, so the title doesn't shift when the pass arrives) */
.tray h1{margin:0;font-family:var(--f-wide);font-weight:900;font-stretch:125%;font-size:clamp(26px,3.6vw,52px);line-height:.95;text-transform:uppercase;letter-spacing:-.015em}
/* the heading sits just above the dock's "get your pass", the one button here; a quiet "peel all off"
   appears under the heading once there's a sticker on the pass */
.tray .acts{margin-top:6px;display:flex;justify-content:center}
.tray .acts:not(:has(.peel:not([hidden]))){display:none}
/* the stickers are drawn in the 3D scene (ribbonScene); these buttons are invisible handles laid over them each
   frame, and show the art only while it's being dragged */
.stk{
  position:absolute;left:0;top:0;width:var(--sz,112px);padding:0;border:0;background:none;cursor:grab;touch-action:none;pointer-events:auto;
  transform:translate(-50%,-50%) rotate(var(--r,0deg));
}
.stk:focus-visible{outline:2px solid #fff;outline-offset:6px;border-radius:12px}
.stk.dragging{cursor:grabbing;z-index:2;filter:drop-shadow(0 18px 22px rgba(0,0,0,.4))}
.stk img{display:block;width:100%;height:auto;pointer-events:none;-webkit-user-drag:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:0}
.stk.dragging img{opacity:1;transform:scale(1.12) rotate(-6deg)}
.peel{background:none;border:0;padding:6px 4px;cursor:pointer;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);text-decoration:underline;text-underline-offset:3px}
.peel:hover{color:var(--ink)}
.peel[hidden]{display:none}

/* loader */
#loader{position:fixed;inset:0;z-index:60;background:var(--paper);display:grid;place-items:center;transition:opacity .7s ease,visibility .7s}
#loader.done{opacity:0;visibility:hidden}
.ld{display:grid;justify-items:center;width:min(520px,calc(100% - 48px))}
.ld-logo{position:relative;width:100%}
.ld-logo img{display:block;width:100%;height:auto;clip-path:inset(0 calc(100% - var(--p,0%)) 0 0);transition:clip-path .2s linear}
.ld-logo .lt{}
.ld-logo .dk{display:none}
:root[data-stage="black"] .ld-logo .lt{display:none}
:root[data-stage="black"] .ld-logo .dk{display:block}
.ld-strap{position:relative;width:100%;height:30px;transform:rotate(-3deg);border-radius:2px;background:#fff;box-shadow:inset 0 0 0 1.5px #0B0B0B,inset 0 0 0 4px #FF33CC;overflow:hidden}
.ld-fill{position:absolute;inset:0 auto 0 0;width:var(--p,0%);background:var(--grad);box-shadow:inset 0 0 0 1.5px #0B0B0B,inset 0 0 0 4px #fff;overflow:hidden;transition:width .2s linear}
.ld-fill span{position:absolute;left:0;top:50%;transform:translateY(-50%);white-space:nowrap;font-family:var(--f-wide);font-weight:900;font-stretch:125%;font-size:15px;letter-spacing:.02em;color:#0B0B0B;animation:marq 6s linear infinite}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@keyframes marq{from{transform:translate(0,-50%)}to{transform:translate(-50%,-50%)}}
.fail{position:fixed;inset:auto 16px 50% 16px;z-index:70;text-align:center;font-size:15px}

@media (max-width:899px){
  .meta{display:none}
  .headline{width:calc(100% - 88px);bottom:calc(84px + var(--gb))}
  .headline p{font-size:14.5px}
  .pager{right:max(12px,env(safe-area-inset-right,0px))}
  .track{height:min(170px,26vh)}
  .evt{font-size:16px}
  .logo{font-size:18px}
  .top-emblem{height:24px}
  .logo img{height:24px}
  .top-l{gap:10px}
  .dock button,.hero-apply{height:54px;border-radius:15px;padding:0 26px}
  .hero-apply{min-width:252px}
  .stripe-label svg{height:11.5px}
  .dock .pass::after,.hero-apply::after{border-radius:16px}
  .stripe-label--fallback{font-size:11px}
  .notes{left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));width:auto;bottom:calc(78px + var(--gb));max-height:46vh}
  .tray .hint{bottom:calc(84px + var(--gb))}
}
@media (prefers-reduced-motion:reduce){.ld-fill span{animation:none}#loader,.headline,.meta,.tray{transition:none}}

/* logo image, cut out against either stage; the Myntra emblem sits to its left */
.top-l{display:flex;align-items:center;gap:14px}
.top-emblem{display:block;height:30px;width:auto;opacity:.95}
.top-l .sep{width:1px;height:26px;background:rgba(255,255,255,.28)}
:root[data-stage="black"] .top-l .sep{background:rgba(0,0,0,.28)}
.logo img{display:block;height:30px;width:auto}
.logo .lt{}
.logo .dk{display:none}
:root[data-stage="black"] .logo .lt{display:none}
:root[data-stage="black"] .logo .dk{display:block}
/* headings: the main word only */
.headline .k,.headline p{display:none}
/* minimal progress: hairline track, tiny dots, slim handle */
.track::before{width:1px;opacity:.7}
#pager button::after{width:3px;height:3px;border-radius:50%;opacity:.3}
#pager button:hover::after,#pager button:focus-visible::after{width:5px;height:5px;opacity:.7}
.knob{width:4px;height:18px;margin:-9px 0 0 -2px;box-shadow:none}
.knob:hover,.knob:focus-visible,.pager.scrub .knob{width:6px;height:24px;margin:-12px 0 0 -3px}


/* ─────────────────────────────────────────────────────────────────────────
   Design Myx Luma Iframe Modal
────────────────────────────────────────────────────────────────────────── */

/* A SwiftUI-style sheet. Height and drag come from DMXLumaIframeModal. The bar is the site's own dark; everything
   under it is Luma's embed, whose theme the event host sets, so nothing here may depend on or override it. */
.dmx-luma-iframe-modal {
  --sheet-tint: #141419;
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.42);
}

.dmx-luma-sheet {
  width: 100%;
  max-width: 860px;
}

.dmx-luma-iframe-panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: calc(100dvh - env(safe-area-inset-top));
  overflow: hidden;
  overscroll-behavior: contain;
  border-radius: 28px 28px 0 0;
  background: var(--sheet-tint);
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.28);
  will-change: height, transform;
}

@media (max-height: 520px) {
  .dmx-luma-iframe-panel { border-radius: 0; }
}

.dmx-luma-iframe-header {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 0 56px;
  cursor: grab;
  touch-action: none;
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.dmx-luma-iframe-header:active { cursor: grabbing; }

.dmx-luma-grabber {
  position: absolute;
  top: 6px;
  left: 50%;
  width: 36px;
  height: 5px;
  border-radius: 3px;
  background: rgba(235, 235, 245, 0.3);
  translate: -50% 0;
}

.dmx-luma-title {
  margin: 4px 0 0;
  font: 600 17px/22px -apple-system, BlinkMacSystemFont, "SF Pro Text", "Instrument Sans", system-ui, sans-serif;
  letter-spacing: -0.41px;
  color: #fff;
  white-space: nowrap;
}

.dmx-luma-iframe-close {
  position: absolute;
  top: 14px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(118, 118, 128, 0.28);
  color: rgba(235, 235, 245, 0.7);
  cursor: pointer;
  transition: background 0.15s ease;
}
.dmx-luma-iframe-close:hover { background: rgba(118, 118, 128, 0.42); }

.dmx-luma-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.dmx-luma-scroll::-webkit-scrollbar { display: none; }

.dmx-luma-iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--sheet-tint);
}

/* phones: the frame is as tall as Luma's phone layout (a square cover capped near 411px, plus 507px of details), so the
   sheet does the scrolling and can bring the register button into view */
@media (max-width: 767px) and (min-height: 521px) {
  .dmx-luma-iframe { height: calc(min(100vw, 411px) + 507px); min-height: 100%; }
}

.dmx-luma-empty {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 2rem;
  text-align: center;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
}

/* register button inside the sticker tray */
.tray .register {
  border: 0;
  border-radius: 999px;
  padding: 9px 16px;
  background: var(--grad);
  color: #0b0b0b;
  font: 600 13.5px/1 var(--f-body);
  cursor: pointer;
}
@media (max-width:767px){.agenda-bar{top:calc(64px + env(safe-area-inset-top,0px))}}
/* a nudge just above the section's heading whenever you stop scrolling (ribbonScene shows it with .on) */
.scroll-hint{display:flex;justify-content:center;align-items:center;gap:10px;margin:0 0 12px;font-family:"Unbounded","Archivo",sans-serif;font-weight:600;font-size:12px;line-height:1;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.75);text-shadow:0 1px 12px #000;opacity:0;transform:translateY(6px);transition:opacity .4s ease,transform .4s ease}
.scroll-hint.on{opacity:1;transform:none}
.scroll-hint i{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;rotate:45deg;animation:hint-nudge 1.4s ease-in-out infinite}
@keyframes hint-nudge{0%,100%{translate:0 -2px;opacity:.45}50%{translate:0 3px;opacity:1}}
@media (prefers-reduced-motion:reduce){.scroll-hint i{animation:none}}
/* the same nudge, bigger and in the middle of the screen, where the frame is mostly open (the way out of the Rewind);
   it eases up into place slowly and settles away just as gently */
.scroll-nudge{position:fixed;left:50%;top:50%;z-index:13;white-space:nowrap;display:flex;flex-direction:column;align-items:center;gap:14px;pointer-events:none;font-family:"Unbounded","Archivo",sans-serif;font-weight:700;font-size:clamp(13px,1.5vw,18px);line-height:1;letter-spacing:.3em;text-transform:uppercase;color:#fff;text-shadow:0 2px 18px #000;opacity:0;transform:translate(-50%,calc(-50% + 14px));transition:opacity 1.1s ease,transform 1.4s cubic-bezier(.22,.7,.2,1)}
.scroll-nudge.on{opacity:1;transform:translate(-50%,-50%)}
.scroll-nudge i{width:12px;height:12px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;rotate:45deg;animation:hint-nudge 2.2s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.scroll-nudge i{animation:none}}

/* ─── Layout, 12 Nov 2026 ───────────────────────────────────────────────
   The stop's title sits at the top, under the header, instead of above the button; on wide screens the Register
   button lives in the top right corner; on the last stop the button joins the title at the foot of the page,
   below the pass. */
.headline{bottom:auto;top:calc(66px + env(safe-area-inset-top,0px))}
.agenda-bar{top:calc(164px + env(safe-area-inset-top,0px))}
/* (the last stop's title and button sit below the pass, at the foot of the page) */
.tray .hint{top:auto;bottom:calc(104px + var(--gb));transform:translateX(-50%)}
/* the title is at the top now, so the top band is the deep one and the bottom one shallow */
.dof-t{height:max(24vh,210px)}
.dof-b{height:20vh}
@media (min-width:900px){
  .dock{left:auto;bottom:auto;right:var(--gr);top:calc(12px + env(safe-area-inset-top,0px));transform:none;
    transition:top .6s cubic-bezier(.3,0,.2,1),right .6s cubic-bezier(.3,0,.2,1),transform .6s cubic-bezier(.3,0,.2,1)}
  .dock button{height:50px;padding:0 28px;border-radius:14px}
  :root[data-section="register"] .dock{right:50%;top:calc(100% - 84px - var(--gb));transform:translateX(50%)}
  :root[data-section="register"] .dock button{height:60px;padding:0 36px;border-radius:16px}
}
@media (max-width:899px){
  .headline{bottom:auto;top:calc(58px + env(safe-area-inset-top,0px))}
  .agenda-bar{top:calc(128px + env(safe-area-inset-top,0px))}
  .tray .hint{bottom:calc(90px + var(--gb))}
}
/* a long stop title (the booths') is set smaller and wider, on two lines */
.headline.long{width:min(1100px,calc(100% - 120px))}
.headline.long h1{font-size:clamp(16px,1.7vw,26px);line-height:1.05}
@media (max-width:899px){ .headline.long{width:calc(100% - 40px)} }
/* through the strap's loop there is no title: the one above belonged to the experiences */
:root.in-loop .headline{opacity:0}
/* the top and bottom blur also covers the Rewind strips (their canvas sits just under it); the opening has none */
.mem-strip{z-index:10}
.dof{z-index:11;transition:opacity .5s ease}
:root[data-section="hero"] .dof{opacity:0}
/* touch screens: each stop on the side pager is a full-size target (44 x 34, was 26 x 18) */
@media (pointer:coarse){
  .track{width:44px}
  #pager button{width:44px;height:34px}
  .pager{right:max(2px,env(safe-area-inset-right,0px))}
}

/* ─── Usability pass, 13 Nov 2026 ───────────────────────────────────────── */
/* The Register button plays its own hover every few seconds (DMXStage adds .is-hot for a moment), so it draws the
   eye without anyone pointing at it; these mirror the :hover rules above. */
.dock .pass.is-hot{transform:translateY(-3px);box-shadow:0 16px 34px rgba(255,46,120,.32);color:#fff}
.dock .pass.is-hot::before{opacity:0}
.dock .pass.is-hot::after{inset:2px -5px -11px -5px;opacity:1}
.dock .pass.is-hot .pass-wave::before{opacity:1}
.dock .pass.is-hot .pass-wave i{transform:translateX(0);animation:pass-wave-flow .9s linear infinite}
.dock .pass.is-hot .pass-wave .back{animation-direction:reverse}
@media (prefers-reduced-motion:reduce){ .dock .pass.is-hot{transform:none} .dock .pass.is-hot .pass-wave i{animation:none} }
/* "Scroll to explore" sits at the foot of the screen, where the eye rests after reading, in larger type, instead
   of in small type above the title. (It is a child of the headline, which is fixed at the top, so its place is
   measured from there.) */
.scroll-hint{position:absolute;left:50%;top:calc(100vh - 66px - 62px);translate:-50% 0;margin:0;white-space:nowrap;
  font-size:13px;color:#fff;background:rgba(10,10,14,.62);padding:11px 18px;border-radius:999px;text-shadow:none}
@media (max-width:899px){ .scroll-hint{top:calc(100vh - 58px - 128px);font-size:12px;letter-spacing:.22em} }
/* section titles keep a dark halo, so they read over photos and bright straps (not when the title itself has
   flipped to black over a bright patch) */
:root:not(.hl-bright) .headline h1{text-shadow:0 2px 22px rgba(0,0,0,.85),0 0 3px rgba(0,0,0,.7)}
/* the booths' title: between the tiny size it had and the one-word titles */
.headline.long h1{font-size:clamp(20px,2.3vw,34px);line-height:1.02}
/* the Lineup's link to the full agenda is a solid button now that the countdown beside it is hidden */
.agenda-bar .agenda-link{margin-left:0;font:600 13px/1 var(--f-body);color:#0b0b0b;background:#fff;padding:12px 18px;border-radius:999px;box-shadow:0 6px 20px rgba(0,0,0,.45)}
.agenda-bar .agenda-link::before{display:none}
.agenda-bar .agenda-link::after{content:" \2192"}
.agenda-bar .agenda-link:hover{background:#ffe3f6;color:#0b0b0b}
/* and it sits clear of the cards that pass under the title: top right, under the Register button, on wide screens;
   straight under the title on phones, in the band where passing cards are out of focus anyway */
@media (min-width:900px){ .agenda-bar{left:auto;right:var(--gr);top:calc(78px + env(safe-area-inset-top,0px));translate:none} }
@media (max-width:899px){ .agenda-bar{top:calc(100px + env(safe-area-inset-top,0px));padding-left:0} .agenda-bar .agenda-link{padding:10px 16px} }
/* the Myntra emblem in the header is the way back to the top: the home link covers it, with a visible focus ring */
.top-l{position:relative}
#logoHome{position:absolute;left:-6px;top:-6px;width:56px;height:calc(100% + 12px);border-radius:10px}
#logoHome:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* phones that can't keep the frame rate up lose the edge blur (ribbonScene adds .no-blur when frames run slow) */
:root.no-blur .dof{backdrop-filter:none}
/* touch screens hide the fill until a press; the always-raised button there keeps it showing */
@media (hover:none){ .dock .pass.is-hot .pass-wave i{opacity:1;transition:none} }
/* the "Stop 04 / 05" note in the bottom left corner is gone on every screen (the title and the pager already say where you are) */
.meta{display:none}

/* ─── Register on wide screens: always at the bottom middle, where it sits under the pass on the last screen ─── */
@media (min-width:900px){
  .dock,:root[data-section="register"] .dock{right:50%;top:calc(100% - 84px - var(--gb));transform:translate(50%,0)}
  .dock button{height:60px;padding:0 36px;border-radius:16px}
  /* the scroll hint sits just above the button */
  .scroll-hint{top:calc(100vh - 84px - var(--gb) - 118px)}
}
/* the Lineup's countdown pill, reworked: the count and the button no longer touch. Even padding all round, a
   hairline between the two halves, the units set a little apart from their numbers */
.agenda-bar{padding:6px 6px 6px 22px;gap:0}
.agenda-bar .countdown{gap:14px}
.agenda-bar .countdown .cd-k{font-size:10px;letter-spacing:.18em;color:rgba(255,255,255,.55)}
.agenda-bar .countdown .cd-v{gap:12px}
.agenda-bar .countdown .cd-u{gap:3px}
.agenda-bar .countdown .cd-u b{font-size:18px;font-weight:400}
.agenda-bar .countdown .cd-u i{font-size:11px;color:rgba(255,255,255,.6)}
.agenda-bar .agenda-link{margin-left:36px;padding:11px 18px;box-shadow:none}
.agenda-bar .agenda-link::before{display:block;left:-18px;top:18%;bottom:18%;background:rgba(255,255,255,.16)}
@media (max-width:899px){ .agenda-bar{padding-left:16px} .agenda-bar .agenda-link{margin-left:26px;padding:10px 14px} .agenda-bar .agenda-link::before{left:-13px} }
@media (max-width:560px){ .agenda-bar .countdown .cd-k{display:none} }
/* the home link over the Myntra emblem: the header's own logo is hidden on this page, which hid the link with it */
.design-myx-page .top #logoHome{display:block}
.design-myx-page .top #logoHome img{display:none}

/**
 * First screen: the coming-soon intro, drawn over the ribbon scene. The ribbon scene sets, as you
 * scroll through the hero: --hero-rise (0..1, the lockup and emblem lift away) and --hero-see
 * (0..1, the black behind the strips clears), plus data-hero on the root:
 * "intro" while the lockup is up, "dive" while the lead strips carry you down, then "off".
 */

.hero-intro {
  pointer-events: none;
}
/* plain black under the coming-soon ribbons, as on that page; it clears as the strips dive (--hero-see),
   so the speakers stage shows behind them before the hand-over. It sits above the depth-of-field blur so
   the coming-soon ribbons stay sharp */
.hero-intro::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 6;
  background: #000;
  opacity: calc(1 - var(--hero-see, 0));
}
:root[data-hero="off"] .hero-intro::before {
  visibility: hidden;
}

.hero-ribbons {
  /* the tallest the viewport gets (100lvh) and anchored at the top, so a phone's toolbar sliding in and out never
     resizes it (see src/lib/viewport.js) */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  z-index: 7;
  opacity: 0;
  transition: opacity 0.7s ease-out;
}
/* no fade on the way out: by the time the layer hides, its lead strips have slid out of the frame */
.hero-ribbons.on {
  opacity: 1;
}
:root[data-hero="off"] .hero-ribbons {
  visibility: hidden;
}
.hero-ribbons canvas {
  display: block;
}

/* ─── Myntra emblem, top centre ─── */
.hero-emblem-wrap {
  position: fixed;
  z-index: 21;
  top: max(20px, env(safe-area-inset-top));
  left: 50%;
  /* as you scroll it lifts and fades, and the header's own emblem fades in at the top left in its place */
  translate: -50% calc(var(--hero-rise, 0) * -30vh);
  opacity: calc(1 - 1.4 * var(--hero-rise, 0));
  pointer-events: none;
}
:root[data-hero="dive"] .hero-emblem-wrap,
:root[data-hero="off"] .hero-emblem-wrap {
  visibility: hidden;
}
.hero-emblem {
  display: block;
  height: 48px;
  width: auto;
}
@media (min-width: 768px) {
  .hero-emblem-wrap {
    top: 28px;
  }
  .hero-emblem {
    height: 60px;
  }
}

/* ─── designMYX lockup ─── */
/* Sized in supplied SVG units (--u px per unit) so "design", the gap and MYX keep their
   original proportions: design 934 × 244, gap 25, MYX 1091 × 443. "design" sits under MYX
   in the stacking order, so it can slide out from behind it. */
.hero-lockup-layer {
  /* the same box as the strips' canvas (top-anchored, 100lvh), so the lockup stays put against them when a phone's
     toolbar comes and goes */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  /* above the Rewind's photo strips (11), so the docked wordmark is never covered by them */
  z-index: 12;
  display: grid;
  place-items: center;
  pointer-events: none;
  /* as you scroll it becomes the site's header: it glides up from the middle of the screen to the top centre (its
     centre --hdr-y from the top, level with the header's emblem at the top left) and shrinks to the header's size
     (--hdr-k, set by HeroIntro from the lockup's real size), then stays there through the rest of the site. The lift
     is measured against the layer's own height (50%, where the lockup is centred) rather than 50vh, so it still lands
     at the top when a phone's address bar slides back in and the screen gets shorter */
  --hdr-y: calc(33px + env(safe-area-inset-top, 0px));
  transform: translateY(calc(var(--hero-rise, 0) * (var(--hdr-y) - 50%))) scale(calc(1 - var(--hero-rise, 0) * (1 - var(--hdr-k, 0.2))));
}
/* docked as the header it takes you back to the top (HeroIntro) */
:root:not([data-hero="intro"]) .design-myx-page .hero-lockup {
  pointer-events: auto;
  cursor: pointer;
}
/* the tagline steps away as soon as the lockup starts to move */
:root[data-hero-top="shown"] .design-myx-page .hero-tagline {
  visibility: hidden;
}
/* The lockup's size drives everything set under it. --dock matches the scale it settles at in HeroIntro, so
   --lockup-half is its real half height on any screen, and the gap below it grows with the logo. */
.hero-lockup-layer {
  --u: min(0.3475px, calc(86vw / 2050));
  --dock: 0.6;
  --lockup-half: calc(443 * var(--u) * var(--dock) / 2);
  --lift: 0px;
  --lockup-gap: clamp(12px, calc(var(--u) * 60), 24px);
}
.hero-only-page .hero-lockup-layer {
  --dock: 0.78;
}
@media (max-width: 767px) {
  .hero-lockup-layer { --dock: 0.75; }
  .hero-only-page .hero-lockup-layer { --dock: 0.8; }
}
/* phones upright: a bigger logo, and the whole block (logo to note) centred on the screen; --lift is half the height
   of what sits under the logo, so the logo glides up by that much as it docks */
@media (max-width: 767px) and (max-aspect-ratio: 4/5) {
  .hero-only-page .hero-lockup-layer { --dock: 1; --lift: 60px; }
}
.hero-only-page .hero-lockup {
  transition: translate 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}
.hero-only-page .hero-lockup-layer.is-docked .hero-lockup {
  translate: 0 calc(var(--lift) * -1);
}
.hero-lockup,
.hero-tagline {
  grid-column: 1;
  grid-row: 1;
}
.hero-lockup {
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-lockup-word {
  position: relative;
  z-index: 0;
  flex: none;
  width: calc(934 * var(--u) + 25 * var(--u));
  padding-right: calc(25 * var(--u));
}
.hero-lockup-myx {
  position: relative;
  z-index: 1;
  flex: none;
  width: calc(1091 * var(--u));
}
.hero-svg {
  display: block;
  width: 100%;
  height: auto;
}
.hero-svg-myx {
  overflow: visible;
}

/* ─── apply button (hero-only registration version) ─── */
/* sits where the tagline would, under the docked lockup; the only thing on the page that takes a click */
.hero-cta {
  position: absolute;
  top: calc(50% + var(--lockup-half) + var(--lockup-gap) - var(--lift));
  left: 50%;
  translate: -50% 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 2.2vmin, 18px);
  pointer-events: auto;
}
/* the brand line, set like the tagline it replaces */
/* sized by the button alone: the tagline takes no width of its own and spreads its letters across the button's */
.hero-cta-main {
  display: flex;
  flex-direction: column;
  gap: inherit;
}
.hero-cta-kicker {
  display: flex;
  justify-content: space-between;
  width: 0;
  min-width: 100%;
  margin: 0 0 2px;
  font-family: "Unbounded", "Archivo", sans-serif;
  font-weight: 600;
  font-size: clamp(10px, 0.9vw, 12px);
  line-height: 1.2;
  text-transform: uppercase;
  text-shadow: 0 1px 12px #000;
  color: rgba(255, 255, 255, 0.78);
  white-space: nowrap;
}
.hero-cta-kicker .sp {
  width: 0.3em;
}
/* the extra space is for the button's keycap skirt on hover */
.hero-cta-note {
  margin: 6px 0 0;
  font-family: "Instrument Sans", system-ui, sans-serif;
  font-size: 13px;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 12px #000;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
  /* as wide as the button, like the tagline above it */
  width: 0;
  min-width: 100%;
  -moz-text-align-last: justify;
       text-align-last: justify;
}
/* the button is narrower at these widths (see design-myx.css) */
@media (max-width: 899px) {
  .hero-cta-note { font-size: 11.25px; }
}
/* short screens (phones on their side): tighter, so the whole block stays on screen */
@media (max-height: 480px) {
  .hero-cta { gap: 8px; }
  .hero-cta .hero-apply { height: 44px; }
}
/* the page recedes behind the sheet at its large detent, like the presenting view on iOS */
.hero-only-stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #000;
  transform-origin: 50% 0;
  transform: translateY(calc(var(--sheet-p, 0) * 10px)) scale(calc(1 - var(--sheet-p, 0) * 0.08));
  border-radius: calc(var(--sheet-p, 0) * 14px);
  transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1), border-radius 0.4s cubic-bezier(0.32, 0.72, 0, 1);
}

/* ─── tagline ─── */
/* small and quiet, set just under the docked lockup (which stays in the middle of the screen) */
.hero-tagline {
  margin: 0;
  translate: 0 calc(var(--lockup-half) + var(--lockup-gap) + 0.6em);
  font-family: "Unbounded", "Archivo", sans-serif;
  font-weight: 600;
  font-size: clamp(10px, 0.9vw, 12px);
  line-height: 1.2;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-shadow: 0 1px 12px #000;
  color: rgba(255, 255, 255, 0.78);
  white-space: nowrap;
}

/* ─── site chrome waits until the visitor scrolls ─── */
.design-myx-page .top,
.design-myx-page .pager,
.design-myx-page .dock,
.design-myx-page .meta,
.design-myx-page .headline {
  transition: opacity 0.5s ease, visibility 0.5s;
}
:root[data-hero="intro"] .design-myx-page .pager,
:root[data-hero="intro"] .design-myx-page .meta,
:root[data-hero="intro"] .design-myx-page .headline {
  opacity: 0;
  visibility: hidden;
}
/* the header: the Myntra emblem at the top left fades in as the opening's emblem fades out (the lockup docks at the
   top centre, so the stage's own wordmark stays out of the way); the register button is there the moment you start
   scrolling (data-hero-top) */
.design-myx-page .top {
  opacity: var(--hero-rise, 0);
  transition: none;
}
.design-myx-page .top .sep,
.design-myx-page .top .logo {
  display: none;
}
:root[data-hero-top="hidden"] .design-myx-page .dock {
  opacity: 0;
  visibility: hidden;
}

/* the opening sequence replaces the loader */
.design-myx-page #loader {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .hero-ribbons,
  .design-myx-page .top,
  .design-myx-page .pager,
  .design-myx-page .dock,
  .design-myx-page .meta,
  .design-myx-page .headline {
    transition: none;
  }
}

/* ─── trial hero (?hero=compose): the compose slide played live in 3D ─── */
.hero-compose {
  position: fixed;
  inset: 0;
  z-index: 7;
  background: #000;
  pointer-events: none;
}
.hero-compose-stage {
  position: absolute;
  inset: 0;
  animation: hero-compose-in 1.2s ease-out both;
}
.hero-compose-stage canvas {
  display: block;
}
@keyframes hero-compose-in {
  from { opacity: 0; }
}


/* phones: the line under the logo lies over a strap there, so it gets a dark halo and full white to stay readable */
@media (max-width: 899px) {
  .hero-tagline { color: #fff; text-shadow: 0 0 3px #000, 0 0 10px #000, 0 1px 18px #000, 0 0 26px rgba(0,0,0,.9); }
}

*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}/*
! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
*//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: Inter Tight, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: JetBrains Mono, Fira Code, monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
.container {
  width: 100%;
}
@media (min-width: 640px) {

  .container {
    max-width: 640px;
  }
}
@media (min-width: 768px) {

  .container {
    max-width: 768px;
  }
}
@media (min-width: 1024px) {

  .container {
    max-width: 1024px;
  }
}
@media (min-width: 1280px) {

  .container {
    max-width: 1280px;
  }
}
@media (min-width: 1536px) {

  .container {
    max-width: 1536px;
  }
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.pointer-events-none {
  pointer-events: none;
}
.\!visible {
  visibility: visible !important;
}
.visible {
  visibility: visible;
}
.invisible {
  visibility: hidden;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.inset-0 {
  inset: 0px;
}
.isolate {
  isolation: isolate;
}
.z-10 {
  z-index: 10;
}
.col-start-1 {
  grid-column-start: 1;
}
.row-start-1 {
  grid-row-start: 1;
}
.block {
  display: block;
}
.flex {
  display: flex;
}
.table {
  display: table;
}
.grid {
  display: grid;
}
.hidden {
  display: none;
}
.h-auto {
  height: auto;
}
.w-full {
  width: 100%;
}
.shrink {
  flex-shrink: 1;
}
.grow {
  flex-grow: 1;
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.resize {
  resize: both;
}
.place-items-center {
  place-items: center;
}
.overflow-visible {
  overflow: visible;
}
.rounded {
  border-radius: 0.25rem;
}
.uppercase {
  text-transform: uppercase;
}
.italic {
  font-style: italic;
}
.opacity-0 {
  opacity: 0;
}
.opacity-100 {
  opacity: 1;
}
.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline {
  outline-style: solid;
}
.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.grayscale {
  --tw-grayscale: grayscale(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.invert {
  --tw-invert: invert(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-700 {
  transition-duration: 700ms;
}
.ease-in {
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}
.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}