.sheet-gif-page .crumb{font-size:13px;color:var(--ink-3);margin:18px 0 -22px}.sheet-gif-page h1{margin-top:32px}.sheet-gif-page .lede{max-width:800px}
.sheet-gif-tool{padding:16px}.sg-drop{border:2px dashed #cdd6e4;border-radius:12px;background:#fbfcfe;padding:26px 18px;text-align:center;cursor:pointer}.sg-drop:hover,.sg-drop.over{border-color:var(--brand);background:var(--brand-soft)}.sg-drop svg{display:block;margin:0 auto 8px}.sg-drop .drop-title{margin:0 0 4px;font-size:17px;font-weight:650}.sg-drop .drop-sub{margin:0;color:var(--ink-3);font-size:14px}
.sg-controls{display:flex;align-items:end;flex-wrap:wrap;gap:10px;margin:16px 0 8px}.sg-controls label{display:grid;gap:4px;font-size:13px;font-weight:600;color:var(--ink-2)}.sg-controls input{width:112px;min-height:40px;border:1px solid var(--line);border-radius:8px;padding:7px 9px;font:inherit;color:var(--ink);background:#fff}.sg-controls input:disabled{background:#f0f2f5;color:var(--ink-3)}.sg-controls .btn{min-height:40px}.sg-meta,.sg-status{font-size:13.5px;color:var(--ink-3)}.sg-meta{margin:8px 0}.sg-status{margin:6px 0;min-height:1em}.sg-status.error{color:#a32525}.sg-frame-area[hidden],.sg-result[hidden]{display:none}.sg-frame-area{margin-top:16px}.sg-frame-area h2,.sg-result h2{font-size:18px;margin:0 0 10px}.sg-frame-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:9px;max-height:420px;overflow:auto;padding:2px}.sg-frame-card{margin:0;min-width:0;text-align:center;border:1px solid var(--line);border-radius:9px;padding:8px;background:#fff}.sg-frame-card canvas{display:block;width:auto;height:auto;max-width:100%;max-height:120px;margin:0 auto 6px;image-rendering:pixelated;background-color:#fff;background-image:linear-gradient(45deg,#e6e9ee 25%,transparent 25%),linear-gradient(-45deg,#e6e9ee 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e6e9ee 75%),linear-gradient(-45deg,transparent 75%,#e6e9ee 75%);background-size:12px 12px;background-position:0 0,0 6px,6px -6px,-6px 0}.sg-frame-card figcaption{font-size:12px;color:var(--ink-2)}.sg-result{margin-top:22px;border-top:1px solid var(--line);padding-top:18px}.sg-result-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}.sg-result-head h2{margin-bottom:0}.sg-result-head .sg-meta{margin-top:4px}.sg-result img{display:block;max-width:100%;max-height:360px;object-fit:contain;margin:10px auto 0;background-color:#fff;background-image:linear-gradient(45deg,#e6e9ee 25%,transparent 25%),linear-gradient(-45deg,#e6e9ee 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e6e9ee 75%),linear-gradient(-45deg,transparent 75%,#e6e9ee 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0}.sg-guide{margin-top:28px}.sg-guide ol{padding-left:22px}.sg-guide li{margin:6px 0}.sg-guide p{max-width:850px}
@media(max-width:640px){.sheet-gif-page .crumb{margin-bottom:-20px}.sheet-gif-page h1{font-size:29px}.sheet-gif-tool{padding:12px}.sg-drop{padding:20px 12px}.sg-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.sg-controls label{min-width:0}.sg-controls input{width:100%;min-width:0}.sg-controls .btn{grid-column:1/-1;width:100%}.sg-result-head{align-items:stretch}.sg-result-head .btn{width:100%}.sg-frame-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.sg-frame-card{padding:5px}.sg-frame-card canvas{max-height:90px}}