/* One approved page, four identities. Every colour, face and motion below comes from the theme tokens. */
:root{
  color-scheme:light;
  --paper:#FBF6EC;--sa:#FBF6EC;--sb:#F6EEDF;--sw:54px;--sdir:90deg;
  --ink:#26292D;--ink2:#5F5E5A;--acc:#AD7C45;--acc2:#D8AE76;--line:#26292D1F;--cream:#FFF8EA;
  --hdr:#FBF6ECE8;--signbg:linear-gradient(170deg,#30343A,#1E2024);--signfg:#FFF8EA;--signsub:#E9E2D2;--signem:#D8AE76;--signline:#D8AE76;--dot:#D8AE76;
  --card:#FFF8EA;--cardfg:#26292D;--cardsub:#5F5E5A;--stepn:#26292D;--stepnf:#FFF8EA;
  --closebg:linear-gradient(170deg,#30343A,#1E2024);--closefg:#FFF8EA;--closesub:#E9E2D2;--btn:linear-gradient(#E2BC87,#D8AE76);--btnf:#1E2024;--foot:#1E2024;--footf:#CFC8B8;--ovbg:#FFF7E6ee;
  --r:12px;--signr:14px;--tkshadow:drop-shadow(0 12px 14px #4a371c2e) drop-shadow(0 1px 1px #4a371c33);--tkborder:0 0 0 0 #0000;
  --disp:'Alexandria',system-ui,sans-serif;--body:'Alexandria',system-ui,sans-serif;--dw:800;--mono:'Space Mono',ui-monospace,monospace;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .22 0 0 0 0 .12 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
body[data-th=shop]{
  --paper:#FFF2DA;--sa:#FFF2DA;--sb:#FFDCC8;--sw:64px;
  --ink:#1F1A17;--ink2:#5B4A40;--acc:#D92B1F;--acc2:#FFC72C;--line:#1F1A1726;
  --hdr:#FFF2DAF0;--signbg:#FFC72C;--signfg:#1F1A17;--signsub:#3a2c18;--signem:#D92B1F;--signline:#1F1A17;--dot:#D92B1F;
  --card:#FFFBF0;--cardfg:#1F1A17;--cardsub:#5B4A40;--stepn:#D92B1F;--stepnf:#FFF8EA;
  --closebg:#D92B1F;--closefg:#FFF8EA;--closesub:#FFE9D0;--btn:#FFC72C;--btnf:#1F1A17;--foot:#1F1A17;--footf:#F0E2C8;--ovbg:#FFF2DAf0;
  --r:8px;--signr:8px;--tkshadow:drop-shadow(5px 6px 0 var(--sh));
  --disp:'Lalezar','Alexandria',sans-serif;--dw:400}
body[data-th=night]{
  color-scheme:dark;--paper:#16224A;--sa:#16224A;--sb:#1B2A58;--sw:54px;
  --ink:#FFF6E2;--ink2:#C6CFE8;--acc:#FF5C93;--acc2:#FFD84D;--line:#FFFFFF24;
  --hdr:#16224AEE;--signbg:linear-gradient(160deg,#0E1636,#1A1A4C);--signfg:#FFF6E2;--signsub:#D6DCF0;--signem:#FFD84D;--signline:#FF5C93;--dot:#FFD84D;
  --card:#22336A;--cardfg:#FFF6E2;--cardsub:#C6CFE8;--stepn:#FFD84D;--stepnf:#16224A;
  --closebg:linear-gradient(120deg,#FF5C93,#FF8A3D);--closefg:#fff;--closesub:#fff;--btn:#FFD84D;--btnf:#16224A;--foot:#0E1636;--footf:#C6CFE8;--ovbg:#16224Af0;
  --r:12px;--signr:18px;--tkshadow:drop-shadow(0 14px 22px #0009);
  --disp:'Changa','Alexandria',sans-serif;--body:'Changa','Alexandria',sans-serif;--dw:800;--fillb:#FFF6E2;--filld:#FFD84D;--lf:drop-shadow(0 0 7px #FF5C93) drop-shadow(0 0 2px #FF5C93)}
body[data-th=swing]{
  --paper:#EFE7FF;--sa:#F2EBFF;--sb:#E8DEFF;--sw:30px;--sdir:45deg;
  --ink:#2A1466;--ink2:#5E4C8E;--acc:#6A35F2;--acc2:#20CFA2;--line:#2A146622;
  --hdr:#F2EBFFEE;--signbg:linear-gradient(135deg,#6A35F2,#8D3DF0 60%,#E84BA6);--signfg:#fff;--signsub:#F0E7FF;--signem:#8DF7D6;--signline:#ffffff66;--dot:#8DF7D6;
  --card:#fff;--cardfg:#2A1466;--cardsub:#5E4C8E;--stepn:#FF5FA2;--stepnf:#fff;
  --closebg:linear-gradient(135deg,#6A35F2,#E84BA6);--closefg:#fff;--closesub:#F0E7FF;--btn:#8DF7D6;--btnf:#2A1466;--foot:#2A1466;--footf:#D8CCF5;--ovbg:#F2EBFFf0;
  --r:20px;--signr:28px;--tkshadow:drop-shadow(0 12px 16px #2a146633);
  --disp:'Baloo Bhaijaan 2','Alexandria',sans-serif;--body:'Baloo Bhaijaan 2','Alexandria',sans-serif;--dw:800;--fillb:#6A35F2;--filld:#FF5FA2;--lf:drop-shadow(1.5px 0 0 #fff) drop-shadow(-1.5px 0 0 #fff) drop-shadow(0 1.5px 0 #fff) drop-shadow(0 -1.5px 0 #fff) drop-shadow(0 4px 5px #2a146655)}
body[data-th=shop][data-pal=coffee]{--paper:#F9F2E4;--sa:#F9F2E4;--sb:#EFE1C6;--ink:#2C1A0E;--ink2:#6B5644;--acc:#A86F1E;--acc2:#E3A93C;--line:#2C1A0E26;--hdr:#F9F2E4F2;--signbg:#3B2314;--signfg:#FBF3E2;--signsub:#E6D8BF;--signem:#E9B354;--signline:#E3A93C;--dot:#E3A93C;--card:#FFFBF2;--cardfg:#2C1A0E;--cardsub:#6B5644;--stepn:#3B2314;--stepnf:#F3C877;--closebg:#3B2314;--closefg:#FBF3E2;--closesub:#E6D8BF;--btn:#E3A93C;--btnf:#2C1A0E;--foot:#2C1A0E;--footf:#E6D8BF;--ovbg:#F9F2E4f2;--sh:#2C1A0E;--stamp:#3B2314;--stampbg:#E9B354;--lg:linear-gradient(112deg,#C98A25 8%,#7A4A1C 34%,#3B2314 60%);--lgs:#1F1208;--slg:linear-gradient(112deg,#F0BE63 10%,#F6E7C8 42%,#FBF3E2 70%);--scr:#E9B354}
body[data-th=shop][data-pal=wine]{--paper:#FBF3EA;--sa:#FBF3EA;--sb:#F2DDD3;--ink:#3A0B13;--ink2:#70504F;--acc:#8E1B2E;--acc2:#E2B15A;--line:#3A0B1326;--hdr:#FBF3EAF2;--signbg:#6E1423;--signfg:#FFF5E8;--signsub:#F0D9CF;--signem:#EFC174;--signline:#E2B15A;--dot:#E2B15A;--card:#FFFBF5;--cardfg:#3A0B13;--cardsub:#70504F;--stepn:#6E1423;--stepnf:#F6D38F;--closebg:#6E1423;--closefg:#FFF5E8;--closesub:#F0D9CF;--btn:#E2B15A;--btnf:#3A0B13;--foot:#3A0B13;--footf:#F0D9CF;--ovbg:#FBF3EAf2;--sh:#3A0B13;--stamp:#6E1423;--stampbg:#EFC174;--lg:linear-gradient(112deg,#C4442F 8%,#8E1B2E 36%,#5A0F1C 62%);--lgs:#32090F;--slg:linear-gradient(112deg,#EFC174 10%,#F9E5D2 42%,#FFF5E8 70%);--scr:#EFC174}
body[data-th=shop][data-pal=royal]{--paper:#F6F7FB;--sa:#F6F7FB;--sb:#DFE6F6;--ink:#0B1E50;--ink2:#4C5A7D;--acc:#1742B0;--acc2:#F2C14E;--line:#0B1E5026;--hdr:#F6F7FBF2;--signbg:#102E7A;--signfg:#FFFFFF;--signsub:#D8E1F7;--signem:#F8CF6A;--signline:#F2C14E;--dot:#F2C14E;--card:#FFFFFF;--cardfg:#0B1E50;--cardsub:#4C5A7D;--stepn:#102E7A;--stepnf:#F8CF6A;--closebg:#102E7A;--closefg:#FFFFFF;--closesub:#D8E1F7;--btn:#F2C14E;--btnf:#0B1E50;--foot:#0B1E50;--footf:#D8E1F7;--ovbg:#F6F7FBf2;--sh:#0B1E50;--stamp:#102E7A;--stampbg:#F8CF6A;--lg:linear-gradient(112deg,#2F6BE8 8%,#1742B0 36%,#0E2A70 62%);--lgs:#081740;--slg:linear-gradient(112deg,#F8CF6A 10%,#EEF2FD 42%,#FFFFFF 70%);--scr:#F8CF6A}
body[data-th=shop][data-pal=ink]{--paper:#F5F5EE;--sa:#F5F5EE;--sb:#E7E8DD;--ink:#17191C;--ink2:#55585A;--acc:#17191C;--acc2:#C9F23A;--line:#17191C26;--hdr:#F5F5EEF2;--signbg:#17191C;--signfg:#F8F8F0;--signsub:#D4D6CE;--signem:#C9F23A;--signline:#C9F23A;--dot:#C9F23A;--card:#FFFFFA;--cardfg:#17191C;--cardsub:#55585A;--stepn:#17191C;--stepnf:#C9F23A;--closebg:#17191C;--closefg:#F8F8F0;--closesub:#D4D6CE;--btn:#C9F23A;--btnf:#17191C;--foot:#0E0F11;--footf:#D4D6CE;--ovbg:#F5F5EEf2;--sh:#17191C;--stamp:#17191C;--stampbg:#C9F23A;--lg:linear-gradient(112deg,#4A4F54 8%,#26292D 36%,#121417 62%);--lgs:#000000;--slg:linear-gradient(112deg,#C9F23A 10%,#F1F5DF 40%,#F8F8F0 70%);--scr:#C9F23A}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;background:var(--paper)}
body{font-family:var(--body);color:var(--ink);line-height:1.6;overflow-x:hidden;-webkit-tap-highlight-color:transparent;font-synthesis:none;
  background:var(--grain),repeating-linear-gradient(var(--sdir),var(--sa) 0 var(--sw),var(--sb) var(--sw) calc(var(--sw)*2)),var(--paper);transition:background-color .3s}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--acc);outline-offset:3px}
.wrap{max-width:1120px;margin-inline:auto;padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px))}
.dia{display:inline-block;width:.62em;height:.62em;background:var(--acc);transform:rotate(45deg);flex:none}

/* Header and logo */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:var(--hdr);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:41;background:var(--paper)}
.hd{display:flex;align-items:center;justify-content:space-between;gap:16px;height:72px}
.lw{display:block;position:relative;width:98px;height:54px;filter:var(--lf,none);transition:transform .25s}
.lw:hover{transform:rotate(-2deg) scale(1.04)}
.lw img{display:block;width:100%;height:100%;object-fit:contain}
.lw i{position:absolute;inset:0;display:none;-webkit-mask:var(--lgi) center/contain no-repeat;mask:var(--lgi) center/contain no-repeat;
  background:var(--lg)}
body:not([data-th=base]) .lw img{display:none}
body:not([data-th=base]) .lw i{display:block}
.lw{filter:drop-shadow(0 2px 0 var(--lgs)) drop-shadow(0 5px 6px #0003)}
@media (max-width:759px){.lw{width:112px;height:60px}}
nav{display:none;gap:30px;font-size:15px;font-weight:500}
nav a{text-decoration:none;padding:6px 0;border-bottom:2px solid #0000}
nav a:hover{border-color:var(--acc)}
#joinb{font-weight:600;font-size:14px;padding:9px 18px;border:1.5px solid var(--ink);border-radius:calc(var(--r)*.7);white-space:nowrap;transition:.2s}
#joinb:hover{background:var(--ink);color:var(--paper)}

/* The sign, with the explainer inside it */
.hero{padding-block:20px 8px}
body[data-hd=plaque] .hero{padding-top:52px}
.sign{position:relative;max-width:960px;margin-inline:auto;background:var(--signbg);color:var(--signfg);border-radius:var(--signr);padding:11px;box-shadow:0 22px 40px #26292d38}
.sign-in{border:1px solid var(--signline);border-radius:calc(var(--signr)*.6);padding:clamp(14px,3vw,24px) clamp(12px,3vw,28px);position:relative}
.dots{display:flex;justify-content:center;gap:clamp(10px,2vw,16px);overflow:hidden}
.dots i{width:6px;height:6px;background:var(--dot);transform:rotate(45deg);flex:none;animation:chase 3.6s linear infinite;animation-delay:calc(var(--i)*.075s);opacity:.45}
@keyframes chase{0%,14%{opacity:1;transform:rotate(45deg) scale(1.35)}24%,100%{opacity:.45;transform:rotate(45deg)}}
.sgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;align-items:center;padding-block:9px}
.stxt{text-align:center;min-width:0}
.eyebrow{display:block;font-size:13.5px;font-weight:600;color:var(--signem)}
h1{font-family:var(--disp);font-weight:var(--dw);font-size:clamp(29px,7.9vw,54px);line-height:1.28;margin-top:2px}
h1 em{font-style:normal;color:var(--signem);white-space:nowrap}
.stxt p{font-size:clamp(14.5px,3.8vw,17px);margin-top:9px;color:var(--signsub)}
.demo{position:relative;background:#ffffff14;border-radius:calc(var(--signr)*.5);padding:10px 10px 8px;min-width:0}
body[data-th=shop] .demo{background:var(--paper);color:var(--ink)}
.demo svg{display:block;width:100%;max-width:420px;margin-inline:auto;height:auto}
main{overflow-x:clip}
/* Tickets */
.grid{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;padding-block:24px 8px;max-width:1000px;margin-inline:auto}
.tk{--tr:0deg;position:relative;display:block;width:100%;text-align:right;transform:rotate(var(--tr));transition:transform .28s cubic-bezier(.25,1.3,.4,1)}
.tk:nth-child(1){--tr:-.5deg}.tk:nth-child(2){--tr:.45deg}.tk:nth-child(3){--tr:.4deg}.tk:nth-child(4){--tr:-.45deg}
.tk:hover{transform:translateY(-6px) rotate(0deg)}
.tk .under{position:absolute;inset:6px -3px -6px 3px;border-radius:var(--r);background:var(--c);opacity:.28;transform:rotate(1.1deg)}
.tb{position:relative;display:block;filter:var(--tkshadow)}
.tin{display:grid;grid-template-columns:minmax(0,1fr) 62px;min-height:164px;border-radius:var(--r);overflow:hidden;
  -webkit-mask:radial-gradient(circle 10px at 62px 0,#0000 97%,#000),radial-gradient(circle 10px at 62px 100%,#0000 97%,#000);-webkit-mask-composite:source-in;
  mask:radial-gradient(circle 10px at 62px 0,#0000 97%,#000),radial-gradient(circle 10px at 62px 100%,#0000 97%,#000);mask-composite:intersect}
.tm{position:relative;overflow:hidden;background:var(--grain),#FFF8EA;color:#26292D;padding:14px 18px 13px 92px;display:flex;flex-direction:column;justify-content:center;min-width:0;box-shadow:inset 0 1px 0 #fff}
body[data-th=swing] .tm{background:var(--grain),#fff}
.tm .lg{display:block;height:52px;width:auto;max-width:180px;object-fit:contain;object-position:right center;margin-bottom:7px}
.tm h3{font-family:var(--disp);font-weight:var(--dw);font-size:clamp(17.5px,4.6vw,21px);line-height:1.35;position:relative}
body[data-th=base] .tm h3{font-weight:700}
.meta{display:flex;flex-wrap:wrap;gap:4px 6px;margin-top:7px;position:relative}
.meta span{font-size:11.5px;font-weight:600;padding:1px 8px;border-radius:99px;background:#26292D10;color:#4b4a46;white-space:nowrap}
.no{position:absolute;top:9px;left:10px;font:700 9.5px var(--mono);letter-spacing:.5px;color:#26292D66;direction:ltr}
.motif{position:absolute;left:0;top:0;bottom:0;width:84px;height:100%;pointer-events:none;transition:transform .35s}
.tk:hover .motif{transform:scale(1.06)}
.tm::after{content:"";position:absolute;top:-10%;bottom:-10%;left:-40%;width:18%;background:linear-gradient(100deg,#fff0,#ffffff80,#fff0);transform:skewX(-14deg);opacity:0;pointer-events:none}
.tk.lit .tm::after,.tk:hover .tm::after{animation:shine .9s ease-out}
@keyframes shine{0%{left:-40%;opacity:1}100%{left:120%;opacity:1}}
.ts{position:relative;background:var(--grain),linear-gradient(90deg,#00000014,#0000 30%),var(--c);color:#FFF8EA;border-right:2px dashed #fff8EA99;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.ts b{writing-mode:vertical-rl;transform:rotate(180deg);font-weight:700;font-size:15.5px;white-space:nowrap}
.ts i{width:9px;height:9px;background:#FFF8EA;transform:rotate(45deg);opacity:.9}
.after{text-align:center;padding-block:14px 4px}
.after strong{display:block;font-family:var(--disp);font-weight:var(--dw);font-size:clamp(18px,4.8vw,24px)}
.after span{font-size:14px;color:var(--ink2)}

/* Entry and idle motion, one idea per identity */
body[data-th=base].go .tk{animation:deal .5s cubic-bezier(.2,.9,.3,1) both;animation-delay:calc(var(--n)*.09s + .1s)}
@keyframes deal{from{opacity:0;transform:translateX(26px) rotate(calc(var(--tr) + 1.6deg))}to{opacity:1;transform:rotate(var(--tr))}}
body[data-th=shop].go .tk{animation:stamp .34s cubic-bezier(.3,1.5,.5,1) both;animation-delay:calc(var(--n)*.12s + .1s)}
@keyframes stamp{from{opacity:0;transform:scale(1.22) rotate(calc(var(--tr) - 2deg))}to{opacity:1;transform:rotate(var(--tr))}}
body[data-th=shop] .tk.lit{animation:wig .5s ease!important}
@keyframes wig{25%{transform:rotate(calc(var(--tr) - 1.3deg))}60%{transform:rotate(calc(var(--tr) + 1deg))}}
.stampm{display:none;position:absolute;top:18px;left:14px;font:400 19px/1 var(--disp);color:var(--stamp);border:3px solid var(--stamp);padding:6px 10px 3px;border-radius:6px;transform:rotate(-11deg);background:var(--stampbg)}
body[data-th=shop] .stampm{display:block}
body[data-th=shop].go .stampm{animation:smk .3s .85s cubic-bezier(.3,1.6,.5,1) both}
@keyframes smk{from{opacity:0;transform:scale(2) rotate(-4deg)}to{opacity:1;transform:rotate(-11deg)}}
body[data-th=shop] h1{font-size:clamp(36px,9.8vw,52px);line-height:1.18}
body[data-th=shop] .sign{box-shadow:6px 7px 0 var(--sh);border:3px solid var(--sh)}
body[data-th=shop] .steps{box-shadow:5px 6px 0 var(--sh);border:2.5px solid var(--sh)}
body[data-th=shop] .primary{box-shadow:3px 4px 0 var(--sh)}
body[data-th=night].go .tk{animation:glowin .7s ease-out both;animation-delay:calc(var(--n)*.14s + .1s)}
@keyframes glowin{from{opacity:0;filter:brightness(1.8) blur(5px)}to{opacity:1;filter:none}}
body[data-th=night] .sign{box-shadow:0 0 0 1.5px #FF5C93,0 0 26px #FF5C9366,0 20px 40px #0007}
body[data-th=night] .dots i{box-shadow:0 0 6px var(--dot)}
body[data-th=night] .tb{transition:filter .5s}
body[data-th=night] .tk.lit .tb{filter:drop-shadow(0 0 18px var(--glow))}
body[data-th=night] .tk.lit{transform:translateY(-4px) rotate(0deg)}
body[data-th=swing] .grid{gap:34px;padding-top:40px}
body[data-th=swing].go .tk{animation:drop .75s cubic-bezier(.25,1.5,.45,1) both;animation-delay:calc(var(--n)*.1s + .1s)}
@keyframes drop{from{opacity:0;transform:translateY(-22px) rotate(-5deg)}to{opacity:1;transform:rotate(var(--tr))}}
body[data-th=swing] .tk{transform-origin:50% -12px}
body[data-th=swing] .tk.lit{animation:swing 1.4s ease-in-out!important}
@keyframes swing{20%{transform:rotate(2.2deg)}45%{transform:rotate(-1.6deg)}70%{transform:rotate(1deg)}100%{transform:rotate(var(--tr))}}
.clip{display:none;position:absolute;z-index:3;top:-19px;right:50%;width:14px;height:30px;margin-right:-7px;border-radius:4px;background:linear-gradient(90deg,#FF5FA2,#FF8FBE);box-shadow:0 2px 3px #2a146644}
.clip::after{content:"";position:absolute;left:50%;top:7px;width:2px;height:16px;margin-left:-1px;background:#fff9}
body[data-th=swing] .clip{display:block}
.rope{display:none;position:absolute;left:-18px;right:-18px;top:-13px;height:2px;background:#2A146633}
body[data-th=swing] .rope{display:block}
.rv.in{animation:rv .55s ease-out both}
@keyframes rv{from{opacity:.2;transform:translateY(14px)}to{opacity:1;transform:none}}

/* Sections */
section.band{padding-block:clamp(44px,8vw,72px)}
.band h2{font-family:var(--disp);font-weight:var(--dw);font-size:clamp(27px,7vw,42px);line-height:1.28;text-align:center;text-wrap:balance}
.kick{display:flex;align-items:center;justify-content:center;gap:9px;font-size:13.5px;font-weight:600;color:var(--acc);margin-bottom:6px}
.steps{display:grid;grid-template-columns:minmax(0,1fr);margin-top:26px;background:var(--grain),var(--card);color:var(--cardfg);border-radius:calc(var(--r) + 2px);box-shadow:0 14px 26px #4a371c1f}
.step{position:relative;padding:20px 20px;display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px}
.step+.step{border-top:2px dashed var(--line)}
.step>i{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:800;font-size:19px;color:var(--stepnf);background:var(--stepn)}
.step h3{font-family:var(--disp);font-weight:var(--dw);font-size:18.5px;line-height:1.35}
body[data-th=base] .step h3{font-weight:700}
.step p{font-size:14.5px;color:var(--cardsub);margin-top:3px}
.tbl{margin-top:24px;border-top:2px solid var(--ink)}
.tr{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:2px 14px;padding:13px 4px;border-bottom:1px solid var(--line);width:100%;text-align:right;align-items:center;transition:background .2s}
.tr:hover{background:#ffffff26}
.tr .n{display:flex;align-items:center;gap:10px;font-weight:700;font-size:17px;min-width:0}
.tr .n u{flex:none;width:10px;height:10px;background:var(--dc,var(--c));transform:rotate(45deg)}
.tr .pl{font-size:14px;font-weight:600;text-align:left}
.tr .mood{grid-column:1/-1;order:3;font-size:14px;color:var(--ink2);padding-right:20px}
.tbh{display:none;font-size:12.5px;font-weight:600;color:var(--ink2)}
.faq{max-width:760px;margin:22px auto 0}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:14px;padding:15px 2px;font-weight:600;font-size:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:21px;line-height:1;color:var(--acc)}
.faq details[open] summary::after{content:"−"}
.faq p{padding:0 2px 15px;font-size:14.5px;color:var(--ink2)}
.close{background:var(--closebg);color:var(--closefg);text-align:center;padding-block:46px 86px}
.close h2{font-family:var(--disp);font-weight:var(--dw);font-size:clamp(27px,7vw,42px);line-height:1.28}
.close p{font-size:15.5px;color:var(--closesub);margin:4px 0 18px}
.primary{display:inline-block;background:var(--btn);color:var(--btnf);font-weight:700;font-size:17px;padding:13px 34px;border-radius:calc(var(--r)*.75);text-decoration:none;transition:transform .2s}
.primary:hover{transform:translateY(-3px)}
footer{background:var(--foot);color:var(--footf);padding-block:22px calc(70px + env(safe-area-inset-bottom,0px));font-size:13.5px}
.ft{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px}
.ft .fm{height:38px;width:70px;background:var(--footf);-webkit-mask:var(--lgi) center/contain no-repeat;mask:var(--lgi) center/contain no-repeat}
.ft ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px}
.proto{width:100%;font-size:12px;opacity:.65}

/* Comparing identities */
/* A slow light passes over the logo, the same on the sign and at the top */
body[data-hd=plaque] .lw i{background:linear-gradient(105deg,#fff0 42%,#ffffffd0 50%,#fff0 58%) no-repeat,var(--slg);background-size:260% 100%,100% 100%;animation:lgsh 6.5s ease-in-out infinite}
@keyframes lgsh{0%,70%{background-position:130% 0,0 0}100%{background-position:-60% 0,0 0}}
.lw:hover{transform:rotate(-1.5deg) scale(1.03)}
.lw{transition:transform .3s cubic-bezier(.3,1.5,.5,1)}
body.go .lw{animation:lgin .6s cubic-bezier(.3,1.4,.5,1) both}
@keyframes lgin{from{opacity:0;transform:translateY(-8px) scale(.94)}to{opacity:1;transform:none}}
/* Option 2: a sign hanging from the top edge */
body[data-hd=plaque] .lw{filter:none;width:auto;height:auto;background:var(--signbg);padding:20px 16px 12px;margin-top:-1px;align-self:flex-start;border-radius:0 0 14px 14px;box-shadow:4px 5px 0 var(--sh);border:3px solid var(--sh);border-top:0;position:relative;z-index:2}
body[data-hd=plaque] .lw i{position:relative;inset:auto;display:block;width:104px;height:57px}
body[data-hd=plaque] .hd{height:64px;overflow:visible}
@media (min-width:760px){
  nav{display:flex}
  br.mb{display:none}
      h1 em{white-space:nowrap}
  .sgrid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:26px}
  .stxt{text-align:right}
  h1{font-size:clamp(26px,3vw,40px);white-space:nowrap}
  body[data-th=shop] h1{font-size:clamp(32px,3.9vw,52px)}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  body[data-th=swing] .grid{gap:44px 26px}
  .tm{padding-left:124px}
  .motif{width:112px}
  .steps{grid-template-columns:repeat(3,minmax(0,1fr))}
  .step+.step{border-top:0;border-right:2px dashed var(--line)}
  .tr{grid-template-columns:1fr 2fr 130px;padding:15px 8px}
  .tr .mood{grid-column:auto;order:0;padding:0}
  .tbh{display:grid;grid-template-columns:1fr 2fr 130px;gap:14px;padding:8px 8px}
  .tbh span:last-child{text-align:left}
}
/* ---------- Tickets (shared) ---------- */
.face{position:absolute;inset:0;display:flex;flex-direction:column;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.back{transform:rotateY(180deg)}
.pm{flex:0 0 75%;min-height:0;position:relative;
  -webkit-mask:radial-gradient(circle 1em at 0 100%,#0000 97%,#000) left/50.5% 100% no-repeat,radial-gradient(circle 1em at 100% 100%,#0000 97%,#000) right/50.5% 100% no-repeat;
  mask:radial-gradient(circle 1em at 0 100%,#0000 97%,#000) left/50.5% 100% no-repeat,radial-gradient(circle 1em at 100% 100%,#0000 97%,#000) right/50.5% 100% no-repeat}
.ps{flex:1;min-height:0;position:relative;transform-origin:0 0;
  -webkit-mask:radial-gradient(circle 1em at 0 0,#0000 97%,#000) left/50.5% 100% no-repeat,radial-gradient(circle 1em at 100% 0,#0000 97%,#000) right/50.5% 100% no-repeat;
  mask:radial-gradient(circle 1em at 0 0,#0000 97%,#000) left/50.5% 100% no-repeat,radial-gradient(circle 1em at 100% 0,#0000 97%,#000) right/50.5% 100% no-repeat}
.pm>.in{position:absolute;inset:0;overflow:hidden;border-radius:1em 1em 0 0;display:flex;flex-direction:column;align-items:center;
  -webkit-mask:radial-gradient(circle .2em at 50% 100%,#0000 95%,#000) 0 0/.7em 100% repeat-x,radial-gradient(circle .95em at 50% 2.1em,#0000 97%,#000);-webkit-mask-composite:source-in;
  mask:radial-gradient(circle .2em at 50% 100%,#0000 95%,#000) 0 0/.7em 100% repeat-x,radial-gradient(circle .95em at 50% 2.1em,#0000 97%,#000);mask-composite:intersect}
.ps>.in{position:absolute;inset:0;overflow:hidden;border-radius:0 0 1em 1em;
  -webkit-mask:radial-gradient(circle .2em at 50% 0,#0000 95%,#000) 0 0/.7em 100% repeat-x;mask:radial-gradient(circle .2em at 50% 0,#0000 95%,#000) 0 0/.7em 100% repeat-x}
.st{height:100%;padding:1.1em 1.5em .9em;display:flex;align-items:center;justify-content:space-between;background:var(--stub);color:var(--cream)}
.facts{display:flex;gap:1.6em}
.facts div{display:flex;flex-direction:column;line-height:1.1}
.facts b{font:800 2.9em/1 var(--disp)}
.facts span{font-weight:600;font-size:1.15em;margin-top:.25em;opacity:.9}
.bar{width:6.4em;height:60%;background:repeating-linear-gradient(90deg,currentColor 0 .14em,#0000 .14em .34em,currentColor .34em .7em,#0000 .7em .84em,currentColor .84em .92em,#0000 .92em 1.18em);opacity:.9}
.t-mendas{--stub:#B3141B;--bb:#151014;--bt:var(--cream)}
.t-mendas .art{flex:1;width:100%;display:flex;flex-direction:column;align-items:center;padding-top:3.7em;background:radial-gradient(62% 40% at 50% 74%,#D3161D 0,#6b0c12 58%,#151014 100%)}
.t-mendas .lg{width:80%}
.t-mendas h2{font:800 2.75em/1.14 var(--disp);text-align:center;margin-top:.1em;color:var(--cream)}
.t-mendas .crowd{margin-top:auto;width:100%;display:block}
.t-bursa{--stub:#0F2C4C;--bb:#EFEBD3;--bt:#0F2C4C}
.t-bursa .art{flex:1;width:100%;position:relative;display:flex;flex-direction:column;align-items:center;padding:3.6em 1.6em 1.4em;background:#F0ECD4;color:#0F2C4C}
.t-bursa .fr{position:absolute;inset:.9em;border:.16em solid #0F2C4C;outline:.06em solid #0F2C4C;outline-offset:-.5em}
.t-bursa .ros{position:absolute;left:50%;top:50%;width:25em;height:25em;transform:translate(-50%,-50%);opacity:.42}
.t-bursa .n{position:absolute;font:800 2.2em/1 var(--disp);color:#0F2C4C}
.t-bursa .lg{width:66%;position:relative}
.t-bursa h2{font:700 2.75em/1.15 Amiri,serif;text-align:center;position:relative;margin-top:.1em}
.t-bursa .ch{position:relative;width:100%;margin-top:auto;display:block}
.t-story{--stub:#492C46;--bb:#F8D2C2;--bt:#492C46}
.t-story .art{flex:1;width:100%;display:flex;flex-direction:column;align-items:center;padding:3.6em 2em 1.5em;color:#492C46;background:linear-gradient(152deg,#0000 49.6%,#a95f5f38 50%,#ffffff40 52%,#0000 58%),repeating-linear-gradient(#0000 0 2.54em,#a0546a30 2.54em 2.64em),#F8CDBA}
.t-story .lg{width:58%;transform:rotate(-3deg)}
.t-story h2{font:700 2.3em/1.3 Marhey,var(--body);text-align:center;margin-top:.45em}
.t-story .note{margin-top:auto;font:500 1.55em/1.64 Marhey,var(--body);transform:rotate(-1.4deg);width:100%}
.t-story .note u{text-decoration:none;display:inline-block;height:.8em;width:var(--u,4em);background:#492C46;border-radius:.1em;vertical-align:-.08em}
.t-cipher{--stub:#1E4636;--bb:#27332F;--bt:var(--cream)}
.t-cipher .art{flex:1;width:100%;display:flex;flex-direction:column;align-items:center;padding:3.6em 1.6em 1.2em;color:var(--cream);background:repeating-linear-gradient(90deg,#ffffff07 0 .1em,#0000 .1em .34em),linear-gradient(160deg,#5C6E68,#2C3936 60%,#1E2926)}
.t-cipher .pl{background:#EFE9D8;padding:.15em 1em;border-radius:.45em;width:64%;box-shadow:0 .25em .5em #0007}
.t-cipher .pl img{display:block;width:100%}
.t-cipher h2{font:800 2.75em/1.14 var(--disp);text-align:center;margin-top:.5em}
.t-cipher .dial{width:80%;margin-top:auto;display:block}

/* Opened ticket */
#ov{position:fixed;inset:0;z-index:80;background:#FFF7E6ee;backdrop-filter:blur(6px);display:none;touch-action:none;user-select:none;-webkit-user-select:none}
#ov.on{display:block}
#ot{position:absolute;left:50%;top:calc(60px + env(safe-area-inset-top,0px));width:var(--w);height:calc(var(--w)/.55);margin-left:calc(var(--w)/-2);font-size:calc(var(--w)/30);perspective:150em;transition:transform .7s steps(12,end)}
#ot.gone{transform:translateY(-130vh)}
.flip{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .62s cubic-bezier(.3,1.3,.4,1)}
#ot.on .flip{transform:rotateY(180deg)}
#ot .face{filter:drop-shadow(0 1em 1.2em #21103d55)}
.howb{flex:1;width:100%;padding:4.1em 2em 1.4em;display:flex;flex-direction:column;gap:1.1em;background:var(--bb);color:var(--bt)}
.howb h3{font:800 3.3em/1 var(--disp);text-align:center}
.howb ol{list-style:none;padding:0;display:flex;flex-direction:column;gap:1em;flex:1;justify-content:center}
.howb li{display:flex;gap:.8em;align-items:flex-start;font-size:1.65em;font-weight:600;line-height:1.35}
.howb li i{flex:none;width:1.55em;height:1.55em;border-radius:50%;display:grid;place-items:center;font:800 .95em var(--disp);background:var(--stub);color:var(--cream)}
.howb em{font-style:normal;text-align:center;font-size:1.15em;opacity:.7}
.tear{height:100%;padding:1.2em 1.5em .9em;display:flex;align-items:center;gap:1em;background:var(--stub);color:var(--cream);cursor:grab;touch-action:none}
.tear strong{display:block;font:800 2.6em/1.05 var(--disp)}
.tear small{display:block;font-size:1.2em;font-weight:600;margin-top:.25em;opacity:.9}
.chev{flex:none;width:3.2em;height:4.4em}
.chev path{fill:none;stroke:currentColor;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;animation:ch 1.3s infinite}
.chev path:nth-child(2){animation-delay:.18s}.chev path:nth-child(3){animation-delay:.36s}
@keyframes ch{0%,100%{opacity:.25}35%{opacity:1}}
.nudge{animation:ng .7s ease}
@keyframes ng{30%{transform:rotate(8deg)}60%{transform:rotate(3deg)}80%{transform:rotate(5deg)}100%{transform:none}}
#ovx{position:absolute;z-index:3;top:calc(12px + env(safe-area-inset-top,0px));left:max(14px,env(safe-area-inset-left,0px));font-weight:600;font-size:14px;padding:8px 14px;border:2px solid var(--ink);border-radius:99px;background:#fff}
#ovh{position:absolute;z-index:3;top:calc(19px + env(safe-area-inset-top,0px));right:max(16px,env(safe-area-inset-right,0px));font:800 20px var(--disp)}
#keep{position:absolute;z-index:4;transition:top .6s cubic-bezier(.25,1.2,.35,1),height .6s cubic-bezier(.25,1.2,.35,1);filter:drop-shadow(0 1em 1.2em #21103d55)}
#keep .ps{position:absolute;inset:0}
.kc{height:100%;background:var(--stub);color:var(--cream);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.6em 1em 1em}
.kc small{font-weight:600;font-size:1.5em}
.kc output{display:block;direction:ltr;font:700 6.4em/1.15 var(--mono);letter-spacing:.06em;min-height:1.15em;white-space:nowrap}
#after{position:absolute;z-index:4;left:20px;right:20px;text-align:center;display:none}
#after.on{display:block}
#after h2{font:800 36px/1.1 var(--disp)}
#after p{font-size:16px;line-height:1.5;margin-top:6px;font-weight:600}
#after button{margin-top:14px;background:var(--ink);color:#fff;font:800 20px var(--disp);padding:11px 26px 8px;border-radius:12px}
#after em{display:block;font-style:normal;font-size:12px;opacity:.65;margin-top:10px}

/* Sheets */
.sheet{position:fixed;inset:0;z-index:100;display:flex;align-items:flex-end;justify-content:center;background:#21103d66}
.sheet[hidden]{display:none}
.sheet>div,.sheet>form{width:100%;max-width:460px;background:#fff;border-radius:20px 20px 0 0;padding-block:20px calc(20px + env(safe-area-inset-bottom,0px));padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.sheet h2{font:800 28px/1.1 var(--disp);text-align:center}
.sheet ol{list-style:none;padding:0;margin:14px 0;display:flex;flex-direction:column;gap:12px}
.sheet li{display:flex;gap:10px;font-weight:600;line-height:1.45}
.sheet li i{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:800 15px var(--disp);background:var(--ink);color:#fff}
.sheet .x{display:block;margin:6px auto 0;font-weight:600;font-size:14px;padding:8px 14px}
.sheet label{display:block;text-align:center;font-size:14.5px;margin:4px 0 12px}
#code-in{display:block;width:100%;max-width:240px;margin:0 auto 12px;padding:10px;text-align:center;direction:ltr;font:700 34px/1.1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);background:#FFF7E6;border:2px dashed var(--ink);border-radius:10px}
.sheet .go{width:100%;background:var(--ink);color:#fff;font:800 21px var(--disp);padding:12px 12px 9px;border-radius:12px}
#sheet-out{display:block;text-align:center;font-size:13.5px;margin-top:8px;min-height:1.4em}

/* The shopfront: awning above, door tag, a window with the real three steps, a counter below */
.shopf{position:relative;max-width:960px;margin-inline:auto}
.awn{position:absolute;z-index:2;top:-17px;left:-9px;right:-9px;height:42px;filter:drop-shadow(0 4px 0 #0003)}
.awn::before{content:"";position:absolute;inset:0 0 auto;height:6px;z-index:1;background:var(--sh);border-radius:4px}
.awn i{display:block;height:100%;background:linear-gradient(90deg,var(--acc) 50%,var(--tkp) 50%) 0 0/56px 100%;
  -webkit-mask:linear-gradient(#000 0 0) top/100% 28px no-repeat,radial-gradient(circle 14px at 50% 0,#000 97%,#0000) 0 28px/28px 14px repeat-x;
  mask:linear-gradient(#000 0 0) top/100% 28px no-repeat,radial-gradient(circle 14px at 50% 0,#000 97%,#0000) 0 28px/28px 14px repeat-x}
body[data-th=shop] .sign{padding:34px 0 0;overflow:hidden}
.sign-in{border:0;padding:6px 14px 14px}
.opentag{position:absolute;z-index:3;top:37px;left:14px;font:400 17px/1 var(--disp);color:var(--ink);background:var(--signem);border:2.5px solid var(--sh);border-radius:6px;padding:7px 10px 4px;transform-origin:50% -13px;cursor:pointer;animation:tagidle 7s ease-in-out infinite}
.opentag::before,.opentag::after{content:"";position:absolute;top:-14px;width:2px;height:12px;background:var(--sh)}
.opentag::before{left:12px}.opentag::after{right:12px}
.opentag.sw{animation:tagsw 1.1s ease-out}
@keyframes tagidle{0%,88%,100%{transform:rotate(-3deg)}92%{transform:rotate(2deg)}96%{transform:rotate(-5deg)}}
@keyframes tagsw{20%{transform:rotate(13deg)}45%{transform:rotate(-10deg)}70%{transform:rotate(5deg)}100%{transform:rotate(-3deg)}}
.eyebrow{padding-top:6px}
.ledge{display:flex;align-items:center;justify-content:center;gap:9px;background:var(--btn);color:var(--btnf);font-weight:700;font-size:16px;padding:12px;text-decoration:none;border-top:3px solid var(--sh)}
.ledge svg{width:15px;height:15px;animation:lbob 1.5s ease-in-out infinite}
@keyframes lbob{50%{transform:translateY(3px)}}
/* The three real steps */
.demo{padding:8px 8px 8px;border-radius:10px;--tv:#0D1C20}
.demo svg{max-width:none;direction:ltr}
.demo text{font-family:Alexandria,sans-serif}
.demo .mn{font-family:'Space Mono',monospace;font-weight:700;letter-spacing:.06em}
.sc{opacity:0;pointer-events:none;transition:opacity .25s}
.demo[data-s="1"] .s1,.demo[data-s="2"] .s2,.demo[data-s="3"] .s3{opacity:1}
.tearg{transform-box:fill-box;transform-origin:0 0}
.demo[data-s="1"] .tearg{animation:dtear 4.4s both}
.demo[data-s="1"] .tkm{animation:dmain 4.4s both}
.demo[data-s="1"] .fing{animation:dfing 4.4s both}
.demo[data-s="1"] .kept{animation:dkept 4.4s both}
.tkm,.tearg,.fing{opacity:0}
@keyframes dmain{0%,50%{opacity:1;transform:none}66%,100%{opacity:0;transform:translateY(-34px)}}
@keyframes dtear{0%,20%{opacity:1;transform:none}46%{opacity:1;transform:translateY(14px) rotate(22deg)}56%,100%{opacity:0;transform:translateY(30px) rotate(30deg)}}
@keyframes dfing{0%,10%{opacity:0;transform:none}16%,20%{opacity:.95;transform:none}46%{opacity:.95;transform:translateY(30px)}52%,100%{opacity:0;transform:translateY(30px)}}
@keyframes dkept{0%,58%{opacity:0;transform:translateY(16px)}72%,100%{opacity:1;transform:none}}
.demo[data-s="2"] .tvin{animation:tvin .55s cubic-bezier(.25,1.25,.4,1) both}
@keyframes tvin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.demo[data-s="2"] .cd{animation:cdin .3s both;animation-delay:calc(.5s + var(--n)*.17s)}
@keyframes cdin{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.wt{animation:wt 1.5s ease-in-out infinite}
@keyframes wt{50%{opacity:.35}}
.demo[data-s="3"] .ty{animation:cdin .22s both;animation-delay:calc(.2s + var(--n)*.2s)}
.demo[data-s="3"] .pb{animation:pb .5s 1.1s both}
@keyframes pb{40%{transform:scale(.92)}}
.pb{transform-box:fill-box;transform-origin:center}
.pp{transform-box:fill-box;transform-origin:center}
.demo[data-s="3"] .pp{animation:ppin .4s cubic-bezier(.3,1.7,.5,1) both;animation-delay:calc(1.5s + var(--n)*.38s)}
@keyframes ppin{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:none}}
.dsteps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin-top:7px}
.dsteps button{position:relative;overflow:hidden;font-size:12px;font-weight:700;line-height:1.3;padding:7px 3px 8px;border-radius:7px;color:var(--ink);background:#0000;opacity:.62;text-align:center}
.dsteps button b{display:block;font-size:13px;font-weight:800}
.dsteps button[aria-pressed=true]{background:var(--acc);color:#fff;opacity:1}
.dsteps button[aria-pressed=true]::after{content:"";position:absolute;right:0;bottom:0;height:3px;width:100%;background:var(--signem);transform-origin:100% 50%;animation:dbar 4.4s linear both}
@keyframes dbar{from{transform:scaleX(0)}to{transform:none}}
/* Light shop drawings on empty surfaces */
body[data-th=shop] .sign{background:var(--dl) center top/210px,var(--signbg)}
.steps{background:var(--dd) center/230px,var(--card)}
.close{background:var(--dl) center/230px,var(--closebg)}
footer{background:var(--dl) center/230px,var(--foot);padding-bottom:calc(22px + env(safe-area-inset-bottom,0px))}
/* Balance, printed like a small ticket */
.hact{display:flex;align-items:center;gap:7px}
#joinb{padding:8px 11px;font-size:13px}
.balc{display:inline-flex;align-items:baseline;gap:4px;white-space:nowrap;background:var(--acc);color:#fff;font-size:12px;font-weight:600;padding:7px 12px 6px;
  -webkit-mask:radial-gradient(circle 5px at 0 50%,#0000 96%,#000) left/51% 100% no-repeat,radial-gradient(circle 5px at 100% 50%,#0000 96%,#000) right/51% 100% no-repeat;
  mask:radial-gradient(circle 5px at 0 50%,#0000 96%,#000) left/51% 100% no-repeat,radial-gradient(circle 5px at 100% 50%,#0000 96%,#000) right/51% 100% no-repeat}
.balc b{font:400 18px/1 var(--disp);color:var(--signem)}
.balc i{font-style:normal;font-weight:800;font-size:13px;color:var(--signem)}
.balc.bump{animation:bump .5s cubic-bezier(.3,1.7,.5,1)}
@keyframes bump{40%{transform:scale(1.18)}}
#ovbal{position:absolute;z-index:3;top:calc(14px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%)}
#ovbal.bump{animation:bump2 .5s cubic-bezier(.3,1.7,.5,1)}
@keyframes bump2{40%{transform:translateX(-50%) scale(1.18)}}
/* The counter has two jobs */
.ledges{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.ledge.win{background:var(--sh);color:var(--signem);width:100%;font:700 15px var(--body)}
.ledge.win svg{width:19px;height:16px;animation:none}
.ledges .ledge{font-size:15px;padding-inline:6px}
/* No tickets left */
#noT{position:absolute;z-index:5;left:14px;right:14px;bottom:calc(12px + env(safe-area-inset-bottom,0px));max-width:430px;margin-inline:auto;display:none;align-items:center;justify-content:space-between;gap:10px;background:var(--acc);color:#fff;padding:10px 14px;border:3px solid var(--sh);border-radius:10px;box-shadow:4px 5px 0 var(--sh)}
#noT.on{display:flex;animation:cdin .3s both}
#noT b{font:400 19px/1.1 var(--disp);white-space:nowrap}
#noT button{background:var(--signem);color:var(--ink);font-weight:700;font-size:13px;padding:8px 11px;border-radius:7px;white-space:nowrap}
/* The ticket window: its own place inside the shop */
#win{position:fixed;inset:0;z-index:85;display:none;overflow-y:auto;overscroll-behavior:contain;background:var(--dd) center/230px,repeating-linear-gradient(90deg,var(--sa) 0 var(--sw),var(--sb) var(--sw) calc(var(--sw)*2)),var(--paper)}
#win.on{display:block}
.wintop{position:relative;background:var(--dl) center top/210px,var(--signbg);color:#fff;text-align:center;padding:52px 18px 18px;padding-top:calc(52px + env(safe-area-inset-top,0px));border-bottom:3px solid var(--sh)}
.wintop .awn{top:0;left:0;right:0}
.wintop h2{font:400 34px/1.15 var(--disp)}
.wintop p{font-size:15px;margin-top:2px}
.wintop p b{font:400 24px/1 var(--disp);color:var(--signem);margin-inline:2px}
#winx{position:absolute;z-index:3;top:calc(50px + env(safe-area-inset-top,0px));left:14px;font-weight:600;font-size:13px;padding:6px 12px;border:1.5px solid #fff9;border-radius:99px;color:#fff}
.packs{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;padding-block:24px 8px;max-width:1000px}
.pk{position:relative;display:block;width:100%;text-align:right;transition:transform .25s cubic-bezier(.25,1.3,.4,1)}
.pk:hover{transform:translateY(-4px)}
.pk .ly{position:absolute;inset:0;border-radius:var(--r);background:var(--tkp);border:2px solid var(--sh);transform:translate(calc(var(--k)*4px),calc(var(--k)*5px)) rotate(calc(var(--k)*.8deg))}
.pk .pkt{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 62px;min-height:104px;border-radius:var(--r);overflow:hidden;border:2px solid var(--sh)}
.pkm{background:var(--dd) center/230px,var(--tkp);color:var(--ink);padding:12px 16px;display:flex;align-items:center;gap:14px}
.pkm b{font:400 50px/1 var(--disp);color:var(--acc)}
.pkm span{font-weight:700;font-size:15px;display:block}
.pkm small{font-size:12.5px;color:var(--ink2);display:block}
.pks{background:var(--acc);color:var(--signem);border-right:2px dashed #fff8;display:grid;place-items:center}
.pks em{font:400 20px var(--disp);font-style:normal;writing-mode:vertical-rl;transform:rotate(180deg)}
.pk.done .pks{background:var(--signem);color:var(--ink)}
.winfoot{padding-block:18px 28px;text-align:center}
.winfoot strong{display:block;font:400 20px/1.3 var(--disp)}
.winfoot span{display:block;font-size:14px;color:var(--ink2);margin-top:2px}
.winfoot em{display:block;font-style:normal;font-size:12px;color:var(--ink2);margin-top:10px}
@media (min-width:760px){
  .packs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pkm{flex-direction:column;align-items:flex-start;gap:4px}
  .pk .pkt{min-height:170px}
  .ledge.win,.ledges .ledge{font-size:16px}
}
/* Tickets now use one paper, printed by the shop */
.tm{background:var(--grain),var(--tkp)}
.no{color:var(--acc);font-family:var(--body);direction:rtl;font-size:10.5px}
.no s{text-decoration:none;font-weight:800;margin-left:5px}
.meta span{background:color-mix(in srgb,var(--acc) 10%,#0000);color:var(--ink)}
/* Covers */
.t-mendas{--bb:#8E1016}
.t-mendas .art{background:radial-gradient(85% 58% at 50% 78%,#DE2A24 0,#B3141B 56%,#8E1016 100%)}
.t-mendas .crowd{margin-top:auto}
.t-bursa{--stub:#0B2B4A;--bb:#E4F3FA;--bt:#0B2B4A}
.t-bursa .art{justify-content:center;padding:4em 0 0;background:linear-gradient(180deg,#D7EDF8 0,#EEF8FC 58%,#fff 100%);overflow:hidden}
.t-bursa .lg{width:74%;margin-bottom:7em}
.t-bursa .rise{position:absolute;left:0;right:0;bottom:0;width:100%;display:block}
.t-bursa .rise path:last-child{stroke-dasharray:100;animation:rs 1.3s .2s ease-out both}
@keyframes rs{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
.t-story{--stub:#3A2168;--bb:#5C2FB3;--bt:#FFF8EA}
.t-story .art{position:relative;padding:4em 2em 1.5em 2em;color:#FFF8EA;background:linear-gradient(270deg,#0000 2.7em,#FFF8EA59 2.7em 2.82em,#0000 2.82em),repeating-linear-gradient(#0000 0 2.54em,#FFFFFF24 2.54em 2.64em),#5C2FB3}
.t-story .lg{width:64%;position:relative}
.t-story h2{position:relative}
.t-story .note u{background:#3A2168}
.t-story .note{color:#3A2168}
.t-story .note{position:relative;background:#FBF8FF;padding:.65em .8em;border-radius:.3em;box-shadow:.25em .35em 0 #3A216826;font-size:1.48em}
.t-story .note::after{content:"مين كتبها؟";position:absolute;left:-.3em;top:-1.2em;font:700 .9em/1 Marhey,var(--body);color:#fff;background:#3A2168;padding:.45em .7em;border-radius:.4em;transform:rotate(-7deg)}
.t-story .dd{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
/* Back of the ticket: the clip, nothing else */
.howb.vid{padding:3.8em 1.8em 1.4em;gap:.9em}
.howb.vid h3{font-size:2.8em}
.play{flex:1;min-height:0;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5em;width:100%;background:var(--stub);color:var(--cream);border-radius:.8em;
  box-shadow:inset 0 0 0 .5em var(--stub),inset 0 0 0 .62em #ffffff40}
.play::before,.play::after{content:"";position:absolute;top:.9em;bottom:.9em;width:.55em;background:repeating-linear-gradient(#ffffff55 0 .55em,#0000 .55em 1.15em)}
.play::before{right:1em}.play::after{left:1em}
.play .pc{width:7em;height:7em;border-radius:50%;background:var(--cream);display:grid;place-items:center;animation:pcp 2s ease-in-out infinite}
.play .pc svg{width:3em;height:3em;fill:var(--stub);margin-left:-.25em;margin-right:0}
@keyframes pcp{50%{transform:scale(1.07)}}
.play b{font-size:2em;font-weight:700}
.play small{font-size:1.2em;opacity:.8}
.howb.vid em{font-size:1.1em}
#vid{position:fixed;inset:0;z-index:95;background:#050708;color:#fff;display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px;text-align:center}
#vid.on{display:flex}
#vid .fr{width:min(68vw,calc((100vh - 130px)*.5625));aspect-ratio:9/16;background:#14191C;border:1px dashed #fff5;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:18px}
#vid .fr b{font-size:17px}
#vid .fr span{font-size:13.5px;opacity:.75;line-height:1.6}
#vid button{font-weight:600;font-size:14px;padding:8px 20px;border:1px solid #fff8;border-radius:99px;color:#fff}
/* After the tear: code, then straight in */
#after h2{font:400 30px/1.1 var(--disp)}
#after p{font-size:15px;font-weight:500}
#after #enter{display:block;width:min(100%,300px);margin:14px auto 0;background:var(--acc);color:#fff;font:400 23px var(--disp);padding:14px 20px 10px;border-radius:10px;border:3px solid var(--sh);box-shadow:4px 5px 0 var(--sh)}
#after #again{background:none;color:var(--ink);font:600 14px var(--body);padding:8px;margin-top:8px;border-radius:0;text-decoration:underline;text-underline-offset:3px}
#after em{margin-top:4px}
#room{position:absolute;inset:0;z-index:6;background:var(--acc);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;text-align:center;clip-path:circle(0 at 50% 72%);visibility:hidden;transition:clip-path .55s ease-in-out,visibility 0s .55s}
#room.on{clip-path:circle(150% at 50% 72%);visibility:visible;transition:clip-path .55s ease-in-out}
#room small{font-size:14px;font-weight:600;opacity:.85}
#room output{direction:ltr;font:700 58px/1 var(--mono);letter-spacing:.06em;color:var(--signem)}
#room h2{font:400 26px/1.2 var(--disp)}
#room p{font-size:14px;opacity:.85;max-width:300px}
#room button{margin-top:8px;font-weight:600;font-size:14px;padding:8px 20px;border:1px solid #fff9;border-radius:99px;color:#fff}
@media (min-width:760px){
  .sign-in{padding:12px 26px 22px}
  .opentag{top:42px;left:auto;right:30px;font-size:20px}
  .dsteps button{font-size:13px}
}
#ov{background:var(--ovbg);color:var(--ink)}
#ovx{color:#26292D;border-color:#26292D}
.sheet{--ink:#26292D;color:#26292D}
.kc output,#after{font-family:var(--body)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.caps .c1{opacity:1}.d-c{opacity:1}.d-t{opacity:0}.dots i{opacity:1}}