:root{--paper:#f3f1eb;--ink:#161513;--dim:#6d6a63;--desk:#d9d6cf;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;color:var(--ink);background:var(--desk);font-size:13px;line-height:1.6;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;padding:32px}button,input,select{font:inherit;color:inherit}button,select{cursor:pointer}button{border:1px solid var(--ink);border-radius:0;background:transparent;padding:10px 12px}button:disabled{cursor:wait;opacity:.45}button:hover:enabled{background:var(--desk)}:focus-visible{outline:2px solid var(--ink);outline-offset:4px}input{accent-color:var(--ink)}h1,h2,p,figure{margin:0}h2{font-size:13px;font-weight:700;margin-bottom:18px}p{max-width:75ch}.sheet{max-width:1600px;margin:0 auto;padding:26px 32px 20px;background:var(--paper);min-height:calc(100vh - 64px)}.mast{display:flex;justify-content:space-between;gap:16px;padding-bottom:12px;border-bottom:1px dotted var(--dim);font-size:12px}.mast span:last-child{color:var(--dim)}.intro{display:flex;justify-content:space-between;align-items:end;gap:24px;margin:30px 0 32px}.intro h1{font-size:clamp(28px,3.5vw,48px);line-height:1.15;letter-spacing:-.055em;font-weight:400}.intro p{font-size:12px;color:var(--dim);text-align:right}.workspace{display:grid;grid-template-columns:248px minmax(0,1fr);gap:32px;border-top:3px double var(--ink)}aside{border-right:1px solid var(--dim);padding:22px 24px 0 0}aside section+section{border-top:1px dotted var(--dim);margin-top:24px;padding-top:21px}.primary{width:100%;background:var(--ink);color:var(--paper);font-weight:700;font-size:12px}.primary:hover:enabled{background:var(--dim)}.hint{color:var(--dim);font-size:11px;line-height:1.6;margin-top:10px}.file-name{font-size:11px;margin-top:14px;overflow-wrap:anywhere}.text-button{border:0;border-bottom:1px solid var(--dim);padding:0;font-size:11px;margin-top:8px;line-height:1.6}.text-button:hover:enabled{background:var(--ink);color:var(--paper)}fieldset{border:0;padding:0;margin:0;min-width:0}.control+.control{margin-top:17px}.control label{display:flex;justify-content:space-between;font-size:12px}.control output{color:var(--dim)}input[type=range]{width:100%;margin:8px 0 0;display:block;height:16px;cursor:pointer}.check{display:flex;align-items:center;gap:8px;font-size:11px}.check input{margin:0;width:14px;height:14px}fieldset>.check{margin-top:18px}.palette{display:grid;gap:8px;margin-bottom:20px;font-size:11px}.palette>span{display:flex;align-items:center;gap:8px}.palette code{margin-left:auto;font:inherit;color:var(--dim)}.swatch{display:inline-block;width:16px;height:16px;border:1px solid var(--ink)}.ink{background:var(--ink)}.paper{background:var(--paper)}.preview{padding-top:22px;min-width:0}.preview-toolbar{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:21px;font-size:11px}.preview-toolbar p{color:var(--dim);overflow-wrap:anywhere}.images{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}figure{min-width:0}figcaption{display:flex;align-items:center;justify-content:space-between;font-size:11px;min-height:32px;border-top:1px solid var(--ink)}figcaption>span:last-child{color:var(--dim);font-size:10px}select{border:0;background:transparent;font-size:11px;padding:0 18px 0 0;border-radius:0;max-width:85%}.canvas-wrap{display:flex;align-items:center;justify-content:center;min-height:200px;height:clamp(280px,40vw,660px);overflow:auto;background:var(--desk)}canvas{display:block;max-width:100%;max-height:100%;object-fit:contain}#result{image-rendering:pixelated}.actual-size .canvas-wrap{display:block}.actual-size canvas{max-width:none;max-height:none;object-fit:unset}.preview-foot{display:flex;justify-content:space-between;gap:15px;font-size:10px;padding-top:12px;color:var(--dim)}.preview-note{color:var(--dim);font-size:11px;margin-top:42px}.error{border:1px solid var(--ink);padding:12px;margin-top:20px;font-size:12px}.input-section.dragging{outline:2px dashed var(--ink);outline-offset:10px}footer{border-top:1px dotted var(--dim);display:flex;justify-content:space-between;gap:16px;font-size:10px;color:var(--dim);margin-top:32px;padding-top:12px}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}::selection{background:var(--ink);color:var(--paper)}
@media(min-width:1600px){.preview{padding-top:22px}.canvas-wrap{height:660px}}
@media(max-width:1100px){body{padding:20px}.sheet{padding:22px;min-height:calc(100vh - 40px)}.workspace{grid-template-columns:220px minmax(0,1fr);gap:22px}aside{padding-right:20px}.images{gap:12px}.intro p{max-width:30ch}.preview-toolbar{align-items:start}.canvas-wrap{height:330px}.preview-foot>span{display:none}}
@media(max-width:760px){body{padding:0}.sheet{padding:20px 16px;min-height:100vh}.mast{font-size:10px}.mast span:last-child{display:none}.intro{display:block;margin:26px 0}.intro h1{font-size:34px}.intro p{text-align:left;max-width:none;margin-top:12px}.workspace{display:flex;flex-direction:column;gap:0}.preview{order:0;padding-top:18px}aside{order:1;border-right:0;padding:26px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:24px}aside section+section{margin:0;padding:0;border:0}aside section:last-child{grid-column:1/-1;border-top:1px dotted var(--dim);padding-top:20px}.preview-note{margin-top:20px}.canvas-wrap{height:clamp(180px,50vw,340px);min-height:0}.preview-toolbar{gap:8px;font-size:10px}.preview-toolbar .check{white-space:nowrap;font-size:10px}figcaption{font-size:10px}figcaption>span:last-child{display:none}.preview-foot{font-size:10px}.desktop-break{display:none}footer{flex-direction:column;gap:4px}.palette{max-width:260px}}
@media(max-width:380px){aside{grid-template-columns:1fr}aside section:last-child{grid-column:auto}.images{gap:8px}.preview-toolbar{flex-direction:column}.intro h1{font-size:30px}}

/* Cropping and tone editing share the existing paper-and-ink work surface. */
.canvas-wrap{height:clamp(240px,29vw,440px)}
#source{cursor:default;touch-action:auto}
#source.crop-active{touch-action:none;cursor:move}
.actual-size figure:first-child .canvas-wrap{display:flex}
.actual-size figure:first-child canvas{max-width:100%;max-height:100%;object-fit:contain}
.crop-help{margin:0 0 18px}.crop-help+.control{margin-top:12px}
.field-label{display:block;font-size:11px;margin-bottom:6px}
.field{border:1px solid var(--dim);background:var(--paper);padding:7px 8px;font:inherit;font-size:12px;border-radius:0;width:100%;max-width:100%;min-width:0}
.tone-panels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:30px;border-top:1px dotted var(--dim);padding-top:22px}
.tone-panels h2{margin-bottom:14px}.tone-panels .control+.control{margin-top:24px}
.tone-controls{padding-left:12px}.tone-controls .check{margin-top:18px}
@media(max-width:1100px){.tone-panels{gap:12px}.tone-controls{padding-left:0}}
@media(max-width:760px){.canvas-wrap{height:clamp(180px,50vw,340px)}.tone-panels{margin-top:24px;gap:22px;grid-template-columns:1fr}.tone-panels .control+.control{margin-top:16px}.tone-controls{border-top:1px dotted var(--dim);padding-top:20px}.workspace aside{border-top:1px solid var(--dim);margin-top:26px}.actual-size figure:first-child .canvas-wrap{height:clamp(180px,50vw,340px)}}
/* Keep the source → crop → tone → export sequence readable on narrow screens. */
@media(max-width:760px){
  .workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:22px}
  .workspace>aside,.workspace>.preview{display:contents}
  aside>.input-section{grid-column:1;order:0;padding-top:20px}
  aside>section:has(#crop-controls){grid-column:2;order:0;padding-top:20px}
  .preview-toolbar{grid-column:1/-1;order:1;margin-top:26px}
  .images{grid-column:1/-1;order:2}
  .preview-foot{grid-column:1/-1;order:3}
  .error{grid-column:1/-1;order:4}
  .tone-panels{grid-column:1/-1;order:5}
  aside>.export-section{grid-column:1/-1;order:6;margin-top:26px}
}

