:root{color-scheme:dark;--bg:#10161e;--panel:#1a232e;--line:#344252;--muted:#a6b3c2;--text:#eef4f7;--accent:#b9f276}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,"Noto Sans JP",system-ui,sans-serif;font-size:16px;line-height:1.6}button,input,select{font:inherit}button,a,input,select{touch-action:manipulation}button{cursor:pointer;border:1px solid var(--line);border-radius:7px;padding:8px 12px;background:#25313f;color:var(--text);font-size:14px;transition:background .15s}button:hover:not(:disabled){background:#364557}button:disabled{opacity:.4;cursor:not-allowed}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}header{border-bottom:1px solid var(--line);padding:20px max(24px,calc((100vw - 1340px)/2));display:flex;justify-content:space-between;gap:20px;align-items:center}.brand{color:var(--text);text-decoration:none;font-size:21px;font-weight:750;display:flex;gap:12px;align-items:center}.mark{color:var(--accent);font-size:28px}.badge{font-size:11px;letter-spacing:1.5px;padding:4px 7px;border:1px solid var(--line);border-radius:4px;color:var(--muted)}.local{font-size:13px;color:var(--muted)}main{max-width:1388px;margin:auto;padding:30px 24px}.heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.eyebrow{color:var(--accent);font-size:12px;font-weight:700;letter-spacing:2px;margin:0 0 4px}h1{font-size:28px;letter-spacing:.02em;margin:0}h2{font-size:16px;margin:0;display:flex;align-items:center;gap:12px}h2>span{color:var(--accent);font-family:monospace;font-weight:400}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 370px;gap:24px}.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:22px;margin-bottom:22px}.section-title{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:18px}.meta{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}.drop{min-height:165px;border:1px dashed #5e7185;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-direction:column;cursor:pointer;background:#17212b;gap:3px}.drop:hover,.drop.over{border-color:var(--accent);background:#20312b}.drop span:not(.upload-icon),.drop small{font-size:13px;color:var(--muted)}.upload-icon{font-size:26px;color:var(--accent);line-height:1.3}.drop strong{font-size:16px}.drop small{margin-top:6px}.hint{font-size:13px;color:var(--muted);line-height:1.65;margin:12px 0 0}.assets{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px;margin-top:14px}.asset{padding:6px;text-align:left;min-width:0;position:relative}.asset img{width:100%;height:70px;object-fit:contain;image-rendering:pixelated;background:#111820;border-radius:4px}.asset span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;margin-top:4px}.asset::after{content:'＋';position:absolute;right:9px;top:5px;color:var(--accent)}.sequence-panel{min-height:330px}.sequence-tools{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}.quiet{background:transparent;color:var(--muted)}.sequence{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:9px;max-height:480px;overflow:auto;padding:3px}.empty{grid-column:1/-1;padding:34px 5px;text-align:center;color:var(--muted);font-size:15px}.empty small{font-size:13px;display:inline-block;margin-top:8px}.frame{padding:6px;position:relative;min-width:0}.frame.selected{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.frame.dragover{border-left:4px solid var(--accent)}.frame img{height:64px;width:100%;object-fit:contain;background:#10161e;image-rendering:pixelated}.frame .num{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}.selection-tools{display:flex;align-items:center;gap:7px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:14px;margin-top:14px}.selection-tools span{font-size:13px;margin-right:auto}.stage{height:210px;border-radius:8px;display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid #3b4550}.checker{background-color:#e2e6e9;background-image:linear-gradient(45deg,#c4ccd2 25%,transparent 25%),linear-gradient(-45deg,#c4ccd2 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#c4ccd2 75%),linear-gradient(-45deg,transparent 75%,#c4ccd2 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}.stage img{max-width:100%;max-height:100%;object-fit:contain;image-rendering:pixelated;width:auto;height:auto}.stage span{color:#354353;font-size:14px;background:#e2e6e9e8;padding:8px 12px;border-radius:6px}.preview-controls{display:flex;align-items:center;gap:12px;margin-top:12px}.inline{display:flex;align-items:center;gap:5px;font-size:12px;margin-left:auto}.segmented{display:flex;background:#101820;padding:4px;border-radius:8px;margin-bottom:20px}.segmented button{border:0;background:transparent;flex:1}.segmented button.active{color:var(--accent);background:#2b3a34}label:not(.drop):not(.inline):not(.loop){display:block;font-size:14px;margin-bottom:6px}input[type=number],select{width:100%;background:#101820;border:1px solid #46566a;border-radius:7px;color:var(--text);padding:10px 12px;font-size:18px;min-width:0}select{font-size:14px;padding:12px 6px}.fields{display:grid;grid-template-columns:1fr 1.35fr;gap:12px}.fit{width:100%;margin-top:12px;color:var(--accent);background:#26362e;border-color:#4c6741}.result-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;border-top:1px solid var(--line);padding-top:17px;margin-top:20px}.result-stats span{display:block;font-size:12px;color:var(--muted)}.result-stats strong{font-size:24px;font-weight:600;font-variant-numeric:tabular-nums}.result-stats small{font-size:12px;font-weight:400;color:var(--muted)}.loop{display:flex;align-items:center;gap:12px;margin:19px 0 0;padding-top:17px;border-top:1px solid var(--line);font-size:14px}.loop small{display:block;font-size:12px;color:var(--muted)}input[type=checkbox]{accent-color:var(--accent);width:17px;height:17px}.primary{background:var(--accent);color:#1b2b0f;width:100%;display:flex;justify-content:space-between;font-size:16px;font-weight:750;margin-top:18px;padding:13px 16px;border-color:var(--accent)}.primary:hover:not(:disabled){background:#d0ff99}.download{display:block;text-align:center;color:var(--accent);border:1px solid var(--accent);padding:12px;border-radius:7px;margin-top:14px;text-decoration:none}progress{width:100%;accent-color:var(--accent);margin:15px 0}.limits{border-top:1px solid var(--line);padding:20px 0;color:var(--muted);font-size:13px}.limits summary{cursor:pointer;font-size:14px}.limits div{max-width:950px}footer{font-size:13px;color:var(--muted);display:flex;justify-content:space-between;padding:16px 0}#message{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);max-width:min(640px,90vw);background:#e6f2db;color:#1b2b0f;padding:14px 22px;border-radius:9px;box-shadow:0 8px 35px #0008;font-size:14px;z-index:5}#message.error{background:#ffe0d8;color:#642218}[hidden]{display:none!important}@media(max-width:1000px){.workspace{grid-template-columns:minmax(0,1fr) 330px;gap:16px}.panel{padding:16px}.local{display:none}}@media(max-width:760px){main{padding:22px 15px}.workspace{grid-template-columns:1fr}.heading{align-items:flex-start;gap:12px}h1{font-size:23px}header{padding:14px 18px}.badge{display:none}.panel{margin-bottom:16px}aside{display:grid;grid-template-columns:1fr}.stage{height:250px}.heading .quiet{font-size:12px}footer{flex-direction:column;gap:6px}footer span{display:block}}

.intro{font-size:16px;line-height:1.85;color:var(--muted);margin:0 0 18px;overflow-wrap:anywhere}.intro p{margin:0}.heading{margin-bottom:14px}.limits{margin-bottom:22px;border-bottom:1px solid var(--line);padding:14px 0}.brand{flex-wrap:wrap}.heading>div{min-width:0}.heading h1{overflow-wrap:anywhere}.heading #reset{flex-shrink:0}footer{flex-wrap:wrap;gap:8px 24px}footer span{overflow-wrap:anywhere}@media(max-width:480px){.heading{flex-wrap:wrap}.heading #reset{margin-left:auto}.brand{font-size:19px}.intro{font-size:16px}}

.preview-panel .section-title{flex-wrap:wrap;margin-bottom:8px}.preview-panel #reset{margin-left:auto;flex-shrink:0}.preview-dimensions{margin:0 0 12px;text-align:right}.pixel-option{margin:14px 0 0;justify-content:flex-start;font-size:14px}.danger{color:#ffe6df;background:#673b35;border-color:#b36b5e}.danger:hover:not(:disabled){background:#81473f}.selection-tools #selectedLabel:empty{display:none}.selection-tools{gap:8px}.selection-tools button{flex-shrink:0}

.workspace-actions{display:flex;justify-content:flex-end;margin:0 0 14px}.asset-card{min-width:0;display:flex;flex-direction:column;gap:5px}.asset-card .asset{width:100%;flex:1}.asset-delete{font-size:13px;padding:4px 8px;color:#ffe6df;background:#54352f;border-color:#925b50}.asset-tools{display:flex;justify-content:flex-end;margin-top:14px}.stage img{image-rendering:auto}

.canvas-option{border:1px solid var(--line);border-radius:8px;padding:14px;margin-bottom:14px}.canvas-option>label{cursor:pointer}.canvas-option .fields{grid-template-columns:1fr 1fr;margin-top:14px}.canvas-option .hint{font-size:14px}.canvas-anchors{display:grid;grid-template-columns:repeat(3,44px);gap:5px;margin:8px 0}.canvas-anchors button{height:40px;padding:4px;font-size:20px}.canvas-anchors button[aria-pressed=true]{background:var(--accent);color:#1b2b0f;border-color:var(--accent)}#anchorLabel{font-size:14px}