@font-face{font-family:'Sour Gummy';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/sour-gummy-500.woff2?v=defca53c00) format('woff2')}
@font-face{font-family:'Sour Gummy';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/sour-gummy-600.woff2?v=8769731783) format('woff2')}
@font-face{font-family:'Sour Gummy';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/sour-gummy-700.woff2?v=2d2a7000b0) format('woff2')}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/nunito-sans-400.woff2?v=d9976dd1dc) format('woff2')}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/nunito-sans-600.woff2?v=e03e312b8b) format('woff2')}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/nunito-sans-700.woff2?v=cb84238e7b) format('woff2')}
:root{
  --teal:#00AEC8;
  --teal-dp:#008295;
  --coral:#E50051;
  --coral-dp:#B2003F;
  --paper:#E6F4F9;
  --white:#FFFFFF;
  --ink:#091333;
  --ink-soft:#5A6480;
  --sand:#008295;
  --pink:#B2003F;
  --display:'Sour Gummy',system-ui,sans-serif;
  --body:'Nunito Sans',system-ui,sans-serif;
  --maxw:66rem;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--body);font-size:1rem;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--teal-dp)}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 1.25rem}
.skip{position:absolute;left:-9999px}.skip:focus{left:.5rem;top:.5rem;background:var(--ink);color:#fff;padding:.7rem 1rem;z-index:99}

/* flag band — the logo's own device */
.band{height:.55rem;display:flex;width:100%}
.band i{flex:1}
.band i:nth-child(1){background:var(--coral)}
.band i:nth-child(2){background:var(--paper)}
.band i:nth-child(3){background:var(--teal)}

header{position:sticky;top:0;z-index:40;background:var(--white);box-shadow:0 2px 0 rgba(9,19,51,.07)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 1.25rem;flex-wrap:wrap}
.logo{width:min(11rem,42vw)}
.right{display:flex;align-items:center;gap:.75rem}
.langs{display:flex;gap:.15rem}
.langs button{font-family:var(--body);font-size:.8rem;font-weight:700;background:none;border:2px solid transparent;border-radius:999px;padding:.25rem .55rem;cursor:pointer;color:var(--ink-soft)}
.langs button:hover{border-color:var(--teal)}
.langs button[aria-current="true"]{background:var(--teal);color:#fff}

.btn{display:inline-block;font-family:var(--display);font-weight:600;font-size:1.02rem;background:var(--coral);color:#fff;border:0;border-radius:999px;padding:.7rem 1.5rem;cursor:pointer;text-decoration:none;box-shadow:0 4px 0 var(--coral-dp);transition:transform .12s ease,box-shadow .12s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--coral-dp)}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--coral-dp)}
.btn.teal{background:var(--teal);box-shadow:0 4px 0 var(--teal-dp)}
.btn.teal:hover{box-shadow:0 6px 0 var(--teal-dp)}
.btn.small{font-size:.9rem;padding:.45rem 1.1rem;box-shadow:0 3px 0 var(--coral-dp)}

/* hero */
.hero{background:var(--paper);padding:2.5rem 0 3rem;position:relative;overflow:hidden}
.herogrid{display:grid;gap:1.5rem;align-items:center}
@media(min-width:52rem){.herogrid{grid-template-columns:1.15fr .85fr}}
h1{font-family:var(--display);font-weight:700;font-size:clamp(2.1rem,8.5vw,3.9rem);line-height:1.02;margin:0;letter-spacing:-.01em}
.wipe{display:inline;background-image:linear-gradient(rgba(0,174,200,.35),rgba(0,174,200,.35));background-repeat:no-repeat;background-position:0 86%;background-size:0% .34em;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .08em;margin:0 -.08em;border-radius:.1em;animation:wipebg .7s .35s cubic-bezier(.2,.9,.3,1) forwards}
@keyframes wipebg{to{background-size:100% .34em}}
 
@keyframes wipe{to{transform:scaleX(1)}}
.when{display:inline-flex;align-items:center;gap:.5rem;background:var(--white);border-radius:999px;padding:.4rem .95rem;font-weight:700;font-size:.92rem;margin-bottom:1rem}
.when b{color:var(--coral-dp)}
.sub{font-size:1.08rem;max-width:32rem;margin:1.1rem 0 0}
.herocta{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap;margin-top:1.6rem}
.herocta small{font-size:.88rem;color:var(--ink-soft)}

/* rocket */
.rocketwrap{position:relative;display:grid;place-items:center;min-height:15rem}
.rocket{background:none;border:0;padding:0;cursor:pointer;position:relative;z-index:2}
.rocket img{width:min(9rem,36vw)}
.rocket{padding:16px 0 0}
.rocket.idle img{animation:bob 3.2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-12px) rotate(2deg)}}
.rocket.go img{animation:launch 1.5s cubic-bezier(.4,0,.35,1) forwards}
@keyframes launch{
  0%{transform:translateY(0)}
  14%{transform:translateY(14px) scale(.94)}
  55%{transform:translateY(-115vh)}
  56%{transform:translateY(115vh);opacity:0}
  57%{opacity:1}
  100%{transform:translateY(0)}
}
.trail{position:absolute;bottom:1rem;width:1.1rem;height:0;border-radius:999px;overflow:hidden;z-index:1;display:flex;flex-direction:column}
.trail i{flex:1}
.trail i:nth-child(1){background:var(--coral)}
.trail i:nth-child(2){background:var(--paper)}
.trail i:nth-child(3){background:var(--teal)}
.rocket.go ~ .trail{animation:trail 1.5s cubic-bezier(.4,0,.35,1) forwards}
@keyframes trail{0%{height:0;opacity:1}45%{height:16rem;opacity:1}100%{height:0;opacity:0}}
.rockhint{display:block;text-align:center;font-size:.85rem;font-weight:700;color:var(--ink-soft);margin-top:.5rem}

section{padding:3.5rem 0}
h2{font-family:var(--display);font-weight:600;font-size:clamp(1.6rem,5.5vw,2.5rem);line-height:1.08;margin:0 0 .5rem}
.lede{max-width:38rem;color:var(--ink-soft);margin:0 0 2rem}

/* day format */
.daygrid{display:grid;gap:1.5rem;align-items:center}
@media(min-width:52rem){.daygrid{grid-template-columns:.9fr 1.1fr}}
.lab{position:relative}
.lab img{width:min(20rem,80%);margin-inline:auto}
.lab.float img{animation:bob2 4.5s ease-in-out infinite}
@keyframes bob2{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.bubbles{position:absolute;left:14%;bottom:22%;width:34%;height:40%;pointer-events:none}
.bubbles i{position:absolute;bottom:0;width:.5rem;height:.5rem;border-radius:50%;background:rgba(0,174,200,.55);animation:rise 3.4s ease-in infinite}
.bubbles i:nth-child(2){left:32%;width:.35rem;height:.35rem;animation-delay:.9s;background:rgba(229,0,81,.45)}
.bubbles i:nth-child(3){left:62%;width:.42rem;height:.42rem;animation-delay:1.8s}
@keyframes rise{0%{transform:translateY(0);opacity:0}20%{opacity:1}100%{transform:translateY(-5.5rem);opacity:0}}

.items{display:grid;gap:.7rem}
.item{display:flex;gap:.85rem;align-items:flex-start;background:var(--paper);border-radius:1rem;padding:.9rem 1.1rem;opacity:0;transform:translateY(14px)}
.item.in{opacity:1;transform:none;transition:opacity .45s ease var(--d,0s),transform .5s cubic-bezier(.2,1.3,.4,1) var(--d,0s)}
.dotmark{flex:none;width:2rem;height:2rem;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-weight:700;color:#fff;background:var(--teal);font-size:.95rem}
.item:nth-child(2n) .dotmark{background:var(--coral)}
.item b{font-family:var(--display);font-weight:600;font-size:1.05rem;display:block}
.item span{font-size:.95rem;color:var(--ink-soft)}

/* speakers */
.tealbg{background:var(--paper)}
.speakers{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
@media(min-width:44rem){.speakers{grid-template-columns:repeat(4,1fr)}}
.sp{text-align:center;background:var(--white);border-radius:1.2rem;padding:1rem .8rem;cursor:pointer}
.sp img{width:min(7rem,70%);margin-inline:auto}
.sp.wave img{animation:wave .6s cubic-bezier(.3,1.4,.5,1)}
@keyframes wave{0%{transform:rotate(0)}30%{transform:rotate(-7deg)}60%{transform:rotate(5deg)}100%{transform:rotate(0)}}
.sp b{display:block;font-family:var(--display);font-weight:600;margin-top:.5rem}
.sp span{font-size:.87rem;color:var(--ink-soft)}

/* who */
.who{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:44rem){.who{grid-template-columns:repeat(3,1fr)}}
.wcard{background:var(--paper);border-radius:1.2rem;padding:1.2rem}
.wcard h3{font-family:var(--display);font-weight:600;font-size:1.15rem;margin:0 0 .3rem}
.wcard p{margin:0;font-size:.95rem;color:var(--ink-soft)}

/* recap numbers */
.nums{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem 1rem}
@media(min-width:44rem){.nums{grid-template-columns:repeat(5,1fr)}}
.nums b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(2rem,8vw,3rem);line-height:1;color:var(--teal-dp)}
.nums span{font-size:.92rem;color:var(--ink-soft)}

/* faq */
details{border-radius:1rem;background:var(--paper);margin-bottom:.6rem;overflow:hidden}
summary{cursor:pointer;list-style:none;padding:.95rem 1.15rem;font-family:var(--display);font-weight:600;font-size:1.05rem;display:flex;justify-content:space-between;gap:1rem;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:1.4rem;color:var(--coral-dp);transition:transform .25s cubic-bezier(.3,1.4,.5,1)}
details[open] summary::after{transform:rotate(135deg)}
details p{margin:0;padding:0 1.15rem 1.1rem;font-size:.97rem;color:var(--ink-soft)}

footer{background:var(--ink);color:#C3CADF;padding:2.5rem 0;font-size:.92rem}
footer a{color:var(--paper)}

.ticker{background:var(--ink);overflow:hidden;padding:.4rem 0}
.tick{display:flex;width:max-content;animation:tk var(--tkdur,26s) linear infinite;white-space:nowrap;font-family:var(--display);font-weight:600;font-size:.95rem;color:#fff}
.tick span{flex:none;padding-right:.3em}
.tick i.w{font-style:normal}
.tick em{font-style:normal;color:var(--teal)}
.tick b{font-weight:600;color:var(--coral)}
@keyframes tk{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.sparks{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.sparks i{position:absolute;border-radius:50%;opacity:.55;animation:drift linear infinite}
@keyframes drift{0%{transform:translateY(0) scale(.6);opacity:0}15%{opacity:.6}100%{transform:translateY(-22rem) scale(1.1);opacity:0}}

.cyc{display:inline}
.cyc .cw{display:inline-block}
.cyc.out .cw{animation:cwout .22s ease-in forwards}
.cyc.in .cw{animation:cwin .45s cubic-bezier(.3,1.4,.5,1) both;animation-delay:calc(var(--k,0) * .05s)}
@keyframes cwout{to{opacity:0;transform:translateY(-.3em) rotate(-3deg)}}
@keyframes cwin{from{opacity:0;transform:translateY(.35em) rotate(3deg)}to{opacity:1;transform:none}}
@keyframes flip{0%{transform:translateY(0) rotate(0);opacity:1}45%{transform:translateY(-.35em) rotate(-3deg);opacity:0}55%{transform:translateY(.35em) rotate(3deg);opacity:0}100%{transform:translateY(0) rotate(0);opacity:1}}

.rv{opacity:0;transform:translateY(22px)}
.rv.in{opacity:1;transform:none;transition:opacity .55s ease var(--rd,0s),transform .65s cubic-bezier(.2,1.15,.35,1) var(--rd,0s)}

.tilt{transition:transform .2s cubic-bezier(.3,1.2,.5,1)}
.tilt:hover{transform:translateY(-5px) rotate(-.7deg)}
.sp:nth-child(2n).tilt:hover{transform:translateY(-5px) rotate(.7deg)}

.conf{position:absolute;width:.6rem;height:.9rem;border-radius:2px;pointer-events:none;z-index:5}

.progrocket{position:fixed;left:1rem;bottom:2.6rem;width:1.8rem;z-index:35;pointer-events:none;transition:transform .12s linear}
.progrocket img{width:100%;filter:drop-shadow(0 2px 4px rgba(9,19,51,.2))}
.progtrack{position:fixed;left:1.55rem;bottom:0;top:0;width:3px;background:linear-gradient(var(--coral),var(--paper),var(--teal));opacity:.22;z-index:34;pointer-events:none}
@media(max-width:52rem){.progrocket,.progtrack{display:none}}

.shelfwrap{margin-top:1rem}
.shelf{display:flex;gap:.45rem;align-items:flex-end;padding:2rem .4rem 0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.plank{height:.95rem;background:var(--ink);border-radius:.35rem;box-shadow:0 6px 0 rgba(9,19,51,.15)}
.book{flex:none;width:3.5rem;border:0;border-radius:.5rem .5rem .1rem .1rem;cursor:pointer;color:#fff;font-family:var(--display);font-weight:600;font-size:.8rem;line-height:1.25;padding:.75rem .25rem;writing-mode:vertical-rl;text-orientation:mixed;transform-origin:bottom center;transition:transform .38s cubic-bezier(.3,1.45,.5,1);overflow:hidden;text-align:left}
.book:hover{transform:translateY(-11px) rotate(-2deg)}
.book.out{transform:translateY(-20px) rotate(-5deg)}
.reader{display:none}
.reader.open{display:grid;gap:1.1rem;background:var(--white);border-radius:1.3rem;padding:1.2rem 1.3rem;margin-top:1.3rem;animation:openbook .5s cubic-bezier(.3,1.3,.5,1)}
@media(min-width:44rem){.reader.open{grid-template-columns:8rem 1fr;align-items:start}}
@keyframes openbook{from{opacity:0;transform:scale(.95) translateY(12px) rotate(-1deg)}to{opacity:1;transform:none}}
.reader img{width:7rem;margin-inline:auto}
.reader h3{font-family:var(--display);font-weight:600;font-size:1.3rem;margin:0}
.reader .role{color:var(--ink-soft);font-size:.92rem;margin:.1rem 0 .7rem}
.qbox{background:var(--paper);border-radius:.9rem;padding:.85rem 1rem;margin-top:.9rem}
.qbox b{font-family:var(--display);font-weight:600;display:block;font-size:.82rem;color:var(--teal-dp);margin-bottom:.15rem}
.shut{margin-top:.9rem;font-family:var(--display);font-weight:600;font-size:.9rem;background:none;border:2px solid var(--ink);border-radius:999px;padding:.35rem 1rem;cursor:pointer}

.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{font-family:var(--display);font-weight:600;font-size:.98rem;border:2px solid var(--ink);background:var(--white);color:var(--ink);border-radius:999px;padding:.5rem 1.05rem;cursor:pointer;transition:transform .2s cubic-bezier(.3,1.45,.5,1),background .15s}
.chip:nth-child(3n):hover{transform:translateY(-4px) rotate(2deg)}
.chip:hover{transform:translateY(-4px) rotate(-2deg)}
.chip[aria-pressed="true"]{background:var(--coral);border-color:var(--coral);color:#fff}
.pickstate{font-size:.9rem;color:var(--ink-soft);margin:.9rem 0 0}
.plan{display:grid;gap:.7rem;margin-top:1.2rem}
.pc{background:var(--white);border-radius:1rem;padding:.9rem 1.1rem;opacity:0;transform:translateY(16px)}
.pc.in{opacity:1;transform:none;transition:opacity .45s ease var(--pd,0s),transform .55s cubic-bezier(.2,1.25,.4,1) var(--pd,0s)}
.pc em{font-style:normal;font-family:var(--display);font-weight:600;color:var(--coral-dp);font-size:.82rem;display:block}
.pc b{font-family:var(--display);font-weight:600;font-size:1.05rem;display:block}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .item{opacity:1!important;transform:none!important}
  .rv{opacity:1!important;transform:none!important}
  .sparks,.progrocket,.progtrack{display:none}
  .wipe{background-size:100% .34em!important}
}


/* ---------- feedback round 1 ---------- */
.subh{font-family:var(--display);font-weight:600;font-size:1.25rem;margin:1.8rem 0 .8rem}
.keys{display:grid;gap:1rem}
@media(min-width:44rem){.keys{grid-template-columns:1fr 1fr}}
.kn{display:flex;gap:1rem;background:var(--white);border-radius:1.2rem;padding:1.2rem;align-items:flex-start}
.kn .kimg{flex:none;width:6rem}
.kn b{display:block;font-family:var(--display);font-weight:600;font-size:1.15rem}
.kn .role{display:block;font-size:.9rem;color:var(--ink-soft)}
.kn p{margin:.6rem 0 0;font-size:.95rem;color:var(--ink-soft)}
.dots3{display:flex;gap:.3rem;margin-top:.45rem}
.sp .dots3{justify-content:center}
.dots3 i{width:.8rem;height:.8rem;border-radius:50%;border:2px dashed var(--ink-soft);opacity:.55}
.attrs{display:grid;grid-template-columns:repeat(auto-fill,minmax(9.6rem,1fr));gap:.5rem}
.attr{display:flex;align-items:center;gap:.55rem;background:var(--white);border:2px solid transparent;border-radius:999px;padding:.45rem .8rem .45rem .5rem;font-family:var(--display);font-weight:600;font-size:.98rem;color:var(--ink);cursor:pointer;text-align:left;transition:transform .2s cubic-bezier(.3,1.45,.5,1),border-color .15s}
.attr:hover{transform:translateY(-3px) rotate(-1.5deg)}
.attr[aria-pressed="true"]{border-color:var(--ink)}
.dot{flex:none;display:inline-block;width:1.25rem;height:1.25rem;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1.5px rgba(9,19,51,.2)}
.attr[aria-pressed="true"] .dot{animation:stick .45s cubic-bezier(.3,1.5,.5,1)}
@keyframes stick{0%{transform:scale(1.7) rotate(-25deg)}100%{transform:none}}
.adetail{margin-top:1.1rem;background:var(--white);border-radius:1.1rem;padding:1rem 1.2rem;display:flex;gap:.9rem;align-items:flex-start;min-height:4.6rem}
.adetail > .dot{width:2rem;height:2rem;display:none}
.adetail.on > .dot{display:inline-block;animation:stick .45s cubic-bezier(.3,1.5,.5,1)}
.adetail.on .hint{display:none}
.adetail .hint{color:var(--ink-soft)}
.adetail b{font-family:var(--display);font-weight:600;font-size:1.1rem;display:block}
.adetail p{margin:.1rem 0 0;color:var(--ink-soft)}
.youdots{display:flex;gap:.5rem;flex-wrap:wrap}
.youdots span{display:inline-flex;align-items:center;gap:.4rem;background:var(--white);border-radius:999px;padding:.3rem .8rem .3rem .35rem;font-weight:700;font-size:.92rem}
.mlbl{margin:1rem 0 .5rem;font-size:.95rem;color:var(--ink-soft)}
.matches{display:flex;flex-wrap:wrap;gap:.5rem}
.mchip{font-family:var(--display);font-weight:600;font-size:.98rem;background:var(--ink);color:#fff;border:0;border-radius:999px;padding:.4rem .9rem;cursor:pointer;display:inline-flex;gap:.3rem;align-items:center;transition:transform .2s cubic-bezier(.3,1.45,.5,1)}
.mchip:hover{transform:translateY(-3px)}
.mchip i{width:.62rem;height:.62rem;border-radius:50%;background:var(--c);box-shadow:0 0 0 1.5px rgba(255,255,255,.7)}
.mchip i:first-of-type{margin-left:.25rem}
.aclear{margin-top:1rem;font-family:var(--display);font-weight:600;font-size:.9rem;background:none;border:2px solid var(--ink);color:var(--ink);border-radius:999px;padding:.35rem 1rem;cursor:pointer}
.acredit{margin:1.6rem 0 0;font-size:.88rem;color:var(--ink-soft)}
.book{position:relative;padding-bottom:3rem!important}
.spd{position:absolute;left:50%;bottom:.55rem;transform:translateX(-50%);display:flex;flex-direction:column;gap:.22rem;writing-mode:horizontal-tb}
.spd i{display:block;width:.64rem;height:.64rem;border-radius:50%;background:var(--c);box-shadow:0 0 0 1.5px rgba(255,255,255,.9)}
.rdlbl{margin:-.4rem 0 .35rem;font-size:.8rem;font-weight:700;color:var(--ink-soft)}
.rdattrs{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 .8rem}
.rdattrs span{display:inline-flex;gap:.35rem;align-items:center;background:var(--paper);border-radius:999px;padding:.2rem .7rem .2rem .3rem;font-size:.85rem;font-weight:700}
.rdattrs i{width:.85rem;height:.85rem;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1.5px rgba(9,19,51,.2)}
.photos{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
@media(min-width:44rem){.photos{grid-template-columns:repeat(6,1fr)}}
.phnote{font-size:.88rem;color:var(--ink-soft);margin:.5rem 0 0}
.pairs{display:grid;gap:0 2rem}
@media(min-width:44rem){.pairs{grid-template-columns:1fr 1fr}}
.pgroup{margin-top:1.4rem}
.pgroup h3{font-family:var(--body);font-weight:700;font-size:.85rem;color:var(--ink-soft);margin:0 0 .5rem}
.lslot{display:grid;place-items:center;border:2px dashed rgba(9,19,51,.2);border-radius:.8rem;min-height:4.5rem;padding:.6rem;font-size:.85rem;color:var(--ink-soft);text-align:center;background:var(--white)}
.lslot.big{max-width:16rem;min-height:5.5rem}
.lgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem;list-style:none;margin:0;padding:0}
@media(min-width:44rem){.lgrid{grid-template-columns:repeat(4,1fr)}}
@media(min-width:64rem){.lgrid{grid-template-columns:repeat(6,1fr)}}
.ltile{display:grid;place-items:center;background:var(--white);border:1px solid rgba(9,19,51,.1);border-radius:.8rem;height:5.5rem;padding:.8rem 1rem}
.ltile{overflow:hidden}.ltile img{display:block;max-width:100%;max-height:3.9rem;width:auto;height:auto}
.lgrid.silver{grid-template-columns:repeat(2,minmax(0,15rem))}
.lgrid.silver .ltile{height:7rem;padding:1.1rem 1.4rem}.lgrid.silver .ltile img{max-height:4.8rem}
footer .credit{font-size:.82rem;margin-top:.4rem}

/* ---------- round 2: navigation, roles, legal ---------- */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.bar{flex-wrap:nowrap}
.logo{width:min(10rem,34vw)}
.burger{display:inline-grid;place-items:center;width:2.6rem;height:2.6rem;border:0;border-radius:999px;background:var(--paper);cursor:pointer;flex:none}
.bl{display:grid;gap:.28rem;width:1.15rem}
.bl i{display:block;height:2px;border-radius:2px;background:var(--ink);transition:transform .3s cubic-bezier(.3,1.4,.5,1),opacity .2s}
header.open .bl i:nth-child(1){transform:translateY(calc(.28rem + 2px)) rotate(45deg)}
header.open .bl i:nth-child(2){opacity:0}
header.open .bl i:nth-child(3){transform:translateY(calc(-.28rem - 2px)) rotate(-45deg)}
.mainnav{position:absolute;top:100%;left:0;right:0;display:flex;flex-direction:column;background:var(--white);padding:.4rem 1.25rem 1.1rem;box-shadow:0 10px 0 rgba(9,19,51,.06);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s ease,transform .3s cubic-bezier(.2,1.15,.35,1),visibility 0s .3s}
header.open .mainnav{opacity:1;visibility:visible;transform:none;transition:opacity .2s ease,transform .3s cubic-bezier(.2,1.15,.35,1)}
.mainnav a{font-family:var(--display);font-weight:600;font-size:1.15rem;color:var(--ink);text-decoration:none;padding:.6rem .2rem;border-bottom:1px solid var(--paper)}
header.open .mainnav a{animation:navin .35s cubic-bezier(.2,1.15,.35,1) both}
header.open .mainnav a:nth-child(2){animation-delay:.03s}header.open .mainnav a:nth-child(3){animation-delay:.06s}
header.open .mainnav a:nth-child(4){animation-delay:.09s}header.open .mainnav a:nth-child(5){animation-delay:.12s}
header.open .mainnav a:nth-child(6){animation-delay:.15s}header.open .mainnav a:nth-child(7){animation-delay:.18s}
@keyframes navin{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
.mainnav a[aria-current]{color:var(--coral)}
@media(min-width:72rem){
  .burger{display:none}
  .mainnav{position:static;flex-direction:row;gap:.1rem;padding:0;background:none;box-shadow:none;opacity:1;visibility:visible;transform:none;transition:none;margin-inline:auto}
  .mainnav a{font-size:.98rem;padding:.35rem .7rem;border:0;border-radius:999px;transition:background .15s}
  .mainnav a:hover{background:var(--paper)}
  .mainnav a[aria-current]{background:var(--paper);color:var(--coral)}
}
.btn.ink{background:var(--ink);box-shadow:0 4px 0 #000}
.btn.ink:hover{box-shadow:0 6px 0 #000}
.rolebar{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;margin:.4rem 0 1.2rem}
.rolebar span{font-weight:700;color:var(--ink-soft);margin-right:.2rem}
.rtab{font-family:var(--display);font-weight:600;font-size:.98rem;background:var(--paper);color:var(--ink);border:2px solid transparent;border-radius:999px;padding:.4rem 1rem;cursor:pointer;transition:transform .2s cubic-bezier(.3,1.45,.5,1),background .15s}
.rtab:hover{transform:translateY(-2px)}
.rtab[aria-pressed="true"]{background:var(--ink);color:#fff}
.regbox{margin:0 0 1.2rem;padding:1rem 1.2rem;background:var(--paper);border-radius:1.1rem;animation:faqin .45s cubic-bezier(.2,1.15,.35,1)}
.regnote{margin:.7rem 0 0;font-size:.92rem;color:var(--ink-soft)}
.faqlist.swap details:not([hidden]){animation:faqin .42s cubic-bezier(.2,1.15,.35,1) both;animation-delay:calc(var(--fi,0) * .05s)}
@keyframes faqin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.legalnav{list-style:none;display:flex;flex-wrap:wrap;gap:.3rem 1.2rem;padding:0;margin:1rem 0 .3rem;font-size:.88rem}
dialog.legal{border:0;padding:0;border-radius:1.2rem;width:min(42rem,calc(100% - 2rem));max-height:86vh;color:var(--ink);background:var(--white);overflow:hidden}
dialog.legal::backdrop{background:rgba(9,19,51,.55)}
dialog.legal[open]{animation:dlgin .35s cubic-bezier(.2,1.15,.35,1)}
@keyframes dlgin{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.lhead{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1.3rem;border-bottom:1px solid var(--paper)}
.lhead h2{font-size:1.4rem;margin:0}
.lclose{font-family:var(--display);font-weight:600;background:var(--paper);border:0;border-radius:999px;padding:.4rem .95rem;cursor:pointer;color:var(--ink)}
.lbody{overflow:auto;max-height:calc(86vh - 4.5rem);padding:1rem 1.3rem 1.6rem;font-size:.95rem}
.lbody h3{font-family:var(--display);font-weight:600;font-size:1.05rem;margin:1.2rem 0 .3rem}
.lbody p{margin:0 0 .6rem}
.ldraft{background:var(--paper);border-radius:.8rem;padding:.6rem .8rem;font-size:.88rem}
.upd{color:var(--ink-soft);font-size:.88rem}
.ltable{border-collapse:collapse;width:100%;font-size:.9rem}
.ltable th,.ltable td{text-align:left;padding:.4rem .5rem;border-bottom:1px solid var(--paper);vertical-align:top}
.ltable th{width:34%;color:var(--ink-soft)}
.cookie{position:fixed;left:.75rem;right:.75rem;bottom:.75rem;z-index:70;background:var(--ink);color:#fff;border-radius:1.1rem;padding:1rem 1.1rem;box-shadow:0 6px 0 rgba(9,19,51,.2);opacity:0;transform:translateY(20px);transition:opacity .3s,transform .4s cubic-bezier(.2,1.15,.35,1)}
.cookie.show{opacity:1;transform:none}
@media(min-width:44rem){.cookie{left:auto;right:.75rem;max-width:26rem}}
.cookie p{margin:0 0 .7rem;font-size:.92rem}
.ckrow{display:flex;align-items:center;gap:1rem}
.cookie a{color:var(--paper);font-size:.9rem}
.cookie .btn.small{font-size:.9rem;padding:.4rem 1.2rem;box-shadow:0 3px 0 var(--coral-dp)}
.totop{position:fixed;right:1rem;bottom:calc(1rem + var(--ckh,0px));z-index:60;width:3.3rem;height:3.3rem;border-radius:50%;border:0;background:var(--white);box-shadow:0 4px 0 rgba(9,19,51,.15);display:grid;place-items:center;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(16px) scale(.8);transition:opacity .25s,transform .35s cubic-bezier(.3,1.45,.5,1),visibility 0s .35s,bottom .3s}
.totop.show{opacity:1;visibility:visible;transform:none;transition:opacity .25s,transform .35s cubic-bezier(.3,1.45,.5,1),bottom .3s}
.totop .si{width:1.5rem;transition:transform .3s}
.totop:hover .si{transform:translateY(-3px)}
.totop.fly .si{animation:tofly .7s cubic-bezier(.4,0,.35,1)}
@keyframes tofly{0%{transform:none}45%{transform:translateY(-3.5rem);opacity:0}46%{transform:translateY(2rem);opacity:0}100%{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.mainnav,.totop,.cookie{transition:none}}
/* ---------- round 4: readable step numbers, consistent button height ---------- */
.btn{line-height:1.2}
.item .dotmark{color:#fff;font-size:1.05rem;line-height:1;background:var(--teal-dp)}
/* ---------- round 7: teacher email, calendar ---------- */
[hidden]{display:none!important}
.rbtns{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.btn.alt{background:var(--white);color:var(--ink);box-shadow:0 4px 0 rgba(9,19,51,.18)}
.btn.alt:hover{box-shadow:0 6px 0 rgba(9,19,51,.18)}
.regbox .regnote{margin:.7rem 0 0}
/* ---------- round 8: header fits narrow phones with the standard side margin ---------- */
@media(max-width:24rem){
  .bar{gap:.5rem}
  .logo{width:min(10rem,30vw)}
  .right{gap:.35rem}
  .langs{gap:0}
  .langs button{padding:.25rem .4rem}
  .burger{width:2.4rem;height:2.4rem}
}
/* ---------- round 9: dialog header, copyright ---------- */
.lhead{gap:.75rem}
.lhead h2{flex:1 1 auto;min-width:0;font-size:clamp(1.1rem,5vw,1.4rem);line-height:1.15;overflow-wrap:anywhere;hyphens:auto}
.lclose{flex:none;display:grid;place-items:center;width:2.5rem;height:2.5rem;padding:0;border-radius:50%}
.lclose svg{width:1.1rem;height:1.1rem;stroke:var(--ink);stroke-width:2.6;stroke-linecap:round;fill:none}
.lclose:hover{background:#d4ebf3}
footer .copy{margin:.9rem 0 .2rem;font-size:.85rem}
/* ---------- round 12: side rocket reads as decoration, not a scrollbar ---------- */
.progrocket img{transform:none}
.pr-bob{position:relative;animation:prbob 2.8s ease-in-out infinite}
@keyframes prbob{0%,100%{transform:translateX(-2px) rotate(-4deg)}50%{transform:translateX(2px) rotate(4deg)}}
.pr-flame{position:absolute;left:50%;top:calc(100% + .15rem);width:.55rem;height:1.5rem;margin-left:-.275rem;display:flex;flex-direction:column;border-radius:999px;overflow:hidden;transform-origin:50% 0;animation:prflame .32s ease-in-out infinite alternate}
.pr-flame i{flex:1}
.pr-flame i:nth-child(1){background:var(--coral)}
.pr-flame i:nth-child(2){background:#fff}
.pr-flame i:nth-child(3){background:var(--teal)}
@keyframes prflame{from{transform:scaleY(.65);opacity:.8}to{transform:scaleY(1.1);opacity:1}}
.pr-star{position:absolute;top:-1.2rem;width:4px;height:4px;border-radius:50%;opacity:0;animation:prstar 2.4s linear infinite}
.pr-star.s1{left:-.5rem;background:var(--teal)}
.pr-star.s2{left:2.2rem;background:var(--coral);animation-delay:.6s;width:3px;height:3px}
.pr-star.s3{left:-.2rem;background:var(--coral);animation-delay:1.2s}
.pr-star.s4{left:1.95rem;background:var(--teal);animation-delay:1.8s;width:3px;height:3px}
@keyframes prstar{0%{transform:translateY(0);opacity:0}15%{opacity:.85}100%{transform:translateY(5.5rem);opacity:0}}
/* ---------- round 13: the side rocket launches at the end of the page ---------- */
.pr-fly{position:relative}
.progrocket.gone{z-index:45}
.progrocket.gone .pr-fly{animation:prlaunch 1.5s forwards}
@keyframes prlaunch{
  0%{transform:translate(0,0);animation-timing-function:linear}
  6%{transform:translate(-1.5px,2px)}12%{transform:translate(1.5px,3px)}18%{transform:translate(-1.5px,3px)}
  24%{transform:translate(1px,3px);animation-timing-function:cubic-bezier(.4,0,.35,1)}
  100%{transform:translate(0,-115vh)}}
.progrocket.gone .pr-flame{animation:prflame .1s ease-in-out infinite alternate,prboost .4s .3s forwards}
@keyframes prboost{to{height:3.2rem}}
.progrocket.gone .pr-star{animation-duration:.6s}
.progrocket.back .pr-fly{animation:prland 1.1s cubic-bezier(.2,.9,.3,1) both}
@keyframes prland{from{transform:translateY(-115vh)}to{transform:none}}
.pr-puff{position:absolute;left:50%;top:calc(100% + 1.2rem);width:1.1rem;height:1.1rem;margin-left:-.55rem;border-radius:50%;background:var(--paper);box-shadow:0 0 0 1px rgba(9,19,51,.08);opacity:0;pointer-events:none}
.progrocket.gone .pr-puff{animation:prpuff 1.3s .25s ease-out forwards}
.progrocket.gone .pr-puff.p2{animation-delay:.35s;--dx:-1.3rem}
.progrocket.gone .pr-puff.p3{animation-delay:.45s;--dx:1.3rem}
@keyframes prpuff{0%{opacity:.9;transform:translate(0,0) scale(.4)}100%{opacity:0;transform:translate(var(--dx,0),-.4rem) scale(2)}}
.llist{margin:.2rem 0 .8rem;padding-left:1.2rem}
.llist li{margin:.15rem 0}
/* ---------- round 16: menu labels never wrap; compact menu when they don't fit ---------- */
.mainnav a{white-space:nowrap}
@media(min-width:72rem){
  .mainnav a{font-size:.95rem;padding:.35rem .6rem}
  header.navcompact .bar{position:relative}
  header.navcompact .burger{display:inline-grid}
  header.navcompact .mainnav{position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;margin:0;padding:.4rem 1.25rem 1.1rem;background:var(--white);box-shadow:0 10px 0 rgba(9,19,51,.06);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s ease,transform .3s cubic-bezier(.2,1.15,.35,1),visibility 0s .3s}
  header.navcompact.open .mainnav{opacity:1;visibility:visible;transform:none;transition:opacity .2s ease,transform .3s cubic-bezier(.2,1.15,.35,1)}
  header.navcompact .mainnav a{font-size:1.15rem;padding:.6rem .2rem;border-radius:0;border-bottom:1px solid var(--paper)}
  header.navcompact .mainnav a[aria-current]{background:none}
}
header.navmeasure .mainnav,header.navmeasure .mainnav *,header.navmeasure .burger,header.navmeasure .bl i{transition:none!important;animation:none!important}
/* Sour Gummy's 7 reads as a 1 at small sizes; numbers shown as data use the body font */
.st-age,.nums b{font-family:var(--body)!important;font-weight:700!important;letter-spacing:-.01em}
.plogo{display:inline-block;padding:.35rem 0;border-radius:.4rem}
.plogo img{display:block;height:2.75rem;width:auto;max-width:100%}
/* ---------- round 21: story "Tell my teacher", one-time highlight ---------- */
.st-cap .st-tell{margin-top:.9rem}
html:not([data-role-chosen="s"]) .st-tell{display:none}
.btn.nudge{animation:nudge .9s cubic-bezier(.3,1.4,.5,1) 2}
@keyframes nudge{0%{transform:none;box-shadow:0 4px 0 var(--coral-dp),0 0 0 0 rgba(229,0,81,.45)}
  35%{transform:translateY(-4px) scale(1.06);box-shadow:0 6px 0 var(--coral-dp),0 0 0 10px rgba(229,0,81,.18)}
  100%{transform:none;box-shadow:0 4px 0 var(--coral-dp),0 0 0 18px rgba(229,0,81,0)}}
.logolink{display:block;flex:none;line-height:0;border-radius:.4rem}
/* ---------- round 25: every book is a quote, lying flat and readable ---------- */
.shelf{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:2rem .9rem 0}
@media(min-width:44rem){.shelf{flex-direction:row;align-items:flex-end;gap:2rem}}
.stack{flex:1 1 0;min-width:0;max-width:24rem;display:flex;flex-direction:column;align-items:flex-start}
.book.lying{writing-mode:horizontal-tb;width:calc(100% - var(--trim,0rem) - var(--off,0rem));height:auto!important;min-height:2.8rem;margin-left:var(--off,0);
  padding:.5rem .7rem .5rem 1.1rem!important;display:flex;align-items:center;gap:.7rem;border-radius:.3rem;text-align:left;transform-origin:left center;
  background-image:linear-gradient(to right,transparent .45rem,rgba(255,255,255,.35) .45rem,rgba(255,255,255,.35) .6rem,transparent .6rem)!important}
.book.lying .bt{flex:1;min-width:0;font-size:.86rem;line-height:1.22}
.book.lying .spd{position:static;transform:none;flex-direction:row;flex:none}
.book.lying:hover{transform:translateX(-4px)}
.book.lying.out{transform:translateX(-.6rem)}
.rdtitle{margin:-.1rem 0 .7rem;font-family:var(--display);font-weight:600;font-size:1.08rem;line-height:1.3;color:var(--teal-dp)}
/* ---------- round 26: make the lying spines read as books ---------- */
.book.lying{transform:rotate(var(--tilt,0deg));padding-right:1.25rem!important;border-radius:.22rem .42rem .42rem .22rem;
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.2),inset 0 2px 0 rgba(255,255,255,.22);
  background-image:linear-gradient(to right,transparent .42rem,rgba(255,255,255,.38) .42rem,rgba(255,255,255,.38) .56rem,transparent .56rem,transparent .74rem,rgba(255,255,255,.38) .74rem,rgba(255,255,255,.38) .82rem,transparent .82rem,
    transparent calc(100% - .82rem),rgba(255,255,255,.38) calc(100% - .82rem),rgba(255,255,255,.38) calc(100% - .74rem),transparent calc(100% - .74rem),
    transparent calc(100% - .56rem),rgba(255,255,255,.38) calc(100% - .56rem),rgba(255,255,255,.38) calc(100% - .42rem),transparent calc(100% - .42rem))!important}
.book.lying:hover{transform:translateX(-4px) rotate(var(--tilt,0deg))}
.book.lying.out{transform:translateX(-.6rem) rotate(var(--tilt,0deg))}
.decor{display:none}
@media(min-width:44rem){
  .decor{display:flex;align-items:flex-end;gap:.22rem;flex:none;padding-right:.6rem}
  .decor i{display:block;width:1.45rem;height:var(--h);border-radius:.35rem .35rem .1rem .1rem;box-shadow:inset -4px 0 0 rgba(0,0,0,.18),inset 2px 0 0 rgba(255,255,255,.2);
    background-image:linear-gradient(to bottom,transparent .5rem,rgba(255,255,255,.38) .5rem,rgba(255,255,255,.38) .64rem,transparent .64rem,transparent .8rem,rgba(255,255,255,.38) .8rem,rgba(255,255,255,.38) .88rem,transparent .88rem,
      transparent calc(100% - .88rem),rgba(255,255,255,.38) calc(100% - .88rem),rgba(255,255,255,.38) calc(100% - .8rem),transparent calc(100% - .8rem))!important}
  .decor i.lean{transform:rotate(14deg);transform-origin:bottom left;margin-left:.15rem}
}
/* ---------- round 30: the shelf never scrolls; the leaning book rests on it ---------- */
.shelf{overflow:visible}
@media(min-width:44rem){.decor i.lean{transform-origin:bottom right;margin-left:.15rem;margin-right:2.4rem}}
/* ---------- hide sections until their content is confirmed: add the class to <html> ---------- */
html.hide-library #library,html.hide-library a[href="#library"],
html.hide-library #amatchlbl,html.hide-library #matches,html.hide-library #anone{display:none!important}
html.hide-speakers #speakers,html.hide-speakers a[href="#speakers"]{display:none!important}
/* ---------- photo gallery ---------- */
.photos{list-style:none;margin:0;padding:0}
.pslot{aspect-ratio:4/3;border-radius:.8rem;background:var(--white);border:2px dashed rgba(9,19,51,.18)}
.photos li{position:relative}
.photos li.more-hidden{display:none}
.pg{display:block;aspect-ratio:4/3;border-radius:.8rem;overflow:hidden;background:var(--white);position:relative}
.pg img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s cubic-bezier(.2,.9,.3,1)}
.pg:hover img{transform:scale(1.05)}
.pmore{position:absolute;inset:0;display:grid;place-items:center;background:rgba(9,19,51,.55);color:#fff;font-family:var(--display);font-weight:700;font-size:1.5rem;pointer-events:none}
html.gal-open{overflow:hidden}
dialog.gallery{border:0;padding:0;margin:0;width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;background:rgba(9,19,51,.96);color:#fff;overflow:hidden}
dialog.gallery[open]{display:grid;grid-template-rows:1fr auto;animation:galin .25s ease}
dialog.gallery::backdrop{background:rgba(9,19,51,.6)}
@keyframes galin{from{opacity:0}to{opacity:1}}
.gfig{margin:0;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;padding:4.2rem 1rem .5rem;touch-action:pan-y}
.gimg{max-width:100%;max-height:calc(100dvh - 10rem);object-fit:contain;border-radius:.6rem;opacity:0;transition:opacity .25s ease;user-select:none;-webkit-user-drag:none}
.gimg.ready{opacity:1}
.gcap{font-size:.92rem;color:#C3CADF;text-align:center;max-width:40rem}
.gcap:empty{display:none}
.gbtn{position:absolute;bottom:1rem;width:3.2rem;height:3.2rem;border-radius:50%;border:0;background:#fff;color:var(--ink);display:grid;place-items:center;cursor:pointer;box-shadow:0 4px 0 rgba(0,0,0,.25);transition:transform .15s cubic-bezier(.3,1.4,.5,1)}
.gbtn:hover{transform:scale(1.08)}
.gbtn:active{transform:scale(.94)}
.gbtn svg{width:1.4rem;height:1.4rem;stroke:currentColor;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;fill:none}
.gprev{left:1rem}
.gnext{right:1rem}
.gclose{position:absolute;top:1rem;right:1rem;background:#fff}
.gcount{margin:0;padding:0 0 1.9rem;text-align:center;font-weight:700;font-size:.95rem;color:#C3CADF}
.gallery:focus-visible,.gbtn:focus-visible,.gclose:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media(min-width:44rem){
  dialog.gallery[open]{grid-template-rows:1fr auto}
  .gfig{padding:4.2rem 6rem .5rem}
  .gimg{max-height:calc(100dvh - 9rem)}
  .gbtn{bottom:auto;top:50%;margin-top:-1.6rem}
  .gprev{left:1.5rem}.gnext{right:1.5rem}
  .gcount{padding-bottom:1.4rem}
}
@media(prefers-reduced-motion:reduce){dialog.gallery[open],.gimg,.pg img{animation:none;transition:none}}
/* ---------- loading shimmer ---------- */
@keyframes shimmer{from{background-position:150% 0}to{background-position:-50% 0}}
.mailslot,.pg,.gwait{background-image:linear-gradient(100deg,rgba(9,19,51,.06) 30%,rgba(9,19,51,.15) 50%,rgba(9,19,51,.06) 70%);background-size:200% 100%;animation:shimmer 1.3s linear infinite}
.mailslot{display:inline-block;vertical-align:-.15em;width:9.5em;height:1.05em;border:0;border-radius:.35em;padding:0;margin:0 .1em;cursor:pointer;background-color:transparent}
footer .mailslot{background-image:linear-gradient(100deg,rgba(255,255,255,.08) 30%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.08) 70%)}
html.js .pg img{opacity:0;transition:opacity .3s ease}
html.js .pg img.ok{opacity:1}
dialog.gallery{background:#091333}
.gwait{display:none;width:min(80vw,40rem);aspect-ratio:4/3;max-height:60vh;border-radius:.6rem;background-image:linear-gradient(100deg,rgba(255,255,255,.05) 30%,rgba(255,255,255,.13) 50%,rgba(255,255,255,.05) 70%)}
.gfig.waiting .gwait{display:block}
.gfig.waiting .gimg{position:absolute;opacity:0}
@media(prefers-reduced-motion:reduce){.mailslot,.pg,.gwait{animation:none}}
/* ---------- scroll story ---------- */
.story{background:var(--paper);padding-top:3.5rem}
.story-head{padding-bottom:.5rem}
.si{background-position:center;background-size:contain;background-repeat:no-repeat}
.si-A{background-image:url(../images/avatar-teal.png?v=9f902739b8);aspect-ratio:520/727}
.si-B{background-image:url(../images/avatar-red.png?v=a5eb299a19);aspect-ratio:520/727}
.si-lab{background-image:url(../images/lab.png?v=c9c496d467);aspect-ratio:760/553}
.si-rocket{background-image:url(../images/rocket.png?v=82512fd3e8);aspect-ratio:400/579}
.si-logo{background-image:url(../images/logo-ywc.png?v=d25be39ece);aspect-ratio:800/276}
.story-still{list-style:none;margin:0 auto;padding:0 1.25rem 3.5rem;max-width:var(--maxw);display:grid;gap:1rem}
.story-still li{background:var(--white);border-radius:1.2rem;padding:1.2rem;display:grid;gap:.8rem}
@media(min-width:44rem){.story-still li{grid-template-columns:13rem 1fr;align-items:center}}
.st-fig{display:flex;gap:.6rem;align-items:flex-end;justify-content:center;flex-wrap:wrap}
.st-fig .si{width:5.5rem}
.st-fig .si.wide{width:11rem}
.st-fig .dq{display:flex;flex-direction:column;gap:.35rem}
.st-fig .dq span{background:var(--paper);border-radius:1rem;padding:.3rem .75rem;font-family:var(--display);font-weight:600;font-size:.88rem}
.st-fig .bk{display:inline-block;width:1rem;border-radius:.5rem .5rem .1rem .1rem}
.story-still .st-age{display:block;font-family:var(--display);font-weight:700;font-size:2rem;line-height:1;color:var(--teal-dp)}
.story-still p{margin:.25rem 0 0}
.story-wrap{display:none;position:relative}
html.story-anim .story-wrap{display:block}
html.story-anim .story-still{display:none}
.stage{position:sticky;top:var(--hdr,0px);height:calc(100vh - var(--hdr,0px));height:calc(100svh - var(--hdr,0px));overflow:hidden;--W:320px;--cy:40vh}
.act{position:absolute;left:50%;top:var(--cy);opacity:0;will-change:transform,opacity;pointer-events:none;z-index:1}
div.act.si{width:calc(var(--W) * var(--w))}
.st-doubt{z-index:2;width:max-content;max-width:calc(var(--W) * .56);background:var(--white);color:var(--ink);border-radius:1rem;padding:.55rem .9rem;font-family:var(--display);font-weight:600;font-size:clamp(.92rem,2.8vw,1.08rem);line-height:1.3;box-shadow:0 4px 0 rgba(9,19,51,.12)}
.st-book{width:calc(var(--W) * var(--bw));height:calc(var(--W) * var(--h));border-radius:.5rem .5rem .1rem .1rem;background-image:linear-gradient(to bottom,transparent 11%,rgba(255,255,255,.6) 11%,rgba(255,255,255,.6) 15%,transparent 15%,transparent 83%,rgba(255,255,255,.6) 83%,rgba(255,255,255,.6) 87%,transparent 87%)}
.st-plank{width:calc(var(--W) * .46);height:.95rem;background:var(--ink);border-radius:.35rem;box-shadow:0 6px 0 rgba(9,19,51,.15)}
.st-spark{width:.55rem;height:.55rem;border-radius:50%}
.st-bub{width:.45rem;height:.45rem;border-radius:50%}
.st-trail{width:calc(var(--W) * .05);height:calc(var(--W) * .7);display:flex;flex-direction:column;border-radius:999px;overflow:hidden;transform-origin:50% 0}
.st-trail i{flex:1}
.st-trail i:nth-child(1){background:var(--coral)}
.st-trail i:nth-child(2){background:var(--white)}
.st-trail i:nth-child(3){background:var(--teal)}
.st-cap{position:absolute;left:50%;bottom:max(1.5rem,6svh);z-index:3;width:min(32rem,calc(100% - 2.5rem));opacity:0;will-change:transform,opacity}
.st-cap .st-age{display:block;font-family:var(--display);font-weight:700;font-size:clamp(2rem,8vw,3rem);line-height:1;color:var(--teal-dp);margin-bottom:.35rem}
.st-cap p{margin:0;font-size:1.08rem;line-height:1.55}
#stdbg{position:fixed;left:.5rem;bottom:.5rem;z-index:60;background:var(--ink);color:#fff;font:600 .75rem/1.45 var(--body);padding:.55rem .75rem;border-radius:.7rem;white-space:pre;min-width:11rem}

/* FAQ link to the dots picker */
.faqlink{margin:.5rem 0 0}.faqlink a{font-weight:700;color:var(--teal-dp)}
.orig{margin:-.4rem 0 1.4rem;font-size:.92rem;color:var(--ink-soft)}.orig a{color:var(--teal-dp);font-weight:700}
.social{margin:.2rem 0 .8rem}.social a{font-weight:700;margin-left:.5rem}
.st-skip{position:absolute;right:1rem;top:1rem;z-index:5;font:inherit;font-size:.85rem;font-weight:700;color:var(--ink);background:rgba(255,255,255,.85);border:0;border-radius:999px;padding:.45rem .9rem;cursor:pointer;box-shadow:0 2px 0 rgba(9,19,51,.12)}
/* share and follow row under the hero buttons */
.heroshare{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:1.1rem}
.hs{display:inline-flex;align-items:center;gap:.4rem;font:inherit;font-size:.88rem;font-weight:700;color:var(--ink);background:rgba(255,255,255,.75);border:1.5px solid rgba(9,19,51,.14);border-radius:999px;padding:.38rem .85rem;cursor:pointer;text-decoration:none;transition:background .15s ease,border-color .15s ease}
.hs:hover{background:#fff;border-color:rgba(9,19,51,.3)}
.hs svg{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hs svg circle{fill:currentColor;stroke:none}
.hsnote{flex-basis:100%;font-size:.85rem;color:var(--ink-soft)}
.heroshare{position:relative}
.hs .chev{width:.9rem;height:.9rem;transition:transform .2s ease}
.hs[aria-expanded="true"] .chev{transform:rotate(180deg)}
.hsmenu{position:absolute;top:calc(100% + .4rem);left:0;z-index:20;min-width:13rem;display:grid;gap:.15rem;background:#fff;border-radius:1rem;padding:.4rem;box-shadow:0 10px 30px rgba(9,19,51,.18),0 2px 0 rgba(9,19,51,.08)}
.hsmenu[hidden]{display:none}
.hsitem{display:flex;align-items:center;justify-content:space-between;gap:.6rem;font:inherit;font-size:.92rem;font-weight:700;color:var(--ink);background:none;border:0;border-radius:.7rem;padding:.6rem .8rem;text-align:left;text-decoration:none;cursor:pointer}
.hsitem:hover,.hsitem:focus-visible{background:var(--paper)}
.hsitem svg{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
/* the hero clips overflow, so the menu opens in the flow below the button instead of floating */
.hsmenu{position:static;flex-basis:100%;max-width:16rem;margin-top:.1rem}
.heroshare{display:block}
.hsmenu{width:16rem;max-width:100%;margin-top:.45rem}
.hsnote{display:block;margin-top:.45rem}
/* gallery: switch between slideshow and a grid of all photos */
.gview{position:absolute;top:1rem;left:1rem;z-index:3;display:inline-flex;align-items:center;font:inherit;font-size:.9rem;font-weight:700;color:var(--ink);background:#fff;border:0;border-radius:999px;padding:.55rem 1rem;cursor:pointer;box-shadow:0 3px 0 rgba(0,0,0,.25)}
.gview>span{display:inline-flex;align-items:center;gap:.45rem}
.gview>span[hidden]{display:none}
.gview svg{width:1.05rem;height:1.05rem;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.gview:focus-visible,.gtile:focus-visible{outline:3px solid #fff;outline-offset:3px}
.ggrid{grid-row:1/-1;overflow-y:auto;overscroll-behavior:contain;padding:4.4rem 1rem 1.5rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(6.5rem,1fr));gap:.5rem;align-content:start}
.ggrid[hidden]{display:none}
@media(min-width:44rem){.ggrid{grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:.6rem;padding:4.6rem 1.5rem 2rem}}
.gtile{display:block;padding:0;border:0;border-radius:.6rem;overflow:hidden;aspect-ratio:4/3;background:rgba(255,255,255,.08);cursor:pointer;position:relative}
.gtile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s ease,opacity .2s ease}
.gtile:hover img{transform:scale(1.05)}
.gtile.on{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--teal)}
dialog.gallery.grid-mode .gfig,dialog.gallery.grid-mode .gbtn,dialog.gallery.grid-mode .gcount{display:none}
.gtile{aspect-ratio:auto;height:auto}
.gtile img{aspect-ratio:4/3;height:auto}
.ggrid{grid-auto-rows:max-content}
/* grid thumbnails shimmer until they have loaded */
.gtile{background-image:linear-gradient(100deg,rgba(255,255,255,.05) 30%,rgba(255,255,255,.14) 50%,rgba(255,255,255,.05) 70%);background-size:200% 100%;animation:shimmer 1.3s linear infinite}
.gtile img{opacity:0}
.gtile.ok{animation:none;background-image:none}
.gtile.ok img{opacity:1}
@media(prefers-reduced-motion:reduce){.gtile{animation:none}}
/* long quality names (Widderstandsfäeg, Widerstandsfähig) must fit inside their pill */
.attr{gap:.45rem;padding-right:.65rem;min-width:0}
.attr .an{font-size:.93rem;min-width:0;hyphens:manual;-webkit-hyphens:manual}
@media(min-width:44rem){.attrs{grid-template-columns:repeat(auto-fill,minmax(10.6rem,1fr))}}
@media(max-width:43.99rem){.attr{padding-left:.45rem;gap:.4rem}.attr .an{font-size:.88rem}}
/* long words in the book reader break with a hyphen instead of leaving a gap (Luxembourgish uses marked break points) */
.reader p,.reader h3,#rdrole,.rdtitle{hyphens:auto;-webkit-hyphens:auto}