:root{--paper:#f6f4ee;--ink:#20211f;--muted:#75756f;--line:#d9d7cf;--red:#e85d75;--cyan:#19afbe;--magenta:#d3448e;--yellow:#f1c71b;--black:#242529}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"DM Sans",sans-serif}
.app-shell{max-width:1280px;margin:auto;padding:28px 46px 42px}
header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:23px}
.brand{color:var(--ink);text-decoration:none;font-family:"DM Mono",monospace;font-size:13px;letter-spacing:-.4px}
.brand-mark{display:inline-block;width:13px;height:13px;margin-right:8px;background:conic-gradient(from 40deg,var(--cyan),var(--magenta),var(--yellow),var(--cyan));border-radius:50%;vertical-align:-2px}
.eyebrow,.kicker{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:1.3px;color:var(--muted);margin:0}
.help-button{border:0;background:none;font:500 12px "DM Sans";color:var(--ink);cursor:pointer;padding:5px}
.help-button span{padding-left:4px}
.hero{padding:84px 0 70px;max-width:690px}
.hero .kicker{margin-bottom:17px}
.hero h1{font:400 clamp(70px,10vw,126px)/.81 "Instrument Serif",serif;letter-spacing:-4px;margin:0}
.hero h1 em{color:var(--red)}
.intro{font-size:15px;line-height:1.55;max-width:420px;margin:29px 0 0;color:#555650}
.converter{display:grid;grid-template-columns:1fr 65px 1fr;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);min-height:486px}
.input-panel,.output-panel{padding:24px 27px 26px}
.input-panel{border-right:1px solid var(--line)}
.output-panel{border-left:1px solid var(--line);background:#f0eee7}
.panel-topline{font:10px "DM Mono";letter-spacing:.9px;color:var(--muted);display:flex;justify-content:space-between}
.live-dot{color:#52836a}
.live-dot:before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:#52836a;margin-right:6px;vertical-align:1px}
.converter h2{font:400 31px "Instrument Serif";margin:19px 0 18px;letter-spacing:-.6px}
.swatch{height:103px;background:var(--red);padding:15px 17px;display:flex;align-items:flex-end;justify-content:space-between;color:white;font:500 18px "DM Mono";letter-spacing:-.7px}
.swatch button{border:1px solid rgba(255,255,255,.6);background:transparent;color:#fff;border-radius:50%;width:30px;height:30px;font-size:18px;line-height:20px;cursor:pointer}
.channels{margin-top:24px}
.channel{display:grid;grid-template-columns:18px 1fr 38px;gap:12px;align-items:center;margin:14px 0}
.channel label{font:500 11px "DM Mono"}
.channel output{font:12px "DM Mono";text-align:right}
input[type=range]{width:100%;height:4px;appearance:none;background:linear-gradient(to right,var(--channel) 0%,var(--channel) var(--fill),#d4d1c8 var(--fill),#d4d1c8 100%);border-radius:10px;outline:none}
input[type=range]::-webkit-slider-thumb{appearance:none;width:14px;height:14px;border:2px solid var(--paper);border-radius:50%;background:var(--channel);box-shadow:0 0 0 1px rgba(0,0,0,.15);cursor:pointer}
.hex-row{display:flex;align-items:center;gap:18px;border-top:1px solid var(--line);margin-top:22px;padding-top:17px}
.hex-row label{font:11px "DM Mono";color:var(--muted)}
.hex-row input{background:transparent;border:0;outline:0;font:500 15px "DM Mono";color:var(--ink);width:110px;text-transform:uppercase}
.transition{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:13px}
.transition span:last-child{font:9px "DM Mono";color:var(--muted);writing-mode:vertical-rl;letter-spacing:1.5px}
.arrow-line{width:1px;height:70px;background:var(--ink);position:relative}
.arrow-line:after{content:"";width:7px;height:7px;position:absolute;bottom:0;left:-3px;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);transform:rotate(45deg)}
.cmyk-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ink-card{min-height:104px;padding:13px 14px;display:flex;flex-direction:column;justify-content:space-between;color:white}
.ink-card .ink-label{font:11px "DM Mono";letter-spacing:.7px}
.ink-card strong{font:400 38px/.85 "Instrument Serif";letter-spacing:-1px}
.ink-card small{font:10px "DM Mono"}
.formula-note{font-size:11px;line-height:1.45;color:#74746e;margin:18px 0}
.info-dot{display:inline-flex;justify-content:center;align-items:center;border:1px solid #9d9c94;border-radius:50%;width:13px;height:13px;font:9px serif;margin-right:4px}
.copy-button{width:100%;border:1px solid var(--ink);background:transparent;padding:13px 15px;display:flex;justify-content:space-between;color:var(--ink);font:500 12px "DM Sans";cursor:pointer;transition:.2s}
.copy-button:hover{background:var(--ink);color:var(--paper)}
.copy-button b{font:10px "DM Mono"}
.footer-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;padding-top:42px;max-width:860px}
.footer-copy{max-width:395px;font:400 24px/1.1 "Instrument Serif";letter-spacing:-.4px;margin:13px 0}
.tip{display:flex;gap:15px;border-left:1px solid var(--line);padding-left:22px;margin-top:22px}
.tip-icon{color:var(--red)}
.tip p{font-size:12px;line-height:1.55;margin:0;color:#666760}
.tip strong{color:var(--ink)}
dialog{width:min(460px,calc(100% - 32px));border:1px solid var(--ink);background:var(--paper);padding:34px;box-shadow:8px 8px 0 var(--red)}
dialog::backdrop{background:rgba(25,25,24,.4)}
dialog h2{font:400 38px "Instrument Serif";margin:11px 0}
dialog p:not(.kicker){font-size:14px;line-height:1.55;color:#565751}
.dialog-close{position:absolute;right:13px;top:8px;border:0;background:none;font-size:28px;cursor:pointer}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,100px);background:var(--ink);color:white;padding:11px 16px;font-size:12px;transition:.25s}
.toast.show{transform:translate(-50%,0)}
@media(max-width:680px){.app-shell{padding:20px}
.eyebrow{display:none}
.hero{padding:62px 0 48px}
.hero h1{font-size:82px}
.converter{grid-template-columns:1fr}
.input-panel,.output-panel{border:0}
.transition{height:52px;flex-direction:row}
.transition span:last-child{writing-mode:initial}
.arrow-line{width:70px;height:1px}
.arrow-line:after{bottom:-3px;left:auto;right:0;transform:rotate(-45deg)}
.footer-grid{grid-template-columns:1fr;gap:0}
.tip{margin-top:5px}
.ink-card{min-height:92px}
}
@media(max-width:380px){.hero h1{font-size:67px}
.input-panel,.output-panel{padding-left:18px;padding-right:18px}
}
.image-studio{padding:80px 0 14px}.studio-heading{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:24px}.studio-heading h2{font:400 43px/.95 "Instrument Serif";letter-spacing:-1.1px;margin:11px 0 0}.studio-heading>p{width:300px;margin:0;color:#666760;font-size:13px;line-height:1.5}.image-workspace{border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}.upload-dropzone{min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px dashed #aaa79d;margin:18px;cursor:pointer;transition:.2s}.upload-dropzone:hover,.upload-dropzone.dragover{border-color:var(--red);background:#f1eee7}.upload-dropzone input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.upload-plus{font:400 48px/1 "Instrument Serif";color:var(--red);margin-bottom:8px}.upload-dropzone strong{font:400 25px "Instrument Serif"}.upload-dropzone small{font:10px "DM Mono";color:var(--muted);margin-top:8px}.image-result{padding:19px}.image-canvases{display:grid;grid-template-columns:1fr 1fr;gap:16px}.image-canvases figure{margin:0;background:#e5e3db;min-width:0}.image-canvases canvas{display:block;width:100%;height:330px;object-fit:contain;background:repeating-conic-gradient(#eee 0 25%,#e4e2dc 0 50%) 50%/16px 16px}.image-canvases figcaption{font:10px "DM Mono";letter-spacing:.6px;padding:10px;color:var(--muted);background:var(--paper)}.image-actions{border-top:1px solid var(--line);margin-top:16px;padding-top:16px;display:grid;grid-template-columns:1fr 1.3fr auto;gap:20px;align-items:center}.image-actions p{font-size:11px;line-height:1.45;color:#74746e;margin:0}.average-inks{display:flex;gap:6px}.average-inks span{font:10px "DM Mono";padding:5px 7px;color:#fff}.secondary-button,.download-button{font:500 11px "DM Sans";padding:11px 13px;cursor:pointer}.secondary-button{border:1px solid var(--ink);background:transparent;margin-right:7px}.download-button{border:1px solid var(--ink);background:var(--ink);color:var(--paper)}
@media(max-width:680px){.image-studio{padding-top:56px}.studio-heading{display:block}.studio-heading>p{width:auto;margin-top:15px}.image-canvases{grid-template-columns:1fr}.image-canvases canvas{height:245px}.image-actions{grid-template-columns:1fr;gap:14px}.image-actions>div:last-child{display:flex}.secondary-button,.download-button{flex:1}.footer-grid{padding-top:55px}}