/* showcase stage for page-stage */
#demo-root .stage.page-stage {
  padding: 0;
  min-height: 340px;
  display: block;
  place-items: unset;
  background: #05060d;
  overflow: hidden;
}
#demo-root .stage.page-stage .dm {
  position: relative;
  height: 340px;
  width: 100%;
  border-radius: 0;
  overflow: hidden;
  border: 0;
  background: #000;
}
#demo-root .stage.page-stage.xtall { min-height: 400px; }
#demo-root .stage.page-stage.xtall .dm { height: 400px; }

/* shared (page tab) */
.pg-dm{contain:inline-size;padding:0;color:#e5e7eb;font:14px/1.45 system-ui,sans-serif}
.pg-dm [hidden]{display:none!important}
.pg-dm h4{font:800 22px system-ui;letter-spacing:-.01em}
.pg-dm button{font-family:inherit}
.pg-acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pg-cfb{padding:7px 14px;border-radius:99px;border:1px solid #2a2a30;background:#101014;color:#bbb;font:600 12px ui-monospace,monospace;cursor:pointer;transition:background .2s,color .2s}
.pg-cfb:hover{background:#18181d;color:#fff}.pg-cfb.ok{background:#14532d;border-color:#22c55e;color:#bbf7d0}
.pg-cfb:focus-visible,.pg-dm button:focus-visible,.pg-dm [tabindex]:focus-visible{outline:2px solid #fff;outline-offset:2px}
.pg-sm{padding:6px 12px;border-radius:99px;border:1px solid #333;background:#16161c;color:#ddd;font:600 12px system-ui;cursor:pointer}
/* 1 view transition morph */
.pg-i1{padding:16px;background:radial-gradient(circle at 50% 0,#14142b,#000 70%)}
.pg-i1-cap{color:#8b8b95;font:12px ui-monospace,monospace;margin-bottom:12px}
.pg-i1-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.pg-i1-card{display:flex;flex-direction:column;gap:8px;align-items:stretch;padding:0;border:0;background:none;color:#ddd;cursor:pointer;text-align:center;font-size:13px}
.pg-i1-th{display:grid;place-items:center;aspect-ratio:1;border-radius:16px;background:linear-gradient(145deg,var(--c),#000 150%);font-size:36px;transition:transform .2s}
.pg-i1-card:hover .pg-i1-th{transform:scale(1.04)}
.pg-i1-det{display:flex;flex-direction:column;gap:10px;height:100%}
.pg-i1-back{align-self:flex-start;padding:7px 14px;border-radius:99px;border:0;background:#ffffff1a;color:#fff;font:600 13px system-ui;cursor:pointer}
.pg-i1-hero{display:grid;place-items:center;height:150px;border-radius:20px;background:linear-gradient(145deg,var(--c),#000 150%);font-size:64px}
.pg-i1-det p{color:#a1a1aa;font-size:13.5px}
::view-transition-group(pg-hero){animation-duration:.55s;animation-timing-function:cubic-bezier(.3,1,.3,1)}
@media (prefers-reduced-motion:reduce){::view-transition-group(pg-hero),::view-transition-old(pg-hero),::view-transition-new(pg-hero){animation:none}}
/* 2 skeleton -> content */
.pg-i2{padding:16px;display:flex;flex-direction:column;gap:10px;background:#050507}
.pg-i2-hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.pg-i2-re{padding:6px 12px;border-radius:99px;border:1px solid #333;background:#16161c;color:#ddd;font:600 12px system-ui;cursor:pointer}
.pg-i2-sk,.pg-i2-c{display:grid;grid-template-columns:46px 1fr;gap:12px;align-items:center;padding:12px;border-radius:14px;background:#0e0e12;border:1px solid #1b1b20}
.pg-i2-sk i,.pg-i2-c i{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;font-style:normal;font-size:22px;background:#17171d}
.pg-i2-sk span{display:grid;gap:8px}.pg-i2-sk u{display:block;height:11px;border-radius:6px;background:#17171d}.pg-i2-sk u+u{width:60%}
.pg-i2-sk{transition:opacity .25s,display .25s allow-discrete}
.pg-i2-sk i,.pg-i2-sk u{background-image:linear-gradient(90deg,transparent,#ffffff14,transparent);background-size:200% 100%;background-repeat:no-repeat;background-position:-100% 0}
@media (prefers-reduced-motion:no-preference){.pg-i2-sk i,.pg-i2-sk u{animation:pg-i2-sh 1.3s linear infinite}}
@keyframes pg-i2-sh{to{background-position:200% 0}}
.pg-i2-c{display:none;opacity:0;transform:translateY(16px)}
.pg-i2-c span{display:grid;gap:2px}.pg-i2-c em{font-style:normal;color:#8b8b95;font-size:12.5px}
.pg-i2[data-state=ready] .pg-i2-sk{display:none;opacity:0}
.pg-i2[data-state=ready] .pg-i2-c{display:grid;opacity:1;transform:none;transition:opacity .5s calc(var(--i)*90ms),transform .6s calc(var(--i)*90ms) cubic-bezier(.2,.9,.3,1.2)}
@starting-style{.pg-i2[data-state=ready] .pg-i2-c{opacity:0;transform:translateY(16px)}}
/* 3 reading progress */
.pg-i3-sc{height:100%;overflow-y:auto;padding:0 20px 40px;scrollbar-width:thin}
.pg-i3-bar{position:sticky;top:0;height:4px;margin:0 -20px 14px;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,#22d3ee,#a855f7,#f43f5e);z-index:2}
.pg-i3-lead{color:#a1a1aa;margin:6px 0 80px}
.pg-i3-s{margin:0 0 70px;padding:20px;border-radius:16px;background:linear-gradient(135deg,#1e1b4b,#17153a);border:1px solid #3730a3}
.pg-i3-s h5{font:700 18px system-ui;margin-bottom:6px}.pg-i3-s p{color:#c7d2fe;font-size:13.5px}
@media (prefers-reduced-motion:no-preference){@supports (animation-timeline:view()){.pg-i3-bar{animation:pg-i3-grow linear both;animation-timeline:scroll(nearest block)}.pg-i3-s{animation:pg-i3-in linear both;animation-timeline:view();animation-range:entry 0% cover 35%}}}
@keyframes pg-i3-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes pg-i3-in{from{opacity:0;transform:translateY(34px) scale(.96)}}
.pg-i3-fb .pg-i3-s{opacity:0;transform:translateY(30px);transition:opacity .5s,transform .6s}
.pg-i3-fb .pg-i3-s.in{opacity:1;transform:none}
/* 4 route progress */
.pg-i4{display:flex;flex-direction:column;background:#07070a}
.pg-i4-top{display:flex;align-items:center;gap:12px;padding:10px 14px;background:#0f0f14;border-bottom:1px solid #1b1b20}
.pg-i4-dots{display:flex;gap:6px}.pg-i4-dots i{width:10px;height:10px;border-radius:50%;background:#2a2a32}
.pg-i4-url{flex:1;padding:5px 12px;border-radius:99px;background:#000;border:1px solid #1f1f26;color:#9a9a9f;font:12px ui-monospace,monospace}
.pg-i4-bar{height:3px;width:0;margin-top:-1px;background:linear-gradient(90deg,#22d3ee,#a855f7);box-shadow:0 0 10px #a855f7;opacity:0;transition:width .35s ease-out,opacity .3s}
.pg-i4-tabs{display:flex;gap:6px;padding:14px 14px 4px}
.pg-i4-tabs button{padding:7px 14px;border-radius:99px;border:1px solid #26262c;background:#101014;color:#aaa;font:600 13px system-ui;cursor:pointer}
.pg-i4-tabs button[aria-current=page]{background:#e5e5e5;color:#000}
.pg-i4-v{padding:14px 18px}.pg-i4-v p{color:#a1a1aa;margin-top:6px}
@media (prefers-reduced-motion:no-preference){.pg-i4-v.in{animation:pg-i4-in .45s ease both}}
@keyframes pg-i4-in{from{opacity:0;transform:translateY(10px)}}
/* 5 page flip */
.pg-i5{perspective:1500px;background:#0b0b10}
.pg-i5-b,.pg-i5-fr{position:absolute;inset:0;padding:30px 26px;display:flex;flex-direction:column;gap:8px}
.pg-i5-b{background:linear-gradient(160deg,#134e4a,#0f172a)}.pg-i5-fr{background:linear-gradient(160deg,#3730a3,#1e1b4b);backface-visibility:hidden}
.pg-i5-b p,.pg-i5-fr p{color:#d4d4d8;max-width:260px}
.pg-i5-leaf{position:absolute;inset:0;z-index:2;transform-origin:left center;transform-style:preserve-3d;transition:transform 1s cubic-bezier(.6,0,.2,1)}
.pg-i5-bk{position:absolute;inset:0;transform:rotateY(180deg);backface-visibility:hidden;background:linear-gradient(90deg,#27272a,#52525b)}
.pg-i5-leaf.flipped{transform:rotateY(-180deg)}
@media (hover:hover){.pg-i5-leaf:not(.flipped):has(.pg-i5-ear:hover){transform:rotateY(-9deg)}}
.pg-i5-ear{position:absolute;right:0;bottom:0;width:38px;height:38px;background:linear-gradient(225deg,#0b0b10 50%,#a5b4fc 50%);box-shadow:-3px -3px 8px #0006;transition:width .3s,height .3s}
.pg-i5-ear:hover{width:70px;height:70px}
.pg-i5-sh{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;background:linear-gradient(90deg,#000b,transparent 70%)}
.pg-i5-flip{position:absolute;left:50%;bottom:14px;translate:-50% 0;z-index:5;padding:8px 16px;border-radius:99px;border:1px solid #ffffff44;background:#000a;color:#fff;font:600 13px system-ui;cursor:pointer;backdrop-filter:blur(6px)}
/* 6 stagger */
.pg-i6{padding:16px;display:flex;flex-direction:column;gap:8px;background:#050507}
.pg-i6-h{display:flex;justify-content:space-between;align-items:center;font-size:20px;margin-bottom:4px}
.pg-i6-h button{padding:6px 12px;border-radius:99px;border:1px solid #333;background:#16161c;color:#ddd;font:600 12px system-ui;cursor:pointer}
.pg-i6-row{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:12px;background:#101016;border:1px solid #1d1d25}
.pg-i6-row i{font-style:normal;font-size:20px}
@media (prefers-reduced-motion:no-preference){.pg-i6.run .pg-i6-r{animation:pg-i6-in .7s cubic-bezier(.2,.9,.3,1.15) both;animation-delay:calc(var(--i)*70ms)}}
@supports (animation-timing-function:linear(0,1)){@media (prefers-reduced-motion:no-preference){.pg-i6.run .pg-i6-r{animation-timing-function:linear(0,.4 12%,.85 24%,1.07 38%,1.03 52%,.99 70%,1)}}}
@keyframes pg-i6-in{from{opacity:0;transform:translateY(26px) scale(.96);filter:blur(6px)}}
/* 7 shatter */
.pg-i7{background:#050507}
.pg-i7-pg,.pg-i7-next{position:absolute;inset:16px 16px 64px;border-radius:18px;padding:24px;display:flex;flex-direction:column;gap:8px;overflow:hidden}
.pg-i7-pg{background:linear-gradient(135deg,#be185d,#4c1d95);border:1px solid #f472b6}.pg-i7-next{background:linear-gradient(135deg,#0f766e,#164e63);border:1px solid #2dd4bf}
.pg-i7-pg p,.pg-i7-next p{color:#fce7f3;max-width:300px}.pg-i7-next p{color:#ccfbf1}
.pg-i7-badge{align-self:flex-start;margin-top:auto;padding:4px 10px;border-radius:99px;background:#0006;font:700 11px ui-monospace,monospace}
.pg-i7-host{position:absolute;inset:16px 16px 64px;z-index:3;pointer-events:none}
.pg-i7-sh{position:absolute;overflow:hidden;will-change:transform}
.pg-i7-go{position:absolute;left:50%;bottom:14px;translate:-50% 0;z-index:5;padding:9px 18px;border-radius:99px;border:1px solid #ffffff44;background:#18181b;color:#fff;font:600 13px system-ui;cursor:pointer}
@media (prefers-reduced-motion:no-preference){.pg-i7-next:not([hidden]){animation:pg-i7-in .6s ease both}}
@keyframes pg-i7-in{from{opacity:0;transform:scale(.96)}}
/* 8 parallax */
.pg-i8-sc{height:100%;overflow-y:auto;scrollbar-width:thin}
.pg-i8-hero{position:relative;height:260px;overflow:hidden;background:#0b1026}
.pg-i8-l{position:absolute;left:0;right:0;top:-260px;bottom:-60px;translate:0 calc(var(--pg-i8-y,0px)*var(--k))}
.pg-i8-sky{background:linear-gradient(#0b1026 0,#1e1b4b 38%,#7c3aed 60%,#f97316 88%)}
.pg-i8-sky::before{content:'';position:absolute;left:62%;bottom:150px;width:70px;aspect-ratio:1;border-radius:50%;background:#fde68a;box-shadow:0 0 50px 10px #fbbf2499}
.pg-i8-far::before,.pg-i8-near::before{content:'';position:absolute;left:0;right:0;bottom:60px}
.pg-i8-far::before{height:120px;background:#312e81;clip-path:polygon(0 100%,0 55%,14% 20%,28% 58%,44% 10%,60% 55%,78% 25%,100% 60%,100% 100%)}
.pg-i8-near::before{height:90px;background:#0f0a2a;clip-path:polygon(0 100%,0 50%,18% 30%,36% 62%,54% 22%,72% 58%,88% 34%,100% 52%,100% 100%)}
.pg-i8-t{top:0;bottom:0;display:grid;place-items:center}
.pg-i8-t h4{font:900 clamp(34px,10vw,56px) system-ui;letter-spacing:.3em;margin-right:-.3em;color:#fff;text-shadow:0 6px 30px #000a}
.pg-i8-body{padding:20px;display:grid;gap:18px;background:#050507;min-height:360px}.pg-i8-body p{color:#a1a1aa}
@media (prefers-reduced-motion:no-preference){@supports (animation-timeline:scroll()){.pg-i8-l{translate:none;animation:pg-i8-par linear both;animation-timeline:scroll(nearest block);animation-range:0 260px}}}
@keyframes pg-i8-par{to{translate:0 calc(var(--k)*260px)}}
/* 9 blur-up */
.pg-i9{padding:16px;background:#050507;display:flex;flex-direction:column;gap:12px}
.pg-i9-hd{display:flex;justify-content:space-between;align-items:center}
.pg-i9-hd button{padding:6px 12px;border-radius:99px;border:1px solid #333;background:#16161c;color:#ddd;font:600 12px system-ui;cursor:pointer}
.pg-i9-g{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pg-i9-f{position:relative;margin:0;overflow:hidden;border-radius:12px;aspect-ratio:8/5;background:#111}.pg-i9-f:first-child{grid-column:1/-1;aspect-ratio:16/7}
.pg-i9-f img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pg-i9-ph{filter:blur(14px);transform:scale(1.2)}
.pg-i9-full{opacity:0;filter:blur(12px);transform:scale(1.06);transition:opacity .7s,filter .9s,transform .9s cubic-bezier(.2,.8,.3,1)}
.pg-i9-f.ok .pg-i9-full{opacity:1;filter:none;transform:none}
.pg-i9-f.ok .pg-i9-ph{opacity:0;transition:opacity .9s .25s}
/* 10 popover toasts */
.pg-i10{display:grid;place-content:center;gap:16px;padding:20px;text-align:center;background:radial-gradient(circle at 50% 100%,#10231a,#000 70%)}
.pg-i10-h{color:#9a9a9f;max-width:300px;font-size:13.5px}
.pg-i10-b{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.pg-i10-b button{padding:10px 16px;border-radius:12px;border:1px solid #2e2e36;background:#14141a;color:#eee;font:600 14px system-ui;cursor:pointer}
.pg-i10-t{position:fixed;top:auto;left:auto;right:12px;bottom:calc(12px + var(--k,0)*64px);margin:0;width:min(320px,calc(100vw - 24px));display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid #3f3f46;border-left:4px solid var(--c);border-radius:12px;background:#18181b;color:#fafafa;font:600 14px system-ui;box-shadow:0 14px 40px #000c;opacity:0;transform:translateX(40px);transition:opacity .3s,transform .35s cubic-bezier(.3,1.3,.4,1),bottom .35s cubic-bezier(.3,1.3,.4,1),overlay .35s allow-discrete,display .35s allow-discrete}
.pg-i10-t i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--c);color:#000;font:800 13px ui-monospace,monospace;font-style:normal;flex:none}
.pg-i10-t span{flex:1}.pg-i10-t button{border:0;background:none;color:#a1a1aa;font-size:20px;line-height:1;cursor:pointer;padding:2px 6px;border-radius:6px}
.pg-i10-t:popover-open{opacity:1;transform:none}
.pg-i10-t.on{opacity:1;transform:none}
.pg-i10-t.out{opacity:0;transform:translateX(40px)}
@starting-style{.pg-i10-t:popover-open{opacity:0;transform:translateX(40px)}}


/* ===== NEW page 11–15 ===== */
.pg-i11{position:relative;background:#0b1020;perspective:1200px}
.pg-i11-sheet{position:absolute;inset:16px;border-radius:16px;padding:22px;display:flex;flex-direction:column;gap:10px;background:linear-gradient(160deg,#1a2240,#0d1224);border:1px solid #2a3358;box-shadow:0 20px 50px #0008}
.pg-i11-sheet h4{margin:0}
.pg-i11-sheet p{margin:0;color:#9aa3c7}
.pg-i11-go{align-self:flex-start;margin-top:auto;padding:9px 16px;border-radius:99px;border:0;background:#7c5cff;color:#fff;font:700 13px system-ui;cursor:pointer}
.pg-i11-b{background:linear-gradient(160deg,#14261c,#0b1510);border-color:#1f4d38}
.pg-i11[data-side=a] .pg-i11-b{visibility:hidden}
.pg-i11[data-side=b] .pg-i11-a{visibility:hidden}
.pg-i11-ear{position:absolute;right:16px;top:16px;width:56px;height:56px;border:0;padding:0;cursor:pointer;background:linear-gradient(135deg,#ffffff00 50%,#c4b5fd 50%);border-radius:0 16px 0 0;box-shadow:-2px 2px 8px #0006;transform-origin:100% 0;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.pg-i11.peeling .pg-i11-ear{transform:rotateY(-70deg) translateZ(1px)}
.pg-i11.peeling .pg-i11-a{animation:pg11peel .55s ease forwards}
@keyframes pg11peel{to{transform:rotateY(-105deg);transform-origin:0 50%;opacity:.3;filter:brightness(.7)}}
@media (prefers-reduced-motion:reduce){.pg-i11-ear,.pg-i11.peeling .pg-i11-a{transition:none;animation:none}}

.pg-i12{display:grid;place-items:center;gap:14px;background:radial-gradient(circle at 50% 0,#2a1848,#07090f 70%);padding:16px}
.pg-i12-book{position:relative;width:min(100%,280px);height:180px;transform-style:preserve-3d;perspective:900px}
.pg-i12-panel{position:absolute;inset:0;border-radius:10px;background:#161b2e;border:1px solid #2e3655;display:grid;place-content:center;gap:4px;text-align:center;padding:12px;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.pg-i12-panel b{font:800 22px system-ui;color:#a78bfa}
.pg-i12-panel span{font:700 13px system-ui;color:#dde}
.pg-i12-panel p{margin:0;font:12px/1.35 system-ui;color:#93a0b8;max-width:18ch}
.pg-i12-panel.L{transform-origin:0 50%;background:linear-gradient(135deg,#312e81,#1e1b4b)}
.pg-i12-panel.R{transform-origin:100% 50%;background:linear-gradient(225deg,#4c1d95,#1e1b4b)}
.pg-i12-panel.C{z-index:1;background:linear-gradient(180deg,#1f2937,#0f172a)}
.pg-i12[data-open=true] .L{transform:rotateY(105deg)}
.pg-i12[data-open=true] .R{transform:rotateY(-105deg)}
.pg-i12-tog{padding:9px 16px;border-radius:99px;border:1px solid #3b4660;background:#121826;color:#eee;font:700 13px system-ui;cursor:pointer}
@media (prefers-reduced-motion:reduce){.pg-i12-panel{transition:none}}

.pg-i13{display:grid;grid-template-rows:1fr auto;background:#05060a}
.pg-i13-sc{overflow:auto;scroll-snap-type:y mandatory;height:100%;overscroll-behavior:contain}
.pg-i13-ch{min-height:100%;scroll-snap-align:start;scroll-snap-stop:always;padding:28px 20px;display:grid;align-content:center;gap:8px}
.pg-i13-ch:nth-child(1){background:linear-gradient(160deg,#1e1b4b,#0b1020)}
.pg-i13-ch:nth-child(2){background:linear-gradient(160deg,#14243b,#0b1020)}
.pg-i13-ch:nth-child(3){background:linear-gradient(160deg,#1a1430,#0b1020)}
.pg-i13-ch:nth-child(4){background:linear-gradient(160deg,#10241a,#0b1020)}
.pg-i13-ch h4{margin:0;font:800 26px system-ui}
.pg-i13-ch p{margin:0;color:#a1a1aa;max-width:36ch}
.pg-i13-rail{display:flex;gap:6px;justify-content:center;padding:10px;background:#0b0f18;border-top:1px solid #1e2636}
.pg-i13-rail button{width:36px;height:28px;border-radius:99px;border:1px solid #2a3350;background:#121826;color:#9aa3c7;font:800 11px ui-monospace,monospace;cursor:pointer}
.pg-i13-rail button[aria-current=true]{background:#7c5cff;border-color:transparent;color:#fff}

.pg-i14{display:grid;place-items:center;padding:16px;background:#05060a}
.pg-i14-stage{position:relative;width:min(100%,320px);aspect-ratio:16/11;border-radius:16px;overflow:hidden;border:1px solid #2a3350;touch-action:none;user-select:none}
.pg-i14-a,.pg-i14-b{position:absolute;inset:0;display:grid;place-content:center;gap:4px;text-align:center}
.pg-i14-a{background:linear-gradient(145deg,#c4a574,#6b4423);color:#1a0f08}
.pg-i14-b{background:linear-gradient(145deg,#3f2a1a,#1a0f08);color:#f5e6d3;clip-path:inset(0 0 0 var(--p,50%))}
.pg-i14-a span,.pg-i14-b span{font:700 11px ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;opacity:.7}
.pg-i14-a b,.pg-i14-b b{font:800 32px system-ui}
.pg-i14-wipe{position:absolute;inset:0 auto 0 var(--p,50%);width:2px;background:#fff;box-shadow:0 0 0 1px #0006;pointer-events:none}
.pg-i14-wipe::after{content:"";position:absolute;top:50%;left:50%;translate:-50% -50%;width:28px;height:28px;border-radius:50%;background:#fff;border:2px solid #7c5cff;box-shadow:0 4px 14px #0008}
.pg-i14-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}

.pg-i15{padding:16px;background:radial-gradient(circle at 50% 0,#1a1040,#05060d 70%)}
.pg-i15-cap{margin:0 0 10px;color:#8b8fb0;font:12px ui-monospace,monospace}
.pg-i15-list{display:grid;gap:8px}
.pg-i15-card{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;border:1px solid #2a3350;background:#121826;color:#e5e7eb;font:700 14px system-ui;cursor:pointer;text-align:left}
.pg-i15-card:hover{border-color:#7c5cff}
.pg-i15-route{display:flex;flex-direction:column;gap:8px;height:100%}
.pg-i15-back{align-self:flex-start;padding:7px 14px;border-radius:99px;border:0;background:#ffffff1a;color:#fff;font:600 13px system-ui;cursor:pointer}
.pg-i15-t{margin:8px 0 0;font:800 24px system-ui}
.pg-i15-b{margin:0;color:#a78bfa;font:600 13px system-ui}
.pg-i15-route p{color:#93a0b8}
.pg-i15-card.vt,.pg-i15-route.vt{view-transition-name:pg15-route}


/* ===== NEW page 16–40 ===== */
.pg-i16{display:grid;place-items:center;gap:12px;background:#05060a;padding:12px}
.pg-i16-stage{position:relative;width:min(100%,300px);aspect-ratio:16/11;border-radius:14px;overflow:hidden;border:1px solid #2a3350;background:#0b1020}
.pg-i16-scene{position:absolute;inset:0;display:grid;place-content:center;gap:6px;text-align:center;padding:16px;background:linear-gradient(160deg,#1e1b4b,#0f172a)}
.pg-i16-scene h4{margin:0}.pg-i16-scene p{margin:0;color:#a5b4fc}
.pg-i16-curtain{position:absolute;top:0;bottom:0;width:52%;background:repeating-linear-gradient(90deg,#4c1d95 0 10px,#5b21b6 10px 20px);z-index:2;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.pg-i16-curtain.L{left:0;transform-origin:0 50%;box-shadow:inset -8px 0 20px #0008}
.pg-i16-curtain.R{right:0;transform-origin:100% 50%;box-shadow:inset 8px 0 20px #0008}
.pg-i16-stage[data-open=true] .L{transform:translateX(-102%)}
.pg-i16-stage[data-open=true] .R{transform:translateX(102%)}
.pg-i16-go{padding:9px 16px;border-radius:99px;border:0;background:#7c5cff;color:#fff;font:700 13px system-ui;cursor:pointer}
@media (prefers-reduced-motion:reduce){.pg-i16-curtain{transition:none}}

.pg-i17{display:grid;place-items:center;gap:12px;background:#07090f;padding:12px}
.pg-i17-stage{position:relative;width:min(100%,300px);aspect-ratio:16/11;border-radius:14px;overflow:hidden;border:1px solid #2a3350}
.pg-i17-page{position:absolute;inset:0;display:grid;place-content:center;gap:6px;text-align:center;padding:16px;background:linear-gradient(180deg,#38bdf8,#0ea5e9 40%,#0369a1)}
.pg-i17-page h4{margin:0;color:#0b1020}.pg-i17-page p{margin:0;color:#082f49}
.pg-i17-blinds{position:absolute;inset:0;z-index:2;display:grid;grid-template-rows:repeat(10,1fr);pointer-events:none}
.pg-i17-blinds::before{content:"";grid-row:1/-1;background:repeating-linear-gradient(#0b1020 0 9%,#1e293b 9% 10%);transition:transform .9s cubic-bezier(.2,.8,.2,1);transform-origin:50% 0;display:block;height:100%}
.pg-i17-stage[data-open=true] .pg-i17-blinds::before{transform:scaleY(0.06)}
.pg-i17-go{padding:9px 16px;border-radius:99px;border:1px solid #2a3350;background:#121826;color:#eee;font:700 13px system-ui;cursor:pointer}
@media (prefers-reduced-motion:reduce){.pg-i17-blinds::before{transition:none}}

.pg-i18{display:grid;place-items:center;gap:14px;background:radial-gradient(circle at 50% 0,#2a1848,#07090f 70%);padding:16px;height:100%}
.pg-i18-book{position:relative;width:min(100%,260px);height:170px;perspective:1000px;transform-style:preserve-3d}
.pg-i18-cover,.pg-i18-spread{position:absolute;inset:0;border-radius:8px;display:grid;place-content:center;gap:4px;text-align:center;padding:14px;backface-visibility:hidden}
.pg-i18-cover{background:linear-gradient(145deg,#4c1d95,#1e1b4b);border:1px solid #7c5cff66;z-index:3;transform-origin:0 50%;transition:transform .8s cubic-bezier(.2,.8,.2,1);color:#fff}
.pg-i18-cover b{font:800 28px system-ui}.pg-i18-cover span{font:600 12px system-ui;opacity:.8}
.pg-i18-spread{background:#161b2e;border:1px solid #2e3655}
.pg-i18-spread.L{right:50%;left:0;border-radius:8px 0 0 8px}.pg-i18-spread.R{left:50%;right:0;border-radius:0 8px 8px 0}
.pg-i18-spread h4{margin:0;font:800 16px system-ui}.pg-i18-spread p{margin:0;font:12px system-ui;color:#93a0b8}
.pg-i18[data-open=true] .pg-i18-cover{transform:rotateY(-150deg)}
.pg-i18-go{padding:9px 16px;border-radius:99px;border:1px solid #3b4660;background:#121826;color:#eee;font:700 13px system-ui;cursor:pointer}
@media (prefers-reduced-motion:reduce){.pg-i18-cover{transition:none}}

.pg-i19{display:grid;place-items:center;gap:14px;background:#05060a;padding:16px;height:100%}
.pg-i19-card{width:min(100%,260px);padding:22px;border-radius:16px;background:linear-gradient(160deg,#1e1b4b,#0f172a);border:1px solid #2a3350;text-align:center}
.pg-i19-card h4{margin:0 0 8px}.pg-i19-card p{margin:0;color:#93a0b8}
.pg-i19[data-state=out] .pg-i19-card{opacity:0;filter:blur(18px);transform:scale(1.35)}
.pg-i19[data-state=in] .pg-i19-card{animation:pg19in .7s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes pg19in{from{opacity:0;filter:blur(18px);transform:scale(1.35)}to{opacity:1;filter:blur(0);transform:scale(1)}}
.pg-i19-go{padding:9px 16px;border-radius:99px;border:0;background:#7c5cff;color:#fff;font:700 13px system-ui;cursor:pointer}
@media (prefers-reduced-motion:reduce){.pg-i19[data-state=in] .pg-i19-card{animation:none;opacity:1;filter:none;transform:none}}

.pg-i20{display:grid;place-items:center;gap:12px;background:#07090f;padding:16px;height:100%}
.pg-i20-stack{position:relative;width:min(100%,240px);height:180px}
.pg-i20-card{position:absolute;inset:0;border-radius:16px;background:linear-gradient(160deg,#1e293b,#0f172a);border:1px solid #334155;display:grid;place-content:center;gap:4px;text-align:center;transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .45s;opacity:0;pointer-events:none}
.pg-i20-card b{font:800 28px system-ui;color:#a78bfa}.pg-i20-card span{font:700 14px system-ui}
.pg-i20-card.on{opacity:1;pointer-events:auto;transform:translateY(0) scale(1);z-index:3}
.pg-i20-card[data-i]{transform:translateY(18px) scale(.94)}
.pg-i20-nav{display:flex;gap:8px}
.pg-i20-nav button{width:40px;height:36px;border-radius:99px;border:1px solid #2a3350;background:#121826;color:#fff;font:800 18px system-ui;cursor:pointer}
@media (prefers-reduced-motion:reduce){.pg-i20-card{transition:none}}

.pg-i21{display:grid;place-items:center;gap:10px;background:radial-gradient(circle at 50% 80%,#1a1040,#05060d 70%);padding:16px;height:100%}
.pg-i21-row{display:flex;align-items:center;justify-content:center;gap:0;perspective:900px;height:180px;width:100%}
.pg-i21-pg{width:90px;height:140px;margin:0 -18px;border-radius:12px;border:1px solid #ffffff22;background:linear-gradient(160deg,#312e81,#0f172a);color:#fff;font:800 28px system-ui;cursor:pointer;transform:translateX(calc(var(--i)*42px)) rotateY(calc(var(--i)*-42deg)) scale(calc(1 - (var(--i)*var(--i))*0.02));transition:transform .35s,opacity .35s;opacity:.55;z-index:calc(5 - abs(var(--i)))}
.pg-i21-pg.on{opacity:1;box-shadow:0 16px 40px #0008}
.pg-i21-cap{margin:0;color:#93a0b8;font:600 13px system-ui}
@media (prefers-reduced-motion:reduce){.pg-i21-pg{transition:none}}

.pg-i22{display:grid;align-content:start;gap:8px;padding:14px;background:#07090f;height:100%}
.pg-i22-ch{border:1px solid #2a3350;border-radius:12px;background:#121826;overflow:hidden}
.pg-i22-ch summary{padding:12px 14px;cursor:pointer;font:700 14px system-ui;list-style:none}
.pg-i22-ch summary::-webkit-details-marker{display:none}
.pg-i22-ch[open]{border-color:#7c5cff}
.pg-i22-ch p{margin:0;padding:0 14px 14px;color:#93a0b8}

.pg-i23{display:grid;grid-template-rows:1fr auto;height:100%;background:#05060a}
.pg-i23-map{position:relative;background:radial-gradient(circle at 30% 40%,#14532d44,#0b1020 50%),linear-gradient(160deg,#0f172a,#020617);min-height:180px}
.pg-i23-pin{position:absolute;left:var(--x);top:var(--y);translate:-50% -100%;width:28px;height:28px;border-radius:50% 50% 50% 0;rotate:-45deg;border:0;background:#7c5cff;color:#fff;font:800 11px system-ui;cursor:pointer;box-shadow:0 6px 16px #0008}
.pg-i23-pin span,.pg-i23-pin{line-height:28px;text-align:center}
.pg-i23-pin.on{background:#22c55e;transform:scale(1.1);z-index:2}
.pg-i23-card{padding:14px 16px;background:#0b0f18;border-top:1px solid #1e2636}
.pg-i23-card h4{margin:0 0 4px}.pg-i23-card p{margin:0;color:#a78bfa;font:600 13px system-ui}

.pg-i24{display:grid;place-items:center;padding:16px;background:#05060a;height:100%}
.pg-i24-stage{position:relative;width:min(100%,320px);aspect-ratio:16/11;border-radius:16px;overflow:hidden;border:1px solid #2a3350}
.pg-i24-a,.pg-i24-b{position:absolute;inset:0;display:grid;place-content:center;gap:4px;text-align:center}
.pg-i24-a{background:linear-gradient(145deg,#64748b,#1e293b);color:#e2e8f0}
.pg-i24-b{background:linear-gradient(145deg,#a78bfa,#4c1d95);color:#f5f3ff;clip-path:inset(0 0 0 var(--p,48%))}
.pg-i24-a span,.pg-i24-b span{font:700 11px ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;opacity:.7}
.pg-i24-a b,.pg-i24-b b{font:800 32px system-ui}
.pg-i24-wipe{position:absolute;inset:0 auto 0 var(--p,48%);width:2px;background:#fff;pointer-events:none}
.pg-i24-wipe::after{content:"";position:absolute;top:50%;left:50%;translate:-50% -50%;width:28px;height:28px;border-radius:50%;background:#fff;border:2px solid #7c5cff}
.pg-i24-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}

.pg-i25{display:grid;align-content:center;gap:14px;padding:18px;background:#07090f;height:100%}
.pg-i25-out{min-height:88px;margin:0;padding:14px;border-radius:12px;background:#0b0f18;border:1px solid #1e2636;color:#e9d5ff;font:600 15px/1.5 ui-monospace,monospace;white-space:pre-wrap}
.pg-i25-go{justify-self:start;padding:9px 16px;border-radius:99px;border:0;background:#7c5cff;color:#fff;font:700 13px system-ui;cursor:pointer}

.pg-i26{display:grid;grid-template-rows:1fr auto;height:100%;background:#05060a}
.pg-i26-sc{overflow:auto;padding:16px;overscroll-behavior:contain}
.pg-i26-sc p{margin:0 0 14px;color:#c7cbe6;line-height:1.55}
.pg-i26-sc a{color:#a78bfa;text-decoration:none}
.pg-i26-pad{height:80px;opacity:.5}
.pg-i26-notes{position:sticky;bottom:0;padding:10px 14px;background:#0b0f18ee;border-top:1px solid #1e2636;backdrop-filter:blur(8px);display:grid;gap:4px}
.pg-i26-notes p{margin:0;font:12px/1.35 system-ui;color:#93a0b8}
.pg-i26-notes b{color:#a78bfa;margin-right:6px}

.pg-i27{position:relative;height:100%;background:#05060a}
.pg-i27-sc{height:100%;overflow:auto;scroll-snap-type:y mandatory;overscroll-behavior:contain}
.pg-i27-sc section{min-height:100%;scroll-snap-align:start;scroll-snap-stop:always;display:grid;place-content:center;gap:8px;padding:24px;text-align:center}
.pg-i27-sc section:nth-child(1){background:linear-gradient(160deg,#1e1b4b,#0b1020)}
.pg-i27-sc section:nth-child(2){background:linear-gradient(160deg,#14243b,#0b1020)}
.pg-i27-sc section:nth-child(3){background:linear-gradient(160deg,#10241a,#0b1020)}
.pg-i27-sc h4{margin:0;font:800 28px system-ui}.pg-i27-sc p{margin:0;color:#93a0b8}
.pg-i27-dots{position:absolute;right:10px;top:50%;translate:0 -50%;display:grid;gap:6px}
.pg-i27-dots i{width:8px;height:8px;border-radius:50%;background:#ffffff33;display:block}
.pg-i27-dots i.on{background:#7c5cff}

.pg-i28{display:grid;align-content:center;gap:12px;padding:14px;background:#07090f;height:100%}
.pg-i28-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pg-i28-p{aspect-ratio:4/3;border-radius:10px;border:2px solid #2a3350;background:#121826;color:#e5e7eb;display:grid;place-content:center;gap:2px;cursor:pointer;font:inherit}
.pg-i28-p b{font:800 22px system-ui;color:#a78bfa}.pg-i28-p span{font:700 12px system-ui}
.pg-i28-p.on{border-color:#7c5cff;background:#1e1b4b;transform:scale(1.02)}
.pg-i28-cap{margin:0;text-align:center;color:#93a0b8;font:600 13px system-ui}

.pg-i29{display:grid;place-items:center;gap:12px;background:#0b1020;padding:16px;height:100%}
.pg-i29-desk{position:relative;width:min(100%,260px);height:180px}
.pg-i29-pol{position:absolute;left:50%;top:50%;width:90px;height:110px;margin:-55px -45px;background:#f8fafc;border-radius:4px;box-shadow:0 10px 24px #0008;display:grid;place-items:end center;padding:8px;transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.pg-i29-pol span{font:800 14px system-ui;color:#0b1020;background:#e2e8f0;width:100%;text-align:center;padding:4px 0;border-radius:2px}
.pg-i29[data-mode=scatter] .pg-i29-pol{transform:translate(var(--x),var(--y)) rotate(var(--r))}
.pg-i29[data-mode=gather] .pg-i29-pol{transform:translate(0,0) rotate(0)}
.pg-i29[data-mode=gather] .pg-i29-pol:nth-child(1){transform:translate(-48px,0)}
.pg-i29[data-mode=gather] .pg-i29-pol:nth-child(2){transform:translate(48px,0)}
.pg-i29[data-mode=gather] .pg-i29-pol:nth-child(3){transform:translate(-48px,20px)}
.pg-i29[data-mode=gather] .pg-i29-pol:nth-child(4){transform:translate(48px,20px)}
.pg-i29-go{padding:9px 16px;border-radius:99px;border:0;background:#7c5cff;color:#fff;font:700 13px system-ui;cursor:pointer}
@media (prefers-reduced-motion:reduce){.pg-i29-pol{transition:none}}

.pg-i30{height:100%;background:#05060a}
.pg-i30-sc{height:100%;overflow:auto;scroll-snap-type:y proximity;overscroll-behavior:contain}
.pg-i30-spread{min-height:85%;scroll-snap-align:start;padding:28px 20px;display:grid;align-content:center;gap:8px;border-bottom:1px solid #1e2636}
.pg-i30-spread:nth-child(1){background:linear-gradient(160deg,#1e1b4b,#0b1020)}
.pg-i30-spread:nth-child(2){background:linear-gradient(160deg,#3b0764,#0b1020)}
.pg-i30-spread:nth-child(3){background:linear-gradient(160deg,#0c4a6e,#0b1020)}
.pg-i30-spread b{font:800 24px system-ui}.pg-i30-spread p{margin:0;color:#93a0b8;max-width:34ch}

.pg-i31{display:grid;place-items:center;gap:16px;background:#07090f;padding:16px;height:100%}
.pg-i31-line{margin:0;display:flex;gap:4px;font:800 42px/1 system-ui;letter-spacing:.04em}
.pg-i31-line span{display:inline-block;opacity:0;transform:translateY(24px);animation:pg31in .5s cubic-bezier(.2,.8,.2,1) forwards}
.pg-i31-line span:nth-child(1){animation-delay:.02s}.pg-i31-line span:nth-child(2){animation-delay:.08s}.pg-i31-line span:nth-child(3){animation-delay:.14s}.pg-i31-line span:nth-child(4){animation-delay:.2s}.pg-i31-line span:nth-child(5){animation-delay:.26s}
@keyframes pg31in{to{opacity:1;transform:none}}
.pg-i31.replay .pg-i31-line span{animation:none;opacity:0;transform:translateY(24px)}
.pg-i31-go{padding:9px 16px;border-radius:99px;border:1px solid #2a3350;background:#121826;color:#eee;font:700 13px system-ui;cursor:pointer}
@media (prefers-reduced-motion:reduce){.pg-i31-line span{animation:none;opacity:1;transform:none}}

.pg-i32{position:relative;display:grid;place-items:center;background:#05060a;padding:16px;height:100%;overflow:hidden}
.pg-i32-page{position:absolute;inset:18px;border-radius:14px;padding:20px;background:linear-gradient(160deg,#1a2240,#0d1224);border:1px solid #2a3358;display:flex;flex-direction:column;gap:8px}
.pg-i32-page h4{margin:0}.pg-i32-page p{margin:0;color:#9aa3c7}
.pg-i32-page.b{background:linear-gradient(160deg,#14261c,#0b1510);border-color:#1f4d38}
.pg-i32[data-side=a] .b{visibility:hidden}.pg-i32[data-side=b] .a{visibility:hidden}
.pg-i32-blot{position:absolute;width:20px;height:20px;border-radius:50%;background:#7c5cff;left:50%;top:50%;translate:-50% -50%;scale:0;pointer-events:none;z-index:3;opacity:.9}
.pg-i32.inking .pg-i32-blot{animation:pg32ink .6s ease forwards}
@keyframes pg32ink{to{scale:28;opacity:.15}}
.pg-i32-go{position:relative;z-index:4;margin-top:auto;padding:9px 16px;border-radius:99px;border:0;background:#7c5cff;color:#fff;font:700 13px system-ui;cursor:pointer}
@media (prefers-reduced-motion:reduce){.pg-i32.inking .pg-i32-blot{animation:none}}

.pg-i33{display:grid;grid-template-rows:auto 1fr;height:100%;background:#07090f}
.pg-i33-tabs{display:flex;gap:6px;padding:10px;background:#0b0f18;border-bottom:1px solid #1e2636}
.pg-i33-tabs button{padding:8px 14px;border-radius:99px;border:1px solid #2a3350;background:#121826;color:#9aa3c7;font:700 12px system-ui;cursor:pointer}
.pg-i33-tabs button[aria-current=page]{background:#ffffff18;border-color:#7c5cff;color:#fff}
.pg-i33-glass{margin:16px;border-radius:16px;padding:20px;background:#ffffff10;border:1px solid #ffffff22;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 12px 40px #0006}
.pg-i33-glass h4{margin:0 0 8px}.pg-i33-glass p{margin:0;color:#c7cbe6}
.pg-i33-glass.swap{animation:pg33swap .45s ease}
@keyframes pg33swap{from{opacity:0;filter:blur(8px);transform:translateY(8px)}to{opacity:1;filter:none;transform:none}}
@media (prefers-reduced-motion:reduce){.pg-i33-glass.swap{animation:none}}

.pg-i34{padding:14px;background:#07090f;height:100%;display:grid;align-content:start;gap:8px}
.pg-i34-hd{display:flex;justify-content:space-between;align-items:center}
.pg-i34-re{padding:6px 12px;border-radius:99px;border:1px solid #2a3350;background:#121826;color:#dde;font:600 12px system-ui;cursor:pointer}
.pg-i34-row{display:flex;gap:10px;align-items:center;padding:10px;border-radius:12px;background:#121826;border:1px solid #1e2636}
.pg-i34-row i{width:28px;height:28px;border-radius:8px;background:#1e293b;display:grid;place-items:center;font-style:normal}
.pg-i34-row span{display:grid;gap:4px;flex:1}.pg-i34-row u{display:block;height:8px;border-radius:4px;background:linear-gradient(90deg,#1e293b,#334155,#1e293b);background-size:200% 100%;animation:pg34sh 1.2s linear infinite;text-decoration:none}
.pg-i34-row u:first-child{width:55%}.pg-i34-row u:last-child{width:35%}
.pg-i34-row b{font:700 13px system-ui}.pg-i34-row em{font:12px system-ui;color:#93a0b8;font-style:normal}
.pg-i34[data-state=loading] .live{display:none}
.pg-i34[data-state=ready] .sk{display:none}
.pg-i34[data-state=ready] .live{animation:pg34in .45s ease both;animation-delay:calc(var(--i)*.08s)}
@keyframes pg34sh{to{background-position:-200% 0}}
@keyframes pg34in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.pg-i34-row u,.pg-i34[data-state=ready] .live{animation:none}}

.pg-i35{display:grid;align-content:center;justify-items:center;gap:14px;padding:16px;background:#05060a;height:100%;position:relative}
.pg-i35-h{margin:0;color:#8b8fb0;font:12px ui-monospace,monospace}
.pg-i35-path{display:flex;gap:28px;align-items:center}
.pg-i35-path i{width:10px;height:10px;border-radius:50%;background:#2a3350;display:block}
.pg-i35-go{padding:9px 16px;border-radius:99px;border:0;background:#7c5cff;color:#fff;font:700 13px system-ui;cursor:pointer}
.pg-i35-toast{position:absolute;left:16px;bottom:16px;padding:10px 14px;border-radius:12px;background:#22c55e;color:#052e16;font:700 13px system-ui;box-shadow:0 10px 30px #0008;animation:pg35j .9s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes pg35j{0%{transform:translate(0,0);opacity:0}15%{opacity:1}40%{transform:translate(80px,-40px)}70%{transform:translate(160px,-10px)}100%{transform:translate(220px,-60px);opacity:0}}
@media (prefers-reduced-motion:reduce){.pg-i35-toast{animation:none;opacity:1}}

.pg-i36{position:relative;padding:14px;background:#07090f;height:100%}
.pg-i36-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;height:100%}
.pg-i36-th{border:0;border-radius:14px;background:linear-gradient(160deg,var(--c,#6366f1),#000 140%);color:#fff;font:800 22px system-ui;cursor:pointer}
.pg-i36-modal{position:absolute;inset:12px;border-radius:16px;background:#0b0f18;border:1px solid #2a3350;padding:16px;display:grid;grid-template-rows:auto 1fr auto;gap:10px;z-index:2}
.pg-i36-x{justify-self:end;width:32px;height:32px;border-radius:99px;border:0;background:#ffffff18;color:#fff;font:700 18px system-ui;cursor:pointer}
.pg-i36-hero{border-radius:14px;background:linear-gradient(160deg,var(--c,#6366f1),#000 140%);display:grid;place-items:center;font:800 48px system-ui;color:#fff;min-height:120px}
.pg-i36-t{margin:0}
.pg-i36-th.vt,.pg-i36-hero.vt{view-transition-name:pg36}

.pg-i37{display:grid;grid-template-rows:auto 1fr;height:100%;background:#05060a}
.pg-i37-bar{height:4px;background:#1e2636}.pg-i37-bar i{display:block;height:100%;width:var(--p,0%);background:#7c5cff;transition:width .15s}
.pg-i37-sc{overflow:auto;overscroll-behavior:contain}
.pg-i37-sc section{min-height:70%;padding:24px 18px;border-bottom:1px solid #1e2636}
.pg-i37-sc h4{margin:0 0 8px}.pg-i37-sc p{margin:0;color:#93a0b8}

.pg-i38{display:grid;place-items:center;padding:16px;background:#05060a;height:100%}
.pg-i38-frame{position:relative;width:min(100%,220px);aspect-ratio:9/14;border-radius:18px;overflow:hidden;border:1px solid #2a3350;background:#0b1020}
.pg-i38-prog{position:absolute;top:8px;left:8px;right:8px;display:flex;gap:4px;z-index:3}
.pg-i38-prog i{flex:1;height:3px;border-radius:99px;background:#ffffff33;overflow:hidden}
.pg-i38-prog i::after{content:"";display:block;height:100%;width:0;background:#fff}
.pg-i38-prog i.on::after{width:100%}
.pg-i38-prog i.live::after{animation:pg38p 2.4s linear forwards}
@keyframes pg38p{to{width:100%}}
.pg-i38-story{position:absolute;inset:0;display:grid;place-content:center;gap:8px;padding:24px;text-align:center;opacity:0;pointer-events:none;background:linear-gradient(160deg,#1e1b4b,#0b1020)}
.pg-i38-story.on{opacity:1;pointer-events:auto}
.pg-i38-story b{font:800 22px system-ui}.pg-i38-story p{margin:0;color:#c7cbe6}
.pg-i38-hit{position:absolute;top:0;bottom:0;width:40%;border:0;background:transparent;cursor:pointer;z-index:2}
.pg-i38-hit.L{left:0}.pg-i38-hit.R{right:0}
@media (prefers-reduced-motion:reduce){.pg-i38-prog i.live::after{animation:none;width:100%}}

.pg-i39{height:100%;background:#05060a}
.pg-i39-sc{height:100%;overflow:auto;overscroll-behavior:contain}
.pg-i39-hero{position:relative;height:220px;overflow:hidden}
.pg-i39-l{position:absolute;inset:0}
.pg-i39-l.sky{background:linear-gradient(#0ea5e9,#0369a1)}
.pg-i39-l.mid{background:radial-gradient(ellipse at 50% 120%,#14532d 0 40%,transparent 41%)}
.pg-i39-l.near{background:radial-gradient(ellipse at 30% 130%,#052e16 0 35%,transparent 36%),radial-gradient(ellipse at 80% 130%,#052e16 0 40%,transparent 41%)}
.pg-i39-l.title{display:grid;place-items:center}.pg-i39-l.title h4{margin:0;font:800 42px system-ui;letter-spacing:.2em;text-shadow:0 8px 30px #0008}
.pg-i39-body{padding:20px;display:grid;gap:12px}.pg-i39-body p{margin:0;color:#93a0b8}
@supports (animation-timeline: scroll()){
  .pg-i39-l{animation:pg39y linear both;animation-timeline:scroll(nearest);animation-range:0% 100%}
  @keyframes pg39y{to{transform:translateY(calc(var(--k)*120px))}}
}

.pg-i40{display:grid;grid-template-rows:1fr auto;height:100%;background:#000;padding:0 0 12px}
.pg-i40-sc{overflow:hidden;position:relative}
.pg-i40-roll{position:absolute;inset:auto 0;top:100%;width:100%;text-align:center;padding:20px;animation:none}
.pg-i40.rolling .pg-i40-roll{animation:pg40roll 8s linear forwards}
.pg-i40-role{margin:18px 0 4px;font:700 11px ui-monospace,monospace;letter-spacing:.18em;text-transform:uppercase;color:#7c5cff}
.pg-i40-name{margin:0;font:800 20px system-ui;color:#fff}
.pg-i40-go{justify-self:center;padding:9px 16px;border-radius:99px;border:1px solid #2a3350;background:#121826;color:#eee;font:700 13px system-ui;cursor:pointer}
@keyframes pg40roll{to{transform:translateY(calc(-100% - 240px))}}
@media (prefers-reduced-motion:reduce){.pg-i40.rolling .pg-i40-roll{animation:none;top:20px}}

/* === flooring demos 41–45 (2026-10-23) === */

/* 41 Plank sweep page transition (flooring) */
.fpg41,#demo-root .stage.page-stage .fpg41{background:#0c0a08}
.fpg41{height:340px;position:relative;color:#efe6da;display:flex;flex-direction:column;overflow:hidden;isolation:isolate}
.fpg41-nav{display:flex;gap:4px;padding:10px 10px 0;position:relative;z-index:1}
.fpg41-tab{flex:1;padding:7px 4px;border:1px solid #3a2e24;border-radius:9px;background:#17120e;color:#b9a896;font:700 12px system-ui;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.fpg41-tab:hover{color:#fff}
.fpg41-tab.on{background:linear-gradient(#c8955a,#9a6a3c);color:#1b120a;border-color:#e2b67f;box-shadow:inset 0 1px #ffe3b8aa,0 4px 14px #c8955a33}
.fpg41-view{position:relative;flex:1}
.fpg41-pg{position:absolute;inset:0;padding:18px 16px;display:none;flex-direction:column;justify-content:center;gap:8px}
.fpg41-pg.on{display:flex}
.fpg41-pg[data-p="0"]{background:radial-gradient(120% 80% at 80% 0,#3b2618,transparent 60%),radial-gradient(90% 70% at 0 100%,#1d2a22,transparent 60%)}
.fpg41-pg[data-p="1"]{background:radial-gradient(110% 90% at 20% 10%,#4a3220,transparent 60%),#100c09}
.fpg41-pg[data-p="2"]{background:radial-gradient(100% 90% at 100% 100%,#1e2b3a,transparent 60%),radial-gradient(80% 70% at 0 0,#2e2116,transparent 60%)}
.fpg41 h4{margin:0;font:800 25px/1.05 Georgia,'Times New Roman',serif;letter-spacing:-.01em;color:#fff6ea}
.fpg41-k{margin:0;font:700 10px ui-monospace,monospace;letter-spacing:.2em;text-transform:uppercase;color:#d9a86c}
.fpg41-s{margin:0;color:#b8a898;font-size:12.5px}
.fpg41-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:6px}
.fpg41-stats span{display:grid;padding:8px 6px;border-radius:10px;background:#ffffff08;border:1px solid #ffffff12;font-size:10px;color:#a8988a;text-align:center}
.fpg41-stats b{font:800 15px system-ui;color:#f3dcbc}
.fpg41-swr{display:flex;gap:6px}.fpg41-swr i{width:38px;height:38px;border-radius:8px;background:repeating-linear-gradient(176deg,#0000 0 5px,#0002 5px 6px),var(--c);box-shadow:inset 0 1px #fff4,0 6px 14px #0007}
.fpg41-pr{color:#f3c48a;font-size:16px}
.fpg41-hrs{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:5px}.fpg41-hrs li{display:flex;justify-content:space-between;padding:7px 10px;border-radius:9px;background:#ffffff08;border:1px solid #ffffff10;font-size:12.5px;color:#b9aa9a}.fpg41-hrs b{color:#fff1de}
.fpg41-cov{position:absolute;inset:0;z-index:3;pointer-events:none;perspective:700px;overflow:hidden}
.fpg41-cov.busy{pointer-events:auto}
.fpg41-pc{position:absolute;left:0;top:0;background-size:auto 100%;box-shadow:inset 0 1px #ffe9c855,inset 0 -1px #1a0d0599,inset -1px 0 #1a0d0588;will-change:transform,opacity;backface-visibility:hidden}
.fpg41-ul{position:absolute;inset:0;background:#1c110a;opacity:0}
.fpg41-hb{position:absolute;left:50%;top:50%;width:0;height:0;transform:rotate(45deg)}
.fpg41-stamp{position:absolute;left:50%;top:50%;z-index:2;transform:translate(-50%,-50%) rotate(-8deg) scale(1.6);padding:6px 12px;border:2px solid #fff4e6;border-radius:6px;font:800 12px ui-monospace,monospace;letter-spacing:.22em;text-transform:uppercase;color:#fff4e6;opacity:0;text-shadow:0 2px 6px #000a;box-shadow:0 0 0 3px #0003;background:#24170e99;backdrop-filter:blur(2px);white-space:nowrap;font-style:normal}
.fpg41-stamp.show{animation:fpg41stamp .55s cubic-bezier(.2,1.6,.4,1) forwards}
@keyframes fpg41stamp{to{opacity:1;transform:translate(-50%,-50%) rotate(-8deg) scale(1)}}
.fpg41-sheen{position:absolute;inset:-20%;z-index:1;background:linear-gradient(105deg,#0000 40%,#fff7e655 50%,#0000 60%);transform:translateX(-100%)}
.fpg41-pat{display:flex;gap:3px;padding:6px;margin:0 10px 10px;border-radius:11px;background:#16110d;border:1px solid #2e241b;position:relative;z-index:4}
.fpg41-pat button{flex:1;padding:6px 2px;border:0;border-radius:7px;background:none;color:#9d8b79;font:700 10.5px system-ui;cursor:pointer}
.fpg41-pat button[aria-checked="true"]{background:#2c2118;color:#f3d2a8;box-shadow:inset 0 1px #fff1}
@media (prefers-reduced-motion:reduce){.fpg41-stamp.show{animation:none;opacity:1;transform:translate(-50%,-50%) rotate(-8deg)}}

/* 42 Tile flip section reveal (flooring) */
.fpg42,#demo-root .stage.page-stage .fpg42{background:#0d0d0f}
.fpg42{height:340px;color:#ece8e1}
.fpg42-sc{height:100%;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#3a3631 transparent}
.fpg42-hd{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;background:#0d0d0fe6;backdrop-filter:blur(8px);border-bottom:1px solid #ffffff10;font-size:12.5px}
.fpg42-hd b{font:700 13px Georgia,serif;letter-spacing:.02em}
.fpg42-gr{display:flex;gap:6px}.fpg42-gr button{width:18px;height:18px;padding:0;border-radius:50%;border:2px solid #0d0d0f;background:var(--g);box-shadow:0 0 0 1px #ffffff30;cursor:pointer;transition:transform .2s,box-shadow .2s}
.fpg42-gr button[aria-checked="true"]{box-shadow:0 0 0 2px #f5d7a8;transform:scale(1.12)}
.fpg42-intro{margin:0;padding:34px 18px 60px;text-align:center;color:#9d968c;font-size:13px;line-height:1.6}.fpg42-intro em{color:#f2dcc0;font-style:normal;font-weight:700}
.fpg42-intro span{display:block;margin-top:10px;font-size:20px;color:#f2dcc0;animation:fpg42bob 1.4s ease-in-out infinite}
@keyframes fpg42bob{50%{transform:translateY(6px)}}
.fpg42-sec{padding:0 12px 34px}
.fpg42-pn{position:relative;height:150px;border-radius:10px;overflow:hidden;background:#2a2826;box-shadow:inset 0 0 0 1px #ffffff10,0 14px 30px #0008;perspective:600px}
.fpg42-pn::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,#fff5 45%,transparent 60%);transform:translateX(-120%);pointer-events:none;z-index:3}
.fpg42-sec.grouted .fpg42-pn{background:var(--grout);transition:background .9s .1s}
.fpg42-sec.grouted .fpg42-pn::after{transform:translateX(120%);transition:transform 1s cubic-bezier(.5,0,.3,1)}
.fpg42-t{position:absolute;transform-style:preserve-3d;transform:rotateY(180deg);cursor:pointer}
.fpg42-t>b{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.fpg42-t>.k{transform:rotateY(180deg);background:repeating-linear-gradient(45deg,#8d877e 0 3px,#6f6a63 3px 6px);box-shadow:inset 0 0 6px #0006}
.fpg42-t>.f{box-shadow:inset 1px 1px 0 #ffffff70,inset -1px -1px 0 #0000002e,inset 0 0 0 2px #ffffff10}
.fpg42-sec[data-k="subway"] .fpg42-t>.f{border-radius:2px;background:linear-gradient(158deg,#ffffffa8 0 9%,#fff0 24%,#fff0 70%,#ffffff26 86%,#fff0 92%),radial-gradient(120% 140% at 30% 20%,var(--c),color-mix(in srgb,var(--c),#3d4a44 18%))}
.fpg42-sec[data-k="hex"] .fpg42-t>b{clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
.fpg42-sec[data-k="hex"] .fpg42-t>.f{background:radial-gradient(90% 90% at 35% 25%,color-mix(in srgb,var(--c),#fff 22%),var(--c))}
.fpg42-sec[data-k="marble"] .fpg42-t>.f{background-repeat:no-repeat;box-shadow:inset 1px 1px 0 #ffffff90,inset -1px -1px 0 #00000022}
.fpg42-t.hit{animation:fpg42tap .42s ease}
@keyframes fpg42tap{20%{transform:rotateY(0) scale(.94)}45%{transform:rotateY(0) rotate(-2deg) scale(1.02)}70%{transform:rotateY(0) rotate(1deg)}}
.fpg42-tip{position:absolute;z-index:6;padding:3px 7px;border-radius:6px;background:#111;color:#bdf5c8;font:700 10px ui-monospace,monospace;white-space:nowrap;pointer-events:none;transform:translate(-50%,-100%);animation:fpg42tip 1.1s ease forwards;box-shadow:0 4px 12px #000a}
.fpg42-tip.bad{color:#ffc4a8}
@keyframes fpg42tip{0%{opacity:0;margin-top:4px}15%{opacity:1;margin-top:-6px}75%{opacity:1}100%{opacity:0;margin-top:-14px}}
.fpg42-tx{display:flex;flex-direction:column;gap:1px;padding:9px 2px 0;opacity:0;transform:translateY(8px);transition:opacity .5s .5s,transform .5s .5s}
.fpg42-sec.in .fpg42-tx{opacity:1;transform:none}
.fpg42-tx b{font:700 14px Georgia,serif;color:#fbf3e6}.fpg42-tx span{font-size:11.5px;color:#9a9288}
.fpg42-end{margin:0;padding:0 0 40px;text-align:center;color:#7d766d;font:12px ui-monospace,monospace}
@media (prefers-reduced-motion:reduce){.fpg42-intro span{animation:none}.fpg42-tx{transition:none}}

/* 43 Plank-by-plank loader (flooring) */
.fpg43,#demo-root .stage.page-stage .fpg43{background:radial-gradient(120% 70% at 50% 0,#2a1d13,#0b0806 75%)}
.fpg43{height:340px;display:flex;flex-direction:column;color:#f3e7d8}
.fpg43-room{position:relative;height:178px;margin:12px 12px 0;border-radius:12px;overflow:hidden;background:#1b130d;box-shadow:inset 0 0 0 1px #ffffff12,0 16px 30px #0009}
.fpg43-wall{position:absolute;left:0;right:0;top:0;height:64px;background:linear-gradient(#3b3330,#2a2320);box-shadow:inset 0 -10px 18px #0006}
.fpg43-win{position:absolute;left:18%;top:10px;width:58px;height:44px;border-radius:3px;background:linear-gradient(160deg,#ffe9c2,#f2b56a 60%,#c37a3c);box-shadow:0 0 0 3px #e9dfd3,0 0 26px #ffc87a66;}
.fpg43-win::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:3px;margin-left:-1.5px;background:#e9dfd3;box-shadow:0 0 0 0 #e9dfd3}
.fpg43-win::after{content:'';position:absolute;left:0;right:0;top:50%;height:3px;margin-top:-1.5px;background:#e9dfd3}
.fpg43-door{position:absolute;right:14%;bottom:0;width:36px;height:54px;border-radius:3px 3px 0 0;background:linear-gradient(90deg,#4a3b31,#3a2e26);box-shadow:0 0 0 3px #e9dfd3}
.fpg43-door::after{content:'';position:absolute;right:6px;top:28px;width:4px;height:4px;border-radius:50%;background:#e4c28a}
.fpg43-fw{position:absolute;left:-12%;right:-12%;top:64px;height:200px;transform-origin:50% 0;transform:perspective(420px) rotateX(40deg);overflow:hidden}
.fpg43-cv{display:block;width:100%;height:100%}
.fpg43-sheen{position:absolute;inset:0;background:linear-gradient(100deg,transparent 35%,#fff6e04d 48%,transparent 62%);transform:translateX(-120%);pointer-events:none}
.fpg43[data-state="done"] .fpg43-sheen{transform:translateX(120%);transition:transform 1.4s cubic-bezier(.5,0,.3,1) .5s}
.fpg43-room::after{content:'';position:absolute;left:14%;top:64px;width:34%;height:120px;background:linear-gradient(#ffd79a30,#ffd79a00);clip-path:polygon(20% 0,62% 0,100% 100%,0 100%);pointer-events:none;mix-blend-mode:screen}
.fpg43-hud{display:flex;align-items:flex-end;gap:12px;padding:10px 14px 0}
.fpg43-pct{display:flex;align-items:baseline;min-width:92px;font:800 46px/1 Georgia,'Times New Roman',serif;letter-spacing:-.03em;color:#fff3e2;font-variant-numeric:tabular-nums;text-shadow:0 4px 18px #d28a3c44}
.fpg43-pct small{font-size:20px;color:#d9a46a;margin-left:2px}
.fpg43-st{flex:1;display:flex;flex-direction:column;gap:3px;padding-bottom:6px;min-width:0}
.fpg43-msg{font:700 12px system-ui;color:#f1d2aa;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fpg43-sq{font:11px ui-monospace,monospace;color:#9a8a7a}
.fpg43-bar{display:block;height:5px;border-radius:9px;background:#ffffff12;overflow:hidden}.fpg43-bar i{display:block;height:100%;width:var(--p,0%);border-radius:inherit;background:repeating-linear-gradient(90deg,#c88a4c 0 14px,#a86e38 14px 15px);box-shadow:0 0 10px #e3a25c88}
.fpg43-ctl{display:flex;gap:8px;align-items:center;margin-top:auto;padding:0 12px 12px}
.fpg43-sp{display:flex;gap:4px;flex:1}
.fpg43-sp button{flex:1;padding:7px 2px;border-radius:8px;border:1px solid #3b2d22;background:#17110c;color:#bba894;font:700 11px system-ui;cursor:pointer;position:relative;overflow:hidden;white-space:nowrap}
.fpg43-sp button::before{content:'';display:inline-block;width:9px;height:9px;margin-right:4px;border-radius:2px;vertical-align:-1px;background:linear-gradient(135deg,var(--a),var(--b))}
.fpg43-sp button[aria-checked="true"]{border-color:#d29a5e;color:#ffe7c7;background:#2a1d13}
.fpg43-re{padding:7px 11px;border-radius:8px;border:1px solid #d29a5e;background:linear-gradient(#d39a5c,#a56a36);color:#1d120a;font:800 11.5px system-ui;cursor:pointer;white-space:nowrap}
.fpg43-re:active,.fpg43-sp button:active{transform:translateY(1px)}

/* 44 Molding header that shrinks to baseboard (flooring) */
.fpg44,#demo-root .stage.page-stage .fpg44{background:radial-gradient(100% 60% at 50% 100%,#f1ebe1,#ddd3c4)}
.fpg44{height:340px;position:relative;color:#2b211a;overflow:hidden}
.fpg44-hd{position:absolute;left:0;right:0;top:0;z-index:3;height:var(--h,122px);filter:drop-shadow(0 6px 8px #0000004d)}
.fpg44-cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.fpg44-in{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:0 14px;gap:2px;pointer-events:none}
.fpg44-br{font:800 calc(14px + 18px*var(--s,1))/1 Georgia,'Times New Roman',serif;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);text-shadow:0 1px 0 var(--hl),0 -1px 0 var(--sh)}
.fpg44-tg{font:700 10px ui-monospace,monospace;letter-spacing:.24em;text-transform:uppercase;color:var(--ink);opacity:calc(var(--s,1)*1.4 - .4);text-shadow:0 1px 0 var(--hl)}
.fpg44-nv{position:absolute;right:12px;top:50%;display:flex;gap:10px;transform:translateY(-50%);opacity:calc(1 - var(--s,1)*2.2);pointer-events:auto}
.fpg44-nv a{font:700 11px system-ui;color:var(--ink);text-decoration:none;text-shadow:0 1px 0 var(--hl)}
.fpg44[data-compact] .fpg44-in{flex-direction:row;align-items:center;justify-content:flex-start}
.fpg44[data-compact] .fpg44-tg{display:none}
.fpg44[data-fin="0"]{--ink:#4a3018;--hl:#ffe9c880;--sh:#2a170a55}
.fpg44[data-fin="1"]{--ink:#3a3530;--hl:#ffffffcc;--sh:#0000001f}
.fpg44[data-fin="2"]{--ink:#f4dfc4;--hl:#00000066;--sh:#ffffff22}
.fpg44-tag{position:absolute;right:10px;top:100%;margin-top:6px;display:flex;align-items:center;gap:6px;padding:4px 9px 4px 5px;border-radius:0 0 9px 9px;border:0;background:#1d1611;color:#f6e5cf;font:700 10.5px system-ui;cursor:pointer;box-shadow:0 6px 14px #0005;transform-origin:50% 0;animation:fpg44sw 3s ease-in-out infinite}
.fpg44-tag::before{content:'';position:absolute;left:50%;top:-6px;width:1px;height:6px;background:#1d1611}
@keyframes fpg44sw{50%{transform:rotate(-2.5deg)}}
.fpg44-tag svg{width:14px;height:21px;flex:none;background:#f3ead9;border-radius:3px}
.fpg44-sil{fill:#a0703f;stroke:#4a2e17;stroke-width:.6}
.fpg44[data-fin="1"] .fpg44-sil{fill:#e8e1d6}.fpg44[data-fin="2"] .fpg44-sil{fill:#5a3a24}
.fpg44-nm{white-space:nowrap}
.fpg44-fn{font-style:normal;font-weight:600;color:#c7a77f;border-left:1px solid #ffffff22;padding-left:6px}
.fpg44-sc{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;padding:160px 12px 26px;scrollbar-width:thin}
.fpg44-hint{margin:0 0 12px;font:12px/1.5 system-ui;color:#7b6a59;text-align:center}
.fpg44-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.fpg44-list li{display:flex;align-items:center;gap:10px;padding:10px;border-radius:12px;background:#f7f2ea;box-shadow:0 1px 0 #fff inset,0 6px 16px #5a3d2414;border:1px solid #d9cdbd}
.fpg44-list svg{width:40px;height:24px;flex:none;fill:#b07c48;stroke:#5b3a1e;stroke-width:1}
.fpg44-list div{flex:1;min-width:0;display:flex;flex-direction:column}
.fpg44-list b{font:700 13px Georgia,serif}.fpg44-list span{font-size:11px;color:#86735f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fpg44-list em{font:800 12px system-ui;font-style:normal;color:#8a4f1f}
.fpg44-end{margin:14px 0 0;text-align:center;font:11px ui-monospace,monospace;color:#8f7d6a}
@media (prefers-reduced-motion:reduce){.fpg44-tag{animation:none}}

/* 45 Sander cursor with sawdust trail (flooring) */
.fpg45,#demo-root .stage.page-stage .fpg45{background:#1a120c}
.fpg45{height:340px;position:relative;overflow:hidden;cursor:none;touch-action:none;user-select:none;-webkit-user-select:none}
.fpg45-cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.fpg45-sander{position:absolute;left:0;top:0;width:64px;height:64px;margin:-32px 0 0 -32px;pointer-events:none;z-index:2;will-change:transform;filter:drop-shadow(0 10px 10px #0008)}
.fpg45-pad{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,#0000 0 5px,#2a2a2a 5px 6px,#0000 6px),conic-gradient(from 0deg,#555 0 10%,#3a3a3a 10% 20%,#555 20% 30%,#3a3a3a 30% 40%,#555 40% 50%,#3a3a3a 50% 60%,#555 60% 70%,#3a3a3a 70% 80%,#555 80% 90%,#3a3a3a 90%);box-shadow:inset 0 0 0 3px #222,inset 0 0 0 5px #c9b48a;animation:fpg45spin .25s linear infinite paused}
.fpg45-pad::after{content:'';position:absolute;inset:14px;border-radius:50%;background:repeating-conic-gradient(#d9c39a 0 8deg,#b8a072 8deg 16deg);opacity:.5;mask:radial-gradient(circle,#0000 30%,#000 32%)}
.fpg45-body{position:absolute;left:14px;top:14px;width:36px;height:36px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffd34d,#f2a900 55%,#b87900);box-shadow:inset 0 -3px 6px #7a4f00,0 0 0 2px #2a2a2a}
.fpg45-body::after{content:'';position:absolute;left:50%;top:-30px;width:12px;height:34px;margin-left:-6px;border-radius:6px;background:linear-gradient(90deg,#333,#555,#333);transform:rotate(25deg);transform-origin:50% 100%}
.fpg45.on .fpg45-pad{animation-play-state:running}
@keyframes fpg45spin{to{transform:rotate(360deg)}}
.fpg45.on .fpg45-sander{animation:fpg45buzz .06s linear infinite}
@keyframes fpg45buzz{50%{translate:.6px -.5px}}
.fpg45-hud{position:absolute;left:10px;right:10px;top:10px;display:flex;justify-content:space-between;pointer-events:none;z-index:3}
.fpg45-hud span{padding:5px 9px;border-radius:99px;background:#140d08cc;backdrop-filter:blur(6px);border:1px solid #ffffff1a;color:#f1dcc0;font:700 11px ui-monospace,monospace}
.fpg45-pc b{color:#ffd28f}
.fpg45-grit.pop{animation:fpg45pop .5s cubic-bezier(.2,1.8,.4,1)}
@keyframes fpg45pop{40%{transform:scale(1.25);background:#d08a3a;color:#1a0f06}}
.fpg45-tip{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);margin:0;padding:8px 12px;border-radius:10px;background:#120b07d9;color:#f6e4cb;font:700 12px system-ui;white-space:nowrap;pointer-events:none;transition:opacity .4s;z-index:3}
.fpg45.used .fpg45-tip{opacity:0}
.fpg45-bar{position:absolute;left:10px;right:10px;bottom:10px;display:flex;gap:6px;z-index:3;cursor:auto}
.fpg45-bar button{flex:1;padding:8px 6px;border-radius:9px;border:1px solid #ffffff22;background:#160f0ae6;color:#f1dcc0;font:700 11.5px system-ui;cursor:pointer;backdrop-filter:blur(6px)}
.fpg45-bar .fpg45-rs{flex:0 0 38px}
.fpg45-fin:not(:disabled){background:linear-gradient(#e7b36e,#b97a3a);color:#1f1209;border-color:#ffd9a3;box-shadow:0 0 18px #e7a35e66;animation:fpg45glow 1.4s ease-in-out infinite}
@keyframes fpg45glow{50%{box-shadow:0 0 4px #e7a35e33}}
.fpg45-fin:disabled{opacity:.45;cursor:not-allowed}
.fpg45[data-stage="done"]{cursor:default}
.fpg45[data-stage="done"] .fpg45-sander{opacity:0;transition:opacity .3s}
@media (prefers-reduced-motion:reduce){.fpg45-pad,.fpg45.on .fpg45-sander,.fpg45-fin:not(:disabled){animation:none}}

.fpg45-done{position:absolute;left:50%;top:50%;z-index:3;margin:0;padding:10px 14px;border-radius:12px;background:#140c07e0;color:#ffe2b5;font:800 15px Georgia,serif;text-align:center;pointer-events:none;opacity:0;transform:translate(-50%,-30%) scale(.9);transition:opacity .5s,transform .6s cubic-bezier(.2,1.5,.4,1);white-space:nowrap}
.fpg45-done small{display:block;margin-top:3px;font:600 10.5px system-ui;color:#c9ad8a}
.fpg45.fin .fpg45-done{opacity:1;transform:translate(-50%,-50%)}

/* 46 Soft-close cabinet door page transition */
.kp46,#demo-root .stage.page-stage .kp46{background:#0d0b09}
.kp46{height:340px;position:relative;display:flex;flex-direction:column;color:#efe8dd;overflow:hidden;isolation:isolate}
.kp46-nav{display:flex;gap:4px;padding:10px 10px 0;position:relative;z-index:1}
.kp46-tab{flex:1;padding:7px 4px;border:1px solid #39322a;border-radius:9px;background:#17140f;color:#b8ab9a;font:700 12px system-ui;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.kp46-tab:hover{color:#fff}
.kp46-tab.on{background:linear-gradient(#f3efe6,#d6cfc2);color:#221a12;border-color:#fff;box-shadow:inset 0 1px #fff,0 4px 14px #fff2}
.kp46-view{position:relative;flex:1;margin:8px 10px 34px;border-radius:6px;overflow:hidden;background:linear-gradient(#efe9df,#d9d1c3);box-shadow:inset 0 0 0 6px #e8e2d6,inset 0 10px 22px #0003}
.kp46-pg{position:absolute;inset:0;padding:16px 16px;display:none;flex-direction:column;justify-content:center;gap:7px;color:#2a221a}
.kp46-pg.on{display:flex}
.kp46 h4{margin:0;font:800 22px/1.08 Georgia,'Times New Roman',serif;color:#1f1812}
.kp46-k{margin:0;font:700 10px ui-monospace,monospace;letter-spacing:.2em;text-transform:uppercase;color:#8a5a2e}
.kp46-s{margin:0;color:#6a5c4d;font-size:12.5px}
.kp46-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:4px}
.kp46-stats span{display:grid;padding:7px 4px;border-radius:9px;background:#fff8;border:1px solid #0001;font-size:10px;color:#7a6a58;text-align:center}
.kp46-stats b{font:800 15px system-ui;color:#2a1d10}
.kp46-sw{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.kp46-sw button{display:flex;flex-direction:column;align-items:center;gap:5px;padding:6px 2px;border-radius:9px;border:1px solid #0002;background:#fff8;color:#4a3c2e;font:700 10px system-ui;cursor:pointer}
.kp46-sw button::before{content:'';width:30px;height:40px;border-radius:3px;background:var(--kp46-c);box-shadow:inset 0 0 0 4px #0000,inset 3px 3px 0 1px #fff3,inset -2px -2px 0 1px #0002,0 4px 8px #0003}
.kp46-sw button[aria-checked="true"]{border-color:#8a5a2e;background:#fff;box-shadow:0 0 0 2px #c08a52}
.kp46-ln{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.kp46-ln li{display:flex;justify-content:space-between;padding:7px 10px;border-radius:9px;background:#fff9;border:1px solid #0001;font-size:12.5px;color:#5b4c3c}.kp46-ln b{color:#1f1610}
.kp46-box{position:absolute;left:10px;right:10px;top:52px;bottom:34px;perspective:900px;perspective-origin:50% 40%;pointer-events:none;z-index:3}
.kp46-box.kp46-busy{pointer-events:auto}
.kp46-dim{position:absolute;inset:0;background:#000;opacity:0;border-radius:6px}
.kp46-dr{position:absolute;top:0;bottom:0;width:50%;transform-style:preserve-3d;visibility:hidden}
.kp46-l{left:0;transform-origin:0 50%}.kp46-r{right:0;transform-origin:100% 50%}
.kp46-face,.kp46-back{position:absolute;inset:0 1px;border-radius:3px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.kp46-face{background:var(--kp46-tex,#ece9e1) center/cover;box-shadow:inset 0 0 0 1px #0004,inset 2px 2px 0 #fff5,inset -2px -2px 0 #0003}
.kp46-face::before{content:'';position:absolute;inset:22px 18px;border-radius:2px;background:var(--kp46-tex,#ece9e1) 40% 30%/cover;box-shadow:inset 3px 3px 4px #0006,inset -2px -2px 2px #fff6,0 0 0 2px #0001,0 0 0 4px #fff2}
.kp46-face::after{content:'';position:absolute;top:50%;width:6px;height:70px;margin-top:-35px;border-radius:3px;background:linear-gradient(90deg,#5b5b5b,#f1f1f1 45%,#8a8a8a);box-shadow:3px 4px 5px #0007}
.kp46-l .kp46-face::after{right:10px}.kp46-r .kp46-face::after{left:10px}
.kp46-sh{position:absolute;inset:0;background:linear-gradient(90deg,#000a,#0000 80%);opacity:.6;z-index:1;pointer-events:none}
.kp46-r .kp46-sh{background:linear-gradient(270deg,#000a,#0000 80%)}
.kp46-lb{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);padding:2px 6px;border-radius:3px;background:#fff;color:#333;font:700 8px ui-monospace,monospace;letter-spacing:.08em;white-space:nowrap;font-style:normal;box-shadow:0 1px 2px #0004;z-index:2}
.kp46-back{transform:rotateY(180deg);background:radial-gradient(circle at var(--kp46-hx,22px) 26%,#9a9a9a 0 9px,#6a6a6a 9px 10px,#d9d6cf 11px 13px,#0000 14px),radial-gradient(circle at var(--kp46-hx,22px) 74%,#9a9a9a 0 9px,#6a6a6a 9px 10px,#d9d6cf 11px 13px,#0000 14px),linear-gradient(#f2f0eb,#e1ddd5);box-shadow:inset 0 0 0 1px #0003}
.kp46-l .kp46-back{--kp46-hx:calc(100% - 22px)}
.kp46-bd{position:absolute;left:50%;top:50%;z-index:5;transform:translate(-50%,-50%);padding:5px 12px;border-radius:99px;background:#15110dcc;color:#fff3e3;font:800 12px ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;opacity:0;pointer-events:none;white-space:nowrap}
.kp46-bd.kp46-pop{animation:kp46-pop 1s ease forwards}
.kp46-bd.kp46-bang{background:#b42318;color:#fff;font-size:15px}
@keyframes kp46-pop{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}18%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}30%{transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{opacity:0}}
.kp46-soft{position:absolute;left:12px;bottom:8px;display:flex;align-items:center;gap:6px;font:600 11.5px system-ui;color:#c9bba8;cursor:pointer;z-index:4}
.kp46-soft input{accent-color:#c08a52;width:15px;height:15px;margin:0}
@media (prefers-reduced-motion:reduce){.kp46-bd.kp46-pop{animation:none;opacity:1}}

/* 47 Drawer pull page slide */
.kp47,#demo-root .stage.page-stage .kp47{background:linear-gradient(#e9e4dc 0 274px,#7a5634 274px)}
.kp47{height:340px;position:relative;overflow:hidden;color:#2a2018;user-select:none;-webkit-user-select:none}
.kp47::after{content:'';position:absolute;left:0;right:0;top:274px;bottom:0;background:repeating-linear-gradient(90deg,#0000 0 70px,#0003 70px 71px),repeating-linear-gradient(#8a6440 0 15px,#6f4d2c 15px 16px);box-shadow:inset 0 14px 18px -8px #0008;pointer-events:none}
.kp47-bs{position:absolute;left:0;right:0;top:0;height:26px;background:repeating-linear-gradient(90deg,#f4f1ec 0 30px,#d8d2c8 30px 31px),#f4f1ec;display:flex;align-items:center;justify-content:center}
.kp47-hint{font:700 10.5px ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:#7a6650;transition:opacity .4s}
.kp47-ct{position:absolute;left:4px;right:4px;top:26px;height:14px;border-radius:2px;background:linear-gradient(170deg,#0000 30%,#b9b2a822 31% 33%,#0000 34% 60%,#a69e9222 61% 62%,#0000 63%),linear-gradient(#fbfaf7,#e2ddd5);box-shadow:0 3px 4px #0004,inset 0 1px #fff;z-index:2}
.kp47-cab{position:absolute;left:8px;right:8px;top:40px;height:222px;background:#d9d3c8;box-shadow:inset 0 0 0 4px #e8e3da,inset 0 8px 10px #0003}
.kp47-toe{position:absolute;left:14px;right:14px;top:262px;height:12px;background:#2b2520;z-index:1}
.kp47-fr{position:absolute;left:12px;right:12px;height:66px;border:0;border-radius:3px;padding:0 12px;display:flex;align-items:flex-end;justify-content:space-between;gap:6px;padding-bottom:8px;cursor:grab;touch-action:none;transform-origin:50% 0;color:#3c2f22;background:var(--kp47-tex,#a99b88) center/cover;box-shadow:inset 0 0 0 1px #0004,inset 0 2px 0 #fff5,inset 0 -2px 0 #0002,0 calc(2px + var(--kp47-sh,0)*16px) calc(3px + var(--kp47-sh,0)*22px) #000a;z-index:3;will-change:transform}
.kp47-fr:active{cursor:grabbing}
.kp47-fr::before{content:'';position:absolute;left:50%;top:16px;width:92px;height:9px;margin-left:-46px;border-radius:5px;background:linear-gradient(#f4f4f4,#9a9a9a 55%,#5c5c5c);box-shadow:0 4px 5px #0006,inset 0 1px #fff}
.kp47-fr span{font:700 12px Georgia,serif;color:#2b2016;text-shadow:0 1px 0 #fff6}
.kp47-fr small{font:700 10px ui-monospace,monospace;color:#4a3828;opacity:.85}
.kp47-in{position:absolute;left:22px;right:22px;height:0;overflow:hidden;display:flex;align-items:flex-end;justify-content:center;gap:6px;padding:0 18px 8px;box-sizing:border-box;background:linear-gradient(#5e4a36 0 7px,#0000 7px),repeating-linear-gradient(90deg,#e7d4b2 0 18px,#dcc7a3 18px 19px,#e9d8b8 19px 41px,#d8c29d 41px 42px);box-shadow:inset 0 10px 14px #0006;z-index:2}
.kp47-in::before,.kp47-in::after{content:'';position:absolute;top:0;bottom:0;width:16px;background:linear-gradient(90deg,#c9b38e,#e3cfac);z-index:1}
.kp47-in::before{left:0;clip-path:polygon(0 0,40% 0,100% 100%,0 100%);box-shadow:inset -2px 0 #9aa3ad}
.kp47-in::after{right:0;clip-path:polygon(60% 0,100% 0,100% 100%,0 100%);background:linear-gradient(270deg,#bba580,#dcc8a4)}
.kp47-door{width:34px;height:52px;flex:none;border-radius:2px;background:var(--kp47-c);box-shadow:inset 0 0 0 5px var(--kp47-c),inset 6px 6px 0 0 #fff2,inset -6px -6px 0 0 #0002,inset 0 0 0 7px #0002,0 4px 6px #0005;transform:rotate(var(--kp47-r,-3deg))}
.kp47-door:nth-child(2){--kp47-r:2deg}.kp47-door:nth-child(3){--kp47-r:-1deg}.kp47-door:nth-child(4){--kp47-r:4deg}
.kp47-slab{width:58px;height:26px;flex:none;border-radius:2px;background:linear-gradient(#fff2,#0000 40%),var(--kp47-c);box-shadow:0 -4px 0 -1px color-mix(in srgb,var(--kp47-c),#000 20%),0 -8px 0 -2px var(--kp47-c),0 5px 6px #0005}
.kp47-roll{width:34px;height:34px;flex:none;border-radius:50%;background:radial-gradient(circle,#c8a983 0 6px,#6b4a2a 6px 7px,repeating-radial-gradient(circle,#ead8bd 0 1.5px,#d2b892 1.5px 2.5px));box-shadow:0 4px 6px #0005}
.kp47-pan{width:70px;height:18px;flex:none;border-radius:2px;background:linear-gradient(90deg,#3a3a3a 0 3px,#0000 3px),linear-gradient(#efebe4,#cfc8bb);box-shadow:0 4px 6px #0005}
.kp47-page{position:absolute;inset:0;z-index:9;padding:16px 16px 54px;background:linear-gradient(#5e4a36 0 8px,#0000 8px),repeating-linear-gradient(90deg,#efdfc1 0 36px,#e3cfac 36px 37px,#ecdbbb 37px 80px,#dfc9a3 80px 81px);box-shadow:inset 0 14px 22px #0005;display:flex;flex-direction:column;justify-content:center}
.kp47-pc{display:none;flex-direction:column;gap:7px}
.kp47-pc.on{display:flex}
.kp47 h4{margin:0;font:800 21px/1.1 Georgia,'Times New Roman',serif;color:#22180f}
.kp47-k{margin:0;font:700 10px ui-monospace,monospace;letter-spacing:.18em;text-transform:uppercase;color:#7c4f24}
.kp47-pc ul{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.kp47-pc li{display:flex;justify-content:space-between;padding:8px 10px;border-radius:8px;background:#fff9;box-shadow:0 2px 0 #0001;font-size:12.5px;color:#4b3b2b}.kp47-pc li b{color:#1f150c}
.kp47-x{position:absolute;left:16px;right:16px;bottom:12px;padding:9px;border-radius:10px;border:1px solid #6b4a2a;background:linear-gradient(#3b2b1d,#22170e);color:#f7e3c6;font:800 12px system-ui;cursor:pointer}
.kp47-x::after{content:' ↑'}

/* 48 Hot-press thermofoil loader */
.kp48,#demo-root .stage.page-stage .kp48{background:radial-gradient(120% 80% at 50% 0,#2b2622,#0d0b0a 70%)}
.kp48{height:340px;position:relative;color:#f1e9df;display:flex;flex-direction:column;overflow:hidden}
.kp48-cv{display:block;width:100%;height:206px;touch-action:manipulation;cursor:crosshair}
.kp48-card{position:absolute;left:50%;top:22px;display:flex;align-items:center;gap:10px;padding:10px 14px 10px 10px;border-radius:12px;background:#15110ee8;border:1px solid #ffffff1c;box-shadow:0 18px 40px #000b;transform:translate(-50%,-14px) scale(.85);opacity:0;pointer-events:none;transition:opacity .45s,transform .6s cubic-bezier(.2,1.5,.4,1)}
.kp48[data-st="done"] .kp48-card{opacity:1;transform:translate(-50%,0) scale(1)}
.kp48-door{width:46px;height:66px;border-radius:3px;flex:none;background:linear-gradient(115deg,#0000 30%,#fff8 42%,#0000 52%),var(--kp48-door,#f4f2ec);box-shadow:inset 0 0 0 6px #0000,inset 7px 7px 0 0 #ffffff30,inset -7px -7px 0 0 #00000026,inset 0 0 0 8px #0000001a,0 6px 12px #000a}
.kp48-card p{margin:0;display:flex;flex-direction:column;gap:2px}
.kp48-card b{font:800 16px Georgia,serif;color:#fff1dc}
.kp48-cs{font:600 11px ui-monospace,monospace;color:#c9b59b;white-space:nowrap}
.kp48-hud{display:flex;align-items:flex-end;gap:12px;padding:4px 14px 0}
.kp48-pct{display:flex;align-items:baseline;min-width:86px;font:800 42px/1 Georgia,'Times New Roman',serif;letter-spacing:-.03em;color:#fff4e4;font-variant-numeric:tabular-nums;text-shadow:0 4px 18px #ff6a2a40}
.kp48-pct small{font-size:18px;color:#ff9a5c;margin-left:2px}
.kp48-st{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;padding-bottom:4px}
.kp48-msg{font:700 12px system-ui;color:#ffd2ad;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kp48-msg.kp48-ask{color:#fff;animation:kp48-ask 1s ease-in-out infinite}
@keyframes kp48-ask{50%{color:#ff9a5c}}
.kp48-rd{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.kp48-rd>span{display:grid;gap:3px;font:600 10px ui-monospace,monospace;color:#a39484}
.kp48-rd b{color:#f6e2c8;font-weight:800}
.kp48-rd>span>i{display:block;height:4px;border-radius:9px;background:#ffffff14;overflow:hidden}
.kp48-rd>span>i>i{display:block;height:100%;width:0;border-radius:inherit}
.kp48-tb{background:linear-gradient(90deg,#f5b44a,#ff5a1f);box-shadow:0 0 8px #ff5a1f}
.kp48-vb{background:linear-gradient(90deg,#5ac8fa,#a3e1ff)}
.kp48-ctl{display:flex;gap:8px;align-items:center;margin-top:auto;padding:0 12px 12px}
.kp48-fl{display:flex;gap:4px;flex:1;min-width:0}
.kp48-fl button{flex:1;min-width:0;padding:7px 2px;border-radius:8px;border:1px solid #3a322b;background:#171310;color:#bfae9b;font:700 10.5px system-ui;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kp48-fl button::before{content:'';display:inline-block;width:9px;height:9px;margin-right:4px;border-radius:2px;vertical-align:-1px;background:var(--kp48-c);box-shadow:inset 0 0 0 1px #fff3}
.kp48-fl button[aria-checked="true"]{border-color:#ff8a4c;color:#ffe9d6;background:#2a1a12}
.kp48-go{padding:7px 12px;border-radius:8px;border:1px solid #ff8a4c;background:linear-gradient(#ff9a5c,#d9561f);color:#1d0d05;font:800 11.5px system-ui;cursor:pointer;white-space:nowrap}
.kp48-go:active,.kp48-fl button:active{transform:translateY(1px)}
@media (prefers-reduced-motion:reduce){.kp48-msg.kp48-ask{animation:none}.kp48-card{transition:none}}

/* 49 Crown-moulding header with raking light */
.kp49,#demo-root .stage.page-stage .kp49{background:#efeae2}
.kp49{height:340px;position:relative;overflow:hidden;color:#2b231b}
.kp49-hd{position:absolute;left:0;right:0;top:0;z-index:3;height:var(--kp49-h,118px);background:#e9e3d9;filter:drop-shadow(0 6px 7px #0000004a)}
.kp49-cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.kp49-in{position:absolute;left:14px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:1px;pointer-events:none}
.kp49-br{font:800 calc(15px + 13px*var(--kp49-s,1))/1 Georgia,'Times New Roman',serif;letter-spacing:.05em;text-transform:uppercase;color:var(--kp49-ink);text-shadow:calc(var(--kp49-lx,0)*-1px) 1px 0 var(--kp49-hl),calc(var(--kp49-lx,0)*1px) -1px 0 var(--kp49-dk)}
.kp49-tg{font:700 9.5px ui-monospace,monospace;letter-spacing:.22em;text-transform:uppercase;color:var(--kp49-ink);opacity:calc(var(--kp49-s,1)*1.6 - .6)}
.kp49[data-fin="0"]{--kp49-ink:#5a4a3a;--kp49-hl:#ffffffaa;--kp49-dk:#0000002a}
.kp49[data-fin="1"]{--kp49-ink:#2c2a27;--kp49-hl:#ffffff55;--kp49-dk:#00000040}
.kp49[data-fin="2"]{--kp49-ink:#f6e3c9;--kp49-hl:#00000055;--kp49-dk:#ffffff30}
.kp49-step{position:absolute;right:8px;bottom:6px;padding:3px 8px;border-radius:99px;background:#1b1612d9;color:#f7e6cf;font:700 10px ui-monospace,monospace;white-space:nowrap;transition:opacity .3s}
.kp49-sc{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;padding:126px 12px 24px;scrollbar-width:thin}
.kp49-up{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:-8px -12px 12px;padding:0 6px 6px;background:#d9d2c6}
.kp49-up i{height:70px;border-radius:2px;background:var(--kp49-door,#eeebe4);box-shadow:inset 0 0 0 6px var(--kp49-door,#eeebe4),inset 7px 7px 0 0 #ffffff26,inset -7px -7px 0 0 #0000001f,inset 0 0 0 8px #0000001a,0 3px 5px #0003}
.kp49-fin{display:flex;gap:4px;margin-bottom:10px}
.kp49-fin button{flex:1;padding:7px 2px;border-radius:8px;border:1px solid #cfc5b6;background:#f8f4ee;color:#5b4b3a;font:700 10.5px system-ui;cursor:pointer}
.kp49-fin button[aria-checked="true"]{background:#2b221a;color:#fbefdc;border-color:#2b221a}
.kp49-list{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.kp49-list li{display:grid;grid-template-columns:1fr auto;padding:9px 10px;border-radius:11px;background:#fbf8f3;border:1px solid #e0d6c7;box-shadow:0 5px 14px #5a3d240f}
.kp49-list b{font:700 13px Georgia,serif}.kp49-list span{grid-column:1;font-size:11px;color:#86735f}.kp49-list em{grid-row:1/3;grid-column:2;align-self:center;font:800 12.5px system-ui;font-style:normal;color:#8a4f1f}
.kp49-end{margin:12px 0 0;text-align:center;font:11px ui-monospace,monospace;color:#8f7d6a}

/* 50 Screwdriver cursor that hangs the door */
.kp50,#demo-root .stage.page-stage .kp50{background:radial-gradient(90% 70% at 50% 40%,#3b3027,#14100d 80%)}
.kp50{height:340px;position:relative;overflow:hidden;cursor:none;touch-action:none;user-select:none;-webkit-user-select:none;perspective:900px;color:#f2e6d6}
.kp50::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,#0000 0 60px,#0002 60px 61px),repeating-linear-gradient(0deg,#0000 0 22px,#ffffff06 22px 23px);pointer-events:none}
.kp50-hud{position:absolute;left:10px;right:10px;top:10px;display:flex;justify-content:space-between;z-index:3;pointer-events:none}
.kp50-hud span{padding:5px 9px;border-radius:99px;background:#120d0acc;border:1px solid #ffffff1a;font:700 11px ui-monospace,monospace;color:#f0dcc0}
.kp50-hud b{color:#ffd28f}.kp50-sp b{color:#ff9b8a}
.kp50-door{position:absolute;left:50%;top:42px;width:min(210px,62%);height:226px;margin-left:calc(min(210px,62%)/-2 + 14px);transform-style:preserve-3d;transition:transform 1.1s cubic-bezier(.5,0,.2,1)}
.kp50-bk,.kp50-fr{position:absolute;inset:0;border-radius:3px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.kp50-bk{background:linear-gradient(135deg,#f6f4ef,#e3dfd7);box-shadow:inset 0 0 0 1px #0003,inset 0 0 0 3px #fff8,0 18px 34px #000b;isolation:isolate}
.kp50-cup{position:absolute;left:8px;width:30px;height:30px;margin-top:-15px;border-radius:50%;background:radial-gradient(circle at 50% 50%,#9c9c9c 0 8px,#d4d4d4 9px 12px,#7d7d7d 13px 14px,#5d5d5d 14px);box-shadow:0 0 0 2px #c8c3ba,inset 0 2px 3px #0008}
.kp50-cup::before{content:'';position:absolute;right:20px;top:7px;width:54px;height:16px;border-radius:4px;background:linear-gradient(#e2e2e2,#9b9b9b 60%,#7a7a7a);box-shadow:0 3px 5px #0006,inset 0 1px #fff}
.kp50-cup::after{content:'';position:absolute;left:4px;top:-30px;width:22px;height:90px;border-radius:6px;background:linear-gradient(90deg,#bdbdbd,#e9e9e9 50%,#a9a9a9);box-shadow:0 2px 4px #0005;z-index:-1}
.kp50-sw{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;padding:0;border:0;border-radius:50%;background:none;cursor:none;z-index:2}
.kp50-sw::before{content:'';position:absolute;inset:-6px;border-radius:50%;background:conic-gradient(var(--kp50-rc,#ffcf5a) calc(var(--kp50-p,0)*1turn),#0000 0);mask:radial-gradient(circle,#0000 15px,#000 16px);-webkit-mask:radial-gradient(circle,#0000 15px,#000 16px);opacity:.95}
.kp50-sw.kp50-near::after{content:'';position:absolute;inset:-9px;border-radius:50%;border:1.5px dashed #ffcf5a;animation:kp50-spinr 2s linear infinite}
@keyframes kp50-spinr{to{transform:rotate(1turn)}}
.kp50-hd{position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:linear-gradient(var(--kp50-x,#4a4a4a),var(--kp50-x,#4a4a4a)) 50% 50%/2.5px 9px no-repeat,linear-gradient(var(--kp50-x,#4a4a4a),var(--kp50-x,#4a4a4a)) 50% 50%/9px 2.5px no-repeat,radial-gradient(circle at 35% 30%,#ffffff,#b9bcc0 45%,#6f7378);transform:translate(calc((1 - var(--kp50-d,0))*-3px),calc((1 - var(--kp50-d,0))*-4px)) rotate(var(--kp50-a,0deg)) scale(calc(1.25 - var(--kp50-d,0)*.25));box-shadow:calc((1 - var(--kp50-d,0))*4px) calc((1 - var(--kp50-d,0))*6px) calc(2px + (1 - var(--kp50-d,0))*3px) #000a}
.kp50-sw.kp50-in{--kp50-rc:#4ade80}
.kp50-sw.kp50-bad{--kp50-rc:#f87171;--kp50-x:#7a2b22}
.kp50-sw.kp50-bad .kp50-hd{background:radial-gradient(circle,#2a0f0b 0 3px,#0000 4px),linear-gradient(45deg,#0000 40%,#3a1a14 41% 59%,#0000 60%),linear-gradient(-45deg,#0000 40%,#3a1a14 41% 59%,#0000 60%),radial-gradient(circle at 35% 30%,#fff,#b9bcc0 45%,#6f7378)}
.kp50-lbl{position:absolute;right:8px;bottom:8px;font:700 8.5px ui-monospace,monospace;color:#8f877b;letter-spacing:.04em}
.kp50-fr{transform:rotateY(180deg);background:var(--kp50-tex,#8f8a82) center/cover;box-shadow:inset 0 0 0 1px #0005,inset 2px 2px 0 #fff4,0 18px 34px #000b}
.kp50-fr::before{content:'';position:absolute;inset:26px 22px;border-radius:2px;background:var(--kp50-tex,#8f8a82) 30% 40%/cover;box-shadow:inset 3px 3px 4px #0007,inset -2px -2px 2px #fff5}
.kp50-pull{position:absolute;left:12px;top:50%;width:6px;height:64px;margin-top:-32px;border-radius:3px;background:linear-gradient(90deg,#4a4a4a,#eee 45%,#777);box-shadow:3px 4px 5px #0007}
.kp50-ok{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;padding:9px 12px;border-radius:10px;background:#140d08e6;text-align:center;white-space:nowrap;display:flex;flex-direction:column;gap:2px}
.kp50-ok b{font:800 16px Georgia,serif;color:#ffe2b5}.kp50-sum{font:600 10.5px ui-monospace,monospace;color:#d8bf9c}
.kp50.kp50-hung .kp50-door{transform:rotateY(180deg)}
.kp50-tip{position:absolute;left:0;right:0;bottom:44px;margin:0;text-align:center;font:600 11.5px system-ui;color:#cdb9a0;pointer-events:none;transition:opacity .4s}
.kp50.kp50-used .kp50-tip{opacity:0}
.kp50-drv{position:absolute;left:0;top:0;width:0;height:0;z-index:5;pointer-events:none;will-change:transform;transition:opacity .2s}
.kp50-shaft{position:absolute;left:-2px;top:-74px;width:4px;height:76px;border-radius:1px 1px 2px 2px;background:linear-gradient(90deg,#777,#f4f4f4 45%,#8a8a8a);clip-path:polygon(0 0,100% 0,100% 92%,50% 100%,0 92%);transform-origin:50% 100%}
.kp50-hdl{position:absolute;left:-9px;top:-134px;width:18px;height:62px;border-radius:9px 9px 6px 6px;background:repeating-linear-gradient(90deg,#0000 0 3px,#0004 3px 5px) var(--kp50-ro,0) 0/8px 100%,linear-gradient(#f59e0b 0 70%,#1f1f1f 70%);box-shadow:inset -3px 0 4px #0005,inset 3px 0 3px #fff4,4px 10px 12px #0007}
.kp50-drv>i{transform:rotate(28deg);transform-origin:9px 134px}
.kp50-drv .kp50-shaft{transform-origin:2px 74px}
.kp50-rs{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);padding:7px 14px;border-radius:9px;border:1px solid #ffffff26;background:#1a120ce6;color:#f1dcc0;font:700 11.5px system-ui;cursor:pointer;z-index:6}
.kp50-bit{position:absolute;width:3px;height:3px;border-radius:1px;pointer-events:none;z-index:4}
.kp50-msg{position:absolute;z-index:6;padding:3px 7px;border-radius:6px;background:#111;font:800 10px ui-monospace,monospace;white-space:nowrap;pointer-events:none;transform:translate(-50%,-150%);animation:kp50-up 1s ease forwards}
@keyframes kp50-up{0%{opacity:0}15%{opacity:1}80%{opacity:1}100%{opacity:0;margin-top:-14px}}
@media (prefers-reduced-motion:reduce){.kp50-door{transition:none}.kp50-sw.kp50-near::after{animation:none}}

/* 51 Curtain closet page transition */
.kp51,#demo-root .stage.page-stage .kp51{background:#16130f}
.kp51{height:340px;position:relative;display:flex;flex-direction:column;color:#efe6da;overflow:hidden}
.kp51-nav{display:flex;gap:4px;padding:10px 10px 0}
.kp51-tab{flex:1;padding:7px 4px;border:1px solid #3a3128;border-radius:9px;background:#1d1813;color:#bcae9c;font:700 12px system-ui;cursor:pointer;transition:background .25s,color .25s}
.kp51-tab:hover{color:#fff}
.kp51-tab.on{background:linear-gradient(#e0c48e,#b48c4e);color:#1e150b;border-color:#f1d9a6}
.kp51-view{position:relative;flex:1;margin:8px 10px 6px;border-radius:6px;overflow:hidden;background:linear-gradient(#efe8dc,#dcd2c2);box-shadow:inset 0 0 0 5px #f6f1e9,inset 0 12px 20px #0003;touch-action:pan-y;cursor:grab}
.kp51-pg{position:absolute;inset:0;padding:22px 50px 12px;display:none;flex-direction:column;justify-content:center;gap:6px;color:#2a2119}
.kp51-pg.on{display:flex}
.kp51 h4{margin:0;font:800 21px/1.1 Georgia,'Times New Roman',serif;color:#21180f}
.kp51-k{margin:0;font:700 10px ui-monospace,monospace;letter-spacing:.18em;text-transform:uppercase;color:#8a5a2e}
.kp51-s{margin:0;color:#6c5d4c;font-size:12px}
.kp51-rod{position:relative;display:flex;gap:6px;justify-content:center;padding-top:10px;margin-top:4px;border-top:3px solid #b8b2a8}
.kp51-rod i{width:22px;height:46px;border-radius:3px 3px 6px 6px;background:var(--kp51-g,#7a8ca0);clip-path:polygon(50% 0,100% 18%,92% 100%,8% 100%,0 18%)}
.kp51-rod i:nth-child(2){--kp51-g:#c9a27a}.kp51-rod i:nth-child(3){--kp51-g:#2f3a4a}.kp51-rod i:nth-child(4){--kp51-g:#e9e3d6}.kp51-rod i:nth-child(5){--kp51-g:#8a4b3c}.kp51-rod i:nth-child(6){--kp51-g:#5b6b4f}
.kp51-sh{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:4px}
.kp51-sh i{height:44px;border-radius:3px;background:linear-gradient(#0000 0 70%,#b9ad99 70% 76%,#0000 76%),repeating-linear-gradient(90deg,#d5c9b6 0 9px,#9a7c5c 9px 11px);box-shadow:inset 0 0 0 2px #fff6}
.kp51-ln{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.kp51-ln li{display:flex;justify-content:space-between;padding:6px 9px;border-radius:8px;background:#fff9;font-size:12px;color:#584939}.kp51-ln b{color:#1f160d}
.kp51-cv{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.kp51-fab{display:flex;gap:4px;align-items:center;padding:0 10px 10px}
.kp51-fab button{flex:1;padding:7px 2px;border-radius:8px;border:1px solid #3a3128;background:#1d1813;color:#bcae9c;font:700 11px system-ui;cursor:pointer}
.kp51-fab button[aria-checked="true"]{border-color:#e0c48e;color:#fff2da;background:#2c2218}
.kp51-hint{flex:none;font:600 10px ui-monospace,monospace;color:#8f8070;padding-left:4px}

/* 52 Hanger cursor that hangs closet sections */
.kp52,#demo-root .stage.page-stage .kp52{background:linear-gradient(#f3eee6 0 150px,#e4dccf 150px)}
.kp52{height:340px;position:relative;overflow:hidden;color:#2b2119;cursor:none;touch-action:none;user-select:none;-webkit-user-select:none}
.kp52::before{content:'';position:absolute;left:0;right:0;top:150px;height:2px;background:#cbbfae}
.kp52-top{position:absolute;left:12px;right:12px;top:9px;display:flex;justify-content:space-between;align-items:center;gap:8px;font:700 11.5px system-ui}
.kp52-top b{font:800 13px Georgia,serif}
.kp52-sum{padding:4px 9px;border-radius:99px;background:#2a2019;color:#fbe9cf;font:700 10.5px ui-monospace,monospace;white-space:nowrap;transition:background .3s}
.kp52-sum.kp52-ok{background:#166534;color:#dcfce7}.kp52-sum.kp52-over{background:#b42318;color:#fff}
.kp52-rod{position:absolute;left:0;top:0;width:100%;height:150px;overflow:visible;pointer-events:none}
.kp52-rp{fill:none;stroke:#b9bfc6;stroke-width:5;stroke-linecap:round;filter:drop-shadow(0 3px 2px #0003)}
.kp52-e1,.kp52-e2{fill:#8d949c}
.kp52.kp52-heavy .kp52-rp{stroke:#d97757}
.kp52-tip{position:absolute;left:0;right:0;top:120px;margin:0;text-align:center;font:600 11px system-ui;color:#8c7a66;pointer-events:none;transition:opacity .4s}
.kp52.kp52-used .kp52-tip{opacity:0}
.kp52-cd{position:absolute;left:0;top:0;width:var(--kp52-cw,140px);height:66px;padding:0;border:0;background:none;cursor:none;transform-origin:50% -24px;will-change:transform;color:inherit;font:inherit;text-align:left}
.kp52-hg{position:absolute;left:50%;top:-30px;width:60px;height:24px;margin-left:-30px;overflow:visible;opacity:0;transition:opacity .2s}
.kp52-hg path,.kp52-cur path{fill:none;stroke:#9aa1a8;stroke-width:2.4;stroke-linecap:round}
.kp52-hg .kp52-wb,.kp52-cur .kp52-wb{fill:#b9824a;stroke:#6d4523;stroke-width:1.2}
.kp52-cd.kp52-up .kp52-hg{opacity:1}
.kp52-bd{position:absolute;inset:0;display:grid;grid-template-columns:38px 1fr auto;grid-template-rows:auto auto;column-gap:8px;align-items:center;padding:8px 10px;border-radius:10px;background:#fffdf9;border:1px solid #d7cbb9;box-shadow:0 6px 14px #5a3d241f;box-sizing:border-box}
.kp52-cd.kp52-up .kp52-bd{box-shadow:0 14px 22px #3a28182e}
.kp52-cd:focus-visible .kp52-bd{outline:2px solid #2a2019;outline-offset:2px}
.kp52-bd b{font:700 12.5px Georgia,serif;align-self:end}.kp52-bd small{grid-column:2;font:600 10px system-ui;color:#86735f;align-self:start}.kp52-bd em{grid-row:1/3;grid-column:3;font:800 12px system-ui;font-style:normal;color:#8a4f1f}
.kp52-il{grid-row:1/3;width:38px;height:46px;border-radius:4px;background:#efe6d8;box-shadow:inset 0 0 0 2px #d6c7b1;position:relative;overflow:hidden}
.kp52-cd[data-k="dbl"] .kp52-il{background:linear-gradient(#9aa1a8 0 0) 50% 6px/80% 2px no-repeat,linear-gradient(#9aa1a8 0 0) 50% 26px/80% 2px no-repeat,repeating-linear-gradient(90deg,#7a8ca0 0 4px,#0000 4px 7px) 50% 8px/80% 14px no-repeat,repeating-linear-gradient(90deg,#c9a27a 0 4px,#0000 4px 7px) 50% 28px/80% 14px no-repeat,#efe6d8}
.kp52-cd[data-k="long"] .kp52-il{background:linear-gradient(#9aa1a8 0 0) 50% 6px/80% 2px no-repeat,repeating-linear-gradient(90deg,#8a4b3c 0 5px,#0000 5px 8px) 50% 8px/80% 34px no-repeat,#efe6d8}
.kp52-cd[data-k="shelf"] .kp52-il{background:repeating-linear-gradient(#0000 0 7px,#b9a27f 7px 9px),#efe6d8}
.kp52-cd[data-k="shoe"] .kp52-il{background:radial-gradient(ellipse 4px 2.5px,#5b4636 90%,#0000) 0 0/9px 9px,repeating-linear-gradient(#0000 0 8px,#cbb796 8px 9px),#efe6d8}
.kp52-cur{position:absolute;left:0;top:0;transform:translate(-99px,-99px);width:60px;height:24px;margin:-2px 0 0 -38px;overflow:visible;pointer-events:none;z-index:9;filter:drop-shadow(0 4px 4px #0004);transition:opacity .15s}
.kp52.kp52-hold .kp52-cur{opacity:0}

/* 53 Garment-bag zipper loader */
.kp53,#demo-root .stage.page-stage .kp53{background:radial-gradient(90% 70% at 50% 30%,#ece6dc,#cfc5b6)}
.kp53{height:340px;position:relative;overflow:hidden;color:#2a2119;display:flex;flex-direction:column}
.kp53-cv{display:block;width:100%;height:288px;touch-action:none;cursor:grab}
.kp53-done{position:absolute;left:50%;top:44%;width:min(270px,86%);padding:14px 14px 12px;border-radius:14px;background:#fffdf8;box-shadow:0 22px 44px #3b2a1a40,0 0 0 1px #e2d6c4;transform:translate(-50%,-40%) scale(.9);opacity:0;pointer-events:none;transition:opacity .5s .25s,transform .7s .25s cubic-bezier(.2,1.4,.4,1);box-sizing:border-box}
.kp53[data-st="done"] .kp53-done{opacity:1;transform:translate(-50%,-50%) scale(1);pointer-events:auto}
.kp53 h4{margin:2px 0 8px;font:800 20px/1.1 Georgia,'Times New Roman',serif;color:#1f160e}
.kp53-k{margin:0;font:700 10px ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;color:#8a5a2e}
.kp53-done ul{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.kp53-done li{display:flex;justify-content:space-between;gap:8px;padding:7px 9px;border-radius:8px;background:#f4ede2;font-size:12px;color:#5b4b3b}.kp53-done li b{color:#1f160e;white-space:nowrap}
.kp53-hud{display:flex;align-items:center;gap:10px;padding:0 12px;height:52px;background:#2a221bf2;color:#f6e9d6}
.kp53-pct{display:flex;align-items:baseline;min-width:62px;font:800 28px/1 Georgia,serif;font-variant-numeric:tabular-nums}
.kp53-pct small{font-size:14px;color:#e3b873;margin-left:1px}
.kp53-msg{flex:1;min-width:0;font:700 12px system-ui;color:#f0d6ad;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kp53-msg.kp53-snag{color:#ff9d7a}
.kp53-re{padding:7px 11px;border-radius:8px;border:1px solid #e3b873;background:linear-gradient(#e9c27e,#b98a3e);color:#22160a;font:800 11.5px system-ui;cursor:pointer;white-space:nowrap}
@media (prefers-reduced-motion:reduce){.kp53-done{transition:none}}

/* 54 Shelf-stack scroll progress */
.kp54,#demo-root .stage.page-stage .kp54{background:#f1ece4}
.kp54{height:340px;position:relative;display:flex;overflow:hidden;color:#2a2119}
.kp54-tw{flex:0 0 clamp(100px,34%,140px);position:relative;padding:28px 8px 10px;box-sizing:border-box;background:linear-gradient(90deg,#e4dccf,#efe8dd);border-right:1px solid #d6cab8}
.kp54-ct{position:absolute;left:8px;right:8px;top:6px;text-align:center;font:800 10.5px ui-monospace,monospace;color:#6b5641;letter-spacing:.06em}
.kp54-bx{position:relative;height:100%;border-radius:2px;background:radial-gradient(circle,#00000038 1.3px,#0000 1.8px) 5px 0/100% 9px repeat-y,radial-gradient(circle,#00000038 1.3px,#0000 1.8px) calc(100% - 5px) 0/100% 9px repeat-y,linear-gradient(#e9e3d8,#dcd4c7);box-shadow:inset 7px 0 0 #f7f4ef,inset -7px 0 0 #f7f4ef,inset 8px 0 0 #0001,inset -8px 0 0 #0001,inset 0 7px 0 #f7f4ef,inset 0 -10px 0 #3a2f26,0 8px 16px #0002}
.kp54-sh{position:absolute;left:4px;right:4px;height:7px;padding:0;border:0;border-radius:1px;background:linear-gradient(#fbf9f5,#e2dbcf);box-shadow:0 1px 0 #fff inset,0 3px 4px #0003,0 7px 0 -1px #c8bba6;cursor:pointer;transform-origin:50% 100%;z-index:2}
.kp54-sh::before,.kp54-sh::after{content:'';position:absolute;top:6px;width:4px;height:4px;border-radius:50%;background:#b9bfc6}
.kp54-sh::before{left:1px}.kp54-sh::after{right:1px}
.kp54-sh.kp54-pin::before,.kp54-sh.kp54-pin::after{background:#facc15;box-shadow:0 0 6px #facc15}
.kp54-sh:focus-visible{outline:2px solid #2a2119;outline-offset:2px}
.kp54-gh{position:absolute;left:4px;right:4px;height:7px;border:1.5px dashed #a58a68;border-radius:2px;opacity:.85;pointer-events:none;transition:opacity .3s}
.kp54-gh::after{content:'';position:absolute;left:0;top:0;bottom:0;width:var(--kp54-q,0%);background:#a58a6855}
.kp54-it{position:absolute;bottom:100%;pointer-events:none;z-index:1}
.kp54-sw{width:22%;height:12px;border-radius:2px;background:var(--kp54-c);box-shadow:0 -6px 0 -1px color-mix(in srgb,var(--kp54-c),#fff 18%),0 -11px 0 -2px var(--kp54-c),inset 0 -2px 0 #0002}
.kp54-shoe{width:20%;height:9px;border-radius:9px 12px 2px 2px;background:var(--kp54-c);box-shadow:inset 3px 2px 0 #fff3,6px 0 0 -1px var(--kp54-c)}
.kp54-bin{width:30%;height:22px;border-radius:2px 2px 4px 4px;background:repeating-linear-gradient(90deg,#0000 0 3px,#0001 3px 4px),var(--kp54-c);box-shadow:inset 0 3px 0 #0002,inset 0 -2px 0 #fff3}
.kp54-jn{width:28%;height:6px;border-radius:2px;background:#3d5a80;box-shadow:0 -6px 0 #31496a,0 -12px 0 #4a6a92,0 -18px 0 #2f4560}
.kp54-tp{width:18px;height:18px;border-radius:50%;background:radial-gradient(circle,#1f1f1f 0 3px,#facc15 3.5px);box-shadow:inset -3px -3px 0 #0002}
.kp54-pp{width:26%;height:3px;background:#fff;box-shadow:0 -3px 0 #f3efe8,0 0 0 1px #0001}
.kp54-box{width:46%;height:24px;border-radius:2px;background:linear-gradient(#0000 0 40%,#d9a441 40% 52%,#0000 52%),#c79a62;box-shadow:inset 0 2px 0 #fff3,inset 0 -2px 0 #0002;font:800 5.5px ui-monospace,monospace;color:#5b3d17;display:grid;place-items:end center;padding-bottom:2px;box-sizing:border-box}
.kp54-sc{position:relative;flex:1;min-width:0;overflow-y:auto;overscroll-behavior:contain;padding:12px 14px 150px;scrollbar-width:thin}
.kp54-sc section{min-height:150px;padding:6px 0;border-bottom:1px dashed #d8ccbb}
.kp54-sc section b{font:800 11px ui-monospace,monospace;color:#b27b45}
.kp54-sc h5{margin:2px 0 4px;font:800 17px/1.15 Georgia,'Times New Roman',serif;color:#1f160e}
.kp54-sc p{margin:0;font-size:12.5px;line-height:1.5;color:#6a5a49}
.kp54-sc .kp54-end{margin-top:16px;text-align:center;font:800 13px ui-monospace,monospace;color:#15803d}

/* 55 Pivot mirror page flip */
.kp55,#demo-root .stage.page-stage .kp55{background:#120f0c}
.kp55{height:340px;position:relative;overflow:hidden;color:#2a2119;user-select:none;-webkit-user-select:none}
.kp55-room{position:absolute;left:50%;top:14px;width:min(250px,76%);height:270px;transform:translateX(-50%);display:flex;gap:3px;align-items:flex-start;padding:22px 10px 0;box-sizing:border-box;background:linear-gradient(#5b4632 0 6px,#0000 6px),linear-gradient(#2a211a,#16110d);box-shadow:inset 0 0 30px #000}
.kp55-room::before{content:'';position:absolute;left:8px;right:8px;top:20px;height:3px;background:#c0c6cc;border-radius:2px}
.kp55-room i{flex:1;height:var(--kp55-h,150px);margin-top:4px;border-radius:3px 3px 5px 5px;background:var(--kp55-c,#7a8ca0);clip-path:polygon(50% 0,100% 12%,94% 100%,6% 100%,0 12%);opacity:.85}
.kp55-room i:nth-child(2){--kp55-c:#c9a27a;--kp55-h:120px}.kp55-room i:nth-child(3){--kp55-c:#2f3a4a;--kp55-h:170px}.kp55-room i:nth-child(4){--kp55-c:#e9e3d6;--kp55-h:130px}.kp55-room i:nth-child(5){--kp55-c:#8a4b3c;--kp55-h:190px}.kp55-room i:nth-child(6){--kp55-c:#5b6b4f;--kp55-h:140px}.kp55-room i:nth-child(7){--kp55-c:#b8a0c8;--kp55-h:160px}.kp55-room i:nth-child(8){--kp55-c:#d8cbb2;--kp55-h:120px}
.kp55-st{position:absolute;left:0;right:0;top:0;height:296px;perspective:820px;touch-action:pan-y;cursor:grab}
.kp55-st:active{cursor:grabbing}
.kp55-door{position:absolute;left:50%;top:14px;width:min(250px,76%);height:270px;transform:translateX(-50%) rotateY(var(--kp55-r,0deg));transform-style:preserve-3d;will-change:transform}
.kp55-f{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:3px;overflow:hidden;background:linear-gradient(#f8f4ee,#e6ded2);box-shadow:inset 0 0 0 6px #fbf8f3,inset 0 0 0 7px #0001}
.kp55-a{transform:translateZ(6px)}.kp55-b{transform:rotateY(180deg) translateZ(6px)}
.kp55-f::after{content:'';position:absolute;inset:0;background:#000;opacity:var(--kp55-dk,0);pointer-events:none}
.kp55-pg{position:absolute;inset:0;padding:22px 20px;display:flex;flex-direction:column;justify-content:center;gap:7px}
.kp55-pg h4{margin:0;font:800 22px/1.1 Georgia,'Times New Roman',serif;color:#1f160e}
.kp55-k{margin:0;font:700 10px ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;color:#8a5a2e}
.kp55-s{margin:0;font-size:12.5px;line-height:1.45;color:#6a5a49}
.kp55-pr{margin:4px 0 0;font:600 12px system-ui;color:#6a5a49}.kp55-pr b{font:800 26px Georgia,serif;color:#1f160e}
.kp55-in{display:flex;gap:3px;height:62px;padding-top:6px;border-top:3px solid #b9bfc6}
.kp55-in i{flex:1;border-radius:2px 2px 4px 4px;background:var(--kp55-c,#7a8ca0);clip-path:polygon(50% 0,100% 14%,94% 100%,6% 100%,0 14%)}
.kp55-in i:nth-child(2){--kp55-c:#c9a27a}.kp55-in i:nth-child(3){--kp55-c:#2f3a4a}.kp55-in i:nth-child(4){--kp55-c:#8a4b3c}.kp55-in i:nth-child(5){--kp55-c:#5b6b4f}
.kp55-ln{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.kp55-ln li{display:flex;justify-content:space-between;padding:7px 9px;border-radius:8px;background:#fff9;font-size:12px;color:#584939}.kp55-ln b{color:#1f160e}
.kp55-mir{position:absolute;inset:0;pointer-events:none;opacity:var(--kp55-m,0);background:linear-gradient(105deg,#0000 calc(var(--kp55-sx,40%) - 12%),#ffffffaa var(--kp55-sx,40%),#0000 calc(var(--kp55-sx,40%) + 9%)),radial-gradient(16px 19px at var(--kp55-yx,60%) 46%,#4a3e3455 55%,#0000 70%),radial-gradient(40px 46px at var(--kp55-yx,60%) 74%,#4a3e3444 55%,#0000 70%),linear-gradient(#0000 62%,#7b6550 62% 64%,#a48a6c 64%),linear-gradient(90deg,#b9c4cc,#e8eef2 30%,#c9d3d9 55%,#f4f7f9 70%,#aab6be);background-size:100% 100%,100% 100%,100% 100%,100% 100%,180% 100%;background-position:0 0,0 0,0 0,0 0,var(--kp55-bx,0px) 0}
.kp55-ed{position:absolute;top:0;bottom:0;width:12px;margin-left:-6px;background:linear-gradient(90deg,#9fc3bd,#e2f1ee 40%,#7fa7a0 60%,#c9ccd0);box-shadow:inset 0 0 0 1px #0002}
.kp55-e1{left:0;transform:rotateY(90deg)}.kp55-e2{left:100%;transform:rotateY(90deg)}
.kp55-pin{position:absolute;left:50%;width:14px;height:8px;margin-left:-7px;border-radius:3px;background:linear-gradient(#f5d58a,#a87b2c);box-shadow:0 2px 3px #0008;z-index:2}
.kp55-pt{top:8px}.kp55-pb{top:282px}
.kp55-bar{position:absolute;left:0;right:0;bottom:8px;display:flex;align-items:center;justify-content:center;gap:14px}
.kp55-bar button{width:34px;height:30px;border-radius:9px;border:1px solid #ffffff26;background:#1d1712;color:#f3dfc2;font:800 18px/1 system-ui;cursor:pointer}
.kp55-dots{display:flex;gap:6px}.kp55-dots i{width:7px;height:7px;border-radius:50%;background:#ffffff30;transition:background .3s,transform .3s}.kp55-dots i.on{background:#e0c48e;transform:scale(1.3)}

/* 56 Red-carpet reveal transition */
.kp56,#demo-root .stage.page-stage .kp56{background:radial-gradient(120% 90% at 50% 10%,#2a1416,#0a0506 70%)}
.kp56{height:340px;position:relative;overflow:hidden;color:#fbefe6}
.kp56-cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.kp56-a,.kp56-b{position:absolute;inset:0;padding:18px 18px;display:flex;flex-direction:column;justify-content:center;gap:8px;z-index:1}
.kp56-a{background:radial-gradient(100% 70% at 50% 100%,#0000,#0000 40%),linear-gradient(#0a0506cc,#0a050688 60%,#0a050622)}
.kp56 h4{margin:0;font:800 23px/1.08 Georgia,'Times New Roman',serif;color:#fff6ea}
.kp56-k{margin:0;font:700 10px ui-monospace,monospace;letter-spacing:.2em;text-transform:uppercase;color:#f0c46a}
.kp56-ln{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.kp56-ln li{display:flex;justify-content:space-between;padding:7px 10px;border-radius:9px;background:#ffffff0d;border:1px solid #ffffff14;font-size:12.5px;color:#e5cfc4}.kp56-ln b{color:#fff}
.kp56-go,.kp56-ok{padding:11px 14px;border-radius:12px;border:1px solid #ffd98a;background:linear-gradient(#d8222e,#8e0f18);color:#fff;font:800 13px system-ui;letter-spacing:.02em;cursor:pointer;box-shadow:0 10px 26px #d8222e55,inset 0 1px #ffffff55}
.kp56-go:hover,.kp56-ok:hover{filter:brightness(1.1)}
.kp56-go:active,.kp56-ok:active{transform:translateY(1px)}
.kp56-b{justify-content:flex-start;padding-top:22px;text-align:center;align-items:center;background:none}
.kp56-b h4{font-size:26px;text-shadow:0 0 18px #ffd98a88,0 2px 4px #000}
.kp56-kit{position:relative;width:min(230px,74%);height:74px;margin-top:4px;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:28px 34px;gap:3px 3px;padding:4px;border-radius:4px;background:#e9e2d6;box-shadow:0 14px 30px #000c,0 0 0 1px #fff3}
.kp56-kit i,.kp56-kit b{border-radius:2px;background:#8f8a82;box-shadow:inset 0 0 0 3px #8f8a82,inset 4px 4px 0 0 #ffffff26,inset -4px -4px 0 0 #0002,inset 0 0 0 5px #0002}
.kp56-kit b{grid-row:2}.kp56-kit b:nth-of-type(1){grid-column:1/3}.kp56-kit b:nth-of-type(2){grid-column:3}.kp56-kit b:nth-of-type(3){grid-column:4}
.kp56-kit::after{content:'';position:absolute;left:0;right:0;top:36px;height:3px;background:#f6f3ee;box-shadow:0 2px 3px #0004}
.kp56-row{display:flex;gap:6px;margin-top:auto;margin-bottom:2px;width:100%}
.kp56-back{padding:11px 12px;border-radius:12px;border:1px solid #ffffff2a;background:#0a0506cc;color:#f1dcd0;font:700 12px system-ui;cursor:pointer}
.kp56-ok{flex:1}
.kp56[data-pg="b"] .kp56-b>*{animation:kp56-in .7s cubic-bezier(.2,1.3,.4,1) backwards}
.kp56[data-pg="b"] .kp56-b>:nth-child(2){animation-delay:.08s}.kp56[data-pg="b"] .kp56-b>:nth-child(3){animation-delay:.18s}.kp56[data-pg="b"] .kp56-b>:nth-child(4){animation-delay:.3s}
@keyframes kp56-in{from{opacity:0;transform:translateY(16px) scale(.94)}}
@media (prefers-reduced-motion:reduce){.kp56[data-pg="b"] .kp56-b>*{animation:none}}

/* 57 Exit-intent offer on swinging chains */
.kp57,#demo-root .stage.page-stage .kp57{background:#f3eee6}
.kp57{height:340px;position:relative;overflow:hidden;color:#2a2119;user-select:none;-webkit-user-select:none}
.kp57-pg{position:absolute;inset:0;padding:0 16px;display:flex;flex-direction:column;gap:6px}
.kp57-nav{display:flex;gap:12px;align-items:center;margin:0 -16px 10px;padding:10px 16px;background:#fff;border-bottom:1px solid #e3d8c8;font:600 11.5px system-ui;color:#7a6650}
.kp57-nav b{flex:1;font:800 14px Georgia,serif;color:#2a2119}
.kp57-k{margin:0;font:700 10px ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;color:#8a5a2e}
.kp57 h4{margin:0;font:800 22px/1.1 Georgia,'Times New Roman',serif;color:#1f160e}
.kp57-th{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin:4px 0}
.kp57-th i{aspect-ratio:3/4;border-radius:2px;background:#8f8a82;box-shadow:inset 0 0 0 4px #8f8a82,inset 5px 5px 0 0 #ffffff26,inset -5px -5px 0 0 #0002,inset 0 0 0 6px #0002}
.kp57-s{margin:0;font-size:12px;color:#6a5a49}
.kp57-hint{margin:auto 0 50px;text-align:center;font:600 11px ui-monospace,monospace;color:#a08b74}
.kp57-dim{position:absolute;inset:0;background:#1a120ccc;opacity:0;pointer-events:none;transition:opacity .4s}
.kp57.kp57-on .kp57-dim{opacity:1;pointer-events:auto}
.kp57-ch{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:3;opacity:0}
.kp57.kp57-on .kp57-ch{opacity:1}
.kp57-ch path{fill:none;stroke:#c9ced4;stroke-width:3.4;stroke-dasharray:5 2.2;stroke-linecap:round;filter:drop-shadow(0 2px 1px #0007)}
.kp57-sg{position:absolute;left:50%;top:0;width:min(270px,86%);margin-left:calc(min(270px,86%)/-2);padding:16px 14px 12px;box-sizing:border-box;border-radius:10px;z-index:4;transform-origin:50% 0;visibility:hidden;touch-action:none;cursor:grab;color:#fff6ea;background:repeating-linear-gradient(92deg,#0000 0 9px,#0000000d 9px 10px,#0000 10px 23px),linear-gradient(160deg,#6b4428,#4a2c17);box-shadow:inset 0 1px #ffffff40,inset 0 0 0 2px #2b170b,0 24px 40px #000a;text-align:center}
.kp57.kp57-on .kp57-sg{visibility:visible}
.kp57-sg .kp57-k{color:#f5c77e}
.kp57-sg h4{color:#fff6ea;font-size:20px;margin:3px 0 10px}
.kp57-ey{position:absolute;top:6px;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle,#2b170b 0 2px,#d8dde2 2.5px 4px,#8a9097 4.5px)}
.kp57-e1{left:12%}.kp57-e2{right:12%}
.kp57-sc{position:relative;height:42px;border-radius:8px;background:#fff7e8;display:grid;place-items:center;overflow:hidden;box-shadow:inset 0 2px 4px #0003}
.kp57-code{font:800 20px ui-monospace,monospace;letter-spacing:.12em;color:#7a1f12}
.kp57-foil{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair;touch-action:none;transition:opacity .5s}
.kp57-row{display:flex;gap:6px;margin-top:10px}
.kp57-ok{flex:1;padding:9px 8px;border-radius:9px;border:0;background:linear-gradient(#f6c56b,#d4892c);color:#2a1606;font:800 12px system-ui;cursor:pointer;box-shadow:0 6px 14px #d4892c55}
.kp57-ok:disabled{background:#ffffff26;color:#e8d5bd;box-shadow:none;cursor:not-allowed}
.kp57-no{padding:9px 10px;border-radius:9px;border:1px solid #ffffff38;background:#0000;color:#f1dcc0;font:700 11.5px system-ui;cursor:pointer}
.kp57-tm{display:block;margin-top:8px;font:700 10.5px ui-monospace,monospace;color:#f3cf9a;font-variant-numeric:tabular-nums}
.kp57-sim{position:absolute;right:10px;bottom:10px;z-index:2;padding:7px 11px;border-radius:9px;border:1px solid #2a2119;background:#2a2119;color:#fbefdc;font:700 11px system-ui;cursor:pointer}

/* 58 Sticky CTA that grows with intent */
.kp58,#demo-root .stage.page-stage .kp58{background:#faf7f2}
.kp58{height:340px;position:relative;overflow:hidden;color:#2a2119}
.kp58-sc{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;padding:14px 16px 110px;scrollbar-width:thin}
.kp58-sc section{min-height:150px;padding:4px 0 18px}
.kp58-k{margin:0;font:700 10px ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;color:#8a5a2e}
.kp58 h4{margin:4px 0 6px;font:800 22px/1.1 Georgia,'Times New Roman',serif;color:#1f160e}
.kp58 h5{margin:0 0 6px;font:800 17px Georgia,serif;color:#1f160e}
.kp58-sc p,.kp58-sc li{font-size:12.5px;line-height:1.5;color:#6a5a49}
.kp58-sc p{margin:0}.kp58-sc ol{margin:0;padding-left:18px}
.kp58-pr{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.kp58-pr li{display:flex;justify-content:space-between;padding:8px 10px;border-radius:9px;background:#fff;border:1px solid #e6dccd;transition:border-color .2s,transform .2s,box-shadow .2s;cursor:default}
.kp58-pr li:hover,.kp58-pr li.kp58-hit{border-color:#d4892c;transform:translateX(3px);box-shadow:0 4px 12px #d4892c22}
.kp58-pr b{color:#1f160e}
.kp58 blockquote{margin:0 0 8px;padding:8px 10px;border-left:3px solid #d4892c;background:#fff;border-radius:0 8px 8px 0;font:italic 12.5px/1.45 Georgia,serif;color:#3b2f24}
.kp58 cite{display:block;margin-top:2px;font:600 10.5px system-ui;font-style:normal;color:#8a7764}
.kp58-mt{position:absolute;right:8px;top:8px;display:flex;flex-direction:column;align-items:flex-end;gap:3px;pointer-events:none;z-index:2}
.kp58-mt>span{padding:3px 8px;border-radius:99px;background:#2a2119e6;color:#f5dfbf;font:700 10px ui-monospace,monospace}
.kp58-mt b{color:#f6c56b}
.kp58-log{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.kp58-log li{padding:2px 7px;border-radius:6px;background:#fffffff0;box-shadow:0 2px 6px #0002;font:700 9.5px ui-monospace,monospace;color:#15803d;animation:kp58-log 2.6s ease forwards}
.kp58-log li.kp58-neg{color:#b42318}
@keyframes kp58-log{0%{opacity:0;transform:translateX(10px)}10%{opacity:1;transform:none}75%{opacity:1}100%{opacity:0}}
.kp58-cta{position:absolute;left:50%;bottom:10px;width:130px;height:40px;transform:translateX(-50%);padding:0 14px;border:0;border-radius:99px;overflow:hidden;background:#2a2119;color:#fff7ea;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;box-shadow:0 10px 24px #2a211955,inset 0 1px #ffffff26;z-index:3;isolation:isolate}
.kp58-liq{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.kp58-t{font:800 13px system-ui;white-space:nowrap;text-shadow:0 1px 2px #0006;transition:opacity .2s}
.kp58-sub{font:600 10px ui-monospace,monospace;color:#f7dcb0;white-space:nowrap;text-shadow:0 1px 2px #0006;transition:opacity .2s}
.kp58-cta.kp58-l3{animation:kp58-pulse 1.6s ease-in-out infinite}
@keyframes kp58-pulse{50%{box-shadow:0 10px 30px #d4892c99,0 0 0 4px #f6c56b44,inset 0 1px #ffffff26}}
.kp58-cta:focus-visible{outline:2px solid #d4892c;outline-offset:3px}
@media (prefers-reduced-motion:reduce){.kp58-cta.kp58-l3{animation:none}.kp58-log li{animation:none}}

/* 59 Trust-badge minting loader */
.kp59,#demo-root .stage.page-stage .kp59{background:radial-gradient(100% 70% at 50% 25%,#20283a,#0a0d14 72%)}
.kp59{height:340px;position:relative;overflow:hidden;color:#eef2f8;--kp59-rx:0deg;--kp59-ry:0deg;--kp59-ga:120deg}
.kp59-press{position:absolute;left:50%;top:0;width:150px;height:186px;margin-left:-75px}
.kp59-col{position:absolute;top:0;width:12px;height:176px;background:linear-gradient(90deg,#3a4250,#8a95a6 45%,#2a303a)}
.kp59-cl{left:4px}.kp59-cr{right:4px}
.kp59-die{position:absolute;left:28px;right:28px;top:6px;height:46px;border-radius:4px 4px 10px 10px;background:linear-gradient(#6d7787,#c3ccd8 40%,#7d8797);box-shadow:inset 0 -4px 0 #4a5260,0 8px 14px #0008;display:grid;place-items:end center;padding-bottom:5px;box-sizing:border-box}
.kp59-die b{font:900 11px Georgia,serif;letter-spacing:.2em;color:#3d4450;text-shadow:0 1px 0 #e9eef4}
.kp59-bed{position:absolute;left:14px;right:14px;top:150px;height:22px;border-radius:4px;background:linear-gradient(#9aa5b5,#4a5262);box-shadow:inset 0 2px 0 #d5dde8,0 10px 18px #0009}
.kp59-wave{position:absolute;left:50%;top:150px;width:60px;height:14px;margin:-7px 0 0 -30px;border-radius:50%;border:2px solid #ffe7a8;opacity:0;pointer-events:none}
.kp59-slots{position:absolute;left:0;right:0;top:200px;display:flex;justify-content:center;gap:var(--kp59-gap,6px)}
.kp59-slots i{width:58px;height:58px;border-radius:50%;border:1.5px dashed #ffffff22}
.kp59-b{position:absolute;left:0;top:0;width:58px;height:58px;margin:-29px 0 0 -29px;z-index:3;perspective:300px}
.kp59-f{position:absolute;inset:0;transform:rotateX(var(--kp59-rx)) rotateY(var(--kp59-ry));transition:transform .2s ease-out}
.kp59-disc{position:absolute;inset:0;background:conic-gradient(from var(--kp59-ga),var(--kp59-a),var(--kp59-b2),var(--kp59-a),var(--kp59-b2),var(--kp59-a));filter:drop-shadow(0 4px 5px #0009)}
.kp59-disc::after{content:'';position:absolute;inset:8px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffffff55,#0000 55%),radial-gradient(circle,var(--kp59-a),var(--kp59-b2));box-shadow:inset 0 2px 2px #ffffff80,inset 0 -2px 3px #0006,0 0 0 1.5px #0003}
.kp59-b svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transition:opacity .25s}
.kp59-b text{font:800 9.5px system-ui;letter-spacing:.06em;fill:var(--kp59-ink)}
.kp59-ic{fill:none;stroke:var(--kp59-ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 0 #ffffff70) drop-shadow(0 -1px 0 #0005)}
.kp59-b.kp59-blank svg{opacity:0}
.kp59-holo{position:absolute;inset:0;border-radius:50%;opacity:0;mix-blend-mode:color-dodge;background:linear-gradient(var(--kp59-ga),#ff6ec700 20%,#ff6ec7aa 35%,#6ee7ffaa 50%,#b6ff6eaa 62%,#0000 78%);transition:opacity .6s}
.kp59[data-st="done"] .kp59-holo{opacity:.75}
.kp59-spk{position:absolute;width:3px;height:3px;border-radius:50%;background:#ffe7a8;box-shadow:0 0 6px #ffcf5a;z-index:4;pointer-events:none}
.kp59-hud{position:absolute;left:12px;right:12px;top:270px;display:flex;justify-content:space-between;gap:8px;font:700 12px system-ui}
.kp59-msg{color:#c9d5e6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kp59-n{font:800 12px ui-monospace,monospace;color:#ffd98a}
.kp59-ctl{position:absolute;left:12px;right:12px;bottom:10px;display:flex;gap:6px}
.kp59-pay{flex:1;padding:9px;border-radius:10px;border:1px solid #ffffff1f;background:#ffffff10;color:#8d97a8;font:800 12.5px system-ui;cursor:not-allowed;transition:background .4s,color .4s,box-shadow .4s}
.kp59-pay:not(:disabled){cursor:pointer;background:linear-gradient(#ffd98a,#e0a33a);color:#2a1a04;box-shadow:0 8px 22px #e0a33a66;border-color:#ffe7b0}
.kp59-re{width:40px;border-radius:10px;border:1px solid #ffffff26;background:#141a26;color:#dfe7f2;font:800 15px system-ui;cursor:pointer}

/* 60 Split-flap testimonial header */
.kp60,#demo-root .stage.page-stage .kp60{background:#f6f1ea}
.kp60{height:340px;position:relative;overflow:hidden;color:#2a2119;display:flex;flex-direction:column}
.kp60-hd{position:relative;padding:10px 10px 8px;background:linear-gradient(#232323,#141414);box-shadow:0 8px 18px #0005;z-index:1}
.kp60-cv{display:block;width:100%;height:96px;touch-action:pan-y;cursor:grab}
.kp60-bar{display:flex;align-items:center;gap:6px;margin-top:7px;font:700 11px system-ui;color:#cfc6b6}
.kp60-st{flex:1;white-space:nowrap}.kp60-st b{color:#f6c56b;margin-right:4px}
.kp60-ps{font:700 9.5px ui-monospace,monospace;color:#f6c56b;letter-spacing:.1em;text-transform:uppercase;opacity:0;transition:opacity .25s}
.kp60.kp60-held .kp60-ps{opacity:1}
.kp60-bar button{width:30px;height:24px;border-radius:7px;border:1px solid #ffffff26;background:#2a2a2a;color:#f3ead7;font:800 15px/1 system-ui;cursor:pointer}
.kp60-pg{flex:1;padding:16px 16px 14px;display:flex;flex-direction:column;justify-content:center;gap:7px}
.kp60-k{margin:0;font:700 10px ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;color:#8a5a2e}
.kp60 h4{margin:0;font:800 22px/1.1 Georgia,'Times New Roman',serif;color:#1f160e}
.kp60-s{margin:0;font-size:12.5px;color:#6a5a49}
.kp60-row{display:flex;align-items:center;gap:10px;margin-top:4px;font:600 11px system-ui;color:#7d6a56}
.kp60-go{padding:10px 16px;border-radius:10px;border:0;background:#1f1a15;color:#fbefdc;font:800 13px system-ui;cursor:pointer;box-shadow:0 8px 18px #1f1a1544}