.top-bar-left,.top-bar-right{align-items:center;display:flex;gap:12px}.top-bar-right{flex-wrap:wrap}.ctrl-group{align-items:center;display:flex;gap:6px}.native-picker{background:none;border:none;cursor:pointer;flex-shrink:0;height:48px;padding:0;width:48px}.native-picker::-webkit-color-swatch-wrapper{padding:0}.native-picker::-webkit-color-swatch{border:1px solid hsla(0,0%,50%,.12)}.ladder-grid{display:grid;grid-template-columns:1fr auto 1fr}.ladder-base,.ladder-col{display:flex;flex-direction:column}.ladder-base{align-items:center;cursor:pointer;gap:8px;justify-content:center;padding:16px 0;transition:filter .12s;width:40px;writing-mode:vertical-rl}.ladder-base:hover{filter:brightness(1.08)}.ladder-item{align-items:center;cursor:pointer;display:flex;gap:14px;padding:14px 20px;transition:filter .12s,transform .12s}.ladder-item:hover{filter:brightness(1.06);transform:scale(1.005);z-index:1}.ladder-label{font-size:12px;font-weight:600;letter-spacing:.6px;min-width:42px;opacity:.7;text-transform:uppercase}.ladder-pct{font-size:22px;font-weight:800;letter-spacing:-.4px;line-height:1.2;min-width:60px}.ladder-hex{font-family:SF Mono,Cascadia Code,Consolas,monospace;font-size:15px;font-weight:500;letter-spacing:.3px;margin-left:auto}.text-dark{color:#000000bf}.text-light{color:#ffffffd9}.palette-card :deep(.n-card__content){padding:18px}.palette-card :deep(.n-h2){margin-top:0}.scheme-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.scheme-group{display:flex;flex-direction:column;gap:10px}.scheme-label{font-size:13px;letter-spacing:.5px;opacity:.35;text-transform:uppercase}.scheme-colors{display:flex;gap:8px}.scheme-swatch{cursor:pointer;height:52px;transition:transform .12s;width:52px}.scheme-swatch:hover{transform:scale(1.12);z-index:1}.palette-swatches{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(72px,1fr))}.palette-item-wrap{align-items:center;display:flex;flex-direction:column;gap:4px}.palette-swatch{cursor:pointer;height:52px;transition:transform .12s;width:52px}.palette-swatch:hover{transform:scale(1.1)}.palette-hex{font-family:SF Mono,Cascadia Code,Consolas,monospace;font-size:10px;opacity:.35}@media (max-width:640px){.ladder-item{gap:8px;padding:10px 12px}.ladder-label{font-size:10px;min-width:30px}.ladder-pct{font-size:16px;min-width:40px}.ladder-hex{font-size:11px}.ladder-base{width:28px}.scheme-grid{gap:10px;grid-template-columns:repeat(auto-fill,minmax(90px,1fr))}.scheme-swatch{height:32px;width:32px}.palette-swatches{gap:8px;grid-template-columns:repeat(auto-fill,minmax(50px,1fr))}.palette-swatch{height:40px;width:40px}.palette-hex{font-size:8px}}body{padding:0!important}.palette-page{align-items:center;display:flex;flex-direction:column;min-height:100vh;opacity:0;transition:opacity .2s ease}.palette-page.ready{opacity:1}.page-card{display:flex;flex:1;flex-direction:column;width:100%}.page-card :deep(.n-card){display:flex;flex:1;flex-direction:column}.page-card :deep(.n-card__content){display:flex;flex:1;flex-direction:column}.loading-placeholder{height:400px}.devtool-modal,.loading-placeholder{align-items:center;display:flex;justify-content:center}.devtool-modal{background:#000c;height:100%;left:0;position:fixed;top:0;width:100%;z-index:9999}.devtool-modal-content{background:#fff;border-radius:10px;padding:30px 50px;text-align:center}.devtool-modal-content h3{color:#e53e3e;margin-top:0}.devtool-modal-content p{color:#333;font-size:16px}