:root{color-scheme:light;--ink:#17212f;--muted:#697384;--border:#e4e9f0;--soft:#f7f9fc;--brand:#285bb2;--bg:#fff;--shadow:0 14px 45px rgba(19,37,65,.035)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased;font-size:15px}button,input,select{font:inherit}button{cursor:pointer}a{text-decoration:none;color:inherit}a:focus-visible,button:focus-visible,[role="button"]:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #74a3f1;outline-offset:3px}[hidden]{display:none!important}.container{width:min(1152px,calc(100% - 72px));margin:0 auto}.site-header{height:83px;border-bottom:1px solid #edf0f5;background:rgba(255,255,255,.98)}.header-inner{height:100%;display:flex;align-items:center;gap:28px}.brand{display:inline-flex;align-items:center;gap:13px;flex-shrink:0}.brand-name{font-size:19px;font-weight:760;letter-spacing:-.8px;color:#121d2e}.brand-name span{font-weight:510;letter-spacing:-.6px}.brand-mark{display:grid;grid-template-columns:repeat(2,10px);grid-template-rows:repeat(2,10px);gap:3px;transform:rotate(-7deg)}.brand-mark i{display:block;border-radius:2px}.brand-mark i:nth-child(1){background:#1a3560}.brand-mark i:nth-child(2){background:#5582bf}.brand-mark i:nth-child(3){background:#a3bfdf}.brand-mark i:nth-child(4){background:#d8e3f1}.header-nav{display:flex;gap:31px;margin:auto;color:#596779;font-size:13px;font-weight:570}.header-nav a:hover,.footer-links a:hover{color:var(--brand)}.header-action{border:1px solid #dfe5ed;border-radius:7px;padding:12px 16px;font-size:12px;font-weight:700;transition:background .15s}.header-action:hover{background:#f5f8fc}.header-action span{margin-left:9px;color:#718299}.eyebrow,.section-overline{color:#64718a;font-size:10px;font-weight:790;letter-spacing:2px}.eyebrow{display:flex;align-items:center;gap:9px}.eyebrow-dot{width:7px;height:7px;background:#3975c9;border-radius:50%}.hero{text-align:center;padding:84px 12px 64px}.hero .eyebrow{justify-content:center}.hero h1{font-size:clamp(40px,5.6vw,72px);font-weight:750;line-height:1.125;letter-spacing:-3.7px;margin:24px 0 20px}.hero h1 span{color:#8da7ce}.hero>p{font-size:16px;line-height:1.8;max-width:565px;margin:0 auto;color:#657285}.hero-points{display:flex;justify-content:center;gap:25px;flex-wrap:wrap;margin-top:28px;color:#728094;font-size:12px;font-weight:570}.hero-points>span{display:flex;align-items:center;gap:5px}.hero-points svg{width:16px;height:16px;stroke:#4d77ad;stroke-width:2.1;fill:none;stroke-linecap:round;stroke-linejoin:round}.studio-wrap{scroll-margin-top:25px}.studio-topline{display:flex;justify-content:space-between;align-items:end;margin-bottom:19px;gap:12px}.studio-topline h2{font-size:24px;letter-spacing:-.9px;font-weight:720;margin:8px 0 0}.studio-indicator{font-size:11px;color:#64778f;border:1px solid var(--border);border-radius:30px;padding:9px 13px;display:flex;align-items:center;gap:7px;margin-bottom:2px}.studio-indicator>span{width:6px;height:6px;border-radius:50%;background:#68aa7b}.studio{border:1px solid #dfe5ec;border-radius:12px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);overflow:hidden;background:#fff;box-shadow:var(--shadow)}.studio-image-area{background:#fafbfd;padding:23px;border-right:1px solid var(--border);display:flex;flex-direction:column;min-width:0}.dropzone{position:relative;display:flex;align-items:stretch;justify-content:center;min-height:505px;border:1.5px dashed #cdd8e6;border-radius:8px;background:#fff;outline-offset:4px;transition:border-color .16s,background .16s;overflow:hidden;cursor:pointer}.dropzone:hover,.dropzone.is-dragging{border-color:#618cc5;background:#f5f9ff}.dropzone-empty{display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:25px;gap:0}.upload-symbol{width:69px;height:69px;border-radius:16px;background:#f1f5fb;display:grid;place-items:center;margin-bottom:22px}.upload-symbol svg{width:27px;height:27px;stroke:#668ab9;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.dropzone-empty strong{font-size:19px;font-weight:700;letter-spacing:-.55px}.dropzone-empty p{font-size:13px;line-height:1.75;max-width:245px;color:#7c8898;margin:11px auto 23px}.upload-button{display:inline-flex;gap:24px;align-items:center;background:#1e3659;color:#fff;padding:14px 19px;border-radius:6px;font-size:12px;font-weight:700}.upload-button span{font-size:17px;font-weight:400}.dropzone-empty small{font-size:10px;color:#96a0af;margin-top:17px;line-height:1.6}.dropzone-preview{position:absolute;inset:0;background:#eef2f7}.dropzone-preview img{height:100%;width:100%;object-fit:contain;display:block}.preview-overlay{position:absolute;bottom:15px;left:50%;transform:translateX(-50%);white-space:nowrap;background:#fff;box-shadow:0 4px 24px #14233822;padding:12px 15px;border-radius:6px;font-size:12px;font-weight:670}.preview-overlay span{margin-left:10px}.image-meta{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:13px 0 0;font-size:11px;color:#8290a0}.image-meta span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:65%}.privacy-hint{display:flex;align-items:center;justify-content:center;gap:8px;font-size:11px;color:#8b97a6;line-height:1.6;margin-top:auto;padding-top:20px;text-align:center}.privacy-hint svg{width:15px;height:15px;flex-shrink:0;stroke:#899bb3;stroke-width:1.6;stroke-linecap:round}.studio-results{padding:32px 34px 27px;min-width:0}.results-heading h3{font-size:21px;font-weight:730;letter-spacing:-.75px;margin:0 0 7px}.results-heading p{font-size:12px;color:#8a94a2;margin:0;line-height:1.65}.count-control{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:25px}.count-control label{font-size:12px;font-weight:690;color:#485366}.count-select-wrap{position:relative}.count-select-wrap:after{content:'⌄';position:absolute;right:12px;top:50%;transform:translateY(-60%);pointer-events:none;color:#667891;font-size:17px}.count-control select{appearance:none;min-width:122px;background:#fff;border:1px solid #dee5ed;border-radius:6px;color:#364960;padding:11px 28px 11px 12px;font-size:12px;font-weight:620}.palette-placeholder{padding-top:30px}.placeholder-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;height:99px}.placeholder-strip i{display:block;border-radius:4px}.placeholder-strip i:nth-child(1){background:#d8e1ec}.placeholder-strip i:nth-child(2){background:#c2d0df}.placeholder-strip i:nth-child(3){background:#a7bdd3}.placeholder-strip i:nth-child(4){background:#e3e9f0}.placeholder-strip i:nth-child(5){background:#edf1f5}.placeholder-message{border-top:1px solid #edf0f3;text-align:center;margin-top:27px;padding:69px 25px 55px;color:#9ca5b2;font-size:12px;line-height:1.8}.palette-strip{display:flex;gap:5px;height:93px;margin:25px 0 18px;border-radius:5px;overflow:hidden}.palette-strip>div{min-width:4px;transition:filter .15s}.palette-strip>div:hover{filter:brightness(.94)}.colors-list{display:flex;flex-direction:column;gap:1px}.color-row{width:100%;display:flex;align-items:center;gap:13px;background:transparent;border:0;border-bottom:1px solid #eef1f4;text-align:left;padding:9px 0;min-height:52px;border-radius:0}.color-row:hover{background:#f9fbfe}.color-swatch{width:32px;height:32px;flex-shrink:0;border-radius:5px;border:1px solid #00000008}.color-index{font-size:10px;font-weight:750;color:#97a4b3;width:15px}.color-values{display:flex;align-items:center;justify-content:space-between;gap:8px;flex:1;min-width:0}.color-code{font-size:12px;letter-spacing:.1px;font-weight:760;color:#253349;white-space:nowrap}.color-rgb{font-size:11px;color:#7d8898;white-space:nowrap}.color-copy{color:#8394aa;display:grid;place-items:center;width:28px;height:28px;flex-shrink:0}.color-copy svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linejoin:round}.copy-help{font-size:10px;color:#97a1ae;margin:13px 0 0}.download-panel{border-top:1px solid #ecf0f4;margin-top:26px;padding-top:23px}.download-heading{display:flex;justify-content:space-between;gap:8px;align-items:center}.download-heading strong{font-size:12px;color:#344257}.download-heading span{color:#9ba5b2;font-size:10px}.download-actions{display:grid;grid-template-columns:minmax(0,2.3fr) repeat(3,minmax(0,1fr));gap:7px;margin-top:14px}.download-actions button{border:1px solid #e1e6ed;border-radius:6px;padding:13px 10px;font-size:11px;font-weight:700;white-space:nowrap}.download-primary{color:white;background:#1e3659;border-color:#1e3659!important}.download-primary:hover{background:#314e72}.download-primary span{margin-left:13px}.download-secondary{background:white;color:#56657a}.download-secondary:hover{background:#f2f6fb}.status-note{min-height:18px;font-size:11px;margin-top:11px;color:#2d8056}.error-message{padding:11px 12px;border-radius:6px;background:#fff3f2;color:#9a3428;font-size:12px;line-height:1.7;margin-top:14px}.how-section{margin-top:114px;margin-bottom:94px}.how-lead{display:block}.how-lead h2{font-size:35px;line-height:1.25;font-weight:720;letter-spacing:-1.5px;margin:16px 0 0}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:52px}.steps article{border-top:1px solid #dce3ed;padding-top:24px}.steps article>span{font-size:11px;color:#8190a4;font-weight:700}.steps article h3{font-size:17px;letter-spacing:-.4px;margin:26px 0 10px}.steps article p{font-size:13px;color:#778397;line-height:1.8;max-width:275px;margin:0}.closing-line{border-top:1px solid #edf0f4;padding:28px 0 76px;display:flex;align-items:center;justify-content:space-between;gap:12px}.closing-line p{font-size:18px;font-weight:650;letter-spacing:-.6px}.closing-line a{font-size:12px;font-weight:730;color:#225baa}.closing-line a span{margin-left:10px}.site-footer{background:#f8fafc;border-top:1px solid #edf0f5}.footer-inner{padding:51px 0 54px;display:flex;justify-content:space-between;gap:30px}.footer-logo{font-weight:760;font-size:17px;letter-spacing:-.6px}.footer-inner p{color:#8b97a6;font-size:12px;margin:12px 0 0}.footer-inner .copyright{margin-top:30px;font-size:10px}.footer-links{display:flex;gap:25px;align-self:flex-start;font-size:12px;color:#647388;font-weight:570}.article{max-width:800px;margin-top:84px;margin-bottom:135px}.article h1{font-size:clamp(39px,5.5vw,62px);line-height:1.15;letter-spacing:-2.7px;margin:22px 0 24px}.article-intro{font-size:18px!important;line-height:1.75!important;color:#657489!important;margin-bottom:60px!important}.article-updated{font-size:12px!important;color:#9aa4b2!important;margin-top:-30px!important;margin-bottom:45px!important}.article h2{font-size:18px;letter-spacing:-.4px;margin:43px 0 13px}.article p{font-size:14px;color:#66748a;line-height:1.95;max-width:730px;margin:0}.article p+p{margin-top:16px}.article a:not(.article-cta){color:#265a9e;text-decoration:underline;text-underline-offset:3px}.article code{font-size:12px;background:#f2f5f9;padding:3px 5px;border-radius:3px}.article-cta{display:inline-block;margin-top:40px;background:#1e3659;color:white;padding:14px 20px;border-radius:6px;font-size:13px;font-weight:670}.admin-login-wrap{display:flex;align-items:center;justify-content:center;min-height:calc(100vh - 270px);padding-top:70px;padding-bottom:90px}.admin-login-card{width:min(440px,100%);border:1px solid var(--border);border-radius:10px;padding:38px 40px}.admin-login-card h1{font-size:29px;letter-spacing:-1px;margin:14px 0 9px}.admin-login-card>p{font-size:13px;color:#728096;line-height:1.65;margin:0 0 27px}.admin-login-card form{display:flex;flex-direction:column}.admin-login-card label{font-size:12px;font-weight:700;color:#4d5d74;margin-bottom:8px}.admin-login-card input{border:1px solid #dce4ed;border-radius:6px;padding:13px 12px;margin-bottom:19px;font-size:13px;width:100%}.full-button{background:#203b5e;color:white;border:0;border-radius:6px;padding:14px 15px;font-size:13px;font-weight:700;display:flex;justify-content:space-between}.form-error{font-size:12px;color:#b64036;background:#fff0ef;padding:11px;border-radius:5px;margin:-2px 0 15px}.subtle-link{display:inline-block;margin-top:25px;font-size:12px;color:#8290a1}.admin-dashboard{padding-top:70px;padding-bottom:100px}.admin-head{display:flex;justify-content:space-between;align-items:center;gap:18px}.admin-head h1{font-size:39px;letter-spacing:-1.7px;margin:14px 0 10px}.admin-head p{font-size:13px;color:#8290a2;margin:0}.admin-logout{font-size:12px;background:white;border:1px solid var(--border);border-radius:6px;padding:12px 15px}.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:33px 0 50px}.metric{border:1px solid var(--border);border-radius:8px;padding:25px;display:flex;flex-direction:column}.metric>span{font-size:12px;color:#7d8898}.metric strong{font-size:36px;letter-spacing:-1.6px;margin-top:13px}.metric small{margin-top:11px;font-size:11px;color:#9aa6b5}.admin-section-title{display:flex;justify-content:space-between;align-items:end;gap:15px}.admin-section-title h2{margin:0;font-size:19px;letter-spacing:-.55px}.admin-section-title p{font-size:12px;color:#8794a4;margin:8px 0 0;line-height:1.6}.popular-colors{display:flex;gap:12px;flex-wrap:wrap;margin-top:21px}.popular-item{display:flex;align-items:center;gap:9px;border:1px solid var(--border);padding:9px 13px 9px 9px;border-radius:6px}.popular-chip{width:24px;height:24px;border:1px solid #00000010;border-radius:4px}.popular-item code{font-size:11px;color:#526075}.empty-admin{font-size:12px;color:#98a3b2;margin-top:20px}.table-heading{margin-top:61px}.admin-export{border:1px solid #dfe7f0;border-radius:6px;padding:11px 15px;font-size:12px;font-weight:680;white-space:nowrap}.table-scroll{overflow-x:auto;margin-top:20px;border:1px solid var(--border);border-radius:8px}.admin-table{border-collapse:collapse;width:100%;min-width:760px;text-align:left}.admin-table th{font-size:10px;letter-spacing:.6px;text-transform:uppercase;color:#8a96a5;background:#f8fafc;font-weight:750;padding:17px 19px}.admin-table td{padding:16px 19px;border-top:1px solid #edf1f5;font-size:12px}.table-date{white-space:nowrap;color:#5f6f82}.table-swatches{display:flex;gap:3px}.table-swatches span{display:block;width:23px;height:23px;border-radius:3px;border:1px solid #00000010}.table-hex{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;color:#697688;line-height:1.7;min-width:190px;max-width:335px}.table-type{font-size:11px!important;color:#8b98aa;white-space:nowrap}.empty-table{text-align:center;padding:50px!important;color:#9ea9b6}.admin-pagination{display:flex;justify-content:flex-end;margin-top:15px}.pagination-links{display:flex;gap:18px;align-items:center;font-size:12px;color:#50667f}.pagination-links .inactive{color:#bcc3cc}.pagination-links a{color:#2264b1}.danger-zone{border-top:1px solid var(--border);margin-top:70px;padding-top:25px;display:flex;justify-content:space-between;align-items:center;gap:20px}.danger-zone h3{font-size:15px;margin:0 0 9px}.danger-zone p{font-size:12px;color:#8694a6;margin:0;line-height:1.7}.danger-zone button{background:white;border:1px solid #eacac8;color:#a94b43;border-radius:6px;padding:11px 15px;font-size:12px;font-weight:700;white-space:nowrap}.admin-flash{color:#206b46;background:#ebf9f0;padding:14px;border-radius:5px;font-size:12px;margin-top:24px}
@media(max-width:900px){.container{width:min(100% - 40px,1152px)}.studio{grid-template-columns:1fr}.studio-image-area{border-right:0;border-bottom:1px solid var(--border)}.dropzone{min-height:370px}.studio-results{padding:29px}.hero{padding:65px 10px 54px}.hero h1{letter-spacing:-2.5px}.how-section{margin-top:80px}.steps{gap:20px}.header-nav{margin-left:auto;margin-right:0}.header-action{display:none}}
@media(max-width:600px){.container{width:calc(100% - 32px)}.site-header{height:69px}.header-nav{gap:18px;font-size:12px}.brand{gap:9px}.brand-name{font-size:17px}.brand-mark{grid-template-columns:repeat(2,8px);grid-template-rows:repeat(2,8px);gap:2px}.hero{padding:65px 1px 47px}.hero h1{font-size:clamp(37px,10vw,52px);letter-spacing:-2px;margin:23px 0 18px}.hero>p{font-size:14px;line-height:1.8}.hero-points{gap:12px 18px;font-size:11px;margin-top:24px}.studio-topline h2{font-size:22px}.studio-indicator{font-size:10px;padding:7px 9px}.studio{border-radius:9px}.studio-image-area{padding:12px}.dropzone{min-height:340px}.dropzone-empty{padding:19px}.upload-symbol{width:58px;height:58px;margin-bottom:18px}.dropzone-empty strong{font-size:17px}.dropzone-empty p{font-size:12px;margin:10px auto 19px}.privacy-hint{padding-top:13px;font-size:10px}.studio-results{padding:25px 18px 23px}.results-heading h3{font-size:20px}.count-control{margin-top:22px}.palette-strip{height:76px}.color-row{gap:10px}.color-swatch{width:30px;height:30px}.color-rgb{font-size:10px}.color-code{font-size:11px}.color-index{font-size:10px}.download-actions{grid-template-columns:repeat(3,minmax(0,1fr))}.download-primary{grid-column:1/-1}.download-actions button{font-size:12px}.how-section{margin-top:81px;margin-bottom:70px}.how-lead h2{font-size:29px;letter-spacing:-1.2px}.steps{grid-template-columns:1fr;gap:27px;margin-top:38px}.steps article{padding-top:18px}.steps article h3{margin:12px 0 8px}.steps article p{max-width:450px}.closing-line{padding-bottom:54px}.closing-line p{font-size:15px}.closing-line a{font-size:11px}.footer-inner{padding:40px 0;display:block}.footer-links{margin-top:29px;flex-wrap:wrap;gap:17px}.footer-inner .copyright{line-height:1.8}.article{margin-top:61px;margin-bottom:84px}.article h1{letter-spacing:-1.8px}.article-intro{font-size:16px!important;margin-bottom:45px!important}.admin-login-card{padding:28px 22px}.admin-dashboard{padding-top:50px}.admin-head h1{font-size:30px}.admin-head p{line-height:1.7}.metrics{grid-template-columns:1fr;gap:10px;margin-bottom:40px}.metric{padding:20px}.metric strong{font-size:30px;margin-top:6px}.metric small{margin-top:6px}.table-heading{align-items:flex-start}.admin-export{font-size:10px;padding:9px 10px}.danger-zone{align-items:flex-start;flex-direction:column}.popular-item{padding:7px 10px 7px 7px}.popular-colors{gap:8px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}