[hidden]{display:none!important}
.dimension-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;font-size:11px}
.dimension-fields .field{display:block;margin-top:5px}
.size-actions{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.crop-toggle{margin-top:20px}
#crop-controls{margin-top:14px}
.color-field{display:grid;grid-template-columns:42px 32px minmax(0,1fr);gap:8px;align-items:center;font-size:11px;margin-top:14px}
.color-field input[type=color]{width:32px;height:32px;padding:0;border:1px solid var(--dim);background:transparent;cursor:pointer}
.color-field .field{font-size:11px}
.opacity-control{margin-top:10px}
.opacity-control label{font-size:11px}
#result.has-transparency{background-color:#fff;background-image:conic-gradient(#ddd 25%,#fff 0 50%,#ddd 0 75%,#fff 0);background-size:16px 16px}
.field[aria-invalid=true]{outline:2px solid var(--ink);outline-offset:2px}
.fixed-output{font-size:11px;margin-bottom:12px}
@media(max-width:760px){
  aside>.color-section{grid-column:1/-1;order:5;border-top:1px dotted var(--dim);padding-top:22px;margin-top:24px}
  .color-section .field{max-width:320px}.color-field{max-width:320px}
  .tone-panels{order:6}
  aside>.export-section{order:7}
  .dimension-fields{gap:8px}
}
@media(max-width:380px){
  .workspace{grid-template-columns:minmax(0,1fr)}
  aside>.input-section,aside>section:has(#crop-controls){grid-column:1/-1}
}