.sf-main{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(240px,300px);gap:12px;align-items:start;margin-bottom:12px}.sf-tools{display:grid;grid-template-columns:1fr;gap:6px;padding:8px}.sf-tools hr{border:0;border-top:1px solid var(--line);margin:2px 0;width:100%}.sf-tool{width:44px;height:40px;padding:0;font-size:20px;display:grid;place-items:center}.sf-stage{display:grid;place-items:center;min-width:0;background:#0a0815;border:2px solid var(--line);border-radius:10px;padding:4px;min-height:300px}#sf-canvas{display:block;max-width:100%;height:auto;image-rendering:pixelated;touch-action:none;cursor:crosshair}.sf-side{display:grid;gap:8px}.sf-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(28px,1fr));gap:4px;margin:8px 0}.sf-sw{aspect-ratio:1;border:2px solid var(--line);border-radius:4px;cursor:pointer;padding:0}.sf-sw.on{outline:3px solid var(--amber);outline-offset:1px}.sf-clear{background:repeating-conic-gradient(#2f2a55 0 25%,#17142b 0 50%) 0 0 / 10px 10px}#sf-preview{display:block;margin:0 auto 6px;image-rendering:pixelated;background:repeating-conic-gradient(#24204a 0 25%,#1b1838 0 50%) 0 0 / 16px 16px;border-radius:4px}.sf-exports{display:grid;gap:6px;margin-top:6px}.sf-exports .fa-btn{text-align:left}.sf-frames h2{margin:0}.sf-strip{display:flex;gap:6px;overflow-x:auto;padding:8px 0 2px}.sf-thumb{flex:0 0 auto;position:relative;background:repeating-conic-gradient(#24204a 0 25%,#1b1838 0 50%) 0 0 / 12px 12px;border:2px solid var(--line);border-radius:6px;padding:4px;cursor:pointer;min-width:56px;min-height:56px;display:grid;place-items:center}.sf-thumb canvas{image-rendering:pixelated;display:block}.sf-thumb small{position:absolute;left:3px;bottom:0;color:var(--dim);font-size:14px}.sf-thumb.on{border-color:var(--pink);box-shadow:0 0 10px #ff4fd859}@media(max-width:960px){.sf-main{grid-template-columns:auto minmax(0,1fr)}.sf-side{grid-column:1 / -1;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}}@media(max-width:560px){.sf-main{grid-template-columns:1fr}.sf-tools{grid-template-columns:repeat(auto-fill,minmax(44px,1fr));order:2}.sf-tools hr{display:none}.sf-stage{order:1}.sf-side{order:3}}