html,body,.app{width:100%;height:100%;margin:0}body{color:#f5f5f5;background-color:#52525b;background-image:linear-gradient(45deg,#e5e7eb 25%,#0000 25%),linear-gradient(-45deg,#e5e7eb 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#e5e7eb 75%),linear-gradient(-45deg,#0000 75%,#e5e7eb 75%);background-position:0 0,0 12px,12px -12px,-12px 0;background-repeat:repeat,repeat,repeat,repeat;background-size:24px 24px;background-attachment:scroll,scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box,border-box;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.app{grid-template-columns:280px minmax(0,1fr);display:grid;overflow:hidden}.sidebar{z-index:1;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#070d1feb;border-right:1px solid #ffffff24;flex-direction:column;gap:18px;padding:20px;display:flex}h1{color:#fff;margin:0;font-size:20px;font-weight:650;line-height:1.2}.viewer-pane{min-width:0;min-height:0}#viewer{outline:none;width:100%;height:100%;display:block}.status,.error{background:#171717c7;border:1px solid #ffffff29;border-radius:6px;padding:10px 12px}.error{color:#fecaca}.control-group{flex-direction:column;gap:10px;display:flex}label{color:#ffffffb8;font-size:13px}button,input,select{color:#171717;min-height:36px;font:inherit;background:#f5f5f5;border:1px solid #ffffff2e;border-radius:6px}input[type=color]{cursor:pointer;background:#20242c;border-color:#fff3;width:100%;padding:2px}input[type=color]:hover{background:#2b313b;border-color:#ffffff52}input[type=color]:focus-visible{outline-offset:2px;outline:2px solid #94a3b8cc}input[type=color]::-webkit-color-swatch-wrapper{padding:3px}input[type=color]::-webkit-color-swatch{border:0;border-radius:4px}input[type=color]::-moz-color-swatch{border:0;border-radius:4px}input[type=range]{padding:0}button{color:#f8fafc;cursor:pointer;background:#20242c;border-color:#fff3;padding:0 12px}button:hover:not(:disabled){background:#2b313b;border-color:#ffffff52}button:focus-visible{outline-offset:2px;outline:2px solid #94a3b8cc}button:disabled,select:disabled{cursor:not-allowed;opacity:.58}select{color:#f8fafc;background:#20242c;border-color:#fff3;width:100%;padding:0 8px}select:hover:not(:disabled){background:#2b313b;border-color:#ffffff52}select:focus-visible{outline-offset:2px;outline:2px solid #94a3b8cc}.screenshot-preview{position:relative}.screenshot-preview img{aspect-ratio:16/10;object-fit:cover;background:#111;border:1px solid #ffffff2e;border-radius:6px;width:100%;display:block}.download-icon{color:#171717;background:#f5f5f5f0;border:1px solid #ffffff38;border-radius:6px;place-items:center;width:34px;height:34px;font-size:22px;line-height:1;text-decoration:none;display:grid;position:absolute;bottom:8px;right:8px}.note{color:#ffffff9e;margin:0;font-size:12px;line-height:1.35}.repo-link{color:#ffffffbd;margin-top:auto;font-size:13px;line-height:1.4;text-decoration:none}.repo-link:hover,.repo-link:focus-visible{color:#fff;text-decoration:underline}@media (width<=720px){.app{grid-template-rows:auto minmax(0,1fr);grid-template-columns:1fr}.sidebar{border-bottom:1px solid #ffffff24;border-right:0;max-height:46vh;overflow:auto}}