.palette-app{--bar:#0000000a;color:#222;background:#fff;flex-direction:column;font:14px/1.4 -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;display:flex;position:fixed;inset:0;overflow:hidden}.palette-app *{box-sizing:border-box}.palette-app .toolbar{z-index:5;background:#fff;border-bottom:1px solid #eee;align-items:center;gap:.75rem;padding:.6rem .9rem;display:flex}.palette-app .toolbar h1{letter-spacing:.01em;margin:0 auto 0 0;font-size:1rem;font-weight:700}.palette-app .toolbar button{font:inherit;color:#222;cursor:pointer;background:#fafafa;border:1px solid #ddd;border-radius:8px;padding:.4rem .7rem}.palette-app .toolbar button:hover{background:#f0f0f0}.palette-app .toolbar .primary{color:#fff;background:#222;border-color:#222}.palette-app .toolbar .primary:hover{background:#000}.palette-app .toolbar .hint{color:#999;font-size:.82rem}.palette-app .toolbar select{font:inherit;color:#222;cursor:pointer;background:#fafafa;border:1px solid #ddd;border-radius:8px;padding:.4rem .5rem}.palette-app .toolbar .spacer{margin-left:auto}.palette-app .pages{flex:1;min-height:0;overflow:hidden}.palette-app .track{flex-direction:column;height:200%;transition:transform .5s;display:flex;transform:translateY(0)}.palette-app .track.shades{transform:translateY(-50%)}.palette-app .page{flex:0 0 50%;height:50%;position:relative}.palette-app .strip{height:100%;display:flex}.palette-app .shades-page{flex-direction:column;display:flex}.palette-app .shades{flex:1;min-height:0;display:flex}.palette-app .shade-bar{background:#fff;border-top:1px solid #eee;flex:none;align-items:center;gap:.6rem;padding:.5rem .9rem;display:flex}.palette-app .shade-bar-label{color:#999;margin-right:auto;font-size:.82rem}.palette-app .shade-bar button{font:inherit;color:#222;cursor:pointer;background:#fafafa;border:1px solid #ddd;border-radius:8px;padding:.4rem .8rem}.palette-app .shade-bar button:hover{background:#f0f0f0}.palette-app .shade-bar .primary{color:#fff;background:#222;border-color:#222}.palette-app .shade-bar .primary:hover{background:#000}.palette-app .shade-bar .ghost{background:0 0}.palette-app .shade-col{flex-direction:column;flex:1;display:flex}.palette-app .shade{letter-spacing:.04em;cursor:pointer;-webkit-user-select:none;user-select:none;opacity:0;flex:1;justify-content:center;align-items:center;font:600 .8rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;transition:opacity .4s,transform .4s;display:flex;transform:translateY(10px)}.palette-app .shades.in .shade{opacity:1;transform:none}.palette-app .shade span{opacity:0;transition:opacity .12s}.palette-app .shade:hover span{opacity:.85}.palette-app .scroll-cue{color:#fff;cursor:pointer;background:#00000047;border:none;border-radius:999px;width:auto;margin:0;padding:.35rem .8rem;font-size:.8rem;animation:1.8s ease-in-out infinite cueBob;position:absolute;bottom:1rem;left:50%;transform:translate(-50%)}.palette-app .scroll-cue:hover{background:#00000073}@keyframes cueBob{0%,to{transform:translate(-50%)translateY(0)}50%{transform:translate(-50%)translateY(4px)}}.palette-app .swatch{cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none;flex-direction:column;flex:1 1 0;justify-content:flex-end;align-items:center;padding-bottom:8vh;transition:flex-grow .15s;display:flex;position:relative}.palette-app .swatch:active{cursor:grabbing}.palette-app .swatch.dragging{filter:brightness(1.04)}.palette-app .controls{opacity:0;flex-direction:column;align-items:center;gap:.5rem;transition:opacity .15s;display:flex}.palette-app .swatch:hover .controls,.palette-app .swatch.locked .controls{opacity:1}.palette-app .swatch .hex{letter-spacing:.06em;cursor:text;color:inherit;text-align:center;background:0 0;border:none;border-radius:6px;width:9ch;padding:.2rem .3rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1.1rem;font-weight:700}.palette-app .swatch input.hex:hover{background:var(--bar)}.palette-app .swatch input.hex:focus{background:#ffffff1f;outline:1px solid}.palette-app .iconrow{gap:.35rem;display:flex}.palette-app .icon{width:34px;height:34px;color:inherit;cursor:pointer;background:0 0;border:none;border-radius:50%;place-items:center;font-size:1rem;line-height:1;display:grid}.palette-app .icon:hover,.palette-app .icon.on{background:var(--bar)}.palette-app .native-picker{opacity:0;pointer-events:none;width:0;height:0;position:absolute}.palette-app .swatch .controls,.palette-app .swatch .hex,.palette-app .iconrow{z-index:2;position:relative}.palette-app .toast{color:#fff;opacity:0;pointer-events:none;z-index:10;background:#222;border-radius:999px;padding:.5rem .9rem;font-size:.85rem;transition:all .2s;position:fixed;bottom:1.2rem;left:50%;transform:translate(-50%)translateY(1rem)}.palette-app .toast.show{opacity:1;transform:translate(-50%)translateY(0)}