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

/*@0*/
.fr-g>.fxp{min-width:0;scroll-margin-top:90px}.fr-g .sup{white-space:normal;text-align:right;max-width:52%}
.fr-dm{padding:0;color:#e5e7eb;font:14px/1.45 system-ui,sans-serif}.fr-dm button,.fr-dm input{font-family:inherit}
.fr-dm h4{font:800 18px system-ui}.fr-cap{font:11px ui-monospace,monospace;color:#8b8b95}
.fr-acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.fr-cfb{padding:7px 14px;border-radius:99px;border:1px solid #2a2a30;background:#101014;color:#bbb;font:600 12px ui-monospace,monospace;cursor:pointer;transition:background .2s,color .2s}
.fr-cfb:hover{background:#18181d;color:#fff}.fr-cfb.ok{background:#14532d;border-color:#22c55e;color:#bbf7d0}
.fr-cfb:focus-visible,.fr-dm button:focus-visible,.fr-dm input:focus-visible,.fr-dm [tabindex]:focus-visible,.fr-dm summary:focus-visible{outline:2px solid #fff;outline-offset:2px}
.fr-sm{padding:6px 12px;border-radius:99px;border:1px solid #333;background:#16161c;color:#ddd;font:600 12px system-ui;cursor:pointer}
.fr-ring{outline:2px solid #38bdf8;outline-offset:3px;box-shadow:0 0 0 8px #38bdf833,0 0 40px #38bdf855}
/*@1*/
.fr-d1{background:#05060a}.fr-sc{height:100%;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:110px;overscroll-behavior:contain}
.fr-hint{font:12px ui-monospace,monospace;color:#8b8b95;text-align:center}
.fr-c{flex:none;padding:26px 18px;border-radius:16px;font-weight:700;background:linear-gradient(135deg,#4338ca,#0e7490);box-shadow:0 10px 30px #0008}
.fr-c:last-child{margin-bottom:140px}
@media(prefers-reduced-motion:no-preference){
@keyframes fr-pop{from{opacity:0;transform:translateY(46px) scale(.9)}to{opacity:1;transform:none}}
@supports (animation-trigger:--fr-t play-forwards play-backwards) and (timeline-trigger:--fr-t view() entry 20% entry 60%){
.fr-sc{trigger-scope:--fr-t}
.fr-c{animation:fr-pop .6s cubic-bezier(.3,1.4,.4,1) both;timeline-trigger:--fr-t view() entry 20% entry 60%;animation-trigger:--fr-t play-forwards play-backwards}}
@supports not ((animation-trigger:--fr-t play-forwards play-backwards) and (timeline-trigger:--fr-t view() entry 20% entry 60%)){
.fr-c{opacity:0;transform:translateY(46px) scale(.9);transition:opacity .5s,transform .6s cubic-bezier(.3,1.4,.4,1)}
.fr-c.in{opacity:1;transform:none}}}
/*@2*/
@property --fr-i{syntax:"<integer>";inherits:false;initial-value:1}
@property --fr-n{syntax:"<integer>";inherits:false;initial-value:1}
.fr-d2{display:grid;place-content:center;gap:18px;padding:16px}
.fr-wave{display:flex;gap:6px;align-items:flex-end;justify-content:center;height:160px;width:100%}
.fr-wave i{flex:0 1 26px;min-width:0;height:100%;border-radius:8px;transform-origin:bottom;transform:scaleY(calc(.3 + .7*var(--fr-i,1)/var(--fr-n,1)));background:hsl(calc(var(--fr-i,1)/var(--fr-n,1)*300) 85% 60%)}
@supports (width:calc(sibling-index()*1px)){.fr-wave i{--fr-i:sibling-index();--fr-n:sibling-count()}}
.fr-ctl{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center}
@media(prefers-reduced-motion:no-preference){
@keyframes fr-bar{0%,100%{transform:scaleY(.2)}50%{transform:scaleY(1)}}
.fr-wave i{animation:fr-bar 1.5s ease-in-out infinite;animation-delay:calc(var(--fr-i,1)*-110ms)}}
/*@3*/ /* 2026-10-14 Fable: shape-outside:shape() crashes the WebKit renderer (Safari); native path animates clip-path:shape() only, text wraps a static ellipse */
.dm.fr-d3{height:auto;min-height:340px;padding:16px}
.fr-d3 p{font-size:13.5px;line-height:1.55;color:#cbd5e1}
.fr-blob{float:left;width:clamp(96px,36%,140px);aspect-ratio:1;margin:2px 14px 6px 0;background:linear-gradient(135deg,#6366f1,#22d3ee);shape-margin:10px;shape-outside:ellipse(50% 50%);clip-path:ellipse(50% 50%)}
@keyframes fr-mo{from{shape-outside:ellipse(50% 50%);clip-path:ellipse(50% 50%)}to{shape-outside:ellipse(30% 50%);clip-path:ellipse(30% 50%)}}
@supports (shape-outside:shape(from 0% 50%,curve to 50% 0% with 0% 0%,close)){
 .fr-blob{clip-path:shape(from 0% 50%,curve to 50% 0% with 0% 0%,curve to 100% 50% with 100% 0%,curve to 50% 100% with 100% 100%,curve to 0% 50% with 0% 100%,close)}
@keyframes fr-mo{from{clip-path:shape(from 0% 50%,curve to 50% 0% with 0% 0%,curve to 100% 50% with 100% 0%,curve to 50% 100% with 100% 100%,curve to 0% 50% with 0% 100%,close)}
to{clip-path:shape(from 0% 40%,curve to 60% 0% with 10% 5%,curve to 100% 60% with 100% 0%,curve to 40% 100% with 90% 100%,curve to 0% 40% with 0% 100%,close)}}}
@media(prefers-reduced-motion:no-preference){.fr-blob{animation:fr-mo 5s ease-in-out infinite alternate}}
/*@4*/
.fr-d4{display:grid;place-items:center;padding:16px}
.fr-gd{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;width:100%;max-width:360px}
.fr-gd b{position:relative;aspect-ratio:1.4;display:grid;place-items:center;border-radius:10px;background:#12121a;font:700 13px ui-monospace,monospace;color:#9ca3af}
@supports (row-rule:2px dashed #38bdf8){
.fr-gd{column-rule:2px dashed #38bdf8;row-rule:2px dashed #38bdf8}
@media(prefers-reduced-motion:no-preference){@keyframes fr-ru{from{column-rule-color:#38bdf8;row-rule-color:#38bdf8;column-rule-width:1px;row-rule-width:1px}to{column-rule-color:#f472b6;row-rule-color:#f472b6;column-rule-width:4px;row-rule-width:4px}}
.fr-gd{animation:fr-ru 2.2s ease-in-out infinite alternate}}}
@supports not (row-rule:2px dashed #38bdf8){
.fr-gd b:not(:nth-child(3n))::after{content:"";position:absolute;right:-9px;top:0;bottom:0;border-left:2px dashed #38bdf8}
.fr-gd b:nth-child(-n+6)::before{content:"";position:absolute;left:0;right:0;bottom:-9px;border-top:2px dashed #38bdf8}
@media(prefers-reduced-motion:no-preference){@keyframes fr-rf{to{border-color:#f472b6}}
.fr-gd b::after,.fr-gd b::before{animation:fr-rf 2.2s ease-in-out infinite alternate}}}
/*@5*/
@property --fr-a{syntax:"<angle>";inherits:false;initial-value:0deg}
.fr-d5{display:grid;place-items:center;padding:16px}
.fr-frame{width:min(100%,300px);padding:20px;border:6px solid transparent;border-radius:22px;background:#0b0b10;border-image:conic-gradient(from var(--fr-a),#f0abfc,#38bdf8,#4ade80,#fde047,#f0abfc) 1}
.fr-frame p{color:#a1a1aa;font-size:13px;margin-top:6px}
@supports (background-clip:border-area){.fr-frame{border-image:none;background-image:conic-gradient(from var(--fr-a),#f0abfc,#38bdf8,#4ade80,#fde047,#f0abfc),linear-gradient(#0b0b10,#0b0b10);background-origin:border-box;background-clip:border-area,padding-box}}
@media(prefers-reduced-motion:no-preference){@keyframes fr-sp{to{--fr-a:360deg}}.fr-frame{animation:fr-sp 6s linear infinite}}
/*@6*/
.dm.fr-d6{height:auto;min-height:340px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:12px;padding:12px;align-content:center;--fr-l:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 80' preserveAspectRatio='xMidYMid slice'%3E%3Crect width='120' height='80' fill='%23fde68a'/%3E%3Ccircle cx='92' cy='22' r='13' fill='%23f59e0b'/%3E%3Cpath d='M0 80V58q30-20 60 0t60-4v26z' fill='%2334d399'/%3E%3C/svg%3E");--fr-d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 80' preserveAspectRatio='xMidYMid slice'%3E%3Crect width='120' height='80' fill='%230f172a'/%3E%3Ccircle cx='92' cy='22' r='12' fill='%23e2e8f0'/%3E%3Ccircle cx='25' cy='15' r='1.5' fill='%23fff'/%3E%3Ccircle cx='55' cy='30' r='1' fill='%23fff'/%3E%3Cpath d='M0 80V58q30-20 60 0t60-4v26z' fill='%23134e4a'/%3E%3C/svg%3E")}
.fr-k6{display:flex;flex-direction:column;gap:8px;align-items:flex-start;justify-content:flex-end;min-height:150px;padding:14px;border-radius:14px;border:1px solid #2a2a30;background:var(--fr-l) center/cover;color:#1f2937}
.fr-k6[data-s=dark]{background-image:var(--fr-d);color:#e5e7eb}.fr-k6 p{font-size:12.5px}
.fr-k6{color-scheme:light dark}.fr-k6[data-s=light]{color-scheme:light}.fr-k6[data-s=dark]{color-scheme:dark}
@supports (background-image:light-dark(linear-gradient(red,red),linear-gradient(blue,blue))){.fr-k6,.fr-k6[data-s]{background-image:light-dark(var(--fr-l),var(--fr-d));color:light-dark(#1f2937,#e5e7eb)}}
/*@7*/
.dm.fr-d7{--fr-c:#38bdf8;display:grid;align-content:center;gap:16px;padding:16px;background:repeating-conic-gradient(#17171c 0 25%,#0c0c0f 0 50%) 0 0/16px 16px}
.fr-pick{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.fr-pick label{font:600 12px ui-monospace,monospace;color:#cbd5e1;display:flex;gap:6px;align-items:center}
.fr-pick input{width:40px;height:28px;padding:0;border:1px solid #333;border-radius:6px;background:none}
.fr-lad{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,76px),1fr));gap:8px}
.fr-lad i{font:700 12px ui-monospace,monospace;font-style:normal;text-align:center;padding:20px 0;border-radius:10px;color:#fff;text-shadow:0 1px 3px #000;background:color-mix(in srgb,var(--fr-c) calc(var(--fr-s)*100%),transparent)}
@supports (color:alpha(from red / .5)){.fr-lad i{background:alpha(from var(--fr-c) / var(--fr-s))}}
/*@8*/
.dm.fr-d8{display:flex;flex-direction:column;gap:10px;align-items:flex-start;padding:16px;interpolate-size:allow-keywords}
.fr-det{width:100%;border:1px solid #27272f;border-radius:12px;background:#0d0d12;--fr-bs:0px;--fr-r:0deg}
.fr-det summary{padding:12px 14px;cursor:pointer;font-weight:600;display:flex;justify-content:space-between;list-style:none}.fr-det summary::-webkit-details-marker{display:none}
.fr-det summary::after{content:"+";transform:rotate(var(--fr-r))}.fr-det p{padding:0 14px 14px;color:#a1a1aa;font-size:13px}
.fr-det::details-content{block-size:var(--fr-bs);overflow:clip}
.fr-dlg{position:absolute;inset:0;margin:auto;height:fit-content;width:min(86%,280px);padding:16px;border-radius:14px;border:1px solid #3f3f46;background:#18181b;color:#e5e7eb;opacity:var(--fr-o,0);transform:var(--fr-t,scale(.9))}
.fr-dlg form{margin-top:10px}
@supports selector(:open){.fr-det:open{--fr-bs:auto;--fr-r:45deg}.fr-dlg:open{--fr-o:1;--fr-t:none}}
@supports not selector(:open){.fr-det[open]{--fr-bs:auto;--fr-r:45deg}.fr-dlg[open]{--fr-o:1;--fr-t:none}}
@media(prefers-reduced-motion:no-preference){
.fr-det::details-content{transition:block-size .35s,content-visibility .35s allow-discrete}.fr-det summary::after{transition:transform .3s}
.fr-dlg{transition:opacity .25s,transform .25s,display .25s allow-discrete}
@starting-style{.fr-dlg[open]{opacity:0;transform:scale(.9)}}}
/*@9*/
.dm.fr-d9{display:grid;align-content:center;gap:14px;padding:16px}
.fr-fitbox{resize:horizontal;overflow:hidden;width:100%;min-width:110px;max-width:100%;padding:10px;border:1px dashed #3f3f46;border-radius:10px;justify-self:start}
.fr-fit{white-space:nowrap;font:900 20px/1 system-ui;letter-spacing:-.02em;color:#fde68a}
@supports (text-fit:grow){.fr-fit{text-fit:grow}}
.fr-lb{display:flex;gap:8px;align-items:center;font:600 12px ui-monospace,monospace;color:#8b8b95}
.fr-lb input{flex:1;min-width:0;padding:8px 10px;border-radius:8px;border:1px solid #333;background:#101014;color:#fff}
/*@10*/
.fr-d10{display:grid;place-items:end center;padding:16px}
.fr-conf{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.fr-conf i{position:absolute;width:8px;height:14px;border-radius:2px;top:calc(var(--fr-ly,20)*1%);left:calc(var(--fr-lx,50)*1%);rotate:calc(var(--fr-lr,0)*1deg);background:hsl(var(--fr-lh,200) 90% 60%);animation-duration:var(--fr-ld,2s)}
@supports (left:random(--fr-x element-scoped,0%,100%)){.fr-conf i{left:random(--fr-x element-scoped,0%,100%);top:random(--fr-y element-scoped,0%,60%);rotate:random(--fr-r element-scoped,0deg,360deg);background:hsl(random(--fr-h element-scoped,0,360) 90% 60%);animation-duration:random(--fr-d element-scoped,1.4s,2.8s)}}
@media(prefers-reduced-motion:no-preference){@keyframes fr-fl{from{transform:translateY(-120px) rotate(0)}to{transform:translateY(420px) rotate(540deg)}}.fr-conf i{animation-name:fr-fl;animation-timing-function:cubic-bezier(.3,.6,.5,1);animation-fill-mode:both}}
/*@11*/
.dm.fr-d11{--fr-nn:240;--fr-v:240px;--fr-p:calc(var(--fr-nn)/400);display:grid;place-content:center;justify-items:center;gap:14px;padding:16px}
@supports (width:calc(progress(1,0,2)*1px)){.dm.fr-d11{--fr-p:progress(var(--fr-v),0px,400px)}}
.fr-gauge{position:relative;width:min(60vw,190px);aspect-ratio:1;display:grid;place-items:center;counter-set:fr-n calc(var(--fr-p)*100)}
.fr-gauge::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 225deg,hsl(calc(140 - 140*var(--fr-p)) 85% 55%) calc(var(--fr-p)*270deg),#1c1c24 0 270deg,transparent 0);-webkit-mask:radial-gradient(circle,transparent 60%,#000 61%);mask:radial-gradient(circle,transparent 60%,#000 61%)}
.fr-read{position:relative;font:800 34px system-ui}.fr-read::after{content:counter(fr-n) "%"}
.fr-d11 input{width:min(100%,260px)}
/*@12*/
.dm.fr-d12{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;align-content:center;padding:16px}
.fr-tb{display:flex;gap:4px;padding:5px;border-radius:12px;background:#12121a;border:1px solid #27272f}
.fr-tb button{width:38px;height:36px;border-radius:8px;border:0;background:none;color:#cbd5e1;font-weight:800;cursor:pointer}
.fr-tb button[aria-pressed=true]{background:#e5e7eb;color:#000}.fr-d12 .fr-cap{flex-basis:100%;text-align:center}


/* ===== NEW fresh 13–17 ===== */
.fr-d13{display:grid;grid-template-rows:1fr auto;background:#05060a}
.fr-d13-sc{overflow:auto;height:100%;padding:16px;display:flex;flex-direction:column;gap:48px;overscroll-behavior:contain}
.fr-d13-block{padding:28px 18px;border-radius:14px;background:#121826;border:1px solid #2a3350;font:700 16px system-ui;color:#e5e7eb}
#fr13-target{background:linear-gradient(135deg,#312e81,#7c5cff55);border-color:#7c5cff;scroll-margin:20px}
.fr-d13 .fr-hint{margin:0;color:#8b8b95;font:12px ui-monospace,monospace}
.fr-d13 .fr-sm{margin:10px;justify-self:center}

.fr-d14{display:grid;place-content:center;justify-items:center;gap:14px;padding:20px;background:#07090f}
.fr-d14-lab{display:grid;gap:8px;font:700 13px system-ui;color:#9aa3c7}
.fr-d14-sel{
  appearance:base-select;
  min-width:220px;padding:10px 14px;border-radius:12px;
  border:1px solid #2a3350;background:#121826;color:#e5e7eb;
  font:600 14px system-ui;cursor:pointer;
}
.fr-d14-sel::picker(select){appearance:base-select;border:1px solid #2a3350;border-radius:12px;background:#0b0f18;color:#e5e7eb;padding:6px}
.fr-d14-sel option{padding:8px 10px;border-radius:8px}
.fr-d14-sel option:checked{background:#7c5cff;color:#fff}
@supports not (appearance:base-select){
  .fr-d14-sel{appearance:auto}
}

.fr-d15{display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 50% 30%,#1a1040,#05060d 70%)}
.fr-d15-card{
  width:min(100%,240px);aspect-ratio:1;padding:22px;
  display:grid;align-content:center;gap:10px;text-align:center;
  background:linear-gradient(145deg,#1e1b4b,#0f172a 70%);
  color:#e5e7eb;border:1px solid #4c1d9588;
  border-radius:48px;
  corner-shape: squircle;
  box-shadow:0 20px 50px #0008, inset 0 1px 0 #ffffff22;
}
.fr-d15-card b{font:800 22px system-ui}
.fr-d15-card p{margin:0;font:13px/1.4 system-ui;color:#a5b4fc}
@supports not (corner-shape: squircle){
  .fr-d15-card{border-radius:36%}
}

.fr-d16{padding:18px;background:#07090f}
.fr-d16-art{
  columns:1;display:grid;gap:12px;
  reading-flow: flex-visual;
}
.fr-d16-art h4{margin:0;font:800 20px system-ui}
.fr-d16-lead{margin:0;color:#c7cbe6;order:1}
.fr-d16-quote{
  margin:0;padding:14px 16px;border-left:3px solid #7c5cff;
  background:#121826;color:#e9d5ff;font:italic 600 15px/1.4 system-ui;
  order:0;reading-order:2;
}
.fr-d16-art p:last-of-type{margin:0;color:#93a0b8;order:2;reading-order:3}
@supports not (reading-order: 2){
  .fr-d16-quote{order:2}
  .fr-d16-art p:last-of-type{order:3}
}

.fr-d17{display:grid;place-content:center;justify-items:center;gap:14px;padding:18px;background:#05060a;
  --base:#7c5cff;
  --fg: color-contrast(var(--base) vs #0b0f18, #f8fafc);
}
.fr-d17-pick label{font:700 12px system-ui;color:#9aa3c7;display:flex;gap:8px;align-items:center}
.fr-d17-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:min(100%,280px)}
.fr-d17-swatch{border-radius:14px;padding:28px 12px;text-align:center;font:800 13px system-ui;border:1px solid #ffffff18}
.fr-d17-swatch.bg{background:var(--base);color:var(--fg)}
.fr-d17-swatch.fg{
  background: oklch(from var(--base) calc(l + (0.65 - l)) c h);
  color: var(--base);
}
@supports not (color: color-contrast(red vs black, white)){
  .fr-d17{--fg:#f8fafc}
  .fr-d17[data-dark="1"]{--fg:#0b0f18}
}


/* ===== NEW fresh 18–40 ===== */
.fr-sm{padding:9px 14px;border-radius:99px;border:1px solid #2a3350;background:#121826;color:#eee;font:700 12px system-ui;cursor:pointer}
.fr-hint{margin:0 0 8px;color:#8b8fb0;font:12px system-ui}

.fr-d18{padding:12px;background:#07090f;height:100%;display:grid;grid-template-rows:1fr auto;gap:8px}
.fr-d18-sc{container-type:scroll-state;overflow:auto;border-radius:12px;border:1px solid #1e2636;background:#0b0f18;padding:12px;box-shadow:none}
.fr-d18-block{padding:28px 14px;margin:8px 0;border-radius:10px;background:#121826;border:1px solid #2a3350;text-align:center;font:700 14px system-ui}
@supports (background:red){
  @container scroll-state(scrollable: top){
    .fr-d18-sc{box-shadow:inset 0 12px 12px -12px #7c5cff88}
  }
  @container scroll-state(scrollable: bottom){
    .fr-d18-sc{box-shadow:inset 0 -12px 12px -12px #7c5cff88}
  }
  @container scroll-state(scrollable: block){
    .fr-d18-sc{box-shadow:inset 0 12px 12px -12px #7c5cff88, inset 0 -12px 12px -12px #7c5cff88}
  }
}
.fr-d18.scrolled-top .fr-d18-sc{box-shadow:inset 0 12px 12px -12px #7c5cff88}
.fr-d18.scrolled-bot .fr-d18-sc{box-shadow:inset 0 -12px 12px -12px #22c55e88}
.fr-d18.scrolled-both .fr-d18-sc{box-shadow:inset 0 12px 12px -12px #7c5cff88, inset 0 -12px 12px -12px #22c55e88}

.fr-d19{display:grid;place-content:center;gap:12px;padding:16px;background:#05060a;height:100%}
.fr-d19-d{width:min(100%,280px);border-radius:12px;border:1px solid #2a3350;background:#121826;padding:4px 12px;overflow:hidden}
.fr-d19-d summary{padding:10px 0;cursor:pointer;font:700 14px system-ui}
.fr-d19-body{color:#93a0b8;font:13px/1.4 system-ui}
.fr-d19-body p{margin:0 0 10px}
@supports (interpolate-size: allow-keywords){
  .fr-d19-d{interpolate-size: allow-keywords}
  .fr-d19-d::details-content{transition:height .35s ease, content-visibility .35s allow-discrete;height:0;overflow:hidden}
  .fr-d19-d[open]::details-content{height:auto}
}

.fr-d20{display:grid;place-content:center;gap:12px;padding:16px;background:#07090f;height:100%}
.fr-d20-lab{display:grid;gap:8px;font:700 12px system-ui;color:#9aa3c7}
.fr-d20-sel{appearance:base-select;padding:10px 12px;border-radius:10px;border:1px solid #2a3350;background:#121826;color:#fff;font:700 14px system-ui;min-width:200px}
.fr-d20-sel::picker-icon{color:#a78bfa;content:"▾";font-size:12px}
@supports not (appearance:base-select){.fr-d20-sel{appearance:auto}}

.fr-d21{display:grid;place-content:center;gap:12px;padding:16px;background:#05060a;height:100%;justify-items:center}
.fr-d21-anchor{anchor-name:--fr21;padding:10px 18px;border-radius:10px;border:0;background:#7c5cff;color:#fff;font:700 13px system-ui;cursor:pointer}
.fr-d21-pop{position-anchor:--fr21;top:anchor(bottom);left:anchor(left);margin-top:8px;min-width:anchor-size(width);padding:12px 14px;border-radius:12px;border:1px solid #2a3350;background:#0b0f18;color:#c7cbe6;font:13px/1.4 system-ui;max-width:240px}
@supports not (anchor-name: --x){
  .fr-d21-pop{position:fixed;inset:auto;margin:0}
}

.fr-d22{display:grid;place-content:center;gap:12px;padding:16px;background:#07090f;height:100%}
.fr-d22-card{width:min(100%,260px);padding:18px;border-radius:14px;background:#121826;border:1px solid #2a3350}
.fr-d22-trim{margin:0 0 8px;font:800 34px/1 system-ui;text-box-trim:both;text-box-edge:cap alphabetic;background:linear-gradient(#7c5cff22,#7c5cff22)}
.fr-d22-card p{margin:0;color:#93a0b8;font:13px/1.4 system-ui}

.fr-d23{display:grid;place-content:center;gap:12px;padding:16px;background:#05060a;height:100%}
.fr-d23-box{width:min(100%,280px);padding:0 14px;border-radius:12px;border:1px dashed #7c5cff66;background:#121826;margin-trim:block}
.fr-d23-box p{margin:16px 0;color:#c7cbe6;font:13px/1.45 system-ui}
@supports not (margin-trim: block){
  .fr-d23-box p:first-child{margin-top:0}
  .fr-d23-box p:last-child{margin-bottom:0}
}

.fr-d24{display:grid;align-content:center;gap:12px;padding:16px;background:#07090f;height:100%;justify-items:start}
.fr-d24-tog{padding:9px 14px;border-radius:99px;border:0;background:#7c5cff;color:#fff;font:700 12px system-ui;cursor:pointer}
.fr-d24-panel{overflow:hidden;border-radius:12px;border:1px solid #2a3350;background:#121826;width:min(100%,280px);padding:0 14px;color:#93a0b8;font:13px/1.4 system-ui;
  height:0;transition:height .4s ease,padding .4s ease}
.fr-d24-panel p{margin:10px 0}
.fr-d24[data-open=true] .fr-d24-panel{height:auto;height:calc-size(auto,size);padding:4px 14px}
@supports not (height: calc-size(auto, size)){
  .fr-d24[data-open=true] .fr-d24-panel{height:120px}
}

.fr-d25{display:grid;place-content:center;gap:12px;padding:16px;background:#05060a;height:100%}
.fr-d25-nav{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.fr-d25-nav button{padding:10px 14px;border-radius:10px;border:1px solid #2a3350;background:#121826;color:#e5e7eb;font:700 13px system-ui;cursor:pointer;
  animation:fr25in .45s ease both;animation-delay:calc((sibling-index() - 1) * 60ms)}
@keyframes fr25in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@supports not (animation-delay: calc(sibling-index() * 1ms)){
  .fr-d25-nav button:nth-child(1){animation-delay:0ms}
  .fr-d25-nav button:nth-child(2){animation-delay:60ms}
  .fr-d25-nav button:nth-child(3){animation-delay:120ms}
  .fr-d25-nav button:nth-child(4){animation-delay:180ms}
  .fr-d25-nav button:nth-child(5){animation-delay:240ms}
}
.fr-d25-nav button[aria-current=true]{background:#7c5cff;border-color:transparent}

.fr-d26{display:grid;place-items:center;gap:12px;padding:16px;background:#05060a;height:100%;position:relative}
.fr-d26-field{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.fr-d26-field i{position:absolute;left:random(--fr-x element-scoped,5%,95%);top:random(--fr-y element-scoped,10%,80%);width:6px;height:6px;border-radius:50%;
  background:hsl(random(--fr-h element-scoped,240,300) 90% 70%);
  animation:fr26s random(--fr-d element-scoped,0.8s,1.6s) ease-out forwards}
@keyframes fr26s{from{transform:scale(0);opacity:1}to{transform:scale(2) translateY(-30px);opacity:0}}
@supports not (left: random(0%, 100%)){
  .fr-d26-field i{left:calc(var(--fr-lx,50)*1%);top:calc(var(--fr-ly,40)*1%);background:hsl(calc(var(--fr-lh,260)*1deg) 90% 70%);animation-duration:calc(var(--fr-ld,1)*1s)}
}

.fr-d27{display:grid;place-items:center;gap:12px;padding:16px;background:#07090f;height:100%}
.fr-d27-ring{--p: calc(progress(var(--fr-v), 0, 100)); width:120px;height:120px;border-radius:50%;
  background:conic-gradient(#7c5cff calc(var(--fr-v)*1%), #1e293b 0);
  display:grid;place-items:center;box-shadow:inset 0 0 0 12px #07090f}
.fr-d27-ring span{font:800 18px system-ui}
@supports not (width: calc(progress(1,0,2)*1px)){
  .fr-d27-ring{background:conic-gradient(#7c5cff calc(var(--fr-v)*1%), #1e293b 0)}
}
.fr-d27 input{width:min(100%,200px);accent-color:#7c5cff}

.fr-d28{display:grid;place-items:center;gap:12px;padding:16px;background:#05060a;height:100%}
.fr-d28-card{width:min(100%,240px);padding:18px;border-radius:14px;border:1px solid #2a3350;text-align:center;
  background: if(style(--mode: loud): #3b0764; else: #121826);
  color: if(style(--mode: loud): #f5d0fe; else: #e5e7eb)}
.fr-d28[data-mode=loud]{--mode: loud}
.fr-d28[data-mode=calm]{--mode: calm}
@supports not (background: if(style(--x:1): red; else: blue)){
  .fr-d28[data-mode=calm] .fr-d28-card{background:#121826;color:#e5e7eb}
  .fr-d28[data-mode=loud] .fr-d28-card{background:#3b0764;color:#f5d0fe;border-color:#a855f7}
}
.fr-d28-card b{font:800 18px system-ui}.fr-d28-msg{margin:8px 0 0;font:13px system-ui;opacity:.85}

.fr-d29{display:grid;place-items:center;padding:16px;background:#07090f;height:100%}
.fr-d29-card{width:min(100%,260px);padding:18px;border-radius:14px;border:1px solid; display:grid;gap:10px;
  color-scheme: light;
  background: light-dark(#f8fafc, #0b0f18);
  color: light-dark(#0b1020, #e5e7eb);
  border-color: light-dark(#cbd5e1, #2a3350)}
.fr-d29-card[data-s=dark]{color-scheme: dark}
.fr-d29-card[data-s=light]{color-scheme: light}
.fr-d29-tg{justify-self:start;padding:8px 12px;border-radius:99px;border:1px solid currentColor;background:transparent;color:inherit;font:700 12px system-ui;cursor:pointer;opacity:.8}
@supports not (background: light-dark(white, black)){
  .fr-d29-card[data-s=light]{background:#f8fafc;color:#0b1020;border-color:#cbd5e1}
  .fr-d29-card[data-s=dark]{background:#0b0f18;color:#e5e7eb;border-color:#2a3350}
}

.fr-d30{display:grid;place-content:center;justify-items:center;gap:12px;padding:16px;background:#05060a;height:100%}
.fr-d30-ramp{width:min(100%,280px);height:48px;border-radius:12px;border:1px solid #ffffff18;
  background:linear-gradient(90deg,
    color-mix(in oklab, var(--base) 100%, white),
    color-mix(in oklab, var(--base) 70%, white),
    var(--base),
    color-mix(in oklab, var(--base) 70%, black),
    color-mix(in oklab, var(--base) 40%, black))}
.fr-d30-pick label{font:700 12px system-ui;color:#9aa3c7;display:flex;gap:8px;align-items:center}

.fr-d31{display:grid;place-content:center;justify-items:center;gap:12px;padding:16px;background:#07090f;height:100%}
.fr-d31-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.fr-d31-btn{padding:10px 16px;border-radius:10px;border:0;cursor:pointer;font:700 13px system-ui;
  background:var(--c);color:#fff;
  background: oklch(from var(--c) l c h);
  color: oklch(from var(--c) calc(l + (0.7 - l)) 0 h)}
.fr-d31-btn.ghost{background:transparent;color:var(--c);border:1px solid color-mix(in oklab, var(--c) 60%, transparent)}
.fr-d31-btn.soft{background: color-mix(in oklab, var(--c) 22%, transparent);color:var(--c)}

.fr-d32{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px;background:#05060a;height:100%;align-content:center}
.fr-d32-island{padding:14px;border-radius:12px;display:grid;gap:10px;border:1px solid #2a3350}
.fr-d32-island b{font:800 14px system-ui}
.fr-d32-island button{padding:8px 12px;border-radius:8px;border:0;font:700 12px system-ui;cursor:pointer}
@scope (.fr-d32-island.A){
  :scope{background:#1e1b4b;color:#e9d5ff}
  button{background:#7c5cff;color:#fff}
}
@scope (.fr-d32-island.B){
  :scope{background:#052e16;color:#bbf7d0}
  button{background:#22c55e;color:#052e16}
}
@supports not (background:red){}
@supports not selector(:scope){
  .fr-d32-island.A{background:#1e1b4b;color:#e9d5ff}.fr-d32-island.A button{background:#7c5cff;color:#fff}
  .fr-d32-island.B{background:#052e16;color:#bbf7d0}.fr-d32-island.B button{background:#22c55e;color:#052e16}
}
/* always provide fallback theme colors */
.fr-d32-island.A{background:#1e1b4b;color:#e9d5ff}.fr-d32-island.A button{background:#7c5cff;color:#fff}
.fr-d32-island.B{background:#052e16;color:#bbf7d0}.fr-d32-island.B button{background:#22c55e;color:#052e16}
.fr-d32 .fr-cap{grid-column:1/-1;text-align:center;margin:0}

.fr-d33{display:grid;place-content:center;gap:12px;padding:16px;background:#07090f;height:100%}
.fr-d33-lab{display:grid;gap:8px;font:700 12px system-ui;color:#9aa3c7;width:min(100%,280px)}
.fr-d33-ta{field-sizing:content;min-height:40px;max-height:160px;resize:none;padding:10px 12px;border-radius:10px;border:1px solid #2a3350;background:#121826;color:#fff;font:14px/1.4 system-ui}
@supports not (field-sizing: content){
  .fr-d33-ta{min-height:40px}
}

.fr-d34{display:grid;place-items:center;padding:16px;background:#05060a;height:100%}
.fr-d34-pop{padding:16px;border-radius:14px;border:1px solid #2a3350;background:#0b0f18;color:#e5e7eb;max-width:240px;
  opacity:1;transform:scale(1);transition:opacity .35s,transform .35s,overlay .35s allow-discrete,display .35s allow-discrete}
.fr-d34-pop b{display:block;margin-bottom:6px;font:800 15px system-ui}
.fr-d34-pop p{margin:0 0 12px;color:#93a0b8;font:13px/1.4 system-ui}
.fr-d34-pop button{padding:7px 12px;border-radius:99px;border:1px solid #2a3350;background:#121826;color:#fff;font:700 12px system-ui;cursor:pointer}
@starting-style{
  .fr-d34-pop:popover-open{opacity:0;transform:scale(.92)}
}
.fr-d34-pop:popover-open{opacity:1;transform:scale(1)}

.fr-d35{display:grid;place-content:center;gap:12px;padding:16px;background:#07090f;height:100%}
.fr-d35-lab{display:grid;gap:8px;font:700 12px system-ui;color:#9aa3c7}
.fr-d35-sel{appearance:base-select;min-width:220px;padding:10px 12px;border-radius:12px;border:1px solid #4c1d95;background:linear-gradient(160deg,#1e1b4b,#0f172a);color:#e9d5ff;font:700 14px system-ui}
.fr-d35-sel::picker(select){appearance:base-select;border:1px solid #2a3350;border-radius:12px;background:#0b0f18;color:#e5e7eb;padding:6px}
.fr-d35-sel option{padding:8px 10px;border-radius:8px}
.fr-d35-sel option:checked{background:#7c5cff;color:#fff}
@supports not (appearance:base-select){.fr-d35-sel{appearance:auto}}

.fr-d36{display:grid;place-content:center;gap:12px;padding:16px;background:#05060a;height:100%}
.fr-d36-grid{display:grid;grid-template-columns:repeat(3,80px);gap:8px;reading-flow:grid-rows}
.fr-d36-a,.fr-d36-b,.fr-d36-c{aspect-ratio:1;border-radius:12px;display:grid;place-content:center;gap:2px;text-align:center;border:1px solid #2a3350;font:700 12px system-ui}
.fr-d36-a{background:#1e1b4b;order:1}.fr-d36-b{background:#0c4a6e;order:2}.fr-d36-c{background:#14532d;order:3}
.fr-d36-grid b{font:800 22px system-ui}.fr-d36-grid span{color:#93a0b8;font:11px system-ui}
@supports not (reading-order: 1){
  .fr-d36-cap::after{content:""}
}

.fr-d37{display:grid;place-items:center;gap:12px;padding:20px;background:radial-gradient(circle at 50% 30%,#1a1040,#05060d 70%);height:100%}
.fr-d37-blob{width:min(100%,200px);aspect-ratio:1;padding:20px;display:grid;place-content:center;gap:8px;text-align:center;
  background:linear-gradient(145deg,#7c5cff,#0ea5e9);color:#fff;border-radius:40% 60% 55% 45% / 50% 40% 60% 50%;
  corner-shape: scoop;box-shadow:0 20px 50px #0008}
.fr-d37-blob b{font:800 22px system-ui}.fr-d37-blob p{margin:0;font:12px/1.35 system-ui;opacity:.9}
@supports not (corner-shape: scoop){
  .fr-d37-blob{border-radius:40% 60% 55% 45% / 50% 40% 60% 50%}
}

.fr-d38{display:grid;place-items:center;gap:12px;padding:24px;background:#07090f;height:100%}
.fr-d38-clip{position:relative;width:min(100%,240px);padding:22px;border-radius:16px;background:#121826;border:1px solid #2a3350;overflow:clip;overflow-clip-margin:18px;text-align:center}
.fr-d38-glow{position:absolute;width:120px;height:120px;border-radius:50%;background:#7c5cff88;filter:blur(20px);top:-40px;left:50%;translate:-50% 0;pointer-events:none}
.fr-d38-clip b{position:relative;font:800 16px system-ui}.fr-d38-clip p{position:relative;margin:8px 0 0;color:#93a0b8;font:13px system-ui}

.fr-d39{display:grid;place-items:center;gap:12px;padding:16px;background:#05060a;height:100%}
.fr-d39-card{width:min(100%,260px);padding:18px;border-radius:14px;background:#121826;border:1px solid #2a3350}
.fr-d39-card h4{margin:0 0 10px;font:800 22px/1.2 system-ui;text-wrap:balance}
.fr-d39-card p{margin:0;color:#93a0b8;font:13px/1.45 system-ui;text-wrap:pretty}

.fr-d40{display:grid;place-items:center;gap:12px;padding:16px;background:#07090f;height:100%}
.fr-d40-q{margin:0;width:min(100%,280px);padding:16px 18px;border-radius:14px;background:#121826;border-left:3px solid #7c5cff;color:#e9d5ff;font:italic 600 16px/1.45 Georgia,serif;
  hanging-punctuation: first last allow-end}

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

/* 41 Frosted glass over sunlit oak (flooring) */
@property --ffr41-a{syntax:'<angle>';inherits:false;initial-value:0deg}
.ffr41,#demo-root .stage.fresh-stage .ffr41{background:#2a1c10}
.ffr41{height:340px;position:relative;overflow:hidden;isolation:isolate;--warm:color-mix(in oklch,#ffb05e calc((1 - var(--t))*100%),#ff8a3d);--sx:calc((var(--t) - .5)*190px)}
.ffr41-fl{position:absolute;inset:0;width:100%;height:100%;display:block;filter:brightness(calc(.34 + .66*var(--day,1))) saturate(calc(.55 + .45*var(--day,1)))}
.ffr41-sun{position:absolute;left:50%;top:-6%;width:62%;height:92%;margin-left:-31%;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:9px;transform:translateX(var(--sx)) skewX(calc((var(--t) - .5)*-58deg)) scaleY(calc(1.15 - .5*(1 - (var(--t) - .5)*(var(--t) - .5)*4)));transform-origin:50% 0;filter:blur(2.5px);opacity:calc(var(--day,1)*.85);mix-blend-mode:overlay;pointer-events:none}
.ffr41-sun i{background:linear-gradient(color-mix(in srgb,var(--warm),#fff 40%),var(--warm));border-radius:2px}
.ffr41-sun::after{content:'';position:absolute;inset:-10%;background:radial-gradient(closest-side,color-mix(in srgb,var(--warm),transparent 55%),transparent);mix-blend-mode:screen}
.ffr41-motes{position:absolute;inset:0;pointer-events:none;opacity:var(--day,1)}
.ffr41-motes i{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff8e6;box-shadow:0 0 4px #fff2d0;animation:ffr41m var(--d) linear infinite;opacity:.7}
@keyframes ffr41m{0%{transform:translate(0,0);opacity:0}15%{opacity:.8}100%{transform:translate(var(--mx),var(--my));opacity:0}}
.ffr41-lamp{position:absolute;right:-60px;top:-50px;width:300px;height:300px;border-radius:50%;background:radial-gradient(closest-side,#ffc77acc,#ffb15b44 50%,transparent);opacity:calc(1 - var(--day,1));mix-blend-mode:screen;pointer-events:none}
.ffr41-card{--px:30%;--py:20%;position:absolute;left:0;top:0;width:min(210px,72%);padding:14px 14px 12px;border-radius:18px;color:#fffaf2;cursor:grab;touch-action:none;user-select:none;
 background:linear-gradient(135deg,#ffffff3d,#ffffff12 60%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
 -webkit-backdrop-filter:blur(14px) saturate(170%) brightness(1.06);backdrop-filter:blur(14px) saturate(170%) brightness(1.06);box-shadow:0 18px 40px #1a0d0566,inset 0 1px 0 #ffffff80,inset 0 -1px 0 #ffffff1f;will-change:transform}
.ffr41-card::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1.3px;background:conic-gradient(from var(--ffr41-a),#fff0 0 20%,#fff 28%,#ffd7a0 33%,#fff0 45% 70%,#ffffff70 80%,#fff0 90%);-webkit-mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);pointer-events:none}
.ffr41-card::after{content:'';position:absolute;inset:0;border-radius:inherit;background:radial-gradient(120px 80px at var(--px) var(--py),#ffffff40,#fff0 70%);pointer-events:none}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.ffr41-card{background:#3a2a1ccc}}
.ffr41-card:active{cursor:grabbing}
.ffr41-card h4{margin:2px 0 4px;font:800 19px/1.1 Georgia,serif;letter-spacing:-.01em;text-shadow:0 1px 8px #3a1e0a66}
.ffr41-k{margin:0;font:800 9px ui-monospace,monospace;letter-spacing:.2em;text-transform:uppercase;color:#fff3e0d9}
.ffr41-m{margin:0 0 10px;font-size:12px;color:#fff3e3e6}.ffr41-m b{font-size:16px;color:#fff}.ffr41-m span{opacity:.8}
.ffr41-add{position:relative;z-index:1;width:100%;padding:8px;border-radius:11px;border:1px solid #ffffff66;background:#ffffff2e;color:#fff;font:800 12px system-ui;cursor:pointer;transition:background .2s,transform .2s}
.ffr41-add:hover{background:#ffffff47}.ffr41-add.ok{background:#2f6b45cc;border-color:#a7f3c0}
.ffr41-grip{position:absolute;left:50%;top:6px;width:28px;height:4px;margin-left:-14px;border-radius:9px;background:#ffffff8c;font-size:0;color:transparent}
.ffr41-tod{position:absolute;left:10px;right:10px;bottom:10px;display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:14px;background:#1b120a59;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid #ffffff2a}
.ffr41-tl{min-width:58px;font:800 11.5px ui-monospace,monospace;color:#fff3e0}
.ffr41-tod input{flex:1;accent-color:#ffb76b;min-width:0}
@media (prefers-reduced-motion:no-preference){.ffr41-card::before{animation:ffr41spin 7s linear infinite}}
@keyframes ffr41spin{to{--ffr41-a:360deg}}
@media (prefers-reduced-motion:reduce){.ffr41-motes{display:none}}

/* 42 Holo sample chip (flooring) */
@property --ffr42-rx{syntax:'<angle>';inherits:true;initial-value:0deg}
@property --ffr42-ry{syntax:'<angle>';inherits:true;initial-value:0deg}
@property --ffr42-flip{syntax:'<angle>';inherits:true;initial-value:0deg}
.ffr42,#demo-root .stage.fresh-stage .ffr42{background:radial-gradient(90% 60% at 50% 40%,#2a2238,#0b0a10 70%)}
.ffr42{height:340px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;overflow:hidden;--px:50%;--py:50%}
.ffr42-scene{perspective:700px}
.ffr42-card{--wc:#b08654;position:relative;display:block;width:170px;height:236px;padding:0;border:0;background:none;cursor:pointer;transform-style:preserve-3d;transform:rotateX(var(--ffr42-rx)) rotateY(calc(var(--ffr42-ry) + var(--ffr42-flip)));transition:--ffr42-flip .7s cubic-bezier(.3,1.3,.5,1),--ffr42-rx .5s ease-out,--ffr42-ry .5s ease-out;touch-action:none;color:#fff}
.ffr42.live .ffr42-card{transition:--ffr42-flip .7s cubic-bezier(.3,1.3,.5,1),--ffr42-rx .08s linear,--ffr42-ry .08s linear}
.ffr42.flip .ffr42-card{--ffr42-flip:180deg}
.ffr42:not(.live):not(.flip) .ffr42-card{animation:ffr42idle 5s ease-in-out infinite}
@keyframes ffr42idle{0%,100%{--ffr42-rx:6deg;--ffr42-ry:-10deg}50%{--ffr42-rx:-4deg;--ffr42-ry:12deg}}
.ffr42-f,.ffr42-b{position:absolute;inset:0;border-radius:14px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 22px 40px #000a,0 0 0 1px #ffffff2a inset}
.ffr42-f{background:var(--img) center/cover,#8a6a4a;transform:translateZ(1px)}
.ffr42-f::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#ffffff1f,#0000 30%,#0000 60%,#00000066);pointer-events:none}
.ffr42-holo{position:absolute;inset:0;background:repeating-linear-gradient(115deg,#ff4d6d 0,#ffd54d 5%,#4dffb8 10%,#4dc3ff 15%,#b84dff 20%,#ff4d6d 25%);background-size:300% 300%;background-position:var(--px) var(--py);mix-blend-mode:color-dodge;opacity:.68;-webkit-mask:var(--mask) center/cover;mask:var(--mask) center/cover;filter:saturate(1.3)}
.ffr42-holo::after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,#0000 30%,#fff9 calc(var(--px) * .4 + 30%),#0000 calc(var(--px) * .4 + 42%));mix-blend-mode:overlay}
.ffr42-glare{position:absolute;inset:0;background:radial-gradient(circle at var(--px) var(--py),#ffffff8c,#fff0 42%);mix-blend-mode:soft-light;opacity:.9}
.ffr42-tag{position:absolute;left:8px;right:8px;bottom:8px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:0 6px;padding:7px 9px;border-radius:9px;background:#0f0d0cd9;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);text-align:left}
.ffr42-tag b{font:800 14px Georgia,serif;letter-spacing:.01em}
.ffr42-tag small{grid-column:1;font:600 9.5px system-ui;color:#d9c8b2}
.ffr42-bc{grid-row:1/3;grid-column:2;width:24px;height:22px;background:repeating-linear-gradient(90deg,#f3e9db 0 1px,#0000 1px 2px,#f3e9db 2px 4px,#0000 4px 5px,#f3e9db 5px 5.6px,#0000 5.6px 7px);opacity:.8}
.ffr42-rar{position:absolute;right:8px;top:8px;padding:3px 7px;border-radius:99px;font:800 9px ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:#1a1020;background:linear-gradient(115deg,#ffd1e8,#fff3b0,#b8ffe6,#c6dcff);background-size:200%;background-position:var(--px) 0;box-shadow:0 2px 8px #0007}
.ffr42-b{transform:rotateY(180deg) translateZ(1px);background:linear-gradient(160deg,#211b2c,#13101a);display:flex;flex-direction:column;gap:8px;padding:12px;text-align:left}
.ffr42-bt{font:800 14px Georgia,serif}
.ffr42-xs{display:flex;flex-direction:column;height:72px;border-radius:6px;overflow:hidden;box-shadow:0 0 0 1px #ffffff26}
.ffr42-xs i{height:var(--h);flex:1 1 var(--h);background:var(--c);font:700 8px system-ui;font-style:normal;color:#fff;display:flex;align-items:center;padding-left:6px;text-shadow:0 1px 2px #000a}
.ffr42-xs i:first-child{color:#0f1720;text-shadow:none}
.ffr42-b dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:3px 10px;font-size:11px}
.ffr42-b dt{color:#9c92ad}.ffr42-b dd{margin:0;font-weight:700;text-align:right}
.ffr42-sku{margin-top:auto;font:10px ui-monospace,monospace;color:#8f86a0}
.ffr42-dots{display:flex;gap:10px}
.ffr42-dots button{width:22px;height:22px;border-radius:50%;padding:0;border:2px solid #0b0a10;background:var(--c);box-shadow:0 0 0 1px #ffffff40;cursor:pointer;transition:transform .25s cubic-bezier(.3,1.7,.5,1),box-shadow .2s}
.ffr42-dots button[aria-checked="true"]{transform:scale(1.2);box-shadow:0 0 0 2px #e9d5ff}
.ffr42-cap{margin:0;padding:0 12px;text-align:center}
@media (prefers-reduced-motion:reduce){.ffr42:not(.live):not(.flip) .ffr42-card{animation:none}.ffr42-card{transition:none!important}}

/* 43 Living floor bento (flooring) */
.ffr43,#demo-root .stage.fresh-stage .ffr43{background:#0d0b0a}
.ffr43{height:340px;padding:8px}
.ffr43-g{height:100%;display:grid;gap:6px;grid-template-columns:1fr 1fr;grid-template-rows:1.15fr 1fr 1fr;grid-template-areas:"hw hw" "lv cp" "tl sv";transition:grid-template-columns .5s cubic-bezier(.3,1.2,.4,1),grid-template-rows .5s cubic-bezier(.3,1.2,.4,1)}
.ffr43-g:has(.ffr43-hw:is(:hover,:focus-visible)){grid-template-rows:1.9fr .8fr .8fr}
.ffr43-g:has(.ffr43-lv:is(:hover,:focus-visible)){grid-template-columns:1.7fr 1fr;grid-template-rows:.9fr 1.5fr .9fr}
.ffr43-g:has(.ffr43-cp:is(:hover,:focus-visible)){grid-template-columns:1fr 1.7fr;grid-template-rows:.9fr 1.5fr .9fr}
.ffr43-g:has(.ffr43-tl:is(:hover,:focus-visible)){grid-template-columns:1.7fr 1fr;grid-template-rows:.9fr .9fr 1.5fr}
.ffr43-g:has(.ffr43-sv:is(:hover,:focus-visible)){grid-template-columns:1fr 1.7fr;grid-template-rows:.9fr .9fr 1.5fr}
.ffr43-t{position:relative;min-width:0;min-height:0;border-radius:12px;overflow:hidden;container-type:size;box-shadow:inset 0 0 0 1px #ffffff1c,0 8px 18px #0008;outline-offset:2px;touch-action:manipulation}
.ffr43-cp{touch-action:none}
.ffr43-hw{grid-area:hw}.ffr43-lv{grid-area:lv}.ffr43-cp{grid-area:cp}.ffr43-tl{grid-area:tl}.ffr43-sv{grid-area:sv}
.ffr43-t canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.ffr43-lb{position:absolute;left:6px;bottom:6px;right:6px;display:flex;flex-direction:column;align-items:flex-start;gap:2px;pointer-events:none}
.ffr43-lb b{padding:2px 8px;border-radius:99px;background:#0e0b09d0;backdrop-filter:blur(6px);font:800 11px system-ui;color:#fff1de}
.ffr43-st{max-height:0;opacity:0;overflow:hidden;padding:0 8px;border-radius:7px;background:#0e0b09d0;font:600 10px system-ui;color:#e6c79f;white-space:nowrap;transition:opacity .3s,max-height .3s}
@container (min-width:150px) and (min-height:120px){.ffr43-st{max-height:20px;opacity:1;padding:2px 8px}}
.ffr43-spec{position:absolute;inset:0;background:radial-gradient(160px 70px at var(--mx,50%) var(--my,40%),#fff6e366,#fff0 70%);mix-blend-mode:soft-light;pointer-events:none;opacity:0;transition:opacity .3s}
.ffr43-hw:hover .ffr43-spec{opacity:1}
.ffr43-hw::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,#0000 35%,#fff3 48%,#0000 60%);transform:translateX(-110%);pointer-events:none}
.ffr43-hw:hover::after{transform:translateX(110%);transition:transform 1.1s ease}
.ffr43-tg{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;gap:3px;padding:3px;background:#cfc8bb}
.ffr43-tg i{border-radius:2px;background:linear-gradient(150deg,#ffffff8c 0 10%,#fff0 28%),radial-gradient(130% 120% at 30% 20%,var(--c),color-mix(in srgb,var(--c),#000 22%));box-shadow:inset 1px 1px #ffffff99,inset -1px -1px #0002;cursor:pointer}
.ffr43-sv{background:#2a2f33}
.ffr43-sheet{position:absolute;inset:0;background:conic-gradient(from 45deg at 50% 50%,#3b5560 0 25%,#e7e1d4 0 50%,#3b5560 0 75%,#e7e1d4 0) 0 0/22px 22px,#e7e1d4;background-blend-mode:normal;clip-path:inset(0 calc(100% - var(--u,32%)) 0 0);transition:clip-path .9s cubic-bezier(.3,1,.3,1);box-shadow:inset 0 0 0 999px #0000}
.ffr43-sheet::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(45deg,#0000 0 10px,#ffffff14 10px 11px),linear-gradient(90deg,#0000 60%,#0003)}
.ffr43-roll{position:absolute;top:-4px;bottom:-4px;left:calc(var(--u,32%) - 9px);width:18px;border-radius:9px;background:linear-gradient(90deg,#9fb2b9,#e7e1d4 40%,#5d747c);box-shadow:4px 0 10px #0009;transition:left .9s cubic-bezier(.3,1,.3,1)}
.ffr43-sv:is(:hover,:focus-visible){--u:100%}
.ffr43-sv:is(:hover,:focus-visible) .ffr43-roll{left:calc(100% - 4px)}
@media (prefers-reduced-motion:reduce){.ffr43-g,.ffr43-sheet,.ffr43-roll{transition:none}.ffr43-hw:hover::after{transition:none}}

/* 44 LiDAR room scan (flooring) */
.ffr44,#demo-root .stage.fresh-stage .ffr44{background:#05080b}
.ffr44{height:340px;display:flex;flex-direction:column;color:#d8f3ff}
.ffr44-vp{position:relative;flex:1;min-height:0;overflow:hidden;touch-action:none}
.ffr44-cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.ffr44-vp::after{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(#0000 0 2px,#00000022 2px 3px),radial-gradient(120% 90% at 50% 50%,#0000 60%,#000a);mix-blend-mode:multiply}
.ffr44-rec{position:absolute;left:10px;top:10px;display:flex;align-items:center;gap:6px;padding:3px 8px;border-radius:99px;background:#0009;border:1px solid #5ee6ff44;font:800 9.5px ui-monospace,monospace;letter-spacing:.16em;color:#9eeeff;z-index:2}
.ffr44-rec i{width:6px;height:6px;border-radius:50%;background:#4b6b75}
.ffr44[data-st="scan"] .ffr44-rec i{background:#ff4d5e;box-shadow:0 0 8px #ff4d5e;animation:ffr44blink .8s steps(2) infinite}
@keyframes ffr44blink{50%{opacity:.2}}
.ffr44-hint{position:absolute;right:10px;top:10px;padding:3px 8px;border-radius:99px;background:#0009;font:700 9.5px system-ui;color:#ffd38a;opacity:0;transition:opacity .4s;z-index:2}
.ffr44[data-st="done"] .ffr44-hint{opacity:1}
.ffr44-hud{display:flex;align-items:center;gap:10px;padding:10px 12px 6px;border-top:1px solid #5ee6ff22;background:linear-gradient(#0b141a,#070b0f)}
.ffr44-read{flex:1;min-width:0;display:flex;flex-direction:column}
.ffr44-sq{font:800 22px/1.05 ui-monospace,monospace;color:#eafcff;letter-spacing:-.02em;font-variant-numeric:tabular-nums;text-shadow:0 0 14px #5ee6ff55}
.ffr44-dim{font:11px system-ui;color:#7fb3c4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ffr44-go{padding:9px 13px;border-radius:10px;border:1px solid #5ee6ff88;background:linear-gradient(#123744,#0b2129);color:#bff6ff;font:800 12px system-ui;cursor:pointer;box-shadow:0 0 16px #5ee6ff33;white-space:nowrap}
.ffr44-go:disabled{opacity:.5;cursor:wait}
.ffr44-mats{display:flex;gap:4px;padding:0 12px 10px;background:#070b0f}
.ffr44-mats button{flex:1;padding:6px 2px;border-radius:8px;border:1px solid #ffffff1a;background:#0e171d;color:#8fb5c3;font:700 10.5px system-ui;cursor:pointer}
.ffr44-mats button[aria-checked="true"]{border-color:#5ee6ff;color:#e6fbff;background:#123039}
.ffr44[data-st="idle"] .ffr44-mats button,.ffr44[data-st="scan"] .ffr44-mats button{opacity:.4;pointer-events:none}
@media (prefers-reduced-motion:reduce){.ffr44[data-st="scan"] .ffr44-rec i{animation:none}}

/* 45 Stain-mix grain gradient hero (flooring) */
@property --ffr45-c1{syntax:'<color>';inherits:true;initial-value:#c47a32}
@property --ffr45-c2{syntax:'<color>';inherits:true;initial-value:#7a3f18}
@property --ffr45-c3{syntax:'<color>';inherits:true;initial-value:#e8b56a}
@property --ffr45-c4{syntax:'<color>';inherits:true;initial-value:#3b1d0c}
@property --ffr45-st{syntax:'<color>';inherits:true;initial-value:#c98a4a}
.ffr45,#demo-root .stage.fresh-stage .ffr45{background:var(--ffr45-c4)}
.ffr45{height:340px;position:relative;overflow:hidden;isolation:isolate;cursor:crosshair;transition:--ffr45-c1 1.4s ease,--ffr45-c2 1.6s ease,--ffr45-c3 1.2s ease,--ffr45-c4 1.8s ease,--ffr45-st 1.2s ease}
.ffr45[data-s="1"]{--ffr45-c1:#7c4a26;--ffr45-c2:#4a2814;--ffr45-c3:#b07a4a;--ffr45-c4:#24130a;--ffr45-st:#7a4a2a}
.ffr45[data-s="2"]{--ffr45-c1:#4a2e1e;--ffr45-c2:#2a1810;--ffr45-c3:#7a5238;--ffr45-c4:#120a06;--ffr45-st:#3e2618}
.ffr45[data-s="3"]{--ffr45-c1:#e6ddd0;--ffr45-c2:#b9ab98;--ffr45-c3:#fff6ea;--ffr45-c4:#8a7d6c;--ffr45-st:#efe6da}
.ffr45[data-s="4"]{--ffr45-c1:#2b2420;--ffr45-c2:#14100e;--ffr45-c3:#4a3c32;--ffr45-c4:#070605;--ffr45-st:#2a221d}
.ffr45-mesh{position:absolute;inset:-20%;filter:blur(38px) saturate(1.15)}
.ffr45-mesh i{position:absolute;width:62%;height:62%;border-radius:50%;translate:var(--x,0) var(--y,0);will-change:translate}
.ffr45-mesh .b1{left:-6%;top:-4%;background:var(--ffr45-c1);animation:ffr45a 13s ease-in-out infinite}
.ffr45-mesh .b2{right:-8%;top:10%;background:var(--ffr45-c2);animation:ffr45a 17s ease-in-out infinite reverse}
.ffr45-mesh .b3{left:20%;bottom:-10%;background:var(--ffr45-c3);animation:ffr45a 11s ease-in-out -4s infinite}
.ffr45-mesh .b4{right:6%;bottom:-6%;width:46%;height:46%;background:color-mix(in oklch,var(--ffr45-c1),var(--ffr45-c3));animation:ffr45a 19s ease-in-out -7s infinite reverse}
@keyframes ffr45a{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(12%,8%) scale(1.15)}66%{transform:translate(-8%,12%) scale(.9)}}
.ffr45-grain{position:absolute;inset:0;opacity:.32;mix-blend-mode:overlay;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E")}
.ffr45-in{position:relative;height:100%;background:linear-gradient(#0000 25%,#0000004d);display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:18px 16px 16px;color:color-mix(in oklch,var(--ffr45-c3),#fff 70%)}
.ffr45[data-s="3"] .ffr45-in{color:#2b2119;background:linear-gradient(#0000 25%,#ffffff40)}
.ffr45-k{margin:0;font:800 10px ui-monospace,monospace;letter-spacing:.24em;text-transform:uppercase;opacity:.85}
.ffr45-h{margin:0!important;font:900 clamp(40px,15cqi,58px)/.92 Georgia,'Times New Roman',serif!important;letter-spacing:-.035em;text-wrap:balance;color:transparent;background:var(--wd) 0 0/340px auto,color-mix(in oklch,var(--ffr45-st),#fff 30%);background-blend-mode:multiply;-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 -1px 0 #ffffff59) drop-shadow(0 2px 1px #000000b3) drop-shadow(0 12px 22px #00000080)}
.ffr45-s{margin:0;font:12.5px/1.45 system-ui;opacity:.85;text-wrap:pretty;max-width:34ch}
.ffr45-chips{display:flex;gap:4px;flex-wrap:wrap;margin-top:4px}
.ffr45-chips button{display:flex;align-items:center;gap:5px;padding:4px 8px 4px 4px;border-radius:99px;border:1px solid #ffffff38;background:#0000002e;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:inherit;font:700 10.5px system-ui;cursor:pointer;transition:transform .25s cubic-bezier(.3,1.7,.5,1),background .2s}
.ffr45-chips button::before{content:'';width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff6,#0000 50%),var(--c);box-shadow:inset 0 0 0 1px #0004}
.ffr45-chips button[aria-checked="true"]{background:#ffffff3d;border-color:#fff9;transform:translateY(-2px)}
.ffr45[data-s="3"] .ffr45-chips button{border-color:#0000002e;background:#ffffff59}
.ffr45-drop{position:absolute;z-index:1;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50% 50% 50% 0;rotate:-45deg;background:var(--c);box-shadow:inset -2px 2px 4px #fff5;pointer-events:none}
.ffr45-ring{position:absolute;z-index:1;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;border:2px solid var(--c);pointer-events:none}
.ffr45-tr{position:absolute;z-index:0;width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:50%;background:radial-gradient(closest-side,var(--c),#0000);opacity:.55;filter:blur(8px);pointer-events:none;mix-blend-mode:soft-light}
@media (prefers-reduced-motion:reduce){.ffr45-mesh i{animation:none}}

/* 46 Bento door configurator (cabinets) */
.kf46,#demo-root .stage.fresh-stage .kf46{background:radial-gradient(120% 80% at 20% 0%,#2a2119,#100d0b 70%)}
.kf46{height:340px;padding:8px;box-sizing:border-box;--kf46-c:#eeeae2;--kf46-tex:none;--kf46-a:0}
.kf46-g{height:100%;display:grid;gap:6px;grid-template-columns:1fr 1fr minmax(0,.95fr);grid-template-rows:1fr 1fr .92fr;grid-template-areas:"pv pv st" "pv pv co" "pu sc pr"}
.kf46-t{position:relative;min-width:0;min-height:0;margin:0;padding:8px;border-radius:14px;border:1px solid #ffffff17;background:linear-gradient(160deg,#ffffff12,#ffffff05 60%),#1b1612;box-shadow:inset 0 1px #ffffff1c,0 10px 22px #0007;color:#f3e9dc;text-align:left;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;font:inherit;transition:transform .35s cubic-bezier(.3,1.6,.5,1),border-color .25s}
button.kf46-t{cursor:pointer}
button.kf46-t:hover{border-color:#ffd9a655}
button.kf46-t:active{transform:scale(.96) rotate(-.6deg)}
.kf46-pv{grid-area:pv;padding:0;perspective:620px;background:radial-gradient(90% 70% at 50% 30%,#3a2e24,#16110d);align-items:center;justify-content:center;touch-action:none}
.kf46-st{grid-area:st}.kf46-co{grid-area:co}.kf46-pu{grid-area:pu}.kf46-sc{grid-area:sc}.kf46-pr{grid-area:pr}
.kf46-k{font:700 9px ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:#c9b49b}
.kf46-v{font:800 11.5px/1.1 system-ui;color:#fff6ea;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kf46-box,.kf46-door{position:absolute;left:50%;top:50%;height:78%;aspect-ratio:.62;translate:-50% -52%}
.kf46-box{border-radius:3px;background:linear-gradient(90deg,#0c0907,#2a2018 12%,#2a2018 88%,#0c0907);box-shadow:inset 0 0 0 5px #3d3026,inset 0 0 26px #000c,0 18px 30px #000a}
.kf46-sh{position:absolute;left:5px;right:5px;height:5px;background:linear-gradient(#e9dccb,#9d8c79);box-shadow:0 5px 8px #0009}
.kf46-sh:nth-child(1){top:36%}.kf46-sh:nth-child(2){top:68%}
.kf46-mug{position:absolute;left:24%;top:calc(36% - 22px);width:20px;height:22px;border-radius:2px 2px 6px 6px;background:linear-gradient(90deg,#b54d32,#e7795a 40%,#8a3522);box-shadow:inset -3px 0 #0002}
.kf46-mug::after{content:'';position:absolute;right:-7px;top:5px;width:7px;height:10px;border:3px solid #c95d40;border-left:0;border-radius:0 6px 6px 0}
.kf46-door{transform-style:preserve-3d;transform-origin:0 50%;transform:rotateY(calc(var(--kf46-a)*-1deg));cursor:grab;outline-offset:4px}
.kf46-door:active{cursor:grabbing}
.kf46-face,.kf46-back{position:absolute;inset:0;border-radius:3px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.kf46-face{background:var(--kf46-tex) center/cover,var(--kf46-c);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--kf46-c),#fff 35%),inset 0 -1px 0 2px #0000001f,0 calc(4px + var(--kf46-a)*.12px) calc(14px + var(--kf46-a)*.2px) #000a;overflow:hidden}
.kf46-back{transform:rotateY(180deg);background:linear-gradient(90deg,#d9d2c6,#f1ece4);box-shadow:inset 0 0 0 1.5px #fff}
.kf46-back b{position:absolute;left:0;right:0;bottom:8px;text-align:center;font:800 8px ui-monospace,monospace;color:#6b5f52;letter-spacing:.08em}
.kf46-cup{position:absolute;right:9%;width:26%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 40% 35%,#9b9890,#55534d 60%,#3a3934);box-shadow:inset 0 2px 3px #0008,0 0 0 2px #c8c0b2}
.kf46-cup::after{content:'';position:absolute;left:-150%;top:38%;width:150%;height:24%;border-radius:3px;background:linear-gradient(#c7c7c7,#7d7d7d)}
.kf46-cup:nth-child(1){top:10%}.kf46-cup:nth-child(2){bottom:16%}
.kf46-pan{position:absolute;inset:15% 17%;border-radius:1px;opacity:0;transition:opacity .35s}
.kf46[data-kf46-s="0"] .kf46-pan{opacity:1;background:var(--kf46-tex) center/cover,var(--kf46-c);box-shadow:inset 3px 3px 5px #0000004d,inset -2px -2px 3px #ffffff40,0 0 0 2px color-mix(in srgb,var(--kf46-c),#000 14%),0 0 0 3.5px color-mix(in srgb,var(--kf46-c),#fff 30%)}
.kf46[data-kf46-s="2"] .kf46-pan{opacity:1;inset:13% 13%;background:repeating-linear-gradient(90deg,#0000 0 8px,#00000038 8px 9.5px,#ffffff30 9.5px 10.5px),var(--kf46-tex) center/cover,var(--kf46-c);box-shadow:inset 2px 2px 4px #0004,0 0 0 2px color-mix(in srgb,var(--kf46-c),#000 12%)}
.kf46-pull{position:absolute;transition:all .45s cubic-bezier(.3,1.5,.5,1);background:linear-gradient(90deg,#4b4f55,#e6e8ea 45%,#8b9096 60%,#3d4045);box-shadow:2px 3px 4px #0007}
.kf46[data-kf46-p="0"] .kf46-pull{right:9%;top:38%;width:5px;height:24%;border-radius:3px}
.kf46[data-kf46-p="1"] .kf46-pull{right:10%;top:47%;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#b9a27a 35%,#6b5532)}
.kf46[data-kf46-p="2"] .kf46-pull{right:8%;top:-1px;width:28%;height:6px;border-radius:0 0 3px 3px;background:linear-gradient(#1c1d20,#5d6066)}
.kf46-spec{position:absolute;inset:0;background:radial-gradient(90px 140px at var(--kf46-mx,30%) var(--kf46-my,20%),#ffffff59,#fff0 70%),linear-gradient(115deg,#fff0 30%,#ffffff26 45%,#fff0 55%);mix-blend-mode:soft-light;pointer-events:none}
.kf46-thunk{position:absolute;left:58%;top:16%;padding:2px 7px;border-radius:5px;background:#ff5a3c;color:#fff;font:900 11px system-ui;letter-spacing:.08em;rotate:-12deg;opacity:0;pointer-events:none}
.kf46-hint{position:absolute;left:0;right:0;bottom:6px;margin:0;text-align:center;font:700 9.5px ui-monospace,monospace;color:#c9b49b;letter-spacing:.06em;pointer-events:none;transition:opacity .4s}
.kf46-pv.kf46-used .kf46-hint{opacity:0}
.kf46-ico{display:flex;gap:5px;align-items:flex-end;justify-content:center;flex:1;padding:4px 0}
.kf46-ico i{width:22%;max-width:20px;aspect-ratio:.62;border-radius:2px;background:#e9dfd2;opacity:.35;transition:opacity .3s,transform .4s cubic-bezier(.3,1.7,.5,1)}
.kf46-ico i[data-i="0"]{box-shadow:inset 0 0 0 3px #e9dfd2,inset 0 0 0 4px #9c8a75}
.kf46-ico i[data-i="2"]{background:repeating-linear-gradient(90deg,#e9dfd2 0 3px,#9c8a75 3px 4px)}
.kf46[data-kf46-s="0"] .kf46-ico i[data-i="0"],.kf46[data-kf46-s="1"] .kf46-ico i[data-i="1"],.kf46[data-kf46-s="2"] .kf46-ico i[data-i="2"]{opacity:1;transform:translateY(-4px)}
.kf46-fan{position:relative;flex:1;touch-action:none;cursor:ew-resize}
.kf46-fan button{position:absolute;left:50%;bottom:12px;width:14px;height:30px;margin-left:-7px;padding:0;border:0;border-radius:3px 3px 4px 4px;background:var(--kf46-tex) center/cover,var(--kf46-c);box-shadow:0 0 0 1px #0005,0 3px 6px #0008;transform-origin:50% 150%;transform:rotate(calc((var(--kf46-i) - 2.5)*13deg)) translateY(var(--kf46-ty,0));transition:transform .35s cubic-bezier(.3,1.6,.5,1);cursor:pointer}
.kf46-fan button[aria-checked="true"]{--kf46-ty:-9px;box-shadow:0 0 0 1.5px #ffd9a6,0 6px 10px #000a;z-index:2}
.kf46-pi{flex:1;display:grid;place-items:center}
.kf46-pi i{display:block;transition:all .45s cubic-bezier(.3,1.5,.5,1);background:linear-gradient(90deg,#4b4f55,#e6e8ea 45%,#8b9096 60%,#3d4045)}
.kf46[data-kf46-p="0"] .kf46-pi i{width:6px;height:34px;border-radius:3px}
.kf46[data-kf46-p="1"] .kf46-pi i{width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#b9a27a 35%,#6b5532)}
.kf46[data-kf46-p="2"] .kf46-pi i{width:36px;height:8px;border-radius:0 0 4px 4px;background:linear-gradient(#1c1d20,#5d6066)}
.kf46-sw{flex:1;display:grid;place-items:center}
.kf46-sw i{position:relative;width:38px;height:20px;border-radius:99px;background:#3a2f27;box-shadow:inset 0 2px 4px #0008;transition:background .3s}
.kf46-sw i::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:linear-gradient(#fff,#d8cfc4);box-shadow:0 2px 4px #0008;transition:translate .5s cubic-bezier(.2,.9,.1,1)}
.kf46-sc[aria-pressed="true"] .kf46-sw i{background:#6aa86a}
.kf46-sc[aria-pressed="true"] .kf46-sw i::after{translate:18px 0}
.kf46-pr{background:linear-gradient(160deg,#ffd9a61f,#ffffff05 60%),#1d1712}
.kf46-per{color:#ffd9a6}
.kf46-tot{display:flex;height:22px;overflow:hidden;font:900 19px/22px ui-monospace,monospace;color:#fff;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.kf46-tot>i{font-style:normal}
.kf46-dg{display:inline-flex;flex-direction:column;transition:transform .7s cubic-bezier(.2,1.2,.3,1)}
.kf46-dg i{font-style:normal;height:22px}
.kf46-qty{display:flex;align-items:center;justify-content:space-between;gap:2px;font:800 11px ui-monospace,monospace}
.kf46-qty button{width:22px;height:22px;padding:0;border-radius:7px;border:1px solid #ffffff26;background:#ffffff10;color:#fff;font:800 13px system-ui;cursor:pointer}
.kf46-qty button:active{background:#ffd9a640}
@media (prefers-reduced-motion:reduce){.kf46-t,.kf46-pull,.kf46-pi i,.kf46-fan button,.kf46-dg,.kf46-ico i,.kf46-sw i::after{transition:none}}

/* 47 Reeded glass door, live reflection (cabinets) */
@property --kf47-lit{syntax:'<number>';inherits:true;initial-value:0}
.kf47,#demo-root .stage.fresh-stage .kf47{background:#d9d2c6}
.kf47{height:340px;position:relative;overflow:hidden;isolation:isolate;--kf47-px:0px;--kf47-py:0px;--kf47-lit:0;transition:--kf47-lit .9s cubic-bezier(.5,0,.2,1)}
.kf47.kf47-on{--kf47-lit:1}
.kf47-defs{position:absolute;width:0;height:0;overflow:hidden}
.kf47-wall{position:absolute;inset:0;background:linear-gradient(#0000 0 74%,#3a332c 74% 76.5%,#f3efe8 76.5% 78%,#bfb6a8 78% 100%),repeating-linear-gradient(0deg,#cfc7ba 0 1px,#0000 1px 17px),repeating-linear-gradient(90deg,#cfc7ba 0 1px,#0000 1px 34px),linear-gradient(#ebe6dd,#ddd5c8)}
.kf47-wall::after{content:'';position:absolute;inset:0;background:radial-gradient(60% 30% at 50% 74%,rgb(255 196 120/calc(var(--kf47-lit)*.55)),#0000 70%);transition:opacity .6s}
.kf47-cab{position:absolute;left:50%;top:10px;width:min(250px,86%);height:216px;translate:-50% 0;display:grid;grid-template-columns:1fr 1fr;gap:3px;perspective:800px;filter:drop-shadow(0 14px 14px #0005)}
.kf47-int,.kf47-ghost{position:absolute;left:0;top:0;overflow:hidden}
.kf47-int{inset:0;border-radius:2px}
.kf47-back{position:absolute;inset:0;background:linear-gradient(90deg,#00000059,#0000 18% 82%,#00000059),linear-gradient(#3b2f26,#5a4738);}
.kf47-back::after{content:'';position:absolute;inset:0;background:radial-gradient(70% 40% at 50% 0%,rgb(255 214 150/calc(var(--kf47-lit)*.9)),#0000 75%),radial-gradient(70% 40% at 50% 52%,rgb(255 214 150/calc(var(--kf47-lit)*.7)),#0000 75%);transition:opacity .5s}
.kf47-shf{position:absolute;left:0;right:0;height:6px;background:linear-gradient(#f4ecdf,#a8987f);box-shadow:0 6px 8px #0007}
.kf47-puck{position:absolute;top:2px;width:14px;height:4px;border-radius:0 0 7px 7px;background:#ddd;box-shadow:0 0 calc(var(--kf47-lit)*14px) calc(var(--kf47-lit)*4px) #ffd28a}
.kf47-it{position:absolute;translate:calc(var(--kf47-px)*var(--kf47-z,1)) calc(var(--kf47-py)*var(--kf47-z,1));transition:translate .25s ease-out}
.kf47-plate{width:30%;height:9px;border-radius:50%;background:radial-gradient(60% 50% at 50% 40%,#fff,#d8d4cc);box-shadow:0 -6px 0 -1px #f2efe9,0 -12px 0 -1px #faf8f4,0 -18px 0 -1px #f2efe9,0 2px 3px #0006}
.kf47-cup{width:13%;height:24px;border-radius:3px 3px 8px 8px;background:linear-gradient(90deg,#2e5d7a,#5d9cc0 35%,#20455c);box-shadow:inset 0 2px #ffffff40}
.kf47-gl{width:9%;height:44px;border-radius:2px 2px 4px 4px;background:linear-gradient(90deg,#ffffff40,#ffffff10 30% 70%,#ffffff59);box-shadow:inset 0 0 0 1px #ffffff73,inset 0 -8px #ffffff30}
.kf47-bowl{width:26%;height:20px;border-radius:2px 2px 40px 40px/2px 2px 24px 24px;background:linear-gradient(#e9dfcf,#b9a88d);box-shadow:inset 0 3px #fff6}
.kf47-vase{width:12%;height:48px;border-radius:40% 40% 30% 30%/30% 30% 20% 20%;background:radial-gradient(60% 50% at 35% 40%,#9cd2a4,#3c7a4e 70%);box-shadow:inset -3px 0 6px #0004}
.kf47-jar{width:15%;height:34px;border-radius:5px;background:linear-gradient(90deg,#ffffff38,#ffffff12 40%,#ffffff4d),linear-gradient(#0000 40%,#c9884a 40%);box-shadow:inset 0 0 0 1px #ffffff66}
.kf47-jar::before{content:'';position:absolute;left:-2px;right:-2px;top:-5px;height:6px;border-radius:2px;background:#7a5a3a}
.kf47-d{position:relative;border-radius:2px;background:linear-gradient(#f4f0e9,#e6e0d5);box-shadow:inset 0 0 0 1px #ffffffaa,inset 0 -2px 0 1px #00000014,0 1px 2px #0003}
.kf47-solid::before{content:'';position:absolute;inset:16% 18%;box-shadow:inset 2px 2px 4px #0003,inset -1px -1px 2px #fff,0 0 0 2px #e2dbcf}
.kf47-gd{transform-origin:100% 50%;transition:transform 1s cubic-bezier(.25,1.25,.4,1);transform-style:preserve-3d}
.kf47.kf47-op .kf47-gd{transform:rotateY(104deg)}
.kf47-pane{position:absolute;inset:15% 16%;overflow:hidden;background:#3b2f26;box-shadow:inset 0 0 0 1px #0004,0 0 0 2px #e2dbcf,inset 0 0 12px #0006}
.kf47-ghost{transition:opacity .6s}
.kf47[data-kf47-g="reed"] .kf47-ghost{filter:url(#kf47-reed)}
.kf47[data-kf47-g="frost"] .kf47-ghost{filter:url(#kf47-frost) brightness(1.15)}
.kf47[data-kf47-g="seed"] .kf47-ghost{filter:url(#kf47-seed)}
.kf47-tex{position:absolute;inset:0;pointer-events:none;transition:opacity .4s}
.kf47[data-kf47-g="reed"] .kf47-tex{background:repeating-linear-gradient(90deg,#ffffff2e 0 1px,#0000 1px 4px,#00000024 4px 5px,#ffffff14 5px 7px)}
.kf47[data-kf47-g="frost"] .kf47-tex{background:linear-gradient(#ffffff4d,#ffffff26)}
.kf47[data-kf47-g="seed"] .kf47-tex{background:radial-gradient(circle at 20% 30%,#fff9 0 1px,#0000 2px),radial-gradient(circle at 70% 20%,#fff8 0 1.5px,#0000 2.5px),radial-gradient(circle at 45% 70%,#fff8 0 1px,#0000 2px),radial-gradient(circle at 85% 80%,#fff9 0 1.5px,#0000 2.5px),radial-gradient(circle at 30% 85%,#fff7 0 1px,#0000 2px),linear-gradient(#cfe8d81a,#cfe8d826);background-size:38px 46px,51px 39px,44px 57px,63px 49px,29px 33px,auto}
.kf47-refl{position:absolute;inset:-30%;pointer-events:none;mix-blend-mode:screen;background:linear-gradient(105deg,#0000 30%,#ffffff42 33%,#ffffff1a 38%,#0000 40%,#0000 46%,#ffffff2e 48%,#0000 52%),linear-gradient(180deg,#bfe0ff1f,#0000 60%);translate:calc(var(--kf47-px)*-3) calc(var(--kf47-py)*-1.5);transition:translate .3s ease-out}
.kf47-pull{position:absolute;bottom:9%;width:5px;height:22%;border-radius:3px;padding:0;border:0;background:linear-gradient(90deg,#3d3328,#c7a978 45%,#7b6040);box-shadow:2px 2px 3px #0006}
.kf47-solid .kf47-pull{right:8%}
.kf47-open{left:8%;cursor:pointer}
.kf47-open::after{content:'';position:absolute;inset:-10px -12px}
.kf47-ctl{position:absolute;left:8px;right:8px;bottom:8px;display:flex;gap:6px;align-items:center}
.kf47-glass{flex:1;min-width:0;display:flex;padding:3px;border-radius:12px;background:#ffffff8c;-webkit-backdrop-filter:blur(10px) saturate(1.4);backdrop-filter:blur(10px) saturate(1.4);box-shadow:inset 0 1px #fff,0 6px 16px #0003}
.kf47-glass button{flex:1;min-width:0;padding:7px 2px;border:0;border-radius:9px;background:none;color:#4a3f33;font:700 10.5px system-ui;cursor:pointer;transition:background .25s,color .25s}
.kf47-glass button[aria-checked="true"]{background:#2b241d;color:#fff4e3;box-shadow:0 3px 8px #0004}
.kf47-lt{display:flex;align-items:center;gap:5px;padding:9px 10px;border-radius:12px;border:0;background:#2b241d;color:#f4e6cf;font:800 10.5px system-ui;cursor:pointer;box-shadow:0 6px 16px #0003}
.kf47-lt i{width:8px;height:8px;border-radius:50%;background:#6b5c4a;transition:background .3s,box-shadow .3s}
.kf47-lt[aria-pressed="true"] i{background:#ffd28a;box-shadow:0 0 10px #ffc060}
@media (prefers-reduced-motion:reduce){.kf47-gd,.kf47-it,.kf47-refl,.kf47-ghost{transition:none}}

/* 48 Holo laminate sample ring (cabinets) */
.kf48,#demo-root .stage.fresh-stage .kf48{background:radial-gradient(80% 70% at 70% 30%,#25223a,#0b0a12 75%)}
.kf48{height:340px;position:relative;overflow:hidden;isolation:isolate;touch-action:pan-y;cursor:ew-resize;--kf48-mx:.5;--kf48-my:.5}
.kf48-glow{position:absolute;inset:0;background:conic-gradient(from calc(var(--kf48-mx)*360deg) at calc(var(--kf48-mx)*100%) calc(var(--kf48-my)*100%),#ff6ec722,#6ee7ff22,#b6ff6e22,#ffd36e22,#ff6ec722);filter:blur(30px);pointer-events:none}
.kf48-deck{position:absolute;inset:0;perspective:900px}
.kf48-pin{position:absolute;left:50%;bottom:40px;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:radial-gradient(circle,#0000 0 5px,#3a3d44 5.5px,#f2f4f7 7px,#8d939c 9px,#2b2e33 11px);box-shadow:0 3px 6px #000a;z-index:20;pointer-events:none;translate:0 50%}
.kf48-chip{position:absolute;left:50%;bottom:40px;width:clamp(84px,25%,104px);aspect-ratio:.64;margin:0;padding:0;border:0;background:none;transform-origin:50% calc(100% - 14px);translate:-50% 14px;transform:rotate(var(--kf48-r,0deg));transform-style:preserve-3d;transition:transform .55s cubic-bezier(.3,1.35,.45,1),translate .55s cubic-bezier(.3,1.2,.45,1);cursor:pointer;color:inherit;font:inherit}
.kf48-chip:focus-visible{outline:2px solid #fff;outline-offset:3px}
.kf48-f,.kf48-b{position:absolute;inset:0;border-radius:9px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 0 0 1px #ffffff26,0 10px 22px #000b}
.kf48-f{background:var(--kf48-tex,none) center/cover,var(--kf48-c)}
.kf48-f::before{content:'';position:absolute;left:calc(50% - 7px);bottom:7px;width:14px;height:14px;border-radius:50%;background:#0b0a12;box-shadow:inset 0 0 0 2px #ffffff40}
.kf48-holo{position:absolute;inset:0;background:repeating-linear-gradient(calc(110deg + var(--kf48-a,0)*1deg),#ff4fa3 0%,#ffd84f 7%,#4fffb0 14%,#4fc3ff 21%,#b04fff 28%,#ff4fa3 35%);background-size:300% 300%;background-position:calc(var(--kf48-h,50)*1%) 50%;mix-blend-mode:color-dodge;opacity:calc(var(--kf48-k,.3)*.75);-webkit-mask:radial-gradient(70% 55% at calc(var(--kf48-h,50)*1%) calc(var(--kf48-my)*100%),#000,#0006 60%,#0000);mask:radial-gradient(70% 55% at calc(var(--kf48-h,50)*1%) calc(var(--kf48-my)*100%),#000,#0006 60%,#0000)}
.kf48-spark{position:absolute;inset:0;opacity:calc(var(--kf48-k,.3) - .2);background:radial-gradient(circle at 20% 30%,#fff 0 .8px,#0000 1.4px) 0 0/17px 19px,radial-gradient(circle at 60% 70%,#fff 0 .7px,#0000 1.3px) 0 0/23px 13px;mix-blend-mode:overlay;-webkit-mask:linear-gradient(calc(var(--kf48-h,50)*3.6deg),#0000 30%,#000 50%,#0000 70%);mask:linear-gradient(calc(var(--kf48-h,50)*3.6deg),#0000 30%,#000 50%,#0000 70%)}
.kf48-tag{position:absolute;left:6px;right:6px;bottom:26px;display:flex;flex-direction:column;align-items:flex-start;padding:4px 6px;border-radius:6px;background:#0b0a12c4;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);text-align:left}
.kf48-tag b{font:800 9.5px/1.15 system-ui;color:#fff}
.kf48-tag small{font:600 8px ui-monospace,monospace;color:#c9c3e6}
.kf48-b{transform:rotateY(180deg);background:linear-gradient(160deg,#f6f3ee,#dcd6cc);color:#2b2620;padding:9px;display:flex;flex-direction:column;gap:3px;text-align:left}
.kf48-b b{font:900 10.5px/1.1 system-ui;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kf48-b dl{margin:2px 0 0;display:grid;grid-template-columns:auto 1fr;gap:1px 6px;font:600 8px/1.3 system-ui}
.kf48-b dt{color:#8a7f72}.kf48-b dd{margin:0;font-weight:800;white-space:nowrap}
.kf48-b span{margin-top:auto;padding:3px 6px;border-radius:5px;background:#2b2620;color:#ffe6b8;font:800 9px system-ui;text-align:center}
.kf48-edge{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--kf48-c),color-mix(in srgb,var(--kf48-c),#fff 30%))}
.kf48-in{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.3,1.3,.45,1)}
.kf48-flip .kf48-in{transform:rotateY(180deg)}
.kf48-chip{transition:transform .55s cubic-bezier(.3,1.35,.45,1),opacity .4s,filter .4s}
.kf48.kf48-has .kf48-chip:not(.kf48-sel){opacity:.45;filter:saturate(.5) blur(1px)}
.kf48-chip.kf48-sel{z-index:30}
.kf48-chip.kf48-flip .kf48-f{pointer-events:none}
.kf48-hint{position:absolute;left:12px;top:46px;margin:0;font:700 9.5px ui-monospace,monospace;color:#a59fc7;letter-spacing:.06em;transition:opacity .5s;pointer-events:none}
.kf48.kf48-used .kf48-hint{opacity:0}
.kf48-ttl{position:absolute;left:12px;top:10px;margin:0;display:flex;flex-direction:column;align-items:flex-start;pointer-events:none}
.kf48-ttl b{font:900 15px/1 system-ui;letter-spacing:-.02em;background:linear-gradient(90deg,#ffb1d9,#b1f0ff,#d9ffb1);-webkit-background-clip:text;background-clip:text;color:transparent}
.kf48-ttl span{font:600 9.5px system-ui;color:#8f89b3}
@media (prefers-reduced-motion:reduce){.kf48-chip,.kf48-in{transition:none}}

/* 49 Sketch-to-render cabinet diffusion (cabinets) */
.kf49,#demo-root .stage.fresh-stage .kf49{background:#0e0f14}
.kf49{height:340px;display:flex;flex-direction:column}
.kf49-vp{position:relative;flex:1;min-height:0;overflow:hidden;touch-action:none;cursor:ew-resize}
.kf49-cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.kf49-prompt{position:absolute;left:10px;right:10px;top:9px;margin:0;display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:12px;background:#11131bcc;-webkit-backdrop-filter:blur(10px) saturate(1.5);backdrop-filter:blur(10px) saturate(1.5);box-shadow:inset 0 0 0 1px #ffffff1f,0 8px 20px #0006;font:600 10.5px/1.2 ui-monospace,monospace;color:#d9dcf0;white-space:nowrap;overflow:hidden}
.kf49-prompt i{font-style:normal;color:#b9a1ff;text-shadow:0 0 8px #9b7bff}
.kf49-pt{overflow:hidden;text-overflow:ellipsis}
.kf49-car{width:6px;height:12px;flex:none;background:#b9a1ff;animation:kf49-blink 1s steps(2) infinite}
@keyframes kf49-blink{50%{opacity:0}}
.kf49.kf49-busy .kf49-prompt{box-shadow:inset 0 0 0 1px #9b7bff88,0 0 22px #7b5bff55,0 8px 20px #0006}
.kf49-tag{position:absolute;bottom:8px;padding:2px 7px;border-radius:99px;background:#0009;font:800 8.5px ui-monospace,monospace;letter-spacing:.16em;color:#fff;opacity:0;transition:opacity .4s;pointer-events:none}
.kf49-l{left:8px}.kf49-r{right:8px}
.kf49.kf49-done .kf49-tag{opacity:1}
.kf49-bar{display:flex;gap:6px;align-items:center;padding:8px;background:linear-gradient(#14161f,#0c0d12);border-top:1px solid #ffffff12}
.kf49-fin{flex:1;min-width:0;display:flex;gap:4px}
.kf49-fin button{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:4px;padding:7px 3px;border-radius:9px;border:1px solid #ffffff1c;background:#ffffff08;color:#b8bbd0;font:700 10px system-ui;cursor:pointer;white-space:nowrap;overflow:hidden;transition:border-color .25s,background .25s,color .25s}
.kf49-fin button::before{content:'';flex:none;width:10px;height:10px;border-radius:3px;background:var(--kf49-c);box-shadow:inset 0 0 0 1px #0004}
.kf49-fin button[aria-checked="true"]{border-color:#9b7bff;background:#9b7bff1f;color:#fff}
.kf49-go{position:relative;flex:none;padding:8px 13px;border-radius:10px;border:0;color:#fff;font:800 11px system-ui;cursor:pointer;background:linear-gradient(120deg,#7b5bff,#e05bff 50%,#5bc8ff);background-size:200% 100%;box-shadow:0 0 18px #9b7bff66,inset 0 1px #fff5;transition:background-position .6s}
.kf49-go:hover{background-position:100% 0}
.kf49-go:disabled{opacity:.6;cursor:progress}
@media (prefers-reduced-motion:reduce){.kf49-car{animation:none}.kf49-go{transition:none}}

/* 50 Spatial exploded cabinet (cabinets) */
@property --kf50-e{syntax:'<number>';inherits:true;initial-value:0}
@property --kf50-dz{syntax:'<number>';inherits:true;initial-value:0}
@property --kf50-da{syntax:'<number>';inherits:true;initial-value:0}
.kf50,#demo-root .stage.fresh-stage .kf50{background:#1a1f24}
.kf50{height:340px;position:relative;overflow:hidden;isolation:isolate;--kf50-rx:-18deg;--kf50-ry:-34deg;transition:--kf50-e 1s cubic-bezier(.5,0,.2,1.15),--kf50-dz .8s cubic-bezier(.3,1.3,.5,1),--kf50-da .9s cubic-bezier(.3,1.2,.5,1)}
.kf50.kf50-ex{--kf50-e:1}.kf50.kf50-dr{--kf50-dz:1}.kf50.kf50-dd{--kf50-da:1}
.kf50-room{position:absolute;inset:-20px;background:radial-gradient(40% 30% at 18% 22%,#f6c38a66,#0000 70%),radial-gradient(35% 40% at 84% 30%,#8ac2f655,#0000 70%),radial-gradient(60% 40% at 50% 100%,#c7b39a55,#0000 70%),linear-gradient(#2c343c,#14181c);filter:blur(14px)}
.kf50-room::after{content:'';position:absolute;left:10%;right:10%;top:62%;height:1px;background:#ffffff26;box-shadow:0 0 30px 6px #ffffff10}
.kf50-scene{position:absolute;inset:0 0 54px;perspective:760px;touch-action:none;cursor:grab}
.kf50-scene:active{cursor:grabbing}
.kf50-float{position:absolute;left:50%;top:52%;transform-style:preserve-3d;animation:kf50-bob 6s ease-in-out infinite}
@keyframes kf50-bob{50%{transform:translateY(-7px)}}
.kf50-obj{position:absolute;transform-style:preserve-3d;transform:rotateX(var(--kf50-rx)) rotateY(var(--kf50-ry)) scale(calc(var(--kf50-s,1)*(1 - var(--kf50-e)*.3)))}
.kf50-p{position:absolute;left:0;top:0;transform-style:preserve-3d;box-sizing:border-box;background:var(--kf50-c);box-shadow:inset 0 0 0 1px #ffffff40,inset 0 0 18px #0000001f;transform:translate(-50%,-50%) translate3d(calc(var(--kf50-x)*1px + var(--kf50-ex)*var(--kf50-e)*1px),calc(var(--kf50-y)*1px + var(--kf50-ey)*var(--kf50-e)*1px),calc(var(--kf50-z)*1px + var(--kf50-ez)*var(--kf50-e)*1px)) rotateX(var(--kf50-prx)) rotateY(var(--kf50-pry))}
.kf50-edge{outline:2px solid #f3efe7;outline-offset:-2px}
.kf50-bk,.kf50-ed{position:absolute;pointer-events:none}
.kf50-bk{inset:0;background:linear-gradient(#0003,#0003),var(--kf50-c)}
.kf50-ed{transform-origin:0 0}
.kf50-edh{background:linear-gradient(var(--kf50-c) 0 .7px,#0000 .7px calc(100% - .7px),var(--kf50-c) 0),var(--kf50-core,#a98a60)}
.kf50-edv{background:linear-gradient(90deg,var(--kf50-c) 0 .7px,#0000 .7px calc(100% - .7px),var(--kf50-c) 0),var(--kf50-core,#a98a60)}
.kf50-pb{--kf50-core:var(--kf50-pbt)}.kf50-mdf{--kf50-core:var(--kf50-mdft)}.kf50-ply{--kf50-core:#d6bb8a}
.kf50-ed.kf50-stone{background:linear-gradient(#0000,#0002),#ece8e1}
.kf50-drw{position:absolute;left:0;top:0;transform-style:preserve-3d;transform:translate3d(0,0,calc(var(--kf50-dz)*58px + var(--kf50-e)*70px))}
.kf50-door{position:absolute;left:0;top:0;transform-style:preserve-3d;transform:translate3d(calc(var(--kf50-e)*-18px),0,calc(var(--kf50-e)*96px))}
.kf50-dp{position:absolute;transform-origin:0 50%;transform-style:preserve-3d;transform:translate3d(var(--kf50-l),var(--kf50-t),var(--kf50-zz)) rotateY(calc(var(--kf50-da)*-105deg));background:linear-gradient(135deg,#34466a,#26354f);box-shadow:inset 0 0 0 1.5px #c9d3e3,inset 0 0 0 11px #2d3d5c,inset 0 0 0 12px #1c2840,inset 0 0 0 13px #4a5f86}
.kf50-dp::after{content:'';position:absolute;right:9px;top:30%;width:4px;height:26%;border-radius:2px;background:linear-gradient(90deg,#6b5025,#f3d79a,#8c6a32);transform:translateZ(3px)}
.kf50-cup{position:absolute;left:6px;width:15px;height:15px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#cfd3d8,#6e737a 65%,#45494f);transform:translateZ(-1.5px);box-shadow:0 0 0 1px #0006}
.kf50-cup::after{content:'';position:absolute;left:12px;top:5px;width:16px;height:5px;border-radius:2px;background:linear-gradient(#e2e5e9,#80858c);transform:translateZ(calc(var(--kf50-e)*-14px))}
.kf50-lb{position:absolute;left:0;top:0;transform-style:preserve-3d;transform:translate3d(calc(var(--kf50-x)*1px),calc(var(--kf50-y)*1px),calc(var(--kf50-z)*1px)) rotateY(calc(var(--kf50-ry)*-1)) rotateX(calc(var(--kf50-rx)*-1));pointer-events:none}
.kf50-lb span{position:absolute;left:0;bottom:0;translate:-50% -6px;padding:3px 7px;border-radius:99px;white-space:nowrap;font:800 8.5px/1.2 system-ui;color:#fff;background:#ffffff26;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1px #ffffff4d,0 4px 10px #0005;opacity:calc(var(--kf50-e)*1.6 - .6);scale:calc(.6 + var(--kf50-e)*.4)}
.kf50-lb span::after{content:'';position:absolute;left:50%;top:100%;width:1px;height:6px;background:#ffffff99}
.kf50-shadow{position:absolute;left:50%;top:calc(52% + 82px);width:180px;height:30px;margin-left:-90px;border-radius:50%;background:radial-gradient(closest-side,#000a,#0000);scale:calc(1 + var(--kf50-e)*.4) 1;opacity:calc(1 - var(--kf50-e)*.4);filter:blur(4px);animation:kf50-sh 6s ease-in-out infinite}
@keyframes kf50-sh{50%{scale:.9 .85;opacity:.7}}
.kf50-hud{position:absolute;left:12px;top:10px;right:12px;pointer-events:none}
.kf50-ttl{margin:0;display:inline-flex;flex-direction:column;padding:6px 10px;border-radius:14px;background:#ffffff1a;-webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5);box-shadow:inset 0 0 0 1px #ffffff33,inset 0 1px #ffffff59}
.kf50-ttl b{font:800 12px system-ui;color:#fff}.kf50-ttl span{font:600 9.5px system-ui;color:#d7dee8}
.kf50-orn{position:absolute;left:50%;bottom:12px;translate:-50% 0;display:flex;gap:4px;padding:4px;border-radius:99px;background:#ffffff1f;-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);box-shadow:inset 0 0 0 1px #ffffff40,inset 0 1px #ffffff73,0 10px 24px #0006}
.kf50-orn button{padding:7px 13px;border:0;border-radius:99px;background:none;color:#eef2f7;font:700 11px system-ui;cursor:pointer;transition:background .25s,color .25s,transform .3s cubic-bezier(.3,1.6,.5,1)}
.kf50-orn button:hover{background:#ffffff1f}
.kf50-orn button:active{transform:scale(.92)}
.kf50-orn button[aria-pressed="true"]{background:#fff;color:#1a1f24}
@media (prefers-reduced-motion:reduce){.kf50{transition:none}.kf50-float,.kf50-shadow{animation:none}}

/* 51 Bento closet planner (closets) */
.kf51,#demo-root .stage.fresh-stage .kf51{background:#ece7df}
.kf51{height:340px;padding:8px;box-sizing:border-box;color:#2b2520}
.kf51-g{height:100%;display:grid;gap:6px;grid-template-rows:1fr auto auto}
.kf51-cl{min-height:0;display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:6px;border-radius:14px;background:linear-gradient(#cfc5b6,#bfb3a1);box-shadow:inset 0 2px 8px #0003,0 1px #fff}
.kf51-bay{position:relative;min-width:0;padding:0;border:0;border-radius:4px;overflow:hidden;cursor:pointer;background:linear-gradient(90deg,#00000014,#0000 15% 85%,#00000014),linear-gradient(#f7f3ec,#ebe4d8);box-shadow:inset 0 0 0 1px #ffffffb3,0 1px 2px #0002;transition:box-shadow .2s,transform .3s cubic-bezier(.3,1.6,.5,1)}
.kf51-bay.kf51-hot{box-shadow:inset 0 0 0 2px #c2773a,0 0 0 3px #c2773a55;transform:scale(1.02)}
.kf51.kf51-arm .kf51-bay{box-shadow:inset 0 0 0 1.5px #c2773a99}
.kf51-it{position:absolute;display:block;animation:kf51-in .55s cubic-bezier(.3,1.5,.5,1) both;animation-delay:calc(var(--kf51-d,0)*45ms)}
@keyframes kf51-in{from{opacity:0;transform:translateY(-14px) scale(.9)}}
.kf51-rod{left:4%;right:4%;height:3px;border-radius:2px;background:linear-gradient(#f0f2f4,#8b9097);box-shadow:0 1px 2px #0005;z-index:2}
.kf51-gm{width:13%;border-radius:3px 3px 2px 2px;background:linear-gradient(90deg,color-mix(in srgb,var(--kf51-c),#000 25%),var(--kf51-c) 40%,color-mix(in srgb,var(--kf51-c),#fff 15%) 60%,color-mix(in srgb,var(--kf51-c),#000 30%));box-shadow:1px 1px 2px #0003;transform-origin:50% -6px;animation:kf51-in .55s cubic-bezier(.3,1.5,.5,1) both,kf51-sway 2.4s ease-in-out both;animation-delay:calc(var(--kf51-d,0)*45ms),calc(var(--kf51-d,0)*45ms + .3s)}
.kf51-gm::before{content:'';position:absolute;left:50%;top:-6px;width:2px;height:6px;margin-left:-1px;background:#9aa0a6}
@keyframes kf51-sway{0%{rotate:0deg}20%{rotate:5deg}45%{rotate:-3deg}70%{rotate:1.5deg}100%{rotate:0deg}}
.kf51-shf{left:3%;right:3%;height:4px;background:linear-gradient(#fbf8f2,#cbbfae);box-shadow:0 3px 4px #0002}
.kf51-fold{width:28%;height:calc(var(--kf51-n)*5px);border-radius:2px;background:repeating-linear-gradient(#0000 0 4px,#0002 4px 5px),var(--kf51-c);box-shadow:inset 0 1px #fff4}
.kf51-sws{left:3%;right:3%;height:3px;background:#cbbfae;transform:skewY(-8deg);box-shadow:0 3px 3px #0002}
.kf51-shoe{width:20%;height:7px;border-radius:5px 7px 2px 2px;background:var(--kf51-c);box-shadow:inset 0 -2px #0003,4px 0 0 -0px color-mix(in srgb,var(--kf51-c),#000 15%);transform:skewY(-8deg)}
.kf51-dw{left:4%;right:4%;border-radius:2px;background:linear-gradient(#fbf8f2,#e9e1d4);box-shadow:inset 0 0 0 1px #0000001a,0 1px 1px #0002}
.kf51-dw::after{content:'';position:absolute;left:38%;right:38%;top:45%;height:2px;border-radius:1px;background:#7c6a55}
.kf51-bin{width:40%;height:16px;border-radius:2px;background:repeating-linear-gradient(90deg,#b99b74 0 2px,#a5875f 2px 4px);box-shadow:inset 0 2px #0002}
.kf51-tray{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.kf51-tray button{flex:1 0 auto;padding:7px 8px;border-radius:10px;border:1px solid #0000001a;background:linear-gradient(#fff,#f1ece4);color:#3b322a;font:800 10.5px system-ui;cursor:grab;touch-action:none;box-shadow:0 2px 5px #0001;transition:transform .25s cubic-bezier(.3,1.6,.5,1),background .2s}
.kf51-tray button:hover{transform:translateY(-2px)}
.kf51-tray button[aria-pressed="true"]{background:#2b2520;color:#fff}
.kf51-ghost{position:absolute;z-index:20;left:0;top:0;padding:7px 10px;border-radius:10px;background:#2b2520;color:#fff;font:800 11px system-ui;pointer-events:none;box-shadow:0 12px 24px #0004;rotate:-4deg}
.kf51-st{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.kf51-s{min-width:0;display:flex;flex-direction:column;padding:6px 7px;border-radius:12px;background:#fffcf7;box-shadow:inset 0 0 0 1px #0000000f,0 2px 6px #0000000d}
.kf51-s b{font:900 18px/1 ui-rounded,system-ui;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.kf51-s span{font:700 8.5px system-ui;color:#857868;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kf51-pr{background:#2b2520;color:#fff}.kf51-pr span{color:#d8b48c}
.kf51-s.kf51-pop{animation:kf51-pop .5s cubic-bezier(.3,1.7,.5,1)}
@keyframes kf51-pop{40%{transform:scale(1.08)}}
@media (prefers-reduced-motion:reduce){.kf51-it,.kf51-gm,.kf51-s.kf51-pop{animation:none}.kf51-bay,.kf51-tray button{transition:none}}

/* 52 Liquid-glass sliding wardrobe (closets) */
.kf52,#demo-root .stage.fresh-stage .kf52{background:radial-gradient(80% 60% at 20% 10%,#f4e3cf,#d8c9b6 60%,#b9a892)}
.kf52{height:340px;position:relative;overflow:hidden;isolation:isolate}
.kf52-defs{position:absolute;width:0;height:0;overflow:hidden}
.kf52-wr{position:absolute;left:12px;right:12px;top:12px;bottom:56px;padding:9px 6px 6px;border-radius:6px;background:linear-gradient(#efe9df,#ddd3c4);box-shadow:0 18px 30px #5a442a40,inset 0 0 0 1px #fff9}
.kf52-rail{position:absolute;left:6px;right:6px;top:3px;height:5px;border-radius:3px;background:linear-gradient(#f5f6f7,#8c9096);box-shadow:0 1px 2px #0004}
.kf52-in{position:relative;height:100%;overflow:hidden;border-radius:2px;background:#2a221c}
.kf52-back,.kf52-clone{position:absolute;top:0;left:0;height:100%}
.kf52-back{width:100%}
.kf52-wall{position:absolute;inset:0;background:linear-gradient(90deg,#0000004d,#0000 12% 88%,#0000004d),repeating-linear-gradient(90deg,#c49a6c 0 1px,#b88d60 1px 3px,#c9a170 3px 6px),#bf9466}
.kf52-wall::after{content:'';position:absolute;inset:0;background:radial-gradient(70% 40% at 50% 0,#fff2d899,#0000 70%)}
.kf52-shf{position:absolute;left:0;right:0;top:15%;height:5px;background:linear-gradient(#f8f2e8,#c8b8a2);box-shadow:0 4px 6px #0005}
.kf52-box{position:absolute;bottom:85%;height:9%;border-radius:2px;background:linear-gradient(#f2ebe0,#d7cbb8);box-shadow:inset 0 -2px #0002}
.kf52-rod{position:absolute;left:2%;right:2%;top:24%;height:4px;border-radius:2px;background:linear-gradient(#ffffff,#8a8f96);box-shadow:0 2px 3px #0006}
.kf52-gm{position:absolute;top:calc(24% + 4px);border-radius:4px 4px 3px 3px;transform-origin:50% -7px;rotate:var(--kf52-r,0deg);background:linear-gradient(90deg,color-mix(in srgb,var(--kf52-c),#000 30%),var(--kf52-c) 35%,color-mix(in srgb,var(--kf52-c),#fff 18%) 55%,color-mix(in srgb,var(--kf52-c),#000 35%));box-shadow:2px 2px 4px #0004}
.kf52-gm::before{content:'';position:absolute;left:50%;top:-7px;width:2px;height:7px;margin-left:-1px;background:#c0c4c9}
.kf52-door{position:absolute;top:0;bottom:0;left:0;width:54%;overflow:hidden;border-radius:2px;cursor:grab;touch-action:none;transform:translateX(var(--kf52-x,0px));box-shadow:inset 0 0 0 1px #ffffffb3,inset 0 0 0 4px #ffffff26,inset 2px 0 0 4px #ffffff40,0 0 0 1px #0000004d,6px 0 14px #0000004d,-6px 0 14px #0000004d;outline-offset:-3px}
.kf52-door:active{cursor:grabbing}
.kf52-door[data-d="1"]{z-index:2}
.kf52-clone{filter:url(#kf52-liquid) saturate(1.25) brightness(1.08);transform:translateX(calc(var(--kf52-x,0px)*-1)) scale(1.04);transform-origin:var(--kf52-ox,50%) 50%}
.kf52-sheen{position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,#ffffff00 20%,#ffffff40 30%,#ffffff0d 38%,#ffffff00 46%),radial-gradient(120% 40% at 50% 0,#ffffff38,#fff0 60%),linear-gradient(90deg,#ff5f9e1a,#0000 8% 92%,#5fd1ff1f);mix-blend-mode:screen}
.kf52-grip{position:absolute;top:44%;width:4px;height:14%;border-radius:2px;background:linear-gradient(90deg,#ffffffcc,#ffffff40);box-shadow:0 0 0 1px #0002}
.kf52-door[data-d="0"] .kf52-grip{right:7px}.kf52-door[data-d="1"] .kf52-grip{left:7px}
.kf52[data-kf52-m="mirror"] .kf52-clone{opacity:0}
.kf52-door::before{content:'';position:absolute;inset:0;opacity:0;transition:opacity .5s;background:radial-gradient(30% 20% at 70% 30%,#fff6dc,#0000 70%),radial-gradient(45% 30% at calc(30% - var(--kf52-x,0px)*.3) 40%,#d9ecff99,#0000 70%),linear-gradient(#0000 70%,#7a5e45 70% 72%,#a88a6a 72%),linear-gradient(#e7e1d7,#c9c3ba)}
.kf52[data-kf52-m="mirror"] .kf52-door::before{opacity:1}
.kf52-ui{position:absolute;left:12px;right:12px;bottom:10px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.kf52-ttl{margin:0;min-width:0;display:flex;flex-direction:column}
.kf52-ttl b{font:800 12.5px system-ui;color:#3a2c20;white-space:nowrap}
.kf52-ttl span{font:600 9.5px system-ui;color:#7d6a57;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kf52-mode{flex:none;display:flex;padding:3px;border-radius:99px;background:#ffffff70;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px #ffffffb3,0 4px 12px #5a442a26}
.kf52-mode button{padding:6px 10px;border:0;border-radius:99px;background:none;color:#5a4634;font:700 10.5px system-ui;cursor:pointer;white-space:nowrap}
.kf52-mode button[aria-checked="true"]{background:#3a2c20;color:#fff}
@media (prefers-reduced-motion:reduce){.kf52-door::before{transition:none}}

/* 53 Mesh-gradient cloth swatches (closets) */
.kf53,#demo-root .stage.fresh-stage .kf53{background:radial-gradient(90% 70% at 30% 20%,#f7f1e8,#e3d9cb 60%,#cbbca8)}
.kf53{height:340px;position:relative;overflow:hidden;isolation:isolate}
.kf53::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='kf53-n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23kf53-n)'/%3E%3C/svg%3E");opacity:.18;mix-blend-mode:multiply;pointer-events:none}
.kf53-cv{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}
.kf53-cv:active{cursor:grabbing}
.kf53-tag{position:absolute;right:12px;bottom:62px;max-width:44%;display:flex;flex-direction:column;gap:1px;padding:8px 10px 8px 14px;border-radius:4px 10px 10px 4px;background:#fffdf8;box-shadow:0 8px 18px #5a442a33,inset 0 0 0 1px #0000000d;rotate:3deg;transform-origin:0 50%;pointer-events:none}
.kf53-tag::before{content:'';position:absolute;left:5px;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:#cbbca8;box-shadow:inset 0 1px 1px #0004}
.kf53-nm{font:800 12px/1.15 Georgia,serif;color:#2f261e}
.kf53-ds{font:600 9px system-ui;color:#857766}
.kf53-pr{font:800 10px ui-monospace,monospace;font-style:normal;color:#a0582c;margin-top:2px}
.kf53-tag.kf53-swing{animation:kf53-swing 1.1s cubic-bezier(.3,1.6,.5,1)}
@keyframes kf53-swing{0%{rotate:-14deg}40%{rotate:9deg}70%{rotate:1deg}100%{rotate:3deg}}
.kf53-sw{position:absolute;left:50%;bottom:12px;translate:-50% 0;display:flex;gap:8px;padding:6px;border-radius:99px;background:#ffffff8c;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px #fff,0 6px 16px #5a442a26}
.kf53-sw button{width:30px;height:30px;padding:0;border:0;border-radius:50%;cursor:pointer;background:radial-gradient(120% 120% at 25% 20%,#ffffff8c,#fff0 40%),conic-gradient(from 200deg,var(--kf53-a),var(--kf53-b),var(--kf53-a));box-shadow:inset 0 -2px 4px #0003,0 2px 4px #0003;transition:transform .35s cubic-bezier(.3,1.7,.5,1)}
.kf53-sw button[aria-checked="true"]{transform:scale(1.18);box-shadow:inset 0 -2px 4px #0003,0 0 0 2px #fff,0 0 0 4px #2f261e}
@media (prefers-reduced-motion:reduce){.kf53-tag.kf53-swing{animation:none}.kf53-sw button{transition:none}}

/* 54 Aurora closet lighting (closets) */
@property --kf54-l{syntax:'<number>';inherits:true;initial-value:0}
@property --kf54-c{syntax:'<color>';inherits:true;initial-value:#ffc68a}
.kf54,#demo-root .stage.fresh-stage .kf54{background:#05060a}
.kf54{height:340px;position:relative;overflow:hidden;isolation:isolate;--kf54-c:#ffc68a;transition:--kf54-l 1.4s cubic-bezier(.5,0,.2,1),--kf54-c .5s linear}
.kf54.kf54-on{--kf54-l:1}
.kf54.kf54-aur{transition:--kf54-l 1.4s cubic-bezier(.5,0,.2,1)}
.kf54-room{position:absolute;inset:0 0 54px}
.kf54-sky{position:absolute;left:0;top:0;width:100%;height:24%;display:block;opacity:calc(.25 + var(--kf54-l)*.75)}
.kf54-wl,.kf54-wr{position:absolute;top:0;bottom:0;width:13%;background:linear-gradient(90deg,#3a2f27,#5c4b3d)}
.kf54-wl{left:0;clip-path:polygon(0 0,100% 24%,100% 84%,0 100%)}
.kf54-wr{right:0;clip-path:polygon(0 24%,100% 0,100% 100%,0 84%);background:linear-gradient(270deg,#3a2f27,#5c4b3d)}
.kf54-floor{position:absolute;left:0;right:0;bottom:0;height:16%;clip-path:polygon(13% 0,87% 0,100% 100%,0 100%);background:repeating-linear-gradient(90deg,#4a3a2c 0 9%,#3f3125 9% 18%)}
.kf54-back{position:absolute;left:13%;right:13%;top:24%;bottom:16%;display:grid;grid-template-columns:1fr 1.1fr 1fr;gap:3px;background:#3d3229;padding:3px;box-shadow:inset 0 10px 18px #0008}
.kf54-col{position:relative;overflow:hidden;background:linear-gradient(#efe6d8,#d9ccb8)}
.kf54-rod{position:absolute;left:4%;right:4%;top:12%;height:3px;border-radius:2px;background:linear-gradient(#fff,#8a8f96)}
.kf54-gm{position:absolute;top:calc(12% + 3px);border-radius:3px 3px 2px 2px;background:linear-gradient(90deg,color-mix(in srgb,var(--kf54-g),#000 30%),var(--kf54-g) 40%,color-mix(in srgb,var(--kf54-g),#fff 18%) 60%,color-mix(in srgb,var(--kf54-g),#000 35%))}
.kf54-shf{position:absolute;left:0;right:0;height:4px;background:linear-gradient(#fbf7f0,#bfae96)}
.kf54-fold{position:absolute;height:calc(var(--kf54-n)*4px);border-radius:2px;background:repeating-linear-gradient(#0000 0 3px,#0002 3px 4px),var(--kf54-g)}
.kf54-led{position:absolute;left:4%;right:4%;height:2px;border-radius:1px;background:color-mix(in srgb,var(--kf54-c),#fff 50%);opacity:0;box-shadow:0 0 6px 1px var(--kf54-c),0 10px 26px 8px color-mix(in srgb,var(--kf54-c),#0000 55%);transition:opacity .5s ease-out calc(var(--kf54-i)*110ms)}
.kf54-on .kf54-led{opacity:1}
.kf54-led::after{content:'';position:absolute;left:-10%;right:-10%;top:2px;height:60px;background:linear-gradient(color-mix(in srgb,var(--kf54-c),#0000 55%),#0000);mix-blend-mode:screen;pointer-events:none}
.kf54-dark{position:absolute;inset:0;background:radial-gradient(70% 60% at 50% 40%,rgb(4 5 9/calc(.9 - var(--kf54-l)*.86)),rgb(4 5 9/calc(.96 - var(--kf54-l)*.6)));pointer-events:none}
.kf54-dark::after{content:'';position:absolute;inset:0 0 54px;background:radial-gradient(60% 50% at 50% 30%,var(--kf54-c),#0000 70%);mix-blend-mode:soft-light;opacity:calc(var(--kf54-l)*.9)}
.kf54-sense{position:absolute;left:50%;top:44%;translate:-50% -50%;margin:0;display:flex;align-items:center;gap:7px;padding:7px 12px;border-radius:99px;background:#ffffff14;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1px #ffffff26;font:700 10.5px system-ui;color:#cfd6e6;white-space:nowrap;transition:opacity .6s,translate .6s;pointer-events:none}
.kf54-sense i{width:7px;height:7px;border-radius:50%;background:#ff5a5a;box-shadow:0 0 8px #ff5a5a;animation:kf54-pulse 1.4s ease-in-out infinite}
@keyframes kf54-pulse{50%{opacity:.3;scale:.7}}
.kf54-on .kf54-sense{opacity:0;translate:-50% -80%}
.kf54-ui{position:absolute;left:0;right:0;bottom:0;height:54px;display:flex;align-items:center;gap:10px;padding:0 12px;background:linear-gradient(#0b0d14,#06070b);border-top:1px solid #ffffff12}
.kf54-dial{position:relative;flex:none;width:38px;height:38px;border-radius:50%;cursor:grab;touch-action:none;background:conic-gradient(from 225deg,#ffb36b,#ffe2bd 25%,#fff7ee 40%,#e3ecff 60%,#bcd3ff 75%,#0000 75%);box-shadow:0 0 14px color-mix(in srgb,var(--kf54-c),#0000 50%)}
.kf54-dial::before{content:'';position:absolute;inset:4px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#3a3f4c,#14161d);box-shadow:0 2px 4px #000a,inset 0 1px #ffffff26}
.kf54-knob{position:absolute;inset:4px;border-radius:50%;rotate:var(--kf54-a,-100deg)}
.kf54-knob::after{content:'';position:absolute;left:50%;top:3px;width:3px;height:9px;margin-left:-1.5px;border-radius:2px;background:var(--kf54-c);box-shadow:0 0 6px var(--kf54-c)}
.kf54-read{flex:1;min-width:0;display:flex;flex-direction:column}
.kf54-k{font:800 15px/1.1 ui-monospace,monospace;color:#fff;font-variant-numeric:tabular-nums}
.kf54-kn{font:600 9.5px system-ui;color:#8f97ab;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kf54-au{flex:none;padding:8px 13px;border-radius:99px;border:1px solid #ffffff26;background:#ffffff0d;color:#dfe5f3;font:800 11px system-ui;cursor:pointer;transition:background .3s,color .3s,box-shadow .3s}
.kf54-au[aria-pressed="true"]{background:linear-gradient(110deg,#33ffb5,#5aa8ff 45%,#c56bff);color:#0a0c14;border-color:#0000;box-shadow:0 0 18px #5aa8ff88}
@media (prefers-reduced-motion:reduce){.kf54,.kf54-led,.kf54-sense{transition:none}.kf54-sense i{animation:none}}

/* 55 Clay 3D closet (closets) */
.kf55,#demo-root .stage.fresh-stage .kf55{background:radial-gradient(90% 70% at 30% 10%,#ffe9f1,#f6d3e2 55%,#e9c1d6)}
.kf55{height:340px;position:relative;overflow:hidden;isolation:isolate;color:#5b3a4c}
.kf55-fr{position:absolute;left:16px;right:16px;top:14px;bottom:58px;border-radius:28px;background:#fbe6ee;box-shadow:inset 10px 10px 22px #ffffffcc,inset -12px -14px 24px #d9a7bf99,14px 18px 30px #b77d9a40}
.kf55-fr::before{content:'';position:absolute;inset:14px;border-radius:18px;background:#f4d6e3;box-shadow:inset 8px 10px 18px #d9a7bf8c,inset -6px -6px 14px #ffffffb3}
.kf55-top,.kf55-bot{position:absolute;left:14px;right:14px;display:flex;justify-content:space-around;align-items:flex-end;padding:0 10px}
.kf55-top{top:14px;height:23%;border-bottom:10px solid #fff1f6;border-radius:0 0 8px 8px;filter:drop-shadow(0 5px 4px #c88aa755)}
.kf55-bot{bottom:14px;height:20%;border-top:10px solid #fff1f6;align-items:flex-start;padding-top:8px;filter:drop-shadow(0 -2px 3px #c88aa733)}
.kf55-box,.kf55-shoe,.kf55-gm{background:var(--kf55-c);box-shadow:inset 5px 6px 10px #ffffffa6,inset -6px -7px 12px #0000001f,6px 8px 12px #9b5f7d33;cursor:pointer}
.kf55-box{width:24%;height:62%;border-radius:12px}
.kf55-box.kf55-sm{height:44%;width:18%}
.kf55-shoe{width:22%;height:22px;border-radius:16px 20px 8px 8px;position:relative}
.kf55-shoe::after{content:'';position:absolute;left:12%;top:-6px;width:38%;height:12px;border-radius:10px 10px 4px 4px;background:inherit;box-shadow:inherit}
.kf55-rod{position:absolute;left:24px;right:24px;top:calc(14px + 23% + 30px);height:10px;border-radius:99px;background:#fff6fa;box-shadow:inset 2px 2px 4px #fff,inset -3px -3px 5px #d9a7bf,0 4px 6px #b77d9a40;z-index:2}
.kf55-hang{position:absolute;left:24px;right:24px;top:calc(14px + 23% + 30px);height:52%;z-index:3;touch-action:none}
.kf55-hg{position:absolute;left:0;top:-14px;width:52px;margin-left:-26px;transform-origin:50% 8px;rotate:var(--kf55-r,0deg);translate:var(--kf55-x,0px) 0;cursor:grab;outline-offset:3px;border:0;padding:0;background:none}
.kf55-hg:active{cursor:grabbing}
.kf55-hk{position:absolute;left:50%;top:0;width:14px;height:16px;margin-left:-7px;border:4px solid #fff6fa;border-bottom:0;border-radius:10px 10px 0 0;box-shadow:inset 1px 1px #d9a7bf}
.kf55-hb{position:absolute;left:2px;right:2px;top:14px;height:10px;border-radius:99px;background:#fff6fa;box-shadow:inset 2px 2px 3px #fff,inset -2px -2px 4px #d9a7bf,0 3px 4px #b77d9a40;z-index:2}
.kf55-gm{position:absolute;left:4px;right:4px;top:18px;height:var(--kf55-h,70px);border-radius:22px 22px 14px 14px}
.kf55-gm.kf55-dress{left:0;right:0;border-radius:24px 24px 30px 30px/20px 20px 26px 26px}
.kf55-gm::after{content:'';position:absolute;left:50%;top:6px;width:14px;height:10px;margin-left:-7px;border-radius:0 0 10px 10px;background:#ffffff8c;box-shadow:inset 0 -2px 3px #0000001a}
.kf55-gm.kf55-coat::before{content:'';position:absolute;left:50%;top:14px;bottom:8px;width:3px;margin-left:-1.5px;border-radius:2px;background:#00000014}
.kf55-ui{position:absolute;left:16px;right:16px;bottom:12px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.kf55-add{padding:10px 16px;border:0;border-radius:99px;background:#ff8fb3;color:#fff;font:900 12px ui-rounded,system-ui;cursor:pointer;box-shadow:inset 3px 4px 6px #ffffff80,inset -4px -5px 8px #c94f7a99,5px 7px 14px #c94f7a55;transition:transform .3s cubic-bezier(.3,1.8,.5,1)}
.kf55-add:hover{transform:translateY(-2px)}
.kf55-add:active{transform:scale(.9,.84)}
.kf55-add:disabled{opacity:.55;cursor:default}
.kf55-n{font:800 11px ui-rounded,system-ui;color:#9b5f7d}
@media (prefers-reduced-motion:reduce){.kf55-add{transition:none}}

/* 56 Bento proof wall (selling) */
.kf56,#demo-root .stage.fresh-stage .kf56{background:#0b0d10}
.kf56{height:340px;padding:8px;box-sizing:border-box;color:#eef2f5}
.kf56-g{height:100%;display:grid;gap:6px;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1.3fr 1fr;grid-template-areas:"ct rt" "mp mp" "tm sh";transition:grid-template-columns .5s cubic-bezier(.3,1.2,.4,1),grid-template-rows .5s cubic-bezier(.3,1.2,.4,1)}
.kf56-g:has(.kf56-ct:is(:hover,:focus-visible)),.kf56-g:has(.kf56-tm:is(:hover,:focus-visible)){grid-template-columns:1.5fr 1fr}
.kf56-g:has(.kf56-rt:is(:hover,:focus-visible)),.kf56-g:has(.kf56-sh:is(:hover,:focus-visible)){grid-template-columns:1fr 1.5fr}
.kf56-g:has(.kf56-mp:is(:hover,:focus-visible)){grid-template-rows:.8fr 1.8fr .8fr}
.kf56-g:has(.kf56-tm:is(:hover,:focus-visible)),.kf56-g:has(.kf56-sh:is(:hover,:focus-visible)){grid-template-rows:.9fr 1.1fr 1.4fr}
.kf56-t{position:relative;min-width:0;min-height:0;overflow:hidden;padding:9px 10px;border-radius:16px;background:linear-gradient(160deg,#ffffff0f,#ffffff03 60%),#13171c;box-shadow:inset 0 0 0 1px #ffffff14,inset 0 1px #ffffff1f;display:flex;flex-direction:column;justify-content:space-between;outline-offset:2px}
.kf56-ct{grid-area:ct}.kf56-rt{grid-area:rt}.kf56-mp{grid-area:mp}.kf56-tm{grid-area:tm}.kf56-sh{grid-area:sh}
.kf56-k{display:flex;align-items:center;gap:5px;font:700 9px ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:#8c98a6}
.kf56-num{font:900 clamp(18px,7.4cqi,26px)/1 ui-monospace,monospace;letter-spacing:-.04em;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.kf56-ct{container-type:inline-size}
.kf56-num.kf56-bump{animation:kf56-bump .5s cubic-bezier(.3,1.8,.5,1)}
@keyframes kf56-bump{40%{color:#7cf2b0;transform:translateY(-2px)}}
.kf56-sp{width:100%;height:22px;display:block}
.kf56-spa{fill:url(#kf56-spg)}.kf56-spl{fill:none;stroke:#7cf2b0;stroke-width:1.5;vector-effect:non-scaling-stroke}
.kf56-big{font:900 24px/1 system-ui;letter-spacing:-.03em;color:#fff;white-space:nowrap}
.kf56-stars{position:relative;font-size:15px;letter-spacing:1px;color:#ffffff26;line-height:1}
.kf56-stars i{font-style:normal}
.kf56-sf{position:absolute;left:0;top:0;color:#ffc94d;text-shadow:0 0 8px #ffc94d88;clip-path:inset(0 calc(100% - var(--kf56-f,0%)) 0 0);transition:clip-path 1.6s cubic-bezier(.3,.9,.3,1)}
.kf56-sub{font:600 9.5px system-ui;color:#8c98a6}
.kf56-live{width:6px;height:6px;border-radius:50%;background:#ff4d6a;box-shadow:0 0 8px #ff4d6a;animation:kf56-blink 1.2s ease-in-out infinite}
@keyframes kf56-blink{50%{opacity:.3}}
.kf56-dots{position:absolute;left:8%;right:8%;top:24px;bottom:30px;display:grid;grid-template-columns:repeat(24,1fr);grid-template-rows:repeat(12,1fr);place-items:center}
.kf56-dots i{position:relative;width:3px;height:3px;border-radius:50%;background:#ffffff1f}
.kf56-dots i.kf56-on{background:#3c4a57}
.kf56-dots i.kf56-p{background:#7cf2b0;box-shadow:0 0 6px #7cf2b0}
.kf56-dots i.kf56-p::after{content:'';position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;border:1.5px solid #7cf2b0;animation:kf56-ring 1.6s ease-out forwards}
@keyframes kf56-ring{from{transform:scale(.1);opacity:1}to{transform:scale(1);opacity:0}}
.kf56-toast{position:absolute;left:8px;right:8px;bottom:7px;margin:0;padding:4px 8px;border-radius:9px;background:#0b0d10d9;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font:600 10px system-ui;color:#cfd8e0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:inset 0 0 0 1px #ffffff14}
.kf56-toast b{color:#7cf2b0}
.kf56-q{position:relative;flex:1;min-height:0}
.kf56-qi{position:absolute;inset:0;display:flex;flex-direction:column;gap:5px;transition:opacity .6s,filter .6s,transform .6s cubic-bezier(.3,1.2,.4,1)}
.kf56-qi[hidden]{display:flex;opacity:0;filter:blur(6px);transform:translateY(8px)}
.kf56-qi p{margin:0;font:600 10.5px/1.35 Georgia,serif;color:#e6ebef;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.kf56-who{display:flex;align-items:center;gap:6px;font:700 9px system-ui;color:#8c98a6;margin-top:auto}
.kf56-av{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font:900 8px system-ui;color:#0b0d10;background:var(--kf56-c)}
.kf56-pg{display:flex;gap:3px;margin-top:4px}
.kf56-pg i{width:12px;height:3px;border-radius:2px;background:#ffffff26;overflow:hidden}
.kf56-pg i.kf56-a::after{content:'';display:block;height:100%;background:#fff;animation:kf56-fill 4.2s linear forwards}
@keyframes kf56-fill{from{width:0}to{width:100%}}
.kf56-road{position:relative;height:16px;border-bottom:2px dashed #ffffff33}
.kf56-truck{position:absolute;bottom:1px;left:0;width:26px;height:13px;border-radius:3px 6px 2px 2px;background:linear-gradient(90deg,#e9eef2 0 62%,#7cf2b0 62%);box-shadow:0 2px 0 -0px #0b0d10,4px 3px 0 -1px #222,20px 3px 0 -1px #222;animation:kf56-drive 4s cubic-bezier(.45,0,.55,1) infinite}
@keyframes kf56-drive{0%{left:0;opacity:0}10%{opacity:1}85%{opacity:1}100%{left:calc(100% - 26px);opacity:0}}
@media (prefers-reduced-motion:reduce){.kf56-g,.kf56-sf,.kf56-qi{transition:none}.kf56-live,.kf56-truck,.kf56-pg i.kf56-a::after,.kf56-dots i.kf56-p::after,.kf56-num.kf56-bump{animation:none}}

/* 57 Liquid-glass pricing card (selling) */
.kf57,#demo-root .stage.fresh-stage .kf57{background:#14161d}
.kf57{height:340px;position:relative;overflow:hidden;isolation:isolate;perspective:900px;display:grid;place-items:center;--kf57-rx:0deg;--kf57-ry:0deg;--kf57-gx:30%;--kf57-gy:0%}
.kf57-bg{position:absolute;inset:-30px;filter:saturate(1.2)}
.kf57-dr{position:absolute;width:var(--kf57-w);aspect-ratio:.64;border-radius:4px;background:var(--kf57-c);box-shadow:inset 0 0 0 calc(var(--kf57-w)*.13) var(--kf57-c),inset 0 0 0 calc(var(--kf57-w)*.13 + 2px) #0000002e,inset 0 0 0 calc(var(--kf57-w)*.13 + 3px) #ffffff40,0 14px 24px #0007;rotate:var(--kf57-r);animation:kf57-drift var(--kf57-d) ease-in-out infinite alternate}
.kf57-dr::after{content:'';position:absolute;right:12%;top:40%;width:6%;height:22%;border-radius:3px;background:linear-gradient(90deg,#776039,#f3d79a,#8c6a32)}
@keyframes kf57-drift{to{translate:var(--kf57-mx) var(--kf57-my);rotate:calc(var(--kf57-r) + 14deg)}}
.kf57-card{position:relative;width:min(300px,88%);padding:12px;border-radius:24px;display:flex;flex-direction:column;gap:9px;color:#fff;background:linear-gradient(150deg,#ffffff38,#ffffff0d 45%,#ffffff1f);-webkit-backdrop-filter:blur(16px) saturate(1.8) brightness(1.05);backdrop-filter:blur(16px) saturate(1.8) brightness(1.05);box-shadow:inset 0 1px 0 #ffffffb3,inset 0 -1px 0 #ffffff33,inset 1px 0 0 #ffffff4d,inset 0 0 22px #ffffff1f,0 24px 50px #0008;transform:rotateX(var(--kf57-rx)) rotateY(var(--kf57-ry));transition:transform .4s cubic-bezier(.3,1.2,.4,1);transform-style:preserve-3d}
.kf57-card::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:conic-gradient(from 210deg,#fff0,#ffffffd9,#fff0 25%,#9fe8ff99 50%,#fff0 60%,#ffb3e699 80%,#fff0);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);pointer-events:none}
.kf57-glare{position:absolute;inset:0;border-radius:inherit;background:radial-gradient(60% 45% at var(--kf57-gx) var(--kf57-gy),#ffffff40,#fff0 70%);pointer-events:none;mix-blend-mode:screen}
.kf57-seg{position:relative;display:flex;padding:3px;border-radius:99px;background:#00000033;box-shadow:inset 0 1px 3px #0005}
.kf57-seg button{flex:1;min-width:0;position:relative;z-index:1;padding:6px 2px;border:0;border-radius:99px;background:none;color:#ffffffb3;font:800 10.5px system-ui;cursor:pointer;transition:color .3s}
.kf57-seg button[aria-checked="true"]{color:#14161d}
.kf57-seg::before{content:'';position:absolute;top:3px;bottom:3px;left:3px;width:calc((100% - 6px)/3);border-radius:99px;background:linear-gradient(#fff,#e8eef5);box-shadow:0 3px 8px #0004;translate:calc(var(--kf57-i,0)*100%) 0;transition:translate .5s cubic-bezier(.3,1.5,.5,1)}
.kf57-row{display:flex;align-items:flex-end;justify-content:space-between;gap:8px}
.kf57-pr{min-width:0;display:flex;flex-direction:column}
.kf57-tot{font:900 34px/1 system-ui;letter-spacing:-.04em;font-variant-numeric:tabular-nums;text-shadow:0 2px 12px #0005}
.kf57-per{font:600 10px system-ui;color:#ffffffbf;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kf57-save{flex:none;padding:4px 8px;border-radius:99px;background:#7cf2b0;color:#0d2a1c;font:900 10.5px system-ui;box-shadow:0 0 16px #7cf2b066}
.kf57-save.kf57-pop{animation:kf57-pop .45s cubic-bezier(.3,1.8,.5,1)}
@keyframes kf57-pop{40%{transform:scale(1.15) rotate(-3deg)}}
.kf57-bars{display:flex;flex-direction:column;gap:4px}
.kf57-bars span{display:flex;align-items:center;gap:6px}
.kf57-bars i{height:7px;border-radius:4px;transition:width .6s cubic-bezier(.3,1.2,.4,1)}
.kf57-bb{width:100%;background:repeating-linear-gradient(45deg,#ffffff59 0 4px,#ffffff26 4px 8px)}
.kf57-bt{width:40%;background:linear-gradient(90deg,#7cf2b0,#9fe8ff);box-shadow:0 0 10px #7cf2b088}
.kf57-bars em{flex:none;width:44px;font:700 9px system-ui;font-style:normal;color:#ffffffb3;order:-1}
.kf57-sl{display:flex;align-items:center;gap:8px;font:800 10px system-ui;color:#ffffffcc}
.kf57-sl input{flex:1;min-width:0;accent-color:#7cf2b0;height:18px}
.kf57-cta{position:relative;height:38px;border:0;border-radius:14px;background:linear-gradient(#fff,#e4eaf1);color:#14161d;font:900 12.5px system-ui;cursor:pointer;box-shadow:0 8px 18px #0006,inset 0 -2px #0000001a;overflow:hidden;transition:background .4s,color .4s,transform .3s cubic-bezier(.3,1.6,.5,1)}
.kf57-cta:active{transform:scale(.96)}
.kf57-sig{position:absolute;left:50%;top:50%;width:110px;height:28px;translate:-50% -50%;fill:none;stroke:#0d2a1c;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:420;stroke-dashoffset:420;opacity:0}
.kf57-cta.kf57-sign{background:#7cf2b0}
.kf57-cta.kf57-sign .kf57-ct{opacity:0}
.kf57-cta.kf57-sign .kf57-sig{opacity:1;animation:kf57-sig 1.3s ease-in-out forwards}
@keyframes kf57-sig{to{stroke-dashoffset:0}}
.kf57-cta.kf57-done .kf57-sig{opacity:0;transition:opacity .3s}
.kf57-cta.kf57-done .kf57-ct{opacity:1}
@media (prefers-reduced-motion:reduce){.kf57-dr,.kf57-save.kf57-pop{animation:none}.kf57-card,.kf57-seg::before,.kf57-bars i,.kf57-cta{transition:none}.kf57-cta.kf57-sign .kf57-sig{animation:none;stroke-dashoffset:0}}

/* 58 Variable-weight pitch (selling) */
.kf58,#demo-root .stage.fresh-stage .kf58{background:radial-gradient(120% 90% at 10% 0%,#1d2440,#0a0b12 65%)}
.kf58{height:340px;position:relative;overflow:hidden;isolation:isolate;container-type:inline-size;display:flex;flex-direction:column;gap:10px;padding:14px 16px;box-sizing:border-box;cursor:crosshair}
.kf58-lens{position:absolute;left:0;top:0;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;background:radial-gradient(closest-side,#ffb34733,#ff5ea81a 60%,#0000);translate:var(--kf58-mx,-200px) var(--kf58-my,-200px);pointer-events:none;transition:opacity .4s;filter:blur(4px)}
.kf58-aud{display:flex;gap:4px;align-self:flex-start;padding:3px;border-radius:99px;background:#ffffff0f;box-shadow:inset 0 0 0 1px #ffffff1a;position:relative;z-index:1}
.kf58-aud button{padding:5px 10px;border:0;border-radius:99px;background:none;color:#9aa3bb;font:700 10.5px system-ui;cursor:pointer;transition:background .25s,color .25s}
.kf58-aud button[aria-checked="true"]{background:#fff;color:#0a0b12}
.kf58-h{position:relative;flex:1;margin:0!important;display:flex;flex-wrap:wrap;align-content:center;gap:0 .26em;font-family:"Segoe UI Variable Display","SF Pro Display","Inter var",system-ui,sans-serif!important;font-size:calc(clamp(30px,12cqi,54px)*(.84 + var(--kf58-v)*.32))!important;line-height:1.02!important;letter-spacing:calc((.05 - var(--kf58-v)*.09)*1em);color:color-mix(in oklch,#8b93a7,#fff calc(var(--kf58-v)*100%));text-wrap:balance}
.kf58-wd{white-space:nowrap;display:inline-block}
.kf58-c{display:inline-block;font-weight:var(--kf58-w,400);font-variation-settings:"wght" var(--kf58-w,400);-webkit-text-stroke:var(--kf58-s,0px) currentColor;transition:color .3s}
.kf58-pw{background:linear-gradient(100deg,#ffb347,#ff5ea8 55%,#9b7bff);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke-color:#ff8a6a}
.kf58-sub{position:relative;margin:0;font:600 12px system-ui;color:#9aa3bb;letter-spacing:calc((.04 - var(--kf58-v)*.04)*1em)}
.kf58-cv{position:relative;display:flex;align-items:center;gap:8px;font:700 9.5px ui-monospace,monospace;color:#6f7891;cursor:default}
.kf58-cv span:last-child{font-weight:900;color:#ffb347}
.kf58-cv input{flex:1;min-width:0;accent-color:#ff5ea8}
@media (prefers-reduced-motion:reduce){.kf58-lens{display:none}.kf58-c{transition:none}}

/* 59 Kinetic pro logo cloud (selling) */
.kf59,#demo-root .stage.fresh-stage .kf59{background:radial-gradient(70% 60% at 50% 45%,#1a2230,#090b10 75%)}
.kf59{height:340px;position:relative;overflow:hidden;isolation:isolate;touch-action:none}
.kf59::before{content:'';position:absolute;left:50%;top:45%;width:240px;height:240px;margin:-120px 0 0 -120px;border-radius:50%;border:1px dashed #ffffff1f;opacity:0;scale:.6;transition:opacity .6s,scale .8s cubic-bezier(.3,1.4,.5,1)}
.kf59.kf59-as::before{opacity:1;scale:var(--kf59-rs,1)}
.kf59-field{position:absolute;inset:0}
.kf59-lg{position:absolute;left:0;top:0;width:44px;height:44px;margin:-22px 0 0 -22px;padding:0;border:0;border-radius:14px;display:grid;place-items:center;cursor:pointer;background:linear-gradient(160deg,#ffffff1f,#ffffff08);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:inset 0 0 0 1px #ffffff26,inset 0 1px #ffffff40,0 8px 18px #0007;translate:var(--kf59-x,0px) var(--kf59-y,0px);rotate:var(--kf59-r,0deg);color:var(--kf59-c);transition:box-shadow .25s,background .25s}
.kf59-lg svg{width:26px;height:26px;display:block}
.kf59-lg:hover,.kf59-lg:focus-visible{background:linear-gradient(160deg,#ffffff38,#ffffff12);box-shadow:inset 0 0 0 1px var(--kf59-c),0 0 22px color-mix(in srgb,var(--kf59-c),#0000 50%),0 8px 18px #0007}
.kf59-core{position:absolute;left:50%;top:45%;translate:-50% -50%;display:flex;flex-direction:column;align-items:center;padding:12px 16px;border-radius:20px;background:#ffffff12;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px #ffffff26;opacity:0;scale:.6;transition:opacity .5s .2s,scale .7s .2s cubic-bezier(.3,1.6,.5,1);pointer-events:none}
.kf59.kf59-as .kf59-core{opacity:1;scale:1}
.kf59-cnt{font:900 26px/1 system-ui;letter-spacing:-.03em;background:linear-gradient(90deg,#ffd27a,#ff8ab0,#9fd0ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.kf59-core span{font:700 9.5px system-ui;color:#c3cbd8;letter-spacing:.06em;text-transform:uppercase}
.kf59-name{position:absolute;left:12px;bottom:14px;right:110px;margin:0;font:700 11px system-ui;color:#c3cbd8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:14px}
.kf59-name b{color:#fff}
.kf59-go{position:absolute;right:12px;bottom:10px;padding:9px 15px;border-radius:99px;border:0;background:#fff;color:#0b0e14;font:900 11.5px system-ui;cursor:pointer;box-shadow:0 8px 18px #0007;transition:transform .3s cubic-bezier(.3,1.7,.5,1)}
.kf59-go:active{transform:scale(.92)}
.kf59-go[aria-pressed="true"]{background:#ffffff1f;color:#fff;box-shadow:inset 0 0 0 1px #ffffff40}
@media (prefers-reduced-motion:reduce){.kf59::before,.kf59-core,.kf59-lg{transition:none}}

/* 60 Live ROI orb (selling) */
.kf60,#demo-root .stage.fresh-stage .kf60{background:radial-gradient(80% 70% at 50% 30%,#13202a,#06080b 75%)}
.kf60{height:340px;position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;align-items:center;padding:10px 12px;box-sizing:border-box;gap:8px}
.kf60-orbw{position:relative;flex:1;min-height:0;aspect-ratio:1;max-width:100%}
.kf60-cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.kf60-read{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;text-shadow:0 2px 10px #0009}
.kf60-read span{font:700 9.5px system-ui;letter-spacing:.14em;text-transform:uppercase;color:#d7f7ec}
.kf60-v{font:900 clamp(24px,9cqi,34px)/1.05 system-ui;letter-spacing:-.04em;color:#fff;font-variant-numeric:tabular-nums}
.kf60{container-type:inline-size}
.kf60-in{width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.kf60-in label{min-width:0;display:flex;flex-direction:column;gap:3px;padding:6px 8px;border-radius:12px;background:#ffffff0d;box-shadow:inset 0 0 0 1px #ffffff17}
.kf60-in span{display:flex;justify-content:space-between;gap:4px;font:700 9px system-ui;color:#8fa5b3;white-space:nowrap}
.kf60-in b{color:#fff;font-variant-numeric:tabular-nums}
.kf60-in input{width:100%;min-width:0;margin:0;accent-color:#3ee0b0}


/* 61 3D door explosion */
#demo-root .stage.fresh-stage:has(.kf61){background:#fff;padding:0;min-height:580px}
.dm.kf61,#demo-root .stage.fresh-stage .dm.kf61{position:relative;height:580px;background:#fff;color:#24180f;font-family:system-ui,sans-serif;overflow:hidden;user-select:none}
.kf61-hud{position:absolute;z-index:3;left:12px;top:12px;display:flex;gap:8px}
.kf61-hud button{border:1px solid #24180f;background:#fff;color:#24180f;border-radius:999px;padding:7px 12px;font:600 12px/1 system-ui,sans-serif;cursor:pointer}
.kf61-hud button[aria-pressed="true"]{background:#24180f;color:#fff}
.kf61-hud button:first-child{animation:kf61-hint 1.5s ease 2}
@keyframes kf61-hint{50%{box-shadow:0 0 0 6px rgba(36,24,15,.14)}}
.kf61-scene{position:absolute;inset:0 0 36px;perspective:980px;display:grid;place-items:center;touch-action:none;cursor:grab;transform-style:preserve-3d}
.kf61-scene:focus{outline:none}
.kf61-scene.is-drag{cursor:grabbing}
.kf61-shadow{position:absolute;left:50%;top:62%;width:180px;height:28px;margin-left:-90px;background:radial-gradient(ellipse,rgba(70,42,16,.18),transparent 70%);pointer-events:none}
.kf61-obj{position:relative;width:0;height:0;transform-style:preserve-3d;transform:scale(var(--s,1)) rotateX(calc(var(--rx)*1deg)) rotateY(calc(var(--ry)*1deg))}
.kf61-part{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d;transform:translate3d(calc(var(--x)*1px),calc(var(--y)*1px),calc(var(--z)*1px));transition:transform .8s cubic-bezier(.16,.84,.2,1)}
.kf61.kf61-ex .kf61-part{transform:translate3d(calc((var(--x) + var(--ex))*1px),calc((var(--y) + var(--ey))*1px),calc((var(--z) + var(--ez))*1px))}
.kf61-board{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d;transform:translate3d(calc(var(--gx,0)*1px),calc(var(--gy,0)*1px),calc(var(--gz,0)*1px))}
.kf61-f{position:absolute;left:0;top:0;backface-visibility:hidden}
.kf61-f-front,.kf61-f-back{width:calc(var(--w)*1px);height:calc(var(--h)*1px);margin-left:calc(var(--w)*-.5px);margin-top:calc(var(--h)*-.5px)}
.kf61-f-front{transform:translateZ(calc(var(--d)*.5px))}
.kf61-f-back{transform:rotateY(180deg) translateZ(calc(var(--d)*.5px))}
.kf61-f-right,.kf61-f-left{width:calc(var(--d)*1px);height:calc(var(--h)*1px);margin-left:calc(var(--d)*-.5px);margin-top:calc(var(--h)*-.5px)}
.kf61-f-right{transform:rotateY(90deg) translateZ(calc(var(--w)*.5px))}
.kf61-f-left{transform:rotateY(-90deg) translateZ(calc(var(--w)*.5px))}
.kf61-f-top,.kf61-f-bottom{width:calc(var(--w)*1px);height:calc(var(--d)*1px);margin-left:calc(var(--w)*-.5px);margin-top:calc(var(--d)*-.5px)}
.kf61-f-top{transform:rotateX(90deg) translateZ(calc(var(--h)*.5px))}
.kf61-f-bottom{transform:rotateX(-90deg) translateZ(calc(var(--h)*.5px))}
.kf61-oak-v{background:radial-gradient(ellipse at 50% 40%,rgba(255,236,200,.35),transparent 55%),repeating-linear-gradient(90deg,rgba(90,52,18,.16) 0 1px,transparent 1px 7px),linear-gradient(180deg,#e8c98a,#c89245 48%,#dfb56a)}
.kf61-oak-h{background:repeating-linear-gradient(180deg,rgba(90,52,18,.16) 0 1px,transparent 1px 7px),linear-gradient(90deg,#e8c98a,#c89245 42%,#e6c27a 70%,#b8843e)}
.kf61-oak-p{background:radial-gradient(ellipse at 50% 45%,rgba(255,244,220,.45),rgba(80,40,10,.16) 78%),repeating-linear-gradient(90deg,rgba(90,52,18,.13) 0 1px,transparent 1px 9px),linear-gradient(180deg,#f3d7a4,#e0b56a 55%,#d7a85a)}
.kf61-core{background:radial-gradient(circle at 14% 22%,#8d5a20 0 .85px,transparent 1.15px),radial-gradient(circle at 32% 64%,#fff3c4 0 1.15px,transparent 1.5px),radial-gradient(circle at 48% 36%,#c9842c 0 .75px,transparent 1.1px),radial-gradient(circle at 66% 78%,#a86a24 0 .9px,transparent 1.25px),radial-gradient(circle at 82% 28%,#ffe7a8 0 1px,transparent 1.35px),radial-gradient(circle at 24% 84%,#e0a040 0 .7px,transparent 1.05px),linear-gradient(180deg,#ffe08a,#f6c453 46%,#f0b63c)}
.kf61-slot{background:#1a120c;box-shadow:inset 0 0 0 1px #000}
.kf61-dowel,.kf61-bore{position:absolute;left:0;top:0;border-radius:3px;transform-style:preserve-3d;transform:translate3d(calc(var(--dx)*1px),calc(var(--dy)*1px),calc(var(--dz)*1px))}
.kf61-dowel{width:32px;height:8px;margin-left:-16px;margin-top:-4px;background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,255,255,0) 42%,rgba(0,50,16,.18)),linear-gradient(90deg,#125c2c,#2f9a48 34%,#7ee894 50%,#1f7a38 68%,#0c4a22);box-shadow:inset 0 1px 0 rgba(255,255,255,.65),inset 0 -1px 0 rgba(0,40,10,.28),0 0 5px rgba(90,190,80,.28)}
.kf61-bore{width:16px;height:11px;margin-left:-8px;margin-top:-5.5px;background:radial-gradient(circle at 30% 30%,#4a3828,#120e0a 60%)}
.kf61-dowel::after,.kf61-bore::after{content:"";position:absolute;inset:0;border-radius:inherit;background:inherit;transform:rotateX(90deg)}.kf61-dowel::before{content:"";position:absolute;left:0;right:0;top:-5px;height:9px;pointer-events:none;background:radial-gradient(circle at 6px 6px,rgba(255,248,214,.98) 0 2.2px,transparent 3px),radial-gradient(circle at 15px 4px,rgba(255,228,150,.96) 0 1.7px,transparent 2.5px),radial-gradient(circle at 24px 7px,rgba(255,252,232,.98) 0 2.4px,transparent 3.1px),linear-gradient(180deg,rgba(255,236,170,.55),rgba(255,236,170,0));filter:blur(.15px)}
.kf61-tag{position:absolute;left:0;top:0;white-space:nowrap;font:600 11px/1 system-ui,sans-serif;color:#24180f;background:#fff;border:1px solid rgba(36,24,15,.2);border-radius:999px;padding:3px 7px;pointer-events:none;opacity:0;transform:translateZ(28px) translate(-50%,-50%) translate(var(--tx),var(--ty)) rotateY(calc(var(--ry)*-1deg)) rotateX(calc(var(--rx)*-1deg))}
.kf61.kf61-ex .kf61-tag{opacity:1;transition:opacity .35s .25s}
.kf61.kf61-ghost .kf61-oak-v,.kf61.kf61-ghost .kf61-oak-h,.kf61.kf61-ghost .kf61-core{opacity:.42}
.kf61-cap{position:absolute;left:0;right:0;bottom:8px;margin:0;text-align:center;font:500 12px/1.35 system-ui,sans-serif;color:#5c4632;padding:0 16px}
@media (prefers-reduced-motion:reduce){
  .kf61-part,.kf61-tag,.kf61-hud button:first-child{transition:none;animation:none}
}

/* 62 Staggered dowel seat */
#demo-root .stage.fresh-stage:has(.kf62){background:#fff;padding:0;min-height:460px}
.dm.kf62,#demo-root .stage.fresh-stage .dm.kf62{height:460px;background:#fff;color:#24180f;font-family:system-ui,sans-serif;display:flex;flex-direction:column;user-select:none}
.kf62-bench{position:relative;flex:1}
.kf62-end{position:absolute;top:48px;left:8%;width:148px;height:250px;border-radius:8px;background:repeating-linear-gradient(90deg,rgba(90,52,18,.14) 0 1px,transparent 1px 8px),linear-gradient(180deg,#e8c98a,#c89245 55%,#e4c07a);box-shadow:0 16px 28px rgba(70,42,16,.12),inset 0 0 0 1px rgba(80,48,18,.28)}
.kf62-end b{position:absolute;left:10px;bottom:8px;font:700 12px/1 system-ui,sans-serif}
.kf62-f,.kf62-bk{position:absolute;left:8px;font:600 9px/1 system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#6b5038}
.kf62-f{top:8px}
.kf62-bk{bottom:28px}
.kf62-groove{position:absolute;left:50%;top:16px;bottom:16px;width:14px;margin-left:-7px;border-radius:2px;background:#24180f}
.kf62-hole,.kf62-dow{position:absolute;left:var(--p);top:var(--q);width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%}
.kf62-hole{background:radial-gradient(circle at 35% 35%,#120e0a 0 30%,#3a2a20 72%,#6b5342);box-shadow:inset 0 2px 3px #000}
.kf62-dow{background:radial-gradient(circle at 35% 35%,#fff6e4,#e0b56a 48%,#a56b30);box-shadow:0 2px 4px rgba(0,0,0,.28);transition:left .35s,top .35s}
.kf62-rail{touch-action:none;cursor:grab;transform:translate3d(var(--x),var(--y),0);z-index:2}
.kf62-rail.is-drag{cursor:grabbing;transition:none}
.kf62.is-seat .kf62-rail{opacity:.4}
.kf62.is-miss .kf62-rail{box-shadow:0 0 0 2px #a33,0 16px 28px rgba(70,42,16,.12)}
.kf62-bar{display:flex;align-items:center;gap:12px;padding:0 16px 14px}
.kf62-bar button{border:1px solid #24180f;background:#fff;color:#24180f;border-radius:999px;padding:7px 12px;font:600 12px/1 system-ui,sans-serif;cursor:pointer}
.kf62-bar button[aria-pressed="true"]{background:#24180f;color:#fff}
.kf62-msg{font:500 13px/1.3 system-ui,sans-serif;color:#5c4632}
@media (prefers-reduced-motion:reduce){.kf62-dow,.kf62-rail{transition:none}}

/* 63 Panel in the groove */
#demo-root .stage.fresh-stage:has(.kf63){background:#fff;padding:0;min-height:460px}
.dm.kf63,#demo-root .stage.fresh-stage .dm.kf63{height:460px;background:#fff;color:#24180f;font-family:system-ui,sans-serif;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;user-select:none}
.kf63-cut{position:relative;width:min(420px,92%);height:280px}
.kf63-rail{position:absolute;left:50%;width:176px;height:52px;margin-left:-88px;border-radius:3px;z-index:2;background:repeating-linear-gradient(180deg,rgba(90,52,18,.15) 0 1px,transparent 1px 7px),linear-gradient(90deg,#e8c98a,#c89245 50%,#e0bc78);box-shadow:inset 0 0 0 1px rgba(80,48,18,.25)}
.kf63-rail span{position:absolute;right:-78px;top:16px;font:600 11px/1 system-ui,sans-serif;color:#6b5038;white-space:nowrap}
.kf63-top{top:18px}
.kf63-bot{bottom:18px}
.kf63-rail i{position:absolute;left:44px;width:88px;height:14px;background:#1c140e}
.kf63-top i{bottom:0}
.kf63-bot i{top:0}
.kf63-panel{position:absolute;left:50%;top:56px;width:62px;height:168px;margin-left:-31px;z-index:1;border-radius:1px;background:radial-gradient(ellipse at 50% 40%,rgba(255,244,220,.4),rgba(80,40,10,.12)),repeating-linear-gradient(90deg,rgba(90,52,18,.14) 0 1px,transparent 1px 8px),linear-gradient(#f0d5a2,#d7ae68);box-shadow:inset 0 0 0 1px rgba(80,48,18,.25);transform:translate(calc(var(--out,0)*190px),calc(var(--f,0)*9px));transition:transform .55s cubic-bezier(.16,.84,.2,1);display:grid;place-items:center}
.kf63-panel b{font:600 11px/1.2 system-ui,sans-serif;text-align:center;padding:0 4px}
.kf63-bar{display:flex;align-items:center;gap:14px}
.kf63-bar label{display:flex;align-items:center;gap:8px;font:600 12px/1 system-ui,sans-serif}
.kf63-bar input{accent-color:#24180f;width:140px}
.kf63-bar button{border:1px solid #24180f;background:#fff;color:#24180f;border-radius:999px;padding:7px 12px;font:600 12px/1 system-ui,sans-serif;cursor:pointer}
.kf63-bar button[aria-pressed="true"]{background:#24180f;color:#fff}
.kf63-msg{margin:0;font:500 13px/1.35 system-ui,sans-serif;color:#5c4632;text-align:center;padding:0 16px}
@media (prefers-reduced-motion:reduce){.kf63-panel{transition:none}}