.pg{margin:0;min-height:100vh;background:var(--bg);color:var(--fg);font-family:var(--font-mono);display:flex;flex-direction:column}.pg-head{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-sm) var(--pad);border-bottom:1px solid var(--line-2)}.pg-head .brand{font-family:var(--font-display);letter-spacing:.06em;text-decoration:none;color:var(--fg);font-size:1.1rem}.pg-title{font-size:.72rem;letter-spacing:.18em;color:var(--muted)}.pg-head .btn{margin-left:auto}.pg-main{flex:1;display:grid;grid-template-columns:1fr 320px;gap:var(--space-lg);padding:var(--pad);align-items:start}.pg-stage{display:flex;justify-content:center}#pg-canvas{width:100%;max-width:78vh;aspect-ratio:1;border-radius:var(--radius-card);background:#013838;box-shadow:0 20px 60px -20px #00000059;cursor:crosshair;touch-action:none}.pg-panel{display:flex;flex-direction:column;gap:var(--space-md)}.pg-group{display:flex;flex-direction:column;gap:var(--space-2xs)}.pg-group h3{margin:0 0 var(--space-3xs);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}.pg-hint{margin:0;font-size:.68rem;color:var(--faint)}.pg-group label{display:flex;align-items:center;gap:var(--space-2xs);font-size:.78rem}.pg-group input[type=range]{flex:1;accent-color:var(--accent)}.pg-val{min-width:40px;text-align:right;color:var(--accent-text)}.pg-check{cursor:pointer}.pg-row{display:flex;gap:var(--space-2xs);flex-wrap:wrap}input[type=number],#pg-io{background:var(--card);color:var(--fg);border:1px solid var(--line-2);border-radius:var(--radius-sm);padding:6px 8px;font:inherit}#pg-io{width:100%;height:84px;resize:vertical}.pg-swatches{display:flex;gap:var(--space-2xs);flex-wrap:wrap}.pg-sw{width:30px;height:30px;border-radius:var(--radius-sm);border:2px solid transparent;cursor:pointer;position:relative}.pg-sw.active{border-color:var(--fg)}.pg-sw span{position:absolute;top:34px;left:50%;transform:translate(-50%);font-size:.6rem;color:var(--faint);white-space:nowrap}.btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:var(--radius-pill);padding:.5rem .9rem;font:600 .78rem var(--font-mono);cursor:pointer;text-decoration:none;transition:transform .15s var(--ease),background .2s}.btn:hover{transform:translateY(-2px)}.btn-accent{background:var(--accent);color:var(--accent-ink)}.btn-ghost{border-color:var(--line-2);color:var(--fg);background:transparent}.btn-ghost:hover{border-color:var(--accent);color:var(--accent-text)}@media(max-width:820px){.pg-main{grid-template-columns:1fr}#pg-canvas{max-width:100%}}