.p-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;margin:0 auto 28px}.p-picker{width:52px;height:44px;border-radius:var(--radius-sm)}.p-hex{width:140px;height:44px;padding:0 12px;border:1px solid var(--border-2);border-radius:var(--radius-sm);background:var(--bg-2);color:var(--text);font:600 16px/1 ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase}.p-hex:focus{outline:none;border-color:var(--mint)}.p-hex[aria-invalid]{border-color:var(--danger)}.p-bar .g-btn{height:44px;padding:0 18px}.p-image-box:not(:empty){margin-bottom:18px}.p-image-body{display:flex;gap:12px;align-items:stretch}.p-image-thumb{flex:none;width:140px;height:110px;object-fit:cover;border-radius:var(--radius-sm);background:var(--bg-2)}.p-image .p-row{flex:1}.p-image .p-swatch{height:110px}.p-drop-hint{position:fixed;inset:12px;z-index:50}.p-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.p-group{padding:16px;border:1px solid var(--border);border-radius:var(--radius);background:var(--panel);min-width:0}.p-scale,.p-neutrals,.p-ui{grid-column:1 / -1}.p-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}.p-head h2{margin:0 0 2px;font-size:16px}.p-head p{margin:0;color:var(--text-dim);font-size:13px}.p-actions{display:flex;gap:6px;flex:none}.p-copy{padding:6px 10px;font-size:12px}.p-row{display:flex;border-radius:var(--radius-sm);overflow:hidden}.p-swatch{position:relative;flex:1 1 0;min-width:0;height:96px;border:0;padding:8px 6px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:2px;cursor:pointer;font:inherit;transition:flex-grow .15s}.p-swatch:hover{flex-grow:1.35}.p-swatch:focus-visible{outline:2px solid var(--mint);outline-offset:-4px}.p-code{font:600 11px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.02em}.p-step{font-size:11px;font-weight:700;opacity:.8}.p-swatch.is-base{box-shadow:inset 0 0 0 3px currentColor}.p-yours{position:absolute;top:6px;font-size:10px;font-weight:700}.p-scale .p-swatch{height:110px}@media(max-width:860px){.p-groups{grid-template-columns:minmax(0,1fr)}}@media(max-width:560px){.p-scale .p-row{flex-wrap:wrap}.p-scale .p-swatch{flex:1 0 30%;height:72px}.p-swatch:hover{flex-grow:1}.p-code{font-size:10px}.p-head,.p-image-body{flex-direction:column}.p-image-thumb{width:100%;height:160px}.p-image .p-swatch{height:80px}}