/* prepiq-headlines.css · PrepIQ landing: one paper mechanism per section headline (built by
   prepiq-headlines.js from [data-hl] on top of the shared iq-headlines.js/.css). Every hidden state is gated
   on html.hl-on, which the plumbing adds only when motion is allowed, so without JS or with reduced motion
   nothing here hides anything. Start states under html.hl-on, end states under .hl-in, cleanup under
   .hl-done. Prefix hlp; one block per mechanism, in page order. */
:root{
  --hlp-amber:#a8762e;--hlp-brown:#7e5a22;--hlp-deep:#5f4218;--hlp-bright:#b98a3c;--hlp-wash:#f4ecdf;--hlp-red:#b0473a;
  --hlp-manila:#e9d7a6;--hlp-pink:#e4919b;
  --hlp-rules:repeating-linear-gradient(180deg,transparent 0 23px,rgba(126,90,34,.12) 23px 24px);
  --hlp-chrome:linear-gradient(90deg,#8f8c84,#eceae4 42%,#b9b7b0 68%,#7d7a72);
}
@property --hlp-hole{syntax:'<length>';inherits:false;initial-value:0px}
@property --hlp-sr{syntax:'<length>';inherits:false;initial-value:0px}
@property --hlp-sx{syntax:'<percentage>';inherits:false;initial-value:0%}
@property --hlp-hr{syntax:'<length>';inherits:false;initial-value:0px}
@keyframes hlpOff{to{opacity:0}}

/* ---------- 01 · #demo · the flip book ---------- */
.hlp-fb{position:relative;perspective:1700px;perspective-origin:20% 50%}
html.hl-on .hl--flipbook h2{position:relative;z-index:1}
/* the pages swing towards the reader as they lift; keep that swing off the page's horizontal scroll */
html.hl-on .hl--flipbook{overflow-x:clip;overflow-clip-margin:40px}
@media (max-width:640px){html.hl-on .hl--flipbook{overflow-clip-margin:18px}}
.hlp-fb::before{content:"";position:absolute;inset:-10px -24px -16px -20px;z-index:0;border-radius:3px 6px 6px 3px;background:#fff var(--hlp-rules);
  box-shadow:0 0 0 1px rgba(138,133,120,.22),2px 2px 0 #f3efe7,4px 4px 0 #ebe5d9,6px 6px 0 #e2dacb,8px 12px 20px -10px rgba(60,40,10,.32);transition:opacity .7s ease 1.95s}
.hlp-fb__spine{position:absolute;left:-30px;top:-14px;bottom:-20px;width:12px;z-index:40;border-radius:3px;background:linear-gradient(90deg,#5f4218,#7e5a22 55%,#a8762e);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.2),2px 0 4px -1px rgba(60,40,10,.4);transition:opacity .7s ease 1.95s}
.hlp-fb__pg{position:absolute;inset:-10px -24px -16px -20px;z-index:calc(20 - var(--i));border-radius:3px 6px 6px 3px;background:#fff var(--hlp-rules);overflow:hidden;
  box-shadow:0 0 0 1px rgba(138,133,120,.2),inset -16px 0 18px -16px rgba(60,40,10,.28);transform-origin:0 50%;backface-visibility:hidden;pointer-events:none}
.hlp-fb__pg::after{content:"";position:absolute;right:0;bottom:0;width:26px;height:26px;border-radius:0 0 6px 0;background:linear-gradient(315deg,transparent 48%,rgba(138,133,120,.3) 49%,#f6f2ea 52%)}
.hlp-fb__frame{position:absolute;display:block;margin:0;color:#a29c90;white-space:normal}
.hlp-fb__frame .hl-w{display:inline-block;white-space:nowrap}
.hlp-fb__frame .hl-c{display:inline-block}
.hlp-fb__frame em{color:#a29c90}
html.hl-on .hl--flipbook.hl-in .hlp-fb__pg{animation:hlpRiffle .19s cubic-bezier(.5,0,.75,.3) calc(.35s + var(--i) * .16s) forwards}
@keyframes hlpRiffle{0%{transform:rotateY(0deg)}99%{opacity:1}100%{transform:rotateY(-150deg);opacity:0}}
.hlp-fb__scr{position:absolute;z-index:2;border-radius:4px;pointer-events:none;rotate:-1.2deg;
  background:repeating-linear-gradient(-58deg,transparent 0 6px,rgba(120,112,98,.45) 6px 7.5px);
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
html.hl-on .hl--flipbook h2 > .hlp-fb__scr{display:none}
html.hl-on .hl--flipbook h2 .hl-c{opacity:0;color:#a29c90}
html.hl-on .hl--flipbook.hl-in h2 .hl-c{opacity:1;color:inherit;transition:opacity 0s linear 1.3s,color .7s ease 1.62s}
html.hl-on .hl--flipbook .eyebrow{clip-path:inset(0 100% 0 0)}
html.hl-on .hl--flipbook.hl-in .eyebrow{clip-path:inset(-30% -4% -30% -4%);transition:clip-path .5s steps(6,end) .04s}
html.hl-on .hl--flipbook.hl-in .hlp-fb::before,html.hl-on .hl--flipbook.hl-in .hlp-fb__spine{opacity:0}
html.hl-on .hl--flipbook.hl-done .hlp-fb__pg{display:none}
html.hl-on .hl--flipbook.hl-done .eyebrow{clip-path:none}
@media (max-width:640px){.hlp-fb::before,.hlp-fb__pg{inset:-8px -12px -12px -10px}.hlp-fb__spine{left:-18px;width:8px;top:-11px;bottom:-15px}.hlp-fb::before{box-shadow:0 0 0 1px rgba(138,133,120,.22),2px 2px 0 #f3efe7,3px 3px 0 #ebe5d9,6px 10px 16px -10px rgba(60,40,10,.3)}}

/* ---------- 02 · #short · snowfall and hourglass ---------- */
html.hl-on .hl--snow h2{position:relative}
html.hl-on .hl--snow .hl-c{opacity:0}
html.hl-on .hl--snow.hl-in .hl-c{animation:hlpSnow var(--dur) cubic-bezier(.3,.1,.4,1) var(--d) both}
@keyframes hlpSnow{0%{opacity:0;translate:var(--dx) calc(var(--dy) * -1);rotate:var(--r)}12%{opacity:1}38%{translate:calc(var(--dx) * -.7) calc(var(--dy) * -.55)}
  64%{translate:calc(var(--dx) * .4) calc(var(--dy) * -.22);rotate:calc(var(--r) * .3)}86%{translate:calc(var(--dx) * -.12) -2px;rotate:0deg}100%{opacity:1;translate:0 0;rotate:0deg}}
.hlp-sn__flake{position:absolute;top:-46px;width:calc(15px * var(--s));height:calc(15px * var(--s));opacity:0;pointer-events:none;z-index:0}
.hlp-sn__flake svg{display:block;width:100%;height:100%;fill:none;stroke:#bdb5a5;stroke-width:1.5;stroke-linecap:round;filter:drop-shadow(0 1px 0 #fff)}
html.hl-on .hl--snow.hl-in .hlp-sn__flake{animation:hlpFlake 2.3s linear var(--d) forwards}
@keyframes hlpFlake{0%{opacity:0;translate:0 0;rotate:0deg}15%{opacity:.95}50%{translate:var(--dx) 70px}100%{opacity:0;translate:calc(var(--dx) * -.4) 160px;rotate:200deg}}
.hlp-sn__fill{display:inline-block;position:relative;white-space:nowrap}
html.hl-on .hl--snow .hlp-sn__fill em{display:inline-block;clip-path:polygon(-4% 106%,22% 105%,50% 102%,78% 105%,104% 106%,104% 130%,-4% 130%)}
html.hl-on .hl--snow.hl-in .hlp-sn__fill em{clip-path:polygon(-4% -22%,22% -25%,50% -34%,78% -25%,104% -22%,104% 130%,-4% 130%);transition:clip-path 1.4s cubic-bezier(.35,.1,.55,1) 1.5s}
html.hl-on .hl--snow.hl-done .hlp-sn__fill em{clip-path:none}
.hlp-sn__glass{position:absolute;left:calc(100% + .14em);top:.1em;width:.44em;height:.68em;opacity:0;scale:.6;rotate:180deg;pointer-events:none}
.hlp-sn__glass svg{display:block;width:100%;height:100%;overflow:visible}
.hlp-sn__glass .frm{fill:#7e5a22}
.hlp-sn__glass .gl{fill:rgba(255,255,255,.75);stroke:#a8762e;stroke-width:1.1}
.hlp-sn__glass .top,.hlp-sn__glass .bot{fill:#d6b16f}
.hlp-sn__glass .top{transform-box:view-box;transform-origin:12px 17.6px}
.hlp-sn__glass .bot{transform-box:view-box;transform-origin:12px 32.2px;transform:scaleY(0)}
.hlp-sn__glass .str{fill:none;stroke:#d6b16f;stroke-width:1.2;opacity:0}
html.hl-on .hl--snow.hl-in .hlp-sn__glass{opacity:1;scale:1;rotate:0deg;transition:opacity .3s ease 1s,scale .5s var(--hl-spring) 1s,rotate .6s cubic-bezier(.3,1.3,.4,1) 1.05s}
html.hl-on .hl--snow.hl-in .hlp-sn__glass .top{transform:scaleY(0);transition:transform 1.4s linear 1.6s}
html.hl-on .hl--snow.hl-in .hlp-sn__glass .bot{transform:scaleY(1);transition:transform 1.4s linear 1.6s}
html.hl-on .hl--snow.hl-in .hlp-sn__glass .str{animation:hlpStream 1.4s linear 1.6s}
@keyframes hlpStream{0%,100%{opacity:0}8%,92%{opacity:1}}
html.hl-on .hl--snow.hl-in.hl-done .hlp-sn__glass{opacity:0;transition:opacity .7s ease}
.hlp-sn__pane{position:relative}
.hlp-sn__pane::after{content:"";position:absolute;inset:-8px -14px;border-radius:8px;pointer-events:none;
  background:radial-gradient(rgba(255,255,255,.75) .8px,transparent 1.4px) 0 0/7px 7px,rgba(250,248,245,.58);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.7);
  -webkit-mask:radial-gradient(circle at 50% 50%,transparent var(--hlp-hole),#000 calc(var(--hlp-hole) + 60px));mask:radial-gradient(circle at 50% 50%,transparent var(--hlp-hole),#000 calc(var(--hlp-hole) + 60px))}
html.hl-on .hl--snow.hl-in .hlp-sn__pane::after{--hlp-hole:640px;transition:--hlp-hole 1.6s cubic-bezier(.4,.1,.4,1) 1.75s}
html.hl-on .hl--snow.hl-done .hlp-sn__pane::after{display:none}
html.hl-on .hl--snow .eyebrow{opacity:0}
html.hl-on .hl--snow.hl-in .eyebrow{animation:hlpEbSnow 1.1s cubic-bezier(.3,.2,.4,1) .05s both}
@keyframes hlpEbSnow{0%{opacity:0;translate:-12px -18px}35%{opacity:1;translate:7px -8px}70%{translate:-3px -2px}100%{opacity:1;translate:0 0}}
@media (max-width:640px){.hlp-sn__pane::after{inset:-6px -4px}}

/* ---------- 03 · #how · the board game ---------- */
html.hl-on .hl--boardgame h2{position:relative}
.hlp-bg__track{position:absolute;height:.14em;min-height:9px;z-index:0;pointer-events:none}
.hlp-bg__tile{position:absolute;top:0;height:100%;border-radius:3px;background:#fffdf8;box-shadow:0 0 0 1px rgba(126,90,34,.28),0 3px 0 rgba(126,90,34,.16),0 8px 12px -8px rgba(60,40,10,.4);
  transform-origin:0 50%;scale:0 1;transition:scale .45s var(--hl-soft) calc(.12s + var(--i) * .07s),background-color .3s ease var(--land),box-shadow .3s ease var(--land),opacity .6s ease}
.hlp-bg__tile b{position:absolute;right:5px;top:50%;translate:0 -50%;font:600 9px/1 var(--mono,monospace);color:rgba(126,90,34,.5);transition:color .3s ease var(--land)}
html.hl-on .hl--boardgame.hl-in .hlp-bg__tile{scale:1 1}
html.hl-on .hl--boardgame.hl-in .hlp-bg__tile.is-yours{background-color:#f0d9a6;box-shadow:0 0 0 1px rgba(168,118,46,.6),0 3px 0 rgba(126,90,34,.3),0 0 22px 3px rgba(232,180,90,.55)}
html.hl-on .hl--boardgame.hl-in .hlp-bg__tile.is-yours b{color:#5f4218}
html.hl-on .hl--boardgame.hl-done .hlp-bg__tile{opacity:0}
.hlp-bg__pawnw{position:absolute;width:30px;height:40px;z-index:3;pointer-events:none;transition:opacity .5s ease}
.hlp-bg__pawn{display:block;width:100%;height:100%;opacity:0;transform-origin:50% 100%;filter:drop-shadow(0 3px 2px rgba(60,40,10,.25))}
.hlp-bg__pawn svg{display:block;width:100%;height:100%;overflow:visible}
.hlp-bg__pawn .bd,.hlp-bg__pawn .hd{fill:#a8762e;stroke:#7e5a22;stroke-width:1}
.hlp-bg__pawn .hi{fill:none;stroke:rgba(255,240,210,.7);stroke-width:1.4;stroke-linecap:round}
.hlp-bg__pawn .sh{fill:rgba(60,40,10,.22)}
html.hl-on .hl--boardgame.hl-done .hlp-bg__pawnw{opacity:0}
html.hl-on .hl--boardgame h2 .hl-w{transform-origin:50% 100%}
html.hl-on .hl--boardgame h2 .hl-w{opacity:0}
html.hl-on .hl--boardgame.hl-in h2 .hl-w{animation:hlpPlonk .5s cubic-bezier(.3,.6,.4,1) var(--wd) both}
@keyframes hlpPlonk{0%{opacity:0;translate:0 -.55em;rotate:-4deg}40%{opacity:1}70%{translate:0 0;rotate:0deg;scale:1.04 .93}85%{scale:.99 1.03}100%{opacity:1;translate:0 0;rotate:0deg;scale:1}}
html.hl-on .hl--boardgame .eyebrow{position:relative}
.hlp-bg__ebt{display:inline-block}
html.hl-on .hl--boardgame .hlp-bg__ebt{clip-path:inset(-20% 100% -20% 0)}
html.hl-on .hl--boardgame.hl-in .hlp-bg__ebt{clip-path:inset(-20% -2% -20% 0);transition:clip-path .62s cubic-bezier(.3,.6,.4,1) .1s}
html.hl-on .hl--boardgame.hl-done .hlp-bg__ebt{clip-path:none}
.hlp-bg__die{position:absolute;left:0;top:50%;width:15px;height:15px;margin-top:-8px;border-radius:3.5px;background:#fffdf8;opacity:0;
  box-shadow:0 0 0 1px rgba(126,90,34,.42),1px 2px 0 rgba(126,90,34,.25),0 6px 8px -4px rgba(60,40,10,.35);transition:filter .5s ease}
.hlp-bg__die b{position:absolute;width:3px;height:3px;margin:-1.5px 0 0 -1.5px;border-radius:50%;background:#5f4218}
html.hl-on .hl--boardgame.hl-in .hlp-bg__die{animation:hlpDie .78s cubic-bezier(.3,.6,.4,1) .08s forwards}
@keyframes hlpDie{0%{opacity:0;translate:-10px -8px;rotate:-260deg}15%{opacity:1}62%{translate:calc(var(--run) * .92) 0;rotate:-24deg}82%{translate:calc(var(--run) * 1.03) -3px;rotate:7deg}100%{opacity:1;translate:var(--run) 0;rotate:0deg}}
html.hl-on .hl--boardgame.hl-done .hlp-bg__die{filter:opacity(0)}
html.hl-on .hl--boardgame .hlp-bg__card{opacity:0;translate:-60px -6px;rotate:-5deg}
html.hl-on .hl--boardgame.hl-in .hlp-bg__card{opacity:1;translate:0 0;rotate:0deg;transition:opacity .25s ease var(--deal),translate .75s cubic-bezier(.2,.9,.25,1.05) var(--deal),rotate .75s cubic-bezier(.2,.9,.25,1.05) var(--deal)}

/* ---------- 04 · #builds · the lever-arch file ---------- */
.hlp-bn{position:relative}
.hlp-bn__top{position:relative;z-index:5}
html.hl-on .hl--binder h2{position:relative;z-index:1}
.hlp-bn__page,.hlp-bn__sheet{position:absolute;inset:-6px -26px -16px -54px;border-radius:2px 4px 4px 2px;background:#fff var(--hlp-rules);pointer-events:none;
  box-shadow:0 0 0 1px rgba(138,133,120,.24),0 14px 22px -16px rgba(60,40,10,.45)}
.hlp-bn__page{z-index:0}
.hlp-bn__sheet{z-index:calc(1 + var(--i));background-color:#fbf9f4}
.hlp-bn__page b,.hlp-bn__sheet b{position:absolute;left:26px;width:11px;height:11px;margin-top:-5.5px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#d4ccbd,#ece5d8 70%);box-shadow:inset 0 1px 2px rgba(60,40,10,.42)}
.hlp-bn__page b:first-child,.hlp-bn__sheet b:first-child{top:30%}
.hlp-bn__page b:last-child,.hlp-bn__sheet b:last-child{top:70%}
html.hl-on .hl--binder .hlp-bn__sheet{opacity:0;translate:calc(var(--i) * 3px - 6px) -40px;rotate:-2deg}
html.hl-on .hl--binder.hl-in .hlp-bn__sheet{opacity:1;translate:calc(var(--i) * 3px - 6px) calc(var(--i) * 2px - 5px);rotate:0deg;
  transition:opacity .18s ease calc(.5s + var(--i) * .12s),translate .48s cubic-bezier(.5,0,.6,1.35) calc(.5s + var(--i) * .12s),rotate .48s ease calc(.5s + var(--i) * .12s)}
html.hl-on .hl--binder .hlp-bn__top{opacity:0;translate:0 -46px;rotate:-1.2deg}
html.hl-on .hl--binder.hl-in .hlp-bn__top{opacity:1;translate:0 0;rotate:0deg;transition:opacity .18s ease .88s,translate .55s cubic-bezier(.5,0,.6,1.3) .88s,rotate .55s ease .88s}
.hlp-bn__spine{position:absolute;left:-52px;top:-6px;bottom:-16px;width:8px;z-index:8;border-radius:3px;background:var(--hlp-chrome);box-shadow:0 2px 4px rgba(0,0,0,.25);
  transform-origin:50% 0;scale:1 0;pointer-events:none;transition:scale .4s var(--hl-soft) .06s}
html.hl-on .hl--binder.hl-in .hlp-bn__spine{scale:1 1}
.hlp-bn__ring{position:absolute;left:2px;width:34px;height:17px;margin-top:-8.5px;border:4px solid #c9c6be;border-radius:11px;box-sizing:border-box;
  box-shadow:0 1.5px 2px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.75),0 0 0 .5px rgba(0,0,0,.25);transform-origin:4px 50%}
.hlp-bn__ring:nth-of-type(2){top:30%}
.hlp-bn__ring:nth-of-type(3){top:70%}
html.hl-on .hl--binder.hl-in .hlp-bn__ring{animation:hlpRing 1.5s cubic-bezier(.3,.7,.3,1) .25s both}
@keyframes hlpRing{0%{rotate:0deg}12%{rotate:-80deg}75%{rotate:-80deg}87%{rotate:7deg}94%{rotate:-2deg}100%{rotate:0deg}}
.hlp-bn__lever{position:absolute;left:-2px;top:-12px;width:22px;height:7px;border-radius:3px;background:linear-gradient(180deg,#a9a59b,#6e6b64);transform-origin:4px 50%}
html.hl-on .hl--binder.hl-in .hlp-bn__lever{animation:hlpLever 1.5s cubic-bezier(.3,.7,.3,1) .25s both}
@keyframes hlpLever{0%{rotate:0deg}12%{rotate:-62deg}75%{rotate:-62deg}88%{rotate:4deg}100%{rotate:0deg}}
html.hl-on .hl--binder.hl-in .hlp-bn{animation:hlpClick .18s ease 1.55s}
@keyframes hlpClick{50%{translate:0 1.5px}}
html.hl-on .hl--binder.hl-done .hlp-bn__sheet,html.hl-on .hl--binder.hl-done .hlp-bn__page,html.hl-on .hl--binder.hl-done .hlp-bn__spine{opacity:0;transition:opacity .6s ease}
.hlp-bn__tab{display:inline-block;position:relative;isolation:isolate;padding:4px 10px 3px;margin:-4px -10px -3px}
.hlp-bn__tabbg{position:absolute;inset:0;z-index:-1;border-radius:6px 6px 0 0;background:#f0d9a6;box-shadow:0 0 0 1px rgba(168,118,46,.38);transform-origin:50% 100%;scale:1 0;transition:opacity .6s ease}
html.hl-on .hl--binder.hl-in .hlp-bn__tabbg{scale:1 1;transition:scale .45s var(--hl-spring) .05s,opacity .6s ease}
html.hl-on .hl--binder .hlp-bn__tab{clip-path:inset(100% -20px 0 -20px);translate:0 6px}
html.hl-on .hl--binder.hl-in .hlp-bn__tab{clip-path:inset(-20px -20px 0 -20px);translate:0 0;transition:clip-path .5s var(--hl-soft) .05s,translate .6s var(--hl-spring) .05s}
html.hl-on .hl--binder.hl-done .hlp-bn__tab{clip-path:none}
html.hl-on .hl--binder.hl-done .hlp-bn__tabbg{opacity:0}
.hlp-bn__leaf{perspective:1000px}
html.hl-on .hl--binder .dek{transform-origin:0 50%;transform:rotateY(-82deg);opacity:0}
html.hl-on .hl--binder.hl-in .dek{transform:none;opacity:1;transition:transform 1s cubic-bezier(.25,1.15,.35,1) 1.5s,opacity .3s ease 1.5s}
@media (max-width:640px){.hlp-bn__page,.hlp-bn__sheet{inset:-5px -10px -12px -20px}.hlp-bn__page b,.hlp-bn__sheet b{left:7px;width:8px;height:8px;margin-top:-4px}
  .hlp-bn__spine{left:-19px;width:5px;top:-5px;bottom:-12px}.hlp-bn__ring{left:1px;width:18px;height:11px;margin-top:-5.5px;border-width:3px}.hlp-bn__lever{width:13px;height:5px}}

/* ---------- 05 · #real-set · the instant print ---------- */
.hlp-pl__mouth{position:relative;z-index:1;clip-path:inset(calc(var(--mo,14px) * -1) -90px -160px -90px)}
.hlp-pl__slot{display:block;position:relative;height:0}
.hlp-pl__slot b{position:absolute;left:12%;right:12%;top:-12px;height:9px;border-radius:5px;opacity:0;pointer-events:none;
  background:linear-gradient(180deg,#1f1a14,#3a3128 60%,#5a4c3c);box-shadow:inset 0 2px 3px rgba(0,0,0,.6),0 1px 0 rgba(255,255,255,.75)}
html.hl-on .hl--polaroid.hl-in .hlp-pl__slot b{animation:hlpSlot 2s ease .1s both}
@keyframes hlpSlot{0%{opacity:0;scale:.92 1}10%{opacity:1;scale:1}82%{opacity:1}100%{opacity:0}}
.hlp-pl__print{position:relative;z-index:0}
.hlp-pl__frame{position:absolute;inset:-12px -30px -22px -30px;z-index:-1;border-radius:3px;background:#fffefb;pointer-events:none;
  box-shadow:0 0 0 1px rgba(138,133,120,.2),0 22px 34px -22px rgba(60,40,10,.5)}
.hlp-pl__dev{position:absolute;left:-18px;right:-18px;z-index:2;border-radius:2px;pointer-events:none;filter:blur(3px);
  background:radial-gradient(60% 80% at 30% 40%,rgba(255,255,255,.06),transparent 70%),radial-gradient(50% 70% at 75% 65%,rgba(0,0,0,.18),transparent 70%);background-color:#2d2620}
.hlp-pl__dev--em{left:auto;right:auto;z-index:3;background-color:#2d2620;filter:blur(7px)}
html.hl-on .hl--polaroid.hl-in .hlp-pl__dev{opacity:0;background-color:#c8ae84;transition:opacity 1.5s ease 1.35s,background-color 1.1s ease 1.2s}
html.hl-on .hl--polaroid.hl-in .hlp-pl__dev--em{transition:opacity 1.2s ease 2s,background-color 1s ease 1.75s}
html.hl-on .hl--polaroid .hlp-pl__print{translate:0 calc(-100% - var(--mo,14px) - 20px)}
html.hl-on .hl--polaroid.hl-in .hlp-pl__print{translate:0 0;transition:translate 1.05s cubic-bezier(.3,.7,.25,1) .35s;animation:hlpShake .75s ease-in-out 1.45s}
@keyframes hlpShake{0%,100%{rotate:0deg}18%{rotate:-1.6deg}42%{rotate:1.3deg}66%{rotate:-.8deg}84%{rotate:.4deg}}
html.hl-on .hl--polaroid .hlp-pl__cap{clip-path:inset(-20% 100% -20% 0)}
html.hl-on .hl--polaroid.hl-in .hlp-pl__cap{clip-path:inset(-20% -2% -20% 0);transition:clip-path 1.1s cubic-bezier(.5,.1,.4,1) 2.35s}
.hlp-pl__eb{position:relative;z-index:2;isolation:isolate}
.hlp-pl__flash{position:absolute;left:50%;top:50%;width:220px;height:220px;margin:-110px 0 0 -110px;border-radius:50%;z-index:-1;opacity:0;scale:.2;pointer-events:none;
  background:radial-gradient(circle,#fff 0,rgba(255,250,235,.85) 18%,rgba(255,245,220,0) 62%)}
html.hl-on .hl--polaroid.hl-in .hlp-pl__flash{animation:hlpFlash .7s ease-out .05s}
@keyframes hlpFlash{0%{opacity:0;scale:.2}12%{opacity:1;scale:1}100%{opacity:0;scale:1.6}}
html.hl-on .hl--polaroid .hlp-pl__eb{opacity:0}
html.hl-on .hl--polaroid.hl-in .hlp-pl__eb{animation:hlpExpose 1s ease .08s both}
@keyframes hlpExpose{0%{opacity:0;filter:brightness(4) blur(2px)}15%{opacity:1}100%{opacity:1;filter:none}}
html.hl-on .hl--polaroid.hl-done .hlp-pl__mouth,html.hl-on .hl--polaroid.hl-done .hlp-pl__cap{clip-path:none}
html.hl-on .hl--polaroid.hl-done .hlp-pl__frame{opacity:0;transition:opacity .7s ease}
html.hl-on .hl--polaroid.hl-done .hlp-pl__dev{display:none}
@media (max-width:640px){.hlp-pl__frame{inset:-10px -10px -18px -10px}.hlp-pl__dev{left:-6px;right:-6px}.hlp-pl__slot b{left:2%;right:2%}.hlp-pl__flash{width:180px;height:180px;margin:-90px 0 0 -90px}}

/* ---------- 06 · #review · the flags ---------- */
html.hl-on .hl--flags h2{position:relative}
.hlp-fg__flag{position:absolute;z-index:3;margin-left:-.09em;border-radius:1.5px 1.5px 1px 1px;pointer-events:none;transform-origin:50% 80%;rotate:var(--rot);
  background:linear-gradient(180deg,rgba(214,160,62,.96) 0 56%,rgba(236,196,120,.5) 56% 100%);box-shadow:0 1px 2px rgba(60,40,10,.28)}
.hlp-fg__flag--red{background:linear-gradient(180deg,rgba(196,74,60,.95) 0 56%,rgba(226,142,130,.48) 56% 100%)}
html.hl-on .hl--flags .hlp-fg__flag{opacity:0}
html.hl-on .hl--flags.hl-in .hlp-fg__flag{animation:hlpFlag .7s cubic-bezier(.3,.7,.3,1) calc(.75s + var(--k) * .2s) both}
@keyframes hlpFlag{0%{opacity:0;translate:-30px -80px;rotate:-40deg;scale:1.15}30%{opacity:1}62%{translate:0 0;rotate:calc(var(--rot) - 6deg);scale:.96}78%{rotate:calc(var(--rot) + 3deg);scale:1.02}100%{opacity:1;translate:0 0;rotate:var(--rot);scale:1}}
html.hl-on .hl--flags.hl-done .hlp-fg__flag{animation:hlpPeel .6s ease-in calc(var(--k) * .08s) both}
@keyframes hlpPeel{0%{opacity:1;translate:0 0;rotate:var(--rot)}100%{opacity:0;translate:16px -26px;rotate:calc(var(--rot) + 20deg)}}
html.hl-on .hl--flags h2 .hl-w{opacity:0;translate:0 .2em}
html.hl-on .hl--flags.hl-in h2 .hl-w{opacity:1;translate:0 0;transition:opacity .4s ease calc(var(--k) * 70ms + .15s),translate .6s var(--hl-spring) calc(var(--k) * 70ms + .15s)}
html.hl-on .hl--flags.hl-in h2 .hlp-fg__flagged{animation:hlpNudge .32s ease calc(1.17s + var(--fk) * .2s)}
@keyframes hlpNudge{40%{translate:0 .035em;scale:.99}}
.hlp-fg__ring{position:absolute;z-index:2;pointer-events:none}
.hlp-fg__ring svg{display:block;width:100%;height:100%;overflow:visible}
.hlp-fg__ring path{fill:none;stroke:#b0473a;stroke-width:3.2;stroke-linecap:round;stroke-dasharray:100 100;stroke-dashoffset:100;opacity:.88}
html.hl-on .hl--flags.hl-in .hlp-fg__ring path{stroke-dashoffset:0;transition:stroke-dashoffset 1s cubic-bezier(.45,.05,.4,1) 1.6s}
html.hl-on .hl--flags.hl-done .hlp-fg__ring{opacity:0;transition:opacity .8s ease .2s}
.hlp-fg__ebt{display:inline-block;position:relative}
.hlp-fg__tick{position:absolute;left:calc(100% + 8px);top:50%;width:16px;height:13px;margin-top:-8px;pointer-events:none;transition:opacity .6s ease}
.hlp-fg__tick svg{display:block;width:100%;height:100%;overflow:visible}
.hlp-fg__tick path{fill:none;stroke:#b0473a;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:10 10;stroke-dashoffset:10}
html.hl-on .hl--flags.hl-in .hlp-fg__tick path{stroke-dashoffset:0;transition:stroke-dashoffset .35s ease .55s}
html.hl-on .hl--flags .eyebrow{opacity:0;translate:-12px 0}
html.hl-on .hl--flags.hl-in .eyebrow{opacity:1;translate:0 0;transition:opacity .5s ease,translate .7s var(--hl-soft)}
html.hl-on .hl--flags.hl-done .hlp-fg__tick{opacity:0}

/* ---------- 07 · #entities · the company seal ---------- */
.hlp-eb__die{display:inline-block;position:relative;white-space:nowrap}
.hlp-eb__seal{position:absolute;left:calc(100% + .16em);top:50%;width:.6em;height:.6em;margin-top:-.26em;border-radius:50%;pointer-events:none;
  box-shadow:inset 1px 1px 1.5px rgba(80,55,20,.3),inset -1px -1px 1.5px rgba(255,255,255,.9),1px 1px 0 rgba(255,255,255,.8)}
/* the ridged rim, then the raised boss in the middle; no ink, only relief */
.hlp-eb__seal b{position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.75) 0 5deg,rgba(126,90,34,.13) 5deg 10deg);
  -webkit-mask:radial-gradient(circle,transparent 0 60%,#000 61% 98%,transparent 99%);mask:radial-gradient(circle,transparent 0 60%,#000 61% 98%,transparent 99%)}
.hlp-eb__seal::after{content:"";position:absolute;left:50%;top:50%;width:.36em;height:.36em;margin:-.18em 0 0 -.18em;border-radius:50%;
  box-shadow:1.5px 1.5px 2px rgba(80,55,20,.3),-1.5px -1.5px 2px rgba(255,255,255,.95),inset 0 0 0 .025em rgba(126,90,34,.08)}
html.hl-on .hl--emboss .hlp-eb__seal{opacity:0;scale:1.12}
html.hl-on .hl--emboss.hl-in .hlp-eb__seal{opacity:.85;scale:1;transition:opacity .15s ease 1.09s,scale .5s var(--hl-soft) 1.09s}
.hlp-eb__press{position:absolute;left:-.16em;top:-.08em;width:calc(100% + .98em);height:1.12em;z-index:3;border-radius:5px;opacity:0;pointer-events:none;transform-origin:50% 55%;
  background:radial-gradient(circle at .3em 50%,#f1d79c 0 .045em,#5a3d15 .055em,transparent .075em),radial-gradient(circle at calc(100% - .3em) 50%,#f1d79c 0 .045em,#5a3d15 .055em,transparent .075em),
    linear-gradient(180deg,#d1a35b,#8a6227 46%,#6b4a1c 56%,#a7793a);box-shadow:inset 0 1px 0 rgba(255,240,200,.6),inset 0 0 0 .05em rgba(255,230,180,.18),inset 0 -2px 0 rgba(0,0,0,.2),0 12px 18px -8px rgba(40,25,5,.55)}
.hlp-eb__press b{position:absolute;left:50%;top:50%;width:.34em;height:.34em;margin:-.17em 0 0 -.17em;border-radius:50%;background:radial-gradient(circle at 40% 35%,#f2f0ea,#a9a59b 60%,#7d7a72);box-shadow:0 2px 3px rgba(0,0,0,.35)}
html.hl-on .hl--emboss.hl-in .hlp-eb__press{animation:hlpPress 1.35s cubic-bezier(.45,0,.55,1) .55s forwards}
@keyframes hlpPress{0%{opacity:0;scale:1.32;box-shadow:inset 0 1px 0 rgba(255,240,200,.6),0 40px 50px -10px rgba(40,25,5,.35)}18%{opacity:1}40%{scale:1;box-shadow:inset 0 1px 0 rgba(255,240,200,.6),0 4px 6px -2px rgba(40,25,5,.55)}46%{scale:.985 .955}54%{scale:1}70%{scale:1;opacity:1}100%{scale:1.26;opacity:0;box-shadow:inset 0 1px 0 rgba(255,240,200,.6),0 36px 46px -10px rgba(40,25,5,.3)}}
html.hl-on .hl--emboss:not(.hl-in) .hlp-eb__die em{color:transparent}
html.hl-on .hl--emboss.hl-in .hlp-eb__die em{animation:hlpBlind 1.75s ease 1.09s backwards,hlpRelief 2s ease 1.09s both}
@keyframes hlpBlind{0%,52%{color:transparent}}
@keyframes hlpRelief{0%{text-shadow:-1px -1px 0 rgba(255,255,255,0),1.5px 1.5px 1px rgba(80,55,20,0)}3%{text-shadow:-1px -1px 0 rgba(255,255,255,.95),1.5px 1.5px 1px rgba(80,55,20,.42)}60%{text-shadow:-1px -1px 0 rgba(255,255,255,.95),1.5px 1.5px 1px rgba(80,55,20,.42)}100%{text-shadow:-1px -1px 0 rgba(255,255,255,0),1.5px 1.5px 1px rgba(80,55,20,0)}}
html.hl-on .hl--emboss.hl-in .hlp-eb__die{animation:hlpThud .25s ease 1.1s}
html.hl-on .hl--emboss.hl-done .hlp-eb__press{display:none}
@media (max-width:640px){.hlp-eb__seal{display:none}.hlp-eb__press{width:calc(100% + .3em)}}
@keyframes hlpThud{50%{translate:0 1.5px}}
html.hl-on .hl--emboss h2 .hl-w{opacity:0;translate:0 .14em;filter:blur(2px)}
html.hl-on .hl--emboss.hl-in h2 .hl-w{opacity:1;translate:0 0;filter:none;transition:opacity .45s ease calc(var(--k) * 90ms + .1s),translate .6s var(--hl-soft) calc(var(--k) * 90ms + .1s),filter .5s ease calc(var(--k) * 90ms + .1s)}
html.hl-on .hl--emboss .eyebrow .hl-c{opacity:0;scale:.6;translate:0 2px}
html.hl-on .hl--emboss.hl-in .eyebrow .hl-c{opacity:1;scale:1;translate:0 0;transition:opacity .01s linear calc(var(--j) * 38ms),scale .22s cubic-bezier(.3,1.8,.5,1) calc(var(--j) * 38ms),translate .22s ease calc(var(--j) * 38ms)}
.hlp-eb__inked{position:relative}
html.hl-on .hl--emboss .hlp-eb__inked .dek{clip-path:inset(-10% 100% -10% -2%)}
html.hl-on .hl--emboss.hl-in .hlp-eb__inked .dek{clip-path:inset(-10% -2% -10% -2%);transition:clip-path 1.1s cubic-bezier(.45,.05,.45,1) 1.75s}
html.hl-on .hl--emboss.hl-done .hlp-eb__inked .dek{clip-path:none}
.hlp-eb__roller{position:absolute;top:-6px;bottom:-6px;left:0;width:16px;margin-left:-8px;border-radius:8px;opacity:0;pointer-events:none;
  background:linear-gradient(90deg,#2b241c,#5a4a38 40%,#3a3026 70%,#1e1913);box-shadow:0 4px 8px -3px rgba(0,0,0,.4)}
.hlp-eb__roller b{position:absolute;left:50%;top:-15px;width:3px;height:17px;margin-left:-1.5px;border-radius:2px;background:#8f8c84}
html.hl-on .hl--emboss.hl-in .hlp-eb__roller{animation:hlpRoll 1.1s cubic-bezier(.45,.05,.45,1) 1.75s forwards}
@keyframes hlpRoll{0%{opacity:0;left:0}8%{opacity:1}88%{opacity:1;left:calc(100% - 8px)}100%{opacity:0;left:calc(100% - 8px)}}

/* ---------- 08 · #inputs · the filing cabinet ---------- */
html.hl-on .hl--cabinet h2{position:relative}
html.hl-on .hl--cabinet h2 .hl-w{position:relative;isolation:isolate;transform-origin:50% 100%}
html.hl-on .hl--cabinet h2 .hl-w::before{content:"";position:absolute;inset:.02em -.1em .04em -.1em;z-index:-1;border-radius:2px 2px 0 0;opacity:0;
  background:linear-gradient(180deg,#efe1b9,#e3ce98);box-shadow:0 0 0 1px rgba(126,90,34,.18)}
html.hl-on .hl--cabinet h2 .hl-w::after{content:"";position:absolute;left:var(--tab);top:-.17em;width:.9em;height:.2em;z-index:-1;border-radius:.07em .07em 0 0;opacity:0;
  background:#ead8a8;box-shadow:0 0 0 1px rgba(126,90,34,.18)}
html.hl-on .hl--cabinet h2 .hl-w{opacity:0;transform:perspective(520px) translateY(.32em) rotateX(-80deg)}
html.hl-on .hl--cabinet.hl-in h2 .hl-w{opacity:1;transform:perspective(520px) translateY(0) rotateX(0deg);transition:opacity .2s ease var(--wd),transform .75s cubic-bezier(.25,1.3,.4,1) var(--wd)}
html.hl-on .hl--cabinet.hl-in h2 .hl-w::before,html.hl-on .hl--cabinet.hl-in h2 .hl-w::after{animation:hlpManila 1.6s ease var(--wd) both}
@keyframes hlpManila{0%{opacity:0}10%,62%{opacity:1}100%{opacity:0}}
html.hl-on .hl--cabinet.hl-done h2 .hl-w{transform:none;transition:none}
.hlp-cb__drawer{position:absolute;z-index:2;border-radius:3px;opacity:0;pointer-events:none;
  background:linear-gradient(180deg,#9a7744,#7e5a22 60%,#6a4a1a);box-shadow:inset 0 1px 0 rgba(255,230,180,.45),inset 0 -2px 0 rgba(0,0,0,.18),0 10px 16px -10px rgba(40,25,5,.6)}
.hlp-cb__drawer b{position:absolute;left:50%;top:50%;width:min(24%,90px);height:20%;min-height:4px;translate:-50% -50%;border-radius:999px;background:linear-gradient(180deg,#efece4,#a9a59b);box-shadow:0 1px 1px rgba(0,0,0,.35)}
.hlp-cb__drawer i{position:absolute;left:10%;top:26%;width:min(13%,52px);height:46%;border:1.5px solid #d7d2c6;border-radius:2px;background:rgba(255,253,245,.85)}
html.hl-on .hl--cabinet.hl-in .hlp-cb__drawer{animation:hlpDrawer 1.3s cubic-bezier(.3,.7,.3,1) calc(.2s + var(--l) * .95s) both}
@keyframes hlpDrawer{0%{opacity:0;transform:translateY(-6px) scale(.97)}14%{opacity:1}30%{transform:translateY(.1em) scale(1.035)}70%{opacity:1;transform:translateY(.1em) scale(1.035)}100%{opacity:0;transform:translateY(-2px) scale(.99)}}
html.hl-on .hl--cabinet.hl-done .hlp-cb__drawer{display:none}
.hlp-cb__holder{display:inline-block;position:relative;padding:3px 8px;margin:-3px -8px;clip-path:inset(-2px)}
.hlp-cb__holder::before{content:"";position:absolute;inset:0;border:1.5px solid #b9b5ab;border-radius:3px;opacity:0;scale:.9;
  background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(220,215,205,.35));box-shadow:inset 0 1px 2px rgba(0,0,0,.15)}
.hlp-cb__card{display:inline-block}
html.hl-on .hl--cabinet .hlp-cb__card{translate:-112% 0}
html.hl-on .hl--cabinet.hl-in .hlp-cb__holder::before{opacity:1;scale:1;transition:opacity .25s ease .05s,scale .4s var(--hl-spring) .05s}
html.hl-on .hl--cabinet.hl-in .hlp-cb__card{translate:0 0;transition:translate .6s cubic-bezier(.25,1.1,.4,1) .22s}
html.hl-on .hl--cabinet.hl-done .hlp-cb__holder::before{opacity:0;transition:opacity .6s ease}
html.hl-on .hl--cabinet.hl-done .hlp-cb__holder{clip-path:none}
.hlp-cb__folder{position:relative;perspective:900px}
.hlp-cb__cover{position:absolute;inset:-12px -14px;z-index:2;border-radius:6px 6px 3px 3px;pointer-events:none;transform-origin:50% 100%;
  background:linear-gradient(180deg,#efe1b9,#e0c98f);box-shadow:0 0 0 1px rgba(126,90,34,.22),0 12px 20px -14px rgba(60,40,10,.5)}
.hlp-cb__cover b{position:absolute;right:14%;top:-10px;width:30%;height:12px;border-radius:5px 5px 0 0;background:#ead8a8;box-shadow:0 0 0 1px rgba(126,90,34,.22)}
html.hl-on .hl--cabinet.hl-in .hlp-cb__cover{transform:rotateX(-112deg);opacity:0;transition:transform 1s cubic-bezier(.35,.8,.3,1) 2.05s,opacity .3s ease 2.6s}
html.hl-on .hl--cabinet.hl-done .hlp-cb__cover{display:none}
@media (max-width:640px){.hlp-cb__cover{inset:-8px -6px}}

/* ---------- 09 · #privacy · the wax seal ---------- */
.hlp-wx__note{display:inline-block;position:relative;white-space:nowrap;perspective:700px}
.hlp-wx__flap{position:absolute;left:-.1em;right:-.1em;z-index:2;pointer-events:none;backface-visibility:hidden;background:linear-gradient(180deg,#fffdf7,#f1eadc);box-shadow:0 0 0 1px rgba(138,133,120,.25)}
.hlp-wx__flap--t{top:-.06em;height:62%;z-index:3;transform-origin:50% 0;border-radius:3px 3px 1px 1px;box-shadow:0 0 0 1px rgba(138,133,120,.25),0 3px 6px -2px rgba(60,40,10,.28)}
.hlp-wx__flap--b{bottom:-.1em;height:58%;transform-origin:50% 100%;border-radius:1px 1px 3px 3px;background:linear-gradient(0deg,#fffdf7,#ece3d1)}
html.hl-on .hl--wax:not(.hl-in) .hlp-wx__flap,html.hl-on .hl--wax:not(.hl-in) .hlp-wx__note em{opacity:0}
html.hl-on .hl--wax.hl-in .hlp-wx__note em{opacity:1;transition:opacity .3s ease .5s}
html.hl-on .hl--wax.hl-in .hlp-wx__flap{opacity:1}
html.hl-on .hl--wax.hl-in .hlp-wx__flap--t{transform:rotateX(172deg);transition:opacity .3s ease .5s,transform .8s cubic-bezier(.4,.1,.3,1) 2.1s}
html.hl-on .hl--wax.hl-in .hlp-wx__flap--b{transform:rotateX(-172deg);transition:opacity .3s ease .5s,transform .8s cubic-bezier(.4,.1,.3,1) 2.18s}
.hlp-wx__seal{position:absolute;left:50%;top:56%;width:.62em;height:.62em;margin:-.31em 0 0 -.31em;z-index:4;pointer-events:none;opacity:0}
.hlp-wx__seal b{position:absolute;inset:0;border-radius:48% 52% 50% 50% / 53% 47% 53% 47%;
  background:radial-gradient(circle at 38% 34%,#d0574a,#a3342a 45%,#7a2219 80%);box-shadow:inset 0 0 0 .06em rgba(90,20,14,.45),inset 0 0 0 .1em rgba(230,120,100,.22),0 2px 4px rgba(60,10,5,.4)}
.hlp-wx__seal b::after{content:"\00a7";position:absolute;inset:0;display:grid;place-items:center;font:italic 400 .4em/1 var(--serif,Georgia,serif);color:rgba(80,15,10,.6);text-shadow:0 1px 0 rgba(255,160,140,.35)}
.hlp-wx__seal b:first-child{clip-path:polygon(0 0,52% 0,46% 22%,56% 41%,44% 63%,54% 82%,48% 100%,0 100%)}
.hlp-wx__seal b:last-child{clip-path:polygon(52% 0,100% 0,100% 100%,48% 100%,54% 82%,44% 63%,56% 41%,46% 22%)}
html.hl-on .hl--wax.hl-in .hlp-wx__seal{animation:hlpPour .5s cubic-bezier(.3,1.5,.4,1) .85s both,hlpSquash .3s ease 1.45s}
@keyframes hlpPour{0%{opacity:0;scale:0}40%{opacity:1}70%{scale:1.16}100%{opacity:1;scale:1}}
@keyframes hlpSquash{45%{scale:1.1 .9}}
html.hl-on .hl--wax.hl-in .hlp-wx__seal b:first-child{animation:hlpCrackL .75s cubic-bezier(.5,0,.8,.5) 1.95s forwards}
html.hl-on .hl--wax.hl-in .hlp-wx__seal b:last-child{animation:hlpCrackR .75s cubic-bezier(.5,0,.8,.5) 1.95s forwards}
@keyframes hlpCrackL{0%{translate:0 0;rotate:0deg}22%{translate:-2px 0;rotate:-7deg}100%{translate:-.28em .7em;rotate:-34deg;opacity:0}}
@keyframes hlpCrackR{0%{translate:0 0;rotate:0deg}22%{translate:2px 0;rotate:6deg}100%{translate:.28em .76em;rotate:30deg;opacity:0}}
.hlp-wx__signet{position:absolute;left:50%;top:56%;width:.42em;height:.86em;margin:-1.02em 0 0 -.21em;z-index:5;opacity:0;pointer-events:none;
  border-radius:.21em .21em .06em .06em;background:linear-gradient(90deg,#7a5a2a,#e0b86e 45%,#a8762e 70%,#6b4a1c);box-shadow:0 6px 8px -4px rgba(40,25,5,.5)}
.hlp-wx__signet b{position:absolute;left:-.05em;right:-.05em;bottom:0;height:.14em;border-radius:.04em;background:linear-gradient(180deg,#e0b86e,#7a5a2a)}
html.hl-on .hl--wax.hl-in .hlp-wx__signet{animation:hlpSignet .85s cubic-bezier(.45,0,.4,1) 1.1s forwards}
@keyframes hlpSignet{0%{opacity:0;translate:0 -.6em}22%{opacity:1}42%{translate:0 0}62%{translate:0 0;opacity:1}100%{opacity:0;translate:0 -.7em}}
html.hl-on .hl--wax h2 .hl-w{opacity:0;translate:0 .16em}
html.hl-on .hl--wax.hl-in h2 .hl-w{opacity:1;translate:0 0;transition:opacity .4s ease calc(var(--k) * 80ms + .1s),translate .6s var(--hl-soft) calc(var(--k) * 80ms + .1s)}
html.hl-on .hl--wax.hl-done .hlp-wx__flap,html.hl-on .hl--wax.hl-done .hlp-wx__seal,html.hl-on .hl--wax.hl-done .hlp-wx__signet{display:none}
.hlp-wx__ebt{display:inline-block;position:relative}
.hlp-wx__bar{position:absolute;left:-4px;right:-4px;top:-2px;bottom:-2px;border-radius:2px;background:#1f1b16;pointer-events:none;transform-origin:100% 50%}
html.hl-on .hl--wax.hl-in .hlp-wx__bar{animation:hlpPeelBar .7s cubic-bezier(.5,0,.6,1) .25s forwards}
@keyframes hlpPeelBar{0%{clip-path:inset(0 0 0 0);rotate:0deg}30%{rotate:-2deg;translate:0 -1px}100%{clip-path:inset(0 0 0 100%);rotate:-5deg;translate:6px -8px;opacity:0}}
html.hl-on .hl--wax .hlp-wx__lit{--hlp-sx:-20%;-webkit-mask:radial-gradient(circle at var(--hlp-sx) 50%,#000 var(--hlp-sr),transparent calc(var(--hlp-sr) + 40px));mask:radial-gradient(circle at var(--hlp-sx) 50%,#000 var(--hlp-sr),transparent calc(var(--hlp-sr) + 40px))}
html.hl-on .hl--wax.hl-in .hlp-wx__lit{--hlp-sr:640px;--hlp-sx:50%;transition:--hlp-sr 1.4s cubic-bezier(.5,0,.5,1) 2.2s,--hlp-sx .9s ease 2.2s}
html.hl-on .hl--wax.hl-done .hlp-wx__lit{-webkit-mask:none;mask:none}

/* ---------- 10 · #iq-suite-context · the paper dolls ---------- */
@property --hlp-phi{syntax:'<angle>';inherits:true;initial-value:0deg}
@property --hlp-fold{syntax:'<number>';inherits:true;initial-value:0}
html.hl-on .hl--dolls{position:relative}
.hlp-dl{position:absolute;width:calc(var(--dw) * var(--n));height:var(--dh);pointer-events:none;perspective:700px;perspective-origin:10% 40%;transform-style:preserve-3d;--hlp-phi:0deg;--hlp-fold:0}
/* each panel is one doll, hinged on the right edge of the panel before it */
.hlp-dl__p{position:absolute;left:0;top:0;width:var(--dw);height:var(--dh);transform-style:preserve-3d;transform-origin:0 50%;transform:rotateY(calc(var(--sgn) * var(--hlp-phi)))}
.hlp-dl__p .hlp-dl__p{left:var(--dw);transform:translateZ(-.6px) rotateY(calc(var(--sgn) * var(--hlp-phi)))}
.hlp-dl__p > svg{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:visible;filter:brightness(calc(1 - var(--hlp-fold) * var(--sh))) drop-shadow(0 1.5px 1.2px rgba(60,40,10,.22))}
.hlp-dl__p .ol{fill:none;stroke:rgba(126,90,34,.62);stroke-width:2;stroke-linejoin:round}
.hlp-dl__p .pa{fill:#fffdf8}
.hlp-dl__p .dr{fill:color-mix(in srgb,var(--col) 34%,#fffdf8)}
.hlp-dl__p .hr{fill:var(--col);opacity:.85}
/* the crease left where two dolls hold hands */
.hlp-dl__p .hlp-dl__p::before{content:"";position:absolute;left:-.5px;top:30%;height:9%;width:1px;background:linear-gradient(180deg,rgba(126,90,34,.15),rgba(126,90,34,.45),rgba(126,90,34,.15));transform:translateZ(.4px)}
/* the folded blank: stacked fold edges behind, the paper round the doll as two offcuts, the pencil line and the cut */
.hlp-dl__stack,.hlp-dl__off,.hlp-dl__cutline,.hlp-dl__snip{position:absolute;opacity:0;transform:translateZ(2px)}
.hlp-dl__stack{border-radius:2px;background:#f7f2e8;box-shadow:2px 2px 0 #efe8da,4px 4px 0 #e6ddcb,6px 6px 0 #ddd2bc,0 12px 18px -10px rgba(60,40,10,.4)}
.hlp-dl__off{border-radius:2px;background:#fffdf8 linear-gradient(180deg,rgba(255,255,255,.6),rgba(126,90,34,.05));-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-composite:xor;mask-composite:exclude}
.hlp-dl__off--l{clip-path:inset(-2px 50% -2px -2px)}
.hlp-dl__off--r{clip-path:inset(-2px -2px -2px 50%)}
.hlp-dl__cutline{left:0;top:0;width:var(--dw);height:var(--dh)}
.hlp-dl__cutline svg{display:block;width:100%;height:100%;overflow:visible}
.hlp-dl__cutline .pencil{fill:none;stroke:#9a958a;stroke-width:1.1;stroke-dasharray:2.2 2.2}
.hlp-dl__cutline .blade{fill:none;stroke:#5f4218;stroke-width:1.3;stroke-dasharray:100 100;stroke-dashoffset:100}
.hlp-dl__snip{left:0;top:0;offset-rotate:auto;offset-distance:0%;offset-anchor:30% 50%}
.hlp-dl__snip svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 2px 2px rgba(40,25,5,.35))}
.hlp-dl__snip circle{fill:none;stroke:#a8762e;stroke-width:2.2}
.hlp-dl__snip .bl{fill:#cfd2d6;stroke:#7f868f;stroke-width:.6}
html.hl-on .hl--dolls .hlp-dl{opacity:0;--hlp-phi:180deg;--hlp-fold:1}
html.hl-on .hl--dolls.hl-in .hlp-dl{opacity:1;transition:opacity .3s ease .12s;animation:hlpUnfold 1.15s cubic-bezier(.3,.75,.25,1.06) 1.5s both}
@keyframes hlpUnfold{from{--hlp-phi:180deg;--hlp-fold:1}to{--hlp-phi:0deg;--hlp-fold:0}}
html.hl-on .hl--dolls.hl-in .hlp-dl__stack{animation:hlpBlank 1.4s ease .12s both}
@keyframes hlpBlank{0%{opacity:0}12%,72%{opacity:1}100%{opacity:0}}
html.hl-on .hl--dolls.hl-in .hlp-dl__off,html.hl-on .hl--dolls.hl-in .hlp-dl__cutline{animation:hlpBlank 1.3s ease .12s both}
html.hl-on .hl--dolls.hl-in .hlp-dl__off--l{animation:hlpBlankIn .3s ease .12s both,hlpOffL .55s cubic-bezier(.5,0,.8,.6) 1.18s forwards}
html.hl-on .hl--dolls.hl-in .hlp-dl__off--r{animation:hlpBlankIn .3s ease .12s both,hlpOffR .55s cubic-bezier(.5,0,.8,.6) 1.22s forwards}
@keyframes hlpBlankIn{from{opacity:0}to{opacity:1}}
@keyframes hlpOffL{0%{opacity:1;translate:0 0;rotate:0deg}100%{opacity:0;translate:-18% 55%;rotate:-24deg}}
@keyframes hlpOffR{0%{opacity:1;translate:0 0;rotate:0deg}100%{opacity:0;translate:18% 60%;rotate:22deg}}
html.hl-on .hl--dolls.hl-in .hlp-dl__cutline .blade{stroke-dashoffset:0;transition:stroke-dashoffset .8s linear .36s}
html.hl-on .hl--dolls.hl-in .hlp-dl__snip{animation:hlpSnip .8s linear .36s both,hlpSnipFade 1.25s linear .1s both}
html.hl-on .hl--dolls.hl-in .hlp-dl__snip svg{animation:hlpSnap .16s ease-in-out .36s 5 alternate}
@keyframes hlpSnip{from{offset-distance:0%}to{offset-distance:100%}}
@keyframes hlpSnipFade{0%{opacity:0}18%,86%{opacity:1}100%{opacity:0}}
@keyframes hlpSnap{to{scale:1 .72}}
html.hl-on .hl--dolls.hl-done .hlp-dl__stack,html.hl-on .hl--dolls.hl-done .hlp-dl__off,html.hl-on .hl--dolls.hl-done .hlp-dl__cutline,html.hl-on .hl--dolls.hl-done .hlp-dl__snip{display:none}
html.hl-on .hl--dolls h2 .hl-w{opacity:0;translate:var(--dx) 0;rotate:-3deg}
html.hl-on .hl--dolls.hl-in h2 .hl-w{opacity:1;translate:0 0;rotate:0deg;
  transition:opacity .3s ease calc(.45s + var(--k) * 60ms),translate .9s cubic-bezier(.2,.95,.25,1.06) calc(.45s + var(--k) * 60ms),rotate .9s var(--hl-spring) calc(.45s + var(--k) * 60ms)}
html.hl-on .hl--dolls .eyebrow .hl-c{opacity:0;transform:perspective(240px) rotateY(calc(var(--s) * 88deg))}
html.hl-on .hl--dolls.hl-in .eyebrow .hl-c{opacity:1;transform:perspective(240px) rotateY(0deg);transition:opacity .2s ease calc(var(--j) * 22ms),transform .5s var(--hl-spring) calc(var(--j) * 22ms)}
html.hl-on .hl--dolls.hl-done .eyebrow .hl-c{transform:none;transition:none}
html.hl-on .hl--dolls .hlp-dl__cut{clip-path:var(--zz0)}
html.hl-on .hl--dolls.hl-in .hlp-dl__cut{clip-path:var(--zz1);transition:clip-path 1.2s cubic-bezier(.4,.1,.4,1) 2.1s}
html.hl-on .hl--dolls.hl-done .hlp-dl__cut{clip-path:none}

/* ---------- 11 · #faq · the hole punch ---------- */
html.hl-on .hl--holepunch h2{position:relative;isolation:isolate}
.hlp-hp__card{position:absolute;z-index:-1;border-radius:9px;opacity:0;scale:.96;pointer-events:none;background:#f6ecd6;
  box-shadow:inset 0 0 0 1px rgba(168,118,46,.35),inset 0 0 0 5px #f6ecd6,inset 0 0 0 6px rgba(168,118,46,.22),0 16px 26px -18px rgba(60,40,10,.5)}
html.hl-on .hl--holepunch.hl-in .hlp-hp__card{opacity:1;scale:1;transition:opacity .3s ease .05s,scale .5s var(--hl-spring) .05s}
html.hl-on .hl--holepunch.hl-done .hlp-hp__card{opacity:0;transition:opacity .7s ease}
.hlp-hp__hole{position:absolute;top:3px;width:11px;height:11px;margin-left:-5.5px;border-radius:50%;border:1.5px dashed rgba(168,118,46,.45);box-sizing:border-box}
.hlp-hp__hole::before{content:"";position:absolute;inset:-1.5px;border-radius:50%;background:var(--ivory,#f5f2ed);box-shadow:inset 0 1.5px 2px rgba(60,40,10,.45);scale:0}
html.hl-on .hl--holepunch.hl-in .hlp-hp__hole::before{scale:1;transition:scale .08s ease-out var(--t)}
.hlp-hp__hole b{position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-4.5px;border-radius:50%;background:#f0dcae;opacity:0}
.hlp-hp__hole b:last-child{width:6px;height:6px;margin:-3px;background:#e2c27e}
html.hl-on .hl--holepunch.hl-in .hlp-hp__hole b{animation:hlpConfetti 1s cubic-bezier(.4,0,.8,.6) var(--t) forwards}
html.hl-on .hl--holepunch.hl-in .hlp-hp__hole b:last-child{animation-delay:calc(var(--t) + .05s);animation-duration:1.15s}
@keyframes hlpConfetti{0%{opacity:1;translate:0 0;rotate:0deg}100%{opacity:0;translate:var(--sx) 90px;rotate:300deg}}
.hlp-hp__punch{position:absolute;z-index:2;width:26px;height:24px;margin-left:-13px;opacity:0;pointer-events:none;filter:drop-shadow(0 4px 4px rgba(40,25,5,.35));transition:filter .4s ease}
.hlp-hp__punch::before{content:"";position:absolute;left:0;right:0;top:0;height:12px;border-radius:4px 4px 2px 2px;background:linear-gradient(180deg,#efede8,#a9a59b 60%,#8f8c84)}
.hlp-hp__punch b{position:absolute;left:50%;bottom:0;width:10px;height:14px;margin-left:-5px;border-radius:0 0 5px 5px;background:linear-gradient(90deg,#8f8c84,#e8e6e0 50%,#8f8c84)}
html.hl-on .hl--holepunch.hl-done .hlp-hp__punch{filter:drop-shadow(0 4px 4px rgba(40,25,5,.35)) opacity(0)}
html.hl-on .hl--holepunch h2 > .hl-w .hl-c{opacity:0;scale:.5}
html.hl-on .hl--holepunch.hl-in h2 > .hl-w .hl-c{opacity:1;scale:1;transition:opacity .05s linear var(--t),scale .35s cubic-bezier(.3,1.7,.5,1) var(--t)}
html.hl-on .hl--holepunch .hlp-hp__em{display:inline-block;opacity:0}
html.hl-on .hl--holepunch.hl-in .hlp-hp__em{animation:hlpThrough .8s cubic-bezier(.3,.6,.4,1) var(--t) both}
@keyframes hlpThrough{0%{opacity:0;translate:0 -.9em;scale:.35}30%{opacity:1}60%{translate:0 .06em;scale:1.03 .95}80%{translate:0 -.04em;scale:.99 1.02}100%{opacity:1;translate:0 0;scale:1}}
html.hl-on .hl--holepunch .hlp-hp__lede{-webkit-mask:radial-gradient(circle,#000 var(--hlp-hr),transparent calc(var(--hlp-hr) + .6px)) 0 0/16px 16px;mask:radial-gradient(circle,#000 var(--hlp-hr),transparent calc(var(--hlp-hr) + .6px)) 0 0/16px 16px}
html.hl-on .hl--holepunch.hl-in .hlp-hp__lede{--hlp-hr:12px;transition:--hlp-hr 1s cubic-bezier(.5,0,.5,1) var(--lt)}
html.hl-on .hl--holepunch.hl-done .hlp-hp__lede{-webkit-mask:none;mask:none}
html.hl-on .hl--holepunch .eyebrow{opacity:0}
html.hl-on .hl--holepunch.hl-in .eyebrow{animation:hlpClack .5s cubic-bezier(.3,.6,.4,1) .05s both}
@keyframes hlpClack{0%{opacity:0;translate:0 -8px}40%{opacity:1;translate:0 1px}55%{translate:-1px 0}70%{translate:1px 0}100%{opacity:1;translate:0 0}}

/* ---------- 12 · #access · the sign ---------- */
html.hl-on .hl--neon h2{position:relative}
html.hl-on .hl--neon:not(.hl-in) h2 .hl-w{color:transparent;-webkit-text-stroke:1px rgba(255,226,170,.3)}
html.hl-on .hl--neon.hl-in h2 .hl-w{-webkit-text-stroke:1px transparent;animation:hlpFlick 1.05s steps(1,end) var(--nd) backwards,hlpCool 1s ease calc(var(--nd) + 1.05s) forwards}
@keyframes hlpFlick{
  0%,18%,37%,44%{color:transparent;-webkit-text-stroke-color:rgba(255,226,170,.3);text-shadow:none}
  14%,34%,42%,52%,100%{color:#ffe7b5;-webkit-text-stroke-color:transparent;text-shadow:0 0 .05em #ffd27a,0 0 .2em rgba(255,170,70,.75),0 0 .55em rgba(255,140,40,.42)}}
@keyframes hlpCool{0%{color:#ffe7b5;-webkit-text-stroke-color:transparent;text-shadow:0 0 .05em #ffd27a,0 0 .2em rgba(255,170,70,.75),0 0 .55em rgba(255,140,40,.42)}
  100%{text-shadow:0 0 .05em rgba(255,210,122,0),0 0 .2em rgba(255,170,70,0),0 0 .55em rgba(255,140,40,0)}}
html.hl-on .hl--neon.hl-done h2 .hl-w{-webkit-text-stroke:0}
.hlp-ne__lead{position:absolute;width:52px;height:30px;z-index:1;pointer-events:none;transition:opacity .6s ease}
.hlp-ne__lead svg{display:block;width:100%;height:100%;overflow:visible}
.hlp-ne__lead path{fill:none;stroke:#8a7456;stroke-width:2.2;stroke-linecap:round;stroke-dasharray:10 10;stroke-dashoffset:10}
html.hl-on .hl--neon.hl-in .hlp-ne__lead path{stroke-dashoffset:0;transition:stroke-dashoffset .6s ease .3s}
.hlp-ne__lead b{position:absolute;right:-5px;top:2px;width:12px;height:12px;border-radius:50%;opacity:0;scale:.3;background:radial-gradient(circle,#fff6d8,#ffc35a 45%,rgba(255,160,50,0) 70%)}
html.hl-on .hl--neon.hl-in .hlp-ne__lead b{animation:hlpSpark .35s ease-out .88s}
@keyframes hlpSpark{0%{opacity:0;scale:.3}30%{opacity:1;scale:1.9}100%{opacity:0;scale:.6}}
html.hl-on .hl--neon.hl-done .hlp-ne__lead{opacity:0}
html.hl-on .hl--neon .eyebrow{perspective:500px}
.hlp-ne__sign{display:inline-block;position:relative;transform-origin:50% 0;backface-visibility:hidden}
.hlp-ne__str{position:absolute;left:10%;right:10%;bottom:100%;height:14px;border-left:1px solid rgba(250,240,220,.45);border-right:1px solid rgba(250,240,220,.45);pointer-events:none;transition:opacity .6s ease}
html.hl-on .hl--neon .hlp-ne__sign{opacity:0;transform:rotateY(-180deg)}
html.hl-on .hl--neon.hl-in .hlp-ne__sign{animation:hlpSignFlip 1.2s cubic-bezier(.3,.7,.3,1) .1s both}
@keyframes hlpSignFlip{0%{opacity:0;transform:rotateY(-180deg) rotate(0deg)}15%{opacity:1}55%{transform:rotateY(22deg)}75%{transform:rotateY(-8deg) rotate(1.5deg)}100%{opacity:1;transform:rotateY(0deg) rotate(0deg)}}
html.hl-on .hl--neon.hl-done .hlp-ne__str{opacity:0}
html.hl-on .hl--neon .hlp-ne__spill{opacity:.16}
html.hl-on .hl--neon.hl-in .hlp-ne__spill{animation:hlpSpill 1.6s ease 1.55s both}
@keyframes hlpSpill{0%{opacity:.16;text-shadow:0 0 14px rgba(255,190,90,0)}10%{opacity:.7}14%{opacity:.25}22%{opacity:1;text-shadow:0 0 14px rgba(255,190,90,.55)}100%{opacity:1;text-shadow:0 0 14px rgba(255,190,90,0)}}

/* ---------- 13 · #cta · the red tape ---------- */
html.hl-on .hl--redtape h2{position:relative}
html.hl-on .hl--redtape h2 > .hl-w{opacity:0;translate:var(--px) -1.2em;rotate:var(--pr)}
html.hl-on .hl--redtape.hl-in h2 > .hl-w{opacity:1;translate:var(--qx) var(--qy);rotate:var(--qr);transition:opacity .2s ease var(--d),translate .55s cubic-bezier(.5,0,.6,1.25) var(--d),rotate .55s ease var(--d)}
html.hl-on .hl--redtape.hlp-rt--sq h2 > .hl-w{translate:0 0;rotate:0deg;transition:translate .32s cubic-bezier(.3,1.6,.5,1),rotate .32s cubic-bezier(.3,1.6,.5,1)}
html.hl-on .hl--redtape.hlp-rt--sq h2{animation:hlpJog .3s ease}
@keyframes hlpJog{40%{translate:0 -3px}}
html.hl-on .hl--redtape h2 em .hl-w{opacity:0;translate:0 .35em;scale:.86}
html.hl-on .hl--redtape.hl-in h2 em .hl-w{opacity:1;translate:0 0;scale:1;transition:opacity .35s ease var(--d),translate .8s cubic-bezier(.2,.9,.25,1.05) var(--d),scale .8s cubic-bezier(.2,.9,.25,1.05) var(--d)}
.hlp-rt__tape{position:absolute;z-index:2;pointer-events:none}
.hlp-rt__tape svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hlp-rt__tape .band{fill:none;stroke:var(--hlp-pink);stroke-width:6;stroke-linejoin:round;stroke-dasharray:100 100;stroke-dashoffset:100;filter:drop-shadow(0 2px 2px rgba(0,0,0,.35))}
html.hl-on .hl--redtape.hl-in .hlp-rt__tape .band{stroke-dashoffset:0;transition:stroke-dashoffset .75s cubic-bezier(.5,.05,.4,1) 1.6s}
.hlp-rt__bow{position:absolute;right:-.16em;top:-.15em;width:.46em;height:.3em;scale:0;rotate:-10deg;pointer-events:none;filter:drop-shadow(0 2px 2px rgba(0,0,0,.35))}
.hlp-rt__bow b{position:absolute;top:.02em;width:.22em;height:.15em;border:.045em solid var(--hlp-pink);border-radius:50%;box-sizing:border-box}
.hlp-rt__bow b:first-child{left:-.02em;rotate:-24deg}
.hlp-rt__bow b:nth-child(2){right:-.02em;rotate:24deg}
.hlp-rt__bow i{position:absolute;top:.13em;width:.05em;height:.19em;border-radius:1px;background:var(--hlp-pink)}
.hlp-rt__bow i:nth-of-type(1){left:.155em;rotate:24deg}
.hlp-rt__bow i:nth-of-type(2){right:.155em;rotate:-24deg}
.hlp-rt__bow u{position:absolute;left:50%;top:.08em;width:.09em;height:.09em;margin-left:-.045em;border-radius:.025em;background:#d97c87}
html.hl-on .hl--redtape.hl-in .hlp-rt__bow{animation:hlpBow 1.35s cubic-bezier(.3,1.5,.4,1) 2.3s both}
@keyframes hlpBow{0%{scale:0;rotate:-40deg}35%{scale:1.1;rotate:-6deg}50%{scale:1;rotate:-10deg}76%{scale:1;rotate:-10deg}100%{scale:0;rotate:30deg}}
html.hl-on .hl--redtape.hl-in .hlp-rt__tape{animation:hlpOff .5s ease 3.2s forwards}
html.hl-on .hl--redtape.hl-done .hlp-rt__tape{display:none}
html.hl-on .hl--redtape .final__aside{opacity:0;translate:0 26px}
html.hl-on .hl--redtape.hl-in .final__aside{opacity:1;translate:0 0;transition:opacity .4s ease 1.95s,translate .9s cubic-bezier(.2,.9,.25,1.05) 1.95s}
@media (max-width:640px){.hlp-rt__bow{right:-.04em}}

/* ---------- 14 · .iqbrv · the bookshelf ---------- */
html.hl-on .hl--shelf h2{position:relative;isolation:isolate}
html.hl-on .hl--shelf h2 .hl-w{position:relative;isolation:isolate;transform-origin:0 100%}
html.hl-on .hl--shelf h2 .hl-w::before{content:"";position:absolute;inset:.05em -.07em -.03em -.07em;z-index:-1;border-radius:3px 3px 1px 1px;opacity:0;
  background:linear-gradient(180deg,transparent 0 12%,rgba(233,201,138,.6) 12% 14.5%,transparent 14.5% 84%,rgba(233,201,138,.6) 84% 86.5%,transparent 86.5%),linear-gradient(90deg,rgba(0,0,0,.2),rgba(255,255,255,.08) 40%,rgba(0,0,0,.24)),var(--sp);
  box-shadow:0 0 0 1px rgba(0,0,0,.2)}
html.hl-on .hl--shelf.hl-in h2 .hl-w::before{animation:hlpSpine calc(3.05s - var(--d)) ease var(--d) both}
@keyframes hlpSpine{0%{opacity:0}8%,82%{opacity:1}100%{opacity:0}}
html.hl-on .hl--shelf h2 .hl-w{opacity:0}
html.hl-on .hl--shelf.hl-in h2 .hl-w{animation:hlpSlideOn .6s cubic-bezier(.25,.8,.3,1) var(--d) both,hlpUpright .55s cubic-bezier(.3,1.6,.45,1) var(--u) forwards}
@keyframes hlpSlideOn{0%{opacity:0;translate:1.4em 0;rotate:0deg}30%{opacity:1}75%{translate:0 0;rotate:calc(var(--lean) * 1.15)}100%{opacity:1;translate:0 0;rotate:var(--lean)}}
@keyframes hlpUpright{0%{rotate:var(--lean)}100%{rotate:0deg}}
.hlp-sh__plank{position:absolute;height:.1em;min-height:5px;z-index:1;border-radius:1px;pointer-events:none;transform-origin:0 50%;scale:0 1;
  background:linear-gradient(180deg,#c9a463,#8a6532 55%,#5f4218);box-shadow:0 6px 10px -4px rgba(0,0,0,.45);transition:scale .55s var(--hl-soft) calc(.05s + var(--i) * .14s),opacity .6s ease}
html.hl-on .hl--shelf.hl-in .hlp-sh__plank{scale:1 1}
html.hl-on .hl--shelf.hl-done .hlp-sh__plank{opacity:0}
.hlp-sh__end{position:absolute;z-index:2;opacity:0;pointer-events:none;transition:filter .6s ease}
/* a solid wooden bookend, rounded over the top, grain running up it; a block, so it never reads as a letter */
.hlp-sh__end::before{content:"";position:absolute;inset:0;border-radius:3px 60% 2px 2px / 3px 45% 2px 2px;
  background:repeating-linear-gradient(90deg,rgba(0,0,0,0) 0 5px,rgba(60,35,10,.16) 5px 6px),linear-gradient(90deg,#6e4b1c,#a8762e 35%,#c9a463 60%,#8a6532);box-shadow:inset 0 0 0 1px rgba(0,0,0,.25),inset 2px 0 0 rgba(255,235,190,.35),3px 4px 8px rgba(0,0,0,.4)}
.hlp-sh__end::after{content:"";position:absolute;left:-2px;right:-2px;bottom:-2px;height:4px;border-radius:2px;background:#3a2a14;opacity:.55}
html.hl-on .hl--shelf.hl-in .hlp-sh__end{animation:hlpBookend .7s cubic-bezier(.3,.8,.3,1) 1.55s forwards}
@keyframes hlpBookend{0%{opacity:0;translate:2em 0}30%{opacity:1}70%{translate:-.06em 0}85%{translate:.02em 0}100%{opacity:1;translate:0 0}}
html.hl-on .hl--shelf.hl-done .hlp-sh__end{filter:opacity(0)}
html.hl-on .hl--shelf .hlp-sh__gilt{opacity:0}
html.hl-on .hl--shelf.hl-in .hlp-sh__gilt{opacity:1;background:linear-gradient(100deg,currentColor 0 38%,#fff3c9 48%,#e9c98a 52%,currentColor 62%) 120% 0/300% 100% no-repeat;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;transition:opacity .4s ease .05s;animation:hlpGilt 1.3s ease .15s both}
@keyframes hlpGilt{from{background-position:120% 0}to{background-position:-20% 0}}
html.hl-on .hl--shelf.hl-done .hlp-sh__gilt{background:none;-webkit-text-fill-color:currentColor}
.hlp-sh__mark{position:relative}
.hlp-sh__mark::before{content:"";position:absolute;left:-16px;top:-4px;width:4px;height:calc(100% + 14px);border-radius:1px;background:linear-gradient(90deg,#c9a463,#e9c98a);
  clip-path:polygon(0 0,100% 0,100% 100%,50% calc(100% - 6px),0 100%);transform-origin:50% 0;scale:1 0;pointer-events:none}
html.hl-on .hl--shelf .hlp-sh__mark .iqbrv__lede{clip-path:inset(0 -2% 100% -2%)}
html.hl-on .hl--shelf.hl-in .hlp-sh__mark::before{scale:1 1;transition:scale 1s cubic-bezier(.4,.1,.3,1) 2.05s,opacity .6s ease}
html.hl-on .hl--shelf.hl-in .hlp-sh__mark .iqbrv__lede{clip-path:inset(-4% -2% -4% -2%);transition:clip-path 1s cubic-bezier(.4,.1,.3,1) 2.05s}
html.hl-on .hl--shelf.hl-done .hlp-sh__mark .iqbrv__lede{clip-path:none}
html.hl-on .hl--shelf.hl-done .hlp-sh__mark::before{opacity:0}
@media (max-width:640px){.hlp-sh__mark::before{left:-11px;width:3px}}

/* ---------- nothing hides, nothing moves, for people who asked for that (the plumbing also stands down) ---------- */
@media (prefers-reduced-motion:reduce){
  .hl *{animation:none !important;transition:none !important}
}