.interaction-board{border:1px solid #3b4033;border-radius:4px;background:#191c16;overflow:hidden;transform:perspective(1000px) rotateY(-3deg);transition:transform .5s}
.interaction-board:hover{transform:perspective(1000px) rotateY(0)}
.board-head,.board-bottom{display:flex;justify-content:space-between;gap:12px;padding:18px 20px;font:9px monospace;letter-spacing:.8px;color:#949d88}
.board-head{border-bottom:1px solid #343a2d}
.board-live{color:#c6d0b7}
.kinetic-display{height:260px;position:relative;display:grid;place-items:center;overflow:hidden;background:radial-gradient(ellipse at center,#35402555,transparent 70%)}
.kinetic-ring{position:absolute;width:190px;height:190px;border:1px solid #4d5940;border-radius:50%;transform:rotateX(60deg) rotate(-30deg);box-shadow:0 0 0 30px #333d2629,0 0 0 60px #333d261c}
.kinetic-symbol{color:var(--orange);font-size:170px;line-height:1;font-weight:300;filter:drop-shadow(12px 12px 0 #fc7e3617);transition:transform .7s cubic-bezier(.2,1.8,.3,1),opacity .2s;transform:rotate(-8deg)}
.kinetic-display.pulse .kinetic-symbol{transform:rotate(15deg) scale(.7)}
.kinetic-coordinate{position:absolute;left:20px;top:20px;font:9px monospace;color:#89937c;letter-spacing:1px}
.kinetic-caption{position:absolute;bottom:20px;font-size:11px;color:#b6c1a8;letter-spacing:2px}
.platform-keys{display:flex;border-block:1px solid #343a2d;padding:12px;gap:5px}
.platform-keys button{flex:1;padding:10px 3px;border:1px solid transparent;border-radius:3px;background:transparent;color:#8f9981;font-size:10px;cursor:pointer;transition:background .2s,color .2s,transform .3s}
.platform-keys button:hover{transform:translateY(-3px);color:#e7efdc}
.platform-keys button.active{background:#fc7e36;color:#191b14;border-color:#fc7e36}
.board-bottom{font-size:8px;padding:15px 20px}
.preview-note{position:fixed;bottom:14px;right:16px;z-index:45;border:1px solid #59634d;background:#1d2418ed;color:#c7d6b6;font:10px monospace;padding:10px 14px;border-radius:3px;pointer-events:none}
.interaction-board{animation-delay:.12s}
.interaction-board{transform:none}
.kinetic-display{height:210px}
.kinetic-symbol{font-size:145px}
.preview-note{font-size:8px;padding:8px 10px;bottom:8px;right:8px}
.interaction-board{background:#242a1e;border-color:#333e29;color:#edf2e4;box-shadow:0 18px 45px #27371b12}
.board-head,.board-bottom{color:#a0ad90}
.board-head{border-color:#414b35}
.board-live{color:#d0debf}
.kinetic-display{background:radial-gradient(ellipse at center,#596e394a,transparent 70%)}
.kinetic-coordinate{color:#98a785}
.kinetic-caption{color:#d0dcbe}
.platform-keys{border-color:#414b35}
.platform-keys button{color:#a6b497}
.platform-keys button:hover{color:#fff}
.platform-keys button.active{color:#1a2114}
.preview-note{background:#f7f7f2ed;color:#5b6d49;border-color:#bdcbaa}
.interaction-board{transform:none}
.kinetic-display{height:230px}
.interaction-board{align-self:center;width:100%;background:#242a1e;border:1px solid #3b4532;border-radius:8px;color:#edf2e4;box-shadow:0 18px 45px #27371b12}.board-head{color:#a0ad90;border-color:#414b35}.board-bottom{color:#a0ad90}.board-live{color:#d0debf}.kinetic-symbol{color:#fc7e36}.platform-keys button.active{background:#fc7e36;border-color:#fc7e36;color:#1a2114}.preview-note{background:#f7f7f2ed;color:#5b6d49;border-color:#bdcbaa}@media(max-width:900px){.interaction-board{transform:none}.kinetic-display{height:240px}}@media(max-width:600px){.interaction-board{margin-top:12px}.kinetic-display{height:230px}}@media(prefers-reduced-motion:reduce){.interaction-board,.kinetic-symbol,.platform-keys button{transition:none!important}}
/* Pointer-driven perspective and surface light, scoped to the hero card. */
.interaction-board{position:relative;transform:perspective(1100px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transform-style:preserve-3d;transition:transform .65s cubic-bezier(.2,.8,.2,1),box-shadow .65s;will-change:auto;isolation:isolate}.interaction-board:hover{transform:perspective(1100px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg))}.interaction-board.is-tilting{transition:transform .12s ease-out,box-shadow .25s;will-change:transform;box-shadow:var(--shadow-x,0px) 24px 50px #1d2c1933}.interaction-board:after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;background:radial-gradient(ellipse 65% 65% at var(--light-x,50%) var(--light-y,50%),#fff2,transparent 75%);opacity:0;transition:opacity .35s}.interaction-board.is-tilting:after{opacity:1}.interaction-board .kinetic-symbol{filter:drop-shadow(12px 16px 0 #fc7e3617)}@media(prefers-reduced-motion:reduce){.interaction-board,.interaction-board:hover,.interaction-board.is-tilting{transform:none!important;transition:none!important}.interaction-board:after{display:none}}
/* Product flags sit above the artwork, distinct from platform metadata. */
.product-card{position:relative}.product-card .product-card-markers{position:absolute;top:14px;right:14px;z-index:3;display:flex;gap:7px;align-items:center;pointer-events:none}.product-card .product-card-markers .product-label{margin:0;padding:9px 12px;border-radius:5px;font:800 14px/1.1 -apple-system,BlinkMacSystemFont,'Arial',sans-serif;letter-spacing:1px;border:1px solid #ffffff60;box-shadow:0 3px 10px #1d281b26}.product-card .product-card-markers .product-label-new{background:#263321;color:#fff}.product-card .product-card-markers .product-label-hot{background:#f16b3b;color:#fff}.product-card .product-card-markers .product-arrow{display:none}.product-card .product-card-markers:not(:has(.product-label)){display:none}@media(max-width:600px){.product-card .product-card-markers{top:12px;right:12px}.product-card .product-card-markers .product-label{padding:7px 10px;font-size:12px}}
.product-card .product-card-markers .product-label{display:grid;place-items:center;width:40px;height:40px;padding:7px;border-radius:10px;pointer-events:auto;letter-spacing:0}.product-card .product-card-markers .product-label svg{display:block;width:26px;height:26px;overflow:visible}.product-card .product-card-markers .product-label-new{background:#273721;color:#e4f4ad}.product-card .product-card-markers .product-label-hot{background:#f16b3b}@media(max-width:600px){.product-card .product-card-markers .product-label{width:36px;height:36px;padding:6px}.product-card .product-card-markers .product-label svg{width:24px;height:24px}}
/* Open glyphs replace boxed badges. */
.product-card .product-card-markers{top:13px;right:13px;gap:3px}.product-card .product-card-markers .product-label,.product-card .product-card-markers .product-label-new,.product-card .product-card-markers .product-label-hot{width:37px;height:39px;padding:2px;background:none;border:0;border-radius:0;box-shadow:none;filter:drop-shadow(0 2px 2px #fff9)}.product-card .product-card-markers .product-label svg{width:32px;height:32px}.product-card .product-card-markers .product-label-new{transform:rotate(-8deg)}@media(max-width:600px){.product-card .product-card-markers .product-label{width:33px;height:35px;padding:1px}.product-card .product-card-markers .product-label svg{width:30px;height:30px}}
/* Offset rhythms draw attention without moving the product card itself. */
.product-card .product-card-markers{gap:7px}.product-card .product-card-markers .product-label{width:40px;height:43px;overflow:visible}.product-card .product-card-markers .product-label svg{width:35px;height:35px;transform-origin:50% 70%;will-change:transform}.product-card .product-card-markers .product-label-hot svg{animation:badge-fire-hop 2.4s cubic-bezier(.3,.1,.25,1) infinite;filter:drop-shadow(0 3px 5px #f76c3b44)}.product-card .product-card-markers .product-label-new svg{animation:badge-star-pop 3.2s ease-in-out .5s infinite;filter:drop-shadow(0 2px 4px #e8b04d55)}@keyframes badge-fire-hop{0%,15%,48%,100%{transform:translateY(0) rotate(0) scale(1)}25%{transform:translateY(-9px) rotate(-8deg) scale(1.1)}34%{transform:translateY(0) rotate(5deg) scale(1.03,.94)}41%{transform:translateY(-4px) rotate(-3deg) scale(1.04)}}@keyframes badge-star-pop{0%,18%,65%,100%{transform:scale(1) rotate(0);opacity:1}32%{transform:scale(1.2) rotate(12deg);opacity:1}45%{transform:scale(.96) rotate(-7deg);opacity:.8}55%{transform:scale(1.1) rotate(4deg);opacity:1}}@media(max-width:600px){.product-card .product-card-markers .product-label{width:36px;height:39px}.product-card .product-card-markers .product-label svg{width:32px;height:32px}}@media(prefers-reduced-motion:reduce){.product-card .product-card-markers .product-label svg{animation:none!important;will-change:auto}}