.fr-canvas{border:1px solid var(--line-strong);background:var(--surface);width:100%;max-width:17rem;margin:0 auto;overflow:hidden;box-shadow:0 1.2rem 3rem -1.5rem #000000b3}.fr-canvas-chrome{border-bottom:1px solid var(--line-strong);align-items:center;gap:.45rem;padding:.55rem .7rem;display:flex}.fr-canvas-logo{background:url(/images/platform-logo/framer_logo.svg) 50%/contain no-repeat;flex-shrink:0;width:.75rem;height:.75rem}.fr-canvas-name{font-family:var(--mono);letter-spacing:.06em;color:var(--body-text);font-size:.55rem}.fr-canvas-dots{gap:.25rem;margin-left:auto;display:flex}.fr-canvas-dots i{background:var(--line-strong);border-radius:50%;width:.35rem;height:.35rem}.fr-canvas-stage{background:radial-gradient(circle at 1px 1px,#7c7eb624 1px,transparent 1.6px)0 0/1.1rem 1.1rem,var(--bg);justify-content:center;align-items:center;height:10.5rem;display:flex;position:relative}.fr-canvas-comp{background:var(--surface);border:1px solid var(--line-strong);flex-direction:column;gap:.5rem;width:58%;padding:.8rem;animation:3.6s cubic-bezier(.34,1.56,.5,1) infinite fr-bob;display:flex;position:relative}.fr-canvas-comp-bar{background:linear-gradient(135deg,#1a258d8c,#c41e1e4d);height:1.3rem}.fr-canvas-comp-line{background:var(--line-strong);width:72%;height:.35rem}.fr-canvas-comp-btn{background:var(--red);width:46%;height:1rem}.fr-canvas-handle{background:var(--bg);border:1.5px solid var(--red);width:.4rem;height:.4rem;position:absolute}.fr-canvas-handle--tl{top:-.25rem;left:-.25rem}.fr-canvas-handle--tr{top:-.25rem;right:-.25rem}.fr-canvas-handle--bl{bottom:-.25rem;left:-.25rem}.fr-canvas-handle--br{bottom:-.25rem;right:-.25rem}.fr-canvas-curve{width:4.4rem;height:auto;position:absolute;bottom:.7rem;right:.8rem}.fr-canvas-curve path{filter:drop-shadow(0 0 .25rem #c41e1e66)}.fr-canvas-tag{font-family:var(--mono);letter-spacing:.04em;color:var(--ink-faint);font-size:.5rem;position:absolute;top:.7rem;left:.8rem}@keyframes fr-bob{0%,to{transform:translateY(0)}45%{transform:translateY(-.7rem)}}.fr-stage{border:1px solid var(--line-strong);background:radial-gradient(circle at 1px 1px,#7c7eb629 1px,transparent 1.6px)0 0/1.4rem 1.4rem,var(--surface);touch-action:pan-y;height:19rem;position:relative;overflow:hidden}@media (max-width:600px){.fr-stage{height:16rem}}.fr-stage-hint{font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);pointer-events:none;font-size:.55rem;position:absolute;top:.8rem;left:1rem}.fr-chip{border:1px solid var(--line-strong);border-radius:var(--radius-pill);background:var(--bg);color:var(--white);font-family:var(--sans);white-space:nowrap;cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none;z-index:2;will-change:transform;align-items:center;gap:.45rem;padding:.65rem 1.1rem;font-size:.75rem;font-weight:500;transition:border-color .2s,background .2s;display:inline-flex;position:absolute;box-shadow:0 .6rem 1.7rem -.7rem #000000a6}.fr-chip:hover{border-color:color-mix(in srgb,var(--red)55%,var(--line-strong))}.fr-chip[data-grab=true]{cursor:grabbing;border-color:var(--red);background:color-mix(in srgb,var(--red)8%,var(--bg))}.fr-chip:focus-visible{outline:.1rem solid var(--red);outline-offset:.15rem}.fr-chip-dot{background:var(--red);border-radius:50%;flex-shrink:0;width:.4rem;height:.4rem}@media (prefers-reduced-motion:reduce){.fr-canvas-comp{animation:none}}