.pp-hold-btn{display:inline-flex;align-items:center;gap:6px;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.pp-hero-demo{container-type:inline-size;display:flex;flex-direction:column;gap:8px}.pp-hero-stage{position:relative;height:min(100cqw,560px);border-radius:var(--pp-radius-lg);overflow:hidden;background:var(--pp-hairline);box-shadow:var(--pp-shadow-card);color:#fff}.pp-hero-stage>canvas,.pp-hero-stage>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--hero-focus, 50% 50%);display:block}.pp-hero-stage>img{transition:opacity .3s ease}.pp-hero-stage[data-live=true]>img{opacity:0;pointer-events:none}.pp-hero-stage[data-holding=true]>img{opacity:1;transition:none}.pp-hero-top{position:absolute;top:10px;left:10px;right:10px;display:flex;justify-content:space-between;align-items:flex-start;gap:8px}.pp-hero-tabs{display:flex;gap:2px;padding:3px;border-radius:var(--pp-radius-pill);background:#ffffffe6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.pp-hero-tabs .pp-chip{border-color:transparent;background:transparent}.pp-hero-tabs .pp-chip[aria-pressed=true]{background:var(--pp-ink);border-color:var(--pp-ink)}.pp-hero-stage .pp-hold-btn{padding:9px 12px;background:#ffffffe6;border-color:transparent;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.pp-hero-stage .pp-hold-btn[aria-pressed=true]{background:var(--pp-ink);color:var(--pp-cream)}.pp-hero-loading{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;padding:7px 12px;border-radius:var(--pp-radius-pill);background:#ffffffe6;color:var(--pp-ink);font-size:12px}.pp-hero-panel{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:10px;padding:40px 12px 12px;background:linear-gradient(to top,#14120fb8,#14120f73 55%,#14120f00);pointer-events:none}.pp-hero-panel>*{pointer-events:auto}.pp-hero-panel-row{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}.pp-hero-seg{display:flex;flex-shrink:0;padding:3px;gap:2px;border-radius:var(--pp-radius-pill);background:#ffffff29;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.pp-hero-seg button{padding:6px 12px;border:0;border-radius:var(--pp-radius-pill);background:transparent;color:#fff;font:inherit;font-size:12px;font-weight:600;cursor:pointer}.pp-hero-seg button[aria-pressed=true]{background:#fff;color:var(--pp-ink)}.pp-hero-seg button:focus-visible,.pp-hero-panel .pp-swatch:focus-visible{outline:2px solid #fff;outline-offset:2px}.pp-hero-surface{font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;opacity:.85}.pp-hero-name{margin:0;min-width:0;font-size:13px;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 2px rgba(0,0,0,.35)}.pp-hero-name strong{font-weight:600}.pp-hero-name span{opacity:.75}.pp-hero-swatches{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding:4px;margin:-4px}.pp-hero-swatches::-webkit-scrollbar{display:none}.pp-hero-swatches .pp-swatch{flex:0 0 auto;width:clamp(34px,11cqw,48px);height:auto;border:none;padding:0;border-radius:50%;box-shadow:inset 0 0 0 1px #ffffff59,0 1px 3px #0000004d;transition:transform .15s ease}.pp-hero-swatches .pp-swatch-selected{box-shadow:0 0 0 2.5px #fff,0 0 0 4.5px #00000059;transform:scale(1.06)}.pp-hero-swatches .pp-swatch:disabled{cursor:default;opacity:.5}.pp-hero-hint{margin:0;font-size:12px;color:var(--pp-ink-soft);text-align:center}