:root{--ink:#15151b;--paper:#fff;--line:#e6e6eb;--muted:#73737f;--accent:#5b48ff}*{box-sizing:border-box}html,body{height:100%;margin:0}body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:#f7f7fb;overflow:hidden}button,input{font:inherit}.topbar{height:76px;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 22px;gap:28px;position:relative;z-index:10}.brand{display:flex;align-items:center;gap:7px;color:var(--ink);text-decoration:none;letter-spacing:-.02em}.brand>span:last-child{font-size:12px;color:var(--muted);letter-spacing:.12em}.brand-mark{display:flex;gap:3px}.brand-mark i{width:10px;height:22px;border-radius:9px;display:block;background:#6757ff}.brand-mark i:nth-child(2){background:#ff5f73}.brand-mark i:nth-child(3){background:#ffc14f}.hint{font-size:13px;color:var(--muted);margin:0 auto}.hint kbd{border:1px solid #d8d8df;border-bottom-width:2px;background:#fafafa;border-radius:6px;padding:3px 7px;color:#484852}.actions{display:flex;align-items:center;gap:6px}.button{border:0;border-radius:11px;padding:11px 14px;font-weight:650;cursor:pointer;background:#eeeef3;color:var(--ink);transition:.18s transform,.18s background}.button:hover{transform:translateY(-1px)}.button.ghost{background:transparent}.button.ghost:hover{background:#f1f1f5}.button.primary{background:var(--ink);color:#fff}.button b{background:#ececf2;border-radius:20px;padding:2px 6px;font-size:10px;margin-left:2px}.palette{height:calc(100vh - 122px);display:flex}.swatch{position:relative;flex:1;min-width:0;background:var(--color);display:flex;align-items:flex-end;justify-content:center;padding:30px 12px 58px;transition:flex .22s,background .2s;isolation:isolate;overflow:hidden}.swatch.dragging{opacity:.65}.swatch.drag-over{box-shadow:inset 5px 0 0 rgba(255,255,255,.9)}.swatch-tools{position:absolute;top:20px;display:flex;gap:4px;padding:5px;background:rgba(255,255,255,.86);backdrop-filter:blur(12px);border-radius:12px;opacity:0;transform:translateY(-8px);transition:.2s}.swatch:hover .swatch-tools,.swatch:focus-within .swatch-tools{opacity:1;transform:none}.icon-btn{border:0;background:transparent;border-radius:8px;width:35px;height:35px;cursor:pointer;font-size:17px}.icon-btn:hover{background:#fff}.swatch-info{text-align:center;color:var(--text);text-shadow:0 1px 14px var(--shadow)}.hex{border:0;background:none;color:inherit;font-weight:800;font-size:clamp(21px,2vw,34px);letter-spacing:.03em;cursor:pointer}.color-name{margin:6px 0 0;font-size:12px;font-weight:650;opacity:.72}.format-mini{font-size:11px;margin-top:13px;opacity:0;transition:.2s}.swatch:hover .format-mini{opacity:.8}.lock-badge{position:absolute;bottom:16px;font-size:12px;font-weight:700;color:var(--text);opacity:.8}.toolbar{height:46px;position:fixed;bottom:0;left:0;right:0;z-index:12;background:#fff;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:center;gap:12px;color:var(--muted);font-size:12px}.round,.tool{border:0;background:transparent;cursor:pointer}.round{width:30px;height:30px;background:var(--ink);color:white;border-radius:50%;font-size:19px;line-height:1}.tool{position:absolute;right:20px;color:var(--ink)}.dialog{border:0;border-radius:22px;padding:0;box-shadow:0 22px 70px rgba(20,20,30,.25);width:min(640px,calc(100% - 28px));max-height:85vh}.dialog::backdrop{background:rgba(18,18,26,.38);backdrop-filter:blur(3px)}.dialog-head{display:flex;justify-content:space-between;align-items:flex-start;padding:25px 28px 15px;margin:0}.dialog-head small{font-size:10px;letter-spacing:.15em;color:var(--muted);font-weight:750}.dialog-head h2{margin:4px 0 0;font-size:27px}.close{background:#f0f0f4;border:0;width:36px;height:36px;border-radius:50%;font-size:23px;cursor:pointer}.picker-layout{padding:5px 28px 22px;display:grid;grid-template-columns:190px 1fr;gap:25px}.native-picker{height:190px;position:relative;display:block;overflow:hidden;border-radius:18px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}.native-picker span{display:block;width:100%;height:100%}.native-picker input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}.field{border:1px solid var(--line);border-radius:12px;padding:9px 11px}.field label{display:block;color:var(--muted);font-size:9px;font-weight:750;letter-spacing:.12em}.field input{border:0;outline:0;width:100%;font-weight:700;margin-top:4px}.dialog-actions{border-top:1px solid var(--line);padding:16px 28px;display:flex;justify-content:space-between}.side-dialog{width:min(720px,calc(100% - 28px))}.side-content{padding:5px 28px 28px;overflow:auto;max-height:60vh}.favorite-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(135px,1fr));gap:12px}.favorite-card{border:1px solid var(--line);border-radius:14px;overflow:hidden}.favorite-color{height:90px;cursor:pointer}.favorite-meta{padding:10px;display:flex;align-items:center;justify-content:space-between}.favorite-meta strong{font-size:12px}.favorite-meta button{border:0;background:none;cursor:pointer}.export-options{display:grid;gap:10px}.export-options button{padding:14px;text-align:left;border:1px solid var(--line);background:#fff;border-radius:12px;cursor:pointer}.export-options button:hover{border-color:var(--ink)}.contrast-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}.contrast-chip{width:45px;height:45px;border-radius:11px}.contrast-row span{margin-left:auto;font-weight:800}.toast{position:fixed;z-index:50;left:50%;bottom:65px;transform:translate(-50%,20px);padding:11px 16px;background:#16161d;color:#fff;border-radius:10px;font-size:12px;opacity:0;pointer-events:none;transition:.22s}.toast.show{opacity:1;transform:translate(-50%,0)}.empty{text-align:center;color:var(--muted);padding:35px}.popup-note{font-size:12px;color:var(--muted)}
.format-mini{display:block;border:0;background:transparent;color:inherit;width:100%;margin-top:11px;opacity:.72;cursor:pointer}.format-mini+.format-mini{margin-top:4px}.swatch:hover .format-mini{opacity:.9}.format-mini:hover{text-decoration:underline;opacity:1}
.palette{gap:0;padding:0;background:#f7f7fb;transition:gap .32s cubic-bezier(.16,1,.3,1),padding .32s cubic-bezier(.16,1,.3,1),background-color .25s ease}.swatch{cursor:grab;will-change:transform,filter,border-radius}.swatch:active{cursor:grabbing}.palette.is-sorting{padding:10px 8px 8px;gap:5px;background:#ededf2}.palette.is-sorting .swatch{border-radius:14px}.palette.is-sorting .swatch:not(.dragging){filter:saturate(.88) brightness(.96)}.swatch.dragging{z-index:5;opacity:.94;transform:translateY(-7px) scale(.975) rotate(-.35deg);border-radius:18px!important;box-shadow:0 22px 55px rgba(12,12,22,.28),0 4px 14px rgba(12,12,22,.16);filter:saturate(1.1) brightness(1.03)}.swatch.dragging::after{content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid rgba(255,255,255,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.35);pointer-events:none}.swatch.drag-lift{animation:dragFloat 1.15s ease-in-out infinite alternate}.swatch:not(.dragging){transition:transform .46s cubic-bezier(.16,1,.3,1),filter .3s ease,border-radius .3s ease,background .28s ease,flex .22s}.drag-ghost{position:fixed;left:-200px;top:-200px;width:84px;height:108px;border-radius:18px;display:grid;place-items:end center;padding:12px 5px;box-shadow:0 18px 45px rgba(10,10,20,.32);color:#fff;text-shadow:0 1px 5px rgba(0,0,0,.45);font:700 10px/1 system-ui;overflow:hidden}.drag-ghost::after{content:"";position:absolute;inset:0;border:1px solid rgba(255,255,255,.5);border-radius:inherit}@keyframes dragFloat{to{transform:translateY(-11px) scale(.978) rotate(.35deg);box-shadow:0 28px 65px rgba(12,12,22,.3),0 6px 18px rgba(12,12,22,.14)}}
.harmony-control{position:relative;display:flex;align-items:center;gap:3px;border:1px solid var(--line);border-radius:12px;padding:4px;background:#fff}.harmony-indicator{position:absolute;z-index:0;left:0;top:4px;width:var(--indicator-width,31px);height:31px;border-radius:8px;background:var(--ink);transform:translateX(var(--indicator-x,4px));transition:transform .38s cubic-bezier(.34,1.56,.64,1),width .25s ease;box-shadow:0 4px 12px rgba(20,20,28,.2);pointer-events:none}.harmony-control button{position:relative;z-index:1;border:0;background:transparent;color:#777782;width:31px;height:31px;border-radius:8px;font-size:17px;line-height:1;cursor:pointer;transition:color .22s,transform .2s}.harmony-control button:hover{color:var(--ink);transform:translateY(-2px)}.harmony-control button.active{color:#fff}.harmony-control button::after{content:attr(data-label);position:absolute;z-index:30;left:50%;top:calc(100% + 13px);transform:translate(-50%,-5px);background:#17171e;color:#fff;border-radius:8px;padding:7px 9px;font-size:11px;font-weight:650;white-space:nowrap;opacity:0;pointer-events:none;transition:.16s}.harmony-control button::before{content:"";position:absolute;z-index:31;left:50%;top:calc(100% + 7px);transform:translateX(-50%);border:5px solid transparent;border-bottom-color:#17171e;opacity:0;pointer-events:none}.harmony-control button:hover::after,.harmony-control button:hover::before,.harmony-control button:focus-visible::after,.harmony-control button:focus-visible::before{opacity:1;transform:translate(-50%,0)}
@media(max-width:800px){.topbar{height:68px;padding:0 12px}.hint,.actions .button span,.brand>span:last-child{display:none}.actions{margin-left:auto}.harmony-control{position:fixed;left:50%;bottom:54px;transform:translateX(-50%);z-index:20;box-shadow:0 8px 25px rgba(20,20,30,.16)}.harmony-control button{width:35px}.harmony-control button::after{top:auto;bottom:calc(100% + 13px)}.harmony-control button::before{top:auto;bottom:calc(100% + 7px);border-bottom-color:transparent;border-top-color:#17171e}.palette{height:calc(100vh - 114px);overflow-x:auto;scroll-snap-type:x mandatory}.swatch{min-width:72vw;scroll-snap-align:start}.swatch-tools{opacity:1;transform:none}.format-mini{opacity:.8}.tool{display:none}.picker-layout{grid-template-columns:1fr}.native-picker{height:130px}.dialog-head{padding:20px 20px 12px}.picker-layout,.side-content{padding-left:20px;padding-right:20px}.dialog-actions{padding:14px 20px}}