.tilt-showcase{--tilt-contact-x:50%;--tilt-contact-y:50%;--tilt-blue:#64c6ff;--tilt-gold:#ffbf00;--tilt-bg:#070809;--tilt-panel:#0c0d0f;--tilt-text:#f5f5f4;--tilt-muted:#a1a1aa;--tilt-line:#ffffff1f;border:1px solid color-mix(in srgb, var(--tilt-blue) 42%, transparent);background:var(--tilt-bg);color:var(--tilt-text);border-radius:18px;overflow:hidden;box-shadow:0 30px 90px #00000057}html[data-theme=light] .tilt-showcase{--tilt-blue:#0076a8;--tilt-gold:#9b6500;--tilt-bg:#fffdf8;--tilt-panel:#f4ecde;--tilt-text:#17140d;--tilt-muted:#625d53;--tilt-line:#221b0d24;box-shadow:0 28px 70px #49361126}.tilt-showcase-head{border-bottom:1px solid var(--tilt-line);grid-template-columns:1fr minmax(300px,.9fr);align-items:end;gap:30px;padding:24px 28px;display:grid}.tilt-showcase-head h3{letter-spacing:-.04em;margin:.35rem 0 0;font-size:clamp(1.45rem,3vw,2.35rem);line-height:1.05}.tilt-showcase-head p{color:var(--tilt-muted);margin:0;font-size:.9rem}.tilt-kicker{color:var(--tilt-blue);letter-spacing:.18em;text-transform:uppercase;font-size:.65rem;font-weight:850}.tilt-workbench{grid-template-columns:minmax(0,1fr) 210px;min-height:480px;display:grid}.tilt-stage{perspective:1100px;background:radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--tilt-blue) 12%, transparent), transparent 46%);place-items:center;padding:70px;display:grid;position:relative}.tilt-stage:before{content:"";background-image:linear-gradient(var(--tilt-line) 1px, transparent 1px), linear-gradient(90deg, var(--tilt-line) 1px, transparent 1px);opacity:.32;pointer-events:none;background-size:28px 28px;position:absolute;inset:24px;mask-image:radial-gradient(circle,#000,#0000 78%)}.tilt-surface{--dynt-kinetic-color:var(--tilt-blue);z-index:2;isolation:isolate;cursor:crosshair;border-radius:18px;align-items:end;width:min(100%,620px);min-height:300px;padding:42px;display:grid;position:relative}.tilt-surface .dynt-kinetic__layer{border:1px solid color-mix(in srgb, var(--tilt-blue) 58%, transparent);border-radius:inherit;background:linear-gradient(145deg, color-mix(in srgb, var(--tilt-blue) 10%, transparent), color-mix(in srgb, var(--tilt-gold) 6%, transparent)), var(--tilt-panel)}.tilt-surface .dynt-kinetic__layer:before,.tilt-surface .dynt-kinetic__layer:after{content:"";pointer-events:none;position:absolute}.tilt-surface .dynt-kinetic__layer:before{border:1px solid color-mix(in srgb, var(--tilt-gold) 28%, transparent);border-radius:12px;inset:12px}.tilt-surface .dynt-kinetic__layer:after{background:linear-gradient(90deg, transparent 49.8%, color-mix(in srgb, var(--tilt-line) 70%, transparent) 50%, transparent 50.2%), linear-gradient(transparent 49.8%, color-mix(in srgb, var(--tilt-line) 70%, transparent) 50%, transparent 50.2%);opacity:.7;inset:0}.tilt-surface-content{z-index:2;max-width:440px;position:relative}.tilt-surface-content>span{color:var(--tilt-blue);letter-spacing:.12em;text-transform:uppercase;font:750 .64rem ui-monospace,SFMono-Regular,Menlo,monospace}.tilt-surface-content h3{letter-spacing:-.055em;margin:.65rem 0 .5rem;font-size:clamp(1.8rem,4vw,3.25rem);line-height:.98}.tilt-surface-content p{color:var(--tilt-muted);max-width:410px;margin:0}.tilt-content-row{flex-wrap:wrap;gap:7px;margin-top:24px;display:flex}.tilt-content-row span{border:1px solid var(--tilt-line);color:var(--tilt-muted);border-radius:999px;padding:.38rem .6rem;font-size:.62rem}.tilt-contact-marker{z-index:4;left:var(--tilt-contact-x);top:var(--tilt-contact-y);border:1px solid var(--tilt-gold);opacity:0;width:18px;height:18px;box-shadow:0 0 0 8px color-mix(in srgb, var(--tilt-gold) 10%, transparent), 0 0 28px color-mix(in srgb, var(--tilt-gold) 58%, transparent);pointer-events:none;border-radius:50%;transition:left 80ms linear,top 80ms linear,opacity .2s;position:absolute;translate:-50% -50%}.tilt-showcase[data-contact-active=true] .tilt-contact-marker{opacity:1}.tilt-point{z-index:5;border:1px solid var(--tilt-line);background:var(--tilt-panel);width:42px;height:42px;color:var(--tilt-muted);cursor:pointer;border-radius:9px;font:750 .58rem ui-monospace,SFMono-Regular,Menlo,monospace;position:absolute}.tilt-point:hover,.tilt-point:focus-visible{border-color:var(--tilt-blue);color:var(--tilt-blue)}.tilt-point-nw{top:24px;left:24px}.tilt-point-ne{top:24px;right:24px}.tilt-point-sw{bottom:24px;left:24px}.tilt-point-se{bottom:24px;right:24px}.tilt-instruments{border-left:1px solid var(--tilt-line);background:color-mix(in srgb, var(--tilt-panel) 80%, transparent);align-content:stretch;display:grid}.tilt-instruments>div{border-bottom:1px solid var(--tilt-line);align-content:center;gap:4px;padding:22px;display:grid}.tilt-instruments>div:last-child{border-bottom:0}.tilt-instruments span,.tilt-controls>span{color:var(--tilt-muted);letter-spacing:.12em;text-transform:uppercase;font-size:.58rem;font-weight:760}.tilt-instruments strong{color:var(--tilt-blue);text-transform:capitalize;font-size:1.08rem}.tilt-instruments small{color:var(--tilt-muted);font-size:.68rem}.tilt-controls{border-top:1px solid var(--tilt-line);grid-template-columns:auto 1fr minmax(220px,.7fr);align-items:center;gap:18px;padding:16px 20px;display:grid}.tilt-controls>div{flex-wrap:wrap;gap:7px;display:flex}.tilt-controls button{border:1px solid var(--tilt-line);background:var(--tilt-panel);min-height:36px;color:var(--tilt-muted);cursor:pointer;border-radius:8px;padding:.42rem .7rem;font-size:.7rem}.tilt-controls button[aria-pressed=true]{border-color:var(--tilt-blue);color:var(--tilt-blue);background:color-mix(in srgb, var(--tilt-blue) 9%, transparent)}.tilt-controls p{color:var(--tilt-muted);margin:0;font-size:.7rem}@media (width<=900px){.tilt-showcase-head{grid-template-columns:1fr;gap:12px}.tilt-workbench{grid-template-columns:1fr}.tilt-instruments{border-left:0;border-top:1px solid var(--tilt-line);grid-template-columns:repeat(3,1fr)}.tilt-instruments>div{border-right:1px solid var(--tilt-line);border-bottom:0}.tilt-instruments>div:last-child{border-right:0}.tilt-controls{grid-template-columns:1fr}}@media (width<=620px){.tilt-showcase-head{padding:20px}.tilt-stage{padding:62px 22px}.tilt-surface{min-height:330px;padding:30px}.tilt-instruments{grid-template-columns:1fr}.tilt-instruments>div{border-right:0;border-bottom:1px solid var(--tilt-line)}.tilt-point-nw,.tilt-point-sw{left:10px}.tilt-point-ne,.tilt-point-se{right:10px}}