/* next demo styles — ported n1–n20 + new n21–n25 */

/* showcase stage adapters */
.item .stage.tall{padding:0;display:block;min-height:300px;height:300px;overflow:hidden}
.item .stage.xtall{min-height:360px;height:360px}
.item .stage .dm{height:100%;border:0;border-radius:0;background:transparent}
.item .stage{isolation:isolate}
.fx-svg{position:absolute;width:0;height:0;overflow:hidden}
.dm{position:relative;height:100%;border-radius:16px;overflow:hidden;background:#000}
/* n1 */
.n1{display:grid;place-items:center;background:radial-gradient(circle at 50% 70%,#0c1a2e,#000 70%)}
.n1row{display:flex;gap:18px}.n1b{padding:12px 20px;border-radius:12px;border:1px solid #334155;background:#0f172a;color:#e2e8f0;font:600 14px system-ui;cursor:pointer}.n1b:hover,.n1b:focus-visible{border-color:#38bdf8;outline:none;box-shadow:0 0 0 3px #38bdf833}
.n1t{position:absolute;margin:0;padding:8px 12px;border-radius:9px;background:#f8fafc;color:#0f172a;font:600 12.5px system-ui;white-space:nowrap;pointer-events:none;opacity:0;transform:translateY(6px) scale(.96);transition:opacity .2s,transform .25s cubic-bezier(.3,1.5,.4,1);box-shadow:0 10px 30px #000a;z-index:5}
.n1t::after{content:'';position:absolute;left:50%;bottom:-5px;width:10px;height:10px;background:inherit;transform:translateX(-50%) rotate(45deg);border-radius:2px}
@supports (position-anchor:--x){.n1t{position:fixed;inset:auto;bottom:anchor(top);left:anchor(center);translate:-50% -12px;position-try-fallbacks:flip-block}}
.n1t.show{opacity:1;transform:none}.n1h{position:absolute;bottom:18px;color:#475569;font:11px ui-monospace,monospace;letter-spacing:.2em;text-transform:uppercase}
/* n2 */
.n2{display:flex;gap:14px;align-items:center;justify-content:center;background:radial-gradient(circle,#1a1030,#000 70%)}
.n2 > button,.n2d button{padding:12px 20px;border-radius:12px;border:1px solid #4c1d95;background:#1e1036;color:#ede9fe;font:600 14px system-ui;cursor:pointer}.n2 button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.n2d{border:0;border-radius:20px;padding:24px;width:320px;background:#16121f;color:#eee;box-shadow:0 30px 80px #000;opacity:0;transform:translateY(20px) scale(.92);transition:opacity .35s,transform .45s cubic-bezier(.3,1.4,.4,1),overlay .45s allow-discrete,display .45s allow-discrete}
.n2d[open]{opacity:1;transform:none}@starting-style{.n2d[open]{opacity:0;transform:translateY(20px) scale(.92)}}
.n2d::backdrop{background:#0000;backdrop-filter:blur(0);transition:background .4s,backdrop-filter .4s,overlay .4s allow-discrete,display .4s allow-discrete}.n2d[open]::backdrop{background:#000a;backdrop-filter:blur(4px)}@starting-style{.n2d[open]::backdrop{background:#0000;backdrop-filter:blur(0)}}
.n2d h4{font:700 18px system-ui;margin-bottom:6px}.n2d p{color:#a1a1aa;font-size:13.5px}.n2d form{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}.n2d .pri2{background:#7c3aed;border-color:#7c3aed}
.n2pop{margin:auto;inset:auto;bottom:40px;left:50%;translate:-50% 0;position:fixed;border:1px solid #3f3f46;border-radius:99px;padding:12px 20px;background:#18181b;color:#fafafa;font:600 14px system-ui;opacity:0;transform:translateY(20px);transition:opacity .3s,transform .4s cubic-bezier(.3,1.5,.4,1),overlay .4s allow-discrete,display .4s allow-discrete}
.n2pop:popover-open{opacity:1;transform:none}@starting-style{.n2pop:popover-open{opacity:0;transform:translateY(20px)}}
.n2r{position:absolute;bottom:16px;font:12px ui-monospace,monospace;color:#a78bfa}
/* n3 */
.n3{display:flex;flex-direction:column;justify-content:center;padding:0 0 10px}
.car{list-style:none;margin:0;padding:20px 15%;display:grid;grid-auto-flow:column;grid-auto-columns:70%;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;scroll-marker-group:after;anchor-name:--car}
.car::-webkit-scrollbar{display:none}
.car li{scroll-snap-align:center;height:220px;border-radius:20px;background:linear-gradient(145deg,var(--c),#000 150%);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:64px;gap:8px;transition:transform .3s}
.car li b{font:800 18px system-ui;letter-spacing:.1em}
.car::scroll-marker-group{display:flex;justify-content:center;gap:10px;padding-top:6px}
.car li::scroll-marker{content:'';width:10px;height:10px;border-radius:99px;background:#444;transition:width .3s,background .3s}.car li::scroll-marker:target-current{background:#fff;width:28px}
.car::scroll-button(*){border:0;width:40px;height:40px;border-radius:50%;background:#ffffffdd;color:#000;font-size:20px;cursor:pointer;position:absolute;position-anchor:--car;top:calc(anchor(center) - 20px)}
.car::scroll-button(*):disabled{opacity:.25}.car::scroll-button(left){content:'‹';left:calc(anchor(left) + 10px)}.car::scroll-button(right){content:'›';right:calc(anchor(right) + 10px)}
.n3 .fbm{display:flex;justify-content:center;gap:10px;padding-top:6px}.n3 .fbm button{width:10px;height:10px;border-radius:99px;border:0;background:#444;padding:0;cursor:pointer;transition:width .3s,background .3s}.n3 .fbm button[aria-current=true]{background:#fff;width:28px}
.n3 .fba{position:absolute;top:calc(50% - 26px);width:40px;height:40px;border-radius:50%;border:0;background:#ffffffdd;color:#000;font-size:20px;cursor:pointer}.n3 .fba.l{left:10px}.n3 .fba.r{right:10px}
/* n4 */
.n4{display:flex;flex-direction:column;justify-content:center;gap:14px;padding:26px 30px;background:#050505}
.n4h{font:850 30px/1.15 system-ui;letter-spacing:-.02em;max-width:440px;text-wrap:balance;background:linear-gradient(90deg,#f472b6,#a78bfa,#38bdf8,#34d399,#f472b6);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:n4g 6s linear infinite}
@keyframes n4g{to{background-position:300% 0}}
.n4.off .n4h{text-wrap:wrap}.n4.off .n4p{text-wrap:wrap}
.n4p{color:#a1a1aa;font-size:14px;max-width:400px;text-wrap:pretty;line-height:1.55}
.n4t{align-self:flex-start;padding:8px 14px;border-radius:99px;border:1px solid #333;background:#111;color:#ddd;font:600 12px ui-monospace,monospace;cursor:pointer}
/* n5 */
@property --x1{syntax:'<percentage>';inherits:false;initial-value:20%}@property --y1{syntax:'<percentage>';inherits:false;initial-value:30%}
@property --x2{syntax:'<percentage>';inherits:false;initial-value:80%}@property --y2{syntax:'<percentage>';inherits:false;initial-value:20%}
@property --x3{syntax:'<percentage>';inherits:false;initial-value:60%}@property --y3{syntax:'<percentage>';inherits:false;initial-value:80%}
@property --c1{syntax:'<color>';inherits:false;initial-value:#ff3cac}@property --c2{syntax:'<color>';inherits:false;initial-value:#2b86c5}
.n5m{position:absolute;inset:0;background:radial-gradient(circle at var(--x1) var(--y1),var(--c1),transparent 45%),radial-gradient(circle at var(--x2) var(--y2),var(--c2),transparent 45%),radial-gradient(circle at var(--x3) var(--y3),#784ba0,transparent 50%),#0a0014;animation:n5a 10s ease-in-out infinite alternate}
@keyframes n5a{33%{--x1:70%;--y1:70%;--x2:20%;--y2:60%;--c1:#f59e0b}66%{--x1:40%;--y1:20%;--x3:20%;--y3:30%;--c2:#10b981}100%{--x1:80%;--y1:40%;--x2:30%;--y2:80%;--x3:70%;--y3:20%;--c1:#ec4899;--c2:#6366f1}}
.n5c{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;color:#fff;mix-blend-mode:overlay}.n5c b{font:900 56px system-ui;letter-spacing:-.03em}.n5c span{font:14px ui-monospace,monospace}
/* n6 */
.n6{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:radial-gradient(circle,#0b1f17,#000 70%)}
.n6s{width:200px;height:200px}.n6p{fill:#22c55e22;stroke:#4ade80;stroke-width:3;stroke-linejoin:round;filter:drop-shadow(0 0 8px #22c55e)}
.n6b{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.n6b button{padding:7px 13px;border-radius:99px;border:1px solid #14532d;background:#052e16;color:#bbf7d0;font:600 12px system-ui;cursor:pointer}.n6b button[aria-pressed=true]{background:#22c55e;color:#000}
/* n7 */
.n7{position:relative;background:#03040c;overflow:hidden}
.n7p{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none}
.n7c{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1;background:transparent;transition:opacity .05s linear}
.n7.fb .n7c{display:none}
.n7l{position:absolute;right:12px;bottom:10px;z-index:2;font:10px ui-monospace,monospace;letter-spacing:.2em;color:#fff9;text-transform:uppercase;background:#0006;padding:4px 8px;border-radius:6px;pointer-events:none}
.n7 .fbimg{position:absolute;inset:0;background-size:cover;background-position:center;transition:opacity .65s;z-index:1;pointer-events:none}
/* n8 */
.n8m{position:absolute;inset:-20%;filter:blur(50px) saturate(140%)}.n8m i{position:absolute;width:55%;height:55%;border-radius:50%;animation:n8d 14s ease-in-out infinite alternate}
.n8m i:nth-child(1){background:#f97316;left:5%;top:10%}.n8m i:nth-child(2){background:#db2777;right:5%;top:5%;animation-duration:11s;animation-delay:-4s}.n8m i:nth-child(3){background:#7c3aed;left:25%;bottom:0;animation-duration:17s}.n8m i:nth-child(4){background:#facc15;right:15%;bottom:10%;width:35%;height:35%;animation-duration:9s}
@keyframes n8d{33%{transform:translate(20%,15%) scale(1.15)}66%{transform:translate(-15%,10%) scale(.9)}100%{transform:translate(10%,-20%) scale(1.1)}}
.n8g{position:absolute;inset:-50%;opacity:.28;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:n8n .6s steps(4) infinite}
@keyframes n8n{25%{transform:translate(-5%,3%)}50%{transform:translate(4%,-6%)}75%{transform:translate(-3%,-2%)}}
.n8c{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:34px;gap:10px}.n8c small{font:700 11px ui-monospace,monospace;letter-spacing:.3em;color:#fff9}.n8c h4{font:850 40px/1.05 system-ui;letter-spacing:-.03em;max-width:340px;text-wrap:balance;text-shadow:0 2px 30px #0005}
.n8c button{align-self:flex-start;padding:12px 22px;border-radius:99px;border:0;background:#fff;color:#000;font:700 14px system-ui;cursor:pointer;transition:transform .2s}.n8c button:hover{transform:translateY(-2px)}.n8c button:active{transform:scale(.95)}
/* n9 */
.n9{padding:20px;background:repeating-linear-gradient(45deg,#0a0a0a 0 10px,#0d0d0d 10px 20px)}
.n9w{position:relative;width:400px;max-width:calc(100% - 20px);height:100%}
.n9box{container:card/inline-size;width:100%;height:100%;border:1px dashed #333;border-radius:14px;padding:12px;display:flex;align-items:center}
.n9card{width:100%;display:grid;gap:12px;background:#141414;border:1px solid #262626;border-radius:16px;padding:14px;grid-template-columns:1fr}
.n9img{height:90px;border-radius:12px;background:linear-gradient(135deg,#78350f,#b45309);display:grid;place-items:center;font-size:40px}
.n9tx h5{font:750 16px system-ui}.n9tx p{color:#a3a3a3;font-size:13px;margin:4px 0}.n9st{display:flex;gap:10px;font-size:12px;color:#fbbf24}.n9st span+span{color:#737373}
.n9card button{padding:10px;border-radius:10px;border:0;background:#fbbf24;color:#000;font:700 13px system-ui;cursor:pointer}
@container card (min-width:300px){.n9card{grid-template-columns:110px 1fr}.n9img{height:100%;min-height:110px}.n9card button{grid-column:1/-1}}
@container card (min-width:460px){.n9card{grid-template-columns:140px 1fr auto;align-items:center}.n9card button{grid-column:auto;padding:12px 20px}.n9tx h5{font-size:20px}}
.n9h{position:absolute;right:-12px;top:50%;width:14px;height:56px;margin-top:-28px;border-radius:8px;background:#fbbf24;cursor:ew-resize;touch-action:none;box-shadow:0 0 0 4px #fbbf2433}.n9h:focus-visible{outline:2px solid #fff;outline-offset:3px}
.n9r{position:absolute;right:14px;top:12px;font:700 11px ui-monospace,monospace;color:#fbbf24;background:#000a;padding:4px 8px;border-radius:6px}
/* n10 */
.n10{display:flex;flex-direction:column;justify-content:center;gap:18px;background:#000}
.mq{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent)}
.mqt{display:flex;width:max-content;gap:14px;animation:mq var(--d) linear infinite}.mq.rev .mqt{animation-direction:reverse}
.mq:hover .mqt,.mq:focus-within .mqt{animation-play-state:paused}
@keyframes mq{to{transform:translateX(calc(-50% - 7px))}}
.mqt span{flex:none;padding:14px 22px;border-radius:14px;border:1px solid #222;background:#0d0d0d;font:700 15px system-ui;color:#ddd;white-space:nowrap;transition:background .2s,color .2s}.mqt span:hover{background:#fff;color:#000}
.mq:nth-child(2) span{background:#0b1220;border-color:#1e3a8a;color:#93c5fd}.mq:nth-child(3) span{font:600 13px ui-monospace,monospace;color:#a3e635;border-color:#1a2e05}

/* n11 offset-path orbit */
.n11{display:grid;place-items:center;background:radial-gradient(circle at 50% 55%,#12203a,#05070f 70%);overflow:hidden}
.n11track{position:absolute;inset:18% 12%;border:1px dashed #334155;border-radius:50%;opacity:.55}
.n11dot{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font:800 18px system-ui;color:#0b1220;background:linear-gradient(135deg,#38bdf8,#a78bfa);box-shadow:0 0 30px #38bdf866;offset-path:path("M 160 40 C 280 40 320 120 320 180 C 320 260 240 320 160 320 C 80 320 0 260 0 180 C 0 120 40 40 160 40");offset-rotate:0deg;animation:n11o 8s linear infinite}
.n11lab{position:absolute;bottom:16px;font:11px ui-monospace,monospace;letter-spacing:.18em;text-transform:uppercase;color:#64748b}
@keyframes n11o{to{offset-distance:100%}}
@media (prefers-reduced-motion:reduce){.n11dot{animation:none;offset-distance:35%}}

/* n12 interpolate-size accordion */
.n12{display:flex;flex-direction:column;justify-content:center;gap:10px;padding:22px 24px;background:linear-gradient(160deg,#0b1020,#05070e);interpolate-size:allow-keywords}
.n12d{border:1px solid #1f2937;border-radius:14px;background:#0f172a;overflow:clip;color:#e2e8f0}
.n12d summary{list-style:none;cursor:pointer;padding:14px 16px;font:700 14px system-ui;display:flex;justify-content:space-between;align-items:center}
.n12d summary::-webkit-details-marker{display:none}
.n12d summary::after{content:'+';font:700 18px ui-monospace,monospace;color:#94a3b8;transition:transform .35s}
.n12d[open] summary::after{transform:rotate(45deg)}
.n12d .bd{padding:0 16px 14px;color:#94a3b8;font:13.5px/1.5 system-ui;height:0;opacity:0;overflow:hidden;transition:height .45s cubic-bezier(.3,1.2,.4,1),opacity .35s,padding .45s}
.n12d[open] .bd{height:auto;opacity:1}
@supports not (interpolate-size:allow-keywords){.n12d .bd{height:auto!important;opacity:1!important}}
@media (prefers-reduced-motion:reduce){.n12d .bd{transition:none}}

/* n13 clip-path morph */
.n13{display:grid;place-items:center;background:#050505;overflow:hidden}
.n13c{width:min(78%,340px);aspect-ratio:1.4;display:grid;place-items:center;padding:24px;text-align:center;color:#fff;background:linear-gradient(135deg,#be185d,#7c3aed 45%,#0ea5e9);clip-path:polygon(12% 0,100% 8%,88% 100%,0 92%);transition:clip-path .7s cubic-bezier(.3,1.3,.4,1),transform .5s;cursor:pointer;border:0;font:inherit}
.n13c:hover,.n13c:focus-visible{clip-path:polygon(0 10%,90% 0,100% 90%,10% 100%);transform:scale(1.03);outline:none}
.n13c b{font:850 28px/1 system-ui;letter-spacing:-.03em;display:block;margin-bottom:8px}
.n13c span{opacity:.85;font:600 13px system-ui}
@media (prefers-reduced-motion:reduce){.n13c{transition:none}}

/* n14 named scroll-timeline scrub */
.n14{display:flex;flex-direction:column;background:#070b14;overflow:hidden}
.n14sc{flex:1;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;display:flex;gap:14px;padding:28px 20px 18px;scrollbar-width:thin}
.n14sc::-webkit-scrollbar{height:6px}.n14sc::-webkit-scrollbar-thumb{background:#334155;border-radius:99px}
.n14pg{flex:0 0 72%;scroll-snap-align:center;aspect-ratio:16/10;border-radius:18px;border:1px solid #1e293b;background:linear-gradient(145deg,var(--a),var(--b));display:grid;place-items:end start;padding:18px;color:#fff;font:800 22px/1.1 system-ui;box-shadow:inset 0 0 0 1px #ffffff18}
.n14bar{height:4px;margin:0 20px 16px;border-radius:99px;background:#1e293b;overflow:hidden}
.n14bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#38bdf8,#a78bfa);border-radius:inherit;animation:n14p linear;animation-timeline:scroll(nearest inline);animation-range:0% 100%}
@keyframes n14p{to{width:100%}}
.n14h{position:absolute;top:12px;left:20px;font:11px ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;color:#64748b}
@supports not (animation-timeline:scroll()){.n14bar i{width:var(--p,0%)!important;animation:none!important}}

/* n15 oklch relative color theme */
.n15{display:flex;flex-direction:column;justify-content:center;gap:16px;padding:22px;background:#0a0a0a;--h:210}
.n15sw{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.n15sw i{aspect-ratio:1;border-radius:14px;border:1px solid #ffffff18;background:oklch(65% .18 var(--h))}
.n15sw i:nth-child(2){background:oklch(from oklch(65% .18 var(--h)) calc(l + .08) c h)}
.n15sw i:nth-child(3){background:oklch(from oklch(65% .18 var(--h)) calc(l - .1) c h)}
.n15sw i:nth-child(4){background:oklch(from oklch(65% .18 var(--h)) l calc(c * .55) h)}
.n15sw i:nth-child(5){background:oklch(from oklch(65% .18 var(--h)) l c calc(h + 40))}
.n15row{display:flex;align-items:center;gap:12px}
.n15row input[type=range]{flex:1;accent-color:oklch(65% .18 var(--h))}
.n15row output{min-width:64px;font:700 12px ui-monospace,monospace;color:#cbd5e1}
.n15card{padding:16px 18px;border-radius:16px;border:1px solid color-mix(in oklch, oklch(65% .18 var(--h)) 40%, #fff0);background:linear-gradient(135deg,oklch(28% .06 var(--h)),oklch(18% .04 var(--h)));color:#f8fafc}
.n15card b{display:block;font:800 16px system-ui;margin-bottom:4px}
.n15card p{margin:0;color:#cbd5e1;font:13px/1.45 system-ui}

/* n16 3D coverflow */
.n16{perspective:900px;display:grid;place-items:center;background:radial-gradient(circle at 50% 80%,#1a1030,#050508 70%);overflow:hidden}
.n16s{position:relative;width:100%;height:100%;display:grid;place-items:center;transform-style:preserve-3d}
.n16c{position:absolute;width:150px;height:200px;border-radius:16px;border:1px solid #ffffff22;background:linear-gradient(160deg,var(--c1),var(--c2));display:grid;place-content:end start;padding:14px;color:#fff;font:800 15px system-ui;transform:translateX(calc(var(--d,0) * 118px)) rotateY(calc(var(--d,0) * -42deg)) scale(calc(1 - var(--s,0) * .12));transition:transform .55s cubic-bezier(.3,1.2,.4,1);box-shadow:0 20px 50px #0008;cursor:pointer}
.n16c[aria-current=true]{z-index:2}
.n16nav{position:absolute;bottom:14px;display:flex;gap:10px;z-index:3}
.n16nav button{width:40px;height:40px;border-radius:50%;border:1px solid #4c1d95;background:#1e1036;color:#ede9fe;font-size:18px;cursor:pointer}
@media (prefers-reduced-motion:reduce){.n16c{transition:none}}

/* n17 SVG mask wipe */
.n17{display:grid;place-items:center;background:#05070d;overflow:hidden}
.n17f{position:absolute;inset:0;background:linear-gradient(135deg,#0f172a,#1e3a5f);display:grid;place-items:center;color:#94a3b8;font:700 14px system-ui;letter-spacing:.2em;text-transform:uppercase}
.n17r{position:absolute;inset:0;background:linear-gradient(135deg,#f97316,#db2777 50%,#7c3aed);display:grid;place-items:center;color:#fff;font:850 28px/1.1 system-ui;text-align:center;padding:24px;-webkit-mask-image:radial-gradient(circle at var(--x,50%) var(--y,50%),#000 0,transparent var(--r,0%));mask-image:radial-gradient(circle at var(--x,50%) var(--y,50%),#000 0,transparent var(--r,0%));transition:--r .01s linear}
.n17r b{display:block}
.n17h{position:absolute;bottom:14px;z-index:2;font:11px ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;color:#94a3b8}
@supports not (mask-image:radial-gradient(#000,#0000)){.n17r{opacity:var(--o,0);-webkit-mask-image:none;mask-image:none}}

/* n18 canvas particle bloom */
.n18{background:#030712;overflow:hidden}
.n18c{width:100%;height:100%;display:block;cursor:crosshair}
.n18h{position:absolute;left:16px;bottom:14px;font:11px ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;color:#475569;pointer-events:none}

/* n19 @scope theme islands */
.n19{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:16px;background:#0a0a0a}
.n19i{border-radius:16px;padding:16px;border:1px solid #222}
@scope (.n19light){:scope{background:#f8fafc;color:#0f172a;border-color:#cbd5e1}.n19i h5{font:800 15px system-ui;margin:0 0 6px}.n19i p{margin:0 0 12px;color:#475569;font:13px/1.45 system-ui}.n19i button{padding:8px 12px;border-radius:10px;border:0;background:#0f172a;color:#fff;font:700 12px system-ui;cursor:pointer}}
@scope (.n19dark){:scope{background:#111827;color:#f8fafc;border-color:#334155}.n19i h5{font:800 15px system-ui;margin:0 0 6px}.n19i p{margin:0 0 12px;color:#94a3b8;font:13px/1.45 system-ui}.n19i button{padding:8px 12px;border-radius:10px;border:0;background:#38bdf8;color:#0f172a;font:700 12px system-ui;cursor:pointer}}
.n19light{background:#f8fafc;color:#0f172a}.n19dark{background:#111827;color:#f8fafc}.n19i h5{font:800 15px system-ui;margin:0 0 6px}.n19i p{margin:0 0 12px;font:13px/1.45 system-ui;opacity:.8}.n19i button{padding:8px 12px;border-radius:10px;border:0;font:700 12px system-ui;cursor:pointer}.n19light button{background:#0f172a;color:#fff}.n19dark button{background:#38bdf8;color:#0f172a}

/* n20 difference blend spotlight */
.n20{display:grid;place-items:center;background:#f8fafc;overflow:hidden;color:#0f172a}
.n20tx{position:relative;z-index:1;max-width:320px;text-align:center;padding:20px}
.n20tx h4{font:900 34px/1.05 system-ui;letter-spacing:-.03em;margin:0 0 8px}
.n20tx p{margin:0;font:600 14px/1.45 system-ui;color:#334155}
.n20sp{position:absolute;width:180px;height:180px;border-radius:50%;background:#0f172a;mix-blend-mode:difference;pointer-events:none;transform:translate(-50%,-50%);left:var(--x,50%);top:var(--y,50%);opacity:.95;transition:width .25s,height .25s}
.n20:hover .n20sp,.n20:focus-within .n20sp{width:220px;height:220px}
@media (prefers-reduced-motion:reduce){.n20sp{left:70%;top:35%}}

@media (prefers-reduced-motion:reduce){.mq{overflow-x:auto}.mqt{animation:none!important}.n8g,.n8m i,.n5m,.n4h,.n11dot{animation:none!important}.n14bar i{animation:none!important}}

@media (prefers-reduced-motion:reduce){.mq{overflow-x:auto}.mqt{animation:none!important}.n8g,.n8m i,.n5m,.n4h,.n11dot{animation:none!important}.n14bar i{animation:none!important}}


/* n21 CSS masonry gallery */
.n21{padding:12px;background:#050505;overflow:auto}
.n21g{columns:3 90px;column-gap:10px}
.n21g i{display:block;width:100%;break-inside:avoid;margin:0 0 10px;border-radius:12px;border:1px solid #ffffff18;background:linear-gradient(160deg,var(--a),var(--b));aspect-ratio:var(--r,1);min-height:48px}
.n21g i:nth-child(3n+1){--r:1.1}.n21g i:nth-child(3n+2){--r:.75}.n21g i:nth-child(3n){--r:1.35}
.n21h{position:absolute;left:14px;bottom:10px;font:11px ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:#64748b;pointer-events:none}

/* n22 interest invoker / popover preview */
.n22{display:grid;place-items:center;background:radial-gradient(circle,#12203a,#05070f 70%)}
.n22b{padding:12px 18px;border-radius:12px;border:1px solid #334155;background:#0f172a;color:#e2e8f0;font:700 14px system-ui;cursor:pointer}
.n22b:hover,.n22b:focus-visible{border-color:#38bdf8;outline:none}
.n22pop{margin:0;padding:0;border:1px solid #1e293b;border-radius:16px;background:#0b1220;color:#e2e8f0;width:240px;overflow:hidden;box-shadow:0 20px 50px #000a;opacity:0;transform:translateY(8px) scale(.97);transition:opacity .25s,transform .3s cubic-bezier(.3,1.4,.4,1),overlay .3s allow-discrete,display .3s allow-discrete}
.n22pop:popover-open{opacity:1;transform:none}
@starting-style{.n22pop:popover-open{opacity:0;transform:translateY(8px) scale(.97)}}
.n22pop .ph{height:90px;background:linear-gradient(135deg,#7c3aed,#06b6d4);display:grid;place-items:center;font-size:36px}
.n22pop .bd{padding:12px 14px}.n22pop b{display:block;font:800 14px system-ui;margin-bottom:4px}
.n22pop p{margin:0;color:#94a3b8;font:12.5px/1.45 system-ui}
.n22h{position:absolute;bottom:14px;font:11px ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;color:#64748b}

/* n23 field-sizing content growing input */
.n23{display:flex;flex-direction:column;justify-content:center;gap:12px;padding:22px;background:linear-gradient(160deg,#0b1020,#05070e)}
.n23 label{font:700 11px ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:#64748b}
.n23ta{field-sizing:content;min-height:2.6lh;max-height:8lh;width:100%;resize:none;padding:12px 14px;border-radius:14px;border:1px solid #334155;background:#0f172a;color:#e2e8f0;font:600 14px/1.45 system-ui;outline:none}
.n23ta:focus{border-color:#38bdf8;box-shadow:0 0 0 3px #38bdf833}
.n23meta{font:600 11px ui-monospace,monospace;color:#94a3b8}
@supports not (field-sizing:content){.n23ta{min-height:72px}}

/* n24 style queries themed island */
.n24{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:14px;background:#0a0a0a}
.n24isle{container-type:normal;container-name:isle;border-radius:16px;padding:14px;border:1px solid #222;background:#111;color:#e2e8f0}
.n24isle.warm{--theme:warm;background:#1c1210;border-color:#7c2d12;color:#ffedd5}
.n24isle.cool{--theme:cool;background:#0b1220;border-color:#1e3a8a;color:#dbeafe}
.n24isle h5{margin:0 0 6px;font:800 14px system-ui}
.n24isle p{margin:0 0 10px;font:12.5px/1.45 system-ui;opacity:.85}
.n24isle button{padding:8px 12px;border-radius:10px;border:0;font:700 12px system-ui;cursor:pointer;background:#334155;color:#fff}
@container isle style(--theme: warm){
  .n24isle button{background:#f97316;color:#111}
}
@container isle style(--theme: cool){
  .n24isle button{background:#38bdf8;color:#0f172a}
}
/* fallback without style queries already has theme via class colors */
.n24isle.warm button{background:#f97316;color:#111}
.n24isle.cool button{background:#38bdf8;color:#0f172a}

/* n25 animated SVG underline path */
.n25{display:grid;place-items:center;background:radial-gradient(circle at 50% 70%,#1a1030,#050508 70%);padding:20px}
.n25w{position:relative;display:inline-block}
.n25w b{font:900 28px/1.1 system-ui;letter-spacing:-.03em;color:#f8fafc}
.n25w svg{position:absolute;left:-4%;right:-4%;bottom:-10px;width:108%;height:18px;overflow:visible}
.n25w path{fill:none;stroke:#a78bfa;stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:n25draw 1.2s cubic-bezier(.6,0,.2,1) forwards}
@keyframes n25draw{to{stroke-dashoffset:0}}
.n25w:hover path,.n25w:focus-within path{animation:none;stroke-dashoffset:0;stroke:#22d3ee;transition:stroke .3s}
.n25btn{margin-top:28px;padding:8px 14px;border-radius:99px;border:1px solid #4c1d95;background:#1e1036;color:#ede9fe;font:600 12px system-ui;cursor:pointer}
@media (prefers-reduced-motion:reduce){.n25w path{animation:none;stroke-dashoffset:0}}

/* n26 anchor popover stack */
.n26{display:grid;place-items:center;background:radial-gradient(circle,#12203a,#05070f 70%);padding:16px;overflow:visible}
.n26row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.n26b{padding:10px 16px;border-radius:12px;border:1px solid #334155;background:#0f172a;color:#e2e8f0;font:700 13px system-ui;cursor:pointer}
.n26b:hover,.n26b:focus-visible{border-color:#38bdf8;outline:none}
.n26p{margin:0;padding:12px 14px;border:1px solid #1e293b;border-radius:14px;background:#0b1220;color:#e2e8f0;width:200px;box-shadow:0 16px 40px #000a;
  opacity:0;transform:translateY(8px);transition:opacity .25s,transform .3s cubic-bezier(.3,1.4,.4,1),overlay .3s allow-discrete,display .3s allow-discrete}
.n26p:popover-open{opacity:1;transform:none}
@starting-style{.n26p:popover-open{opacity:0;transform:translateY(8px)}}
.n26p b{display:block;font:800 13px system-ui;margin-bottom:4px}.n26p p{margin:0;color:#94a3b8;font:12px/1.4 system-ui}
@supports (position-anchor:--x){
.n26p{position:fixed;top:anchor(bottom);left:anchor(center);translate:-50% 10px;position-try-fallbacks:flip-block}}
.n26h{position:absolute;bottom:14px;font:11px ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:#64748b}

/* n27 scroll-driven counter */
.n27{display:flex;flex-direction:column;background:#070b14;overflow:hidden}
.n27sc{flex:1;overflow-y:auto;scroll-timeline:--n27 block;scrollbar-width:thin}
.n27pad{height:120px;display:grid;place-items:center;color:#334155;font:11px ui-monospace,monospace;letter-spacing:.2em}
.n27num{min-height:160px;display:grid;place-content:center;text-align:center;position:sticky;top:40px}
.n27v{font:900 64px/1 system-ui;color:#38bdf8;font-variant-numeric:tabular-nums}
.n27num small{display:block;font:700 11px ui-monospace,monospace;letter-spacing:.2em;text-transform:uppercase;color:#64748b;margin-top:6px}
.n27bar{height:4px;margin:0 16px 12px;border-radius:99px;background:#1e293b;overflow:hidden}
.n27bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#22d3ee,#a855f7);animation:n27p linear;animation-timeline:--n27}
@keyframes n27p{to{width:100%}}
@supports not (animation-timeline:scroll()){.n27bar i{width:var(--p,0%);animation:none}}

/* n28 view-transition card expand */
.n28{padding:14px;background:#07090f}
.n28g{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;height:100%}
.n28c{border:0;border-radius:16px;background:linear-gradient(145deg,var(--c),#000 140%);font-size:36px;color:#fff;cursor:pointer;transition:transform .2s}
.n28c:hover{transform:scale(1.03)}.n28c:focus-visible{outline:2px solid #fff;outline-offset:3px}
.n28d{position:absolute;inset:14px;border-radius:16px;background:#0e121c;border:1px solid #1e2636;overflow:hidden;display:flex;flex-direction:column}
.n28d[hidden]{display:none!important}
.n28hero{height:48%;display:grid;place-items:center;font-size:64px;background:linear-gradient(145deg,var(--c),#000 140%)}
.n28d h4{margin:12px 16px 4px;font:800 20px system-ui}.n28d p{margin:0 16px;color:#93a0b8;font:13px/1.45 system-ui}
.n28x{position:absolute;top:10px;left:10px;padding:7px 12px;border-radius:99px;border:0;background:#000a;color:#fff;font:600 12px system-ui;cursor:pointer}

/* n29 container query card swap */
.n29{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:16px;background:#0a0a0a}
.n29w{position:relative;width:360px;max-width:90%;container-type:inline-size;container-name:n29}
.n29card{display:grid;grid-template-columns:72px 1fr auto;gap:12px;align-items:center;padding:14px;border-radius:16px;border:1px solid #222;background:#111;color:#e2e8f0}
.n29img{width:72px;height:72px;border-radius:12px;display:grid;place-items:center;font-size:32px;background:linear-gradient(135deg,#7c3aed,#06b6d4)}
.n29tx h5{margin:0 0 4px;font:800 14px system-ui}.n29tx p{margin:0 0 4px;font:12.5px/1.4 system-ui;color:#94a3b8}
.n29meta{font:600 11px system-ui;color:#64748b}
.n29card button{padding:8px 12px;border-radius:10px;border:0;background:#38bdf8;color:#0f172a;font:700 12px system-ui;cursor:pointer}
.n29h{position:absolute;right:-6px;top:0;bottom:0;width:14px;cursor:ew-resize;background:linear-gradient(#38bdf8,#38bdf800);border-radius:0 8px 8px 0;opacity:.5}
.n29h:hover,.n29h:focus-visible{opacity:1;outline:none}
.n29r{font:700 11px ui-monospace,monospace;color:#64748b}
@container n29 (max-width:280px){
  .n29card{grid-template-columns:1fr;text-align:center;justify-items:center}
  .n29card button{width:100%}
}
@container n29 (min-width:420px){
  .n29card{grid-template-columns:96px 1fr auto;padding:18px}
  .n29img{width:96px;height:96px;font-size:42px}
}

/* n30 @property angle spinner */
@property --n30a{syntax:"<angle>";inherits:false;initial-value:0deg}
.n30{display:grid;place-items:center;background:radial-gradient(circle,#1a1030,#050508 70%);gap:16px}
.n30spin{width:100px;height:100px;border-radius:50%;background:conic-gradient(from var(--n30a),#22d3ee,#a855f7,#f472b6,#22d3ee);mask:radial-gradient(farthest-side,#0000 62%,#000 63%);-webkit-mask:radial-gradient(farthest-side,#0000 62%,#000 63%);animation:n30spin 1.4s linear infinite}
@keyframes n30spin{to{--n30a:360deg}}
.n30lab{text-align:center;color:#e2e8f0}.n30lab b{display:block;font:800 14px ui-monospace,monospace}.n30lab span{font:600 11px system-ui;color:#94a3b8}
@media (prefers-reduced-motion:reduce){.n30spin{animation:none;--n30a:120deg}}

/* n31 text-wrap pretty article */
.n31{display:flex;flex-direction:column;justify-content:center;gap:14px;padding:22px;background:linear-gradient(160deg,#0b1020,#05070e)}
.n31art{padding:16px;border-radius:14px;border:1px solid #1e293b;background:#0f172a}
.n31art h4{margin:0 0 10px;font:800 20px/1.25 system-ui;letter-spacing:-.02em;color:#f8fafc;text-wrap:pretty}
.n31art p{margin:0;font:600 14px/1.55 system-ui;color:#94a3b8;text-wrap:pretty}
.n31.off .n31art h4,.n31.off .n31art p{text-wrap:wrap}
.n31t{align-self:flex-start;padding:8px 14px;border-radius:99px;border:1px solid #334155;background:#111;color:#ddd;font:600 12px system-ui;cursor:pointer}

/* n32 offset-path badge race */
.n32{display:grid;place-items:center;background:#05070d;overflow:hidden}
.n32track{position:absolute;inset:18% 10%;border:2px dashed #1e293b;border-radius:50%;pointer-events:none}
.n32b{position:absolute;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:16px;background:#1e1036;border:1px solid #4c1d95;
  offset-path:ellipse(40% 32% at 50% 50%);offset-rotate:0deg;animation:n32race 4s linear infinite}
.n32b.a{animation-duration:3.2s;background:#0f172a;border-color:#22d3ee}
.n32b.b{animation-duration:4s;animation-delay:-1.2s;border-color:#a855f7}
.n32b.c{animation-duration:5s;animation-delay:-2.4s;border-color:#f97316}
@keyframes n32race{to{offset-distance:100%}}
.n32h{position:absolute;bottom:14px;font:11px ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:#64748b}
@supports not (offset-path:ellipse(40% 32% at 50% 50%)){
.n32b{position:relative;offset-path:none;animation:none;margin:0 6px}
.n32{flex-direction:row;display:flex;align-items:center;justify-content:center;gap:8px}
.n32track,.n32h{display:none}
}
@media (prefers-reduced-motion:reduce){.n32b{animation:none;offset-distance:25%}.n32b.b{offset-distance:55%}.n32b.c{offset-distance:85%}}

/* n33 interpolate-size FAQ */
.n33{display:flex;flex-direction:column;justify-content:center;gap:8px;padding:16px;background:#07090f;interpolate-size:allow-keywords}
.n33d{border-radius:12px;border:1px solid #1e293b;background:#0f172a;color:#e2e8f0;overflow:hidden}
.n33d summary{padding:12px 14px;font:700 13px system-ui;cursor:pointer;list-style:none}
.n33d summary::-webkit-details-marker{display:none}
.n33d .bd{padding:0 14px 12px;color:#94a3b8;font:12.5px/1.45 system-ui;height:0;opacity:0;overflow:hidden;transition:height .4s cubic-bezier(.3,1.2,.4,1),opacity .3s,padding .3s}
.n33d[open] .bd{height:auto;opacity:1}
@supports (interpolate-size:allow-keywords){
.n33d .bd{height:0}.n33d[open] .bd{height:auto}
}

/* n34 OKLCH theme dial */
.n34{display:flex;flex-direction:column;justify-content:center;gap:14px;padding:18px;background:#0a0a0a;--h:250}
.n34dial{display:flex;align-items:center;gap:12px}
.n34rng{flex:1;accent-color:oklch(70% .18 var(--h))}
.n34out{font:800 14px ui-monospace,monospace;color:#94a3b8;min-width:48px}
.n34card{padding:16px;border-radius:16px;border:1px solid oklch(40% .08 var(--h));background:oklch(22% .05 var(--h));color:oklch(95% .02 var(--h))}
.n34card b{display:block;font:800 15px system-ui;margin-bottom:6px}
.n34card p{margin:0 0 12px;font:13px/1.45 system-ui;color:oklch(80% .04 var(--h))}
.n34card button{padding:8px 14px;border-radius:10px;border:0;background:oklch(70% .18 var(--h));color:oklch(18% .02 var(--h));font:700 12px system-ui;cursor:pointer}

/* n35 masonry with span */
.n35{padding:12px;background:#050505;overflow:auto}
.n35g{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:56px;gap:8px}
@supports (grid-template-rows:masonry){.n35g{grid-template-rows:masonry;grid-auto-rows:auto}}
.n35g i{display:grid;place-items:center;border-radius:12px;border:1px solid #ffffff18;background:linear-gradient(160deg,var(--a),var(--b));color:#fff;font:800 12px system-ui}
.n35g .span2{grid-column:span 2}.n35g .tall{grid-row:span 2}
.n35h{position:absolute;left:14px;bottom:10px;font:11px ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:#64748b;pointer-events:none}

/* n36 popover hint chain */
.n36{display:grid;place-items:center;background:radial-gradient(circle,#12203a,#05070f 70%)}
.n36b{padding:12px 18px;border-radius:12px;border:1px solid #334155;background:#0f172a;color:#e2e8f0;font:700 14px system-ui;cursor:pointer}
.n36p{margin:auto;padding:16px;border:1px solid #1e293b;border-radius:16px;background:#0b1220;color:#e2e8f0;width:220px;box-shadow:0 20px 50px #000a;
  opacity:0;transform:translateY(8px) scale(.97);transition:opacity .25s,transform .3s cubic-bezier(.3,1.4,.4,1),overlay .3s allow-discrete,display .3s allow-discrete}
.n36p:popover-open{opacity:1;transform:none}
@starting-style{.n36p:popover-open{opacity:0;transform:translateY(8px) scale(.97)}}
.n36p b{display:block;font:800 14px system-ui;margin-bottom:6px}.n36p p{margin:0 0 12px;color:#94a3b8;font:12.5px/1.45 system-ui}
.n36p button{padding:8px 12px;border-radius:10px;border:0;background:#38bdf8;color:#0f172a;font:700 12px system-ui;cursor:pointer}
.n36h{position:absolute;bottom:14px;font:11px ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:#64748b}

/* n37 cross-fade routes fake */
.n37{display:flex;flex-direction:column;background:#07090f;padding:12px;gap:10px}
.n37nav{display:flex;gap:6px;justify-content:center}
.n37nav button{padding:8px 14px;border-radius:99px;border:1px solid #333;background:#111;color:#aaa;font:700 12px system-ui;cursor:pointer}
.n37nav button.on{background:#1e1036;border-color:#7c3aed;color:#ede9fe}
.n37view{position:relative;flex:1;border-radius:14px;overflow:hidden;border:1px solid #1e293b;min-height:0}
.n37pg{position:absolute;inset:0;display:grid;place-content:center;text-align:center;padding:20px;background:linear-gradient(160deg,#0f172a,#1e1b4b);color:#e2e8f0;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .35s,transform .4s cubic-bezier(.3,1.3,.4,1)}
.n37pg.on{opacity:1;transform:none;pointer-events:auto}
.n37pg b{font:900 28px system-ui;letter-spacing:-.03em}.n37pg p{margin:8px 0 0;color:#94a3b8;font:13px system-ui}
@media (prefers-reduced-motion:reduce){.n37pg{transition:none}}

/* n38 sticky stack cards */
.n38{background:#05070d;overflow:hidden}
.n38sc{height:100%;overflow-y:auto;padding:20px 16px 80px;scrollbar-width:thin}
.n38c{position:sticky;top:12px;margin-bottom:16px;padding:20px;border-radius:16px;border:1px solid #ffffff22;background:linear-gradient(160deg,var(--c),#000 160%);color:#fff;box-shadow:0 12px 40px #0008;min-height:120px}
.n38c:nth-child(1){top:12px}.n38c:nth-child(2){top:28px}.n38c:nth-child(3){top:44px}.n38c:nth-child(4){top:60px}
.n38c b{display:block;font:800 16px system-ui;margin-bottom:6px}.n38c p{margin:0;font:13px/1.45 system-ui;opacity:.9}

/* n39 SVG draw on view */
.n39{display:flex;flex-direction:column;background:#070b14;overflow:hidden}
.n39sc{flex:1;overflow-y:auto;scrollbar-width:thin;padding:10px 16px}
.n39pad{height:100px;display:grid;place-items:center;color:#334155;font:11px ui-monospace,monospace;letter-spacing:.2em}
.n39s{width:100%;height:100px;display:block}
.n39s path{fill:none;stroke:#a78bfa;stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
@supports (animation-timeline:view()){
.n39s path{animation:n39draw linear both;animation-timeline:view();animation-range:entry 0% cover 40%}
@keyframes n39draw{to{stroke-dashoffset:0}}
}
.n39s.path-in path{stroke-dashoffset:0;transition:stroke-dashoffset 1.2s cubic-bezier(.6,0,.2,1)}
.n39r{margin:8px auto;padding:7px 14px;border-radius:99px;border:1px solid #333;background:#111;color:#ddd;font:600 12px system-ui;cursor:pointer}
@media (prefers-reduced-motion:reduce){.n39s path{stroke-dashoffset:0;animation:none}}

/* n40 CSS timeline scrubber */
.n40{display:flex;flex-direction:column;background:#05070d;overflow:hidden}
.n40sc{flex:1;overflow-x:auto;scroll-timeline:--n40 inline;scrollbar-width:thin}
.n40track{display:flex;gap:14px;padding:24px 18px 10px;height:100%;box-sizing:border-box}
.n40pg{flex:0 0 78%;border-radius:18px;display:grid;place-items:center;font:850 28px system-ui;color:#fff;border:1px solid #ffffff22;background:linear-gradient(145deg,var(--a),var(--b));scroll-snap-align:center}
.n40sc{scroll-snap-type:x mandatory}
.n40bar{height:4px;margin:0 18px 8px;border-radius:99px;background:#1e293b;overflow:hidden}
.n40bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#22d3ee,#a855f7);animation:n40p linear;animation-timeline:--n40}
@keyframes n40p{to{width:100%}}
.n40h{text-align:center;padding-bottom:10px;font:11px ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:#64748b}
@supports not (animation-timeline:scroll()){.n40bar i{width:var(--p,0%);animation:none}}

/* fl:begin fn41 */
/* fn41 Swatch morph · view transition (flooring) */
.fn41{background:linear-gradient(160deg,#141821,#0a0c12);padding:16px;box-sizing:border-box;color:#ece6dc}
.fn41-badge{position:absolute;right:14px;top:12px;z-index:3;font:700 9px ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;color:#a3e635;padding:4px 8px;border-radius:999px;border:1px solid #a3e63544;background:#0b0f0a}
.fn41-badge.fb{color:#fbbf24;border-color:#fbbf2444}
.fn41-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;height:100%;padding-top:20px;box-sizing:border-box}
.fn41-sw{position:relative;border:0;padding:0;border-radius:16px;overflow:hidden;cursor:pointer;background:#222 center/cover;box-shadow:0 1px 0 #ffffff26 inset,0 12px 24px -10px #000;transition:transform .35s cubic-bezier(.3,1.5,.5,1),box-shadow .3s;min-height:0}
.fn41-sw:hover,.fn41-sw:focus-visible{transform:translateY(-4px) scale(1.02);box-shadow:0 0 0 2px #c49a6c,0 18px 30px -12px #000;outline:none}
.fn41-sw::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(8,6,4,.78)),linear-gradient(120deg,rgba(255,255,255,.18),transparent 35%)}
.fn41-sw span{position:absolute;left:10px;right:10px;bottom:9px;z-index:1;text-align:left;color:#fff;font:800 12.5px/1.15 system-ui;letter-spacing:-.01em}
.fn41-sw small{display:block;font:600 9px ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;color:#e8d5b9;margin-top:2px}
.fn41-detail{position:absolute;inset:16px;display:grid;grid-template-columns:1.35fr 1fr;gap:14px}
.fn41-detail[hidden],.fn41-grid[hidden]{display:none}
.fn41-hero{position:relative;border-radius:18px;overflow:hidden;background:#20160d;box-shadow:0 20px 40px -18px #000}
.fn41-wall{position:absolute;left:0;right:0;top:0;height:32%;background:linear-gradient(180deg,#d8d0c3,#c3b9aa);box-shadow:inset 0 -12px 0 #f4f0e8,inset 0 -14px 6px #0002}
.fn41-win{position:absolute;left:58%;top:16%;width:26%;height:58%;background:linear-gradient(180deg,#9fd3f3,#e3f3ff);border:4px solid #f4f0e8;box-shadow:inset 0 0 0 1px #0002}
.fn41-cam{position:absolute;left:0;right:0;top:32%;bottom:0;perspective:420px;perspective-origin:50% -30%;overflow:hidden}
.fn41-plane{position:absolute;left:-40%;width:180%;top:0;height:200%;transform-origin:50% 0;transform:rotateX(62deg);transition:opacity .35s}
.fn41-glow{position:absolute;left:30%;right:0;top:30%;bottom:0;background:linear-gradient(200deg,rgba(255,240,200,.35),transparent 55%);mix-blend-mode:soft-light;pointer-events:none}
.fn41-info{display:flex;flex-direction:column;gap:6px;min-width:0;padding-top:14px}
.fn41-back{align-self:flex-start;border:0;background:none;color:#c49a6c;font:700 12px system-ui;padding:4px 0;cursor:pointer}
.fn41-kind{font:700 9px ui-monospace,monospace;letter-spacing:.18em;text-transform:uppercase;color:#8b93a3}
.fn41-name{margin:0;font:850 22px/1.05 system-ui;letter-spacing:-.03em;color:#fff}
.fn41-price{margin:0;font:600 13px system-ui;color:#d6c3a5}
.fn41-pat{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.fn41-pat button{border:1px solid #ffffff22;border-radius:999px;background:transparent;color:#cdd3de;font:700 11px system-ui;padding:6px 10px;cursor:pointer}
.fn41-pat button.on{background:#ece6dc;color:#15110c;border-color:transparent}
.fn41-spec{margin:8px 0 0;display:grid;grid-template-columns:auto 1fr;gap:5px 12px;font:600 11.5px system-ui}
.fn41-spec dt{color:#7d8696}.fn41-spec dd{margin:0;color:#e6dfd3;text-align:right}
.fn41-cta{margin-top:auto;border:0;border-radius:12px;padding:11px 12px;background:#c49a6c;color:#1a120a;font:800 13px system-ui;cursor:pointer;box-shadow:inset 0 -2px 0 #0003}
.fn41-cta.ok{background:#22c55e;color:#04160a}
::view-transition-group(fn41-hero){animation-duration:.6s;animation-timing-function:cubic-bezier(.2,.9,.15,1)}
::view-transition-group(fn41-name){animation-duration:.6s;animation-timing-function:cubic-bezier(.2,.9,.15,1)}
::view-transition-old(fn41-hero),::view-transition-new(fn41-hero){height:100%;object-fit:cover}
@media (max-width:560px){.fn41{padding:12px}.fn41-grid{grid-template-columns:repeat(2,1fr);gap:9px}.fn41-detail{inset:12px;grid-template-columns:1fr;grid-template-rows:1.15fr auto;gap:8px}.fn41-info{padding-top:0;gap:4px}.fn41-name{font-size:18px}.fn41-spec{display:none}.fn41-back{position:absolute;left:10px;top:10px;background:#0009;color:#fff;border-radius:999px;padding:5px 10px;z-index:2}}
/* fl:end fn41 */
/* fl:begin fn42 */
/* fn42 Scroll-built floor · install timeline (flooring) */
@property --fn42p{syntax:'<number>';inherits:true;initial-value:0}
.fn42{background:#0b0d12}
.fn42-sc{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#c49a6c33 transparent}
.fn42-sc:focus-visible{outline:2px solid #c49a6c;outline-offset:-2px}
.fn42-track{height:520%}
.fn42-stick{position:sticky;top:0;height:var(--fn42h,400px);animation:fn42p linear both;animation-timeline:scroll(nearest block);overflow:hidden}
@keyframes fn42p{from{--fn42p:0}to{--fn42p:1}}
.fn42-steps{position:absolute;left:12px;right:12px;top:12px;margin:0;padding:0;list-style:none;display:flex;gap:4px;z-index:2}
.fn42-steps li{flex:1;text-align:center;padding:5px 0 6px;border-radius:8px;font:700 9px system-ui;letter-spacing:.02em;color:#677084;background:#141824;position:relative;overflow:hidden;transition:color .3s}
.fn42-steps li.on{color:#1a120a;background:#c49a6c}
.fn42-steps li.done{color:#c49a6c}
.fn42-room{position:absolute;left:16px;right:16px;top:48px;bottom:50px;border-radius:6px;overflow:hidden;background:#06070a;box-shadow:inset 0 0 0 1px #ffffff12}
.fn42-room>*{position:absolute;inset:0}
.fn42-sub{--k:clamp(0,calc(var(--fn42p) / .07),1);opacity:var(--k);background:repeating-linear-gradient(0deg,#0000 0 calc(25% - 1px),#2a1e12 0 25%),repeating-linear-gradient(90deg,#0000 0 calc(50% - 1px),#2a1e12 0 50%),radial-gradient(#b08a5a 15%,#0000 16%) 0 0/9px 7px,radial-gradient(#8f6c42 18%,#0000 19%) 4px 3px/11px 9px,#a07c4e;filter:saturate(.8)}
.fn42-und i{--k:clamp(0,calc((var(--fn42p) - var(--s)) / .1),1);position:absolute;left:0;height:34%;width:100%;transform-origin:0 50%;transform:scaleX(var(--k));background:repeating-linear-gradient(90deg,#0000 0 18px,#ffffff14 18px 19px),linear-gradient(#4f8fb8,#6aa9cf 50%,#4f8fb8);opacity:.92;box-shadow:0 1px 0 #0004}
.fn42-und i:nth-child(1){top:0}.fn42-und i:nth-child(2){top:33%}.fn42-und i:nth-child(3){top:66%}
.fn42-und i::after{content:"";position:absolute;right:-7px;top:-2px;bottom:-2px;width:14px;border-radius:7px;background:linear-gradient(90deg,#3d7aa3,#9bd0ef,#3d7aa3);opacity:calc(1 - var(--k) * var(--k) * var(--k) * var(--k));transform:scaleX(calc(1 / max(var(--k),.05)))}
.fn42-row{--k:clamp(0,calc((var(--fn42p) - var(--s)) / .085),1);--e:calc(var(--k) * var(--k) * (3 - 2 * var(--k)));position:absolute;left:0;width:100%;height:calc(100% / 8);background-size:100% 800%;transform:translateX(calc((1 - var(--e)) * -108%)) translateY(calc((1 - var(--k)) * -8px));box-shadow:0 calc((1 - var(--k)) * 10px) calc((1 - var(--k)) * 14px) #000a}
.fn42-row::after{content:"✓";position:absolute;right:6px;top:50%;translate:0 -50%;width:16px;height:16px;border-radius:50%;display:grid;place-items:center;font:900 10px system-ui;color:#04160a;background:#4ade80;opacity:calc(clamp(0,calc((var(--k) - .97) * 40),1) - clamp(0,calc((var(--fn42p) - var(--s) - .16) * 12),1));transform:scale(calc(.4 + var(--k) * .6));box-shadow:0 0 10px #4ade80aa}
.fn42-trim{--k:clamp(0,calc((var(--fn42p) - .82) / .06),1);box-shadow:inset 0 0 0 calc(var(--k) * 7px) #f3efe7,inset 0 0 0 calc(var(--k) * 9px) #0003,inset 0 0 calc(var(--k) * 18px) #0005}
.fn42-rug{--k:clamp(0,calc((var(--fn42p) - .89) / .04),1);inset:38% 24% 26% 24%;border-radius:4px;background:repeating-linear-gradient(90deg,#0000 0 6px,#ffffff10 6px 7px),radial-gradient(circle,#e3b04b 0 14%,#8d3b2f 15% 34%,#efe4cc 35% 38%,#2e4f63 39%);box-shadow:0 0 0 4px #efe4cc,0 6px 14px #0007;opacity:var(--k);transform:scale(calc(1.25 - var(--k) * .25)) rotate(calc((1 - var(--k)) * 8deg))}
.fn42-sofa{--k:clamp(0,calc((var(--fn42p) - .91) / .04),1);inset:10% 22% auto 22%;height:14%;border-radius:8px;background:linear-gradient(90deg,#0000 calc(33% - 1px),#3a4550 0 33%,#0000 0 calc(66% - 1px),#3a4550 0 66%,#0000 0) 0 40%/100% 60% no-repeat,linear-gradient(#5b6b7c,#45525f);box-shadow:inset 0 10px 0 #3e4a56,inset 8px 0 0 #3e4a56,inset -8px 0 0 #3e4a56,0 8px 16px #0008;opacity:var(--k);transform:translateY(calc((1 - var(--k)) * -30px)) scale(calc(1.2 - var(--k) * .2))}
.fn42-plant{--k:clamp(0,calc((var(--fn42p) - .93) / .04),1);inset:auto 8% 8% auto;width:16%;aspect-ratio:1;height:auto;border-radius:50%;background:radial-gradient(circle at 40% 40%,#4ade80,#166534 60%,#14532d);box-shadow:0 6px 12px #0008;opacity:var(--k);transform:scale(calc(.2 + var(--k) * .8)) rotate(calc(var(--k) * 90deg))}
.fn42-stamp{--k:clamp(0,calc((var(--fn42p) - .965) / .03),1);inset:auto;left:50%;top:50%;padding:6px 14px;border:3px solid #ef4444;border-radius:8px;color:#ef4444;font:900 20px system-ui;letter-spacing:.14em;text-transform:uppercase;background:#fff1;backdrop-filter:blur(1px);opacity:var(--k);transform:translate(-50%,-50%) rotate(-12deg) scale(calc(2.2 - var(--k) * 1.2))}
.fn42-hud{position:absolute;left:16px;right:16px;bottom:22px;margin:0;text-align:center;font:600 11px system-ui;color:#8b93a3}
.fn42-sq{font:800 13px ui-monospace,monospace;color:#f1e6d4}
.fn42-hint{color:#c49a6c;font-weight:800}
.fn42-badge{position:absolute;left:0;right:0;text-align:center;bottom:7px;font:700 8px ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:#a3e635;opacity:.7;pointer-events:none}
.fn42-badge.fb{color:#fbbf24}
/* fl:end fn42 */
/* fl:begin fn43 */
/* fn43 Magnetic zellige tiles (flooring) */
.fn43{background:#0c0e13;--grout:#e9e4da}
.fn43-wall{position:absolute;inset:0 0 58px;display:grid;place-items:center;perspective:700px;overflow:hidden;background:radial-gradient(90% 70% at 50% 40%,#1b2130,#0c0e13)}
.fn43-grid{display:grid;grid-template-columns:repeat(var(--cols,5),var(--ts,48px));gap:4px;padding:4px;background:var(--grout);border-radius:6px;transform-style:preserve-3d;box-shadow:0 20px 40px -10px #000c,inset 0 0 6px #0003;transition:background .5s}
.fn43-t{width:var(--ts,48px);height:var(--ts,48px);transform-style:preserve-3d;will-change:transform}
.fn43-in{position:relative;width:100%;height:100%;border-radius:3px;background-size:cover;box-shadow:inset 0 1px 1px rgba(255,255,255,.55),inset 0 -2px 3px rgba(0,0,0,.25),0 calc(var(--z,0) * .35px) calc(var(--z,0) * .6px + 1px) rgba(0,0,0,.45);overflow:hidden}
.fn43-in::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--hx,30%) var(--hy,25%),rgba(255,255,255,calc(.06 + var(--hi,0) * .7)) 0,rgba(255,255,255,calc(var(--hi,0) * .15)) 14%,rgba(255,255,255,0) 34%),linear-gradient(135deg,rgba(255,255,255,.12),transparent 50%,rgba(0,0,0,.12));pointer-events:none}
.fn43-bar{position:absolute;left:0;right:0;bottom:0;height:58px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 14px;border-top:1px solid #ffffff10;background:#0f1218}
.fn43-bar b{display:block;font:800 13px system-ui;color:#f3efe8;letter-spacing:-.01em}
.fn43-bar small{font:600 10.5px system-ui;color:#7f8899}
.fn43-grout{display:flex;gap:6px}
.fn43-grout button{width:22px;height:22px;border-radius:6px;border:2px solid #ffffff22;background:var(--c);cursor:pointer}
.fn43-grout button.on{border-color:#c49a6c}
/* fl:end fn43 */
/* fl:begin fn44 */
/* fn44 3D rug unroll (flooring) */
.fn44{background:radial-gradient(110% 80% at 50% 0%,#1e1a17,#080706 70%);overflow:hidden}
.fn44-cam{position:absolute;inset:0;perspective:900px;perspective-origin:50% 0%}
.fn44-floor{position:absolute;left:50%;top:50%;width:760px;height:560px;margin:-250px 0 0 -380px;transform-style:preserve-3d;transform:rotateX(var(--tx,60deg)) rotateZ(var(--tz,0deg));background-size:380px auto;box-shadow:inset 0 0 120px 40px #080706}
.fn44-floor::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at 50% 45%,transparent 40%,#080706 100%);pointer-events:none;transform:translateZ(.5px)}
.fn44-rug{position:absolute;left:21%;top:24%;width:58%;height:46%;transform:translateZ(1px);clip-path:inset(-8% calc((1 - var(--u,0)) * 100%) -8% -6%);filter:drop-shadow(0 6px 6px rgba(0,0,0,.55))}
.fn44-pat{position:absolute;inset:0;width:100%;height:100%;border-radius:2px;transition:opacity .4s}
.fn44-fr{position:absolute;top:2%;bottom:2%;width:5%;background:repeating-linear-gradient(0deg,#efe6d2 0 2px,transparent 2px 5px)}
.fn44-fr.l{right:100%;opacity:clamp(0,calc(var(--u,0) * 20 - 1),1)}.fn44-fr.r{left:100%}
.fn44-roll{--d:calc(var(--d0,96px) * var(--ds,1));position:absolute;top:22%;height:50%;left:calc(21% + var(--u,0) * 58% - var(--d) / 2);width:var(--d);transform-style:preserve-3d;transform:translateZ(1px)}
.fn44-body{position:absolute;inset:0;transform:translateZ(calc(var(--d) * .5));border-radius:calc(var(--d) * .5) / 18px;background:linear-gradient(90deg,rgba(0,0,0,.7),rgba(0,0,0,.1) 30%,rgba(255,244,226,.28) 52%,rgba(0,0,0,.15) 70%,rgba(0,0,0,.75)),repeating-linear-gradient(90deg,rgba(0,0,0,.12) 0 2px,transparent 2px 7px) calc(var(--spin,0) * 1px) 0,var(--body);box-shadow:0 0 0 1px #0004}
.fn44-cap{position:absolute;left:0;bottom:0;width:var(--d);height:var(--d);transform-origin:50% 100%;transform:rotateX(-90deg) translateZ(1px);border-radius:50%;background:repeating-radial-gradient(circle at 50% 50%,#7a3b2c 0 3px,#e8dcc4 3px 4px,#2e4a63 4px 7px);box-shadow:inset 0 0 0 2px #0003,inset -6px -6px 12px #0006}
.fn44-sh{position:absolute;inset:-6% -30% -6% -10%;background:radial-gradient(closest-side,rgba(0,0,0,.6),transparent);transform:translateZ(-.5px)}
.fn44.open .fn44-roll{opacity:0;transition:opacity .25s .05s}
.fn44-dust{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}
.fn44-dust i{position:absolute;width:10px;height:10px;border-radius:50%;background:rgba(240,225,200,.55);filter:blur(2px);animation:fn44d 1.1s ease-out forwards}
@keyframes fn44d{0%{transform:translateZ(4px) scale(.4);opacity:.9}100%{transform:translate(var(--dx),var(--dy)) translateZ(30px) scale(2.4);opacity:0}}
.fn44-ui{position:absolute;left:14px;bottom:14px;display:flex;gap:8px;flex-wrap:wrap}
.fn44-ui button{border:1px solid #ffffff1f;border-radius:999px;padding:9px 14px;background:#151311cc;color:#efe6d2;font:700 12px system-ui;cursor:pointer;backdrop-filter:blur(6px)}
.fn44-ui .fn44-go{background:#efe6d2;color:#1c140c;border-color:transparent;min-width:84px}
.fn44-cap-t{position:absolute;left:16px;top:12px;margin:0;display:grid;gap:1px;pointer-events:none}
.fn44-cap-t b{font:800 15px system-ui;color:#f5ecdc;letter-spacing:-.01em}
.fn44-cap-t span{font:600 11px system-ui;color:#a39684}
@media (max-width:560px){.fn44-floor{width:600px;height:460px;margin:-200px 0 0 -300px}}
/* fl:end fn44 */
/* fl:begin fn45 */
/* fn45 Epoxy pour · gooey gloss (flooring) */
.fn45{background:#3b3b3a;touch-action:none;cursor:crosshair;user-select:none;-webkit-user-select:none}
.fn45-svg{position:absolute}
.fn45-floor{position:absolute;inset:0;background:radial-gradient(70% 60% at 50% 40%,transparent,rgba(0,0,0,.45)),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),linear-gradient(90deg,transparent calc(50% - 1px),#2224 0 calc(50% + 1px),transparent 0),#8b8a86}
.fn45-goo{position:absolute;inset:0;filter:url(#fn45-goo)}
.fn45-goo i{position:absolute;left:0;top:0;border-radius:50%;width:2px;height:2px;margin:-1px;background:radial-gradient(circle at 38% 34%,var(--l) 0,var(--c) 45%,var(--d) 100%);transform:translate(var(--x),var(--y)) scale(var(--r))}
.fn45-cure{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1.2s ease;pointer-events:none}
.fn45.cured .fn45-cure{opacity:1}
.fn45.cured .fn45-cup{opacity:0}
.fn45-gloss{position:absolute;inset:0;pointer-events:none;opacity:0;background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.22) 24%,transparent 27%,transparent 55%,rgba(255,255,255,.16) 58%,transparent 61%),linear-gradient(180deg,rgba(255,255,255,.18),transparent 45%);transition:opacity 1s}
.fn45.cured .fn45-gloss{opacity:1;animation:fn45g 6s ease-in-out infinite alternate}
@keyframes fn45g{to{background-position:60px 0,0 0}}
.fn45-cup{position:absolute;left:0;top:0;width:34px;height:40px;transform:translate(var(--cx,-100px),var(--cy,-100px)) translate(-6px,-78px) rotate(var(--tilt,0deg));transform-origin:30px 6px;transition:rotate .2s;pointer-events:none;z-index:3}
.fn45-cup b{position:absolute;inset:0;border-radius:4px 4px 10px 10px;background:linear-gradient(90deg,#d9dde3,#fff 40%,#aeb4bd);box-shadow:0 6px 14px #0007,inset 0 3px 0 var(--cup,#c8743c)}
.fn45-stream{position:absolute;left:30px;top:4px;width:5px;height:76px;border-radius:3px;background:linear-gradient(90deg,var(--d2,#8a4a20),var(--cup,#c8743c),var(--d2,#8a4a20));transform-origin:50% 0;transform:rotate(calc(var(--tilt,0deg) * -1)) scaleY(var(--pour,0));transition:transform .18s}
.fn45-top{position:absolute;left:14px;right:14px;top:12px;display:flex;justify-content:space-between;align-items:center;gap:8px;pointer-events:none;z-index:2}
.fn45-pill{padding:6px 11px;border-radius:999px;background:rgba(20,20,22,.6);border:1px solid #ffffff1a;color:#d9d6cf;font:600 11px system-ui;backdrop-filter:blur(6px)}
.fn45-pill b{font:800 12px ui-monospace,monospace;color:#fff}
.fn45-tip{font:700 10px ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:#f2efe8;text-shadow:0 1px 4px #000}
.fn45-ui{position:absolute;left:12px;right:12px;bottom:12px;display:flex;justify-content:space-between;align-items:center;gap:8px;z-index:2}
.fn45-cols{display:flex;gap:6px;padding:5px;border-radius:999px;background:rgba(20,20,22,.6);border:1px solid #ffffff1a;backdrop-filter:blur(6px)}
.fn45-cols button{width:26px;height:26px;border-radius:50%;border:2px solid transparent;cursor:pointer;background:radial-gradient(circle at 35% 30%,#fff9,#0000 40%),conic-gradient(from 40deg,var(--c),#fff6,var(--c),#0005,var(--c));transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.fn45-cols button.on{border-color:#fff;transform:scale(1.12)}
.fn45-flood{border:0;border-radius:999px;padding:9px 14px;background:#f2efe8;color:#1d1d1f;font:800 12px system-ui;cursor:pointer;box-shadow:0 4px 14px #0006}
/* fl:end fn45 */

/* === showcase-fit (Bobby 2026-10-21): each demo fills a stage sized to what it is === */
#demo-root{grid-auto-flow:dense}
#demo-root > .item > .stage{display:block;padding:0;overflow:hidden;min-width:0;flex:1 1 0;height:auto;min-height:var(--h,300px)}
#demo-root > .item > .stage > *{width:100%;height:100%;min-width:0;box-sizing:border-box}
#demo-root > .item.fit-w2{grid-column:span 2}
#demo-root > .item.fit-hs{--h:220px}
#demo-root > .item.fit-hl{--h:400px}
#demo-root > .item.fit-hxl{--h:520px}
@media (max-width:700px){#demo-root > .item.fit-w2{grid-column:auto}}

/* fl:begin kn46 */
/* 46 Self-building kitchen · scroll install */
@property --kn46-p{syntax:'<number>';inherits:true;initial-value:0}
.kn46,.item .stage .dm.kn46{background:radial-gradient(120% 90% at 50% 0%,#1b1e27,#0b0c10 70%)}
.kn46{position:relative;overflow:hidden;min-height:400px;height:100%;font-family:system-ui,sans-serif;color:#ece6dc}
.kn46-sc{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#d4a37344 transparent}
.kn46-sc:focus-visible{outline:2px solid #d4a373;outline-offset:-2px}
.kn46-track{height:620%}
.kn46-stick{position:sticky;top:0;height:var(--kn46-h,400px);overflow:hidden;animation:kn46-p linear both;animation-timeline:scroll(nearest block)}
@keyframes kn46-p{from{--kn46-p:0}to{--kn46-p:1}}
.kn46-steps{position:absolute;left:12px;right:12px;top:12px;margin:0;padding:0;list-style:none;display:flex;gap:4px;z-index:2}
.kn46-steps li{flex:1;min-width:0;text-align:center;padding:5px 0 6px;border-radius:8px;font:700 9px system-ui;color:#687084;background:#151822;transition:color .3s,background .3s}
.kn46-steps li.kn46-on{color:#1b130b;background:#d4a373}
.kn46-steps li.kn46-done{color:#d4a373}
.kn46-room{position:absolute;left:14px;right:14px;top:44px;bottom:54px;border-radius:8px;overflow:hidden;perspective:700px;background:linear-gradient(180deg,#ddd5c7,#cfc5b4 93.5%,#5a3d27 93.5%,#7a5536);box-shadow:inset 0 0 0 1px #ffffff14,0 20px 40px -20px #000;filter:brightness(calc(.42 + var(--kn46-p) * .58)) saturate(calc(.6 + var(--kn46-p) * .4))}
.kn46-p{position:absolute;display:block;--kn46-k:clamp(0,calc((var(--kn46-p) - var(--kn46-s)) / var(--kn46-d)),1);--kn46-e:calc(var(--kn46-k) * var(--kn46-k) * (3 - 2 * var(--kn46-k)))}
.kn46-tile{background:linear-gradient(180deg,#ffffff55,#0000 40%,#0000001a),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='16'%3E%3Cpath d='M0 .5H32M0 8.5H32M.5 0V8M16.5 8V16' stroke='%23bab2a5' fill='none'/%3E%3C/svg%3E"),#f3efe8;clip-path:inset(calc((1 - var(--kn46-e)) * 100%) 0 0 0)}
.kn46-win{background:linear-gradient(90deg,#0000 calc(50% - 2px),#f3efe7 0 calc(50% + 2px),#0000 0),linear-gradient(#0000 calc(50% - 2px),#f3efe7 0 calc(50% + 2px),#0000 0),linear-gradient(#8ec6ec,#e3f2ff 70%,#cfe6c6);box-shadow:inset 0 0 0 4px #f3efe7,inset 0 0 0 5px #0002,0 0 0 2px #e4ddd0;opacity:var(--kn46-k)}
.kn46-box{background:linear-gradient(90deg,#c4ad86,#e9d9ba 7%,#e9d9ba 93%,#c4ad86);box-shadow:inset 0 0 0 2px #b59d76,inset 0 14px 18px -8px #0006,0 calc(var(--kn46-e) * 8px) 10px -4px #0007;transform:translateY(calc((1 - var(--kn46-e)) * -140%)) scaleY(calc(1 + (1 - var(--kn46-e)) * .12));opacity:min(1,calc(var(--kn46-k) * 5))}
.kn46-box::after{content:"";position:absolute;left:5%;right:5%;top:48%;height:3px;background:#cdb894;box-shadow:0 2px 2px #0003}
.kn46-f{background:var(--kn46-wood) center/cover,#6b4a2f;border-radius:2px;box-shadow:inset 0 0 0 1px #0005,inset 0 1px 0 #ffffff2a,0 2px 3px #0004;transform:rotateY(calc((1 - var(--kn46-e)) * var(--kn46-sw,0deg)));opacity:min(1,calc(var(--kn46-k) * 4))}
.kn46-f::before{content:"";position:absolute;inset:11% 16%;border-radius:1px;box-shadow:inset 1px 1px 0 #0009,inset -1px -1px 0 #ffffff33,inset 3px 3px 6px #0005}
.kn46-f.kn46-dr{transform:translateZ(calc((1 - var(--kn46-e)) * 160px))}
.kn46-f.kn46-dr::before{inset:18% 9%}
.kn46-pull{position:absolute;width:3px;height:26%;border-radius:2px;background:linear-gradient(90deg,#7d838b,#f4f6f8 45%,#9aa0a8);box-shadow:1px 1px 1px #0007;--kn46-k:clamp(0,calc((var(--kn46-p) - var(--kn46-ps)) / .03),1);transform:scale(calc(var(--kn46-k) * (1 + (1 - var(--kn46-k)) * 2.2)))}
.kn46-pull.kn46-h{width:38%;height:3px;left:31%;top:44%;background:linear-gradient(#7d838b,#f4f6f8 45%,#9aa0a8)}
.kn46-pull::after{content:"";position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px;border-radius:50%;border:1px solid #fff;opacity:calc(var(--kn46-k) * (1 - var(--kn46-k)) * 4);transform:scale(calc(.4 + var(--kn46-k)))}
.kn46-ctop{z-index:2;border-radius:1px;background:linear-gradient(180deg,#fdfcf9,#ebe7e0 55%,#b9b2a6),repeating-linear-gradient(115deg,#0000 0 40px,#b9b2a655 41px,#0000 43px);box-shadow:0 3px 4px #0006;transform:translateX(calc((1 - var(--kn46-e)) * 105%))}
.kn46-sink{z-index:3;border-radius:2px;background:linear-gradient(#2e3238,#5b6168);box-shadow:inset 0 1px 2px #000;opacity:var(--kn46-k)}
.kn46-fau{z-index:3;border:3px solid #cfd4db;border-bottom:0;border-left-color:#8d939b;border-radius:10px 10px 0 0;box-sizing:border-box;transform-origin:50% 100%;transform:scaleY(var(--kn46-e))}
.kn46-up{transform:translateY(calc((1 - var(--kn46-e)) * -120%))}
.kn46-crown{z-index:2;background:linear-gradient(#f4efe6,#d2c9b9);box-shadow:0 2px 3px #0004;transform:scaleX(var(--kn46-e))}
.kn46-led{z-index:3;pointer-events:none;mix-blend-mode:screen;opacity:var(--kn46-k);background:radial-gradient(40% 70% at 14% 0%,#ffd99aaa,#0000 70%),radial-gradient(40% 70% at 37% 0%,#ffd99a99,#0000 70%),radial-gradient(40% 70% at 86% 0%,#ffd99aaa,#0000 70%)}
.kn46-led::before{content:"";position:absolute;left:0;width:47%;top:0;height:2px;background:#fff6d8;box-shadow:0 0 8px 2px #ffd38a}
.kn46-led::after{content:"";position:absolute;right:0;width:24%;top:0;height:2px;background:#fff6d8;box-shadow:0 0 8px 2px #ffd38a}
.kn46-stamp{position:absolute;z-index:4;left:50%;top:46%;padding:6px 12px;border:3px solid #ef4444;border-radius:8px;color:#ef4444;font:900 16px system-ui;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;background:#fff2;--kn46-k:clamp(0,calc((var(--kn46-p) - .95) / .035),1);opacity:var(--kn46-k);transform:translate(-50%,-50%) rotate(-10deg) scale(calc(2.2 - var(--kn46-k) * 1.2))}
.kn46-hud{position:absolute;left:14px;right:14px;bottom:20px;margin:0;display:flex;justify-content:space-between;align-items:center;gap:8px;font:600 11px system-ui;color:#8d95a5}
.kn46-hud b{font:800 13px ui-monospace,monospace;color:#f4e9d8}
.kn46-tally{display:inline-block}
.kn46-hint{color:#d4a373;font-weight:800;white-space:nowrap}
.kn46-badge{position:absolute;left:0;right:0;bottom:5px;text-align:center;font:700 8px ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:#a3e635;opacity:.7;pointer-events:none}
.kn46-badge.kn46-fb{color:#fbbf24}
@media (prefers-reduced-motion: reduce){.kn46-steps li{transition:none}}
/* fl:end kn46 */
/* fl:begin kn47 */
/* 47 Soft-close hinge · Verlet door lab */
.kn47,.item .stage .dm.kn47{background:radial-gradient(90% 80% at 30% 20%,#232019,#0c0b09 75%)}
.kn47{position:relative;overflow:hidden;min-height:400px;height:100%;display:grid;grid-template-columns:1.25fr 1fr;font-family:system-ui,sans-serif;color:#ece6dc;user-select:none;-webkit-user-select:none}
.kn47-scene{position:relative;perspective:900px;perspective-origin:50% 30%;touch-action:none;cursor:grab}
.kn47-scene:active{cursor:grabbing}
.kn47-wrap{position:absolute;left:50%;top:52%;width:min(230px,78%);aspect-ratio:1/1.08;transform:translate(-50%,-50%);transform-style:preserve-3d}
.kn47-ct{position:absolute;left:-6%;right:-6%;top:-7%;height:7%;border-radius:2px;background:linear-gradient(#fbfaf6,#e3ded5 60%,#a9a296);box-shadow:0 4px 6px #0007}
.kn47-mug{position:absolute;bottom:100%;left:12%;width:13%;height:150%;border-radius:2px 2px 5px 5px;background:linear-gradient(90deg,#c25a3a,#e98b63 45%,#9c3f25);transform-origin:50% 100%}
.kn47-mug::after{content:"";position:absolute;left:100%;top:22%;width:42%;height:46%;border:3px solid #b8502f;border-left:0;border-radius:0 8px 8px 0;box-sizing:border-box}
.kn47-m2{left:30%;height:120%;background:linear-gradient(90deg,#2f6f73,#5aa6a6 45%,#1f4f52)}
.kn47-m2::after{border-color:#2f6f73}
.kn47-jar{position:absolute;bottom:100%;right:14%;width:14%;height:260%;border-radius:4px 4px 3px 3px;background:linear-gradient(90deg,#ffffff22,#ffffff66 40%,#ffffff1a),linear-gradient(#0000 30%,#c99a52 30% 90%,#0000 0);box-shadow:inset 0 0 0 1px #ffffff55;transform-origin:50% 100%}
.kn47-cab{position:absolute;inset:0 0 6%;background:linear-gradient(90deg,#b49c78,#d9c7a6 6%,#d9c7a6 94%,#a58c68);box-shadow:0 16px 30px -10px #000;transform-style:preserve-3d;border-radius:2px}
.kn47-in{position:absolute;inset:4%;background:linear-gradient(180deg,#3a2c1c,#1e160d);box-shadow:inset 0 10px 18px #000a;filter:brightness(calc(.35 + var(--kn47-a,0) / 110 * .75))}
.kn47-shelf{position:absolute;left:0;right:0;top:48%;height:4%;background:linear-gradient(#e6d6b6,#b9a27c);box-shadow:0 3px 4px #0008}
.kn47-plates{position:absolute;left:12%;width:44%;bottom:54%;height:22%;border-radius:4px;background:repeating-linear-gradient(0deg,#f4f1ea 0 3px,#c8c2b6 3px 4px);box-shadow:0 2px 3px #0006}
.kn47-bowl{position:absolute;left:30%;width:40%;bottom:4%;height:20%;border-radius:0 0 50% 50%/0 0 100% 100%;background:linear-gradient(90deg,#3c6e8f,#78acc9 45%,#2c516b)}
.kn47-kick{position:absolute;left:4%;right:4%;bottom:0;height:6%;background:#15110c}
.kn47-door{position:absolute;inset:0;transform-origin:0 50%;transform-style:preserve-3d;transform:rotateY(calc(var(--kn47-a,0) * -1deg))}
.kn47-front,.kn47-back{position:absolute;inset:0;border-radius:3px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.kn47-front{background:var(--kn47-wood) center/cover,#7a5232;box-shadow:inset 0 0 0 1px #0006,inset 0 1px 0 #ffffff33,inset calc(var(--kn47-a,0) * -.3px) 0 30px #0000004d}
.kn47-front::before{content:"";position:absolute;inset:12% 17%;border-radius:2px;box-shadow:inset 2px 2px 0 #000a,inset -1px -1px 0 #ffffff3d,inset 5px 5px 10px #0006}
.kn47-pull{position:absolute;right:9%;top:9%;width:5px;height:28%;border-radius:3px;background:linear-gradient(90deg,#1d1f22,#5a5f66 45%,#22252a);box-shadow:2px 2px 3px #0008}
.kn47-back{transform:rotateY(180deg);background:linear-gradient(90deg,#f7f5f0,#e7e3db);box-shadow:inset 0 0 0 1px #0003}
.kn47-cup{position:absolute;right:6%;top:11%;width:20%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#8a9097 0 34%,#c9cdd2 35% 52%,#6b7077 53% 60%,#0000 61%)}
.kn47-cup::after{content:"";position:absolute;left:62%;top:34%;width:110%;height:32%;border-radius:3px;background:linear-gradient(#d7dade,#8e949b)}
.kn47-c2{top:auto;bottom:11%}
.kn47-bang{position:absolute;left:58%;top:30%;font:900 clamp(22px,6vw,40px)/1 system-ui;letter-spacing:.04em;color:#ff4d3d;text-shadow:0 0 18px #ff4d3d88;opacity:0;pointer-events:none;transform:rotate(-8deg)}
.kn47-tip{position:absolute;left:0;right:0;bottom:10px;text-align:center;font:700 10px ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:#d4a373;pointer-events:none;transition:opacity .4s}
.kn47-panel{position:relative;display:flex;flex-direction:column;gap:8px;padding:14px 14px 14px 4px;min-width:0}
.kn47-plan{width:100%;height:auto;max-height:120px;border-radius:10px;background:#12100d;border:1px solid #ffffff12}
.kn47-plan text{font:700 7px ui-monospace,monospace;fill:#7d7466;letter-spacing:.08em;text-transform:uppercase}
.kn47-plan .kn47-zt{fill:#4ade80}
.kn47-carc{fill:#2a2219;stroke:#5a4a36}
.kn47-zone{fill:#4ade8026;stroke:#4ade8066;stroke-width:.6}
.kn47-dl{stroke:#c08a5b;stroke-width:4;stroke-linecap:round}
.kn47-pin{fill:#e5e7eb}
.kn47-damp rect{fill:#6b7280}
.kn47-rod{stroke:#d1d5db;stroke-width:2;stroke-linecap:round}
.kn47.kn47-catch .kn47-damp rect{fill:#4ade80}
.kn47-graph{width:100%;height:auto;aspect-ratio:320/96;border-radius:10px;background:#12100d;border:1px solid #ffffff12}
.kn47-read{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:0}
.kn47-read div{padding:6px 8px;border-radius:8px;background:#16130f;border:1px solid #ffffff10;min-width:0}
.kn47-read dt{font:700 8px ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:#7d7466}
.kn47-read dd{margin:2px 0 0;font:800 13px ui-monospace,monospace;color:#f3eadb;white-space:nowrap}
.kn47-hit.kn47-bad{color:#ff6b5b}.kn47-hit.kn47-ok{color:#4ade80}
.kn47-btns{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto}
.kn47-btns button{flex:1;min-width:0;border:0;border-radius:10px;padding:9px 8px;font:800 12px system-ui;cursor:pointer;transition:transform .2s cubic-bezier(.3,1.6,.5,1),background .3s}
.kn47-btns button:active{transform:scale(.95)}
.kn47-soft{background:#4ade80;color:#05210f}
.kn47-soft[aria-pressed="false"]{background:#3a1a16;color:#ff8a7a;box-shadow:inset 0 0 0 1px #ff6b5b66}
.kn47-fling{background:#efe6d2;color:#1c140c}
@media (max-width:560px){.kn47{grid-template-columns:1fr;grid-template-rows:1fr auto}.kn47-panel{padding:0 10px 10px;gap:6px}.kn47-plan,.kn47-graph{display:none}.kn47-wrap{width:min(190px,62%);top:54%}}
@media (prefers-reduced-motion: reduce){.kn47-tip{transition:none}}
/* fl:end kn47 */
/* fl:begin kn48 */
/* 48 CNC door-style morph · view transition */
.kn48,.item .stage .dm.kn48{background:linear-gradient(160deg,#16181f,#0a0b0f)}
.kn48{position:relative;overflow:hidden;min-height:400px;height:100%;display:grid;grid-template-columns:1.1fr 1fr;gap:12px;padding:16px;box-sizing:border-box;font-family:system-ui,sans-serif;color:#ece6dc}
.kn48-badge{position:absolute;right:14px;top:12px;z-index:3;font:700 9px ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;color:#a3e635;padding:4px 8px;border-radius:999px;border:1px solid #a3e63544;background:#0b0f0a}
.kn48-badge.kn48-fb{color:#fbbf24;border-color:#fbbf2444}
.kn48-bay{position:relative;display:grid;place-items:center;border-radius:14px;background:radial-gradient(80% 60% at 50% 30%,#2a2620,#14120f);box-shadow:inset 0 0 0 1px #ffffff10;min-height:0}
.kn48-frame{position:relative;height:min(320px,88%);aspect-ratio:100/160;max-width:88%}
.kn48-door{--kn48-face:#efece5;--kn48-ink:#0000002e;position:absolute;inset:0;border-radius:3px;background:linear-gradient(115deg,#ffffff2e,#fff0 38%,#0000 60%,#00000018),var(--kn48-face) center/cover;box-shadow:0 18px 30px -12px #000,0 0 0 1px #0004,inset 0 1px 0 #ffffff40}
.kn48-panel{position:absolute;inset:10% 16%;border-radius:2px;background:linear-gradient(115deg,#ffffff1f,#fff0 45%),var(--kn48-face) center/cover;box-shadow:inset 2px 2px 0 var(--kn48-ink),inset 4px 5px 8px var(--kn48-ink),inset -1px -1px 0 #ffffff40;transition:border-radius .01s}
.kn48-door[data-s="slab"] .kn48-panel{opacity:0}
.kn48-door[data-s="raised"] .kn48-panel{box-shadow:inset 2px 2px 0 var(--kn48-ink),inset 7px 7px 0 #00000014,inset -7px -7px 0 #ffffff2a,inset 9px 9px 0 #ffffff14,inset -9px -9px 0 #0000001c,inset -1px -1px 0 #ffffff40}
.kn48-door[data-s="bead"] .kn48-panel{background:repeating-linear-gradient(90deg,#0000 0 calc(12.5% - 2px),var(--kn48-ink) calc(12.5% - 2px) calc(12.5% - 1px),#ffffff38 calc(12.5% - 1px) 12.5%),linear-gradient(115deg,#ffffff1f,#fff0 45%),var(--kn48-face) center/cover}
.kn48-door[data-s="arch"] .kn48-panel{border-radius:50% 50% 2px 2px/22% 22% 2px 2px}
.kn48-pull{position:absolute;right:6.5%;top:40%;width:3.2%;height:20%;border-radius:4px;background:linear-gradient(90deg,#1c1e21,#62676e 45%,#24272b);box-shadow:2px 3px 4px #0007}
.kn48-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.kn48-tp{fill:none;stroke:#ffb347;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 3px #ff8c1a)}
.kn48-bit{opacity:0;fill:#fff;stroke:#ff8c1a;stroke-width:2;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 6px #ffb347)}
.kn48-dust{position:absolute;inset:0;pointer-events:none}
.kn48-dust i{position:absolute;width:4px;height:4px;margin:-2px;border-radius:50%;background:#e8d6b0}
.kn48-side{display:flex;flex-direction:column;gap:8px;min-width:0;padding-top:22px}
.kn48-kind{font:700 9px ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;color:#8b93a3}
.kn48-name{margin:0;font:850 clamp(22px,4vw,30px)/1 system-ui;letter-spacing:-.03em;color:#fff}
.kn48-price{margin:0;font:600 13px system-ui;color:#c9b9a0}
.kn48-price b{font:800 18px ui-monospace,monospace;color:#ffcf8a}
.kn48-styles{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.kn48-styles button{border:1px solid #ffffff24;border-radius:999px;background:#ffffff08;color:#d6dbe4;font:700 12px system-ui;padding:7px 11px;cursor:pointer;transition:background .25s,color .25s,transform .25s cubic-bezier(.3,1.6,.5,1)}
.kn48-styles button:hover{transform:translateY(-2px)}
.kn48-styles button.kn48-on{background:#ffcf8a;color:#1a1208;border-color:transparent}
.kn48-cols{display:flex;gap:8px;margin-top:4px}
.kn48-cols button{width:30px;height:30px;border-radius:8px;border:2px solid #ffffff22;cursor:pointer;background:linear-gradient(135deg,#ffffff40,#fff0 50%),var(--kn48-sw);transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.kn48-cols button.kn48-on{border-color:#ffcf8a;transform:scale(1.12)}
.kn48-spec{margin:auto 0 0;font:600 11.5px/1.45 system-ui;color:#8b93a3}
.kn48-busy .kn48-styles button,.kn48-busy .kn48-cols button{pointer-events:none}
::view-transition-old(kn48-door),::view-transition-new(kn48-door){animation:none;mix-blend-mode:normal}
::view-transition-group(kn48-name){animation-duration:.5s}
@media (max-width:560px){.kn48{grid-template-columns:1fr;grid-template-rows:1fr auto;padding:12px;gap:8px}.kn48-side{padding-top:0;gap:6px}.kn48-kind,.kn48-spec{display:none}.kn48-frame{height:min(230px,92%)}.kn48-name{font-size:20px}}
@media (prefers-reduced-motion: reduce){.kn48-styles button,.kn48-cols button{transition:none}}
/* fl:end kn48 */
/* fl:begin kn49 */
/* 49 Magnetic snap-to-spec pulls */
.kn49,.item .stage .dm.kn49{background:radial-gradient(100% 70% at 50% 10%,#262b25,#0d0f0d 75%)}
.kn49{position:relative;overflow:hidden;min-height:400px;height:100%;font-family:system-ui,sans-serif;color:#e8eadf;touch-action:none;user-select:none;-webkit-user-select:none}
.kn49-head{position:absolute;left:14px;right:14px;top:12px;display:flex;justify-content:space-between;align-items:baseline;gap:8px;z-index:3;pointer-events:none}
.kn49-cnt{font:800 12px ui-monospace,monospace;color:#d9f99d;white-space:nowrap}
.kn49-spec{font:600 10.5px/1.25 system-ui;color:#9aa38f;text-align:right;transition:color .3s}
.kn49-spec.kn49-hot{color:#fde68a}
.kn49-bank{position:absolute;left:7%;right:7%;top:40px;bottom:30%;border-radius:4px;background:#d8ccb3;box-shadow:0 18px 30px -12px #000,inset 0 0 0 3px #c2b597}
.kn49-f{position:absolute;border-radius:2px;background:linear-gradient(115deg,#ffffff26,#fff0 40%,#0000 65%,#0000001a),#93a68b;box-shadow:inset 0 0 0 1px #0003,inset 0 1px 0 #ffffff40,0 1px 2px #0004}
.kn49-f::before{content:"";position:absolute;inset:11% 15%;border-radius:1px;box-shadow:inset 2px 2px 0 #00000038,inset 4px 5px 8px #0000002e,inset -1px -1px 0 #ffffff44}
.kn49-dl{left:2%;top:3%;width:23%;bottom:3%}.kn49-dr{left:25.6%;top:3%;width:23%;bottom:3%}
.kn49-w1{left:51%;right:2%;top:3%;height:24%}.kn49-w2{left:51%;right:2%;top:28.6%;height:33%}.kn49-w3{left:51%;right:2%;top:63.2%;height:33.8%}
.kn49-w1::before,.kn49-w2::before,.kn49-w3::before{inset:16% 8%}
.kn49-tray{position:absolute;left:7%;right:7%;bottom:58px;height:clamp(54px,15%,70px);border-radius:12px;background:radial-gradient(#0000 60%,#0006),repeating-radial-gradient(circle at 30% 40%,#24262a 0 2px,#1d1f22 2px 4px);box-shadow:inset 0 3px 8px #000c,0 1px 0 #ffffff14}
.kn49-tray i{position:absolute;top:50%;width:18%;height:64%;transform:translate(-50%,-50%);border-radius:10px;background:#141518;box-shadow:inset 0 3px 6px #000}
.kn49-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.kn49-hole{position:absolute;width:5px;height:5px;margin:-2.5px;border-radius:50%;background:radial-gradient(#1b1c1a 40%,#55604f 70%,#0000 72%);z-index:1}
.kn49-ring{position:absolute;width:12px;height:12px;margin:-6px;border-radius:50%;border:2px solid #d9f99d;z-index:2;pointer-events:none}
.kn49-p{position:absolute;left:0;top:0;z-index:3;cursor:grab;touch-action:none;filter:drop-shadow(2px 4px 3px #0009)}
.kn49-p:active{cursor:grabbing}
.kn49-p b{display:block;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.kn49-bar b{width:58px;height:7px;border-radius:4px;background:linear-gradient(#1b1d20,#5d636b 45%,#1f2226)}
.kn49-bar b::before,.kn49-bar b::after{content:"";position:absolute;top:4px;width:6px;height:6px;border-radius:2px;background:#2a2d31}
.kn49-bar b::before{left:4px}.kn49-bar b::after{right:4px}
.kn49-cup b{width:40px;height:16px;border-radius:3px 3px 20px 20px;background:linear-gradient(#f4f5f7,#a9aeb5 50%,#6d727a);box-shadow:inset 0 3px 0 #ffffffa0,inset 0 -6px 6px #0005}
.kn49-knob b{width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff3c4,#d4a24c 40%,#7c5418)}
.kn49-p.kn49-on{z-index:2}
.kn49-ui{position:absolute;left:12px;right:12px;bottom:12px;display:flex;gap:8px;justify-content:center;z-index:3}
.kn49-ui button{border:0;border-radius:999px;padding:9px 16px;font:800 12px system-ui;cursor:pointer;background:#d9f99d;color:#1a2408;transition:transform .2s cubic-bezier(.3,1.6,.5,1)}
.kn49-ui .kn49-reset{background:#ffffff14;color:#e8eadf;box-shadow:inset 0 0 0 1px #ffffff24}
.kn49-ui button:active{transform:scale(.94)}
.kn49-done .kn49-bank{animation:kn49-glow 1.2s ease-out}
@keyframes kn49-glow{0%{box-shadow:0 18px 30px -12px #000,inset 0 0 0 3px #c2b597,0 0 0 0 #d9f99d88}100%{box-shadow:0 18px 30px -12px #000,inset 0 0 0 3px #c2b597,0 0 0 26px #d9f99d00}}
@media (prefers-reduced-motion: reduce){.kn49-done .kn49-bank{animation:none}.kn49-ui button{transition:none}}
/* fl:end kn49 */
/* fl:begin kn50 */
/* 50 Edgebander · gooey glue line */
.kn50,.item .stage .dm.kn50{background:linear-gradient(180deg,#1b1d22,#101114 60%,#0b0c0e)}
.kn50{position:relative;overflow:hidden;min-height:400px;height:100%;font-family:system-ui,sans-serif;color:#e8e4dc;touch-action:none;user-select:none;-webkit-user-select:none;--kn50-ey:200px;--kn50-eh:34px;--kn50-off:0}
.kn50-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;cursor:grab}
.kn50-svg:active{cursor:grabbing}
.kn50-edge{filter:brightness(.92)}
.kn50-flush{fill:#ffffff40}
.kn50-belt{position:absolute;left:0;right:0;top:calc(var(--kn50-ey) + var(--kn50-eh) + 14px);height:22px;background:repeating-linear-gradient(90deg,#2a2c31 0 14px,#1a1b1f 14px 28px);background-position:calc(var(--kn50-off) * -1px) 0;box-shadow:inset 0 3px 6px #000c,0 -1px 0 #ffffff12}
.kn50-st{position:absolute;top:calc(var(--kn50-ey) - 14px);height:calc(var(--kn50-eh) + 28px);width:clamp(26px,5.5%,40px);transform:translateX(-50%);pointer-events:none}
.kn50-st b{position:absolute;inset:0;border-radius:12px;background-size:100% 10px;background-position:0 calc(var(--kn50-off) * .9px)}
.kn50-st span{position:absolute;left:50%;top:calc(var(--kn50-ft) - var(--kn50-ey) - 6px);transform:translateX(-50%);white-space:nowrap;font:700 8.5px ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:#8f96a3}
.kn50-glue{left:68%}
.kn50-glue b{background-image:linear-gradient(90deg,#7a3f12,#e39a3b 40%,#ffd38a 50%,#b8661c 70%,#5d2e0b),repeating-linear-gradient(#0000 0 6px,#00000033 6px 10px);background-blend-mode:multiply;box-shadow:0 0 18px #f0a53166,0 0 0 2px #2a1a0b}
.kn50-glue::before{content:"";position:absolute;left:50%;bottom:100%;width:60%;height:50px;transform:translateX(-50%);border-radius:6px 6px 0 0;background:linear-gradient(90deg,#3d4148,#7a808a 45%,#2c2f35);box-shadow:inset 0 -6px 0 #f0a53155}
.kn50-press{left:44%}
.kn50-press span{margin-left:26px}
.kn50-press b{background-image:linear-gradient(90deg,#0d0e10,#4a4d54 45%,#17181b),repeating-linear-gradient(#0000 0 5px,#ffffff10 5px 10px);box-shadow:0 0 0 2px #000}
.kn50-press::before{content:"";position:absolute;left:50%;bottom:100%;width:14%;height:54px;transform:translateX(-50%);background:#5b6069}
.kn50-saw{left:20%;width:clamp(40px,9%,64px)}
.kn50-saw b{inset:auto;left:0;right:0;top:50%;aspect-ratio:1;transform:translateY(-50%) rotate(calc(var(--kn50-off) * -6deg));border-radius:50%;background:repeating-conic-gradient(#c9ced6 0 6deg,#6d737c 6deg 12deg);-webkit-mask:radial-gradient(circle,#0000 18%,#000 19% 64%,#0000 65%,#000 66%);mask:radial-gradient(circle,#0000 18%,#000 19% 64%,#0000 65%,#000 66%);box-shadow:none}
.kn50-reel{left:calc(44% - 18px);top:calc(var(--kn50-ft) - 46px);height:38px;width:38px;transform:translateX(-50%)}
.kn50-reel i{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,#2b2d31 0 18%,#0000 19%),repeating-radial-gradient(circle,#c99a63 0 2px,#a8783f 2px 4px);box-shadow:0 4px 10px #0008;transform:rotate(calc(var(--kn50-off) * -3deg))}
.kn50-feedtape{position:absolute;left:calc(44% - 20px);top:calc(var(--kn50-ft) - 10px);width:4px;height:calc(var(--kn50-ey) - var(--kn50-ft) + 4px);background:linear-gradient(90deg,#a8783f,#e2bd8c);box-shadow:1px 0 2px #0006;pointer-events:none}
.kn50-chips{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.kn50-top{position:absolute;left:14px;right:14px;top:12px;display:flex;justify-content:space-between;align-items:center;gap:8px;pointer-events:none}
.kn50-pill{padding:6px 11px;border-radius:999px;background:#ffffff0d;border:1px solid #ffffff1a;font:600 11px system-ui;color:#c9c4ba;white-space:nowrap}
.kn50-pill b{font:800 13px ui-monospace,monospace;color:#fff}
.kn50-pill.kn50-good b{color:#4ade80}.kn50-pill.kn50-bad b{color:#ff6b5b}
.kn50-msg{font:700 10px ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;color:#f0a531;text-align:right}
.kn50-ui{position:absolute;left:12px;right:12px;bottom:12px;display:flex;gap:10px;align-items:center;justify-content:space-between}
.kn50-lab{flex:1;min-width:0;display:grid;gap:4px;font:700 10px ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;color:#8f96a3}
.kn50-out{color:#f3efe8;margin-left:6px;text-transform:none}
.kn50-rate{width:100%;max-width:260px;accent-color:#f0a531}
.kn50-hold{border:0;border-radius:12px;padding:12px 18px;background:#f0a531;color:#1d1204;font:800 13px system-ui;cursor:pointer;box-shadow:inset 0 -3px 0 #0003,0 6px 18px #f0a53133;touch-action:none;transition:transform .15s}
.kn50-hold.kn50-on{transform:scale(.95);background:#ffc266}
@media (max-width:560px){.kn50-st span{display:none}.kn50-reel{display:none}.kn50-feedtape{display:none}.kn50-msg{font-size:9px}}
@media (prefers-reduced-motion: reduce){.kn50-hold{transition:none}}
/* fl:end kn50 */
/* fl:begin kn51 */
/* 51 Verlet cloth shirt · tug the hanger */
.kn51,.item .stage .dm.kn51{background:#1a1611}
.kn51{position:relative;overflow:hidden;min-height:400px;height:100%;font-family:system-ui,sans-serif;color:#efe7da;touch-action:none;user-select:none;-webkit-user-select:none}
.kn51-cv{position:absolute;inset:0;width:100%;height:100%;cursor:grab}
.kn51-cv:active{cursor:grabbing}
.kn51-top{position:absolute;left:12px;right:12px;top:10px;display:flex;justify-content:space-between;gap:8px;pointer-events:none;align-items:baseline}
.kn51-name{font:800 12px system-ui;color:#3a2e20;background:#f4ead8d9;padding:4px 9px;border-radius:999px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.kn51-tip{font:700 9px ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:#5b4a35;text-align:right}
.kn51-ui{position:absolute;left:12px;right:12px;bottom:12px;display:flex;gap:8px;justify-content:center}
.kn51-ui button{border:0;border-radius:999px;padding:9px 15px;font:800 12px system-ui;cursor:pointer;background:#2b2219;color:#f4ead8;box-shadow:0 4px 12px #0005;transition:transform .2s cubic-bezier(.3,1.6,.5,1)}
.kn51-ui button:active{transform:scale(.94)}
.kn51-wind[aria-pressed="true"]{background:#7dd3fc;color:#082f49}
@media (prefers-reduced-motion: reduce){.kn51-ui button{transition:none}}
/* fl:end kn51 */
/* fl:begin kn52 */
/* 52 Messy → organised closet scrubber */
.kn52,.item .stage .dm.kn52{background:#141210}
.kn52{position:relative;overflow:hidden;min-height:400px;height:100%;font-family:system-ui,sans-serif;color:#efe7da;touch-action:pan-y;user-select:none;-webkit-user-select:none;--kn52-p:0}
.kn52-room{position:absolute;left:12px;right:12px;top:40px;bottom:64px;border-radius:10px;overflow:hidden;background:linear-gradient(180deg,#d8cfc2,#c9bfb0 82%,#8d7458 82%,#6e5640);box-shadow:inset 0 0 0 6px #efe9df,inset 0 0 40px #0004;filter:brightness(calc(.7 + var(--kn52-p) * .3))}
.kn52-sys{position:absolute;--kn52-k:clamp(0,calc((var(--kn52-p) - var(--kn52-s)) / .14),1);opacity:var(--kn52-k);transform:translateY(calc((1 - var(--kn52-k)) * -26px))}
.kn52-shelf{--kn52-s:.05;left:2%;right:2%;top:18%;height:2.4%;background:linear-gradient(#fbf8f2,#e3dccf);box-shadow:0 4px 6px #0003}
.kn52-rod{--kn52-s:.1;left:37%;right:3%;top:25%;height:1.4%;border-radius:4px;background:linear-gradient(#7c828a,#f4f6f8 40%,#9aa0a8)}
.kn52-tower{--kn52-s:.14;left:3%;width:31%;top:20.4%;bottom:18%;background:linear-gradient(90deg,#e9e2d6,#f6f2ea 10%,#f6f2ea 90%,#e2dacb);box-shadow:inset 0 0 0 3px #f9f6f0,0 6px 10px #0003}
.kn52-tower b{position:absolute;left:6%;right:6%;height:9%;border-radius:2px;background:linear-gradient(#fbf9f5,#ece6db);box-shadow:inset 0 0 0 1px #0000001a,0 1px 2px #0002}
.kn52-tower b::after{content:"";position:absolute;left:38%;right:38%;top:44%;height:12%;border-radius:2px;background:#8f949b}
.kn52-tower b:nth-child(1){bottom:24%}.kn52-tower b:nth-child(2){bottom:13%}.kn52-tower b:nth-child(3){bottom:2%}
.kn52-s1,.kn52-s2{--kn52-s:.18;left:4%;width:29%;height:1.8%;background:linear-gradient(#fbf8f2,#ddd5c7);box-shadow:0 3px 4px #0003}
.kn52-s1{top:45%}.kn52-s2{--kn52-s:.21;top:61%}
.kn52-led{position:absolute;left:2%;right:2%;top:20.4%;height:40%;background:linear-gradient(#fff5d6aa,#fff5d600);opacity:clamp(0,calc((var(--kn52-p) - .9) * 10),1);mix-blend-mode:screen;pointer-events:none}
.kn52-items{position:absolute;left:12px;right:12px;top:40px;bottom:64px;pointer-events:none;overflow:hidden;border-radius:10px}
.kn52-it{position:absolute;left:0;top:0;will-change:transform}
.kn52-it::before{content:"";position:absolute;left:50%;top:-9%;width:44%;height:10%;transform:translateX(-50%);border:2px solid #6b4a2c;border-bottom:0;border-radius:40% 40% 0 0;box-sizing:border-box;opacity:var(--kn52-h,0)}
.kn52-sh{background:linear-gradient(90deg,#0000002a,#0000 30%,#ffffff1f 55%,#0000 75%,#0000002a),var(--kn52-c);clip-path:polygon(30% 0,70% 0,100% 14%,92% 32%,80% 26%,80% 100%,20% 100%,20% 26%,8% 32%,0 14%)}
.kn52-dr{background:linear-gradient(90deg,#0000002a,#0000 30%,#ffffff1f 55%,#0000 75%,#0000002a),var(--kn52-c);clip-path:polygon(32% 0,68% 0,78% 30%,100% 100%,0 100%,22% 30%)}
.kn52-pa{background:linear-gradient(90deg,#0000002a,#ffffff14 40%,#0000002a),var(--kn52-c);clip-path:polygon(4% 0,96% 0,100% 100%,58% 100%,50% 28%,42% 100%,0 100%)}
.kn52-sw{border-radius:3px;background:linear-gradient(#ffffff26,#0000 40%,#0000001f),repeating-linear-gradient(90deg,#0000 0 3px,#0000001a 3px 4px),var(--kn52-c);box-shadow:inset 0 -3px 0 #00000026,0 1px 2px #0004}
.kn52-shoe{border-radius:30% 70% 12% 12%/55% 80% 12% 12%;background:linear-gradient(#0000 72%,#f4f1ea 72%),var(--kn52-c);box-shadow:inset -3px 2px 0 #ffffff26}
.kn52-bin{border-radius:3px;background:linear-gradient(#ffffff1a,#0000),repeating-linear-gradient(0deg,#0000 0 3px,#0000001a 3px 4px),#b88a5a;display:grid;place-items:center;font:800 8px ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;color:#3d2a16}
.kn52-top{position:absolute;left:14px;right:14px;top:10px;display:flex;justify-content:space-between;align-items:center;gap:8px;pointer-events:none}
.kn52-tag{white-space:nowrap;font:800 10px ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;padding:4px 9px;border-radius:999px;background:#ef444426;color:#fca5a5}
.kn52-tag.kn52-after{background:#4ade8026;color:#86efac}
.kn52-meter{font:600 11px system-ui;color:#a9a091;white-space:nowrap}
.kn52-pc{font:800 13px ui-monospace,monospace;color:#fff}
.kn52-ui{position:absolute;left:12px;right:12px;bottom:12px;display:flex;align-items:center;gap:10px}
.kn52-play{border:0;border-radius:999px;padding:10px 14px;background:#f4ead8;color:#2b2015;font:800 12px system-ui;cursor:pointer;white-space:nowrap;transition:transform .2s cubic-bezier(.3,1.6,.5,1)}
.kn52-play:active{transform:scale(.94)}
.kn52-lab{flex:1;min-width:0;display:flex;align-items:center;gap:6px;font:700 9px ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;color:#8d8577}
.kn52-rng{flex:1;min-width:0;accent-color:#86efac}
@media (prefers-reduced-motion: reduce){.kn52-play{transition:none}}
/* fl:end kn52 */
/* fl:begin kn53 */
/* 53 Pull-down wardrobe lift · gas spring */
.kn53,.item .stage .dm.kn53{background:#121417}
.kn53{position:relative;overflow:hidden;min-height:400px;height:100%;font-family:system-ui,sans-serif;color:#e9edf2;touch-action:none;user-select:none;-webkit-user-select:none}
.kn53-room{position:absolute;inset:10px;border-radius:10px;overflow:hidden;background:linear-gradient(180deg,#d9d3ca,#cbc3b7 92%,#7c6650 92%,#634f3c);perspective:700px;cursor:grab}
.kn53-room:active{cursor:grabbing}
.kn53-ruler{position:absolute;left:0;top:0;bottom:8%;width:13%;background:repeating-linear-gradient(0deg,#5d544a 0 1px,#0000 1px 6%),repeating-linear-gradient(0deg,#5d544a88 0 1px,#0000 1px 1.5%);background-size:30% 100%,18% 100%;background-repeat:no-repeat;border-right:1px solid #0002}
.kn53-zone{position:absolute;left:0;right:0;bottom:48%;height:18%;background:linear-gradient(90deg,#4ade8040,#4ade8000)}
.kn53-zone::after{content:"reach";position:absolute;left:4px;top:50%;transform:translateY(-50%) rotate(-90deg);transform-origin:0 0;font:800 7px ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;color:#166534}
.kn53-mark{position:absolute;left:0;right:-6px;height:2px;background:#ef4444;top:calc(100% - var(--kn53-in,84) * 1%)}
.kn53-mark span{position:absolute;right:0;top:-16px;font:800 9px ui-monospace,monospace;color:#b91c1c;background:#fffc;padding:1px 3px;border-radius:3px}
.kn53-box{position:absolute;left:22%;right:6%;top:0;height:48%;background:linear-gradient(#141210,#2a241d 70%,#3a3128);box-shadow:inset 0 0 0 5px #efe8dc,inset 0 -5px 0 5px #efe8dc,inset 0 0 26px 8px #000c}
.kn53-low{position:absolute;left:22%;right:6%;top:52%;bottom:8%;background:#efe8dc;box-shadow:0 -2px 0 #0001}
.kn53-low i{position:absolute;left:5%;right:5%;height:27%;border-radius:2px;background:linear-gradient(#fbf8f2,#e6dfd2);box-shadow:inset 0 0 0 1px #0000001a}
.kn53-low i::after{content:"";position:absolute;left:42%;right:42%;top:45%;height:9%;border-radius:2px;background:#8b9097}
.kn53-low i:nth-child(1){top:4%}.kn53-low i:nth-child(2){top:36%}.kn53-low i:nth-child(3){top:68%}
.kn53-arms{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.kn53-arms line{stroke:#9aa1ab;stroke-width:5;stroke-linecap:round}
.kn53-arms circle{fill:#4b5159;stroke:#c8ced6;stroke-width:2}
.kn53-lift{position:absolute;left:0;top:0;width:100%;height:0;transform-style:preserve-3d;pointer-events:none}
.kn53-rod{position:absolute;left:-26%;width:52%;top:-5px;height:10px;border-radius:5px;background:linear-gradient(#5f656d,#f5f7f9 40%,#9aa0a8);box-shadow:0 3px 6px #0006}
.kn53-hangs{position:absolute;left:-23%;width:46%;top:0;height:0;display:flex;justify-content:space-between;perspective:400px}
.kn53-g{position:relative;width:15%;transform-origin:50% 0;transform-style:preserve-3d}
.kn53-g::before{content:"";position:absolute;left:20%;right:20%;top:-6px;height:8px;border:2px solid #7a5534;border-bottom:0;border-radius:50% 50% 0 0;box-sizing:border-box}
.kn53-g i{position:absolute;left:0;right:0;top:2px;height:var(--kn53-gh,140px);background:linear-gradient(90deg,#0000003a,#0000 30%,#ffffff1f 55%,#0000 75%,#0000003a),var(--kn53-c);clip-path:polygon(32% 0,68% 0,88% 7%,92% 100%,8% 100%,12% 7%);border-radius:0 0 3px 3px;filter:brightness(var(--kn53-lt,1))}
.kn53-g.kn53-dress i{clip-path:polygon(34% 0,66% 0,80% 10%,100% 100%,0 100%,20% 10%)}
.kn53-wand{position:absolute;left:-2px;top:0;width:4px;height:var(--kn53-wl,70px);background:linear-gradient(90deg,#7b828c,#d7dce2,#7b828c);pointer-events:auto;cursor:grab}
.kn53-wand b{position:absolute;left:-7px;bottom:-18px;width:18px;height:24px;border-radius:8px;background:linear-gradient(90deg,#1b1d20,#4b5058 50%,#1b1d20);box-shadow:0 4px 8px #0008}
.kn53-click{position:absolute;left:50%;top:60%;font:900 13px ui-monospace,monospace;letter-spacing:.2em;text-transform:uppercase;color:#16a34a;opacity:0;pointer-events:none}
.kn53-side{position:absolute;right:16px;top:16px;width:clamp(78px,24%,118px);height:auto;border-radius:10px;background:#0f1114e6;border:1px solid #ffffff1a;pointer-events:none}
.kn53-side text{font:700 9px ui-monospace,monospace;fill:#8b93a0;letter-spacing:.06em}
.kn53-sp{fill:#ffffff08;stroke:#ffffff30}
.kn53-arm{stroke:#c8ced6;stroke-width:4;stroke-linecap:round}
.kn53-gas{stroke:#22d3ee;stroke-width:5;stroke-linecap:round}
.kn53-rd{fill:#f5f7f9}.kn53-pv{fill:#ef4444}
.kn53-read{position:absolute;left:18%;bottom:14px;margin:0;display:flex;gap:6px;pointer-events:none}
.kn53-read div{padding:5px 8px;border-radius:8px;background:#0f1114e0;border:1px solid #ffffff1a}
.kn53-read dt{font:700 7.5px ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:#8b93a0}
.kn53-read dd{margin:1px 0 0;font:800 13px ui-monospace,monospace;color:#fff}
.kn53.kn53-lock .kn53-read dd.kn53-h{color:#4ade80}
@media (prefers-reduced-motion: reduce){.kn53-click{display:none}}
/* fl:end kn53 */
/* fl:begin kn54 */
/* 54 Rainbow closet · sorting algorithm */
.kn54,.item .stage .dm.kn54{background:radial-gradient(90% 70% at 50% 30%,#2b2620,#100e0c 75%)}
.kn54{position:relative;overflow:hidden;min-height:400px;height:100%;font-family:system-ui,sans-serif;color:#f1e9dc}
.kn54-top{position:absolute;left:12px;right:12px;top:10px;display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;z-index:2}
.kn54-algos{display:flex;gap:4px;padding:3px;border-radius:999px;background:#ffffff0d;border:1px solid #ffffff1a}
.kn54-algos button{border:0;border-radius:999px;padding:6px 11px;background:none;color:#c8bfb1;font:700 11.5px system-ui;cursor:pointer}
.kn54-algos button.kn54-on{background:#f1e9dc;color:#1d1710}
.kn54-stats{font:600 11px system-ui;color:#a39a8c;white-space:nowrap}
.kn54-stats b{font:800 13px ui-monospace,monospace;color:#fff}
.kn54-closet{position:absolute;left:12px;right:12px;top:52px;bottom:92px;border-radius:10px;background:linear-gradient(180deg,#e7ddcb,#d6c8b1);box-shadow:inset 0 0 0 5px #f5efe4,inset 0 0 40px #0003;overflow:hidden}
.kn54-rod{position:absolute;left:3%;right:3%;top:12%;height:8px;border-radius:4px;background:linear-gradient(#5f656d,#f5f7f9 40%,#9aa0a8);box-shadow:0 3px 5px #0004;z-index:2}
.kn54-row{position:absolute;left:4%;right:4%;top:12%;bottom:6%}
.kn54-g{position:absolute;left:0;top:0;height:100%;transform-origin:50% 0;z-index:1;filter:drop-shadow(-3px 2px 3px #0004)}
.kn54-g::before{content:"";position:absolute;left:38%;right:38%;top:-4px;height:12px;border:2px solid #6b4a2c;border-bottom:0;border-radius:50% 50% 0 0;box-sizing:border-box}
.kn54-g::after{content:"";position:absolute;left:14%;right:14%;top:8px;height:3px;border-radius:2px;background:#6b4a2c}
.kn54-g i{position:absolute;left:0;right:0;top:10px;height:var(--kn54-len,70%);background:linear-gradient(90deg,#0000003a,#0000 28%,#ffffff26 52%,#0000 74%,#0000003a),repeating-linear-gradient(0deg,#0000 0 3px,#00000010 3px 4px),var(--kn54-c);clip-path:polygon(26% 0,74% 0,100% 10%,92% 24%,82% 20%,84% 100%,16% 100%,18% 20%,8% 24%,0 10%);transition:filter .2s}
.kn54-g.kn54-dress i{clip-path:polygon(30% 0,70% 0,78% 26%,100% 100%,0 100%,22% 26%)}
.kn54-g.kn54-cmp i{filter:brightness(1.18) drop-shadow(0 0 6px #fff)}
.kn54-g.kn54-cmp{z-index:3}
.kn54-glow{position:absolute;left:3%;right:3%;bottom:3%;height:6px;border-radius:3px;background:linear-gradient(90deg,hsl(0 80% 60%),hsl(60 80% 60%),hsl(120 70% 50%),hsl(200 80% 60%),hsl(280 70% 65%),hsl(340 80% 60%));opacity:0;transform:scaleX(0);transition:opacity .6s,transform .9s cubic-bezier(.2,.8,.2,1)}
.kn54.kn54-done .kn54-glow{opacity:1;transform:scaleX(1)}
.kn54-bars{position:absolute;left:12px;right:12px;bottom:58px;height:22px;display:flex;gap:2px}
.kn54-bars i{flex:1;border-radius:3px;background:var(--kn54-c);transition:transform .15s;transform-origin:50% 100%}
.kn54-bars i.kn54-cmp{transform:scaleY(1.45);box-shadow:0 0 0 2px #fff}
.kn54-ui{position:absolute;left:12px;right:12px;bottom:12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.kn54-ui>button{border:0;border-radius:999px;padding:9px 14px;font:800 12px system-ui;cursor:pointer;transition:transform .2s cubic-bezier(.3,1.6,.5,1)}
.kn54-ui>button:active{transform:scale(.94)}
.kn54-go{background:linear-gradient(90deg,#f87171,#fbbf24,#4ade80,#60a5fa,#c084fc);color:#120d08}
.kn54-mix{background:#ffffff14;color:#f1e9dc;box-shadow:inset 0 0 0 1px #ffffff26}
.kn54-lab{display:flex;align-items:center;gap:6px;font:700 10px ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;color:#a39a8c}
.kn54-spd{width:90px;accent-color:#fbbf24}
.kn54-log{margin-left:auto;font:600 10.5px system-ui;color:#8d8577}
@media (max-width:560px){.kn54-log,.kn54-lab{display:none}}
@media (prefers-reduced-motion: reduce){.kn54-glow,.kn54-g i,.kn54-bars i{transition:none}}
/* fl:end kn54 */
/* fl:begin kn55 */
/* 55 Wardrobe focus pull · depth of field */
.kn55,.item .stage .dm.kn55{background:#0c0b0a}
.kn55{position:relative;overflow:hidden;min-height:400px;height:100%;font-family:system-ui,sans-serif;color:#f3ece1;user-select:none;-webkit-user-select:none;--kn55-f:3}
.kn55-scene{position:absolute;inset:0;overflow:hidden;background:linear-gradient(180deg,#3a3129,#2a231d 70%,#1c1713)}
.kn55-l{position:absolute;inset:-4%;pointer-events:none;will-change:filter,transform;filter:blur(calc(var(--kn55-d,0) * 1px))}
.kn55-l [data-z]{pointer-events:auto;cursor:zoom-in}
.kn55-mirror{position:absolute;left:36%;width:28%;top:8%;bottom:10%;border-radius:4px;background:linear-gradient(115deg,#9fb3c2,#d9e3ea 30%,#7b8f9e 46%,#b9c8d3 70%,#8ea2b0);box-shadow:0 0 0 10px #c9b490,0 0 0 12px #8a7454,0 20px 40px #0008}
.kn55-mirror::after{content:"";position:absolute;inset:30% 30% 8% 30%;border-radius:40% 40% 4px 4px;background:#3a3129aa;filter:blur(6px)}
.kn55-leds{position:absolute;left:34%;width:32%;top:4%;bottom:14%;pointer-events:none}
.kn55-b{position:absolute;width:8px;height:8px;margin:-4px;border-radius:50%;background:radial-gradient(circle,#fff8e0 0 30%,#ffd98acc 45%,#ffd98a33 68%,#0000 70%);transform:scale(var(--kn55-bs,1));opacity:var(--kn55-bo,1);mix-blend-mode:screen}
.kn55-shoes{position:absolute;right:6%;width:26%;top:18%;bottom:14%;background:linear-gradient(90deg,#d8c7a8,#efe3cb);box-shadow:0 14px 30px #0008}
.kn55-shoes i{position:absolute;left:4%;right:4%;height:3%;background:linear-gradient(#f6eedd,#b9a582);transform:skewY(-6deg)}
.kn55-shoes b{position:absolute;width:20%;height:7%;border-radius:30% 70% 12% 12%/55% 80% 12% 12%;background:linear-gradient(#0000 72%,#f4f1ea 72%),var(--kn55-c);transform:skewY(-6deg)}
.kn55-rod{position:absolute;left:4%;width:42%;top:22%;height:9px;border-radius:5px;background:linear-gradient(#5f656d,#f5f7f9 40%,#9aa0a8);box-shadow:0 3px 6px #0006}
.kn55-hang{position:absolute;left:5%;width:40%;top:23%;height:56%;display:flex}
.kn55-hang i{flex:1;margin-right:-4%;height:var(--kn55-h,80%);background:linear-gradient(90deg,#00000040,#0000 30%,#ffffff22 55%,#0000 75%,#00000040),var(--kn55-c);clip-path:polygon(26% 0,74% 0,100% 10%,92% 24%,82% 20%,84% 100%,16% 100%,18% 20%,8% 24%,0 10%);filter:drop-shadow(-4px 0 4px #0006)}
.kn55-ties{position:absolute;left:-2%;width:30%;top:-2%;height:72%}
.kn55-ties::before{content:"";position:absolute;left:0;right:0;top:6%;height:12px;border-radius:6px;background:linear-gradient(#3b2a1c,#8a6743 45%,#3b2a1c)}
.kn55-ties b{position:absolute;top:8%;width:9%;height:var(--kn55-h,70%);background:linear-gradient(90deg,#0004,#fff2 50%,#0004),var(--kn55-c);clip-path:polygon(30% 0,70% 0,64% 72%,100% 86%,50% 100%,0 86%,36% 72%)}
.kn55-door{position:absolute;right:-3%;width:14%;top:-4%;bottom:-4%;background:linear-gradient(90deg,#1b130c,#3d2a1a 30%,#2a1c11);box-shadow:-20px 0 40px #000c}
.kn55-door::after{content:"";position:absolute;left:18%;top:46%;width:10%;height:16%;border-radius:4px;background:linear-gradient(90deg,#6d6f73,#e2e4e7,#6d6f73)}
.kn55.kn55-pk .kn55-l.kn55-sharp [data-z]{outline:2px solid #ff3b6b;outline-offset:2px}
.kn55-hud{position:absolute;left:12px;right:12px;top:10px;display:flex;justify-content:space-between;align-items:center;gap:8px;pointer-events:none}
.kn55-exif{font:700 10px ui-monospace,monospace;letter-spacing:.08em;color:#fde68a;background:#000a;padding:5px 9px;border-radius:6px;white-space:nowrap}
.kn55-exif b{color:#fff}
.kn55-what{font:800 12px system-ui;background:#000a;padding:5px 9px;border-radius:6px;text-align:right;transition:opacity .3s}
.kn55-ring{position:absolute;left:12px;right:96px;bottom:12px;height:40px;border-radius:10px;overflow:hidden;background:linear-gradient(90deg,#000c,#0000 25%,#0000 75%,#000c),repeating-linear-gradient(90deg,#1b1c1f 0 3px,#2b2d31 3px 6px);box-shadow:inset 0 2px 6px #000,inset 0 0 0 1px #ffffff1a;cursor:ew-resize;touch-action:none}
.kn55-ring:focus-visible{outline:2px solid #fde68a}
.kn55-scale{position:absolute;top:0;bottom:0;left:50%;width:120%;display:flex;justify-content:space-between;align-items:center;transform:translateX(calc(var(--kn55-f) / 3 * -100%));padding:0 2%}
.kn55-scale span{font:800 11px ui-monospace,monospace;color:#f3ece1;text-shadow:0 1px 0 #000;white-space:nowrap;width:0;display:flex;justify-content:center}
.kn55-idx{position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:#fde68a;box-shadow:0 0 8px #fde68a}
.kn55-peak{position:absolute;right:12px;bottom:12px;height:40px;border:0;border-radius:10px;padding:0 12px;background:#2b2d31;color:#f3ece1;font:800 12px system-ui;cursor:pointer}
.kn55-peak[aria-pressed="true"]{background:#ff3b6b;color:#fff}
@media (prefers-reduced-motion: reduce){.kn55-what{transition:none}}
/* fl:end kn55 */
/* fl:begin kn56 */
/* 56 Scroll-told pitch · reface story */
@property --kn56-p{syntax:'<number>';inherits:true;initial-value:0}
.kn56,.item .stage .dm.kn56{background:#120e09}
.kn56{position:relative;overflow:hidden;min-height:400px;height:100%;font-family:system-ui,sans-serif;color:#f7efe2}
.kn56-sc{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#f4a26133 transparent}
.kn56-sc:focus-visible{outline:2px solid #f4a261;outline-offset:-2px}
.kn56-track{height:800%}
.kn56-stick{position:sticky;top:0;height:var(--kn56-h,400px);overflow:hidden;animation:kn56-p linear both;animation-timeline:scroll(nearest block)}
@keyframes kn56-p{from{--kn56-p:0}to{--kn56-p:1}}
.kn56-bgs i,.kn56-ch{--kn56-in:clamp(0,min(calc((var(--kn56-p) - var(--kn56-a)) / .04),calc((var(--kn56-b) - var(--kn56-p)) / .04)),1)}
.kn56-bgs i{position:absolute;inset:0;opacity:var(--kn56-in)}
.kn56-doors{position:absolute;left:50%;top:44%;width:min(250px,64%);aspect-ratio:3/2.4;transform:translate(-50%,-50%) scale(calc(1 - clamp(0,(var(--kn56-p) - .3) / .05,1) * .2));opacity:clamp(0,calc((.35 - var(--kn56-p)) / .04),1);display:grid;grid-template-columns:repeat(3,1fr);gap:6px;perspective:600px}
.kn56-d{position:relative;transform-style:preserve-3d;--kn56-k:clamp(0,calc((var(--kn56-p) - var(--kn56-s)) / .05),1);transform:rotateY(calc(var(--kn56-k) * 180deg))}
.kn56-d b{position:absolute;inset:0;border-radius:3px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.kn56-d b:first-child{background:radial-gradient(60% 50% at 50% 50%,#d39a4f,#a8692b 70%,#8a521d),#b5762f;box-shadow:inset 0 0 0 5px #9d6127,inset 0 0 0 6px #6d3d12,inset 0 0 18px #3d1f05aa;filter:saturate(.7) sepia(.3)}
.kn56-d b:first-child::after{content:"";position:absolute;inset:16% 18%;border-radius:40% 40% 4px 4px/18% 18% 4px 4px;box-shadow:inset 2px 2px 0 #fff3,inset -2px -2px 0 #0004}
.kn56-d b:last-child{transform:rotateY(180deg);background:linear-gradient(115deg,#ffffff22,#fff0 40%),#93a68b;box-shadow:inset 0 0 0 1px #0003}
.kn56-d b:last-child::after{content:"";position:absolute;inset:13% 17%;box-shadow:inset 2px 2px 0 #0000003a,inset 4px 5px 8px #0000002e,inset -1px -1px 0 #ffffff44}
.kn56-d b:last-child::before{content:"";position:absolute;right:9%;top:38%;width:4px;height:24%;border-radius:2px;background:#25282c}
.kn56-ch{position:absolute;left:18px;right:28px;bottom:26px;opacity:var(--kn56-in);transform:translateY(calc((1 - var(--kn56-in)) * 18px));pointer-events:none}
.kn56-ch small{font:700 9px ui-monospace,monospace;letter-spacing:.2em;text-transform:uppercase;color:#f4a261}
.kn56-ch h4{margin:4px 0 6px;font:700 clamp(22px,6.4vw,30px)/1.05 Georgia,'Times New Roman',serif;letter-spacing:-.01em;clip-path:inset(-10% calc((1 - var(--kn56-in)) * 100%) -10% 0)}
.kn56-ch p{margin:0;font:500 13px/1.4 system-ui;color:#d8cdbd}
.kn56-c3,.kn56-c4,.kn56-c5,.kn56-c6{top:46px;bottom:auto}
.kn56-bar{position:relative;height:30px;margin-top:10px;border-radius:8px;background:#ffffff0d;overflow:hidden}
.kn56-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:8px;--kn56-k:clamp(0,calc((var(--kn56-p) - .38) / .1),1)}
.kn56-b1 i{width:calc(var(--kn56-k) * 100%);background:linear-gradient(90deg,#7f1d1d,#ef4444)}
.kn56-b2 i{width:calc(var(--kn56-k) * 3%);min-width:calc(var(--kn56-k) * 6px);background:#4ade80;box-shadow:0 0 12px #4ade80}
.kn56-bar span{position:absolute;left:10px;top:50%;transform:translateY(-50%);font:600 12px system-ui;white-space:nowrap}
.kn56-b2 span{left:16px}
.kn56-bar b{font:800 13px ui-monospace,monospace}
.kn56-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:10px}
.kn56-cal i{font:800 11px ui-monospace,monospace;font-style:normal;text-align:center;padding:9px 0;border-radius:7px;background:#ffffff0f;color:#8f86a0;--kn56-k:clamp(0,calc((var(--kn56-p) - .58 - var(--kn56-i) * .018) * 60),1);background:color-mix(in srgb,#c084fc calc(var(--kn56-k) * 100%),#ffffff0f);color:color-mix(in srgb,#1a0d27 calc(var(--kn56-k) * 100%),#8f86a0)}
.kn56-lane{position:relative;height:30px;margin-top:12px;border-bottom:2px dashed #ffffff30}
.kn56-truck{position:absolute;bottom:2px;left:0;width:54px;height:24px;--kn56-k:clamp(0,calc((var(--kn56-p) - .58) / .13),1);transform:translateX(calc(var(--kn56-k) * (100cqw - 54px)));background:linear-gradient(90deg,#f7efe2 0 68%,#0000 68%),linear-gradient(#0000 30%,#c084fc 30%);border-radius:4px 8px 3px 3px}
.kn56-lane{container-type:inline-size}
.kn56-truck::before,.kn56-truck::after{content:"";position:absolute;bottom:-5px;width:10px;height:10px;border-radius:50%;background:#1a1420;box-shadow:inset 0 0 0 3px #555}
.kn56-truck::before{left:6px}.kn56-truck::after{right:6px}
.kn56-bores{display:flex;gap:14px;margin:10px 0}
.kn56-bores svg{width:54px;height:54px}
.kn56-bores circle{fill:#0b2224;stroke:#5eead4;stroke-width:3;stroke-dasharray:113.1;stroke-dashoffset:calc((1 - clamp(0,(var(--kn56-p) - .75) / .06,1)) * 113.1);filter:drop-shadow(0 0 4px #5eead4)}
.kn56-bores svg:nth-child(2) circle{stroke-dashoffset:calc((1 - clamp(0,(var(--kn56-p) - .78) / .06,1)) * 113.1)}
.kn56-bores svg:nth-child(3) circle{stroke-dashoffset:calc((1 - clamp(0,(var(--kn56-p) - .81) / .06,1)) * 113.1)}
.kn56-c6{pointer-events:auto;text-align:center;top:auto;bottom:50%;transform:translateY(calc(50% + (1 - var(--kn56-in)) * 18px))}
.kn56-cta{margin:8px 0 10px;border:0;border-radius:14px;padding:14px 20px;background:linear-gradient(180deg,#ffb067,#f4762a);color:#2a1204;font:800 15px system-ui;cursor:pointer;box-shadow:0 10px 30px #f4762a66,inset 0 -3px 0 #0003;animation:kn56-pulse 1.8s ease-in-out infinite}
.kn56-cta.kn56-ok{background:#4ade80;box-shadow:0 10px 30px #4ade8066}
@keyframes kn56-pulse{50%{transform:scale(1.05);box-shadow:0 14px 40px #f4762a99,inset 0 -3px 0 #0003}}
.kn56-proof{color:#fbbf24!important;font-weight:700!important}
.kn56-dots{position:absolute;right:10px;top:50%;transform:translateY(-50%);margin:0;padding:0;list-style:none;display:grid;gap:6px}
.kn56-dots li{width:6px;height:6px;border-radius:50%;background:#ffffff33;transition:background .3s,transform .3s}
.kn56-dots li.kn56-on{background:#f4a261;transform:scale(1.5)}
.kn56-badge{position:absolute;left:0;right:0;bottom:5px;text-align:center;font:700 8px ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:#a3e635;opacity:.6;pointer-events:none}
.kn56-badge.kn56-fb{color:#fbbf24}
@media (prefers-reduced-motion: reduce){.kn56-cta{animation:none}.kn56-dots li{transition:none}}
/* fl:end kn56 */
/* fl:begin kn57 */
/* 57 Doors-shipped odometer · live dock */
.kn57,.item .stage .dm.kn57{background:radial-gradient(90% 60% at 50% 0%,#20242c,#0b0d10 70%)}
.kn57{position:relative;overflow:hidden;min-height:400px;height:100%;font-family:system-ui,sans-serif;color:#eef1f5}
.kn57-head{position:absolute;left:0;right:0;top:12px;text-align:center;padding:0 12px}
.kn57-head small{display:block;font:700 9px ui-monospace,monospace;letter-spacing:.2em;text-transform:uppercase;color:#93a0b3}
.kn57-odo{display:inline-flex;gap:4px;margin-top:8px;padding:8px;border-radius:12px;background:linear-gradient(#0a0b0d,#1a1d22);box-shadow:inset 0 2px 8px #000,0 0 0 1px #ffffff14,0 14px 30px -12px #000}
.kn57-r{position:relative;width:clamp(26px,6.4vw,40px);height:clamp(40px,9.6vw,58px);overflow:hidden;border-radius:6px;background:linear-gradient(#0000,#ffffff12 50%,#0000),linear-gradient(#2a2e35,#f4f1ea 18%,#fff 50%,#e6e2d8 82%,#2a2e35);box-shadow:inset 0 0 0 1px #0006}
.kn57-r::after{content:"";position:absolute;inset:0;background:linear-gradient(#000a,#0000 28%,#0000 72%,#000a);pointer-events:none}
.kn57-r.kn57-comma{margin-right:8px}
.kn57-col{position:absolute;left:0;right:0;top:0;will-change:transform}
.kn57-col b{display:grid;place-items:center;height:clamp(40px,9.6vw,58px);font:800 clamp(26px,6.6vw,40px)/1 ui-monospace,'SF Mono',Menlo,monospace;color:#15181d}
.kn57-r.kn57-lead .kn57-col b{color:#15181d40}
.kn57-feed{margin:8px auto 0;height:18px;max-width:420px;overflow:hidden;font:600 12px system-ui;color:#c9d2df;position:relative}
.kn57-feed span{position:absolute;left:0;right:0;top:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kn57-feed b{color:#4ade80}
.kn57-dock{position:absolute;left:12px;right:12px;bottom:64px;height:42%;border-radius:10px;overflow:hidden;background:linear-gradient(#262a31,#1c1f25 70%,#3b3f46 70%,#2c2f35)}
.kn57-wall{position:absolute;left:0;right:0;top:0;height:70%;background:repeating-linear-gradient(90deg,#0000 0 38px,#ffffff08 38px 40px)}
.kn57-pallet{position:absolute;left:14%;width:26%;bottom:22%;height:7%;background:repeating-linear-gradient(90deg,#9b7646 0 18%,#0000 18% 26%),linear-gradient(#b48a55,#7d5b33);border-radius:2px}
.kn57-stack{position:absolute;left:15%;width:24%;bottom:29%;height:60%}
.kn57-stack i{position:absolute;left:0;right:0;height:7%;border-radius:2px;background:linear-gradient(90deg,#ffffff30,#fff0 30%),var(--kn57-c);box-shadow:0 1px 0 #0006,inset 0 1px 0 #ffffff40}
.kn57-truck{position:absolute;bottom:14%;right:4%;width:46%;height:62%;transform:translateX(130%);transition:transform 1.1s cubic-bezier(.6,0,.3,1)}
.kn57-truck.kn57-in{transform:translateX(0)}
.kn57-truck.kn57-go{transform:translateX(140%);transition-duration:1.4s}
.kn57-box{position:absolute;left:0;width:72%;top:0;bottom:16%;border-radius:4px;background:linear-gradient(#f6f4ef,#d9d5cc);display:grid;place-items:center;box-shadow:inset 0 0 0 2px #0002}
.kn57-box span{font:900 clamp(10px,2.4vw,14px) system-ui;letter-spacing:.14em;color:#c2410c}
.kn57-cab{position:absolute;right:0;width:26%;top:24%;bottom:16%;border-radius:4px 12px 3px 3px;background:linear-gradient(90deg,#c2410c,#f97316);box-shadow:inset 6px 6px 0 -2px #bfe3ff}
.kn57-w1,.kn57-w2{position:absolute;bottom:2%;width:13%;aspect-ratio:1;border-radius:50%;background:radial-gradient(#9ca3af 0 26%,#111 28%)}
.kn57-w1{left:12%}.kn57-w2{right:6%}
.kn57-ui{position:absolute;left:12px;right:12px;bottom:12px;display:flex;align-items:center;gap:10px}
.kn57-step{display:flex;align-items:center;border-radius:12px;background:#ffffff0f;box-shadow:inset 0 0 0 1px #ffffff1f}
.kn57-step button{width:34px;height:40px;border:0;background:none;color:#eef1f5;font:800 18px system-ui;cursor:pointer}
.kn57-q{min-width:26px;text-align:center;font:800 14px ui-monospace,monospace}
.kn57-ship{flex:1;max-width:220px;height:40px;border:0;border-radius:12px;background:linear-gradient(180deg,#fb923c,#ea580c);color:#1f0a01;font:800 14px system-ui;cursor:pointer;box-shadow:0 8px 20px #ea580c55,inset 0 -3px 0 #0003;transition:transform .2s cubic-bezier(.3,1.6,.5,1)}
.kn57-ship:active{transform:scale(.95)}
.kn57-note{margin-left:auto;font:700 8px ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:#5c6675}
@media (prefers-reduced-motion: reduce){.kn57-truck{transition:none}.kn57-ship{transition:none}}
/* fl:end kn57 */
/* fl:begin kn58 */
/* 58 Sawdust particle logo · TFL reforms */
.kn58,.item .stage .dm.kn58{background:#0a0908}
.kn58{position:relative;overflow:hidden;min-height:400px;height:100%;font-family:system-ui,sans-serif;color:#f4ede2;touch-action:none;user-select:none;-webkit-user-select:none}
.kn58-cv{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair}
.kn58-cap{position:absolute;left:0;right:0;top:14px;margin:0;text-align:center;pointer-events:none;display:grid;gap:2px}
.kn58-w{font:800 13px system-ui;letter-spacing:.24em;text-transform:uppercase;color:#f4b26b}
.kn58-s{font:500 12px system-ui;color:#a89c8b}
.kn58-ui{position:absolute;left:12px;right:12px;bottom:12px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.kn58-next{border:0;border-radius:999px;padding:10px 16px;background:#f4ede2;color:#1b140c;font:800 12px system-ui;cursor:pointer;transition:transform .2s cubic-bezier(.3,1.6,.5,1)}
.kn58-next:active{transform:scale(.94)}
.kn58-tip{font:700 9px ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:#6f6558}
@media (prefers-reduced-motion: reduce){.kn58-next{transition:none}}
/* fl:end kn58 */
/* fl:begin kn59 */
/* 59 Objection busters · kinetic type */
.kn59,.item .stage .dm.kn59{background:radial-gradient(100% 80% at 50% 20%,#25131a,#0b0709 70%)}
.kn59{position:relative;overflow:hidden;min-height:400px;height:100%;font-family:system-ui,sans-serif;color:#fff;touch-action:none;user-select:none;-webkit-user-select:none}
.kn59-play{position:absolute;inset:0 0 64px}
.kn59-play::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,#0000,#ff4d6d66,#0000)}
.kn59-l{position:absolute;left:0;top:0;font:900 var(--kn59-fs,48px)/1 system-ui,'Arial Black',sans-serif;letter-spacing:-.02em;color:#ffe3ea;text-shadow:0 3px 0 #b0123a,0 6px 14px #0008;cursor:pointer;will-change:transform;white-space:pre}
.kn59-l.kn59-free{color:#ffb3c4;text-shadow:0 2px 0 #7a0c28,0 4px 8px #0008;cursor:grab}
.kn59-ans{position:absolute;left:16px;right:16px;top:22%;text-align:center;pointer-events:none}
.kn59-a{margin:0;font:900 clamp(30px,7.4vw,56px)/1 system-ui,'Arial Black',sans-serif;letter-spacing:-.03em;background:linear-gradient(180deg,#fff,#9ef5c6);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 0 #0a5c3a) drop-shadow(0 10px 20px #000a);opacity:0}
.kn59-sub{margin:10px 0 0;font:600 14px/1.4 system-ui;color:#d9c9cf;opacity:0}
.kn59-ui{position:absolute;left:12px;right:12px;bottom:12px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.kn59-pips{display:flex;gap:6px;margin:0;padding:0;list-style:none}
.kn59-pips li{width:22px;height:6px;border-radius:3px;background:#ffffff22;transition:background .3s}
.kn59-pips li.kn59-on{background:#ff4d6d}.kn59-pips li.kn59-done{background:#4ade80}
.kn59-go{border:0;border-radius:12px;padding:12px 20px;background:linear-gradient(180deg,#ff6b86,#e11d48);color:#fff;font:900 14px system-ui;letter-spacing:.02em;cursor:pointer;box-shadow:0 8px 22px #e11d4866,inset 0 -3px 0 #0003;transition:transform .2s cubic-bezier(.3,1.6,.5,1)}
.kn59-go:active{transform:scale(.94)}
.kn59-go.kn59-cta{background:linear-gradient(180deg,#86efac,#16a34a);color:#04210f;box-shadow:0 8px 22px #16a34a66}
.kn59-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@media (prefers-reduced-motion: reduce){.kn59-go,.kn59-pips li{transition:none}}
/* fl:end kn59 */
/* fl:begin kn60 */
/* 60 Gravity-drop testimonials */
.kn60,.item .stage .dm.kn60{background:radial-gradient(100% 70% at 50% 0%,#1c2333,#0a0c12 70%)}
.kn60{position:relative;overflow:hidden;min-height:400px;height:100%;font-family:system-ui,sans-serif;color:#1d1b18;touch-action:none;user-select:none;-webkit-user-select:none}
.kn60-head{position:absolute;left:14px;right:14px;top:12px;display:flex;justify-content:space-between;align-items:baseline;gap:8px;color:#e8ecf4;pointer-events:none;z-index:2}
.kn60-avg{font:600 12px system-ui;white-space:nowrap}
.kn60-avg b{font:900 24px ui-monospace,monospace;color:#fff}
.kn60-avg i{font-style:normal;color:#fbbf24;font-size:18px}
.kn60-cnt{font:600 11px system-ui;color:#8b95a8;text-align:right}
.kn60-pit{position:absolute;left:0;right:0;top:0;bottom:56px;border-bottom:2px solid #ffffff1c;background:linear-gradient(#0000 85%,#ffffff06)}
.kn60-c{position:absolute;left:0;top:0;box-sizing:border-box;padding:10px 12px;border-radius:10px;background:linear-gradient(160deg,#fffdf8,#f1ece2);box-shadow:0 10px 24px -8px #000c,inset 0 0 0 1px #0000000d;cursor:grab;will-change:transform;display:flex;flex-direction:column;gap:4px;overflow:hidden}
.kn60-c:active{cursor:grabbing}
.kn60-c q{font:700 var(--kn60-fs,12.5px)/1.3 system-ui;quotes:"“" "”";color:#22201c}
.kn60-c small{margin-top:auto;font:600 calc(var(--kn60-fs,12.5px) * .78) system-ui;color:#6b6457}
.kn60-st{display:flex;gap:1px;font-size:calc(var(--kn60-fs,12.5px) * 1.05);line-height:1;color:#d6d0c4}
.kn60-st i{font-style:normal}
.kn60-c.kn60-lit .kn60-st i.kn60-on{animation:kn60-star .35s cubic-bezier(.3,1.8,.5,1) both;animation-delay:calc(var(--kn60-i) * 90ms)}
@keyframes kn60-star{0%{color:#d6d0c4;transform:scale(1)}60%{color:#f59e0b;transform:scale(1.6) rotate(20deg)}100%{color:#f59e0b;transform:scale(1)}}
.kn60-c::after{content:"TFL";position:absolute;right:10px;top:8px;font:900 9px ui-monospace,monospace;letter-spacing:.14em;color:#c2410c80}
.kn60-ui{position:absolute;left:12px;right:12px;bottom:10px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.kn60-drop{border:0;border-radius:999px;padding:10px 16px;background:#fbbf24;color:#211603;font:800 12px system-ui;cursor:pointer;box-shadow:0 6px 16px #fbbf2444;transition:transform .2s cubic-bezier(.3,1.6,.5,1)}
.kn60-drop:active{transform:scale(.94)}
.kn60-note{font:700 9px ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:#5f6879;text-align:right}
.kn60-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);margin:0;padding:0}
@media (prefers-reduced-motion: reduce){.kn60-c.kn60-lit .kn60-st i.kn60-on{animation:none;color:#f59e0b}.kn60-drop{transition:none}}
/* fl:end kn60 */