@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;650;700;750;800&display=swap');
:root{font-family:'DM Sans',system-ui,sans-serif;color:#242636;background:#f8f9fc;font-synthesis:none;--muted:#727785;--border:#e5e6ed;--purple:#7461d9}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{cursor:pointer;color:inherit;background:white;border:1px solid var(--border);border-radius:9px;padding:10px 15px;transition:background .16s,transform .16s}button:hover{background:#f0edf9}button:active{transform:translateY(1px)}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #aa96f4;outline-offset:3px}a{color:inherit;text-decoration:none}header{height:90px;max-width:1400px;margin:auto;padding:0 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);gap:25px}.brand{display:flex;align-items:center;gap:9px;font-family:Manrope,system-ui;font-weight:800;font-size:25px;letter-spacing:-1.2px}.brand span{font-size:11px;align-self:flex-start;margin:5px 0 0 -4px}nav{display:flex;align-items:center;gap:10px}nav a{font-size:13px;font-weight:600;color:var(--muted);padding:10px 18px;border-radius:8px}nav a.current{background:#ece9f8;color:#7461c6}nav small{margin-left:5px;font-size:10px}select{border:0;background:transparent;color:inherit;cursor:pointer;max-width:180px}.language{display:flex;gap:6px;font-size:12px;align-items:center}main{max-width:1260px;padding:0 32px;margin:auto;min-height:75vh}.hero{display:flex;justify-content:space-between;align-items:center;gap:45px;padding:75px 0 55px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:1.8px;color:#888294;display:flex;align-items:center;gap:8px}.eyebrow i{width:6px;height:6px;background:#a69acb;border-radius:50%}h1,h2,h3,p{margin-top:0}h1{font-family:Manrope,system-ui;font-size:clamp(38px,4.7vw,62px);font-weight:750;line-height:1.14;letter-spacing:-2.8px;margin:21px 0}.intro{font-size:14px;color:var(--muted);line-height:1.7}.hero-art{width:395px;height:240px;flex-shrink:0;position:relative;display:flex;align-items:center;padding-bottom:22px}.hero-art div{width:98px;height:170px;border-radius:12px;padding:17px 14px;font-size:9px;color:#3339;box-shadow:0 9px 16px #3331;transform:rotate(-11deg);margin-right:-5px}.hero-art div:nth-child(2){transform:rotate(-2deg) translateY(-15px)}.hero-art div:nth-child(3){transform:rotate(7deg) translateY(-10px)}.hero-art div:nth-child(4){transform:rotate(17deg) translateY(10px)}.hero-art b{display:block;margin-top:96px;font-size:12px;color:#333b}.hero-art>span{position:absolute;bottom:0;left:65px;font-size:8px;letter-spacing:2px;color:#999}.search-area{display:flex;gap:12px}.search{background:white;display:flex;align-items:center;gap:12px;border:1px solid #dedfe8;border-radius:12px;padding:10px 18px;flex:1;box-shadow:0 4px 12px #24263603}.search>span{font-size:29px;color:#9695a8}.search input{width:100%;border:0;outline:none;background:transparent;font-size:14px;padding:8px 0}.search kbd{border:1px solid var(--border);padding:3px 7px;border-radius:4px;color:#aaa;font-size:11px}.studio-button{background:#252637;color:#fff;padding:10px 23px;font-size:12px}.studio-button:hover{background:#46405d}.search-tip{font-size:10px;color:#9093a0;margin:10px 0 25px}.filters{display:flex;gap:8px;flex-wrap:wrap;padding-bottom:30px;border-bottom:1px solid var(--border)}.filters button{border:1px solid transparent;background:transparent;font-size:11px;display:flex;align-items:center;gap:7px;padding:8px 12px}.filters button.selected{background:#fff;border-color:#dcd9e9;box-shadow:0 2px 3px #33304b05}.dot{width:8px;height:8px;border-radius:50%;background:#bbb}.red{background:#e88a8e}.orange{background:#e9ac79}.yellow{background:#e7cf73}.green{background:#89b594}.blue{background:#83acd9}.purple{background:#b19adc}.pink{background:#e6a6c2}.section-head{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:29px 0 22px}.section-head h2{font-size:18px;letter-spacing:-.5px;margin-bottom:7px}.section-head h2 span{font-size:9px;font-weight:400;background:#eceef4;border-radius:5px;padding:4px 6px;color:var(--muted);margin-left:7px}.section-head p{font-size:11px;color:var(--muted);margin:0}.controls{display:flex;gap:18px}.controls label{font-size:10px;color:#898c98;display:flex;align-items:center;gap:6px}.controls select{font-size:10px;font-weight:600;color:#444958}.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}.color-card{background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden;transition:box-shadow .18s,transform .18s;min-width:0}.color-card:hover{box-shadow:0 8px 24px #2526370c;transform:translateY(-3px)}.swatch{display:block;width:100%;height:158px;background:var(--swatch)!important;border:0;border-radius:0;position:relative;padding:0}.swatch span{opacity:0;background:#fffE;color:#333;position:absolute;bottom:12px;left:12px;border-radius:5px;padding:6px 9px;font-size:10px;transition:opacity .15s}.swatch:hover span,.swatch:focus-visible span{opacity:1}.card-info{padding:14px}.card-info>div:first-child{display:flex;justify-content:space-between;gap:5px;align-items:center}.card-info strong{font-size:12px;line-height:1.5;overflow-wrap:anywhere}.heart{font-size:21px;border:0;padding:0 2px;color:#a4a6b2;background:none}.heart.active{color:#bb7294}.code{font:11px ui-monospace,Consolas,monospace;background:none;border:0;padding:7px 0;color:#828797;width:100%;display:flex;justify-content:space-between;text-align:left;gap:4px;overflow-wrap:anywhere}.code span{font-size:14px}.card-bottom{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #f0f0f5;margin-top:7px;padding-top:10px;gap:3px}.card-bottom>span{color:#989ca8;font-size:9px}.card-bottom button{font-size:9px;padding:3px 0;border:0;background:transparent;color:#77758a}.studio-banner{background:#efedf6;border:1px solid #e5e0f1;border-radius:13px;padding:30px;display:flex;align-items:center;gap:22px;margin:40px 0 60px}.banner-icon{font-size:45px;color:#9d8dbd}.studio-banner h2{font-size:18px;margin-bottom:6px}.studio-banner p{font-size:12px;color:#8a8298;margin:0}.studio-banner button{margin-left:auto;background:white;font-size:11px}footer{max-width:1260px;margin:auto;padding:28px 32px;display:flex;align-items:center;gap:25px;border-top:1px solid var(--border);font-size:11px;color:#747986}footer .brand{font-size:20px;color:#353746}footer>span{flex:1}footer small{display:block;font-size:10px;margin-top:5px;color:#999da8}footer>a:last-child{font-size:11px}.page-head{padding:65px 0 25px}.page-head h1{font-size:44px}.page-head>p:last-child{color:var(--muted);font-size:14px}.palette-toolbar{display:flex;gap:10px;flex-wrap:wrap}.primary{background:#7461ce;color:white;border-color:#7461ce}.primary:hover{background:#604db8}.muted{color:var(--muted);font-size:12px;line-height:1.7}.palette-toolbar+.muted{margin-top:15px}.file-button{display:flex;align-items:center;position:relative;cursor:pointer;border:1px solid var(--border);border-radius:9px;padding:10px 15px;background:white}.file-button input{position:absolute;inset:0;opacity:0;width:100%;cursor:pointer}.palette{padding:26px 0;border-top:1px solid var(--border);margin-top:25px}.palette-top{display:flex;justify-content:space-between;gap:18px;margin-bottom:23px}.palette-top h2{font-size:23px;margin-bottom:9px;overflow-wrap:anywhere}.palette-top p{font-size:13px;color:var(--muted);white-space:pre-wrap;overflow-wrap:anywhere}.palette-top small{font-size:10px;color:#999}.palette-actions{display:flex;align-items:flex-start;gap:7px;flex-shrink:0}.palette-actions button{font-size:10px}.danger{color:#ac4f65}.empty{grid-column:1/-1;padding:65px 20px;text-align:center;width:100%}.empty>span{font-size:50px;color:#b2a8ce}.empty h2{margin-top:16px;font-size:24px}.empty p{color:var(--muted);font-size:13px}.page-head~.grid{margin-bottom:60px}dialog{width:580px;max-width:calc(100% - 28px);max-height:90dvh;padding:0;border:1px solid #e5e1ed;border-radius:19px;color:inherit;background:#fafbfe;box-shadow:0 25px 100px #15152030}dialog::backdrop{background:#24223766;backdrop-filter:blur(6px)}.close{position:absolute;right:12px;top:12px;z-index:1;border:0;border-radius:50%;background:#fffD;font-size:23px;width:34px;height:34px;padding:0}.dialog-content{padding:32px}.dialog-content h2{font-size:26px;letter-spacing:-1px}.detail-swatch{height:220px;padding:40px 30px;display:flex;flex-direction:column;justify-content:flex-end;font-size:15px}.detail-swatch b{font-size:40px;letter-spacing:-1px}.values{display:grid;gap:8px;margin-bottom:15px}.values button{display:flex;align-items:center;gap:12px;font-size:12px;text-align:left}.values span{font-size:10px;color:#999;min-width:38px}.values b{flex:1;overflow-wrap:anywhere;font:12px ui-monospace,monospace}.dialog-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px}.dialog-actions button{font-size:11px}form label,.picker-label{display:flex;flex-direction:column;gap:8px;font-size:12px;margin-bottom:17px}form input,textarea{padding:12px;border:1px solid #dcdde6;border-radius:8px;background:white;width:100%;color:inherit}.palette-options{display:grid;gap:8px;margin:22px 0}.palette-options button{display:flex;justify-content:space-between;text-align:left;overflow-wrap:anywhere}.palette-options span{color:#888;flex-shrink:0;margin-left:10px}input[type=color]{cursor:pointer;width:100%;height:52px;border:1px solid var(--border);border-radius:8px;padding:4px;background:white}.studio-preview{height:65px;border-radius:8px}.contrast-inputs{display:flex;gap:15px}.contrast-inputs label{flex:1;font-size:12px}.contrast-inputs input{margin-top:8px}#contrast-preview{padding:28px 15px;border:1px solid var(--border);border-radius:8px;font-size:22px;font-weight:700;margin-top:16px}#contrast-result{font-size:12px}hr{border:0;border-top:1px solid var(--border);margin:25px 0}#color-error{font-size:12px;color:#b14459}#toast{position:fixed;bottom:28px;left:50%;transform:translate(-50%,15px);opacity:0;pointer-events:none;background:#252637;color:white;border-radius:10px;padding:14px 22px;box-shadow:0 8px 30px #0002;font-size:12px;z-index:10;transition:.2s;max-width:90vw;text-align:center}#toast.show{opacity:1;transform:translate(-50%,0)}
@media(min-width:1450px){.swatch{height:180px}}@media(max-width:1000px){.hero-art{width:310px}.hero-art div{width:80px}.hero{gap:25px}.grid{grid-template-columns:repeat(3,minmax(0,1fr))}.controls{gap:8px}.palette-top{flex-direction:column}}@media(max-width:720px){header{height:auto;padding:18px 20px;flex-wrap:wrap;gap:17px}.brand{font-size:23px}nav{order:3;justify-content:center;width:100%;border-top:1px solid var(--border);padding-top:12px;gap:4px}nav a{padding:9px 15px}.language{margin-left:auto}main{padding:0 20px}.hero{padding:40px 0 30px;flex-direction:column;align-items:flex-start;gap:15px}.hero h1{font-size:46px}.hero-art{width:290px;align-self:center;height:190px}.hero-art div{height:125px;width:77px}.hero-art b{margin-top:55px}.hero-art>span{font-size:7px;left:30px}.hero-copy{width:100%}.eyebrow{font-size:8px;letter-spacing:1.3px}.intro{font-size:13px}.search-area{flex-wrap:wrap}.search{min-width:100%;padding:7px 12px}.search input{font-size:12px}.studio-button{width:100%;padding:12px}.filters{gap:4px;padding-bottom:20px}.filters button{font-size:10px;padding:8px 9px}.section-head{align-items:flex-start;flex-direction:column;gap:16px}.controls{width:100%;justify-content:space-between}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.swatch{height:135px}.card-info{padding:10px}.card-info strong{font-size:11px}.card-bottom{flex-wrap:wrap}.code{font-size:10px}.studio-banner{padding:20px;gap:12px;flex-wrap:wrap;margin-bottom:35px}.studio-banner h2{font-size:16px}.studio-banner p{font-size:10px}.studio-banner button{margin-left:0;width:100%}.banner-icon{font-size:32px}footer{padding:24px 20px;flex-wrap:wrap;gap:15px}footer>span{min-width:60%}.page-head{padding-top:35px}.page-head h1{font-size:36px;letter-spacing:-1.7px}.palette-actions{flex-wrap:wrap}.palette-toolbar{font-size:11px}.dialog-content{padding:28px 22px}.values b{font-size:10px}.values button{gap:8px}.detail-swatch{height:180px}.palette-top{gap:10px}.swatch span{font-size:9px}.search-tip{line-height:1.6}}@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
.brown{background:#ab866d}