.ph-panel{align-items:start}.ph-tool .ph-mono{font-family:var(--font-mono)}.ph-presets{flex-wrap:wrap;gap:.4rem;display:flex}.ph-preset{border:1px solid var(--border-input);border-radius:var(--radius-sm);background:var(--bg-input);min-height:44px;color:var(--text-primary);cursor:pointer;flex-direction:column;align-items:flex-start;gap:.05rem;padding:.35rem .7rem;font-size:.8rem;font-weight:600;line-height:1.25;transition:border-color .15s,background .15s;display:inline-flex}.ph-preset:hover{border-color:var(--border-focus)}.ph-preset:focus-visible{outline:2px solid var(--accent-indigo);outline-offset:2px}.ph-preset.is-active{border-color:var(--accent-indigo);background:#6366f11f}.ph-preset-size{font:500 .72rem var(--font-mono);color:var(--text-secondary)}.ph-size-row{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:start;gap:.5rem;display:grid}.ph-swap{width:40px;height:40px;margin-top:1.55rem}.ph-color-row{align-items:center;gap:.5rem;min-width:0;display:flex}.ph-color-row>.ui-input{flex:1}.ph-picker{border:1px solid var(--border-input);border-radius:var(--radius-sm);background:var(--bg-input);cursor:pointer;flex-shrink:0;width:44px;height:40px;padding:3px}.ph-picker::-webkit-color-swatch-wrapper{padding:0}.ph-picker::-webkit-color-swatch{border:none;border-radius:6px}.ph-picker::-moz-color-swatch{border:none;border-radius:6px}.ph-picker:focus-visible{outline:2px solid var(--accent-indigo);outline-offset:2px}.ph-preview{border:1px dashed var(--border-input);border-radius:var(--radius-md);background:var(--bg-secondary);place-items:center;min-height:220px;max-height:460px;padding:1rem;display:grid;overflow:hidden}.ph-preview img{object-fit:contain;width:auto;max-width:100%;height:auto;max-height:420px;box-shadow:0 0 0 1px var(--border-input);display:block}.ph-caption{font-variant-numeric:tabular-nums}@media (width<=640px){.ph-preview{min-height:160px;max-height:320px;padding:.75rem}.ph-preview img{max-height:290px}.ph-tool .ui-input{font-size:1rem}}.ph-output .ui-segmented{align-self:flex-start}