:root{color-scheme:light;--paper:#fbf8f3;--ink:#33273e;--muted:#796d7e;--pink:#f5dce9;--blue:#d6edfa;--line:#e4dde4;--accent:#ac487c}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:"Trebuchet MS",Arial,sans-serif;font-size:14px;line-height:1.5}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.19;background-image:radial-gradient(#ab98a9 .6px,transparent .6px);background-size:14px 14px}
button,input,select{font:inherit}button,a,label,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:wait;opacity:.55}a{color:inherit}button:focus-visible,a:focus-visible,label:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--accent);outline-offset:4px}button{color:inherit}input,select{accent-color:var(--accent)}
[hidden]{display:none!important}.page{position:relative;max-width:1360px;margin:auto;padding:25px 5vw 22px}.site-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:24px;border-bottom:1px solid var(--line);gap:20px}
.brand{text-decoration:none;font-size:25px;font-weight:900;letter-spacing:-1.5px;white-space:nowrap}.brand>span{color:var(--accent);margin-left:2px}.brand small{font-size:12px;font-weight:400;letter-spacing:0;margin-left:13px;color:var(--muted);border-left:1px solid var(--line);padding-left:12px}
nav{display:flex;gap:26px;font-size:13px}nav a{text-decoration:none}nav a:hover{text-decoration:underline;text-underline-offset:4px}
.intro{display:flex;align-items:flex-end;justify-content:space-between;gap:25px;padding:39px 0 32px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}h1{font-size:clamp(42px,4.4vw,65px);line-height:1.04;letter-spacing:-.06em;margin:0;font-weight:900}h1 span{background:linear-gradient(transparent 65%,var(--blue) 65%,var(--blue) 91%,transparent 91%)}
.intro-note{padding-bottom:3px;min-width:225px}.intro-note p{color:var(--muted);font-size:14px;line-height:1.7;margin:12px 0 0}.privacy{display:inline-flex;align-items:center;gap:7px;background:#edf1e9;border-radius:20px;padding:5px 10px;font-size:10px}.privacy i{width:6px;height:6px;border-radius:50%;background:#628469}
.editor{display:grid;grid-template-columns:276px minmax(0,1fr);border:1px solid var(--ink);background:#fffefa;box-shadow:5px 5px 0 #e6dfdf;border-radius:5px;overflow:hidden}.controls{padding:23px;border-right:1px solid var(--line);background:#faf7f2}.section-label{display:flex;justify-content:space-between;align-items:center;text-transform:uppercase;font-size:10px;letter-spacing:.1em;font-weight:700;gap:12px}
.drop-zone{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:126px;margin-top:14px;border:1px dashed #baa3b4;border-radius:4px;background:#fffefa;cursor:pointer;transition:background .15s,border-color .15s}.drop-zone:hover,.drop-zone.dragging{background:var(--pink);border-color:var(--accent)}.drop-zone strong{font-size:14px}.drop-zone>span:last-child{color:var(--muted);font-size:10px;margin-top:3px}.upload-icon{font-size:25px;line-height:1.2;color:var(--accent);margin-bottom:5px}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}#file:focus-visible+.drop-zone{outline:3px solid var(--accent);outline-offset:4px}.fine{font-size:10px;color:var(--muted);line-height:1.6}.text-button{padding:0;background:none;border:0;text-decoration:underline;text-underline-offset:4px;font-size:11px}.divider{height:1px;background:var(--line);margin:22px 0}
.modes{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:14px 0 23px}.mode{font-size:11px;white-space:nowrap;padding:11px 5px;border:1px solid var(--line);background:white;border-radius:4px}.mode>span{font-size:15px}.mode.selected{background:var(--pink);border-color:var(--ink);box-shadow:2px 2px 0 var(--ink)}
.field-heading,.select-row{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:11px}.field-heading output{font-family:monospace;font-size:11px;color:var(--accent)}input[type=range]{width:100%;margin:13px 0 2px}.range-labels{display:flex;justify-content:space-between;font-size:8px;color:var(--muted)}.select-row{margin-top:20px}.select-row select{border:1px solid var(--line);background:white;border-radius:4px;padding:5px 7px;font-size:11px;min-width:57px}.check{display:flex;align-items:flex-start;gap:8px;cursor:pointer;font-size:11px;margin-top:18px}.check input{margin:3px 0 0}.check small{display:block;font-size:9px;color:var(--muted);margin-top:2px}.effect-note{font-size:12px;line-height:1.8;color:var(--muted)}
.workspace{min-width:0;padding:23px 25px 20px;display:flex;flex-direction:column}.workspace-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:18px}.file-name{font-size:10px;color:var(--muted);text-overflow:ellipsis;overflow:hidden;white-space:nowrap;max-width:48%}
.comparison{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}.preview-card{margin:0;min-width:0;border:1px solid var(--line);border-radius:4px;overflow:hidden}.preview-card figcaption{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 12px;background:#fffefa;font-size:11px;font-weight:700;flex-wrap:wrap}.meta{color:var(--muted);font:9px monospace;font-weight:400}.result-card{border-color:#c8afbf}.result-card figcaption{background:#faedf4}
.canvas-frame{aspect-ratio:3/2;display:flex;align-items:center;justify-content:center;background-color:#eee9e8;background-image:linear-gradient(45deg,#e3dedd 25%,transparent 25%),linear-gradient(-45deg,#e3dedd 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e3dedd 75%),linear-gradient(-45deg,transparent 75%,#e3dedd 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0;overflow:hidden}.canvas-frame canvas{display:block;width:100%;height:100%;object-fit:contain;min-width:0}.result-card canvas.pixelated{image-rendering:pixelated}
.result-details{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:19px 0;min-height:92px}.palette{display:flex;flex-wrap:wrap;gap:3px;margin-top:7px;max-width:330px}.swatch{height:17px;width:17px;border:1px solid #00000012;border-radius:3px}.hand-note{color:var(--accent);font-size:11px;line-height:1.3;font-style:italic;transform:rotate(-5deg);white-space:nowrap;margin-right:7px}.export-bar{margin-top:auto;padding-top:19px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:18px}.export-bar p{font-size:11px;font-weight:700;margin:0 0 2px;max-width:420px}.export-bar p.error{color:#ae334d}.download{display:flex;align-items:center;justify-content:space-between;gap:30px;white-space:nowrap;background:var(--ink);color:white;border:1px solid var(--ink);padding:13px 18px;border-radius:4px;font-weight:700;font-size:12px;box-shadow:3px 3px 0 var(--pink)}.download:hover:not(:disabled){background:#513c5e}.download>span{font-size:20px;line-height:1}.under-editor{text-align:center;font-size:10px;color:var(--muted);margin:21px 0 35px}.under-editor>span{color:var(--accent);margin-right:5px}footer{border-top:1px solid var(--line);padding-top:18px;display:flex;justify-content:space-between;gap:16px;font-size:10px;color:var(--muted)}footer a{text-decoration:none}.error{color:#ae334d}
.about-main{min-height:75svh;display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;padding:65px 0}.about-copy>p{max-width:420px;color:var(--muted);font-size:16px;line-height:1.8}.about-mark{font-size:clamp(120px,25vw,300px);line-height:1;text-align:center;color:var(--accent);background:var(--pink);border:1px solid var(--ink);border-radius:47% 53% 42% 58%;transform:rotate(-6deg);box-shadow:8px 8px 0 var(--blue);padding:30px}.about-links{display:flex;gap:12px;flex-wrap:wrap;margin-top:27px}.about-links a{border:1px solid var(--ink);border-radius:4px;padding:11px 16px;text-decoration:none;font-size:13px;background:var(--blue)}
@media(max-width:1000px){.page{padding:22px 4vw}.editor{grid-template-columns:245px minmax(0,1fr)}.controls{padding:18px}.workspace{padding:18px}.comparison{gap:10px}.hand-note{display:none}.export-bar{align-items:flex-start;flex-direction:column;gap:12px}.download{align-self:flex-end}}
@media(max-width:730px){.site-header{padding-bottom:18px}nav{gap:16px;font-size:11px}.brand{font-size:23px}.brand small{margin-left:9px;padding-left:9px}.intro{padding:31px 0 25px}.intro-note{min-width:0}.intro-note p{display:none}.privacy{font-size:9px;padding:5px 8px}.eyebrow{font-size:8px;letter-spacing:.07em}.editor{grid-template-columns:1fr}.controls{border-right:0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:0 22px}.controls>.section-label:first-child{grid-column:1}.drop-zone{grid-column:1;grid-row:2 / span 2;margin-top:9px;min-height:111px}.controls>#formats{grid-column:1;grid-row:4}.controls>#sample{grid-column:1;justify-self:start;align-self:start}.controls>.divider{display:none}.controls>.section-label:nth-of-type(3){grid-column:2;grid-row:1}.controls>.modes{grid-column:2;grid-row:2;margin:9px 0 15px;align-self:start}.controls>#pixel-settings{grid-column:2;grid-row:3 / span 3}.controls>#negative-note{grid-column:2;grid-row:3 / span 3}.controls>#upload-note{grid-column:1 / -1;margin-bottom:0}.field-heading,.select-row{font-size:10px}.range-labels{font-size:7px}.select-row{margin-top:12px}.check{margin-top:12px}.workspace{padding:19px 16px}.export-bar{flex-direction:row;align-items:center}.download{align-self:center;gap:16px;padding:11px 13px}.about-main{grid-template-columns:1fr;gap:45px;padding:45px 0}.about-mark{max-width:280px;justify-self:center;width:100%;grid-row:1;font-size:150px}}
@media(max-width:440px){.page{padding:18px 18px}.intro{display:block}.intro-note{margin-top:17px}.privacy{font-size:10px}.controls{padding:16px;gap:0 15px}.comparison{grid-template-columns:1fr}.canvas-frame{aspect-ratio:3/2}.workspace-heading{gap:8px}.workspace-heading .section-label{font-size:9px}.file-name{font-size:9px}.export-bar{align-items:flex-start;flex-direction:column}.download{width:100%;align-self:stretch}.modes{grid-template-columns:1fr;gap:5px}.mode{padding:7px 4px}.controls>#pixel-settings{grid-row:3 / span 4}.controls>#formats{grid-row:4}.controls>#sample{grid-row:5}.hand-note{display:block;font-size:10px}footer{font-size:9px}.under-editor{line-height:1.7;margin:19px 8px 28px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

.server-mode{grid-column:1 / -1}.server-mode small{font-size:9px;color:var(--muted);margin-left:5px}.server-submit{width:100%;background:var(--blue);border:1px solid var(--ink);border-radius:4px;padding:11px 8px;font-size:11px;font-weight:700}.server-submit:hover:not(:disabled){background:#bdddF0}.canvas-frame canvas.awaiting{opacity:.4}
@media(max-width:730px){.controls>#server-settings{grid-column:2;grid-row:3 / span 4}.server-submit{font-size:10px;padding:9px 5px}}