:root{--paper:#f5f3ec;--ink:#152b35;--muted:#697477;--line:#dcded6;--teal:#087e83;--orange:#e87943;--serif:Georgia,'Times New Roman',serif;--sans:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:14px}button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button,a{touch-action:manipulation}button,a,input{outline-offset:4px}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--teal)}button{cursor:pointer}a{color:inherit;text-decoration:none}button:disabled{cursor:not-allowed;opacity:.5}button[aria-busy="true"]{cursor:wait}[hidden]{display:none!important}.masthead{max-width:1600px;margin:auto;padding:25px 40px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:12px;font-size:12px;font-weight:750;letter-spacing:.12em}.brand-mark{display:grid;place-items:center;width:31px;height:31px;background:var(--ink);color:var(--paper);font-size:25px;line-height:1;border-radius:50%}.mast-right{display:flex;align-items:center;gap:28px;font-size:12px}.connection{color:var(--muted)}.connection:before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:#b7b9af;margin-right:7px}.connection.ready:before{background:var(--teal)}main{max-width:1520px;margin:auto;padding:0 40px}.intro{display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:50px;padding:46px 0 37px}.eyebrow,.step{font-size:10px;font-weight:700;letter-spacing:.13em}.eyebrow{margin:0 0 18px}.eyebrow span{font-size:8px;letter-spacing:.1em;border:1px solid #c6cbc0;border-radius:3px;padding:4px 6px;margin-left:10px;color:var(--muted)}h1{font-family:var(--serif);font-weight:400;font-size:clamp(44px,4.5vw,70px);line-height:.99;letter-spacing:-.045em;margin:0}.intro-copy{max-width:480px;padding:0 0 3px 12px}.intro-copy>p{font-size:16px;line-height:1.6;margin:0 0 25px;color:#536165}.pipeline{display:flex;align-items:center;gap:15px;font-size:10px;font-weight:600;letter-spacing:.03em}.pipeline b{color:#8f9c98;font-weight:400}.workspace{display:grid;grid-template-columns:minmax(280px,.78fr) minmax(450px,1.35fr);gap:20px;align-items:start}.panel{background:#fffefa;border:1px solid var(--line);border-radius:12px;padding:22px;min-width:0;box-shadow:0 5px 18px #152b3503}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:20px}.step{color:var(--teal)}h2{font-size:19px;letter-spacing:-.035em;font-weight:600;margin:7px 0 0}.small-tag{color:var(--muted);font-size:9px;letter-spacing:.06em;white-space:nowrap}.presets{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-bottom:13px}.presets button{background:transparent;border:1px solid var(--line);color:#64716f;padding:8px 3px;border-radius:5px;font-size:11px;white-space:nowrap}.presets button:hover,.presets .chosen{background:#e5f0eb;border-color:#b0cfc3;color:#095f60}.sketch-wrap{position:relative;border:1px solid #d8e3da;border-radius:6px;overflow:hidden;background:#eef3eb;line-height:0}#sketch{width:100%;display:block;cursor:crosshair;touch-action:none}.canvas-corner{pointer-events:none;position:absolute;bottom:13px;left:14px;right:14px;display:flex;justify-content:space-between;font-size:9px;font-weight:650;letter-spacing:.12em;color:#47796f;line-height:1}.canvas-corner span{color:#8a9b91;font-weight:400}.canvas-tools{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:11px 0 16px;font-size:10px;color:var(--muted)}.canvas-tools>div{display:flex;gap:13px}.text-button{border:0;padding:0;background:none;color:var(--teal);font-size:11px;cursor:pointer}.text-button:hover{text-decoration:underline}.settings{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:14px 0;border-top:1px solid var(--line);font-size:10px}.settings label:first-child{display:flex;align-items:center;gap:7px}.settings input[type=number]{border:1px solid var(--line);border-radius:4px;padding:6px;width:78px;color:var(--ink);background:white;font-size:11px}.check{display:flex;align-items:center;gap:5px;cursor:pointer;font-size:10px}.settings .check{margin-left:auto}input[type=checkbox]{accent-color:var(--teal);width:13px;height:13px;margin:0 2px 0 0}.render-button{display:flex;justify-content:space-between;align-items:center;width:100%;padding:14px 17px;background:var(--ink);color:#fffefa;border:0;border-radius:6px;font-size:13px;font-weight:600;transition:background .2s}.render-button:hover{background:#205660}.render-button span{font-size:22px;font-weight:400}.input-note{font-size:10px;line-height:1.6;color:var(--muted);margin:12px 0 0;max-width:360px}.output-panel .panel-heading{margin-bottom:13px}.status{display:flex;align-items:center;gap:8px;min-height:38px;background:#f1f3ed;color:#667567;font-size:10px;padding:9px 12px;border-radius:4px;margin-bottom:16px;line-height:1.5}.status-dot{width:6px;height:6px;border-radius:50%;background:#9aab9e;flex-shrink:0}.status.busy .status-dot{background:var(--teal);animation:breathe 1s infinite alternate}.status.error{background:#fff0e8;color:#943b19}.status.error .status-dot{background:var(--orange)}@keyframes breathe{to{opacity:.25}}.pair-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}figure{margin:0;min-width:0}.image-stage{position:relative;aspect-ratio:1;border-radius:5px;overflow:hidden;background:#e9ede6}.image-stage img,.image-stage canvas{position:absolute;width:100%;height:100%;inset:0}.image-stage canvas{touch-action:none}#overlay-a{cursor:crosshair}.placeholder{height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;background:radial-gradient(ellipse at 50% 48%,#d9e2d8,transparent 65%)}.placeholder>span{font:italic 64px var(--serif);color:#a8b9ae}.placeholder p{font-size:10px;color:#8c9b90;letter-spacing:.03em;margin:5px}figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:5px;padding-top:10px;font-size:10px}figcaption b{font-weight:600}figcaption>span{font-size:9px;color:var(--muted)}.inspect-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:17px 0 14px;font-size:9px;color:var(--muted);min-height:48px}#inspect-text{text-align:right;font-variant-numeric:tabular-nums}.stats{display:grid;grid-template-columns:repeat(3,1fr);padding:16px 0 18px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:18px}.stats>div{padding-left:18px;border-left:1px solid var(--line)}.stats>div:first-child{padding-left:0;border:0}.stats>div>span{color:var(--muted);font-size:9px}.stats strong{display:block;font-size:27px;font-weight:450;letter-spacing:-.04em;margin-top:6px;font-variant-numeric:tabular-nums}.stats small{display:inline-block;font-size:9px;font-weight:400;letter-spacing:0;color:var(--muted);margin-left:7px}.labels-grid{display:grid;grid-template-columns:1fr 1fr 1.05fr;gap:14px}.label-image{aspect-ratio:1.35;background:#edf0e8;border-radius:4px;overflow:hidden;position:relative}.label-image img{width:100%;height:100%;object-fit:contain;background:#111a26}.label-placeholder{height:100%;display:grid;place-items:center;color:#a1b8ae;font:52px var(--serif)}.labels-grid figcaption{display:block}.labels-grid figcaption span{display:block;font-size:8px;line-height:1.4;margin-top:5px}.download-block{padding:4px 0 0 5px}.download-block .step{font-size:8px}.download-block p{font:20px/1.2 var(--serif);letter-spacing:-.02em;margin:10px 0 14px}.download{display:block;border:1px solid var(--ink);border-radius:4px;font-size:10px;padding:9px 7px;text-align:center;white-space:nowrap}.download:hover{background:var(--paper)}.disabled{opacity:.35;pointer-events:none}.download-block .text-button{display:block;text-align:center;font-size:9px;margin-top:9px}.download-block>span:last-child{display:block;font-size:8px;color:var(--muted);line-height:1.5;text-align:center;margin-top:12px}.explanation{display:grid;grid-template-columns:1fr 1fr 1fr;gap:45px;padding:42px 0 44px}.explanation h2{font:27px/1.15 var(--serif);letter-spacing:-.02em;margin-top:11px}.explanation>p{color:var(--muted);font-size:12px;line-height:1.85;margin:0}footer{max-width:1520px;display:flex;justify-content:space-between;gap:15px;margin:0 auto;padding:20px 40px 25px;border-top:1px solid var(--line);font-size:9px;color:var(--muted);letter-spacing:.04em}footer span:first-child{font-weight:600;font-size:8px;letter-spacing:.1em}@media(min-width:1600px){.sketch-panel{padding:25px}.output-panel{padding:25px}.intro{padding-top:60px;padding-bottom:45px}}@media(max-width:1100px){main{padding:0 24px}.masthead{padding:22px 24px}.workspace{grid-template-columns:minmax(260px,.82fr) minmax(400px,1.25fr);gap:14px}.panel{padding:16px}.pair-grid figcaption{display:block}.pair-grid figcaption span{display:block;margin-top:4px}.stats small{display:block;margin:3px 0 0}.settings .check{margin-left:0}.labels-grid{gap:9px}.download-block p{font-size:18px}.download{font-size:8px}.inspect-bar{align-items:start}.intro-copy{padding-left:0}.explanation{gap:25px}.stats>div{padding-left:10px}}@media(max-width:800px){.workspace{grid-template-columns:1fr}.intro{padding:34px 0 28px;gap:22px}.intro-copy>p{font-size:13px}.pipeline{font-size:8px;gap:8px}.eyebrow{font-size:8px}.eyebrow span{display:inline-block;margin:8px 0 0}h1{font-size:48px}.sketch-panel{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}.sketch-panel .panel-heading{grid-column:1/-1}.sketch-wrap{grid-column:1;grid-row:3/8;align-self:start}.presets{grid-column:1/-1}.canvas-tools{grid-column:2;display:block;padding-top:8px}.canvas-tools>div{margin-top:15px}.settings{grid-column:2;align-content:start}.render-button{grid-column:2;align-self:start}.input-note{grid-column:2;align-self:start}.explanation{grid-template-columns:1fr 1fr}.explanation>div{grid-column:1/-1}.explanation h2 br{display:none}.mast-right{gap:15px}.stats small{display:inline-block;margin-left:7px}.pair-grid figcaption{display:flex}.pair-grid figcaption span{margin-top:0}.download{font-size:11px}.download-block p{font-size:23px}.download-block{padding-left:10px}.labels-grid figcaption span{font-size:9px}}@media(max-width:480px){main{padding:0 14px}.masthead{padding:17px 14px}.brand{font-size:10px;gap:8px}.brand-mark{width:26px;height:26px;font-size:21px}.mast-right{font-size:10px}.mast-right .connection{display:none}.intro{grid-template-columns:1fr;gap:18px;padding:28px 0 24px}.eyebrow{font-size:8px;margin-bottom:16px}.eyebrow span{margin:0 0 0 8px}.intro-copy>p{margin-bottom:15px;line-height:1.6}.intro-copy br{display:none}.pipeline{font-size:9px;gap:12px}h1{font-size:51px}.panel{padding:15px}.sketch-panel{display:block}.canvas-tools{display:flex;padding:11px 0 14px}.canvas-tools>div{margin:0}.settings .check{margin-left:auto}.settings{gap:8px}.settings label:first-child{gap:5px}.settings input[type=number]{width:65px}.presets button{font-size:10px}.panel-heading h2{font-size:18px}.small-tag{font-size:8px}.pair-grid{gap:9px}.pair-grid figcaption{display:block}.pair-grid figcaption span{font-size:8px;margin-top:4px}.inspect-bar{display:block}.inspect-bar>span{display:block;margin-top:10px;text-align:left!important}.stats strong{font-size:23px}.stats>div>span{font-size:8px}.stats small{display:block;margin:3px 0 0;font-size:8px}.labels-grid{grid-template-columns:1fr 1fr;gap:15px 10px}.download-block{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:15px 0 0;border-top:1px solid var(--line);align-items:center}.download-block .step{grid-column:1}.download-block p{grid-column:1;grid-row:2/4;margin:0;font-size:21px}.download{grid-column:2;grid-row:1/3}.download-block .text-button{grid-column:2;grid-row:3;margin:0}.download-block>span:last-child{grid-column:1/-1;text-align:left;margin:4px 0 0}.explanation{grid-template-columns:1fr;gap:18px;padding:32px 0}.explanation>p{font-size:11px}footer{padding:18px 14px;flex-wrap:wrap;font-size:8px}footer span:nth-child(2){display:none}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Editable preset actions and the input/output label comparison. */
.preset-picker{grid-column:1/-1}
.sketch-hint{font-size:11px;line-height:1.6;color:var(--muted);margin:-4px 0 12px}
.comparison{border-bottom:1px solid var(--line);padding-bottom:20px;margin-bottom:20px}
.comparison-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 13px}
.comparison h3{font-size:14px;font-weight:600;letter-spacing:-.02em;margin:0}
.comparison-body{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(150px,1fr);gap:22px;align-items:center}
#comparison{display:block;width:100%;aspect-ratio:1;border:1px solid #d8e3da;border-radius:5px}
.comparison-controls .check{font-size:11px;gap:7px;margin-bottom:13px;line-height:1.5}
.legend-line{display:inline-block;position:relative;width:19px;border-top:2px solid;flex-shrink:0}
.legend-line:after{content:'';position:absolute;right:0;top:-4px;width:6px;height:6px;border-right:2px solid;border-top:2px solid;transform:rotate(45deg)}
.input-line{color:var(--teal)}.output-line{color:#d26935}
.comparison-controls p{font-size:10px;line-height:1.7;color:var(--muted);margin:16px 0}
.density-label{font-size:10px;display:flex;justify-content:space-between;align-items:center;margin-top:21px}
#density-value{font-variant-numeric:tabular-nums;color:var(--teal)}
#label-density{width:100%;accent-color:var(--teal);margin:10px 0 18px;cursor:pointer}
.comparison-controls .background-toggle{font-size:10px;align-items:start}
.background-toggle input{margin-top:2px;flex-shrink:0}
.comparison-controls .comparison-note{border-top:1px solid var(--line);padding-top:12px;margin-bottom:0;font-size:9px}
@media(max-width:1100px){.comparison-body{gap:14px;grid-template-columns:minmax(0,1.35fr) minmax(125px,1fr)}.comparison-heading{align-items:start}.comparison-heading .small-tag{font-size:7px}.comparison-controls .check{font-size:10px}.comparison-controls p{font-size:9px}}
@media(max-width:800px){.comparison-body{grid-template-columns:1.5fr 1fr;gap:22px}}
@media(max-width:480px){.comparison-heading{display:block}.comparison-heading .small-tag{display:block;margin-top:7px;font-size:8px}.comparison-body{grid-template-columns:1fr;gap:16px}.comparison-controls{display:grid;grid-template-columns:1fr 1fr;gap:0 15px}.comparison-controls p,.density-label,#label-density,.background-toggle,.comparison-note{grid-column:1/-1}.comparison-controls .check{font-size:11px;margin-bottom:0}.comparison-controls p{font-size:10px;margin:13px 0}.density-label{margin-top:4px}.comparison-controls .comparison-note{margin:13px 0 0}}

.render-help{color:var(--teal);min-height:1.6em}.sketch-panel .render-help{grid-column:2}