/* rangooo stage: baked "living storybook" hero. Written into the HTML at build time, so nothing older ever flashes. */
html.st-on .vr,html.st-on .kbb,html.st-on .khero,html.st-on .kh2,html.st-on .fx-story,html.st-on #view-library>.hero.band{display:none!important}
.st-hero{--ease:cubic-bezier(.2,.7,.2,1);--mx:0;--my:0;position:relative;isolation:isolate;overflow:hidden;margin:0 calc(50% - 50vw) 18px;width:100vw;height:clamp(540px,74svh,700px);border-radius:0 0 34px 34px;color:#16202C;contain:layout paint}
@media (min-width:701px){.st-hero{margin:8px 0 22px;width:auto;border-radius:30px}}
/* sky */
.st-sky{position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,#9ED8F2 0%,#E8F4FA 55%,#FFF4E0 100%)}
.st-sky i{position:absolute;inset:0;opacity:0;transition:opacity 2.4s ease}
.st-sky .dawn{background:linear-gradient(180deg,#F7C8A8 0%,#FBE3C9 50%,#FFF7E6 100%)}
.st-sky .dusk{background:linear-gradient(180deg,#7B6BC9 0%,#F49BA8 55%,#FFD79A 100%)}
[data-s="0"] .st-sky .dawn{opacity:1}[data-s="2"] .st-sky .dusk{opacity:.55}[data-s="3"] .st-sky .dusk{opacity:1}
.st-stars{position:absolute;inset:0;opacity:0;transition:opacity 1.6s;background-image:radial-gradient(1.5px 1.5px at 12% 18%,#fff 60%,transparent 61%),radial-gradient(1px 1px at 28% 40%,#fff 60%,transparent 61%),radial-gradient(2px 2px at 44% 12%,#fff 60%,transparent 61%),radial-gradient(1px 1px at 61% 30%,#fff 60%,transparent 61%),radial-gradient(1.5px 1.5px at 73% 16%,#fff 60%,transparent 61%),radial-gradient(1px 1px at 86% 36%,#fff 60%,transparent 61%),radial-gradient(1.5px 1.5px at 93% 8%,#fff 60%,transparent 61%),radial-gradient(1px 1px at 52% 48%,#fff 60%,transparent 61%);animation:sttw 3s ease-in-out infinite alternate}
@keyframes sttw{to{opacity:.6}}
/* sun that crosses the sky, moon at night */
.st-sun{position:absolute;z-index:1;left:calc(56% + var(--p,0) * 32%);top:calc(12% - var(--p,0) * 14% + (var(--p,0) * var(--p,0)) * 30%);width:92px;height:92px;border-radius:50%;background:radial-gradient(circle at 40% 38%,#FFF4C2,#FFC93C 70%);box-shadow:0 0 60px 22px rgba(255,201,60,.45);transition:left 2.2s var(--ease),top 2.2s var(--ease);translate:calc(var(--mx) * -10px) calc(var(--my) * -6px)}
/* clouds */
.st-cl{position:absolute;z-index:1;top:var(--t);left:-20%;width:var(--w);opacity:.9;fill:#fff;animation:stcl var(--d) linear infinite;animation-delay:var(--dl);translate:calc(var(--mx) * var(--k) * -1px) 0;filter:drop-shadow(0 6px 10px rgba(80,100,130,.12))}
@keyframes stcl{to{left:120%}}
/* paper-cut hills */
.st-land{position:absolute;z-index:2;left:-4%;right:-4%;bottom:0;height:46%;pointer-events:none}
.st-land svg{position:absolute;left:0;right:0;bottom:0;width:100%;height:100%;display:block;translate:calc(var(--mx) * var(--k) * 1px) calc(var(--my) * var(--k) * .4px);transition:translate .4s cubic-bezier(.2,.7,.2,1)}
.st-land .l1{--k:4;fill:#BFE3C9}.st-land .l2{--k:10;fill:#8FCB9F}.st-land .l3{--k:18;fill:#5FA874}
[data-s="3"] .st-land .l1{fill:#8E86C9}[data-s="3"] .st-land .l2{fill:#6D62B3}[data-s="3"] .st-land .l3{fill:#4B4290}
.st-land svg path{transition:fill 2.4s ease}
/* kite */
.st-kite{position:absolute;z-index:3;right:12%;top:18%;width:64px;height:120px;transform-origin:50% 100%;animation:stkite 6s ease-in-out infinite alternate;translate:calc(var(--mx) * -14px) calc(var(--my) * -8px)}
@keyframes stkite{from{rotate:-9deg}to{rotate:8deg}}
/* diyas glow at dusk */
.st-diya{position:absolute;z-index:3;bottom:calc(var(--b));left:var(--l);width:18px;height:18px;border-radius:50%;background:radial-gradient(circle,#FFE59A,#FF9A2E 60%,transparent 70%);opacity:0;transition:opacity 1.4s;box-shadow:0 0 18px 6px rgba(255,154,46,.5);animation:stdiya 1.2s ease-in-out infinite alternate}
[data-s="2"] .st-diya,[data-s="3"] .st-diya{opacity:1}
@keyframes stdiya{to{transform:scale(.82)}}
/* content grid */
.st-pin{position:relative;z-index:5;height:100%;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:24px;padding:0 clamp(20px,5vw,64px);max-width:1280px;margin:0 auto}
.st-copy{position:relative;min-height:300px}
.st-kick{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:#B5541B;margin-bottom:10px}
.st-steps{position:relative;height:190px}
.st-step{position:absolute;inset:0;opacity:0;translate:0 18px;filter:blur(6px);transition:opacity .7s var(--ease),translate .8s var(--ease),filter .7s;pointer-events:none}
.st-step.on{opacity:1;translate:0 0;filter:none;pointer-events:auto}
.st-step h2{font-family:Fraunces,"Playfair Display",Georgia,serif;font-weight:500;font-size:clamp(34px,4.2vw,56px);line-height:1.05;margin:0 0 12px;letter-spacing:-.01em}
.st-step p{font-size:clamp(15px,1.25vw,18px);line-height:1.5;margin:0;max-width:40ch;color:#3A4654}
.st-in{display:flex;align-items:center;gap:10px;margin-top:14px;max-width:360px}
.st-in span{font-size:13px;font-weight:600;white-space:nowrap}
.st-in input{flex:1;min-width:0;height:48px;border-radius:14px;border:1.5px solid rgba(22,32,44,.18);padding:0 14px;font-size:18px;font-family:inherit;background:rgba(255,255,255,.85);color:#16202C}
.st-in input:focus{outline:3px solid #E8590C;outline-offset:1px}
/* trailer bar + controls */
.st-ctl{display:flex;align-items:center;gap:12px;margin-top:8px}
.st-arr{width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.85);color:#16202C;cursor:pointer;display:grid;place-items:center;box-shadow:0 4px 12px rgba(22,32,44,.12);transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.st-arr:hover{transform:scale(1.08)}.st-arr:active{transform:scale(.94)}
.st-rail{display:flex;gap:6px;flex:1;max-width:220px}
.st-dot{flex:1;height:4px;border-radius:4px;border:0;padding:0;background:rgba(22,32,44,.18);position:relative;overflow:hidden;cursor:pointer}
.st-dot i{position:absolute;inset:0;width:0;background:#16202C;border-radius:4px}
.st-dot.done i{width:100%}
.st-dot.on.auto i{animation:stfill var(--dur,7s) linear forwards}
.st-dot.on:not(.auto) i{width:100%}
@keyframes stfill{to{width:100%}}
.st-go{display:inline-flex;align-items:center;gap:10px;margin-top:20px;height:54px;padding:0 24px;border:0;border-radius:16px;background:#145C63;color:#fff;font-size:16px;font-weight:700;font-family:inherit;cursor:pointer;box-shadow:0 10px 24px rgba(20,92,99,.3);transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s}
.st-go:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(20,92,99,.38)}.st-go:active{transform:scale(.97)}
/* the cards */
.st-world{position:relative;height:min(60vh,500px);margin-top:10px;perspective:1200px;perspective-origin:50% 40%}
.st-card{position:absolute;left:50%;top:50%;width:clamp(170px,19vw,250px);aspect-ratio:3/4;translate:-50% -50%;border-radius:18px;background:#fff;box-shadow:0 24px 50px rgba(22,32,44,.22);border:0;padding:0;overflow:hidden;cursor:pointer;transform:translate3d(var(--x,0),120%,0) rotate(var(--r,0deg));opacity:0;transition:transform 1.1s var(--ease),opacity .6s,filter .8s;transform-style:preserve-3d}
.st-ready .st-card{opacity:1;transform:translate3d(var(--x,0),0,0) rotate(var(--r,0deg)) translateZ(var(--z,0px))}
.st-card.c0{--x:-64%;--r:-9deg;--z:-40px;transition-delay:.05s}
.st-card.c1{--x:0;--r:0deg;--z:40px;transition-delay:.18s;z-index:2}
.st-card.c2{--x:64%;--r:9deg;--z:-40px;transition-delay:.3s}
.st-art,.st-colour{position:absolute;inset:0;display:block;border-radius:inherit;overflow:hidden}
.st-art svg,.st-colour svg{width:100%;height:100%;display:block}
[data-s="1"] .c1 .st-art svg,[data-s="2"] .c1 .st-art svg,[data-s="3"] .c1 .st-art svg{filter:grayscale(1) contrast(1.1) brightness(1.08)}.c1 .st-art svg{transition:filter 1s}
.st-colour{clip-path:circle(0 at 50% 60%);transition:clip-path 2.2s var(--ease)}
[data-s="2"] .c1 .st-colour,[data-s="3"] .c1 .st-colour{clip-path:circle(110% at 50% 60%)}
[data-s="0"] .st-world .c0,[data-s="0"] .st-world .c2{filter:none}
[data-s="1"] .st-card.c0,[data-s="1"] .st-card.c2,[data-s="2"] .st-card.c0,[data-s="2"] .st-card.c2{filter:brightness(.92) saturate(.7)}
[data-s="1"] .st-ready .st-card.c1,[data-s="2"] .st-ready .st-card.c1{transform:translate3d(0,-4%,0) scale(1.08) translateZ(60px)}
[data-s="3"] .st-ready .st-card.c0{transform:translate3d(-74%,6%,0) rotate(-14deg) translateZ(-60px)}
[data-s="3"] .st-ready .st-card.c2{transform:translate3d(74%,6%,0) rotate(14deg) translateZ(-60px)}
/* name on the middle cover, written letter by letter */
.st-name{position:absolute;left:8%;right:8%;bottom:9%;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.92);color:#16202C;font-family:Fraunces,Georgia,serif;font-size:clamp(15px,1.5vw,21px);text-align:center;opacity:0;translate:0 10px;transition:opacity .5s,translate .5s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
[data-s="1"] .st-name,[data-s="2"] .st-name,[data-s="3"] .st-name{opacity:1;translate:0 0}
.st-name span{display:inline-block;opacity:0;translate:0 6px}
[data-s="1"] .st-name span,[data-s="2"] .st-name span,[data-s="3"] .st-name span{animation:stletter .35s cubic-bezier(.34,1.56,.64,1) forwards;animation-delay:calc(var(--i) * 90ms + .3s)}
@keyframes stletter{to{opacity:1;translate:0 0}}
/* pencil that colours */
.st-pencil{position:absolute;z-index:4;width:52px;height:52px;left:50%;top:50%;opacity:0;rotate:22deg;translate:40px 120px;transition:opacity .4s,translate .4s}
[data-s="2"] .st-pencil{opacity:1;animation:stpen 2.2s var(--ease) forwards}
@keyframes stpen{0%{translate:-70px 90px}30%{translate:40px 20px}60%{translate:-50px -40px}100%{translate:60px -90px;opacity:0}}
.st-cap{position:absolute;left:0;right:0;bottom:-6px;display:flex;justify-content:center;align-items:center;gap:8px;font-weight:600;font-size:14px;color:#16202C;opacity:.85;min-height:28px}
.st-cap-l{display:none;padding:4px 9px;border-radius:999px;background:rgba(255,255,255,.9);font-size:11px;font-weight:700;color:#B5541B;box-shadow:0 3px 10px rgba(22,32,44,.12)}
[data-s="3"] .st-cap-l{display:inline-block}
.st-cap-t,.st-cap-l{transition:opacity .35s,translate .35s}
.st-cap.sw .st-cap-t,.st-cap.sw .st-cap-l{opacity:0;translate:0 6px}
/* grain + vignette */
.st-grain{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:.06;mix-blend-mode:multiply;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");animation:stgrain .8s steps(4) infinite}
@keyframes stgrain{25%{background-position:-18px 12px}50%{background-position:14px -22px}75%{background-position:-8px -14px}}
.st-vig{position:absolute;inset:0;z-index:4;pointer-events:none;background:radial-gradient(120% 90% at 50% 40%,transparent 60%,rgba(40,30,20,.18) 100%)}
/* night */
html[data-night="1"] .st-hero{color:#EAF0F7}
html[data-night="1"] .st-sky{background:linear-gradient(180deg,#0B1530 0%,#1A2550 60%,#2A2F5E 100%)}
html[data-night="1"] .st-sky i{opacity:0!important}
html[data-night="1"] .st-stars{opacity:.9}
html[data-night="1"] .st-sun{background:radial-gradient(circle at 40% 38%,#FFFDF2,#D9DEF0 70%);box-shadow:0 0 50px 16px rgba(220,228,255,.35);-webkit-mask:radial-gradient(circle at 68% 36%,transparent 34px,#000 35px);mask:radial-gradient(circle at 68% 36%,transparent 34px,#000 35px)}
html[data-night="1"] .st-cl{opacity:.18}
html[data-night="1"] .st-land .l1{fill:#2E3A6B}html[data-night="1"] .st-land .l2{fill:#22305C}html[data-night="1"] .st-land .l3{fill:#17244A}
html[data-night="1"] .st-step p{color:#C9D3E0}html[data-night="1"] .st-kick{color:#FFB380}
html[data-night="1"] .st-arr,html[data-night="1"] .st-in input{background:rgba(255,255,255,.12);color:#EAF0F7;border-color:rgba(255,255,255,.2)}
html[data-night="1"] .st-cap{color:#EAF0F7}html[data-night="1"] .st-cap-l{background:rgba(255,255,255,.14);color:#FFB380}
html[data-night="1"] .st-dot{background:rgba(255,255,255,.2)}html[data-night="1"] .st-dot i{background:#fff}
html[data-night="1"] .st-grain{mix-blend-mode:screen;opacity:.05}
html[data-night="1"] .st-diya{opacity:1}
/* phones */
@media (max-width:700px){
  .st-hero{height:auto;min-height:0;padding-bottom:26px}
  .st-pin{grid-template-columns:1fr;gap:0;padding:14px 20px 0;align-content:start}
  .st-copy{min-height:0;order:2;text-align:center;margin-top:10px}
  .st-kick{font-size:11px;margin-bottom:6px}
  .st-steps{height:112px}
  .st-step h2{font-size:27px;margin-bottom:6px}.st-step p{font-size:14px;line-height:1.45;margin:0 auto;max-width:32ch;opacity:.85}
  .st-in,.st-kick{display:none}
  .st-diya{display:none}
  .st-ctl{justify-content:center;margin-top:4px}
  .st-arr{display:none}
  .st-rail{max-width:132px;gap:5px}.st-dot{height:3px}
  .st-go{display:flex;width:auto;min-width:200px;margin:14px auto 0;height:48px;justify-content:center;font-size:15px}
  .st-world{order:1;height:272px;margin:0 0 6px}
  .st-cap{bottom:-4px;font-size:13px;opacity:.7}
  .st-card{width:148px}
  .st-card.c0{--x:-58%}.st-card.c2{--x:58%}
  .st-kite{right:6%;top:4%;width:44px;height:84px}.st-sun{width:60px;height:60px}
  .st-land{height:34%}
  .st-grain{display:none}
}
@media (prefers-reduced-motion:reduce){
  .st-cl,.st-kite,.st-stars,.st-grain,.st-diya,.st-dot.on.auto i{animation:none}
  .st-card,.st-colour,.st-step,.st-sun{transition:none}
  .st-name span{animation:none;opacity:1;translate:0 0}
  [data-s="2"] .st-pencil{animation:none;opacity:0}
}
html[data-fx-tier="B"] .st-grain{display:none}