@import "https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap";:root{color:#20221f;font-synthesis:none;--ink:#20221f;--paper:#f4f0e6;--blue:#315ee8;--acid:#d8f25a;--line:#20221f38;background:#f4f0e6;font-family:Manrope,sans-serif}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0}button,input{font:inherit}button{color:inherit}main{min-height:100vh;padding:0 clamp(20px,5vw,76px) 34px;overflow:hidden}.masthead{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;height:86px;display:flex}.brand{color:var(--ink);letter-spacing:-.03em;align-items:center;gap:12px;font-size:17px;font-weight:800;text-decoration:none;display:flex}.brand-mark{background:var(--ink);border-radius:50%;align-items:flex-end;gap:2px;width:30px;height:30px;padding:5px;display:flex;transform:rotate(-12deg)}.brand-mark i{background:var(--acid);border-radius:3px 3px 1px 1px;flex:1;display:block}.brand-mark i:first-child{height:45%}.brand-mark i:nth-child(2){height:85%}.brand-mark i:nth-child(3){height:65%}.privacy-note{text-transform:uppercase;letter-spacing:.06em;font:500 11px/1 DM Mono,monospace}.hero{padding:clamp(56px,8vw,105px) 0 50px;position:relative}.hero:after{content:"";pointer-events:none;border:1px solid #315ee840;border-radius:50%;width:260px;height:260px;position:absolute;top:34px;right:-80px;box-shadow:0 0 0 54px #315ee80f,0 0 0 108px #315ee809}.eyebrow{letter-spacing:.08em;text-transform:uppercase;align-items:center;gap:9px;margin-bottom:22px;font:500 11px/1 DM Mono,monospace;display:flex}.eyebrow span{background:var(--blue);border-radius:50%;width:7px;height:7px;box-shadow:0 0 0 4px #315ee824}h1{z-index:1;letter-spacing:-.075em;max-width:850px;margin:0;font-size:clamp(48px,7.4vw,104px);font-weight:800;line-height:.91;position:relative}.lede{color:#5d5e58;max-width:620px;margin:32px 0 0;font-size:clamp(16px,1.6vw,20px);line-height:1.55}.workspace{border:1px solid var(--ink);box-shadow:9px 9px 0 var(--ink);background:#ffffff42;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);display:grid}.input-panel,.output-panel{min-height:500px;padding:clamp(25px,3vw,42px)}.input-panel{border-right:1px solid var(--ink)}.output-panel{flex-direction:column;display:flex}.step-heading{align-items:flex-start;gap:18px;margin-bottom:30px;display:flex}.step-heading>span{background:var(--ink);width:34px;height:34px;color:var(--paper);border-radius:50%;flex:none;place-items:center;font:500 12px DM Mono,monospace;display:grid}.step-heading h2{letter-spacing:-.04em;margin:0 0 4px;font-size:22px}.step-heading p{color:#77766e;margin:0;font-size:13px}.drop-zone{cursor:pointer;background:0 0;border:1px dashed #77766e;flex-direction:column;justify-content:center;align-items:center;gap:8px;width:100%;min-height:270px;transition:all .18s;display:flex}.drop-zone:hover,.drop-zone.is-dragging{border-color:var(--blue);background:#315ee80e;transform:translateY(-2px)}.upload-icon{background:var(--blue);color:#fff;border-radius:50%;place-items:center;width:54px;height:54px;margin-bottom:10px;font-size:26px;display:grid}.drop-zone strong{text-overflow:ellipsis;max-width:85%;font-size:16px;overflow:hidden}.drop-zone>span:last-child{color:#77766e;font-size:12px}.input-mode{border:1px solid var(--line);grid-template-columns:1fr 1fr;gap:4px;margin:-12px 0 18px;padding:4px;display:grid}.input-mode button{cursor:pointer;background:0 0;border:0;padding:10px 8px;font-size:12px;font-weight:700}.input-mode button.is-active{background:var(--ink);color:var(--paper)}.input-mode button:focus-visible,.add-color-button:focus-visible,.remove-color:focus-visible{outline:2px solid var(--blue);outline-offset:2px}.manual-color-list{flex-direction:column;gap:10px;max-height:330px;padding:1px 4px 1px 1px;display:flex;overflow:auto}.manual-color{border:1px solid var(--line);background:#ffffff40;padding:10px}.manual-color-fields{grid-template-columns:42px minmax(80px,.72fr) minmax(90px,1fr) 24px;align-items:end;gap:8px;display:grid}.color-picker-label,.manual-field{color:#77766e;text-transform:uppercase;letter-spacing:.04em;flex-direction:column;gap:5px;font:500 9px DM Mono,monospace;display:flex}.color-picker-label input{border:1px solid var(--line);background:var(--paper);cursor:pointer;width:38px;height:34px;padding:2px}.manual-field input{border:1px solid var(--line);width:100%;min-width:0;height:34px;color:var(--ink);text-transform:none;letter-spacing:normal;background:#fff9;border-radius:0;padding:0 7px;font:11px DM Mono,monospace}.manual-field input[aria-invalid=true]{border-color:#c63730}.remove-color{color:#77766e;cursor:pointer;background:0 0;border:0;width:24px;height:34px;padding:0;font-size:20px}.remove-color:hover{color:#c63730}.field-error{color:#9a2823;margin:6px 0 0;font:10px/1.4 DM Mono,monospace;display:block}.add-color-button{width:100%;color:var(--ink);cursor:pointer;background:0 0;border:1px dashed #77766e;margin-top:10px;padding:12px;font-size:12px;font-weight:700}.add-color-button:hover{border-color:var(--blue);color:var(--blue)}.empty-colors-error{margin-top:10px}.sample-button{border:0;border-bottom:1px solid var(--line);cursor:pointer;background:0 0;justify-content:space-between;width:100%;margin-top:15px;padding:15px 0;font-size:13px;font-weight:700;display:flex}.sample-button:hover{color:var(--blue)}.error{color:#7d201d;background:#f8ded7;border-left:3px solid #c63730;padding:12px 14px;font-size:13px}.empty-state{text-align:center;color:#797970;flex-direction:column;flex:1;justify-content:center;align-items:center;display:flex}.empty-state strong{color:var(--ink);font-size:17px}.empty-state p{max-width:360px;font-size:13px;line-height:1.55}.empty-swatches{margin-bottom:24px;display:flex}.empty-swatches i{transform-origin:50% 100%;background:#ffffff47;border:1px solid #aaa89f;width:48px;height:64px}.empty-swatches i:first-child{transform:rotate(-18deg)translate(12px,4px)}.empty-swatches i:nth-child(2){transform:rotate(-6deg)}.empty-swatches i:nth-child(3){transform:rotate(6deg)}.empty-swatches i:nth-child(4){transform:rotate(18deg)translate(-12px,4px)}.palette-summary{border-top:1px solid var(--line);justify-content:space-between;align-items:end;padding:16px 0 20px;display:flex}.palette-summary div{align-items:baseline;gap:10px;display:flex}.palette-summary strong{letter-spacing:-.06em;font-size:34px}.palette-summary span{font-size:12px;font-weight:700}.palette-summary p{color:#77766e;text-align:right;margin:0;font:400 10px/1.4 DM Mono,monospace}.swatch-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;max-height:270px;padding-right:5px;display:grid;overflow:auto}.swatch{border:1px solid var(--line);background:#ffffff59;grid-template-columns:46px minmax(0,1fr);min-width:0;display:grid}.swatch>span{border-right:1px solid var(--line);min-height:48px}.swatch div{min-width:0;padding:8px 10px}.swatch strong,.swatch code{text-overflow:ellipsis;white-space:nowrap;display:block;overflow:hidden}.swatch strong{font-size:11px}.swatch code{color:#77766e;text-transform:uppercase;margin-top:4px;font:400 10px DM Mono,monospace}.download-button{border:1px solid var(--ink);background:var(--acid);cursor:pointer;width:100%;box-shadow:4px 4px 0 var(--ink);justify-content:space-between;align-items:center;margin-top:auto;padding:18px 20px;font-weight:800;transition:all .15s;display:flex}.download-button:hover:not(:disabled){box-shadow:2px 2px 0 var(--ink);transform:translate(2px,2px)}.download-button:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}.download-button span{font-size:20px}footer{text-transform:uppercase;letter-spacing:.06em;flex-direction:column;align-items:center;gap:10px;padding:42px 0 8px;font:500 10px DM Mono,monospace;display:flex}footer p{align-items:center;gap:8px;display:flex}footer p span{color:var(--blue)}footer b{color:#aaa89f}.footer-steps{justify-content:center;align-items:center;gap:clamp(14px,3vw,42px);display:flex}.footer-reference a,.footer-author a{color:inherit;text-underline-offset:3px;text-decoration:underline}.footer-reference a:hover,.footer-author a:hover{color:var(--blue)}.visually-hidden{clip:rect(0,0,0,0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}@media (width<=800px){main{padding-inline:16px}.privacy-note{display:none}.hero{padding-top:55px}.workspace{box-shadow:6px 6px 0 var(--ink);grid-template-columns:1fr}.input-panel{border-right:0;border-bottom:1px solid var(--ink)}.input-panel,.output-panel{min-height:auto}.output-panel{min-height:470px}.footer-steps{flex-wrap:wrap;gap:8px 18px}}@media (width<=480px){.swatch-grid{grid-template-columns:1fr}.palette-summary{flex-direction:column;align-items:flex-start}.palette-summary p{text-align:left}}@media (width<=380px){.manual-color-fields{grid-template-columns:38px minmax(74px,.8fr) minmax(80px,1fr) 22px;gap:5px}.manual-color{padding:8px}.manual-field input{padding-inline:5px;font-size:10px}}