:root{color:#201b16;background:#f7f2ea;font-family:Helvetica Neue,PingFang SC,Noto Sans SC,sans-serif}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;min-height:100vh;background:#f7f2ea}button,input,select{font:inherit}.shell{width:min(960px,calc(100vw - 40px));margin:0 auto;padding:24px 0 40px}.shell__title{margin:0 0 14px;font-size:20px;font-weight:500;line-height:1.2;text-align:left}.controls{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:14px}.upload,.field,#shuffle-button,#download-button{min-height:44px;border:1px solid rgba(54,44,34,.14);background:#fffcf7c7;border-radius:14px}.upload span,#shuffle-button,#download-button{color:#59a92b}.upload--image span{color:#201b16}.upload,.field{display:flex;align-items:center;gap:10px;padding:0 14px}.upload{position:relative;overflow:hidden;cursor:pointer}.upload input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}.field{min-width:220px}.field--select{min-width:160px}.field span,.upload span,.status,output{font-size:13px}.field input[type=range]{flex:1}.field input[type=range]{accent-color:#59a92b}.field input[type=color]{width:34px;height:24px;padding:0;border:0;background:transparent;cursor:pointer}.field select{flex:1;min-width:0;border:0;background:transparent;color:inherit;outline:none}output{min-width:20px;text-align:right}#shuffle-button,#download-button{padding:0 16px;cursor:pointer}#download-button:disabled{opacity:.45;cursor:not-allowed}.panel{margin-top:0;flex:1 1 0;min-width:0}.results{display:flex;gap:0;align-items:flex-start}.results--image-top,.results--image-bottom{flex-direction:column}.results--image-top .panel,.results--image-bottom .panel{width:100%}.results--image-left,.results--image-right{flex-direction:row}.results--image-top .panel--image,.results--image-left .panel--image{order:0}.results--image-top .panel--paper,.results--image-left .panel--paper{order:1}.results--image-bottom .panel--paper,.results--image-right .panel--paper{order:0}.results--image-bottom .panel--image,.results--image-right .panel--image{order:1}.results--empty{display:none}.results--empty .panel+.panel{display:none}canvas{display:block;width:100%;height:auto;border-radius:0;background:#ebe3d7}.results--empty canvas{background:transparent}.status{margin:12px 0 0;color:#271f18b8}.status:empty{display:none}@media(max-width:720px){.shell{width:calc(100vw - 24px);padding-top:16px}.controls{align-items:stretch}.controls>*{width:100%}.field{min-width:0}}