/* Buttons showcase — t1–t40 */

#demo-root .stage {
  min-height: 112px;
  padding: 28px 20px;
  overflow: hidden;
  align-content: center;
}
#demo-root .item:has(.t18) {
  overflow: visible;
}
#demo-root .item:has(.t18) .stage {
  overflow: visible;
}

.t {
  /* Real CTA button — not a square tile */
  width: auto;
  min-width: 148px;
  max-width: 100%;
  height: auto;
  min-height: 48px;
  padding: 14px 28px;
  aspect-ratio: auto;
  position: relative;
  border: 0;
  cursor: pointer;
  color: #fff;
  font: 700 14px/1.1 system-ui, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: #0a0a0a;
  border-radius: 999px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  isolation: isolate;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}

/* 1 Conic Border */
@property --a {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.t1 {
  background: conic-gradient(from var(--a), #0ff, #f0f, #ff0, #0ff);
  animation: spin 3s linear infinite;
}
.t1::after {
  content: '';
  position: absolute;
  inset: 3px;
  background: #050505;
  border-radius: 15px;
  z-index: -1;
}
.t1::before {
  content: '';
  position: absolute;
  inset: 0;
  background: inherit;
  filter: blur(18px);
  z-index: -2;
  opacity: .7;
}
@keyframes spin { to { --a: 360deg; } }

/* 2 Liquid Fill */
.t2 { border: 2px solid #29f; }
.t2::before {
  content: '';
  position: absolute;
  left: -50%;
  width: 200%;
  aspect-ratio: 1;
  top: 110%;
  background: #29f;
  border-radius: 40%;
  animation: wave 5s linear infinite;
  transition: top 1s;
  z-index: -1;
}
.t2:hover::before { top: -40%; }
@keyframes wave { to { transform: rotate(360deg); } }

/* 3 RGB Glitch */
.t3 { background: #111; font-size: 22px; }
.t3 b { position: relative; }
.t3 b::before,
.t3 b::after {
  content: attr(data-t);
  position: absolute;
  left: 0;
  top: 0;
}
.t3 b::before {
  color: #f0f;
  animation: gl 1.6s infinite steps(2);
}
.t3 b::after {
  color: #0ff;
  animation: gl 1.3s infinite reverse steps(2);
  mix-blend-mode: screen;
}
@keyframes gl {
  0%   { transform: translate(0); clip-path: inset(0 0 60% 0); }
  25%  { transform: translate(-4px, 2px); clip-path: inset(40% 0 20% 0); }
  50%  { transform: translate(4px, -2px); clip-path: inset(70% 0 0 0); }
  75%  { transform: translate(-2px); clip-path: inset(10% 0 70% 0); }
  100% { transform: translate(3px); clip-path: inset(0 0 60% 0); }
}

/* 4 Magnetic */
.t4 {
  background: radial-gradient(circle, #333, #000);
  border: 1px solid #444;
  transition: transform .2s;
}

/* 5 Particle Burst */
.t5 { background: linear-gradient(135deg, #ff6a00, #ee0979); }
.pt {
  position: fixed;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 99;
}

/* 6 Aurora */
.t6 {
  background: linear-gradient(120deg, #00ffa3, #03e1ff, #dc1fff, #00ffa3);
  background-size: 300% 300%;
  animation: au 6s ease infinite;
  color: #000;
}
.t6::after {
  content: '';
  position: absolute;
  inset: 0;
  background: inherit;
  filter: blur(30px);
  z-index: -1;
}
@keyframes au { 50% { background-position: 100% 50%; } }

/* 7 3D Tilt + Glare */
.t7 {
  background: linear-gradient(145deg, #1d2b64, #f8cdda);
  transform-style: preserve-3d;
  transition: transform .1s;
}
.t7 i {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(255, 255, 255, .5), transparent 50%);
  mix-blend-mode: overlay;
}

/* 8 Ripple */
.t8 { background: #0d47a1; }
.rp {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, .5);
  transform: scale(0);
  animation: rp .7s ease-out forwards;
  pointer-events: none;
}
@keyframes rp { to { transform: scale(4); opacity: 0; } }

/* 9 Glass Shine */
.t9 {
  background:
    radial-gradient(circle at 30% 30%, #ff00cc55, transparent 50%),
    radial-gradient(circle at 70% 70%, #3333ff66, transparent 50%);
}
.t9 i {
  position: absolute;
  inset: 18%;
  border-radius: 14px;
  background: rgba(255, 255, 255, .08);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .25);
  overflow: hidden;
  z-index: -1;
}
.t9 i::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent);
  transform: skewX(-20deg);
  animation: sh 3s infinite;
}
@keyframes sh {
  60%, 100% { left: 160%; }
}

/* 10 Cyber Scanline */
.t10 {
  background: #fcee0a;
  color: #000;
  border-radius: 0;
  clip-path: polygon(0 0, 85% 0, 100% 15%, 100% 100%, 15% 100%, 0 85%);
  font-weight: 900;
}
.t10::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .15) 0 2px, transparent 2px 4px);
  animation: sc 1s linear infinite;
}
@keyframes sc { to { background-position: 0 8px; } }

/* 11 Neon Flicker */
.t11 {
  background: #050505;
  border: 2px solid #ff2a6d;
  color: #ff2a6d;
  box-shadow: 0 0 20px #ff2a6d, inset 0 0 20px #ff2a6d;
  text-shadow: 0 0 10px #ff2a6d;
  font-size: 22px;
  animation: fl 4s infinite;
}
@keyframes fl {
  0%, 19%, 23%, 60%, 64%, 100% { opacity: 1; }
  20%, 62% { opacity: .3; }
}

/* 12 Morphing Blob */
.t12 { background: transparent; }
.t12::before {
  content: '';
  position: absolute;
  inset: 12%;
  background: linear-gradient(45deg, #f72585, #7209b7, #4cc9f0);
  animation: mo 8s ease-in-out infinite;
  z-index: -1;
}
@keyframes mo {
  0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  50% {
    border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
    transform: rotate(180deg);
  }
}

/* 13 Starfield */
.t13 { background: radial-gradient(#0b1033, #000); }
.t13 canvas,
.t15 canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

/* 14 Holographic Foil */
.t14 {
  background: linear-gradient(115deg, #ff9a9e, #fad0c4, #a1c4fd, #c2e9fb, #d4fc79, #ff9a9e);
  background-size: 400% 400%;
  color: #222;
  animation: au 5s linear infinite;
}
.t14::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .3) 0 2px, transparent 2px 8px);
  mix-blend-mode: overlay;
}

/* 15 Plasma — canvas driven */

/* 16 Sonar Pulse */
.t16 { background: #001a12; color: #0f8; }
.t16 i {
  position: absolute;
  width: 30%;
  aspect-ratio: 1;
  border: 2px solid #0f8;
  border-radius: 50%;
  animation: so 2.4s ease-out infinite;
}
.t16 i:nth-child(2) { animation-delay: .8s; }
.t16 i:nth-child(3) { animation-delay: 1.6s; }
@keyframes so {
  from { transform: scale(.3); opacity: 1; }
  to   { transform: scale(3.3); opacity: 0; }
}

/* 17 Text Scramble */
.t17 {
  background: #000;
  border: 1px solid #0f0;
  color: #0f0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 18px;
}

/* 18 Shatter on Click */
.t18 {
  background: transparent;
  overflow: visible;
}
.t18 .sh {
  position: absolute;
  background: linear-gradient(135deg, #f0f0f0, #6a6a6a);
  background-size: 500% 500%;
  transition: transform .8s cubic-bezier(.2, .8, .3, 1), opacity .8s;
}
.t18 em {
  z-index: 2;
  font-style: normal;
  color: #000;
}

/* 19 Spotlight */
.t19 {
  background: #111;
  border: 1px solid #222;
}
.t19::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle 90px at var(--x, 50%) var(--y, 50%), rgba(255, 230, 150, .45), transparent);
  z-index: -1;
}

/* 20 Gooey Metaballs */
.t20 {
  background: #000;
  filter: url(#goo);
}
.t20 i {
  position: absolute;
  width: 34%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #ff3cac;
}
.t20 i:nth-child(1) { animation: o1 4s ease-in-out infinite; }
.t20 i:nth-child(2) {
  background: #784ba0;
  animation: o1 4s ease-in-out infinite reverse;
}
.t20 i:nth-child(3) {
  background: #2b86c5;
  animation: o2 3s ease-in-out infinite;
}
@keyframes o1 {
  0%, 100% { transform: translate(-40%, -20%); }
  50%      { transform: translate(45%, 25%); }
}
@keyframes o2 {
  0%, 100% { transform: translate(35%, -35%); }
  50%      { transform: translate(-30%, 40%); }
}

/* ===== NEW 21–25 ===== */

/* 21 Elastic Squash Press */
.t21 {
  background: linear-gradient(160deg, #7c5cff, #00e5ff);
  color: #061018;
  font-weight: 800;
  transition: transform .18s cubic-bezier(.34, 1.56, .64, 1);
  transform-origin: 50% 100%;
  will-change: transform;
}
.t21:hover { transform: scale(1.04, .96); }
.t21:active,
.t21.is-squash {
  transform: scale(1.12, .78);
  transition-duration: .08s;
}
.t21.is-bounce {
  animation: squash-bounce .55s cubic-bezier(.34, 1.7, .64, 1);
}
@keyframes squash-bounce {
  0%   { transform: scale(1.12, .78); }
  40%  { transform: scale(.92, 1.12); }
  70%  { transform: scale(1.04, .96); }
  100% { transform: scale(1); }
}

/* 22 Ink-Bleed Fill */
.t22 {
  background: #0c0f18;
  border: 1px solid #2a3348;
  color: #e8edf8;
  overflow: hidden;
}
.t22 .ink {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle, #1a1a2e 0%, #0a1628 40%, #051018 70%);
  box-shadow:
    0 0 0 18px rgba(12, 20, 40, .55),
    0 0 40px 10px rgba(0, 40, 80, .35);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  transition: transform .9s cubic-bezier(.2, .8, .2, 1), opacity .3s;
}
.t22:hover .ink,
.t22.is-bleed .ink {
  transform: translate(-50%, -50%) scale(28);
  opacity: 1;
}
.t22 .lbl { position: relative; z-index: 1; mix-blend-mode: difference; }

/* 23 Typewriter Label Reveal */
.t23 {
  background: #10141f;
  border: 1px solid #2a3348;
  color: #93a0b8;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .08em;
  font-size: 14px;
}
.t23 .tw {
  display: inline-block;
  min-width: 7ch;
  text-align: left;
  border-right: 2px solid transparent;
  white-space: nowrap;
  overflow: hidden;
}
.t23:hover .tw,
.t23.is-typing .tw {
  color: #00e5ff;
  border-right-color: #00e5ff;
  animation: caret .7s step-end infinite;
}
@keyframes caret {
  50% { border-right-color: transparent; }
}

/* 24 Dual-Tone Split Wipe */
.t24 {
  background: #111;
  color: #fff;
  overflow: hidden;
  font-weight: 800;
}
.t24::before,
.t24::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  transition: transform .55s cubic-bezier(.65, 0, .35, 1);
}
.t24::before {
  background: #ff2bd6;
  clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
  transform: translateX(-101%);
}
.t24::after {
  background: #00e5ff;
  clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
  transform: translateX(101%);
}
.t24:hover::before,
.t24:hover::after {
  transform: translateX(0);
}
.t24 .lbl {
  position: relative;
  z-index: 1;
  transition: color .35s .15s;
}
.t24:hover .lbl { color: #0a0a0a; }

/* 25 Orbiting Dashed Border */
@property --orb {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.t25 {
  background: #0a0d16;
  color: #f4f7ff;
  border-radius: 18px;
  isolation: isolate;
}
.t25::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(
    from var(--orb),
    #7c5cff 0deg,
    transparent 40deg,
    transparent 80deg,
    #00e5ff 100deg,
    transparent 140deg,
    transparent 200deg,
    #ff2bd6 220deg,
    transparent 260deg,
    transparent 320deg,
    #7c5cff 360deg
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: orb-spin 2.8s linear infinite;
  z-index: -1;
}
.t25::after {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 14px;
  border: 1.5px dashed rgba(124, 92, 255, .45);
  animation: orb-spin 8s linear infinite reverse;
  z-index: -1;
  pointer-events: none;
}
.t25:hover::before { animation-duration: 1.2s; }
@keyframes orb-spin { to { --orb: 360deg; } }

.t:hover { z-index: 2; }
.t:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}


/* ===== NEW 26–40 ===== */
/* 26 Pulse Ring */
.t26{background:#0c1020;color:#a5b4fc;border:1px solid #2a3355}
.t26::before,.t26::after{content:'';position:absolute;inset:-6px;border-radius:22px;border:2px solid #7c5cff;opacity:0;pointer-events:none}
.t26:hover::before,.t26.is-pulse::before{animation:pulseRing 1.4s ease-out infinite}
.t26:hover::after,.t26.is-pulse::after{animation:pulseRing 1.4s ease-out .45s infinite}
@keyframes pulseRing{0%{transform:scale(.92);opacity:.85}100%{transform:scale(1.35);opacity:0}}

/* 27 Shear Skew Hover */
.t27{background:linear-gradient(135deg,#1a1030,#0a0d16);color:#f472b6;overflow:visible;border:1px solid #3b1d4a}
.t27 span{display:inline-block;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.t27:hover span{transform:skewX(-18deg) translateX(4px) scale(1.05);text-shadow:4px 0 0 #00e5ff55,-4px 0 0 #ff2bd655}
.t27::before{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 40%,#f472b622 50%,transparent 60%);transform:translateX(-120%) skewX(-20deg);transition:transform .55s}
.t27:hover::before{transform:translateX(120%) skewX(-20deg)}

/* 28 Nested Border Chase */
@property --ch{syntax:'<angle>';initial-value:0deg;inherits:false}
.t28{background:#090b12;color:#e2e8f0;isolation:isolate}
.t28::before,.t28::after{content:'';position:absolute;border-radius:inherit;padding:2px;z-index:-1;
  background:conic-gradient(from var(--ch),#00e5ff,#7c5cff,#ff2bd6,transparent 40%,transparent 70%,#00e5ff);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:chaseSpin 2.4s linear infinite}
.t28::before{inset:0}
.t28::after{inset:8px;border-radius:12px;animation-direction:reverse;animation-duration:3.2s;opacity:.7}
.t28:hover::before{animation-duration:1s}
@keyframes chaseSpin{to{--ch:360deg}}

/* 29 Vertical Wipe Label */
.t29{background:#111827;color:#fff;overflow:hidden;font-weight:800}
.t29 .a,.t29 .b{position:absolute;inset:0;display:grid;place-items:center;transition:transform .55s cubic-bezier(.65,0,.35,1)}
.t29 .b{background:#00e5ff;color:#041018;transform:translateY(100%)}
.t29:hover .a{transform:translateY(-100%)}
.t29:hover .b{transform:translateY(0)}

/* 30 Soft Neumorph Press */
.t30{
  background:#1a1f2e;color:#c7d2fe;border-radius:22px;
  box-shadow:10px 10px 22px #0a0d14,-8px -8px 18px #2a3348,inset 0 0 0 transparent;
  transition:box-shadow .25s,transform .2s,color .2s}
.t30:hover{color:#fff}
.t30:active,.t30.is-press{
  transform:scale(.96);
  box-shadow:inset 8px 8px 16px #0a0d14,inset -6px -6px 14px #2a3348;
  color:#a5b4fc}

/* 31 Pixelate Dissolve */
.t31{background:#0a0d16;color:#f8fafc;overflow:hidden}
.t31 .lbl{position:relative;z-index:2;transition:opacity .35s}
.t31 .px{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;opacity:0;pointer-events:none;z-index:1;transition:opacity .2s}
.t31.is-pix .lbl{opacity:0}
.t31.is-pix .px{opacity:1}

/* 32 Gradient Text Shimmer */
.t32{background:#0b0f1a;border:1px solid #2a3348}
.t32 span{
  background:linear-gradient(90deg,#94a3b8 0%,#fff 25%,#7c5cff 50%,#00e5ff 75%,#94a3b8 100%);
  background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-weight:800;letter-spacing:.12em;
  animation:shimText 3s linear infinite}
.t32:hover span{animation-duration:1.1s}
@keyframes shimText{to{background-position:-200% 0}}

/* 33 Corner Peel */
.t33{background:#1e293b;color:#e2e8f0;overflow:hidden}
.t33 .face{position:relative;z-index:2;transition:opacity .2s .15s}
.t33 .under{position:absolute;inset:0;display:grid;place-items:center;background:#7c5cff;color:#fff;font-weight:800;z-index:1}
.t33 .corner{position:absolute;right:0;bottom:0;width:36px;height:36px;z-index:3;pointer-events:none;
  background:linear-gradient(135deg,transparent 50%,#cbd5e1 50%);
  filter:drop-shadow(-2px -2px 2px #0006);
  transform-origin:100% 100%;transition:width .45s cubic-bezier(.2,.8,.2,1),height .45s cubic-bezier(.2,.8,.2,1)}
.t33:hover .corner{width:140%;height:140%}
.t33:hover .face{opacity:0}

/* 34 Magnetic Twins */
.t34{background:#0a0d16;border:1px solid #334155;overflow:visible}
.t34 .twin{position:absolute;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-weight:800;font-size:14px;
  transition:transform .2s linear;will-change:transform}
.t34 .a{background:#7c5cff;left:22%;top:50%;translate:-50% -50%}
.t34 .b{background:#00e5ff;color:#041018;left:78%;top:50%;translate:-50% -50%}
.t34:hover .a,.t34.is-mag .a{box-shadow:0 0 20px #7c5cff88}
.t34:hover .b,.t34.is-mag .b{box-shadow:0 0 20px #00e5ff88}

/* 35 Sticker Peel */
.t35{background:transparent;overflow:visible}
.t35 .sticker{
  display:grid;place-items:center;width:100%;height:100%;border-radius:16px;
  background:#fbbf24;color:#1c1917;font-weight:900;letter-spacing:.1em;
  box-shadow:0 8px 0 #b45309,0 12px 24px #0006;
  transform-origin:left center;transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .4s}
.t35:hover .sticker{
  transform:perspective(600px) rotateY(-28deg) translateX(6px);
  box-shadow:4px 10px 0 #b45309,12px 16px 28px #0008}

/* 36 LED Matrix Label */
.t36{background:#050608;border:2px solid #1a1f2a;padding:8px}
.t36 .led{width:72%;height:72%;image-rendering:pixelated;border-radius:4px}

/* 37 Breadcrumb Morph CTA */
.t37{background:#111827;border:1px solid #334155;color:#94a3b8;overflow:hidden}
.t37 .crumbs,.t37 .cta{position:absolute;inset:0;display:grid;place-items:center;transition:transform .5s cubic-bezier(.65,0,.35,1),opacity .35s}
.t37 .crumbs{grid-auto-flow:column;gap:4px;font:700 11px ui-monospace,monospace;letter-spacing:.08em}
.t37 .crumbs b{opacity:.4;font-style:normal;font-weight:400}
.t37 .crumbs i{font-style:normal}
.t37 .cta{font-weight:800;color:#041018;background:#22d3ee;transform:translateY(110%);opacity:0}
.t37:hover .crumbs{transform:translateY(-110%);opacity:0}
.t37:hover .cta{transform:none;opacity:1}

/* 38 Split Flapper */
.t38{background:#0f172a;color:#e2e8f0;perspective:500px;font-weight:800}
.t38 .flap{position:absolute;left:0;right:0;height:50%;overflow:hidden;display:grid;place-items:center;background:#1e293b;backface-visibility:hidden;color:transparent}
.t38 .flap.top{top:0;border-bottom:1px solid #0a0d16;transform-origin:bottom center;z-index:2}
.t38 .flap.bot{bottom:0;transform-origin:top center;z-index:1}
.t38 .flap.top::before,.t38 .flap.bot::before{content:attr(data-t);position:absolute;left:0;right:0;display:grid;place-items:center;height:200%;color:#e2e8f0}
.t38 .flap.top::before{top:0}.t38 .flap.bot::before{bottom:0}
.t38 .next{position:absolute;inset:0;display:grid;place-items:center;background:#7c5cff;opacity:0;z-index:0}
.t38.is-flip .flap.top{animation:flapTop .55s forwards}
.t38.is-flip .flap.bot{animation:flapBot .55s .08s forwards}
.t38.is-flip .next{opacity:1;transition:opacity .2s .25s}
@keyframes flapTop{to{transform:rotateX(-90deg);opacity:.3}}
@keyframes flapBot{0%{transform:none}40%{transform:rotateX(12deg)}100%{transform:none}}

/* 39 Liquid Glass Blob */
.t39{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(10px) saturate(160%);color:#f8fafc;overflow:hidden}
.t39 .blob{position:absolute;width:70%;height:70%;border-radius:40% 60% 55% 45%;background:radial-gradient(circle at 30% 30%,#a5b4fc,#7c5cff88 45%,#00e5ff55);
  filter:blur(8px);opacity:.85;animation:blobMorph 6s ease-in-out infinite;z-index:0;left:15%;top:15%}
.t39 span{position:relative;z-index:1;font-weight:800;letter-spacing:.14em;text-shadow:0 1px 8px #0008}
.t39:hover .blob{animation-duration:2.2s;filter:blur(6px) brightness(1.2)}
@keyframes blobMorph{0%,100%{border-radius:40% 60% 55% 45%;transform:rotate(0) scale(1)}50%{border-radius:60% 40% 45% 55%;transform:rotate(25deg) scale(1.12)}}

/* 40 Stamp Press */
.t40{background:#1c1410;border:2px dashed #7a4a28;color:#f6e7d0;font-family:Georgia,serif;overflow:visible}
.t40 .inkpad{position:relative;z-index:1;transition:transform .2s,opacity .2s}
.t40 .press{position:absolute;inset:18%;border:3px solid #c0392b;border-radius:8px;color:#c0392b;font:900 12px/1.1 ui-monospace,monospace;
  display:grid;place-items:center;letter-spacing:.1em;transform:scale(1.4) translateY(-20px) rotate(-12deg);opacity:0;
  box-shadow:inset 0 0 0 2px #c0392b44;pointer-events:none}
.t40 .press::after{content:'DONE'}
.t40.is-stamp .inkpad{opacity:0;transform:scale(.9)}
.t40.is-stamp .press{animation:stampDown .45s cubic-bezier(.2,1.4,.3,1) forwards}
@keyframes stampDown{0%{opacity:0;transform:scale(1.5) translateY(-24px) rotate(-18deg)}60%{opacity:1;transform:scale(1.05) rotate(-8deg)}100%{opacity:.95;transform:scale(1) rotate(-12deg)}}

@media (prefers-reduced-motion: reduce) {
  .t1, .t2::before, .t3 b::before, .t3 b::after,
  .t6, .t6::after, .t9 i::after, .t10::after, .t11,
  .t12::before, .t14, .t16 i, .t20 i,
  .t25::before, .t25::after,
  .t26::before, .t26::after, .t28::before, .t28::after, .t32 span, .t39 .blob {
    animation: none !important;
  }
  .t21, .t22 .ink, .t24::before, .t24::after {
    transition: none !important;
  }
  .t31 .px, .t33 .corner, .t35 .sticker, .t37 .crumbs, .t37 .cta { transition: none !important; }
  .t40.is-stamp .press, .t38.is-flip .flap.top, .t38.is-flip .flap.bot { animation: none !important; opacity: .95; transform: none; }
}


/* Canvas / rich-effect buttons: keep CTA shape but allow a bit more width */
.t13, .t15, .t31, .t36, .t39 {
  min-width: 180px;
  min-height: 52px;
  padding: 16px 32px;
  border-radius: 16px; /* soft rect, still a button */
}
.t canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}


/* Nav-effect demos 41-60: show the pill at tile size */
.item .stage > .tn { font-size: 15px; }

/*fx:hole*/
/* Black Hole: letters spiral into a black hole with a glowing ring, then spit back out */
.tn[data-fx=hole] { background: #090612; border-color: color-mix(in srgb, var(--c) 40%, transparent); }
.tn[data-fx=hole]::before { content: ""; position: absolute; left: 50%; top: 50%; width: 2.6em; height: 2.6em; margin: -1.3em 0 0 -1.3em; border-radius: 50%; z-index: 1;
  background: radial-gradient(circle, #000 0 38%, transparent 40%), conic-gradient(from var(--tn-a), #ff9a3c, #ffe08a, #ff3d6e, #7c3aed, #ff9a3c);
  -webkit-mask: radial-gradient(circle, #000 0 58%, transparent 70%); mask: radial-gradient(circle, #000 0 58%, transparent 70%);
  transform: scale(0); transition: transform .5s cubic-bezier(.3, 1.6, .5, 1) .15s; animation: tn-spin-a 1s linear infinite; }
.tn[data-fx=hole] .tn-ch { display: inline-block; white-space: pre; transition: transform .45s cubic-bezier(.3, 1.3, .5, 1) calc(var(--i) * 18ms), opacity .45s calc(var(--i) * 18ms); }
.tn[data-fx=hole]:is(:hover, :focus-visible) { box-shadow: 0 0 30px -6px var(--c); }
.tn[data-fx=hole]:is(:hover, :focus-visible)::before { transform: scale(1); }
.tn[data-fx=hole]:is(:hover, :focus-visible) .tn-ch { transform: translateX(var(--dx)) rotate(540deg) scale(0); opacity: 0; transition: transform .6s cubic-bezier(.6, 0, .9, .5) calc(var(--d) * 22ms), opacity .6s calc(var(--d) * 22ms); }
@keyframes tn-spin-a { to { --tn-a: 360deg; } }
/*end*/

/*fx:shatter*/
/* Shatter: click and the button breaks into glass shards that fall, then it rebuilds */
.tn[data-fx=shatter] { border-color: transparent; color: #0b1220; background: linear-gradient(135deg, #e0f2fe, var(--c) 60%, #0e7490); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 6px 20px -8px var(--c); }
.tn[data-fx=shatter]:is(:hover, :focus-visible) { color: #0b1220; transform: scale(1.05); }
.tn[data-fx=shatter].tn-broke { opacity: 0; transform: scale(.6); transition: none; }
.tn[data-fx=shatter].tn-rebuild { animation: tn-rebuild .55s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes tn-rebuild { from { opacity: 0; transform: scale(.4); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
/*end*/

/*fx:bolt*/
/* Lightning: electric arcs crackle around the border while you hover */
.tn[data-fx=bolt] { overflow: visible; background: #050816; border-color: color-mix(in srgb, var(--c) 35%, transparent); color: #e0f2fe; }
.tn[data-fx=bolt] svg { position: absolute; left: -6px; top: -6px; width: calc(100% + 12px); height: calc(100% + 12px); pointer-events: none; overflow: visible; opacity: 0; transition: opacity .15s; }
.tn[data-fx=bolt] svg path { fill: none; stroke: #fff; stroke-width: 1.4; stroke-linejoin: round; filter: drop-shadow(0 0 2px var(--c)) drop-shadow(0 0 6px var(--c)); }
.tn[data-fx=bolt] svg path + path { stroke: var(--c); stroke-width: 1; opacity: .7; }
.tn[data-fx=bolt]:is(:hover, :focus-visible) { text-shadow: 0 0 8px var(--c); box-shadow: inset 0 0 18px -6px var(--c), 0 0 26px -8px var(--c); }
.tn[data-fx=bolt]:is(:hover, :focus-visible) svg { opacity: 1; }
/*end*/

/*fx:pixel*/
/* Pixel Dissolve: the body breaks into pixels that scatter, leaving only glowing text */
.tn[data-fx=pixel] { background: transparent; border-color: transparent; color: #0b0f18; }
.tn[data-fx=pixel] .tn-px { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--cols), 1fr); border-radius: inherit; overflow: visible; z-index: 0; }
.tn[data-fx=pixel] .tn-px b { background: var(--c); transition: transform .5s cubic-bezier(.3, .8, .4, 1) var(--dl), opacity .5s var(--dl); }
.tn[data-fx=pixel] .tn-px b:first-child { border-radius: 999px 0 0 999px; }
.tn[data-fx=pixel] .tn-l { transition: color .3s, text-shadow .3s; }
.tn[data-fx=pixel]:is(:hover, :focus-visible) .tn-px b { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; }
.tn[data-fx=pixel]:is(:hover, :focus-visible) .tn-l { color: var(--c); text-shadow: 0 0 10px var(--c); }
/*end*/

/*fx:wipe-demo*/
/* Circle Wipe: the page-change effect from the nav, shown inside the tile */
.tn[data-fx=wipe] { border-color: color-mix(in srgb, var(--c) 50%, transparent); }
.tn[data-fx=wipe]::after { content: "→"; transition: translate .3s cubic-bezier(.3, 1.6, .5, 1); }
.tn[data-fx=wipe]:is(:hover, :focus-visible)::after { translate: .35em 0; }
.tn-wipebox { position: absolute; inset: 0; z-index: 5; pointer-events: none; display: grid; place-items: center; background: var(--c); color: #07090f; font: 800 18px/1 ui-monospace, monospace; letter-spacing: .1em; clip-path: circle(0 at var(--wx) var(--wy)); }
/*end*/

/* ===== 61-65 Flooring (2026-10-23) ===== */
/* 61 Plank Press — oak plank: pointer sheen, press depth, hammer drives the nails, hold to flex the board */
#demo-root .item:has(.t61) .stage{min-height:150px}
.t61{--mx:50%;--my:30%;width:186px;min-width:0;max-width:100%;height:58px;min-height:0;padding:0;border-radius:3px;background:#4a2f19;overflow:visible;color:#3b200c;
  font:800 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.22em;touch-action:manipulation;
  box-shadow:0 1px 0 #2b1a0c,0 7px 0 -2px #3a2614,0 16px 22px -10px #000;transform:translateY(-4px);transition:transform .22s cubic-bezier(.3,1.7,.5,1),box-shadow .22s}
.t61:focus-visible{outline:2px solid #f2c27a;outline-offset:5px}
.t61-face{position:absolute;inset:0;border-radius:inherit;overflow:hidden;background:#c89a64 var(--g) center/cover;transition:transform .3s cubic-bezier(.3,1.6,.5,1);
  box-shadow:inset 0 1px 0 #ffe9c866,inset 0 -2px 0 #0000004d,inset 2px 0 0 #ffffff14,inset -2px 0 0 #00000038}
.t61-face::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(75% 150% at 50% 50%,#0000 45%,#00000059 100%);transition:background .3s}
.t61-sheen{position:absolute;inset:0;background:radial-gradient(100px 50px at var(--mx) var(--my),#fff4d877,#fff0 70%);mix-blend-mode:soft-light;opacity:0;transition:opacity .3s}
.t61-gl{position:absolute;inset:0;background:linear-gradient(105deg,#fff0 38%,#fffbea8c 50%,#fff0 62%) no-repeat;background-size:260% 100%;background-position:140% 0;mix-blend-mode:overlay}
.t61:hover .t61-sheen,.t61:focus-visible .t61-sheen{opacity:1}
.t61-l{position:relative;z-index:2;color:#3a1e0bd9;text-shadow:0 1px 0 #ffe4ba66,0 -1px 0 #0000003d;transition:letter-spacing .3s}
.t61.dn{transform:translateY(0);box-shadow:0 1px 0 #2b1a0c,0 2px 0 -1px #3a2614,0 5px 8px -4px #000;transition-duration:.07s}
.t61.bow .t61-face{transform:scaleY(.955) scaleX(.995)}
.t61.bow .t61-face::after{background:radial-gradient(55% 110% at 50% 50%,#0000004d,#0000 60%),radial-gradient(75% 150% at 50% 50%,#0000 45%,#00000059 100%)}
.t61.bow .t61-l{letter-spacing:.3em}
.t61-nail{position:absolute;top:50%;left:12px;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;--lift:7px;z-index:3;
  background:radial-gradient(circle at 34% 30%,#fff 0,#d4d4d4 22%,#6c6c6c 62%,#2d2d2d 100%);transform:translateY(calc(var(--lift) * -1));
  box-shadow:0 calc(var(--lift) + 1px) 3px #0009;transition:transform .1s cubic-bezier(.2,1.6,.4,1),box-shadow .1s}
.t61-nail::after{content:"";position:absolute;left:3px;top:7px;width:3px;height:var(--lift);background:linear-gradient(90deg,#555,#e2e2e2,#555);border-radius:0 0 2px 2px;transition:height .1s}
.t61-nail[data-s=r]{left:auto;right:12px;margin:-4.5px -4.5px 0 0}
.t61-nail.in{box-shadow:0 0 0 1.5px #3a1e0b55,0 0 0 3px #ffffff12}
.t61.done{transform:translateY(-1px);box-shadow:0 1px 0 #2b1a0c,0 2px 0 -1px #3a2614,0 7px 10px -6px #000}
.t61.done .t61-gl{animation:t61g 1.2s cubic-bezier(.3,.6,.3,1)}
.t61-ham{position:absolute;width:44px;height:26px;pointer-events:none;z-index:6;transform-origin:44px 12px;filter:drop-shadow(0 4px 3px #0008)}
.t61-dust{position:absolute;width:3px;height:3px;border-radius:1px;background:#e9c995;pointer-events:none;z-index:5}
@keyframes t61g{from{background-position:140% 0}to{background-position:-40% 0}}
@media (prefers-reduced-motion: reduce){.t61,.t61-face,.t61-nail{transition:none!important}.t61.done .t61-gl{animation:none}}

/* 62 Stain Fill — hover pours stain into raw maple (multiplied over real grain), wet sheen dries, a drip falls; click = next stain */
#demo-root .item:has(.t62) .stage{min-height:150px}
.t62{--sc:#c98a3c;--ink:#4a2e14;--ts:#fff6;width:186px;min-width:0;max-width:100%;height:56px;min-height:0;padding:0;border-radius:6px;background:#e7cfa8;overflow:visible;
  font:800 11.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.16em;box-shadow:0 12px 22px -12px #000;touch-action:manipulation}
.t62:focus-visible{outline:2px solid var(--sc);outline-offset:4px}
.t62-wood{position:absolute;inset:0;border-radius:inherit;background:#e2c49a var(--g) center/cover;box-shadow:inset 0 1px 0 #fff8,inset 0 -2px 0 #0000002e}
.t62-c{position:absolute;inset:0;width:100%;height:100%;border-radius:inherit;mix-blend-mode:multiply;pointer-events:none}
.t62-wet{position:absolute;inset:0;border-radius:inherit;pointer-events:none;mix-blend-mode:screen;opacity:var(--wet,0);clip-path:inset(0 calc(100% - var(--wp,0%)) 0 0);
  background:linear-gradient(176deg,#ffffff70 0,#fff0 42%),linear-gradient(100deg,#fff0 52%,#ffffff38 60%,#fff0 68%)}
.t62-l{position:relative;z-index:2;display:inline-flex;align-items:center;gap:8px;color:var(--ink);text-shadow:0 1px 0 var(--ts);transition:color .5s,text-shadow .5s}
.t62-dot{width:11px;height:11px;border-radius:50%;background:var(--sc);box-shadow:inset 0 -2px 3px #0006,inset 0 2px 2px #fff5,0 0 0 2px #ffffffa0;transition:background .3s}
.t62-drip{position:absolute;width:7px;height:10px;border-radius:50% 50% 50% 50%/62% 62% 38% 38%;background:var(--sc);pointer-events:none;transform-origin:50% 0;box-shadow:inset 1px 2px 1px #fff5}
.t62-splat{position:absolute;height:3px;width:14px;border-radius:50%;background:var(--sc);pointer-events:none}

/* 63 Click-Lock Split — angle-angle install: the right plank tilts in, tongue meets groove, drops and snaps; grain lines up across the seam */
#demo-root .item:has(.t63) .stage{min-height:150px;overflow:visible}
.t63{width:186px;min-width:0;max-width:100%;height:56px;min-height:0;padding:0;border-radius:4px;overflow:visible;perspective:520px;
  background:#3b3227 repeating-linear-gradient(33deg,#0000 0 5px,#ffffff08 5px 7px),radial-gradient(#0000 0,#0006 100%);box-shadow:inset 0 2px 6px #000a,0 10px 20px -12px #000;
  font:800 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.2em;touch-action:manipulation}
.t63:focus-visible{outline:2px solid #f2c27a;outline-offset:5px}
.t63-a,.t63-b{position:absolute;top:0;bottom:0;width:50%;display:grid;place-items:center;background:#b98552 var(--g) no-repeat;background-size:186px 56px;color:#3d220f;
  box-shadow:inset 0 1px 0 #ffe9c866,inset 0 -2px 0 #00000052;transition:color .3s}
.t63-a{left:0;border-radius:4px 0 0 4px;background-position:0 0;z-index:1}
.t63-b{right:0;border-radius:0 4px 4px 0;background-position:-93px 0;z-index:2;transform-origin:0 50%;transform:translateX(9px) rotateY(-26deg);
  transition:transform .5s cubic-bezier(.3,1.5,.5,1),filter .3s;filter:drop-shadow(-4px 6px 5px #000a)}
.t63-a b,.t63-b b{text-shadow:0 1px 0 #ffe4ba66;transition:opacity .25s,transform .3s}
.t63-tg{position:absolute;right:-5px;top:12px;bottom:12px;width:5px;border-radius:0 2px 2px 0;background:linear-gradient(90deg,#7a5230,#a77548);box-shadow:inset 0 1px 0 #ffe0b055}
.t63-gv{position:absolute;left:0;top:10px;bottom:10px;width:3px;background:#2a170a;box-shadow:inset -1px 0 0 #0008}
.t63:hover:not(.lk) .t63-b{animation:t63w 1.1s ease-in-out infinite}
.t63-seam{position:absolute;left:50%;top:-2px;bottom:-2px;width:2px;margin-left:-1px;background:#fff;opacity:0;z-index:4;pointer-events:none;box-shadow:0 0 10px 2px #ffd9a0,0 0 22px 6px #ffb34766;transform:scaleY(.2)}
.t63-l{position:absolute;inset:0;display:grid;place-items:center;z-index:3;color:#3d220f;text-shadow:0 1px 0 #ffe4ba66;opacity:0;transform:scale(1.25);transition:opacity .3s .05s,transform .45s cubic-bezier(.3,1.7,.5,1) .05s;pointer-events:none}
.t63.lk .t63-b{transform:none;filter:none;box-shadow:inset 1px 0 0 #2a170a73,inset 2px 0 0 #ffe9c833,inset 0 1px 0 #ffe9c866,inset 0 -2px 0 #00000052}
.t63-gv,.t63-tg{transition:opacity .2s .45s}.t63.lk .t63-gv,.t63.lk .t63-tg{opacity:0;transition-delay:0s}
.t63.lk .t63-a b,.t63.lk .t63-b b{opacity:0;transform:scale(.8)}
.t63.lk .t63-l{opacity:1;transform:none}
.t63-sp{position:absolute;width:3px;height:3px;border-radius:50%;background:#ffe2a8;box-shadow:0 0 6px #ffb347;pointer-events:none;z-index:5}
@keyframes t63w{0%,100%{transform:translateX(9px) rotateY(-26deg)}50%{transform:translateX(11px) rotateY(-31deg)}}
@media (prefers-reduced-motion: reduce){.t63 .t63-b,.t63-l{transition:none!important;animation:none!important}}

/* 64 Mosaic Tile Flip — 12 glazed zellige tiles flip in a wave from where you enter to spell the label letter-by-letter; light follows the pointer across the glaze; click re-tiles in a new glaze */
#demo-root .item:has(.t64) .stage{min-height:150px}
.t64{width:186px;min-width:0;max-width:100%;height:60px;min-height:0;padding:0;border-radius:7px;overflow:visible;background:#d6d0c2;touch-action:manipulation;
  box-shadow:inset 0 1px 0 #fff8,inset 0 -1px 2px #0003,0 12px 22px -12px #000}
.t64:focus-visible{outline:2px solid #7dd3c8;outline-offset:4px}
.t64-g{position:absolute;inset:4px;display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(2,1fr);gap:3px;perspective:320px}
.t64-t{position:relative;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.3,1.45,.5,1) var(--d,0ms)}
.t64-t>i{position:absolute;inset:0;border-radius:2.5px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.t64-f{background:radial-gradient(circle at var(--lx,calc(30% + var(--j,0%))) var(--ly,25%),#ffffffb0 0,#ffffff30 14%,#fff0 30%),linear-gradient(150deg,var(--c1),var(--c2));
  box-shadow:inset 0 0 0 1px #ffffff2e,inset -1px -2px 2px #00000047,inset 1px 1px 1px #ffffff80}
.t64-f::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at var(--px,50%) var(--py,50%),#0000 60%,#0000001f);mix-blend-mode:multiply}
.t64-k{transform:rotateX(180deg);background:var(--bk);box-shadow:inset 0 0 0 1px #ffffff1f,inset -1px -2px 2px #0000005c,inset 1px 1px 1px #ffffff40}
.t64-k span{position:absolute;inset:0;display:grid;place-items:center;font:900 15px/1 system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--fg);text-shadow:0 1px 0 #0000004d}
.t64-k span.orn{font-size:10px;opacity:.55}
.t64.on .t64-t{transform:rotateX(180deg)}
.t64-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media (prefers-reduced-motion: reduce){.t64-t{transition:none!important}}

/* 65 Carpet Nap — 2,500 canvas fibres: drag across to brush the pile like real carpet (light catches the direction), click to vacuum stripes back in */
#demo-root .item:has(.t65) .stage{min-height:150px}
.t65{width:186px;min-width:0;max-width:100%;height:66px;min-height:0;padding:0;border-radius:11px;overflow:hidden;background:#5e4c3a;touch-action:none;cursor:crosshair;
  box-shadow:0 14px 24px -14px #000,inset 0 0 0 1px #00000040;font:800 12px/1 system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:.16em}
.t65::after{content:"";position:absolute;inset:2px;border-radius:9px;border:1px dashed #d9c3a0a8;pointer-events:none;z-index:3}
.t65:focus-visible{outline:2px solid #e8d2ad;outline-offset:4px}
.t65-c{position:absolute;inset:4px;width:calc(100% - 8px);height:calc(100% - 8px);border-radius:7px;filter:blur(.3px)}
.t65::before{content:"";position:absolute;inset:4px;border-radius:7px;box-shadow:inset 0 0 8px #0000008c;z-index:1;pointer-events:none}
.t65-l{position:relative;z-index:2;color:#3b2c1d;text-shadow:0 1px 0 #fff3e080,0 0 10px #f4e6d080;pointer-events:none;transition:opacity .25s}
.t65-vac{position:absolute;top:2px;bottom:2px;left:-30px;width:22px;border-radius:5px;z-index:4;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,#3b4652,#77838f 45%,#4a5561);box-shadow:0 0 0 1px #0007,4px 0 10px -2px #9ef3ff66}
.t65-vac::after{content:"";position:absolute;left:-3px;top:4px;bottom:4px;width:3px;background:repeating-linear-gradient(#bfe9ff 0 2px,#0000 2px 4px);opacity:.8}

/* 66 Soft-Close Door — sage thermofoil shaker door on a real 3D hinge: hover peeks, click flings it open on spring physics to the quote inside, click again slams and the soft-close damper catches it */
#demo-root .item:has(.t66) .stage{min-height:196px}
.t66{--t66-a:0deg;--t66-l:0;--t66-mx:30%;--t66-my:20%;width:150px;min-width:0;max-width:100%;height:132px;min-height:0;padding:0;border-radius:3px;overflow:visible;
  perspective:620px;perspective-origin:20% 50%;background:linear-gradient(#f3efe7,#d9d1c3);color:#2b2622;touch-action:manipulation;
  box-shadow:0 0 0 1px #00000033,0 18px 26px -14px #000;font:800 11px/1.1 system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:.1em;transform:translateY(-10px)}
.t66:focus-visible{outline:2px solid #e9b872;outline-offset:6px}
.t66-box{position:absolute;inset:5px;border-radius:2px;overflow:hidden;
  background:radial-gradient(120% 70% at 50% 0%,rgb(255 214 150/calc(var(--t66-l)*.6)),#0000 62%),linear-gradient(90deg,#0000003d,#0000 18%,#0000 82%,#00000033),linear-gradient(#cbc2b3,#ebe5da 42%,#d6cebf);
  box-shadow:inset 0 3px 8px #0007,inset 0 -2px 3px #0002}
.t66-led{position:absolute;left:8px;right:8px;top:3px;height:3px;border-radius:2px;background:#fff6e0;opacity:calc(.2 + var(--t66-l)*.8);
  box-shadow:0 0 calc(var(--t66-l)*14px) calc(var(--t66-l)*4px) #ffcf7a}
.t66-shelf{position:absolute;left:0;right:0;top:66%;height:5px;background:linear-gradient(#f8f4ec,#c9c0b0);box-shadow:0 3px 4px -1px #0006}
.t66-shelf::before{content:"";position:absolute;bottom:5px;left:14px;width:30px;height:13px;border-radius:2px 2px 0 0;background:repeating-linear-gradient(#fdfdfb 0 2px,#cfcbc2 2px 3px);box-shadow:inset -3px 0 3px #0002}
.t66-shelf::after{content:"";position:absolute;bottom:5px;right:18px;width:13px;height:15px;border-radius:2px 2px 4px 4px;background:linear-gradient(90deg,#24575b,#3d8287 45%,#24575b);box-shadow:5px 3px 0 -3px #2f6f73}
.t66-cta{position:absolute;left:0;right:0;top:19%;display:grid;justify-items:center;gap:5px;text-align:center;opacity:var(--t66-l);transform:translateY(calc((1 - var(--t66-l))*7px))}
.t66-cta b{font-size:12px;letter-spacing:.12em;color:#2a211a;text-shadow:0 1px 0 #fff9}
.t66-cta small{font:700 9px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.02em;color:#6b5a48;text-transform:none}
.t66-shade{position:absolute;inset:5px;pointer-events:none;background:linear-gradient(90deg,#000a,#0000 70%);opacity:calc((1 - var(--t66-l))*.55);mix-blend-mode:multiply}
.t66-door{position:absolute;inset:0;transform-origin:0 50%;transform:rotateY(var(--t66-a));transform-style:preserve-3d;border-radius:3px}
.t66-front,.t66-back{position:absolute;inset:0;border-radius:3px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.t66-front{background:radial-gradient(110px 80px at var(--t66-mx) var(--t66-my),#ffffff4d,#fff0 70%),linear-gradient(160deg,#a5b298,#89977d 55%,#7a886f);
  box-shadow:inset 0 0 0 1px #c9d3bf66,inset 0 -2px 3px #0003,0 1px 2px #0004}
.t66-panel{position:absolute;inset:17px 15px;border-radius:1px;background:linear-gradient(160deg,#97a58a,#83917a);
  box-shadow:inset 2px 2px 0 #5f6c55b0,inset -2px -2px 0 #ccd6c19a,inset 5px 5px 7px #0003,0 0 0 2px #7d8b72,0 0 0 3px #b8c3ac}
.t66-pull{position:absolute;right:8px;top:50%;width:5px;height:50px;margin-top:-25px;border-radius:3px;background:linear-gradient(90deg,#5c5f63,#eef1f3 40%,#9aa0a6 62%,#4b4e52);box-shadow:3px 3px 3px #0006}
.t66-back{transform:rotateY(180deg);background:linear-gradient(90deg,#efebe3,#f7f4ee 60%,#e2dccf);box-shadow:inset 0 0 0 1px #0000001a}
.t66-cup{position:absolute;right:7px;top:18px;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle,#8d969e 0 28%,#cfd5da 30% 50%,#737b82 52% 60%,#dde1e4 62%);box-shadow:0 0 0 2px #e9ecef,13px 0 0 -5px #a9b1b8}
.t66-cup+.t66-cup{top:auto;bottom:18px}
.t66-edge{position:absolute;top:0;bottom:0;right:0;width:6px;transform-origin:100% 50%;transform:rotateY(90deg);background:linear-gradient(90deg,#6f7d64,#9aa78d)}
.t66-tip{position:absolute;left:-30px;right:-30px;top:100%;margin-top:12px;text-align:center;font:700 8.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.16em;color:#8f9ab0;pointer-events:none}
@media (prefers-reduced-motion: reduce){.t66-cta{transform:none}}

/* 67 Hinge Cup Bore — press & hold plunges a spinning Forstner bit into the door back: chips spray, depth gauge counts to 13 mm, the 35 mm cup appears and a hinge snaps in */
#demo-root .item:has(.t67) .stage{min-height:160px}
.t67{--t67-d:0;--t67-h:1;--t67-r:0deg;width:200px;min-width:0;max-width:100%;height:74px;min-height:0;padding:0;border-radius:4px;overflow:visible;justify-content:flex-start;
  background:repeating-linear-gradient(90deg,#0000 0 3px,#00000005 3px 4px),linear-gradient(#f8f7f3,#e8e5dd);color:#2f2a25;touch-action:none;user-select:none;-webkit-user-select:none;
  box-shadow:inset 0 3px 0 #cfc9bd,inset 0 -1px 0 #0000001f,0 14px 22px -14px #000;font:800 11px/1 system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:.12em}
.t67:focus-visible{outline:2px solid #9ad0ff;outline-offset:5px}
.t67-face{position:absolute;left:0;top:0;width:74px;height:100%}
.t67-mark{position:absolute;left:37px;top:38px;width:22px;height:22px;margin:-11px;background:linear-gradient(#0000 calc(50% - .5px),#55555599 0 calc(50% + .5px),#0000 0),linear-gradient(90deg,#0000 calc(50% - .5px),#55555599 0 calc(50% + .5px),#0000 0);opacity:calc(1 - var(--t67-d)*3)}
.t67-hole{position:absolute;left:37px;top:38px;width:34px;height:34px;margin:-17px;border-radius:50%;opacity:min(1,calc(var(--t67-d)*6));
  background:radial-gradient(circle,#2b2116 0 1.4px,#0000 1.8px),repeating-radial-gradient(circle,#0000 0 2px,#3d2c1a14 2px 3px),
    radial-gradient(circle at 46% 40%,rgb(214 190 150) 0 calc(62% - var(--t67-d)*20%),rgb(150 120 84) 78%,rgb(70 52 32) 100%);
  box-shadow:inset 0 calc(2px + var(--t67-d)*4px) calc(3px + var(--t67-d)*5px) #000c,0 0 0 1px #ffffffc0,0 0 0 2px #00000014}
.t67-hinge{position:absolute;left:-25px;top:23px;width:80px;height:30px;opacity:0;transform:translateX(-46px);filter:drop-shadow(1px 2px 1.5px #0007);pointer-events:none}
.t67-hinge svg{display:block}
.t67-sc{transform-box:fill-box;transform-origin:50% 50%}
.t67-bit{position:absolute;left:37px;top:38px;width:34px;height:34px;margin:-17px;opacity:0;pointer-events:none;
  transform:scale(calc(.9 + var(--t67-h)*.95 - var(--t67-d)*.08));filter:drop-shadow(calc(var(--t67-h)*16px) calc(var(--t67-h)*14px) calc(2px + var(--t67-h)*6px) #0008)}
.t67-disc{position:absolute;inset:0;border-radius:50%;transform:rotate(var(--t67-r));
  background:radial-gradient(circle,#59616a 0 2px,#0000 2.5px),conic-gradient(#eef1f3 0 18deg,#7a828a 30deg 84deg,#d5dade 96deg 112deg,#5f676e 120deg 180deg,#eef1f3 180deg 198deg,#7a828a 210deg 264deg,#d5dade 276deg 292deg,#5f676e 300deg 360deg);
  box-shadow:inset 0 0 0 2px #b5bcc2,inset 0 0 0 3px #59616a}
.t67-chuck{position:absolute;inset:8px;border-radius:50%;background:radial-gradient(circle at 38% 34%,#ffffff40,#0000 50%),repeating-conic-gradient(#30353b 0 10deg,#5d646b 10deg 20deg);box-shadow:0 0 0 1px #1e2226,0 2px 4px #0009;transform:rotate(calc(var(--t67-r)*.5))}
.t67.t67-spin .t67-disc{filter:blur(.6px)}
.t67-l{position:absolute;left:80px;right:12px;overflow:hidden;top:14px;display:grid;gap:7px;text-align:left}
.t67-l small{font:700 8.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em;color:#7c7366;text-transform:none;white-space:nowrap}
.t67-g{display:block;height:4px;border-radius:2px;background:#d8d3c8;box-shadow:inset 0 1px 1px #0002;overflow:hidden}
.t67-g i{display:block;height:100%;width:calc(var(--t67-d)*100%);background:linear-gradient(90deg,#4aa3ff,#7dd3fc)}
.t67.t67-done .t67-g i{background:linear-gradient(90deg,#22c55e,#86efac)}
.t67-ch{position:absolute;width:4px;height:3px;border-radius:3px 3px 0 0;border-top:1.5px solid #c9a978;pointer-events:none;z-index:3}
@media (prefers-reduced-motion: reduce){.t67-disc,.t67-chuck{transform:none}}

/* 68 Dovetail Drawer — white-oak drawer front: drag or click and it slides out on a spring revealing a maple dovetail box with a cutlery tray; push it back and soft-close eases the last inch */
#demo-root .item:has(.t68) .stage{min-height:214px;align-content:start;padding-top:38px}
.t68{--t68-o:0;width:186px;min-width:0;max-width:100%;height:60px;min-height:0;padding:0;border-radius:2px;overflow:visible;background:#1b140e;touch-action:none;user-select:none;-webkit-user-select:none;
  box-shadow:inset 0 6px 10px #000,0 0 0 2px #120d08,0 0 0 8px #ece6db,0 0 0 9px #00000040,0 20px 26px -14px #000;font:800 11px/1 system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:.14em;color:#3b2511}
.t68:focus-visible{outline:2px solid #f2c27a;outline-offset:12px}
.t68-clip{position:absolute;left:5px;right:5px;top:0;height:150px;overflow:hidden;pointer-events:none}
.t68-box{position:absolute;left:0;right:0;height:72px;top:calc(var(--t68-o)*60px - 72px)}
.t68-box svg{display:block;width:100%;height:100%}
.t68-dark{position:absolute;left:0;right:0;top:0;height:34px;background:linear-gradient(#000e,#0000);opacity:calc(1 - var(--t68-o)*.5)}
.t68-front{position:absolute;inset:0;border-radius:2px;display:grid;align-content:center;justify-items:center;gap:6px;padding-top:12px;z-index:2;
  transform:translateY(calc(var(--t68-o)*60px)) scale(calc(1 + var(--t68-o)*.06));transform-origin:50% 0;
  background:radial-gradient(140% 90% at 30% 0%,#ffffff22,#0000 60%),repeating-linear-gradient(178.5deg,#5a3a1a12 0 1px,#0000 1px 4px),repeating-linear-gradient(181deg,#fff2dc14 0 2px,#0000 2px 9px),linear-gradient(90deg,#c69f73,#d9b98f 42%,#caa478 70%,#bf966a);
  box-shadow:inset 0 1px 0 #ffffff55,inset 0 -2px 0 #0000003d,0 calc(2px + var(--t68-o)*14px) calc(4px + var(--t68-o)*14px) -2px #000c}
.t68-front b{text-shadow:0 1px 0 #ffe9c766}
.t68-front small{font:700 8.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;color:#6b4a2a;text-transform:none}
.t68-pull{position:absolute;left:50%;top:9px;width:76px;height:6px;margin-left:-38px;border-radius:3px;background:linear-gradient(#f7e2a8,#c9a046 45%,#8f6b22 60%,#e7c877);box-shadow:0 3px 3px -1px #0008}
.t68-pull::before,.t68-pull::after{content:"";position:absolute;top:2px;left:6px;width:4px;height:6px;background:#7d5c1c;border-radius:1px;z-index:-1}
.t68-pull::after{left:auto;right:6px}
@media (prefers-reduced-motion: reduce){.t68-front{transition:none}}

/* 69 Edge Bander — click and an edge-banding head races the perimeter laying PVC tape behind it with glue steam, corner trim chips and a buff pass; face colour follows the band */
#demo-root .item:has(.t69) .stage{min-height:150px}
.t69{--t69-f:#d9d4cb;--t69-n:#6b4a2f;width:188px;min-width:0;max-width:100%;height:66px;min-height:0;padding:0;border-radius:5px;overflow:visible;color:#2b241d;touch-action:manipulation;
  background:radial-gradient(circle at 20% 30%,#8a6b44 0 1px,#0000 1.5px) 0 0/7px 6px,radial-gradient(circle at 70% 60%,#efd9b0 0 1px,#0000 1.6px) 0 0/5px 7px,radial-gradient(circle at 40% 80%,#5e4529 0 .8px,#0000 1.3px) 0 0/6px 5px,#c8ad85;
  box-shadow:0 14px 22px -14px #000;font:800 11.5px/1 system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:.14em}
.t69:focus-visible{outline:2px solid #fcd34d;outline-offset:6px}
.t69-face{position:absolute;inset:5px;border-radius:2px;display:grid;align-content:center;justify-items:center;gap:7px;background:var(--t69-f);transition:background .9s;
  background-image:repeating-linear-gradient(179deg,#0000000d 0 1px,#0000 1px 5px),linear-gradient(120deg,#ffffff38,#fff0 45%,#00000014);box-shadow:inset 0 0 0 1px #0000001a}
.t69-face b{text-shadow:0 1px 0 #ffffff70;transition:color .9s}
.t69-face small{display:inline-flex;align-items:center;gap:4px;font:700 8.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em;text-transform:none;color:#4b4036}
.t69-face em{font-style:normal}
.t69-dot{width:9px;height:9px;border-radius:2px;background:var(--t69-n);box-shadow:inset 0 0 0 1px #0003,0 0 0 1px #fff8}
.t69.t69-dk .t69-face b{color:#f4efe7;text-shadow:0 1px 0 #0008}.t69.t69-dk .t69-face small{color:#e6ded2}
.t69-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.t69-head{position:absolute;left:0;top:0;width:20px;height:16px;margin:-8px 0 0 -10px;opacity:0;pointer-events:none;z-index:3;filter:drop-shadow(0 3px 3px #0009)}
.t69-pot{position:absolute;left:0;top:0;width:12px;height:16px;border-radius:3px;background:linear-gradient(90deg,#c2410c,#fb923c 45%,#9a3412);box-shadow:inset 0 2px 0 #fed7aa80}
.t69-roll{position:absolute;right:0;top:2px;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle,#9ca3af 0 2px,#1f2937 2.5px 4px,#374151 4.5px);box-shadow:0 0 0 1px #111}
.t69.t69-run .t69-head{opacity:1}
.t69-st{position:absolute;width:10px;height:10px;margin:-5px;border-radius:50%;background:radial-gradient(circle,#ffffffcc,#fff0 70%);pointer-events:none;z-index:4}
.t69-cp{position:absolute;width:5px;height:2px;border-radius:1px;pointer-events:none;z-index:4}
@media (prefers-reduced-motion: reduce){.t69-face,.t69-face b{transition:none}}

/* 70 Lazy Susan Corner — five spice jars depth-sorted on a 3D turntable: drag to spin with inertia, brush to nudge, click to whirl; it settles into a detent and the front jar hops */
#demo-root .item:has(.t70) .stage{min-height:170px}
.t70{--t70-r:0deg;width:190px;min-width:0;max-width:100%;height:128px;min-height:0;padding:0;border-radius:6px;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab;
  background:#2c231b;box-shadow:0 0 0 4px #e9e3d8,0 0 0 5px #00000040,0 18px 26px -14px #000;font:800 10.5px/1 system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:.13em;color:#fdf2df}
.t70:active{cursor:grabbing}
.t70:focus-visible{outline:2px solid #fbbf24;outline-offset:8px}
.t70-cab{position:absolute;inset:0;background:radial-gradient(90% 60% at 50% 0%,#ffd99a55,#0000 70%),linear-gradient(90deg,#3c3026,#6b5949 49.5%,#4a3c30 50.5%,#2f251d),linear-gradient(#0000 60%,#0006)}
.t70-led{position:absolute;left:12px;right:12px;top:0;height:3px;background:#fff3d6;box-shadow:0 0 12px 4px #ffcf7a99}
.t70-cta{position:absolute;left:0;right:0;top:11px;display:grid;justify-items:center;gap:5px;z-index:1;text-shadow:0 1px 2px #000a}
.t70-cta small{font:700 8px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.05em;color:#e9d6b8;text-transform:none}
.t70-tray{position:absolute;left:15px;top:69px;width:160px;height:40px;border-radius:50%;z-index:2;
  background:repeating-conic-gradient(from var(--t70-r),#0000 0 9deg,#00000012 9deg 11deg),conic-gradient(from var(--t70-r),#ffffff00,#ffffff3d 25deg,#fff0 60deg,#fff0 180deg,#ffffff2b 205deg,#fff0 240deg),radial-gradient(closest-side,#f3efe8,#ddd5c8 80%,#c5bcad);
  box-shadow:0 4px 0 #a39a8b,0 5px 0 #6e665a,0 14px 14px -4px #000c}
.t70-pole{position:absolute;left:92px;top:0;width:6px;height:89px;z-index:100;background:linear-gradient(90deg,#6b7279,#f2f5f7 40%,#9aa2a9 60%,#4d545a);box-shadow:0 0 6px #0006}
.t70-jars{position:absolute;inset:0;pointer-events:none}
.t70-j{position:absolute;left:0;top:0;width:28px;height:40px;transform-origin:50% 100%;filter:drop-shadow(0 3px 2px #0007)}
.t70-lid{position:absolute;left:3px;right:3px;top:0;height:7px;border-radius:2px 2px 1px 1px;background:linear-gradient(90deg,#0005,#ffffff70 40%,#0003),var(--t70-k);box-shadow:inset 0 -1px 0 #0005}
.t70-gl{position:absolute;left:1px;right:1px;top:6px;bottom:0;border-radius:4px 4px 6px 6px;
  background:linear-gradient(90deg,#ffffff40,#ffffff0d 28%,#ffffff60 62%,#ffffff12 75%,#0000002e),radial-gradient(circle,#0000002e 0 .6px,#0000 1px) 0 0/3px 3px,linear-gradient(#ffffff1f 0 24%,var(--t70-c) 24%);
  box-shadow:inset 0 0 0 1px #ffffff4d,inset 0 -3px 4px #0005}
.t70-j em{position:absolute;left:2px;right:2px;top:19px;height:10px;display:grid;place-items:center;background:#fbf7ee;color:#3b2a1a;font:900 5.6px/1 ui-monospace,SFMono-Regular,Menlo,monospace;font-style:normal;letter-spacing:0;box-shadow:0 0 0 .5px #0003}
@media (prefers-reduced-motion: reduce){.t70-j{filter:none}}

/* 71 Hanger Pendulum — shirt on a wooden hanger: the hanger slides along the rod after the pointer and real pendulum physics swings it; click tosses it and it turns to show rod pricing */
#demo-root .item:has(.t71) .stage{min-height:190px}
.t71{width:190px;min-width:0;max-width:100%;height:158px;min-height:0;padding:0;border-radius:6px;overflow:hidden;touch-action:manipulation;
  background:linear-gradient(90deg,#00000038,#0000 16%,#0000 84%,#00000038),repeating-linear-gradient(90deg,#0000 0 37px,#00000018 37px 38px),repeating-linear-gradient(0deg,#ffffff08 0 2px,#0000 2px 6px),linear-gradient(#cbc3b8,#ada396);
  box-shadow:inset 0 0 0 4px #ece6db,inset 0 0 0 5px #00000026,inset 0 14px 18px -8px #0006,0 18px 26px -14px #000;font:800 10px/1 system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:.12em}
.t71:focus-visible{outline:2px solid #93c5fd;outline-offset:5px}
.t71-rod{position:absolute;left:8px;right:8px;top:18px;height:9px;border-radius:5px;z-index:1;background:linear-gradient(#ffffff,#a3abb2 35%,#e8ecef 60%,#646c73);box-shadow:0 4px 5px -2px #0008}
.t71-rod::before,.t71-rod::after{content:"";position:absolute;top:-5px;left:-2px;width:7px;height:19px;border-radius:2px;background:linear-gradient(90deg,#7b838a,#d8dde1,#7b838a)}
.t71-rod::after{left:auto;right:-2px}
.t71-hg{position:absolute;left:47px;top:13px;width:96px;height:140px;z-index:2;transform-origin:48px 9px;filter:drop-shadow(5px 7px 5px #0006)}
.t71-hg svg{position:absolute;left:0;top:0;z-index:2}
.t71-sh{position:absolute;left:4px;top:28px;width:88px;height:106px;perspective:420px}
.t71-flip{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.3,1.35,.5,1)}
.t71.t71-fl .t71-flip{transform:rotateY(180deg)}
.t71-f,.t71-b{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;color:#f6f3ec;
  clip-path:polygon(33% 0,67% 0,100% 13%,97% 37%,84% 33%,84% 100%,16% 100%,16% 33%,3% 37%,0 13%);
  background:linear-gradient(90deg,#00000038,#0000 22%,#ffffff14 50%,#0000 70%,#00000033),radial-gradient(60% 30% at 50% 100%,#00000030,#0000),
    repeating-linear-gradient(0deg,#ffffff12 0 1px,#0000 1px 2px),repeating-linear-gradient(90deg,#0000001c 0 1px,#0000 1px 2px),linear-gradient(#6286b0,#47698f)}
.t71-b{transform:rotateY(180deg);display:grid;align-content:center;justify-items:center;gap:6px;padding-top:14px;text-align:center}
.t71-b{padding:14px 16% 0}.t71-b b{font-size:8px;letter-spacing:.04em;line-height:1.15;text-shadow:0 1px 1px #0008}
.t71-b small{font:700 7.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.02em;text-transform:none;color:#dbe7f5}
.t71-col{position:absolute;left:33%;right:33%;top:0;height:16px;background:linear-gradient(#7fa2c9,#56789f);clip-path:polygon(0 0,50% 75%,100% 0,100% 35%,50% 100%,0 35%)}
.t71-pk{position:absolute;left:50%;top:11px;bottom:0;width:7px;margin-left:-3.5px;background:radial-gradient(circle,#efe9dc 0 1.4px,#0000 1.9px) 50% 5px/7px 15px repeat-y,linear-gradient(90deg,#0003,#0000 30%,#0000 70%,#0003)}
.t71-pc{position:absolute;left:24%;top:36px;width:17px;height:16px;border:1px solid #ffffff38;border-top-width:3px;display:grid;place-items:center;font:900 5.5px/1 ui-monospace,Menlo,monospace;font-style:normal;letter-spacing:.05em;color:#e6eef8}
.t71-tx{position:absolute;left:16%;right:16%;bottom:12px;text-align:center;font-style:normal;font-size:7.5px;letter-spacing:.1em;text-shadow:0 1px 1px #0009}
@media (prefers-reduced-motion: reduce){.t71-flip{transition:none}}

/* 72 Bypass Slider — two-track bypass closet doors (oak slab behind, mirror in front) slide away from your pointer, rollers spin, reflection shifts; click throws one open and lights the interior */
#demo-root .item:has(.t72) .stage{min-height:170px}
.t72{--t72-lit:0;--t72-rx:0%;width:190px;min-width:0;max-width:100%;height:128px;min-height:0;padding:0;border-radius:3px;overflow:hidden;touch-action:manipulation;background:#efe9de;
  box-shadow:inset 0 0 0 1px #0000002e,0 18px 26px -14px #000;font:800 10px/1 system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:.12em;color:#fff}
.t72:focus-visible{outline:2px solid #fde68a;outline-offset:5px}
.t72-tk{position:absolute;left:5px;right:5px;top:5px;height:9px;z-index:4;background:linear-gradient(#f1f4f6,#9aa3aa 45%,#cfd5da 60%,#5d656c);box-shadow:0 2px 3px #0006}
.t72-in{position:absolute;left:6px;right:6px;top:14px;bottom:6px;overflow:hidden;
  background:radial-gradient(80% 60% at 50% 0%,rgb(255 222 168/calc(var(--t72-lit)*.55)),#0000 70%),linear-gradient(#cfc4b3,#b5a892)}
.t72-in::after{content:"";position:absolute;inset:0;background:#0b0806;opacity:calc(.62 - var(--t72-lit)*.62);pointer-events:none}
.t72-sf{position:absolute;left:0;right:0;top:15px;height:4px;background:linear-gradient(#f7f3ec,#c2b8a8);box-shadow:0 3px 3px #0005}
.t72-sf::before{content:"";position:absolute;bottom:4px;left:18px;width:58px;height:10px;background:repeating-linear-gradient(90deg,#8b5e3c 0 18px,#5b6f86 18px 30px,#d8cdbb 30px 44px,#7a8b6e 44px 58px);box-shadow:inset 0 -2px 2px #0004}
.t72-rd{position:absolute;left:4px;right:4px;top:27px;height:3px;border-radius:2px;background:linear-gradient(#fff,#8f979e)}
.t72-cl{position:absolute;left:10px;right:10px;top:28px;height:52px;background:
  linear-gradient(90deg,#3d5a80 0 13px,#0000 13px 15px,#c9b79c 15px 28px,#0000 28px 30px,#2f3a40 30px 41px,#0000 41px 43px,#a64b3c 43px 56px,#0000 56px 58px,#e8e1d5 58px 71px,#0000 71px 73px,#6c7f5a 73px 86px,#0000 86px 88px,#4b3a5c 88px 101px,#0000 101px 103px,#d1a85b 103px 116px,#0000 116px 118px,#30475e 118px 131px,#0000 131px 133px,#8d6e63 133px 146px,#0000 146px);
  clip-path:polygon(0 0,100% 0,100% 74%,93% 90%,86% 76%,79% 100%,71% 84%,64% 96%,57% 78%,50% 92%,43% 80%,36% 100%,29% 82%,21% 94%,14% 76%,7% 88%,0 80%)}
.t72-cl::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,#ffffff1f 0 2px,#0000 4px 10px,#00000038 13px 15px),linear-gradient(#00000059,#0000 30%)}
.t72-cta{position:absolute;left:var(--t72-cx,50%);bottom:7px;transform:translateX(-50%);display:grid;justify-items:center;gap:4px;padding:5px 7px;transition:left .5s cubic-bezier(.3,1.3,.5,1);border-radius:4px;white-space:nowrap;z-index:1;
  background:#1b1510d9;box-shadow:0 0 0 1px #ffffff1f;opacity:calc(.2 + var(--t72-lit)*.8)}
.t72-cta b{font-size:8px;letter-spacing:.02em}.t72-cta small{font:700 7px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.02em;color:#f2dfc0;text-transform:none}
.t72-dr{position:absolute;left:6px;right:6px;top:14px;bottom:6px;z-index:3}
.t72-d1,.t72-d2{position:absolute;top:0;bottom:0;width:54%}
.t72-d1{left:0;z-index:1;background:radial-gradient(120% 70% at 20% 10%,#ffffff26,#0000 60%),repeating-linear-gradient(91deg,#00000012 0 1px,#0000 1px 5px),repeating-linear-gradient(89deg,#ffffff10 0 2px,#0000 2px 9px),linear-gradient(90deg,#9d958a,#b8b0a4 45%,#a39b90);
  box-shadow:inset 0 0 0 2px #8e979e,inset 0 0 0 3px #4f565c}
.t72-d1::after{content:"";position:absolute;left:5px;top:30%;bottom:30%;width:4px;border-radius:2px;background:linear-gradient(90deg,#5d656c,#e9edf0,#7b838a)}
.t72-d2{right:0;z-index:2;box-shadow:inset 0 0 0 3px #b9c1c7,inset 0 0 0 4px #6f777e,-7px 0 10px -4px #000a;
  background:linear-gradient(110deg,#dfe7ec 0,#9fb1be calc(18% + var(--t72-rx)),#f4f8fa calc(31% + var(--t72-rx)),#8fa3b2 calc(46% + var(--t72-rx)),#c9d5dd calc(70% + var(--t72-rx)),#a8b8c4 100%)}
.t72-d2::after{content:"";position:absolute;right:5px;top:30%;bottom:30%;width:4px;border-radius:2px;background:linear-gradient(90deg,#5d656c,#e9edf0,#7b838a)}
.t72-w{position:absolute;top:-7px;left:12%;width:8px;height:8px;border-radius:50%;background:radial-gradient(circle,#ddd 0 1px,#0000 1.5px),conic-gradient(#30363b 0 45deg,#7d858c 45deg 90deg,#30363b 90deg 135deg,#7d858c 135deg 180deg,#30363b 180deg 225deg,#7d858c 225deg 270deg,#30363b 270deg 315deg,#7d858c 315deg);box-shadow:0 0 0 1px #1d2125}
.t72-w+.t72-w{left:auto;right:12%}
@media (prefers-reduced-motion: reduce){.t72-d1,.t72-d2,.t72-w{transition:none}}

/* 73 Shoe Wall Cascade — 18 lit cubbies: LED pucks follow the pointer with an afterglow trail; click ripples the lights outward while every pair hops */
#demo-root .item:has(.t73) .stage{min-height:176px}
.t73{width:192px;min-width:0;max-width:100%;height:138px;min-height:0;padding:0;border-radius:4px;overflow:hidden;touch-action:manipulation;background:#efe9de;
  box-shadow:inset 0 0 0 1px #0000002a,0 18px 26px -14px #000;font:800 8.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1em;color:#3b2a12}
.t73:focus-visible{outline:2px solid #fcd34d;outline-offset:5px}
.t73-g{position:absolute;left:6px;right:6px;top:6px;height:102px;display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(3,1fr);gap:3px;background:#e2dacb;padding:0}
.t73-c{--t73-l:0;position:relative;overflow:hidden;border-radius:1px;background:linear-gradient(#cfc5b4,#efe8dc 60%,#e3dbcd);box-shadow:inset 0 3px 4px #0005,inset 0 -1px 0 #fff8}
.t73-c::before{content:"";position:absolute;left:30%;right:30%;top:0;height:2px;border-radius:0 0 2px 2px;background:#fff7e3;opacity:calc(.25 + var(--t73-l)*.75);box-shadow:0 0 calc(var(--t73-l)*10px) calc(var(--t73-l)*3px) #ffd27d}
.t73-c::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(90% 85% at 50% 0%,rgb(255 214 140/calc(var(--t73-l)*.7)),#0000 75%),rgb(18 12 6/calc(.5 - var(--t73-l)*.5))}
.t73-c svg{position:absolute;left:50%;bottom:3px;width:24px;height:13px;margin-left:-12px;filter:drop-shadow(0 1.5px 1px #0006)}
.t73-pl{position:absolute;left:12px;right:12px;bottom:6px;height:20px;border-radius:3px;display:grid;place-items:center;
  background:linear-gradient(#f3dc9d,#c9a046 50%,#a8822f 55%,#e3c879);box-shadow:inset 0 1px 0 #fff8,inset 0 -1px 0 #0003,0 2px 3px #0004}
.t73-pl b{text-shadow:0 1px 0 #fff6;white-space:nowrap}
@media (prefers-reduced-motion: reduce){.t73-c svg{filter:none}}

/* 74 Tie Rack Picker — seven silk ties fan out like cards on hover, the one under the pointer lifts and names itself; click picks it, it swings and the plaque takes its colour */
#demo-root .item:has(.t74) .stage{min-height:184px}
.t74{--t74-c:#c9a046;width:190px;min-width:0;max-width:100%;height:146px;min-height:0;padding:0;border-radius:6px;overflow:hidden;touch-action:manipulation;
  background:radial-gradient(70% 60% at 50% 10%,color-mix(in srgb,var(--t74-c) 30%,transparent),#0000 70%),repeating-linear-gradient(90deg,#0000 0 3px,#ffffff06 3px 4px),linear-gradient(#3a2c22,#21180f);
  box-shadow:inset 0 0 0 1px #ffffff14,0 18px 26px -14px #000;font:800 9.5px/1 system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:.12em;color:#f7efe2;transition:background .5s}
.t74:focus-visible{outline:2px solid var(--t74-c);outline-offset:5px}
.t74-bar{position:absolute;left:58px;right:58px;top:13px;height:6px;border-radius:3px;z-index:20;background:linear-gradient(#ffffff,#9aa2a9 45%,#d8dde1 60%,#5c636a);box-shadow:0 3px 4px #0008}
.t74-bar::before{content:"";position:absolute;left:50%;top:-13px;width:6px;height:14px;margin-left:-3px;background:linear-gradient(90deg,#6b7279,#e2e6e9,#6b7279)}
.t74-ties{position:absolute;inset:0}
.t74-tie{--t74-a:0deg;--t74-y:0px;--t74-s:1;position:absolute;left:50%;top:15px;width:26px;height:100px;margin-left:-13px;transform-origin:13px 2px;
  transform:rotate(var(--t74-a)) translateY(var(--t74-y)) scale(var(--t74-s));transition:transform .55s cubic-bezier(.3,1.5,.5,1) calc(var(--t74-i)*22ms),filter .3s;filter:brightness(.82) drop-shadow(2px 4px 3px #0008)}
.t74-tie i{position:absolute;inset:0;clip-path:polygon(36% 0,64% 0,66% 9%,58% 16%,80% 84%,50% 100%,20% 84%,42% 16%,34% 9%);background:var(--t74-p)}
.t74-tie i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0000004d,#0000 25%,#ffffff40 48%,#0000 62%,#00000040),linear-gradient(#0000 0 14%,#00000040 14% 16.5%,#0000 17%)}
.t74.t74-fan .t74-tie{filter:brightness(.92) drop-shadow(2px 4px 3px #0008)}
.t74-tie.t74-sel{--t74-y:5px;--t74-s:1.08;z-index:15!important;filter:brightness(1.12) drop-shadow(0 6px 6px #000b)}
.t74-pl{position:absolute;left:14px;right:14px;bottom:8px;height:22px;border-radius:11px;z-index:30;display:flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap;
  background:#120c07d9;box-shadow:inset 0 0 0 1px #ffffff1f,0 0 16px -4px var(--t74-c)}
.t74-sw{width:10px;height:10px;border-radius:50%;background:var(--t74-c);box-shadow:inset 0 -2px 2px #0006,0 0 0 1.5px #fff9}
@media (prefers-reduced-motion: reduce){.t74-tie,.t74{transition:none}}

/* 75 Fogged Mirror Door — canvas condensation: wipe it with the pointer to reveal the reflection, drips run from your strokes and the fog creeps back; click squeegees it clear */
#demo-root .item:has(.t75) .stage{min-height:192px}
.t75{width:172px;min-width:0;max-width:100%;height:136px;min-height:0;padding:0;border-radius:4px;overflow:visible;touch-action:none;cursor:crosshair;transform:translateY(-8px);
  background:linear-gradient(90deg,#8e979e,#e6eaed 30%,#a9b1b8 60%,#dfe3e6 80%,#7f878e);box-shadow:inset 0 0 0 1px #00000040,0 18px 26px -14px #000;
  font:900 11px/1.1 system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:.12em;color:#18324a}
.t75:focus-visible{outline:2px solid #bae6fd;outline-offset:5px}
.t75-ref{position:absolute;inset:6px;overflow:hidden;border-radius:1px;display:grid;align-content:center;justify-items:center;gap:7px;text-align:center;
  background:linear-gradient(#0000 0 26%,#0000001a 26% 28%,#0000 28% 52%,#0000001a 52% 54%,#0000 54%),linear-gradient(90deg,#0000 0 22%,#00000012 22% 24%,#0000 24% 76%,#00000012 76% 78%,#0000 78%),
    linear-gradient(115deg,#c7d3db,#94a7b5 35%,#eef4f7 48%,#8ea2b0 62%,#b9c7d1);box-shadow:inset 0 0 12px #0003}
.t75-ref b{text-shadow:0 1px 0 #ffffffb0}
.t75-ref small{font:700 8.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.03em;color:#2c4a63;text-transform:none}
.t75-ref::after{content:"";position:absolute;inset:-20% -60%;background:linear-gradient(100deg,#fff0 40%,#ffffffc0 50%,#fff0 60%);transform:translateX(-80%);pointer-events:none}
.t75.t75-clr .t75-ref::after{animation:t75-sh 1.1s cubic-bezier(.4,0,.2,1)}
.t75 canvas.t75-fog{inset:6px;width:calc(100% - 12px);height:calc(100% - 12px);border-radius:1px}
.t75-sq{position:absolute;left:2px;right:2px;top:6px;height:7px;border-radius:2px;opacity:0;pointer-events:none;z-index:3;background:linear-gradient(#5b6168,#c9ced2 40%,#3d4247 70%,#111 71%);box-shadow:0 3px 4px #0007}
.t75-hint{position:absolute;left:-30px;right:-30px;top:100%;margin-top:11px;text-align:center;font:700 8.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;color:#8f9ab0;pointer-events:none}
@keyframes t75-sh{to{transform:translateX(80%)}}
@media (prefers-reduced-motion: reduce){.t75.t75-clr .t75-ref::after{animation:none}}

/* 76 Tear-Off Price Tag — drag the perforated stub: it tears left to right shedding fibres, rips free and tumbles while the tag swings and becomes a 15% coupon */
#demo-root .item:has(.t76) .stage{min-height:204px;align-content:start;padding-top:16px}
.t76{--t76-p:0;--t76-r:0deg;width:130px;min-width:0;max-width:100%;height:164px;min-height:0;padding:0;border-radius:0;overflow:visible;background:none;box-shadow:none;touch-action:none;user-select:none;-webkit-user-select:none;
  font:900 9px/1 system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:.12em;color:#3a2a18}
.t76:focus-visible{outline:2px solid #fca5a5;outline-offset:4px}
.t76-tag{position:absolute;left:50%;top:0;width:112px;height:160px;margin-left:-56px;transform-origin:56px 0;transform:rotate(var(--t76-r));filter:drop-shadow(3px 6px 5px #000a)}
.t76-str{position:absolute;left:55px;top:0;width:1.8px;height:36px;background:repeating-linear-gradient(170deg,#d9b77e 0 2px,#a8854c 2px 3px)}
.t76-body{position:absolute;left:0;right:0;top:26px;height:86px;display:grid;align-content:center;justify-items:center;gap:5px;padding-top:12px;
  clip-path:polygon(22% 0,78% 0,100% 18%,100% 100%,0 100%,0 18%);background:radial-gradient(circle at 30% 20%,#ffffff40 0 1px,#0000 1.5px) 0 0/5px 4px,linear-gradient(160deg,#f8efdc,#ecdfc2);transition:background .5s}
.t76-hole{position:absolute;left:50%;top:7px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:#0a0d16;box-shadow:0 0 0 2.5px #c9a046,0 0 0 3.5px #8a6a22}
.t76-br{font-size:8px;letter-spacing:.2em;color:#8a6a42}
.t76-pr{font:900 27px/1 Georgia,"Times New Roman",serif;letter-spacing:-.01em;color:#2a1c0e;text-transform:none}
.t76-sub{font:700 7px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:0;text-transform:none;color:#6b5132}
.t76-body::after{content:"";position:absolute;left:4px;right:4px;bottom:0;border-bottom:2px dotted #0000004d}
.t76-stub{position:absolute;left:0;right:0;top:112px;height:40px;display:grid;align-content:center;justify-items:center;gap:5px;padding-top:3px;
  transform-origin:100% 0;transform:rotate(calc(var(--t76-p)*26deg)) translate(calc(var(--t76-p)*-2px),calc(var(--t76-p)*4px));
  clip-path:polygon(0 3px,5% 0,10% 3px,15% 0,20% 3px,25% 0,30% 3px,35% 0,40% 3px,45% 0,50% 3px,55% 0,60% 3px,65% 0,70% 3px,75% 0,80% 3px,85% 0,90% 3px,95% 0,100% 3px,100% 100%,0 100%);
  background:linear-gradient(#0000 0 70%,#c8102e 70% 82%,#0000 82%),linear-gradient(160deg,#f2e5c8,#e5d4ae);color:#8b0f20}
.t76-stub small{font:700 7px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em;text-transform:none;color:#6b5132}
.t76.t76-snap .t76-stub{transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.t76.t76-snap .t76-tag{transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.t76.t76-won .t76-body{background:radial-gradient(circle at 30% 20%,#ffffff40 0 1px,#0000 1.5px) 0 0/5px 4px,linear-gradient(160deg,#fff3c4,#f2cf6b)}
.t76.t76-won .t76-pr{font-size:22px;color:#8b0f20}
.t76-fb{position:absolute;width:3px;height:1.5px;background:#f3e6c8;pointer-events:none;z-index:3;border-radius:1px}
@media (prefers-reduced-motion: reduce){.t76.t76-snap .t76-stub,.t76.t76-snap .t76-tag,.t76-body{transition:none}}

/* 77 SOLD Stamp Slam — a rubber stamp drops where you click, slams with a card shake and ink spatter, leaving a turbulence-filtered SOLD impression; then PAID, then SHIPPED */
#demo-root .item:has(.t77) .stage{min-height:176px}
.t77{width:196px;min-width:0;max-width:100%;height:112px;min-height:0;padding:0;border-radius:6px;overflow:visible;background:none;box-shadow:none;touch-action:manipulation;color:#1f2933}
.t77:focus-visible{outline:2px solid #fca5a5;outline-offset:5px}
.t77-defs{position:absolute;width:0;height:0}
.t77-card{position:absolute;inset:0;border-radius:6px;overflow:hidden;text-align:left;
  background:repeating-linear-gradient(#0000 0 15px,#2563eb10 15px 16px),radial-gradient(circle at 20% 30%,#0000000a 0 1px,#0000 1.5px) 0 0/6px 5px,linear-gradient(170deg,#fffdf8,#f1ece0);
  box-shadow:inset 0 0 0 1px #0000001f,0 16px 24px -14px #000,0 2px 0 #d8d0bf}
.t77-door{position:absolute;left:12px;top:14px;width:42px;height:66px;border-radius:2px;background:linear-gradient(160deg,#ffffff,#e9eaea);box-shadow:0 0 0 1px #00000026,0 3px 5px -2px #0005}
.t77-door::before{content:"";position:absolute;inset:8px 7px;box-shadow:inset 1.5px 1.5px 0 #00000026,inset -1.5px -1.5px 0 #fff,0 0 0 1.5px #dfe1e1}
.t77-door::after{content:"";position:absolute;right:4px;top:28px;width:2px;height:12px;border-radius:1px;background:linear-gradient(90deg,#666,#ddd,#777)}
.t77-tx{position:absolute;left:64px;top:16px;right:8px;display:grid;gap:6px}
.t77-tx b{font:900 12px/1 system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:.1em}
.t77-tx span{font:700 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.02em;text-transform:none;color:#374151}
.t77-tx em{font:italic 700 8.5px/1.1 system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:0;text-transform:none;color:#b91c1c}
.t77-go{position:absolute;right:9px;bottom:9px;padding:6px 9px;border-radius:999px;background:#111827;color:#fff;font:800 8.5px/1 system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:.12em;box-shadow:0 2px 0 #000}
.t77-ink{position:absolute;inset:0;pointer-events:none}
.t77-imp{position:absolute;width:104px;height:42px;margin:-21px 0 0 -52px;mix-blend-mode:multiply;pointer-events:none}
.t77-imp svg{display:block;overflow:visible}
.t77-sp{position:absolute;border-radius:50%;pointer-events:none;mix-blend-mode:multiply}
.t77-gh{position:absolute;left:0;top:0;width:96px;height:36px;margin:-18px 0 0 -48px;border-radius:50%;background:radial-gradient(closest-side,#0000003a,#0000);opacity:0;transition:opacity .25s;pointer-events:none}
.t77:hover .t77-gh{opacity:1}
.t77-st{position:absolute;width:84px;height:96px;margin:-96px 0 0 -42px;pointer-events:none;z-index:5;transform-origin:50% 100%;filter:drop-shadow(0 10px 8px #0008)}
.t77-st i{position:absolute;left:50%;display:block}
.t77-st .t77-k{top:0;width:28px;height:28px;margin-left:-14px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#e8b984,#9a5f2e 60%,#5e3617)}
.t77-st .t77-n{top:24px;width:14px;height:36px;margin-left:-7px;background:linear-gradient(90deg,#6b4220,#c18a54 45%,#6b4220)}
.t77-st .t77-b{top:58px;width:84px;height:30px;margin-left:-42px;border-radius:4px 4px 2px 2px;background:linear-gradient(#b17a45,#7a4a22);box-shadow:inset 0 2px 0 #e2b07a80}
.t77-st .t77-r{top:86px;width:80px;height:8px;margin-left:-40px;border-radius:0 0 2px 2px;background:var(--t77-c,#c8102e)}
@media (prefers-reduced-motion: reduce){.t77-gh{transition:none}}

/* 78 Handshake Deal — suit arm and flannel arm edge closer as the pointer nears the middle; click and they clasp, fingers wrap, pump three times with a gold spark burst */
#demo-root .item:has(.t78) .stage{min-height:160px}
.t78{--t78-o:40px;width:204px;min-width:0;max-width:100%;height:104px;min-height:0;padding:0;border-radius:10px;overflow:hidden;touch-action:manipulation;
  background:radial-gradient(60% 70% at 50% 38%,#33415580,#0000 70%),linear-gradient(#111827,#0b0f19);box-shadow:inset 0 0 0 1px #ffffff17,0 16px 24px -14px #000;
  font:900 10px/1 system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:.14em;color:#e5e7eb}
.t78:focus-visible{outline:2px solid #fbbf24;outline-offset:5px}
.t78::before{content:"";position:absolute;left:50%;top:-30px;width:150px;height:130px;margin-left:-75px;background:radial-gradient(closest-side,#fde68a2e,#0000);opacity:0;transition:opacity .5s;pointer-events:none}
.t78.t78-deal::before{opacity:1}
.t78-pump{position:absolute;inset:0}
.t78-a{position:absolute;top:18px;width:110px;height:50px;transition:transform .45s cubic-bezier(.3,1.3,.5,1);filter:drop-shadow(0 5px 4px #0009)}
.t78-a svg{display:block;overflow:visible}
.t78-L{left:calc(50% - 104px);transform:translateX(calc(var(--t78-o)*-1))}
.t78-R{left:calc(50% - 6px);transform:translateX(var(--t78-o));z-index:2}
.t78-wrap{opacity:0;transition:opacity .2s}
.t78.t78-deal .t78-wrap{opacity:1;transition-delay:.3s}
.t78-l{position:absolute;left:0;right:0;bottom:12px;text-align:center;transition:color .3s;text-shadow:0 1px 2px #000}
.t78.t78-deal .t78-l{color:#fde68a}
.t78-sp{position:absolute;left:50%;top:40px;width:4px;height:4px;margin:-2px;border-radius:50%;pointer-events:none;z-index:4}
@media (prefers-reduced-motion: reduce){.t78-a,.t78-wrap,.t78::before{transition:none}}

/* 79 Star Burst Rating — click: five stars explode from the pointer on curved paths trailing sparks, then land in their slots one by one while the score rolls to 4.9 */
#demo-root .item:has(.t79) .stage{min-height:164px}
.t79{width:200px;min-width:0;max-width:100%;height:86px;min-height:0;padding:0;border-radius:12px;overflow:visible;touch-action:manipulation;display:block;
  background:radial-gradient(120% 90% at 50% 0%,#2a2340,#0000 70%),linear-gradient(#17132a,#0d0b18);box-shadow:inset 0 0 0 1px #ffffff1a,0 16px 24px -14px #000;
  font:800 9px/1 system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:.14em;color:#d8d2f0}
.t79:focus-visible{outline:2px solid #fcd34d;outline-offset:5px}
.t79-row{position:absolute;left:0;right:0;top:14px;display:flex;justify-content:center;gap:7px}
.t79-s{--t79-f:0%;position:relative;width:26px;height:26px;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);background:#ffffff1f;transition:background .3s}
.t79-s::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--t79-f);background:linear-gradient(#fff3b0,#fbbf24 45%,#d97706)}
.t79-s::before{content:"";position:absolute;inset:3px;clip-path:inherit;background:#17132a}
.t79:hover .t79-s{background:#ffffff38}
.t79:hover .t79-s:nth-child(2){transition-delay:.05s}.t79:hover .t79-s:nth-child(3){transition-delay:.1s}.t79:hover .t79-s:nth-child(4){transition-delay:.15s}.t79:hover .t79-s:nth-child(5){transition-delay:.2s}
.t79-l{position:absolute;left:0;right:0;bottom:15px;display:flex;justify-content:center;align-items:baseline;gap:8px;white-space:nowrap}
.t79-n{font:900 17px/1 system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:0;color:#fcd34d;font-variant-numeric:tabular-nums;text-shadow:0 0 12px #f59e0b80}
.t79-fly{position:absolute;left:0;top:0;width:24px;height:24px;margin:-12px;pointer-events:none;z-index:5;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);background:linear-gradient(#fff7c2,#fbbf24 45%,#d97706)}
.t79-sp{position:absolute;width:3px;height:3px;margin:-1.5px;border-radius:50%;background:#fde68a;box-shadow:0 0 5px #f59e0b;pointer-events:none;z-index:4}
.t79-ring{position:absolute;width:30px;height:30px;margin:-15px;border-radius:50%;border:2px solid #fde68a;pointer-events:none;z-index:4}
@media (prefers-reduced-motion: reduce){.t79-s{transition:none}}

/* 80 Sign Here Pen — drag to sign in speed-sensitive ink with the pen riding the nib, or click and the pen writes a signature itself; a green seal pops and the order ships */
#demo-root .item:has(.t80) .stage{min-height:160px}
.t80{width:206px;min-width:0;max-width:100%;height:100px;min-height:0;padding:0;border-radius:4px;overflow:visible;background:none;box-shadow:none;touch-action:none;cursor:crosshair;display:block;color:#1e293b}
.t80:focus-visible{outline:2px solid #86efac;outline-offset:5px}
.t80-pp{position:absolute;inset:0;border-radius:4px;background:repeating-linear-gradient(#0000 0 17px,#3b82f60f 17px 18px),linear-gradient(170deg,#fffef9,#f3efe4);box-shadow:inset 0 0 0 1px #0000001c,0 16px 24px -14px #000,0 2px 0 #d8d2c3}
.t80-hd{position:absolute;left:10px;top:9px;font:700 7.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;color:#64748b}
.t80-ln{position:absolute;left:24px;right:12px;top:70px;height:1px;background:#334155}
.t80-x{position:absolute;left:11px;top:60px;font:700 10px/1 system-ui,sans-serif;font-style:normal;color:#334155}
.t80-ph{position:absolute;left:28px;top:56px;font:800 9px/1 system-ui,-apple-system,"Segoe UI",sans-serif;font-style:normal;letter-spacing:.24em;color:#94a3b8;transition:opacity .3s}
.t80.t80-ink .t80-ph{opacity:0}
.t80-st{position:absolute;left:10px;right:34px;bottom:9px;font:800 8px/1 system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#64748b;white-space:nowrap}
.t80.t80-done .t80-st{color:#15803d}
.t80-seal{position:absolute;right:9px;bottom:6px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font:900 11px/1 system-ui,sans-serif;font-style:normal;color:#fff;
  background:radial-gradient(circle at 35% 30%,#4ade80,#15803d);box-shadow:0 0 0 2px #fff,0 0 0 3px #15803d55,0 3px 5px #0004;transform:scale(0) rotate(-40deg)}
.t80.t80-done .t80-seal{transform:none;transition:transform .5s cubic-bezier(.3,1.8,.5,1)}
.t80 canvas.t80-c{inset:20px 8px auto 8px;width:calc(100% - 16px);height:56px}
.t80-pen{position:absolute;left:0;top:0;width:12px;height:48px;margin:-48px 0 0 -6px;transform-origin:6px 48px;opacity:0;pointer-events:none;z-index:4;filter:drop-shadow(4px 5px 3px #0006);transition:opacity .2s}
.t80.t80-pen-on .t80-pen{opacity:1}
.t80-sig{position:absolute;width:0;height:0;visibility:hidden;overflow:hidden}
@media (prefers-reduced-motion: reduce){.t80.t80-done .t80-seal,.t80-ph,.t80-pen{transition:none}}