.screen-upload-modal.screen-upload-modal{--tune-panel:#dcdad2;--tune-ink:#181916;--tune-line:#aeafa5;width:min(700px,calc(100% - 24px));max-height:calc(100dvh - 24px);padding:6px;border:0;border-radius:0;background:transparent;color:var(--tune-ink);overflow:auto;overscroll-behavior:contain}.screen-upload-modal::backdrop{background:#11130fc2;backdrop-filter:blur(10px);animation:tune-backdrop-in .24s ease-out both}.screen-upload-modal[data-closing=true]::backdrop{animation:tune-backdrop-out .18s ease-in both}.screen-upload-modal .screen-upload-shell{position:relative;display:block;padding:0;gap:0;isolation:isolate;transform-origin:50% 65%;animation:tune-build-in .36s cubic-bezier(.16,1,.3,1) both}.screen-upload-modal[data-closing=true] .screen-upload-shell{animation:tune-build-out .18s ease-in both}.screen-upload-outline{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1;overflow:visible}.screen-upload-outline path{fill:var(--tune-panel);stroke:var(--tune-line);stroke-width:1}.screen-upload-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;width:-moz-fit-content;width:fit-content;max-width:calc(100% - 36px);padding:20px 22px 12px;min-height:62px}.screen-upload-heading h3{margin:0;font-size:22px;font-weight:500;line-height:1.2;letter-spacing:-.025em;text-transform:uppercase;outline:none}.screen-upload-heading i{width:7px;height:7px;flex:none;border-radius:50%;background:var(--tune-ink)}.screen-upload-body{display:grid;grid-template-columns:190px minmax(0,1fr);gap:30px;padding:22px 26px 24px}.screen-upload-modal .screen-upload-preview{display:flex;flex-direction:column;justify-content:flex-start;gap:12px}.screen-upload-display{width:100%;padding:18px;border:1px solid #77796a;border-radius:28px;background:#181916;box-shadow:inset 0 1px 0 #ffffff24}.screen-upload-modal .screen-upload-preview canvas{display:block;width:100%;height:auto;aspect-ratio:3/4;box-shadow:none;border-radius:5px}.screen-upload-modal .screen-image-invert,.screen-upload-modal .screen-image-range>span,.screen-upload-modal .screen-upload-dither-group>span,.screen-upload-modal button,.screen-upload-resolution{font-family:var(--font-mschn),monospace;font-weight:400;text-transform:uppercase;letter-spacing:.035em}.screen-upload-resolution{font-size:10px;opacity:.6}.screen-upload-modal button{transition:background .16s,color .16s,transform .16s}.screen-upload-modal button:active{transform:scale(.97)}.screen-upload-modal button:focus-visible,.screen-upload-modal input:focus-visible{outline:2px solid var(--tune-ink);outline-offset:4px}.screen-upload-modal .screen-upload-preview button{min-height:36px;padding:8px 18px;border:1px solid var(--tune-line);border-radius:999px;font-size:12px}.screen-upload-modal .screen-upload-controls{gap:14px}.screen-upload-modal .screen-upload-controls>p{margin:0 0 4px;color:var(--tune-ink);font-size:13px;line-height:1.45;opacity:.65}.screen-upload-modal .screen-image-range{gap:1px}.screen-upload-modal .screen-image-range>span{align-items:center;font-size:12px}.screen-upload-modal .screen-image-range output{min-width:48px;padding:3px 6px;border:1px solid var(--tune-line);border-radius:7px;text-align:center;color:var(--tune-ink);font-size:12px}.screen-upload-modal .screen-image-range input{--grip:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath d='M3 3v8M7 3v8M11 3v8' stroke='%2353544d' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center/14px 14px no-repeat,linear-gradient(#faf9f4,#d6d5cd);-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;height:36px;min-height:36px;cursor:ew-resize}.screen-upload-modal .screen-image-range input::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:linear-gradient(to right,var(--tune-ink) var(--range-fill),#b8b8ae var(--range-fill))}.screen-upload-modal .screen-image-range input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:28px;height:28px;margin-top:-11px;border:1px solid #67685e;border-radius:50%;background:var(--grip);box-shadow:0 2px 4px #0003,inset 0 0 0 1px #fff;cursor:grab}.screen-upload-modal .screen-image-range input::-moz-range-track{height:6px;border-radius:999px;background:#b8b8ae}.screen-upload-modal .screen-image-range input::-moz-range-progress{height:6px;border-radius:999px;background:var(--tune-ink)}.screen-upload-modal .screen-image-range input::-moz-range-thumb{width:28px;height:28px;border:1px solid #67685e;border-radius:50%;background:var(--grip);box-shadow:0 2px 4px #0003,inset 0 0 0 1px #fff}.screen-upload-modal .screen-upload-dither-group>span{display:block;margin-bottom:8px;font-size:12px}.screen-upload-modal .screen-upload-dithers{display:flex;gap:2px;padding:4px;border-radius:999px;background:#181916}.screen-upload-modal .screen-upload-dithers button{flex:1;padding:8px 4px;min-width:0;border:0;border-radius:999px;color:#f4f3ee;font-size:10px;letter-spacing:0}.screen-upload-modal .screen-upload-dithers button[aria-pressed=true]{background:#dafa00;color:#181916;border:0}.screen-upload-strength{transition:opacity .15s}.screen-upload-strength[data-disabled=true]{opacity:.25}.screen-upload-modal .screen-image-invert{font-size:11px;gap:8px}.screen-upload-modal .screen-image-invert input{width:18px;height:18px;accent-color:#181916}.screen-upload-modal .screen-upload-actions{position:relative;display:flex;width:-moz-fit-content;width:fit-content;max-width:calc(100% - 24px);margin:0 0 0 auto;padding:10px;gap:8px}.screen-upload-modal .screen-upload-actions button{min-height:44px;padding:10px 24px;border:1px solid var(--tune-ink);border-radius:999px;font-size:13px;white-space:nowrap}.screen-upload-modal .screen-upload-actions .screen-upload-place{background:#dafa00;border-color:#89972c!important;color:#181916}@keyframes tune-build-in{0%{opacity:0;transform:translateY(24px) scale(.93);filter:blur(5px)}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}@keyframes tune-build-out{to{opacity:0;transform:translateY(14px) scale(.96);filter:blur(3px)}}@keyframes tune-backdrop-in{0%{opacity:0}to{opacity:1}}@keyframes tune-backdrop-out{to{opacity:0}}@media(max-width:600px){.screen-upload-heading{padding:16px 18px 12px;min-height:54px;gap:14px}.screen-upload-heading h3{font-size:19px}.screen-upload-body{grid-template-columns:1fr;gap:18px;padding:16px 18px 18px}.screen-upload-modal .screen-upload-preview{display:grid;grid-template-columns:100px auto;grid-template-rows:1fr 1fr;-moz-column-gap:20px;column-gap:20px;row-gap:6px;justify-content:center;align-items:center}.screen-upload-display{grid-row:1/3;padding:10px;border-radius:18px}.screen-upload-resolution{align-self:end}.screen-upload-modal .screen-upload-preview button{align-self:start}.screen-upload-modal .screen-upload-controls{gap:10px}.screen-upload-modal .screen-upload-controls>p{font-size:12px}.screen-upload-modal .screen-upload-actions button{padding:10px 18px;font-size:12px}}@media(prefers-reduced-motion:reduce){.screen-upload-modal .screen-upload-shell,.screen-upload-modal::backdrop,.screen-upload-modal[data-closing=true] .screen-upload-shell,.screen-upload-modal[data-closing=true]::backdrop{animation:none}.screen-upload-modal *{transition:none!important}}@media(max-width:360px){.screen-upload-heading{padding-inline:14px;gap:10px}.screen-upload-heading h3{font-size:16px;white-space:nowrap}}@media (min-width:768px){.screen-playground .screen-visual .screen-stage .screen-stage-controls{top:auto;bottom:11px;left:50%;right:auto;transform:translateX(-50%)}.screen-playground .screen-visual .screen-stage .screen-picker{flex-direction:row;gap:20px}.puff-home .screen-playground .screen-controls>.screen-description{margin-bottom:32px}}.screen-playground .screen-knob{padding-inline:10px;--slider-handle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12' viewBox='0 0 14 12'%3E%3Cpath d='M3 2v8M7 2v8M11 2v8' fill='none' stroke='%2353544d' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center /14px 12px no-repeat,linear-gradient(#faf9f4,#d6d5cd)}.screen-playground .screen-knob input[type=range]{height:44px;overflow:visible;cursor:ew-resize}.screen-playground .screen-knob input[type=range]::-webkit-slider-runnable-track{height:6px}.screen-playground .screen-knob input[type=range]::-webkit-slider-thumb{width:28px;height:28px;margin-top:-11px;box-sizing:border-box;border:1px solid #53544d;border-radius:50%;background:var(--slider-handle);box-shadow:0 2px 5px #0005,inset 0 0 0 1px #fff;cursor:grab}.screen-playground .screen-knob input[type=range]::-moz-range-progress,.screen-playground .screen-knob input[type=range]::-moz-range-track{height:6px}.screen-playground .screen-knob input[type=range]::-moz-range-thumb{width:28px;height:28px;box-sizing:border-box;border:1px solid #53544d;border-radius:50%;background:var(--slider-handle);box-shadow:0 2px 5px #0005,inset 0 0 0 1px #fff;cursor:grab}.screen-playground .screen-knob input[type=range]:active::-webkit-slider-thumb{cursor:grabbing;border-color:var(--screen-ink)}.screen-playground .screen-knob input[type=range]:active::-moz-range-thumb{cursor:grabbing;border-color:var(--screen-ink)}.puff-home .screen-playground .screen-panel{--control-edge:12px}.puff-home .screen-playground .screen-panel .screen-panel-head{padding:var(--control-edge);max-width:calc(100% - 4px);border-radius:32px 32px 0 0}.puff-home .screen-playground .screen-panel .screen-panel-head .screen-designs{gap:6px}.puff-home .screen-playground .screen-panel .screen-panel-head .screen-designs>button{height:auto;min-height:0;padding:12px;border-radius:999px;font-size:15px;line-height:1.2;letter-spacing:0;white-space:nowrap}@media (max-width:1100px){.puff-home .screen-playground .screen-panel .screen-panel-head .screen-designs{gap:4px}.puff-home .screen-playground .screen-panel .screen-panel-head .screen-designs>button{padding:9px;font-size:12px}}@media (max-width:360px){.puff-home .screen-playground .screen-panel{--control-edge:10px}.puff-home .screen-playground .screen-panel .screen-panel-head .screen-designs{gap:3px}.puff-home .screen-playground .screen-panel .screen-panel-head .screen-designs>button{padding:7px;font-size:10px}}.puff-home .screen-playground .screen-panel .screen-panel-body{padding-inline:var(--control-edge)}.puff-home .screen-playground .screen-panel .screen-knob{padding-inline:0}.puff-home .screen-playground .screen-panel .screen-options{overflow:visible}.puff-home .screen-playground .screen-panel .screen-option-note{max-width:none;width:100%}@keyframes screen-content-in{0%{opacity:0}to{opacity:1}}.puff-home .screen-playground .screen-panel .screen-pane>*,.puff-home .screen-playground .screen-panel .screen-toolbar>*{animation:screen-content-in .16s ease-out both}@media (prefers-reduced-motion:reduce){.puff-home .screen-playground .screen-panel .screen-pane>*,.puff-home .screen-playground .screen-panel .screen-toolbar>*{animation:none}}.puff-home .screen-playground .screen-panel{padding-bottom:12px;overflow:visible}.puff-home .screen-playground .screen-panel .screen-maker{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}.puff-home .screen-playground .screen-panel .screen-maker .screen-gem{--gem-h:260px;height:auto;width:min(100%,calc(var(--gem-h) * var(--ar,.78)))}.puff-home .screen-playground .screen-panel .screen-maker .screen-toolbar{display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;padding:0;gap:36px;min-width:0}.puff-home .screen-playground .screen-panel .screen-tool-cluster{display:flex;flex-direction:column;gap:10px;min-width:0}.puff-home .screen-playground .screen-panel .screen-tools{display:flex;flex-direction:row;width:100%;gap:2px;padding:4px;border:0;border-radius:999px;background:#080808}.puff-home .screen-playground .screen-panel .screen-tools button{flex:1;justify-content:center;min-width:0;padding:9px 6px;gap:5px;border:0;border-radius:999px;color:#f4f3ee;background:transparent;font-size:11px}.puff-home .screen-playground .screen-panel .screen-tools button span{display:inline}.puff-home .screen-playground .screen-panel .screen-tools button[aria-pressed=true]{background:#dafa00;color:#181916}.puff-home .screen-playground .screen-panel .screen-toolbar-brush{flex:none;width:100%;max-width:100%;margin:0;padding:10px 12px;border-radius:999px;background:transparent;color:var(--screen-ink)}.puff-home .screen-playground .screen-panel .screen-toolbar-brush[hidden]{display:none}.puff-home .screen-playground .screen-panel .screen-knob-brush{display:flex;gap:4px;color:var(--screen-ink)}.puff-home .screen-playground .screen-panel .screen-knob-brush .screen-knob-head{display:flex;align-items:center;font-size:10px}.puff-home .screen-playground .screen-panel .screen-knob-brush output{border-color:var(--screen-line);color:var(--screen-ink);padding:1px 5px}.puff-home .screen-playground .screen-panel .screen-knob-brush input{height:28px}.puff-home .screen-playground .screen-panel .screen-knob-brush input::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--screen-ink) var(--pos),var(--screen-panel) var(--pos))}.puff-home .screen-playground .screen-panel .screen-knob-brush input::-moz-range-track{background:var(--screen-panel)}.puff-home .screen-playground .screen-panel .screen-knob-brush input::-moz-range-progress{background:var(--screen-ink)}.puff-home .screen-playground .screen-panel .screen-maker .screen-toolbar-actions{position:static;display:flex;flex-direction:row;width:100%;gap:8px;margin:0;transform:none}.puff-home .screen-playground .screen-panel .screen-toolbar-actions button{flex:1;min-width:0;padding:0 12px;justify-content:center}@media(max-width:1100px){.puff-home .screen-playground .screen-panel .screen-maker{gap:22px}.puff-home .screen-playground .screen-panel .screen-tools button{flex-direction:column;padding:7px 3px;gap:4px;font-size:9px}.puff-home .screen-playground .screen-panel .screen-maker .screen-toolbar-actions{flex-direction:column;gap:6px}.puff-home .screen-playground .screen-panel .screen-toolbar-actions button{font-size:10px;min-height:36px}}@media(max-width:767px){.puff-home .screen-playground .screen-panel .screen-maker .screen-gem{--gem-h:220px}}.puff-home .screen-playground .screen-panel .screen-pane>*,.puff-home .screen-playground .screen-panel .screen-toolbar>*{animation:none}.puff-home .screen-playground .screen-panel .screen-pane[data-active=true]{animation:screen-content-in .22s ease-out both}@media(prefers-reduced-motion:reduce){.puff-home .screen-playground .screen-panel .screen-pane[data-active=true]{animation:none}}@keyframes screen-panel-edge-in{0%{opacity:0;transform:scale(.975)}}.screen-panel-edge .screen-panel-edge-in{transform-box:fill-box;transform-origin:50% 20%;animation:screen-panel-edge-in .22s cubic-bezier(.16,1,.3,1) both}@media(prefers-reduced-motion:reduce){.screen-panel-edge .screen-panel-edge-in{animation:none}}