.pp{--pp-frame-h:clamp(220px, calc(100svh - 500px), 340px);border-radius:var(--radius-2xl);background:var(--t0);box-shadow:var(--shadow-stack);min-width:0}.pp [hidden]{display:none!important}.pp .pp-visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.pp .pp-toolbar{align-items:end;gap:var(--space-4) var(--space-5);padding:var(--space-3) var(--space-6) var(--space-4);background:var(--t2);border-radius:var(--radius-2xl) var(--radius-2xl) 0 0;flex-wrap:wrap;display:flex}.pp .pp-field{flex-direction:column;gap:6px;min-width:0;display:flex}.pp .pp-label{font:var(--weight-heading) var(--text-caption) / 1.2 var(--font-sans);color:var(--color-ink);align-items:center;display:flex}.pp .pp-control{height:var(--control-h);padding:0 var(--space-3);border:1px solid var(--color-control-line);border-radius:var(--radius-md);background-color:var(--t0);max-width:100%;color:var(--color-ink);font:var(--weight-heading) var(--text-body) / 1 var(--font-sans);appearance:none;text-overflow:ellipsis;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");background-position:right 12px center;background-repeat:no-repeat;padding-right:36px}.pp #pp-standard{width:290px}.pp #pp-bg{width:170px}.pp .pp-bg-hint{font-size:var(--text-caption);color:var(--color-muted);margin:0;padding-bottom:14px;line-height:1.3}.pp .pp-progress{background:var(--t3);height:3px;overflow:hidden}.pp .pp-progress span{width:40%;height:100%;animation:pp-slide var(--duration-indeterminate) linear infinite;background:#000;display:block}@keyframes pp-slide{0%{transform:translate(-100%)}to{transform:translate(250%)}}@media (prefers-reduced-motion:reduce){.pp .pp-progress span{width:100%;animation:none}}.pp .pp-body{padding:var(--space-4) var(--space-6);gap:var(--space-4);flex-direction:column;display:flex}.pp #pp-status{font-size:var(--text-caption);color:var(--color-muted);margin:0;line-height:1.4}.pp #pp-status:empty{display:none}.pp .pp-drop{justify-content:center;align-items:center;gap:var(--space-3);min-height:260px;padding:var(--space-6) var(--space-4);text-align:center;border:1.5px dashed var(--color-control-line);border-radius:var(--radius-xl);cursor:pointer;color:var(--color-ink);background:var(--t0);flex-direction:column;transition:background-color .15s,border-color .15s;display:flex;position:relative}.pp .pp-drop:has(input:focus-visible){outline-offset:3px;outline:2px solid #000}.pp .pp-drop:hover,.pp .pp-drop.over{background-color:var(--t2);border-color:#000}.pp .pp-drop strong{text-wrap:balance;color:var(--color-ink);font:var(--weight-display) clamp(1.5rem, 1.1rem + 1.2vw, 2rem) / 1.1 var(--font-sans);letter-spacing:var(--tracking-display)}.pp .pp-hint{font-size:var(--text-caption);color:var(--color-muted);line-height:1.4}.pp .pp-unsupported{padding:var(--space-8) var(--space-6);background:var(--t2);border-radius:var(--radius-xl)}.pp .pp-unsupported h2{margin:0 0 var(--space-2);font-size:var(--text-heading-md);font-weight:var(--weight-heading);letter-spacing:var(--tracking-heading);color:var(--color-ink)}.pp .pp-unsupported p{color:var(--color-body);max-width:560px;margin:0}.pp .pp-unsupported .btn{margin-top:var(--space-4)}.pp .pp-editor{gap:var(--space-6);grid-template-columns:auto minmax(0,1fr);align-items:start;display:grid}.pp .pp-stage{align-items:center;gap:var(--space-2);min-width:0;padding:var(--space-3);border-radius:var(--radius-xl);background:var(--t2);flex-direction:column;display:flex}.pp .pp-frame{touch-action:none;cursor:grab;aspect-ratio:var(--pp-ar);width:min(100%, calc(var(--pp-frame-h) * var(--pp-ar)));border:1px solid var(--color-control-line);background:var(--t0);height:auto;position:relative;overflow:hidden}.pp .pp-frame:active{cursor:grabbing}.pp .pp-frame:focus-visible{outline-offset:3px;border-radius:0;outline:2px solid #000}.pp .pp-frame canvas{width:100%;height:100%;display:block;position:absolute;inset:0}.pp .pp-guides{pointer-events:none;position:absolute;inset:0}.pp .pp-band{background:#00000024;border-block:1px dashed #000;position:absolute;left:0;right:0}.pp .pp-band-top{top:var(--top-from);height:var(--top-h)}.pp .pp-band-chin{top:var(--chin-from);height:var(--chin-h)}.pp .pp-band span{left:var(--space-1);border-radius:var(--radius-pill);color:#fff;font:var(--weight-strong) var(--text-micro) / 1.3 var(--font-sans);background:#000;padding:2px 8px;position:absolute;top:50%;transform:translateY(-50%)}.pp .pp-centre{border-left:1px dashed #000;position:absolute;top:0;bottom:0;left:50%}.pp .pp-legend{max-width:calc(var(--pp-frame-h) * var(--pp-ar));text-align:center;font-size:var(--text-micro);color:var(--color-muted);margin:0;line-height:1.35}.pp .pp-side{gap:var(--space-2);flex-direction:column;min-width:0;max-width:480px;display:flex}.pp .pp-range-row{align-items:center;gap:var(--space-3);height:var(--control-h);color:var(--color-ink);display:flex}.pp .pp-range{min-width:0;height:var(--control-h);accent-color:#000;flex:1;margin:0}.pp .pp-range-row output{text-align:right;min-width:4ch;font-weight:var(--weight-heading)}.pp .pp-help,.pp .pp-disclaimer{font-size:var(--text-caption);color:var(--color-body);margin:0;line-height:1.45}.pp .pp-disclaimer{color:var(--color-muted)}.pp .pp-downloads{gap:var(--space-2);flex-direction:column;display:flex}.pp .pp-btn-link{min-height:var(--control-h-sm);margin-left:calc(-1 * var(--space-2));align-self:flex-start}@media (forced-colors:active){.pp{border:1px solid canvastext}}@media (width<=760px){.pp .pp-toolbar{gap:var(--space-3);padding:var(--space-4)}.pp .pp-field{flex:100%}.pp .pp-control,.pp #pp-standard,.pp #pp-bg{width:100%}.pp .pp-bg-hint{flex-basis:100%;padding-bottom:0}.pp .pp-body{padding:var(--space-3)}.pp .pp-drop{min-height:0;padding:var(--space-8) var(--space-4)}.pp .pp-editor{gap:var(--space-4);grid-template-columns:minmax(0,1fr)}.pp .pp-side{max-width:none}.pp .pp-btn-link{min-height:var(--tap-min);align-self:stretch;margin-left:0}}
