:root{--pz-paper:#fffdf3;--pz-pick:#2f6fdf;--pz-pick-ring:#2f6fdf4d}:root[data-theme=dark]{--pz-paper:#f3efe0;--pz-pick:#6fa3ff;--pz-pick-ring:#6fa3ff66}.pz-tokens{flex-direction:column;justify-content:center;align-items:center;gap:3px;display:flex}.pz-token-row{justify-content:center;gap:3px;display:flex}.pz-token{flex:none;display:block;overflow:visible}.pz-fw{flex-direction:column;gap:18px;display:flex}.pz-scales{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.pz-scale{aspect-ratio:240/186;flex:0 220px;min-width:140px;max-width:220px;height:auto;display:block}.pz-options{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;display:grid}.pz-option{border:2px solid var(--border-strong);border-radius:var(--radius-md);background:var(--pz-paper);cursor:pointer;min-width:0;min-height:104px;transition:border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);justify-content:center;align-items:center;padding:20px 6px 12px;display:flex;position:relative;overflow:hidden}.pz-option:hover:not(:disabled){border-color:var(--n-400)}.pz-option:active:not(:disabled){transform:scale(.98)}.pz-option:focus-visible{box-shadow:var(--ring);outline:none}.pz-option.on{border-color:var(--pz-pick);box-shadow:0 0 0 3px var(--pz-pick-ring)}.pz-option:disabled{cursor:default;opacity:.6}.pz-option-letter{color:#6b6b6b;font-size:12px;font-weight:700;position:absolute;top:5px;left:8px}.pz-option.on .pz-option-letter{color:var(--pz-pick)}:root[data-theme=dark] .pz-option.on .pz-option-letter{color:#2f6fdf}.pz-option .pz-tokens{max-width:100%}@media (width<=560px){.pz-fw{gap:14px}.pz-scales{gap:8px}.pz-scale{flex:0 calc(50% - 4px);min-width:0;max-width:200px}.pz-options{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}.pz-option{grid-column:span 2;min-height:96px}.pz-option:nth-child(4){grid-column:2/span 2}}.pz-mx{flex-direction:column;gap:18px;display:flex}.mx-stem-wrap{justify-content:center;display:flex}.mx-grid{width:100%;height:auto;display:block}.mx-grid-2{aspect-ratio:1;max-width:260px}.mx-grid-3{aspect-ratio:1;max-width:330px}.mx-row{flex-wrap:wrap;justify-content:center;gap:8px;width:100%;display:flex}.mx-frame{flex:0 104px;min-width:0;height:auto;display:block}.mx-row-wide{max-width:500px}.mx-row-wide .mx-frame{flex-basis:156px}.mx-option .mx-opt{width:100%;max-width:96px;height:auto;display:block}.pz-mx-wide .mx-option .mx-opt{max-width:140px}@media (width<=560px){.pz-mx{gap:14px}.mx-row{gap:6px}.mx-frame{flex:0 calc(33.3333% - 4px)}.mx-row-wide .mx-frame{flex:0 calc(50% - 3px);max-width:170px}.mx-option{padding:20px 4px 8px}}