/* suite-headlines.css · the ReconcileIQ suite page (/suite): one paper mechanism per section headline,
   built by suite-headlines.js from [data-hl] on top of the shared iq-headlines plumbing. Every hidden
   state is gated on html.hl-on, which the engine adds only when motion is allowed, so without JS, for
   crawlers, or with reduced motion nothing here hides anything. Every in-state and done-state rule also
   starts html.hl-on, so it always outranks the start state. Prefix hls; one block per mechanism, in page
   order. */
:root{
  --hls-ink:#1a1a1a;
  --hls-paper:#fffdf9;
  --hls-line:rgba(138,133,120,.3);
  --hls-lift:0 0 0 1px rgba(138,133,120,.22),0 1px 0 rgba(255,255,255,.9) inset,0 14px 24px -14px rgba(20,30,45,.42);
  --hls-spring:cubic-bezier(.2,1.4,.42,1);
  --hls-soft:cubic-bezier(.2,.8,.2,1);
}
.hl i[class^="hls-"],.hl i[class*=" hls-"]{font-style:normal}
.hls-run{display:inline}
@keyframes hlsOut{to{opacity:0}}
@keyframes hlsUp{from{opacity:0;transform:translateY(.28em)}to{opacity:1;transform:none}}

/* ---------- 01 · #trinity · the prism ---------- */
.hl--prism h2{position:relative}
.hls-pr,.hls-pr__prism,.hls-pr__glint{position:absolute;pointer-events:none;z-index:1}
.hls-pr svg{display:block;overflow:visible}
.hls-pr__beam{fill:none;stroke-width:3.2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:.9}
.hls-pr__white{fill:none;stroke:url(#hlsPrG);stroke-width:5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 0 5px rgba(196,87,106,.45))}
.hls-pr__prism{filter:drop-shadow(0 10px 10px rgba(20,30,45,.28)) drop-shadow(0 0 1px rgba(26,26,26,.35))}
.hls-pr__prism b{position:absolute;inset:0;clip-path:polygon(50% 0,100% 100%,0 100%);background:linear-gradient(118deg,#ffffff 0%,#f6f3ee 47%,#e2ddd2 47.5%,#f1ede6 100%)}
.hls-pr__prism b::after{content:"";position:absolute;inset:30% 22% 6% 22%;clip-path:polygon(50% 0,100% 100%,0 100%);background:linear-gradient(100deg,#5b6eae,#4a9080 35%,#a8762e 62%,#c4576a);opacity:0;filter:blur(2px)}
.hls-pr__glint{width:.5em;height:.5em;margin:-.25em 0 0 -.25em;background:#fff;clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%);filter:drop-shadow(0 0 4px rgba(196,87,106,.8));opacity:0}
html.hl-on .hl--prism .eyebrow{opacity:0}
html.hl-on .hl--prism .hls-pr__w,html.hl-on .hl--prism .hls-pr__em{opacity:0}
html.hl-on .hl--prism .hls-pr__prism{opacity:0}
html.hl-on .hl--prism .hls-pr__dek{position:relative;clip-path:inset(0 100% 0 0)}
.hls-pr__dek::after{content:"";position:absolute;top:-4px;bottom:-4px;left:-4px;width:4px;border-radius:2px;background:linear-gradient(180deg,#5b6eae,#c4576a 40%,#4a9080 70%,#a8762e);opacity:0}
html.hl-on .hl--prism.hl-in .eyebrow{animation:hlsPrFocus .75s ease .05s both}
html.hl-on .hl--prism.hl-in .hls-pr__prism{animation:hlsPrIn .7s var(--hls-spring) .18s both,hlsOut .5s ease 2.95s forwards}
html.hl-on .hl--prism.hl-in .hls-pr__prism b::after{animation:hlsPrSpec 1.4s ease 1.25s both}
html.hl-on .hl--prism.hl-in .hls-pr__beam{animation:hlsPrDraw .55s cubic-bezier(.5,0,.2,1) calc(.4s + var(--i) * .16s) both,hlsOut .5s ease 2.7s forwards}
html.hl-on .hl--prism.hl-in .hls-pr__white{animation:hlsPrDraw .38s cubic-bezier(.4,0,.2,1) 1.62s both,hlsOut .55s ease 2.75s forwards}
html.hl-on .hl--prism.hl-in .hls-pr__w{animation:hlsPrWord .9s ease var(--d) both}
html.hl-on .hl--prism.hl-in .hls-pr__em{animation:hlsPrEm .8s var(--hls-soft) 1.92s both}
html.hl-on .hl--prism.hl-in .hls-pr__glint{animation:hlsPrGlint .7s ease 2.12s both}
html.hl-on .hl--prism.hl-in .hls-pr__dek{animation:hlsPrDek .85s cubic-bezier(.5,0,.3,1) 2.3s both}
html.hl-on .hl--prism.hl-in .hls-pr__dek::after{animation:hlsPrBar .85s cubic-bezier(.5,0,.3,1) 2.3s both}
html.hl-on .hl--prism.hl-done .hls-pr,html.hl-on .hl--prism.hl-done .hls-pr__prism,html.hl-on .hl--prism.hl-done .hls-pr__glint{display:none}
html.hl-on .hl--prism.hl-done .hls-pr__dek{clip-path:none;animation:none}
html.hl-on .hl--prism.hl-done .hls-pr__dek::after{display:none}
@keyframes hlsPrFocus{from{opacity:0;filter:blur(6px);letter-spacing:.46em}to{opacity:1;filter:none;letter-spacing:.24em}}
@keyframes hlsPrIn{from{opacity:0;transform:translateY(14px) rotate(-16deg) scale(.45)}to{opacity:1;transform:none}}
@keyframes hlsPrSpec{0%{opacity:0}40%{opacity:.9}100%{opacity:.45}}
@keyframes hlsPrDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes hlsPrWord{0%{opacity:0;color:var(--c);transform:translateY(.18em)}30%{opacity:1;color:var(--c);transform:none}100%{opacity:1;color:var(--hls-ink);transform:none}}
@keyframes hlsPrEm{0%{opacity:0;transform:scale(.55);filter:brightness(2.4) blur(4px)}55%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}100%{opacity:1;transform:none;filter:none}}
@keyframes hlsPrGlint{0%{opacity:0;transform:scale(0) rotate(0)}40%{opacity:1;transform:scale(1.25) rotate(45deg)}100%{opacity:0;transform:scale(.2) rotate(90deg)}}
@keyframes hlsPrDek{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(-12% 0 -12% 0)}}
@keyframes hlsPrBar{0%{opacity:0;transform:translateX(0)}10%{opacity:1}90%{opacity:1;transform:translateX(var(--w,400px))}100%{opacity:0;transform:translateX(var(--w,400px))}}

/* ---------- 02 · #overview-video · the pop-up house ---------- */
.hls-hs{position:absolute;pointer-events:none;z-index:1;perspective:520px;perspective-origin:50% 85%}
.hls-hs i{position:absolute;display:block}
.hls-hs__glow{left:-40%;right:-40%;bottom:-6%;height:70%;background:radial-gradient(50% 60% at 52% 85%,rgba(246,206,110,.55),transparent 70%);opacity:0}
.hls-hs__ground{left:-14%;right:-14%;bottom:0;height:6%;border-radius:2px;background:linear-gradient(180deg,#efe9de,#ddd5c6);box-shadow:0 6px 10px -6px rgba(20,30,45,.4);transform-origin:50% 50%}
.hls-hs__side{display:none}
.hls-hs__front{left:12%;width:76%;bottom:6%;height:50%;background:linear-gradient(180deg,#fffdf9,#f3eee5);background-image:repeating-linear-gradient(180deg,transparent 0 6px,rgba(138,133,120,.13) 6px 7px),linear-gradient(180deg,#fffdf9,#f1ebe1);box-shadow:0 0 0 1px rgba(138,133,120,.32);transform-origin:50% 100%}
.hls-hs__win{left:12%;top:18%;width:26%;height:30%;background:#e6e0d3;box-shadow:0 0 0 1.5px #2c4566 inset;border-radius:1px}
.hls-hs__win::before,.hls-hs__win::after{content:"";position:absolute;background:#2c4566}
.hls-hs__win::before{left:50%;top:0;bottom:0;width:1.5px;margin-left:-.75px}
.hls-hs__win::after{top:50%;left:0;right:0;height:1.5px;margin-top:-.75px}
.hls-hs__hall{right:14%;bottom:0;width:28%;height:66%;background:radial-gradient(80% 70% at 50% 80%,#ffe7a6,#f3c45e);box-shadow:0 0 0 1.5px #1e3450 inset}
.hls-hs__door{right:14%;bottom:0;width:28%;height:66%;transform-origin:0 50%;background:linear-gradient(90deg,#2c4566,#3a5679);box-shadow:0 0 0 1px #1e3450 inset;border-radius:1px 1px 0 0}
.hls-hs__door b{position:absolute;right:14%;top:52%;width:12%;aspect-ratio:1;border-radius:50%;background:#e8c27a}
.hls-hs__roof{left:0;width:100%;bottom:55%;height:40%}
.hls-hs__gable{left:4%;right:4%;top:0;bottom:0;clip-path:polygon(50% 0,100% 100%,0 100%);background:repeating-linear-gradient(180deg,transparent 0 5px,rgba(0,0,0,.08) 5px 6px),linear-gradient(180deg,#d4687a,#a8475a)}
.hls-hs__slope{left:2%;right:2%;bottom:-6%;height:12%;background:#8f3a4b;border-radius:2px;box-shadow:0 3px 5px -2px rgba(20,30,45,.4)}
.hls-hs__chimney{right:18%;top:12%;width:12%;height:40%;background:linear-gradient(90deg,#b8586a,#94404f);z-index:-1}
.hls-hs__chimney::before,.hls-hs__chimney::after{content:"";position:absolute;left:10%;bottom:110%;width:90%;aspect-ratio:1;border-radius:50%;background:rgba(160,155,145,.45);opacity:0}
html.hl-on .hl--house .hls-hs__ground{transform:scaleX(0)}
html.hl-on .hl--house .hls-hs__front{transform:rotateX(-90deg);opacity:0}
html.hl-on .hl--house .hls-hs__roof{opacity:0}
html.hl-on .hl--house .hls-hs__w{opacity:0}
html.hl-on .hl--house .hls-hs__brick{opacity:0}
html.hl-on .hl--house .eyebrow::before,html.hl-on .hl--house .eyebrow::after{transform:scaleX(0)}
html.hl-on .hl--house .hl-w[style*="--d"]{opacity:0}
html.hl-on .hl--house.hl-in .hls-hs__ground{animation:hlsHsGround .45s var(--hls-soft) .1s both}
html.hl-on .hl--house.hl-in .hls-hs__front{animation:hlsHsWall .75s var(--hls-spring) .38s both}
html.hl-on .hl--house.hl-in .hls-hs__roof{animation:hlsHsRoof .7s cubic-bezier(.5,0,.6,1.6) .85s both}
html.hl-on .hl--house.hl-in .hls-hs__door{animation:hlsHsDoor .7s var(--hls-soft) 1.3s both}
html.hl-on .hl--house.hl-in .hls-hs__win{animation:hlsHsWin .6s ease 1.4s both}
html.hl-on .hl--house.hl-in .hls-hs__glow{animation:hlsHsGlow 2.2s ease 1.35s both}
html.hl-on .hl--house.hl-in .hls-hs__chimney::before{animation:hlsHsPuff 1.6s ease-out 1.5s both}
html.hl-on .hl--house.hl-in .hls-hs__chimney::after{animation:hlsHsPuff 1.6s ease-out 1.85s both}
html.hl-on .hl--house.hl-in .hls-hs__w{animation:hlsHsWalk .85s cubic-bezier(.3,.7,.25,1) var(--d) both}
html.hl-on .hl--house.hl-in .hls-hs__brick{animation:hlsHsBrick .34s cubic-bezier(.5,0,.4,1.4) var(--d) both}
html.hl-on .hl--house.hl-in .eyebrow::before{transform-origin:100% 50%;animation:hlsHsRule .5s var(--hls-soft) .55s both}
html.hl-on .hl--house.hl-in .eyebrow::after{transform-origin:0 50%;animation:hlsHsRule .5s var(--hls-soft) .55s both}
html.hl-on .hl--house.hl-in .dek .hl-w{animation:hlsHsWarm 1.1s ease var(--d) both}
html.hl-on .hl--house.hl-done .hls-hs__w,html.hl-on .hl--house.hl-done .hls-hs__brick,html.hl-on .hl--house.hl-done .dek .hl-w{animation:none;opacity:1}
html.hl-on .hl--house.hl-done .eyebrow::before,html.hl-on .hl--house.hl-done .eyebrow::after{animation:none;transform:none}
html.hl-on .hl--house.hl-done .hls-hs__glow{animation:none;opacity:.35}
@keyframes hlsHsGround{from{transform:scaleX(0)}to{transform:none}}
@keyframes hlsHsWall{from{transform:rotateX(-90deg);opacity:1}to{transform:none;opacity:1}}
@keyframes hlsHsRoof{0%{opacity:0;transform:translateY(-120%)}40%{opacity:1}100%{opacity:1;transform:none}}
@keyframes hlsHsDoor{from{transform:none}to{transform:perspective(160px) rotateY(-72deg)}}
@keyframes hlsHsWin{from{background:#e6e0d3}to{background:#f7d886}}
@keyframes hlsHsGlow{0%{opacity:0}35%{opacity:1}100%{opacity:.35}}
@keyframes hlsHsPuff{0%{opacity:0;transform:translateY(0) scale(.4)}25%{opacity:.8}100%{opacity:0;transform:translate(40%,-160%) scale(1.5)}}
@keyframes hlsHsWalk{0%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.12)}14%{opacity:1}55%{transform:translate(calc(var(--dx) * .42),calc(var(--dy) * .42 - .35em)) scale(.66)}100%{opacity:1;transform:none}}
@keyframes hlsHsBrick{0%{opacity:0;transform:translateY(-1.1em)}60%{opacity:1;transform:translateY(0) scale(1.06,.8)}100%{opacity:1;transform:none}}
@keyframes hlsHsRule{from{transform:scaleX(0)}to{transform:none}}
@keyframes hlsHsWarm{0%{opacity:0;color:#b9832d}35%{opacity:1;color:#b9832d}100%{opacity:1;color:var(--muted,#6b6b6b)}}

/* ---------- 03 · #flow · dominoes ---------- */
.hl--dominoes h2{position:relative;perspective:900px;perspective-origin:50% 0}
.hls-dm__tile{position:absolute;z-index:2;pointer-events:none;border-radius:7px;background:linear-gradient(180deg,#fffefb,#f4f0e8);box-shadow:0 0 0 1px rgba(26,26,26,.28),0 1px 0 #fff inset,0 -3px 0 rgba(138,133,120,.18) inset,0 12px 16px -10px rgba(20,30,45,.5);transform-origin:50% 100%}
.hls-dm__half{position:absolute;width:var(--sq);height:var(--sq);top:calc(50% - var(--sq) / 2)}
.hls-dm__half:first-child{left:calc(25% - var(--sq) / 2)}
.hls-dm__half:last-child{left:calc(75% - var(--sq) / 2)}
.hls-dm__tile--tall .hls-dm__half{left:calc(50% - var(--sq) / 2)}
.hls-dm__tile--tall .hls-dm__half:first-child{top:calc(25% - var(--sq) / 2)}
.hls-dm__tile--tall .hls-dm__half:last-child{top:calc(75% - var(--sq) / 2)}
.hls-dm__tile--tall .hls-dm__bar{left:12%;right:12%;top:50%;bottom:auto;width:auto;height:2px;margin:-1px 0 0}
.hls-dm__half b{position:absolute;width:.14em;height:.14em;margin:-.07em 0 0 -.07em;border-radius:50%;background:#1a1a1a;box-shadow:0 1px 0 rgba(255,255,255,.6)}
.hls-dm__bar{position:absolute;left:50%;top:12%;bottom:12%;width:2px;margin-left:-1px;background:rgba(26,26,26,.32)}
.hls-dm__ball{position:absolute;z-index:3;pointer-events:none;border-radius:50%;background:radial-gradient(circle at 34% 30%,#fff 0 12%,#8b9bd4 30%,#3d4d7a 100%);box-shadow:0 4px 5px -2px rgba(20,30,45,.5)}
html.hl-on .hl--dominoes .hls-dm__tile,html.hl-on .hl--dominoes .hls-dm__ball{opacity:0}
html.hl-on .hl--dominoes .hls-dm__w,html.hl-on .hl--dominoes .hls-dm__q{opacity:0}
html.hl-on .hl--dominoes .eyebrow::before,html.hl-on .hl--dominoes .eyebrow::after{transform:scaleX(0)}
html.hl-on .hl--dominoes .hls-dm__dek{opacity:0}
html.hl-on .hl--dominoes.hl-in .hls-dm__tile{animation:hlsDmSet .38s var(--hls-spring) calc(.08s + var(--i) * .07s) both,hlsDmFall .62s cubic-bezier(.55,.06,.85,.4) calc(1.02s + var(--i) * .24s) forwards}
html.hl-on .hl--dominoes.hl-in .hls-dm__ball{animation:hlsDmBall .62s cubic-bezier(.2,.6,.4,1) .4s both,hlsOut .4s ease 1.25s forwards}
html.hl-on .hl--dominoes.hl-in .hls-dm__w{animation:hlsDmWord .35s ease calc(1.22s + var(--i) * .24s) both}
html.hl-on .hl--dominoes.hl-in .hls-dm__q{animation:hlsDmQ .45s var(--hls-soft) calc(.1s + var(--i) * .08s) both}
html.hl-on .hl--dominoes.hl-in .eyebrow::before{transform-origin:100% 50%;animation:hlsHsRule .4s var(--hls-soft) .05s both}
html.hl-on .hl--dominoes.hl-in .eyebrow::after{transform-origin:0 50%;animation:hlsHsRule .4s var(--hls-soft) .4s both}
html.hl-on .hl--dominoes.hl-in .hls-dm__dek{transform-origin:50% 100%;animation:hlsDmStand .7s var(--hls-spring) 2.2s both}
html.hl-on .hl--dominoes.hl-done .hls-dm__tile,html.hl-on .hl--dominoes.hl-done .hls-dm__ball{display:none}
html.hl-on .hl--dominoes.hl-done .hls-dm__w,html.hl-on .hl--dominoes.hl-done .hls-dm__q,html.hl-on .hl--dominoes.hl-done .hls-dm__dek{animation:none;opacity:1;transform:none}
html.hl-on .hl--dominoes.hl-done .eyebrow::before,html.hl-on .hl--dominoes.hl-done .eyebrow::after{animation:none;transform:none}
@keyframes hlsDmSet{from{opacity:0;transform:translateY(-.35em)}to{opacity:1;transform:none}}
@keyframes hlsDmFall{0%{opacity:1;transform:none}14%{opacity:1;transform:rotateX(7deg)}72%{opacity:1;transform:rotateX(-82deg)}86%{opacity:1;transform:rotateX(-88deg)}100%{opacity:0;transform:rotateX(-90deg)}}
@keyframes hlsDmBall{0%{opacity:0;transform:translateX(var(--run)) rotate(-540deg)}20%{opacity:1}82%{transform:translateX(0) rotate(0)}100%{opacity:1;transform:translateX(-6px) rotate(-30deg)}}
@keyframes hlsDmWord{from{opacity:0;transform:translateY(.05em)}to{opacity:1;transform:none}}
@keyframes hlsDmQ{from{opacity:0;transform:translateX(-1.4em)}to{opacity:1;transform:none}}
@keyframes hlsDmStand{from{opacity:0;transform:perspective(500px) rotateX(82deg)}35%{opacity:1}to{opacity:1;transform:none}}

/* ---------- 04 · the workbench · the compass ---------- */
.hls-cp{position:absolute;z-index:2;pointer-events:none}
.hls-cp__disc,.hls-cp__needle{position:absolute;inset:0;display:block}
.hls-cp svg{display:block;width:100%;height:100%;overflow:visible}
.hls-cp__disc{filter:drop-shadow(0 10px 10px rgba(20,30,45,.26))}
.hls-cp__ring{fill:#fffdf9;stroke:rgba(138,133,120,.55);stroke-width:1.4}
.hls-cp__ring2{fill:none;stroke:rgba(138,133,120,.35);stroke-width:.8}
.hls-cp__tick{stroke:rgba(26,26,26,.42);stroke-width:.9}
.hls-cp__star{fill:#fff;stroke:rgba(26,26,26,.38);stroke-width:.8}
.hls-cp__star--b{fill:#f0ebe1}
.hls-cp__shade{fill:rgba(91,110,174,.2)}
.hls-cp__n1{fill:#c4576a;stroke:#9a4455;stroke-width:.6}
.hls-cp__n2{fill:#3d3d3d}
.hls-cp__hub{fill:#e8c27a;stroke:#7e5a22;stroke-width:1}
.hls-cp__needle{transform:rotate(var(--a,0deg));filter:drop-shadow(0 2px 2px rgba(20,30,45,.35))}
.hls-cp__trail{position:absolute;z-index:1;pointer-events:none}
.hls-cp__trail svg{display:block;overflow:visible}
.hls-cp__dots{fill:none;stroke:rgba(26,26,26,.5);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:.1 7}
.hls-cp__draw{fill:none;stroke:#fff;stroke-width:9;stroke-dasharray:1;stroke-dashoffset:1}
.hls-cp__x path{fill:none;stroke:#c4576a;stroke-width:2.4;stroke-linecap:round}
.hls-cp__x{opacity:0;transform-box:fill-box;transform-origin:50% 50%}
html.hl-on .hl--compass .hls-cp__disc,html.hl-on .hl--compass .hls-cp__needle{opacity:0}
html.hl-on .hl--compass .hls-cp__pl,html.hl-on .hl--compass .hls-cp__em{opacity:0}
html.hl-on .hl--compass .eyebrow{color:transparent}
html.hl-on .hl--compass .eyebrow::before{transform:rotate(-90deg);opacity:0}
html.hl-on .hl--compass .hls-cp__dek{clip-path:inset(0 100% 0 0)}
html.hl-on .hl--compass.hl-in .hls-cp__disc{animation:hlsCpDisc .8s var(--hls-spring) .12s both}
html.hl-on .hl--compass.hl-in .hls-cp__needle{animation:hlsCpSwing 1.55s cubic-bezier(.45,.05,.4,1) .5s both}
html.hl-on .hl--compass.hl-in .hls-cp__pl{animation:hlsUp .5s var(--hls-soft) calc(.2s + var(--i) * .08s) both}
html.hl-on .hl--compass.hl-in .hls-cp__em{animation:hlsCpEm .65s var(--hls-soft) calc(1.82s + var(--i) * .07s) both}
html.hl-on .hl--compass.hl-in .eyebrow{animation:hlsCpEb .5s ease .32s both}
html.hl-on .hl--compass.hl-in .eyebrow::before{transform-origin:100% 50%;animation:hlsCpRule .7s var(--hls-spring) 0s both}
html.hl-on .hl--compass.hl-in .hls-cp__draw{animation:hlsPrDraw .75s cubic-bezier(.4,0,.2,1) 2.25s both}
html.hl-on .hl--compass.hl-in .hls-cp__x{animation:hlsCpX .4s var(--hls-spring) 2.85s both}
html.hl-on .hl--compass.hl-in .hls-cp__dek{animation:hlsPrDek .7s cubic-bezier(.4,0,.2,1) 2.82s both}
html.hl-on .hl--compass.hl-done .hls-cp__pl,html.hl-on .hl--compass.hl-done .hls-cp__em{animation:none;opacity:1}
html.hl-on .hl--compass.hl-done .eyebrow,html.hl-on .hl--compass.hl-done .eyebrow::before{animation:none;color:inherit;transform:none;opacity:1}
html.hl-on .hl--compass.hl-done .eyebrow{color:var(--muted,#6b6b6b)}
html.hl-on .hl--compass.hl-done .hls-cp__dek{animation:none;clip-path:none}
html.hl-on .hl--compass.hl-done .hls-cp__trail{animation:hlsOut .6s ease both}
@keyframes hlsCpDisc{from{opacity:0;transform:perspective(420px) rotateX(72deg) rotate(-70deg) scale(.55)}to{opacity:1;transform:none}}
@keyframes hlsCpSwing{0%{opacity:0;transform:rotate(calc(var(--a) - 170deg))}8%{opacity:1}42%{transform:rotate(calc(var(--a) + 30deg))}60%{transform:rotate(calc(var(--a) - 13deg))}75%{transform:rotate(calc(var(--a) + 6deg))}88%{transform:rotate(calc(var(--a) - 2deg))}100%{opacity:1;transform:rotate(var(--a))}}
@keyframes hlsCpEm{from{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.94)}to{opacity:1;transform:none}}
@keyframes hlsCpEb{from{color:transparent}to{color:var(--muted,#6b6b6b)}}
@keyframes hlsCpRule{from{opacity:0;transform:rotate(-90deg)}30%{opacity:1}to{opacity:1;transform:none}}
@keyframes hlsCpX{from{opacity:0;transform:scale(0) rotate(-45deg)}to{opacity:1;transform:none}}

/* ---------- 05 · #pipeline · the loom (dark plate) ---------- */
.hl--loom h2{position:relative}
.hls-lm{position:absolute;z-index:1;pointer-events:none}
.hls-lm__rod{position:absolute;left:-2%;right:-2%;height:8px;border-radius:4px;background:linear-gradient(180deg,#d8ad6c,#a8762e 55%,#7e5a22);box-shadow:0 3px 5px rgba(0,0,0,.5)}
.hls-lm__rod--t{top:-5px}
.hls-lm__rod--b{bottom:-5px}
.hls-lm__warp{position:absolute;top:2px;bottom:2px;width:1.4px;margin-left:-.7px;background:rgba(250,248,245,.42);transform-origin:50% 0}
.hls-lm__shuttle{position:absolute;z-index:3;pointer-events:none;clip-path:polygon(0 50%,14% 4%,86% 4%,100% 50%,86% 96%,14% 96%);background:linear-gradient(180deg,#f0cc8e,#c4934c 45%,#8a6230);filter:drop-shadow(0 3px 3px rgba(0,0,0,.55))}
.hls-lm__shuttle b{position:absolute;left:32%;right:32%;top:30%;bottom:30%;border-radius:3px;background:repeating-linear-gradient(90deg,#f5e6c8 0 2px,#e2c99a 2px 3px);box-shadow:0 0 0 1px rgba(60,40,15,.6)}
.hls-lm__weft{position:absolute;z-index:2;height:2px;margin-top:-1px;border-radius:1px;background:#c4576a;box-shadow:0 0 6px rgba(196,87,106,.6);transform-origin:var(--o,0 50%);transform:scaleX(0);pointer-events:none}
html.hl-on .hl--loom .hls-lm__rod{transform:scaleX(0)}
html.hl-on .hl--loom .hls-lm__warp{transform:scaleY(0)}
html.hl-on .hl--loom .hls-lm__shuttle{opacity:0}
html.hl-on .hl--loom .hls-lm__w,html.hl-on .hl--loom .hls-lm__dw,html.hl-on .hl--loom .hls-lm__c{opacity:0}
html.hl-on .hl--loom .hls-run{perspective:240px}
html.hl-on .hl--loom.hl-in .hls-lm__rod--t{animation:hlsHsRule .5s var(--hls-soft) .1s both}
html.hl-on .hl--loom.hl-in .hls-lm__rod--b{animation:hlsHsRule .5s var(--hls-soft) .22s both}
html.hl-on .hl--loom.hl-in .hls-lm__warp{animation:hlsLmWarp .45s var(--hls-soft) calc(.32s + var(--i) * .045s) both}
html.hl-on .hl--loom.hl-in .hls-lm__shuttle{animation:hlsLmRun var(--dur) cubic-bezier(.45,.05,.55,.95) var(--d) both}
html.hl-on .hl--loom.hl-in .hls-lm__weft{animation:hlsLmWeft calc(var(--dur) * 1.7) linear var(--d) both}
html.hl-on .hl--loom.hl-in .hls-lm__w{animation:hlsLmWord .4s var(--hls-soft) var(--d) both}
html.hl-on .hl--loom.hl-in .hls-lm__dw{animation:hlsLmWord .32s var(--hls-soft) var(--d) both}
html.hl-on .hl--loom.hl-in .hls-lm__c{transform-origin:50% 0;animation:hlsLmChar .38s var(--hls-soft) var(--d) both}
html.hl-on .hl--loom.hl-in .hls-lm{animation:hlsOut .6s ease 2.85s forwards}
html.hl-on .hl--loom.hl-done .hls-lm,html.hl-on .hl--loom.hl-done .hls-lm__shuttle,html.hl-on .hl--loom.hl-done .hls-lm__weft{display:none}
html.hl-on .hl--loom.hl-done .hls-lm__w,html.hl-on .hl--loom.hl-done .hls-lm__dw,html.hl-on .hl--loom.hl-done .hls-lm__c{animation:none;opacity:1}
@keyframes hlsLmWarp{from{transform:scaleY(0)}to{transform:none}}
@keyframes hlsLmRun{0%{opacity:0;transform:translateX(0)}10%{opacity:1}90%{opacity:1}100%{opacity:0;transform:translateX(var(--run))}}
@keyframes hlsLmWeft{0%{transform:scaleX(0);opacity:1}58%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
@keyframes hlsLmWord{from{opacity:0;transform:translateY(.14em) skewX(-10deg);filter:blur(2px)}to{opacity:1;transform:none;filter:none}}
@keyframes hlsLmChar{from{opacity:0;transform:rotateX(-95deg)}to{opacity:1;transform:none}}

/* ---------- 06 · #prepiq-showcase · the cloche ---------- */
.hl--cloche h2{position:relative}
.hls-cl__plate,.hls-cl__dome,.hls-cl__steam,.hls-cl__star{position:absolute;pointer-events:none;z-index:2}
.hls-cl__plate{border-radius:50%;background:linear-gradient(180deg,#ffffff,#d7dbe1 70%,#c1c7cf);box-shadow:0 0 0 1px rgba(110,118,130,.45) inset,0 8px 12px -6px rgba(20,30,45,.45);transform-origin:50% 50%}
.hls-cl__dome{border-radius:50% 50% 6px 6px/100% 100% 6px 6px;background:radial-gradient(120% 95% at 30% 22%,#ffffff 0%,#f1f3f6 16%,#cdd2d9 46%,#9aa2ad 76%,#7f8792 100%);box-shadow:inset 0 -7px 10px rgba(0,0,0,.16),inset 0 2px 0 rgba(255,255,255,.8),0 12px 18px -12px rgba(20,30,45,.55);transform-origin:50% 100%}
.hls-cl__dome i{position:absolute;display:block}
.hls-cl__knob{left:50%;top:-11%;width:11%;aspect-ratio:1;margin-left:-5.5%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#c9ced6 55%,#8b939e);box-shadow:0 2px 2px rgba(0,0,0,.25)}
.hls-cl__knob::after{content:"";position:absolute;left:30%;right:30%;top:85%;height:40%;background:#a5adb8}
.hls-cl__shine{left:16%;top:16%;width:22%;height:46%;border-radius:50%;border-left:3px solid rgba(255,255,255,.85);transform:rotate(18deg)}
.hls-cl__rim{left:-2%;right:-2%;bottom:-3px;height:8px;border-radius:4px;background:linear-gradient(180deg,#b9c0c9,#8a929d)}
.hls-cl__steam b{position:absolute;bottom:0;width:3px;height:70%;border-radius:3px;background:linear-gradient(180deg,transparent,rgba(170,165,155,.55),transparent);opacity:0}
.hls-cl__steam b:nth-child(1){left:20%}
.hls-cl__steam b:nth-child(2){left:50%}
.hls-cl__steam b:nth-child(3){left:78%}
.hls-cl__star{background:#fff;clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%);filter:drop-shadow(0 0 5px rgba(232,194,122,.95));opacity:0}
.hls-cl__bell{position:absolute;right:calc(100% + 34px + 14px + 10px);top:50%;width:2.1em;height:1.7em;margin-top:-1.05em;pointer-events:none;font-size:11px}
.hls-cl__bell i{position:absolute;display:block}
.hls-cl__bell-dome{left:8%;right:8%;bottom:22%;height:62%;border-radius:50% 50% 0 0/100% 100% 0 0;background:radial-gradient(circle at 35% 30%,#fff3cf,#e2b864 45%,#a8762e);box-shadow:inset 0 -2px 2px rgba(0,0,0,.2)}
.hls-cl__bell-btn{left:44%;width:12%;top:0;height:20%;border-radius:2px 2px 0 0;background:#7e5a22}
.hls-cl__bell-base{left:0;right:0;bottom:6%;height:18%;border-radius:2px;background:#3d3d3d}
.hls-cl__ring{left:50%;top:40%;width:2em;height:2em;margin:-1em 0 0 -1em;border-radius:50%;border:1.5px solid rgba(168,118,46,.7);opacity:0}
html.hl-on .hl--cloche .hls-cl__pl,html.hl-on .hl--cloche .hls-cl__em{opacity:0}
html.hl-on .hl--cloche .hls-cl__dome,html.hl-on .hl--cloche .hls-cl__plate{opacity:0}
html.hl-on .hl--cloche .hls-run{color:transparent}
html.hl-on .hl--cloche .eyebrow::before,html.hl-on .hl--cloche .eyebrow::after{transform:scaleX(0)}
html.hl-on .hl--cloche .hls-cl__bell{opacity:0}
html.hl-on .hl--cloche .hls-cl__dek{opacity:0}
html.hl-on .hl--cloche.hl-in .hls-cl__bell{animation:hlsClBellIn .3s ease 0s both,hlsOut .5s ease 1.4s forwards}
html.hl-on .hl--cloche.hl-in .hls-cl__bell-btn{animation:hlsClPress .28s ease .2s both}
html.hl-on .hl--cloche.hl-in .hls-cl__bell-dome{transform-origin:50% 100%;animation:hlsClDing .6s ease .26s both}
html.hl-on .hl--cloche.hl-in .hls-cl__ring{animation:hlsClRing .7s ease-out .3s both}
html.hl-on .hl--cloche.hl-in .hls-cl__ring--2{animation:hlsClRing .7s ease-out .48s both}
html.hl-on .hl--cloche.hl-in .hls-run{animation:hlsCpEb .5s ease .42s both}
html.hl-on .hl--cloche.hl-in .eyebrow::before{transform-origin:100% 50%;animation:hlsHsRule .5s var(--hls-soft) .45s both}
html.hl-on .hl--cloche.hl-in .eyebrow::after{transform-origin:0 50%;animation:hlsHsRule .5s var(--hls-soft) .45s both}
html.hl-on .hl--cloche.hl-in .hls-cl__plate{animation:hlsClPlate .55s var(--hls-soft) .3s both,hlsOut .6s ease 2.75s forwards}
html.hl-on .hl--cloche.hl-in .hls-cl__dome{animation:hlsClDomeIn .6s var(--hls-spring) .42s both,hlsClLift .95s cubic-bezier(.4,0,.2,1) 1.75s forwards}
html.hl-on .hl--cloche.hl-in .hls-cl__pl{animation:hlsUp .55s var(--hls-soft) calc(.75s + var(--i) * .14s) both}
html.hl-on .hl--cloche.hl-in .hls-cl__em{animation:hlsClEm 1s var(--hls-soft) 1.86s both}
html.hl-on .hl--cloche.hl-in .hls-cl__steam b{animation:hlsClSteam 1.5s ease-out 1.95s both}
html.hl-on .hl--cloche.hl-in .hls-cl__steam b:nth-child(2){animation-delay:2.12s}
html.hl-on .hl--cloche.hl-in .hls-cl__steam b:nth-child(3){animation-delay:2.02s}
html.hl-on .hl--cloche.hl-in .hls-cl__star{animation:hlsPrGlint .75s ease 2.2s both}
html.hl-on .hl--cloche.hl-in .hls-cl__dek{animation:hlsClDek .65s var(--hls-soft) 2.4s both}
html.hl-on .hl--cloche.hl-done .hls-cl__dome,html.hl-on .hl--cloche.hl-done .hls-cl__plate,html.hl-on .hl--cloche.hl-done .hls-cl__steam,html.hl-on .hl--cloche.hl-done .hls-cl__star,html.hl-on .hl--cloche.hl-done .hls-cl__bell{display:none}
html.hl-on .hl--cloche.hl-done .hls-cl__pl,html.hl-on .hl--cloche.hl-done .hls-cl__em,html.hl-on .hl--cloche.hl-done .hls-cl__dek{animation:none;opacity:1;clip-path:none}
html.hl-on .hl--cloche.hl-done .hls-run{animation:none;color:inherit}
html.hl-on .hl--cloche.hl-done .eyebrow::before,html.hl-on .hl--cloche.hl-done .eyebrow::after{animation:none;transform:none}
@keyframes hlsClBellIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes hlsClPress{0%,100%{transform:none}45%{transform:translateY(2px)}}
@keyframes hlsClDing{0%,100%{transform:none}20%{transform:rotate(-9deg)}45%{transform:rotate(7deg)}70%{transform:rotate(-3deg)}}
@keyframes hlsClRing{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(1.6)}}
@keyframes hlsClPlate{from{opacity:0;transform:scaleX(.2)}to{opacity:1;transform:none}}
@keyframes hlsClDomeIn{from{opacity:0;transform:translateY(-.5em)}to{opacity:1;transform:none}}
@keyframes hlsClLift{0%{opacity:1;transform:none}22%{opacity:1;transform:translateY(-6%) rotate(-1deg)}100%{opacity:0;transform:translate(26%,-170%) rotate(-14deg)}}
@keyframes hlsClEm{0%{opacity:0;transform:scale(.97);text-shadow:none}35%{opacity:1;text-shadow:0 0 .45em rgba(232,194,122,.9)}100%{opacity:1;transform:none;text-shadow:none}}
@keyframes hlsClSteam{0%{opacity:0;transform:translateY(0) scaleY(.5)}30%{opacity:1}100%{opacity:0;transform:translateY(-110%) translateX(6px) scaleY(1.1) rotate(8deg)}}
@keyframes hlsClDek{from{opacity:0;transform:translateY(-.9em);clip-path:inset(0 0 100% 0)}to{opacity:1;transform:none;clip-path:inset(-15% 0 -15% 0)}}

/* ---------- 07 · #riq · the conductor ---------- */
.hl--baton h2{position:relative}
.hls-bt{position:absolute;height:0;z-index:3;pointer-events:none}
.hls-bt__arm{position:absolute;right:0;top:0;width:100%;height:0;transform-origin:100% 50%}
.hls-bt__stick{position:absolute;right:0;top:-1.6px;width:100%;height:3.2px;border-radius:3px 0 0 3px;background:linear-gradient(90deg,#ffffff,#f3efe7 75%,#e6dfd1);box-shadow:0 0 0 1px rgba(26,26,26,.38),0 8px 10px -6px rgba(20,30,45,.45)}
.hls-bt__cork{position:absolute;right:-4px;top:-5px;width:26px;height:10px;border-radius:6px 3px 3px 6px;background:linear-gradient(180deg,#e2be92,#a87a4b);box-shadow:0 0 0 1px rgba(80,50,20,.4)}
.hls-bt__hair{position:absolute;pointer-events:none}
.hls-bt__hair svg{display:block;overflow:visible}
.hls-bt__hair path{fill:none;stroke:rgba(26,26,26,.5);stroke-width:1.4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
html.hl-on .hl--baton .hls-bt__w,html.hl-on .hl--baton .hls-bt__ci,html.hl-on .hl--baton .hls-bt__dw{opacity:0}
html.hl-on .hl--baton .hls-bt{opacity:0}
html.hl-on .hl--baton .eyebrow::before{transform:scaleX(0)}
html.hl-on .hl--baton.hl-in .hls-bt{animation:hlsBtIn .3s ease 0s both}
html.hl-on .hl--baton.hl-in .hls-bt__arm{animation:hlsBtBar calc(var(--beat) * 4) cubic-bezier(.45,0,.55,1) var(--start) var(--bars) both,hlsBtOff .75s cubic-bezier(.4,0,.3,1) calc(var(--start) + var(--bars) * 4 * var(--beat)) forwards}
html.hl-on .hl--baton.hl-in .eyebrow::before{transform-origin:100% 50%;animation:hlsHsRule .35s ease .08s both}
html.hl-on .hl--baton.hl-in .hls-bt__ci{animation:hlsBtTick .2s ease-out var(--d) both}
html.hl-on .hl--baton.hl-in .hls-bt__w{animation:hlsBtWord .55s cubic-bezier(.2,.7,.2,1) var(--d) both}
html.hl-on .hl--baton.hl-in .hls-bt__acc{animation-name:hlsBtAcc}
html.hl-on .hl--baton.hl-in .hls-bt__dw{animation:hlsBtSwell .55s ease var(--d) both}
html.hl-on .hl--baton.hl-in .hls-bt__hair path{animation:hlsPrDraw .9s ease var(--d,3s) both}
html.hl-on .hl--baton.hl-done .hls-bt{display:none}
html.hl-on .hl--baton.hl-done .hls-bt__w,html.hl-on .hl--baton.hl-done .hls-bt__ci,html.hl-on .hl--baton.hl-done .hls-bt__dw{animation:none;opacity:1}
html.hl-on .hl--baton.hl-done .eyebrow::before{animation:none;transform:none}
html.hl-on .hl--baton.hl-done .hls-bt__hair{animation:hlsOut .6s ease both}
@keyframes hlsBtIn{from{opacity:0}to{opacity:1}}
@keyframes hlsBtBar{0%{transform:translate(0,-8px) rotate(16deg)}12.5%{transform:translate(-4px,14px) rotate(-26deg)}25%{transform:translate(-10px,4px) rotate(-12deg)}37.5%{transform:translate(-36px,12px) rotate(-15deg)}50%{transform:translate(-20px,2px) rotate(-4deg)}62.5%{transform:translate(28px,14px) rotate(-21deg)}75%{transform:translate(16px,0) rotate(-6deg)}87.5%{transform:translate(4px,-3px) rotate(5deg)}100%{transform:translate(0,-8px) rotate(16deg)}}
@keyframes hlsBtOff{0%{opacity:1;transform:translate(0,-8px) rotate(16deg)}35%{opacity:1;transform:translate(-8px,-16px) rotate(34deg)}100%{opacity:0;transform:translate(6px,24px) rotate(-62deg)}}
@keyframes hlsBtTick{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
@keyframes hlsBtWord{0%{opacity:0;transform:translateY(-.22em) scale(1.12)}30%{opacity:1;transform:translateY(.03em) scale(1.03)}100%{opacity:1;transform:none}}
@keyframes hlsBtAcc{0%{opacity:0;transform:translateY(-.3em) scale(1.38)}28%{opacity:1;transform:translateY(.04em) scale(1.07)}100%{opacity:1;transform:none}}
@keyframes hlsBtSwell{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}

/* ---------- 08 · #claude · the tin-can telephone ---------- */
.hl--cans h2{position:relative}
.hls-tc__can,.hls-tc__line,.hls-tc__pulse{position:absolute;pointer-events:none;z-index:2}
.hls-tc__line svg{display:block;overflow:visible}
.hls-tc__str{fill:none;stroke:#a8865a;stroke-width:1.7;stroke-linecap:round}
.hls-tc__can{border-radius:4px;background:repeating-linear-gradient(90deg,transparent 0 5px,rgba(0,0,0,.08) 5px 6px),linear-gradient(180deg,#cfd4da 0%,#f6f7f9 28%,#c3c9d1 62%,#8f96a0 100%);box-shadow:0 8px 12px -8px rgba(20,30,45,.55)}
.hls-tc__can b{position:absolute;left:24%;right:24%;top:-1px;bottom:-1px;background:#c4576a;box-shadow:0 0 0 1px rgba(0,0,0,.08) inset}
.hls-tc__can--b b{background:#5b6eae}
.hls-tc__can i{position:absolute;top:0;bottom:0;width:26%;border-radius:50%;background:radial-gradient(ellipse at 50% 50%,#3b3f45 0 45%,#9aa1aa 62%,#e7e9ec 80%,#b7bdc5 100%)}
.hls-tc__can--b i{right:-13%}
.hls-tc__can--a i{left:-13%}
.hls-tc__pulse{width:9px;height:9px;margin-top:-1px;border-radius:50%;background:#c4576a;box-shadow:0 0 8px 2px rgba(196,87,106,.6);opacity:0}
html.hl-on .hl--cans .hls-tc__can,html.hl-on .hl--cans .hls-tc__line{opacity:0}
html.hl-on .hl--cans .hls-tc__w,html.hl-on .hl--cans .hls-tc__dw{opacity:0}
html.hl-on .hl--cans .hls-tc__eb{opacity:0}
html.hl-on .hl--cans.hl-in .hls-tc__eb{animation:hlsTcBuzz .8s ease .08s both}
html.hl-on .hl--cans.hl-in .hls-tc__can--b{animation:hlsTcCanB .55s var(--hls-spring) .15s both,hlsOut .4s ease 2.35s forwards}
html.hl-on .hl--cans.hl-in .hls-tc__can--a{animation:hlsTcCanA .55s var(--hls-spring) .28s both,hlsOut .4s ease 2.4s forwards}
html.hl-on .hl--cans.hl-in .hls-tc__line{animation:hlsBtIn .3s ease .45s both,hlsOut .4s ease 2.3s forwards}
html.hl-on .hl--cans.hl-in .hls-tc__pulse{animation:hlsTcPulse .5s cubic-bezier(.4,0,.6,1) 1.18s both}
html.hl-on .hl--cans.hl-in .hls-tc__w{animation:hlsTcRun .95s cubic-bezier(.4,0,.2,1) var(--d) both}
html.hl-on .hl--cans.hl-in .hls-tc__dw{animation:hlsTcRipple .55s var(--hls-soft) var(--d) both}
html.hl-on .hl--cans.hl-done .hls-tc__can,html.hl-on .hl--cans.hl-done .hls-tc__line,html.hl-on .hl--cans.hl-done .hls-tc__pulse{display:none}
html.hl-on .hl--cans.hl-done .hls-tc__w,html.hl-on .hl--cans.hl-done .hls-tc__dw,html.hl-on .hl--cans.hl-done .hls-tc__eb{animation:none;opacity:1;transform:none}
@keyframes hlsTcBuzz{0%{opacity:0;transform:none}10%{opacity:1;transform:translateX(-2.2px)}20%{transform:translateX(2px)}30%{transform:translateX(-1.6px)}40%{transform:translateX(1.3px)}55%{transform:translateX(-.8px)}70%{transform:translateX(.5px)}85%{transform:translateX(-.2px)}100%{opacity:1;transform:none}}
@keyframes hlsTcCanB{from{opacity:0;transform:translateX(-24px) rotate(-12deg)}to{opacity:1;transform:none}}
@keyframes hlsTcCanA{from{opacity:0;transform:translateX(24px) rotate(12deg)}to{opacity:1;transform:none}}
@keyframes hlsTcPulse{0%{opacity:0;transform:translateX(0)}15%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translateX(var(--run))}}
@keyframes hlsTcRun{0%{opacity:0;transform:translate(var(--sx),var(--sy)) scale(.38)}10%{opacity:1;transform:translate(var(--sx),var(--sy)) scale(.5)}62%{opacity:1;transform:translate(0,var(--sy)) scale(.72)}84%{transform:translateY(-.06em)}100%{opacity:1;transform:none}}
@keyframes hlsTcRipple{0%{opacity:0;transform:translateY(.55em)}60%{opacity:1;transform:translateY(-.12em)}100%{opacity:1;transform:none}}

/* ---------- 09 · #speed · the balance ---------- */
.hls-sc{position:absolute;height:0;z-index:1;pointer-events:none}
.hls-sc i{position:absolute;display:block}
.hls-sc__hook{left:50%;bottom:0;width:2px;margin-left:-1px;height:var(--hook,16px);background:#8a7a5c;transform-origin:50% 100%}
.hls-sc__hook::before{content:"";position:absolute;left:50%;top:-6px;width:8px;height:8px;margin-left:-4px;border-radius:50%;border:2px solid #8a7a5c;box-sizing:border-box}
.hls-sc__beam{left:0;right:0;top:-2px;height:4px;border-radius:2px;background:linear-gradient(180deg,#e2be7a,#a8762e);box-shadow:0 2px 3px rgba(20,30,45,.3);transform-origin:50% 50%}
.hls-sc__pin{left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff3cf,#a8762e);box-shadow:0 0 0 1px #7e5a22}
.hls-sc__hang{top:2px;width:0;height:0;transform-origin:0 0}
.hls-sc__hang--l{left:0}
.hls-sc__hang--r{right:0}
.hls-sc__cords{left:calc(var(--pan) * -.5);width:var(--pan);top:0;height:var(--drop);background:linear-gradient(to bottom right,transparent calc(50% - .7px),#8a7a5c calc(50% - .7px),#8a7a5c calc(50% + .7px),transparent calc(50% + .7px)) left/50% 100% no-repeat,linear-gradient(to bottom left,transparent calc(50% - .7px),#8a7a5c calc(50% - .7px),#8a7a5c calc(50% + .7px),transparent calc(50% + .7px)) right/50% 100% no-repeat}
.hls-sc__pan{left:calc(var(--pan) * -.5);top:var(--drop);width:var(--pan);height:calc(var(--pan) * .24);border-radius:0 0 50% 50%/0 0 100% 100%;background:linear-gradient(180deg,#f0d394,#b88a3c);box-shadow:0 0 0 1px rgba(126,90,34,.55) inset,0 6px 8px -6px rgba(20,30,45,.5)}
.hls-sc__slips{left:16%;right:16%;bottom:70%;height:calc(var(--pan) * .3)}
.hls-sc__slips b{position:absolute;left:0;right:0;height:22%;border-radius:1px;background:#fffdf9;box-shadow:0 0 0 1px rgba(138,133,120,.4)}
.hls-sc__slips b:nth-child(1){bottom:0;transform:rotate(-3deg)}
.hls-sc__slips b:nth-child(2){bottom:28%;transform:rotate(4deg)}
.hls-sc__slips b:nth-child(3){bottom:56%;transform:rotate(-2deg)}
.hls-sc__weight{left:24%;right:24%;bottom:70%;height:calc(var(--pan) * .42);clip-path:polygon(18% 18%,82% 18%,100% 100%,0 100%);background:linear-gradient(180deg,#6b6157,#3d3730)}
.hls-sc__weight::before{content:"";position:absolute;left:38%;right:38%;top:0;height:26%;border-radius:40% 40% 0 0;background:#3d3730}
html.hl-on .hl--scales .hls-sc{opacity:0}
html.hl-on .hl--scales .hls-sc__slips b,html.hl-on .hl--scales .hls-sc__weight{opacity:0}
html.hl-on .hl--scales .hls-sc__lt,html.hl-on .hl--scales .hls-sc__hv,html.hl-on .hl--scales .hls-sc__dw{opacity:0}
html.hl-on .hl--scales .hls-sc__eb{opacity:0}
html.hl-on .hl--scales.hl-in .hls-sc__eb{transform-origin:50% 0;animation:hlsScRock 1.05s ease .05s both}
html.hl-on .hl--scales.hl-in .hls-sc{animation:hlsBtIn .45s ease .25s both}
html.hl-on .hl--scales.hl-in .hls-sc__slips b{animation:hlsScSlip .45s cubic-bezier(.5,0,.6,1.3) .62s both}
html.hl-on .hl--scales.hl-in .hls-sc__slips b:nth-child(2){animation-delay:.72s}
html.hl-on .hl--scales.hl-in .hls-sc__slips b:nth-child(3){animation-delay:.82s}
html.hl-on .hl--scales.hl-in .hls-sc__weight{animation:hlsScWeight .5s cubic-bezier(.55,0,.75,.4) 1.36s both}
html.hl-on .hl--scales.hl-in .hls-sc__beam{animation:hlsScTilt 2.3s ease .62s both}
html.hl-on .hl--scales.hl-in .hls-sc__hang{animation:hlsScHang 2.3s ease .62s both}
html.hl-on .hl--scales.hl-in .hls-sc__lt{animation:hlsScLight .7s var(--hls-soft) var(--d) both}
html.hl-on .hl--scales.hl-in .hls-sc__hv{animation:hlsScHeavy .75s cubic-bezier(.3,.6,.2,1) var(--d) both}
html.hl-on .hl--scales.hl-in .hls-sc__dw{animation:hlsScLevel .6s var(--hls-soft) var(--d) both}
html.hl-on .hl--scales.hl-done .hls-sc--leave{animation:hlsOut .6s ease both}
html.hl-on .hl--scales.hl-done .hls-sc__lt,html.hl-on .hl--scales.hl-done .hls-sc__hv,html.hl-on .hl--scales.hl-done .hls-sc__dw,html.hl-on .hl--scales.hl-done .hls-sc__eb{animation:none;opacity:1;transform:none}
@keyframes hlsScRock{0%{opacity:0;rotate:-5deg}18%{opacity:1}34%{rotate:4deg}54%{rotate:-2.2deg}72%{rotate:1.1deg}86%{rotate:-.4deg}100%{opacity:1;rotate:0deg}}
@keyframes hlsScSlip{from{opacity:0;translate:0 -3.4em;rotate:-24deg}to{opacity:1}}
@keyframes hlsScWeight{from{opacity:0;transform:translateY(-4em)}70%{opacity:1}to{opacity:1;transform:none}}
@keyframes hlsScTilt{0%{rotate:0deg}14%{rotate:calc(var(--tilt,8deg) * -.325)}30%{rotate:calc(var(--tilt,8deg) * -.075)}38%{rotate:0deg}52%{rotate:calc(var(--tilt,8deg) * 1.25)}63%{rotate:calc(var(--tilt,8deg) * .725)}74%{rotate:calc(var(--tilt,8deg) * 1.075)}86%{rotate:calc(var(--tilt,8deg) * .925)}100%{rotate:var(--tilt,8deg)}}
@keyframes hlsScHang{0%{rotate:0deg}14%{rotate:calc(var(--tilt,8deg) * .325)}30%{rotate:calc(var(--tilt,8deg) * .075)}38%{rotate:0deg}52%{rotate:calc(var(--tilt,8deg) * -1.25)}63%{rotate:calc(var(--tilt,8deg) * -.725)}74%{rotate:calc(var(--tilt,8deg) * -1.075)}86%{rotate:calc(var(--tilt,8deg) * -.925)}100%{rotate:calc(var(--tilt,8deg) * -1)}}
@keyframes hlsScLight{from{opacity:0;transform:translateY(.5em)}to{opacity:1;transform:none}}
@keyframes hlsScHeavy{0%{opacity:0;transform:translateY(-.75em)}55%{opacity:1;transform:translateY(.09em)}76%{transform:translateY(-.03em)}100%{opacity:1;transform:none}}
@keyframes hlsScLevel{from{opacity:0;transform:translateY(var(--y0))}to{opacity:1;transform:none}}

/* ---------- 10 · the ecosystem line · pins and thread ---------- */
.hl--thread h3{position:relative}
.hls-th__cork,.hls-th__pin,.hls-th__thr{position:absolute;pointer-events:none}
.hls-th__cork{z-index:0;border-radius:3px;background:radial-gradient(circle at 20% 30%,rgba(92,58,26,.38) 0 1px,transparent 1.6px) 0 0/7px 6px,radial-gradient(circle at 70% 64%,rgba(255,236,204,.4) 0 1px,transparent 1.6px) 0 0/9px 7px,linear-gradient(180deg,#d6ab79,#b98a57);box-shadow:inset 0 1px 2px rgba(0,0,0,.25),0 1px 0 rgba(255,255,255,.6);transform-origin:50% 50%}
.hls-th__thr{z-index:1}
.hls-th__thr svg{display:block;overflow:visible}
.hls-th__thr path{fill:none;stroke:#b8404f;stroke-width:1.7;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.hls-th__pin{z-index:2}
.hls-th__pin b{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.95) 0 14%,transparent 16%),var(--c);box-shadow:0 0 0 1px rgba(0,0,0,.15) inset,0 4px 4px -1px rgba(20,30,45,.45)}
html.hl-on .hl--thread .hls-th__cork{transform:scaleX(0)}
html.hl-on .hl--thread .hls-th__pin{opacity:0}
html.hl-on .hl--thread .hls-th__w{opacity:0}
html.hl-on .hl--thread .hls-th__eb{color:transparent}
html.hl-on .hl--thread .hls-th__eb::before,html.hl-on .hl--thread .hls-th__eb::after{transform:scaleX(0)}
html.hl-on .hl--thread.hl-in .hls-th__cork{animation:hlsHsRule .5s var(--hls-soft) var(--d) both}
html.hl-on .hl--thread.hl-in .hls-th__pin{animation:hlsThPin .42s var(--hls-spring) var(--d) both}
html.hl-on .hl--thread.hl-in .hls-th__w{transform-origin:50% 0;animation:hlsThHang .6s var(--hls-soft) var(--d) both}
html.hl-on .hl--thread.hl-in .hls-th__thr path{animation:hlsPrDraw 1s cubic-bezier(.4,0,.2,1) var(--d) both}
html.hl-on .hl--thread.hl-in .hls-th__eb{animation:hlsCpEb .5s ease .25s both}
html.hl-on .hl--thread.hl-in .hls-th__eb::before{transform-origin:100% 50%;animation:hlsHsRule .55s var(--hls-soft) .05s both}
html.hl-on .hl--thread.hl-in .hls-th__eb::after{transform-origin:0 50%;animation:hlsHsRule .55s var(--hls-soft) .05s both}
html.hl-on .hl--thread.hl-done .hls-th__cork,html.hl-on .hl--thread.hl-done .hls-th__pin,html.hl-on .hl--thread.hl-done .hls-th__thr{animation:hlsOut .6s ease both}
html.hl-on .hl--thread.hl-done .hls-th__w{animation:none;opacity:1}
html.hl-on .hl--thread.hl-done .hls-th__eb{animation:none;color:var(--muted,#6b6b6b)}
html.hl-on .hl--thread.hl-done .hls-th__eb::before,html.hl-on .hl--thread.hl-done .hls-th__eb::after{animation:none;transform:none}
@keyframes hlsThPin{0%{opacity:0;transform:translateY(-1.1em) scale(1.6)}65%{opacity:1;transform:translateY(0) scale(.86)}100%{opacity:1;transform:none}}
@keyframes hlsThHang{0%{opacity:0;transform:translateY(-.45em) rotate(-5deg)}60%{opacity:1;transform:translateY(.04em) rotate(1.6deg)}100%{opacity:1;transform:none}}

/* ---------- 11 · #practices · spinning plates (dark plate) ---------- */
.hl--plates h2{position:relative}
.hls-sp__rig{position:absolute;height:0;z-index:2;pointer-events:none;transform-origin:50% 0}
.hls-sp__pole{position:absolute;left:50%;top:calc(var(--ph) * .5);width:2px;height:var(--pole);margin-left:-1px;background:linear-gradient(180deg,rgba(250,248,245,.8),rgba(250,248,245,.08));transform-origin:50% 100%}
.hls-sp__plate{position:absolute;left:0;right:0;top:0;height:var(--ph);border-radius:50%;background:radial-gradient(ellipse at 50% 40%,#ffffff 0 32%,#ece6db 58%,#cbbfac 100%);box-shadow:0 0 0 1.5px #a8762e inset,0 5px 8px -4px rgba(0,0,0,.65);overflow:hidden}
.hls-sp__plate b{position:absolute;inset:0;border-radius:50%;background:linear-gradient(90deg,transparent 0 38%,rgba(255,255,255,.95) 47%,transparent 56% 100%) 0 0/220% 100%;animation:hlsSpSpin .42s linear infinite;animation-play-state:paused}
html.hl-on .hl--plates .hls-sp__rig{opacity:0}
html.hl-on .hl--plates .hls-sp__w{opacity:0}
html.hl-on .hl--plates .hls-sp__ball{opacity:0}
html.hl-on .hl--plates .eyebrow::before{transform:scaleX(0)}
html.hl-on .hl--plates .hls-sp__dek{opacity:0}
html.hl-on .hl--plates.hl-in .hls-sp__rig{animation:hlsSpRig .55s var(--hls-spring) var(--d) both,hlsOut .55s ease 2.8s forwards}
html.hl-on .hl--plates.hl-in .hls-sp__rig--wob{animation:hlsSpRig .55s var(--hls-spring) var(--d) both,hlsSpWob 1.2s ease 1.35s both,hlsOut .55s ease 2.8s forwards}
html.hl-on .hl--plates.hl-in .hls-sp__plate b{animation-play-state:running}
html.hl-on .hl--plates.hl-in .hls-sp__pole{animation:hlsSpPole .45s var(--hls-soft) calc(var(--d) - .12s) both,hlsSpDown .45s ease-in 2.55s forwards}
html.hl-on .hl--plates.hl-in .hls-sp__w{transform-origin:50% 100%;animation:hlsSpRide .55s var(--hls-spring) var(--d) both}
html.hl-on .hl--plates.hl-in .hls-sp__w--wob{animation:hlsSpRide .55s var(--hls-spring) var(--d) both,hlsSpWobW 1.2s ease 1.35s both}
html.hl-on .hl--plates.hl-in .hls-sp__ball{animation:hlsSpToss .5s cubic-bezier(.3,.6,.4,1) var(--d) both}
html.hl-on .hl--plates.hl-in .eyebrow::before{transform-origin:100% 50%;animation:hlsHsRule .4s ease .05s both}
html.hl-on .hl--plates.hl-in .hls-sp__dek{animation:hlsScLight .6s var(--hls-soft) 2.75s both}
html.hl-on .hl--plates.hl-done .hls-sp__rig{display:none}
html.hl-on .hl--plates.hl-done .hls-sp__w,html.hl-on .hl--plates.hl-done .hls-sp__ball,html.hl-on .hl--plates.hl-done .hls-sp__dek{animation:none;opacity:1;transform:none;rotate:none}
html.hl-on .hl--plates.hl-done .eyebrow::before{animation:none;transform:none}
@keyframes hlsSpSpin{from{background-position:0 0}to{background-position:-220% 0}}
@keyframes hlsSpRig{from{opacity:0;transform:translateY(var(--pole)) scale(.4)}to{opacity:1;transform:none}}
@keyframes hlsSpPole{from{transform:scaleY(0)}to{transform:none}}
@keyframes hlsSpDown{from{transform:none}to{transform:scaleY(0)}}
@keyframes hlsSpRide{from{opacity:0;transform:translateY(var(--pole,60px)) scale(.45)}to{opacity:1;transform:none}}
@keyframes hlsSpWob{0%{rotate:0deg}14%{rotate:8deg}28%{rotate:-7deg}42%{rotate:5deg}58%{rotate:-3deg}74%{rotate:1.4deg}100%{rotate:0deg}}
@keyframes hlsSpWobW{0%{rotate:0deg}14%{rotate:7deg}28%{rotate:-6deg}42%{rotate:4deg}58%{rotate:-2.4deg}74%{rotate:1deg}100%{rotate:0deg}}
@keyframes hlsSpToss{0%{opacity:0;transform:translate(-1.4em,.8em)}50%{opacity:1;transform:translate(-.6em,var(--h))}100%{opacity:1;transform:none}}

/* ---------- 12 · #prices · the seedling ---------- */
.hl--sprout h2{position:relative}
.hls-sd__pot,.hls-sd__vine{position:absolute;pointer-events:none;z-index:2}
.hls-sd__pot i{position:absolute;display:block}
.hls-sd__body{left:0;right:0;bottom:0;height:62%;clip-path:polygon(0 0,100% 0,100% 18%,90% 18%,80% 100%,20% 100%,10% 18%,0 18%);background:linear-gradient(90deg,#b8613f,#d98a63 40%,#b4593a);filter:drop-shadow(0 6px 6px rgba(20,30,45,.3))}
.hls-sd__body b{position:absolute;left:12%;right:12%;top:2%;height:12%;border-radius:50%;background:#4a3524}
.hls-sd__seed{left:44%;width:12%;height:9%;bottom:56%;border-radius:50%;background:#7e5a22;opacity:0}
.hls-sd__shoot{left:50%;bottom:58%;width:3px;height:44%;margin-left:-1.5px;border-radius:2px;background:#3f7f6f;transform-origin:50% 100%}
.hls-sd__leaf{top:-2%;width:420%;height:22%;min-width:12px;min-height:7px;border-radius:0 100% 0 100%;background:linear-gradient(135deg,#7bbba6,#3f7f6f);box-shadow:0 1px 1px rgba(0,0,0,.18)}
.hls-sd__leaf--l{right:50%;transform-origin:100% 100%}
.hls-sd__leaf--r{left:50%;transform-origin:0 100%;border-radius:100% 0 100% 0}
.hls-sd__vine{height:2.4px;margin-top:-1.2px;border-radius:2px;background:#3f7f6f;transform-origin:0 50%}
.hls-sd__vl{position:absolute;bottom:0;width:11px;height:7px;border-radius:0 100% 0 100%;background:linear-gradient(135deg,#7bbba6,#3f7f6f);transform-origin:0 100%}
html.hl-on .hl--sprout .hls-sd__pot{opacity:0}
html.hl-on .hl--sprout .hls-sd__shoot{transform:scaleY(0)}
html.hl-on .hl--sprout .hls-sd__leaf{transform:scale(0)}
html.hl-on .hl--sprout .hls-sd__vine{transform:scaleX(0)}
html.hl-on .hl--sprout .hls-sd__vl{transform:scale(0)}
html.hl-on .hl--sprout .hls-sd__pl,html.hl-on .hl--sprout .hls-sd__em{opacity:0}
html.hl-on .hl--sprout .hls-sd__eb{opacity:0}
html.hl-on .hl--sprout .hls-sd__dek{clip-path:inset(100% 0 0 0)}
html.hl-on .hl--sprout.hl-in .hls-sd__eb{transform-origin:0 100%;animation:hlsSdLabel .6s var(--hls-spring) .02s both}
html.hl-on .hl--sprout.hl-in .hls-sd__pl{animation:hlsSdPlant .5s var(--hls-soft) var(--d) both}
html.hl-on .hl--sprout.hl-in .hls-sd__pot{animation:hlsSdPot .55s var(--hls-spring) .42s both}
html.hl-on .hl--sprout.hl-in .hls-sd__seed{animation:hlsSdSeed .45s cubic-bezier(.5,0,.7,.5) .72s both}
html.hl-on .hl--sprout.hl-in .hls-sd__shoot{animation:hlsSdShoot .5s var(--hls-soft) .98s both}
html.hl-on .hl--sprout.hl-in .hls-sd__leaf--l{animation:hlsSdLeafL .55s var(--hls-spring) 1.22s both}
html.hl-on .hl--sprout.hl-in .hls-sd__leaf--r{animation:hlsSdLeafR .55s var(--hls-spring) 1.3s both}
html.hl-on .hl--sprout.hl-in .hls-sd__vine{animation:hlsSdVine var(--dur) cubic-bezier(.4,0,.5,1) var(--d) both}
html.hl-on .hl--sprout.hl-in .hls-sd__vl{animation:hlsSdVl .45s var(--hls-spring) var(--d) both}
html.hl-on .hl--sprout.hl-in .hls-sd__em{transform-origin:50% 100%;animation:hlsSdGrow .6s var(--hls-spring) var(--d) both}
html.hl-on .hl--sprout.hl-in .hls-sd__dek{animation:hlsSdDek .75s var(--hls-soft) var(--d) both}
html.hl-on .hl--sprout.hl-done .hls-sd__vine{animation:hlsOut .6s ease both}
html.hl-on .hl--sprout.hl-done .hls-sd__pl,html.hl-on .hl--sprout.hl-done .hls-sd__em,html.hl-on .hl--sprout.hl-done .hls-sd__eb{animation:none;opacity:1;transform:none}
html.hl-on .hl--sprout.hl-done .hls-sd__dek{animation:none;clip-path:none}
@keyframes hlsSdLabel{0%{opacity:0;transform:translateY(.9em) rotate(-7deg)}70%{opacity:1;transform:translateY(-.08em) rotate(1deg)}100%{opacity:1;transform:none}}
@keyframes hlsSdPlant{from{opacity:0;transform:translateY(-.3em)}to{opacity:1;transform:none}}
@keyframes hlsSdPot{from{opacity:0;transform:translateY(.5em) scale(.6)}to{opacity:1;transform:none}}
@keyframes hlsSdSeed{0%{opacity:0;transform:translateY(-3.2em)}20%{opacity:1}85%{opacity:1;transform:translateY(0) scale(1.2,.8)}100%{opacity:0;transform:translateY(.15em)}}
@keyframes hlsSdShoot{from{transform:scaleY(0)}to{transform:none}}
@keyframes hlsSdLeafL{from{transform:scale(0) rotate(30deg)}to{transform:rotate(-12deg)}}
@keyframes hlsSdLeafR{from{transform:scale(0) rotate(-30deg)}to{transform:rotate(10deg)}}
@keyframes hlsSdVine{from{transform:scaleX(0)}to{transform:none}}
@keyframes hlsSdVl{from{transform:scale(0) rotate(calc(var(--s) * 50deg))}to{transform:rotate(calc(var(--s) * -28deg))}}
@keyframes hlsSdGrow{0%{opacity:0;transform:scale(.6,.08)}55%{opacity:1;transform:scale(1,1.1) rotate(-1.5deg)}80%{transform:scale(1,.97) rotate(.6deg)}100%{opacity:1;transform:none}}
@keyframes hlsSdDek{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(-12% 0 -12% 0)}}

/* ---------- 13 · #faq · the typewriter ---------- */
.hl--typewriter .eyebrow,.hl--typewriter h2,.hl--typewriter>p{position:relative;z-index:1}
.hls-tw__sheet{position:absolute;z-index:0;pointer-events:none;border-radius:2px;background:#fffefb;box-shadow:0 0 0 1px rgba(138,133,120,.2),0 22px 30px -24px rgba(20,30,45,.5)}
.hls-tw__platen{position:absolute;z-index:2;pointer-events:none;border-radius:999px;background:linear-gradient(180deg,#4a4a4a,#141414 55%,#2d2d2d);box-shadow:0 6px 10px -6px rgba(0,0,0,.6)}
.hls-tw__platen b{position:absolute;top:-25%;bottom:-25%;width:1.2em;border-radius:40%;background:linear-gradient(90deg,#c9ced6,#f4f5f7 45%,#8b939e)}
.hls-tw__platen b:first-child{left:-.6em}
.hls-tw__platen b:last-child{right:-.6em}
.hls-tw__bar{position:absolute;left:0;top:0;width:3px;margin-left:-1.5px;border-radius:2px;background:linear-gradient(180deg,#5f646b,#a3a9b1);transform-origin:50% 100%;pointer-events:none;opacity:0;z-index:3}
.hls-tw__bar::before{content:"";position:absolute;left:-2px;right:-2px;top:-3px;height:6px;border-radius:1px;background:#4b5056}
.hls-tw__bar.is-strike{animation:hlsTwBar .13s ease-out both}
.hls-tw__bar.is-off{display:none}
.hls-tw__bell{position:absolute;pointer-events:none;border-radius:50% 50% 8% 8%/100% 100% 8% 8%;background:radial-gradient(circle at 35% 30%,#fff3cf,#e2b864 45%,#a8762e);box-shadow:0 2px 2px rgba(0,0,0,.25);opacity:0;transform-origin:50% 0}
.hls-tw__bell::after{content:"";position:absolute;inset:-60%;border-radius:50%;border:1.5px solid rgba(168,118,46,.6);opacity:0}
.hls-tw__bell.is-ring{animation:hlsTwBell .55s ease both}
.hls-tw__bell.is-ring::after{animation:hlsClRing .6s ease-out both}
.hls-tw__lever{position:absolute;height:4px;pointer-events:none;border-radius:2px;background:linear-gradient(180deg,#e7e9ec,#8b939e);transform-origin:100% 50%;opacity:0}
.hls-tw__lever::before{content:"";position:absolute;left:-6px;top:-3px;width:10px;height:10px;border-radius:50%;background:#2d2d2d}
.hls-tw__lever.is-pull{animation:hlsTwLever .4s ease both}
html.hl-on .hl--typewriter .hls-tw__sheet{clip-path:inset(100% 0 0 0)}
html.hl-on .hl--typewriter .hls-tw__platen{opacity:0}
html.hl-on .hl--typewriter .hl-c{opacity:0}
html.hl-on .hl--typewriter .hls-tw__eb{opacity:0}
html.hl-on .hl--typewriter .hls-tw__dek{opacity:0}
html.hl-on .hl--typewriter.hl-in .hls-tw__sheet{animation:hlsTwSheet .75s cubic-bezier(.3,.6,.3,1) .05s both}
html.hl-on .hl--typewriter.hl-in .hls-tw__platen{animation:hlsTwPlaten .45s var(--hls-soft) 0s both,hlsTwPlatenOff .5s ease-in calc(var(--tw-end,2.6s) + .2s) forwards}
html.hl-on .hl--typewriter.hl-in .hls-tw__eb{animation:hlsUp .45s var(--hls-soft) .5s both}
html.hl-on .hl--typewriter.hl-in .hl-c{animation:hlsTwStrike .14s ease-out var(--d) both}
html.hl-on .hl--typewriter.hl-in .hls-tw__dek{animation:hlsTwCarbon 1.1s ease calc(var(--tw-end,2.6s) + .4s) both}
html.hl-on .hl--typewriter.hl-in .hls-tw__lever{opacity:1}
html.hl-on .hl--typewriter.hl-done .hls-tw__sheet{animation:hlsOut .7s ease both;clip-path:none}
html.hl-on .hl--typewriter.hl-done .hls-tw__platen,html.hl-on .hl--typewriter.hl-done .hls-tw__bar,html.hl-on .hl--typewriter.hl-done .hls-tw__bell,html.hl-on .hl--typewriter.hl-done .hls-tw__lever{display:none}
html.hl-on .hl--typewriter.hl-done .hl-c,html.hl-on .hl--typewriter.hl-done .hls-tw__eb,html.hl-on .hl--typewriter.hl-done .hls-tw__dek{animation:none;opacity:1;transform:none;filter:none}
@keyframes hlsTwSheet{from{clip-path:inset(100% 0 0 0);transform:translateY(1.2em)}to{clip-path:inset(0);transform:none}}
@keyframes hlsTwPlaten{from{opacity:0;transform:translateY(.6em)}to{opacity:1;transform:none}}
@keyframes hlsTwPlatenOff{from{opacity:1;transform:none}to{opacity:0;transform:translateY(1.2em)}}
@keyframes hlsTwStrike{0%{opacity:0;transform:translateY(-.06em) scale(1.08)}100%{opacity:var(--ink,1);transform:translate(var(--jx,0),var(--jy,0))}}
@keyframes hlsTwBar{0%{opacity:1;scale:1 .55}55%{opacity:1;scale:1 1}100%{opacity:0;scale:1 .65}}
@keyframes hlsTwBell{0%{opacity:1;transform:none}20%{transform:rotate(16deg)}45%{transform:rotate(-12deg)}70%{transform:rotate(6deg)}100%{opacity:0;transform:none}}
@keyframes hlsTwLever{0%,100%{transform:none}45%{transform:rotate(-22deg) translateX(-4px)}}
@keyframes hlsTwCarbon{0%{opacity:0;color:#3b5bab;filter:blur(.7px);transform:translate(1px,1px)}45%{opacity:.95;color:#3b5bab;filter:blur(.3px);transform:translate(.5px,.5px)}100%{opacity:1;color:var(--hls-tw-c,inherit);filter:none;transform:none}}

/* ---------- 14 · .final · the sundial ---------- */
.hl--sundial h2{position:relative;isolation:isolate}
.hls-sd2__dial,.hls-sd2__shadow,.hls-sd2__gnomon,.hls-sd2__sun{position:absolute;pointer-events:none}
.hls-sd2__dial{z-index:-1}
.hls-sd2__dial svg{display:block;overflow:visible}
.hls-sd2__arc{fill:rgba(255,253,249,.0);stroke:rgba(126,90,34,.42);stroke-width:1.6;stroke-dasharray:1;stroke-dashoffset:1}
.hls-sd2__hr{stroke:rgba(126,90,34,.24);stroke-width:1.2;opacity:0}
.hls-sd2__hr--pm{stroke:rgba(126,90,34,.3)}
.hls-sd2__shadow{z-index:-1;height:4px;margin-top:-2px;border-radius:2px;background:linear-gradient(90deg,rgba(26,26,26,.42),rgba(26,26,26,0));transform-origin:0 50%;rotate:var(--a0)}
.hls-sd2__gnomon{z-index:-1;clip-path:polygon(50% 0,100% 100%,0 100%);background:linear-gradient(90deg,#c99a5b,#7e5a22)}
.hls-sd2__sun{z-index:1}
.hls-sd2__sun b{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 40% 38%,#fff1bf,#f6c552 48%,#e9973a);box-shadow:0 0 18px 4px rgba(246,197,82,.45)}
.hls-sd2__sun::before{content:"";position:absolute;inset:-48%;border-radius:50%;background:repeating-conic-gradient(rgba(233,151,58,.75) 0 7deg,transparent 7deg 22.5deg);-webkit-mask:radial-gradient(circle,transparent 0 50%,#000 51% 70%,transparent 71%);mask:radial-gradient(circle,transparent 0 50%,#000 51% 70%,transparent 71%);animation:hlsSd2Rays 9s linear infinite;animation-play-state:paused}
html.hl-on .hl--sundial .hls-sd2__sun,html.hl-on .hl--sundial .hls-sd2__shadow,html.hl-on .hl--sundial .hls-sd2__gnomon{opacity:0}
html.hl-on .hl--sundial .hls-sd2__w{opacity:0}
html.hl-on .hl--sundial .hls-sd2__aside{opacity:0}
html.hl-on .hl--sundial.hl-in .hls-sd2__arc{animation:hlsPrDraw .9s cubic-bezier(.4,0,.2,1) .15s both}
html.hl-on .hl--sundial.hl-in .hls-sd2__hr{animation:hlsBtIn .35s ease calc(.3s + var(--k) * .04s) both}
html.hl-on .hl--sundial.hl-in .hls-sd2__hr--pm{animation:hlsBtIn .35s ease .5s both,hlsSd2Pm .8s ease calc(var(--sd2-t0,.55s) + var(--sd2-dur,1.9s)) forwards}
html.hl-on .hl--sundial.hl-in .hls-sd2__gnomon{transform-origin:50% 100%;animation:hlsSd2Gn .45s var(--hls-spring) .35s both}
html.hl-on .hl--sundial.hl-in .hls-sd2__shadow{animation:hlsBtIn .3s ease var(--sd2-t0,.55s) both,hlsSd2Sh var(--sd2-dur,1.9s) cubic-bezier(.45,.05,.4,1) var(--sd2-t0,.55s) both}
html.hl-on .hl--sundial.hl-in .hls-sd2__sun{animation:hlsSd2Sun var(--sd2-dur,1.9s) cubic-bezier(.45,.05,.4,1) var(--sd2-t0,.55s) both}
html.hl-on .hl--sundial.hl-in .hls-sd2__sun::before{animation-play-state:running}
html.hl-on .hl--sundial.hl-in .hls-sd2__w{animation:hlsSd2Lit .55s ease var(--d) both}
html.hl-on .hl--sundial.hl-in .hls-sd2__em{animation:hlsSd2Lit .55s ease var(--d) both,hlsSd2Warm 1.1s ease calc(var(--sd2-t0,.55s) + var(--sd2-dur,1.9s) - .1s) both}
html.hl-on .hl--sundial.hl-in .hls-sd2__aside{animation:hlsSd2Gold 1.2s ease calc(var(--sd2-t0,.55s) + var(--sd2-dur,1.9s) + .2s) both}
html.hl-on .hl--sundial.hl-done .hls-sd2__dial,html.hl-on .hl--sundial.hl-done .hls-sd2__shadow,html.hl-on .hl--sundial.hl-done .hls-sd2__gnomon,html.hl-on .hl--sundial.hl-done .hls-sd2__sun{animation:hlsOut .7s ease both}
html.hl-on .hl--sundial.hl-done .hls-sd2__w,html.hl-on .hl--sundial.hl-done .hls-sd2__aside{animation:none;opacity:1;text-shadow:none}
@keyframes hlsSd2Rays{to{transform:rotate(360deg)}}
@keyframes hlsSd2Pm{to{stroke:rgba(196,87,106,.75);stroke-width:2.4}}
@keyframes hlsSd2Gn{from{transform:scaleY(0)}to{transform:none}}
@keyframes hlsSd2Sh{from{rotate:var(--a0)}to{rotate:var(--a1)}}
@keyframes hlsSd2Sun{0%{opacity:0;offset-distance:0%}10%{opacity:1}100%{opacity:1;offset-distance:100%}}
@keyframes hlsSd2Lit{from{opacity:0;transform:translateY(.06em);filter:brightness(.5)}to{opacity:1;transform:none;filter:none}}
@keyframes hlsSd2Warm{0%{text-shadow:0 0 0 rgba(242,169,59,0)}40%{text-shadow:0 0 .35em rgba(242,169,59,.8)}100%{text-shadow:0 0 0 rgba(242,169,59,0)}}
@keyframes hlsSd2Gold{0%{opacity:0;color:#b7791f}45%{opacity:1;color:#b7791f}100%{opacity:1;color:var(--muted,#6b6b6b)}}

/* ---------- small screens ---------- */
@media (max-width:640px){
  .hls-cl__bell{display:none}
  .hls-bt__cork{width:18px;height:8px;top:-4px}
  .hls-sc__slips b{height:26%}
}