@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}.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{box-shadow:2px 2px 0 var(--ink);transform:translate(2px,2px)}.download-button span{font-size:20px}footer{text-transform:uppercase;letter-spacing:.06em;justify-content:center;align-items:center;gap:clamp(14px,3vw,42px);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}.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{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}}