.cp-page{margin:0;color:#10182b;font:16px/1.55 Arial,sans-serif;background:radial-gradient(ellipse at 0 25%,#ffd9e5,transparent 48%),radial-gradient(ellipse at 100% 25%,#bbf8e3,transparent 48%),#fafcff}.cp-page *{box-sizing:border-box}.cp-heading{max-width:1280px;margin:35px auto 64px;text-align:center;padding:0 24px}.cp-heading>a{display:block;text-align:left;color:#53647b}.cp-heading h1{font-size:clamp(30px,4vw,58px);font-weight:500;line-height:1.18;margin:30px 0 20px}.cp-heading p{font-size:clamp(16px,2vw,22px);color:#6b7c96}.cp-shell{max-width:1280px;margin:auto;padding:0 24px 60px}.cp-workspace{position:relative;padding:32px;background:white;border-radius:28px;box-shadow:0 22px 45px #15242d20;display:grid;grid-template-columns:minmax(0,1.9fr) minmax(280px,1fr);gap:70px}.cp-workspace:fullscreen{overflow:auto;padding:40px}.cp-page h2{font-size:19px;font-weight:500;margin:0 0 22px}.cp-page h3{font-size:17px;font-weight:500}.cp-image{position:relative;line-height:0;border-radius:12px;overflow:hidden;background:#eef1f4}.cp-image.drag{outline:4px solid #2596be}.cp-image img{display:block;width:100%;height:auto;max-height:520px;object-fit:contain;cursor:crosshair}.cp-image canvas{position:absolute;pointer-events:none;border:3px solid white;border-radius:50%;box-shadow:0 3px 15px #0005}.cp-page button,.cp-page .cp-primary{font:inherit;cursor:pointer;border:1px solid #e0e3e8;background:white;color:#10182b;border-radius:16px;padding:11px 16px}.cp-page button:hover{background:#eef5f7}.cp-page button:disabled{opacity:.5;cursor:not-allowed}.cp-page :focus-visible{outline:3px solid #2596be;outline-offset:3px}.cp-full{position:absolute;right:-16px;top:-20px;background:#10182b!important;color:white!important;border-radius:50%!important;font-size:24px!important}.cp-previews{display:flex;gap:16px;margin:28px 0 22px}.cp-previews>div,.cp-previews>label{height:96px;border-radius:20px}.cp-previews>label{flex:1;cursor:pointer}.cp-previews>div{width:100px}.cp-previews input{opacity:0;width:100%;height:100%;cursor:pointer}.cp-value{display:grid;grid-template-columns:68px minmax(0,1fr) 44px;align-items:center;border:1px solid #e5e7eb;border-radius:15px;margin:10px 0;min-height:52px;overflow:hidden}.cp-value>span{color:#687587;padding-left:14px}.cp-value output{border-left:1px solid #e5e7eb;padding:10px 12px;font:13px/1.5 monospace;overflow-wrap:anywhere}.cp-value button{padding:7px;border:0;margin:4px;border-radius:10px}.cp-detail-link{display:block;margin:26px 0;color:inherit;text-decoration:none}.cp-upload{padding:20px;background:#f3f4f6;border-radius:22px}.cp-upload h3{margin-top:0}.cp-primary{display:block;background:#10182b!important;color:white!important;text-align:center;border-radius:28px!important;margin-bottom:10px}.cp-upload>button{width:100%;border-radius:28px}.cp-muted,#imageStatus{font-size:13px;color:#6b7c96}.cp-palette-controls{display:flex;gap:12px;align-items:center}.cp-palette-controls>button{border-radius:50%;padding:8px 14px;box-shadow:0 3px 5px #0001}.cp-palette-controls #colorPalette{flex:1;display:flex;border-radius:8px;overflow:hidden;min-width:0}.cp-page .color-swatch{flex:1;border:0;border-radius:0;padding:0;height:48px;min-width:0}.cp-page .color-swatch:hover{outline:3px solid #10182b;outline-offset:-3px}.cp-section{margin-top:30px;background:#ffffffeb;border-radius:24px;padding:30px}.cp-section p{color:#52637a}.cp-strip{display:flex;border-radius:12px;overflow:hidden}.cp-converters,.cp-info{display:grid;grid-template-columns:1fr 1fr;gap:24px}.cp-converters form{border:1px solid #e1e5eb;border-radius:16px;padding:20px;min-width:0}.cp-fields{display:flex;gap:12px}.cp-fields label{flex:1;min-width:0}.cp-page input:not([type=color]){width:100%;font:inherit;border:1px solid #d9dfe6;padding:10px;border-radius:9px;color:#10182b;background:white}.cp-converters output{display:block;min-height:60px;padding:16px 0;overflow-wrap:anywhere}.cp-inline{display:flex;gap:12px;max-width:580px}.cp-page a{color:#155b7b}.cp-page #cpToast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:#10182b;color:white;padding:12px 24px;border-radius:12px;z-index:9999}.cp-page .tool-guide{background:white;color:#10182b;border-radius:24px}.cp-page .tool-guide p,.cp-page .tool-guide li{color:#52637a}@media(max-width:800px){.cp-heading{margin-bottom:35px}.cp-workspace{grid-template-columns:1fr;gap:28px;padding:22px}.cp-shell{padding:0 16px 40px}.cp-converters,.cp-info{grid-template-columns:1fr}.cp-section{padding:22px}.cp-palette-controls{gap:5px}.cp-palette-controls>button{padding:7px 10px}.cp-full{right:0}.cp-previews{margin-top:0}.cp-fields{gap:6px}}
.cp-page .site-tools-nav{display:flex;align-items:center;justify-content:space-between;padding:18px 5%;background:#ffffffc9;border-bottom:1px solid #dce4e8}.cp-page .site-tools-nav nav{display:flex;gap:24px}.cp-page .site-tools-nav a{text-decoration:none}.cp-page .site-tools-brand{font-size:20px;font-weight:700}.cp-page .site-tools-brand img{max-width:160px;max-height:45px}.cp-page .site-webs{color:#079d79}.cp-page .tool-guide h2,.cp-page .tool-guide h3,.cp-page .tool-guide summary{color:#10182b}.cp-page .tool-guide aside{background:#eef5f7}.cp-page .tool-guide a{color:#155b7b}.cp-page .cp-image img{max-height:none}@media(max-width:480px){.cp-page .site-tools-nav{padding:14px 16px}.cp-page .site-tools-nav nav{gap:12px;font-size:14px}}
.cp-page.cp-picker{background:#fff}
.cp-page.cp-picker{min-height:100vh;background:radial-gradient(circle at 1.5px 1.5px,rgba(255,255,255,.05) 1.2px,transparent 0) 0 0/22px 22px,#0f1115}.cp-picker .cp-heading h1{color:#edeff3}.cp-picker .cp-heading p,.cp-picker .cp-heading>a{color:#9299a8}.cp-page.cp-picker .site-tools-nav{background:#14171d;border-color:#2b303a}.cp-page.cp-picker .site-tools-nav a{color:#edeff3}.cp-page #cpToast.cp-color-toast{display:flex;align-items:center;gap:14px;padding:14px 22px 14px 14px;border:1px solid #3b4555;border-radius:18px;background:#1a1d24;box-shadow:0 16px 48px #0006;max-width:calc(100vw - 32px);animation:cp-toast-enter .18s ease-out}.cp-page #cpToast[hidden]{display:none!important}.cp-toast-swatch{width:46px;height:46px;flex-shrink:0;border-radius:12px;border:1px solid #ffffff50;box-shadow:inset 0 0 0 3px #ffffff20}.cp-color-toast strong{display:block;font:700 20px/1.4 ui-monospace,monospace;letter-spacing:.06em;color:#fff}.cp-color-toast small{display:block;color:#acb7c8;font-size:12px}@keyframes cp-toast-enter{from{opacity:0;margin-bottom:-8px}to{opacity:1;margin-bottom:0}}@media(prefers-reduced-motion:reduce){.cp-page #cpToast.cp-color-toast{animation:none}}
.cc-studio{border:1px solid #e0e6ed;border-radius:24px;padding:28px;background:linear-gradient(135deg,#f8fafc,#fff)}.cc-studio-heading>span{font-size:11px;letter-spacing:.15em;font-weight:700;color:#617a92}.cc-studio-heading h2{font-size:28px;font-weight:700;margin:10px 0}.cc-studio-heading p{margin:0 0 25px}.cc-studio .cp-fields label{font-size:13px;font-weight:700;color:#52647b}.cc-studio .cp-fields input{display:block;margin-top:9px;padding:16px;font:500 17px/1.5 ui-monospace,monospace;box-shadow:0 2px 5px #132b4510}.cc-actions{display:flex;gap:12px;flex-wrap:wrap;margin:22px 0}.cp-page .cc-action-primary{background:#10182b;color:white;font-weight:700;border-color:#10182b}.cc-properties{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:24px 0}.cc-property{display:grid;grid-template-columns:minmax(0,1fr) 38px;align-items:center;gap:8px;background:#fff;border:1px solid #dde5ed;border-radius:16px;padding:17px 18px;box-shadow:0 3px 9px #132b4508}.cc-property>span{grid-column:1;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#708095;font-weight:700}.cc-property output{grid-column:1;overflow-wrap:anywhere;font:600 15px/1.6 ui-monospace,monospace;color:#152338}.cc-property button{grid-column:2;grid-row:1/3;padding:8px!important;border:0!important;background:#f0f4f8!important;border-radius:10px!important}.cc-screen-reader{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.cp-page button.cc-color-tile{padding:18px;border:1px solid #00000015;min-height:96px;border-radius:16px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px #132b4510;transition:transform .15s,box-shadow .15s;color:#fff;font-weight:700}.cp-page button.cc-color-tile span{color:#fff;background:#10182bba;padding:8px 15px;border-radius:10px;font-size:14px;letter-spacing:.015em;overflow-wrap:anywhere}.cp-page button.cc-color-tile:hover{transform:translateY(-3px);box-shadow:0 8px 20px #132b4525}.cp-page button.cc-color-tile:focus-visible{outline:3px solid #10182b}.cc-license-notice{font-size:14px}.cp-page .cc-license-notice{padding:22px;border-color:#e0e6ed}.cc-license-notice strong{color:#10182b}.cp-page #cpToast{max-width:calc(100vw - 32px);overflow-wrap:anywhere}@media(max-width:600px){.cc-studio{padding:18px}.cc-properties{grid-template-columns:1fr}.cc-studio .cp-fields{flex-direction:column;gap:16px}.cc-studio-heading h2{font-size:23px}.cp-page button.cc-color-tile{padding:10px;min-height:86px}.cp-page button.cc-color-tile span{font-size:12px;padding:7px 9px}}
.cc-rgb-intro{margin:4px 0 30px}.cc-rgb-intro>span,.cc-direction{font:700 11px/1.5 ui-monospace,monospace;letter-spacing:.12em;color:#637b91}.cc-rgb-intro h2{font-size:27px;font-weight:700;margin:10px 0}.cp-page .cc-rgb-studio form{padding:24px;border-radius:24px;background:#fff;box-shadow:0 8px 30px #0a20300a}.cc-rgb-studio header h2{font-size:24px;font-weight:700;margin:10px 0 4px}.cc-rgb-studio header p{margin:0 0 20px;font-size:13px}.cp-page button.cc-live-preview{width:100%;height:165px;display:flex;align-items:flex-end;text-align:left;border:1px solid #0002;border-radius:18px;padding:15px;box-shadow:inset 0 0 0 5px #ffffff30;transition:background .1s}.cc-preview-caption{color:white;background:#10182bc9;border:1px solid #ffffff25;border-radius:12px;padding:9px 15px;font-size:10px;letter-spacing:.08em}.cc-preview-caption strong{display:block;font:700 23px/1.4 ui-monospace,monospace}.cc-preview-caption small{font-size:10px;letter-spacing:0;display:block;opacity:.8}.cc-native-picker{display:flex;justify-content:space-between;align-items:center;margin:16px 0;color:#53657b;font-size:13px}.cc-native-picker input{width:54px;height:34px;border:0;background:none;cursor:pointer}.cc-channel-list{margin:22px 0}.cc-channel{display:grid;grid-template-columns:28px minmax(0,1fr) 78px;gap:14px;align-items:center;margin:14px 0;--channel:#8091a8}.cc-channel label{font:700 15px ui-monospace,monospace;color:var(--channel)}.cc-channel[data-channel=r]{--channel:#e04f67}.cc-channel[data-channel=g]{--channel:#22a47c}.cc-channel[data-channel=b]{--channel:#497ce5}.cc-channel[data-channel=c]{--channel:#009dbb}.cc-channel[data-channel=m]{--channel:#d543a1}.cc-channel[data-channel=y]{--channel:#bc8f14}.cc-channel[data-channel=k]{--channel:#27334a}.cp-page .cc-channel input[type=range]{padding:0;border:0;accent-color:var(--channel);cursor:pointer;background:none}.cp-page .cc-channel input[type=number]{padding:8px;text-align:center;font:600 14px ui-monospace,monospace;background:#f5f8fb}.cc-result-label{font:700 10px ui-monospace,monospace;letter-spacing:.09em;color:#6f8196}.cp-page button.cc-copy-result{display:block;width:100%;text-align:left;margin-top:10px;background:#f2f6fb;border:1px solid #dce5f0;border-radius:14px;padding:15px}.cp-page .cc-copy-result output{padding:0;min-height:0;font:600 15px/1.65 ui-monospace,monospace;color:#16283e}.cc-copy-result>span{display:block;font-size:11px;color:#6f8196;margin-top:9px}.cc-rgb-studio .cc-actions{margin-bottom:0}.cc-presets{margin:30px 0;border-top:1px solid #dce5ed;padding-top:20px}.cc-presets>div{display:flex;flex-wrap:wrap;gap:10px}.cp-page .cc-presets button{display:flex;align-items:center;gap:8px;border-radius:30px;font-size:13px;padding:9px 13px}.cc-presets button span{display:block;width:18px;height:18px;background:var(--preset);border:1px solid #0002;border-radius:50%}.cc-presets h3{font-weight:700}.cc-presets p{font-size:14px}@media(max-width:600px){.cp-page .cc-rgb-studio form{padding:18px}.cc-channel{grid-template-columns:24px minmax(0,1fr) 64px;gap:8px}.cc-rgb-intro h2{font-size:23px}}
.cp-page .cc-action-primary:hover,.cp-page .cc-action-primary:focus-visible{background:#20394c;color:#fff;border-color:#20394c}.cp-page .cc-action-primary:active{background:#0c1521;color:#fff}
.cp-page button.cc-color-tile[hidden]{display:none!important}
.cc-dual-previews{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:0 0 24px}.cc-dual-previews>div{height:170px;border-radius:20px;display:flex;align-items:flex-end;padding:18px;border:1px solid #0002;background:#ffbe98;box-shadow:inset 0 0 0 5px #ffffff30}.cc-dual-previews>div>span{padding:10px 14px;border-radius:12px;background:#102433d9;color:#fff;max-width:100%}.cc-dual-previews small{display:block;font-size:10px;letter-spacing:.1em;color:#bdcfdf;font-weight:700}.cc-dual-previews strong{display:block;font:700 16px/1.5 ui-monospace,monospace;overflow-wrap:anywhere;margin-top:4px}@media(max-width:550px){.cc-dual-previews{grid-template-columns:1fr;gap:12px}.cc-dual-previews>div{height:130px}}