.qpt-sprite{--line:#30353c;--muted:#a7abb2;color:#f3f4f6;font:15px/1.6 system-ui,sans-serif;max-width:1120px;margin:30px auto}.qpt-sprite *{box-sizing:border-box}.qpt-sprite [hidden]{display:none!important}.qpt-sprite header{margin-bottom:28px;max-width:760px}.qpt-sprite h2{font:clamp(28px,4vw,44px)/1.15 Georgia,serif;margin:12px 0}.qps-eyebrow{font:12px Consolas,monospace;letter-spacing:.12em;color:var(--muted)}.qps-private{border:1px solid var(--line);padding:6px 12px;border-radius:20px;color:#c5dacb;font-size:12px}.qps-workspace{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(280px,1fr);border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#0d1014}.qps-input{padding:24px;border-right:1px solid var(--line)}.qpt-sprite label{display:block;font-size:13px;margin:12px 0 6px}.qpt-sprite select,.qpt-sprite input[type=number]{width:100%;min-width:0;padding:10px;color:#f3f4f6;background:#181c23;border:1px solid var(--line);border-radius:8px;font:inherit}.qps-settings{border:0;margin:0;padding:24px;min-width:0}.qps-settings legend{float:left;width:100%;font-weight:600;margin-bottom:12px}.qps-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}.qps-note{font-size:12px;color:var(--muted)}.qpt-sprite .qps-check{display:flex;align-items:center;gap:8px}.qpt-sprite input[type=checkbox]{accent-color:#d8dce2}.qps-drop{position:relative;text-align:center;padding:28px 14px;border:1px dashed #536171;border-radius:12px;margin-top:20px;background:#11151a}.qps-drop h3{font:24px Georgia,serif}.qps-drop p{font-size:12px;color:var(--muted)}.qpt-sprite button,.qpt-sprite .qps-button{display:inline-block;padding:10px 14px;border:1px solid var(--line);border-radius:8px;font:600 13px system-ui;cursor:pointer;text-decoration:none;background:#191e25;color:#f3f4f6}.qpt-sprite .qps-button{background:#d8dce2;color:#101216}.qps-settings .qps-button{width:100%;margin-top:20px}.qps-file{position:absolute;width:1px;height:1px;clip-path:inset(50%)}.qps-drop:focus-within label,.qpt-sprite :focus-visible{outline:3px solid #adc6ed;outline-offset:3px}.qpt-sprite button:disabled{opacity:.4;cursor:default}.qps-list-head,.qps-output-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.qpt-sprite ol{padding:0;list-style:none}.qpt-sprite li{display:grid;grid-template-columns:40px minmax(0,1fr) repeat(3,32px);gap:6px;align-items:center;border-bottom:1px solid var(--line);padding:12px 0}.qpt-sprite li img{width:40px;height:40px;object-fit:contain;image-rendering:pixelated}.qpt-sprite li span{overflow-wrap:anywhere;font-size:12px}.qpt-sprite li button{padding:6px}.qpt-sprite #qps-status{min-height:25px;color:#c5dacb}.qps-previews{display:grid;grid-template-columns:minmax(0,2fr) minmax(180px,1fr);gap:20px}.qps-sheet,.qps-player{border:1px solid var(--line);border-radius:12px;padding:16px;min-width:0}.qps-sheet{overflow:auto;max-height:500px}.qps-sheet img{max-width:100%;height:auto;image-rendering:pixelated}.qps-sheet img,.qps-player canvas,.qpt-sprite li img{background:repeating-conic-gradient(#2a3038 0% 25%,#15191f 0% 50%) 50%/16px 16px}.qps-player{text-align:center}.qps-player canvas{max-width:100%;max-height:220px;object-fit:contain;image-rendering:pixelated}.qps-player p{font-size:12px}.qpt-sprite #qps-exports{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}.qps-article{max-width:850px;margin:60px auto;line-height:1.75}.qps-article h2,.qps-article h3{font-family:Georgia,serif}.qps-article a{text-decoration:underline}.qps-article code{overflow-wrap:anywhere}@media(max-width:680px){.qps-workspace,.qps-previews{grid-template-columns:1fr}.qps-input{border-right:0;border-bottom:1px solid var(--line);padding:18px}.qps-settings{padding:18px}.qps-output-head{align-items:flex-start;flex-direction:column}.qpt-sprite li{grid-template-columns:32px minmax(0,1fr) repeat(3,28px)}.qpt-sprite li img{width:32px;height:32px}}
.qps-sheet img{width:100%}.qps-player canvas{width:220px;height:220px;object-fit:contain}
.qpt-sprite .qps-settings > .qps-pair{clear:both;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.qpt-sprite .qps-pair > div{min-width:0}