:root{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Microsoft YaHei,PingFang SC,sans-serif;color:#283e34;background:#f4f7f4;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,textarea{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:2px solid #639e7e;outline-offset:3px}[hidden]{display:none!important}a{color:inherit;text-decoration:none}button{color:inherit}input{min-width:0}input[aria-invalid=true]{border-color:#c16464!important}.color-ambient{position:fixed;inset:0;z-index:-1;background:radial-gradient(ellipse at 5% 0%,#dfeee4,transparent 42%),radial-gradient(ellipse at 95% 10%,#ece5f3,transparent 40%);pointer-events:none}.color-header{max-width:1300px;margin:auto;display:flex;justify-content:space-between;align-items:center;padding:25px 30px}.color-brand{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:650}.color-brand small{font-size:11px;font-weight:400;color:#84978c;margin-left:5px}.color-header nav{display:flex;gap:25px;font-size:13px;color:#73867b}.color-header a:hover,.color-footer a:hover{color:#277151}.color-main{max-width:1300px;padding:0 30px 30px;margin:auto}.color-hero{text-align:center;padding:8px 0 25px}.color-hero h1{font-size:38px;font-weight:650;letter-spacing:-1px;margin:10px 0}.color-hero p{font-size:14px;color:#7f8e86;margin:0}.hero-palette{display:flex;justify-content:center;height:12px}.hero-palette i{width:25px;height:12px;border-radius:20px;border:2px solid #f4f7f4;margin-left:-5px;transform:rotate(-12deg);background:#82ae94}.hero-palette i:nth-child(2){background:#a294ba}.hero-palette i:nth-child(3){background:#dda3b4}.hero-palette i:nth-child(4){background:#e6ba83}.hero-palette i:nth-child(5){background:#93bcd1}.color-workbench{padding:23px 26px 26px;border:1px solid #dce6df;border-radius:23px;background:#ffffffb3;box-shadow:0 18px 45px -35px #37584450;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.color-section-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px}.color-section-head h2{font-size:17px;font-weight:620;margin:0}.color-section-head>span{color:#93a099;font-size:11px;letter-spacing:1px}.color-tool-grid{display:grid;grid-template-columns:1fr .88fr 1.25fr;gap:28px}.picker-column,.preview-column,.values-column{min-width:0}.sv-panel{height:176px;border-radius:12px;position:relative;background:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent),hsl(var(--hue) 100% 50%);cursor:crosshair;touch-action:none}.sv-panel:focus-visible{outline-offset:4px}.sv-panel>span{position:absolute;width:14px;height:14px;border:2px solid #fff;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #0006;pointer-events:none}.range-label{display:flex;justify-content:space-between;font-size:11px;color:#7b8b80;margin:12px 0 6px}.range-label output{font-variant-numeric:tabular-nums}.picker-column input[type=range]{appearance:none;width:100%;height:11px;border-radius:8px;margin:0;display:block;cursor:pointer}.hue-range{background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.picker-column input[type=range]::-webkit-slider-thumb{appearance:none;width:16px;height:16px;border:2px solid #fff;background:transparent;border-radius:50%;box-shadow:0 0 0 1px #688274,0 2px 5px #0002}.picker-column input[type=range]::-moz-range-thumb{width:13px;height:13px;border:2px solid #fff;border-radius:50%;background:transparent;box-shadow:0 0 0 1px #688274}.checkerboard,.alpha-track{background-color:#fff;background-image:conic-gradient(#e5eae6 25%,transparent 0 50%,#e5eae6 0 75%,transparent 0);background-size:12px 12px}.alpha-track{border-radius:8px}.native-picker-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:15px;font-size:10px;color:#87988d}.native-picker-row label{display:flex;align-items:center;gap:7px;color:#617c6a;font-size:11px;cursor:pointer}.native-picker-row input{width:23px;height:23px;border:1px solid #ceddd2;border-radius:6px;background:transparent;padding:2px;cursor:pointer}.color-preview{height:211px;border-radius:14px;overflow:hidden;border:1px solid #d8e3db}.color-preview>div{height:100%;display:flex;flex-direction:column;padding:22px;color:#fff}.preview-caption{font-size:10px;opacity:.8}.color-preview strong{font-size:22px;letter-spacing:.04em;margin-top:7px;font-weight:500;font-family:Consolas,monospace}.color-preview .light-color{color:#273e32}.type-samples{margin-top:auto;display:flex;gap:30px}.type-samples>span{font-family:Georgia,serif;font-size:30px;color:#fff}.type-samples>span:last-child{color:#1e2924}.type-samples small{display:block;font-family:inherit;font-size:10px;margin-top:2px}.recent-heading{display:flex;justify-content:space-between;font-size:11px;color:#74877b;margin:15px 0 10px;gap:8px}.recent-heading small{font-size:9px;color:#94a098}.recent-colors{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}.recent-swatch{padding:0;height:24px;border:1px solid #dce6de;border-radius:6px;overflow:hidden}.recent-swatch span{display:block;width:100%;height:100%}.recent-empty{grid-column:1/-1;font-size:11px;color:#9ba99f;line-height:24px}#parse-form>label{display:block;font-size:12px;margin-bottom:9px;color:#526b5c}.color-input-row{display:flex;gap:8px}.color-input-row input{width:100%;background:#fff;border:1px solid #d9e4dc;border-radius:9px;padding:10px;font-size:12px}.color-input-row button{border:0;border-radius:9px;padding:9px 12px;color:#fff;background:#2e6b50;font-size:12px;white-space:nowrap}.color-input-row button:hover{background:#22533d}.color-error{font-size:11px;color:#a85050;min-height:16px;margin:5px 0 3px;line-height:1.5}.format-label{display:flex;justify-content:space-between;gap:5px;align-items:center;font-size:11px;color:#506b59;margin-bottom:5px}.format-label small{font-size:10px;color:#96a098}.format-row{display:flex;gap:7px;align-items:center;background:#f5f8f5;border:1px solid #e0e8e2;border-radius:9px;margin-bottom:10px;padding:2px 4px 2px 10px}.format-row input{flex:1;width:0;border:0;color:#345542;background:transparent;font-family:Consolas,monospace;font-size:12px;padding:8px 0;outline-offset:0}.format-row button{border:0;border-radius:6px;padding:7px 8px;background:transparent;color:#7c8f81;font-size:11px}.format-row button:hover{background:#e4eee7;color:#28644c}.format-help{color:#8e9c92;font-size:10px;line-height:1.7;margin:5px 0 0}.color-library{margin-top:36px}.library-heading{margin-bottom:18px}.library-heading h2{font-size:20px}.library-heading p{font-size:12px;color:#8a9b8e;margin:7px 0 0}.color-search{display:flex;align-items:center;gap:9px;width:290px;border:1px solid #dce5de;background:#fffa;border-radius:11px;padding:9px 13px;color:#7d9687}.color-search>span{font-size:23px;line-height:1}.color-search input{border:0;outline:none;background:transparent;width:100%;font-size:12px;color:#3b5646}.color-search:focus-within{border-color:#93b5a0}.color-tabs{display:flex;gap:24px;border-bottom:1px solid #dce6df}.color-tabs a{font-size:13px;padding:12px 1px;border-bottom:2px solid transparent;color:#7d9083;margin-bottom:-1px;white-space:nowrap}.color-tabs small{font-size:10px;background:#e8eee9;padding:2px 5px;border-radius:5px;margin-left:3px}.color-tabs a.active{color:#2c6b4e;border-color:#2c6b4e;font-weight:600}.color-filters{display:flex;flex-wrap:wrap;gap:7px;margin:17px 0 11px}.color-filters button{border:1px solid transparent;border-radius:20px;background:transparent;color:#7b8c80;padding:6px 13px;font-size:12px}.color-filters button[aria-pressed=true]{background:#e4eee6;color:#34634b;border-color:#d7e3d9}.color-filters button:hover{background:#eaf1ec}.color-result-count{font-size:11px;color:#95a198;margin:12px 0 16px}.color-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:15px}.color-card{overflow:hidden;border:1px solid #dce5de;border-radius:13px;background:#fff;transition:box-shadow .2s,transform .2s}.color-card:hover{transform:translateY(-2px);box-shadow:0 12px 25px -18px #405f4c80}.color-swatch{height:86px;position:relative;border-bottom:1px solid #00000008}.color-swatch[role=button]{cursor:pointer}.swatch-action{position:absolute;inset:auto 0 0;padding:5px 9px;background:#172b25a6;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;font-size:10px;opacity:0;transition:opacity .15s}.color-swatch:hover .swatch-action,.color-swatch:focus-visible .swatch-action{opacity:1}.color-card-info{padding:12px 13px 13px}.color-card h3{font-size:13px;margin:0 0 6px;font-weight:550;color:#425c4a}.color-code-line{display:flex;align-items:center;justify-content:space-between;gap:5px}.color-code-line code{font-size:12px;letter-spacing:.02em;color:#5d7968}.color-code-line button{padding:2px 0 2px 5px;border:0;background:none;color:#98a99e;font-size:10px}.color-code-line button:hover{color:#28644c}.color-rgb{display:block;margin-top:5px;color:#9aa79e;font-size:10px;white-space:nowrap}.color-keyword{display:block;font-size:10px;color:#91a197;overflow-wrap:anywhere;margin-bottom:6px}.collection-title{font-size:16px;margin:20px 0}.color-ready .collection-title{display:none}.color-empty{padding:50px 20px;text-align:center;font-size:13px;color:#8b9b91}.direct-preview{display:flex;gap:14px;align-items:center;padding:12px;border:1px solid #d4e3d7;border-radius:13px;background:#fff;margin:0 0 18px;font-size:12px}.direct-preview>span{display:block;width:45px;height:45px;border:1px solid #dce5de;border-radius:9px}.direct-preview strong{display:block;margin-top:4px}.direct-preview button{margin-left:auto;border:0;border-radius:9px;padding:10px;background:#e6efe8;color:#39694d;font-size:12px}.color-guide{display:grid;grid-template-columns:repeat(3,1fr);gap:35px;border-top:1px solid #dce5dd;padding-top:28px;margin-top:36px}.color-guide h2{font-size:13px;font-weight:600;color:#687f6e}.color-guide p{font-size:12px;line-height:1.9;color:#8b9a90}.color-note{font-size:11px;color:#99a59c;line-height:1.8;margin-top:20px}.color-note a{text-decoration:underline;text-underline-offset:3px}.color-footer{display:flex;justify-content:space-between;gap:20px;font-size:11px;color:#8a9c8e;padding:30px 0 4px}.static-color{display:flex;gap:20px;align-items:center}.static-color>span{width:100px;height:100px;flex-shrink:0;border-radius:14px}.static-color p{font-size:13px;line-height:1.8;color:#768b7d}#color-toast{position:fixed;bottom:28px;left:50%;transform:translate(-50%,15px);opacity:0;pointer-events:none;background:#234733ec;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;padding:12px 20px;border-radius:12px;box-shadow:0 8px 35px #12332125;font-size:13px;transition:opacity .2s,transform .2s;max-width:calc(100vw - 30px);overflow-wrap:anywhere;z-index:20}#color-toast.visible{opacity:1;transform:translate(-50%)}.copy-dialog{max-width:calc(100vw - 32px);width:420px;border:1px solid #dbe6df;border-radius:18px;padding:24px;color:#314c3a}.copy-dialog::backdrop{background:#1b35255c;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.copy-dialog h2{font-size:18px}.copy-dialog p{font-size:13px;color:#829087;line-height:1.8}.copy-dialog textarea{width:100%;border:1px solid #d6e3d9;padding:10px;border-radius:8px}.copy-dialog button{display:block;margin:15px 0 0 auto;border:0;background:#28644c;color:#fff;border-radius:8px;padding:9px 18px}@media(max-width:1050px){.color-tool-grid{grid-template-columns:1fr .8fr 1.2fr;gap:18px}.color-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.color-preview>div{padding:17px}.color-preview strong{font-size:19px}.native-picker-row>span{display:none}.color-workbench{padding:21px}.recent-heading{flex-wrap:wrap;gap:3px}}@media(max-width:800px){.color-tool-grid{grid-template-columns:1fr 1fr;gap:22px}.values-column{grid-column:1/-1;display:grid;grid-template-columns:90px 1fr;gap:7px 12px}.values-column #parse-form,.values-column .color-error,.format-help{grid-column:1/-1}.format-label{align-self:center;margin:0;flex-direction:column;align-items:flex-start;gap:5px}.format-row{margin:0}.color-preview{height:220px}.color-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.color-guide{gap:20px}.color-section-head.library-heading{align-items:flex-start;gap:14px}.color-search{width:240px}}@media(max-width:560px){.color-header{padding:19px 18px}.color-header nav{font-size:11px;gap:17px}.color-brand{font-size:16px;gap:8px}.color-brand img{width:31px;height:31px}.color-main{padding:0 16px 22px}.color-hero{padding:10px 0 22px}.color-hero h1{font-size:29px}.color-hero p{font-size:12px}.color-workbench{padding:17px;border-radius:18px}.color-section-head{margin-bottom:15px}.color-section-head h2{font-size:15px}.color-tool-grid{gap:16px}.sv-panel{height:148px}.color-preview{height:188px}.color-preview>div{padding:12px}.color-preview strong{font-size:16px}.type-samples{gap:18px}.type-samples>span{font-size:25px}.type-samples small{font-size:8px}.recent-heading small{display:none}.recent-colors{grid-template-columns:repeat(4,1fr)}.recent-empty{font-size:10px;line-height:1.8}.native-picker-row label{font-size:10px}.values-column{grid-template-columns:72px 1fr}.format-label{font-size:10px}.format-label small{font-size:9px}.format-row input{font-size:11px}.color-error{min-height:0;margin:1px 0}.color-input-row input{font-size:11px}.color-library{margin-top:28px}.library-heading{flex-direction:column}.color-section-head.library-heading h2{font-size:19px}.color-search{width:100%}.color-tabs{gap:22px}.color-tabs a{font-size:12px}.color-filters{gap:4px}.color-filters button{padding:6px 10px;font-size:11px}.color-result-count{font-size:10px}.color-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.color-swatch{height:66px}.color-card-info{padding:10px 8px}.color-card h3{font-size:11px}.color-code-line code{font-size:10px}.color-code-line button{font-size:9px;padding-left:2px}.color-rgb{font-size:8px;letter-spacing:-.3px}.color-keyword{font-size:9px}.color-guide{grid-template-columns:1fr;gap:8px;margin-top:28px;padding-top:16px}.color-guide p{margin-top:6px}.color-footer{font-size:10px}.static-color{align-items:flex-start;gap:12px}.static-color>span{width:55px;height:90px}.static-color p{font-size:11px}}@media(max-width:360px){.color-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.color-card-info{padding:12px}.color-rgb{font-size:10px}.color-code-line code{font-size:12px}.color-preview strong{font-size:13px}.color-workbench{padding:13px}.color-tool-grid{gap:12px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}.color-card:hover{transform:none}}