: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)}}
.drag-handle{display:none}
.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){.swatch .swatch-tools{background:transparent!important;background-color:transparent!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border:0!important}.swatch .swatch-tools .icon-btn{color:#fff!important;background:transparent!important}.swatch .swatch-tools .icon-btn:hover,.swatch .swatch-tools .icon-btn:focus-visible{background:rgba(255,255,255,.18)!important}.drag-handle{display:inline-grid!important;place-items:center;touch-action:none;cursor:grab;font-size:22px!important}.drag-handle:active{cursor:grabbing}.lock-icon{font-family:Arial,sans-serif;font-size:19px}}
@media(max-width:800px){html,body{height:auto;min-height:100%;overflow-x:hidden;overflow-y:auto}body{padding-bottom:46px}.topbar{height:112px;padding:0 14px 43px;position:fixed;top:0;left:0;right:0;z-index:40;box-shadow:0 1px 0 rgba(20,20,30,.08),0 8px 24px rgba(20,20,30,.06)}.hint,.actions .button span,.brand>span:last-child{display:none}.brand{font-size:14px}.actions{margin-left:auto}.actions .ghost{display:none}#favoritesBtn{display:inline-flex;align-items:center;gap:2px;padding:9px;color:var(--ink)}#favoritesBtn b{margin-left:0}.actions .primary{padding:9px 11px;font-size:12px}.harmony-control{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);z-index:20;box-shadow:none}.harmony-control button{width:35px}.harmony-control button::after{top:calc(100% + 10px);bottom:auto}.harmony-control button::before{top:calc(100% + 4px);bottom:auto;border-top-color:transparent;border-bottom-color:#17171e}.palette{height:auto;min-height:calc(100vh - 158px);margin-top:112px;display:flex;flex-direction:column;overflow:visible;gap:0;padding:0;background:#fff}.palette.is-sorting{padding:7px;gap:5px}.swatch{flex:none;width:100%;min-width:100%;min-height:clamp(138px,21vh,190px);padding:24px 24px;align-items:center;justify-content:flex-start;overflow:visible}.swatch-info{text-align:left}.hex{padding:0;font-size:24px}.color-name{margin-top:4px}.format-mini{display:inline-block;width:auto;margin:9px 10px 0 0;opacity:.72;text-align:left}.format-mini+.format-mini{margin-top:9px}.swatch-tools{top:10px;right:10px;left:auto;padding:0;gap:1px;background:transparent;backdrop-filter:none;opacity:1;transform:none;pointer-events:auto}.swatch-tools .icon-btn{width:34px;height:34px;color:#fff;background:transparent;text-shadow:0 1px 5px rgba(0,0,0,.55);filter:drop-shadow(0 1px 2px rgba(0,0,0,.28))}.swatch-tools .icon-btn:hover,.swatch-tools .icon-btn:focus-visible{color:#fff;background:rgba(255,255,255,.18)}.lock-badge{right:18px;bottom:13px}.toolbar{height:46px;justify-content:flex-start;padding:0 14px}.toolbar span{font-size:10px}.tool{display:none}.dialog{max-height:90vh}.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}}