:root{color-scheme:dark;font-family:Inter,Segoe UI,Arial,sans-serif;background:#111523;color:#ecf3ff}*{box-sizing:border-box}body{margin:0}.top{display:flex;justify-content:space-between;align-items:center;padding:13px 22px;background:#171d30;border-bottom:1px solid #333c56}.brand{display:flex;align-items:center;gap:12px}.brand small{display:block;color:#81a3c9;font-size:10px;letter-spacing:2px}.logo{font-size:29px;color:#6acfff}.back,.top a{color:#a9c1e6;text-decoration:none}.top nav{display:flex;gap:12px}.top nav a{padding:9px 13px;border-radius:9px}.top nav a.active{background:#293c62;color:#fff}.studio{display:grid;grid-template-columns:minmax(230px,270px) minmax(360px,1fr) minmax(230px,270px);gap:12px;padding:12px;min-height:calc(100vh - 62px)}.panel{background:#1a2234;border:1px solid #34415b;border-radius:12px;padding:15px;min-width:0}.left,.right{display:flex;flex-direction:column;gap:9px}.left h2,.right h2{font-size:15px;margin:12px 0 5px}.work{display:flex;flex-direction:column;gap:12px;min-width:0}button,select,input{background:#11192b;border:1px solid #42516b;color:#ebf4ff;border-radius:7px;font:inherit}button{padding:9px 12px;cursor:pointer}button:hover{background:#2d4168}button:disabled{opacity:.4;cursor:default}.primary{background:#1677ad;border-color:#3fbae4;font-weight:600}.subtle{color:#ffadb7}input[type=file]{max-width:100%}input:not([type=checkbox]):not([type=range]):not([type=color]):not([type=file]),select{width:100%;padding:8px}input[type=range]{display:block;width:100%}input[type=color]{width:100%;height:37px}.drop{position:relative;border:2px dashed #5b7fa9;padding:20px 12px;text-align:center;border-radius:10px;color:#9fbbdc;display:grid;gap:6px;overflow:hidden}.drop input{width:100%}.drop span{color:#7ad0ff;font-weight:700}.drop.dragging{border-color:#8fe4ff;background:#24415e}.grid2,.grid6{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.grid6{grid-template-columns:repeat(6,minmax(0,1fr))}label{font-size:12px;color:#b9c9e2;display:block}label input,label select{margin-top:5px}.check{display:flex;gap:6px;align-items:center}.buttons{display:flex;gap:7px;flex-wrap:wrap}.buttons.vertical{display:flex;flex-direction:column}.note{font-size:11px;line-height:1.5;color:#9bafcf;margin:4px 0}.transport{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.transport label{min-width:110px}.transport select{width:auto}.previews{display:grid;grid-template-columns:1fr 1fr;gap:12px}.preview{display:flex;align-items:center;flex-direction:column;gap:12px;overflow:hidden}.previewbar{align-self:stretch;display:flex;justify-content:space-between;gap:7px}.previewbar small{color:#91a7c6}canvas{max-width:100%;height:auto;border:1px solid #4c5671;border-radius:6px;image-rendering:pixelated;background-image:linear-gradient(45deg,#334057 25%,transparent 25%),linear-gradient(-45deg,#334057 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#334057 75%),linear-gradient(-45deg,transparent 75%,#334057 75%);background-size:22px 22px;background-position:0 0,0 11px,11px -11px,-11px 0}.timeline{min-height:210px}.bar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.bar h2{font-size:16px;margin:0}.bar h2 span{font-weight:400;color:#9db3cf;font-size:12px}.frames{display:flex;gap:9px;overflow-x:auto;padding:14px 1px;min-height:112px}.frame{flex:none;width:90px;border:2px solid #40506b;border-radius:9px;padding:5px;cursor:grab;position:relative;text-align:center;background:#172338}.frame.selected{border-color:#66d2ff}.frame.playing{box-shadow:0 0 0 2px #5afaab}.frame.disabled{opacity:.35}.frame img{width:72px;height:72px;object-fit:contain;background:#23304b;background-image:repeating-conic-gradient(#293e53 0% 25%,#192a40 0% 50%);background-size:14px 14px}.frame small{display:block;font-size:10px;white-space:nowrap;overflow:hidden}.frame.dragover{border-color:#9d7eff}pre{color:#b5dfd0;white-space:pre-wrap;max-height:180px;overflow:auto;font:12px/1.55 Consolas,monospace;margin:10px 0 0}#status{padding:12px;border-radius:9px;background:#152c35;color:#a8f7d6;font-size:12px;line-height:1.5}#groups{min-height:130px}#groups option{padding:5px}@media(max-width:1190px){.studio{grid-template-columns:240px 1fr}.right{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr)}.right h2,.right .buttons,.right #status,.right #exportHint{grid-column:1/-1}.grid6{grid-template-columns:repeat(3,1fr)}}@media(max-width:720px){.studio{grid-template-columns:1fr;padding:8px}.left,.right{grid-column:1}.right{display:flex}.top{padding:10px;flex-wrap:wrap}.top nav{gap:3px}.previews{grid-template-columns:1fr 1fr}.preview{padding:6px}.previewbar{display:block;font-size:11px}.previewbar small{display:block}.grid6{grid-template-columns:repeat(2,1fr)}.transport{justify-content:flex-start}.frame{width:76px}.frame img{width:60px;height:60px}}
/* Real external file drop surfaces for both desktop and touch-friendly import. */
.frames.external-drop,.work.external-drop,.drop.external-drop{outline:3px dashed #57f0cd;outline-offset:4px;background:#1c4853}
.frames:empty:before{content:"Drop PNG frames here";color:#8fdff2;border:1px dashed #4979ac;border-radius:8px;padding:28px;display:block;min-width:180px;text-align:center}
@media(max-width:720px){.top nav{width:100%;display:flex}.top nav a{flex:1;text-align:center;font-size:12px;padding:9px 7px}}

.frame{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}