.pf-root{background:var(--bg);position:absolute;inset:0;overflow:hidden}.pf-playground{z-index:0;position:fixed}.pf-canvas{cursor:grab;opacity:0;width:100%;height:100%;transition:opacity 1.6s var(--ease);display:block;position:absolute;inset:0}.pf-canvas:active{cursor:grabbing}.pf-ready .pf-canvas{opacity:1}.pf-hero .pf-canvas{touch-action:pan-y}.pf-playground .pf-canvas{touch-action:none}.pf-fallback{pointer-events:none;place-items:center;display:grid;position:absolute;inset:0}.pf-fallback-img{opacity:.55;filter:grayscale()sepia()saturate(2.6)hue-rotate(-8deg)brightness(.9);width:min(70vmin,640px);-webkit-mask-image:radial-gradient(circle,#000 35%,#0000 70%);mask-image:radial-gradient(circle,#000 35%,#0000 70%)}.pf-hero .pf-fallback{justify-items:end;padding-right:6vw}.pf-fallback-note{text-align:center;width:min(90vw,420px);color:var(--text-muted);font-size:.95rem;position:absolute;bottom:12vh;left:50%;transform:translate(-50%)}.pf-hero-tools{right:var(--gutter);z-index:3;gap:.5rem;display:flex;position:absolute;bottom:2rem}.pf-chip{border:1px solid var(--line-strong);height:34px;color:var(--text-muted);font-family:var(--font-mono);letter-spacing:.04em;cursor:pointer;transition:color .3s var(--ease), border-color .3s var(--ease);background:#0a0907cc;border-radius:999px;align-items:center;padding:0 .9rem;font-size:.72rem;display:inline-flex}.pf-chip:hover{color:var(--gold-bright);border-color:var(--gold)}.pf-lab-header{left:var(--gutter);pointer-events:none;z-index:2;position:absolute;bottom:2.5rem}.pf-lab-title{font-family:var(--font-display);margin:.5rem 0 .75rem;font-size:clamp(2.5rem,6vw,4.5rem);font-weight:400;line-height:1}.pf-lab-title em{color:var(--gold-bright)}.pf-lab-hint{font-family:var(--font-mono);letter-spacing:.08em;color:var(--text-dim);font-size:.75rem}.pf-toggle{top:calc(var(--nav-h) + 1rem);right:var(--gutter);z-index:20;border:1px solid var(--line-strong);height:38px;color:var(--gold-bright);font-family:var(--font-mono);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:border-color .3s var(--ease);background:#0a0907d9;border-radius:999px;padding:0 1.1rem;font-size:.75rem;position:fixed}.pf-toggle:hover{border-color:var(--gold)}.pf-panel{top:calc(var(--nav-h) + 4rem);right:var(--gutter);z-index:19;width:min(320px, calc(100vw - 2 * var(--gutter)));max-height:calc(100dvh - var(--nav-h) - 6rem);border:1px solid var(--line);border-radius:var(--radius-lg);animation:pf-panel-in .4s var(--ease);background:#12100cf0;flex-direction:column;gap:1rem;padding:1.25rem;display:flex;position:fixed;overflow-y:auto;box-shadow:0 30px 60px -20px #000000b3}@keyframes pf-panel-in{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}.pf-field{flex-direction:column;gap:.45rem;display:flex}.pf-field-row{color:var(--text-muted);justify-content:space-between;font-size:.8rem;display:flex}.pf-field-value{font-family:var(--font-mono);color:var(--gold-bright);font-size:.72rem}.pf-field-note{color:var(--text-dim);font-size:.72rem}.pf-slider{appearance:none;cursor:pointer;background:#d4af372e;border-radius:3px;outline:none;width:100%;height:3px}.pf-slider::-webkit-slider-thumb{appearance:none;background:var(--gold-bright);border-radius:50%;width:14px;height:14px;transition:transform .15s;box-shadow:0 0 0 4px #d4af3726,0 0 12px #d4af3780}.pf-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.pf-slider::-moz-range-thumb{background:var(--gold-bright);border:none;border-radius:50%;width:14px;height:14px;box-shadow:0 0 0 4px #d4af3726,0 0 12px #d4af3780}.pf-swatches{flex-wrap:wrap;gap:.45rem;display:flex}.pf-swatch{cursor:pointer;width:28px;height:28px;transition:transform .2s var(--ease), border-color .2s var(--ease);border:2px solid #0000;border-radius:50%;padding:0}.pf-swatch:hover{transform:scale(1.1)}.pf-swatch-active{border-color:var(--text)}.pf-color{appearance:none;border:1px solid var(--line-strong);cursor:pointer;background:0 0;border-radius:8px;width:28px;height:28px;padding:0;overflow:hidden}.pf-color::-webkit-color-swatch-wrapper{padding:0}.pf-color::-webkit-color-swatch{border:none;border-radius:7px}.pf-color::-moz-color-swatch{border:none;border-radius:7px}.pf-checks{flex-wrap:wrap;gap:.5rem 1.25rem;display:flex}.pf-check{color:var(--text-muted);cursor:pointer;align-items:center;gap:.5rem;font-size:.85rem;display:flex}.pf-check input{accent-color:var(--gold);width:15px;height:15px}.pf-reroll{background:var(--gold-gradient);color:#120e05;cursor:pointer;height:42px;transition:box-shadow .3s var(--ease);border:none;border-radius:999px;font-size:.85rem;font-weight:600}.pf-reroll:hover{box-shadow:0 10px 28px -8px #d4af3799}@media (max-width:700px){.pf-hero-tools{bottom:1.25rem;right:50%;transform:translate(50%)}.pf-hero .pf-fallback{place-items:start center;padding:12vh 0 0}.pf-panel{max-height:55dvh;top:auto;bottom:1rem}.pf-lab-header{bottom:auto;top:calc(var(--nav-h) + 1rem)}.pf-lab-title{font-size:2.25rem}}