.ph-layout{align-items:start;gap:16px;display:grid}@media (width>=960px){.ph-layout{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}.ph-preview-card{position:sticky;top:88px}}.ph-preview-card,.ph-card{border-radius:var(--radius);background:var(--card);border:1px solid var(--line);min-width:0;box-shadow:var(--edge);gap:12px;padding:16px;display:grid}.ph-stage{border-radius:var(--radius-sm);border:1px solid var(--line);background:repeating-conic-gradient(#808cb429 0 25%, transparent 0 50%) 0 0 / 20px 20px, var(--bg-soft);place-items:center;min-height:220px;padding:18px;display:grid}.ph-stage canvas{width:auto;max-width:100%;height:auto;max-height:440px;display:block;box-shadow:0 10px 30px -14px #0009}.ph-meta{font-family:var(--font-mono);color:var(--muted);text-align:center;margin:0;font-size:.8rem}.ph-export{gap:12px;display:grid}.ph-format{justify-self:start}.ph-actions{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.ph-actions .chip-btn,.ph-batch .chip-btn,.ph-reset{cursor:pointer;align-items:center;gap:6px;display:inline-flex}.ph-note{color:var(--muted);margin:0;font-size:.85rem}.ph-note:empty{display:none}.ph-controls{gap:12px;min-width:0;display:grid}.ph-h{font-family:var(--font-display);letter-spacing:-.01em;margin:0;font-size:1.05rem;font-weight:650}.ph-h-row{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;display:flex}.ph-size-row{flex-wrap:wrap;align-items:end;gap:8px;display:flex}.ph-num{color:var(--ink-2);flex:90px;gap:4px;font-size:.85rem;font-weight:650;display:grid}.ph-num input{width:100%}.ph-swap{border:1px solid var(--line-strong);background:var(--surface);width:42px;height:42px;color:var(--ink);cursor:pointer;border-radius:50%;flex:none;place-items:center;display:grid}.ph-swap:hover{border-color:var(--sky)}.ph-card>.seg{justify-self:start}.ph-ratio{font-family:var(--font-mono);color:var(--accent-text);font-size:.8rem}.ph-field{align-items:center;gap:10px;min-width:0;font-size:.92rem;font-weight:650;display:flex}.ph-field>span{flex:none}.ph-field select{flex:1;width:0}.ph-stack{gap:6px;display:grid}.ph-stack small{color:var(--muted);font-size:.82rem;font-weight:400;display:block}.ph-stack textarea{resize:vertical;width:100%;padding:10px 12px}.ph input[type=number],.ph input[type=text],.ph select,.ph textarea{border-radius:var(--radius-sm);border:1px solid var(--line-strong);background:var(--surface-2);min-height:42px;color:var(--ink);font:inherit;padding:0 12px;font-weight:500}.ph textarea{padding:10px 12px}.ph input:focus-visible,.ph select:focus-visible,.ph textarea:focus-visible{border-color:var(--sky);outline:none;box-shadow:0 0 0 4px #7cc4ff2e}.ph-colours,.ph-row{flex-wrap:wrap;align-items:center;gap:10px 16px;display:flex}.ph-colour{align-items:center;gap:6px;display:inline-flex}.ph-colour input[type=color]{border-radius:var(--radius-sm);border:1px solid var(--line-strong);background:var(--surface-2);cursor:pointer;width:42px;height:42px;padding:3px}.ph-colour input[type=text]{width:96px;font-family:var(--font-mono);text-transform:lowercase;font-size:.9rem}.ph-range{flex:160px;gap:4px;font-size:.88rem;font-weight:650;display:grid}.ph-range b{font-family:var(--font-mono);color:var(--accent-text)}.ph-range input{width:100%;accent-color:var(--electric)}.ph-check{cursor:pointer;align-items:center;gap:8px;font-size:.92rem;display:inline-flex}.ph-check input{width:18px;height:18px;accent-color:var(--electric)}.ph-text-opts{gap:12px;display:grid}.ph-text-opts.ph-off{opacity:.45;pointer-events:none}.ph-swatches{flex-wrap:wrap;gap:6px;display:flex}.ph-swatch{border:1px solid var(--line-strong);cursor:pointer;background:0 0;border-radius:10px;padding:2px}.ph-swatch:hover{border-color:var(--sky)}.ph-swatch span{border-radius:7px;place-items:center;width:36px;height:30px;font-size:.82rem;font-weight:700;display:grid}.ph-reset{justify-self:start}.ph-batch summary{cursor:pointer;font-family:var(--font-display);align-items:center;gap:8px;font-size:1.05rem;font-weight:650;display:flex}.ph-batch-body{gap:12px;margin-top:4px;display:grid}.ph-set-row{flex-wrap:wrap;gap:6px;display:flex}.ph-batch-go{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:10px;display:flex}.ph-batch-count{font-family:var(--font-mono);color:var(--muted);margin-right:auto;font-size:.82rem}@media (width<=600px){.ph-preview-card,.ph-card{padding:14px}.ph-stage{min-height:160px;padding:12px}.ph-actions .btn{flex:100%}.ph-actions .chip-btn{white-space:nowrap;flex:auto;justify-content:center}.ph .seg,.ph-card>.seg{justify-self:stretch;display:flex}.ph .seg label{flex:auto;justify-content:center;padding:0 10px}.ph-batch-go .btn{flex:100%}}