body:has(.stipple-app){background:#fff}.stipple-app{--preview-width:380px;color:#191919;flex:1;align-items:start;min-height:0;padding:0 24px 32px;font-size:12px;display:grid}.stipple-layout{grid-template-columns:minmax(0, 1fr) var(--preview-width) minmax(0, 1fr);align-items:center;column-gap:32px;width:100%;display:grid}.stipple-app .viewer{min-width:0;max-height:max(240px,100dvh - 176px);overflow:auto}.stipple-image{width:max-content;margin:auto;position:relative;overflow:hidden}.stipple-app canvas{max-width:none;max-height:none;box-shadow:none;display:block}.stipple-controls,.stipple-tools{border:0;min-width:0;margin:0;padding:0}.stipple-controls{justify-self:end;gap:18px;width:160px;display:grid}.stipple-controls label>span{justify-content:space-between;gap:12px;display:flex}.stipple-controls output{color:#737373;font-variant-numeric:tabular-nums}.stipple-controls input[type=range]{accent-color:#191919;cursor:pointer;width:100%;height:24px;display:block}.stipple-tools{justify-self:start;gap:24px;display:grid}.stipple-layers{gap:2px;display:grid}.stipple-layers label{cursor:pointer;align-items:center;gap:10px;min-height:30px;display:flex}.stipple-layers input{accent-color:#191919;width:12px;height:12px;margin:0}.stipple-app button:not([data-slot=button]),.stipple-app select{font:inherit;color:inherit;box-shadow:none;cursor:pointer;background:0 0;border:0;border-radius:0}.stipple-zoom select{max-width:100%;min-height:32px;padding:4px 0}.stipple-upload{opacity:0;background:#00000073;place-items:center;width:100%;transition:opacity .18s;display:grid;position:absolute;inset:0}.stipple-image:hover .stipple-upload,.stipple-image:focus-within .stipple-upload{opacity:1}.stipple-app :focus-visible:not([data-slot=button]){outline-offset:4px;outline:2px solid}.stipple-app :disabled:not([data-slot=button]){opacity:.4;cursor:wait}.stipple-status,.stipple-error{bottom:max(16px, env(safe-area-inset-bottom));text-align:center;margin:0;font-size:12px;position:fixed;inset-inline:24px}.stipple-status:empty,.stipple-status[hidden]{display:none}.stipple-error button{padding:8px;text-decoration:underline}@media (prefers-reduced-motion:reduce){.stipple-upload{transition:none}}@media (hover:none){.stipple-upload{opacity:1;pointer-events:none;background:0 0;place-items:start end;padding:12px}.stipple-upload button{pointer-events:auto}.stipple-image:focus-within .stipple-upload{background:#00000073}}@media (width<=700px){.stipple-app{align-items:start;padding:0 0 32px}.stipple-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px 24px}.stipple-app .viewer{grid-area:1/1/auto/-1;width:100%;max-height:60dvh}.stipple-controls{grid-column:1;justify-self:end;width:calc(100% - 24px);max-width:180px}.stipple-tools{grid-column:2;align-self:start}}